@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&display=swap");
/*==================================

 Layout

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

.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;
  font-weight: 300;
}

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

/* ブロックタイトル */
.teaser-block-title {
  width: 40.36%;
  max-width: 268px;
  margin: 0 auto -7%;
  position: relative;
  z-index: 1000;
}
.teaser-block-title img {
  width: 100%;
  height: 100%;
}

/* ブロック */
.teaser-block {
  color: #000;
  word-break: break-all;
  margin: 0 auto 5%;
  width: 98%;
  position: relative;
}
.teaser-block:after {
  content: "";
  border-radius: 10px;
  position: absolute;
  background: #00afcc;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
}
.teaser-block .teaserBlockInner {
  width: 100%;
  position: relative;
}
.teaser-block .teaserBlockInner:after {
  content: "";
  border-radius: 10px;
  position: absolute;
  background: #e5007f;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 100%;
}

.teaser-block-inner {
  margin: auto;
  padding: 60px 40px 40px;
  background: #fff;
  border-radius: 10px;
  position: relative;
  z-index: 100;
}

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

/* --- nav --- */
.teaser-main-nav {
  width: 100%;
  margin-top: 3%;
}
.teaser-main-nav ul li {
  display: inline-block;
  width: 25%;
  margin-bottom: 2.5%;
  position: relative;
}
.teaser-main-nav ul li a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-top: 65.84%;
  background-size: contain;
  background-repeat: no-repeat;
}
.teaser-main-nav ul li a:hover {
  opacity: 0.6;
  transition: 0.3s;
}
.teaser-main-nav ul .is-new:before {
  content: "";
  background: url(../images/nav/new.png) no-repeat;
  position: absolute;
  right: 10%;
  top: -10%;
  width: 40%;
  height: 40%;
  display: block;
  background-size: contain;
  z-index: 10;
}
.teaser-main-nav ul .navintro a {
  background-image: url(../images/nav/nav_intro.png);
}
.teaser-main-nav ul .navmovie a {
  background-image: url(../images/nav/nav_movie.png);
}
.teaser-main-nav ul .navstory a {
  background-image: url(../images/nav/nav_story.png);
}
.teaser-main-nav ul .navchart a {
  background-image: url(../images/nav/nav_chart.png);
}
.teaser-main-nav ul .navcast a {
  background-image: url(../images/nav/nav_cast.png);
}
.teaser-main-nav ul .navmusic a {
  background-image: url(../images/nav/nav_music.png);
}
.teaser-main-nav ul .navstaff a {
  background-image: url(../images/nav/nav_staff.png);
}
.teaser-main-nav ul .navsns a {
  background-image: url(../images/nav/nav_sns.png);
}
.teaser-main-nav ul .navtopics a {
  background-image: url(../images/nav/nav_topics.png);
}
.teaser-main-nav ul .is-coming {
  padding: 0 0.75rem;
}
.teaser-main-nav ul .is-coming span {
  background-image: url(../images/nav/coming.png);
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 100% !important;
  height: 0 !important;
  padding-top: 65.84% !important;
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- banner --- */
#banner {
  width: 95%;
  margin: auto;
}
#banner ul {
  width: 100%;
  overflow: hidden;
}
#banner ul li {
  width: 48%;
  margin: auto;
}
#banner ul li a {
  display: block;
}
#banner ul li a img {
  width: 100%;
  height: 100%;
}

/* --- comic --- */
#comic .comicInner {
  overflow: hidden;
}
#comic .comicInner .comicTit {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/comic/text.png) no-repeat;
  width: 100%;
  height: 0;
  padding-top: 18.24%;
  background-size: contain;
  margin-bottom: 5%;
}
#comic .comicInner ul li {
  display: inline-block;
  width: 48%;
}
#comic .comicInner ul li:nth-child(odd) {
  float: left;
}
#comic .comicInner ul li:nth-child(even) {
  float: right;
}
#comic .comicInner ul .is-on a {
  display: block;
}
#comic .comicInner ul .is-on a img {
  width: 100%;
  height: 100%;
}
#comic .comicInner ul .is-coming img {
  width: 100%;
  height: 100%;
}

/* --- intro --- */
#intro .introInner .introText {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/intro.png) no-repeat;
  width: 100%;
  height: 0;
  padding-top: 245.59%;
  background-size: contain;
}

