@charset "UTF-8";

/*==================================

 Layout

==================================*/

.bankover-main-mainImg img {
  display: block;
  width: 100%;
  border: #292929 2px solid;
}
.bankover-main-onair{
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 10px;
}
.bankover-contents {
  box-sizing: border-box;
  font-size: 1.6rem;
}
.bankover-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}

/* ブロック */
.bankover-block{
  background: #fff;
  color: #333;
  word-break: break-all;
  border: 2px solid #292929;
}
.bankover-block-inner{
  padding: 16px 10px;
}


/* ブロックタイトル */
.bankover-block-title{
  font-size: 2rem;
  letter-spacing: 0.6px;
  color: #222;
  padding: 20px 10px 10px;
  position: relative;
  font-weight: bold;
  line-height: 1.0;
  text-align: center;
}

/* ブロック内テキスト */
.bankover-block p{
  color: #333;
  line-height: 1.86;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

/* 背景 */
.ntv-wrapper{
  background: url(../images/common/bg.png) repeat;
}


/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }


  /* ブロック */
  .bankover-block{
    margin: 15px 10px 0 10px;
  }

  .bankover-block-inner{
    padding: 20px 20px;
  }
  .bankover-block-title{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  .bankover-main-nav{

  }
  .bankover-main-nav ul{
    width: 100%;
    background: #000000;
    margin: 15px 0;
  }
  .bankover-main-nav ul li{
    width: calc(100% / 3);
    text-indent: -9999px;
    display: block;
    overflow: hidden;
    line-height: 1;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .bankover-main-nav ul li a:hover{
    opacity: 0.7;
  }

  /*クリック不可　音楽*/
  /* .bankover-main-nav ul li:nth-of-type(4) a{
    pointer-events: none;
  } */

  .bankover-main-nav ul li:nth-of-type(1){
    border-right: #fff 1px solid;
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(2){
    border-right: #fff 1px solid;
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(3){
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(4){
    border-right: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(5){
    border-right: #fff 1px solid;
  }
  .bankover-main-nav .row .col a{
    background-repeat: no-repeat;
    background-size: contain !important;
    display: block;
    padding-top: 25%;
    font-size: 0;
    margin: 15px 0;
    /* padding-top: 35.8%; */
    /* margin: 20px 0; */
  }

  .bankover-main-nav ul li#menu-intro a{
    background: url(../images/common/nav_intro.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-cast a{
    background: url(../images/common/nav_cast.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-story a{
    background: url(../images/common/nav_story.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-music a{
    background: url(../images/common/nav_music.svg) no-repeat center center;
    /* opacity: 0.4; */
  }
  .bankover-main-nav ul li#imenu-topics a{
    background: url(../images/common/nav_topics.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-sns a{
    background: url(../images/common/nav_sns.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-staff a{
    background: url(../images/common/nav_staff.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-chart a{
    background: url(../images/common/nav_chart.svg) no-repeat center center;
  }

  /*メニュー NEW*/
  .bankover-main-nav .new-1 {
    position: relative;
    overflow: visible;
}
.bankover-main-nav .new {
  position: relative;
  overflow: visible;
}

.bankover-main-nav .new-1::after{
  content: 'NEW';
  background: #ff6c88;
  color: #292929;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  position: absolute;
  display: inline-block;
  text-indent: 0;
  font-weight: bold;
  /* top: -10px;
  right: 10px;
  padding: 4px 12px; */
  top: -12px;
  right: 7px;
  padding: 4px 10px;
  font-size: 1.1rem;
}

.bankover-main-nav .new::after{
  content: 'UPDATE';
  background: #ff6c88;
  color: #292929;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  position: absolute;
  display: inline-block;
  text-indent: 0;
  font-weight: bold;
  /* top: -10px;
  right: 10px;
  padding: 4px 12px; */
  top: -12px;
  right: 7px;
  padding: 4px 10px;
  font-size: 1.1rem;
}

  /*見逃しバナー*/
  .bankover-banner-area{
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }

  .bankover-banner-area .banner-item{
    width: calc(50% - 15px);
  }
  .bankover-banner-area .banner-item a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 30%;
    display: block;
  }
  .bankover-banner-area #banner-tver a{
    background: url(../images/common/banner-tver-sp.png) no-repeat center top;
    background-size: contain;
  }

  .bankover-banner-area #banner-hulu a{
    background: url(../images/common/banner-hulu-sp.png) no-repeat center top;
    background-size: contain;
  }
  .bankover-banner-area #banner-hulu{
    margin-left: 10px;
  }


  /*hulu特別編告知*/
  /* #hulu-special{
    border: 2px solid #292929;
    }
  #hulu-special .bankover-block-inner{
    padding: 0;
  }
  #hulu-special div{

  }
  #hulu-special div p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .hulu-item-01{
    background: url(../images/common/hulu_img.png) no-repeat center top;
    background-size: 100% auto;
    padding-top: 28.46%;
  } */

  /*hulu特別編告知　9/26放送後*/
  #hulu-special{
    border: 2px solid #292929;
    background: url(../images/hulu/bg.png) repeat-y center top;
    background-size: contain;
    }
  #hulu-special .bankover-block-inner{
    padding: 0px 20px 20px;
  }
  #hulu-special .ttl-hulu{
    background: url(../images/hulu/ttl_hulu.png) no-repeat center top;
    background-size: contain;
    padding-top: 8%;
    margin-top: 20px;
  }
  #hulu-special .ttl-hulu p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .hulu-list{
    background: #fff;
    padding: 0px 20px 20px 20px;
    margin-top: 10px;
    
  }
  #hulu-special .hulu_sub-ttl{

  }
  #hulu-special .hulu_sub-ttl p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .sub-ttl-01{/*Huluスペシャルコンテンツ「後藤雫のウラ事情&隠しネタを徹底解説」*/
    background: url(../images/hulu/sub-ttl-01.png) no-repeat center top;
    background-size: contain;
    padding-top: 30%;
    
  }
  #hulu-special .sub-ttl-02{/*Huluスペシャルコンテンツ「前後編・合体版&NG集」*/
    background: url(../images/hulu/sub-ttl-02.png) no-repeat center top;
    background-size: contain;
    padding-top: 30%;
  }

  #hulu-special .hulu-list a:hover{
    opacity: 0.7;
  }
  #hulu-special .hulu-list .hulu-item-photo01 a,
  #hulu-special .hulu-list .hulu-item-photo02 a{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
  }
  #hulu-special .hulu-list .hulu-txt{
    margin-top: 20px;
    margin-bottom: 0;
  }

  /*Huluスペシャルコンテンツ「後藤雫のウラ事情&隠しネタを徹底解説」 写真*/
  #hulu-special .hulu-list .hulu-item-photo01{
    margin-top: 20px;
  }
  #hulu-special .hulu-list .hulu-item-photo01 p{
    
  }
  #hulu-special .hulu-list .hulu-item-photo01 a{
    background: url(../images/hulu/list-item-01.jpg) no-repeat center top;
    background-size: contain;
    padding-top: 50%;
  }
  /*Huluスペシャルコンテンツ「前後編・合体版&NG集」 写真*/
  #hulu-special .hulu-list .hulu-item-photo02{
    margin-top: 20px;
  }
  #hulu-special .hulu-list .hulu-item-photo02 p{
    
  }
  #hulu-special .hulu-list .hulu-item-photo02 a{
    background: url(../images/hulu/list-item-02.jpg) no-repeat center top;
    background-size: contain;
    padding-top: 50%;
  }

  /*Huluスペシャルコンテンツ ボタン*/
  #hulu-special .btn-special-more{
    margin-top: 20px;
  }
  #hulu-special .btn-special-more p{
    margin-bottom: 0;
  }
  #hulu-special .btn-special-more p a{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    background: url(../images/hulu/btn_special-more.png) no-repeat center top;
    background-size: contain;
    padding-top: 16%;
  }

  /*Huluスペシャルコンテンツ テキスト*/
  #hulu-special .hulu-list .hulu-txt{
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  #hulu-special .hulu-list .hulu-txt .bg-y{
    background: linear-gradient(transparent 50%, #ffff00 50%);
  }
  #hulu-special .hulu-list .hulu-txt .fw-b{
    font-weight: bold;
  }
  #hulu-special .hulu-list .hulu-txt .fs-b{
    font-size: 1.8rem;
  }
  #hulu-special .hulu-list .hulu-txt .bg-pnk{
    background: #ff6c88;
    padding: 3px;
    border: 1px solid #191919;
  }
  #hulu-special .hulu-list .hulu-txt .bg-blk{
    background: #191919;
    padding: 3px;
  }
  #hulu-special .hulu-list .hulu-txt .fc-org{
    color: #ff9416;
  }
  #hulu-special .hulu-list .hulu-txt .fc-blk{
    color: #191919;
  }
  #hulu-special .hulu-list .hulu-txt .fc-w{
    color: #fff;
  }
  
  #hulu-special .hulu-list .hulu-txt .f-block{
    display: block;
    margin: 10px 0 10px 0;
    font-size: 1.8rem;
    text-align: center;
  }








  /*イントロ*/
  #intro{

  }
  #intro h3{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #intro .bankover-block-title{
    background: url(../images/common/ttl_intro.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */

  }
  #intro .bankover-block-inner{
    background: url(../images/intro/bg_intro.png) no-repeat center bottom;
    background-size: contain; 
  }
  #intro .bankover-block-inner p {
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: url(../images/intro/intro_txt.png) no-repeat;
    background-size: contain; 
    padding-top: 149%;
    margin-bottom: 15px;
}

  /*相関図*/
  #chart{

  }
  #chart .bankover-block-title{
    background: url(../images/common/ttl_chart.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */
  }
  /*更新前*/
  #chart .chart-img{
    background: url(../images/chart/img_chart.jpg) no-repeat;
    background-size: contain;
    padding-top: 201%;
  }
  /*更新後　9/21*/
  #chart .chart-img02{
    background: url(../images/chart/img_chart02.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/22*/
  #chart .chart-img0922{
    background: url(../images/chart/img_chart0922.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/23*/
  #chart .chart-img0923{
    background: url(../images/chart/img_chart0923.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/24*/
  #chart .chart-img0924{
    background: url(../images/chart/img_chart0924.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/25*/
  #chart .chart-img0925{
    background: url(../images/chart/img_chart0925.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  
  #chart .chart-img .chart-item{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #chart .small-txt{
    margin-bottom: 10px;
  }
    #chart .small-txt p{
    font-size: 1.4rem;
  }

  /*出演者*/
  #cast{

  }
  #cast .bankover-block-title{
    background: url(../images/common/ttl_cast.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */
  }
  #cast .bankover-block-inner{

  }
  #cast .cast-list{

  }
  #cast .cast-list .cast-item{
    border: 2px solid #292929;
    margin-top: 10px;
  }
  #cast .cast-list .cast-item:first-of-type{
    margin-top: 0;
  }
  #cast .cast-list .cast-item .cast-comment{
    
  }
  #cast .cast-list .cast-item .cast-comment p{
    letter-spacing: 0.1rem;
    text-align: justify;
  }

  #cast .cast-list .cast-comment p{
    /* padding: 15px 20px 20px; */
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.8;
  }
  #cast .cast-list .cast-img p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0;
    border-bottom: #292929 2px solid;
  }
  #cast .cast-list .cast-comment{
    background-color: #f4f4f4;
    margin: 0;
    padding-right: 20px ;
    padding-left: 20px;
    padding-bottom: 20px;
  }

  /*役名*/
  #cast .cast-list .cast-item .cast-comment .cast-ttl p{
    /* width: 50%;
    margin: 0 auto; */
    /* padding: 2px 0 1px; */
    text-align: left;
    /* background: #ff6c88; */
    color: #292929;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
  }

  /*コメント*/
  #cast .cast-list .cast-item .cast-comment .cast-ttl p span{
    color: #fff;
  }
  #cast .cast-list .cast-item .cast-comment .cast-ttl.cast-comment-ttl p{
    color: #292929;
  }
  #cast .cast-list .cast-item .cast-comment .cast-ttl{
    padding-top: 20px;
    /* padding-bottom: 10px; */
  }

  /*役柄*/
  #cast .cast-list .cast-comment .cast-comment-item{
    padding-top: 20px;
  }
  #cast .cast-list .cast-comment .cast-txt{
    color: #292929;
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: bold;
    padding-bottom: 0;
    /* padding-top: 15px; */
  }

  /*出演者 間宮祥太朗*/
  #cast .cast-list #cast-mamiya{

  }
  #cast .cast-list #cast-mamiya .cast-img{
    background: url(../images/cast/cast_img_01.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }

  #cast .cast-list #cast-mamiya .cast-comment{

  }

  /*出演者 上白石萌歌*/
   #cast .cast-list #cast-kamishiraishi{

  }
  #cast .cast-list #cast-kamishiraishi .cast-img{
    background: url(../images/cast/cast_img_02.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }
  #cast .cast-list #cast-kamishiraishi .cast-comment{

  }
  #cast .cast-list #cast-kamishiraishi .cast-comment p{
    
  }
  /*出演者 細田佳央太*/
  #cast .cast-list #cast-hosoda .cast-img{
    background: url(../images/cast/cast_img_03.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }


  /*出演者 ファーストサマーウイカ*/
  #cast .cast-list #cast-fsuika .cast-img{
    background: url(../images/cast/cast_img_04.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }


  /*監督*/
  #cast .cast-list #director .cast-comment .cast-ttl{
    /* padding-bottom: 10px; */
  }
  #cast .cast-list #director .cast-comment .cast-kantoku p{
    /* width: 70%; */
    margin: 0 auto;
    padding: 2px 0 1px;
    text-align: center;
    background: #ff6c88;
    color: #292929;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  #cast .cast-list #director .cast-comment .cast-ttl p span{
    color: #fff;
  }


  /*ストーリー*/
  #story{

  }
  #story .bankover-block-inner{
    position: relative;
  }
  #story .bankover-block-title{
    background: url(../images/common/ttl_story.jpg) no-repeat;
    background-size: contain;
    padding-top: 14.5%;
  }
  #story .bankover-block-inner p{
    font-size: 1.5rem;
    line-height: 1.7;
  }

  #story .bankover-block-title{
    background: url(../images/common/ttl_story.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
  }
  #story .bankover-block-inner p{
    font-size: 1.6rem;
    line-height: 1.7;
  }
  #story .bankover-block-inner .story-item{
    margin-top: 15px;
  }

  #story .bankover-block-inner .story-ttl{
    background: url(../images/story/story_sub-ttl.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 12%;
    margin-top: 0;
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  #story .bankover-block-inner hr{
    margin-top: 25px;
  }
  #story .bankover-block-inner .story-ttl02{
    background: url(../images/story/story_sub-ttl02.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 12%;
    margin-top: 0;
    width: 80%;
    display: block;
    margin: 0 auto;
    margin-top: 25px;
  }
  #story .bankover-block-inner .story-ttl p,
  #story .bankover-block-inner .story-ttl02 p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #story .bankover-block-inner .story-photo{
    margin-top: 15px;
  }
  #story .story-img01{
    background: url(../images/story/story_img01.jpg) no-repeat center;
    background-size: 100% auto;
    padding-top: 67%;
    display: block;
    margin: 0 auto;

  }
  #story .story-img02{
    background: url(../images/story/story_img02.jpg) no-repeat center;
    background-size: 100% auto;
    padding-top: 67%;
    display: block;
    margin: 0 auto;
  }
  #story .story-img03{
    background: url(../images/story/story_img03.jpg) no-repeat center;
    background-size: 100% auto;
    padding-top: 67%;
    display: block;
    margin: 0 auto;
  }
  /*後編　写真*/
  #story .story02-img01{
    background: url(../images/story/story02_img01.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;

  }
  #story .story02-img02{
    background: url(../images/story/story02_img02.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;
  }
  #story .story02-img03{
    background: url(../images/story/story02_img03.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;
  }

 /*前編ネタバレ*/
 #story .accordion-box .accordion-container h4 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #ff6c88;
  display: block;
  text-align: center;
  position: relative;
  margin-top: 25px;
  margin-bottom: 5px;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;

}
#story .accordion-box .accordion-container h4 span{
  background-color: #fff;
  display: inline;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
