/* .hero */
.hero {
  background: bottom center / 1904px auto no-repeat
    url("../img/hero_bg_sp.webp");
}

.hero__inner {
  display: flex;
  align-items: center;
  height: 100svh;
  min-height: calc(var(--rem) * 400);
}

.hero__title {
  display: flex;
  width: calc(302 / 365 * 100%);
  max-height: calc(100% - calc(var(--rem) * 180));
  margin-inline: auto;
  margin-bottom: calc(var(--rem) * 33);

  picture {
    display: flex;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.4));
  }
}

.yodogawa {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--rem) * 32) calc(var(--rem) * 30);
  height: calc(var(--rem) * 333);

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    opacity: 0.39;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(134, 87, 51),
      54%,
      #53361f
    );
  }
}

.yodogawa__text {
  padding-bottom: calc(var(--rem) * 53);
  font-family: "Tsubuten AP";
  font-size: calc(var(--rem) * 14);
  color: var(--white-color);
  line-height: 1.72;
  text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
}

@media (min-width: 992px) {
  .hero {
    background: bottom center / 3266px auto no-repeat
      url("../img/hero_bg_pc.webp");
  }

  .hero__inner {
    display: flex;
    align-items: center;
    height: 100svh;
    min-height: calc(var(--rem) * 550);
  }

  .hero__title {
    width: calc(950 / 1440 * 100%);
    max-height: calc(100% - calc(var(--rem) * 200));
    margin-bottom: calc(var(--rem) * 18);

    picture,
    img {
      filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.4));
    }
  }

  .yodogawa {
    align-items: start;
    padding: calc(var(--rem) * 101) calc(var(--rem) * 30);
    height: calc(var(--rem) * 608);
  }

  .yodogawa__text {
    padding-bottom: 0;
    font-family: "Tsubuten AP";
    font-size: calc(var(--rem) * 18);
    text-align: center;
    line-height: 1.88;
  }
}

