@charset "UTF-8";

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

 Layout

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

.ntv-wrapper{
  background: #ffffff;
}
.teaser-main-mainImg{
  position: relative;
  margin-bottom: 30px;
}
.teaser-main-mainImg::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.teaser-main-mainImg img {
  display: block;
  width: 100%;
  position: relative;
}

.teaser-contents{
  box-sizing: border-box;
  font-size: 1.6rem;
  padding: 0 20px;
  margin-bottom: 70px;
}
.teaser-contents a:hover{
  transition: opacity .5s;
	text-decoration:none;
	opacity:0.65;
  filter: blur(.5px);
}

/* ブロック */
.teaser-block{
  /* background: #fff; */
  color: #001D55;
  word-break: break-all;
  padding-top: 140px;
}

/* ブロックタイトル */
.teaser-block-title{
  margin: 0 auto;
}
.teaser-block-title img{
  width: 100%;
  position: relative;
  z-index: 1;
}
.teaser-block-inner{
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

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

/* ブロック内ボタン */
.teaser-block-btn{
  width: 50%;
  margin: 0 auto;
}
.teaser-block-btn a{
  display: block;
  background: #001D55;
  color: #fff;
  text-align: center;
  padding: 15px;
}

/* 改行 */
.teaser-block .br-pc{
  display: block;
}
.teaser-block .br-sp{
  display: none;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width : 600px){

  .teaser-main-mainImg::before{
    top: 5px;
    left: 5px;
    width: 60px;
    height: 60px;
  }
  .teaser-contents{
    font-size: 1.4rem;
    padding: 0 15px;
    margin-bottom: 50px;
  }

  /* ブロック */
  .teaser-block{
    padding-top: 70px;
  }
  .teaser-block-inner{
    margin-top: 30px;
  }
  /* ブロック内テキスト */
  .teaser-block p{
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  /* ブロック内ボタン */
  .teaser-block-btn {
    width: 80%;
  }
  .teaser-block-btn a{
    padding: 10px;
  }

  /* 改行 */
  .teaser-block .br-pc{
    display: none;
  }
  .teaser-block .br-sp{
    display: block;
  }

}

/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width : 601px){
  .teaser-main-mainImg::before{
    top: 10px;
    left: 10px;
  }
}

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

  /* ブロック */
  .teaser-block{
    
  }
  .teaser-block-inner{

  }
  /* ブロックタイトル */
  .teaser-block-title{

  }
}

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

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


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

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

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

/* ---------------------------------
 放送文言
--------------------------------- */
.teaser-main-onair{
  background-color: #0047B2;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 5px 20px 35px;
  margin-top: 20px;
  margin-bottom: 0;
  position: relative;
  font-size: 1.8rem;
}
.teaser-main-onair::before{
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url(../images/nami-top-blue.svg) repeat-x;
  background-position: 0 0;
  -webkit-animation: waveAnime 82s linear infinite;
  animation: waveAnime 82s linear infinite;
}
.teaser-main-onair img{
  display: block;
  width: 73.49%;
  margin: 0 auto;
  vertical-align: bottom;
}

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

  .teaser-main-onair{
    padding: 5px 20px 30px;
    font-size: 1.6rem;
  }
  .teaser-main-onair img{
    width: 100%;
    max-width: 517px;
  }
}

/* ---------------------------------
 メニュー設定
--------------------------------- */
.teaser-main-nav{
  width: 100%;
  position: relative;
  background: #54C3F1;
  margin-bottom: 20px;
}
.teaser-main-nav::before{
  content: "";
  position: absolute;
  top: -19px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url(../images/nami-top-skyblue.svg) repeat-x;
  background-position: 0 0;
  -webkit-animation:  waveAnime 78s linear infinite;
  animation: waveAnime 78s linear infinite;
}
.teaser-main-nav::after{
  content: "";
  position: absolute;
  bottom: -19px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url(../images/nami-bottom-skyblue.svg) repeat-x;
  background-position: 0 0;
  -webkit-animation: waveAnime 74s linear infinite;
  animation: waveAnime 74s linear infinite;
}
@-webkit-keyframes waveAnime {
  0% {
      background-position: 0 0;
  }
  50% {
      background-position: -100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes waveAnime {
  0% {
    background-position: 0 0;
}
50% {
    background-position: -100% 0;
}
100% {
  background-position: 0 0;
}
}
.teaser-main-nav ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}
.teaser-main-nav ul li{
  width: 24%;
  margin: 15px 0.5%;
  position: relative;
}
.teaser-main-nav ul li::after{
  position: absolute;
  content: "";
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  display: inline-block;
  background: url(../images/maru.svg) no-repeat;
  background-size: cover;
  width: 8px;
  height: 8px;
}
/* グレーアウト */
.teaser-main-nav ul li.nav-movie{
  pointer-events: none;
  opacity: .5;
}

.teaser-main-nav ul li:nth-child(4n)::after,
.teaser-main-nav ul li:last-child::after{
  content: none;
}
.teaser-main-nav ul li a{
  display: inline-block;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}
.teaser-main-nav ul li img{
  display: inline-block;
  width: auto;
  height: 22px;
  margin: 0 auto;
  vertical-align: middle;
}
.teaser-main-nav ul li.nav-intro img{
  height: 48px;
}
.teaser-main-nav ul li.nav-sns img{
  height: 20px;
}

.teaser-main-nav ul li a:hover::before{
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
  border: 1px solid #CEEEF7;
  border-radius: 50%;
  opacity: 0;
  animation-name: circleanime;
  animation-duration: .3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
}
.teaser-main-nav ul li a:hover{
  transform: rotate(15deg);
}


@media screen and (max-width : 600px){
  .teaser-main-nav{
    margin-top: 5px;
  }
  .teaser-main-nav ul li::after{
    width: 4px;
    height: 4px;
  }
  .teaser-main-nav ul li img{
    height: 14px;
  }
  .teaser-main-nav ul li.nav-intro img{
    height: 32px;
  }
  .teaser-main-nav ul li.nav-sns img{
    height: 12px;
  }
  .teaser-main-nav ul li a:hover{
    transform: rotate(0);
  }
}

/* ---------------------------------
 バナー
--------------------------------- */
.teaser-banner-area{
  width: 100%;
  margin-top: 20px;
}
.teaser-banner-area ul li{
  line-height: 0;
  margin-bottom: 10px;
}
.teaser-banner-area ul li:last-child{
  margin-bottom: 0;
}
.teaser-banner-area ul li a{
  display: block;
}
.teaser-banner-area ul li a img{
  display: inline-block;
  width: 100%;
}

/* 2つ並び バナー */
.teaser-banner-area-2column{
  width: 100%;
  margin-top: 70px;
  display: inline-block;
}
.teaser-banner-area-2column ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.teaser-banner-area-2column ul li{
  width: 49%;
  text-align: center;
  margin-right: 2%;
  margin-bottom: 10px;
}
.teaser-banner-area-2column ul li:nth-child(2n),
.teaser-banner-area-2column ul li:last-child{
  margin-right: 0;
}
.teaser-banner-area-2column ul li img{
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
}

.teaser-banner-area-2column ul li .movie-banner-text{
  font-weight: bold;
  font-size: 1.4rem;
}
.teaser-banner-area-2column ul li .movie-banner-text::before,
.teaser-banner-area-2column ul li .movie-banner-text::after{
  display: inline-block;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #000;
}
.teaser-banner-area-2column ul li .movie-banner-text::before{
  transform:rotate(60deg);
}
.teaser-banner-area-2column ul li .movie-banner-text::after{
  transform:rotate(300deg);
}

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

  .teaser-banner-area-2column ul li{
    margin-bottom: 6px;
  }
  .teaser-banner-area-2column ul li .movie-banner-text{
    font-size: 1.2rem;
  }
  .teaser-banner-area-2column ul li .movie-banner-text::before,
  .teaser-banner-area-2column ul li .movie-banner-text::after{
    width: 16px;
    height: 1px;
  }
  .teaser-banner-area-2column{
    margin-top: 50px;
  }
  
}

