@charset "UTF-8";
/* @import url("https://fonts.googleapis.com/css2?family=Special+Gothic:wdth,wght@110,400..700&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

:root {
  --lp-base-blue: #66a7cc;
  --lp-base-black: #000000;
  --lp-base-white: #ffffff;
  --lp-base-gold: #be9e6d;
  --lp-text-black: #333c46;
  --lp-base-gray01: #f2f3f0;
  --lp-base-gray02: #d9d9d9;
  --lp-base-red: #b00;

  --en-font: "Oswald", sans-serif;
}

main {
  position: relative;
  color: var(--lp-base-white);
  @media (768px <= width) {
    font-size: 1.2rem;
  }
  @media (width < 768px) {
    font-size: 1.4rem;
  }
  img {
    width: 100%;
  }
  .contents {
    background: var(--lp-base-blue);
  }
  .contents-inner {
    background: var(--lp-base-black);
    margin-inline: auto;
    @media (768px <= width) {
      max-width: 120rem;
      border-left: 2rem solid var(--lp-base-white);
      border-right: 2rem solid var(--lp-base-white);
    }
    @media (width < 768px) {
      max-width: 94%;
      border-left: 0.8rem solid var(--lp-base-white);
      border-right: 0.8rem solid var(--lp-base-white);
    }
    section {
      padding: 8rem 0;
    }
  }
  .flex-box {
    display: flex;
    .flex-item {
      flex: 1 1 50%;
    }
  }
  section {
    &.bg-white {
      color: var(--lp-text-black);
    }
    .section-title {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      justify-content: center;
      overflow: hidden;
      position: relative;
      padding-left: 8.5rem;
      margin-bottom: 8rem;
      @media (width < 768px) {
        padding-left: 5.5rem;
      }
      .line01 {
        width: 10rem;
        height: 100%;
        background-color: var(--lp-base-white);
        position: absolute;
        top: 0;
        left: -5rem;
        transform: skewX(-20deg);
        z-index: 10;
        @media (width < 768px) {
          left: -8rem;
        }
      }
      .line02 {
        width: 1rem;
        height: 100%;
        background-color: #000000;
        position: absolute;
        top: 0;
        left: 5rem;
        transform: skewX(-20deg);
        @media (width < 768px) {
          left: 2rem;
        }
      }
      .line03 {
        width: 1rem;
        height: 100%;
        background-color: var(--lp-base-blue);
        position: absolute;
        top: 0;
        left: 6rem;
        transform: skewX(-20deg);
        @media (width < 768px) {
          left: 3rem;
        }
      }
      h1 {
        font-family: var(--en-font);
        font-weight: 400;
        line-height: 100%;
        margin-bottom: 0.5rem;
        @media (768px <= width) {
          font-size: 4.6rem;
          letter-spacing: 0.25rem;
        }
        @media (width < 768px) {
          font-size: 10vw;
        }
      }
      p {
        font-weight: bold;
        line-height: 100%;
      }
    }
    .sub-title {
      color: var(--lp-base-white);
      background: var(--lp-base-blue);
      padding: 0.5em;
      width: 100%;
      text-align: center;
      font-weight: bold;
      margin-bottom: 1rem;
      letter-spacing: 0.5rem;
      @media (768px <= width) {
        font-size: 1.8rem;
      }
      @media (width < 768px) {
        font-size: 5.4vw;
        letter-spacing: 0.25rem;
      }
    }
    .inner {
      @media (768px <= width) {
        padding: 0 8rem;
        > div:not(:last-child) {
          margin-bottom: 4.8rem;
        }
      }
      @media (width < 768px) {
        padding: 0 1.6rem;
        > div:not(:last-child) {
          margin-bottom: 4rem;
        }
      }
    }
    table {
      width: 100%;
      thead {
        tr {
          color: var(--lp-base-white);
          background: var(--lp-base-blue);
          th {
            padding: 0.25em;
          }
        }
      }
    }
    .dl-list {
      display: flex;
      width: 100%;
      background-color: var(--lp-base-blue);
      color: var(--lp-base-white);
      font-size: 120%;
      dt {
        position: relative;
        padding: 1.2rem 0;
        text-align: center;
        font-weight: bold;
        z-index: 10;
        &:before {
          content: "";
          width: 110%;
          height: 100%;
          position: absolute;
          bottom: 0rem;
          right: -1rem;
          background: #47759a;
          transform: skewX(-20deg) scaleY(140%);
          z-index: -1;
        }
      }
      dd {
        padding: 0.5rem 0;
        text-align: center;
      }
      @media (768px <= width) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        dt {
          flex: 1 1 35%;
          &:before {
            content: "";
            width: 110%;
            height: 100%;
            position: absolute;
            bottom: 0rem;
            right: -1rem;
            background: #47759a;
            transform: skewX(-20deg) scaleY(140%);
            z-index: -1;
          }
        }
        dd {
          flex: 1 1 65%;
        }
      }
      @media (width < 768px) {
        flex-direction: column;
        dt::before {
          transform: none;
        }
        dt {
          overflow: hidden;
        }
      }
    }

    .attention-list {
      li {
        text-indent: -1em;
        margin-left: 1em;
        margin-bottom: 0.25em;
        &::before {
          content: "※";
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    @media (768px <= width) {
      .narrow {
        width: 66%;
        margin-inline: auto;
      }
    }
  }
  .swiper-button-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .swiper-org-button-prev,
  .swiper-org-button-next {
    display: flex;
    background: var(--lp-base-gold);
    color: var(--lp-base-white);
    width: 3.2rem;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in;
    &:hover {
      background-color: #8d662c;
    }
  }
  .swiper-org-pagination {
    display: flex;
    height: 3.2rem;
    align-items: center;
    justify-content: center;
    width: 6em;
    background-color: var(--lp-base-gold);
    span {
      padding: 0.5rem;
      font-family: var(--en-font);
    }
  }
}

.mainvisual-section {
  img {
    width: 100%;
    object-fit: cover;
  }
}

.youtube-section {
  padding: 0 !important;
  line-height: 0;
  margin-bottom: 0;
  .youtube-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  @media (768px <= width) {
    border-top: 2rem solid #ffffff;
    border-bottom: 2rem solid #ffffff;
  }
  @media (width < 768px) {
    border-top: 0.8rem solid #ffffff;
    border-bottom: 0.8rem solid #ffffff;
  }
}

.concept-section {
  overflow: hidden;
  position: relative;

  .section-title,
  [class$="-wrapper"] {
    position: relative;
  }
  .section-title {
    z-index: 20;
  }
  #concept-background {
    position: absolute;
    &::before {
      content: "";
      position: absolute;
      background-color: #000000;
      opacity: 0.3;
      z-index: 10;
    }
    @media (768px <= width) {
      top: -4rem;
      left: -8rem;
      width: calc(100% + 16rem);
      height: 110%;
      &::before {
        top: -18rem;
        left: -8rem;
        width: calc(100% + 16rem);
        height: 200%;
      }
    }
    @media (width < 768px) {
      left: -1.6rem;
      width: calc(100% + 3.2rem);
      height: 110%;
      &::before {
        top: -22rem;
        left: -1.6rem;
        width: calc(100% + 3.2rem);
        height: 150%;
      }
    }
  }
  .text-box-wrapper {
    z-index: 10;
    display: flex;
    gap: 1.6rem;
    flex-direction: column;
    justify-content: start;
    @media (768px <= width) {
      margin-bottom: 8rem !important;
    }
    @media (width < 768px) {
      margin-bottom: 8rem !important;
    }
    h2 {
      z-index: 10;
      padding: 0;
      background: transparent;
      text-align: left;
      font-family: var(--en-font);
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.4rem;
      @media (768px <= width) {
        font-size: 6rem;
      }
      @media (width < 768px) {
        font-size: 12vw;
      }
    }
    .text-box {
      z-index: 10;
      font-size: 1.6rem;
      letter-spacing: 0.4rem;
      p:not(:last-child) {
        margin-bottom: 1.2rem;
      }
    }
  }
  .feature-box-wrapper {
    z-index: 20;
    @media (768px <= width) {
      width: calc(100% + 8rem);
    }
    @media (width < 768px) {
      width: calc(100% + 1.6rem);
    }
    #swiperFeature {
      margin-bottom: 2rem;
    }
    .card {
      height: auto !important;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background: var(--lp-base-blue);
      figure {
        position: relative;
      }
      img {
        width: 100%;
        aspect-ratio: 3 / 4;
        order: 1;
      }
      .card-text {
        padding: 1rem;
        p {
          font-size: 1.4rem;
        }
      }
      .card-title {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 1rem;
        background: #345570a5;
        h3 {
          font-family: var(--en-font);
          font-weight: 400;
          font-size: 3rem;
          line-height: 1.2;
        }
        p {
          font-size: 1.2rem;
          line-height: 120%;
        }
      }
    }
  }
}

/* ユニフォーム */
.uniform-section {
  border-top: 2rem solid var(--lp-base-white);
  padding: 0 !important;
  .inner {
    @media (768px <= width) {
      padding: 0 5rem 0 8rem;
    }
  }

  .flex-box {
    align-items: center;
    &.level-1 {
      gap: 0rem;
      @media (width < 768px) {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0;
      }
    }

    .text-item {
      position: relative;
      z-index: 10;
      @media (768px <= width) {
        &.flex-item {
          flex: 1 1 40%;
          height: 100%;
        }
      }
      @media (width < 768px) {
        &.flex-item {
          width: 98%;
          margin-top: -7rem;
          margin-bottom: 2rem;
        }
      }
    }

    .image-item {
      .front {
        z-index: 10;
      }
      @media (768px <= width) {
        .front {
          padding-top: 4rem;
          margin-bottom: 8rem;
          z-index: 10;
          img {
            transform: scale(115%);
          }
        }
        .back {
          padding-bottom: 4rem;
          margin-top: 8rem;
          img {
            transform: scale(115%) translateX(0.5rem);
          }
        }
        &.flex-item {
          flex: 1 1 60%;
        }
      }
      @media (width < 768px) {
        .front {
          margin-bottom: 10rem;
          z-index: 10;
          img {
            transform: scale(130%) translateX(0.5rem);
          }
        }
        .back {
          margin-top: 10rem;
          img {
            transform: scale(130%) translateX(-0.5rem);
          }
        }
        &.flex-item {
          padding: 6rem 0;
          z-index: 10;
        }
      }
    }
    .bg-wrapper {
      position: absolute;
      inset: 0;
      top: 0;
      z-index: -1;
      @media (768px <= width) {
        border-left: 2rem solid transparent;
        border-right: 2rem solid transparent;
      }
      @media (width < 768px) {
        border: 2px solid transparent;
      }
    }
    .text-item-inner {
      z-index: 10;
      .normal-size,
      .jr-size {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
      }
      .jr-size {
        margin-top: 2rem;
      }
      hgroup {
        text-align: center;
        .season,
        h2 {
          font-family: var(--en-font);
        }
        .season {
          display: inline-block;
          line-height: 1;
          padding: 0.5rem 1rem;
          font-size: 1rem;
          color: var(--lp-base-white);
          background: var(--lp-base-black);
          letter-spacing: 0.5rem;
        }
        h2 {
          margin: 1rem 0;
          font-size: 7rem;
          line-height: 1;
          font-weight: 400;
        }
        p:not(.season) {
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
      dl > div {
        display: flex;
        gap: 1rem;
        justify-content: center;
        &:first-child {
          margin-bottom: 1rem;
        }
        dt {
          font-weight: bold;
        }
      }

      .size-list {
        align-items: center;
        dd {
          font-family: var(--en-font);
          font-size: 1.4rem;
        }
      }
      .price-list {
        @media (768px <= width) {
          align-items: baseline;
        }
        dd {
          line-height: 1;
          span {
            display: inline-block;
            font-family: var(--en-font);
            font-size: 3.8rem;
            &::first-letter {
              font-size: 2rem;
            }
          }
        }
      }
      @media (768px <= width) {
        padding: 12rem 2rem;
      }
      @media (width < 768px) {
        padding: 6rem 1.6rem 3.2rem;
        hgroup {
          .season {
            font-size: 2.4vw;
          }
          h2 {
            font-size: 16vw;
          }
          p:not(.season) {
            font-size: 3vw;
          }
        }
        dl > div {
          gap: 0;
          flex-direction: column;
          align-items: center;
        }
      }
    }
  }
  &#fp-1st {
    background: #d5f2ff;
    .bg-wrapper {
      background: var(--lp-base-blue);
      border-color: var(--lp-base-white);
    }
  }
  &#fp-2nd {
    background: #e4e4e4;
    .text-item-inner {
      color: var(--lp-base-black);
    }
    .bg-wrapper {
      background: var(--lp-base-white);
      border-color: var(--lp-base-black);
    }
  }
  &#gk-1st {
    background: #ffd5b9;
    .text-item-inner {
      color: var(--lp-base-black);
    }
    .bg-wrapper {
      background: #f08741;
      border-color: var(--lp-base-black);
    }
  }
}

