@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Alata&display=swap");

:root {
  --lp-base-black: #333c46;
  --lp-base-white: #ffffff;
  --lp-base-gray01: #f2f3f0;
  --lp-base-gray02: #3f3d3d;
  --lp-base-gray03: #111111;
  --lp-base-primary: #23b7fe;
  --lp-base-secondary: #d5f2ff;
  --lp-base-darken: #21a9ec;
  --lp-base-gold: #b28f47;

  --lp-en-font: "Alata", sans-serif;
}

main {
  background-image: url(../img/bg-base.png);
  background-color: var(--lp-base-white);
  position: relative;
  @media (768px <= width) {
    padding: 8rem 4rem;
  }
  @media (width < 768px) {
    padding: 1.7rem;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    height: 100%;
    background-repeat: repeat-y;
    top: 0;
    background-size: contain;
    @media (768px <= width) {
      width: 8rem;
    }
    @media (width < 768px) {
      width: 2.4rem;
    }
  }
  &::before {
    background-image: url(../img/left-side.webp);
    left: 0;
  }
  &::after {
    background-image: url(../img/right-side.webp);
    right: 0;
  }

  img {
    width: 100%;
    height: auto;
  }

  /* セクション */
  section {
    &:not(:last-child) {
      @media (768px <= width) {
        margin-bottom: 8rem;
      }
      @media (width < 768px) {
        margin-bottom: 4.8rem;
      }
    }
    /* セクションタイトル */
    .section-title {
      display: flex;
      align-items: baseline;
      margin-bottom: 4rem;
      gap: 1.6rem;
      position: relative;
      h2 {
        color: var(--lp-base-black);
        font-family: var(--lp-en-font);
        font-size: 8.8rem;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 124px */
        span {
          color: var(--lp-base-primary);
        }
      }
      p {
        font-size: 2rem;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.25rem;
      }
      &::after {
        content: "";
        width: 100%;
        height: 0.5rem;
        background: var(--lp-base-gold);
        position: absolute;
        left: 0;
        bottom: -0.5rem;
      }
      @media (width < 768px) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        p {
          font-size: 2rem;
        }
      }
    }
    .btn-sale {
      position: relative;
      color: var(--lp-base-white);
      border-radius: 4px;
      border: 2px solid var(--lp-base-white);
      font-size: 1.4rem;
      font-weight: bold;
      line-height: 1;
      padding: 1.6rem;

      text-align: center;
      @media (768px <= width) {
        width: 30rem;
      }
      @media (width < 768px) {
        width: 20rem;
      }
      span {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        line-height: 1;
        font-size: 2rem;
        transform: translate(-10rem, -1rem);
        opacity: 0;
      }
      &::before {
        content: "";
        background: var(--lp-base-gold);
        position: absolute;
        inset: 0;
        z-index: -2;
        transition: all 0.3s 0.1s ease-in;
      }
      &::after {
        content: "";
        background-color: #fff;
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 2px;
        z-index: -1;
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;
        transition: all 0.3s ease-in;
      }
      &:hover {
        color: var(--lp-base-gold);
        span {
          color: var(--lp-base-gold);
          opacity: 1;
          transform: translate(0, -1rem);
        }
        &::after {
          opacity: 1;
          transform: scaleX(1);
        }
      }
    }
    /* メインビジュアル */
    &.mv-section {
      .inner {
        width: 100%;
        img {
          border: solid 4px var(--lp-base-gold);
        }
      }
    }
    /* アイテム */
    &.item-section {
      @media (768px <= width) {
        padding: 0 8rem;
      }

      .pickup-image {
        width: 100%;
        @media (768px <= width) {
          aspect-ratio: 16 /9;
        }
        @media (width < 768px) {
          aspect-ratio: 1/1;
        }
        img {
          width: 100%;
          height: auto;
        }
      }

      .pickup-image + .item-box {
        @media (768px <= width) {
          margin-top: 4rem;
        }
        @media (width < 768px) {
          margin-top: 2rem;
        }
      }

      .item-box + .item-box {
        @media (768px <= width) {
          margin-top: 8rem;
        }
        @media (width < 768px) {
          margin-top: 4rem;
        }
      }

      .item-box {
        margin-inline: auto;
        filter: drop-shadow(0 2px 4px #2b2b2b95);
        @media (768px <= width) {
          width: 90%;
        }
        .item-box-inner {
          background-color: var(--lp-base-primary);
          background-image: url(../img/bg-item-detail.webp);
          background-repeat: no-repeat;
          position: relative;
          @media (768px <= width) {
            padding: 2rem;
            background-position: center bottom 30%;
            clip-path: polygon(
              /* 左上 */ 0% 0%,
              /* 右上 */ 100% 0%,
              /* 右下の切り込み開始（右辺） */ 100% calc(100% - 6rem),
              /* 右下の切り込み終了（底辺） */ calc(100% - 6rem) 100%,
              /* 左下 */ 0% 100%
            );
          }
          @media (width < 768px) {
            padding: 1rem;
            background-position: center bottom;
            clip-path: polygon(
              0% 0%,
              /* 左上 */ 100% 0%,
              /* 右上 */ 100% calc(100% - 3.2rem),
              /* 右下の切り込み開始（右辺） */ calc(100% - 3.2rem) 100%,
              /* 右下の切り込み終了（底辺） */ 0% 100% /* 左下 */
            );
          }
          &::before {
            content: "";
            position: absolute;
            inset: 0;
            right: 0;
            top: 0;
            background: #23b7fe;
            background: linear-gradient(0deg, rgba(35, 183, 254, 0) 0%, rgba(35, 183, 254, 1) 60%, rgba(35, 183, 254, 1) 100%);
          }
          &::after {
            content: "";
            position: absolute;

            aspect-ratio: 1 /1;
            right: 0;
            bottom: 0;
            background-color: #d5f2ff;
            -webkit-mask-image: url(../img/mask-triangle.svg);
            mask-image: url(../img/mask-triangle.svg);
            @media (768px <= width) {
              width: 6rem;
            }
            @media (width < 768px) {
              width: 3.2rem;
            }
          }
        }
      }
      .flex-box {
        display: flex;
        gap: 2rem;
        z-index: 10;
        position: relative;
        @media (768px <= width) {
          flex-direction: row;
          margin-bottom: 2rem;
          > div[class$="-box"] {
            width: calc((100% - 2rem) / 2);
          }
        }
        @media (width < 768px) {
          flex-direction: column-reverse;
          > div[class$="-box"] {
            width: 100%;
          }
        }
      }
      .main-swiper {
        aspect-ratio: 1 / 1;
        background-color: transparent;
      }
      .text-box {
        padding: 1.6rem;
        background: var(--lp-base-white);

        h3 {
          color: var(--lp-base-darken);
          font-size: 1.8rem;
          font-weight: bold;
        }

        .price {
          display: flex;
          align-items: baseline;
          font-size: 1rem;
          gap: 1rem;
          justify-content: end;
          dd {
            &:first-letter {
              font-size: 1.2rem;
              font-family: Fira Sans, sans-serif;
            }
            span {
              font-size: 1.8rem;
              font-family: Fira Sans, sans-serif;
              padding: 0 0.2rem;
            }
          }
        }

        .item-detail {
          border: 1px solid var(--lp-base-gray02);
          border-left: 0;
          border-right: 0;
          padding: 0.8rem;
          margin: 1.6rem 0;
          font-size: 1.1rem;
          line-height: 1.8;
        }

        .option {
          > div {
            font-size: 1.1rem;
            border-left: 4px solid var(--lp-base-primary);
            padding-left: 0.5rem;
            &:not(:last-child) {
              margin-bottom: 1.6rem;
            }
            dt {
              font-weight: bold;
              margin-bottom: 0.5rem;
            }
          }
          .table01 {
            overflow-x: scroll;
            width: 100%;
            table {
              min-width: 100%;
            }
            th,
            td {
              font-size: 1rem;
              padding: 0.3rem 1rem;
            }
          }
          .attn {
            font-size: 0.9rem;
          }
        }
      }
      .btn-wrapper {
        position: relative;
        z-index: 10;
        padding: 1rem 0 0;
      }
    }

    &.link-section {
      .btn-wrapper {
        padding: 6.4rem 0;
        background-image: url(../img/bg-lineup-btn.webp);
        background-color: #000;
        border: 4px solid var(--lp-base-primary);
        background-position: center center;
        background-repeat: no-repeat;
      }
      .btn-sale {
        font-size: 1.6rem;
        width: 40rem;
        position: relative;
        z-index: 10;
        &::before {
          background: linear-gradient(to right, #23b7fe, #21a9ec);
        }
        &:hover {
          color: var(--lp-base-primary);
          span {
            color: var(--lp-base-primary);
          }
        }
      }
      @media (width < 768px) {
        .btn-wrapper {
          padding: 4.8rem 0;
          background-size: cover;
        }
        .btn-sale {
          width: 24rem;
          line-height: 1.4;
          padding: 1rem 0;
        }
      }
    }

    &.coming_soon-section {
      .coming_soon-box {
        position: relative;
        width: 80rem;
        margin-inline: auto;
        text-align: center;
        z-index: 10;
        line-height: 1;
        padding: 2rem 0;
        &::before {
          content: "";
          background: #000;
          position: absolute;
          inset: 0;
          top: 0;
          left: 0;
          z-index: -1;
          transform: skewX(-30deg);
          border-left: 4rem solid var(--lp-base-darken);
          border-right: 4rem solid var(--lp-base-darken);
        }
        &::after {
          content: "";
          background: transparent;
          position: absolute;
          width: calc(100% - 16rem);
          height: 100%;
          top: 0;
          left: 8rem;
          z-index: -1;
          transform: skewX(-30deg);
          border-left: 4rem solid var(--lp-base-white);
          border-right: 4rem solid var(--lp-base-white);
        }
        p {
          font-size: 2.4rem;
          font-family: var(--lp-en-font);
          color: var(--lp-base-gold);
        }
      }
      @media (width < 768px) {
        .coming_soon-box {
          width: 26rem;
          padding: 1rem;
          margin-bottom: 4rem;
          &::before {
            border-width: 0.5rem;
          }
          &::after {
            width: calc(100% - 2rem);
            border-width: 0.5rem;
            left: 1rem;
          }
          p {
            font-size: 2rem;
          }
        }
      }
    }
  }
  /* Swiper */

  .main-swiper {
    .swiper-button-prev01,
    .swiper-button-next01 {
      width: 4rem;
      aspect-ratio: 1 /1;
      border-radius: 999px;
      position: absolute;
      z-index: 10;
      top: 50%;
      transform: translateY(-2rem);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease-in-out;
      cursor: pointer;
      span {
        color: var(--lp-base-primary);
        font-size: 3rem;
      }
      &:hover {
        background-color: var(--lp-base-darken);
        span {
          color: white;
        }
      }
      @media (width < 768px) {
        width: 2.4rem;
        transform: translateY(-1.2rem);
        span {
          font-size: 1.8rem;
        }
      }
    }
    .swiper-button-prev01 {
      left: 0.8rem;
    }
    .swiper-button-next01 {
      right: 0.8rem;
    }
  }
  /* 商品サムネイル用 */
  .thumbs-swiper {
    margin-top: 1rem;
    .swiper-wrapper {
      display: flex !important;
    }
    .swiper-slide {
      width: calc((100% - 24px) / 5);

      cursor: pointer;
      background-color: #ffffff;
      img {
        opacity: 0.2;
      }
    }
    .swiper-slide-thumb-active {
      img {
        opacity: 1;
      }
    }
  }

  /* ギャラリー用 */
  .gallery-section {
    .swiper-pagination01 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1rem;
      .swiper-pagination-bullet {
        width: 2rem;
        height: 0.2rem;
        border-radius: 0;
        background-color: #898989;
        opacity: 1;
        margin: 0 !important;
        &.swiper-pagination-bullet-active {
          background-color: var(--lp-base-primary);
        }
      }
    }
    .swiper-button-prev01,
    .swiper-button-next01 {
      width: 3.2rem;
      aspect-ratio: 1 /1;
      border-radius: 999px;
      position: absolute;
      z-index: 10;
      top: calc(50% - 0.6rem);
      transform: translateY(-1.6rem);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease-in-out;
      cursor: pointer;
      span {
        color: var(--lp-base-primary);
        font-size: 3rem;
      }
      &:hover {
        background-color: var(--lp-base-darken);
        span {
          color: white;
        }
      }
      @media (width < 768px) {
        width: 2.4rem;
        transform: translateY(-1.2rem);
        span {
          font-size: 1.8rem;
        }
      }
    }
    .swiper-button-prev01 {
      left: 0.8rem;
    }
    .swiper-button-next01 {
      right: 0.8rem;
    }
  }
}

/* モーション */
[data-animation="side"] {
  &::before {
    opacity: 0;
    transform: translateX(-10rem);
    transition: all 0.4s 0.6s ease-in;
  }
  &::after {
    opacity: 0;
    transform: translateX(10rem);
    transition: all 0.4s 0.6s ease-in;
  }
  &.is-animated::before,
  &.is-animated::after {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-animation="slide-up"] {
  opacity: 0;
  transform: translateY(10rem);
  transition: all 0.4s ease-in;
  &.is-animated {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animation="coming-soon"] {
  opacity: 0;
  scale: 0;
  rotate: 0;
  transition: opacity 0.6s 0.2s ease-in, scale 0.6s 0.2s ease-in, rotate 0.4s 0.8s ease-in;
  &.is-animated {
    opacity: 1;
    scale: 1;
    rotate: -5deg;
  }
}