@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;600&display=swap');

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

 Layout

==================================*/
body #ntv,body #ntv .ntv-wrapper{
  background: #111111 url(../images/common/bg_ptn.jpg);
  /* position: relative;
  z-index: 1; */
}
/* .nihontouitsu .bg_pc{
  position: relative;
  z-index: 1;
}
.nihontouitsu .bg_pc::before{
  content: '';
  background-image: url(../images/common/bg_item_top.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 101.05%;
  position: absolute;
  top:0;
  left: 0;
  z-index: -1;
}
.nihontouitsu .bg_pc::after{
  content: '';
  background-image: url(../images/common/bg_item_bottom.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 50.87%;
  position: absolute;
  bottom:0;
  left: 0;
  z-index: -1;
} */
.ntv-mainv-banners--2column{
  margin-top: -1px!important;
  background: #000000;
}
.ntv-mainv-banners--2column .inner{
  padding: 10px 0!important;
}
@media screen and (min-width: 993px){
  /* .nihontouitsu .ntv-contentsWrap{
    padding-bottom: 60px;
    position: relative;
    z-index: 10;
  } */
}
@media (max-width: 600px){
.ntv-mainv-banners--2column .inner{
  padding: 10px 0!important;
}
}
@media (max-width: 992px){
.ntv-mainv-banners--2column .inner{
  padding: 1.5vw 0!important;
}
}

/* banner */
.teaser-banner-area-2column{
  margin-top: 10PX;
}
.teaser-banner-area-2column ul{
  display: flex;
  justify-content: space-evenly;
  justify-content: center;
}
.teaser-banner-area-2column ul li{
  width: 45%;
  margin: 0 10px;
  max-width: 290px;
}
.teaser-banner-area-2column ul li img{
  width: 100%;
}
@media screen and (max-width : 992px){
  .teaser-banner-area-2column ul{
    justify-content: center;
    width: 100%;
  }
  .teaser-banner-area-2column ul li {
    margin: 0 5px;
  }
}

/* mainv */
.teaser-main-mainImg {
  margin-bottom: 0;
}
.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
.teaser-main-onair img{
  width: 55%;
  height: auto;
  max-width: 340px;
  vertical-align: middle;
  margin-bottom: 3px;
}

/* main */
.teaser-contents {
  background: url(../images/common/bg_ptn_op.png);
  box-sizing: border-box;
  font-size: 1.6rem;
  padding-bottom: 10%;
}
.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}

/* ブロック */
.teaser-block{
  color: #333;
  word-break: break-all;
}
.teaser-block-inner{
  padding: 0 5%;
  position: relative;
}
@media screen and (min-width: 993px) {
  .teaser-block-inner{
    padding: 0 20px;
  }
}

/* ブロックタイトル */
.teaser-block-title{
  color: #fff;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  margin: 0 auto;
}