#story .accordion-box .accordion-container h4::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ff6c88;
  top: 0;
  bottom: 0;
  margin: auto;
}

/*前編ネタバレ  もっとみるボタン*/
 #story .accordion-box {
  position: relative;
}
#story .accordion-box label {
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;

  /* 以下グラデーションは「背景が白」に併せて設定しています */ 
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
}
#story .accordion-box input:checked + label {
  background: inherit; /* 開いた時には背景グラデーションを消す */
}
/* #story .accordion-box label:after {
  content: "続きをよむ";
  letter-spacing: .05em;
  line-height: 2.5rem;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #fff;
  background-color: #000;
  width: 18.75rem;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
} */
/* #story .accordion-box label:before {
  content: "↓";
  font-weight: 700;
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translate(-140px, 0);
  transform: translate(-140px, 0);
  background-color: #fff;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  line-height: 20px;
} */
#story .accordion-box label:after {
  content: "続きをよむ"; /* ラベルの文字 */
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: 2.5rem;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #fff;
  background-color: #000;
  width: 30rem;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#story .accordion-box label:before {
  content: "+";
  font-family: "icomoon" !important;
  max-width: 280px;
  font-weight: 700;
  position: absolute;
  bottom: 28px;
  left: 50%;
  -webkit-transform: translate(-140px, 0);
  transform: translate(-140px, 0);
  background-color: #fff;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  line-height: 28px;
}
#story .accordion-box input {
  display: none;
}
#story .accordion-box .accordion-container {
  overflow: hidden;
  height: 200px; /* 開く前に見えている部分の高さ */
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

