@charset "UTF-8";

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

 Layout

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

.ntv-wrapper{
  background: #FFF5DA url(../images/body-bg.png) repeat;
  color: #231815;
}

.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
.teaser-contents {
  box-sizing: border-box;
  font-size: 1.4rem;
}
.teaser-main-mainImg a:hover,
.teaser-main-nav a:hover,
.teaser-contents a:hover,
.bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}

/* ブロック */
.teaser-block{
  color: #231815;
  word-break: break-all;
  padding: 35px 10px;
}

/* ブロックタイトル */
.teaser-block-title{
  font-size: 2rem;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.teaser-block-title img{
  width: 100%;
}

.teaser-block-inner{
  padding: 30px 0;
}

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

/* ブロック内ボタン */
.teaser-block .teaser-block-btn{
  width: 80%;
  margin: 0 auto;
}
.teaser-block .teaser-block-btn a{
  display: block;
  width: 100%;
  font-family: 'RodinPro-B',sans-serif;
  text-align: center;
  padding: 1em 0;
  line-height: 1;
  color: #fff;
  background: #ED6F1B;
  border: 1px solid #231815;
  border-radius: 30px;
}

/* テキスト非表示 */
.text-none{
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}

/* ---------------------------------
 メインビジュアル
--------------------------------- */
.teaser-main-mainImg{
  padding-bottom: 10px;
  /* MV見逃し表示するとき */
  padding-bottom: 70px;
}

/* ---------------------------------
 メニュー
--------------------------------- */
.teaser-main-nav{
  padding: 0 10px;
  margin: 10px 0;
}
.teaser-main-nav .teaser-main-nav-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.teaser-main-nav .teaser-main-nav-list li{
  width: 19%;
}
.teaser-main-nav .teaser-main-nav-list li a{
  display: inline-block;
  width: 100%;
  height: auto;
  padding-top: 100%;
  border-radius: 50%;
  border: 1px solid #231815;

  /* テキスト非表示 */
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}
.teaser-main-nav .teaser-main-nav-list li.nav-intro a{
  background: url(../images/common/nav-intro.png) no-repeat;
  background-size: cover;
}
.teaser-main-nav .teaser-main-nav-list li.nav-story a{
  background: url(../images/common/nav-story.png) no-repeat;
  background-size: cover;
}
.teaser-main-nav .teaser-main-nav-list li.nav-cast a{
  background: url(../images/common/nav-cast.png) no-repeat;
  background-size: cover;
}
.teaser-main-nav .teaser-main-nav-list li.nav-onair a{
  background: url(../images/common/nav-onair.png) no-repeat;
  background-size: cover;
}
.teaser-main-nav .teaser-main-nav-list li.nav-staff a{
  background: url(../images/common/nav-staff.png) no-repeat;
  background-size: cover;
}

/* ---------------------------------
 バナー
--------------------------------- */
.teaser-banner-area{
  width: 100%;
  padding: 0 10px;
  margin-top: 20px;
}
.teaser-banner-area .teaser-banner-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.teaser-banner-area .teaser-banner-list:last-child{
  margin-bottom: 0;
}
.teaser-banner-area .teaser-banner-list li{
  line-height: 1;
  margin-bottom: 10px;
}
.teaser-banner-area .teaser-banner-list li.banner-item-1column{
  width: 100%;
}
.teaser-banner-area .teaser-banner-list li.banner-item-2column{
  width: 49%;
}
.teaser-banner-area .teaser-banner-list li.banner-item-1column:nth-last-child(1),
.teaser-banner-area .teaser-banner-list li.banner-item-2column:nth-last-child(1),
.teaser-banner-area .teaser-banner-list li.banner-item-2column:nth-last-child(2){
  margin-bottom: 0;
}
.teaser-banner-area ul li a img{
  width: 100%;
}


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

/* タイムライン */
.teaser-contents .twitter-area{
  background: #fff;
  padding: 10px;
  margin-bottom: 30px;
}
.teaser-contents .twitter-area .twitter-timeline{
}

/* ---------------------------------
 イントロダクション
--------------------------------- */
#intro.teaser-block .intro-img{
  background: url(../images/intro-img.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: auto;
  padding-top: calc(1936 / 710 * 100%);
  margin: 0 auto;

  /* テキスト非表示 */
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}

/* ---------------------------------
 ストーリー
--------------------------------- */
#story.teaser-block .story-box{
  padding-top: 40px;
}
#story.teaser-block .story-box:first-child{
  padding-top: 0;
}
#story.teaser-block .story-box .story-number{
  width: 80px;
  height: 80px;
  background: url(../images/story/story-number-bg.png) no-repeat;
  background-size: contain;
  position: relative;
  margin: 0 auto;
  z-index: 9999;
}
#story.teaser-block .story-box .story-number .story-number-text{
  color: #fff;
  font-family: 'RodinPro-B',sans-serif;
  font-size: 3.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