/* ブロック内テキスト */
.teaser-block p{
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.86;
  letter-spacing: 0.1em;
  font-feature-settings:"palt" 1;
  margin-bottom: 15px;
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.teaser-block a{
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.teaser-block .f-serif{
  font-family: "Hiragino Mincho ProN", "MS PMincho", "Noto Serif JP", "YuMincho", "Yu Mincho", serif;
  transform: scaleY(.95);
  font-weight: 300;
}
.teaser-block img{
  width: 100%;
}

.sp-br{
  display: none;
}

/* ---------------------------------
 SP用（tab共通）
--------------------------------- */
@media screen and (max-width: 992px) {
  .teaser-block-title{
  }
  .sp-br{
    display: block;
  }
  .teaser-main-onair img{
    width: 90%;
    max-width: 340px;
    margin-bottom: 2px;
  }
  .teaser-main-onair::before{
    width: 250px;
    height: 29px;
    top: -6px;
  }
}
/* ---------------------------------
 SP用（tabはPCに合わせる場合）
--------------------------------- */
@media screen and (max-width : 600px){
  .teaser-contents {
    padding-bottom: 10%;
  }
  .teaser-block p{
    font-size: 1.4rem;
  }
}

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

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

  /* ブロック */
  .teaser-block{
    margin-top: 20px;
  }
  .teaser-block-inner{
    padding: 0 20px;
  }
  /* ブロックタイトル */
  .teaser-block-title{
  }
  .teaser-main-onair{
    font-size: 1.8rem;
  }
}

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

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


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

 Template-Module

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

/* ---------------------------------
 メニュー設定
--------------------------------- */
.teaser-main-nav{
  background: url(../images/common/nav/bg_nav.png);
  width: 100%;
  background-size: cover;
  position: relative;
  z-index: 50;
}
.teaser-main-nav .row{
  display: flex;
  padding-left: 0;
  margin: 0 auto;
}
.teaser-main-nav .row_01{
  margin-bottom: 0;
  border-bottom: 1px solid #828788;
}
.teaser-main-nav .row .col{
  width : -webkit-calc(100% / 3) ;
  width: calc(100% / 3) ;
  position: relative;
  padding: 0 2rem;
}
.teaser-main-nav .row .col:first-child{
  padding: 0 2rem 0 1rem;
}
.teaser-main-nav .row .col:last-child{
  padding: 0 1rem 0 2rem;
}
.teaser-main-nav .row .col::marker{
  content: "";
}
.teaser-main-nav .row .col:after{
  content: "";
  border-right: 1px solid #828788;
  height: 30px;
  width: 1px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}
.teaser-main-nav .row li:nth-child(3).col:after{
  border-right: 0;
}
.teaser-main-nav ul{
  width: 96%;
}
.teaser-main-nav ul li{
  margin-left: auto;
  left: auto;
  right: auto;
}
.teaser-main-nav ul li {
  display: block;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  font-size: 8px;
  letter-spacing: 0.8px;
  cursor: pointer;
}
.teaser-main-nav ul li p.coming{
  cursor: auto;
}
.teaser-main-nav ul li img{
  width: auto;
  height: 36px;
  vertical-align: middle;
}
.teaser-main-nav > ul > li  > [class*=icon-]{
  display: block;
  font-size: 28px;
}
.teaser-main-nav ul li a.link, .teaser-main-nav ul li span.link{
  position: relative;
  display: block;
  width: 100%;
  padding-top: 38.0953%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
}
.teaser-main-nav ul li a{
  cursor: pointer;
}
.teaser-main-nav ul li span.link{
  opacity: 0.35;
  cursor: default;
}
.teaser-main-nav ul li a.link p.nav-jp, .teaser-main-nav ul li span.link p.nav-jp{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  overflow: hidden;
  font-size: 0px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: -0.03em;
  transform: translate(-50%, -50%);
}
.teaser-main-nav ul li a.link_intro, .teaser-main-nav ul li span.link_intro{
  background-image: url(../images/common/nav/nav_intro.png);
}
.teaser-main-nav ul li a.link_story, .teaser-main-nav ul li span.link_story{
  background-image: url(../images/common/nav/nav_story.png);
}
.teaser-main-nav ul li a.link_character, .teaser-main-nav ul li span.link_character{
  background-image: url(../images/common/nav/nav_character.png);
}
.teaser-main-nav ul li a.link_music, .teaser-main-nav ul li span.link_music{
  background-image: url(../images/common/nav/nav_music.png);
}
.teaser-main-nav ul li a.link_caststaff, .teaser-main-nav ul li span.link_caststaff{
  background-image: url(../images/common/nav/nav_caststaff.png);
}
.teaser-main-nav ul li a.link_topics, .teaser-main-nav ul li span.link_topics{
  background-image: url(../images/common/nav/nav_topics.png);
}

@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;
  }
  .teaser-main-nav > ul > li > a > [class*=icon-], .teaser-main-nav > ul > li > span > [class*=icon-] {
    font-size: 40px;
  }
}
@media screen and (max-width: 992px) {
  .teaser-main-nav .row .col{
    width : -webkit-calc(100% / 3) ;
    width: calc(100% / 3) ;
    position: relative;
    padding: 0 2rem;
  }
  .teaser-main-nav .row .col:first-child{
    padding: 0 2rem 0 1rem;
  }
  .teaser-main-nav .row .col:last-child{
    padding: 0 1rem 0 2rem;
  }
}
@media screen and (min-width: 993px) {
}

/* @media only screen and (max-width: 992px) and (min-width: 601px){
  .ntv-wrapper{margin-bottom: 60px;}
}
@media only screen and (max-width: 600px){
  .ntv-wrapper{margin-bottom: 60px;}
} */

/* ---------------------------------
 banner
--------------------------------- */
#banner{
  margin-top: 40px;
}
#banner ul{
  width: 520px;
  margin: 0 auto;
}
#banner ul li{
  width: 100%; 
  font-size: 0;
  margin: 20px 0 0;
}
#banner ul li img{
  width: 100%;
}