#story .accordion-box input:checked + label {
  /* display: none ; 閉じるボタンは要らないとき */
}
#story .accordion-box input:checked + label:after {
  content: "閉じる";
}
#story .accordion-box input:checked + label:before {
  content: "−";
}
#story .accordion-box input:checked ~ .accordion-container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}


  /*主題歌*/
  #music{

  }
  #music .bankover-block-title{
    background: url(../images/common/ttl_music.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */
  }
  #music .bankover-block-inner{

  }
  #music .music-list{

  }

  #music .music-item .music-img{/*写真*/
    background: url(../images/music/music-img.png) no-repeat center;
    background-size: contain;
    padding-top: 60%;
    /* padding-top: 45.5%; */
    margin-top: 15px;
  }
  #music .music-item .music-img p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0;
    border-bottom: #292929 2px solid;
  }

  #music .music-item:first-of-type{
  margin-top: 0px;
  }
  #music .music-item .music-item-inner{
    padding-top: 25px;
  }

  #music .music-item .singer p{
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    color: #ff6c88;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;
    margin-bottom: 0;
    line-height: 1.5
  }
  #music .music-item .singer p span{
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }
  #music .music-item .music-ttl{
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    color: #292929;
    letter-spacing: 0.1em !important;
    width: 85%;
    display: block;
    margin: 0 auto;
    background: #f4f4f4;
    border: 1px solid #292929;
  }

  #music .music-item .fc-pink{
    color: #ff6c88;
  }
  #music .music-item .fs-s{
    font-size: 1.1rem;
  }
  #music .music-item .fs-b{
    font-size: 1.8rem;
  }
  #music .music-item .fb-gray {
    background: linear-gradient(transparent 50%, #e2e2e2 50%);
}
  #music .music-item .zenpen{

  }
  #music .music-item .kohen{
    
  }
  #music .music-item .music-txt{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;

  }
  #music .music-item .music-sub-txt{
  }
  #music .music-item .music-sub-txt p{
    font-size: 1.6rem;
    text-align: center;
    font-weight: bold;
    margin-top: 25px;
  }
  /*詳しくはこちら　ボタン*/
  #music .music-item .music-btn{
    border: 1px solid #ff254f;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 10px;
  } 
  #music .music-item .music-btn p{
    margin-bottom: 0;
  }
  #music .music-item .music-btn p a{
    background: url(../images/music/btn_music.png) no-repeat center;
    background-size: 100% auto;
  }
  #music .music-item .music-btn p a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 23.4%;
    display: block;
  }

  /*トッピクス*/
  #topics{

  }
  #topics .bankover-block-title{
    background: url(../images/common/ttl_topics.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */
  }

  #topics .bankover-block-inner{
    
  }
   /*公式SNNS*/
   #sns{

  }
  #sns .bankover-block-title{
    background: url(../images/common/ttl_sns.jpg) no-repeat;
    background-size: contain;
    /* padding-top: 15.2%; */
    padding-top: 14%;
  }
  #sns .bankover-block-inner{
    
  }
  /*フォローボタン*/
  #sns .sns-link{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  #sns .sns-link p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #sns .sns-link .bankover-btn{
    /* width: calc(50% - 10px); 　2つの場合*/
    width: calc(100% - 10px); /*2つの場合*/
    margin-top: 0px;
  }
  #sns .sns-link .bankover-btn:last-of-type{
    /* margin-left: 15px;  2つの場合 */
  }
  #sns .sns-link .bankover-btn a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 12%;
    /* padding-top: 25%; 2つの場合*/
    display: block;
  }
  #sns .sns-link .bankover-btn a:hover{
    opacity: 0.7;
  }
  #sns .sns-link #btn-follow-twitter{
  }
  #sns .sns-link #btn-follow-twitter a{
    background: url(../images/common/btn_follow-twitter.png) no-repeat center;
    background-size: 100% auto;
    border: #005d96 1px solid;
  }
  #sns .sns-link #btn-follow-insta{
  }
  #sns .sns-link #btn-follow-insta a{
    background: url(../images/common/btn_follow-instagram.png) no-repeat center;
    background-size: 100% auto;
    border: #e44456 1px solid;
  }

  /*スタッフ*/
  #staff{

  }
  #staff .bankover-block-title{
    background: url(../images/common/ttl_staff.jpg) no-repeat;
    background-size: contain;
    padding-top: 14%;
    /* padding-top: 15.2%; */
    
  }

  #staff .bankover-block-inner{
    
  }

  #staff ul.staff_list{
    
  }
  #staff li.item{
    display: flex;
  }
  #staff li.item .title{
    width: calc(50% - 5px);
    text-align: right;
    font-weight: bold;
  }
  #staff .bankover-block-title p{
  }
  #staff li.item .title p{
    font-size: 1.4rem;
    margin: 10px 0;
  }

  #staff li.item .text{
    margin-left: 15px;
    width: calc(50% - 5px);
    font-weight: bold;
  }
  #staff li.item .text p{
    font-size: 1.4rem;
    margin: 10px 0;
  }

  #staff li.item .text span{
    font-size: 1rem;
  }
  
  #staff li.item .title .cl-p{
    color: #ff6c88;
  }
  /*コンテンツ一番下*/
  .bankover-contents{
    padding-bottom: 30px;
  }




}