/* --- story --- */
#story .storyInner .storyBlock {
  padding: 30px 0 10px;
  border-bottom: 1px dashed #ccc;
}
#story .storyInner .storyBlock:nth-child(odd) .titBlock .title {
  color: #00afcc;
}
#story .storyInner .storyBlock:nth-child(even) .titBlock .title {
  color: #e5007f;
}
#story .storyInner .storyBlock:first-child {
  padding-top: 0;
}
#story .storyInner .storyBlock:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
#story .storyInner .storyBlock .image {
  width: 100%;
  margin-bottom: 5px;
}
#story .storyInner .storyBlock .image img {
  width: 100%;
  height: 100%;
}
#story .storyInner .storyBlock .titBlock {
  font-size: 0;
}
#story .storyInner .storyBlock .titBlock .num {
  display: inline-block;
  vertical-align: middle;
  width: 15%;
  margin-bottom: 5px;
}
#story .storyInner .storyBlock .titBlock .num img {
  width: 100%;
  height: 100%;
}
#story .storyInner .storyBlock .titBlock .title {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  margin-left: 0.6em;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
#story .storyInner .storyBlock .titBlock .title span {
  font-weight: 300;
}
#story .storyInner .storyBlock .text {
  clear: both;
}

/* --- chart --- */
#chart .chartInner .chartText {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/chart.png) no-repeat;
  width: 100%;
  height: 0;
  padding-top: 205.7%;
  background-size: contain;
}

/* --- cast --- */
#cast .castBlock {
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 4%;
}
#cast .castBlock:nth-child(odd) {
  border: 2px solid #e5007f;
}
#cast .castBlock:nth-child(odd) .castBlockInner {
  border: 2px dotted #e5007f;
}
#cast .castBlock:nth-child(odd) .castBlockInner .text dt {
  color: #e5007f;
}
#cast .castBlock:nth-child(odd) .castBlockInner .comment dt {
  color: #e5007f;
}
#cast .castBlock:nth-child(odd) .castBlockInner .comment dt:after {
  content: "";
  background: url(../images/common/line_pk.png) no-repeat;
}
#cast .castBlock:nth-child(odd) .castBlockInner .comment dd .tit {
  color: #e5007f;
}
#cast .castBlock:nth-child(even) {
  border: 2px solid #00afcc;
}
#cast .castBlock:nth-child(even) .castBlockInner {
  border: 2px dotted #00afcc;
}
#cast .castBlock:nth-child(even) .castBlockInner .text dt {
  color: #00afcc;
}
#cast .castBlock:nth-child(even) .castBlockInner .comment dt {
  color: #00afcc;
}
#cast .castBlock:nth-child(even) .castBlockInner .comment dt:after {
  content: "";
  background: url(../images/common/line_bl.png) no-repeat;
}
#cast .castBlock:nth-child(even) .castBlockInner .comment dd .tit {
  color: #00afcc;
}
#cast .castBlock:last-child {
  border: 2px solid #00afcc;
}
#cast .castBlock:last-child .castBlockInner {
  border: 2px dotted #00afcc;
}
#cast .castBlock:last-child .castBlockInner .text dt {
  color: #00afcc;
}
#cast .castBlock:last-child .castBlockInner .comment dt {
  color: #00afcc;
}
#cast .castBlock:last-child .castBlockInner .comment dt:after {
  content: "";
  background: url(../images/common/line_bl.png) no-repeat;
}
#cast .castBlock:last-child .castBlockInner .comment dd .tit {
  color: #00afcc;
}
#cast .castBlock:last-child {
  margin-bottom: 0;
}
#cast .castBlock .castBlockInner {
  border-radius: 10px;
  padding: 25px 20px 20px;
}
#cast .castBlock .castBlockInner .image {
  float: left;
  width: 45%;
}
#cast .castBlock .castBlockInner .image img {
  width: 100%;
}
#cast .castBlock .castBlockInner .text {
  float: right;
  width: 50%;
}
#cast .castBlock .castBlockInner .text dt {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0.6em;
}
#cast .castBlock .castBlockInner .text dt span {
  font-size: 14px;
}
#cast .castBlock .castBlockInner .text dd {
  font-size: 14px;
  line-height: 2em;
}
#cast .castBlock .castBlockInner .comment {
  clear: both;
  padding-top: 2%;
}
#cast .castBlock .castBlockInner .comment dt {
  margin-bottom: 0.5em;
  font-family: 'Oleo Script', cursive;
  font-size: 22px;
}
#cast .castBlock .castBlockInner .comment dt:after {
  content: "";
  width: 100%;
  height: 0;
  padding-top: 1.86%;
  background-size: contain !important;
  display: block;
}
#cast .castBlock .castBlockInner .comment dd {
  font-size: 14px;
  line-height: 2em;
  margin-bottom: 1em;
}
#cast .castBlock .castBlockInner .comment dd .tit {
  font-weight: 500;
}
#cast .castBlock .castBlockInner .comment dd:last-child {
  margin-bottom: 0;
}

