@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');

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

 Layout

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

.ntv-wrapper{
  background-color: #F9F5EB;
}
.teaser-main-mainImg img {
  display: block;
  width: 100%;
}
/* .teaser-main-mainImg a:hover{
opacity: 0.7;
} */

.teaser-main-onair{
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 10px;
}
.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-block{
  background: #fff;
  color: #222;
  word-break: break-all;
}
.teaser-block-inner{
  /* padding: 16px 10px; */
}

/* ブロックタイトル */
.teaser-block-title{
  /* font-size: 2rem;
  letter-spacing: 0.6px;
  color: #222; 
  font-weight: bold;
  line-height: 1.0;*/
  position: relative;
  text-align: center;
}

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

/*--------- メニュー ---------*/
.teaser-main-nav{
  width: 100%;
}
.teaser-main-nav .row{/*ul*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 15px 7px 15px 15px;
}
.teaser-main-nav .row .col{/*li*/
  margin-bottom: 10px;
  width: calc(100% / 4);
  padding: 0 8px 0 0;
}
.teaser-main-nav .row .col:nth-child( n + 5 ){
  margin-bottom: 0;
}

.teaser-main-nav .row .col a img{
  cursor: pointer;
  /* transition: all 1s linear 0s; */
  transition: all 2s ease;
}
.teaser-main-nav .row .col a img:hover{
  transform: rotateX(360deg);
}
.teaser-main-nav .row .col a{

}
.teaser-main-nav .row .col a img{
  width: 100%;
  display: block;
}