/* content */
.content {
  position: relative;
  z-index: 1;
  padding: calc(var(--rem) * 72) var(--sp-gutter) calc(var(--rem) * 96);
  clip-path: inset(0);

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

@media (min-width: 600px) {
  .content {
    &::after {
      background-image: url("../img/bg_pc.webp");
    }
  }
}

@media (min-width: 600px) {
  .content {
    padding: calc(var(--rem) * 132) var(--pc-gutter) calc(var(--rem) * 128);
  }
}

/* section */
.section {
  background: var(--white-color);
  border-radius: calc(var(--rem) * 32);
  max-width: calc(var(--rem) * 500);
  margin-inline: auto;
}

.section__title {
  margin-inline: auto;
}

.section__subTitle {
  display: grid;
  justify-content: center;
  font-family: "Tsubuten AP";
  font-size: calc(var(--rem) * 18);
  letter-spacing: -0.05em;
  line-height: 1.33;

  span {
    display: inline-block;
  }
}

@media (min-width: 600px) {
}

@media (min-width: 992px) {
  .section {
    border-radius: calc(var(--rem) * 40);
    max-width: calc(var(--rem) * 800);
  }

  .section__subTitle {
    font-size: calc(var(--rem) * 24);
    line-height: 1.3;
  }
}

/* message */
.message {
  padding-block: calc(var(--rem) * 32) calc(var(--rem) * 36);
}

.message__title {
  max-width: calc(var(--rem) * 149);
}

.message__text {
  margin-top: calc(var(--rem) * 12);
  margin-inline: auto;
  max-width: calc(var(--rem) * 336);
}

.message__img {
  margin-top: calc(var(--rem) * 40);
  margin-inline: auto;
  max-width: calc(var(--rem) * 294);
  transform: translateX(calc(var(--rem) * -3));
}

@media (min-width: 992px) {
  .message {
    padding: calc(var(--rem) * 68) var(--pc-gutter) calc(var(--rem) * 62);
  }

  .message__title {
    max-width: calc(var(--rem) * 232);
  }

  .message__subTitle {
    margin-top: calc(var(--rem) * 5);
  }

  .message__text {
    margin-top: calc(var(--rem) * 38);
    max-width: calc(var(--rem) * 688);
  }

  .message__img {
    margin-top: calc(var(--rem) * 55);
    max-width: calc(var(--rem) * 594);
    transform: translateX(calc(var(--rem) * -7));
  }
}

/* contents */
.contents {
  margin-top: calc(var(--rem) * 64);
  padding: calc(var(--rem) * 38) calc(var(--rem) * 20) calc(var(--rem) * 40);
}

.contents__title {
  max-width: calc(var(--rem) * 148);
}

.contents__subTitle {
  margin-top: calc(var(--rem) * 8);
}

.contents-items {
  margin-top: calc(var(--rem) * 34);
}

.contents-item {
  max-width: calc(var(--rem) * 480);
  margin-inline: auto;

  &:not(:first-child) {
    margin-top: calc(var(--rem) * 40);
  }
}

.contents-item__link {
  text-decoration: none;
}

.contents-item__title {
  margin-top: calc(var(--rem) * 20);
  font-family: "A1 Gothic B";
  line-height: 1.625;
  text-align: center;
  color: var(--accent-color);
}

.contents-item__text {
  margin-top: calc(var(--rem) * 10);
  font-family: "A1 Gothic M";
  font-size: calc(var(--rem) * 14);
  line-height: 2;
}

@media (min-width: 992px) {
  .contents {
    margin-top: calc(var(--rem) * 142);
    padding: calc(var(--rem) * 68) var(--pc-gutter) calc(var(--rem) * 64);
  }

  .contents__title {
    max-width: calc(var(--rem) * 237);
  }

  .contents__subTitle {
    display: block;
    text-align: center;
    margin-top: calc(var(--rem) * 21);
  }

  .contents-items {
    margin-top: calc(var(--rem) * 67);
  }

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

  .contents-item__banner {
    max-width: calc(var(--rem) * 480);
    margin-inline: auto;
  }

  .contents-item__title {
    font-size: calc(var(--rem) * 20);
    line-height: 1.5;
  }

  .contents-item__text {
    margin-top: calc(var(--rem) * 20);
    text-align: center;
    font-size: calc(var(--rem) * 16);
    line-height: 1.75;
  }
}

/* goods */
.goods {
  position: relative;
  margin-top: calc(var(--rem) * 64);
  padding: calc(var(--rem) * 38) calc(var(--rem) * 20) calc(var(--rem) * 48);

  &::after {
    content: "";
    position: absolute;
    top: calc(var(--rem) * -32);
    left: calc(var(--rem) * -9);
    width: calc(var(--rem) * 95);
    aspect-ratio: 1;
    display: block;
    background: center / contain no-repeat url("../img/onsale_badge.webp");
  }
}

.goods__title {
  max-width: calc(var(--rem) * 105);
}

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

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

.goods-item__img {
  margin-inline: auto;
  filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
}

.goods-item__img--01 {
  max-width: calc(var(--rem) * 258);
  margin-bottom: calc(var(--rem) * 18);
}

.goods-item__name {
  font-family: "A1 Gothic B";
  text-align: center;
  line-height: 1.625;
  color: var(--accent-color);
}

.goods-item__text {
  display: grid;

  justify-content: center;
  margin-top: calc(var(--rem) * 10);
  font-size: calc(var(--rem) * 14);
  font-family: "A1 Gothic M";
  line-height: 2;
}

.goods-item__button {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: calc(var(--rem) * 262);
  min-height: calc(var(--rem) * 54);
  margin-top: calc(var(--rem) * 13);
  margin-inline: auto;
  font-family: "Tsubuten AP";
  font-size: calc(var(--rem) * 16);
  letter-spacing: -0.05em;
  text-decoration: none;
  color: var(--white-color);
  background: var(--button-color);
  border-radius: 100vmax;
}

.goods-item__img--02 {
  max-width: calc(var(--rem) * 205);
  margin-top: calc(var(--rem) * 53);
  margin-bottom: calc(var(--rem) * 15);
}

.goods-item__img--03 {
  max-width: calc(var(--rem) * 282);
  margin-top: calc(var(--rem) * 77);
  margin-bottom: calc(var(--rem) * 23);
}

.goods-item-more {
  margin-top: calc(var(--rem) * 65);
  font-family: "A1 Gothic M";
  font-size: calc(var(--rem) * 14);
  line-height: 2;
}

@media (min-width: 600px) {
  .goods-item-more {
    text-align: center;
  }
}

@media (min-width: 992px) {
  .goods {
    margin-top: calc(var(--rem) * 144);
    padding: calc(var(--rem) * 70) var(--pc-gutter) calc(var(--rem) * 94);

    &::after {
      top: calc(var(--rem) * -48);
      left: calc(var(--rem) * -57);
      width: calc(var(--rem) * 231);
    }
  }

  .goods__title {
    max-width: calc(var(--rem) * 168);
  }

  .goods__subTitle {
    margin-top: calc(var(--rem) * 21);
  }

  .goods-items {
    margin-top: calc(var(--rem) * 68);
  }

  .goods-item {
    display: grid;
    justify-items: center;
  }

  .goods-item__img {
    width: 100%;
  }

  .goods-item__img--01 {
    max-width: calc(var(--rem) * 466);
    margin-bottom: calc(var(--rem) * 26);
  }

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

    span {
      font-size: calc(var(--rem) * 16);
      line-height: 1.125;
    }
  }

  .goods-item__text {
    display: block;
    margin-top: calc(var(--rem) * 28);
    font-size: calc(var(--rem) * 16);
    text-align: center;
    line-height: 1.75;
  }

  .goods-item__button {
    max-width: calc(var(--rem) * 388);
    min-height: calc(var(--rem) * 80);
    margin-top: calc(var(--rem) * 32);
    font-size: calc(var(--rem) * 24);
  }

  .goods-item__img--02 {
    max-width: calc(var(--rem) * 335);
    margin-top: calc(var(--rem) * 109);
    margin-bottom: calc(var(--rem) * 15);
  }

  .goods-item__img--03 {
    max-width: calc(var(--rem) * 516);
    margin-top: calc(var(--rem) * 130);
    margin-bottom: calc(var(--rem) * 30);
  }

  .goods-item-more {
    margin-top: calc(var(--rem) * 125);
    font-size: calc(var(--rem) * 16);
    line-height: 1.75;
  }
}

