@charset "UTF-8";

.ntv-main img {
  width: 100%;
  vertical-align: bottom;
  display: block;
}

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

 Layout

==================================*/
.teaser-contents {
  box-sizing: border-box;
  font-size: 1.6rem;
  color: #3E2603;
  position: relative;
  z-index: 3;
}
.teaser-contents a:hover, .bnr_cast a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}


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

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

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

/* ---------------------------------
 左カラム設定
--------------------------------- */
.ntv-main{
  float: none;
}

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

.ntv-aside{
  float: none;
  margin-left: 20px;
}

@media screen and (max-width : 992px){
  .ntv-aside{
    margin-left: 0;
    position: relative;
    z-index: 4;
  }
}

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


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

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

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

.inview {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
  全体背景
--------------------------------- */
.ntv-wrapper{
background-color: #fce3dd;
}

.ntv-contentsWrap {
  display: flex;
  align-items: flex-start;
  overflow: visible;
  padding-bottom: 100px;
}

@media screen and (max-width : 992px){
.ntv-contentsWrap {
  overflow: hidden;
  display: block;
  padding-bottom: 0px;
}
}

.ntv-contentsWrap__bg{
  position: relative;
  background-color: #fce3dd;
  overflow: hidden;
}

.ntv-contentsWrap__bg::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-image: url("../images/mv/mv-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
}

.ntv-contentsWrap__bg::after{
  content: "";
  position: absolute;
  left: 0;
  top: 570px;
  z-index: 2;
  background-image: url("../images/common/deco01-a.png");
  background-size: contain;
  height: 134px;
  width: 100%;
}


@media screen and (max-width : 992px){
  .ntv-contentsWrap__bg::before{
    /* background-image: url("../images/mv/mv-bg-sp.jpg"); */
    height: calc((1200 / 1328)*100vw);
    background-size: cover;
  }
  
  .ntv-contentsWrap__bg::after{
    top: calc(((1200 / 1328)*100vw) - 115px);
  }
}

.ntv-contentsWrap{
  position: relative;
  z-index: 10;
}

/* ---------------------------------
  メインビジュアル
--------------------------------- */
.teaser-mv-wrap{
  position: relative;
  z-index: 2;
}

.teaser-extra-banner{
  position: absolute;
  z-index: 3;
  left: 0;
  top: 14px;
  right: 0;
  margin: auto;
  width: 97%;
}

.teaser-extra-banner a{
  display: block;
  padding-top: calc((340 / 2576)*100%);
  background-image: url("../images/mv/bnr-volunteer.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}

.teaser-main-mainImg {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
}
.teaser-main-mainImg span{
  display: block;
  padding-top: calc((1200 / 1328)*100%);
  background-image: url("../images/mv/mv-txt.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}

@media screen and (max-width : 992px) {
  .teaser-extra-banner{
    top: calc((21/ 992) * 100vw );
    width: 97%;
  }
}

/* ---------------------------------
 メニュー（UNIT04タイプ）設定
--------------------------------- */
.teaser-main-nav {
  z-index: 2;
  position: relative;
  margin-top: -50px;
}
.teaser-main-nav::before,
.teaser-main-nav::after{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  top: 0;
}
.teaser-main-nav::before{
  background-image: url("../images/common/deco-fw-01.png");
  left: -60px;
  width: 270px;
  height: 278px;
}

.teaser-main-nav::after{
  background-image: url("../images/common/deco-fw-02.png");
  right: -20px;
  width: 200px;
  height: 404px;
  top: -75px;
}

.teaser-main-nav ul {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - 20px);
  max-width: 548px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.teaser-main-nav ul li {
  position: relative;
  vertical-align: top;
  width: calc((100% - 60px) / 7);
  border-radius: 6px;
  border: 1px solid #ffffff;
  overflow: hidden;
  box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.35);
  margin-left: 10px;
}

.teaser-main-nav ul li:first-child {
  margin-left: 0;
}

.teaser-main-nav ul li:nth-child(even) {
  margin-top: 10px;
}

.teaser-main-nav ul li .label {
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #FFE046;
  border-radius: 4px 4px 0 0;
}

.teaser-main-nav ul li .label span {
  display: block;
  text-align: center;
}
.teaser-main-nav ul li a {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  padding-top: calc((182 / 83)*100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.teaser-main-nav ul li.is-coming a {
  pointer-events: none;
  opacity: 0.6;
}
.teaser-main-nav ul li.about a {
  background-image: url("../images/nav/nav-about.jpg");
}
.teaser-main-nav ul li.movie a {
  background-image: url("../images/nav/nav-movie.jpg");
}
.teaser-main-nav ul li.cast a {
  background-image: url("../images/nav/nav-cast.jpg");
}
.teaser-main-nav ul li.comment a {
  background-image: url("../images/nav/nav-comment.jpg");
}
.teaser-main-nav ul li.original a {
  background-image: url("../images/nav/nav-original.jpg");
}
.teaser-main-nav ul li.staff a {
  background-image: url("../images/nav/nav-staff.jpg");
}
.teaser-main-nav ul li.topics a {
  background-image: url("../images/nav/nav-topics.jpg");
}

@media screen and (max-width : 601px) {
  .teaser-main-nav::before {
    left: -60px;
    width: 210px;
    height: 278px;
  }
  .teaser-main-nav::after {
    top: -55px;
    right: -20px;
    width: 140px;
    height: 281px;
  }

  .teaser-main-nav {
    margin-top: calc((55 / 375) * -100%);
  }

  .teaser-main-nav ul {
    max-width: 350px;
    width: calc(100% -  106px);
    margin: 0 auto;
  }

  .teaser-main-nav ul li {
    width: calc((100% - 45px) / 4);
    margin-left: 15px;
  }

  .teaser-main-nav ul li:nth-child(4n+1) {
    margin-left: 0;
  }

  .teaser-main-nav ul li:nth-child(n+5) {
    margin-top: 10px;
  }

  .teaser-main-nav ul li:nth-child(2n+5) {
    margin-top: 20px;
  }

  .teaser-main-nav ul li .label{
    font-size: 10px;
  }
}

/* ---------------------------------
 タイトル
--------------------------------- */
.teaser-title{
  max-width: 210px;
  margin: 0 auto;
}
.ttl-about p{
  background-image: url("../images/ttl-about.png");
}
.ttl-movie p{
  background-image: url("../images/ttl-movie.png");
}
.ttl-cast p{
  background-image: url("../images/ttl-cast.png");
}

.ttl-comment p{
  background-image: url("../images/ttl-comment.png");
}

.ttl-original p{
  background-image: url("../images/ttl-original.png");
}

.ttl-staff p{
  background-image: url("../images/ttl-staff.png");
}

.ttl-topics p{
  background-image: url("../images/ttl-topics.png");
}

.ttl-sns p{
  background-image: url("../images/ttl-sns.png");
}

.teaser-title p{
  display: block;
  padding-top: calc((64 / 210)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  line-height: 0;
}

/* ---------------------------------
 作品詳細
--------------------------------- */
.teaser-about{
  margin: 80px auto 0;
  position: relative;
  z-index: 1;
}

.teaser-about::before{
  content: "";
  position: absolute;
  right: 0;
  top: 30px;
  width: 187px;
  height: 187px;
  background-image: url("../images/about-deco-moon.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.teaser-title.ttl-about{
  position: relative;
  z-index: 3;
}

.about-text{
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.about-text.about-imgTxet{
  display: block;
  background-image: url("../images/about-txt-pc.png");
  padding-top: calc((252 / 1328)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  margin: 50px auto 0;
  line-height: 0;
}

.about-text.about-large{
  font-size: 28px;
  font-weight: 700;
}

.text-bold{
  font-weight: 700;
  color: #BE0E57;
}

.about-text .pc-br {
  display: block;
}
.teaser-about .sp-br{
  display: none;
}

@media screen and (max-width : 992px) {
  .teaser-about {
    padding: 0 20px;
  }
}
@media screen and (max-width : 601px) {
  .teaser-about {
    margin: 70px auto 0;
  }

  .teaser-about::before{
    top: -15px;
    right: -15px;
  }

  .teaser-about .about-text.about-imgTxet{
    background-image: url("../images/about-txt-sp.png");
    padding-top: calc((510 / 1005)*100%);
    margin: 40px auto 0;
  }
  .about-text.about-text{
    font-size: 14px;
  }

  .about-text.about-large{
    font-size: 18px;
  }
  .about-text .pc-br {
    display: none;
  }
  .about-text .sp-br {
    display: block;
  }
}

/* ---------------------------------
 動画
--------------------------------- */

.teaser-movie{
  margin-top: 100px;
}

.movie-area{
  position: relative;
  z-index: 1;
}

.movie-area::before,
.movie-area::after{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 2;
  width: 270px;
  height: 228px;
}
.movie-area::before{
  bottom: -50px;
  right: -120px;
  background-image: url("../images/common/deco-fw-03.png");
  background-position: bottom center;
}
.movie-area::after{
  top: -60px;
  left: -90px;
  background-image: url("../images/common/deco-fw-04.png");
  background-position: top center;
}


.movie-box{
  padding: 10px;
  background-color: #C4D8CF;
  margin: 50px auto 0;
  position: relative;
  z-index: 3;
}

.movie-box__data{
  position: relative;
  z-index: 3;
  padding-top: 56.25%;
}


.movie-box__data iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width : 992px) {
  .movie-box{
    width: calc(100% - 20px);
  }
}

@media screen and (max-width : 601px){
  .movie-box{
    margin-top: 40px;
  }
  .movie-area::before,
  .movie-area::after {
    width: 168px;
    height: 142px;
  }

  .movie-area::before {
    bottom: -25px;
    right: -70px;
  }

  .movie-area::after {
    top: -40px;
    left: -70px;
  }
}

/* ---------------------------------
 キャスト
--------------------------------- */

.teaser-cast{
  margin-top: 100px;
  padding-bottom: 80px;
  /* background-image: url("../images/common/bg05.png"); */
  background-repeat: repeat-y;
    background-size: contain;
}

.cast-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.cast-box:not(:first-child){
  margin-top: 30px;
}

.cast-box:nth-child(odd){
  flex-flow: row-reverse;
}

.cast-img{
  max-width: 336px;
  width: 55%;
}
.cast-img div{
  display: block;
  padding-top: calc((428 / 336)*100%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.cast-info{
 max-width: 318px;
 width: calc(45% - 10px);
}

.cast-role{
  line-height: 1;
  font-size: 28px;
  font-weight: 700;
}

.cast-role span{
  font-size: 20px;
  margin-left: 10px;
}

.cast-role rt{
  font-size: 13px;
  font-weight: 400;
}

.cast-name{
  line-height: 1;
  margin-top: 10px;
  font-family: TsukuAOldMinPr6N-E;
  font-size: 50px;
}

.cast-text{
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
}

.cast-comment{
  max-width: 280px;
  width: calc(100% - 30px);
  margin-top: 20px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.15);
}

.cast-comment a{
  display: block;
  padding-top: calc((125 / 560)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  background-image: url("../images/btn-cast-comment_2.png");
}

.is-atouma .cast-img div{
  background-image: url("../images/cast-atouma.png");
}

.is-atouma .cast-comment a{
  background-image: url("../images/btn-cast-comment_2.png");
}
.is-mkamishiraishi .cast-img div{
  background-image: url("../images/cast-mkamishiraishi.png");
}

.is-mkamishiraishi .cast-comment a{
  background-image: url("../images/btn-cast-comment_1.png");
}

@media screen and (max-width : 601px) {
  .cast-box{
    display: block;
  }
  .cast-img{
    max-width: 335px;
    width: calc(100% - 104px);
    margin: 0 auto;
  }
  
  .cast-info{
    max-width: 335px;
    width: 100%;
    margin: 10px auto 0;
  }
  .cast-role{
    font-size: 16px;
    text-align: center;
  }
  
  .cast-role span{
    font-size: 12px;
    margin-left: 5px;
  }
  .cast-role rt{
    font-size: 10px;
  }

  .cast-name{
    font-size: 36px;
    text-align: center;
  }

  .cast-text{
    text-align: left;
    font-size: 15px;
  }
  .cast-comment{
    margin: 20px auto 0;
    max-width: 200px;
  }
}

/* ---------------------------------
 学校紹介
--------------------------------- */
.teaser-school-wrap{
  margin-top: 50px;
}

.school-box{
  padding: 50px 30px;
  position: relative;
}

.school-box.is-umezono{
  background: linear-gradient(#F992A3, #ECA379);
}

.school-box.is-mizusawa{
  margin-top: 10px;
  background: linear-gradient(#C4B658, #95C579);
}

.school-box.is-hokuo{
  margin-top: 10px;
  background: linear-gradient(#6BC8A3, #75BDCA);
}
.school-box::before{
  content: "";
  background-image: url("../images/common/bg06.png");
  background-size: 64px auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.school-box::after{
  content: "";
  background-image: url("../images/cast-deco-pc.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.school-box-bg{
  position: relative;
  z-index: 3;
}

.school-name{
  color: #ffffff;
  text-align: center;
  font-family: TsukuAOldMinPr6N-E;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.school-name span{
  display: inline-block;
  padding: 0 15px;
  border: 1px solid #ffffff;
  font-size: 26px;
  vertical-align: middle;
}

.school-img{
  display: block;
  margin: 20px auto 0;
  max-width: 604px;
}

.school-img div{
  display: block;
  padding-top: calc((378 / 604)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.is-umezono .school-img div{
  background-image: url("../images/cast-umezono.png");
}

.is-mizusawa .school-img div{
  background-image: url("../images/cast-mizusawa.png");
}

.is-hokuo .school-img div{
  background-image: url("../images/cast-hokuo.png");
}

.school-list{

}

.school-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  color: #ffffff;
  line-height: 1.2;
  position: relative;
  margin-top: 20px;
}


.school-role,
.school-cast{
  width: calc(50% - 35px);
}

.school-role{
  display: flex;
  align-items: center;
  justify-content: end;
  position: relative;
}

.school-role::before{
  content: "";
  position: absolute;
  background-image: url("../images/three_dots.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  height: 10px;
  width: 30px;
  top: 0;
  bottom: 0;
  right: -50px;
  margin: auto;
}

.school-role-name{
  text-align: center;
  font-size: 18px;
  padding: 0 5px;
  font-weight: 700;
}

.school-role-name span{
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.school-role-end{
  font-size: 14px;
}

.school-cast{
  font-size: 26px;
  font-family: TsukuAOldMinPr6N-E;
}

.school-box-bg .cast-comment{
  margin: 40px auto 0;
}

.role-img{
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  background-image: url("../images/cast-mkamishiraishi_icon.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}

@media screen and (max-width : 992px){
  .teaser-school-wrap{
    padding: 0 10px;
  }
}

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

.school-box{
  padding: 40px 10px;
  position: relative;
}
  .school-box::after {
    background-image: url("../images/cast-deco-sp.png");
  }

  .school-name {
    font-size: 36px;
    gap: 10px;
  }

  .school-name span {
    font-size: 17px;
  }

  .school-item{
    gap: 50px;
  }

  .school-role,
  .school-cast{
    width: calc(50% - 25px);
  }

  .is-umezono .school-role{
    width: calc(55% - 25px);
  }

  .is-umezono .school-cast{
    width: calc(45% - 25px);
  }

  .school-role::before{
    right: -37px;
    width: 24px;
  }

  .school-role-name{
    font-size: 15px;
  }
  .school-role-name span{
    font-size: 10px;
  }

  .school-cast{
    font-size: 20px;
  }

  .role-img{
    width: 40px;
    height: 40px;
    margin-right: 5px;
  }

  .school-box-bg .cast-comment{
    margin: 30px auto 0;
  }
}

@media screen and (max-width : 374px) {
  .school-name{
    font-size: 35px;
    gap: 5px;
  }
  .school-name span {
    font-size: 15px;
    padding: 0 10px;
  }
  .school-item{
    gap: 30px;
  }
  .school-role, .school-cast,
  .school-role, .school-role{
    width: calc(50% - 15px);
  }
  .school-role::before {
    right: -22px;
    width: 14px;
  }

  .is-umezono .school-role{
    width: calc(60% - 15px);
  }
  .is-umezono .school-cast{
    width: calc(40% - 15px);
  }
  .school-cast{
    font-size: 18px;
  }
  .school-role-name{
    font-size: 14px;
  }
}


/* ---------------------------------
 コメント
--------------------------------- */


.teaser-comment__bg{
  position: relative;
  z-index: 3;
}


.teaser-comment__bg::before,
.teaser-comment__bg::after{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 2;
  width: 270px;
  height: 228px;
}
.teaser-comment__bg::before{
  top: 30px;
  left: -60px;
  background-image: url("../images/common/deco-fw-03.png");
  background-position: top center;
}
.teaser-comment__bg::after{
  top: 0;
  right: -50px;
  background-image: url("../images/common/deco-fw-04.png");
  background-position: bottom center;
}


.teaser-comment{
  padding: 150px 35px 44px;
  background-color: #C4D8CF;
  position: relative;
  z-index: 1;
}
.teaser-comment::before,
.teaser-comment::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}
.teaser-comment::before{
  top: 0;
  background-image: url("../images/common/deco01-b.png");
  background-position: top center;
}
.teaser-comment::after{
  bottom: -125px;
  background-image: url("../images/common/deco01-c.png");
  background-position: bottom center;
}

.ttl-comment{
  position: relative;
  z-index: 3;
}

.comment-list{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  max-width: 490px;
  margin: 50px auto 0;
  position: relative;
  z-index: 3;
}

.comment-item{
  width: calc((100% - 40px) / 5);
}
.comment-item:nth-child(even){
  margin-top: 10px;
}
.comment-item a{
  display: block;
  padding-top: calc((208 / 90)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}

.comment-item.list-suetsugu a{
  background-image: url("../images/list-suetsugu.png");
}
.comment-item.list-koizumi a{
  background-image: url("../images/list-koizumi.png");
}
.comment-item.list-fujita a{
  background-image: url("../images/list-fujita.png");
}
.comment-item.list-sakakibara a{
  background-image: url("../images/list-sakakibara.png");
}
.comment-item.list-kitajima a{
  background-image: url("../images/list-kitajima.png");
}

.comment-box-list{
  margin-top: 20px;
  position: relative;
  z-index: 3;
}

.comment-box-item{
  padding: 14px;
  border-radius: 4px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.comment-box-item::before{
  content: "";
  position: absolute;
  overflow: hidden;
  border-radius: 4px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/bg02.png");
  background-size: 200px;
  background-repeat: repeat;
  z-index: 1;
}
/* 
.comment-box-item::after{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 3;
  width: 400px;
  height: 200px;
  top: calc(100% - 60px);
}

.is-suetsugu::after{
  background-image: url("../images/common/deco-fw-05.png");
  left: -90px;
}

.is-koizumi::after{
  background-image: url("../images/common/deco-fw-06.png");
  right: -95px;
}

.is-fujita::after{
  background-image: url("../images/common/deco-fw-07.png");
  left: -92px;
}

.is-sakakibara::after{
  background-image: url("../images/common/deco-fw-08.png");
  right: -100px;
}

.is-kitajima::after{
  display: none;
} */

.comment-box-item:first-child{
  margin-top: 0;
}
.comment-box-item:nth-child(odd){
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #9C3D9C 0%, #CB496A 50.5%, #D77446 100%);
}

.comment-box-item:nth-child(even){
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #3D719C 0%, #3B9670 50.5%, #569C3C 100%);
}

.comment-box{
  position: relative;
  z-index: 2;
  background-image: url("../images/common/bg01.png");
  background-size: 134px;
  background-repeat: repeat;
  padding: 30px 21px 56px;
}
.comment-box::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/comment-deco-pc.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1;
}

.comment-info{
  position: relative;
  z-index: 2;
  font-family: TsukuAOldMinPr6N-E;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 20px;
}

.comment-info .comment-post{
  font-size: 24px;
  font-weight: 700;
}

.comment-info .comment-name{
  text-shadow: 0px 5px 3px rgba(0, 0, 0, 0.10);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 7.2px;
}

.comment-info .comment-role{
  display: block;
  font-size: 16px;
  width: 100%;
  text-align: center;
}

.comment-text{
  position: relative;
  z-index: 2;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (max-width : 601px){
  .teaser-comment__bg::before,
  .teaser-comment__bg::after {
    width: 168px;
    height: 142px;
  }

  .teaser-comment__bg::before {
    top: 30px;
    left: -30px;
    background-image: url("../images/common/deco-fw-03.png");
    background-position: top center;
  }

  .teaser-comment__bg::after {
    top: 0;
    right: -50px;
    background-image: url("../images/common/deco-fw-04.png");
    background-position: bottom center;
  }

  .teaser-comment {
    padding: 170px 10px 60px;
  }

  .teaser-comment::after{
    bottom: calc((50 / 375) * -100vw);
  }

  .comment-list{
    margin-top: 40px;
  }
  

  .comment-box::before{
    background-image: url("../images/comment-deco-sp.png");
  }

  .comment-box-item::after{
    width: 300px;
    height: 150px;
    top: calc(100% - 60px);
  }


  .is-suetsugu::after{
    background-image: url("../images/common/deco-fw-05.png");
    left: -60px;
  }

  .is-koizumi::after{
    background-image: url("../images/common/deco-fw-06.png");
    right: -60px;
  }

  .is-fujita::after{
    background-image: url("../images/common/deco-fw-07.png");
    left: -60px;
  }

  .is-sakakibara::after{
    background-image: url("../images/common/deco-fw-08.png");
    right: -60px;
  }

  .comment-info{
    display: block;
    text-align: center;
  }
  .comment-info span{
    display: block;
  }
  .comment-info .comment-role{
    font-size: 15px;
  }
  .comment-text{
    margin-top: 10px;
    font-size: 14px;
  }
  
}

/* ---------------------------------
 原作
--------------------------------- */
.teaser-original{
  position: relative;
  z-index: 3;
  padding: 56px 0 0;
}

.teaser-original::before{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  width: 880px;
  height: 440px;
  top: 0;
  left: -110px;
  background-image: url("../images/common/deco-fw-09.png");
}

.ttl-original{
  position: relative;
  z-index: 2;
}

.original-box{
  margin-top: 50px;
  position: relative;
  z-index: 2;
  padding: 14px;
  border-radius: 4px;
  overflow: hidden;
  background-image: url("../images/common/bg04.png");
  background-size: 200px;
  background-repeat: repeat;
}

.original-box-wrap{
  background-image: url("../images/common/bg01.png");
  background-size: 134px;
  background-repeat: repeat;
  padding: 46px 26px;
}

.original-info__wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 47px;
}

.original-info__wrap.comic_next{
  margin: 20px auto 0;
  padding: 0 27px;
}

.original-img{
  max-width: 180px;
  width: 100%;
}
.original-img div{
  display: block;
  background-image: url("../images/original/original-img.jpg");
  padding-top: calc((278/180)*100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.original-img .comic_1{
  background-image: url("../images/original/original-img.jpg");
}

.original-img .comic_2{
  background-image: url("../images/original/original-img2.jpg");
}

.original-title{
  text-align: center;
  line-height: 1;
}

.original-title span{
  display: block;
}

.original-author{
  font-size: 26px;
  font-weight: 700;
  font-family: TsukuAOldMinPr6N-E;
}
.original-work{
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  font-family: TsukuAOldMinPr6N-E;
}

.original-copyright{
  font-size: 10px;
}

.original-next-serial{
  font-size: 20px;
  font-weight: 700;
  font-family: TsukuAOldMinPr6N-E;
}
.original-next-title{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  font-family: TsukuAOldMinPr6N-E;
}

.original-next-story{
  text-align: left;
  font-size: 16px;
  margin-top: 10px;
  line-height: 1.8;
}


.comic_next .original-link{
  padding: 0 20px;
}

.original-link{
  margin-top: 20px;
  text-align: center;
}

.original-link a{
  display: block;
  padding: 15px 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #9C3D9C 0%, #CB496A 52.94%, #D77446 105.88%);
  box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.15);
  line-height: 32px;
  position: relative;
}
.original-link a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/bg02.png");
  background-size: 200px;
  background-repeat: repeat;
  z-index: 2;
  border-radius: 4px;
}
.original-link a span{
  display: inline-block;
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  position: relative;
  z-index: 3;
}

.original-link a span::before{
  position: relative;
  display: inline-block;
  content: "";
  height: 32px;
  width: 32px;
  background-image: url("../images/common/ico-book.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  vertical-align: bottom;
  margin-right: 5px;
}

.original-text__large{
  font-size: 22px;
  font-weight: 700;
  color: #BE0E57;
  line-height: 1.8;
  margin-top: 20px;
}

.original-text{
  font-size: 16px;
  line-height: 1.8;
  margin-top: 10px;
}

.comic_next +.original-text{
  margin-top: 20px;
}

.original-profile{
  margin-top: 20px;
  padding: 20px 15px;
  border: 1px solid #DDC9A9;
  background-color: #F0E2CC;
}

.profile-name{
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  font-size: 20px;
  justify-content: center;
  display: flex;
  align-items: baseline;
}

.profile-name span{
  margin-right: 20px;
  font-size: 15px;
}

.profile-text{
  font-size: 13px;
  line-height: 1.8;
  margin-top: 10px;
}

@media screen and (max-width : 992px){
  .original-box{
    margin-top: 40px;
  }
  .original-box-wrap{
    padding: 26px 21px;
  }
  .teaser-original{
    padding: 0 10px;
  }
  .teaser-original::before{
    max-width: none;
    top: 0;
    margin: auto;
    left: calc((60/ 375) * -100vw );
    right: calc((60/ 375) * -100vw );
    width: calc((485/ 375) * 100vw );
    height: calc((243/ 375) * 100vw );
  }
  .original-info__wrap{
    display: block;
    padding: 0 10px;
  }
  .original-img{
    max-width: 130px;
    margin: 0 auto;
  }
  .original-title{
    margin: 15px auto 0;
  }
  .original-author{
    font-size: 20px;
  }
  .original-work{
    font-size: 30px;
  }
  .original-link{
    margin-top: 10px;
  }

  .original-link a{
    padding: 15px 5px;
  }

  .original-text__large{
    font-size: 18px;
  }
  .original-text{
    font-size: 14px;
  }
  .comic_next +.original-text{
    margin-top: 10px;
  }
  .profile-name{
    display: block;
    text-align: center;
  }
  .profile-name span{
    display: block;
    margin: 0 auto;
  }
  .original-info__wrap.comic_next{
    padding: 0 10px;
  }

  .comic_next .original-link{
    padding: 0;
  }

  .original-next-title{
    font-size: 18px;
  }

  .original-next-serial{
    font-size: 18px;
  }

  .original-next-story{
    font-size: 14px;
  }


}

/* ---------------------------------
 スタッフ
--------------------------------- */
.teaser-staff__bg{
  position: relative;
}

/* .teaser-staff__bg::before{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  width: 880px;
  height: 440px;
  top: -170px;
  left: -110px;
  background-image: url("../images/common/deco-fw-10.png");
} */

.teaser-staff{
  margin: 80px auto 0;
  padding: 60px 10px;
  background-image: url("../images/common/bg03.png");
  position: relative;
  background-size: 64px auto;
  z-index: 4;
}

.staff-list{
  max-width: 440px;
  margin: 40px auto 0;
}

.staff-item{
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.staff-item:first-child{
  margin-top: 0;
}
.staff-role{
width: calc(45% - 5px);
text-align: right;
}

.staff-role::after{
  content: ":";
  margin-left: 5px;
}

.staff-name{
  width: 55%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.staff-name.script-box span:first-child{
  width: auto;
}

.staff-name.script-box span.is-block{
  display: block;
  width: 100%;
}

.staff-name span{
  display: inline-block;
  margin-left: 5px;
}

.staff-name span:first-child{
  width: 100%;
}
@media screen and (max-width : 992px){
  /* .teaser-staff__bg::before{
    max-width: none;
    width: calc((97/ 375) * -100vw );
    margin: auto;
    left: calc((55/ 375) * -100vw );
    right: calc((55/ 375) * -100vw );
    width: calc((485/ 375) * 100vw );
    height: calc((243/ 375) * 100vw );
    top: -120px;
  } */
  .staff-item{
    font-size: 13px;
  }
  .staff-role{
    width: calc(42% - 3px);
  }
  .staff-role::after{
    margin-left: 3px;
  }
  .staff-name{
    width: 58%;
  }
  .staff-name span{
    margin-left: 3px;
  }
}



/* ---------------------------------
 ティザーTOPICS一覧用
--------------------------------- */
#topics-area.teaser-block{
  margin: 0;
  border: none;
  background-color: #9A342A;
  padding: 60px 20px;
  position: relative;
  z-index: 3;
}

.teaser-block-title{}

#topics.drama-area{
  padding: 0;
  margin: 0;
}

#topics .drama-box-body{
  background: none;
}

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

#topics .topics-list{
  margin-top: 40px;
}

#topics .topics-item{
  width: calc((100% - 10px) / 2);
}
#topics .topics-item:not(:first-child){
  margin-left: 0;
}

#topics .topics-item:nth-child(n+3){
  margin-top: 10px;
}
#topics .topics-item:nth-child(even){
  margin-left: 10px;
}

@media screen and (max-width : 992px){
  #topics .topics-item{
    width: 100%;
  }
  #topics .topics-item:nth-child(n+3){
    margin-top: 0;
  }
  #topics .topics-item:nth-child(even){
    margin-left: 0;
  }
}


/* ボタン */
#topics .topics-btn{
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 4px;

}

#topics .drama-btn.btn-more {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  word-break: break-all;
  position: relative;
  background: #ffffff;
  padding: 12px 0px;
  font-size: 1.4rem;
  line-height: 1;
  color: #3E2603;
  border-radius: 4px;
  overflow: hidden;
}
#topics .drama-btn.btn-more i {
  font-size: 1.5em;
  margin-right: 5px;
  vertical-align: sub;
}

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

  #topics .topics-btn {
    padding: 10px;
    margin: 0;
  }

}



/* ---------------------------------
 MAINV下SNS
--------------------------------- */
.teaser-topsns{
  margin: 30px auto 0;
  max-width: 170px;
  position: relative;
  z-index: 3;
}
.teaser-topsns .teaser-topsns-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.teaser-topsns .teaser-topsns-list li{
  width: 50px;
  margin-left: 10px;
  line-height: 1;
  filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.35));
}
.teaser-topsns  .teaser-topsns-list li:first-child{
  margin-left: 0px;
}
.teaser-topsns .teaser-topsns-list li img{
  width: 100%;
  border-radius: 4px;
}
.teaser-topsns .teaser-topsns-list li a{
  transition: .3s;
}
.teaser-topsns .teaser-topsns-list li a:hover{
  opacity: .75;
}

@media screen and (max-width: 992px) {
  .teaser-topsns{
    margin: 20px auto 0;
  }
}


/* ---------------------------------
 SNSエリア
--------------------------------- */

.teaser-twitter{
  position: relative; 
  margin-bottom: 30px;
}

.teaser-twitter::before{
  content: "";
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  width: 880px;
  height: 440px;
  bottom: -100px;
  left: -110px;
  background-image: url("../images/common/deco-fw-09.png");
}


@media screen and (max-width : 992px){
  .teaser-twitter{
    margin-bottom: 40px;
  }
  .teaser-twitter::before{
    max-width: none;
    margin: auto;
    bottom: calc((100/ 375) * -100vw );
    left: calc((60/ 375) * -100vw );
    right: calc((60/ 375) * -100vw );
    width: calc((485/ 375) * 100vw );
    height: calc((243/ 375) * 100vw );
  }
}

#twitter .teaser-block-inner{
position: relative;
z-index: 3;
padding: 60px 20px;
background-image: url("../images/common/bg03.png");
background-size: 64px auto;
}

/* タイムライン */
.teaser-contents .twitter-area{
  margin: 40px auto 0;
}
.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;
}

.sns-link{
  max-width: 440px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px auto 0;
}

.sns-link .sns-item{
  width: calc((100% - 40px) / 3);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.35);
}

.sns-link .sns-item a{
  display: block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  padding-top: calc((116 / 133)*100%);
}

.twitter-link{
}

.twitter-link a{
  background-image: url("../images/btn-x.png");
}

.insta-link a{
  background-image: url("../images/btn-insta.png");
  position: relative;
}
.insta-link a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff;
  border-radius: 5px;
}

.tiktok-link a{
  background-image: url("../images/btn-tiktok.png");
}

@media screen and (max-width: 601px) {
  .sns-link{
    gap: 10px;
  }
}

/* ---------------------------------
 関連バナー
--------------------------------- */
#sect-related.teaser-block{
  position: relative;
  z-index: 3;
}

#sect-related.teaser-block .related-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
  /* margin: 30px auto 0; */
  margin: 0 auto;
}
#sect-related.teaser-block .related-list li{
  width: calc(50% - 5px);
}
#sect-related.teaser-block .related-list li:nth-child(even){
  margin-left: 10px;
}
#sect-related.teaser-block .related-list li:nth-child(n+3){
  margin-top: 10px;
}
#sect-related.teaser-block .related-list li img{
  width: 100%;
}

@media screen and (max-width: 992px) {
  #sect-related.teaser-block .related-list{
    display: block;
    padding: 0 40px 40px;
    /* margin: 40px auto 0; */
    margin: 0 auto;
    max-width: 600px;
  }
  #sect-related.teaser-block .related-list li{
    width: 100%;
  }
  #sect-related.teaser-block .related-list li:nth-child(even){
    margin-left: 0;
  }
  #sect-related.teaser-block .related-list li:nth-child(n+3){
    margin-top: 0;
  }
  #sect-related.teaser-block .related-list li:not(:first-child){
    margin-top: 10px;
  }
  #sect-related.teaser-block .related-list li img{
    width: 100%;
  }
}