/*あらすじ　メニュークリック禁止*/
.teaser-main-nav .row .col-none {
  opacity: 0.5;
  pointer-events: none;
}
/*テキスト*/
.cl-y{
  color: #EBFF00;
}

   
/*メインビジュアル 見逃しあり*/
.teaser-main-mainImg{
  position: relative;
  /* margin-bottom: 60px; */
}




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

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .teaser-block-inner{
    padding: 0 20px;
  }


  /*メニュー*/
  .teaser-main-nav .row{/*ul*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 8px 3px 8px 8px;
  }
  .teaser-main-nav .row .col{/*li*/
    margin-bottom: 5px;
    width: calc(100% / 4);
    padding: 0 5px 0 0;
  }

  /*ノート背景　共通*/
  .bg-note{
    background-color: #E1E990;
    padding: 15px;
  }
  .bg-note .teaser-block-inner{
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px rgba(34, 34, 34, 0.25);
    border-radius: 5px;
  }
  .bk_gakuhu{
    background: url(../images/common/bg_gakuhu.png) repeat-y;
    padding-top: 32px;
    background-size: contain;
  }
  .bg-note h3{
    width: 65%;/*58*/
    padding: 32px 0 0 0;
    margin: 0 auto;
  }
  .bg-note h3 img{
    display: block;
    width: 100%;
  }

  /*黒板背景　共通*/
  .bg-blackboard{
    background: #1B6B36;
    box-sizing:border-box;
    border: 4px solid #7B6D28;
  }
  .bg-kazari{
    background: url(../images/common/bg_blackboard.png) top center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .bg-blackboard h3{
    padding: 40px 0 0 0;
    width: 80%;
    margin: 0 auto;
  }
  .bg-blackboard h3 img{
    display: block;
    width: 100%;
  }
  /*バナー3つ*/
  .teaser-banner-area-2column ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-top: 24px;
    column-gap: 5px;
  }
  .teaser-banner-area-2column ul li{
    width: 49%;
    text-align: center;
    /* margin-right: 5px; ボタン1つの時はmargin-rightカット*/
    margin-bottom: 10px;
  }
  .teaser-banner-area-2column ul li:nth-child(2n){
    margin-right: 0;
  }
  .teaser-banner-area-2column ul li:last-of-type{/*メニュー3つのとき*/
    /* margin-right: 0;
    margin-bottom: 0; */
  }

  .teaser-banner-area-2column ul li a{

  }
  .teaser-banner-area-2column ul li a img{
    width: 100%;
    display: block;
    border-radius: 100px;
  }

  /*---------------------
  公式動画
  ---------------------*/
  #movie{

  }
  #movie .teaser-block-inner{
    padding-bottom: 40px;
  }
  #movie h3{

  }
  #movie .movie-player{
  }
  #movie .teaser-banner-area-2column{

  }
  #movie  .moviemore-btn{/*ボタン*/
    /* margin: 25px auto 0px auto; */
    margin: 25px 10px 0px 10px;
  }
  #movie  .moviemore-btn a{
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    background: #DF3B14;
    color: #FFFFFF;
    letter-spacing: 0.03em;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }
  #movie hr{/*境界線*/
    height: 1px;
    background: #DF3B14;
    border: none;
    color: #DF3B14;
    margin-top: 32px;
    /* margin-bottom: 25px; */
  }



  /*---------------------
  イントロ
  ---------------------*/

  #intro{
    position: relative;

  }
  #intro .teaser-block-inner{
    
  }
  #intro h3{
    margin: 0 auto;
  }
  #intro .txt-block{
    padding-top: 24px;
  }
  #intro .txt-block:first-child{
    padding-top: 32px;
  }
  #intro .txt01{
    padding-top: 32px;
  }
  #intro .txt02{
    padding-top: 32px;
  }
  #intro .txt03{
    
  }
  #intro .txt04{
    padding-top: 32px;
  }
  #intro .txt05{
    padding-top: 32px;
  }
  #intro .txt06{
    padding-top: 32px;
    padding-bottom: 40px;
  }

  #intro .txt-block p{
    font-family:'M PLUS Rounded 1c',sans-serif;
    /* font-family: 'Hiragino Maru Gothic StdN','M PLUS Rounded 1c',sans-serif; */
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color:#fff;
  }

  #intro .txt01 p{
    font-size: 18px;
    font-weight: bold;
  }
  #intro .txt01 .line-pnk-01{
    background: url(../images/intro/under-line_pnk-01.png) no-repeat center bottom;
    background-size: contain;
    display: inline-block;
  }
  #intro .txt01 .line-pnk-02{
    background: url(../images/intro/under-line_pnk-02.png) no-repeat center bottom;
    background-size: contain;
    display: inline-block;
  }

  #intro .txt04 p .line-ble{
    background: url(../images/intro/under-line_blue.png) no-repeat left bottom;
    background-size: contain;
    background-size: 80% auto;
    display: inline-block;
  }
  #intro .txt04 p .line-y{
    background: url(../images/intro/under-line_yellow.png) no-repeat left bottom;
    background-size: contain;
    background-size: 80% auto;
    display: inline-block;
  }
  #intro .txt04 p .line-pnk-03{
    background: url(../images/intro/under-line_pnk-03.png) no-repeat left bottom;
    background-size: contain;
    display: inline-block;
  }

  #intro .txt06 p{
    width: 90%;
    margin: 0 auto;
  }
  #intro .txt06 p img{
    width: 100%;
    display: block;
  }
  #intro .txt06 p .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    width: 100%;
  }
  #intro .txt06 p .keyframe6{
    animation-name: poyopoyo;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }


  /*黒板消し*/
  #intro .item_kokuban{
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 18%;
  }
  #intro .item_kokuban img{
    display: block;
    width: 100%;
  }

  /*黒板消し　アニメーション*/
  #intro .item_kokuban .keyframe2{
    animation-name: anim_h;
  }
  .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    width: 18%;
  }
  @keyframes anim_h {
    0% {
      transform: translate(0px, 0);
    }
    100% {
      transform: translate(20px, 0);
    }
  }
  #intro .img-item_left img,
  #intro .img-item_right img{
    width: 100%;
    display: block;
  }
  #intro .img-item_left{
    position: absolute;
    width: 25%;
    top: 16%;
    left: 1%;

  }
  #intro .img-item_right{
    position: absolute;
    width: 23%;
    top: 17%;
    right: 3%;
  }



  /*---------------------
  あらすじ
  ---------------------*/

  /*---------------------
  登場人物
  ---------------------*/

  #cast{

  }
  #cast .teaser-block-inner{
    padding-bottom: 40px;
  }
  #cast .cast-list{
    margin: 0 auto;
  }

  #cast .cast-item{
    padding-top: 40px;
  }
  #cast .cast-item:first-child{
    padding-top: 0px;
  }
  #cast .cast-img img{
    display: block;
    width: 100%;
  }
  #cast .cast-img{
    width: 50%;
    margin: 0 auto;
  }

  #cast .cast-name{/*名前*/
    padding: 15px 0 15px 0px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 100%;
    text-align: center;
  }
  #cast .cast-name .name-s{/*文字小*/
    font-size: 12px;
  }
  #cast .cast-txt{/*人物紹介*/
    font-weight: 400;
    font-size: 14px;/*12*/
    letter-spacing: 0.03em;
    line-height: 160%;
    background: #A2DCE1;
    border-radius: 10px;
    padding: 15px;
  }
  #cast .cast-btn{/*ボタン*/
    margin: 15px 15px 0px 15px;
  }
  #cast .cast-btn a{
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    background: #42BBC6;
    color: #FFFFFF;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }

  #cast .cast02-list{/*写真なしキャスト　テキストリスト*/
    padding-top: 40px;
  }
  #cast .cast02-list .cast02-right{
    margin-top: 15px;
  }
  #cast .cast02-list .cast02-left{

  }
  #cast .cast02-list ul{
  }
  #cast .cast02-list ul li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
    letter-spacing: 0.1em;
    font-size: 16px;/*12*/
    margin-bottom: 15px;
  }
  #cast .cast02-list ul li .title{
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  #cast .cast02-list ul li .title p{
  }
  #cast .cast02-list ul li .text{
    margin-left: 10px;
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cast .cast02-list ul li .text p{
    font-weight: bold;
  }
  #cast .cast02-list .cast02-right ul li:last-of-type{
    margin-bottom: 0;
  }

  /*---------------------
  合唱曲
  ---------------------*/
  #song{

  }
  #song .teaser-block-inner{
  padding-bottom: 40px;
  }
  #song h3{

  }
  #song .song-block{
    border: solid #fff 2px;
    border-image-source: url(../images/song/waku_kadai.png);
    border-image-slice: 10 fill;
    border-image-width: 5px;
    /* border-image-outset: 10px; */
    border-image-repeat: round;
  }
  /*共通*/
  #song .song-kadai{/*課題曲*/
    padding: 32px 0 32px 0;
    margin-top: 32px;
  }
  #song .ttl-song{/*曲名*/
    padding-top: 25px;
  }
  #song .ttl-song p{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 140%;
    letter-spacing: 0.1em;
  }
  #song .ttl-song p span{
    font-size: 14px;
    font-weight: 500;
  }

  /*共通*/
  #song .song-kadai .kadai{/*課題曲タイトル*/

  }
  #song .song-kadai .kadai p{
    color: #FE9FDE;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
  }
  #song .song-kadai .kadai span{

  }
  #song .song-kadai .kadai span img,
  #song .song-jiyuu .jiyuu span img{
    display: block;
    width: 100%;
    vertical-align: middle;
  }

  #song .song-kadai .kadai .ttl-song a{

  }
  #song .song-kadai .btn-kashi{/*ボタン*/
    margin: 25px 20px 0 20px;  
  }
  #song .song-kadai .btn-kashi a{
    background: #DDED27;
    color: #017B0D;
    text-decoration: none;
    text-align: center;
    display: block;
    letter-spacing: 0.1em;
    font-size: 14px;
    font-weight: bold;
    border-radius: 100px;
    padding: 15px 0;

  }
  #song .jiyuu p{
    color: #6BE0FA;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
  }

  #song .song-jiyuu{/*自由曲*/
    padding: 32px 0 25px 0;
    margin-top: 15px;
  }
  #song .img_jiyuu{
    margin: 24px auto 0 auto;
    width: 87%;
  }
  #song .img_jiyuu img{
    display: block;
    width: 100%;
  }
  #song .jiyuu .ttl-song p{
    color: #ffff;
    font-size: 22px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-align: center;
  }
  #song .comment{
    padding: 25px 15px 0 15px;
  }
  #song .comment .ttl{
    color: #DDED27;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
  }
  #song .comment .txt{
    color: #ffff;
    padding-top: 8px;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.03em;
  }
  
  /*モーダル　歌詞*/
  .modal-kashi{
    padding: 32px 15px 32px 15px;
  }
  .modal-kashi .teaser-block-inner{
  }
  .teaser-block-inner .ttl-song p{
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .teaser-block-inner .subttl-song p{
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 15px;

  }
  .teaser-block-inner .txt-kashi p{/*歌詞ブロック*/
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 0.03em;
  }
  .teaser-block-inner .txt-kashi .block-kashi{
    padding-top: 15px;
  }
  .teaser-block-inner .txt-kashi .block-kashi:first-child{
    padding-top: 0px;
  }
  .teaser-block-inner .txt-kashi .block-copy{
    padding-top: 32px;
  }
  .teaser-block-inner .txt-kashi .block-copy p{
    font-size: 10px;
  }



  /*---------------------
  原作
  ---------------------*/

  #original{
    padding-bottom: 25px;
  }
  #original .teaser-block-inner{
    padding-bottom: 32px;
  }
  #original h3{

  }
  #original .img{
    width: 53%;
    margin: 0 auto;
    border: 1px solid #E7E7E7;
  }
  #original .img img{
    display: block;
    width: 100%;
  }
  #original .ttl{
    padding-top: 15px;
  }
  #original .ttl p{
    font-size: 12px;
    line-height: 140%;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: bold;
  }
  #original .ttl .fs-b{
    font-size: 16px;
  }
  #original .ttl .fs-s{
    font-size: 10px;
    font-weight: 500;
  }

  #original .txt{
    padding: 15px 10px 0 10px;

  }
  #original .txt p{
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.03em;
  }
  #original .btn{
    margin: 25px auto 0px auto;
  }
  #original .btn a{
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    background: #A2B504;
    color: #fff;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }
  #original .btn span{
    display: inline-block;
    margin-right: 10px;
  }
  #original .btn span img{
    vertical-align: middle;
  }
  #original hr{/*境界線*/
    height: 1px;
    background: #A2B504;
    border: none;
    color: #A2B504;
    margin-top: 32px;
    margin-bottom: 25px;
  }

  /*原作者コメント*/
  #original .comment{
    background: #CED979;
    border-radius: 10px;
    padding: 20px;
  }
  #original .comment .ttl{
    font-size: 14px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    color: #405503;
    padding-top: 0;
  }
  #original .comment .txt{
    font-weight: 500;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.03em;
    padding: 0;
    padding-top: 8px;
  }
  /*原作者プロフィール*/
  #original .profile{
    padding: 15px 10px 0 10px;
  }
  #original .profile .ttl{
    padding-top: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
  }
  #original .profile .txt{
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 0.03em;
    margin-top: 8px;
    padding: 0;
    font-weight: 500;
  }

  /*---------------------
  バナーエリア
  ---------------------*/
  .teaser-banner-area{
    padding: 25px 0px 0px 0px;
    background-color: #E1E990;
  }
  .bnr-end{
    padding: 25px 15px 25px 15px;
  }
  .teaser-banner-area ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
  }
  .teaser-banner-area ul li{
    width: 49%;
    text-align: center;
    /* margin-right: 5px; */
    }
  .teaser-banner-area ul li:nth-child(2n){
    margin-right: 0;
  }
  .teaser-banner-area ul li img{
    width: 100%;
    display: block;
    border-radius: 100px;
  }

  /*---------------------
  スタッフ
  ---------------------*/
  #staff{

  }
  #staff .teaser-block-inner{
    padding-bottom: 40px;
  }

  #staff .staff-list{
    
  }
  #staff .staff-list ul{
    
  }
  #staff .staff-list ul li{
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  #staff .staff-list ul li:last-of-type{
    margin-bottom: 0;
  }
  #staff .staff-list ul li .title{
    width: calc(50% - 15px);
    margin-right: 8px;
  }
  #staff .staff-list ul li .title p{
    text-align: right;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  #staff .staff-list ul li .text{
    width: calc(50% - 15px);
    margin-left: 8px;
  }
  #staff .staff-list ul li .text p{
    font-weight: bold;
    font-size: 12px !important;
    letter-spacing: 0.1em;
    color: #1B6B36;
  }

  #twitter .teaser-block-inner{
    padding: 0 20px 40px;
  }

