@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Lexend+Zetta:wght@100..900&display=swap");

:root {
  --lp-color-blue: #31a7da;
  --lp-color-white: #ffffff;
}
main {
  background: var(--lp-color-blue);
  font-size: clamp(14px, 1.6rem, 16px);
  overflow: clip;
  section {
    .inner {
      max-width: 104rem;
      @media (768px <= width) {
        padding: 0;
      }
    }
    .en {
      font-family: "Lexend Zetta", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
    }
  }
}

/* ---------------------------------- */
/* メインビジュアル */
/* ---------------------------------- */

.mainvisual-section {
  width: 100%;
  line-height: 0;
  @media (768px <= width) {
    aspect-ratio: 16 / 9;
  }
  @media (width < 768px) {
    aspect-ratio: 2 / 3;
  }
  img {
    width: 100%;
    height: auto;
  }
}
/* ---------------------------------- */
/* ノベルティセット */
/* ---------------------------------- */

.section-novelty {
  background-color: var(--lp-color-white);

  @media (768px <= width) {
    padding: 8rem 0;
  }
  @media (width < 768px) {
    padding: 4rem 0;
  }
  .novelty-wrapper {
    background: #d5f2ff;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: relative;
    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--lp-color-blue);
      position: absolute;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
    }
    @media (768px <= width) {
      flex-direction: row;
      padding: 4rem 6rem;
    }
    @media (width < 768px) {
      flex-direction: column;
      padding: 3.2rem;
    }
  }
  .novelty-text {
    h3 {
      color: var(--lp-color-blue);
      font-size: clamp(20px, 2.4rem, 24px);
      font-weight: bold;
      margin-bottom: 1rem;
      line-height: 1.4;
    }
    p {
      font-size: clamp(16px, 1.8rem, 18px);
      margin-bottom: 1rem;
    }
    .price-text {
      display: flex;
      align-items: baseline;
      gap: 1em;
      font-weight: bold;
      dt {
        color: var(--lp-color-blue);
      }
      span {
        font-style: normal;
        font-size: clamp(22px, 2.6rem, 26px);
        font-family: Fira Sans, sans-serif;
        display: inline-block;
        &::first-letter {
          font-size: clamp(14px, 1.6rem, 16px);
        }
      }
    }
    @media (768px <= width) {
      width: 58%;
    }
  }
  .novelty-image {
    img {
      width: 100%;
      height: auto;
    }
    @media (768px <= width) {
      width: calc(100% - (58% + 2rem));
    }
  }
}

/* ---------------------------------- */
/* 予約期間 */
/* ---------------------------------- */

.reserve-section {
  display: none;
  background-color: var(--lp-color-white);
  padding: 4rem 0;
  .reserve-wrapper {
    display: flex;
    width: 100%;
    /* border-top: 2px solid var(--lp-color-blue);
    border-bottom: 2px solid var(--lp-color-blue); */
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding: 2rem;
    position: relative;
    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--lp-color-blue);
      position: absolute;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
    }

    div {
      display: flex;
      align-items: baseline;
      flex-direction: row;
      gap: 1rem;
      dt {
        font-weight: bold;
        color: var(--lp-color-blue);
        white-space: nowrap;
      }
      dd {
        span {
          font-size: clamp(18px, 2rem, 20px);
          font-family: Fira Sans, sans-serif;
        }
      }
    }
    @media (width < 768px) {
      flex-direction: row;
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 2rem;
      div {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0;
      }
    }
  }
}

/* ---------------------------------- */
/* カレンダー詳細 */
/* ---------------------------------- */

