@charset "UTF-8";

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

 Layout

==================================*/
.ntv-wrapper {
  background: url(../images/bg.jpg) repeat;
}
img {
  width: 100%;
}
.teaser-contents {
  box-sizing: border-box;
}
.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}

/* ブロック */
.teaser-block{
  color: #222;
  word-break: break-all;
  margin-top: 72px;
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
.teaser-block-inner{
  background: #fff;
  padding: 40px 20px;
  box-shadow: 0 0 0 2px #000, 0 0 0 7px #fff, 0 0 0 12px #000;
  border-radius: 10px;
  margin: 42px auto;
}
.teaser-block-title {
  font-size: 0;
  margin: 0 auto;
}
.teaser-block-title .title-img {
  background-repeat: no-repeat;
  background-size: contain;
}
.teaser-block p{
  line-height: 1.75;
  font-size: 1.8rem;
}
/* ---------------------------------
MV・OA
--------------------------------- */
.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
.teaser-main-onair {
  background-image: url(../images/oa.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 5.51%;
  font-size: 0;
  margin: 30px auto;
  max-width: 626px;
}
/* ---------------------------------
attention
--------------------------------- */
#attention  {
  padding: 20px;
  background-color: #fff;
  border: 2px solid #e60113;
  border-radius: 10px;
}
#attention p {
  line-height: 1.75;
  font-size: 1.8rem;
  font-weight: bold;
}

/* ---------------------------------
メニュー
--------------------------------- */
.teaser-main-nav {
  margin-top: 30px;
}

.teaser-main-nav .row { 
  margin-bottom: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.teaser-main-nav .row .col{
  width : -webkit-calc((100% - 60px) / 4) ;
  width: calc((100% - 60px) / 4) ;
  padding: 0;
  margin-bottom: 20px;
}
.teaser-main-nav .row .col:not(:nth-child(4n + 1)){
  margin-left: 20px;
}
.teaser-main-nav .row .col:nth-child(n + 5) {
  margin-bottom: 0;
}
.teaser-main-nav .row .col a {
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  padding-top: 52.32%;
  font-size: 0;
}
.teaser-main-nav .row .col a.nav-intro {
  background-image: url(../images/nav-intro.png);
}
.teaser-main-nav .row .col a.nav-story {
  background-image: url(../images/nav-story.png);
}
.teaser-main-nav .row .col a.nav-chart {
  background-image: url(../images/nav-chart.png);
}
.teaser-main-nav .row .col a.nav-comment {
  background-image: url(../images/nav-comment.png);
}
.teaser-main-nav .row .col a.nav-staff {
  background-image: url(../images/nav-staff.png);
}
.teaser-main-nav .row .col a.nav-sns {
  background-image: url(../images/nav-sns.png);
}
.teaser-main-nav .row .col a.nav-topics {
  background-image: url(../images/nav-topics.png);
}

/* ---------------------------------
 バナー
--------------------------------- */
.teaser-banner-area{
  width: 100%;
  margin: 40px auto 0;
}
.teaser-banner-area ul li{
  line-height: 0;
}

/* Huluバナー差し替え追記 */
.teaser-banner-area ul li a{
  display: block;
  padding: 20px 10px;
  border-radius: 10px;
}
.teaser-banner-area ul li.list-item--hulu a {
  background: #3ce132;
}
.teaser-banner-area ul li a span{
  background-image: url(../images/channel-hulu-pc.png);
}
.teaser-banner-area ul li a span{
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  height: 55px;
}
/* Huluバナー差し替え追記　ここまで */

.teaser-banner-area ul li a img{
  width: 100%;
}
.teaser-banner-area.second-area {
  margin: 72px auto 0;
}
.teaser-banner-area .bnr-two-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.teaser-banner-area .bnr-two-item li {
  width: calc(50% - 10px);
}
.teaser-banner-area .bnr-two-item li:nth-of-type(2) {
  margin: 0 0 20px 20px;
}
.teaser-banner-area .bnr-two-item li:nth-of-type(4) {
  margin: 0 0 0 20px;
}
/* ---------------------------------
 huluストーリー
--------------------------------- */
#hulu .teaser-block-title {
  max-width: 432px;
}
#hulu .teaser-block-title .title-img {
  background-image: url(../images/hulu-title.png);
  padding-top: 8.91%;
  background-position: center;
}
#hulu .teaser-block-inner{
  background: #fff;
  padding: 40px 20px;
  box-shadow: 0 0 0 2px #66aa33, 0 0 0 7px #fff, 0 0 0 12px #66aa33;
  border-radius: 10px;
  margin: 42px auto;
}
#hulu .teaser-block-inner .story-title {
  max-width: 411px;
  margin: auto;
}
#hulu .teaser-block-inner .story-title p {
  background-image: url(../images/hulu-storytitle.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 8.64%;
  font-size: 0;
  margin-bottom: 40px;
}
#hulu .teaser-block-inner .story-image {
  margin-bottom: 30px;
  border-radius: 5px;
}
#hulu .teaser-block-inner .story-image a {
  display: block;
  background-image: url(../images/hulu-img.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 56.25%;
  border-radius: 5px;
}
#hulu .teaser-block-inner .story-text  {
  width: 518px;
  margin: auto;
}
#hulu .teaser-block-inner .story-text .story-text-img {
  background-image: url(../images/hulu-text.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 46.53%;
  font-size: 0;
}