.teaser-block .teaser-block-title::before,
.teaser-block .teaser-block-title::after,
.teaser-block .teaser-block-title span::before,
.teaser-block .teaser-block-title span::after{
  position: absolute;
  content: "";
  transition: 1.6s;
  transform: translateY(50px);
}
.teaser-block .teaser-block-title.active::before,
.teaser-block .teaser-block-title.active::after,
.teaser-block .teaser-block-title.active span::before,
.teaser-block .teaser-block-title.active span::after{
  transform: translateY(0);
}

/* ---------------------------------
 イントロダクション
--------------------------------- */
#intro.teaser-block .teaser-block-title{
  width: 57.15%;
  position: relative;
}
#intro.teaser-block .teaser-block-title::before{
  top: 20%;
  left: -36%;
  background: url(../images/intro_bg-01.svg) no-repeat;
  background-size: cover;
  width: 194px;
  height: 131px;
}
#intro.teaser-block .teaser-block-title::after{
  top: 45%;
  left: 20%;
  background: url(../images/intro_bg-02.svg) no-repeat;
  background-size: cover;
  width: 52px;
  height: 36px;
}
#intro.teaser-block .teaser-block-title span::before{
  top: 80%;
  left: 25%;
  background: url(../images/intro_bg-03.svg) no-repeat;
  background-size: cover;
  width: 95px;
  height: 75px;
}
#intro.teaser-block .teaser-block-title span::after{
  top: -65%;
  left: 63%;
  background: url(../images/intro_bg-04.svg) no-repeat;
  background-size: cover;
  width: 277px;
  height: 146px;
}

#intro.teaser-block .intro_text img{
  display: block;
  width: 100%;
  margin: 0 auto;
}
#intro.teaser-block p.to{
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  line-height: 0;
  margin-bottom: 0;
}

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

  #intro.teaser-block{
    padding-top: 80px;
  }
  #intro.teaser-block .teaser-block-title{
    width: 70.93%;
  }
  #intro.teaser-block .teaser-block-title::before{
    left: -40%;
    width: calc(194px * 0.7);
    height: calc(131px * 0.7);
  }
  #intro.teaser-block .teaser-block-title::after{
    width: calc(52px * 0.7);
    height: calc(36px * 0.7);
  }
  #intro.teaser-block .teaser-block-title span::before{
    width: calc(95px * 0.7);
    height: calc(75px * 0.7);
  }
  #intro.teaser-block .teaser-block-title span::after{
    width: calc(277px * 0.7);
    height: calc(146px * 0.7);
  }

}

/* ---------------------------------
 公式動画
--------------------------------- */
#movie.teaser-block .teaser-block-title{
  width: 28.76%;
  position: relative;
}
#movie.teaser-block .teaser-block-title::before{
  top: -70%;
  left: -70%;
  background: url(../images/movie_bg-01.svg) no-repeat;
  background-size: cover;
  width: 200px;
  height: 115px;
}
#movie.teaser-block .teaser-block-title::after{
  top: -15%;
  left: 75%;
  background: url(../images/movie_bg-02.svg) no-repeat;
  background-size: cover;
  width: 164px;
  height: 122px;
}
.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 screen and (max-width : 600px){

  #movie.teaser-block .teaser-block-title{
    width: 38.2%;
  }
  #movie.teaser-block .teaser-block-title::before{
    width: calc(200px * 0.7);
    height: calc(115px * 0.7);
  }
  #movie.teaser-block .teaser-block-title::after{
    width: calc(164px * 0.7);
    height: calc(122px * 0.7);
  }

}