/*news */
.news {
  position: relative;
  margin-top: calc(var(--rem) * 68);
  padding: calc(var(--rem) * 38) calc(var(--rem) * 20);

  &::after {
    content: "";
    position: absolute;
    top: calc(var(--rem) * -32);
    left: calc(var(--rem) * -9);
    width: calc(var(--rem) * 95);
    aspect-ratio: 1;
    display: block;
    background: center / contain no-repeat url("../img/sale_badge.webp");
  }
}

.news__title {
  max-width: calc(var(--rem) * 102);
}

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

.news-swiper-area {
  position: relative;
  margin-top: calc(var(--rem) * 34);
}

.news-swiper {
  padding-bottom: 1px;
  border-radius: calc(var(--rem) * 16);
}

.news-swiper__button {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: calc(var(--rem) * 16);
  transform: translateY(-50%);
  cursor: pointer;
}

.news-swiper__button--prev {
  left: calc(var(--rem) * 7);
}

.news-swiper__button--next {
  right: calc(var(--rem) * 7);
}

.news-swiper-pagination {
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: calc(var(--rem) * 5);
  --swiper-pagination-color: #0090f8;
  --swiper-pagination-bullet-inactive-color: #d9d9d9;
  --swiper-pagination-bullet-size: calc(var(--rem) * 12);
  --swiper-pagination-bottom: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--rem) * 12);
}

.news__name {
  margin-top: calc(var(--rem) * 59);
  text-align: center;
  font-family: "A1 Gothic B";
  color: var(--accent-color);
  line-height: 1.625;

  .mark {
    color: var(--black-color);
  }
}

.news__text {
  margin-top: calc(var(--rem) * 10);
  font-family: "A1 Gothic M";
  font-size: calc(var(--rem) * 14);
  line-height: 2;
}

@media (min-width: 992px) {
  .news {
    margin-top: calc(var(--rem) * 164);
    padding: calc(var(--rem) * 68) var(--pc-gutter);

    &::after {
      position: absolute;
      top: calc(var(--rem) * -48);
      left: calc(var(--rem) * -57);
      width: calc(var(--rem) * 231);
    }
  }

  .news__title {
    max-width: calc(var(--rem) * 163);
  }

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

  .news-swiper-area {
    max-width: calc(var(--rem) * 552);
    margin-top: calc(var(--rem) * 40);
    margin-inline: auto;
  }

  .news-swiper {
    border-radius: calc(var(--rem) * 16);
  }

  .news-swiper__button {
    width: calc(var(--rem) * 34);
  }

  .news-swiper__button--prev {
    left: calc(var(--rem) * -51);
  }

  .news-swiper__button--next {
    right: calc(var(--rem) * -51);
  }

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

  .news__name {
    margin-top: calc(var(--rem) * 96);
    font-size: calc(var(--rem) * 20);
    line-height: 1.5;

    .small {
      font-size: calc(var(--rem) * 16);
      line-height: 1.125;
    }
  }

  .news__text {
    margin-top: calc(var(--rem) * 30);
    font-size: calc(var(--rem) * 16);
    text-align: center;
    line-height: 1.75;
  }
}