@charset "utf-8";
/*-----------------------------------------------
* caststaff
-------------------------------------------------*/
.caststaff__inner {
  position: relative
}

.caststaff__title {
  text-align: center;
  margin-bottom: min(4.3333333333vw, 65px);
  text-transform: uppercase
}

.caststaff__title>span {
  padding: min(.4166666667vw, 6.25px) min(1.6666666667vw, 25px);
  background-color: #917745;
  font-size: min(3.3333333333vw, 50px);
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  line-height: 1.5
}

.lang-kr .caststaff__title>span {
  font-family: "Noto Serif KR", serif
}

@media screen and (max-width: 768px) {
  .caststaff__title>span {
    padding: max(.6666666667vw, 3.3333333333px) max(2.6666666667vw, 13.3333333333px);
    font-size: max(5.3333333333vw, 26.6666666667px)
  }
}

.caststaff__subtitle {
  font-size: min(1.3333333333vw, 20px);
  text-align: center;
  margin-bottom: 4rem
}

@media screen and (max-width: 768px) {
  .caststaff__subtitle {
    font-size: max(2.1333333333vw, 10.6666666667px);
    margin-bottom: 2rem
  }
}

.cast {
  overflow: hidden
}

.cast__inner {
  position: relative
}

@media screen and (max-width: 768px) {
  .cast__inner {
    margin-top: max(2.6666666667vw, 13.3333333333px)
  }
}

.cast__list {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: unset;
  -webkit-box-direction: unset;
  -ms-flex-direction: unset;
  flex-direction: unset;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: min(3.3333333333vw, 50px);
  justify-content: center;
  margin-bottom: min(1.3333333333vw, 20px)
}

@media screen and (max-width: 768px) {
  .cast__list {
    /* gap: max(5.3333333333vw, 26.6666666667px); */
    gap: 15px;
    margin-bottom: max(2.1333333333vw, 10.6666666667px)
  }
}

.cast__item {
  width: calc(50% - min(3.3333333333vw, 50px));
  position: relative
}

@media screen and (max-width: 768px) {
  .cast__item {
    width: calc(50% - max(2.6666666667vw, 13.3333333333px));
    display: inline-block
  }
}

.cast__item>a::before {
  content: "";
  display: inline-block;
  content: "";
  width: 100%;
  display: inline-block;
  padding-top: 139.7537728356%;
  position: absolute;
  background: url("../img/common/ptn/waku.png") no-repeat center bottom/contain;
  z-index: 10
}

.cast__item>a:hover img {
  -webkit-filter: sepia(0.4);
  filter: sepia(0.4);
  -webkit-transform: scale(0.98);
  transform: scale(0.98)
}

.cast__item>a.nolink {
  pointer-events: none
}

.cast__item--img {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transform-origin: center;
  transform-origin: center;
  overflow: hidden
}

.cast__item--img img {
  width: 100%;
  -webkit-transition: all .2s ease !important;
  transition: all .2s ease !important
}
@keyframes castChanger {
  0%,37.5%,100% {
    opacity:0;
  }
  50%,87.5% {
    opacity:1;
  }
}
.cast__item--img img:nth-child(2){
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  animation:castChanger 8s linear infinite;
}
.cast__item--name {
  width: 100%;
  min-height: 96px;
  position: absolute;
  bottom: 3rem;
  background-color: rgba(0, 0, 0, .5);
  z-index: 9;
  padding: 2.4rem 0
}

@media screen and (max-width: 768px) {
  .cast__item--name {
    min-height: max(14.6666666667vw, 73.3333333333px);
    padding: 1rem 0 2.5rem;
    bottom: 0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
}

.cast__item--name>p {
  font-size: min(1.6666666667vw, 25px);
  line-height: 1.5;
  text-align: center;
  color: #d8a23a
}

@media screen and (max-width: 768px) {
  .cast__item--name>p {
    font-size: max(2.6666666667vw, 13.3333333333px)
  }
}

@media screen and (min-width: 769px) {
  .cast__more {
    position: relative;
    top: calc(min(7.6666666667vw, 115px)*-1);
    margin-top: -1.5rem
  }
}

@media screen and (max-width: 768px) {
  .cast__more {
    position: relative;
    top: calc(max(12.2666666667vw, 61.3333333333px)*-1);
    margin-top: -1.5rem
  }
}

.cast__more--btn {
  width: min(6.25vw, 93.75px);
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

@media screen and (max-width: 768px) {
  .cast__more--btn {
    width: max(12vw, 60px)
  }
}

.cast__more--btn>a {
  position: relative
}

.cast__more--btn::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 1px;
  height: 6rem;
  background-color: rgba(255, 255, 255, .25)
}

@media screen and (max-width: 768px) {
  .cast__more--btn::before {
    height: 4rem
  }
}

.cast__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

@media screen and (max-width: 768px) {
  .cast__bg {
    gap: max(4vw, 20px)
  }
}

.cast__bg--item {
  position: relative;
  height: 44.6vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-width: 768px) {
  .cast__bg--item {
    height: 64.4vw
  }
}

@media screen and (min-width: 769px) {
  .cast__bg--item:nth-child(6) {
    margin-top: min(13.3333333333vw, 200px)
  }
}

@media screen and (max-width: 768px) {
  .cast__bg--item:nth-child(8) {
    margin-top: 20vw
  }
}

@media screen and (min-width: 769px) {
  .cast__bg--item.sp {
    display: none
  }
}

.cast__bg--item>.tbg__light {
  width: 100%;
  height: min(20vw, 300px);
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
  background-position: center center
}

.cast__text {
  margin: 5rem 0;
  text-align: center;
  font-size: min(1.1666666667vw, 17.5px)
}

@media screen and (max-width: 768px) {
  .cast__text {
    margin: 2.5rem 0;
    font-size: max(1.8666666667vw, 9.3333333333px);
    padding: 0 max(5.3333333333vw, 26.6666666667px)
  }
}

.staff {
  margin-top: min(5vw, 75px)
}

@media screen and (max-width: 768px) {
  .staff {
    margin-top: max(8vw, 40px)
  }
}

.staff__inner {
  margin: 0 auto
}

@media screen and (min-width: 769px) {
  .staff__inner {
    max-width: 1680px;
    padding: 0 min(10vw, 150px)
  }
}

@media screen and (max-width: 768px) {
  .staff__inner {
    padding: 0 max(10.6666666667vw, 53.3333333333px)
  }
}

.staff__inner+.staff__inner {
  margin-top: min(5vw, 75px);
  margin-bottom: min(5vw, 75px)
}

@media screen and (max-width: 768px) {
  .staff__inner+.staff__inner {
    margin-top: max(8vw, 40px);
    margin-bottom: max(8vw, 40px)
  }
}

.staff__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: unset;
  -webkit-box-direction: unset;
  -ms-flex-direction: unset;
  flex-direction: unset;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: min(3.3333333333vw, 50px) min(7.5vw, 112.5px);
  margin-bottom:40px;
}