/* ---------------------------------
 登場人物
--------------------------------- */
#character.teaser-block .teaser-block-title{
  width: 28.614%;
  position: relative;
}
#character.teaser-block .teaser-block-title::before{
  top: -50%;
  left: -70%;
  background: url(../images/character_bg-01.svg) no-repeat;
  background-size: cover;
  width: 170px;
  height: 108px;
}
#character.teaser-block .teaser-block-title::after{
  top: 40%;
  left: 10%;
  background: url(../images/character_bg-02.svg) no-repeat;
  background-size: cover;
  width: 76px;
  height: 66px;
}
#character.teaser-block .teaser-block-title span::before{
  top: 5%;
  left: 85%;
  background: url(../images/character_bg-03.svg) no-repeat;
  background-size: cover;
  width: 168px;
  height: 116px;
}

#character.teaser-block .character-box{
  padding: 60px 30px 30px;
  margin: 100px auto;
  position: relative;
}
#character.teaser-block .character-box:last-child{
  margin-bottom: 0;
}
#character.teaser-block .character-box .img_masanori{
  position: absolute;
  width: 15.36%;
  right: 2%;
  bottom: 0;
  filter: drop-shadow(2px 2px 4px #C7C7C7);
  animation: poyoyonAnime 4s infinite;
}
#character.teaser-block .character-box .img_taktashi{
  position: absolute;
  width: 9.78%;
  right: 6%;
  bottom: 3%;
  filter: drop-shadow(2px 2px 4px #C7C7C7);
  animation: poyoyonAnime 4s infinite;
}
@keyframes poyoyonAnime {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
 
#character.teaser-block .character-box .koi02{
  position: absolute;
  width: 27.10%;
}
#character.teaser-block .character-box h4{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36.14%;
}
#character.teaser-block .character-box h4 img{
  width: 100%;
}

#character.teaser-block .character-box .character-box-itemL li,
#character.teaser-block .character-box .character-box-itemS li{
  background: #fff;
}
/* character-box-itemL */
#character.teaser-block .character-box .character-box-itemL li{
  width: 100%;
  padding: 25px;
  border-radius: 2px;
}

/* adult & youth */
#character.teaser-block .character-box .character-box-itemL li img{
  width: 100%;
  border-radius: 2px;
}
#character.teaser-block .character-box .character-box-itemL li .text .name{
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 0;
}
#character.teaser-block .character-box .character-box-itemL li .text .furigana{
  font-size: 14px;
}
#character.teaser-block .character-box .character-box-itemL li .text .actor{
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.4;
}
#character.teaser-block .character-box .character-box-itemL li .text .actor span{
  font-size: 14px;
}

/* adult */
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  position: relative;
}
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom-width: 0;
}
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult .img{
  width: 45%;
  margin-right: 5%;
}
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult .text{
  width: 50%;
}

/* youth */
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth .youth-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 50%;
}
#character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth .youth-inner .img{
  width: 50%;
  margin-right: 5%;
}
#character.teaser-block .character-box .character-box-itemL li  .character-box-itemL-youth .youth-inner .text{
  width: 45%;
}
#character.teaser-block .character-box .character-box-itemL li  .character-box-itemL-youth .text .era{
  display: inline-block;
  background: #001D55;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  padding: 5px 10px;
  margin-bottom: 5px;
}

/* img J対応 */
#character.teaser-block .character-box li{
  position: relative;
}
#character.teaser-block .character-box li::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 100%;
}

/* character-box-itemS */
#character.teaser-block .character-box .character-box-itemS{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border-radius: 2px;
}
#character.teaser-block .character-box .character-box-itemS li{
  width: 32%;
  position: relative;
  margin-top: 12px;
  margin-right: 2%;
}
#character.teaser-block .character-box .character-box-itemS li:nth-child(3n),
#character.teaser-block .character-box .character-box-itemS li:last-child{
  margin-right: 0;
}
#character.teaser-block .character-box li .character-box-itemS-innner{
  padding: 25px 25px 15px;
}
#character.teaser-block .character-box .character-box-itemS li .role{
  width: 70px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
#character.teaser-block .character-box .character-box-itemS li .role span{
  width: 90%;
  position: absolute;
  top: 14%;
  left: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
#character.teaser-block .character-box .character-box-itemS li img{
  width: 100%;
  border-radius: 2px;
}

#character.teaser-block .character-box .character-box-itemS li .text .name-area{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#character.teaser-block .character-box .character-box-itemS li .text p{
  margin-bottom: 0;
}
#character.teaser-block .character-box .character-box-itemS li .text .name-area .name{
  font-size: 20px;
  font-weight: bold;
}
#character.teaser-block .character-box .character-box-itemS li .text .name-area .furigana{
  font-size: 12px;
}
#character.teaser-block .character-box .character-box-itemS li .text .actor{
  font-size: 16px;
}

#character.teaser-block .character-box .character-box-itemS li .text .actor span{
  font-size: 12px;
}


