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

.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 {
  pointer-events: none;
}

.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;
  clip-path: inset(0);

  &::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: center / cover no-repeat url("../images/denim/mv_sp.webp");
  }
}

@media (min-width: 600px) {
  .content::after {
    background-image: url("../images/denim/mv_pc@2x.webp");
  }
}

.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%);
}

.mv__title {
  position: absolute;
  left: 50%;
  bottom: calc(30 / 667 * 100%);
  z-index: 2;
  width: calc(337 / 375 * 100%);
  transform: translateX(-50%);
}

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

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

  .mv__title {
    bottom: calc(72 / 853 * 100%);
    width: calc(503 / 1280 * 100%);
  }
}

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

/* yodogawa */
.yodogawa {
  padding: calc(var(--rem) * 80) calc(var(--rem) * 40);
  background: #fff;
}

.yodogawa__inner {
  display: grid;
  justify-content: center;
}

.yodogawa__text {
  font-size: calc(var(--rem) * 16);
  line-height: 2.22;
  letter-spacing: 0.05em;
}

.yodogawa__text:not(:first-child) {
  margin-top: 2.22em;
}

@media (min-width: 992px) {
  .yodogawa {
    padding: calc(var(--rem) * 80) calc(var(--rem) * 40);
    background: #fff;
  }

  .yodogawa__inner {
    display: grid;
    justify-content: center;
  }

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

  .yodogawa__text:not(:first-child) {
    margin-top: 2.22em;
  }
}

/* about */
.about {
  margin-top: calc(var(--rem) * 80);
  padding-block: calc(var(--rem) * 50);
  background: #fff;
}

.about__inner {
  display: grid;
  justify-items: center;
  padding-inline: calc(var(--rem) * 30);
}

.aboutMovie {
  margin-inline: auto;
  max-width: calc(var(--rem) * 512);
}

.about__text {
  margin-top: calc(var(--rem) * 25);
  font-size: calc(var(--rem) * 16);
  line-height: 2;
  letter-spacing: 0.01em;
}

.about__care {
  margin-top: calc(var(--rem) * 22);
  margin-inline: auto;
  max-width: calc(var(--rem) * 450);
}

@media (min-width: 992px) {
  .about {
    margin-top: calc(var(--rem) * 50);
    padding-block: calc(var(--rem) * 80);
  }

  .about__inner {
    padding-inline: 0;
  }

  .about__text {
    margin-top: calc(var(--rem) * 50);
    font-size: calc(var(--rem) * 18);
  }

  .about__care {
    margin-top: 0;
  }
}

/* .items  */
.items {
  margin-top: calc(var(--rem) * 30);
  padding-block: calc(var(--rem) * 30) calc(var(--rem) * 70);
  overflow: hidden;
  background: #fff;
}

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

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

.item__title--01 {
  width: calc(var(--rem) * 363);
}

.item__title--02 {
  width: calc(var(--rem) * 328);
}

.item__title--03 {
  width: calc(var(--rem) * 337);
}

.item__title--04 {
  width: calc(var(--rem) * 357);
}

.itemSwiper {
  margin-top: calc(var(--rem) * 12);

  .swiper-slide {
    width: calc(var(--rem) * 300);
  }

  .swiper-pagination {
    --swiper-pagination-bullet-size: calc(var(--rem) * 8);
    position: static;
    display: flex;
    justify-content: center;
    gap: calc(var(--rem) * 8);
    margin-top: calc(var(--rem) * 10);
  }

  .swiper-pagination-bullet {
    border: 1px solid #808080;
    opacity: 1;
    margin: 0 !important;
    background: #fff;
  }

  .swiper-pagination-bullet-active {
    background: var(--primary-color);
  }
}

.item__body {
  display: grid;
  justify-items: center;
  margin-top: calc(var(--rem) * 30);
  padding-inline: calc(var(--rem) * 20);
}

.item__link {
  color: #000;
  text-decoration: none;
}

.item__price {
  text-align: center;
  font-size: calc(var(--rem) * 18);
  line-height: calc(var(--rem) * 30);
  letter-spacing: 0.075em;
}
.item__price span {
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 17);
}
.item__price small {
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 14);
}

.item__button {
  display: grid;
  place-items: center;
  width: calc(var(--rem) * 100);
  min-height: calc(var(--rem) * 22);
  margin-top: calc(var(--rem) * 10);
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 13);
  text-decoration: none;
  margin-inline: auto;
  color: #000;
  border: 1px solid #000;
  border-radius: 1000vmax;
}

.item__text {
  margin-top: calc(var(--rem) * 26);
  font-size: calc(var(--rem) * 15);
  line-height: 2;
  letter-spacing: 0.05em;
}

@media (min-width: 600px) {
  .itemSwiper {
    margin-top: calc(var(--rem) * 14);

    .swiper-slide {
      width: calc(var(--rem) * 600);
    }

    .swiper-pagination {
      --swiper-pagination-bullet-size: calc(var(--rem) * 10);
      gap: calc(var(--rem) * 10);
      margin-top: calc(var(--rem) * 14);
    }
  }
}

