@charset "utf-8";
/* ==================================================================
CSS information
style info :フォント用
================================================================== */

/*Font Style Size List
9px = 69%
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/

#contents { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
table { font-size:inherit; font:100%;}



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

html,body { -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, #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;}
@media screen and (max-width: 640px) {
#sqexHeader-white_rsp { z-index: 991; position: relative;}
}
@media screen and (min-width: 641px) {
}



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

#contents { background: url(../img/bg.png) top center repeat; }
@media screen and (min-width: 641px) {
#contents { background: url(../img/bg.png) top center repeat; background-size: 50%; }
}
@media screen and (min-width: 1601px) {
#contents { background: url(../img/bg.png) top center repeat; background-size: auto; }
}


/* --------------------------------------------------------
nowloading
-------------------------------------------------------- */
#nowloading { position: fixed; width: 100%; height: 100%; height: 100%; top: 0px; left: 0px; background: #07b1fb; 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; }
#nowloading { display: none;}

#nowloading { background: #07b1fb url(../img/bg.png) top center repeat;}
@media screen and (min-width: 641px) {
#nowloading { background: #07b1fb url(../img/bg.png) top center repeat; background-size: 50%; }
}
@media screen and (min-width: 1601px) {
#nowloading { background: #07b1fb url(../img/bg.png) top center repeat; background-size: auto; }
}



/* --------------------------------------------------------
#section-Header
-------------------------------------------------------- */
#section-Header { background: url(../img/header_bg_sp.png) top center repeat-y; background-size: 100%;}
#section-Header-inner { position: relative; padding-top: 2.1875%; padding-bottom: 3.125%;}/* pt14 pb20 */

#section-Header #hard { position: absolute; top: 0; left: 0; width: 37.5%;}
#section-Header #logo { width: 34.21875%; margin-left: 32.890625%;}/* w219 */
#section-Header #release { width: 31.25%; position: absolute; right: 0; bottom: 0;}/* w200 */

#spmenu { position: absolute; top: 0; right: 2.8125%; margin-top: 3.75%; width: 14.0625%; z-index: 999;}
#spmenu { margin-top: 1%; }
#spmenu.fixed { position: fixed;}

#gnavi { display: none;}
#gnavi.open { display: block;}
#gnavi #spmenulogo { display: none;}
#gnavi ul li a { display: block;}
@media screen and (max-width: 640px) {
#gnavi { background: url(../img/header_bg_sp.png) top center repeat-y; background-size: 100%; position: fixed; top: 0; left: 0; z-index: 990; width: 100%; }
#gnavi { padding: 3.125% 4.6875% 4.6875%; border-bottom: 1px solid #08b3fb; box-shadow:0px 0px 50px 0px #000; -moz-box-shadow:0px 0px 50px 0px #000; -webkit-box-shadow:0px 0px 50px 0px #000;}
#gnavi #spmenulogo { display: block; width: 18.448275%; margin-bottom: 1.724137%;}
#gnavi ul li a.active { background: url(../img/gnavi_on_sp.png) top center no-repeat; background-size: contain;}
}
@media screen and (min-width: 641px) {
	#section-Header { background: none; padding: 0 2.857142%; }
	#section-Header-inner { padding: 0; max-width: 1320px; margin: 0 auto; z-index: 10;}
	
	#section-Header #hard { left: 56.969696%; margin-top: -0.378787%; max-width: 240px; width: 18.181818%;}/* l752 mt5 */
	#section-Header #logo { max-width: 188px; width: 14.242424%; margin-left: 0; padding-top: 1.060606%;}/* pt14 */
	#section-Header #release { max-width: 320px; width: 24.242424%; top: 0; right: 0; bottom: inherit;}

	#spmenu { display: none;}
	#gnavi { display: block!important; position: absolute; top: 0!important; left: 15.909090%; margin-top: 3.134328%; width: 100%;}/* l210 mt42 */
	#gnavi ul { letter-spacing: -.45em;}
	#gnavi ul li { letter-spacing: normal; display: inline-block; vertical-align: top; max-width: 222px; width: 16.818181%; }
	#gnavi ul li a.active ,
	#gnavi ul li a:hover { background: url(../img/gnavi_on_pc.png) top center no-repeat; background-size: contain;}
}



