/* ==================================================================
CSS information
style info :共通（汎用クラス）
================================================================== */

html,body { background-color:#000; -webkit-text-size-adjust: none; }

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }

/*img { max-width:100%; height:auto; }*/

div, h1, h2, h3, h4, h5, p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contents ul, #contents li, #contents dl, #contents dt, #contents dd { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contents img { max-width: 100%; height: auto;}
@media screen and (max-width: 640px) {
}


/*テンプレート内にある記述*/
/* ------------------------
　▼contents　コンテンツ
--------------------------*/

#contents {
	margin: 0 auto;
	background: #fff;
	color:#000;
}

@media screen and (max-width: 640px) {
	#contents {
		width:100%;
	}
}
/* ------------------------
　▲contents　コンテンツ
--------------------------*/



/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents:after { content: ""; display: block; clear: both; }
#contents { zoom:1; }
#contents { overflow:hidden; background: #000919 url(../img/bg_r_sp.jpg) center top repeat; width: 100%; }
#contents-wrap { width: 100%; background: url(../img/bg_sp.jpg) center top no-repeat; background-size: contain;}
@media screen and (min-width: 641px) {
#contents { background: #000919 url(../img/bg.jpg) center top no-repeat; background-size: 100%; }
#contents-wrap { background: none;}
}
@media screen and (min-width: 1601px) {
#contents { background: #000919 url(../img/bg.jpg) center top no-repeat; background-size: 1600px; }
}
#contents {
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}





/* --------------------------------------------------------
#gnaviBlock
-------------------------------------------------------- */
#gnaviBlock { position: relative; display: block; padding: 7% 3.90625% 4.6%; /*H:440*/ display: none;}

#gnaviBlock #logo { width: 64.75%; height: auto; text-align: center; margin: 0 auto 20px; padding-top: 0%;}

#gnaviBlock ul { letter-spacing: -.45em; font-size: 12px; vertical-align: top; }
#gnaviBlock ul li { letter-spacing: normal; display: inline-block; vertical-align: top; position: relative; }

#gnaviBlock ul li.inew:before { content: ""; display: block; background: url(../img/icon_new_sp.png) center top no-repeat transparent; background-size: contain; width: 38%; height: 100%; max-height: 32px; position: absolute; top: -11.0%; left: 31%;}
#gnaviBlock ul li.iupd:before { content: ""; display: block; background: url(../img/icon_upd_sp.png) center top no-repeat transparent; background-size: contain; width: 38%; height: 100%; max-height: 32px; position: absolute; top: -11.0%; left: 31%;}


@media screen and (max-width: 640px) {
header { z-index: 2000; position: relative;}
.top #gnaviBlock-wrap { margin-bottom: 4%; position: relative;}

.top #gnaviBlock { background: url(../img/gnavi_bg_sp.jpg) center top no-repeat; background-size: cover; display: block;}
.lower #gnaviBlock { background: url(../img/bg_sp.jpg) center top no-repeat; position: fixed; top: 0; left: 0; padding-top: 15%; z-index: 999; }
.top #gnaviBlock #logo { display: none;}
.top #gnaviBlock .gnavi0 { display: none;}
#gnaviBlock #spmenu_ti { margin-bottom: 3%;}
#gnaviBlock ul li { width: 47.9662%; max-width: 283px; margin-bottom: 4%;}
.top #gnaviBlock ul li:nth-child(even) { margin-right: 2.0338%;}
.top #gnaviBlock ul li:nth-child(odd) { margin-left: 2.0338%;}
.lower #gnaviBlock ul li:nth-child(odd) { margin-right: 2.0338%;}
.lower #gnaviBlock ul li:nth-child(even) { margin-left: 2.0338%;}

}