/* --- music --- */
#music .musicInner .image {
  width: 60%;
  margin: auto;
}
#music .musicInner .image img {
  width: 100%;
}
#music .musicInner .musicTit {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #e5007f;
  margin: 0.8em auto 1em;
}
#music .musicInner .musicTit span {
  font-size: 26px;
}
#music .musicInner .musicAbout {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #e5007f;
  margin-bottom: 1.5em;
}
#music .musicInner .aboutTextLast {
  margin-bottom: 2em !important;
}
#music .musicInner .musicBlock {
  border: 2px solid #e5007f;
  border-radius: 10px;
  padding: 6px;
}
#music .musicInner .musicBlock .musicBlockInner {
  border: 2px dotted #e5007f;
  padding: 20px;
}
#music .musicInner .musicBlock .musicBlockInner .comment dt {
  color: #e5007f;
  margin-bottom: 0.5em;
  font-family: 'Oleo Script', cursive;
  font-size: 22px;
}
#music .musicInner .musicBlock .musicBlockInner .comment dt:after {
  content: "";
  background: url(../images/common/line_pk.png) no-repeat;
  width: 100%;
  height: 0;
  padding-top: 1.46%;
  background-size: contain !important;
  display: block;
}
#music .musicInner .musicBlock .musicBlockInner .comment dd {
  margin-bottom: 1em;
  font-size: 14px;
  line-height: 2em;
}
#music .musicInner .musicBlock .musicBlockInner .comment dd .tit {
  color: #e5007f;
  font-weight: 500;
}

/* --- staff --- */
#staff .staffInner .staff_list .item {
  display: flex;
}
#staff .staffInner .staff_list .item:nth-child(odd) .title:after {
  color: #e5007f;
}
#staff .staffInner .staff_list .item:nth-child(even) .title:after {
  color: #00afcc;
}
#staff .staffInner .staff_list .item .title {
  width: calc(50% - 15px);
  text-align: right;
}
#staff .staffInner .staff_list .item .title p {
  display: inline-block;
  font-size: 14px;
}
#staff .staffInner .staff_list .item .title:after {
  content: "　●";
  font-size: 14px;
  display: inline-block;
}
#staff .staffInner .staff_list .item .text {
  width: calc(50% - 15px);
  margin-left: 1em;
}
#staff .staffInner .staff_list .item .text p {
  font-size: 14px;
}
#staff .staffInner .staff_list .item .text p span {
  font-size: 12px;
}