/* --------------------------------------------------------
#section-Area
-------------------------------------------------------- */
#section-Area { padding: 0 0 9.375%; position: relative; }
#section-Area .inner { width: 100%; padding: 0 4.6875%;}/* p0 30 */
#section-Area .inner:after { content: ""; display: block; clear: both; }
@media screen and (min-width: 641px) {
	#section-Area { padding: 0 0 2.857142%; }
	#section-Area .inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2.857142%; position: relative; }
}
@media screen and (min-width: 1401px) {
	#section-Area { padding: 0 0 40px; }
	#section-Area .inner { margin: 0 auto; padding: 0 40px;}
}


.frame { border: 1px solid #fff; background: #cf0075; padding: 1px; display: block; position: relative; border-radius: 6px;}
.frame .pic { border-radius: 4px;}
.frame img { vertical-align: top; }
@media screen and (min-width: 641px) {
	.frame { border: 2px solid #fff; padding: 2px; }
	.frame { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden;}
	.frame:not(.off):hover { -webkit-transform: scale(1.03); transform: scale(1.03);}
}





/* ----------------------------------------------------------------------------------------------------------------
#colorbox
---------------------------------------------------------------------------------------------------------------- */
#colorbox.forMV , .forMV #cboxWrapper ,
#colorbox.forIMG , .forIMG #cboxWrapper { overflow: visible!important; }
.forMV #cboxContent ,
.forIMG #cboxContent { background: none; /*margin-top: 0;*/}
#cboxOverlay { background: #b5effc!important;}
#cboxLoadingOverlay{ background: #000!important; display: none!important;}
#cboxLoadingGraphic{ /*background:url(images/loading.gif) no-repeat center center;*/ display: none!important;}
.forMV #cboxLoadedContent ,
.forIMG #cboxLoadedContent { background: none; padding: 0; border: 5px solid #1f5dfa; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #1f5dfa;}
.forMV #cboxLoadedContent ,
.forIMG #cboxLoadedContent { -webkit-box-sizing: border-box!important; -moz-box-sizing: border-box!important; -ms-box-sizing: border-box!important; box-sizing: border-box!important;}
.forMV #cboxClose ,
.forIMG #cboxClose { width: 30px; height: 30px; background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: -30px; right: 0px;}
.forMV #cboxClose:hover ,
.forIMG #cboxClose:hover { background-position: center center;}
@media screen and (min-width: 641px) {
.forMV #cboxLoadedContent ,
.forIMG #cboxLoadedContent { border: 10px solid #1f5dfa; }
.forMV #cboxClose ,
.forIMG #cboxClose { width: 50px; height: 50px; top: -55px; right: 0px;}
}

/* #colorbox.forMV
---------------------------------------------------------------------------------------------------------------- */
.forMV .cboxIframe { background: none; }
.forMV .cboxIframe { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
@media screen and (min-width: 641px) {
}

/* #colorbox.forIMG
---------------------------------------------------------------------------------------------------------------- */
.forIMG #cboxLoadedContent { height: auto!important;}
.forIMG #cboxLoadedContent .cboxPhoto { width: 100%!important; height: auto!important;}
@media screen and (min-width: 641px) {
}




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

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

/*clearfix
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom:1; }

.cr { clear:both; }


/*pagetop
----------------------------------------------------*/
#pageTop { width:100%; text-align:right; }
#pageTop a { display: inline-block; text-align: right; }
#pageTop img { }
@media screen and (max-width: 640px) {
}



/*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; }
----------------------------------------------------*/