/* ---------------------------------
 動画
--------------------------------- */
#movie .teaser-block-inner{
  background: none;
  box-shadow: none;
  margin: 30px auto 0;
  padding: 0;
}
#movie .teaser-block-title {
  max-width: 189px;
}
#movie .teaser-block-title .title-img {
  background-image: url(../images/movie-title.png);
  padding-top: 21.43%;
}
.teaser-contents .movie-player{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 0 auto;
}
.teaser-contents .movie-player iframe{
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------
イントロダクション
--------------------------------- */
#intro .teaser-block-title {
  max-width: 440px;
}
#intro .teaser-block-title .title-img {
  background-image: url(../images/intro-title.png);
  padding-top: 8.98%;
}
#intro .teaser-block-inner {
  padding: 40px 20px;
}
#intro .teaser-block-inner p {
  background-image: url(../images/intro-img.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 232.21%;
  font-size: 0;
}

/* ---------------------------------
ストーリー
--------------------------------- */
#story .teaser-block-title {
  max-width: 303px;
}
#story .teaser-block-title .title-img {
  background-image: url(../images/story-title.png);
  padding-top: 12.87%;
}
#story .teaser-block-inner p .story-txt-black {
  color: #000;
  font-weight: bold;
}
#story .teaser-block-inner p .story-txt-red {
  color: #e50011;
  font-weight: bold;
}


/* ---------------------------------
相関図
--------------------------------- */
#chart .teaser-block-title {
  max-width: 226px;
}
#chart .teaser-block-title .title-img {
  background-image: url(../images/chart-title.png);
  padding-top: 17.04%;
}
#chart .teaser-block-inner {
  padding: 40px 0;
}
#chart .teaser-block-inner .chart-img {
  background-image: url(../images/chart-img.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 158.65%;
}
/* ---------------------------------
キャストコメント
--------------------------------- */
#comment .teaser-block-title {
  max-width: 418px;
}
#comment .teaser-block-title .title-img {
  background-image: url(../images/comment-title.png);
  padding-top: 9.33%;
}
#comment .teaser-block-inner {
  padding: 40px 0;
}
#comment .teaser-block-inner .castcomment-block {
  margin: 0 0 40px;
}
#comment .teaser-block-inner .castcomment-block:last-of-type {
  margin: 0;
}
#comment .teaser-block-inner .castcomment-block .cast .img{
  width: 276px;
  margin: auto;
}
#comment .teaser-block-inner .castcomment-block .cast .play {
  font-size: 2rem;
  color: #e50011;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1;
  font-weight: bold;
}
#comment .teaser-block-inner .castcomment-block .cast .play .play-txt-small {
  font-size: 1.6rem;
}
#comment .teaser-block-inner .castcomment-block .cast .name {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1;
  font-weight: bold;
}
#comment .teaser-block-inner .castcomment-block .comment {
  padding: 20px;
  background-color: #000;
  position: relative;
  margin: 0 20px;
}
#comment .teaser-block-inner .castcomment-block .comment p {
  font-size: 1.6rem;
}
#comment .teaser-block-inner .castcomment-block .comment::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
  border-width: 0 10px 10px 10px;
}
#comment .teaser-block-inner .castcomment-block .comment p{
  color: #fff;
}