/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width : 601px){

  .pc{
    display: block;
  }
  .sp{

  }
  .bankover-block-inner{
    padding: 30px 20px;
  }
  .bankover-block-title{
    padding-top: 15.35% !important;
  }
  .bankover-main-nav ul {
    margin: 15px 0;
  }
  .bankover-main-nav .row .col a{
    margin: 25px 0;
  }
  .bankover-main-nav .new-1::after{
    top: -10px;
    right: 10px;
    padding: 4px 12px;
    font-size: 1.2rem;
  }
  .bankover-main-nav .new::after{
    top: -10px;
    right: 10px;
    padding: 4px 12px;
    font-size: 1.2rem;
  }
  #cast .cast-list #director .cast-comment .cast-kantoku p{
    width: 50%;
  }
  /* #hulu-special .hulu-item-01,#hulu-special .hulu-item-02{
    margin-top: 25px;
  } */

  /*主題歌*/
  #music .music-item .music-ttl{
    width: 40%;
  }
  #music .music-item .music-btn{
    width: 50%;
  }


  /*見逃しバナー*/
  .bankover-banner-area #banner-tver a{
    background: url(../images/common/banner-tver-pc-2column.png) no-repeat center top;
    background-size: contain;
    padding-top: 20%;
  }

  .bankover-banner-area #banner-hulu a{
    background: url(../images/common/banner-hulu-pc-2column.png) no-repeat center top;
    background-size: contain;
    padding-top: 20%;
  }
  .bankover-banner-area #banner-hulu{
    margin-left: 0;
  }
}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {

  .sp{
    display: none;
  }
  .pc{
    display: block;
  }

  /* ブロック */
  .bankover-block{
    margin-top: 20px ;
  }
  .bankover-block-inner{
    padding: 30px 20px;
  }
  /* ブロックタイトル */
  .bankover-block-title{
    /* font-size: 2.4rem;
    padding: 30px 20px 10px; */
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  .bankover-main-onair{
    font-size: 1.8rem;
  }
  .bankover-contents {
    margin-top: 20px;
  }

  /*メニュー*/
  .bankover-main-nav{

  }
  .bankover-main-nav ul{
    width: 100%;
    background: #000000;
    margin: 20px 0;

  }
  .bankover-main-nav ul li{
    width: calc(100% / 3);
    text-indent: -9999px;
    display: block;
    overflow: hidden;
    line-height: 1;
    margin-left: auto;
    left: auto;
    right: auto;
    /* padding: 0 !important; */
  }
  .bankover-main-nav ul li a:hover{
    opacity: 0.7;
  }
  /*クリック不可　音楽*/
  /* .bankover-main-nav ul li:nth-of-type(4) a{
    pointer-events: none;
  } */

  .bankover-main-nav ul li:nth-of-type(1){
    border-right: #fff 1px solid;
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(2){
    border-right: #fff 1px solid;
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(3){
    border-bottom: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(4){
    border-right: #fff 1px solid;
  }
  .bankover-main-nav ul li:nth-of-type(5){
    border-right: #fff 1px solid;
  }
  .bankover-main-nav .row .col a{
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    padding-top: 20%;
    /* padding-top: 35.8%; */
    margin: 25px 0;
    font-size: 0;
  }

  .bankover-main-nav ul li#menu-intro a{
    background: url(../images/common/nav_intro.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-cast a{
    background: url(../images/common/nav_cast.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-story a{
    background: url(../images/common/nav_story.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-music a{
    background: url(../images/common/nav_music.svg) no-repeat center center;
    /* opacity: 0.4; */
  }
  .bankover-main-nav ul li#imenu-topics a{
    background: url(../images/common/nav_topics.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-sns a{
    background: url(../images/common/nav_sns.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-staff a{
    background: url(../images/common/nav_staff.svg) no-repeat center center;
  }
  .bankover-main-nav ul li#menu-chart a{
    background: url(../images/common/nav_chart.svg) no-repeat center center;
  }

  /*メニュー NEW*/
  .bankover-main-nav .new {
      position: relative;
      overflow: visible;
  }
  .bankover-main-nav .new-1 {
    position: relative;
    overflow: visible;
  }
  .bankover-main-nav .new-1::after{
    content: 'NEW';
    background: #ff6c88;
    color: #292929;
    position: absolute;
    top: -10px;
    right: 10px;
    display: inline-block;
    text-indent: 0;
    padding: 4px 12px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
  }

  .bankover-main-nav .new::after{
    content: 'UPDATE';
    background: #ff6c88;
    color: #292929;
    position: absolute;
    top: -10px;
    right: 10px;
    display: inline-block;
    text-indent: 0;
    padding: 4px 12px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
  }

  /*見逃しバナー*/
  .bankover-banner-area{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .bankover-banner-area .banner-item{
    width: calc(50% - 20px);
  }
  .bankover-banner-area .banner-item a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 20%;
    display: block;
  }
  .bankover-banner-area .banner-item a:hover{
    opacity: 0.7;
  }
  .bankover-banner-area #banner-tver a{
    background: url(../images/common/banner-tver-pc-2column.png) no-repeat center top;
    background-size: contain;
  }

  .bankover-banner-area #banner-hulu a{
    background: url(../images/common/banner-hulu-pc-2column.png) no-repeat center top;
    background-size: contain;
  }



  /*hulu特別編*/
  /* #hulu-special{
    border: 2px solid #292929;
    }
    #hulu-special .bankover-block-inner{
      padding: 0;
    }
  #hulu-special div{

  }
  #hulu-special div p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .hulu-item-01{
    background: url(../images/common/hulu_img.png) no-repeat center top;
    background-size: 100% auto;
    padding-top: 28.46%;
  } */

  
  /*hulu特別編告知　9/26放送後*/
  #hulu-special{
    border: 2px solid #292929;
    background: url(../images/hulu/bg.png) repeat-y center top;
    background-size: contain;
    }
  #hulu-special .bankover-block-inner{
    padding: 0px 20px 30px;
  }
  #hulu-special .ttl-hulu{
    background: url(../images/hulu/ttl_hulu.png) no-repeat center top;
    background-size: contain;
    padding-top: 6%;
    margin-top: 30px;
  }
  #hulu-special .ttl-hulu p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .hulu-list{
    background: #fff;
    padding: 0px 20px 20px 20px;
    margin-top: 20px;
    
  }
  #hulu-special .hulu_sub-ttl{

  }
  #hulu-special .hulu_sub-ttl p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin-bottom: 0;
  }
  #hulu-special .sub-ttl-01{/*Huluスペシャルコンテンツ「後藤雫のウラ事情&隠しネタを徹底解説」*/
    background: url(../images/hulu/sub-ttl-01.png) no-repeat center top;
    background-size: contain;
    padding-top: 23%;
    
  }
  #hulu-special .sub-ttl-02{/*Huluスペシャルコンテンツ「前後編・合体版&NG集」*/
    background: url(../images/hulu/sub-ttl-02.png) no-repeat center top;
    background-size: contain;
    padding-top: 23%;
  }

  #hulu-special .hulu-list a:hover{
    opacity: 0.7;
  }
  #hulu-special .hulu-list .hulu-item-photo01 a,
  #hulu-special .hulu-list .hulu-item-photo02 a{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
  }
  #hulu-special .hulu-list .hulu-txt{
    margin-top: 20px;
    margin-bottom: 0;
  }

  /*Huluスペシャルコンテンツ「後藤雫のウラ事情&隠しネタを徹底解説」 写真*/
  #hulu-special .hulu-list .hulu-item-photo01{
    margin-top: 20px;
  }
  #hulu-special .hulu-list .hulu-item-photo01 p{
    
  }
  #hulu-special .hulu-list .hulu-item-photo01 a{
    background: url(../images/hulu/list-item-01.jpg) no-repeat center top;
    background-size: contain;
    padding-top: 50%;
  }
  /*Huluスペシャルコンテンツ「前後編・合体版&NG集」 写真*/
  #hulu-special .hulu-list .hulu-item-photo02{
    margin-top: 20px;
  }
  #hulu-special .hulu-list .hulu-item-photo02 p{
    
  }
  #hulu-special .hulu-list .hulu-item-photo02 a{
    background: url(../images/hulu/list-item-02.jpg) no-repeat center top;
    background-size: contain;
    padding-top: 50%;
  }

  /*Huluスペシャルコンテンツ ボタン*/
  #hulu-special .btn-special-more{
    margin-top: 30px;
    margin-bottom: 10px;
  }
  #hulu-special .btn-special-more p{
    margin-bottom: 0;
  }
  #hulu-special .btn-special-more p a{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    background: url(../images/hulu/btn_special-more.png) no-repeat center top;
    background-size: contain;
    padding-top: 14%;
  }

  /*Huluスペシャルコンテンツ テキスト*/
  #hulu-special .hulu-list .hulu-txt{
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
  #hulu-special .hulu-list .hulu-txt .bg-y{
    background: linear-gradient(transparent 50%, #ffff00 50%);
  }
  #hulu-special .hulu-list .hulu-txt .fw-b{
    font-weight: bold;
  }
  #hulu-special .hulu-list .hulu-txt .fs-b{
    font-size: 1.8rem;
  }
  #hulu-special .hulu-list .hulu-txt .bg-pnk{
    background: #ff6c88;
    padding: 3px;
    border: 1px solid #191919;
  }
  #hulu-special .hulu-list .hulu-txt .bg-blk{
    background: #191919;
    padding: 3px;
  }
  #hulu-special .hulu-list .hulu-txt .fc-org{
    color: #ff9416;
  }
  #hulu-special .hulu-list .hulu-txt .fc-blk{
    color: #191919;
  }
  #hulu-special .hulu-list .hulu-txt .fc-w{
    color: #fff;
  }
  
  #hulu-special .hulu-list .hulu-txt .f-block{
    display: block;
    margin: 15px 0 15px 0;
    font-size: 2rem;
    text-align: center;
  }


  /*イントロ*/
  #intro{

  }
  #intro h3{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #intro .bankover-block-title{
    background: url(../images/common/ttl_intro.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;

  }
  #intro .bankover-block-inner{
    background: url(../images/intro/bg_intro.png) no-repeat center bottom;
    background-size: contain; 
  }
  #intro .bankover-block-inner p {
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: url(../images/intro/intro_txt.png) no-repeat;
    background-size: contain; 
    padding-top: 149%;
    margin-bottom:30px;
}
  /*相関図*/
  #chart{

  }
  #chart .bankover-block-title{
    background: url(../images/common/ttl_chart.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
  }
  /*更新前*/
  #chart .chart-img{
    background: url(../images/chart/img_chart.jpg) no-repeat;
    background-size: contain;
    padding-top: 201%;
  }
  /*更新後　9/21*/
  #chart .chart-img02{
    background: url(../images/chart/img_chart02.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }

  /*更新後　9/22*/
  #chart .chart-img0922{
    background: url(../images/chart/img_chart0922.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/23*/
  #chart .chart-img0923{
    background: url(../images/chart/img_chart0923.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/24*/
  #chart .chart-img0924{
    background: url(../images/chart/img_chart0924.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }
  /*更新後　9/25*/
  #chart .chart-img0925{
    background: url(../images/chart/img_chart0925.jpg) no-repeat;
    background-size: contain;
    padding-top: 211%;
  }

  #chart .chart-img .chart-item{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #chart .small-txt{
  margin-bottom: 10px;
  }
  #chart .small-txt p{
    font-size: 1.4rem;
  }



  /*出演者*/
  #cast{

  }
  #cast .bankover-block-title{
    background: url(../images/common/ttl_cast.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;

  }
  #cast .bankover-block-inner{

  }
  #cast .cast-list{

  }
  #cast .cast-list .cast-item{
    border: 2px solid #292929;
    margin-top: 20px;
  }
  #cast .cast-list .cast-item:first-of-type{
    margin-top: 0;
  }

  /*グレー枠*/
  #cast .cast-list .cast-item .cast-comment{
    background-color: #f4f4f4;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
  }
  #cast .cast-list .cast-item .cast-comment p{
    letter-spacing: 0.05rem;
    text-align: justify;
  }

  #cast .cast-list .cast-comment p{
    /* padding: 20px 20px; */
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  #cast .cast-list .cast-img p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0;
    border-bottom: #292929 2px solid;
  }

  /*役名*/
  #cast .cast-list .cast-item .cast-comment .cast-ttl p{
    /* width: 35%; */
    margin: 0 auto;
    text-align: left;
    color: #292929;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  #cast .cast-list .cast-item .cast-comment .cast-ttl{
    padding-top: 30px;
  }

  /*役柄*/
  #cast .cast-list .cast-comment .cast-comment-item{
  padding-top: 20px;
  }
  #cast .cast-list .cast-comment .cast-txt{
    font-weight: bold;
    color: #292929;
  }
  #cast .cast-list .cast-comment .cast-comment .cast-ttl{
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: bold;
    padding-bottom: 0;
    padding-top: 10px;
  }
  #cast .cast-list.cast-comment .cast-comment .cast-txt{
    font-weight: bold;
    padding-top: 10px;
  }
  #cast .cast-list .cast-item .cast-comment .cast-ttl.cast-comment-ttl p{
    color: #292929;
  }

  /*出演者 間宮祥太朗*/
  #cast .cast-list #cast-mamiya{

  }
  #cast .cast-list #cast-mamiya .cast-img{
    background: url(../images/cast/cast_img_01.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }

  #cast .cast-list #cast-mamiya .cast-comment{
  }

  /*出演者 上白石萌歌*/
   #cast .cast-list #cast-kamishiraishi{

  }
  #cast .cast-list #cast-kamishiraishi .cast-img{
    background: url(../images/cast/cast_img_02.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }
  #cast .cast-list #cast-kamishiraishi .cast-comment{

  }
  #cast .cast-list #cast-kamishiraishi .cast-comment p{
    
  }

  /*出演者 細田佳央太*/
  #cast .cast-list #cast-hosoda .cast-img{
    background: url(../images/cast/cast_img_03.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }


  /*出演者 ファーストサマーウイカ*/
  #cast .cast-list #cast-fsuika .cast-img{
    background: url(../images/cast/cast_img_04.jpg) no-repeat;
    background-size: contain;
    padding-top: 50%;
  }

  /*監督*/
  #cast .cast-list #director .cast-comment .cast-ttl{
    /* padding-top: 30px;
    padding-bottom: 20px; */
  }
  #cast .cast-list #director .cast-comment .cast-kantoku p{
    width: 55%;
    margin: 0 auto;
    padding: 2px 0 1px;
    text-align: center;
    background: #ff6c88;
    color: #292929;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  #cast .cast-list #director .cast-comment .cast-ttl p span{
    color: #fff;
  }

  /*ストーリー*/
  #story{

  }
  #story .bankover-block-inner{
    position: relative;
  }

  #story .bankover-block-title{
    background: url(../images/common/ttl_story.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
  }
  #story .bankover-block-inner p{
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  #story .bankover-block-inner .story-item{
    margin-top: 15px;
  }

  #story .bankover-block-inner .story-ttl{
    background: url(../images/story/story_sub-ttl.jpg) no-repeat center;
    background-size: 100% auto;
    padding-top: 10%;
    margin-top: 0;
    width: 70%;
    display: block;
    margin: 0 auto;
  }
  #story .bankover-block-inner hr{
    margin-top: 40px;
  }
  #story .bankover-block-inner .story-ttl02{
    background: url(../images/story/story_sub-ttl02.jpg) no-repeat center;
    background-size: 100% auto;
    padding-top: 10%;
    margin-top: 0;
    width: 70%;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
  }

  #story .bankover-block-inner .story-ttl p,
  #story .bankover-block-inner .story-ttl02 p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #story .bankover-block-inner .story-photo{
    margin-top: 15px;
  }
  #story .story-img01{
    background: url(../images/story/story_img01.jpg) no-repeat center;
    background-size: 100% auto;
    /* padding-top: 60%;
    width: 90%; */
    padding-top: 67%;
    display: block;
    margin: 0 auto;

  }
  #story .story-img02{
    background: url(../images/story/story_img02.jpg) no-repeat center;
    background-size: 100% auto;
    /* padding-top: 60%;
    width: 90%; */
    padding-top: 67%;
    display: block;
    margin: 0 auto;
  }
  #story .story-img03{
    background: url(../images/story/story_img03.jpg) no-repeat center;
    background-size: 100% auto;
    /* padding-top: 60%;
    width: 90%; */
    padding-top: 67%;
    display: block;
    margin: 0 auto;
  }
  /*後編　写真*/
  #story .story02-img01{
    background: url(../images/story/story02_img01.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;

  }
  #story .story02-img02{
    background: url(../images/story/story02_img02.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;
  }
  #story .story02-img03{
    background: url(../images/story/story02_img03.jpg) no-repeat center top;
    background-size: 100% auto;
    padding-top: 56.5%;
    display: block;
    margin: 0 auto;
  }

   /*前編ネタバレ*/
 #story .accordion-box {
  position: relative;
}
#story .accordion-box .accordion-container h4 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  color: #ff6c88;
  display: block;
  text-align: center;
  position: relative;
  margin-top: 30px;
  margin-bottom: 10px;
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;

}
#story .accordion-box .accordion-container h4 span{
  background-color: #fff;
  display: inline;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
