@charset "UTF-8";
/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/

@media all and (min-width: 768px) {	
#container{
	width:980px;
	margin:0 auto;
	padding:30px 0;
	}
#leftBox{
	width:660px;
	background:url(../img/wrap.jpg);
	float:left;
	
	}
#leftBox .unit{
	margin:10px;
	background:#fefcf6;
	}
#leftBox .unit .inner{
	padding:30px;
	}
#rightBox{
	width:300px;
	float:left;
	margin-left:20px;
	}
}
@media all and (max-width: 767px) {
#container{
	width:100%;
	margin:0 auto;
	padding:20px 0;
	}
#leftBox{
	width:94%;
	background:url(../img/wrap.jpg);
	padding:6px 0;
	margin:0 auto 20px;
	}
#leftBox .unit{
	margin:0 6px;
	background:#fefcf6;
	}
#leftBox .unit .inner{
	padding:10px;
	}
#rightBox{
	width:100%;
	margin:0 auto;
	text-align:center;
	}
}

/* -----------------------------------------------------------
   HEADER
------------------------------------------------------------*/
#wrap header a{
	display:block;
	}
#wrap header img{
	position:absolute;
	top:0;
	left:0;
	}

@media all and (min-width: 768px) {
#wrap header{
	background:url(../img/bg_header.jpg) repeat-x;
	}
#wrap header{
	width:100%;
	height:140px;
	}
#wrap header a{
	width:980px;
	height:140px;
	background:url(../img/header.jpg) center center no-repeat;
	margin:0 auto;
	position:relative;
	text-indent:-9999px;
	}
#wrap header img{
	width:980px;
	height:140px;
	}

}
@media all and (max-width: 767px) {
#wrap header a{
	background:url(../img/header_smp.jpg?)  center center no-repeat;
	background-size:cover;
	overflow:hidden;
	height: 0;
	margin:0 auto;
	padding-top:29.68%;
	position:relative;
}
}

/* -----------------------------------------------------------
   BANNER-AREA SECOND-RIGHTAREA
------------------------------------------------------------*/
#contents ul a{
	display:block;
	height:0;
	overflow:hidden;
	}
#contents ul a:hover{
	filter: alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;
	}


@media all and (min-width: 768px) {
#contents ul{
	list-style:none;
	}
#contents li{
	width:300px;
	background-color:#000;
	margin-bottom:10px;
	}
#contents ul a{
	background-size:cover;
	}
#contents #report a{ background-image:url(../img/second_btn.jpg?); padding-top:36.66%;} 
#contents #comment a{ background-image:url(../img/second_btn.jpg); background-position:0 -110px; padding-top:36.66%;} 
#contents #chart a{ background-image:url(../img/second_btn.jpg); background-position:0 -220px; padding-top:36.66%;} 
#contents #part a{ background-image:url(../img/second_btn.jpg); background-position:0 -330px; padding-top:36.66%;} 
#contents #interview a{ background-image:url(../img/second_btn.jpg?); background-position:0 -440px; padding-top:36.66%;} 
#contents #column a{ background-image:url(../img/second_btn.jpg); background-position:0 -550px; padding-top:36.66%;} 
#contents #theme_bbs a{ background-image:url(../img/second_btn.jpg); background-position:0 -660px; padding-top:36.66%;} 
#contents #gallery a{ background-image:url(../img/second_btn.jpg); background-position:0 -860px; padding-top:36.66%;} 
#contents #line_stamp a{ background-image:url(../img/second_btn.jpg); background-position:0 -770px; padding-top:30%;} 
#contents #spmovie a{ background-image:url(../img/second_btn.jpg); background-position:0 -970px; padding-top:30%;} 
#contents #tbsfree a{ background-image:url(../img/second_btn.jpg); background-position:0 -1060px; padding-top:30%;} 
#contents #odm a{ background-image:url(../img/second_btn.jpg?); background-position:0 -1150px; padding-top:30%;} 
#contents #goods a{ background-image:url(../img/second_btn.jpg); background-position:0 -1240px;padding-top:30%; } 
}
@media all and (max-width: 767px) {
#contents ul{
	overflow:hidden;
	position:relative;
	margin-bottom:20px;
	}
#contents li{
	width:100%;
	margin:0 auto 6px;
	}
#contents ul a{
	width:90%;
	margin:0 auto;
	background-size:cover;
	padding-top:17.1875%;
	}