@media screen and (max-width : 600px){
  #banner{
    margin-top: 5%;
  }
  #banner ul{
    width: 90%;
    flex-direction: column;
    align-items: center;
  }
  #banner ul li{
    width: 100%;
    margin: 0 auto;
  }
}

/* ---------------------------------
 最新情報
--------------------------------- */
/* #news{
  padding: 20px;
  display: flex;
  align-items: center;
}
#news .teaser-block-title-news{
  display: inline-block;
}
#news .teaser-block-title-news img{
  height: 50px;
}
#news .teaser-block-title-news .news_tit_sp{
  display: none;
}
#news .teaser-block-title-list{
  display: inline-block;
  margin-left: 20px;
  width: 100%;
}
#news .teaser-block-title-list a{
  display: block;
}
#news .teaser-block-title-list li{
  margin-top: 10px;
}
#news .teaser-block-title-list li:first-child{
  margin-top: 0;
  margin-bottom: 20px;
}
body{
  background: #fff;
}
#news .teaser-block-title-list .news-img{
  width: 110px;
  height: 80px;
  background: #b7b7b7;
  display: inline-block;
}
#news .teaser-block-title-list li.news0120-01 .news-img{
  background: url(../images/common/news/news_0120-01.png)no-repeat;
  background-size: contain;
}
#news .teaser-block-title-list li.news0120-02 .news-img{
  background: url(../images/common/news/news_0120-02.png)no-repeat;
  background-size: contain;
}
#news .teaser-block-title-list li.news0127-01 .news-img{
  background: url(../images/common/news/news_0127-01.png)no-repeat;
  background-size: contain;
}
#news .teaser-block-title-list li.news0127-02 .news-img{
  background: url(../images/common/news/news_0127-02.png)no-repeat;
  background-size: contain;
}
#news .teaser-block-title-list .news-right{
  display: inline-block;
  margin-left: 5px;
  vertical-align: top;
  width: 75%;
}
#news .teaser-block-title-list .news-right .news-right-day{
  color: #463e3d;
  margin-bottom: 2px;
  line-height: 1;
  font-size: 14px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
#news .teaser-block-title-list .news-right .news-right-day span.movie{
  color: #5973a7;
}
#news .teaser-block-title-list .news-right .news-right-day span.character{
  color: #bdab5f;
}
#news .teaser-block-title-list .news-right .news-right-day span.story{
  color: #e14c80;
}
#news .teaser-block-title-list .news-right .news-right-day span.cast-staff{
  color: #5ba3ad;
}
#news .teaser-block-title-list .news-right .news-right-day span.topics{
  color: #72c57f;
}
#news .teaser-block-title-list .news-right .news-right-text{
  text-decoration: underline;
  font-size: 15px;
  margin-bottom: 0;
  letter-spacing: 0.1rem;
  line-height: 2.2rem;
}
p{
  font-feature-settings: "palt";
  font-family: arial, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
}
@media screen and (max-width: 992px) {
  #news{
    flex-direction: column;
    padding: 30px 20px 0;
    align-items: flex-start;
  }
  #news .teaser-block-title-news{
    margin-bottom: 15px;
  }
  #news .teaser-block-title-news img{
    height: 26px;
    margin-bottom: 10px;
  }
  #news .teaser-block-title-list li{
    margin-top: 0;
  }
  #news .teaser-block-title-list{
    margin-left: 0;
  }
  #news .teaser-block-title-list .news-img{
    width: 100px;
  }
  #news .teaser-block-title-list .news-right{
    width: calc(100% - 120px);
    margin-left: 10px;
  }
  #news .teaser-block-title-news .news_tit_pc{
    display: none;
  }
  #news .teaser-block-title-news .news_tit_sp{
    display: block;
  }
} */

/* ---------------------------------
 イントロダクション
--------------------------------- */
#intro{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#intro::after{
  content: '';
  background-image: url(../images/common/bg_item_01.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 55.46%;
  position: absolute;
  bottom:-7%;
  left: 0;
  z-index: -1;
}
#intro .teaser-block-title{
  background-image: url(../images/top/tit_intro.png);
  width: 100%;
  padding-top: 13.86666%;
}
#intro .teaser-block-inner{
  background-image: url(../images/top/intro.png);
  width: 90%;
  margin: 16% auto;
  padding-top: 226.35%;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
