@charset "UTF-8";

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

 Layout

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

.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
.teaser-main-onair img{
  width: 100%;
}
.teaser-contents {
  box-sizing: border-box;
  font-size: 1.6rem;
}
.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
  text-decoration:none;
  opacity:0.65;
}
.teaser-main-nav img,
.teaser-contents img {
  width: 100%;
}

/* ブロック */
.teaser-block{
  color: #fff;
}
.teaser-block-inner{
  padding: 10px;
}
/* ブロック内テキスト */
.teaser-block-title {
  padding-bottom: 10px;
}
.teaser-main-onair{
  font-size: 0;
}
/* ブロック内テキスト */
.teaser-block p{
  color: #fff;
  line-height: 1.86;
  font-size: 1.6rem;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
  
  /* ブロック */
  .teaser-block{
    margin-top: 40px;
  }
  /* ブロック内テキスト */
  .teaser-block-title {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 600px){
  .teaser-block p{
    font-size: 1.4rem;
  }
}

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

  /* ブロック */
  .teaser-block{
    margin-top: 60px;
  }
  .teaser-block-inner{
    padding: 20px;
  }
  .teaser-contents {
    margin-top: 20px;
  }
  .bglight {
    background: url(../images/header_bg.png) no-repeat;
    background-position: center;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 517px;
    top: 0;
  }
  .ntv-globalHeader {
    z-index: 1;
  }
  .ntv-contentsWrap {
    position: relative;
  }
}

/* ---------------------------------
 メニュー
--------------------------------- */
.teaser-main-nav {
  font-size: 0;
}
.teaser-main-nav ul{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.teaser-main-nav ul li{
  width: 25%;
}

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

}

@media screen and (min-width: 993px) {
  .teaser-main-nav ul li a:hover{
    opacity:0.65;
  }

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

}
@media only screen and (max-width: 600px){
  .ntv-wrapper{margin-bottom: 0;}
  .teaser-main-nav ul{
    margin-top: 15px;
  }

}

/* ---------------------------------
 バナー
--------------------------------- */
.teaser-banner-area{
  width: 100%;
}
.teaser-banner-area ul li{
  margin: 10px 10px 20px;
  line-height: 0;
}
.teaser-banner-area ul li:last-of-type {
  margin: 10px;
}
.teaser-banner-area ul li a img{
  width: 100%;
}
.teaser-banner-area ul li .attention_goods {
  margin: 0 auto 10px;
  width: 550px;
}
.page-bottom {
  padding-bottom: 30px;
}
@media screen and (min-width: 993px) {
  .teaser-banner-area ul li{
    margin: 10px 0 30px;
  }
  .teaser-banner-area ul li:last-of-type {
    margin: 10px 0;
  }
}
@media only screen and (max-width: 600px){
  .teaser-banner-area ul li .attention_goods {
    width: 90%;
  }
}
/* ---------------------------------
 ファンミーティング
--------------------------------- */
#fanmeeting {
  margin-top: 0;
}
#fanmeeting .attention {
  width: 361px;
  margin: 0 auto;
}
#fanmeeting .attention_last {
  width: 361px;
  margin: 30px auto 0;
}
#fanmeeting .fanm_sp{
  display: none;
}
@media only screen and (max-width: 600px){
  #fanmeeting .attention,
  #fanmeeting .attention_last {
    width: 60%;
  }
  #fanmeeting .fanm_pc{
    display: none;
  }
  #fanmeeting .fanm_sp{
    display: block;
  }
}

/* ---------------------------------
 SNS
--------------------------------- */
#sns h3 {
  width: 355px;
  margin: 0 auto;
} 
/* タイムライン */
.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{
  background-color: #1da1f2;
  padding: 1em 0;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
  width: 300px;
  margin: 0 auto;
  border-radius: 5px;
  border: 3px solid #fff;
  font-size: 1.6rem;
}

@media only screen and (max-width: 600px){
  #sns h3 {
    max-width: 100%;
    width: calc(355px * 0.489);
  }
}
/* ---------------------------------
 MOVIE
--------------------------------- */
#movie h3 {
  width: 444px;
  margin: 0 auto;
}
.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%;
}

@media only screen and (max-width: 600px){
  #movie h3 {
    max-width: 100%;
    width: calc(444px * 0.489);
  }
}
/* ---------------------------------
 INTRODUCTION
--------------------------------- */
#introduction h3 {
  width: 673px;
  margin: 0 auto;
}
#introduction .teaser-block-inner .intro-text {
  text-align: center;
}
#introduction .teaser-block-inner .intro-text .yellow {
  color: #ffff00;
}
#introduction .teaser-block-inner .intro-text .pink {
  color: #f60dff;
}
#introduction .teaser-block-inner .intro-text .blue {
  color: #00deff;
}

@media only screen and (max-width: 600px){
  #introduction h3 {
    max-width: 100%;
    width: calc(673px * 0.489);
  }
}