#story .accordion-box .accordion-container h4::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ff6c88;
  top: 0;
  bottom: 0;
  margin: auto;
}

#story .accordion-box label {
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;

  /* 以下グラデーションは「背景が白」に併せて設定しています */ 
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
}
#story .accordion-box input:checked + label {
  background: inherit; /* 開いた時には背景グラデーションを消す */
}
/* #story .accordion-box label:after {
  content: "続きをよむ";
  letter-spacing: .05em;
  line-height: 2.5rem;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #fff;
  background-color: #000;
  width: 18.75rem;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
} */
/* #story .accordion-box label:before {
  content: "↓";
  font-weight: 700;
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translate(-140px, 0);
  transform: translate(-140px, 0);
  background-color: #fff;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  line-height: 20px;
} */
#story .accordion-box label:after {
  content: "続きをよむ"; /* ラベルの文字 */
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: 2.5rem;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #fff;
  background-color: #000;
  width: 30rem;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#story .accordion-box label:before {
  content: "+";
  font-family: "icomoon" !important;
  max-width: 280px;
  font-weight: 700;
  position: absolute;
  bottom: 28px;
  left: 50%;
  -webkit-transform: translate(-140px, 0);
  transform: translate(-140px, 0);
  background-color: #fff;
  z-index: 1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  line-height: 28px;
}
#story .accordion-box input {
  display: none;
}
#story .accordion-box .accordion-container {
  overflow: hidden;
  height: 200px; /* 開く前に見えている部分の高さ */
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

