@layer base, components, utilities;

@layer base {
  html {
    scroll-behavior: smooth;
    @media (width < 768px) {
      overflow-x: clip;
    }
  }

  body {
    font-family: var(--font-main);
    font-size: var(--fz-16);
    line-height: 1.6;
    color: var(--text-main);
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
}

@layer components {
  .mv {
    position: relative;
    @media (768px <= width) {
      aspect-ratio: 1440 / 770;
      background: url('../img/mv-pc.webp') no-repeat center / cover;
    }
    @media (width < 768px) {
      aspect-ratio: 390 / 710;
      background: url('../img/mv-sp.webp') no-repeat center / cover;
    }
    h1 {
      position: absolute;
      transform: translateX(-50%);
      aspect-ratio: 242 / 246;
      display: grid;
      place-items: center;
      left: 50%;
      @media (768px <= width) {
        top: 30px;
      }
      @media (width < 768px) {
        top: 30vw;
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img/logo-back.svg') no-repeat center / cover;
        z-index: -1;
        animation: spin 20s linear infinite;
      }
      @media (768px <= width) {
        width: 36%;
        padding: 6%;
      }
      @media (width < 768px) {
        width: 86%;
        padding: 10%;
      }
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  header {
    background: #fff;
    border-bottom: 6px solid #000;
    position: sticky;
    top: 0;
    z-index: 100;
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      @media (768px <= width) {
        padding: 8px clamp(16px, 2vw , 40px);
      }
      @media (width < 768px) {
        padding: 8px;
      }
    }
    nav > .link-month {
      display: flex;
      li {
        a {
          display: block;
          font-size: 38px;
          font-weight: 900;
          line-height: 1;
          z-index: 1;
          position: relative;
          @media (width < 768px) {
            display: flex;
            align-items: baseline;
          }
          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 12px;
            background: #FFE100;
            z-index: -1;
            opacity: 0;
            transition: all 0.3s var(--ease);
          }
          .num {
            font-family: var(--font-en);
            @media (768px <= width) {
              font-size: clamp(32px, calc(100vw * 36 / 1200), 40px);
            }
            @media (width < 768px) {
              font-size: 32px;
              height: 1em;
              display: inline-block;
            }
          }
          .unit {
            @media (768px <= width) {
              font-size: 24px;
              font-size: clamp(18px, calc(100vw * 22 / 1200), 24px);
            }
            @media (width < 768px) {
              font-size: 18px;
            }
          }
        }
        &:not(:last-child) {
          a {
            border-right: 1px solid rgba(0, 0, 32, 0.50);
            @media (768px <= width) {
              margin-right: clamp(8px, 1.4vw, 16px);
              padding-right: clamp(8px, 1.4vw, 16px);
            }
            @media (width < 768px) {
              margin-right: 8px;
              padding-right: 8px;

            }
            &::before {
              width: calc(100% - 16px);
            }
          }
        }
        &:hover,
        &.active {
          a {
            &::before {
              opacity: 1;
            }
          }
        }
      }
    }
    .toggle-menu {
      display: block;
      background: #F3F3F3;
      border-radius: 4px;
      width: 32px;
      height: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      position: relative;
      z-index: 120;
      cursor: pointer;
      @media (768px <= width) {
        display: none;
      }
      .bar {
        display: block;
        width: 20px;
        height: 2px;
        background: #000;
        border-radius: 2px;
      }
      &.active {
        background: transparent;
        .bar {
          &:nth-child(1) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
          }
          &:nth-child(2) {
            position: absolute;
            opacity: 0;
          }
          &:nth-child(3) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) rotate(-45deg);
          }
        }
      }
    }
    .nav-wrapper {
      @media (768px <= width) {
        display: contents;
      }
      @media (width < 768px) {
        position: fixed;
        display: none;
        inset: 0;
        overflow-y: auto;
        background-color: #006BC8;
        background-image:
          radial-gradient(rgba(40, 42, 68, 0.1) 0px, rgba(40, 42, 68, 0.1) 1px, transparent 2.5px),
          radial-gradient(rgba(40, 42, 68, 0.1) 0px, rgba(40, 42, 68, 0.1) 1px, transparent 2.5px);
        background-position: 0 0, 5px 5px;
        background-size: 10px 10px;
        z-index: 110;
        padding: 32px;
        &.active {
          display: block;
        }
      }
      .logo {
        @media (768px <= width) {
          display: none;
        }
        @media (width < 768px) {
          background: url('../img/logo-back.svg') no-repeat center / contain;
          width: 260px;
          padding: 40px;
          margin-inline: auto;
        }
      }
      .link-month {
        margin-top: 32px;
        @media (768px <= width) {
          display: none;
        }
        li + li {
          &::before {
            content: "";
            display: block;
            margin: 8px auto;
            width: 40%;
            height: 1px;
            background: rgba(255, 255, 255, 0.50);
          }
        }
        a {
          display: block;
          font-size: 40px;
          font-weight: 900;
          line-height: 1;
          z-index: 1;
          position: relative;
          color: #fff;
          display: flex;
          align-items: baseline;
          justify-content: center;
          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 12px;
            background: #FFE100;
            z-index: -1;
            opacity: 0;
            transition: all 0.3s var(--ease);
          }
          .num {
            font-family: var(--font-en);
            font-size: 40px;
          }
          .unit {
            font-size: 24px;
          }
        }
      }
    }
    .link-other {
      gap: 8px;
      @media (768px <= width) {
        display: flex;
      }
      @media (width < 768px) {
        margin: 32px auto 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      a {
        display: block;
        padding: 8px 16px;
        background: #000;
        color: #fff;
        display: grid;
        grid-template-columns: clamp(16px, 1vw, 24px) 1fr;
        gap: 8px;
        border-radius: 10px;
        font-weight: 800;
        transition: all 0.3s var(--ease);
        @media (768px <= width) {
          padding: 8px clamp(8px, 1vw , 16px);
          font-size: clamp(12px, calc(100vw * 16 / 1200), 18px);
        }
        @media (width < 768px) {
          width: clamp(200px, 90%, 300px);
          margin-inline: auto;
          font-size: clamp(14px, calc(100vw * 18 / 375), 18px);
        }
        .icon {
          display: grid;
          place-items: center;
          img {
            width: 100%;
            max-height: 22px;
          }
        }
        &:hover {
          opacity: 0.5;
        }
      }
      .media {
        a {
          background:#30CC01;
        }
      }
      .camp {
        a {
          background: #B7A636;
        }
      }
      .contract {
        a {
          background: #353B79;
        }
      }
    }
  }

  main {
    background-color: #006BC8;
    background-image:
      radial-gradient(rgba(40, 42, 68, 0.1) 0px, rgba(40, 42, 68, 0.1) 1px, transparent 2.5px),
      radial-gradient(rgba(40, 42, 68, 0.1) 0px, rgba(40, 42, 68, 0.1) 1px, transparent 2.5px);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
  }

  .month-block {
    .month-block__inner {
      margin: 0 auto;
      @media (768px <= width) {
        width: 1200px;
        max-width: 90%;
        padding: 80px 0;
        display: grid;
        grid-template-columns: 46% 1fr;
        align-items: flex-start;
        gap: 40px;
      }
      @media (width < 768px) {
        width: 90%;
        padding: 16px 0 40px;
      }
    }
    .month-block__side {
      @media (768px <= width) {
        position: sticky;
        top: 100px;
      }
      .pic {
        position: absolute;
        left: clamp(-110px, -5vw, -60px);
        bottom: 0;
        width: min(6vw, 130px);
        transform: translateY(30%);
      }
    }
    .month-block__title {
      position: relative;
      display: grid;
      grid-template-columns: 50% 50%;
      @media (768px <= width) {
        transform: translateX(-6%);
      }
      @media (width < 768px) {
        grid-template-columns: 46% 54%;
        padding: 40px 0 16px;
      }
      .decoration {
        position: relative;
        img {
          position: absolute;
          right: 50%;
          top: -24px;
          transform: translateX(50%);
          max-width: 100%;
          @media (width < 768px) {
            top: -40px;
            width: 70%;
          }
        }
      }
    }
    .month-block__item a {
      display: block;
      border: 6px solid var(--black, #000020);
      background: var(--white, #FFF);
      box-shadow: 8px 8px 0 0 #000;
      @media (width < 768px) {
        box-shadow: 6px 6px 0 0 #000;
      }
      .item-head__info {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .date {
        font-weight: 900;
        font-size: 28px;
        @media (width < 768px) {
          font-size: 24px;
        }
        span {
          @media (768px <= width) {
            font-size: 18px;
          }
          @media (width < 768px) {
            font-size: 14px;
          }
        }
      }
      .category {
        color: #fff;
        font-weight: 800;
        padding: 4px 8px 6px;
        line-height: 1;
        @media (width < 768px) {
          font-size: 12px;
        }
        &.team {
          background: #B8A536;
        }
        &.entertainment {
          background: #CC3299;
        }
        &.goods {
          background: #F66;
        }
        &.bpb {
          background: #2FDECF;
        }
        &.event {
          background: #F90;
        }
      }
      .item-head__title {
        font-weight: 800;
        font-size: 18px;
        @media (width < 768px) {
          font-size: 16px;
        }
      }
      .item-body {
        margin-top: 16px;
        display: flex;
        gap: 16px;
      }
      .text-box {
        h3 {
          font-size: 16px;
          font-weight: 800;
        }
        p {
          font-size: 14px;
        }
      }
    }
    .slider-wrap {
      position: relative;
      @media (768px <= width) {
        margin-top: 24px;
      }
      .icon-check {
        position: absolute;
        aspect-ratio: 1/1;
        display: grid;
        place-items: center;
        padding: 16px;
        z-index: 2;
        right: -20px;
        top: -60px;
        @media (width < 768px) {
          width: 100px;
          top: -40px;
        }
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: url('../img/icon-check-bg.webp') no-repeat center / cover;
          z-index: -1;
          animation: spin 20s linear infinite;
        }
        @media (768px <= width) {
          width: 120px;
        }
      }
      .month-block__item a {
        @media (768px <= width) {
          padding: 32px 40px;
        }
        @media (width < 768px) {
          padding: 24px;
        }
        .item-body {
          flex-direction: column;
        }
      }
    }
    .month-block__list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      @media (width < 768px) {
        margin-top: 24px;
      }
      .month-block__item a {
        border: 3px solid var(--black, #000020);
        box-shadow: 6px 6px 0 0 #000;
        padding: 16px;
        @media (width < 768px) {
          box-shadow: 4px 4px 0 0 #000;
        }
        .item-body {
          figure {
            width: 30%;
          }
          .text-box {
            width: calc(70% - 16px);
          }
        }
      }
    }
    .comingsoon {
      padding: 56px 0 120px;
      @media (width < 768px) {
        padding: 40px 0 64px;
      }
      p {
        font-family: var(--font-en);
        color: #fff;
        font-size: 60px;
        font-weight: 800;
        text-align: center;
        @media (width < 768px) {
          font-size: 32px;
        }
      }
    }
    .data-error {
      padding: 56px;
      background: #fff;
      p {
        font-family: var(--font-en);
        font-size: 60px;
        font-weight: 800;
        text-align: center;
      }
    }
  }

  .camp-block {
    --grid-color: #B42F061A;
    background-color: #FFEFCB;
    --grid-color: rgba(0, 8, 255, 0.1);
    --grid-size: 81px;
    --line-thickness: 1px;
    width: 100%;
    background-color: #ffffff;
    background-position: center;
    background-image:
      linear-gradient(
        to right,
        var(--grid-color) 0 var(--line-thickness),
        transparent var(--line-thickness) var(--grid-size)
      ),
      linear-gradient(
        to bottom,
        var(--grid-color) 0 var(--line-thickness),
        transparent var(--line-thickness) var(--grid-size)
      );
    background-size: var(--grid-size) var(--grid-size);
    @media (768px <= width) {
      margin-top: 80px;
    }
    @media (width < 768px) {
      margin-top: 24px;
    }
    .camp-block__slider {
      z-index: 1;
      overflow: hidden;
      max-width: 100%;
      .camp-block__slider-track {
        display: flex;
        width: max-content;
        animation: camp-slider-scroll 30s linear infinite;
      }
      &.camp-block__slider--reverse .camp-block__slider-track {
        animation-direction: reverse;
      }
      li {
        flex: none;
        width: fit-content;
      }
      img {
        display: block;
        @media (768px <= width) {
          width: clamp(200px, 23vw, 300px);
        }
        @media (width < 768px) {
          width: clamp(140px, 23vw, 300px);
        }
      }
    }
    .camp-block__main {
      z-index: 2;
      position: relative;
      @media (768px <= width) {
        padding: 40px 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 54px;
        width: 90%;
        margin-inline: auto;
      }
      @media (width < 768px) {
        padding: 24px 24px 56px;
      }
      .camp-block__title {
        position: relative;
        @media (width < 768px) {
          width: 50%;
        }
      }
      .deco {
        position: absolute;
        bottom: 0;
        @media (768px <= width) {
          right: 0;
        }
        @media (width < 768px) {
          width: 20%;
          left: 16px;
          bottom: 24%;
        }
      }
      .camp-block__text {
        display: grid;
        place-items: center;
        @media (width < 768px) {
          width: 80%;
          margin: 24px auto;
        }
        img {
          display: block;
        }
      }
      .camp-block__deco {
        position: relative;
        @media (width < 768px) {
          width: 100%;
        }
        img {
          position: absolute;
          @media (768px <= width) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          @media (width < 768px) {
            right: 0;
            bottom: -80px;
            width: 34%;
            max-width: 160px;
          }
        }
      }
    }
  }
  footer {
    background: #000020;
    padding: 24px 0;
    a {
      display: block;
      width: 180px;
      margin: 0 auto;
      @media (width < 768px) {
        width: 120px;
      }
      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
    small {
      display: block;
      margin-top: 16px;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      text-align: center;
      @media (width < 768px) {
        font-size: 10px;
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes camp-slider-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@layer utilities {
  @media (768px <= width) {
    .sp { display: none !important; }
  }
  @media (width < 768px) {
    .pc { display: none !important; }
  }
}

.pickup-slider-outer {
  position: relative;
  .pickup-slider {
    box-sizing: border-box;
    padding: 0 8px 8px 0;
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    margin-top: 0;
    background: var(--month-color);
    border: 2px solid var(--black, #000020);
    border-radius: 50%;
    z-index: 3;
    @media (width < 768px) {
      width: 36px;
      height: 36px;
    }
    &::after {
      font-size: 26px;
      font-weight: 900;
      color: var(--black, #000020);
      @media (width < 768px) {
        font-size: 16px;
      }
    }
  }
  .swiper-button-prev {
    left: -20px;
    @media (width < 768px) {
      left: -16px;
    }
  }
  .swiper-button-next {
    right: -20px;
    @media (width < 768px) {
      right: -8px;
    }
  }
  .swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
  }
  .swiper-pagination {
    position: static;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0;
    background: transparent;
    border: 2px solid #000;
    opacity: 0.6;
    border-radius: 50%;
    @media (width < 768px) {
      width: 10px;
      height: 10px;
    }
    &.swiper-pagination-bullet-active {
      opacity: 1;
      background: var(--month-color);
    }
  }
}

#oct {
  --month-color: #FF6745;
}
#nov {
  --month-color: #FFC800;
}
#dec {
  --month-color: #00E60B;
}
#jan {
  --month-color: #FF4040;
}