/* ---------------------------------
スタッフ
--------------------------------- */
#staff .teaser-block-title {
  max-width: 256px;
}
#staff .teaser-block-title .title-img {
  background-image: url(../images/staff-title.png);
  padding-top: 14.84%;
}
#staff .teaser-block-inner .staff_list .item {
  display: flex;
}
#staff .teaser-block-inner .staff_list .item .title {
  width: calc(50% - 15px);
  text-align: right;
}
#staff .teaser-block-inner .staff_list .item .title p,
#staff .teaser-block-inner .staff_list .item .text p {
  margin: 10px 0;
}
#staff .teaser-block-inner .staff_list .item .text {
  margin-left: 30px;
  width: calc(50% - 15px);
}

/* ---------------------------------
SNS
--------------------------------- */
#sns .teaser-block-title {
  max-width: 206px;
}
#sns .teaser-block-title .title-img {
  background-image: url(../images/sns-title.png);
  padding-top: 18.93%;
}
/* タイムライン */
.teaser-contents .twitter-area{
}
.teaser-contents .twitter-area .twitter-timeline{
}

/* ボタン */
.teaser-contents .sns-link{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.teaser-contents .sns-link .teaser-btn {
  width: calc(50% - 20px);
}
.teaser-contents .sns-link .teaser-btn:last-of-type {
  margin-left: 20px;
}
.teaser-contents .sns-link .teaser-btn a{
  text-indent: -9999px;
  width: 100%;
  height: 0;
  padding-top: 27.63%;
  display: block;
}
.teaser-contents .sns-link #btn-follow-twitter a{
  background: url(../images/sns-twitter.png) no-repeat;
  background-size: contain;
}
.teaser-contents .sns-link #btn-follow-insta a{
  background: url(../images/sns-insta.png) no-repeat;
  background-size: contain;
}


/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */
#topics .teaser-block-title {
  max-width: 277px;
}
#topics .teaser-block-title .title-img {
  background-image: url(../images/topics-title.png);
  padding-top: 13.72%;
}
#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;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
  position: relative;
  background: #000;
  padding: 1.3em 0 1.2em;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 10px;
}
#topics .drama-btn.btn-more i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: middle;
}