/* 長谷川家 */
#character.teaser-block #hasegawa-family.character-box{
  background-color: #E6F3FA;
}
#character.teaser-block #hasegawa-family.character-box .koi02{
  right: 5%;
  bottom: 2%;
}
#character.teaser-block .character-box .koi02 img{
  width: 100%;
}
#character.teaser-block #hasegawa-family.character-box .character-box-itemL li .character-box-itemL-adult{
  border-bottom-color: #0088CE;
  position: relative;
}
#character.teaser-block #hasegawa-family.character-box .character-box-itemL li .character-box-itemL-adult::after{
  position: absolute;

}
#character.teaser-block #hasegawa-family.character-box .character-box-itemS{
  justify-content: flex-start;
}
#character.teaser-block #hasegawa-family.character-box .character-box-itemS li .role{
  background: url(../images/character_hasegawa-role-bg.svg) no-repeat;
  background-size: cover;
}
#character.teaser-block #hasegawa-family.character-box .character-box-itemL li .text .name,
#character.teaser-block #hasegawa-family.character-box .character-box-itemL li .text .furigana,
#character.teaser-block #hasegawa-family.character-box .character-box-itemS li .text .name-area .name,
#character.teaser-block #hasegawa-family.character-box .character-box-itemS li .text .name-area .furigana{
  color: #0088CE;
}

/* 渡辺家 */
#character.teaser-block #watanabe-family.character-box{
  background-color: #FDEFE9;
}
#character.teaser-block #watanabe-family.character-box .koi02{
  left: 18%;
  bottom: 2%;
}
#character.teaser-block #watanabe-family.character-box .character-box-itemL li .character-box-itemL-adult{
  border-bottom-color: #EC733B;
  position: relative;
}
#character.teaser-block #watanabe-family.character-box .character-box-itemS{
  justify-content: flex-end;
}
#character.teaser-block #watanabe-family.character-box .character-box-itemS li .role{
  background: url(../images/character_watanabe-role-bg.svg) no-repeat;
  background-size: cover;
}
#character.teaser-block #watanabe-family.character-box .character-box-itemL li .text .name,
#character.teaser-block #watanabe-family.character-box .character-box-itemL li .text .furigana,
#character.teaser-block #watanabe-family.character-box .character-box-itemS li .text .name-area .name,
#character.teaser-block #watanabe-family.character-box .character-box-itemS li .text .name-area .furigana{
  color: #EC733B;
}

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

  #character.teaser-block .teaser-block-title{
    width: 37.86%;
  }
  #character.teaser-block .teaser-block-title::before{
    width: calc(170px * 0.7);
    height: calc(108px * 0.7);
  }
  #character.teaser-block .teaser-block-title::after{
    width: calc(76px * 0.7);
    height: calc(66px * 0.7);
  }
  #character.teaser-block .teaser-block-title span::before{
    width: calc(168px * 0.7);
    height:calc( 116px * 0.7);
  }
  #character.teaser-block .character-box h4{
    width: 50%;
  }

  #character.teaser-block .character-box{
    padding: 40px 15px 15px;
    margin: 60px auto;
  }
  #character.teaser-block #watanabe-family.character-box{
    padding-bottom: 70%;
  }
  #character.teaser-block .character-box .img_masanori{
    width: 29.56%;
    right: 0%;
    bottom: 8%;
  }
  #character.teaser-block .character-box .img_taktashi{
    width: 18.84%;
    right: 8%;
    bottom: 12%;
  }
  #character.teaser-block .character-box .koi02{
    width: 42%;
  }
  #character.teaser-block #hasegawa-family.character-box .koi02{
    bottom: 1%;
  }
  #character.teaser-block #watanabe-family.character-box .koi02{
    left: 50%;
    bottom: 1%;
    transform: translate(-50%,0);
  }

  /* character-box-itemL */
  #character.teaser-block .character-box .character-box-itemL li{
  padding: 15px 15px 10px;
  }
    /* character-box-itemL */
    /* adult & youth */
  #character.teaser-block .character-box .character-box-itemL li .text .name{
    font-size: 22px;
  }
  #character.teaser-block .character-box .character-box-itemL li .text .furigana{
    font-size: 12px;
  }
  #character.teaser-block .character-box .character-box-itemL li .text .actor{
    font-size: 16px;
  }
  #character.teaser-block .character-box .character-box-itemL li .text .actor span{
    font-size: 12px;
    margin-left: .5em;
  }

  /* adult */
  #character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult .img{
    width: 100%;
    margin-right: 0;
  }
  #character.teaser-block .character-box .character-box-itemL li .character-box-itemL-adult .text{
    width: 100%;
  }

  /* youth */
  #character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth .youth-inner{
    width: 100%;
    margin-bottom: 15px;
  }
  #character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth .youth-inner:last-child{
    margin-bottom: 0;
  }
  #character.teaser-block .character-box .character-box-itemL li .character-box-itemL-youth .youth-inner .img{
    width: 45%;
  }
  #character.teaser-block .character-box .character-box-itemL li  .character-box-itemL-youth .youth-inner .text{
    width: 50%;
  }

    
  /* character-box-itemS */
  #character.teaser-block .character-box .character-box-itemS li{
    width: 48%;
    margin-right: 4%;
  }
  #character.teaser-block .character-box .character-box-itemS li:nth-child(3n){
    margin-right: 4%;
  }
  #character.teaser-block .character-box .character-box-itemS li:nth-child(2n){
    margin-right: 0;
  }
  #character.teaser-block .character-box li .character-box-itemS-innner{
    padding: 15px 15px 10px;
  }
  #character.teaser-block .character-box .character-box-itemS li .role{
    width: 60px;
    height: 51.43px;
  }
  #character.teaser-block .character-box .character-box-itemS li .role span{
    width: 80%;
  }
  #character.teaser-block .character-box .character-box-itemS li .text .name-area .name{
    font-size: 16px;
  }
  #character.teaser-block .character-box .character-box-itemS li .text .name-area .furigana{
    font-size: 10px;
  }
  #character.teaser-block .character-box .character-box-itemS li .text .actor{
    font-size: 14px;
  }

  #character.teaser-block .character-box .character-box-itemS li .text .actor span{
    font-size: 10px;
  }
  

}


