@charset "utf-8";
/* ==================================================================
CSS information
style info :RESET
================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;
}
body { line-height:1; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

h1 , h2 , h3 , h4 { line-height:1; }
ul { list-style:none; }
p { line-height:1; }
img { vertical-align:bottom; border:none; }
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; }
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 ol, #contents dl, #contents dt, #contents dd, #contents a, #contents span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contents header, #contents section, #contents aside, #contents article { -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 { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
#sqexHeader-black_rsp , #sqexFooter { z-index: 9901; position: relative;}




/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents:after { content: ""; display: block; clear: both; }
#contents { zoom:1; overflow: hidden; background: #161616; color: #fff;}
@media screen and (min-width: 641px) {
}
@media screen and (min-width: 1281px) {
	#contents { background-size: 100%;}
}
#allWrap { position: relative; }


/* --------------------------------------------------------
#nowloading
-------------------------------------------------------- */
#nowloading { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #161616; z-index: 9990; }
#nowloading_icon { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; text-align: center;  z-index: 9991; }
#nowloading_icon { border-radius: 50%; border: solid 1px #161616; }
#nowloading_icon img { animation: nowloadingAnime 2s infinite linear both; width: 65%; }
@keyframes nowloadingAnime {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(360deg); }
}
@media screen and (min-width: 641px) {
}



/* --------------------------------------------------------
#spmenu
-------------------------------------------------------- */

#spmenu { display: block; cursor: pointer; position: absolute; top: 0; right: calc(30/640*100%); margin-top: calc(30/640*100%); z-index: 9000; border-radius: 100px; background-color: #5a5a5a;
	width: calc(70/640*100%); padding: calc(33/640*100%) calc(17/640*100%); }
#spmenu.fixed { position: fixed; }
#spmenu .spmenu_icon { position: relative; margin: 0 auto; }
#spmenu .spmenu_icon, #spmenu .spmenu_icon:after, #spmenu .spmenu_icon:before { display: block; width: 100%; height: auto; padding-top: calc(4/36*100%); border-radius: 100px; background-color: #2a2a2a;
	-webkit-transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#spmenu .spmenu_icon:after, #spmenu .spmenu_icon:before { position: absolute; top: 0; left: 0; content: ' ';}
#spmenu .spmenu_icon:before { margin-top: calc(-14/36*100%);}
#spmenu .spmenu_icon:after { margin-top: calc(14/36*100%);}

#spmenu.active { }
#spmenu.active .spmenu_icon { background-color: transparent;}
#spmenu.active .spmenu_icon:after, #spmenu.active .spmenu_icon:before { margin-top: 0; }
#spmenu.active .spmenu_icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#spmenu.active .spmenu_icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.spmenuOpen #mainvisual ,
.spmenuOpen #pageTtl ,
.spmenuOpen #contentsMain { -webkit-filter: blur(5px); filter: blur(5px);}

@media screen and (min-width: 641px) {
	#spmenu { display: none;}
}


/* --------------------------------------------------------
#portalHeader
-------------------------------------------------------- */
#portalHd { background: rgba(42,42,42,1); border-top: 1px solid #161616; padding: calc(30/640*100%); position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
#portalHd .portalHd_inner { width: 100%; position: relative;}
#portalHd_logo { width: calc(455/580*100%); position: relative;}



@media screen and (min-width: 641px) {
	#portalHd { padding: calc(27/1280*100%) calc(25/1280*100%); }
	#portalHd .portalHd_inner { max-width: 1230px; margin: 0 auto; }
	#portalHd_logo { width: calc(315/1230*100%); z-index: 10;}
	
	#portalHd ,
	#portalHd_logo { -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	#portalHd.fixed { position: fixed; top: 0; left: 0; }
	#portalHd.fixed { padding-top: calc(5/640*100%); padding-bottom: calc(5/640*100%); }
	#portalHd.fixed #portalHd_logo { width: calc(265/1230*100%);}

}
@media screen and (min-width: 1281px) {
	#portalHd { padding: 27px 25px;}
}




