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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
/* Noto Serif Japanese */
/* url https://developers-jp.googleblog.com/2017/04/noto-serif-cjk-is-here.html */
/*
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NotoSerifCJKjp-Regular.woff2') format('woff2'),
    url('../fonts/NotoSerifCJKjp-Regular.woff') format('woff');
  font-display: swap;
}
*/
/* Spectral */
/* url https://fonts.google.com/specimen/Spectral */
@font-face {
  font-family: 'spectral';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/spectral-extralight.woff2') format('woff2'),
    url('../fonts/spectral-extralight.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'spectral';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/spectral-regular.woff2') format('woff2'),
    url('../fonts/spectral-regular.woff') format('woff');
  font-display: swap;
}

/*
body{font-family:'spectral' , 'Noto Serif Japanese', serif, sans-serif;
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
*/

body{font-family:'spectral' , 'Noto Serif JP', serif, sans-serif;
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

/* ---- common style ---- */
a,a:visited {color: #000; text-decoration: underline;}
a:hover,a:active { }
a.ilink{color:#fff; border: #fff solid 1px; display: inline-block; padding: .5em .5em .2em .5em;}
a.ilink:before{ content:"> ";}
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; }

.ac-color1{ color: #FF0000; }

.ttl1{ border-bottom: #000 solid 1px; margin-bottom: .5em; }

.table-a{ border-collapse: collapse; margin-bottom: .5em;}
.table-a th{ padding:0.5em 0.1em 0.5em 0.5em; background-color: rgba(0,0,0,.02);border-bottom: rgba(0,0,0,.2) solid 1px; font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em 0.5em 0.5em 0.1em; background-color: rgba(0,0,0,.02);border-bottom: rgba(0,0,0,.2) solid 1px; vertical-align: top; }

/* bootstrap customize */
.modal-backdrop {
background-color: rgba(29,50,77,.95) !important;
   opacity:1; 
}
.modal-backdrop.in{
   opacity:1; 
}
.modal-content {
  border: 0;
  box-shadow: none;
  background: none;
}

/* remodal customize */
.remodal-overlay {
/*  background: rgba(29,50,77,.95);  */
 background: rgba(255,234,206,.95); 
}
.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 35px;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

/*   color: #2b2e38; */
  background: rgba(0,0,0,0);
}
.remodal-close {
  position: fixed;
  top: 1em;
  left: inherit;
  right: 0;

  display: block;
  overflow: visible;
  font-size: 8px;
  width: 9.5em; /* 35px; */
  height: 13.4375em; /* 35px; */

  margin: 0;
  padding: 0;

  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;

  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
}

.remodal-close:hover,
.remodal-close:focus {
  color: inherit;
  opacity: 0.8;
}

.remodal-close:before {
  display: none;
}
@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 900px;
  }
}

/* image stretch */
img{max-width: 100%; height: auto; width: auto\9;}

/* responsive display */
.hide{ display: none;}
.hide-pc{ display: none; }
.hide-sp{ display: inherit;}

/* tiwtter widget fix for ios */
.twitter-container iframe { width: 740px !important; }

/* youtube embed responsive */
.video-embed {position: relative;height: 0;padding: /*30px*/ 0 0 56.25%;overflow: hidden;}
.video-embed iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* colorbox customize */
#cboxOverlay{background:#FFF;}
#cboxContent{margin-top:60px;background:#FFF;}
#cboxLoadedContent{border:5px solid #FFF; background:#fff;}
#cboxClose{top:-55px; right:5px; display:block; background:url(../images/lib/colorbox/close.png) no-repeat top center; width:50px; height:50px; }
#cboxClose:hover{ background-position: top center; }
#cboxPrevious{top:-55px; left:5px; display:block; background:url(../images/lib/colorbox/prev.png) no-repeat top center; width:50px; height:50px; }
#cboxPrevious:hover{ background-position: top center; }
#cboxNext{top:-55px; left:65px; display:block; background:url(../images/lib/colorbox/next.png) no-repeat top center; width:50px; height:50px; }
#cboxNext:hover{ background-position: top center; }

/* slick fix */
.slick-list,.slick-slide {outline: none !important;}/* Chromeでフォーカス時の枠線を消す */
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html{ height: 100%; }
body{ font-size: 16px; color: #000; background-color: #efeee7; height: 100%; }
.wrapper{ background: #ffeace url(../images/common-wrapper-btmbg.png) repeat-x center bottom ; }
article{ /* background-color: #f7f6f0; */ }
.sub-page article{ background-color: #f7f6f0; }
.wrapper,header,article,section,footer{  position: relative;  }

header{ width: 270px; position: absolute; top:0; left: 0; z-index: 1; }
header .logo{ width: 250px; padding-top: 15px; padding-bottom: 5px; }
.sp-open{ display: none; }
.sp-menu{ display: none; }
nav.global{  }
nav.global ul{ display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; }
nav.global ul li{ width: 270px; display: block; font-size: 15px; line-height: 17px; }
nav.global ul li span{ display: block; font-size: 9px;}
nav.global ul li a{ color: #000; display: block; padding: 17px 0px 17px 40px; text-decoration: none;  }
nav.global ul li a:hover{ color: #e5d3bb; background-color: #000; }
nav.global ul li.cs a{ color: rgba(0,0,0,0.2); pointer-events: none; }

nav.global p.share-title{ font-size: 10px; display: block; padding: 17px 0px 0px 40px; margin-bottom: 5px; }
nav.global ul.share{ display: flex; flex-wrap: nowrap; list-style-type: none; margin: 0; padding: 0px 0px 10px 40px; }
nav.global ul.share li{ width: 30px; display: block; margin-right: 10px; }
nav.global ul.share li a{ display: inline; padding: inherit; }
nav.global ul.share li a:hover{ color: inherit; background-color: inherit; }

nav.global p.banner-title{ font-size: 10px; display: block; padding: 17px 0px 0px 40px; margin-bottom: 0px; }
nav.global .banner{ padding: 0px 0px 0px 40px; }

article{ width:calc(100% - 270px + 20px - 20px); min-height: 1020px; position: relative; top:20px; left: 250px; margin-bottom: 40px; }

.atc-inner{ width: 100%; max-width: 850px; padding: 0 20px; margin: 0 auto; position: relative; }
.pagetitle{ position: relative; top:-17px; margin-bottom: 70px; }
.pagetitle .pgt-e{ margin-bottom: 16px;}
.pagetitle .pgt-j{ font-size: 25px; letter-spacing: 0.3em; }

footer{ margin: 0 auto; position: relative; padding:100px 80px; }
.ft-banner{ margin-bottom: 100px; display: flex; }
.ft-banner > div{ display: inline-block; margin: 0 10px 10px 0; }
.ft-banner > div.hide-pc{ display: none; }
.ft-copyrihgt{ font-size: 12px; padding-top: 18px; }
.ft-share{ float: right; display: flex; flex-wrap: nowrap; margin-top: -30px;}

nav.footer-share:first-child{ margin-right: 30px;}
nav.footer-share p{ font-size: 10px; display: block; margin: 0; padding-top: 10px;}
nav.footer-share ul{ display: flex; flex-wrap: nowrap; list-style-type: none; margin: 0; padding: 0; }
nav.footer-share ul li{ width: 30px; display: block; margin-right: 10px; }
nav.footer-share ul li:first-child{ width: inherit; }
/*
article,
footer{ width:calc(100% - 220px); max-width: calc(1920px - 220px); min-width: calc(1330px - 220px);  margin: 0 auto;}
*/

/* .wrapper,footer{ min-width: 1000px; } *//* スクロールバーと合わせて約1024px */
.wrapper,footer{ min-width: 1180px; }/* スクロールバーと合わせて約1200px */

/* op-movie */
#Opening{ max-width: 1920px; min-width: 1180px; margin: 0 auto; position: absolute; top:0; left:0; right:0;}
#Opening .fill{ width: 100%; height: 90vh; text-align: center; margin: 0 auto; }

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

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

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


/* TOP */
/* main */
.sc-main{ line-height: 0; }
.sc-main{ width: 100%; margin: 0; position: relative; }
.sc-main .main-visual{ width: 100%; margin: 0; text-align: center; position: relative;}
.sc-main .main-visual .spacer{ position: relative; }
.sc-main .main-visual .vis{ position: absolute; top:0; display: none; }
.sc-main .main-changer{ display: flex; position: absolute; bottom:-95px; left:-10px; z-index: 1; }
.sc-main .main-changer a{ display: block; }
.sc-main .main-changer a:hover{ opacity: 0.8; cursor: pointer; }
.main-onair{ width: 100%; margin: 0; text-align: center; position: absolute; top:-20px; left: 0; right: 0; }
.main-catch{ width: 100%; text-align: center; position: absolute; top:15%; left:auto; right: 0px;}

.sidebar{ width: 270px; position: absolute; top:350px; right:0px; }

/* movie , news , twitter */
.sc-movie,
.sc-news,
.sc-twitter{ width: 270px; position: relative; margin: 0 0 30px auto; padding-top: 15px; }
.sc-movie .cont-title,
.sc-news .cont-title,
.sc-twitter .cont-title{ font-size: 15px; color: #ffeace; background-color: #000; display: inline-block; padding: 4px 8px 2px 8px; position: absolute; top:0px;}
.movie-container,
.news-container,
.twitter-container{ width: 260px; margin: 0 0 0 auto; background-color: #ffeace; box-shadow: 0 0 15px gray;}

.sc-movie{ width: 210px; }
.movie-container{ width: 200px; }

.news-container{ padding: 20px; }
.news-container dl{ padding: 16px 0 8px 0; margin: 0;}
.news-container dl dt{ font-size: 13px; font-weight: 400; margin-bottom: .5em; letter-spacing: 0.2em; }
.news-container dl dd{ font-size: 14px; }
.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; }

.sc-twitter{ }
.sc-twitter .cont-title{ }
.twitter-container{ padding: 20px 0px 0px 10px; }
.twitter-btn{ width: 260px; margin: 0 0 0 auto; padding: 15px 0; background-color: #000; font-size: 1em; line-height: 1.2; text-align: center;}
.twitter-btn img{ width: 130px; }

/* SUB */
.sc-title{ font-size: 25px; letter-spacing: 0.3em;}
.cat-title{ font-size: 25px; letter-spacing: 0.3em; margin-bottom: 3em;}
/* NEWS */
.entry{ margin-bottom: 150px;}
.entry:last-child{ margin-bottom: 0;}
.entry-head{ position: relative; margin-bottom: 30px; }
.entry-date{ font-size: 18px; letter-spacing: 0.2em;}
.entry-title{ font-size: 25px; letter-spacing: 0.2em;}
.entry-share{ position: absolute; top:0; right: 0;}
.entry-share p{ font-size: 9px; display: block; margin: 0; padding-top: 7px;}
.entry-share ul{ display: flex; flex-wrap: nowrap; list-style-type: none; margin: 0; padding: 0; }
.entry-share ul li{ width: 15px; display: block; margin-left: 15px; }
.entry-share ul li:first-child{ width: inherit; }
.entry-body{ font-size: 14px; letter-spacing: 0.1em; line-height: 2;}

/* STORY */
/* #Page_Story .pagetitle .pgt-e{ margin-bottom: 16px;} */
.intro-body{ font-size: 14px; letter-spacing: 0.1em; line-height: 2;}
.ep-container{ margin-bottom: 10%; }
.ep-cut{ display: flex; flex-wrap: wrap; max-width: 690px; margin-bottom: 2%;  }
.ep-cut > div{ width: 25%; box-sizing: border-box; padding: .8%; }
.ep-staff{ font-size: 12px; letter-spacing: 0.1em; color: #666;}

/* ON AIR */ 
.onair-table{ box-sizing: border-box; width: 100%; letter-spacing: .2em; }
.onair-table tr{ border-bottom: #000 solid 1px; }
.onair-table thead td{ font-size: 14px; padding: 0 0 .8em .8em; }
.onair-table tbody th{ width: 9em; font-size: 25px; font-weight: normal; }
.onair-table tbody td{ font-size: 18px; }
.onair-table tbody th,.onair-table tbody td{ padding: 1em .5em; }
.onair-table a{ text-decoration: none; }

/* STAFF/CAST */
/*
#Page_Staffcast .pagetitle{ top:-17px; margin-bottom: 70px; }
#Page_Staffcast .pgt-e{ margin-bottom: 22px;}
*/

.staff-list{ display: flex; flex-wrap: wrap; }
.staff-list > div{ width: 50%; margin-bottom: 7%; }
.staff-list > div:nth-child(odd){ width: 52%;}
.staff-list > div:nth-child(even){ width: 48%;}
.staff-list .pos{ font-size: 13px; margin-bottom: 5px;}
.staff-list .name{ font-size: 36px; margin-bottom: 0px;}
.staff-list .mgz{ font-size: 12px;}
.staff-list .e-name{ font-size: 11px;}

/* CHARACTER */
.atc-inner-character{ width: 100%; max-width: 850px; padding: 0; margin: 0 auto; position: relative;}
nav.character-navi{ display: flex; margin: -7% 0 7% 0; }
nav.character-navi > div{ width: 18%; margin-right:2.5%; }
.character-col{ position: relative; margin-bottom: 70px; }
.character-col .chara-prf{ width: 51.235%; position: absolute; top:0; left: 34%; }
.character-col .name{ font-size: 70px; line-height: 1; margin-bottom: .1em; }
.character-col .name-e{font-size: 16px;  margin-bottom: 2.8em;}
.character-col .dsc{font-size: 16px;  margin-bottom: 2.8em;}
.character-col .cv{font-size: 16px; }
.character-col .chara-fig{ position: relative; }

/* MOVIE */
.movie-list{ display: flex; flex-wrap: wrap; }
.movie-list > div{ width: 48%; margin-bottom: 7%; margin-right:2%;  }
.movie-list > div:nth-child(even){ margin-right:0; margin-left:2%;    }
.movie-list .thumb{ margin-bottom: .5em; text-align: center; display: inline-block; background-color: #b2eeff;}
.movie-list .thumb a{ opacity: 0.65; }
.movie-list .thumb a:hover{ opacity: 1; }
.movie-list .name{ font-size: 14px; margin-bottom: 0px; text-align: center;}

/* BDDVD */
nav.bddvd-navi{ display: flex; flex-wrap: wrap; margin: -7% 0 7% 0; }
nav.bddvd-navi > a{ width: 18%; margin: 0 2.5% 2.5% 0; border: #000 solid 1px; display: block; font-size: 14px; text-align: center; padding: 1em 0; text-decoration: none; }
nav.bddvd-navi > a:hover{ background-color: #000; color: #FFF; }
nav.bddvd-navi > a.bc{ width: 24.83%; margin: 0 2.5% 2.5% 0;}
.bddvd-spec{ display: flex;}
.bddvd-spec .c1{ width: 33%; display: flex; flex-wrap: wrap; }
.bddvd-spec .c1 >div{ width: 40%; }
.bddvd-spec .c1 >div.clp{ width: 100%; }
.bddvd-tk{ display: flex;}
.bddvd-tk >div{ width: 45%; margin-right: 10%; }
.bddvd-tk >div:last-child{ margin: 0;}

.bddvd-bnf-table{ border-bottom: #000 solid 1px; line-height: 1.4;}
.bddvd-bnf-table tr{ border-top: #000 solid 1px; }
.bddvd-bnf-table th{ padding: 1em;}
.bddvd-bnf-table td{ padding: 1em .5em;}
.bddvd-bnf-table td.c1{ white-space: nowrap; }
.bddvd-bnf-table td.c2{ white-space: nowrap; }

.bddvd-bnf-table2{ border-bottom: #000 solid 1px; line-height: 1.4;}
.bddvd-bnf-table2 tr{ border-top: #000 solid 1px; }
.bddvd-bnf-table2 th{ padding: 1em;}
.bddvd-bnf-table2 td{ padding: 1em .5em;}
.bddvd-bnf-table2 td.c1{ width: 24%;}
.bddvd-bnf-table2 td.c2{ }

.bddvd-illst{ display: flex; justify-content: space-between; margin-bottom: 1em; }
.bddvd-illst > div{ width: 49%; text-align: center; }
.bddvd-illst > div a{ display: block; width: 100%; text-decoration: none; }
.bddvd-illst > div a > div{ height: 140px; background-position: center center; background-size: cover; background-repeat: no-repeat;}
.bddvd-illst > div a:hover{ cursor: pointer; opacity: 0.7; }
.bddvd-illst > div p{ display: block; }

/* MUSIC */
.entry-music{ display: flex; flex-wrap: wrap; margin-bottom: 70px; }
.entry-music p{ margin-bottom: 1.4rem;}
.entry-music .entry-cst{ font-size: 18px; margin-bottom: 0.5em;line-height: 1.5;}
.entry-music-left{ width:46.297%; margin-right:4.94%; text-align: center; }
.entry-music-right{ width:48.763%; }

/* GOODS */
.goods-table{ border-bottom: #000 solid 1px; line-height: 1.4; box-sizing: border-box; width: 100%; margin-bottom: .5em; }
.goods-table tr{ border-top: #000 solid 1px; }
.goods-table th{ padding: 1em; width: 35%;}
.goods-table td{ padding: 1em .5em;}
.goods-table td.c1{ white-space: nowrap; }
.goods-table td.c2{ white-space: nowrap; }


/* BOOK */
.entry-book{ display: flex; flex-wrap: wrap; margin-bottom: 70px; }
.entry-book p{ margin-bottom: 1.4rem;}
.entry-book-left{ width:39.51%; margin-right:4.94%; text-align: center; }
.entry-book-right{ width:55.55%; }
.entry-book-bottom{ width:100%; }

/* SPECIAL */
.special-list{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.special-list > div{ width: 48%; margin: 0 0 5% 0; }
.special-list > div a{ display: block; text-decoration: none; text-align: center; }
.special-list > div a:hover{ opacity: 0.7; }
.special-list .thumb{ margin-bottom: 5px;}
.special-list .title{ font-size: 14px; margin-bottom: 0px;}

.comment-block{background-color: #FFF; padding: 20px; background-position: right top; background-repeat: no-repeat;}
/*
.pagetitle{ position: relative; top:-8px; margin-bottom: 70px; }
.pagetitle .pgt-e{ margin-bottom: 30px;}
.pagetitle .pgt-j{ font-size: 25px; letter-spacing: 0.3em; }
*/
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

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

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

}
/* Custom 1330 ----------------------------------------------------------------------------- */
@media (max-width: 1329px) {
/*
article,
footer{ width:calc(1330px - 220px); margin: 0 auto 0 110px;}
*/
}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* COMMON */
.pcbr {display: none;}
.pcbr:before {content: "" ;}
.spbr:before {content: "\A" ;white-space: pre ;}
.hide-pc{ display: inherit; } 
.hide-sp{ display: none;}

.table-a{ }
.table-a th{ border-bottom: none; padding-bottom: 0; padding:0.5em 0.5em 0 0.5em;  }
.table-a td{ padding:0 0.5em 0.5em 0.5em; }

.remodal{  padding: 20px;}
.remodal-close { top:2em; font-size: 6px; width: 7em;}

/* STRUCTURE */
#Opening{width: 100%; max-width: inherit; min-width: inherit;}
#Opening .fill{ height: 90vh; text-align: center; }
#Opening .fill picture{ width: 18vw;}

.wrapper{ background-image: none ; }
header{ width: 100%; height: auto; position: relative; }
header .logo{ width: 50%; max-width: 400px; padding-top: 3px; padding-bottom: 3px; margin: 0 auto; }
.sp-open{ width: 100%; display: block; position: absolute; padding-top: 2%;z-index: -1; }
.sp-open > div{ width: 12%; max-width: 76px; box-shadow: 0 0 30px rgba(0,0,0,0.3); position: relative; top:0; left:2%; }
.sub-page .sp-open{ top:0; }

nav.global{ display: none; }
.sp-menu{ background-color: #000; width: 100%; min-height: 100%; position: absolute; z-index: 4;  display:block; }
.sp-menu{ display:none; }
nav.sp-global{  }
.sp-close{ width: 100%; display: block; padding-top: 3%; }
.sp-close > div{ width: 25%; max-width: 140px; position: relative; top:0; left:5%; }
nav.sp-global ul{ display: flex; flex-wrap: wrap; list-style-type: none; margin: 0 0 5% 0; padding: 0; }
nav.sp-global ul li{ width: 50%; display: block; /* font-size: 30px; */ font-size: 4.6vw; line-height: 5.6vw; }
nav.sp-global ul li span{ display: block; font-size: 2.8vw;}
nav.sp-global ul li a{ color: #ffeace;; display: block; padding: 5% 0px 5% 10%; text-decoration: none;  }
nav.sp-global ul li a:hover{ color: #e5d3bb; background-color: #000; }
nav.sp-global ul li.cs a{ color: rgba(255,234,206,0.3); pointer-events: none; }

nav.sp-global p.share-title{ color: #e5d3bb; font-size: 2.8vw; display: block; text-align: center; padding: 0; margin-bottom: 5px; }
nav.sp-global ul.share{ display: flex; flex-wrap: nowrap; justify-content: center; list-style-type: none; margin: 0; padding: 0px; }
nav.sp-global ul.share li{ width: 60px; display: block; margin: 5% 4%; }
nav.sp-global ul.share li a{ display: inline; padding: inherit; }
nav.sp-global ul.share li a:hover{ color: inherit; background-color: inherit; }

nav.global p.banner-title,
nav.global .banner{ display: none; }

article{ width:100%; min-height: inherit; position: relative; top:0; left: inherit; margin-bottom: 40px; padding-top:4.6875% }
.wrapper,footer{ min-width: inherit; }

.atc-inner{ width: 100%; max-width: inherit; padding: 0 6.5vw; margin: 0 auto; position: relative; }
.pagetitle{ position: relative; top:-7vw; text-align: center; margin-bottom: 10vw; }
.pagetitle .pgt-e{ margin-bottom: 4vw;}
.pagetitle .pgt-j{ font-size: 4vw; letter-spacing: 0.3em; }

footer{ width: 84.375%; margin: 0 auto; position: relative; padding:20% 0px; }
.ft-banner{ text-align: center; margin-bottom: 20%; flex-wrap: wrap; justify-content: center; }
.ft-banner > div{ margin: 0 0 10px 0; }
.ft-banner > div.hide-pc{ display: inline-block; }
.ft-copyrihgt{ font-size: 2.4vw; text-align: center; }
.ft-share{ float: none; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20%;}
nav.footer-share{ width: 100%;}
nav.footer-share:first-child{ margin-right: 0;}
nav.footer-share p{ font-size: 18px; }
nav.footer-share ul{ flex-wrap: wrap; justify-content: center; padding: 0; }
nav.footer-share ul li{ width: 60px; text-align: center; margin: 15px 30px; }
nav.footer-share ul li:first-child{ width: 100%; }


/* TOP */
/* main */
.top-page header .logo{ display: none; }
.sc-main{ margin-bottom: 20%; }
.sc-main .main-visual img{ width: 100%; }
.sc-main .main-changer{justify-content: center; width: 40%; margin:0 auto; bottom:-10%; left:0; right:0; }
.sc-main .main-changer .tt{ display: none; }
.main-onair{ width: 100%; margin: 0 auto; text-align: center; position: absolute; top:-3%; left: 0; right: 0; }
.main-catch{ width: 100%; text-align: center; position: absolute; top:13%; left:auto; right: 0px;}
.sidebar{ width: 100%; position: relative; top:0; right:inherit; padding-bottom: 10%; }
/* movie , news , twitter */
.sc-movie,
.sc-news,
.sc-twitter{ width: 84.375%; margin: 0 auto 30px auto; padding-top: 30px; }
.sc-movie .cont-title,
.sc-news .cont-title,
.sc-twitter .cont-title{ font-size: 5vw /* 30px */; padding: 8px 16px 4px 16px;}
.movie-container,
.news-container,
.twitter-container{ width: 92.6%; margin: 0 0 0 auto; box-shadow: 0 0 30px rgba(0,0,0,0.3);}

.news-container{ padding: 7%; text-align: center; }
.news-container dl dt{ font-size: 3.2vw; margin-bottom: 0.3em; }
.news-container dl dd{ font-size: 3.2vw; }

.twitter-container{  padding: 10% 7%; }
.twitter-btn{  width: 92.6%; padding: 8% 0; }
.twitter-btn img{ width: 50%; }




/*
.pagetitle{ position: relative; top:-6vw; text-align: center; margin-bottom: 10vw; }
.pagetitle .pgt-e{ margin-bottom: 4vw;}
.pagetitle .pgt-j{ font-size: 4vw; letter-spacing: 0.3em; }
*/

.sc-title{ font-size: 3.6vw; letter-spacing: 0.3em;}

/* NEWS */
.entry{ margin-bottom: 25vw;}
.entry-head{ position: relative; margin-bottom: 4vw; }
.entry-date{ font-size: 2.6vw; margin-bottom: .8vw;}
.entry-title{ font-size: 3.6vw; letter-spacing: 0.2em; margin-bottom: 3vw;}
.entry-share{ position: relative; top:0; right: 0;}
.entry-share p{ font-size: 2.6vw; display: block; margin: 0; /* padding-top: 1vw; */ line-height: 4.1vw;}
.entry-share ul{ display: flex; flex-wrap: nowrap; list-style-type: none; margin: 0; padding: 0; }
.entry-share ul li{ width: 5vw; display: block; margin-left: 4.5vw; }
.entry-share ul li:first-child{ width: inherit; margin-left: 0;}
.entry-body{ font-size: 2.8vw; letter-spacing: 0.1em; line-height: 2;}

/* STORY */
/* #Page_Story .pagetitle .pgt-e{ margin-bottom: 16px;} */
.intro-body{ font-size: 2.8vw; letter-spacing: 0.1em; line-height: 2; /* margin-bottom: 1.2em; */}
.intro-fig{/* padding-bottom: 30vw; */}

.ep-container{ margin-bottom: 20%; }
.ep-cut{ display: flex; flex-wrap: wrap; max-width: inherit; margin-bottom: 4%; }
.ep-cut > div{ width: 50%; box-sizing: border-box; padding: .8%; }
.ep-staff{ font-size: 2.2vw;}

/* ON AIR */ 
.onair-table thead td{ font-size: 2.4vw; }
.onair-table tbody th{ width: 9em; font-size: 3.6vw;  }
.onair-table tbody td{ font-size: 2.8vw; }

/* STAFF/CAST */
/*
#Page_Staffcast .pagetitle{ top:-6vw; margin-bottom: 70px; }
#Page_Staffcast .pgt-e{ margin-bottom: 22px;}
*/

.staff-list{ display: flex; flex-wrap: wrap; }
.staff-list > div{ width: 50%; margin-bottom: 7%; }
.staff-list .pos{ font-size: 2.8vw; margin-bottom: .5vw;}
.staff-list .name{ font-size: 7vw; margin-bottom: 0px;}
.staff-list .mgz{ font-size: 2.2vw; display: block; margin-bottom: .5vw;}
.staff-list .e-name{ font-size: 1.8vw;}

/* CHARACTER */
.atc-inner-character{ width: 100%; max-width: inherit; padding: 0 6.5vw; margin: 0 auto; position: relative; }
nav.character-navi{ display: flex; flex-wrap: wrap; width: 86%; margin: -7% auto 14% auto; }
nav.character-navi > div{ width: 44%; margin:3%; }
.character-col{ position: relative; }
.character-col .chara-prf{ width: 100%; position: relative; top:inherit; left: inherit; }
.character-col .name{ font-size: 10.9375vw; line-height: 1; margin-bottom: .1em; text-align: center; }
.character-col .name-e{font-size: 2.1875vw;  margin-bottom: 2.8em; text-align: center;}
.character-col .dsc{font-size: 3.33vw;  margin-bottom: 2.1em;}
.character-col .cv{font-size: 3.33vw; }
.character-col .chara-fig{ position: relative; text-align: center;}

/* MOVIE */
.movie-list{ display: flex; flex-wrap: wrap; }
.movie-list > div{ width: 100%; margin-bottom: 14%; margin-right:0; margin-left:0; }
.movie-list > div:nth-child(even){  margin-left:0;}
.movie-list .thumb{ margin: 0 auto; margin-bottom: .5em; }
.movie-list .name{ font-size: 3.33vw;}

/* BDDVD */
nav.bddvd-navi{ }
nav.bddvd-navi > a{ width: 47.5%; margin: 0 2.5% 2.5% 0; font-size: 3.33vw; padding: 1em 0;  }
nav.bddvd-navi > a.bc{ width: 47.5%; margin: 0 2.5% 2.5% 0;}
.bddvd-spec{ flex-wrap: wrap;}
.bddvd-spec .c1{ width: 100%; margin-bottom: 1em; }
.bddvd-tk{ display: flex; flex-wrap: wrap;}
.bddvd-tk >div{ width: 100%; margin: 0 0 1em 0; }
.bddvd-bnf-table{ display: block;}
.bddvd-bnf-table tr.in{ border-top-style: dotted; }
.bddvd-bnf-table th{ font-size: 1.4em; display: block; padding: 1em 0; border-bottom: #000 dotted 1px;}
.bddvd-bnf-table td{ display: block; padding: 2% 0;}
.bddvd-bnf-table td.c1{ white-space:inherit; }
.bddvd-bnf-table td.c2{ white-space: inherit; }

.bddvd-bnf-table2{ display: block;}
.bddvd-bnf-table2 tr.in{ border-top-style: dotted; }
.bddvd-bnf-table2 th{ /* font-size: 1.4em; */ display: block; padding: 1em 0; border-bottom: #000 dotted 1px;}
.bddvd-bnf-table2 td{ display: block; padding: 2% 0;}
.bddvd-bnf-table2 td.c1{ width: inherit; white-space:inherit; }
.bddvd-bnf-table2 td.c2{ white-space: inherit; }

.bddvd-illst{ flex-wrap: wrap; margin-bottom: .5em; }
.bddvd-illst > div{ width: 100%; text-align: center; }
.bddvd-illst > div a{ display: block; }
.bddvd-illst > div a > div{ height: 11em;}
.bddvd-illst > div p{ margin-bottom: .5em }

/* MUSIC */
.entry-music{ display: block; margin-bottom: 15%; }
.entry-music p{ margin-bottom: 4vw;}
.entry-music .entry-cst{font-size: 2.6vw;  margin-bottom: 1vw;}
.entry-music-left{ width:100%; margin:0 0 7.81% 0; }
.entry-music-right{ width:100%; }

/* BOOK */
.entry-book{ display: block; margin-bottom: 15%; }
.entry-book p{ margin-bottom: 4vw;}
.entry-book-left{ width:100%; margin:0 0 7.81% 0; }
.entry-book-right{ width:100%; }

/* SPECIAL */
.special-list > div{ width: 100%; margin: 0 0 5% 0; }
.special-list .thumb{ margin-bottom: 5px;}
.special-list .title{ font-size: 3.33vw; margin-bottom: 0px;}
.comment-block{background-size: contain;}
}
/* Custom 640 ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
/* body{ font-size: calc((100vw / 640) * 16); } */

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


}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
.spbr {display: none;}
.spbr:before {content: "" ;}

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

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1920px) {
.sc-main .main-visual img{ width: 100%; }
}


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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
.dly-5{ animation-delay: 0.5s;}
.dly1{ animation-delay: 1.0s;}
.dly1-5{ animation-delay: 1.5s;}
.dly2{ animation-delay: 2.0s;}
.dly3{ animation-delay: 3.0s;}
.dly4{ animation-delay: 4.0s;}
.dly5{ animation-delay: 5.0s;}
.dur-5{ animation-duration: 0.5s;}
.dur1{ animation-duration: 1.0s;}
.dur1-5{ animation-duration: 1.5s;}
.dur2{ animation-duration: 2.0s;}
.dur3{ animation-duration: 3.0s;}
.dur4{ animation-duration: 4.0s;}
.dur5{ animation-duration: 5.0s;}

@-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;
}