:root {
  --primary-color: #ffd100;
}

.page {
  overflow-y: auto;
  height: 100dvh;
  scroll-snap-type: y mandatory;
}

/* hero */
.hero {
  position: relative;
  scroll-snap-align: start;
  height: 100svh;
  min-height: calc(var(--rem) * 400);
  clip-path: inset(0);
}

.hero__title {
}

.hero__title01 {
  position: fixed;
  top: calc(103 / var(--window-height) * 100%);
  left: calc(126 / 375 * 100%);
  z-index: 2;
  width: calc(121 / 375 * 100%);
}

.hero__title02 {
  position: fixed;
  top: calc(300 / var(--window-height) * 100%);
  left: calc(35 / 375 * 100%);
  z-index: 2;
  width: calc(101 / 375 * 100%);
}

@media (min-width: 600px) {
  .hero__title01 {
    top: calc(65 / var(--window-height) * 100%);
    left: calc(100 / 1280 * 100%);
    width: calc(212 / 1280 * 100%);
    transform: unset;
  }

  .hero__title02 {
    top: calc(230 / var(--window-height) * 100%);
    left: calc(365 / 1280 * 100%);
    bottom: auto;
    width: calc(178 / 1280 * 100%);
    transform: unset;
  }
}

.content {
  position: relative;
  z-index: 2;
  scroll-snap-align: start;
}

.mv {
  position: relative;
}

.mv__catch {
  position: absolute;
  z-index: 2;
  top: calc(10 / 667 * 100%);
  left: 50%;
  width: calc(347 / 375 * 100%);
  transform: translateX(-50%);
}

.mv__logo {
  position: absolute;
  z-index: 2;
  top: calc(64 / 667 * 100%);
  left: 50%;
  width: calc(211 / 375 * 100%);
  transform: translateX(-50%);
}

@media (min-width: 600px) {
  .mv__catch {
    top: calc(30 / 853 * 100%);
    left: calc(35 / 1280 * 100%);
    width: calc(605 / 1280 * 100%);
    transform: unset;
  }

  .mv__logo {
    top: calc(130 / 853 * 100%);
    left: calc(45 / 1280 * 100%);
    width: calc(396 / 1280 * 100%);
    transform: unset;
  }
}

/*yodogawa*/
.yodogawa {
  padding: calc(var(--rem) * 50) calc(var(--rem) * 40);
  background: var(--primary-color);
}

.yodogawa__inner {
  display: grid;
  justify-content: center;
  max-width: calc(var(--rem) * 500);
  margin-inline: auto;
}

.yodogawa__catch {
  max-width: calc(var(--rem) * 427);
}

.yodogawa__text {
  margin-top: calc(var(--rem) * 50);
  font-size: calc(var(--rem) * 16);
  letter-spacing: 0.05em;
  line-height: 2.1875;
  line-break: strict;
}

@media (min-width: 600px) {
  .yodogawa {
    padding: calc(var(--rem) * 70) calc(var(--rem) * 40);
    background: var(--primary-color);
  }

  .yodogawa__inner {
    display: grid;
    justify-content: center;
    max-width: 100%;
    margin-inline: auto;
  }

  .yodogawa__text {
    margin-top: calc(var(--rem) * 70);
    font-size: calc(var(--rem) * 18);
    letter-spacing: 0.01em;
    line-height: 2.22;
  }
}

/* line up */

.lineupArea {
  padding: calc(var(--rem) * 60) calc(var(--rem) * 40);
  background: #fff;
  overflow: hidden;
}

.lineup {
}

.lineup:not(:first-child) {
  margin-top: calc(var(--rem) * 80);
}

.lineup__inner {
}

.lineup__title {
  margin-inline: auto;
  max-width: 100%;
}

.lineup__title--01 {
  width: calc(var(--rem) * 143);
}

.lineup__title--02 {
  width: calc(var(--rem) * 242);
}

.lineup__title--03 {
  width: calc(var(--rem) * 171);
}