/*---------------------
あらすじ（第二階層）
---------------------*/
#story{

}
#story .teaser-block-inner{
  padding-bottom: 40px;
}
#story .teaser-block-title{
  margin-bottom: 10px;
}
#story .story-block{
  /* padding: 0 15px; */
}


#story .story-block .story-ttl{/*タイトル*/
  display: flex;
  justify-content: space-between;
  background: rgba(225, 235, 129, 0.2);
  border-radius: 10px;
  padding: 5px 15px;
  align-items: center;/*第・週なしver*/
}
#story .story-block .story-ttl .bknb{/*バックナンバー*/
  /* width: 27.5%; */
  width: 9%;
}
#story .story-block .story-ttl .bknb-tver{/* Tver */
  width: 85%;
  padding: 4.3% 0;
}
#story .story-block .story-ttl .bknb img{/*バックナンバー*/
  display: block;
  width: 100%;
}
#story .story-block .story-ttl .week{

}
#story .story-block .story-ttl .week p{
  font-size: 12px;
  color: #405503;
  line-height: 1;/* 第・週なし 1.4 */
  text-align: right;
}
#story .story-block .story-ttl .nb{/*#00~#00*/
  font-size: 16px;
  font-weight: bold;
}
#story .story-block .story-ttl .day{/*2022.00.00~00.00放送*/

}
#story .story-block ul.img{/* 写真 */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 15px;

}
#story .story-block .img li{
  width: calc((100% - 10px * 1) / 2);
}

#story .story-block .img  li img{
  display: block;
  width: 100%;
}
#story .story-block .text{
  padding-top: 15px;
}
#story .story-block .text p{
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/*見どころ*/
#story .story-block .midokoro{
  position: relative;
  background-color: #CED979;
  border-radius: 10px;
  margin-top: 15px;
}
#story .story-block .midokoro .midokoro-inner{
  padding: 0 15px 25px 15px;
}
#story .story-block .midokoro .midokoro-ttl{/*見どころ　タイトル*/
  width: 51%;
  margin: 0 auto;
  padding-top: 32px;
}
/*テキスト*/
#story .story-block .midokoro .txt-show{
  padding-top: 15px;
}
#story .story-block .midokoro .txt-show .txt-show-p{
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  padding-top: 15px;
}

#story .story-block .midokoro .txt-show .txt-show-list{/*リストの場合*/
  padding-left: 1em;
  text-indent: -1em;
}
#story .story-block .midokoro .txt-show .txt-show-list li{
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #405503;
  font-weight: bold;
}
#story .story-block .text .fs-b{/*フォントサイズ　大*/
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  padding: 15px 0;
}


/*テキスト*/

#story .story-block .midokoro .midokoro-ttl img{
  display: block;
  width: 100%;
}
#story .story-block .midokoro .midokoro-kazari-l{/*マグネット　左*/
  position: absolute;
  top: 2.5%;
  left: 3%;
  width: 20px;
}
#story .story-block .midokoro .midokoro-kazari-r{/*マグネット　右*/
  position: absolute;
  top: 2.5%;
  right: 3%;
  width: 20px;
}
#story .story-block .midokoro .midokoro-kazari-r img,
#story .story-block .midokoro .midokoro-kazari-l img{
  width: 100%;
  display: block;
}
#story .txt-hide .txt-hide-block{
  padding-top: 15px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}


/*もっと見るボタン*/
#story .txt-hide{
  /* display: none; */
}
#story button.more {
letter-spacing: 0.1em;
font-size: 14px;
font-weight: bold;

width: 100%;
margin: 25px auto 0px auto;
display: block;
background-color: #A2B504;
color: #fff;
border-radius: 100px;
padding: 15px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}
#story button.more::after {
/* content: "もっと見る"; */
transition: .2s;
-erbkit-transition: .2s;
letter-spacing: 0.1em;
font-size: 14px;
font-weight: bold;
}
#story button.more.on-click::after{
/* content: "閉じる"; */
}

/*--------- もっと見るボタンアニメーション ---------*/
#story button.more{
  cursor: pointer;
}

/*もっと見るボタン*/
/*見どころ*/

#story .teaser-banner-area-2column{

}
#story .teaser-banner-area-2column ul{
  padding-top: 15px;

}
#story .teaser-banner-area-2column ul li{
  margin-bottom: 0;
}
#story .teaser-banner-area-2column ul li img{
width: 100%;
display: block;
}
#story hr{
  height: 1px;
  background: #A2B504;
  border: none;
  color: #A2B504;
  margin-top: 40px;
  margin-bottom: 40px;
}