#intro .teaser-block-inner .intro-text{
display: none;
}
@media screen and (min-width : 601px) and (max-width: 992px) {
  #intro .teaser-block-inner{
    width: 60%;
    padding-top: 151.12%;
  }
}
@media screen and (min-width: 993px) {
  #intro{
    margin-top: 100px;
  }
  #intro .teaser-block-title{
    padding-top: 83px;
  }
  #intro .teaser-block-inner{
    width: 80%;
    padding-top: 201.2%;
    margin: 70px auto;
  }
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 610px) {
}

/* ---------------------------------
 ストーリー
--------------------------------- */
#story_top{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#story_top::after{
  content: '';
  background-image: url(../images/common/bg_item_02.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 43.2%;
  position: absolute;
  bottom:-10%;
  right: 0;
  z-index: -1;
}
#story_top .teaser-block-title{
  background-image: url(../images/top/tit_story.png);
  width: 100%;
  padding-top: 14.2666%;
}
#story_top .teaser-block-inner{
  margin: 10% auto;
}
#story_top .story_item_header{
  /* background-image: url(../images/top/story/story_num.png);
  width: 100%;
  margin: 0 auto;
  padding-top: 55px;
  position: relative;
  text-align: left;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap; */
}
#story_top .story_item_header{
  font-size: 1.4rem;
}
#story_top .story_item_header span{
  font-size: 4rem;
  padding-right: 16px;
}
#story_top .story_item_header p {
  line-height: 1;
  padding-bottom: 16px;
  border-bottom:1px solid #fff;
  font-weight: 200;
  font-size: 1.4rem;
}
.teaser-contents #story_top .movie-player{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  margin: 8% auto 0;
}
.teaser-contents #story_top .movie-player iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#story_top .story_item_text{
  margin: 8% 0;
}
#story_top .story_btn {
  margin: 30px auto;
  width: 300px;
}
#story_top .story_channel{
  border-top:1px solid #fff;
}
#story_top .story_channel .story_channel_headding{
  background-image: url(../images/story/story_channel_headding.png);
  width: 100%;
  margin: 8% auto;
  padding-top: 4.2%;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
#story_top .story_channel .story_channel_list{
  width: 80%;
  margin: 0 auto;
}
#story_top .story_channel .story_channel_item-hulu{
  width: 100%;
  margin: 10px 0;
}
#story_top .story_channel .story_channel_item-hulu img{
  width: 100%;
}
@media screen and (min-width: 993px){
  #story_top{
    margin-top: 100px;
  }
  #story_top .teaser-block-title{
    padding-top: 86px;
  }
  #story_top .teaser-block-inner{
    margin: 60px 0;
  }
  #story_top .story_item_header span{
    font-size: 6rem;
  }
  .teaser-contents #story_top .movie-player{
    margin: 40px auto 0;
  }
  #story_top .story_item_text{
    margin: 30px 0 40px;
  }
  #story_top .story_btn {
    margin: 30px auto;
    width: 300px;
  }
  #story_top .story_channel .story_channel_headding{
    margin: 40px auto;
    padding-top: 20px;
  }
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 600px){
  #story_top .story_btn {
    width: 80%;
    margin: 8% auto;
  }
  #story_top .story_channel .story_channel_list{
    width: 100%;
  }
}

/* ---------------------------------
 音楽
--------------------------------- */
#music{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#music::after{
  content: '';
  background-image: url(../images/common/bg_item_04.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 48.66%;
  position: absolute;
  bottom:-14.5%;
  right: 0;
  z-index: -1;
}
#music .teaser-block-title{
  background-image: url(../images/top/tit_music.png);
  width: 100%;
  padding-top: 13.7333%;
}
#music .teaser-block-inner{
  margin: 10% 0;
}
#music .teaser-block-inner .music_item_image {
  width: 400px;
  margin: 0 auto;
}
#music .teaser-block-inner .music_item_info {
  text-align: center;
  margin-top: 20px;
}
#music .teaser-block-inner .music_item_info .music_title{
  font-size: 2.1rem;
  line-height: 1.5;
}
#music .teaser-block-inner .music_item_info .music_artist{
  font-size: 2.8rem;
  line-height: 1.5;
}
#music .teaser-block-inner .music_item_info .music_label{
  font-size: 1.4rem;
  line-height: 1.5;
}
#music .teaser-block-inner .music_textarea .music-list{
  margin-top: 20px;
}
#music .teaser-block-inner .music_textarea .music_comment_header{
  background: #fff;
  color: #333;
  padding: 0 0.5em;
  letter-spacing: 0.08em;
  display: inline-block;
}
#music .teaser-block-inner .music_textarea .music_comment_text{
  text-align: justify;
}
@media screen and (min-width: 993px){
  #music{
    margin-top: 100px;
  }
  #music .teaser-block-title{
    padding-top: 82px;
  }
  #music .teaser-block-inner{
    margin: 60px 0;
  }
}
@media screen and (max-width: 600px){
  #music .teaser-block-inner .music_item_image{
    width: 100%;
  }
  #music .teaser-block-inner .music_item_info .music_title{
    font-size: 3.8vw;
  }
  #music .teaser-block-inner .music_item_info .music_artist{
    font-size: 4.53vw;
  }
  #music .teaser-block-inner .music_item_info .music_label{
    font-size: 2.8vw;
  }
}