#story .accordion-box input:checked + label {
  /* display: none ; 閉じるボタンは要らないとき */
}
#story .accordion-box input:checked + label:after {
  content: "閉じる";
}
#story .accordion-box input:checked + label:before {
  content: "−";
}
#story .accordion-box input:checked ~ .accordion-container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}


  /*主題歌*/
  #music{

  }
  #music .bankover-block-title{
    background: url(../images/common/ttl_music.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
  }
  #music .bankover-block-inner{

  }
  #music .music-list{

  }
  #music .music-item .music-img{/*写真*/
    background: url(../images/music/music-img.png) no-repeat center;
    background-size: contain;
    padding-top: 55.5%;
    margin-top: 30px;
  }
  #music .music-item .music-img p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0;
    border-bottom: #292929 2px solid;
  }
  #music .music-item:first-of-type{
  margin-top: 0px;
  }
  #music .music-item .music-item-inner{
    padding-top: 30px;
  }
  #music .music-item .singer p{
    font-size: 3rem;/*2.6*/
    font-weight: bold;
    text-align: center;
    color: #ff6c88;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;
    margin-bottom: 0;
    line-height: 1.5;
  }
  #music .music-item .singer p span{
    font-size: 2rem;
    letter-spacing: 0.1em;
  }
  #music .music-item .music-ttl{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    color: #292929;
    letter-spacing: 0.1em !important;
    width: 60%;
    display: block;
    margin: 0 auto;
    border: 1px solid #292929;
    background: #f4f4f4;
  }

  #music .music-item .fc-pink{
    color: #ff6c88;
  }
  #music .music-item .fs-s{
    font-size: 1.4rem;
  }
  #music .music-item .fs-b{
    font-size: 2.4rem;
  }

  #music .music-item .fb-gray{
    background: linear-gradient(transparent 50%, #e2e2e2 50%);
  }
  #music .music-item .zenpen{

  }
  #music .music-item .kohen{
    
  }
  #music .music-item .music-txt{
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 0;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;
  }
  #music .music-item .music-sub-txt{
  }
  #music .music-item .music-sub-txt p{
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  /*詳しくはこちら　ボタン*/
  #music .music-item .music-btn{
    border: 1px solid #ff254f;
    width: 50%;
    margin: 0 auto 10px;
  } 
  #music .music-item .music-btn p{
    margin-bottom: 0;
  }
  #music .music-item .music-btn p a{
    background: url(../images/music/btn_music.png) no-repeat center;
    background-size: 100% auto;
  }
  #music .music-item .music-btn p a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 23.6%;
    display: block;
  }
  #music .music-item .music-btn p a:hover{
    opacity: 0.8;
  }

  /*トッピクス*/
  #topics{

  }
  #topics .bankover-block-title{
    background: url(../images/common/ttl_topics.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
    
  }
  #topics .bankover-block-inner{
    
  }

   /*公式SNNS*/
   #sns{

  }
  #sns .bankover-block-title{
    background: url(../images/common/ttl_sns.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
  }
  #sns .bankover-block-inner{
    
  }
  /*フォローボタン*/
  #sns .sns-link{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  #sns .sns-link p{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
  }
  #sns .sns-link .bankover-btn{
    /* width: calc(50% - 20px); 2つの場合 */
    width: calc(100% - 20px);/*2つの場合*/
  }
  /* #sns .sns-link .bankover-btn:last-of-type{
    margin-left: 20px;  2つの場合 
  } */
  #sns .sns-link .bankover-btn a{
    text-indent: -9999px;
    width: 100%;
    height: 0;
    padding-top: 12%;/*1つの場合*/
    /* padding-top: 25%;　2つの場合 */
    
    display: block;
  }
  #sns .sns-link .bankover-btn a:hover{
    opacity: 0.7;
  }
  #sns .sns-link #btn-follow-twitter{
  }
  #sns .sns-link #btn-follow-twitter a{
    background: url(../images/common/btn_follow-twitter.png) no-repeat center;
    background-size: 100% auto;
    border: #005d96 1px solid;
  }
  #sns .sns-link #btn-follow-insta{
  }
  #sns .sns-link #btn-follow-insta a{
    background: url(../images/common/btn_follow-instagram.png) no-repeat center;
    background-size: 100% auto;
    border: #e44456 1px solid;
  }

  /*スタッフ*/
  #staff{

  }
  #staff .bankover-block-title{
    background: url(../images/common/ttl_staff.jpg) no-repeat;
    background-size: contain;
    padding-top: 15.2%;
    
  }

  #staff .bankover-block-inner{
    
  }

  #staff ul.staff_list{
    
  }
  #staff li.item{
    display: flex;
  }
  #staff li.item .title{
    width: calc(50% - 15px);
    text-align: right;
    font-weight: bold;
  }
  #staff .bankover-block-title p{
  }
  #staff li.item .title p{
    font-size: 1.8rem;
  }
  #staff li.item .text{
    margin-left: 30px;
    width: calc(50% - 15px);
    font-weight: bold;
  }
  #staff li.item .text p{
    font-size:  1.8rem;

  }
  #staff li.item .title .cl-p{
    color: #ff6c88;
  }
  #staff li.item .text span{
    font-size: 1.4rem;
  }

  /*コンテンツ一番下*/
  .ntv-contentsWrap{
    padding-bottom: 40px;
  }


  /* ---------------------------------
  出演者　モーダル　PC
  --------------------------------- */
  
  #chart .chart-img{
    position:relative;
  }
  #chart .chart-img .modal-link{
    position:absolute;
    font-size:0;
    cursor: pointer;
  }
  #chart .chart-img .chart-item{
    position: absolute;
  }
  #chart .chart-img .chart-item a{
    display: block;
    width: 100%;
    height: 100%;
  }
  #chart .chart-img .modal-link .chart-link_large{
    width:26.4%;
    height:11.3%;
    background-color: black;
  }
  #chart .chart-img .modal-link .chart-link_medium{
    width:23.2%;
    height:8.7%;
  }

  #chart .chart-img .chart-link_mamiya{/*間宮*/
    top:12.3%;
    left: 32.5%;
    width: 30%;
    height: 20%;
  }
  #chart .chart-img .chart-link_mamiya{/*間宮*/
    top: 15.3%;/* top:12.3%; */
    left: 32.5%;
    width: 30%;
    height: 20%;
  }
  #chart .chart-img .chart-link_kamishiraishi{/*上白石*/
    top: 35.9%;
    /* top: 33.9%; */
    left: 36.3%;
    width: 30%;
    height: 20%;
  }
  #chart .chart-img .chart-link_sakata{/*阪田マサノブ*/
    top: 60.5%;
    /* top: 59.5%; */
    left: 6%;
    width: 23%;
    height: 15.3%;
  }
  #chart .chart-img .chart-link_hakamada{/*袴田*/
    top: 3.5%;
    right: 0%;
    width: 30.3%;
    height: 20.3%;
  }
  #chart .chart-img .chart-link_asado-rune{/*蟹江アサド／星野ルネ*/
    top: 42.4%;  /* top: 40.4%; */
    left: 69.7%;
    width: 27.4%;
    height: 15.2%;
  }