/*---------------------
登場人物ページ（第二階層）
---------------------*/
#cast-group{

}
#cast-group .teaser-block-inner{
  position: relative;
  padding: 0 15px 32px;
}
#cast-group .class-name{/*花山高校 3年C組*/
  padding-top: 32px;
  width: 60%;
  margin: 0 auto;
}
#cast-group .class-name p{
  text-align: center;
  color: #fff;
 font-size: 14px;
 font-weight: bold;
 letter-spacing: 0.03em;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#cast-group .class-name p span{

}
#cast-group .class-name p span img{
  display: block;
  width: 100%;
}

/*生徒　写真リスト*/
#cast-group .cast-group-list{
  padding-top: 25px;
}
#cast-group .cast-group-list ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 6px;/*横*/
  row-gap: 10px;/*縦*/
}
#cast-group .cast-group-list li{
  width: 18%;
}
#cast-group .cast-group-list li a{
}
#cast-group .cast-group-list li img{
  width: 100%;
  display: block;
}
/*写真リスト*/

#cast-group .desk-block{/*教卓*/
  border: solid #fff 2px;
  border-image-source: url(../images/song/waku_kadai.png);
  border-image-slice: 10 fill;
  border-image-width: 5px;
  /* border-image-outset: 10px; */
  border-image-repeat: round;
  width: 60%;
  margin: 25px auto 0 auto;
}
#cast-group .desk-block p{
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
  letter-spacing: 0.3em;
}

/*先生・両親　写真リスト*/
#cast-group .cast-group-list02{
}
#cast-group .cast-group-list02 ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;/*横*/
  row-gap: 15px;/*縦*/
}
#cast-group .cast-group-list02 li{
  width: 18%;
}
#cast-group .cast-group-list02 li a{
}
#cast-group .cast-group-list02 li img{
  width: 100%;
  display: block;
}
/*写真リスト*/

/*マグネット*/
#cast-group .kazari {
  position: absolute;
  width: 4.5%;
}
#cast-group .kazari img{
  display: block;
  width: 100%;
}
.mag-o{
  top: 4%;
  left: 5%;
}
.mag-b{
  right: 9%;
  top: 65%;
}
.mag-g{
  left: 5%;
  top: 70%;
}
.mag-r{
  right: 5%;
  top: 94%;
}
/*マグネット*/

#cast-group .cast-group-list02 .teater{/*先生*/
  padding-top: 25px;
}
#cast-group .cast-parent{/*両親*/
  margin-top: 32px;
}
#cast-group .cast-parent .cast-group-list02 ul{
  padding: 32px 0;
}
#cast-group .cast-parent .line_yellow{
  width: 100%;
}
#cast-group .cast-parent .line_yellow img{
  display: block;
  width: 100%;
}
#cast-group .teaser-banner-area-2column ul{
  padding-top: 32px;
}

/*キャストモーダル*/
.modal-cast{
  padding: 32px 20px;
  position: relative;
}
.modal-cast .bk_gakuhu{
  padding-top: 0;
}
.modal-cast .part-tag{/*パート*/
  position: absolute;
  top: 32px;
  left: 0%;
  width: 27%;
}
.modal-cast .part-tag img{
  display: block;
  width: 100%;
}
.modal-cast .cast-img img{
  display: block;
  width: 100%;
}
.modal-cast .cast-img{
  width: 40%;
  margin: 0 auto;
}
.modal-cast .cast-name{/*名前*/
  padding: 15px 0 15px 0px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 100%;
  text-align: center;
}
.modal-cast .cast-name .name-s{/*文字小*/
  font-size: 12px;
}
.modal-cast .cast-txt{/*人物紹介*/
  font-weight: 400;
  font-size: 14px;/*12*/
  letter-spacing: 0.03em;
  line-height: 160%;
  background: #A2DCE1;
  border-radius: 10px;
  padding: 15px;
}
.modal-cast .cast-btn{/*ボタン*/
  margin: 15px 15px 0px 15px;
}
.modal-cast .cast-btn a{
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  background: #42BBC6;
  color: #FFFFFF;
  border-radius: 100px;
  padding: 15px 0;
  text-align: center;
  display: block;
}
/*キャストモーダル*/

}/*sp*/

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

