@charset "UTF-8";

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

 Layout

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

.ntv-wrapper {
  background: url(../images/bg.jpg) repeat 0 0;
}
.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
.teaser-contents {
  box-sizing: border-box;
  font-size: 2rem;
}
.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}
.teaser-contents img {
  width: 100%;
}

/* ---------------------------------
 OA
--------------------------------- */
.teaser-main-onair{
  background-image: url(../images/oa_regular.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 7.84%;
  font-size: 0;
  margin: 10px 0 20px;
}

/* ---------------------------------
huluボタン
--------------------------------- */
.ntv-mainv-banners--2column[data-v-aac5723c] {
  margin-top: 30px!important;
}


/* ---------------------------------
メニュー
--------------------------------- */
.teaser-main-nav{
  background: url(../images/nav_bg.png) no-repeat;
  background-size: contain;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 9999;
}
.teaser-main-nav .row { 
  display: flex;
  justify-content:space-between;
  margin-bottom: 0;
  width: 100%;
}
.teaser-main-nav .row .col{
  width : -webkit-calc(100% / 5) ;
  width: calc(100% / 5) ;
  padding: 0 0 5px 0;  
}
.teaser-main-nav .row .col a {
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  background-position: center;
  padding-top: 68.1%;
  font-size: 0;
  border-right: 2px solid #000;
  border-left: 1px solid #fff;
}
.teaser-main-nav .row .col:first-of-type a {
  border-left: none;
}
.teaser-main-nav .row .col:last-of-type a {
  border-right: none;
}
.teaser-main-nav .row .col a.nav_intro {
  background-image: url(../images/nav_intro.png);
}
.teaser-main-nav .row .col a.nav_sns {
  background-image: url(../images/nav_sns.png);
}
.teaser-main-nav .row .col a.nav_trailer {
  background-image: url(../images/nav_trailer.png);
}
.teaser-main-nav .row .col a.nav_network {
  background-image: url(../images/nav_network.png);
}
.teaser-main-nav .row .col a.nav_staff {
  background-image: url(../images/nav_staff.png);
}

.teaser-main-nav .row .no-link a {
  background-color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
  opacity: 0.8;
}

/* ブロック */
.teaser-block{
  color: #fff;
  word-break: break-all;
  margin: 0 auto 60px;
}
.teaser-block-inner{
  padding: 40px;
  border: 4px solid #979797;
}

/* ブロックタイトル */
.teaser-block-title .title-img {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  display: block;
  font-size: 0;
}

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

/* ---------------------------------
 バナー
--------------------------------- */
.teaser-banner-area{
  width: 100%;
  padding: 10px 0;
}
.teaser-banner-area ul li{
  margin: 10px 0 0;
  line-height: 0;
  box-shadow: 0 5px #000000;
}
.teaser-banner-area ul li a{
}
.teaser-banner-area ul li a img{
  width: 100%;
}
.teaser-banner-area02 {
  width: 80%;
  margin: 50px auto 20px;
}
.teaser-banner-area02 img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 993px) {
  .teaser-banner-area{
    padding: 0;
  }
  .teaser-banner-area ul li{
    margin: 30px 0 0;
  }
  .teaser-banner-area02 {
    margin: 30px auto;
  }
}

/* ---------------------------------
 イントロ
--------------------------------- */
#intro.teaser-block{
  margin: 60px auto 60px;
}
#intro .teaser-block-title {
   width: 505px;
}
#intro .teaser-block-title .title-img {
  background-image: url(../images/intro_title.png);
  padding-top: 8.23%;
  margin-left: 5px;
}
#intro .teaser-block-inner{
  padding: 40px 0;
}
#intro .intro-group .group-img {
  background: url(../images/intro_lead.png) no-repeat 0 0;
  background-size: contain;
  padding-top: 90.17%;
  font-size: 0;
  margin: 0;
}
#intro .intro-text {
  max-width: 559px;
  margin: 30px auto 60px;
}
#intro .cast-title {
  max-width: 166px;
  margin: auto;
  padding-right: 30px;
}
#intro .cast-img {
  max-width: 410px;
  margin: 10px auto 40px;
}
#intro .cast-img p {
  background: url(../images/intro_cast.png) no-repeat 0 0;
  background-size: contain;
  font-size: 0;
  margin: 0;
  padding-top: 4.14%;
}
#intro .mc-title {
  max-width: 121px;
  margin: auto;
  padding-left: 30px;
}
#intro .mc-img {
  max-width: 300px;
  margin: 10px auto 40px;
}
#intro .mc-img p {
  background: url(../images/intro_mc_img.png) no-repeat 0 0;
  background-size: contain;
  font-size: 0;
  margin: 0;
  padding-top: 90.32%;
}
#intro .submc-title {
  max-width: 88px;
  margin: auto;
  padding-right: 20px;
}
#intro .submc-img {
  max-width: 170px;
  margin: auto;
}
#intro .submc-img p {
  background: url(../images/intro_submc_img.png) no-repeat 0 0;
  background-size: contain;
  font-size: 0;
  margin: 0;
  padding-top: 132.94%;
}