/* ---------------------------------
 コメント
--------------------------------- */
#comment.teaser-block .teaser-block-title{
  width: 25.30%;
  position: relative;
}
#comment.teaser-block .teaser-block-title::before{
  top: 20%;
  left: -56%;
  background: url(../images/comment_bg-01.svg) no-repeat;
  background-size: cover;
  width: 114px;
  height: 80px;
}
#comment.teaser-block .teaser-block-title::after{
  top: 60%;
  left: 20%;
  background: url(../images/comment_bg-02.svg) no-repeat;
  background-size: cover;
  width: 38px;
  height: 20px;
}
#comment.teaser-block .teaser-block-title span::before{
  top: 70%;
  left: 50%;
  background: url(../images/comment_bg-03.svg) no-repeat;
  background-size: cover;
  width: 63px;
  height: 28px;
}
#comment.teaser-block .teaser-block-title span::after{
  top: -65%;
  left: 85%;
  background: url(../images/comment_bg-04.svg) no-repeat;
  background-size: cover;
  width: 140px;
  height: 128px;
}
#comment.teaser-block .comment-list .comment-list-item{
  padding-bottom: 30px;
  border-bottom: 1px dashed #C1C1C1;
  margin-bottom: 30px;
}
#comment.teaser-block .comment-list .comment-list-item:last-child{
  border-bottom: none;
  margin-bottom: 0;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-img{
  margin-right: 40px;
  width: 120px;
  position: relative;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-img::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 100%;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-img img{
  width: 100%;
  filter: drop-shadow(2px 2px 4px #C7C7C7);
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-img::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(0, -50%);
  display: block;
  width: 20px;
  height: 45px;
  filter: drop-shadow(2px 2px 4px #C7C7C7);
}
#comment.teaser-block .comment-list .comment-hasegawa.comment-list-item .comment-item-img::after{
  background: url(../images/comment_fukidashi_blue.png) no-repeat;
  background-size: cover;
}
#comment.teaser-block .comment-list .comment-watanabe.comment-list-item .comment-item-img::after{
  background: url(../images/comment_fukidashi_red.png) no-repeat;
  background-size: cover;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-role{
  font-size: 2.0rem;
  margin-right: .5em;
  display: inline-block;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-name{
  font-size: 2.4rem;
  display: inline-block;
  font-weight: bold;
}
#comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-role span,
#comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-name span{
  font-size: 1.6rem;
  font-weight: normal;
}
#comment.teaser-block .comment-list .comment-hasegawa.comment-list-item .comment-item-title .comment-item-role{
  color: #54C3F1;
}
#comment.teaser-block .comment-list .comment-hasegawa.comment-list-item .comment-item-title .comment-item-name{
  color: #0088CE;
}
#comment.teaser-block .comment-list .comment-watanabe.comment-list-item .comment-item-title .comment-item-role{
  color: #F8A23D;
}
#comment.teaser-block .comment-list .comment-watanabe.comment-list-item .comment-item-title .comment-item-name{
  color: #EC733B;
}
#comment.teaser-block .comment-list .comment-other.comment-list-item .comment-item-title .comment-item-role{
  color: #396DBC;
}
#comment.teaser-block .comment-list .comment-other.comment-list-item .comment-item-title .comment-item-name{
  color: #0047B2;
}

#comment.teaser-block .comment-list .comment-list-item .comment-list-flex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}


#comment.teaser-block .comment-list p{
  margin-bottom: 0;
}

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

  #comment.teaser-block .teaser-block-title{
    width: 33.6%;
  }
  #comment.teaser-block .teaser-block-title::before{
    width: calc(114px * 0.7);
    height: calc(80px * 0.7);
  }
  #comment.teaser-block .teaser-block-title::after{
    width: calc(38px * 0.7);
    height: calc(20px * 0.7);
  }
  #comment.teaser-block .teaser-block-title span::before{
    width: calc(63px * 0.7);
    height: calc(28px * 0.7);
  }
  #comment.teaser-block .teaser-block-title span::after{
    width: calc(140px * 0.7);
    height: calc(128px * 0.7);
  }
  #comment.teaser-block .comment-list .comment-list-item .comment-item-img{
    width: 100px;
  }
  #comment.teaser-block .comment-list .comment-list-item .comment-list-flex{
    margin-bottom: 10px;
  }
  #comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-role{
    font-size: 1.4rem;
    display: block;
  }
  #comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-name{
    font-size: 1.8rem;
    display: block;
  }
  #comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-role span,
  #comment.teaser-block .comment-list .comment-list-item .comment-item-title .comment-item-name span{
    font-size: 1.2rem;
  }

}



/* ---------------------------------
 キャスト
--------------------------------- */
#cast.teaser-block .teaser-block-title{
  width: 24.02%;
  position: relative;
}
#cast.teaser-block .teaser-block-title::before{
  top: -80%;
  left: -113%;
  background: url(../images/cast_bg-01.svg) no-repeat;
  background-size: cover;
  width: 215px;
  height: 157px;
}
#cast.teaser-block .teaser-block-title::after{
  top: 30%;
  left: 110%;
  background: url(../images/cast_bg-02.svg) no-repeat;
  background-size: cover;
  width: 200px;
  height: 115px;
}
#cast.teaser-block .cast-list-flex{
  display: flex;
  flex-wrap: wrap;
}
#cast.teaser-block .cast-list{
  width: 50%;
}
#cast.teaser-block .cast-list:nth-child(1){
 padding-right: 2%;
}
#cast.teaser-block .cast-list:nth-child(2){
  padding-left: 2%;
 }