/* ---------------------------------
 PC用（タブレット共通）
--------------------------------- */
@media screen and (min-width: 601px) {/*993*/

  .pc{
    display: block;
  }
  .sp{
    display: none;
  }

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

  /*--------- ノート背景　共通 ---------*/
  .bg-note{
    background-color: #E1E990;
    padding:15px;
  }
  .bg-note .teaser-block-inner{
    background-color: #FFFFFF;
    box-shadow: 0px 0px 3px rgba(34, 34, 34, 0.25);
    border-radius: 5px;
  }
  .bk_gakuhu{
    background: url(../images/common/bg_gakuhu.png) repeat-y;
    padding-top: 40px;
    background-size: contain;
  }
  .bg-note h3{
    width: 256px;
    padding: 48px 0 0 0;
    margin: 0 auto;
  }
  .bg-note h3 img{
    display: block;
    width: 100%;
  }



  /*--------- 黒板背景　共通 ---------*/
  .bg-blackboard{
    background: #1B6B36;
    box-sizing:border-box;
    border: 4px solid #7B6D28;
  }
  .bg-kazari{
    background: url(../images/common/bg_blackboard.png) top center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .bg-blackboard h3{
    padding: 64px 0 0 0;
    width: 370px;
    margin: 0 auto;
  }
  .bg-blackboard h3 img{
    display: block;
    width: 100%;
  }



  /*バナー3つ*/
  .teaser-banner-area-2column ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-top: 32px;
    column-gap: 10px;
  }
  .teaser-banner-area-2column ul li{
    width: 48%;
    text-align: center;
    /* margin-right: 12px; ボタン1つのときmargin-right消す*/
    margin-bottom: 15px;
  }
  .teaser-banner-area-2column ul li:nth-child(2n){
    margin-right: 0;
  }

  .teaser-banner-area-2column ul li:last-of-type{/*メニュー3つのとき*/
    /* margin-right: 0;
    margin-bottom: 0; */
  }

  .teaser-banner-area-2column ul li a{

  }
  .teaser-banner-area-2column ul li a img{
    width: 100%;
    display: block;
    border-radius: 100px;
  }


  /*---------------------
  公式動画
  ---------------------*/
  #movie{

  }
  #movie .teaser-block-inner{
    /* padding-bottom: 40px; */
    padding: 0 30px 40px 30px;
  }
  #movie h3{

  }
  #movie .movie-player{
  }
  #movie .teaser-banner-area-2column{

  }
  #movie  .moviemore-btn{/*ボタン*/
    margin: 25px auto 0px auto;
    width: 303px;
  }
  #movie  .moviemore-btn a{
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #DF3B14;
    color: #FFFFFF;
    letter-spacing: 0.03em;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }
  #movie  hr{/*境界線*/
    height: 1px;
    background: #DF3B14;
    border: none;
    color: #DF3B14;
    margin-top: 32px;
    margin-bottom: 0px;
  }

  /*バナーTOP動画エリア*/
  #movie .teaser-banner-area-2column ul li{
  margin-right: 10px;
  }


  /*---------------------
  イントロ
  ---------------------*/

  #intro{
    position: relative;

  }
  #intro .teaser-block-inner{
    
  }
  #intro h3{
    margin: 0 auto;
  }
  #intro .txt-block{
    padding-top: 32px;
  }
  #intro .txt-block p{
    font-family: 'M PLUS Rounded 1c',sans-serif;
    /* font-family: 'Hiragino Maru Gothic StdN','M PLUS Rounded 1c',sans-serif; */
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 180%;
    letter-spacing: 0.1em;
    color:#fff;
  }
  #intro .txt-block:first-child{
    padding-top: 40px;
  }
  #intro .txt01{
    padding-top: 40px;
  }
  #intro .txt01 p{
    font-size: 28px;
    font-weight: bold;
  }
  #intro .txt01 .line-pnk-01{
    background: url(../images/intro/under-line_pnk-01.png) no-repeat center bottom;
    background-size: contain;
    display: inline-block;
  }
  #intro .txt01 .line-pnk-02{
    background: url(../images/intro/under-line_pnk-02.png) no-repeat center bottom;
    background-size: contain;
    display: inline-block;
  }
  #intro .txt02{
    padding-top: 40px;
  }
  #intro .txt03{
    
  }
  #intro .txt04{
    padding-top: 40px;
  }
  #intro .txt04 p .line-ble{
    background: url(../images/intro/under-line_blue.png) no-repeat left bottom;
    background-size: contain;
    background-size: 75% auto;
    display: inline-block;
  }
  #intro .txt04 p .line-y{
    background: url(../images/intro/under-line_yellow.png) no-repeat left bottom;
    background-size: contain;
    background-size: 75% auto;
    display: inline-block;
  }
  #intro .txt04 p .line-pnk-03{
    background: url(../images/intro/under-line_pnk-03.png) no-repeat left bottom;
    background-size: contain;
    display: inline-block;
  }
  #intro .txt05{
    padding-top: 40px;
  }

  #intro .txt06{
    padding-top: 32px;
    padding-bottom: 48px;
  }
  #intro .txt06 p{
    width: 398px;
    margin: 0 auto;
  }
  #intro .txt06 p img{
    width: 100%;
    display: block;
  }
  #intro .txt06 p .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    width: 398px;
  }
  #intro .txt06 p .keyframe6{
    animation-name: poyopoyo;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }

  /*黒板消し*/
  #intro .item_kokuban{
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 96px;
  }
  #intro .item_kokuban img{
    display: block;
    width: 100%;
  }
  /*黒板消し アニメーション*/
  #intro .item_kokuban .keyframe2{
    animation-name: anim_h;
  }
  .animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    width: 96px;
  }
  @keyframes anim_h {
    0% {
      transform: translate(0px, 0);
    }
    100% {
      transform: translate(20px, 0);
    }
  }
  #intro .img-item_left img,
  #intro .img-item_right img{
    width: 100%;
    display: block;
  }
  #intro .img-item_left{
    position: absolute;
    width: 125px;
    top: 20%;
    left: 3%;

  }
  #intro .img-item_right{
    position: absolute;
    width: 110px;
    top: 24%;
    right: 5%;
  }




  /*---------------------
  あらすじ
  ---------------------*/

  /*---------------------
  登場人物
  ---------------------*/

  #cast{

  }
  #cast .teaser-block-inner{
    padding-bottom: 48px;
  }
  #cast .cast-list{
    margin: 0 auto;
  }

  #cast .cast-item{
    padding-top: 48px;

  }
  #cast .cast-img img{
    display: block;
    width: 100%;
  }
  #cast .cast-item:nth-child( n + 2 ){
    display: flex;
    justify-content: space-evenly;
  }
  /*藤井隆 #cast .cast-item:nth-child( n + 2 )の解除*/
  #cast .cast-item:nth-of-type(7){
    display: block;
    padding-top: 48px;
  }

  #cast .cast-item-left{
    width: 27%;
  }
  #cast .cast-item-right{
    margin-left: 15px;
    width: 73%;/*65*/
  }
  #cast .cast-img{
  }
  #cast .cast-name{/*名前*/
    padding: 15px 0 15px 0px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 100%;
  }
  #cast .cast-name .name-s{/*文字小*/
    font-size: 16px;
  }
  #cast .cast-txt{/*人物紹介*/
    font-weight: 400;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.03em;
    background: #A2DCE1;
    border-radius: 10px;
    padding: 24px;
    /* width: 428px; */
  }
  #cast .cast-btn{/*ボタン*/
    width: 303px;
    margin-top: 15px;
  }
  #cast .cast-btn a{
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #42BBC6;
    color: #FFFFFF;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }

  /*主人公のみ*/
  #cast .cast-main{
    padding-top: 0;
  }
  #cast .cast-main .cast-img{
    width: 200px;
    margin: 0 auto;
  }
  #cast .cast-main .cast-btn{
    margin: 0 auto;
    margin-top: 15px;
  }
  #cast .cast-main .cast-name{
    text-align: center;
    padding: 24px 0;
  }
  #cast .cast-main .cast-txt{
    margin-left: 0;
    width: 100%;
  }
  /*主人公のみ*/

  #cast .cast02-list{/*写真なしキャスト　テキストリスト*/
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
  }
  #cast .cast02-list .cast02-right{
    width: 50%;
  }
  #cast .cast02-list .cast02-left{
    width: 50%;
  }
  #cast .cast02-list ul{
  }
  #cast .cast02-list ul li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
    letter-spacing: 0.1em;
    font-size: 14px;
    margin-bottom: 15px;
  }
  #cast .cast02-list ul li .title{
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  #cast .cast02-list ul li .title p{
  }
  #cast .cast02-list ul li .text{
    margin-left: 10px;
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cast .cast02-list ul li .text p{
    font-weight: bold;
  }
  #cast .cast02-list .cast02-left ul li:last-of-type{
    margin-bottom: 0;
  }

  /*---------------------
  合唱曲
  ---------------------*/
  #song{

  }
  #song .teaser-block-inner{
  padding-bottom: 40px;
  }
  #song h3{

  }
  #song .song-block{
    /* background: url(../images/song/waku_kadai.png) no-repeat center center;
    background-size: contain; */
    border: solid #fff 2px;
    border-image-source: url(../images/song/waku_kadai.png);
    border-image-slice: 10 fill;
    border-image-width: 5px;
    /* border-image-outset: 10px; */
    border-image-repeat: round;
  }
  /*共通*/
  #song .song-kadai{/*課題曲*/
    padding: 32px 0 32px 0;
    margin-top: 40px;
  }
  #song .ttl-song{/*曲名*/
    padding-top: 25px;
  }
  #song .ttl-song p{
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }
  #song .ttl-song p span{
    font-size: 14px;
    font-weight: 500;
  }

  #song .song-jiyuu .ttl-song{

  }
  #song .song-jiyuu .ttl-song p{
  }
  #song .song-jiyuu .ttl-song p span{
  }


  /*共通*/
  #song .song-kadai .kadai{/*課題曲タイトル*/

  }
  #song .song-kadai .kadai p{
    color: #FE9FDE;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
  }
  #song .song-kadai .kadai span{

  }
  #song .song-kadai .kadai span img,
  #song .song-jiyuu .jiyuu span img{
    display: block;
    width: 100%;
    vertical-align: middle;
  }

  #song .song-kadai .kadai .ttl-song a{

  }
  #song .song-kadai .btn-kashi{/*ボタン*/
    width: 303px;
    margin: 32px auto 0 auto;
  }
  #song .song-kadai .btn-kashi a{
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #DDED27;
    color: #017B0D;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;

  }
  #song .jiyuu p{
    color: #6BE0FA;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 16px;
  }

  #song .song-jiyuu{/*自由曲*/
    padding: 32px 0 32px 0;
    margin-top: 15px;
  }
  #song .img_jiyuu{
    margin: 25px auto 0 auto;
    width: 61%;
  }
  #song .img_jiyuu img{
    display: block;
    width: 100%;
  }
  #song .jiyuu .ttl-song p{
    color: #ffff;
    font-size: 22px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-align: center;
  }
  #song .comment{
    padding: 32px 25px 0 25px;
  }
  #song .comment .ttl{
    color: #DDED27;
    font-size: 15px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
  }
  #song .comment .txt{
    color: #ffff;
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.03em;
  }
  
  /*モーダル　歌詞*/
  .modal-kashi{
    padding: 48px 30px 48px 30px;
  }
  .modal-kashi .teaser-block-inner{

  }
  .teaser-block-inner .ttl-song p{
    font-size: 22px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .teaser-block-inner .subttl-song p{
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: 15px;

  }
  .teaser-block-inner .txt-kashi p{/*歌詞ブロック*/
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.05em;
  }
  .teaser-block-inner .txt-kashi .block-kashi{
    padding-top: 25px;
  }
  .teaser-block-inner .txt-kashi .block-kashi:first-child{
    padding-top: 0px;
  }
  .teaser-block-inner .txt-kashi .block-copy{
    padding-top: 48px;
  }
  .teaser-block-inner .txt-kashi .block-copy p{
    font-size: 10px;
  }
 
  /*---------------------
  原作
  ---------------------*/

  #original{
    padding-bottom: 25px;
  }
  #original .teaser-block-inner{
    padding-bottom: 48px;
  }
  #original h3{

  }
  #original .img{
    width: 290px;
    margin: 0 auto;
    border: 1px solid #E7E7E7;
  }
  #original .img img{
    display: block;
    width: 100%;
  }
  #original .ttl{
    padding-top: 25px;
  }
  #original .ttl p{
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: bold;
  }
  #original .ttl .fs-b{
    font-size: 20px;
  }
  #original .ttl .fs-s{
    font-size: 12px;
    font-weight: 500;
  }

  #original .txt{
    padding: 25px 25px 0 25px;
  }
  #original .txt p{
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.03em;
  }
  #original .btn{
    width: 303px;
    margin: 25px auto 0px auto;
  }
  #original .btn a{
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #A2B504;
    color: #fff;
    border-radius: 100px;
    padding: 15px 0;
    text-align: center;
    display: block;
  }
  #original .btn span{
    display: inline-block;
    margin-right: 10px;
  }
  #original .btn span img{
    vertical-align: middle;
  }
  #original hr{/*境界線*/
    height: 1px;
    background: #A2B504;
    border: none;
    color: #A2B504;
    margin-top: 32px;
    margin-bottom: 24px;
  }

  /*原作者コメント*/
  #original .comment{
    background: #CED979;
    border-radius: 10px;
    padding: 25px;
  }
  #original .comment .ttl{
    font-size: 15px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
    color: #405503;
    padding-top: 0;
  }
  #original .comment .txt{
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.03em;
    padding: 0;
    padding-top: 8px;
  }
  /*原作者プロフィール*/
  #original .profile{
    padding: 25px 25px 0 25px;
  }
  #original .profile .ttl{
    padding-top: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.1em;
  }
  #original .profile .txt{
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.03em;
    margin-top: 8px;
    padding: 0;
    font-weight: 500;
  }

  /*---------------------
  バナーエリア
  ---------------------*/
  .bnr-group{

  }
  .teaser-banner-area{
    padding: 25px 15px 0px 15px;
    background-color: #E1E990;
  }
  .bnr-end {
    padding: 25px 15px 25px 15px;
  }
  .teaser-banner-area ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
  }
  .teaser-banner-area ul li{
    width: 48%;
    text-align: center;
    /* margin-right: 12px ; */
  }
  .teaser-banner-area ul li:nth-child(2n){
    margin-right: 0;
  }
  .teaser-banner-area ul li img{
    width: 100%;
    display: block;
    border-radius: 100px;
  }

  /*---------------------
  スタッフ
  ---------------------*/
  #staff{

  }
  #staff .teaser-block-inner{
    padding-bottom: 48px;
  }

  #staff .staff-list{
    
  }
  #staff .staff-list ul{
    
  }
  #staff .staff-list ul li{
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  #staff .staff-list ul li:last-of-type{
    margin-bottom: 0;
  }
  #staff .staff-list ul li .title{
    width: calc(50% - 15px);
    margin-right: 13px;
  }
  #staff .staff-list ul li .title p{
    text-align: right;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  #staff .staff-list ul li .text{
    width: calc(50% - 15px);
    margin-left: 12px;

  }
  #staff .staff-list ul li .text p{
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
    color: #1B6B36;
  }

  #staff{
    
  }

  /*---------------------
  SNS
  ---------------------*/
  #twitter{

  }
  #twitter .teaser-block-inner{
    /* padding-bottom: 40px; */
    padding: 0 30px 40px 30px;
  }