.gallery-section {
  background-color: var(--lp-base-white);
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  #swiperGallery {
    margin-bottom: 2rem;
  }
  .swiper-button-wrapper {
    justify-content: center;
  }
}

table[class$="-table"] thead th {
  line-height: 4;
  font-size: 0.9rem;
  padding: 0.25rem 1rem;
  white-space: nowrap;
}

.size-section {
  overflow: hidden;
  .size-table-wrapper {
    margin-bottom: 0.5rem !important;
    @media (width < 768px) {
      width: 100%;
      overflow-x: scroll;
    }
    .size-table {
      width: 100%;
      tbody {
        tr {
          border-bottom: 1px solid var(--lp-base-gray01);
          th {
            font-family: var(--en-font);
            font-weight: bold;
            font-size: 1.4rem;
            @media (width < 768px) {
              font-size: 1.2rem;
            }
          }
          td {
            font-size: 1.4rem;
            text-align: center;
            font-family: var(--en-font);
            padding: 1rem;
            @media (width < 768px) {
              padding: 1rem 0.5rem;
            }
          }
        }
      }
    }
  }
  .attention-list {
    font-size: 1rem;
  }

  /* サイズ比較用 */
  .compare-swipers-wrapper {
    .compare-swipers-inner {
      display: flex;
      @media (768px <= width) {
        padding: 4rem;
        justify-content: space-between;
        .compare-swiper {
          width: calc((100% - 8rem) / 3);
        }
      }
      @media (width < 768px) {
        padding: 4rem 2rem;
        flex-direction: column;
        align-items: center;
        gap: 10rem;
        .compare-swiper {
          width: 100%;
        }
      }
    }
    .swiper-slide {
      position: relative;
      img {
        border: var(--lp-base-white) solid 0.8rem;
      }
    }
    .info {
      background: var(--lp-base-blue);
      color: var(--lp-base-white);
      padding: 1rem;
      position: absolute;
      top: -1rem;
      left: 1rem;
      box-shadow: 4px 4px 10px #012d3d84;
      display: flex;
      flex-direction: column;

      > div {
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        align-items: center;
        dd {
          font-family: var(--en-font);
        }
        &.size {
          padding-bottom: 0.5rem;
          border-bottom: 1px solid var(--lp-base-white);
          dt {
            display: none;
          }
          dd {
            line-height: 1.2;
            text-align: center;
            font-size: 1.4rem;
            span {
              font-size: 2.2rem;
              font-weight: bold;
              display: block;
            }
          }
        }
        &.height {
          padding-top: 0.5rem;
          dt {
            font-weight: bold;
          }
          dd {
            font-size: 1.2rem;
            line-height: 1;
            padding-bottom: 0;
          }
        }
      }
    }
  }
  .swiper-pagination {
    width: 100%;
    bottom: -4rem;
    display: flex;
    justify-content: center;
    gap: 0;

    .swiper-pagination-bullet {
      height: 100%;
      border-radius: 0;
      opacity: 1;
      color: var(--lp-text-black);
      background-color: var(--lp-base-gray02);
      transition: all 0.2s ease-in;
      margin: 0;
      @media (768px <= width) {
        width: 3.8em;
      }
      @media (width < 768px) {
        width: 3.2em;
      }
      &::before {
        font-family: var(--en-font);
        font-size: 1.2rem;
        line-height: 2.4rem;
      }
      &: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";
      }
      &:hover {
        background-color: var(--lp-base-white);
      }
      &.swiper-pagination-bullet-active {
        background-color: var(--lp-base-blue);
        &::before {
          color: var(--lp-base-white);
        }
      }
    }
  }
  .model03 {
    .swiper-pagination {
      .swiper-pagination-bullet {
        &:nth-child(1)::before {
          content: "XL";
        }
        &:nth-child(2)::before {
          content: "XXL";
        }
        &:nth-child(3)::before {
          content: "3XL";
        }
        &:nth-child(4)::before {
          content: "4XL";
        }
      }
    }
  }
}