/* モーダル　クリック無効*/
/* #chart .chart-img .chart-link_hakamada{
  pointer-events: none;
} */





}/*pc*/

@media screen and (max-width: 992px) {
  #chart .chart-img{
    position:relative;
  }
  #chart .chart-img .modal-link{
    position:absolute;
    font-size:0;
    cursor: pointer;
  }
  #chart .chart-img .chart-item{
    position: absolute;
  }
  #chart .chart-img .chart-item a{
    display: block;
    width: 100%;
    height: 100%;
  }
  #chart .chart-img .modal-link .chart-link_large{
    width:26.4%;
    height:11.3%;
    background-color: black;
  }
  #chart .chart-img .modal-link .chart-link_medium{
    width:23.2%;
    height:8.7%;
  }

  #chart .chart-img .chart-link_mamiya{/*間宮*/
    top: 15.3%;/* top:12.3%; */
    left: 32.5%;
    width: 30%;
    height: 20%;
  }
  #chart .chart-img .chart-link_kamishiraishi{/*上白石*/
    top: 35.9%;
    /* top: 33.9%; */
    left: 36.3%;
    width: 30%;
    height: 20%;
  }
  #chart .chart-img .chart-link_sakata{/*阪田マサノブ*/
    top: 60.5%;
    /* top: 59.5%; */
    left: 6%;
    width: 23%;
    height: 15.3%;
  }
  #chart .chart-img .chart-link_hakamada{/*袴田*/
    top: 3.5%;
    right: 0%;
    width: 30.3%;
    height: 20.3%;
  }
  #chart .chart-img .chart-link_asado-rune{/*蟹江アサド／星野ルネ*/
    top: 42.4%;  /* top: 40.4%; */
    left: 69.7%;
    width: 27.4%;
    height: 15.2%;
  }

}/*sp*/

/* ---------------------------------
 右カラム設定
--------------------------------- */

/* 右カラム　タイトル */
.ntv-box-title {
background: #292929;
}
.ntv-box-title.title-base {
  /* background: #e90d28; */
}
.drama-box-title.title-base {
  /* background-color: #e90d28; */
}


/* ---------------------------------
 バナー
--------------------------------- */
.bankover-banner-area{
  width: 100%;
  /* padding: 10px 0; */
}
.bankover-banner-area ul li{
  /* margin: 10px; */
  line-height: 0;
}
.bankover-banner-area ul li a{
}
.bankover-banner-area ul li a img{
  width: 100%;
}
@media screen and (min-width: 993px) {
  .bankover-banner-area{
    padding: 0;
  }
  .bankover-banner-area ul li{
    /* margin: 10px 0; */
  }
}