/*--------- バナー　ボタンアニメーション ---------*/
.teaser-banner-area-2column ul li a img{
  cursor: pointer;
  transition: all 1.5s ease;
}
.teaser-banner-area-2column ul li a img:hover{
  transform: rotateX(360deg);
}

.teaser-banner-area ul li a img{
  cursor: pointer;
  transition: all 1.5s ease;
  /* transition: all 2s linear 0s; */
}
.teaser-banner-area ul li a img:hover{
  transform: rotateX(360deg);
}
/*--------- 公式動画　ボタンアニメーション ---------*/
#movie .moviemore-btn a{
  cursor: pointer;
  transition: all 1.5s ease;
}
#movie .moviemore-btn a:hover{
  transform: rotateX(360deg);
}
/*--------- キャスト　ボタンアニメーション ---------*/
#cast .cast-btn a{
  cursor: pointer;
  transition: all 1.5s ease;
}
#cast .cast-btn a:hover{
  transform: rotateX(360deg);
}
/*--------- 歌詞　ボタンアニメーション ---------*/
#song .btn-kashi a{
  cursor: pointer;
  transition: all 1.5s ease;
}
#song .btn-kashi a:hover{
  transform: rotateX(360deg);
}
/*--------- 原作　ボタンアニメーション ---------*/
#original .btn a{
  cursor: pointer;
  transition: all 1.5s ease;
}
#original .btn a:hover{
  transform: rotateX(360deg);
}
/*--------- トピックス　ボタンアニメーション ---------*/
#topics .topics-btn a{
  cursor: pointer;
  transition: all 1.5s ease;
}
#topics .topics-btn a:hover{
  transform: rotateX(360deg);
}


