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

html {
  scroll-behavior: smooth;
}

.page {
}

.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/01/mv_sp.webp");
  }
}

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

.mv {
  position: relative;
}

.mv__title,
.mv__text,
.mv__onsale,
.mv__logo {
  opacity: 0;
  filter: blur(5px);
}

.mv__title {
  position: absolute;
  z-index: 2;
  top: calc(28 / 667 * 100%);
  left: calc(322 / 375 * 100%);
  width: calc(33 / 375 * 100%);
}

.mv__text {
  position: absolute;
  z-index: 2;
  top: calc(28 / 667 * 100%);
  left: calc(20 / 375 * 100%);
  width: calc(26 / 375 * 100%);
}

.mv__onsale {
  position: absolute;
  z-index: 2;
  top: calc(614 / 667 * 100%);
  left: calc(25 / 375 * 100%);
  width: calc(326 / 375 * 100%);
}

.mv__logo {
  position: absolute;
  z-index: 2;
  top: calc(570 / 667 * 100%);
  left: calc(16 / 375 * 100%);
  width: calc(158 / 375 * 100%);
}

@media (min-width: 600px) {
  .mv__title {
    position: absolute;
    z-index: 2;
    top: calc(48 / 853 * 100%);
    left: calc(1104 / 1280 * 100%);
    width: calc(90 / 1280 * 100%);
  }

  .mv__text {
    position: absolute;
    z-index: 2;
    top: calc(44 / 853 * 100%);
    left: calc(85 / 1280 * 100%);
    width: calc(185 / 1280 * 100%);
  }

  .mv__onsale {
    position: absolute;
    z-index: 2;
    top: calc(800 / 853 * 100%);
    left: calc(94 / 1280 * 100%);
    width: calc(1092 / 1280 * 100%);
  }

  .mv__logo {
    position: absolute;
    z-index: 2;
    top: calc(760 / 853 * 100%);
    left: calc(88 / 1280 * 100%);
    width: calc(158 / 1280 * 100%);
  }
}

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

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

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

  p + p {
    margin-top: 1.85em;
  }
}

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

  .yodogawa__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: start;
    gap: 2em 70px;
  }

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

    p + p {
      margin-top: 2em;
    }
  }
}

/* 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__img {
  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: calc(var(--rem) * 80) calc(var(--rem) * 30);
  }

  .about__inner {
    padding-inline: 0;
  }

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

  .about__img {
    margin-top: 0;
  }
}

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

.page-nav__inner {
  max-width: 960px;
  margin: 0 auto;
}

.page-nav-list {
  display: grid;
  gap: 15px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  + .page-nav-list {
    margin-top: 55px;
  }
}

.page-nav-item {
}

.page-nav-item__link {
  text-decoration: none;
}

.page-nav-item__name {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #000;
}

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

  .page-nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px;
  }
  .page-nav-item__name {
    margin-top: 14px;
    font-size: 14px;
  }
}

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

.item {
  scroll-margin-top: 46px;
}

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

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

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

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

  + .item__link {
    margin-top: 2.1875rem;
  }
}

.item__price {
  font-family: "A1 Gothic R";
  text-align: center;
  font-size: calc(var(--rem) * 17);
  line-height: calc(var(--rem) * 30);
}
.item__price span {
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 16);
}
.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);
  padding-inline: calc(var(--rem) * 10);
  font-size: calc(var(--rem) * 15);
  line-height: 2;
}

@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) * 482);
  }

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

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

/* 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);
  }
}