@charset "utf-8";


/*============================
 PHOTO
============================*/
.photo #contents #main{
	background:url(../../images/photo/bg-text.gif) no-repeat;
}



/*  thumb-area
-----------------------------*/

.photo #thumb-area{
	margin-top:50px;
	width:660px;
	overflow:hidden;
	position:relative;
	visibility:hidden;
}
.photo #thumb-area dl{
	float:left;
	width:161px;
	height:157px;
	background-color:#000;
	margin-right:1px;
	margin-bottom:1px;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}
.photo #thumb-area dl a:hover{
	background:none;
	box-shadow:none;
}
.photo #thumb-area dl dt{
	margin-left:8px;
	margin-top:8px;
}
.photo #thumb-area dl dd.text{
	position:absolute;
	top:156px;
	left:0px;
	background:url(../../images/photo/black.png);
	width:140px;
	color:#FFF;
	padding:10px;
}
.photo #thumb-area dl dd.look{
	position:absolute;
	top:75px;
	left:83px;
	width:34px;
	height:34px;
	display:none;
}

.photo #thumb-area dl dd.look img.megane{
	display:none;
	position:absolute;
	top:6px;
	left:6px;
}

.photo #thumb-area dl dd.black-cover{
	position:absolute;
	top:0;
	left:0;
	background-color:#000;
}




/*  detail-area
-----------------------------*/
.photo #cover-area{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../../images/photo/black.png);
	display:none;
	z-index:3;
	
	/* IE! */
	background: none\9;
	/background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/photo/black.png', sizingMethod='scale');
	/* IE! */
}

.photo #black-area{
	background-color:#000;
	height:440px;
	width:0;
	position:fixed;
	top:0;
	left:0;
	z-index:4;
}

/* detail-area */
.photo #detail-area{
	position:fixed;
	top:0;
	left:0;
	width:700px;
	z-index:5;
}
.photo #detail-area #photolist{
	margin:0 auto;
	position:relative;
}
.photo #detail-area #photolist li{
	text-align:center;
	width:100%;
	position:absolute;
	left:0;
	top:0;
}
.photo #detail-area #photolist li span{
	background-color:#000;
	display:inline-block;
	
}

/* info-area */
.photo #detail-area #info-area{
	position:absolute;
	top:0;
	left:0;
	color:#FFF;
}
.photo #detail-area #info-area #text-area{
	width:160px;
	position:absolute;
	bottom:0;
	left:0;
}
.photo #detail-area #info-area #text-area dt{
	border-bottom:1px solid #fff;
	margin-bottom:15px;
	padding-bottom:7px;
	font-size:107%;
}


/* ctl */
.photo #detail-area #ctl{
	position:relative;
}
.photo #detail-area #ctl li{
	position:absolute;
	left:320px;
	text-align:center;
	width:100%;
}
.photo #detail-area #ctl li span{
	cursor:pointer;
	display:block;
	width:70px;
	
	padding-bottom:3px;
}
.photo #detail-area #ctl li#arrow-over{
	top:-42px;
	padding-top:3px;
	background:url(../../images/photo/arrow-over-color.png) no-repeat 13px 0px;
}
.photo #detail-area #ctl li#arrow-under{
	top:423px;
	padding-top:4px;
	background:url(../../images/photo/arrow-under-color.png) no-repeat 13px 0px;
}
.photo #detail-area #ctl li#arrow-over:hover img,
.photo #detail-area #ctl li#arrow-under:hover img{
	visibility:hidden;
}

.photo #close-btn{
	position:fixed;
	top:0;
	right:0;
	z-index:5;
	overflow:hidden;
	width:40px;
	height:40px;
	cursor:pointer;
}
.photo #close-btn img{
	margin-left:50px;
}


/*============================

 -- media query --

============================*/

@media only screen and
(max-width : 900px) {
	.photo #thumb-area{
		width:100%;
	}
	.photo #thumb-area dl{
		width:159px;
	}
	.photo #thumb-area dl dt{
		margin-left:7px;
		margin-top:7px;
	}

}