@charset "UTF-8";
/*==================================

 Layout

==================================*/
.ntv-wrapper {
  background: #fff url(../images/common/bg.jpg) repeat;
}

.teaser-main-mainImg img {
  display: block;
  width: 100%;
}

.teaser-contents {
  box-sizing: border-box;
  font-size: 1.6rem;
  font-family: "Noto Sans JP",sans-serif;
  letter-spacing: 0.15em;
  line-height: 1.5em;
}

.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
  text-decoration: none;
  opacity: 0.65;
}

/* contentsBlock */
.contentsBlock {
  width: 100%;
}
.contentsBlock h3 {
  text-indent: -9999px;
  overflow: hidden;
  margin: 0 auto 2%;
  width: 100%;
  height: 0;
  padding-top: 15.06%;
  background-size: contain !important;
}
.contentsBlock .contentsInner {
  background: url(../images/common/bg_middle.png) repeat-y;
  width: 96%;
  margin: 0 auto 5%;
  background-size: contain;
  position: relative;
  padding: 5%;
}
.contentsBlock .contentsInner:before {
  content: "";
  background: url(../images/common/bg_top.png) no-repeat center top;
  width: 100%;
  height: 100%;
  padding-top: 0.459%;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.contentsBlock .contentsInner:after {
  content: "";
  background: url(../images/common/bg_bottom.png) no-repeat center bottom;
  width: 100%;
  height: 100%;
  padding-top: 0.452%;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.contentsBlock .contentsInner p {
  color: #000;
  line-height: 1.86;
  font-size: 1.6rem !important;
}
.contentsBlock .contentsInner p .textRed {
  color: #fe2d33;
  font-weight: bold;
}
.contentsBlock .contentsInner .iscoming {
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem !important;
}

/* ondemandBanner */
#ondemandBanner {
  width: 90%;
  margin: 3% auto 2%;
  overflow: hidden;
}
#ondemandBanner .ombanner a {
  display: block;
}
#ondemandBanner .ombanner a img {
  width: 100%;
  height: 100%;
}
#ondemandBanner .ombannerTver {
  width: 48%;
}
#ondemandBanner .ombannerHulu {
  width: 48%;
  margin: auto;
}

/* bannerArea */
#bannerArea .banner {
  width: 90%;
  margin: 0 auto 4%;
}
#bannerArea .banner a {
  display: block;
}
#bannerArea .banner a img {
  width: 100%;
  height: 100%;
}

/* movieArea */
#movieArea{
  width: 96%;
  margin: auto;
}
#movieArea .movie-player {
  margin: 1% auto 4%;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
#movieArea .movie-player iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* introArea */
#introArea h3 {
  background: url(../images/top/tit_intro.png) no-repeat;
}
#introArea .introText {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/top/intro.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-top: 121.63%;
}
#introArea .introImage {
  text-indent: -9999px;
  overflow: hidden;
  margin: 2% auto;
  height: 0;
  padding-top: 59.93%;
  background: url(../images/top/intro_img.png) no-repeat;
  background-size: contain;
}

/* storyArea */
#storyArea h3 {
  background: url(../images/top/tit_story.png) no-repeat;
}
#storyArea .storyMovie {
  margin: 1% auto 4%;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
#storyArea .storyMovie iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#storyArea .storyText {
  text-align: center;
  font-weight: bold;
  line-height: 2em;
  margin-bottom: 1em;
  letter-spacing: 0.1em;
}
#storyArea .storyText:first-child {
  margin-top: 1em;
}
#storyArea .storyText .blue {
  color: #221bfe;
}
#storyArea .storyText .red {
  color: #fe2d33;
}
#storyArea .storyText:last-child .red {
  font-size: 1.6em;
}
#storyArea .storyImage {
  text-indent: -9999px;
  overflow: hidden;
  margin: 2% auto;
  height: 0;
  padding-top: 59.93%;
  background: url(../images/top/story_img.png) no-repeat;
  background-size: contain;
}

/* chartArea */
#chartArea h3 {
  background: url(../images/top/tit_chart.png) no-repeat;
}
#chartArea .chartImage {
  text-indent: -9999px;
  overflow: hidden;
  margin: 2% auto;
  height: 0;
  padding-top: 130.60%;
  background: url(../images/top/chart.png) no-repeat;
  background-size: contain;
}

/* castArea */
#castArea h3 {
  background: url(../images/top/tit_cast.png) no-repeat;
}
#castArea .castTit {
  text-align: center;
  font-weight: bold;
  color: #fff;
  margin: 0.5em auto;
}
#castArea .mcTit {
  background: #fe2d33;
  width: 5em;
}
#castArea .dramaTit {
  background: #221bfe;
  width: 9em;
}
#castArea .castText {
  text-align: center;
  font-weight: bold;
  margin-bottom: 2em;
}
#castArea .castText .textRed {
  font-size: 1.8rem;
}
#castArea .castText .smallText {
  font-size: small;
}
#castArea .castImg {
  width: 90%;
  margin: 3% auto;
}
#castArea .castImg img {
  width: 100%;
}

