@charset "utf-8";
/* CSS Document */

/* 
-----------------------------------------*/
.gallery {
	width:470px;
	height:450px;
	margin-bottom:20px;
	overflow-y: scroll;
	float:right;
}
.gallery ul {
	overflow:hidden;
}
.gallery li {
	width:100px;
	height:100px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	background:#EEE;
	text-align:center;
	vertical-align:middle;
	line-height:100px;
}
.gallery li img {
	vertical-align:middle;
	line-height:100px;
	max-width:100px;
	max-height:100px;
}
.gallery li a{
	display:block;
}

.photo{
	width:450px;
	height:450px;
	text-align:center;
	vertical-align:middle;
	line-height:450px;
	background:#EEE;
	overflow:hidden;
	float:left;
}
.photo img{
	vertical-align:middle;
	max-width:450px;
	max-height:450px;
	line-height:450px;
}

/* mod_gallery(複数設置の場合)
-----------------------------------------*/
.mod_gallery{
 margin:20px 0 20px 0;
}
/* .mod_gallery_navi */
.mod_gallery_navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_gallery_navi li a{
	display:block;
}
.mod_gallery_navi li a:link    {}
.mod_gallery_navi li a:visited {}
.mod_gallery_navi li a:hover   {opacity:0.8;}
.mod_gallery_navili a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_gallery_navi li a:hover img {filter:alpha(opacity=80);}

/* mod_gallery_photo */
.mod_gallery_photo{
	width:710px;
	height:710px;
	margin:20px 0 0 0;
}
.mod_gallery_photo img{
}
@media screen and (max-width:800px) {
.gallery {
	width:100%;
	margin-top:20px;
	height:350px;
}
.photo {
	width:100%;
	height:auto;
	float:none;
}
.photo img {
	max-width:90%;
	/*max-height:100%;*/
}
}
@media screen and (max-width:600px) {
.gallery {
	width:100%;
	margin-top:20px;
 height:219px;
/*	height:450px;*/
}	
.photo {
	line-height:300px;	
}	
.photo img{
	vertical-align:middle;
	max-width:300px;
	max-height:300px;
	line-height:300px;
}
}