#cast.teaser-block .cast-list .cast-list-title p{
  color: #0047B2;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid #cfedfb;
  margin-bottom: 30px;
}
#cast.teaser-block .cast-list .cast-list-item{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  margin-bottom: 20px;
}
#cast.teaser-block .cast-list .cast-list-item:last-child{
  margin-bottom: 0;
}
#cast.teaser-block .cast-list p{
  margin-bottom: 0;
}
#cast.teaser-block .cast-list .cast-list-role{
  width: 45%;
  text-align: right;
  font-size: 1.4rem;
  color: #0047B2;
  line-height: 1.5;
  padding-right: 3%;
  position: relative;
}
#cast.teaser-block .cast-list .cast-list-name{
  width: 55%;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 10px;
}
#cast.teaser-block .cast-list .cast-list-role span,
#cast.teaser-block .cast-list .cast-list-name span{
  font-weight: normal;
  font-size: 1.2rem;
}
#cast.teaser-block .cast-list .cast-list-name img{
  width: 80px;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -1px;
}


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

  #cast.teaser-block .teaser-block-title{
    width: 29.86%;
  }
  #cast.teaser-block .cast-list .cast-list-title p{
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
  #cast.teaser-block .cast-list .cast-list-item{
    margin-bottom: 10px;
  }
  #cast.teaser-block .cast-list .cast-list-role{
    font-size: 1.1rem;
    padding-top: 0.3em;
    padding-right: 5%;
  }
  #cast.teaser-block .cast-list .cast-list-role::after{
    top: 12px;
    width: 4px;
    height: 4px;
  }
  #cast.teaser-block .cast-list .cast-list-name{
    font-size: 1.4rem;
  }
  #cast.teaser-block .cast-list .cast-list-role span,
  #cast.teaser-block .cast-list .cast-list-name span{
    font-size: 1.0rem;
  }
  #cast.teaser-block .cast-list .cast-list-name img{
    width: 60px;
  }
  #cast.teaser-block .teaser-block-title::before{
    width: calc(215px * 0.7);
    height: calc(157px * 0.7);
  }
  #cast.teaser-block .teaser-block-title::after{
    width: calc(200px * 0.7);
    height: calc(115px * 0.7);
  }

}
  
/* ---------------------------------
 トピックス
--------------------------------- */
#topics.teaser-block .teaser-block-title{
  width: 28.75%;
  position: relative;
}
#topics.teaser-block .teaser-block-title::before{
  top: -55%;
  left: -70%;
  background: url(../images/topics_bg-01.svg) no-repeat;
  background-size: cover;
  width: 164px;
  height: 122px;
}
#topics.teaser-block .teaser-block-title::after{
  top: 70%;
  left: 20%;
  background: url(../images/topics_bg-02.svg) no-repeat;
  background-size: cover;
  width: 58px;
  height: 50px;
}
#topics.teaser-block .teaser-block-title span::before{
  top: -20%;
  left: 72%;
  background: url(../images/topics_bg-03.svg) no-repeat;
  background-size: cover;
  width: 184px;
  height: 111px;
}

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

  #topics.teaser-block .teaser-block-title{
    width: 38.13%;
  }
  #topics.teaser-block .teaser-block-title::before{
    width: calc(164px * 0.7);
    height: calc(122px * 0.7);
  }
  #topics.teaser-block .teaser-block-title::after{
    width: calc(58px * 0.7);
    height: calc(50px * 0.7);
  }
  #topics.teaser-block .teaser-block-title span::before{
    width: calc(184px * 0.7);
    height: calc(111px * 0.7);
  }

}

/* ---------------------------------
 スタッフ
--------------------------------- */
#staff.teaser-block .teaser-block-title{
  width: 24.02%;
  position: relative;
}
#staff.teaser-block .teaser-block-title::before{
  top: 10%;
  left: -60%;
  background: url(../images/staff_bg-01.svg) no-repeat;
  background-size: cover;
  width: 160px;
  height: 92px;
}
#staff.teaser-block .teaser-block-title::after{
  top: 100%;
  left: 45%;
  background: url(../images/staff_bg-02.svg) no-repeat;
  background-size: cover;
  width: 54px;
  height: 42px;
}
#staff.teaser-block .teaser-block-title span::before{
  top: -64%;
  left: 62%;
  background: url(../images/staff_bg-03.svg) no-repeat;
  background-size: cover;
  width: 262px;
  height: 140px;
}

#staff.teaser-block h4{
  color: #0047B2;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid #cfedfb;
  margin-top: 70px;
  margin-bottom: 30px;
}

#staff.teaser-block .staff-list{
  display: flex;
  flex-wrap: wrap;
}
#staff.teaser-block .staff-list .staff-list-item{
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  margin-bottom: 15px;
  letter-spacing: -0.06em;
}
#staff.teaser-block .staff-list .staff-list-item:last-child{
  margin-bottom: 0;
}
#staff.teaser-block .staff-list p{
  margin-bottom: 0;
}
#staff.teaser-block .staff-list .staff-list-role{
  width: 60%;
  text-align: right;
  font-size: 1.4rem;
  color: #0047B2;
  padding-right: 3%;
}
#staff.teaser-block .staff-list .staff-list-name{
  width: 40%;
  padding-left: 3%;
}
#staff.teaser-block .staff-list .staff-list-name p{
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 10px;
}
#staff.teaser-block .staff-list .staff-list-name p span{
  font-weight: normal;
  font-size: 1.2rem;
}
#staff.teaser-block .staff-list .staff-list-name img{
  width: 80px;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -1px;
}

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

  #staff.teaser-block .teaser-block-title{
    width:29.86%;
  }