/* --- sns --- */
#sns .teaser-block-inner .twitter-area .snsLink {
  width: 100%;
  margin: auto;
  height: auto;
  text-align: justify;
}
#sns .teaser-block-inner .twitter-area .snsLink::after {
  content: "";
  display: inline-block;
  width: 100%;
  line-height: 0;
  height: 0;
}
#sns .teaser-block-inner .twitter-area .snsLink .teaser-btn {
  margin-top: 20px;
  display: inline-block;
  width: 30%;
  margin-right: 1.5%;
  margin-bottom: 0;
}
#sns .teaser-block-inner .twitter-area .snsLink .teaser-btn:last-child {
  margin-right: 0;
}
#sns .teaser-block-inner .twitter-area .snsLink .teaser-btn a {
  text-indent: -9999px;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-top: 37.84%;
  background-size: contain !important;
  display: block;
}
#sns .teaser-block-inner .twitter-area .snsLink #btn-follow-twitter a {
  background: url(../images/sns/follow_tw.png) no-repeat;
}
#sns .teaser-block-inner .twitter-area .snsLink #btn-follow-insta a {
  background: url(../images/sns/follow_insta.png) no-repeat;
}
#sns .teaser-block-inner .twitter-area .snsLink #btn-follow-tiktok a {
  background: url(../images/sns/follow_tiktok.png) no-repeat;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
  /* ブロック */
  .teaser-block {
    width: 92% !important;
  }

  .teaser-block-inner {
    padding: 10% 3.5% 5%;
  }

  /* ブロックタイトル */
  .teaser-block-title {
    margin: 0 auto -8%;
  }

  /* --- nav --- */
  .teaser-main-nav {
    width: 95%;
    margin: 3% auto;
  }
  .teaser-main-nav .row {
    margin-bottom: 0;
  }

  /* --- banner --- */
  #banner {
    width: 92% !important;
  }

  /* --- story --- */
  #story .storyInner .storyBlock .titBlock .num {
    vertical-align: top;
  }
  #story .storyInner .storyBlock .titBlock .title {
    vertical-align: top;
    font-size: 14px;
  }
  #story .storyInner .storyBlock .text {
    font-size: 13px;
  }

  /* --- cast --- */
  #cast .castBlock {
    padding: 4px;
  }
  #cast .castBlock .castBlockInner {
    padding: 6% 5%;
  }
  #cast .castBlock .castBlockInner .image {
    float: none;
    width: 75%;
    margin: 0 auto 3%;
  }
  #cast .castBlock .castBlockInner .image img {
    width: 100%;
  }
  #cast .castBlock .castBlockInner .text {
    float: none;
    width: 100%;
  }
  #cast .castBlock .castBlockInner .text dt {
    text-align: center;
  }

  /* --- music --- */
  #music .musicInner .musicTit {
    font-size: 18px;
  }
  #music .musicInner .musicTit span {
    font-size: 22px;
  }

  /* --- staff --- */
  #staff .staffInner .staff_list .item .title p {
    font-size: 13px;
  }
  #staff .staffInner .staff_list .item .text p {
    font-size: 13px;
  }
  #staff .staffInner .staff_list .item .text p span {
    font-size: 12px;
  }
}
/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width: 601px) {
  /* --- story --- */
  #story .storyInner .storyBlock .titBlock .num {
    vertical-align: middle;
  }
  #story .storyInner .storyBlock .titBlock .title {
    vertical-align: middle;
    font-size: 16px !important;
  }
  #story .storyInner .storyBlock .text {
    font-size: 14px !important;
  }

  /* --- cast --- */
  #cast .castBlock {
    padding: 6px !important;
  }
  #cast .castBlock .castBlockInner {
    padding: 6% 5%;
  }
  #cast .castBlock .castBlockInner .image {
    float: left !important;
    width: 45% !important;
  }
  #cast .castBlock .castBlockInner .text {
    float: right !important;
    width: 50% !important;
  }
  #cast .castBlock .castBlockInner .text dt {
    text-align: left !important;
  }

  /* --- topics --- */
  #topics .drama-btn.btn-more {
    width: 70% !important;
    padding: 1.5em 0 !important;
  }
}
/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
  /* ブロック */
  /* ブロックタイトル */
  .teaser-main-onair {
    font-size: 1.8rem;
  }

  .teaser-contents {
    margin-top: 20px;
  }
}
/* ---------------------------------
 右カラム設定
--------------------------------- */
/* 右カラム　タイトル */
.ntv-box-title {
  background: #222;
}

.ntv-box-title.title-base {
  /* background: #e90d28; */
}

.drama-box-title.title-base {
  /* background-color: #e90d28; */
}

/* ---------------------------------
 動画
--------------------------------- */
.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%;
}

/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */
#topics.drama-area {
  padding: 0;
  margin: 0;
}

#topics .drama-box-title {
  display: none;
}

/* ボタン */
#topics .drama-btn.btn-more {
  display: block;
  width: 70%;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
  position: relative;
  background: #00afcc;
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 90px;
  padding: 1.5em 0;
  font-size: 1.4rem;
  line-height: 1;
}

#topics .drama-btn.btn-more i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: middle;
}

#topics .topics-pickup-text {
  font-weight: 300 !important;
}

@media screen and (max-width: 992px) {
  #topics .topics-btn {
    padding: 10px;
    margin: 0;
  }

  #topics .drama-btn.btn-more {
    width: 100%;
    padding: 1em 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%;
  }
}