/* --------------------------------------------------------
#portalHd > #gNav
-------------------------------------------------------- */
#gNav { display: none; }
#gNav ul li { position: relative;}
#gNav ul li a { display: block;}
#gNav ul li span { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}
@media screen and (max-width: 640px) {
#gNav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9990; overflow: hidden; padding: 0px; }
#gNav .gNav_ul_wrap { width: 100%; height: 100%; overflow-y: auto; background: rgba(42,42,42,0.9); }
#gNav .spmenuLogo { display: block; width: calc(455/640*100%); position: relative; z-index: 1; margin: calc(30/640*100%);}
#gNav ul { position: relative; border-top: 1px solid #5a5a5a;}
#gNav ul li { display: block; width: 100%; border-bottom: 1px solid #5a5a5a;}
#gNav ul a { width: 100%; height: 100%; position: relative; padding-top: calc(100/640*100%);}

#gNav ul .gNav_btn00 { display: none; }
#gNav ul .gNav_btn01 a { background: url(../img/gnav_information_sp.png) center center no-repeat; background-size: 100% auto; }
#gNav ul .gNav_btn02 a { background: url(../img/gnav_lineup_sp.png) center center no-repeat; background-size: 100% auto; }
#gNav ul .gNav_btn03 a { background: url(../img/gnav_timeline_sp.png) center center no-repeat; background-size: 100% auto; }
#gNav ul .gNav_btn04 a { background: url(../img/gnav_archives_sp.png) center center no-repeat; background-size: 100% auto; }
#gNav ul li.stateActive { background: #5a5a5a; }

}
@media screen and (min-width: 641px) {
	#gNav { display: block; position: absolute; bottom: 0; right: 0; width: 100%; margin-bottom: calc(-27/1230*100%);}
	#gNav ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-end; justify-content: flex-end; width: 100%; }
	#gNav ul li { margin-left: calc(40/1230*100%); }
	#gNav ul a { width: 100%; height: 100%; position: relative;}
	#gNav ul a::after { content: ""; display: block; position: absolute; bottom: 0; left: 50%; width: 100%; background: #e1e1e1; border-radius: 100px; opacity: 0;}
	#gNav ul .gNav_btn00 { width: calc(34/1230*100%); }
	#gNav ul .gNav_btn00 a::after { margin-bottom: calc(-4/34*100%); margin-left: calc(-4/34*100%); width: calc(8/34*100%); height: auto; padding-top: calc(8/34*100%); }
	#gNav ul .gNav_btn00 a { background: url(../img/gnav_top_pc.png) top center no-repeat; background-size: contain; padding-top: calc(42/34*100%);}
	#gNav ul .gNav_btn01 { width: calc(117/1230*100%); }
	#gNav ul .gNav_btn01 a::after { margin-bottom: calc(-4/117*100%); margin-left: calc(-4/117*100%); width: 6.837606%; height: auto; padding-top: calc(8/117*100%); }
	#gNav ul .gNav_btn01 a { background: url(../img/gnav_information_pc.png) top center no-repeat; background-size: contain; padding-top: calc(42/117*100%);}
	#gNav ul .gNav_btn02 { width: calc(67/1230*100%); }
	#gNav ul .gNav_btn02 a::after { margin-bottom: calc(-4/67*100%); margin-left: calc(-4/67*100%); width: 11.940298%; height: auto; padding-top: calc(8/67*100%); }
	#gNav ul .gNav_btn02 a { background: url(../img/gnav_lineup_pc.png) top center no-repeat; background-size: contain; padding-top: calc(42/67*100%);}
	#gNav ul .gNav_btn03 { width: calc(80/1230*100%); }
	#gNav ul .gNav_btn03 a::after { margin-bottom: calc(-4/80*100%); margin-left: calc(-4/80*100%); width: 10%; height: auto; padding-top: calc(8/80*100%); }
	#gNav ul .gNav_btn03 a { background: url(../img/gnav_timeline_pc.png) top center no-repeat; background-size: contain; padding-top: calc(42/80*100%);}
	#gNav ul .gNav_btn04 { width: calc(85/1230*100%); }
	#gNav ul .gNav_btn04 a::after { margin-bottom: calc(-4/85*100%); margin-left: calc(-4/85*100%); width: 10%; height: auto; padding-top: calc(8/85*100%); }
	#gNav ul .gNav_btn04 a { background: url(../img/gnav_archives_pc.png) top center no-repeat; background-size: contain; padding-top: calc(42/85*100%);}
	
	#gNav ul a::after { transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
	#gNav ul li:not(.gNav_btn00) a:hover::after , #gNav ul li:not(.gNav_btn00).stateActive a::after { width: 100%; margin-left: 0; left: 0; opacity: 1; }
	#gNav ul li.gNav_btn00 a:hover::after , #gNav ul li.gNav_btn00.stateActive a::after { opacity: 1; }

	#portalHd.fixed #gNav { margin-bottom: calc(-11/1230*100%);}

}