#story.teaser-block .story-box .story-number .story-number-text .sharp{
  font-size: 2.0rem;
  margin-right: 1px;
}
#story.teaser-block .story-box .story-img{
  width: 100%;
  margin-top: -20px;
  margin-bottom: 20px;
}
#story.teaser-block .story-box .story-img img{
  width: 100%;
  filter: drop-shadow(4px 4px 0px #F8B62D);
}
#story.teaser-block .story-box .story-text{
  padding: 0 10px;
}

.p-2nd #story.teaser-block .story-box{
  position: relative;
  padding-bottom: 30px;
}
.p-2nd #story.teaser-block .story-box::after{
  content: "";
  width: 100%;
  height: 15px;
  background: url(../images/story/story-line.png);
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
.p-2nd #story.teaser-block .story-box:last-child:after{
  content: none;
}


/* ---------------------------------
 キャスト
--------------------------------- */
#cast.teaser-block .cast-list-img{
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#cast.teaser-block .cast-list-img li{
  width: calc(145 / 315 * 100%);
  margin-bottom: 25px;
}
#cast.teaser-block .cast-list-img li p{
  width: 100%;
  height: auto;
  padding-top: calc(620 / 580 * 100%);
  margin-bottom: 0;

  /* テキスト非表示 */
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}
#cast.teaser-block .cast-list-img li.cast-sekai p{
  background: url(../images/cast-sekai.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-sato p{
  background: url(../images/cast-sato.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-sawamoto p{
  background: url(../images/cast-sawamoto.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-seguchi p{
  background: url(../images/cast-seguchi.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-hori p{
  background: url(../images/cast-hori.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-kimura p{
  background: url(../images/cast-kimura.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-yagi p{
  background: url(../images/cast-yagi.png) no-repeat;
  background-size: cover;
}
#cast.teaser-block .cast-list-img li.cast-nakajima p{
  background: url(../images/cast-nakajima.png) no-repeat;
  background-size: cover;
}

#cast.teaser-block p.cast-list-title{
  text-align: center;
  font-family: 'RodinPro-EB',sans-serif;
  font-size: 2.8rem;
  margin-bottom: 20px;
  line-height: 1;
}
#cast.teaser-block p.cast-list-title span{
  font-size: 1.6rem;
}
#cast.teaser-block .cast-list-text{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  text-align: center;
}
#cast.teaser-block .cast-list-text li{
  width: calc(100% / 4);
  position: relative;
}
#cast.teaser-block .cast-list-text li p{
  margin-bottom: 0;
}
#cast.teaser-block .cast-list-text li::after{
  content: "";
  width: 10px;
  height: 10px;
  background:url(../images/guest-text-star.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translate(0 ,-50%);
}
#cast.teaser-block .cast-list-text li:nth-child(4n):after{
  content: none;
}
#cast.teaser-block .cast-text{
  margin-top: 30px;
  text-align: center;
  font-weight: 600;
}
#cast.teaser-block .cast-text span{
  font-weight: normal;
}


/* ---------------------------------
 ゲスト
--------------------------------- */
#guest.teaser-block .teaser-block-inner{
  text-align: center;
}
#guest.teaser-block p.guest-list-title{
  display: inline-block;
  font-family: 'RodinPro-B',sans-serif;
  background: #1d88c5;
  color: #fff;
  padding: 0 1em;
  margin-bottom: 5px;
}
#guest.teaser-block .guest-list{
  text-align: center;
  font-weight: 600;
  margin: 25px 0;
}
#guest.teaser-block .guest-list li{
  line-height: 1.2;
  margin-top: 15px;
}
#guest.teaser-block .guest-list li span{
  font-size: 1.2rem;
}