#staff.teaser-block h4{
  font-size: 1.6rem;
  margin-top: 50px;
  margin-bottom: 20px;
}
  #staff.teaser-block .staff-list .staff-list-item{
    margin-bottom: 10px;
  }

  #staff.teaser-block .staff-list .staff-list-role{
    width: 55%;
    font-size: 1.0rem;
    padding-right: 2%;
  }
  #staff.teaser-block .staff-list .staff-list-role::after{
    top: 10px;
    width: 4px;
    height: 4px;
  }
  #staff.teaser-block .staff-list .staff-list-name{
    width: 45%;
    padding-left: 2%;
  }
  #staff.teaser-block .staff-list .staff-list-name p{
    font-size: 1.2rem;
  }
  #staff.teaser-block .staff-list .staff-list-name p span{
    font-size: 1.0rem;
  }
  #staff.teaser-block .staff-list .staff-list-name img{
    width: 60px;
  }
  #staff.teaser-block .teaser-block-title::before{
    width: calc(160px * 0.7);
    height: calc(92px * 0.7);
  }
  #staff.teaser-block .teaser-block-title::after{
    width: calc(54px * 0.7);
    height: calc(42px * 0.7);
  }
  #staff.teaser-block .teaser-block-title span::before{
    width: calc(262px * 0.7);
    height: calc(140px * 0.7);
  }

}

/* ---------------------------------
 SNS
--------------------------------- */
#twitter.teaser-block .teaser-block-title{
  width: 17.99%;
  position: relative;
}
#twitter.teaser-block .teaser-block-title::before{
  top: -20%;
  left: -240%;
  background: url(../images/sns_bg-01.svg) no-repeat;
  background-size: cover;
  width: 360px;
  height: 210px;
}
#twitter.teaser-block .teaser-block-title::after{
  top: 20%;
  left: 140%;
  background: url(../images/sns_bg-02.svg) no-repeat;
  background-size: cover;
  width: 114px;
  height: 75px;
}
#twitter.teaser-block .teaser-block-title span::before{
  top: 485%;
  left: 160%;
  background: url(../images/sns_bg-03.svg) no-repeat;
  background-size: cover;
  width: 215px;
  height: 157px;
}

/* タイムライン */
.teaser-contents .twitter-area{
  background: #fff;
  border: 1px solid #E6ECF0;
  border-radius: 2px;
  padding: 20px;
}

/* ボタン */
#twitter.teaser-block .teaser-banner-area-2column{
  margin-top: 30px;
}

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

  #twitter.teaser-block .teaser-block-title{
    width: 22.4%;
  }
  #twitter.teaser-block .teaser-banner-area{
    margin-top: 15px;
  }
  #twitter.teaser-block .teaser-block-title::before{
    width: calc(360px * 0.7);
    height: calc(210px * 0.7);
  }
  #twitter.teaser-block .teaser-block-title::after{
    width: calc(114px * 0.7);
    height: calc(75px * 0.7);
  }
  #twitter.teaser-block .teaser-block-title span::before{
    top: 715%;
    width: calc(215px * 0.7);
    height: calc(157px * 0.7);
  }

}

/* ---------------------------------
 あらすじ
--------------------------------- */
#story.teaser-block .teaser-block-title{
  width: 24.24%;
  position: relative;
}
#story.teaser-block .teaser-block-title::before{
  top: -40%;
  left: -80%;
  background: url(../images/story/story_bg-01.svg) no-repeat;
  background-size: cover;
  width: 146px;
  height: 100px;
}
#story.teaser-block .teaser-block-title::after{
  top: 36%;
  left: 14%;
  background: url(../images/story/story_bg-02.svg) no-repeat;
  background-size: cover;
  width: 63px;
  height: 63px;
}
#story.teaser-block .teaser-block-title span::before{
  top: 0%;
  left: 82%;
  background: url(../images/story/story_bg-03.svg) no-repeat;
  background-size: cover;
  width: 163px;
  height: 108px;
}

/* タブ */
.tabBox{
  margin-top: 60px;
  margin-bottom: 60px;
}
.tabBox .tabArea {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.tabBox .tabArea .one_tab {
  width: 24.5%;
  transition-duration: 0.3s;
  cursor: pointer;
  position: relative;
}
.tabBox .tabArea .one_tab:hover {
  opacity: 0.65;
}
.tabBox .tabArea .one_tab .tab_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  transition-duration: 0.3s;
  font-size: 20px;
  color: #fff;
  border-radius: 5px;
}
.tabBox .tabArea .one_tab:nth-child(1) .tab_inner {
  background-color: #54C3F1;
}
.tabBox .tabArea .one_tab:nth-child(2) .tab_inner {
  background-color: #00A9E4;
}
.tabBox .tabArea .one_tab:nth-child(3) .tab_inner {
  background-color: #018BD4;
}
.tabBox .tabArea .one_tab:nth-child(4) .tab_inner {
  background-color: #0063B1;
}
.tabBox .tabArea .one_tab.select::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 20px solid transparent;
}
.tabBox .tabArea.tabArea-top .one_tab.select::before {
  top: 99%;
  border-top-width: 16px;
  border-top-style: solid;
}
.tabBox .tabArea.tabArea-top .one_tab.select:nth-child(1)::before {
  border-top-color: #54C3F1;
}
.tabBox .tabArea.tabArea-top .one_tab.select:nth-child(2)::before {
  border-top-color:#00A9E4;
}
.tabBox .tabArea.tabArea-top .one_tab.select:nth-child(3)::before {
  border-top-color: #018BD4;
}
.tabBox .tabArea.tabArea-top .one_tab.select:nth-child(4)::before {
  border-top-color: #0063B1;
}
.tabBox .tabArea.bottom {
  align-items: flex-start;
}
.tabBox .tabArea.tabArea-bottom .one_tab.select::before {
  bottom: 100%;
  border-bottom-width: 16px;
  border-bottom-style: solid;
}
.tabBox .tabArea.tabArea-bottom .one_tab.select:nth-child(1)::before {
  border-bottom-color: #54C3F1;
}
.tabBox .tabArea.tabArea-bottom .one_tab.select:nth-child(2)::before {
  border-bottom-color: #00A9E4;
}
.tabBox .tabArea.tabArea-bottom .one_tab.select:nth-child(3)::before {
  border-bottom-color: #018BD4;
}
.tabBox .tabArea.tabArea-bottom .one_tab.select:nth-child(4)::before {
  border-bottom-color: #0063B1;
}
.tab_contents .tab_main {
  display: none;
}
.tab_main.is_show {
  display: block;
}