/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 600px) {
  .teaser-main-onair {
    margin: 20px 10px;
  }
  .teaser-contents {
    margin: 0 20px;
  }
  .teaser-banner-area {
    margin: 20px auto 0;
  }
  .teaser-banner-area.second-area {
    margin: 50px auto 0;
  }
  .teaser-banner-area .bnr-two-item li,
  .teaser-banner-area .bnr-two-item li:nth-of-type(2){
    width: 100%;
    margin: 0 auto 20px;
  }
  .teaser-banner-area .bnr-two-item li:nth-of-type(4) {
    margin: 0;
  }
  .teaser-block{
    margin: 50px auto;
  }
  .teaser-block-inner {
    margin: 32px auto 0;
    padding: 20px;
    box-shadow: 0 0 0 2px #000, 0 0 0 6px #fff, 0 0 0 10px #000;
  }
  .teaser-block p,
  #attention p {
    font-size: 1.4rem;
  }
  #attention {
    margin: 0 10px;
    padding: 10px;
  }
  .teaser-main-nav {
    margin: 20px 10px 0;
  }
  .teaser-main-nav .row .col{
    width : -webkit-calc((100% - 30px) / 4) ;
    width: calc((100% - 30px) / 4) ;
    margin-bottom: 10px;
  }
  .teaser-main-nav .row .col:not(:nth-child(4n + 1)){
    margin-left: 10px;
  }
  #hulu .teaser-block-title {
    width: calc(432px * 0.6);
    max-width: 100%;
  }
  #hulu .teaser-block-inner {
    box-shadow: 0 0 0 2px #66aa33, 0 0 0 6px #fff, 0 0 0 10px #66aa33;
    margin: 32px auto 0;
    padding: 20px;
  }
  #hulu .teaser-block-inner .story-title {
    width: calc(411px * 0.6);
  }
  #hulu .teaser-block-inner .story-title p {
    margin-bottom: 20px;
  }
  #hulu .teaser-block-inner .story-image {
    margin-bottom: 20px;
  }
  #hulu .teaser-block-inner .story-image a {

  }
  #hulu .teaser-block-inner .story-text {
    width: 100%;
  }
  #movie .teaser-block-title {
    width: calc(189px * 0.6);
    max-width: 100%;
  }
  #movie .teaser-block-inner {
    margin: 20px auto 0;
  }
  #intro .teaser-block-title {
    width: calc(440px * 0.6);
    max-width: 100%;
  }
  #intro .teaser-block-inner {
    padding: 20px 5px;
  }
  #story .teaser-block-title {
    width: calc(303px * 0.6);
    max-width: 100%;
  }
  #chart .teaser-block-title {
    width: calc(226px * 0.6);
    max-width: 100%;
  }
  #chart .teaser-block-inner {
    padding: 20px 0;
}
  #comment .teaser-block-title {
    width: calc(418px * 0.6);
    max-width: 100%;
  }
  #comment .teaser-block-inner {
    padding: 20px 0;
  }
  #comment .teaser-block-inner .castcomment-block .comment p{
    font-size: 1.4rem;
  }
  #staff .teaser-block-title {
    width: calc(256px * 0.6);
    max-width: 100%;
  }
  #staff .teaser-block-inner .staff_list .item .title {
    width: calc(50% - 5px);
  }
  #staff .teaser-block-inner .staff_list .item .text {
    margin-left: 15px;
    width: calc(50% - 10px);
  }
  #staff .teaser-block-inner .staff_list .item .title p,
  #staff .teaser-block-inner .staff_list .item .text p {
    font-size: 1.4rem;
  }
  #sns .teaser-block-title {
    width: calc(207px * 0.6);
    max-width: 100%;
  }
  .teaser-contents .sns-link .teaser-btn {
    width: calc(50% - 10px);
}
  .teaser-contents .sns-link .teaser-btn:last-of-type {
    margin-left: 15px;
}
  #topics .teaser-block-title {
    width: calc(277px * 0.6);
    max-width: 100%;
  }
  #topics .topics-btn {
    padding: 20px 0 0;
    margin: 0;
  }
  #comment .teaser-block-inner .castcomment-block .comment::before{
    right: 0;
  }
}

/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media only screen and (max-width: 992px) and (min-width: 601px){
  .teaser-main-onair {
    max-width: 94%;
  }
  #attention {
    max-width: 94%;
    margin: auto;
  }
  .teaser-main-nav {
    width: 90%;
    margin: 20px auto;
  }
  .teaser-contents {
    margin: 0 70px;
  }
  .teaser-block{
    margin: 72px auto 0;
  }
  #hulu .teaser-block-inner .story-text {
    max-width: calc(100% - 80px)
  }
  #comment .teaser-block-inner .castcomment-block .comment::before {
    left:0;
    right: 0;
  }
  #comment .teaser-block-inner .castcomment-block .comment {
    margin: 0px 40px;
  }
  #topics .topics-btn {
    margin: 30px auto 0;
  }
  .twitter-area{
    overflow: hidden;
  }
  .twitter-area iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: calc(100vw - 20px)!important;
  }
  
}

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

  /* ブロック */
  .teaser-block-inner{
    width: 640px;
  }
  .teaser-contents {
    margin-top: 20px;
  }
  .teaser-main-nav ul li a{
    font-size: 12px;
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
  }
  .teaser-main-nav ul li a:hover{
    opacity: 0.6;
  }
  .twitter-area{
    overflow: hidden;
  }
  .twitter-area iframe{
    /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
    width: 600px!important;
  }
  /* リスト */
  #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%;
  }
}
@media only screen and (max-width: 992px) and (min-width: 601px){
}
@media only screen and (max-width: 600px){
}
/* ---------------------------------
 右カラム設定
--------------------------------- */

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