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

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

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--rem) * 40);
  background: var(--primary-color);
}

.hero__inner {
  padding-inline: calc(var(--rem) * 22.5);
}

.hero__text {
  margin-top: calc(var(--rem) * 80);
}

@media (min-width: 992px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding-block: calc(var(--rem) * 75);
    background: var(--primary-color);
  }

  .hero__title {
    max-width: calc(var(--rem) * 487);
  }

  .hero__text {
    width: calc(var(--rem) * 507);
    margin-top: calc(var(--rem) * 70);
  }
}

/* content */
.content {
  position: relative;
  clip-path: inset(0);
}

/* bg */
.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.bg picture,
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 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 {
  padding-block: calc(var(--rem) * 50);
  background: var(--primary-color);
}

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

.about__title {
  max-width: calc(var(--rem) * 300);
}

.aboutInfo {
  margin-top: calc(var(--rem) * 50);
  text-align: center;
}

.aboutInfo__title {
  font-family: "A1 Gothic B";
  font-size: calc(var(--rem) * 16);
  letter-spacing: 0.05em;
  line-height: 2.22;
  color: #fff;
}

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

.aboutInfo__text {
  font-family: "A1 Gothic M";
  line-height: 2;
  font-size: calc(var(--rem) * 16);
  letter-spacing: 0.05em;
}

.aboutInfo__note {
  padding-left: 2em;
  text-indent: -2em;
  font-family: "A1 Gothic L";
  line-height: 1.61;
  font-size: calc(var(--rem) * 13);
  letter-spacing: 0.05em;
}

.aboutItems {
  position: relative;
  width: 100%;
  margin-top: calc(var(--rem) * 60);
  padding: calc(var(--rem) * 40) calc(var(--rem) * 20) calc(var(--rem) * 20);
  border: 2px solid #281400;
  background: #fff;
}

.aboutItems__title {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  min-width: calc(var(--rem) * 130);
  min-height: calc(var(--rem) * 30);
  padding: 0 calc(var(--rem) * 10);
  font-family: "A1 Gothic B";
  letter-spacing: 0.05em;
  background: #281400;
  color: #fff;
  border-radius: 100vmax;
  transform: translate(-50%, -50%);
}

.aboutItems__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rem) * 30) calc(var(--rem) * 35);
}

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

.aboutItem__name {
  margin-top: calc(var(--rem) * 15);
  font-size: calc(var(--rem) * 15);
  text-align: center;
  line-height: 1.33;
}

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

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

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

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

  .about__inner {
    padding-inline: calc(var(--rem) * 40);
  }

  .about__title {
    max-width: calc(var(--rem) * 450);
  }

  .aboutInfo {
    margin-top: calc(var(--rem) * 80);
  }

  .aboutInfo__title {
    font-size: calc(var(--rem) * 24);
  }

  .aboutInfo__text {
    font-size: calc(var(--rem) * 24);
  }

  .aboutInfo__note {
    margin-top: calc(var(--rem) * 18);
    line-height: 1.75;
    font-size: calc(var(--rem) * 16);
  }

  .aboutItems {
    max-width: calc(var(--rem) * 1004);
    margin-top: calc(var(--rem) * 100);
    margin-inline: auto;
    padding: calc(var(--rem) * 60) calc(var(--rem) * 20) calc(var(--rem) * 30);
  }

  .aboutItems__title {
    min-width: calc(var(--rem) * 180);
    min-height: calc(var(--rem) * 45);
    font-size: calc(var(--rem) * 24);
  }

  .aboutItems__list {
    flex-wrap: nowrap;
    gap: calc(var(--rem) * 30) calc(var(--rem) * 35);
    max-width: calc(var(--rem) * 885);
    margin: 0 auto;
  }

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

  .aboutItem__name {
    margin-top: calc(var(--rem) * 10);
    font-size: calc(var(--rem) * 14);
  }

  .aboutMovie {
    margin-top: calc(var(--rem) * 80);
  }

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

  .about__care {
    margin-top: calc(var(--rem) * 35);
  }
}

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

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

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

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

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

  .swiper-slide {
    max-width: 100vw;
    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) * 534);
    }

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

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

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

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

  .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 M";
  font-feature-settings: "palt" 1;
  font-size: calc(var(--rem) * 27);
  line-height: 1.7;
  letter-spacing: 0.125em;
  color: var(--green-color);
  text-align: center;
}

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

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

.voice__text {
  display: grid;
  justify-content: center;
  gap: 2em;
  margin-top: 2em;
  padding-inline: calc(var(--rem) * 20);
  font-size: calc(var(--rem) * 15);
  letter-spacing: 0.05em;
  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) * 40);
    line-height: 2;
  }

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

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

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

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

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

.campaignInfo {
  margin-top: calc(var(--rem) * 50);
  text-align: center;
}

.campaignInfo__title {
  font-family: "A1 Gothic B";
  font-size: calc(var(--rem) * 16);
  line-height: 2.25;
  letter-spacing: 0.05em;
  color: var(--green-color);
}

.campaignInfo__title:not(:first-child) {
  margin-top: 2.25em;
}

.campaignInfo__text {
  font-family: "A1 Gothic M";
  line-height: 2;
  font-size: calc(var(--rem) * 16);
  letter-spacing: 0.05em;
}

.campaignInfo__note {
  padding-left: 2em;
  text-indent: -2em;
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 13);
  line-height: 1.61;
  letter-spacing: 0.05em;
}

.campaignSection {
  margin-top: calc(var(--rem) * 45);
  text-align: center;
}

.campaignSection__title {
  line-height: 1.625;
  letter-spacing: 0.05em;
}

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

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

.campaignSectionItems {
  display: flex;
  justify-content: center;
  gap: calc(var(--rem) * 40);
  width: 90%;
  max-width: calc(var(--rem) * 300);
  margin-top: calc(var(--rem) * 16);
  margin-inline: auto;
}

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

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

.campaignSectionItem__color {
  margin-top: calc(var(--rem) * 10);
  font-family: "A1 Gothic L";
  font-size: calc(var(--rem) * 13);
}

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

  .campaign__title {
    max-width: calc(var(--rem) * 450);
  }

  .campaignInfo {
    margin-top: calc(var(--rem) * 80);
  }

  .campaignInfo__title {
    font-size: calc(var(--rem) * 24);
  }

  .campaignInfo__title:not(:first-child) {
    margin-top: 2.25em;
  }

  .campaignInfo__text {
    line-height: 2;
    font-size: calc(var(--rem) * 24);
    letter-spacing: 0.05em;
  }

  .campaignInfo__note {
    margin-top: 1em;
    font-size: calc(var(--rem) * 16);
  }

  .campaignSection {
    margin-top: calc(var(--rem) * 80);
    text-align: center;
  }

  .campaignSection__title {
    font-size: calc(var(--rem) * 24);
  }

  .campaignSection__price {
    font-size: calc(var(--rem) * 21);
    line-height: 1.85;
  }

  .campaignSection__price small {
    font-size: calc(var(--rem) * 18);
  }

  .campaignSectionItems {
    gap: calc(var(--rem) * 60);
    max-width: calc(var(--rem) * 450);
    margin-top: calc(var(--rem) * 26);
  }

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

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