/* topicsArea */
#topicsArea {
  /* teaser-block-inner */
}
#topicsArea h3 {
  background: url(../images/top/tit_topics.png) no-repeat;
}
#topicsArea .teaser-block-inner {
  width: 100%;
}
#topicsArea .teaser-block-inner .topics-area {
  background: url(../images/common/bg_middle.png) repeat-y;
  width: 96%;
  margin: 0 auto 5%;
  background-size: contain;
  position: relative;
  padding: 5%;
}
#topicsArea .teaser-block-inner .topics-area:before {
  content: "";
  background: url(../images/common/bg_top.png) no-repeat center top;
  width: 100%;
  height: 100%;
  padding-top: 0.459%;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#topicsArea .teaser-block-inner .topics-area:after {
  content: "";
  background: url(../images/common/bg_bottom.png) no-repeat center bottom;
  width: 100%;
  height: 100%;
  padding-top: 0.452%;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
#topicsArea .teaser-block-inner .topics-area .drama-box-body {
  background: none;
}
#topicsArea .teaser-block-inner .topics-area .drama-box-body .topics-btn {
  margin: 5% auto 3%;
}
#topicsArea .teaser-block-inner .topics-area .drama-box-body .topics-btn .drama-btn.btn-more {
  width: 80%;
  border: none;
  border-radius: 90px;
  background-color: #000;
  color: #fff;
}

/* snsArea */
#snsArea h3 {
  background: url(../images/top/tit_sns.png) no-repeat;
}
#snsArea #teaser-instagram {
  width: 95%;
  margin: 2% auto 5%;
}
#snsArea #teaser-tiktok {
  width: 95%;
  margin: auto;
}
#snsArea #teaser-tiktok .teaser-block-inner {
  width: 100%;
}
#snsArea #teaser-tiktok .teaser-block-inner .tiktok-embed {
  margin: 0 auto;
}
#snsArea .snsLink {
  width: 100%;
  padding-top: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
#snsArea .snsLink::marker {
  display: none;
}
#snsArea .snsLink .linkBtn {
  width: 32.5%;
}
#snsArea .snsLink .linkBtn a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  padding-top: 25.542%;
  background-size: contain !important;
}
#snsArea .snsLink .linkX a {
  background: url(../images/top/follow_tw.png) no-repeat;
}
#snsArea .snsLink .linkInsta a {
  background: url(../images/top/follow_insta.png) no-repeat;
}
#snsArea .snsLink .linkTiktok a {
  background: url(../images/top/follow_tiktok.png) no-repeat;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
  /* contentsBlock */
  .contentsBlock .contentsInner p {
    font-size: 1.2rem !important;
  }
  .contentsBlock .contentsInner p .textRed {
    font-size: 1.5rem !important;
  }
  .contentsBlock .contentsInner .iscoming {
    font-size: 1.3rem !important;
  }

  #castArea .castTit {
    font-size: 1.4rem !important;
  }
  #castArea .castText .smallText {
    font-size: 1.1rem !important;
  }

  /* snsArea */
  #snsArea .snsLink .linkBtn a {
    padding-top: 15.542%;
  }
}
/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width: 601px) {
  /* contentsBlock */
  .contentsBlock .contentsInner p {
    font-size: 1.6rem !important;
  }
  .contentsBlock .contentsInner .iscoming {
    font-size: 1.8rem !important;
  }

  /* snsArea */
  #snsArea .snsLink .linkBtn a {
    padding-top: 25.542%;
  }
}
/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
  /* ブロック */
  /* ブロックタイトル */
}
/* ---------------------------------
 右カラム設定
--------------------------------- */
/* 右カラム　タイトル */
.ntv-box-title {
  background: #222;
}

.ntv-box-title.title-base {
  background: #222;
}

.drama-box-title.title-base {
  background-color: #222;
}

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

 Template-Module
 不使用の場合は削除してください

==================================*/
/* ---------------------------------
 メニュー（UNIT04タイプ）設定
--------------------------------- */
.navArea {
  background-color: #fe2d33;
  width: 100%;
  margin-bottom: 5%;
  clear: both;
  border-top: 2px solid #000;
}

.navArea .row {
  border-right: 2px solid #000;
}

.navArea .row .col {
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
}
.navArea .row .navIntro a {
  background: url(../images/nav/nav_intro.png) no-repeat center;
}
.navArea .row .navStory a {
  background: url(../images/nav/nav_story.png) no-repeat center;
}
.navArea .row .navChart{

}
.navArea .row .navChart .navText{
  background: url(../images/nav/nav_chart.png) no-repeat center;
  opacity: 0.5;
  text-align: center;
  text-indent: -9999px;
  overflow: hidden;
  height: 0;
  padding-top: 45.454% !important;
  background-size: contain !important;
}
.navArea .row .navCast a {
  background: url(../images/nav/nav_cast.png) no-repeat center;
}
.navArea .row .navTopics a {
  background: url(../images/nav/nav_topics.png) no-repeat center;
}
.navArea .row .navSns a {
  background: url(../images/nav/nav_sns.png) no-repeat center;
}

.navArea .row .col {
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  padding: 0;
}

.navArea ul {
  width: 100%;
}

.navArea ul li {
  margin-left: auto;
  left: auto;
  right: auto;
}

.navArea ul li a {
  display: block;
  text-align: center;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  height: 0;
  padding-top: 45.454% !important;
  background-size: contain !important;
}

.navArea ul li span {
  display: block;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  font-size: 8px;
  letter-spacing: 0.8px;
  opacity: 0.6;
}

@media screen and (min-width: 993px) {
  .navArea {
    position: relative;
    z-index: 9999;
  }

  .navArea ul li a:hover {
    opacity: 0.6;
  }
}
/* ---------------------------------
 ティザー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%;
  }
}