@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

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

 Layout

==================================*/
.teaser-block{
  padding-bottom: 8%;
}
#cast .teaser-block-title{
  background-image: url(../images/cast/tit_cast.png);
  padding-top: 13.4%;
  margin-bottom: 6%;
}
#cast .teaser-cast-img figure{
  display: block;
  width: 100%;
  padding-top: 66.72%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
#cast #sakurai .teaser-cast-img figure{
  background-image: url(../images/cast/img_sakurai.jpg);
}
#cast #ueda .teaser-cast-img figure{
  background-image: url(../images/cast/img_ueda.jpg);
}
#cast #hagino .teaser-cast-img figure{
  background-image: url(../images/cast/img_hagino.jpg);
}
#cast .teaser-cast-img p{
  display: none;
}
#cast .teaser-cast-comment{
  padding: 6.3% 0;
}
#cast .teaser-cast-comment .comment-title{
  color: #102d69;
  text-align: center;
}
#cast .teaser-cast-comment .comment-title .en{
  font-size: 2.4rem;
  display: block;
  letter-spacing: 0.2em;
}
#cast .teaser-cast-comment .comment-title .jp{
  display: inline-block;  
  padding: 0 4px;
  color: #fff;
  background-color: #102d69;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
#cast .teaser-cast-comment .comment-item{
  text-align: justify;
  width: 100%;
  margin-top: 10%;
}
#cast .teaser-cast-comment .comment-item dt, #cast .teaser-cast-comment .comment-item dd{
  letter-spacing: 0.08em;
}
#cast .teaser-cast-comment .comment-item dt{
  display: flex;
  align-items: center;
  color: #102d69;
  font-weight: 600;
  line-height: 1.6;
}
#cast .teaser-cast-comment .comment-item dt span.q{
  width: 8%;
  padding-top: 8%;
  display: inline-block;
  background-image: url(../images/cast/img_q.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
#cast .teaser-cast-comment .comment-item dt span.text-box{
  width: 92%;
  display: inline-block;
  padding-left: 5%;
}
#cast .teaser-cast-comment .comment-item dd{
  margin-top: 5%;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media screen and (max-width: 992px) {
  #cast .teaser-cast-comment .comment-item dt span.q{
  padding-top: 12%;
}
}

/* ---------------------------------
 tablet用(SP設定を上書き）
--------------------------------- */
@media screen and (min-width : 601px){
}
/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
  .teaser-block{
    padding-top: 0;
  }
  #cast .teaser-block-title{
    padding-top: 8.13%;
    margin-bottom: 40px;
  }
  #cast .teaser-cast-comment{
    padding: 40px 0;
  }
  #cast .teaser-cast-comment .comment-title .en{
    font-size: 3.2rem;
  }
  #cast .teaser-cast-comment .comment-item{
    margin-top: 40px;
    font-size: 1.6rem;
  }
  #cast .teaser-cast-comment .comment-item dt span.text-box{
    padding-left: 10px;
    padding-right: 8px;
  }
  #cast .teaser-cast-comment .comment-item dd{
    margin-top: 24px;
    padding: 0 8px;
  }
}