@media screen and (max-width: 768px) {
  .staff__list {
    gap: max(5.3333333333vw, 26.6666666667px) 0
  }
}

.staff__item {
  width: calc(25% - min(5.8333333333vw, 87.5px))
}

@media screen and (max-width: 768px) {
  .staff__item {
    width: 50%
  }
}

.staff__item.item-large {
  width: calc(50% - min(4.1666666667vw, 62.5px))
}

@media screen and (max-width: 768px) {
  .staff__item.item-large {
    width: 100%
  }
}

.staff__item>dt {
  font-size: min(1.25vw, 18.75px);
  color: #917745
}

@media screen and (max-width: 768px) {
  .staff__item>dt {
    font-size: max(2.4vw, 12px)
  }
}

.staff__item>dd {
  font-size: min(1.5vw, 22.5px);
  margin-top: min(1.3333333333vw, 20px)
}

@media screen and (max-width: 768px) {
  .staff__item>dd {
    font-size: max(2.4vw, 12px)
  }
}

.staff__item>dd>small {
  font-size: min(1.1666666667vw, 17.5px)
}

@media screen and (max-width: 768px) {
  .staff__item>dd>small {
    font-size: max(2vw, 10px)
  }
}

.staff__cmt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: min(.6666666667vw, 10px);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  display: inline-block
}

.staff__cmt--icon {
  width: min(2vw, 30px);
  height: min(1.8333333333vw, 27.5px);
  position: absolute;
  right: min(-2.6666666667vw, -40px)
}

@media screen and (max-width: 768px) {
  .staff__cmt--icon {
    width: max(3.2vw, 16px);
    height: max(2.9333333333vw, 14.6666666667px);
    right: max(-4.2666666667vw, -21.3333333333px)
  }
}

.staff__cmt--icon>a {
  width: 100%;
  height: 100%;
  display: block;
  background: url("../img/common/icon/icon_comment.png") no-repeat center center/contain;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease
}

.staff__cmt--icon>a:hover {
  -webkit-transform: scale(0.85);
  transform: scale(0.85)
}

.staff__ensemble {
  margin-top: min(5vw, 75px);
  margin-bottom: min(6.6666666667vw, 100px)
}

.staff__ensemble>p {
  text-align: center;
  font-size: min(1.5vw, 22.5px)
}

@media screen and (max-width: 768px) {
  .staff__ensemble>p {
    font-size: max(2.6666666667vw, 13.3333333333px)
  }
}

.staff__ensemble>p small {
  margin-top: min(.8333333333vw, 12.5px);
  font-size: min(1.1666666667vw, 17.5px);
  display: block
}

@media screen and (max-width: 768px) {
  .staff__ensemble>p small {
    margin-top: max(1.3333333333vw, 6.6666666667px);
    font-size: max(1.8666666667vw, 9.3333333333px)
  }
}

.staff__text {
  width: 100%;
  font-size: min(1vw, 15px);
  margin-bottom:100px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .staff__text {
    font-size: max(1.3333333333vw, 6.6666666667px);
    margin-bottom:10vw;
  }
}


/* cast__diagram */
.cast__diagram{
  margin-bottom: 100px;
}

.cast__diagram>img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .cast__diagram{
    padding: 0 4%;
    margin-bottom: 50px;
  }
  .cast__diagram--text{
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
  }
}

/* モーダルオープンをキャンセルする */
.is-noopen {
  touch-action: none;
  user-select: none;
  pointer-events: none;
}

.is-noopen:hover img{
  filter: none;
  transform: scale(100%);
}