/* ---------------------------------
 動画
--------------------------------- */
.bankover-contents .movie-player{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 0 auto;
}
.bankover-contents .movie-player iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#movie {

}
#movie .bankover-block-inner{
  
}
#movie .bankover-block-inner .ttl-movie p,
#movie .bankover-block-inner .sub-ttl-movie p{
  font-size: 0;
  overflow: hidden;
  text-indent: -9999px;
}

#movie .bankover-block-inner .ttl-movie{
  background: url(../images/common/ttl_movie.png) no-repeat center top;
  background-size: contain;
  padding-top: 7%;
}
#movie .bankover-block-inner .sub-ttl-movie{
  background: url(../images/common/sub-ttl_movie.png) no-repeat center top;
  background-size: contain;
  padding-top: 12%;
  /* margin-top: 30px; */
}

#movie .bankover-block-inner .btn-movie{
  border: 1px solid #ff254f;
  width: 60%;
  margin: 0 auto;
  margin-top: 30px;
}
#movie .bankover-block-inner .btn-movie p{
  margin-bottom: 0;
}
#movie .bankover-block-inner .btn-movie p a{
  background: url(../images/common/btn_movie.png) no-repeat center;
  background-size: 100% auto;
}
#movie .bankover-block-inner .btn-movie p a{
  text-indent: -9999px;
  width: 100%;
  height: 0;
  padding-top: 23.3%;
  display: block;
}
#movie .bankover-block-inner .btn-movie p a:hover{
  opacity: 0.8;
}

/*動画リスト*/
#movie .bankover-block-inner .movie-modal-list{
  margin-top: 30px;
}
#movie .bankover-block-inner .movie-modal-list .movie-modal-item{
  position: relative;
  padding-top: 25%;
}
#movie .bankover-block-inner .movie-modal-list .movie-modal-item a{
  display: block;
  font-size: 0;
  overflow: hidden;
  text-indent: -9999px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#movie .bankover-block-inner .movie-modal-list .movie-modal-item:hover{
  opacity: 0.7;
}

/*1つ目  2つ目以降こちらを複製して配置*/
#movie .bankover-block-inner .movie-modal-list .modal-item01{
  background: url(../images/common/movie-list-item_01.png) no-repeat center top;
  background-size: contain;
}
#movie .bankover-block-inner .movie-modal-list .modal-item02{
  background: url(../images/common/movie-list-item_02.png) no-repeat center top;
  background-size: contain;
}
#movie .bankover-block-inner .movie-modal-list .modal-item03{
  background: url(../images/common/movie-list-item_03.png) no-repeat center top;
  background-size: contain;
}
#movie .bankover-block-inner .movie-modal-list .modal-item04{
  background: url(../images/common/movie-list-item_04.png) no-repeat center top;
  background-size: contain;
}
#movie .bankover-block-inner .movie-modal-list .modal-item05{
  background: url(../images/common/movie-list-item_05.png) no-repeat center top;
  background-size: contain;
}
  /*クリック無効　動画リスト*/
  /* #movie .bankover-block-inner .movie-modal-list .modal-item03,
  #movie .bankover-block-inner .movie-modal-list .modal-item04,
  #movie .bankover-block-inner .movie-modal-list .modal-item05{
    pointer-events: none;
  } */



@media screen and (max-width: 992px) {

  #movie .bankover-block-inner .ttl-movie{
    padding-top: 8%;
  }
  #movie .bankover-block-inner .sub-ttl-movie{
    /* margin-top: 20px; */
    padding-top: 15%;
  }
  #movie .bankover-block-inner .btn-movie{
    border: 1px solid #ff254f;
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 5px;
  }
  #movie .bankover-block-inner .movie-modal-list{
    margin-top: 20px;
  }
  #movie .bankover-block-inner .movie-modal-list .movie-modal-item{
    position: relative;
    padding-top: 25%;
  }
  #movie .bankover-block-inner .movie-modal-list .movie-modal-item a{
    display: block;
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #movie .bankover-block-inner .movie-modal-list .movie-modal-item:hover{
    opacity: 0.7;
  }
  
  /*1つ目  2つ目以降こちらを複製して配置*/
  #movie .bankover-block-inner .movie-modal-list .modal-item01{
    background: url(../images/common/movie-list-item_01.png) no-repeat center top;
    background-size: contain;
  }
}

@media screen and (min-width : 601px){
  #movie .bankover-block-inner .btn-movie{
    width: 50%;
  }
  #movie .bankover-block-inner .movie-modal-list .modal-item02{
    background: url(../images/common/movie-list-item_02.png) no-repeat center top;
    background-size: contain;
  }
  #movie .bankover-block-inner .movie-modal-list .modal-item03{
    background: url(../images/common/movie-list-item_03.png) no-repeat center top;
    background-size: contain;
  }
  #movie .bankover-block-inner .movie-modal-list .modal-item04{
    background: url(../images/common/movie-list-item_04.png) no-repeat center top;
    background-size: contain;
  }
  #movie .bankover-block-inner .movie-modal-list .modal-item05{
    background: url(../images/common/movie-list-item_05.png) no-repeat center top;
    background-size: contain;
  }
}

/* ---------------------------------
 Twitter
--------------------------------- */

/* タイムライン */
.bankover-contents .twitter-area{
}
.bankover-contents .twitter-area .twitter-timeline{
  border: 1px solid #292929 !important;
}

/* ボタン */
.bankover-contents .bankover-btn{
  margin-top: 20px;
}
.bankover-contents .bankover-btn a{
  width: 100%;
  display: block;
}
.bankover-contents .bankover-btn#btn-follow-twitter a{
  background-color: #1da1f2;
  /* padding: 1.3em 0 1.2em; */
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */

#topics.drama-area{
  padding: 0;
  margin: 0;
  background-color: #fff;
}
#topics .drama-box-title{display: none;}

/* ボタン */
#topics .drama-btn.btn-more {
  /* color: #ffffff; */
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
  position: relative;
  background: transparent;
  border: 1px solid #222;
  padding: 1.3em 0 1.2em;
  font-size: 1.4rem;
  line-height: 1;
}
#topics .drama-btn.btn-more i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: middle;
}

@media screen and (max-width: 992px) {

  #topics .topics-btn {
    padding: 10px;
    margin: 0;
  }

}

/* リスト */
@media screen and (min-width: 993px) {

  #topics .topics-item {
    width: 49%;
    border: 1px solid #292929 !important;
  }
  #topics .topics-item:nth-of-type(n+3) {
    margin-top: 15px;
  }
  #topics .topics-item:nth-of-type(2n+1) {
    margin-left: 0;
  }
  #topics .topics-item:nth-of-type(2n) {
    margin-left: 2%;
  }

}

/* ---------------------------------
 モーダル 追記テンプレ
--------------------------------- */
.movie-player {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 0 auto;
}

.movie-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal{
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.modal-window{
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg{
  background: rgba(0,0,0,0.8);
  height: 100%;
  position: absolute;
  width: 100%;
}
.modal__content{
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  max-width: 900px;
}
.close-area{
  position: absolute;
  top: -45px;
  right: -10px;
  z-index: 100;
  width: 40px;
  height: 40px;
  font-size: 0;
  cursor: pointer;
  transform: rotate(45deg);
}
.close-area::before, .close-area::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 28px;
  height: 3px;
  content: "";
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.close-area::before, .close-area::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 28px;
  height: 3px;
  content: "";
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.close-area::after {
  width: 3px;
  height: 28px;
}

.js-modal-open img{
  width: 100%;
}

@media only screen and (max-width: 600px){
  .modal__content{
    padding: 20px;
  }
}