@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@1..1000&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-fp1st-primary: #65a7da;
  --lp-fp2nd-primary: #f4d2da;
  --lp-gk1st-primary: #1e6e4a;

  --lp-en-font: "Sofia Sans Extra Condensed", sans-serif;
}

main {
  font-size: 1.4rem;
  color: var(--lp-base-black);
  background: rgba(255, 255, 255, 0.8);
  overflow: clip;
  position: relative;
  &::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../img/bg-camouflage.svg) no-repeat center center / cover;
    z-index: -10;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    th,
    td {
      white-space: nowrap;
      text-align: center;
      padding: 0.8rem 1.6rem;
    }
  }
}

/* セクション */
section {
  position: relative;
  &.section-bg-blue::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--lp-base-darken);
    mix-blend-mode: color;
    z-index: -1;
  }
  .section-bg-lineup {
    position: absolute;
    inset: 0;
    z-index: -1;
    @media (768px <= width) {
      background: linear-gradient(90deg, #286dba 0%, #feeff4 40%, #feeff4 60%, #075f2b 100%);
      mix-blend-mode: overlay;
    }
    @media (width < 768px) {
      mix-blend-mode: overlay;
    }
  }
  .inner {
    max-width: 104rem;
    margin-inline: auto;
    @media (768px <= width) {
      padding: 8rem 0;
    }
    @media (width < 768px) {
      padding: 4rem 2rem;
    }
  }

  .content-box {
    margin-bottom: 4rem;
  }

  .caution-list {
    li {
      font-size: 1.2rem;
      text-indent: -1.3em;
      margin-left: 1.4em;
      margin-bottom: 0.25rem;
      &::before {
        content: "※";
        padding-right: 0.2em;
      }
      &:last-child {
        margin-bottom: 0;
      }
      &.strong {
        font-weight: 700;
      }
    }
  }
}

/* セクションタイトル */
.section-title {
  display: flex;
  align-items: baseline;
  gap: 1.8rem;
  margin-bottom: 4rem;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 2.8rem;
    height: 0.5rem;
    flex-shrink: 0;
    background: var(--lp-base-primary);
    left: -4rem;
    top: 1.5rem;
  }
  h2 {
    font-family: var(--lp-en-font);
    font-size: 4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 4rem */
    letter-spacing: 0.08rem;
  }
  p {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1.14286rem */
  }
}
/* サブタイトル */
.sub-title {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2rem */
  letter-spacing: 0.14rem;
  margin-bottom: 1.6rem;
  position: relative;
  padding-left: 2rem;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2rem;
    left: 0;
    top: 0;
    background: var(--lp-base-primary);
    transform: skewX(-15deg);
    transition: width 0.4s ease-in;
  }
  &.isActive {
    &::before {
      width: 1rem;
    }
  }
}

/* 動画セクション */
.youtube-section {
  background: black;
  overflow: clip;
  .youtube-wrapper {
    position: relative;
    width: 100vw;
    aspect-ratio: 16 / 9;
    line-height: 0;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      mix-blend-mode: none;
    }
    #youtube-player {
      width: 100%;
      height: 100%;
    }
    .puma-logo {
      background: black;
      position: absolute;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      animation: youtube-cover 3200ms ease-in forwards;
      figure {
        width: 30%;
        aspect-ratio: 2 /1;
      }
    }
  }
}