/* ----------------------------------------------------------------------------------------------------------------
#pageTtl
---------------------------------------------------------------------------------------------------------------- */
#pageTtl { background: url(../img/bg_dot.png); }
#pageTtl h2 { padding: calc(25/640*100%) calc(30/640*100%);}
#pageTtl h2 img { }
@media screen and (min-width: 641px) {
	#pageTtl { }
	#pageTtl h2 { max-width: 1280px; padding: calc(14/1280*100%) calc(25/1280*100%); margin: 0 auto;}
	#pageTtl h2 img { }
}
@media screen and (min-width: 1281px) {
	#pageTtl h2 { padding: 14px 25px; }
}


/* ----------------------------------------------------------------------------------------------------------------
#contentsMain
---------------------------------------------------------------------------------------------------------------- */
#contentsMain { position: relative;}
.conts-inner { max-width: 100%; margin: 0 auto; padding: 0 calc(30/640*100%); position: relative;}
@media screen and (min-width: 641px) {
	.conts-inner { max-width: 1280px; padding-left: calc(25/1280*100%); padding-right: calc(25/1280*100%);}
}
@media screen and (min-width: 1281px) {
	.conts-inner { width: 1280px; padding-left: 25px; padding-right: 25px;}
}



/* ----------------------------------------------------------------------------------------------------------------
magnific
---------------------------------------------------------------------------------------------------------------- */
.modal_mfpYt.mfp-bg ,
.modal_mfpImg.mfp-bg ,
.modal_mfpImgGallery.mfp-bg { z-index: 9998;}
.modal_mfpYt.mfp-wrap ,
.modal_mfpImg.mfp-wrap ,
.modal_mfpImgGallery.mfp-wrap { z-index: 9999;}
.modal_mfpYt .mfp-iframe-holder .mfp-content { max-width: 1080px; }
.modal_mfpImg .mfp-iframe-holder .mfp-content ,
.modal_mfpImgGallery .mfp-iframe-holder .mfp-content { max-width: 1280px; }

.modal_mfpYt .mfp-iframe-holder .mfp-close ,
.modal_mfpImg .mfp-image-holder .mfp-close ,
.modal_mfpImgGallery .mfp-image-holder .mfp-close { position: fixed; top: 0; right: 0; background: url(../img/btn_close.png) top right no-repeat; background-size: auto 60%; background-position: calc(100% - 30px) 10px;}
.modal_mfpImg img,
.modal_mfpImgGallery img {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}

/* .modal_mfpImgGallery ---------------------------------------------------------------------------------------------------------------- */
.modal_mfpImgGallery .mfp-arrow { opacity: 0.5; width: 200px; }
.modal_mfpImgGallery .mfp-arrow { margin-top: -255px; height: 510px; }
.modal_mfpImgGallery .mfp-arrow:active { margin-top: -253px; }
.modal_mfpImgGallery .mfp-arrow:before,
.modal_mfpImgGallery .mfp-arrow:after { display: none; }
.modal_mfpImgGallery .mfp-arrow-left { background: url(../img/icon_arrow_left.png) left center no-repeat; }
.modal_mfpImgGallery .mfp-arrow-right { background: url(../img/icon_arrow_right.png) right center no-repeat; }
@media screen and (min-width: 641px) {
.modal_mfpImgGallery .mfp-arrow { opacity: 0.65; }
}



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

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

/*pagetop
----------------------------------------------------*/
#pageTop { width: 100%; text-align: center;}
#pageTop a { display: block; width: calc(84/640*100%); height: auto; padding-top: calc(52/640*100%); margin: 0 auto; position: relative;}
#pageTop a svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

@media screen and (max-width: 640px) {
}
@media screen and (min-width: 641px) {
	#pageTop { width: 100%; margin: 0 auto; padding: 0 calc(25/1280*100%); text-align: right;}
	#pageTop a { width: calc(42/1230*100%); height: auto; padding-top: calc(26/1230*100%); margin: 0; display: inline-block; vertical-align: bottom;}
	#pageTop a svg { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; }
	#pageTop a:hover svg { -webkit-transform: scale(1.25); transform: scale(1.25);}
	#pageTop a:hover .btn { fill: #a3a3a3; }
}
@media screen and (min-width: 1281px) {
	#pageTop { width: 1280px; padding: 0 25px; }
}