/* ---------------------------------
 STORY
--------------------------------- */
#story h3 {
  width: 430px;
  margin: 0 auto;
}
#story .teaser-block-inner .story-img {
  display: block;
  padding-top: 66.666%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#story .teaser-block-inner .story-img:last-of-type {
  margin-top: 20px;
}
#story .teaser-block-inner .story-box h4 {
  font-size: 2rem;
  padding: 20px 0 10px;
}
#story .teaser-block-inner .story-box h4:after {
  background-color: #00deff;
  border-radius: 2.5px;
  content: "";
  display: block;
  height: 5px;
  margin-top: 5px;
}
#story .teaser-block-inner.story-page {
  margin: 0 auto 30px;
}
#story .teaser-block-inner.story-page .story-box {
  margin-bottom: 80px;
  position: relative;
}
#story .teaser-block-inner.story-page .story-box:last-of-type {
  margin-bottom: 0;
}
#story .teaser-block-inner.story-page .story-box:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fff;
}
#story .teaser-block-inner.story-page .story-box:last-of-type:after {
  display: none;
}

@media only screen and (max-width: 600px){
  #story h3 {
    max-width: 100%;
    width: calc(430px * 0.489);
  }
}

/* ---------------------------------
 CAST
--------------------------------- */
#cast h3 {
  width: 395px;
  margin: 0 auto;
}
#cast .teaser-block-inner {
  text-align: center;
}
#cast .teaser-block-inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#cast .teaser-block-inner ul li {
  width:25%;
  margin-bottom: 25px;
}

/*　キャスト写真　*/
#cast .teaser-block-inner ul li .cast01 {
  background: url(../images/cast_sekai.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast02 {
  background: url(../images/cast_sato.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast03 {
  background: url(../images/cast_sawamoto.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast04 {
  background: url(../images/cast_seguchi.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast05 {
  background: url(../images/cast_hori.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast06 {
  background: url(../images/cast_kimura.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast07 {
  background: url(../images/cast_yagi.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner ul li .cast08 {
  background: url(../images/cast_nakajima.png);
  background-size: contain;
  padding-top: 100%;
}
#cast .teaser-block-inner .cast09 {
  background: url(../images/cast_mizuno.png);
  background-size: contain;
  padding-top: 25%;
  width:25%;
  margin: auto;
}

#cast .teaser-block-inner .role {
  font-size: 1.8rem;
  font-weight: bold;
}

@media only screen and (max-width: 600px){
  #cast h3 {
    max-width: 100%;
    width: calc(395px * 0.489);
  }
  #cast .teaser-block-inner .role {
    font-size: 1.6rem;
  }
  #cast .teaser-block-inner .role span {
    display: inline-block;
  }
  #cast .teaser-block-inner ul li {
    width:50%;
  }
  #cast .teaser-block-inner .cast09 {
    width:50%;
    padding-top: 50%;
  }
}

/* ---------------------------------
 ONAIR
--------------------------------- */
#onair h3 {
  width: 432px;
  margin: 0 auto;
}
#onair h4 {
  color: #ffff00;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}
#onair .teaser-block-inner {
  text-align: center;
}
#onair .teaser-block-inner dl {
  margin-bottom: 45px;
  position: relative;
}
#onair .teaser-block-inner dl:last-of-type {
  margin-bottom: 20px;
}
#onair .teaser-block-inner dl dt {
  font-size: 1.8rem;
  font-weight: bold;
}
#onair .teaser-block-inner dl dd:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fff;
}
#onair .teaser-block-inner dl:last-of-type dd:after {
  display: none;
}
#onair .teaser-block-inner ul li {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 5px;
}
#onair .teaser-block-inner ul li:last-of-type {
  margin-bottom: 20px;
}
#onair .teaser-block-inner .note {
  font-size: 1.4rem;
}
#onair .teaser-block-inner .note_n {
  margin-bottom: 45px;
}

@media only screen and (max-width: 600px){
  #onair h3 {
    max-width: 100%;
    width: calc(432px * 0.489);
  }
  #onair h4,
  #onair .teaser-block-inner dl dt,
  #onair .teaser-block-inner ul li {
    font-size: 1.6rem;
  }
  #onair .teaser-block-inner dl dd {
    font-size: 1.4rem;;
  }
}

/* ---------------------------------
 STAFF
--------------------------------- */
#staff h3 {
  width: 417px;
  margin: 0 auto;
}
#staff .teaser-block-inner {
  text-align: center;
}
#staff .teaser-block-inner dl {
  margin-bottom: 45px;
  position: relative;
}
#staff .teaser-block-inner dl dd {
  font-size: 1.8rem;
}
#staff .teaser-block-inner dl dd:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #fff;
}
#staff .teaser-block-inner dl:last-of-type dd:after {
  display: none;
}

@media only screen and (max-width: 600px){
  #staff h3 {
    max-width: 100%;
    width: calc(417px * 0.489);
  }
  #staff .teaser-block-inner dl dd span {
    display: inline-block;
  }
  #staff .teaser-block-inner dl dt {
    font-size: 1.4rem;
  }
  #staff .teaser-block-inner dl dd {
    font-size: 1.6rem;
  }
}

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