@keyframes youtube-cover {
  0% {
    opacity: 1;
    display: flex;
  }
  98% {
    opacity: 1;
    display: flex;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.mainvisual-section {
  position: relative;
  z-index: 10;
  .mv-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    @media (width < 768px) {
      aspect-ratio: 9 / 16;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.concept-section {
  .inner {
    @media (768px <= width) {
      padding: 8rem 0 0;
    }
    @media (width < 768px) {
      padding: 4rem 2rem 0;
    }
  }
  .text-box {
    position: relative;
    z-index: 10;
    @media (768px <= width) {
      max-width: 70rem;
    }
    h3 {
      font-family: var(--lp-en-font);
      font-size: 4.5rem;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      letter-spacing: 0.36rem;
      margin-bottom: 1.6rem;
    }
    p {
      line-height: 180%;
      letter-spacing: 0.14rem;
      margin-bottom: 0.8rem;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .concept-image {
    img {
      display: block;
      aspect-ratio: 860 / 573;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    @media (768px <= width) {
      position: absolute;
      width: 100vw;
      height: 140%;
      top: 0;
      right: -28%;
      img {
        mask-image: linear-gradient(to bottom, black 80%, transparent 98%);
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 98%);
      }
    }

    @media (width < 768px) {
      img {
        margin-top: -6rem;
        mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(0, 0, 0, 0.5) 20%,
          black 70%,
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(0, 0, 0, 0.5) 20%,
          black 70%,
          transparent 100%
        );
      }
    }
  }
}

.feature-section {
  .feature-box {
    display: flex;
    @media (768px <= width) {
      flex-direction: row;
    }
    @media (width < 768px) {
      padding-top: 2rem;
      gap: 6rem;
      flex-direction: column;
    }
  }
  .feature-item-image {
    display: flex;
    img {
      filter: drop-shadow(0 4px 6px var(--lp-fp1st-primary));
    }
  }
  .feature-item-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    li {
      background: color-mix(in srgb, var(--lp-fp1st-primary) 30%, transparent);
      border-radius: 1rem;
      overflow: hidden;
    }
    .list-image {
      position: relative;
      width: 100%;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 85%,
          rgba(0, 0, 0, 0.3) 100%
        );
        z-index: 10;
      }
    }
    figure {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
    }
    hgroup {
      line-height: 1;
      z-index: 10;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: baseline;
      color: var(--lp-base-white);
      gap: 0.8rem;
      padding: 0.5rem 0.8rem;
      h3 {
        font-size: 3.4rem;
        font-weight: 400;
        letter-spacing: 0.14rem;
        font-family: var(--lp-en-font);
      }
      p {
        font-size: 1.2rem;
        font-weight: 400;
      }
    }
    .text-box {
      font-size: 1.2rem;
      padding: 1rem;
    }
  }

  @media (width < 768px) {
    .feature-item-image {
      .torso-image-front {
        z-index: 10;
        opacity: 0;
        transform: translateX(4rem);
        transition: all 0.4s 0.4s ease-in;
      }
      .torso-image-back {
        opacity: 0;
        transform: translateX(-4rem);
        transition: all 0.4s 0.4s ease-in;
      }
      img {
        scale: 122%;
      }

      &.isActive {
        .torso-image-front {
          opacity: 1;
          transform: translateX(1rem);
        }
        .torso-image-back {
          opacity: 1;
          transform: translateX(-1rem);
        }
      }
    }
  }

  @media (768px <= width) {
    .feature-box {
      align-items: flex-start;
      gap: 4rem;
      padding-bottom: 2rem;
    }
    .feature-item-image {
      width: 55%;
      position: sticky;
      top: 220px;
      align-self: flex-start;
      padding-top: 1rem;
      padding-bottom: 12rem;
      .torso-image-front {
        z-index: 10;
        opacity: 0;
        transform: translateX(-10rem);
        transition: all 0.4s 0.4s ease-in;
      }
      .torso-image-back {
        opacity: 0;
        transform: translate(12rem, 10rem);
        transition: all 0.4s 0.4s ease-in;
      }
      img {
        transition: all 0.4s 0.2s ease-in;
        scale: 100%;
      }
      &.isActive {
        .torso-image-front {
          opacity: 1;
          transform: translateX(0);
          z-index: 10;
        }
        .torso-image-back {
          opacity: 1;
          transform: translate(-2rem, 10rem);
        }
        img {
          scale: 122%;
        }
      }
    }
    .feature-item-list {
      width: calc(100% - (55% + 4rem));
    }
  }
}
.gallery-section {
  padding: 8rem 0rem;
  &::before {
    content: "";
    z-index: -1;
    background: var(--lp-base-darken);
    inset: 0;
    position: absolute;
    mix-blend-mode: overlay;
  }
  .swiper-slide figure {
    width: 100%;
    aspect-ratio: 210 / 300;
    position: relative;
    &::after {
      content: "";
      inset: 0;
      position: absolute;
      -webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
      clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
      background: #037cb48c;
      z-index: -1;
      bottom: -0.5rem;
      right: -0.5rem;
      filter: blur(10px);
    }
    img {
      -webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
      clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
    }
  }
  .swiper-gallery-button-prev svg,
  .swiper-gallery-button-next svg {
    display: none;
  }
  .gallery {
    position: relative;
    padding: 0 2rem;
  }
  .swiper-wrapper {
    padding-bottom: 2rem;
  }
  .controller {
    display: flex;
    position: absolute;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    align-items: center;
    .swiper-gallery-pagination {
      font-size: 2.2rem;
      line-height: 1;
      font-family: var(--lp-en-font);
      color: var(--lp-base-primary);
      width: 3em;
      text-align: center;
    }
    .swiper-gallery-button-prev::after {
      content: "<";
    }
    .swiper-gallery-button-next::after {
      content: ">";
    }
    .swiper-gallery-button-prev,
    .swiper-gallery-button-next {
      background: var(--lp-base-primary);
      color: var(--lp-base-white);
      width: 2rem;
      height: 2rem;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &:hover {
        cursor: pointer;
        background: var(--lp-base-darken);
      }
      &::after {
        font-family: var(--lp-en-font);
        color: var(--lp-base-white);
        text-transform: none;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
        font-size: 3rem;
        transform: scaleX(60%);
      }
    }
  }
}

.size-section {
  background: var(--lp-base-white);
  .size-table {
    margin-bottom: 8rem;
    @media (width < 768px) {
      overflow: scroll;
    }
    thead {
      border: 1px solid var(--lp-base-black);
      th {
        padding: 1.6rem 0;
      }
    }
    tbody {
      font-family: var(--lp-en-font);
      font-size: 2.4rem;
      span {
        font-family: initial;
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0;
      }
      tr {
        border-bottom: 1px solid #333c46;
        &:first-child th,
        &:first-child td {
          padding-top: 1.6rem;
        }
      }
    }
  }

  .compare-wrapper {
    display: flex;
    padding-top: 1rem;
    .swiper-slide {
      position: relative;
      box-shadow: 0 3px 10px #eee;
      img {
        border: var(--lp-base-white) solid 10px;
      }
    }
    .info {
      background: var(--lp-base-primary);
      color: var(--lp-base-white);
      padding: 1rem;
      position: absolute;
      top: -1rem;
      left: 1rem;
      box-shadow: 4px 4px 0px #a5a5a565;
      display: flex;
      flex-direction: column;

      > div {
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        align-items: center;
        dd {
          font-family: var(--lp-en-font);
        }
        &.size {
          padding-bottom: 0.5rem;
          border-bottom: 1px solid #fff;
          dt {
            display: none;
          }
          dd {
            line-height: 1;
            text-align: center;
            font-size: 2rem;
            span {
              font-size: 3rem;
              display: block;
            }
          }
        }
        &.height {
          padding-top: 0.5rem;
          dt {
            font-weight: bold;
          }
          dd {
            font-size: 1.5rem;
            line-height: 1;
            padding-bottom: 0.5rem;
          }
        }
      }
    }
    @media (768px <= width) {
      gap: 4rem;
      .compare-swiper {
        width: calc((100% - 8rem) / 3);
      }
    }
    @media (width < 768px) {
      flex-direction: column;
      align-items: center;
      gap: 8rem;
      margin-bottom: 8rem;
      .compare-swiper {
        width: 90%;
      }
    }
  }
  .swiper-pagination {
    width: 100%;
    bottom: -4rem;
    .swiper-pagination-bullet {
      &:nth-child(1)::before {
        content: "S";
      }
      &:nth-child(2)::before {
        content: "M";
      }
      &:nth-child(3)::before {
        content: "L";
      }
      &:nth-child(4)::before {
        content: "XL";
      }
      &:nth-child(5)::before {
        content: "XXL";
      }
      &:nth-child(6)::before {
        content: "3XL";
      }
    }
    .swiper-pagination-bullet-active {
      background: var(--lp-base-primary);
    }
    .swiper-pagination-bullet {
      border-radius: 0.5rem;
      height: 2.4rem;
      width: 3.6rem;
      color: var(--lp-base-white);
      &::before {
        font-family: var(--lp-en-font);
        font-size: 1.2em;
        line-height: 2rem;
      }
    }
  }
  .slider-03 {
    .swiper-pagination {
      .swiper-pagination-bullet {
        &:nth-child(1)::before {
          content: "M";
        }
        &:nth-child(2)::before {
          content: "L";
        }
        &:nth-child(3)::before {
          content: "XL";
        }
        &:nth-child(4)::before {
          content: "XXL";
        }
        &:nth-child(5)::before {
          content: "3XL";
        }
        &:nth-child(6)::before {
          content: "4XL";
        }
      }
    }
  }
}

/* ネーム＆ナンバー */
.name-number-section {
  .number-sample-wrapper {
    display: flex;
    gap: 3.2rem;
    flex-direction: column;
    margin-bottom: 8rem;
  }
  .number-sample-item {
    display: flex;
    padding: 1.6rem;
    position: relative;
    @media (width < 768px) {
      align-items: center;
      flex-direction: column;
    }
    &::before {
      content: "";
      inset: 0;
      position: absolute;
      border-radius: 2rem;
      overflow: hidden;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.8s 1s ease, opacity 1.2s 1s ease;
    }
    &.isActive::before {
      opacity: 1;
      transform: scaleX(1);
    }
    &.fp-1st::before {
      background: url(../img/bg-fp-1st.svg) no-repeat center center / cover;
    }
    &.fp-2nd::before {
      background: url(../img/bg-fp-2nd.svg) no-repeat center center / cover;
    }
    &.gk-1st::before {
      background: url(../img/bg-gk-1st.svg) no-repeat center center / cover;
    }
    h3 {
      font-family: var(--lp-en-font);
      position: relative;
      display: grid;
      place-items: center;
      font-weight: 700;
      z-index: 1;
      @media (768px <= width) {
        border-radius: 1.6rem;
        font-size: 3.2rem;

        letter-spacing: 0.14rem;
        line-height: 0.9;
        text-align: center;
        width: 19rem;
        aspect-ratio: 1 / 1;

        padding-right: 3.2rem;
      }
      @media (width < 768px) {
        font-size: 2.4rem;
        aspect-ratio: 185 / 60;
        margin-bottom: 20px;
        margin-top: -3rem;
        width: 60%;
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        @media (768px <= width) {
          background: url(../img/mask-nn-arrow-pc.svg) no-repeat center left / cover;
        }
        @media (width < 768px) {
          background: url(../img/mask-nn-arrow-sp.svg) no-repeat center left / cover;
        }
      }
    }
    div {
      @media (768px <= width) {
        width: calc(100% - (4rem + 12rem));
        display: flex;
        align-items: center;
        justify-content: center;
        figure {
          width: 80%;
        }
      }
      @media (width < 768px) {
        width: 95%;
      }
    }
  }

  .player-list {
    margin-bottom: 8rem;
    @media (width < 768px) {
      overflow: scroll;
    }
    thead {
      border: 1px solid var(--lp-base-black);
      th {
        padding: 1.6rem 0;
      }
    }
    tbody {
      font-family: var(--lp-en-font);
      font-size: 2.2rem;
      border-bottom: 1px solid var(--lp-base-black);
      tr {
        &:nth-child(even) {
          background-color: #06a0e810;
        }
        &:first-child th,
        &:first-child td {
          padding-top: 1.6rem;
        }
        td:nth-child(3),
        td span {
          font-family: initial;
          font-size: 1.6rem;
        }
      }
      &.before {
        tr:first-child td {
          padding: 4rem 0;
          font-size: 4rem;
          font-family: var(--lp-en-font);
          span {
            font-size: 4rem;
            font-family: var(--lp-en-font);
            margin-right: 1rem;
          }
        }
      }
    }
  }
  .service-wrapper {
    display: flex;

    @media (768px <= width) {
      flex-direction: row-reverse;
      gap: 2.4rem;
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 1.2rem;
    }
  }
  .item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-base-white);
    background: var(--lp-base-primary);
    padding: 1.6rem 0;
    border-radius: 1rem;
    gap: 1.2rem;
    @media (768px <= width) {
      aspect-ratio: 1 / 1;
      width: 40rem;
      flex-direction: column;
    }
    @media (width < 768px) {
      width: 100%;
      flex-direction: row;
    }
    p {
      line-height: 1;
    }
    p:first-child {
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: 0.14rem;
    }
    p:last-child {
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: 0.14rem;
      span {
        font-family: var(--lp-en-font);
        font-size: 2.8rem;
        font-weight: 700;
        letter-spacing: 0.14rem;
      }
      &:first-letter {
        font-size: 2rem;
      }
    }
  }
}