/*---------------------
あらすじ
---------------------*/
#story{

}
#story .teaser-block-inner{
  padding-bottom: 48px;
}
#story .teaser-block-title{
  margin-bottom: 10px;
}
#story .story-block{
  padding: 0 15px;
}


#story .story-block .story-ttl{/*タイトル*/
  display: flex;
  justify-content: space-between;
  background: rgba(225, 235, 129, 0.2);
  border-radius: 10px;
  padding: 5px 15px;
  align-items: center;/*第・週なしver 不要の場合カット・非表示*/
}
#story .story-block .story-ttl .bknb{/*バックナンバー*/
  /* width: 86px; */
  width: 29px;
}
#story .story-block .story-ttl .bknb-tver{/* Tver */
  width: 66.8%;
  padding: 10px 0;
}
#story .story-block .story-ttl .bknb img{/*バックナンバー*/
  display: block;
  width: 100%;
}

#story .story-block .story-ttl .week{
  display: inline-block;
}
#story .story-block .story-ttl .week p{
  font-size: 14px;
  color: #405503;
  line-height: 1;/*第・週なしver*/ /*1.4*/ 
  text-align: right;
}
#story .story-block .story-ttl .nb{/*#00~#00*/
  font-size: 22px;
  font-weight: bold;

}
#story .story-block .story-ttl .day{/*2022.00.00~00.00放送*/

}

#story .story-block ul.img{/* 写真 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 25px;

}
#story .story-block .img li{
  width: calc((100% - 10px * 1) / 2);
}

#story .story-block .img  li img{
  display: block;
  width: 100%;
}
#story .story-block .text{
  padding-top: 15px;
}
#story .story-block .text p{
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
#story .story-block .text .fs-b{/*フォントサイズ　大*/
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  padding: 15px 0;
}

/*見どころ*/
#story .story-block .midokoro{
  position: relative;
  background-color: #CED979;
  border-radius: 10px;
  margin-top: 25px;
}
#story .story-block .midokoro .midokoro-inner{
  padding: 0 15px 32px 15px;
}
#story .story-block .midokoro .midokoro-ttl{/*見どころ　タイトル*/
  width: 190px;
  margin: 0 auto;
  padding-top: 32px;
}

/*テキスト*/
#story .story-block .midokoro .txt-show{
  padding-top: 25px;
}
#story .story-block .midokoro .txt-show .txt-show-p{
  font-size: 15px;
  line-height: 160%;
  letter-spacing: 0.03em;
  padding-top: 25px;
}

#story .story-block .midokoro .txt-show .txt-show-list{/*リストの場合*/
  padding-left: 1em;
  text-indent: -1em;
}
#story .story-block .midokoro .txt-show .txt-show-list li{
  /* color: #333; */
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #405503;
  font-weight: bold;
}
/*テキスト*/

#story .story-block .midokoro .midokoro-ttl img{
  display: block;
  width: 100%;
}
#story .story-block .midokoro .midokoro-kazari-l{/*マグネット　左*/
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 20px;
}
#story .story-block .midokoro .midokoro-kazari-r{/*マグネット　右*/
  position: absolute;
  top: 2.5%;
  right: 2.5%;
  width: 20px;
}
#story .story-block .midokoro .midokoro-kazari-r img,
#story .story-block .midokoro .midokoro-kazari-l img{
  width: 100%;
  display: block;
}
#story .txt-hide .txt-hide-block{
  padding-top: 25px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

/*もっと見るボタン*/
#story .txt-hide{
  /* display: none; */
}
#story button.more {
cursor: pointer;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.1em;
width: 303px;
margin: 25px auto 0px auto;
display: block;
background-color: #A2B504;
color: #fff;
border-radius: 100px;
padding: 15px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}

/*--------- もっと見るボタンアニメーション ---------*/
#story button.more{
  cursor: pointer;
  transition: all 1.5s ease;
}
#story button.more:hover{
  transform: rotateX(360deg);
}

#story button.more::after {
/* content: "もっと見る"; */
transition: .2s;
-erbkit-transition: .2s;
letter-spacing: 0.1em;
font-size: 16px;
font-weight: bold;
}
#story button.more.on-click::after{
/* content: "閉じる"; */
}
/*もっと見るボタン*/
/*見どころ*/

#story .teaser-banner-area-2column{

}
#story .teaser-banner-area-2column ul{
  padding-top: 25px;

}
#story .teaser-banner-area-2column ul li{
  margin-bottom: 0;
}
#story .teaser-banner-area-2column ul li img{
width: 100%;
display: block;
}
#story hr{
  height: 1px;
  background: #A2B504;
  border: none;
  color: #A2B504;
  margin-top: 48px;
  margin-bottom: 48px;
}


/*---------------------
登場人物
---------------------*/
#cast-group{

}
#cast-group .teaser-block-inner{
  position: relative;
  padding: 0 30px 48px;
}
#cast-group .class-name{/*花山高校 3年C組*/
  padding-top: 64px;
}
#cast-group .class-name p{
  text-align: center;
  color: #fff;
 font-size: 18px;
 font-weight: bold;
 letter-spacing: 0.03em;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#cast-group .class-name p span{

}
#cast-group .class-name p span img{
  display: block;
  width: 100%;
}

/*生徒　写真リスト*/
#cast-group .cast-group-list{
  padding-top: 32px;
}
#cast-group .cast-group-list ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 12px;/*横*/
  row-gap: 15px;/*縦*/
}
#cast-group .cast-group-list li{
  width: 18%;
}
#cast-group .cast-group-list li a{
  cursor: pointer;
}
#cast-group .cast-group-list li a:hover{
  opacity: 0.7;
}
#cast-group .cast-group-list li img{
  width: 100%;
  display: block;
}
/*写真リスト*/

#cast-group .desk-block{/*教卓*/
  border: solid #fff 2px;
  border-image-source: url(../images/song/waku_kadai.png);
  border-image-slice: 10 fill;
  border-image-width: 5px;
  /* border-image-outset: 10px; */
  border-image-repeat: round;
  width: 357px;
  margin: 32px auto 0 auto;
}
#cast-group .desk-block p{
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 0 ;
  letter-spacing: 0.3em;
}