.lineup__title--04 {
  width: calc(var(--rem) * 148);
}

.lineup__title--05 {
  width: calc(var(--rem) * 148);
}

.lineup__title--06 {
  width: calc(var(--rem) * 219);
}

.lineup__title--07 {
  width: calc(var(--rem) * 228);
}

.lineup__title--08 {
  width: calc(var(--rem) * 182);
}

.lineupCards {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rem) * 35);
  max-width: calc(var(--rem) * 400);
  margin-top: calc(var(--rem) * 45);
  margin-inline: auto;
}
.lineupCards.cols-1 {
  justify-content: center;
}

.lineupCard {
  text-align: center;
  width: calc(50% - calc(var(--rem) * 17.5));
}

.lineupCard__link {
  text-decoration: none;
  color: #000;
  line-height: 1.65;
}

.lineupCard__body {
  width: 120%;
  margin-left: -10%;
}

.lineupCard__link.is-coming-soon {
  pointer-events: none;
}

.lineupCard__img {
}

.lineupCard__name {
  margin-top: calc(var(--rem) * 15);
  font-size: calc(var(--rem) * 15);
  white-space: nowrap;
}

.lineupCard__price {
  font-family: "A1 Gothic L", sans-serif;
  font-size: calc(var(--rem) * 14);
  line-height: 1.78;
  white-space: nowrap;
}

.lineupCard__price small {
  font-size: calc(var(--rem) * 12);
}

.lineupCard__text {
  font-family: "A1 Gothic L", sans-serif;
  font-size: calc(var(--rem) * 12);
  line-height: 2;
}

@media (min-width: 600px) {
  .lineupArea {
    padding: calc(var(--rem) * 100) calc(var(--rem) * 40) calc(var(--rem) * 120);
    background: #fff;
    overflow: hidden;
  }

  .lineup:not(:first-child) {
    margin-top: calc(var(--rem) * 75);
  }

  .lineup__title {
    margin-inline: auto;
    width: fit-content;
  }

  .lineup__title--01 {
    width: calc(var(--rem) * 214);
  }

  .lineup__title--02 {
    width: calc(var(--rem) * 362);
  }

  .lineup__title--03 {
    width: calc(var(--rem) * 256);
  }

  .lineup__title--04 {
    width: calc(var(--rem) * 217);
  }

  .lineup__title--05 {
    width: calc(var(--rem) * 221);
  }

  .lineup__title--06 {
    width: calc(var(--rem) * 327);
  }

  .lineup__title--07 {
    width: calc(var(--rem) * 337);
  }

  .lineup__title--08 {
    width: calc(var(--rem) * 271);
  }

  .lineupCards {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--rem) * 68);
    max-width: calc(var(--rem) * 720);
    margin-top: calc(var(--rem) * 40);
    margin-inline: auto;
  }
  .lineupCards.cols-1 {
    justify-content: center;
  }

  .lineupCard {
    text-align: center;
    width: calc(100% / 3 - calc(var(--rem) * 68) * 2 / 3);
  }

  .lineupCard__link {
    text-decoration: none;
    color: #000;
    line-height: 1.65;
  }

  .lineupCard__body {
    width: 120%;
    margin-left: -10%;
  }

  .lineupCard__link.is-coming-soon {
    pointer-events: none;
  }

  .lineupCard__img {
  }

  .lineupCard__name {
    margin-top: calc(var(--rem) * 15);
    font-size: calc(var(--rem) * 15);
    white-space: nowrap;
  }

  .lineupCard__price {
    font-family: "A1 Gothic L", sans-serif;
    font-size: calc(var(--rem) * 14);
    line-height: 1.78;
    white-space: nowrap;
  }

  .lineupCard__price small {
    font-size: calc(var(--rem) * 12);
  }

  .lineupCard__text {
    font-family: "A1 Gothic L", sans-serif;
    font-size: calc(var(--rem) * 12);
    line-height: 2;
  }
}

/* bg-video */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}