/* ---------------------------------
 オンエア
--------------------------------- */
#onair.teaser-block .teaser-block-inner{
  text-align: center;
}
#onair.teaser-block .onair-list{
  text-align: center;
  font-weight: 600;
  margin: 25px 0;
}
#onair.teaser-block .onair-list dt{
  display: inline-block;
  font-family: 'RodinPro-B',sans-serif;
  background: #EA627A;
  color: #fff;
  padding: 0 1em;
  margin-bottom: 5px;
}
#onair.teaser-block .onair-list dd{
  margin-bottom: 30px;
}
#onair.teaser-block .onair-list dd span{
  font-size: 1.1rem;
}
#onair.teaser-block .onair-list dd:last-child{
  margin-bottom: 0;
}

/* ---------------------------------
 スタッフ
--------------------------------- */
#staff.teaser-block .staff-list{
  text-align: center;
  font-weight: 600;
}
#staff.teaser-block .staff-list dt{
  display: inline-block;
  font-family: 'RodinPro-B',sans-serif;
  background: #ED6F1B;
  color: #fff;
  padding: 0 1em;
  margin-bottom: 5px;
}
#staff.teaser-block .staff-list dd{
  text-align: center;
  margin-bottom: 30px;
}
#staff.teaser-block .staff-list dd:last-child{
  margin-bottom: 0;
}


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

}

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


  /* ---------------------------------
  キャスト
  --------------------------------- */
  #cast.teaser-block .cast-list-text{
    padding: 0 40px;
  }

}

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

  .teaser-contents {
    font-size: 1.6rem;
  }

  /* ブロック */
  .teaser-block{
    padding: 50px 0;
  }

  /* ブロックタイトル */
  .teaser-block-title{
    font-size: 2.4rem;
    max-width: 355px;
  }

  /* ブロック内テキスト */
  .teaser-block p{
    font-size: 1.6rem;
  }

  /* ---------------------------------
  メインビジュアル
  --------------------------------- */
  .teaser-main-mainImg{
    padding-bottom: 20px;
    /* MV見逃し表示するとき */
    padding-bottom: 100px;
  }

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

  }

  /* ---------------------------------
  ストーリー
  --------------------------------- */
  #story.teaser-block .story-box .story-number{
    width: 90px;
    height: 90px;
  }
  #story.teaser-block .story-box .story-number .story-number-text{
    font-size: 3.6rem;
  }
  #story.teaser-block .story-box .story-number .story-number-text .sharp{
    font-size: 2.2rem;
  }
  #story.teaser-block .story-box .story-img img{
    filter: drop-shadow(8px 8px 0px #F8B62D);
  }

  /* ---------------------------------
  キャスト
  --------------------------------- */
  #cast.teaser-block .cast-list-img{
    padding: 0;
  }
  #cast.teaser-block .cast-list-img li{
    width: calc(145 / 664 * 100%);
  }

  /* ---------------------------------
  ゲスト
  --------------------------------- */


  /* ---------------------------------
  オンエア
  --------------------------------- */
  #onair.teaser-block .onair-list dd span{
    font-size: 1.3rem;
  }

}

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

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

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

#topics.drama-area{
  padding: 0;
  margin: 0;
}
#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%;
  }
  #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%;
  }

}