/* ---------------------------------
 キャスト
--------------------------------- */
#cast{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#cast::after{
  content: '';
  background-image: url(../images/common/bg_item_05.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 38.93%;
  position: absolute;
  bottom:-12%;
  left: 0;
  z-index: -1;
}
#cast .teaser-block-title{
  background-image: url(../images/top/tit_cast.png);
  width: 100%;
  padding-top: 13.6%;
}
#cast .teaser-block-inner{
  margin: 10% 0;
}
#cast .teaser-block-inner .teaser-block-inner-area{
  text-align: center;
}
#cast .teaser-block-inner ul li{
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 1.5em;
  color: #cccccc;
}
#cast .teaser-block-inner ul li span{
  font-size: 2.1rem;
  display: inline-block;
  color: #fff;
}
#cast .teaser-block-inner ul li span.cast_item{
  margin: 0 0.5em;
}
#cast .teaser-block-inner ul li span.cast_item:first-child{
  margin-left: 0;
}
#cast .teaser-block-inner ul li span.cast_item:last-child{
  margin-right: 0;
}
#cast .teaser-block-inner ul li span.ml5{
  margin-left: 0.5em !important;
}
#cast .teaser-block-inner ul li span.mr5{
  margin-right: 0.5em !important;
}
#cast .teaser-block-inner ul li:last-child{
  margin-bottom: 0;
}
@media screen and (min-width: 993px){
  #cast{
    margin-top: 100px;
  }
  #cast .teaser-block-title{
    padding-top: 82px;
  }
  #cast .teaser-block-inner{
    margin: 60px 0;
  }
}
@media screen and (max-width: 600px){
  #cast .teaser-block-inner ul li span{
    font-size: 3.12vw;
  }
}

/* ---------------------------------
 スタッフ
--------------------------------- */
#staff{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#staff::after{
  content: '';
  background-image: url(../images/common/bg_item_06.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 33.86%;
  position: absolute;
  bottom:-4%;
  right: 0;
  z-index: -1;
}
#staff .teaser-block-title{
  background-image: url(../images/top/tit_staff.png);
  width: 100%;
  padding-top: 13.6%;
}
#staff .teaser-block-inner{
  margin: 10% 0;
}
#staff .teaser-block-inner .staff-list{
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}
#staff .teaser-block-inner .staff-list .staff-list-item{
  width: 50%;
  margin-bottom: 24px;
}
#staff .teaser-block-inner .staff-list p{
  margin-bottom: 0;
}
#staff .teaser-block-inner .staff-list .staff-list-role{
  font-size: 1.2rem;
  text-align: left;
  color: #cccccc;
  margin-bottom: 0.5em;
  letter-spacing: 0.03em;
}
#staff .teaser-block-inner .staff-list .staff-list-name p{
  font-family: "Hiragino Mincho ProN", "MS PMincho", "Noto Serif JP", "YuMincho", "Yu Mincho", serif;
  transform: scaleY(.95);
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
#staff .teaser-block-inner .staff-list .staff-list-name p span{
  font-size: 1rem;
  letter-spacing: 0.08em;
}
#staff .teaser-block-inner .copyright{
  font-size: 1rem;
  text-align: center;
  color: #cccccc;
}
@media screen and (min-width: 993px){
  #staff{
    margin-top: 100px;
  }
  #staff .teaser-block-title{
    padding-top: 82px;
  }
  #staff .teaser-block-inner{
    margin: 60px 0;
  }
}
@media screen and (max-width : 600px){
  #staff .teaser-block-inner .staff-list{
    margin: 0 auto;
    justify-content: space-between;
  }
  #staff .teaser-block-inner .staff-list .staff-list-item{
    width: 47%;
  }
  #staff .teaser-block-inner .staff-list .staff-list-item{
    margin-bottom: 6%;
  }
  #staff .teaser-block-inner .staff-list .staff-list-role{
    font-size: 1rem;;
  }
  #staff .teaser-block-inner .staff-list .staff-list-name p{
    font-size: 3.12vw;
  }
}
@media screen and (min-width : 601px){
}
@media screen and (max-width: 992px){
}