@media (min-width: 992px) {
  .items {
    margin-top: calc(var(--rem) * 50);
    padding-block: calc(var(--rem) * 80);
  }

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

  .item__title--01 {
    width: calc(var(--rem) * 542);
  }

  .item__title--02 {
    width: calc(var(--rem) * 491);
  }

  .item__title--03 {
    width: calc(var(--rem) * 504);
  }

  .item__title--04 {
    width: calc(var(--rem) * 534);
  }

  .itemSwiper {
    margin-top: calc(var(--rem) * 30);
  }

  .item__body {
    margin-top: calc(var(--rem) * 20);
  }

  .item__button {
  }

  .item__text {
    margin-top: calc(var(--rem) * 45);
    font-size: calc(var(--rem) * 18);
  }
}

/* voice */
.voice {
  margin-top: calc(var(--rem) * 30);
  padding-block: calc(var(--rem) * 40) calc(var(--rem) * 70);
  background: #fff;
}

.voice__inner {
}

.voice__title {
  font-family: "A1 Gothic B";
  font-size: calc(var(--rem) * 18);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;

  + .voiceVideo {
    margin-top: calc(var(--rem) * 22);
  }
}

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

.voiceVideo {
  width: 100%;
  max-width: calc(var(--rem) * 510);
  margin-top: calc(var(--rem) * 70);
  margin-inline: auto;
}

.voice__text {
  display: grid;
  justify-content: center;
  gap: 2em;
  margin-top: 2em;
  padding-inline: calc(var(--rem) * 20);
  letter-spacing: 0.01em;
  line-height: 2;
  line-break: strict;
}

@media (min-width: 992px) {
  .voice {
    margin-top: calc(var(--rem) * 50);
    padding-block: calc(var(--rem) * 80) calc(var(--rem) * 110);
  }

  .voice__inner {
    display: grid;
    justify-items: center;
  }

  .voice__title {
    font-size: calc(var(--rem) * 20);
    line-height: 1.8;
  }

  .voiceVideo {
    margin-top: calc(var(--rem) * 65);
  }

  .voice__text {
    margin-top: calc(var(--rem) * 32);
    font-size: calc(var(--rem) * 16);
  }
}

/* lineup */
.lineup {
  margin-top: calc(var(--rem) * 80);
  padding-block: calc(var(--rem) * 50);
  background: #fff;
}

.lineup__title {
  max-width: 100%;
  width: calc(var(--rem) * 336);
  margin-inline: auto;
}

.lineup__inner {
  margin-top: calc(var(--rem) * 40);
}

.lineup__items {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rem) * 35);
  max-width: calc(var(--rem) * 295);
  margin-inline: auto;
}

.lineupItem {
  width: calc(50% - calc(var(--rem) * 35) / 2);
}

.lineupItem__link {
  text-decoration: none;
  color: #000;
}

.lineupItem__img {
}

.lineupItem__body {
  width: 120%;
  margin-left: -10%;
  text-align: center;
}

.lineupItem__name {
  margin-top: calc(var(--rem) * 15);
  font-size: calc(var(--rem) * 15);
  line-height: 1.35;
}

.lineupItem__price {
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 14);
  line-height: 1.75;

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

.lineupItem__color {
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 14);
  line-height: 1.45;
}

.lineupItem__button {
  display: grid;
  place-items: center;
  width: calc(var(--rem) * 100);
  min-height: calc(var(--rem) * 22);
  margin-top: calc(var(--rem) * 12);
  margin-inline: auto;
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 13);
  border: 1px solid #000;
  border-radius: 100vmax;
}

@media (min-width: 992px) {
  .lineup {
    margin-top: calc(var(--rem) * 50);
    padding-block: calc(var(--rem) * 80) calc(var(--rem) * 50);
  }

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

  .lineup__inner {
    margin-top: calc(var(--rem) * 70);
  }

  .lineup__items {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(var(--rem) * 70);
    max-width: calc(var(--rem) * 990);
    margin-inline: auto;
  }

  .lineupItem {
    flex: 1;
    width: calc(25% - calc(var(--rem) * 70) * 3 / 4);
  }

  .lineupItem__link {
    text-decoration: none;
    color: #000;
  }

  .lineupItem__img {
  }

  .lineupItem__body {
    width: 120%;
    margin-left: -10%;
    text-align: center;
  }

  .lineupItem__name {
    margin-top: calc(var(--rem) * 28);
  }

  .lineupItem__button {
    font-size: calc(var(--rem) * 14);
  }
}

.footer {
  margin-top: calc(var(--rem) * 30);
}

.footer_share {
  margin-top: 0 !important;
}
@media (min-width: 992px) {
  .footer {
    margin-top: calc(var(--rem) * 50);
    padding-top: calc(var(--rem) * 50);
  }
}