@charset "utf-8";
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

  ■■■■                               ■
 ■   ■■                              ■
■        ■■■  ■■■■    ■■■  ■ ■ ■■■   ■
■       ■  ■  ■■  ■  ■  ■  ■■  ■  ■  ■
■   ■■■ ■   ■ ■   ■  ■   ■ ■    ■■■  ■
■     ■ ■■■■■ ■   ■  ■■■■■ ■  ■■  ■  ■
 ■    ■ ■     ■   ■  ■     ■  ■   ■  ■
  ■■■■   ■■■  ■   ■   ■■■  ■   ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
body{font-family: YakuHanJPs,'M PLUS 1p', "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;}
.no-yakuhan{font-family: 'M PLUS 1p', "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;}

/* ---- common style ---- */
a,a:visited {color: #1f3c8c;}
a:hover,a:active {color: #1f3c8c; }
a.ilink-fr{ color: #FFF; display: inline-block; padding: 5px; background: #7364AA; line-height: 0; margin-bottom: 10px; }
a.ilink-fr:hover{ color: #faaa00; background: #bb0000; }
.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 0.7; cursor: pointer; }
.ilink{ display: inline-block; padding: 0.3em 0.5em 0.4em 0.5em ; border: #044dbc solid 2px ; text-decoration: none; border-radius: .6em; font-size: 1em; font-weight: bold; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #044dbc; }
.ilink:hover{ text-decoration: none; background-color: #044dbc; color: #fff; }
/*.ilink:before{ content:"> "; }*/

.hv_bounce.animated{}
.hv_bounce.animated:hover { animation: bounce 1s infinite;}

.ac-bg1{ background-color: #f5f0b2; display: inline-block; }

/* font-color */
.ac-color-w{color: #fff; }/* white */
.ac-color-k{color: #000; }/* black */
.ac-color1{color: #1f3c8c; }/* base color */
.ac-color2{color: #ff55be; }/*  */
.ac-color3{color: #245fad; }/* blue */
.ac-color4{color: #f5f0b2; }/* light yellow */

.b{ font-weight: 700; }
.exb{ font-weight: 900; }

.text-sdw-w1{text-shadow: 
white 1px 1px 0, white -1px -1px 0,/*右下、左上*/
white -1px 1px 0, white 1px -1px 0,/*右上、左下*/
white 0px 1px 0, white  0 -1px 0,/*右、左*/
white -1px 0 0, white 1px 0 0;/*上、下*/}
.text-sdw-2{text-shadow: 1px 1px 10px #2db6a9}

/* list */
ol.maru li:before { background-color: #fff; color: #121927; }

/* title */
.ttl1{ }
.ttl2{ border-left: #008bf4 solid 6px; padding-left: .4em;}
.ttl3 {display: flex;align-items: center;}
.ttl3:after{border-top: #044dbc 1px solid;content: "";flex-grow: 1;}
.ttl3:after {margin-left: .5em;}

/* table */
.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(40,183,255,1.0); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; color: #FFF; }
.table-a td{ padding:0.5em; background-color:rgba(40,183,255,0.1); vertical-align: top; }
.table-a thead td{ background-color:rgba(40,183,255,1.0); color: #FFF; }

/* frame */
.frame-rnd05{ border-radius: .5em; }
.frame-rnd10{ border-radius: 1em; }
.frame-rnd15{ border-radius: 1.5em; }
.frame-rnd20{ border-radius: 2em; }

.frame-a{ border: #008bf4 solid 1px; }
.frame-b{ position: relative; padding: 4px; }
.frame-b .lt,.frame-b .rt,.frame-b .lb,.frame-b .rb{ position: absolute; width: 3em; height: 3em; line-height: 0; }
.frame-b .lt{ border-top: #008bf4 solid 1px; border-left: #008bf4 solid 1px; top:0; left:0; }
.frame-b .rt{ border-top: #008bf4 solid 1px; border-right: #008bf4 solid 1px; top:0; right:0; }
.frame-b .lb{ border-bottom: #008bf4 solid 1px; border-left: #008bf4 solid 1px; bottom:0; left:0; }
.frame-b .rb{ border-bottom: #008bf4 solid 1px; border-right: #008bf4 solid 1px; bottom:0; right:0; }
.frame-b .inner{ background-color: rgba(255,255,255,.5); }
.frame-c{ color: #FFF; background-color:rgba(40,183,255,1.0); }

.frame-wp{ background: #FFF; border: #ff55be dotted 1px;}
.frame-w{ background: rgba(255,255,255,1);}
.frame-w-op10{ background: rgba(255,255,255,.1);}
.frame-w-op15{ background: rgba(255,255,255,.15);}
.frame-w-op20{ background: rgba(255,255,255,.2);}
.frame-w-op50{ background: rgba(255,255,255,.5);}
.frame-w-op80{ background: rgba(255,255,255,.8);}
.frame-w-op90{ background: rgba(255,255,255,.9);}
.frame-k{ background: rgba(0,0,0,1); }
.frame-k-op10{ background: rgba(0,0,0,.1);}
.frame-k-op15{ background: rgba(0,0,0,.15);}
.frame-k-op20{ background: rgba(0,0,0,.2);}
.frame-k-op60{ background: rgba(0,0,0,.6);}
.frame-img{ display: inline-block; border: rgba(80,124,251,0.3) solid 3px; box-sizing: border-box; line-height: 0; }
.frame-comment{ background: rgba(255,255,255,.95) url(../images/logo-alp10.png) no-repeat center center; color: #333; padding: 2.2em 2.2em; line-height: 2; font-size: 1.222em; background-size: 60%; }

/* h-line */
hr.dot-blue{ border-color: #044dbc; border-width: 1px 0px 0px 0px; border-style: dotted; height: 1px; /* 高さ(IE) */ }
hr.sld-blue{ border-color: #044dbc; border-width: 1px 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }

.sepline-a{ position: relative; line-height: 0; }
.sepline-a .h{ width: 100%; height: 1px; border-top:#044dbc solid .222em; position: absolute; top: .64em; }
.sepline-a .v{ width: 1px; height: 1.5em; margin: 0 auto; background-color: #044dbc; }

/* accordion */
.acd-label{ background: url(../images/acd-pls.png) no-repeat .1em .9em; background-size: 1em; padding-left: 1.5em; }
.acd-label:hover{ cursor: pointer; }
.acd-check{ display: none;}
.acd-cont{ display: none; height: 0; overflow: hidden; transition: 0.5s all ease 0.5s; }
.acd-check:checked ~ .acd-cont{ display: inherit; height: inherit; transition: 0.5s all ease 0s;}
.acd-check:checked + .acd-label{ display: none; }

/* colorbox customize */
#colorbox{}
#cboxOverlay{background:rgba(255,255,255,.9);}
#cboxContent{/*  margin:3.61em 2.22em 0 2.22em; */ background:rgba(255,255,255,0); position: relative;}
#cboxLoadedContent{ padding:3.61em 2.22em 0 2.22em; border:none; background:rgba(255,255,255,0); }

#cboxClose{top: 0 /* -3.61em */ ; right: 0 /* 0.27em */ ; display:block; background:url(../images/lib/colorbox/close.png) no-repeat top center; background-size: contain; width:3.34em ; height:3.34em ; }
#cboxClose:hover{ background-position: top center; }
#cboxPrevious{top:60%; left: 0.27em /* -2.22em */; display:block; background:url(../images/lib/colorbox/prev.png) no-repeat top center; background-size: contain; width:1.667em ; height: 5em ; }
#cboxPrevious:hover{ background-position: top center; }
#cboxNext{top:60%; left:inherit; right: 0.27em /* -2.22em */; display:block; background:url(../images/lib/colorbox/next.png) no-repeat top center; background-size: contain; width:1.667em ; height: 5em ; }
#cboxNext:hover{ background-position: top center; }
#cboxCurrent{ display: none !important; }
#cboxLoadingGraphic{ background-image: url(../images/lib/colorbox/loading-custom.gif); }

/* CHROMEのフォーカス線削除 */
*:focus{
  outline: none;
}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; }
body{ font-size: 18px; color: #044dbc; background:#008bf4 url(../images/common-bg-grad.png) repeat-x center -44.44em ; background-size: 66.66em auto; position: relative; } 

header,article,section,footer{ position: relative; width: 100%; display: block; }
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }

.part-background{ position: absolute; height:100%; width: 100%; overflow: hidden; }
.part-header{ position: relative; }
.part-middle{ position: relative; }
.part-footer{ position: relative; }

/* background */
.bg-ptn{ min-height:100%; background:url(../images/common-bg-ptn.png) no-repeat center top ; background-size: 94.4em auto; display: none; }
.bg-ptn1,.bg-ptn2{ position: absolute; width: 150%; margin: 0 auto; top:-10em; left: -25%; }
.bg-ptn1 img,.bg-ptn2 img{ width: 100%; }
.bg-ptn1{ 
-webkit-animation-name: BGNA; animation-name: BGNA; 
animation-duration: 19s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
@-webkit-keyframes BGNA {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	25% {
		opacity: .7;
		-webkit-transform: translate3d(-5em, 0, 0);
		transform: translate3d(-5em, 0, 0);
	}
	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	75% {
		opacity: .5;
		-webkit-transform: translate3d(5em, 0, 0);
		transform: translate3d(5em, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes BGNA {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	25% {
		opacity: .7;
		-webkit-transform: translate3d(-5em, 0, 0);
		transform: translate3d(-5em, 0, 0);
	}
	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	75% {
		opacity: .5;
		-webkit-transform: translate3d(5em, 0, 0);
		transform: translate3d(5em, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.bg-ptn2{ 
-webkit-animation-name: BGFA; animation-name: BGFA; 
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
@-webkit-keyframes BGFA {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 10em, 0);
		transform: translate3d(0, 10em, 0);
	}
}
@keyframes BGFA {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 10em, 0);
		transform: translate3d(0, 10em, 0);
	}
}

/* header */
.part-header{ }
.part-header .cont-global-header{ background-color: #FFF; }
.part-header .cont-global-header .inner{ position: relative; }
.part-header .cont-global-header .inner > span{ display: block; width: calc( 278 / 18 * 1em ); padding: calc( 11 / 18 * 1em ) 0; margin: 0 auto; }
.cont-global-navi{ background-color: rgba(255,255,255,1); border-top: #28b7ff 2px solid; border-bottom: #013aa4 solid 2px;}
.cont-global-navi > .inner{ border-top: #5cd2f8 2px solid;}

.global-navi{/*  max-width: 1100px; */ margin: 0 auto; list-style-type: none; padding:0; display: flex; justify-content: center; }
.global-navi { transform: scale(0.86, 1); transform-origin: top left; width: 116.279069%;}
.global-navi li{ margin: 0; padding: 0; display: block; }
.global-navi li a{ display: block; color: #013aa4; font-size: 1.333em; font-weight: 900; text-decoration: none; line-height: 1; padding: calc( 10 / 18 * 1em ) .4em; }
.global-navi li a:hover{ background-color: rgba(222,246,254,1); }

.game-banner-sp{ display: none; }
.cont-sp-btn{ display: none; }
.page-title{ font-size: 1em; text-align: center; padding: calc( 23 / 18 * 1em ) 0; margin: 0; }
.page-title > span{ font-size: 2.222em; font-weight: 900; color: #013aa4; line-height: 1; }

.cont-sub-navi{ background-color: rgba(255,255,255,1); border-top: #008bf4 solid 4px; border-bottom: #008bf4 solid 4px; margin: 0 auto 2em auto ; box-sizing: border-box; position: relative; }
.cont-sub-navi > .inner{  border-top: #044dbc solid 2px; border-bottom: #044dbc solid 2px; position: relative; }
.cont-sub-navi > .inner > .inner{ max-width: 61.1112em; margin: 0 auto; position: relative; }
.sub-navi{ width: calc( 100% - 6em ); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.sub-navi > div{ margin: 0 .2em;}
.sub-navi > div a{ display: block; color: #013aa4; font-size: 1.333em; font-weight: 900; text-decoration: none; line-height: 1; padding: calc( 10 / 18 * 1em ) .3em;  }
.sub-navi > div.crt a{ pointer-events: none; color: #FFF; background-color: #013aa4;  }
.sub-navi > div.hv a:hover{ background-color: rgba(222,246,254,1); }
.sub-navi > div.sp-blk{ display: none; }

/* middle */
.cont-sub{ max-width: 100%; margin: 0 auto; min-height: calc( 100vh - 18em ); }
.atc-inner{ /* padding:1.5em; */ padding-bottom: 3em; position: relative; }
.pagetop-navi{  width: calc( 92/18 * 1em ); position: fixed;  bottom:2em;  right:1em; z-index: 10; }

/* footer */
.part-footer{ background: #1e59d1 url(../images/common-footer-pattern.png) repeat; }
.part-footer > .inner{ position: relative; background: url(../images/common-footer-shape.png) no-repeat center center ; background-size: auto 140%;  }
.ft-logo{ width: calc( 183/18 * 1em ); margin: 0 auto; padding-top: 1em; }
.ft-copyrihgt{ padding: .5em 0; text-align: center;}
.ft-copyrihgt > span{ color: #FFF; font-size: .555em; }

/* content */
.content-entry{ background-color: rgba(255,255,255,.8); border-top: #008bf4 solid 4px; border-bottom: #008bf4 solid 4px; margin: 0 auto 3em auto; box-sizing: border-box; }
.content-entry > .inner{  border-top: #044dbc solid 2px; border-bottom: #044dbc solid 2px; position: relative; }
.content-entry:last-child{margin-bottom: 0;}
.content-entry .entry-head{ padding: .999em 1.5em; border-bottom: #044dbc solid 2px; }
.content-entry .entry-date{ font-size: .888em; font-weight: 900; }
.content-entry .entry-title{ font-size: 1.555em; font-weight: 900;  }
.content-entry .entry-body{ padding: 1.5em ; line-height: 1.5;}
.content-entry .entry-body > .sep{ border-bottom: #044dbc solid 2px; padding-bottom: .5em;}

.content-single{ background-color: rgba(255,255,255,.8); border-top: #008bf4 solid 4px; border-bottom: #008bf4 solid 4px; margin: 0 auto; box-sizing: border-box; }
.content-single > .inner{  border-top: #044dbc solid 2px; border-bottom: #044dbc solid 2px; position: relative; }
.content-single .entry-head{ padding: .999em 1.5em; border-bottom: #044dbc solid 2px; }
.content-single .entry-title{ font-size: 1.555em; font-weight: 900;  }
.content-single .entry-body{  padding: 2.5em ; line-height: 1.5;}
.content-single .entry-body > .sep{ border-bottom: #044dbc solid 2px; padding-bottom: .5em;}

.content-modal{ max-width: 920px; background-color: #FFF; border:#1f3c8c solid .333em ; border-radius: 2em; margin: 0 auto 1em auto; padding: 0; overflow: auto; }

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

              ■                 ■                
■             ■  ■       ■      ■               ■
■             ■                 ■               ■
■  ■■■■    ■■■■  ■ ■   ■ ■   ■■■■  ■   ■  ■■■   ■
■  ■■  ■  ■■ ■■  ■  ■  ■ ■  ■■ ■■  ■   ■  ■  ■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■   ■■■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■ ■■  ■  ■
■  ■   ■  ■■ ■■  ■   ■■  ■  ■■ ■■  ■  ■■ ■   ■  ■
■  ■   ■   ■■■■  ■   ■   ■   ■■■■   ■■ ■  ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Modal */
#Modal_data{ display: none; }

/* TOP-PAGE */
body#Page_Top{ background-position: center 30vw ;  } 
#Page_Top .bg-ptn{ background-position: center 40vw ; }
#Page_Top .bg-ptn1,#Page_Top .bg-ptn2{ top:50em; }
#Page_Top .part-header{ /* position: absolute; top: 57.1vw; z-index: 5; */ }
#Page_Top .part-header .cont-global-header{ display: none; }
#Page_Top .page-title{ display: none; }
#Page_Top .atc-inner-top{ padding: 1em 0 3em 0; max-width: 61.1112em; margin: 0 auto; position: relative; }
#Page_Top .content-single .entry-body{  padding: .5em ;}
#Page_Top .atc-ttl-top{ font-size: 1em; margin-bottom: .5em; }
#Page_Top .atc-ttl-top > span{ font-size: 2.222em; font-weight: 900;}

/* main */
.cont-top-visual{ border-bottom: #013aa4 solid 2px; }
.kv-container{ width:100%; max-width: 2800px; margin: 0 auto; position: relative; }
.kv-container .vis-grp{ position: relative; overflow: hidden; }
.kv-container .vis-grp > div{ position: absolute; top:0; }
.kv-container .vis-grp .spc{ position: relative; }
.kv-container .vis-grp .vis{ width: 100%; height: 100%; }
.kv-container .vis-grp .vis img{ width: 100%; }
.kv-container .vis-grp .fx1,.kv-container .vis-grp .fx2{ width: 100%; height: 100%; }
.kv-container .vis-grp .fx1 img,.kv-container .vis-grp .fx2 img{ width: 100%; }
.kv-container .vis-grp .bg{ width: 100%; height: 100%; background-color: rgba(255,255,255,1); }
.kv-container .vis-grp .logo{ width: 32.79%; top:78.5%; left:9%; opacity: 0; }
.kv-container .vis-grp .cp{ width: 9.642%; top:0; right:6.5%; opacity: 0; }
.kv-container .vis-grp .oa{ width: 35.357%; top:92%; left:8%; opacity: 0; }

.kv-container .vis-grp .op{ width: 100%; height: 100%; }
.kv-container .vis-grp .op .op-oa{ width: 100%; font-size: 10vh; color: #044dbc; text-align: center; font-weight: 900; position: absolute; top:30%; opacity: 0; }
.kv-container .vis-grp .op .op-chara-sil{ width: 56.857%; position: absolute; top:1%; left:0; right: 0; margin: 0 auto; }
.kv-container .vis-grp .op .op-chara{ width: 56.857%; height: 0; position: absolute; top:1%; left:0; right: 0; margin: 0 auto; overflow: hidden; }
.kv-container .vis-grp .op .op-bg-l{ width: 50%; height: 0%; background-color: #0083e9; position: absolute; left:0; }
.kv-container .vis-grp .op .op-bg-r{ width: 50%; height: 0%; background-color: #ffff00; position: absolute; right:0; bottom: 0; }
/* op-animation */
.kv-container .vis-grp .op .op-oa.on{ opacity: 1; margin-top: .5em; transition: 0.7s all ease-in-out .3s; }
.kv-container .vis-grp .op .op-bg-l.on{ height: 100%; transition: .7s all ease-in-out .5s; }
.kv-container .vis-grp .op .op-bg-r.on{ height: 100%; transition: .7s all ease-in-out .5s; }
.kv-container .vis-grp .op .op-chara.on{ height: inherit; transition: 1.2s all ease-in-out 1.9s; }

.kv-container .vis-grp .op .op-oa.on2{ opacity: 1; transition: 0.7s all ease-in-out 0s; }

.kv-container .vis-grp .op .op-oa.off{ opacity: 0; transition: .5s all ease-in-out 0s; }
.kv-container .vis-grp .op .op-chara.off{ opacity: 0; transition: .5s all ease-in-out 0s; }
.kv-container .vis-grp .op .op-chara-sil.off{ opacity: 0; }
.kv-container .vis-grp .op .op-bg-l.off{ opacity: 0; transition: .5s all ease-in-out .5s; }
.kv-container .vis-grp .op .op-bg-r.off{ opacity: 0; transition: .5s all ease-in-out .5s; }
.kv-container .vis-grp .bg.off{ opacity: 0; transition: 1.0s all ease-in-out 1.0s; }

.kv-container .vis-grp .cp.on{ opacity: 1; transition: 1s all ease-in-out 0s; }
.kv-container .vis-grp .logo.on{ opacity: 1; transition: .5s all ease-in-out 0.5s; }
.kv-container .vis-grp .oa.on{ opacity: 1; transition: .5s all ease-in-out 0.5s; }

.kv-container .vis-grp .fx1{ 
-webkit-animation-name: TOPFX1; animation-name: TOPFX1; 
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
@-webkit-keyframes TOPFX1 {0% {opacity: 0;}50% {opacity: 0;}100% {opacity: 1;}}
@keyframes TOPFX1 {0% {opacity: 0;}50% {opacity: 0;}100% {opacity: 1;}}

.kv-container .vis-grp .fx2{ 
-webkit-animation-name: TOPFX2; animation-name: TOPFX2; 
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 4s;
animation-iteration-count: infinite;
animation-direction:alternate;
}
@-webkit-keyframes TOPFX2 {0% {opacity: 0;}50% {opacity: 0;}100% {opacity: 1;}}
@keyframes TOPFX2 {0% {opacity: 0;}50% {opacity: 0;}100% {opacity: 1;}}

.cont-top-news{ width: 34em; background-color: rgba(255,255,255,.9); position: absolute; top:-3.1em; right: 0; z-index: 3; }
.news-container { height: 1.5em; overflow: hidden; position: relative; }
.news-container dl{ width: 100%; height: 1.5em; font-size: 1.0em; margin: 0; padding: 0; line-height: 1; display: block; list-style-type: none; box-sizing: border-box; }
.news-container dl dt{ width: 6em; height: 1.5em; margin: 0; line-height: 1; text-align: center; position: relative; display: inline-block; padding: .15em 0 0 0; color: #FFF; background-color: #004cc0;  box-sizing: border-box; vertical-align: top;}
.news-container dl dt span{ font-size: 0.777em; font-weight: 700; }
.news-container dl dd{ width: calc( 100% - 7em); height: 1.5em; margin: 0; line-height: 1.15; position: relative; display: inline-block; padding: .15em .5em 0 .5em; box-sizing: border-box; overflow: hidden; vertical-align: top;}
.news-container dl dd span{ font-size: 0.777em; font-weight: 700; }
.news-container dl dd a,
.news-container dl dd a:visited{ text-decoration: none; color: #004cc0; }
.news-container dl dd a:hover{ text-decoration: underline; color: #004cc0; }

.cont-top-twitter-movie{ display: flex; flex-wrap: wrap; margin-bottom: 3em; }
.cont-top-twitter{ width: 47%; margin-right: 3%; }
.cont-top-movie{ width: 47%; }
.cont-top-twitter .atc-ttl-top > span a{ text-decoration: none; color:#044dbc; }
#Page_Top .cont-top-movie .content-single .entry-body{  padding: 0 ;}

.cont-top-banner{ }
.banner-container{ display: flex; flex-wrap: wrap; justify-content: center; }
.banner-container .game-banner{ width: 65.4545%; margin: 0 17% 2em 17%; /* width: 58.1819%; margin: 0 20% 2em 20%; */ }
.banner-container .radio-banner{ width: 21.818%; margin: 0 38% 2em 38%;}
.banner-container .other-banner{ width: 38%; margin: 0 30% 0 30%;  }

/* SUB-PAGE */

/* NEWS */
#Page_News .cont-sub{ max-width: 820px; margin: 0 auto; }

.staffcast-container-news{  }
.staffcast-container-news > div{ margin-bottom: .5em; display: inline; }
.staffcast-container-news .pos{ margin-right: 1em; text-align: right; padding-top: .111em; }
.staffcast-container-news .name{ font-size: 1.222em;  }
/* .staffcast-container-news .name:after { content: "\000A"; white-space: wrap; } */
.staffcast-container-news .sep{ display: inline-block; font-size: 1.222em; line-height: .5; }
.staffcast-container-news .sep2{ display: none; }
.staffcast-container-news .sep > span{ display: inline-block; line-height: 0; border-bottom: #044dbc solid 1px; width: 3em;  }

/* ON AIR */
#Page_Onair .cont-sub{ max-width: 820px; margin: 0 auto; }
.onair-container{ width: 100%; margin: 0 auto; padding: 1em 1.5em; }
.onair-block{ display: flex; flex-wrap: wrap; padding: .5em 0; }
.onair-block .col-a{ width: 35%; }
.onair-block .col-b{ width: 23%; }
.onair-block .col-c{ width: 22%; }
.onair-block .col-d{ width: 20%; }
.onair-block .col-e{ width: 65%; margin-left: 35%; }


/* Staff&Cast */
#Page_Staffcast .cont-sub{ max-width: 820px; margin: 0 auto; }
.staffcast-container{ display: flex; flex-wrap: wrap;  }
.staffcast-container > div{ margin-bottom: .5em; }
.staffcast-container .pos{ width: 49%; margin-right: 2%; text-align: right; padding-top: .111em; }
.staffcast-container .name{ width: 49%; font-size: 1.222em; }
.staffcast-container .sep{ width: 49%; margin-right: 2%; text-align: right; font-size: 1.222em; line-height: .5; }
.staffcast-container .sep2{ width: 49%; font-size: 1.222em; line-height: .5; }
.staffcast-container .sep > span,.staffcast-container .sep2 > span{ display: inline-block; line-height: 0; border-bottom: #044dbc solid 1px; width: 3em;  }

/* STORY */
#Page_Story .cont-sub{   }
#Page_Story .atc-inner{ /* padding-bottom: 0; */ }
#Page_Story .content-single{ background-color: rgba(255,255,255,.8); max-width: 1100px; margin: 0 auto; }
/*
#Page_Story .content-single{ background:url(../assets/story/intro-bg.jpg) no-repeat center center ; background-size: cover; }
#Page_Story .content-single .entry-body{ padding: 0; }
*/
.intro-container{ /* max-width: 1100px; min-height: calc( 100vh - 18.5em ); margin: 0 auto; padding: 3em 2em; text-align: left; background-color: rgba(255,255,255,.7); */ display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.intro-container .text{ width: 49%; font-size: 1.48em; font-weight: 900; text-shadow: 1px 1px 0px #FFF; line-height: 2; }
.intro-container .fig{ width: 48%; margin-right: 3%; padding-top: 1%; }

#Page_Story .cont-sub-navi{ background-color: #FFF; }
.sub-navi-story .cs{ pointer-events: none; opacity: .5; }

.ep-background{ width: 100%; height: 100%; position: absolute; z-index: 0;/*  background-image: url(../assets/story/intro-bg.jpg); */ background-repeat: no-repeat; background-position:center center; background-size: cover; }

.ep-container{ padding: 0 2em; }
.ep-number{ font-size: .999em; text-align: center; font-weight: 900; }
.ep-number > span{ display: inline-block; transform: scale(4, .5); transform-origin: center center; width: 2.5em;  }
.ep-title{ font-size: 1em; text-align: center; margin: .5em auto 1.0em auto; padding: 0 2em;  }
.ep-title > span{ font-size: 2.111em; font-weight: 900; }
.ep-slider-thumb{ display: flex; flex-wrap: nowrap;  margin: 0; }
.ep-slider-thumb > div{ }
.ep-slider-thumb > div:last-child{ }

.ep-trailer{ width: 90%; max-width: 720px; margin: 0 auto; padding: 2em 0 0 0; }
.ep-trailer-ttl{ text-align: center; font-weight: 900; font-size: .888em; margin-bottom: .5em; }

#Outline{  }
#StoryData{ display: none; }

/* Character */
#Page_Character .cont-sub{  }
#Page_Character .atc-inner{ padding-bottom: 0; }
.cont-character-navi{ background-color: rgba(255,255,255,1); border-top: #008bf4 solid 4px; border-bottom: #008bf4 solid 4px; margin: 0 auto ; box-sizing: border-box;  }
.cont-character-navi > .inner{  border-top: #044dbc solid 2px; border-bottom: #044dbc solid 2px; position: relative; }
.cont-character-navi > .inner > .inner{ max-width: 61.1112em; margin: 0 auto; position: relative; }
.cont-character-navi .csr{ width: 2.777em; height: 4.333em; position: absolute; top:2em; }
.cont-character-navi .csr.csr-r{ right: 0; }
.character-navi{ width: calc( 100% - 6em ); margin: 0 auto;  }
.character-navi > div{ }
.character-navi > div a{ display: block; position: relative; padding: 1em;  }

.content-character{ background-color: rgba(255,255,255,.8); }
.chara-figure{ }
.chara-figure > .inner{ max-width: 61.1112em; margin: 0 auto; position: relative; }
.chara-school{ width: 11.111em; position: absolute; top:1em; left: 0; right:0; margin: 0 auto; }
.chara-cloth{ width: 8.333em; position: absolute; top:12em; left: 0; right:0; margin: 0 auto; }
.chara-image{ position: absolute; z-index: 2; bottom: 0; pointer-events: none; }
.chara-spc{ position: relative; pointer-events: none; }
.chara-pline{ position: absolute; bottom: 1.5em; display: none; }

.chara-text{ background-color: rgba(255,255,255,.4); padding: 1.5em 0; margin: -1.5em 0 0 0; }
.chara-text > .inner{ max-width: 61.1112em; margin: 0 auto; position: relative; }

.chara-chk-label{ }
.chara-chk-label:hover{ }
.chara-chk-check{ display: none;}
.chara-image .img-a{ opacity: 1; transition: 0.5s all ease 0.5s; }
.chara-image .img-b{ opacity: 0; transition: 0.5s all ease 0s; position: absolute; top:0; }
.chara-chk-check:checked + .chara-image .img-a{ opacity: 0; transition: 0.5s all ease 0s;}
.chara-chk-check:checked + .chara-image .img-b{ opacity: 1; transition: 0.5s all ease 0.5s;}

.team-mark{ position: relative; }
.team-mark > .inner{ width: 13.888em; margin: 0 auto; }

.machine-figure{}
.machine-figure > .inner{ max-width: 61.1112em; margin: 0 auto; position: relative; }
.machine-text{ margin-bottom: 1em; }
.machine-form{ width: 13.888em; position: absolute; top:9em; left: 0; right:0; margin: 0 auto; z-index: 3;}
.machine-image{ position: absolute; z-index: 2; bottom: 0; pointer-events: none; }
.machine-spc{ position: relative; pointer-events: none; }

.machine-chk-label{ }
.machine-chk-label:hover{ }
.machine-chk-check{ display: none;}
.machine-image .img-a{ opacity: 1; transition: 0.5s all ease 0.5s; }
.machine-image .img-b{ opacity: 0; transition: 0.5s all ease 0s; position: absolute; top:0; }
.machine-chk-check:checked + .machine-image .img-a{ opacity: 0; transition: 0.5s all ease 0s;}
.machine-chk-check:checked + .machine-image .img-b{ opacity: 1; transition: 0.5s all ease 0.5s;}


.bnf-list{ display: flex; flex-wrap: wrap; margin-bottom: 1em; align-items: flex-start; }
.bnf-list > .item-x1{ width: 33%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: center;  }
.bnf-list > .item-x2{ width: 66%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x1 .item-col{ width: 100%; }
.bnf-list > .item-x2 .item-col{ width: calc((100% - (0.5em * 1)) / 2); margin-right: .5em; }
.bnf-list > .item-x2 .item-col:last-child{ margin: 0; }
.bnf-list .shop{ width: 100%; font-size: 0.888em; font-weight: 900; background-color:rgba(255,255,255,.5); padding: .2em; margin-bottom: .5em; }
.bnf-list .thumb{ /* width: 16em; height: 16em;  */padding:0 .5em 1em .5em; text-align: center; margin: .5em auto 0 auto; background:url(../images/bnf-thumb-bg.png) no-repeat center center; background-size: 100%;}
.bnf-list .thumb{ display: flex; align-items: center; justify-content: center; vertical-align: middle; }
.bnf-list .thumb-np{ display: none; }
.bnf-list .data{ width: 100%; }
.bnf-list .excond{ font-size: 0.666em; background-color:rgba(255,255,255,.1); padding: .2em; letter-spacing: -0.05em; margin-bottom: .3em; }
.bnf-list .name{ font-size: 1.0em; letter-spacing: -0.05em; margin-bottom: .3em; font-weight: 700; }
.bnf-list .cond{ font-size: 0.777em; margin-bottom: .3em; font-weight: 700; background-color:rgba(40,183,255,1.0); display: inline-block; padding: .1em .2em; color: #FFF; }
.bnf-list .start{ font-size: 0.777em; font-weight: 700;  }

/* BDDVD */
#Page_Bddvd .cont-sub{ /* max-width: 1100px; margin: 0 auto; */ }
#Page_Bddvd .content-single{ background-color: rgba(255,255,255,.6); max-width: 1100px; margin: 0 auto; }
.music-container{ display: flex; flex-wrap: wrap;  }
.music-container > div{ margin-bottom: .5em; }
.music-container .left{ width: 48%; margin-right: 4%;  }
.music-container .right{ width: 48%;  }


/* MUSIC */
#Page_Music .cont-sub{ /* max-width: 1100px; margin: 0 auto; */ }
#Page_Music .content-single{ background-color: rgba(255,255,255,.6); max-width: 1100px; margin: 0 auto; }
.music-container{ display: flex; flex-wrap: wrap;  }
.music-container > div{ margin-bottom: .5em; }
.music-container .left{ width: 48%; margin-right: 4%;  }
.music-container .right{ width: 48%;  }

/* SPECIAL */
#Page_Special .cont-sub{ max-width: 1100px; margin: 0 auto; }
.special-list{  display: flex; flex-wrap: wrap; justify-content: center; }
.special-list > div{ width: 30%; margin: 1.5%; }
.special-list .thumb{ margin-bottom: .5em; }
.special-list .text{ font-size: 1.333em; font-weight: 900; margin-bottom: 0; text-align: center; }



/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {

}
/* Custom 1440 ----------------------------------------------------------------------------- */
@media (max-width: 1439px) {

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
body{ font-size: calc((100vw / 1200) * 18); }
}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* style */
.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 1; }

/* Structure */
body{ font-size: calc((100vw / 960) * 28 ); }

/* background */
.bg-ptn{ min-height:100%; background:url(../images/common-bg-ptn.png) no-repeat center top ; background-size: 94.4em auto; }

/* header */
.part-header{ position: absolute; background-color: rgba(255,255,255,.9); z-index: 5; }
.part-header .cont-global-header{ background: #004cc0 url(../images/common-footer-pattern.png) repeat ;}
.part-header .cont-global-header .inner{ background: url(../images/common-header-shape-sp.png) no-repeat top center; background-size: 100% auto; height: 5em; }

.part-header .cont-global-header .inner > span{ display: block; width: calc( 360 / 18 * 1em ); padding: calc( 26 / 18 * 1em ) 0 0 0; margin: 0 auto; display: none; }
.cont-global-navi{ background: none; border: none; display: none;}
.cont-global-navi > .inner{ border: none;}
.global-navi{ flex-wrap: wrap; justify-content: center; }
.global-navi li{ width: 100%; border-bottom: #044dbc solid 2px;  }
.global-navi li a{ font-size: calc((100vw / 960) * 60 ); padding: calc( 10 / 18 * 1em ) .5em; text-align: center; }
.global-navi li a:hover{ }
.global-navi li:last-child{ display: none; }
.sub-navi > div.sp-blk{ display: block; width: 100%; height: 1px; }
.game-banner-sp{ display: block; margin: 0 auto;  padding: 2em 4em; }
.cont-sp-btn{ display: block;  width: 4em; position: absolute; top:.5em; right: .5em; z-index: 6; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none; }

.page-title{ font-size: 1em; text-align: center; padding: calc( 23 / 18 * 1em ) 0; margin: 0 auto; position: absolute; top:0; left: 0; right: 0;  }
.page-title > span{ font-size: 2.222em; font-weight: 900; color: #fff; line-height: 1; }

.part-header.on{ height:100%; }
.part-header.on .cont-global-header .inner > span{ display: block; }
.part-header.on .cont-global-navi{ display: block; }
.part-header.on .cont-sp-btn .sp-navi-open{ display: none; }
.part-header.on .cont-sp-btn .sp-navi-close{ display: block; }
.part-header.on .page-title{ display: none; }


/* middle */
.cont-sub{ padding-top: 5em; min-height: calc( 100vh - 5.5em ); }

.pagetop-navi{  width: calc( 92/28 * 1em ); position: fixed;  bottom:1.5em;  right:1.5em; }

/* footer */
.part-footer > .inner{ position: relative; background: url(../images/common-footer-shape-sp.png) no-repeat bottom center ; background-size: cover;  }
.ft-logo{ width: calc( 183/23 * 1em ); margin: 0 auto; padding-top: .5em; }
.ft-copyrihgt{ padding: .2em 0; text-align: center;}
.ft-copyrihgt > span{ color: #FFF; font-size: .555em; }




/* TOP-PAGE */
body#Page_Top{ background-position: center 25em ; background-size: 100%;  } 
#Page_Top .bg-ptn{ background-position: center 100vw ; }
#Page_Top .bg-ptn1,#Page_Top .bg-ptn2{ top:20em; }
#Page_Top .part-header{ position: absolute; top: 0; }
#Page_Top .part-header.on .cont-global-header{ display: block; }
#Page_Top .atc-inner-top{ margin-top: 0; padding: 1em 2em 3em 2em; max-width:inherit;  }


.kv-container .vis-grp .logo{ /* width: calc( 32.79% * 1.3); */ width: 42.627%; top:72.5%; left:4%; }
.kv-container .vis-grp .cp{ width: calc( 9.642% * 1.3); top:6%; right:2.5%; }
.kv-container .vis-grp .oa{ width: calc( 35.357% * 1.3); top:90%; left:3%; }

.kv-container .vis-grp .op .op-oa{ font-size: 2.4em; top:8em; }

.kv-container .vis-grp .op .op-chara-sil{width: calc( 56.857% * 1.3);  position: absolute; top:10%; left:0; right: 0; margin: 0 auto; }
.kv-container .vis-grp .op .op-chara{width: calc( 56.857% * 1.3); height: 0; position: absolute; top:10%; left:0; right: 0; margin: 0 auto; overflow: hidden; }


.cont-top-news{ width: 100%; background-color: #FFF; position: relative; top:0; right: 0; left:0; margin: 0 auto 3em; }
.news-container {  }

/*
.news-container dl dt{ padding: .1em 0 0 0; }
.news-container dl dd{ padding: .1em .5em 0 .5em; }
*/


.cont-top-twitter-movie{  margin-bottom: 3em; }
.cont-top-twitter{ width: 100%; margin-right: 0; margin-bottom: 3em; }
.cont-top-movie{ width: 100%; }
.banner-container .game-banner{ display: none; }
.banner-container .radio-banner{ width: 60%; margin: 0 0 2em 0;  }
.banner-container .other-banner{ width: 80%; margin: 0;  }

/* SUB-PAGE */
.cont-sub{  }

/* NEWS */
#Page_News .atc-inner{ padding: 2em; }

/* On Air */
#Page_Onair .atc-inner{ padding: 2em; }
.onair-container{ width: 100%; padding: 1em 1em; }
.onair-block{ display: flex; flex-wrap: wrap; padding: .25em 0; }
.onair-block .col-a{ width: 100%; }
.onair-block .col-b{ width: 40%; font-size: .888em; }
.onair-block .col-c{ width: 35%; font-size: .888em; }
.onair-block .col-d{ width: 25%; font-size: .888em; }
.onair-block .col-e{ width: 100%; font-size: .888em; margin-left: 0; }


/* Staff&Cast */
#Page_Staffcast .atc-inner{ padding: 2em; }

/* STORY */
#Page_Story .cont-sub{   }
#Page_Story .atc-inner{ /* padding-bottom: 0;  */}
#Page_Story .content-single{ /* background:url(../assets/story/intro-bg.jpg) no-repeat center center ; background-size: cover; */ }
#Page_Story .content-single .entry-body{ /* padding: 0; */ }
.intro-container{ padding: 2em 0; }
.intro-container{ flex-direction: column; }
.intro-container .text{ width: 100%; margin: 0 auto; font-size: 1.444em; letter-spacing: .1em; }
.intro-container .fig{ width: 80%; margin: 0 auto; padding-top: 10%; }
.ep-container{ padding: 0 ; }


/* Character */
#Page_Character .cont-sub{  }
.cont-character-navi .csr{  top:1.5em; }
.character-navi > div a{  padding: 1em;  }
.chara-figure > .inner{ max-width: inherit; }
.chara-school{ width: 8em; top:.5em;  }
.chara-cloth{ width: 8.333em; top:8em;  }
.team-mark{ position: relative; }
.team-mark > .inner{ width: 10em; margin: 0 auto; }
.machine-figure{}
.machine-figure > .inner{ max-width: inherit; }
.machine-text{ margin-bottom: 2.5em; }
.machine-form{ width: 12em; top:11.9em; }


.bnf-list > .item-x1{ width: 100%; }
.bnf-list > .item-x2{ width: 100%; }
.bnf-list > .item-x2 .item-col{ width: 100%; margin: 0 0 .5em 0; padding: 0 0 .5em 0; border-bottom:rgba(255,255,255,.2) solid .111em }
.bnf-list > .item-x2 .item-col:last-child{ margin: 0; padding: 0; border: none; }

/* MUSIC */
#Page_Music .atc-inner{ padding:0 0 2em 0; }
#Page_Music .content-single{ width: calc( 100% - 4em ); margin: 0 auto; }
.music-container{ display: flex; flex-wrap: wrap;  }
.music-container > div{ margin-bottom: .5em; }
.music-container .left{ width: 100%; margin-right: 0; margin-bottom: 1em;  }
.music-container .right{ width: 100%;  }

/* SPECIAL */
#Page_Special .atc-inner{ padding: 2em; }

.special-list > div{ width: 97%; margin: 1.5%; }
.special-list .thumb{ margin-bottom: .5em; }
.special-list .text{ font-size: 1.444em; font-weight: 900; margin-bottom: 0; text-align: center; }

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

   ■           ■                  ■   ■              
   ■                              ■                  
  ■ ■   ■■■■   ■  ■■■ ■■■   ■■■  ■■■■ ■   ■■■   ■■■■ 
  ■ ■   ■■  ■  ■  ■  ■■  ■  ■  ■  ■   ■  ■■ ■■  ■■  ■
 ■   ■  ■   ■  ■  ■  ■   ■   ■■■  ■   ■  ■   ■  ■   ■
 ■■■■■  ■   ■  ■  ■  ■   ■ ■■  ■  ■   ■  ■   ■  ■   ■
 ■   ■  ■   ■  ■  ■  ■   ■ ■   ■  ■   ■  ■■ ■■  ■   ■
■     ■ ■   ■  ■  ■  ■   ■  ■■■■  ■■  ■   ■■■   ■   ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/

@-webkit-keyframes fadeInLeftSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftSM {
  -webkit-animation-name: fadeInLeftSM;
  animation-name: fadeInLeftSM;
}

@-webkit-keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownSM {
  -webkit-animation-name: fadeInDownSM;
  animation-name: fadeInDownSM;
}

@-webkit-keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSM {
  -webkit-animation-name: fadeInUpSM;
  animation-name: fadeInUpSM;
}
/* bounceInUpSM */
@-webkit-keyframes bounceInUpSM {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5em, 0);
    transform: translate3d(0, 5em, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUpSM {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5em, 0);
    transform: translate3d(0, 5em, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUpSM {
  -webkit-animation-name: bounceInUpSM;
  animation-name: bounceInUpSM;
}
/* fadeInOut */
@-webkit-keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}
@keyframes fadeInOut {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}
.fadeInOut {
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut;
}