/* 販売情報 */
.information-section {
  background-color: var(--lp-base-white);
  .delivery-date {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    margin-bottom: 0.8rem;
  }
  .schedule-wrapper {
    display: flex;
    flex-direction: column;
    @media (768px <= width) {
      gap: 1.2rem;
    }
    @media (width < 768px) {
      gap: 2.4rem;
    }
    dl {
      display: flex;
      align-items: center;
      @media (768px <= width) {
        flex-direction: row;
        gap: 2.4rem;
      }
      @media (width < 768px) {
        flex-direction: column;
        gap: 1rem;
      }
      dt {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.14rem;
        padding: 0.8rem 1.6rem;
        width: 40rem;
        text-align: center;
        background: var(--lp-base-gray01);
        span {
          display: block;
        }
        @media (768px <= width) {
          width: 40rem;
        }
        @media (width < 768px) {
          width: 100%;
        }
      }
      dd {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.14rem;
        @media (width < 768px) {
          text-align: center;
        }
      }
      &:first-child {
        dt {
          background: var(--lp-base-primary);
          color: var(--lp-base-white);
        }
      }
    }
  }
}

/* 商品ラインナップ */
.lineup-section {
  .lineup-item {
    display: flex;
    flex-direction: column;
    z-index: 10;
    .item-image {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      figure {
        position: absolute;
        width: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .item-text {
      z-index: -10;
      padding: 15rem 1.6rem 2rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      margin: -14rem 2rem 0;
      mask-image: url(../img/mask-lineuptext.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: bottom center;
      -webkit-mask-image: url(../img/mask-lineuptext.svg);
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: bottom center;
      position: relative;
      hgroup {
        text-align: center;
        z-index: 10;
        h4 {
          font-family: "Sofia Sans Extra Condensed", sans-serif;
          font-size: 3.6rem;
          font-style: normal;
          font-weight: 600;
          line-height: 100%; /* 2.88rem */
          letter-spacing: 0.32rem;
        }
        p {
          font-size: 1rem;
          line-height: 100%; /* 2.16rem */
          font-weight: bold;
        }
      }
      dl {
        z-index: 10;
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        div {
          display: flex;
          align-items: center;
          gap: 1rem;
        }
        dt {
          font-size: 1rem;
          font-weight: 700;
          width: 7rem;
          padding: 0.25rem 1rem;
          background-color: #fff;
          text-align: center;
          border-radius: 100vmax;
          color: #333c46;
        }
        dd {
          span {
            font-family: "Sofia Sans Extra Condensed", sans-serif;
            font-weight: 600;
            display: inline-block;
          }
        }
        div.price-txt {
          dd {
            font-size: 2.4rem;
            font-weight: 700;
            font-size: 1.2rem;
            span {
              font-size: 3.2rem;
            }
            span:first-letter {
              font-size: 2rem;
            }
          }
        }
      }
      .item-button {
        z-index: 10;
        width: 100%;
        text-align: center;
        a.btn-link {
          display: block;
          background: linear-gradient(90deg, #069fe8 0%, #21a9ec 50%);
          padding: 1rem;
          border-radius: 100vmax;
          color: var(--lp-base-white);
          font-weight: bold;
          border-radius: 100vmax;
          border: 2px solid var(--lp-base-white);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
          &.disable {
            border-color: #7f7f7f;
            color: #7f7f7f;
            background: var(--lp-base-gray01);
            box-shadow: none;
            font-family: var(--lp-en-font);
            font-size: 1.8rem;
          }
        }
      }
    }
  }
  .item-1 {
    .item-text {
      background: url(../img/bg-fp-1st.svg) no-repeat center center / cover;
      color: #fff;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--lp-fp1st-primary);
        top: 0;
        left: 0;
        mix-blend-mode: multiply;
      }
    }
  }
  .item-2 {
    .item-text {
      color: #fff;
      background: url(../img/bg-gk-1st.svg) no-repeat center center / cover;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--lp-gk1st-primary);
        top: 0;
        left: 0;
        mix-blend-mode: hard-light;
      }
    }
  }
  .item-3,
  .item-4 {
    .item-text {
      background: url(../img/bg-fp-2nd.svg) no-repeat center center / cover;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--lp-fp2nd-primary);
        top: 0;
        left: 0;
        mix-blend-mode: overlay;
      }
    }
  }
  .item-image-3 {
    opacity: 0;
  }
}