.number-section {
  .player-table-wrapper {
    .player-table {
      tbody {
        tr {
          &:nth-child(odd) {
            background-color: var(--lp-base-gray01);
          }

          td {
            padding: 0.5em 0.25em;
            text-align: center;
            font-size: 1.4rem;
            &:not(:last-child) {
              font-family: var(--en-font);
              font-weight: 600;
            }
          }
        }
      }
    }
  }

  .number-plice {
    dd {
      font-weight: bold;
      span {
        line-height: 1.2;
        font-size: 3.6rem;
        font-family: var(--en-font);
        display: inline-block;
        font-weight: 400;
        &::first-letter {
          font-size: 1.8rem;
          padding-right: 0.25rem;
        }
      }
    }
  }

  .name-service-wrapper {
    .flex-box {
      flex-direction: column;
      align-items: center;
      gap: 3.2rem;
    }
    .image-item {
      width: 70%;
      display: flex;
      gap: 4rem;
      padding: 2rem 0 0;
      @media (width < 768px) {
        width: 60%;
        flex-direction: column;
        gap: 4rem;
      }
      figure {
        border: 2px solid var(--lp-base-gray02);
      }
    }
    .text-item {
      p {
        font-size: 1.4rem;
      }
      .attention-list {
        margin-top: 1.5rem;
      }
    }
  }
}
.schedule-section {
  padding: 8rem 0 2rem;
  .sale-schedule-wrapper,
  .delivery-schedule-wrapper {
    width: 100%;
  }
  .sale-schedule-wrapper {
    .dl-list {
      margin-bottom: 1rem;
      background: var(--lp-base-white);
      dt {
        color: var(--lp-base-black);
        @media (768px <= width) {
          flex: 1 1 45%;
        }
        &::before {
          background-color: var(--lp-base-gray02);
        }
      }
      dd {
        color: var(--lp-text-black);
        @media (768px <= width) {
          flex: 1 1 65%;
        }
        .date {
          font-weight: bold;
          span {
            font-family: var(--en-font);
            font-size: 1.8rem;
          }
          &.text-box {
            padding: 0 2rem;
            @media (768px <= width) {
              font-size: 1.4rem;
              line-height: 152%;
            }
            @media (width < 768px) {
              text-align: left;
            }
          }
        }
      }
      &.membership {
        background-color: var(--lp-base-gold);
        dt {
          color: var(--lp-base-white);
          &::before {
            background-color: #9c835d;
          }
        }
        dd {
          color: var(--lp-base-white);
        }
      }
    }
    > div {
      padding: 2.4rem 2rem;
      text-align: center;
      background-color: var(--lp-base-red);
      font-size: 1.6rem;
      font-weight: bold;
    }
    &.normal {
      margin-top: 12rem;
      @media (width < 768px) {
        margin-top: 10rem;
      }
      > div {
        color: var(--lp-text-black);
        background-color: var(--lp-base-white);
        p {
          @media (width < 768px) {
            text-align: left;
          }
        }
        p:not(:last-child) {
          margin-bottom: 0.8rem;
        }
      }
    }
  }
  .delivery-schedule-wrapper {
    h2 {
      margin-bottom: 0;
    }
    div {
      border: 2px solid var(--lp-base-blue);
      text-align: center;
      padding: 2.4rem 1rem;
      font-size: 1.4rem;
    }
  }
}
.attention-section {
  .sub-title.attention-title {
    background-color: var(--lp-base-red);
  }
  .attention-list-wrapper {
    position: relative;
    padding: 2.4rem;
    width: 100%;
    z-index: 10;
    p {
      font-size: 1.4rem;
    }
    h4 {
      font-size: 1.6rem;
      color: var(--lp-base-blue);
    }
    ol {
      li {
        list-style: decimal inside;
      }
    }
    .wrapper-bg {
      inset: 0;
      background: #2e2e2ebf;
      position: absolute;
      top: 0;
      z-index: -1;
    }
  }
}