#story.teaser-block .story_item{
  position: relative;
  padding-bottom: 30px;
  border-bottom: 1px dashed #C1C1C1;
  margin-bottom: 30px;
}
#story.teaser-block .story_item:last-child{
  border-bottom: none;
}
#story.teaser-block .story_item .story_no{
  width: 120px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
#story.teaser-block #tab_main01 .story_item .story_no{
  background: url(../images/story/story_no_bg01.svg) no-repeat;
  background-size: cover;
}
#story.teaser-block #tab_main02 .story_item .story_no{
  background: url(../images/story/story_no_bg02.svg) no-repeat;
  background-size: cover;
}
#story.teaser-block #tab_main03 .story_item .story_no{
  background: url(../images/story/story_no_bg03.svg) no-repeat;
  background-size: cover;
}
#story.teaser-block #tab_main04 .story_item .story_no{
  background: url(../images/story/story_no_bg04.svg) no-repeat;
  background-size: cover;
}


#story.teaser-block .story_item .story_no span{
  width: 80%;
  position: absolute;
  top: 15%;
  left: 0;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
#story.teaser-block .story_item .story_title{
  padding-top: 15px;
  padding-left: 140px;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: bold;
}
#story.teaser-block .story_item .story_date{
  padding-left: 140px;
  font-size: 16px;
}
#story.teaser-block .story_item .story_list_textbox{
  margin-top: 30px;
}

#story.teaser-block .story_item .story_list_textbox figure{
  float: left;
  width: 45%;
  margin-right: 5%;
  position: relative;
}
#story.teaser-block .story_item .story_list_textbox figure::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 100%;
}
#story.teaser-block .story_item .story_list_textbox figure img{
  width: 100%;
}
#story.teaser-block .story_item .story_list_textbox p{
  text-indent: 1em;
}
#story.teaser-block .teaser-banner-area-2column{
  margin-top: 0;
}



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

  #story.teaser-block .teaser-block-title{
    width: 30.05%;
  }
  #story.teaser-block .teaser-block-title::before{
    width: calc(146px * 0.7);
    height: calc(100px * 0.7);
  }
  #story.teaser-block .teaser-block-title::after{
    width: calc(63px * 0.7);
    height: calc(63px * 0.7);
  }
  #story.teaser-block .teaser-block-title span::before{
    width: calc(163px * 0.7);
    height: calc(108px * 0.7);
  }
  .tabBox{
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .tabBox .tabArea .one_tab:hover {
    opacity: 1;
  }
  .tabBox .tabArea .one_tab .tab_inner {
    padding: 5px;
    font-size: 14px;
  }
  .tabBox .tabArea .one_tab.select::before {
    border: 12px solid transparent;
  }
  .tabBox .tabArea.tabArea-top .one_tab.select::before {
    border-top-width: 10px;
  }
  .tabBox .tabArea.tabArea-bottom .one_tab.select::before {
    border-bottom-width: 10px;
  }
  #story.teaser-block .story_item .story_no{
    width: 84px;
    height: 70px;
  }
  #story.teaser-block .story_item .story_no span{
    top: 10%;
    font-size: 20px;
  }
  #story.teaser-block .story_item .story_title{
    padding-top: 10px;
    padding-left: 99px;
    font-size: 16px;
  }
  #story.teaser-block .story_item .story_date{
    padding-left: 99px;
    font-size: 14px;
  }
  #story.teaser-block .story_item .story_list_textbox figure{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  

}

/* ---------------------------------
 音楽
--------------------------------- */
#music.teaser-block .teaser-block-title{
  width: 16.11%;
  position: relative;
}
#music.teaser-block .teaser-block-title::before{
  top: -70%;
  left: -170%;
  background: url(../images/music/music_bg-01.svg) no-repeat;
  background-size: cover;
  width: 200px;
  height: 115px;
}
#music.teaser-block .teaser-block-title::after{
  top: -15%;
  left: 95%;
  background: url(../images/music/music_bg-02.svg) no-repeat;
  background-size: cover;
  width: 164px;
  height: 122px;
}
#music.teaser-block .music-text{
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
#music.teaser-block .music-text span{
  color: #eb611f;
}
#music.teaser-block .img-jacket{
  width: 60%;
  margin: 0 auto;
}
#music.teaser-block .img-jacket img{
  width: 100%;
}

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

  #music.teaser-block .teaser-block-title{
    width: 20.53%;
  }
  #music.teaser-block .teaser-block-title::before{
    width: calc(200px * 0.7);
    height: calc(115px * 0.7);
  }
  #music.teaser-block .teaser-block-title::after{
    width: calc(164px * 0.7);
    height: calc(122px * 0.7);
  }
  #music.teaser-block .music-text{
    font-size: 14px;
  }
  #music.teaser-block .img-jacket{
    width: 100%;
  }

}


/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */

#topics.drama-area{
  padding: 0;
  margin: 0;
  background-color: #ffffff;
}
#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%;
  }

}