@charset "UTF-8";
/* 下層共通 */
.teaser-main-mainImg{
	margin-top: 0;
}
.teaser-main-mainImg::before{
	display: none;
}
.teaser-contents{
	padding: 60px 0 120px;
}
/* ---------------------------------
 キャスト
--------------------------------- */
#cast .teaser-block-title{
  margin: 0 auto 30px;
  max-width: 146px;
  aspect-ratio: 146 / 65;
  background-image: url('../images/common/ttl/ttl-cast.png');
}
#cast .teaser-block-title::before{
  top: -9px;
  left: -18px;
}
#cast .teaser-block-title::after{
  right: -27px;
  bottom: 22px;
}
#cast .cast-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 20px;
}
#cast .cast-container img.main{
  display: block;
  aspect-ratio: 1 / 1;
  background: #D9D9D9;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
}
#cast .cast-container .spec{
  padding-top: 20px;
}
#cast .cast-container .spec .role{
  font-family: var(--mincho);
  font-size: 3.6rem;
  line-height: 100%;
  letter-spacing: 1.05px;
  text-align: center;
  color: var(--tg-demiblack);
}
#cast .cast-container .spec .role span{
  display: block;
  font-size: 1.7rem;
  letter-spacing: 1.1px;
}
#cast .cast-container .spec .role span.green{
  color: var(--tg-green);
}
#cast .cast-container .spec .role span.red{
  color: var(--tg-red);
}
#cast .cast-container .spec .actor{
  padding-top: 20px;
  font-family: var(--mincho);
  font-size: 2.8rem;
  line-height: 100%;
  letter-spacing: 1.05px;
  text-align: center;
  color: var(--tg-demiblack);
}
#cast .cast-container .spec .actor span{
  display: inline-flex;
  vertical-align: bottom;
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 1.4rem;
}
/* ---------------------------------
 相関図
--------------------------------- */
#chart .teaser-block-title{
  margin: 0 auto 30px;
  max-width: 158px;
  aspect-ratio: 158 / 65;
  background-image: url('../images/common/ttl/ttl-chart.png');
}
#chart .teaser-block-title::before{
  top: -9px;
  left: -28px;
}
#chart .teaser-block-title::after{
  right: -18px;
  bottom: 12px;
}
#chart .chart-container{
  padding: 20px;
  background: #F7F7F9;
}
#chart .chart-container img{
  -webkit-tap-highlight-color: transparent;
}
#chart .chart-caption{
  position: relative;
  margin: 0 auto 30px;
  width: fit-content;
  font-size: 1.4rem;
  text-align: center;
}
#chart .chart-caption span{
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: -24px;
  display: block;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url('../images/cast/chart-icn.png') no-repeat center top / cover;
}
/*==================================
modal
==================================*/
.modal {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(199, 207, 215, 0.60);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  z-index: 5;
}
.js-modal-close {
  position: fixed;
  width: 100%;
  height: 100vh;
}
.modal-container{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  max-height: 90%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modal-container::-webkit-scrollbar{
  display:none;
}
.modal_content {
  position: relative;
  padding: 50px 30px;
  border-radius: 5px 100px;
  background: url('../images/common/bg-noise-01.png') var(--white);
  background-size: 200px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
}
.modal .close_btn{
  position: absolute;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  top: 5px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: url('../images/common/ico-close-gray.svg') no-repeat center 50% / cover;
}
.modal .chart-profile{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  overflow-y:auto;
}
.modal .img-area{
  margin: 0 auto;
  max-width: 260px;
  border-radius: 5px;
  overflow: hidden;
}
.modal .detail{
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}
.modal .detail .role{
  font-family: var(--mincho);
  font-size: 3.6rem;
  line-height: 100%;
  letter-spacing: 1.05px;
  text-align: center;
  color: var(--tg-demiblack);
}
.modal .detail .role span{
  display: block;
  font-size: 1.7rem;
  letter-spacing: 1.1px;
  color: var(--tg-pink);
}
.modal .detail .role span.green{
  color: var(--tg-green); 
}
.modal .detail .role span.red{
  color: var(--tg-red); 
}
.modal .detail .actor{
  padding-top: 10px;
  font-family: var(--mincho);
  font-size: 2.8rem;
  line-height: 100%;
  letter-spacing: 1.05px;
  text-align: center;
  color: var(--tg-demiblack);
}
.modal .detail .actor span {
  display: inline-flex;
  vertical-align: bottom;
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 1.4rem;
}
.modal .detail p{
  font-size: 1.4rem;
  line-height: 160%;
  text-align: center;
}
.modal .detail p strong{
  display: block;
  font-family: var(--mincho);
  font-size: 1.6rem;
}
.modal .detail .btn{
  margin-top: 0;
}

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

 MEDIA QUERY

==================================*/
@media screen and (max-width: 992px) {
  /* 下層共通 */
  .teaser-main-mainImg{
    margin: 0;
  }
  #chart .chart-caption{
    font-size: 1.3rem;
  }
  #chart .chart-caption span{
    width: 16px;
    height: 16px;
    transform: unset;
    top: 5px;
    left: -18px;
  }
}
@media screen and (max-width: 640px) {
  /* 下層共通 */
  .teaser-main-nav{
    padding-top: 15px;
  }
  .teaser-contents{
    padding: 40px 0 100px;
  }
  /* cast */
  #cast .teaser-block-title{
    margin-bottom: 20px;
    max-width: 85.35px;
  }
  #cast .teaser-block-title::before{
    top: -6px;
    left: -12px;
  }
  #cast .teaser-block-title::after{
    right: -18px;
    bottom: 11px;
  }
  #cast .cast-container{
    gap: 10px;
    padding: 0;
  }
  #cast .cast-container .spec{
    padding-top: 10px;
  }
  #cast .cast-container .spec .role{
    font-size: 2.2rem;
  }
  #cast .cast-container .spec .role span{
    font-size: 1.3rem;
  }
  #cast .cast-container .spec .actor{
    padding-top: 10px;
    font-size: 1.8rem;
  }
  #cast .cast-container .spec .actor span{
    font-size: 1rem;
  }
  /* 相関図 */
  #chart .teaser-block-title{
    margin-bottom: 20px;
    max-width: 92.37px;
  }
  #chart .teaser-block-title::before{
    top: -7px;
    left: -18px;
  }
  #chart .teaser-block-title::after{
    right: -12px;
    bottom: 5px;
  }
  #chart .chart-container{
    padding: 15px;
  }
  #chart .chart-caption{
    margin-bottom: 20px;
    font-size: 1.1rem;
  }
  #chart .chart-caption span{
    top: 2px;
  }
  /* modal */
  .modal_content{
    padding: 30px 20px;
    border-radius: 2.5px 50px;
  }
  .modal .close_btn{
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
  }
  .modal .chart-profile{
    gap: 15px;
  }
  .modal .img-area{
    max-width: 200px;
  }
  .modal .detail{
    gap: 15px;
  }
  .modal .detail .role{
    font-size: 2.2rem;
  }
  .modal .detail .role span{
    font-size: 1.3rem;
  }
  .modal .detail .actor{
    padding-top: 0;
    font-size: 1.8rem;
  }
  .modal .detail .actor span{
    font-size: 1rem;
  }
  .modal .detail p{
    font-size: 1.3rem;
  }
  .modal .detail p strong{
    font-size: 1.5rem;
  }
}