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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
body{font-family: YakuHanJPs,"Noto Sans JP", "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;}
.no-yakuhan{font-family: "Noto Sans JP", "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: #1f3c8c solid 2px ; text-decoration: none; border-radius: .6em; font-size: 1em; font-weight: bold; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #1f3c8c; }
.ilink:hover{ text-decoration: none; background-color: #1f3c8c; color: #fff; }

.ilink2{ display: inline-block; padding: 0.2em 0.5em 0.2em 0.5em ; background-color: #1f3c8c; text-decoration: none; border-radius: .9em; font-weight: bold; color: #fff; text-align: center; }
.ilink2,
.ilink2:visited,
.ilink2:active{ color: #fff;}
.ilink2:hover{ text-decoration: none; color: #fff; opacity: .7; }
/*.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 */
.ttl2{color: #1f3c8c; border-bottom: #1f3c8c solid 4px;}
.ttl3{ color: #FFF; background-color: #1f3c8c; padding: .2em .4em; }
.ttl4{font-weight: normal; line-height: 1.2; padding: .2em .2em .2em .4em; text-align: left; border-bottom: #fff dotted 1px; border-left: #fff solid 3px;}
.ttl5{ font-weight: 900; background-color:#fffaa1; padding: .2em; margin-bottom: .5em;}

/* table */
.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(254,229,116,1.0); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a th.spc{ background: none; }
.table-a td{ padding:0.5em; background-color:rgba(254,229,116,0.2); vertical-align: top; }

/* frame */
.frame-rnd05{ border-radius: .5em; }
.frame-rnd10{ border-radius: 1em; }
.frame-rnd15{ border-radius: 1.5em; }
.frame-rnd20{ border-radius: 2em; }
.frame-a{ background: rgba(255,255,255,0.6); box-sizing: border-box;}
.frame-b{ background: rgba(254,249,141,0.2); box-sizing: border-box;}
.frame-c{ background-color: #fffaa1; border: #1f3c8c solid .222em; box-sizing: border-box;}
.frame-d{ background-color: #fff; border: #1f3c8c solid .222em; box-sizing: border-box; border-radius: 1em; overflow: auto; line-height: 0;}
.frame-d2{ background-color: #fff; border: #1f3c8c solid .333em; box-sizing: border-box; border-radius: 2em; overflow: auto; line-height: 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-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: #1f3c8c; border-width: 1px 0px 0px 0px; border-style: dotted; height: 1px; /* 高さ(IE) */ }
hr.sld-blue{ border-color: #1f3c8c; border-width: 1px 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }


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

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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
body{ font-size: 18px; color: #1f3c8c; background:#fff ; background-size: 100% auto; background: url(../images/common-background.png) repeat center top; } 

.bg-particle{ position: fixed; width: 100%; height: 100%; }

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

.part-header{ position: relative; }
.part-middle{ position: relative; }
.part-footer{ padding: 2em 0; max-width: 1200px; margin: 0 auto; position: relative;}

/* header */
.part-header .cont-global-header{ max-width: 447px; width: 24.83em; margin: 0 auto; }
.cont-global-navi{ background-color: rgba(30,59,140,.9); border-bottom: rgba(150,245,80,.8) .222em solid;}
.global-navi{ max-width: 1120px; margin: 0 auto; list-style-type: none; padding:.4em 0; display: flex; }
.global-navi li{ margin: 0; padding: 0 .5em; display: block; }

.cont-global-navi-sp,
.cont-sp-btn{ display: none; }

/* middle */
.cont-sub{ max-width: 1054px; margin: 0 auto; }
.page-title{ font-size: 1em; margin: 0 auto 1em auto; max-width: 420px; padding: .5em 0; border: #1f3c8c solid .333em; border-top: none; border-radius: 0 0 2em 2em; background-color: rgba(255,255,255,1); }

.atc-inner{ padding:1.5em;}

.cont-sub-navi{ margin: 0 auto; background-size: contain; margin-bottom: 2em;}
.sub-navi{ margin: 0 auto; list-style-type: none; padding:0; display: flex; flex-wrap: wrap; }
.sub-navi li{ margin: 0; padding: 0; display: block; line-height: 0; }
.sub-navi li.off{ opacity: .7; pointer-events: none; }
.atc-ttl-sub{ font-size: 1em; margin: 0 ; max-width: 18em; padding: .5em 0; border: #1f3c8c solid .333em; border-bottom: none; border-radius: 2em 2em 0 0; background-color: rgba(255,255,255,1);}
.atc-frame-sub{border: #1f3c8c solid .333em; border-radius: 2em; padding:1.5em;  background-color: rgba(255,255,255,1);}
.atc-frame-sub2{border: #1f3c8c solid .333em; border-radius: 0 2em 2em 2em; padding:1.5em;  background-color: rgba(255,255,255,1);}

.cat-ttl{ display: inline-block; font-size: 1em; color: #1f3c8c; font-weight: 900; line-height: 1.1; padding: 0 0 0 1.5em; background: url(../images/common-entry-title-l.png) no-repeat left center; background-size: 1em; }
.cat-ttl > span{ display: inline-block; background: url(../images/common-entry-title-r.png) no-repeat right center; padding: .5em 1.5em .5em 0; background-size: 1em;}

.content-entry{ border:#1f3c8c solid .333em ; background-color: rgba(255,255,255,.8); border-radius: 2em;  padding: 1.5em; margin: 0 auto 3em auto; box-sizing: border-box;}
.content-entry:last-child{margin-bottom: 0;}
.content-entry .entry-head{ margin-bottom: 1.1em; }
.content-entry .entry-date{ color: #1f3c8c; font-size: 0.88em; padding: .1em; margin-bottom: .5em; }
.content-entry .entry-title{ font-size: 1.222em; color: #1f3c8c; font-weight: 900; line-height: 1.1; padding: 0 0 0 1.5em; background: url(../images/common-entry-title-l.png) no-repeat left center; background-size: 1.222em; }
.content-entry .entry-title > span{ display: inline-block; background: url(../images/common-entry-title-r.png) no-repeat right center; padding: .5em 1.5em .5em 0; background-size: 1.222em;}

.content-entry.nodate .entry-title{ margin-left: 0em; border-left: none; }
.content-entry .entry-body{ padding: 0 ; line-height: 1.5; color: #222; }
.content-entry .entry-body .sep{ border-bottom: #fee574 solid .5em; padding-bottom: .5em;}
.content-entry .entry-left{ width: 47.62%; margin-right: 1.9%; float: left; }
.content-entry .entry-right{ width: 50.48%; float: left; }
.content-single{ margin: 0 auto 3em auto; box-sizing: border-box;}

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

/* footer */
.ft-copyrihgt > div{ width: 38.88em; height: 4.5em; background: url(../images/common-footer-bg.png) no-repeat center center; background-size: contain; margin: 0 auto; }
.ft-copyrihgt > div > span{ display: block; color: #FFF; font-size: .5em; padding-top:4.5%; margin: 0 auto; text-align: center;  }
.ft-pgtop{ width: 4.6em; height: 4.6em; position: fixed;  bottom:2em;  right:1em; }


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

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

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

/* TOP-PAGE */

#Page_Top .part-header{ position: absolute; z-index: 100; top:0; }
.cont-main{ max-width: 1400px; margin: 0 auto; }
#Page_Top .cont-sub{ max-width: 1120px; margin: 0 auto; }
.atc-inner-top{ padding:0 ;}

/* main */
.kv-container{ width:100%; position: relative; margin-bottom: 1em; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .l0{ position: relative; }
.kv-container .l2{ width: 38.833%; position: absolute; top:89%; left: 5.9%; }/*onair*/
.kv-container .l3{ width: 29.916%; position: absolute; top:7%; right: 0%; }/*catch*/
.kv-container .l4{width: 46.91%; position: absolute; top:70.0%; left:1%;  }/*logo*/
.kv-container .l5{ /* width: 20.5%; */ width: 29%; position: absolute; top:84%; right: 3%; }/*badge*/
.kv-container .l6{ width: 50%; position: absolute; top:36%; left: 0; right: 0; margin: 0 auto; }/*onair - op*/
.kv-container .l7{ width: 60%; position: absolute; top:13.0%; left: 0; right: 0; margin: 0 auto;}/*logo - op*/


.kv-container .l1,
.kv-container .l2,
.kv-container .l3,
.kv-container .l4,
.kv-container .l5,
.kv-container .l6,
.kv-container .l7{ display:none; }



#Loading{ margin: 0 auto; position: absolute; top:0; width: 100%; height: 100%;}
#Loading .loading-icon{ width: 10em; height: 10em; margin: 0 auto; position: absolute; top:calc(50vh - 5em); left:0; right:0;  background-image: url(../images/loading.png) ; background-size: contain; animation-iteration-count: infinite; animation-duration: 1s; -webkit-animation-name: loadingIcon; animation-name: loadingIcon;}
@keyframes loadingIcon {
  from,
  20%,
  53%,
  80%,
  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);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
#Loading .loading-text{ font-size: .888em; font-weight: 900; text-align: center; margin: 0 auto; position: absolute; top:calc(50vh + 5rem + 1em); left:0; right:0; animation-iteration-count: infinite; animation-duration: 1s; -webkit-animation-name: loadingText; animation-name: loadingText; }
@keyframes loadingText {
  0% { opacity: 1; }
  50% { opacity: .3; }
  100% { opacity: 1; }
}

.atc-ttl-top{ font-size: 1em; margin: 0 ; max-width: 14.44em; padding: .5em 0; border: #1f3c8c solid .333em; border-bottom: none; border-radius: 2em 2em 0 0; background-color: rgba(255,255,255,1);}
.atc-frame-top{ border: #1f3c8c solid .333em; border-radius: 0 2em 2em 2em; padding:1.5em;  background-color: rgba(255,255,255,1);}


.cont-top-news-twitter{ display: flex; flex-wrap: wrap; margin-bottom: 2em; } 
.cont-top-news{ width: calc( 50% - 1em); margin-right: 2em; }
.cont-top-twitter{ width: calc( 50% - 1em); }

.news-container { overflow-y: auto; min-height: 230px; }
.news-container dl{ font-size: 1.0em; margin: 0 0 .5em 0; color: #222;}
.news-container dl:last-child{ margin: 0;}
.news-container dl dt{ font-size: 0.88em; font-weight: normal; margin-bottom: 0; letter-spacing: 0.05em; color: #1f3c8c; display: block;  }
.news-container dl dd{ font-size: 0.99em; line-height: 1.4; }
.news-container dl dd a,
.news-container dl dd a:visited{ text-decoration: none; color: #000; }
.news-container dl dd a:hover{ text-decoration: underline; color: #000; }

.cont-top-movie{ }
.movie-container{ margin: 0 auto; max-width: 1080px; text-align: center;}
.movie-navi{ /* background-color: rgba(0,0,0,0.5); */ width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.movie-navi > div{ width: 15.666%; padding: .5%; /* max-width: 240px; */ }
.movie-navi > div a{ margin-bottom: .3em; }
.movie-navi > div p{ color: #FFF; font-size: 0.777em; text-align: center; margin-bottom: 0;  }
/* .movie-navi{ display: none; } */


/* SUB-PAGE */
.cont-sub{ min-height: 30em; }

/* NEWS */
#Page_News .cont-sub{ max-width: calc( 54px + 880px ); margin: 0 auto; }

/* ON AIR */
#Page_Onair .cont-sub{ max-width: calc( 54px + 920px ); margin: 0 auto; }
#Page_Onair .atc-frame-sub{ padding:1.5em;  background-color: rgba(235,104,119,.4);}
.onair-table{  }
.onair-table tr{ }
.onair-table th{ line-height: 1.4; padding-top: .7em; vertical-align: top; }
.onair-table td{ line-height: 1.4; padding-top: .7em; padding-left: 1em; font-weight: bold; }
.onair-str-list{ font-weight: bold; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.onair-str-list > div{ padding: .3em .2em; width: 33%; }

/* Staff&Cast */
#Page_Staffcast .cont-sub{ max-width: calc( 54px + 920px ); margin: 0 auto; }
#Page_Staffcast .atc-frame-sub{ padding:.8em;  background-color: rgba(255,239,165,.9);}
.staffcast-cat-ttl{ font-size: 1em; width: 7.78em; }
.staffcast-cmt-btn{ display: inline-block; width: 7em; }

/* STORY */
#Page_Story .cont-sub{ max-width: calc( 54px + 1000px ); margin: 0 auto; }
#Page_Story .atc-frame-sub2{ padding:.8em;  background-color: rgba(164,246,100,.4);}
#Page_Story .atc-frame-sub2 > div{  }
#Page_Story .atc-frame-sub{ padding:2em; padding-top: 6em  ;  background-color: rgba(164,246,100,.4);}

.story-navi{ display: flex; flex-wrap: wrap; width: 81.7%; max-width: 817px; padding: .9em; margin: 0 auto; margin-bottom: 1em; background: url(../assets/story/navi/bg.png) no-repeat center center; background-size: contain; justify-content: center; }
.story-navi > li{ width: 4.406365%; margin: 0.70%; }
.story-navi > li.nitl1{ width: 28.151775%;  }
.story-navi > li.cs{ opacity: .5; pointer-events: none; }
.story-navi > li.crt{ pointer-events: none; }

.ep-title{ width:43%; text-align: center; margin: 0 auto .5em auto; position: absolute; top:.5em; left: 0; right: 0; }
.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 1em 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{ max-width: calc( 54px + 1000px ); margin: 0 auto; }
#Page_Character .cont-sub-navi{ width: 75%; background: url(../assets/character/navi/bg.png) no-repeat center center; background-size: contain; }
#Page_Character .sub-navi{ margin: 0 auto; list-style-type: none; padding: 1em .5em; display: flex; flex-wrap: wrap; }
#Page_Character .sub-navi li{ width: 16.665%; margin: 0; padding: 0 .5em; display: block; }

#Page_Character .atc-frame-sub{ padding:.8em;  background-color: rgba(140,167,248,.6);}
.character-cont{ width: 100%; position: relative;}
.character-cont#C1{ margin-top: -5em; }
.character-cont#C2{ margin-top: -10em; }
.character-cont#C3{ margin-top: -8em; }
.character-cont#C4{ margin-top: -7em; }
.character-cont#C5{ margin-top: -6em; }
.character-cont#C6{ margin-top: -12em; /* min-height: 100%; */ }

.character-spc{ position: relative; top:0; }
.character-text{ position: absolute; width: 54.17%; top: 25%;  left: inherit; right: 39%; }
.character-cont-odd .character-text{ left: 39%; right: inherit; }
.character-img{ position: absolute; width: 49.83%; top:0; left: inherit;  right: 0; }
.character-cont-odd .character-img{ left: 0;  right: inherit; }
.character-img .c-img1{ position: relative; }
.character-img .c-img2{ position: relative; }
.character-bulk{ width: 7.8%; position: absolute; top:6%; left: inherit;  right: 38%; }
.character-bulk:hover{ cursor: pointer; opacity: .7; }
.character-cont-odd .character-bulk{ left: 38%; right: inherit; }

/* PRODUCTS */
#Page_Products .cont-sub{ max-width: calc( 54px + 1000px ); margin: 0 auto; }
#Page_Products .cont-sub-navi{ /* width: 52%; */ width: 67%; background: url(../images/subnavi/products-bg.png) no-repeat center center; background-size: contain; }
#Page_Products .sub-navi{ margin: 0 auto; list-style-type: none; padding: 2em .5em; display: flex; flex-wrap: wrap; }
#Page_Products .sub-navi li{ /* width: 33%; */ width: 25%; margin: 0; padding: 0 .2em; display: block; }

#Page_Products .atc-frame-sub2{ padding:.8em;  background-color: rgba(56,227,211,.8);}
#Page_Products .atc-frame-sub2 > div{  }
.product-ttl1{  background-color: rgba(56,227,211,.8); }

.bnf-list{ display: flex; flex-wrap: wrap; margin-bottom: 1em; align-items: flex-start; }
.bnf-list > .item-x1{ width: 50%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top;  }
.bnf-list > .item-x2{ width: 100%; 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:#fffaa1; padding: .2em; margin-bottom: .5em; }
.bnf-list .thumb-np{ display: none; }
.bnf-list .thumb{ padding: .5em 0; }
.bnf-list .data{ width: 100%; }
.bnf-list .excond{ font-size: 0.666em; color: #1f3c8c; font-weight: 900; background-color:rgba(255,255,255,.8); padding: .2em; letter-spacing: -0.05em; margin-bottom: .3em; }
.bnf-list .name{ font-size: 1.111em; color: #1f3c8c; font-weight: 900; letter-spacing: -0.05em; margin-bottom: .3em; }
.bnf-list .cond{ font-size: 0.777em; margin-bottom: .3em; font-weight: 900; }
.bnf-list .start{ font-size: 0.777em; font-weight: 900; }

/* SPECIAL */
#Page_Special .cont-sub{ max-width: calc( 54px + 1000px ); margin: 0 auto; }
#Page_Special .cont-sub-navi{ width: 67%; width: 67%; background: url(../images/subnavi/products-bg.png) no-repeat center center; background-size: contain; }
#Page_Special .sub-navi{ margin: 0 auto; list-style-type: none; padding: 2em .5em; display: flex; flex-wrap: wrap; }
#Page_Special .sub-navi li{width: 20%; /* width: 25%; */ margin: 0; padding: 0 .2em; display: block; color: #FFF; }
#Page_Special .atc-frame-sub{ padding:.8em;  background-color: rgba(217,185,244,.8);}

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

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

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

.bg-pllx-x{ background-size: auto 120%; }
.bg-pllx-n{ background-size: 120%; }
.bg-pllx-f{ background-size: 120%; }

/* header */
.part-header,
#Page_Top .part-header{ position: fixed; z-index: 100; top:0; }
.part-header .cont-global-header{ display: none; }
.part-footer{ padding: 2em 2em .5em 2em; }

.cont-global-navi-sp{ background-color: rgba(30,59,140,.9); border-bottom: rgba(150,245,80,.8) .222em solid; display:flex; padding: 1em;}
.global-navi-sp-logo{ width: 35%; }
.global-navi-sp{ width: 65%; list-style-type: none; padding:0; margin: 0; display: flex; flex-wrap: wrap;  }
.global-navi-sp li{ margin: 0; width: 50%; padding: 0 0 0 1em; margin: 0 ; line-height: 0; background: url(../images/navi/sp/sep.png) no-repeat left center; background-size: .8em; display: block;}
.global-navi-sp li.l,
.global-navi-sp li.r,
.global-navi-sp li.sep{ display: none; }

.cont-global-navi{ display: none; }
.cont-global-navi-sp{ display: none; }
.cont-sp-btn{ display: block; width: 4em; position: absolute; z-index: 1000; top:0; }

.cont-global-navi-sp.on{ display: flex; }
.sp-navi-open.on{ display: block; }
.sp-navi-close.on{ display: block; }
.cont-global-navi-sp.off{ display: none; }
.sp-navi-open.off{ display: none; }
.sp-navi-close.off{ display: none; }

/* middle */
.cont-sub{ }
.page-title{ max-width: 20em; }

.atc-inner{ padding:1.5em;}

/* footer */
.ft-copyrihgt > div{ width: 90%; height: 4.5em;  }
.ft-copyrihgt > div > span{ padding-top:5.9%;  }
.ft-pgtop{ width: 4.6em; height: 4.6em; position: fixed;  bottom:2em;  right:1em; }

/* TOP-PAGE */
.atc-inner-top{ padding:0 1.5em;}
.kv-container .l5{ /* width: 30.5%; */ width: 39.5%; position: absolute; top:83%; right: 3%; }/*badge*/
.cont-top-news-twitter{ display: flex; flex-wrap: wrap; margin-bottom: 2em; } 
.cont-top-news{ width: 100%; margin-right: 0; margin-bottom: 2em;}
.cont-top-twitter{ width: 100%; }
.news-container { min-height: inherit; }
.movie-navi > div{ width: 32%; padding: .5%; /* max-width: 240px; */ }

/* SUB-PAGE */
.cont-sub{ min-height: 40em; }

/* On Air */
.onair-str-list > div{ padding: .3em .2em; width: 100%; }

/* STORY */

.story-navi{ display: flex; flex-wrap: wrap; width: 96%; max-width: inherit; padding: .3em; background-image: none; background-color: #1f3c8c; border-radius: 2em; }
.story-navi > li{ width: calc(4.406365% * 2); margin: 0.70%; }
.story-navi > li.nitl1{ width: calc(28.151775% * 2);  }

.ep-title{ width:70%; text-align: center; margin: 0 auto .5em auto; position: absolute; top:.5em; left: 0; right: 0; }
.ep-slider-thumb{ flex-wrap: wrap; }
.ep-slider-thumb > div{ width: 33.333%; }

/* Character */
#Page_Character .cont-sub-navi{ width: 100%;  }
.character-set{}

.character-cont#C1{ margin-top: -4em; }
.character-cont#C2{ margin-top: -5.5em; }
.character-cont#C3{ margin-top: -4em; }
.character-cont#C4{ margin-top: -3em; }
.character-cont#C5{ margin-top: -3em; }
.character-cont#C6{ margin-top: -6em; }


/* PRODUCTS */
#Page_Products .cont-sub-navi{ /* width: 75%; */ width: 100%;  }
#Page_Products .sub-navi{  padding: 1.5em .5em;  }
/* .bnf-list.bnf-list-music .item{ width: 100%; display: flex; flex-wrap: wrap; margin:0 0 1em 0; align-items: center; } */
.bnf-list > .item-x1{ width: 100%; }
.bnf-list > .item-x2 .item-col{ width: 100%; margin: 0 0 .5em 0; padding: 0 0 .5em 0; border-bottom:#fffaa1 solid .111em }
.bnf-list > .item-x2 .item-col:last-child{ margin: 0; padding: 0; border: none; }

/* SPECIAL */
#Page_Special .cont-sub-navi{ width: 100%;  }
#Page_Special .sub-navi{  padding: 1.5em .5em;  }

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