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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

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

@media (min-width: 600px) {
  .content::after {
    background-image: url("../images/02/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(601 / 667 * 100%);
  left: calc(15 / 375 * 100%);
  width: calc(345 / 375 * 100%);
}

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

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

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

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

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

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

  .mv__logo {
    position: absolute;
    z-index: 2;
    top: calc(690 / 853 * 100%);
    left: calc(12 / 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;
    }
  }
}

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

  &:not(:last-child) {
    .page-nav-item:last-child {
      grid-column: 2/3;
    }
  }
}

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

    &:not(:last-child) {
      .page-nav-item:last-child {
        grid-column: auto;
      }
    }
  }
  .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) * 327);
}

.itemMovie {
  margin: calc(var(--rem) * 15) auto 0;
  max-width: 510px;
}

.itemMovie__text {
  display: grid;
  justify-content: center;
  padding: calc(var(--rem) * 50) calc(var(--rem) * 40) calc(var(--rem) * 10);
}

.itemFabric {
  margin: 0 auto 0;
  max-width: 450px;
}

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

  .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) * 963);
    max-width: 98%;
  }

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

  .itemMovie {
    margin-top: calc(var(--rem) * 45);
  }

  .itemMovie__text {
    display: grid;
    justify-content: center;
    padding: calc(var(--rem) * 45) calc(var(--rem) * 40) calc(var(--rem) * 10);
  }

  .itemFabric {
    margin: 0 auto 0;
    max-width: 450px;
  }

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

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

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

/* column */
.column {
  margin: 5rem 0 0;
  padding: 3.125rem 0;
  background: #fff;
}

.column__inner {
  display: grid;
  justify-items: center;
  max-width: 50rem;
  margin: 0 auto;
}

.column__title {
  margin-bottom: 1.75rem;
  font-family: "A1 Gothic M";
  font-size: 1.0625rem;
  text-align: center;
}

.column__img {
  margin: 0 auto;
  width: 100%;
}

.column__img--portrait {
  max-width: 37.5rem;
}

.column__text {
  padding: 3.125rem 2.5rem;
  font-family: "A1 Gothic L";
  font-size: 0.9375rem;
  line-height: 1.85;

  &:last-child {
    padding-bottom: 1.875rem;
  }

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

@media (min-width: 62rem) {
  .column {
    margin: 3.125rem 0 0;
    padding: 5rem 0;
  }

  .column__img {
    margin: 0 auto;
    width: 100%;
  }

  .column__img--portrait {
    max-width: 37.5rem;
  }

  .column__text {
    &:last-child {
      padding-bottom: 0;
    }
  }
}
/* footer*/
.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);
  }
}