/* ---------------------------------
 SNS
--------------------------------- */
#sns .teaser-block-title {
  width: 134px;
}
#sns .teaser-block-title .title-img {
  background-image: url(../images/sns_title.png);
  padding-top: 30.97%;
  margin-left: 5px;
}

/* タイムライン */
.teaser-contents .twitter-area{
}
.teaser-contents .twitter-area .twitter-timeline{
}

/* ボタン */
.teaser-contents .teaser-btn{
  margin-top: 20px;
}
.teaser-contents .teaser-btn a{
  width: 100%;
  display: block;
}
.teaser-contents .teaser-btn#btn-follow-twitter a {
  max-width: 350px;
  margin: auto ;
  font-size: 0;
}

/* ---------------------------------
 TRAILER
--------------------------------- */
#trailer .teaser-block-title {
  width: 295px;
}
#trailer .teaser-block-title .title-img {
  background-image: url(../images/trailer_title.png);
  padding-top: 14.07%;
  margin-left: 5px;
}
.teaser-contents .movie-player{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 0 auto;
}
.teaser-contents .movie-player iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------
 NETWORK
--------------------------------- */
#network .teaser-block-title {
  width: 331px;
}
#network .teaser-block-title .title-img {
  background-image: url(../images/network_title.png);
  padding-top: 12.54%;
  margin-left: 5px;
}
#network .teaser-block-inner dl {
  text-align: center;
  margin-bottom: 30px;
}
#network .teaser-block-inner dl:last-of-type {
  margin-bottom: 0;
}
#network .teaser-block-inner dl dt {
  color: #e03636;
  font-weight: bold;
}

/* ---------------------------------
 STAFF
--------------------------------- */
#staff .teaser-block-title {
  width: 212px;
}
#staff .teaser-block-title .title-img {
  background-image: url(../images/staff_title.png);
  padding-top: 19.62%;
  margin-left: 5px;
}
#staff .teaser-block-inner dl {
  display:flex;
  margin-bottom: 20px;
}
#staff .teaser-block-inner dl:last-of-type {
  margin-bottom: 0;
}
#staff .teaser-block-inner dl dt {
  color: #e03636;
  font-weight: bold;
  width: calc(40% - 15px);
  text-align: right;
}
#staff .teaser-block-inner dl dd {
  margin-left: 30px;
  width: calc(60% - 15px);
}


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

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


/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
  .teaser-contents {
    margin: 0 10px;
    font-size: 2rem;
  }
  .ntv-mainv-banners--2column[data-v-aac5723c] {
    margin-top: 20px!important;
  }
  .teaser-main-onair {
    margin: 20px 10px 10px;
  }
  .teaser-block {
    margin: 0 auto 40px;
  }
  #intro.teaser-block {
    margin: 30px auto 40px;
  }
  .teaser-block-inner{
    padding: 20px;
  }
  #intro .teaser-block-inner{
    padding: 20px 0;
  }
}

@media screen and (max-width: 600px) {
  .teaser-contents {
    margin: 0 10px;
    font-size: 1.4rem;
  }
  #intro .teaser-block-title {
    width: calc(505px * 0.69);
    max-width: 99%;
  }
  .teaser-main-onair {
    margin: 10px 10px 10px;
  }
  #intro .intro-text {
    margin: 20px 10px;
  }
  #intro .intro-cast {
    padding: 0 10px;
  }
  #intro .cast-title {
    width: calc(166px * 0.7);
    padding-right: 15px;
  }
  #intro .cast-img {
    width: calc(410px * 0.7);
    margin: 0 auto 30px;
    max-width: 99%;
  }
  #intro .mc-title {
    width: calc(121px * 0.7);
    padding-left: 15px;
  }
  #intro .mc-img {
    width: calc(300px * 0.7);
    margin: 0 auto 30px;
    max-width: 99%;
  }
  #intro .submc-title {
    width: calc(88px * 0.7);
    padding-right: 10px;
  }
  #intro .submc-img {
    width: calc(170px * 0.7);
    margin: 0 auto 10px;
    max-width: 99%;
  }
  #sns .teaser-block-title {
    width: calc(134px * 0.7);
    max-width: 99%;
  }
  .teaser-contents .teaser-btn {
    margin-top: 10px;
  }
  #trailer .teaser-block-title {
    width: calc(295px * 0.7);
    max-width: 99%;
  }
  #network .teaser-block-title {
    width: calc(331px * 0.7);
    max-width: 99%;
  }
  #staff .teaser-block-title {
    width: calc(212px * 0.7);
    max-width: 99%;
  }
  #staff .teaser-block-inner dl dt {
    width: calc(42% - 7px);
  }
  #staff .teaser-block-inner dl dd {
    margin-left: 14px;
    width: calc(58% - 7px);
  }

}

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

}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
  .teaser-main-nav ul li a{
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
  }
  .teaser-main-nav ul li a:hover{
    opacity: 0.6;
  }

}