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

/* main */
#main{
	position:relative;
	margin-bottom:30px;
	background-color:#E3DBC4;
	background-image:url(../img/index/main_bg.jpg);
	background-repeat:repeat-x;
	background-position:left bottom;
}
#main_detail{
	position:absolute;
	left:50%;
	top:30px;
	z-index:100;
	width:980px;
	margin-left:-490px;
}
#main_detail h1{
	margin-bottom:30px;
}
#main_img{
	max-width:684px;
	margin:0 auto;
	text-align:right;
	padding-top:50px;
	padding-left:336px;
	padding-right:10px;
}
#main_img img{
	max-width:800px;
	width:100%;
	height:auto;
}

/* contents */
#contents{
	width:980px;
	margin:0 auto 30px auto;
	padding:0 10px;
}
#contents ul{
	overflow:hidden;
}
#contents ul li{
	position:relative;
	float:left;
	width:475px;
	height:273px;
	margin-right:30px;
	margin-bottom:30px;
}
#contents ul li:hover{
	opacity:0.6;
	filter:alpha(opacity=60);
}
#contents ul li img{
	opacity:1.0 !important;
	filter:alpha(opacity=100) !important;
}
#contents ul li a .new{
	position:absolute;
	top:0;
	right:0;
}
#contents ul li a .new img.pc{
	display:block;
}
#contents ul li a .new img.sp{
	display:none;
}

@media screen and (max-width: 1000px) {
/* main */
#main_detail{
	left:10px;
	top:30px;
	width:auto;
	margin-left:0;
}

/* contents */
#contents{
	width:auto;
}
#contents ul li{
	width:49%;
	margin-right:2%;
	margin-bottom:2%;
	height:auto;
}
#contents ul li img{
	width:100%;
	height:auto;
}
#contents ul li a .new{
	width:20%;
}
#contents ul li a .new img{
	width:100%;
	height:auto;
}
}

@media screen and (max-width: 640px) {
/* main */
#main{
	margin-bottom:10px;
	background-image:none;
	background:#E3DBC4;
	background:linear-gradient(#E3DBC4, #D6CDAE);
	background:-moz-linear-gradient(top, #E3DBC4, #D6CDAE);
	background:-webkit-linear-gradient(top, #E3DBC4, #D6CDAE);
}
#main_detail h1{
	width:92px;
	margin-bottom:10px;
}
#main_detail h1 img{
	width:100%;
	height:auto;
}
#main_detail{
	left:10px;
	top:10px;
}
#main_img{
	padding-top:20px;
	padding-left:115px;
}

/* contents */
#contents ul li a .new img.pc{
	display:none;
}
#contents ul li a .new img.sp{
	display:block;
}
}