@media screen and (min-width: 641px) {
#gnaviBlock-wrap { background: url(../img/gnavi_bg_r.png) center top repeat-x; }
#gnaviBlock { display: block; position: relative; background: url(../img/gnavi_bg.jpg) center top no-repeat; background-size: contain; padding: 1.3% 0% 1.3%; max-height: 112px; /*H:440*/ border-top: 1px solid #000; width: 100%; }

#gnaviBlock #logo { display: block; position: absolute; top: 1.7%; left: 2%; width: 14.0714%; max-width: 197px;}
#gnaviBlock #spmenu_ti { display: none;}
#gnaviBlock ul { position: relative; left: 18.3571%;}
#gnaviBlock ul li.gnavit { display: none;}
#gnaviBlock ul li { width: 10.8572%; max-width: 152px; margin-right: 0.6428%;}

#gnaviBlock ul li.inew:before { background: url(../img/icon_new_pc.png) center top no-repeat transparent; background-size: contain; width: 40.13158%; height: 100%; max-height: 16px; position: absolute; top: -9.0%; left: 30%;}
#gnaviBlock ul li.iupd:before { background: url(../img/icon_upd_pc.png) center top no-repeat transparent; background-size: contain; width: 40.13158%; height: 100%; max-height: 16px; position: absolute; top: -9.0%; left: 30%;}

}


#spmenu { position: absolute; top: 10px; right: 10px; width: 14.375%; height: auto; z-index: 1000; display: block; }
#spmenu.fixed { position:fixed; }
#spmenu span { display:block; width:100%; height:auto; }
@media screen and (min-width: 641px) {
#spmenu { display: none;}
}



/* --------------------------------------------------------
nowloading
-------------------------------------------------------- */
#nowloading { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; z-index: 9900; }
#loadingicon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; text-align: center;  z-index: 9901; }


/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
.pc { display: none; }
.sp { display: block; }
@media screen and (min-width: 641px) {
.pc { display: block; }
.sp { display: none; }
}

/*Link Style (Base)
----------------------------------------------------*/
a:link { text-decoration:none; color:#ffffff; }
a:visited { text-decoration:none; color:#ffffff; }
a:hover { text-decoration:underline; color:#ffffff; }
a:active { text-decoration:none; color:#ffffff; }
a:focus { outline:none; }

/*clearfix　NN未対応版
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom:1; }

.cr { clear:both; }


/*pagetop
----------------------------------------------------*/
@media screen and (min-width: 641px) {
.pageTop { width:100%; text-align:right; }
.pageTop a { display: inline-block; text-align: right; margin-right: 15px; width: 117px; height: 40px; position: relative; }
.pageTop img { }
}



/*Float Style
----------------------------------------------------*/
.float_l { float:left; }
.float_r { float:right; }

/*Text align Style
----------------------------------------------------*/
.text_c { text-align:center; }
.text_l { text-align:left; }
.text_r { text-align:right; }





/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forSS
---------------------------------------------------------------------------------------------------------------- */

.forSS #cboxContent { background: none; /*margin-top: 0;*/}
.forSS #cboxLoadedContent { background: none; padding: 0;}
#cboxOverlay { background: #000;}

.forSS #cboxPrevious, .forSS #cboxNext, .forSS #cboxClose { width: 30px; height: 30px; }
.forSS #cboxClose { background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: -15px; right: 6px;}

@media screen and (min-width: 641px) {
.forSS #cboxPrevious, .forSS #cboxNext, .forSS #cboxClose { width: 61px; height: 61px; }
.forSS #cboxClose { top: -30px; right: 6px;}
}

/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forMV
---------------------------------------------------------------------------------------------------------------- */

.forMV #cboxContent { background: none; /*margin-top: 0;*/}
.forMV #cboxLoadedContent { background: none; padding: 0;}
#cboxOverlay { background: #000!important;}
.forMV .cboxIframe { background: none;}
.forMV #cboxClose { width: 30px; height: 30px; }
.forMV #cboxClose { background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: -15px; right: 6px;}
.forMV #cboxClose { background: none;}
@media screen and (min-width: 641px) {
.forMV #cboxClose { width: 61px; height: 61px; }
.forMV #cboxClose { top: -30px; right: 6px;}
}