@charset "UTF-8";

.intro {
  container-type: inline-size;
  position: relative;
  z-index: 4;
  width: 100%;
  margin-bottom: -100px;
  aspect-ratio: 1440 / 674;
  background-color: #fff;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 100px),
    calc(100% - 100px) 100%,
    100px 100%,
    0 calc(100% - 100px)
  );
}

.intro__stage {
  --intro-u: calc(100cqw / 1440);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: calc(674 * var(--intro-u));
}

.intro__stage img {
  display: block;
  position: absolute;
  max-width: none;
}

.intro__lead {
  position: absolute;
  top: calc(193 * var(--intro-u));
  left: 50%;
  width: calc(553 * var(--intro-u));
  margin: 0;
  transform: translateX(-50%);
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(24 * var(--intro-u));
  font-weight: 700;
  line-height: 3;
  letter-spacing: 0.03em;
  text-align: center;
}

.intro__line {
  display: inline-block;
}

.is-intro-anim .intro__lead {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.is-intro-anim .intro__lead.is-show {
  opacity: 1;
}

.intro__scenes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.intro__scene {
  position: absolute;
  overflow: hidden;
  width: calc(363 * var(--intro-u));
  height: calc(222 * var(--intro-u));
}

.intro__scene img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro__scene--01,
.intro__scene--02,
.intro__scene--03 {
  left: calc(1 * var(--intro-u));
}

.intro__scene--04,
.intro__scene--05,
.intro__scene--06 {
  left: calc(1077 * var(--intro-u));
}

.intro__scene--01,
.intro__scene--04 {
  top: 0;
}

.intro__scene--02,
.intro__scene--05 {
  top: calc(226 * var(--intro-u));
}

.intro__scene--03,
.intro__scene--06 {
  top: calc(452 * var(--intro-u));
}

.is-intro-anim .intro__scene {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.is-intro-anim .intro__scene.is-show {
  opacity: 1;
}

.is-intro-anim .intro__scene--04 {
  transition-delay: 0.15s;
}

.is-intro-anim .intro__scene--02,
.is-intro-anim .intro__scene--05 {
  transition-delay: 0.3s;
}

.is-intro-anim .intro__scene--03,
.is-intro-anim .intro__scene--06 {
  transition-delay: 0.45s;
}

@media screen and (max-width: 750px) {
  .intro {
    z-index: 4;
    margin-bottom: -26px;
    aspect-ratio: 375 / 635;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 26px),
      calc(100% - 26px) 100%,
      26px 100%,
      0 calc(100% - 26px)
    );
  }

  .intro__stage {
    --intro-u: calc(100cqw / 375);
    height: calc(635 * var(--intro-u));
  }

  .intro__lead {
    top: calc(220 * var(--intro-u));
    width: calc(339 * var(--intro-u));
    font-size: calc(15 * var(--intro-u));
    line-height: 2.5;
  }

  .intro__scene {
    width: calc(123.68 * var(--intro-u));
    height: calc(161 * var(--intro-u));
  }

  .intro__scene--01,
  .intro__scene--06 {
    left: 0;
  }

  .intro__scene--02,
  .intro__scene--05 {
    left: calc(125.68 * var(--intro-u));
  }

  .intro__scene--03,
  .intro__scene--04 {
    left: calc(251.36 * var(--intro-u));
  }

  .intro__scene--01,
  .intro__scene--02,
  .intro__scene--03 {
    top: 0;
  }

  .intro__scene--04,
  .intro__scene--05,
  .intro__scene--06 {
    top: calc(475 * var(--intro-u));
  }
}