.calendar-section {
  color: var(--lp-color-white);

  @media (768px <= width) {
    padding: 8rem 0;
  }
  @media (width < 768px) {
    padding: 4.8rem 0;
  }
  .inner {
    position: relative;
    z-index: 10;
  }
  img {
    width: 100%;
    height: auto;
  }
  .title-area {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      background-color: black;
      border-right: 8px solid var(--lp-color-white);
      border-left: 8px solid var(--lp-color-white);
      z-index: -2;
    }
    .calendar-section-title {
      margin-bottom: 1rem;
      .en {
        line-height: 1;
        span {
          display: block;
          font-weight: 700;
          font-size: clamp(44px, 4.8rem, 48px);
        }
      }
      p {
        font-weight: bold;
        font-size: clamp(24px, 2.8rem, 28px);
      }
    }
    .price-text {
      display: flex;
      align-items: baseline;
      gap: 1em;
      font-weight: bold;
      span {
        font-style: normal;
        font-size: clamp(22px, 2.6rem, 26px);
        font-family: Fira Sans, sans-serif;
        display: inline-block;
        &::first-letter {
          font-size: clamp(14px, 1.6rem, 16px);
        }
      }
    }
    @media (768px <= width) {
      &::before {
        width: calc(36% - 2rem);
        height: calc(100% + 9rem);
        top: -8rem;
        clip-path: polygon(100% 0%, 100% calc(100% - 8rem), 0 100%, 0 0);
      }
    }
    @media (width < 768px) {
      &::before {
        width: 100%;
        height: calc(100% + 6.8rem);
        top: -4.8rem;
        clip-path: polygon(100% 0%, 100% calc(100% - 4.8rem), 0 100%, 0 0);
      }
      .calendar-section-title {
        padding: 0 1.6rem;
        .en {
          font-size: 3vw;
          span {
            font-size: 9.5vw;
          }
        }
        .jp {
          font-size: 4.4vw;
        }
      }
      .price-text {
        padding: 0 1.6rem 2rem;
        font-size: 3vw;
      }
    }
  }
  .detail-area {
    padding-top: 4rem;
    display: flex;
    @media (768px <= width) {
      gap: 4rem;
      flex-wrap: wrap;
      .image-box,
      .text-box {
        width: calc((100% - 4rem) / 2);
        z-index: 10;
      }
      .thumbnail-box {
        width: 100%;
      }
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 2rem;
      position: relative;
      .image-box {
        order: 1;
      }
      .text-box {
        order: 3;
      }
      .thumbnail-box {
        order: 2;
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(5.2% + 4.8rem);
        background-color: black;
        border-right: 8px solid var(--lp-color-white);
        border-left: 8px solid var(--lp-color-white);
        bottom: -4.85rem;
        z-index: -2;
        clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 4.8rem);
      }
    }

    .image-box {
      border-radius: 0.8rem;
      overflow: clip;
      background-color: #00000020;
    }
    .text-box {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      .item-option {
        font-size: clamp(12px, 1.4rem, 14px);
        div {
          display: flex;
          flex-direction: row;
          gap: 2rem;
          margin-bottom: 2rem;
          align-items: flex-start;
          dt {
            font-weight: bold;
            line-height: 1;
            padding: 0.5rem 0;
            text-align: center;
            width: 5em;
            color: var(--lp-color-blue);
            background-color: var(--lp-color-white);
            border-radius: 1rem;
          }
        }
        @media (width < 768px) {
          padding: 0 1.6rem;
          div {
            flex-direction: column;
            &:last-child {
              margin-bottom: 1rem;
            }
            gap: 1rem;
            dt {
              width: 100%;
            }
          }
        }
      }
    }
    .btn-wrapper {
      .btn {
        &::before {
          background: linear-gradient(to right, #c68f3d, #be9e6d);
        }
        &:hover {
          color: #be9e6d;
          .btnarrow {
            border-color: #be9e6d;
          }
        }
      }
    }
  }
  .thumbnail-box {
    padding: 2rem;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: calc(36% - 2rem);
      height: calc(100% + 8rem + 65%);
      background-color: black;
      border-right: 8px solid var(--lp-color-white);
      border-left: 8px solid var(--lp-color-white);
      bottom: -8.05rem;
      z-index: -2;
      clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 8rem);
      @media (width < 768px) {
        display: none;
      }
    }
    &::after {
      content: "";
      inset: 0;
      position: absolute;
      top: 0;
      left: 0;
      background: rgb(255, 255, 255);
      /* mix-blend-mode: multiply; */
      border-radius: 0.8rem;
      z-index: -1;
    }
    .swiperThumb {
      overflow: clip;
      margin-bottom: 1.2rem;
      .swiper-slide {
        border-radius: 0.4rem;
        padding: 1rem;
        background: #00000020;
        transition: all 0.4s ease;
        img {
          opacity: 0.5;
          transition: all 0.4s ease;
        }
        &.swiper-slide-thumb-active {
          background-color: #31a7da45;
          img {
            opacity: 1;
          }
        }
      }
    }
    .swiper-scrollbar {
      margin-bottom: 1.2rem;
      &.swiper-scrollbar-horizontal,
      .swiper-horizontal > & {
        bottom: var(--swiper-scrollbar-bottom, 4px);
        height: var(--swiper-scrollbar-size, 4px);
        left: var(--swiper-scrollbar-sides-offset, 2%);
        position: absolute;
        top: var(--swiper-scrollbar-top, auto);
        width: calc(100% - var(--swiper-scrollbar-sides-offset, 2%) * 2);
        z-index: 50;
        background-color: #c9c9c9;
      }
      .swiper-scrollbar-drag {
        cursor: grab;
        background-color: var(--lp-color-blue);
      }
    }
  }
}

/* 壁掛け */
#wallType.calendar-section {
  background: linear-gradient(0deg, #31a7da 0%, #31a7da 70%, #077cae 100%);
  @media (768px <= width) {
    .title-area {
      &::before {
        right: 7%;
      }
    }
    .detail-area {
      flex-direction: row-reverse;
    }
    .thumbnail-box {
      &::before {
        left: 7%;
      }
    }
  }
}

