@charset "utf-8";

/* -------------------------------------------------------------------------- */


#contents {
	background: none;
}

#keyvisual {
	height: 400px;
	position: relative;
	z-index: -1;
	background-color: #9F9485;
	border-radius: 5px;
}

#keyvisual li {
	position: absolute;
}

#keyvisual figcaption {
	position: absolute;
	top: 280px;
	left: 390px;
	z-index: 100;
}

#keyvisual figcaption.animate {
	overflow: hidden;
	background-image: url(../img/keyvisual_copy_sprite3.png);
}

#keyvisual ul:before {
	position: absolute;
	display: block;
	content: ".";
	width: 940px;
	height: 400px;
	background-image: url(../img/image_frame_w940px_h400px.png);
	font-size: 0;
	line-height: 0;
	opacity: 0.95;
	z-index: 50;
}

#keyvisual ul img {
	border-radius: 5px;
}

#recommend {
	vertical-aling: top;
	margin-top: 20px;
	position: relative;
}

#recommend li {
	display: inline-block;
	width: 300px;
	margin: 0 20px 0 0;
	padding: 0;
	vertical-align: top;
}

#recommend li:nth-child(3n) {
	margin-right: 0px;
}

#recommend h1 {
	color:#FFFFFF;
	font-weight: bold;
	padding: 8px 0 5px;
}

#recommend p {
	color:#FFFFFF;
	font-size: 0.95em;
	line-height: 16px;
}

#recommend figure {
	line-height: 0;
	font-size: 0;
	background-image: url(../img/animation_bg_2_w.gif);
	border-radius: 5px;
}

#recommend a {
	text-decoration: none;
}

#recommend a:before {
	position: absolute;
	display: block;
	content: ".";
	width: 300px;
	height: 140px;
	background-image: url(../img/image_frame_w300px_h140px.png);
	font-size: 0;
	line-height: 0;
	z-index: 1;
}

#recommend a img {
	border-radius: 5px;
	opacity: 1;
	-webkit-transition: opacity 0.3s ease;
	   -moz-transition: opacity 0.3s ease;
	        transition: opacity 0.3s ease;
}

#recommend a:hover img {
	opacity: 0.825;
}



/* -------------------------------------------------------------------------- */






/* ========================================================================== */
/* underIE9                                                                   */
/* ========================================================================== */

.ie8 .frame {
	position: absolute;
	z-index: 500;
}

.ie6 #recommend li,
.ie7 #recommend li {
	float: left;
}

.ie8 #keyvisual {
	/* IE8 */
	/*behavior: url(/common/js/lib/PIE.htc); 
	position: relative;*/
}