/*先生・両親　写真リスト*/
#cast-group .cast-group-list02{
}
#cast-group .cast-group-list02 ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;/*横*/
  row-gap: 15px;/*縦*/
}
#cast-group .cast-group-list02 li{
  width: 18%;
}
#cast-group .cast-group-list02 li a{
}
#cast-group .cast-group-list02 li img{
  width: 100%;
  display: block;
}
/*写真リスト*/

/*マグネット*/
#cast-group .kazari {
  position: absolute;
  width: 27px;
}
#cast-group .kazari img{
  display: block;
  width: 100%;
}
.mag-o{
  top: 9%;
  left: 10%;
}
.mag-b{
  right: 11%;
  top: 65%;/*full：65*/
}
.mag-g{
  left: 5%;
  top: 70%;/*full：70*/
}
.mag-r{
  right: 5%;
  top: 93%;
}
/*マグネット*/

#cast-group .cast-group-list02 .teater{/*先生*/
  padding-top: 25px;
}
#cast-group .cast-parent{/*両親*/
  margin-top: 32px;
}
#cast-group .cast-parent .cast-group-list02 ul{
  padding: 32px 0;
}
#cast-group .cast-parent .line_yellow{
  width: 100%;
}
#cast-group .cast-parent .line_yellow img{
  display: block;
  width: 100%;
}

/*モーダル*/
.modal-cast{
  padding: 40px 30px;
  position: relative;
}
.modal-cast .bk_gakuhu{
  padding-top: 0;
}
.modal-cast .part-tag{/*パート*/
  position: absolute;
  top: 32px;
  left: 0%;
  width: 132px;
}
.modal-cast .part-tag img{
  display: block;
  width: 100%;
}
.modal-cast .cast-name{/*名前*/
  padding: 15px 0 15px 0px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 100%;
}
.cast-name .name-s{/*文字小*/
  font-size: 16px;
}
.modal-cast .cast-txt{/*人物紹介*/
  font-weight: 400;
  font-size: 15px;
  line-height: 160%;
  letter-spacing: 0.03em;
  background: #A2DCE1;
  border-radius: 10px;
  padding: 24px;
  /* width: 428px; */
}
.modal-cast  .cast-btn{/*ボタン*/
  width: 303px;
  margin-top: 15px;
}
.modal-cast .cast-btn a{
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  background: #42BBC6;
  color: #FFFFFF;
  border-radius: 100px;
  padding: 15px 0;
  text-align: center;
  display: block;
}

/*写真*/
.modal-cast .cast-main{
  padding-top: 0;
}
.modal-cast .cast-main .cast-img{
  width: 200px;
  margin: 0 auto;
}
.modal-cast .cast-main .cast-img img{
  display: block;
  width: 100%;
}
.modal-cast .cast-main .cast-btn{
  margin: 0 auto;
  margin-top: 15px;
}
.modal-cast .cast-main .cast-name{
  text-align: center;
  padding: 24px 0;
}
 .modal-cast .cast-main .cast-txt{
  margin-left: 0;
  width: 100%;
}
/*写真*/

/*--------- キャストモーダル　ボタンアニメーション ---------*/
.modal-cast .cast-btn a{
  cursor: pointer;
  transition: all 1s ease;
}
.modal-cast .cast-btn a:hover{
  transform: rotateX(360deg);
  /* opacity: 0.7; */
}





}/*pc*/




/*---------------------
PC　上書き　993px〜
---------------------*/

@media screen and (min-width: 993px) {
  .ntv-contentsWrap {
    padding-bottom: 0px;
  }

  
}






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

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


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

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

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

/* ---------------------------------
 バナー
--------------------------------- */
/* .teaser-banner-area{
  width: 100%;
  padding: 10px 0;
}
.teaser-banner-area ul li{
  margin: 10px;
  line-height: 0;
}
.teaser-banner-area ul li a{
}
.teaser-banner-area ul li a img{
  width: 100%;
} */

/*1カラム*/
.teaser-banner-area-1column{
  margin: 25px 15px;
}
.teaser-banner-area-1column ul{

}
.teaser-banner-area-1column ul li{
  margin-bottom: 0;
}
.teaser-banner-area-1column .banner-item{
  padding-bottom: 15px;
}
.teaser-banner-area-1column .banner-item:last-of-type{
  padding-bottom: 0px;
}
.teaser-banner-area-1column ul li img{
width: 100%;
display: block;
}

@media screen and (max-width: 601px){
  /*1カラム*/
  .teaser-banner-area-1column{
    margin: 15px 15px;
  }
  .teaser-banner-area-1column .banner-item{
    padding-bottom: 10px;
  }
}


@media screen and (min-width: 993px) {
  /* .teaser-banner-area{
    padding: 0;
  }
  .teaser-banner-area ul li{
    margin: 10px 0;
  } */
}

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

/* ---------------------------------
 Twitter
--------------------------------- */

/* タイムライン */
.teaser-contents .twitter-area{
  margin-top: 40px;
}
.teaser-contents .twitter-area .twitter-timeline{
}

/* ボタン */
.teaser-contents .official-sns-block {
  margin-top: 0;
  border-top: none;
}
.teaser-contents .teaser-btn + .teaser-btn{
  margin-top: 20px;
}
.teaser-contents .teaser-btn a{
  width: 100%;
  display: block;
}
.teaser-contents .teaser-btn a{
  padding: 1.3em 0 1.2em;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}
/* .teaser-contents .teaser-btn#btn-follow-twitter a{
  background-color: #1da1f2;
}
.teaser-contents .teaser-btn#btn-follow-facebook a{
  background-color: #3b5998;
}
.teaser-contents .teaser-btn#btn-follow-instagram a{
  position: relative;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
.teaser-contents .teaser-btn#btn-follow-instagram a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.teaser-contents .teaser-btn#btn-follow-line a{
  background-color: #00b900;
}
.teaser-contents .teaser-btn#btn-follow-tiktok a{
  background-color: #000000;
} */

@media screen and (min-width: 992px) {
/* タイムライン */
.teaser-contents .twitter-area{
  
}
#topics .topics-inner{
  margin-top: 40px;
}


}


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

#topics.drama-area{
  padding: 0;
  margin: 0;
  background-color: #1B6B36 !important;
}
#topics .drama-box-title{
  display: none;
}
#topics .topics-btn{
  margin: 25px auto 0;
}
#topics .topics-inner{
  padding: 0px 0px 40px;

}

/* ボタン */
#topics .drama-btn.btn-more {
  background: #DDED26 !important;
  color: #1B6B36;
  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.6rem;
  font-weight: bold;
  line-height: 1;
  border-radius: 100px;
  width: 68%;
}
#topics .drama-btn.btn-more i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: middle;
}

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

  #topics .topics-btn {
    padding: 25px 10px 0 10px;
    margin: 0;
  }
  #topics .topics-inner{
    padding: 32px 0px 32px;
  }
  #topics .drama-btn.btn-more{
    width: 100%;
    font-size: 1.4rem;
  }


}

/* リスト */
@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%;
  }
}