/* ---------------------------------
 SNS
--------------------------------- */
#sns{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#sns::after{
  content: '';
  background-image: url(../images/common/bg_item_08.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 30.4%;
  position: absolute;
  bottom:-4%;
  right: 0;
  z-index: -1;
}
#sns .teaser-block-title{
  background-image: url(../images/top/tit_sns.png);
  width: 100%;
  padding-top: 12.1333%;
}
#sns .teaser-block-inner{
  margin: 0 auto;
}
@media screen and (min-width: 993px){
  #sns{
    margin-top: 100px;
  }
  #sns .teaser-block-title{
    padding-top: 73px;
  }
}

/* タイムライン */
.teaser-contents .twitter-area{
  height: 416px;
  background-color: #fff;
  margin-top: 60px;
}
@media screen and (min-width: 993px){
  .teaser-contents .twitter-area{
    margin-top: 60px;
  }
}
@media screen and (max-width: 992px) {
}

/* ボタン */
#sns #teaser-sns{
  /* margin: 6% 0 10%; */
  margin: 6% 0 0;
}
#sns .official-sns-area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  border-top: none;
}
#sns .official-sns-area .teaser-btn{
  display: inline-block;
  margin: 0 10px;
}
#sns .official-sns-area .teaser-btn a{
  width: 100%;
  position: relative;
  padding: 1.2em 0;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 36px;
  text-align: center;
  font-size: 0;
  background-color: #040c0f;
  border: 1px solid #fff;
}
#sns .official-sns-area .teaser-btn a::before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#sns .official-sns-area .teaser-btn a:hover{
  transition: 0.2s;
}
#sns .official-sns-area .teaser-btn#btn-follow-twitter a::before{
  background: url(../images/common/sns/sns_twitter.svg) no-repeat center center;
  background-size: contain;
  left: 52%;
}
#sns .official-sns-area .teaser-btn#btn-follow-instagram a::before{
  background: url(../images/common/sns/sns_instagram.svg) no-repeat center center;
  background-size: contain;
}
#sns .official-sns-area .teaser-btn#btn-follow-line a::before{
  background: url(../images/common/sns/sns_line.svg) no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 993px){
  #sns #teaser-sns{
    /* margin: 30px 0 60px; */
    margin: 30px 0 0;
  }
}
/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */
#topics{
  margin-top: 16%;
  position: relative;
  z-index: 20;
}
#topics .teaser-block-title{
  background-image: url(../images/top/tit_topics.png);
  width: 100%;
  padding-top: 14.1333%;
}
#topics .teaser-block-inner{
  margin: 10% 0;
  position: relative;
  z-index: 20;
}
#topics .teaser-block-inner::after{
  content: '';
  background-image: url(../images/common/bg_item_07.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 44.53%;
  position: absolute;
  bottom:-6%;
  left: 0;
  z-index: -1;
}
#topics.drama-area{
  padding: 0;
  margin: 0;
}
#topics .drama-box-title{display: none;}

/* ボタン */
#topics .topics-btn a {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
  position: relative;
  background: transparent;
  padding: 1.3em 0 1.2em;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 1.8em;
}
#topics .topics-btn i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: middle;
}
#topics .topics-area{
  background: none;
}
@media screen and (min-width: 993px){
  #topics{
    margin-top: 100px;
  }
  #topics .teaser-block-title{
    padding-top: 86px;
  }
  #topics .teaser-block-inner{
    margin: 60px 0;
  }
  #topics .topics-btn a{
    width: 400px;
  }
}

@media screen and (max-width: 992px) {
}

/* リスト */
@media screen and (min-width: 993px) {

  #topics .topics-item {
    width: 49%;
    border: 1px solid #666666;
  }
  #topics .topics-item:not(:first-child){
    border: 1px solid #666666;
  }
  #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%;
  }

#topics .topics-item{
  width: 49%;
}
#topics .topics-item:nth-of-type(2n) {
  margin-left: 2%;
}

}