.lineup-section {
  /* pc表示 */
  @media (768px <= width) {
    .lineup-section-title {
      text-align: center;
      font-size: 6rem;
      font-family: var(--lp-en-font);
      letter-spacing: 4rem;
      line-height: 1;
      margin-bottom: 4rem;
    }
    .cat-text {
      font-size: 5rem;
      font-family: var(--lp-en-font);
      white-space: nowrap;
      letter-spacing: 2rem;
      position: absolute;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      writing-mode: vertical-rl;
      white-space: nowrap;
      &.fp {
        background: linear-gradient(270deg, #ffc8da 40%, #65a7da 60%);
        left: -5rem;
      }
      &.gk {
        background: linear-gradient(90deg, #ffc8da 40%, #65bc70 80%);
        right: -5rem;
      }
    }

    .lineup-item {
      width: calc((100% - 4.8rem) / 3);
    }
    .lineup-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 2.4rem;
      position: relative;
      .item-1 {
        order: 1;
      }
      .item-2 {
        order: 3;
      }
      .item-3 {
        order: 2;
      }
    }
  }
  /* sp表示 */
  @media (width < 768px) {
    .inner {
      position: relative;
      padding-top: 130px;
    }
    .lineup-section-title {
      text-align: center;
      font-family: var(--lp-en-font);
      font-size: 13vw;
      line-height: 0;
      letter-spacing: 2vw;
    }
    .cat-text {
      text-align: center;
      font-family: var(--lp-en-font);
      font-size: 300%;
      line-height: 0;
      letter-spacing: 1.5rem;
      writing-mode: vertical-rl;
      white-space: nowrap;
      position: absolute;
      &.fp {
        left: 8%;
        top: 16rem;
      }
      &.gk {
        right: 8%;
        top: 16rem;
      }
    }
    .lineup-wrapper {
      padding-top: 4vw;
      display: grid;
      z-index: 20;
      .lineup-item {
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
      }
      .item-image-2,
      .item-image-3 {
        opacity: 0;
        z-index: 0;
      }
      .item-1 {
        order: 2;
        z-index: 0;
      }
      .item-2 {
        order: 5;
        z-index: 0;
      }
      .item-3 {
        order: 3;
        z-index: 0;
      }
      .item-5 {
        order: 1;
      }
      .item-6 {
        order: 4;
      }
    }
  }
}

.section-title {
  &::before {
    content: "";
    position: absolute;
    width: 2.8rem;
    height: 0.5rem;
    flex-shrink: 0;
    background: var(--lp-base-primary);
    left: -4rem;
    top: 1.5rem;
    z-index: 10;
    transform: scale(10, 10);
    transform-origin: left;
    transition: transform 0.5s ease-in;
  }
  &.isActive::before {
    transform: scale(1, 1);
  }
}