@charset "utf-8";

/* -------------------------------------
共通パーツ
------------------------------------- */
.sec__txt {
  margin-bottom: clamp(18px, 2.57vw, 37px);
  font-size: clamp(14px, 1.53vw, 22px);
  line-height: 1.675;
}
.sec__txt:last-child {
  margin-bottom: 0;
}

/* -------------------------------------
fv
------------------------------------- */
.fv {
  padding-top: 122px;
  padding-bottom: 45px;
}
.fv__wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.fv__left {
  width: 50%;
}
.fv__right {
  width: 50%;
  padding-left: 4.5vw;
}
.fv__rightInner {
  max-width: 465px;
}
.fv__txt {
  padding-top: 33px;
  margin-bottom: 52px;
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.39vw, 20px);

  letter-spacing: 0.15em;
  text-align: center;
}
.fv__pic {
  width: 100%;
}
.fv__logo {
  width: 100%;
  margin-bottom: 26px;
}
.fv__period {
  width: 200px;
  margin: 0 auto 17px;
}
.fv__day {
  font-size: clamp(18px, 1.81vw, 26px);
  letter-spacing: 0.05em;
  text-align: center;
}

/* スクロールダウンの位置 */
.scroll {
  /* width: 100%; */
  position: absolute;
  right: 7%;
  top: 56%;
  writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
  display: block;
  animation: scroll 2s infinite;
  background-color: #fff;
  bottom: -130px;
  content: "";
  height: 124px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.scroll__txt {
  display: inline-block;
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: 20px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1300px) {
  .scroll {
    top: 90%;
    right: 47%;
  }
  .scroll__txt {
    font-size: 15px;
    min-height: 95px;
  }
  .scroll::before {
    bottom: -90px;
    height: 80px;
  }
}
@media screen and (max-width: 750px) {
  .fv {
    padding-top: 50px;
  }
  .fv__wrap {
    flex-direction: column-reverse;
    gap: 7vw;
  }
  .fv__left {
    width: 100%;
  }
  .fv__right {
    width: 100%;
    padding-left: 0;
  }
  .fv__rightInner {
    max-width: none;
    margin: 0 auto;
  }
  .fv__logo {
    max-width: 300px;
    margin: 0 auto 20px;
  }
  .fv__period {
    width: 183px;
    margin: 0 auto 27px;
  }
  .scroll {
    display: none;
  }
}

/* -------------------------------------
intro
------------------------------------- */
.intro {
  position: relative;
}
.intro__deco {
  position: absolute;
  width: 40%;
  /* max-width: 637px; */
  top: 0;
  left: 0;
  z-index: -1;
}
.intro__top {
  padding-top: 213px;
}
.intro__topContainer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.intro__topLeft {
  width: 41%;
  padding-right: 2vw;
  padding-left: clamp(50px, 8.61vw, 124px);
}
.intro__topLeftPic {
  width: 91%;
}
.intro__topRight {
  width: 59%;
}
.intro__ttl {
  padding-top: clamp(15px, 2.29vw, 33px);

  margin-bottom: clamp(70px, 13.19vw, 190px);
  font-size: clamp(20px, 2.43vw, 35px);
  line-height: 1.7;
}
.intro__topRightPic {
  margin-bottom: clamp(20px, 3.75vw, 54px);
}
.intro__topRightTxt {
  padding-left: clamp(30px, 6.6vw, 95px);
}
.intro__bottom {
  position: relative;
  z-index: -1;
  margin-top: -17vw;
}
.intro__bottomContainer {
  width: 100%;
  position: absolute;
  top: 27vw;
  left: 0;
}
.intro__bottomLeftTxt {
  margin-left: 20px;
}
@media screen and (max-width: 1440px) {
  .intro__bottomContainer {
    padding-left: clamp(50px, 8.61vw, 124px);
  }
}
@media screen and (max-width: 750px) {
  .intro {
    padding-bottom: 100px;
  }
  .intro__top {
    padding-top: 100px;
  }
  .intro__topContainer {
    flex-direction: column;
  }
  .intro__topLeft {
    width: 100%;
    padding: 0;
  }
  .intro__topRight {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .intro__topRightPic {
    margin-bottom: 50px;
  }
  .intro__ttl {
    margin: 0 auto 50px;
  }
  .intro__topLeftPic {
    width: 100%;
    margin-bottom: 50px;
  }
  .intro__topRightTxt {
    padding-left: 0;
    margin-bottom: 150px;
  }
  .intro__bottom {
    top: 0;
    z-index: 1;
  }
  .intro__bottomContainer {
    position: static;
    padding-left: 0;
  }
}

/* -------------------------------------
drama
------------------------------------- */
/* AOS アニメーション ↓ */
/* 初期状態 */
[data-aos="scary-fade"] {
  opacity: 0;
  transform: scale(0.8) rotateX(30deg);
  filter: blur(8px) brightness(0.5);
  transition-property: opacity, transform, filter;
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* アニメーション時 */
[data-aos="scary-fade"].aos-animate {
  opacity: 1;
  transform: scale(1) rotateX(0);
  filter: blur(0px) brightness(1);
}

.drama {
  margin-top: 50px;
  margin-bottom: 49px;
  background: url(../imgs/index/drama_bg.jpg) repeat-x center top;
  /* background: url(../imgs/index/drama_bg.jpg) center center / cover no-repeat; */
}
.drama__ttlBox {
  padding-top: 96px;
  padding-bottom: 77px;
}
.drama__ttl-en {
  display: block;
  margin-bottom: 2px;
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 23px);
  letter-spacing: 0.1em;
  text-align: center;
}

.drama__ttl-jp {
  display: block;
  margin-bottom: 26px;
  font-family: "zen-antique-soft", sans-serif;
  font-size: clamp(23px, 2.43vw, 35px);
  text-align: center;
}
.drama__subTxt {
  font-size: clamp(30px, 3.47vw, 50px);
  font-family: "isego", sans-serif;
  font-weight: 700;
  text-align: center;
}
.drama__wrap {
  position: relative;
  margin-bottom: 144px;
}
.drama__rightPic {
  position: absolute;
  max-width: 855px;
  width: 60%;
  top: 0;
  right: 0;
  /* z-index: -1; */
}
.drama__heading {
  padding-top: 52px;
  margin-bottom: 42px;
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: clamp(25px, 3.47vw, 50px);
  letter-spacing: 0.1em;
  color: #b93500;
}
.drama__txt {
  margin-bottom: clamp(50px, 7.22vw, 104px);
  position: relative;
  z-index: 1;
}
.drama__gallery {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6vw;
}
.drama__galleryPic01 {
  width: 56%;
}
.drama__galleryPic02 {
  width: 19%;
}
.drama__galleryPic02 .img {
  transform: translate(0px, -15px);
}
.drama__videoHeading {
  margin-bottom: 22px;
  font-size: clamp(25px, 7.22vw, 40px);
  letter-spacing: 0.1em;
  text-align: center;
}
/* AOS表示時に一度だけ色を変える */
.drama__videoHeading.aos-animate .red {
  animation: colorChange 1s ease-out forwards;
}
/* アニメーション定義 */
@keyframes colorChange {
  0% {
    color: #fff;
  }
  80% {
    color: #fff; /* 80%までは白のまま */
  }
  100% {
    color: #b93500; /* 最後に赤茶に切り替わる */
  }
}
.drama__videoTxt {
  margin-bottom: 48px;
  font-size: clamp(16px, 1.53vw, 22px);
  text-align: center;
}
.past-text {
  padding: 11vw 0 30vw;
  background: url("../imgs/index/bg_chain.png") center center / cover no-repeat;
}
.past-text .inner {
  width: 92%;
  margin: 0 auto;
}
.past-text p {
  line-height: 1.94;
  margin-bottom: 0;
}
.drama__videoWrap {
  width: 92%;
  max-width: 720px;
  margin: 0 auto;
  cursor: pointer;
}
.drama__videoWrap .img {
  border: 1px solid #fff;
}

.drama__continuted {
  max-width: 1115px;
  padding-right: 15px;
  /* padding-top: 637px; */
  /* padding-bottom: 75px; */
  margin: 0 auto clamp(20px, 5.14vw, 74px);
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.08vw, 30px);
  letter-spacing: 0.1em;
  text-align: right;
}
.drama__foot {
  position: relative;
}
.drama__container {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.drama__btn {
  width: 30%;
  max-width: 320px;
  min-width: 189px;
  margin: 0 auto 0;
}
.drama__btnLink {
  display: block;
  width: 100%;
}

.copy {
  margin-top: clamp(20px, 12.01vw, 173px);
  font-family: "westsac", sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.39vw, 20px);
  letter-spacing: 0.05em;
  text-align: center;
}

@media screen and (max-width: 980px) {
  .past-text {
    padding: 11vw 0 32vw;
  }
}

@media screen and (max-width: 750px) {
  .drama {
    margin-top: -20px;
  }
  .drama__rightPic {
    position: static;
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .past-text {
    padding: 14vw 0 43vw;
    background: url("../imgs/index/bg_chain_sp.png") center center / cover no-repeat;
  }
}