#contents #report a{ background-image:url(../img/smpbn_report.jpg); } 
#contents #comment a{ background-image:url(../img/smpbn_comment.jpg); } 
#contents #chart a{ background-image:url(../img/smpbn_chart.jpg); } 
#contents #part a{ background-image:url(../img/smpbn_part.jpg); } 
#contents #interview a{ background-image:url(../img/smpbn_interview.jpg?); } 
#contents #column a{ background-image:url(../img/smpbn_column.jpg); } 
#contents #theme_bbs a{ background-image:url(../img/smpbn_themebbs.jpg); } 
#contents #gallery a{ background-image:url(../img/smpbn_gallery.jpg); } 
#contents #line_stamp a{ background-image:url(../img/smpbn_line.jpg); } 
#contents #tbsfree a{ background-image:url(../img/smpbn_tbsfree.jpg); padding-top:31.25%;} 
#contents #spmovie a{ background-image:url(../img/smpbn_spmovie.jpg); } 
#contents #odm a{ background-image:url(../img/smpbn_odm.jpg?); } 
#contents #goods a{ background-image:url(../img/smpbn_goods.jpg); } 
}

/* -----------------------------------------------------------
   IMAGE
------------------------------------------------------------*/
.Img{
	position:relative;
	}
.Img img{
	 width:100%;
	 height:100%;
	 position:absolute;
	 top:0;
	 left:0;
	 }
	 
/* -----------------------------------------------------------
   BTN
------------------------------------------------------------*/

.btn a{
	background-color:#61a680;	
	color:#fff;
	letter-spacing:0.06em;
	font-weight:bold;
	text-decoration: none;
	text-align:center;
	border-radius:4px;
	}
.btn a:hover{
	filter: alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;
	}
@media all and (min-width: 768px) {
.btn{
	
	margin:20px 0!important;
	}
.btn a{
	padding:15px;
	}
}
@media all and (max-width: 767px)  {
.btn{
	margin:10px auto!important;
	}
.btn a{
	padding:10px 20px;
	}
}


/* -----------------------------------------------------------
   TITLE
------------------------------------------------------------*/
#leftBox #title{
	background:url(../img/bg_title.jpg) repeat-x;
	}

@media all and (min-width: 768px) {
#leftBox #title h1{
	padding:30px 0;
	}

}
@media all and (max-width: 767px) {
#leftBox #title h1{
	padding:15px 0;
	font-weight:normal;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:120%;
	color:#6c442b;
	text-align:center;
	}
}

/* -----------------------------------------------------------
   BACKNUMBER
------------------------------------------------------------*/
#Bknum_ver1 ul{
	list-style:none;
	}
	
@media all and (min-width: 768px) {
#Bknum_ver1{
	padding:15px 25px ;
	background:url(../img/bg_bknum.png);
	}
#Bknum_ver1 h4{
	background:url(../img/bknum_parts.png) no-repeat;
	height:40px;
	text-indent:-9999px;
	margin-bottom:10px;
	}
#Bknum_ver1 li{
	width:190px;
	float:left;
	margin:0 10px 15px 0;
	text-align:center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
#Bknum_ver1 a{
	color:#7a4c31;
	}
#Bknum_ver1 a:hover{
	filter: alpha(opacity=60);-moz-opacity:0.60;opacity:0.60;
	text-decoration:none;
	}
#Bknum_ver1 li:nth-child(3n){
	margin-right:0;
	}
#Bknum_ver1 .thum{
	display:block;
	width:190px;
	height:0;
	background-size:cover;
	padding-top:65.51%;
	text-indent:-9999px;
	margin-bottom:8px;
	}
#Bknum_ver1 .vol{
	color:#d0682a;
	}
}

@media all and (max-width: 767px) {
#Bknum_ver1{
	background:url(../img/bg_bknum.png);
	padding:12px;
	}
#Bknum_ver1 h4{
	color:#7a4c31;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:110%;
	padding:5px 0 15px 5px;
	}
#Bknum_ver1 ul{
	width:100%;
	}
#Bknum_ver1 li{
	width:32%;
	float:left;
	margin-right:2%;
	text-align:center;
	margin-bottom:8px;
	}
#Bknum_ver1 a{
	color:#7a4c31;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:75%;
	font-weight:bold;
	}
#Bknum_ver1 a:hover{
	filter: alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;
	}
#Bknum_ver1 li:nth-child(3n){
	margin-right:0;
	}
#Bknum_ver1 .thum{
	display:block;
	width:100%;
	height:0;
	background-size:cover;
	padding-top:65.78%;
	text-indent:-9999px;
	margin-bottom:3px;
	}
#Bknum_ver1 .vol{
	color:#d0682a;
	}
}