/* 卓上 */
#desktopType.calendar-section {
  background: linear-gradient(180deg, #31a7da 0%, #31a7da 70%, #077cae 100%);
  @media (768px <= width) {
    padding: 0 0 8rem;
    .title-area {
      text-align: right;
      &::before {
        left: 7%;
      }
    }
    .price-text {
      justify-content: flex-end;
    }
    .thumbnail-box {
      &::before {
        right: 7%;
      }
    }
  }
  @media (width < 768px) {
    padding: 0 0 4.8rem;
  }
}

/* ---------------------------------- */
/* 注意書き */
/* ---------------------------------- */
.notice-section {
  padding: 4rem 0;
  background-color: var(--lp-color-white);
  .notice-wrapper {
    background: #d5f2ff;
    display: flex;
    h2 {
      font-weight: bold;
      background: var(--lp-color-blue);
      color: var(--lp-color-white);
      width: 12em;
      text-align: center;
      font-size: clamp(16px, 1.8rem, 18px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .list {
      padding: 1rem 4rem;
      width: calc(100% - 12em);
      li {
        list-style: none;
        padding-left: 1em;
        text-indent: -1em;
        font-size: clamp(12px, 1.4rem, 14px);
        &::before {
          content: "※";
        }
      }
    }
    @media (width < 768px) {
      flex-direction: column;
      h2,
      .list {
        width: 100%;
      }
      h2 {
        padding: 1rem 0;
      }
      .list {
        padding: 1rem;
      }
    }
  }
  .logo-footballtogether {
    max-width: 80%;
    height: auto;
    margin-top: 4rem;
    margin-inline: auto;
    @media (768px <= width) {
      width: 40%;
    }
  }
}

/* ---------------------------------- */
/* モーション */
/* ---------------------------------- */

[data-animation="slide-up"] {
  opacity: 0;
  transform: translateY(10rem);
  transition: all 0.4s ease;
  &.is-animated {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-animation="novelty-animation"] {
  .novelty-wrapper {
    &::before,
    &::after {
      opacity: 0;
      transform: scaleX(0);
      transition: all 0.4s 0.8s ease;
    }
  }
  &.is-animated {
    .novelty-wrapper {
      &::before,
      &::after {
        opacity: 1;
        transform: scaleX(1);
      }
    }
  }
}

[data-animation="title-animation"] {
  .en {
    opacity: 0;
    transform: translateY(-3rem);
    transition: all 0.4s 0.4s ease-in;
  }
  .jp {
    opacity: 0;
    transform: translateY(-2rem);
    transition: all 0.4s 0.8s ease-in;
  }
  .price-text {
    opacity: 0;
    transform: translateY(-4rem);
    transition: all 0.4s 1.4s ease-in;
  }
  &::before {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition: all 0.6s 2s ease-in;
  }
  &.is-animated {
    .en,
    .jp,
    .price-text {
      opacity: 1;
      transform: translateY(0);
    }
    &::before {
      opacity: 1;
      transform: scaleY(1);
    }
  }
}
[data-animation="thumbnail-animation"] {
  &.thumbnail-box {
    opacity: 0;
    transform: translateY(10rem);
    transition: all 0.4s ease;
  }
  &.thumbnail-box.is-animated {
    opacity: 1;
    transform: translateY(0);
  }
  @media (768px <= width) {
    &::before {
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: all 0.6s 1s ease-in;
    }
    &.is-animated::before {
      opacity: 1;
      transform: scaleY(1);
    }
  }
}

[data-animation="notice-animation"] {
  .notice-wrapper {
    opacity: 0;
    transform: translateY(10rem);
    transition: all 0.6s ease;
    h2 {
      opacity: 0;
      transform: translateX(-10rem);
      transition: all 0.6s 0.8s ease;
    }
    ul {
      opacity: 0;
      transform: translateX(10rem);
      transition: all 0.6s 0.8s ease;
    }
  }
  .logo-footballtogether {
    opacity: 0;
    transform: scale(0);
    transition: all 1s 1.4s ease;
  }
  &.is-animated {
    .notice-wrapper {
      opacity: 1;
      transform: translateY(0);
      h2 {
        opacity: 1;
        transform: translateX(0);
      }
      ul {
        opacity: 1;
        transform: translateX(0);
      }
    }
    .logo-footballtogether {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@media (width < 768px) {
  [data-animation="detail-animation"] {
    &::before {
      opacity: 0;
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: all 0.4s 2s ease-in;
    }
    &.is-animated::before {
      opacity: 1;
      transform: scaleY(1);
    }
  }
}