@charset "UTF-8";
/* ==================================================================
CSS information
style info :共通（汎用クラス）
================================================================== */

html,body { -webkit-text-size-adjust: none; }

html { font-size: 62.5%; }
body { 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, #contents a { -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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
div, ul, dl, li, h2, h3, h4, h5, p { position: relative; } 

img {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}

@media screen and (max-width: 640px) {
#contents img { width: 100%; height: auto;}
}

/*テンプレート内にある記述*/
/*http://www.jp.square-enix.com/common/templates/css/template_rsp.css*/
body#black a:link,
body#black a:visited,
body#black a:hover,
body#black a:active {
	color:#ffffff
}
/* ------------------------
　▼contents　コンテンツ
--------------------------*/
#contents {
	margin: 0 auto;
	background: #fff;
	color:#000;
}
@media screen and (max-width: 640px) {
	#contents {
		width:100%;
	}
}
/* ------------------------
　▲contents　コンテンツ
--------------------------*/

/*上記を上書き*/
#contents {
	overflow:hidden;
}




/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents:after { content: ""; display: block; clear: both; }
#contents { zoom:1; background: #000; }

#logo_s { padding: 2.666667% 25.6%; background: #000;}
@media screen and (min-width: 641px) {
#logo_s { display: none;}
}

.pageBack { padding: 5.333333% 22.666667%;}
@media screen and (min-width: 641px) {
.pageBack { padding: 2.857142% 0 5%; text-align: center; }
}


/* --------------------------------------------------------
nowloading
-------------------------------------------------------- */
#nowloading { position: fixed; width: 100%; height: 100%; height: 100%; top: 0px; left: 0px; background: #000; z-index: 10; }
#loadingicon { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; text-align: center;  z-index: 9991; }
#nowloading { display: none;}



/* --------------------------------------------------------
#contents-section
-------------------------------------------------------- */
#contents-section { }
@media screen and (min-width: 641px) {
#contents-section {}
}


.frameBox { display: block; border: 1px solid #000; background: #e7a15c; padding: 1px; }
.frameBox .frame { display: block; border: 1px solid #000; background: #8d6424; padding: 1px; }
.frameBox .frame .frameInner { border: 1px solid #000;}
.frameBox .frame .frameInner img { vertical-align: top;}
div.frameBox { display: inline-block;}

@media screen and (min-width: 641px) {
a.frameBox:hover .frame { background: #f6dc8f;}
}


/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
.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
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom:1; }

.cr { clear:both; }


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



/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forIMG
---------------------------------------------------------------------------------------------------------------- */
.forIMG #cboxContent { background: none; /*margin-top: 0;*/}
.forIMG #cboxLoadedContent { background: none; padding: 0;}
#cboxOverlay { background: #000!important;}
.forIMG .cboxIframe { background: none;}
.forIMG #cboxClose { width: 49px; height: 49px; }
.forIMG #cboxClose { background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: -24px; right: 6px;}
.forIMG #cboxClose:hover{background-position: inherit;}
@media screen and (min-width: 641px) {
.forIMG #cboxClose { width: 49px; height: 49px; }
.forIMG #cboxClose { top: -24px; right: 2px;}
}


/* ----------------------------------------------------------------------------------------------------------------
#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: 49px; height: 49px; }
.forMV #cboxClose { background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: -24px; right: 6px;}
.forMV #cboxClose { background: none;}
@media screen and (min-width: 641px) {
.forMV #cboxClose { width: 49px; height: 49px; }
.forMV #cboxClose { top: -24px; right: 2px;}
}