@layer base, components, utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  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;
  }
}

@layer components {
  .mv {
    img {
      width: 100%;
    }
  }

  .container {
    @media (768px <=width) {
      display: grid;
      grid-template-columns: 1fr clamp(400px, 50vw, 596px);
      align-items: flex-start;
    }
  }

  header {
    background: #D3E1CC url('/ex/aid/2026/assets/img/bg-01.webp') no-repeat center/cover;

    @media (768px <=width) {
      padding: 20px;
    }

    @media (width < 768px) {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;

      &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0s 0s;
      }
    }

    @media (768px <=width) {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    nav {
      border-radius: 16px;
      border: 4px solid var(--green, #A0B792);
      background: var(--white, #FFF);

      @media (768px <=width) {
        padding: 40px;
        width: fit-content;
        max-width: 100%;
      }

      @media (width < 768px) {
        padding: 40px 24px;
        width: 90%;
        margin: 0 auto;
      }

      .nav-list {
        >li {
          color: var(--dark-green, #546B47);
          font-weight: 700;
          font-size: var(--fz-20);
          letter-spacing: .1em;

          >a {
            display: block;
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
            transition: color 0.3s ease;

            &:hover {
              color: var(--primary, #A0B792);
            }

            &::before {
              content: "";
              background: url('/ex/aid/2026/assets/img/icon-maru.svg') center / cover;
              position: absolute;
              width: 20px;
              height: 20px;
              left: 0;
              top: 18px;
              transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            &:hover::before {
              transform: scale(1.2);
            }
          }

          +li {
            border-top: 2px solid var(--pail-green, #D3E1CC);
          }

          &.comingsoon a {
            filter: grayscale(1);
            opacity: .4;
          }
        }
      }

      .schedule-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 10px;
        padding: 0 0 12px;
        letter-spacing: 0;

        >li a {
          display: flex;
          align-items: center;
          gap: 10px;
          transition: opacity 0.3s ease;

          &:hover {
            opacity: .6;
          }
        }

        .venue {
          color: var(--black, #111);
          font-size: var(--fz-16);
          font-weight: 700;
        }
      }
    }
  }

  .toggle-btn {
    position: fixed;
    top: 8px;
    right: 16px;
    width: 46px;
    height: 32px;
    background: var(--dark-green, #546B47);
    border-radius: 50px;
    z-index: 100;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    &.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    @media (768px <=width) {
      display: none;
    }

    span {
      display: block;
      width: 16px;
      height: 2px;
      background: #fff;
      transition: all .4s ease;
    }

    &.is-open {
      span:nth-child(1) {
        transform: rotate(45deg) translate(1px, 1px);
      }

      span:nth-child(2) {
        transform: rotate(-45deg) translate(3px, -3px);
      }
    }
  }

  main {
    container-type: inline-size;
  }

  #concept {
    padding: 0;
    background: var(--primary, #FC0);

    .inner {
      width: 300px;
      margin: 0 auto;
      padding: 60px 0;
    }

    p {
      font-size: var(--fz-16);
      font-weight: 700;
      line-height: 1.75;

      +p {
        margin-top: 1.5em;
      }
    }

    .text-img {
      width: 220px;
      margin: 3em auto 0;
    }
  }

  section {
    position: relative;
    z-index: 1;
    padding: 290px 0 40px;

    .player-img {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      z-index: -1;

      @container (width < 500px) {
        width: 100%;
        overflow: hidden;
        padding-bottom: 200px;

        img {
          transform: scale(1.3) translateY(50px);
        }
      }

      &.fade-in {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        will-change: opacity, transform;
      }

      &.fade-in.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        will-change: auto;
      }
    }

    .content-box {
      margin: 0 auto;
      width: 90%;
      border-radius: 24px;
      background: var(--pail-green, #D3E1CC);
      padding: 40px 24px;

      +.content-box {
        margin-top: 40px;
      }
    }

    .title-main {
      color: var(--black, #111);
      font-family: var(--font-title);
      font-size: var(--fz-48);
      font-weight: 900;
      letter-spacing: -3.36px;
      text-align: center;
      text-shadow: 3px 3px 0 #F2F2F2;
      line-height: 1.2;
    }

    .title-sub {
      color: var(--white, #FFF);
      font-size: var(--fz-20);
      font-weight: 700;
      line-height: 1;
      text-align: center;

      span {
        display: inline-block;
        background: var(--dark-green, #546B47);
        padding: 4px;
      }
    }

    .title-maru {
      position: relative;
      font-size: var(--fz-20);
      font-weight: 800;
      padding-left: 1.4em;

      &::before {
        content: "";
        background: url('/ex/aid/2026/assets/img/icon-maru.svg') center / cover;
        position: absolute;
        width: var(--fz-20);
        height: var(--fz-20);
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      +* {
        margin-top: 10px;
      }
    }

    hgroup {
      display: flex;
      justify-content: center;
      flex-direction: column;
      gap: 1em;

      +* {
        margin-top: 32px;
      }
    }

    .img-box {
      +* {
        margin-top: 20px;
      }
    }

    .text-box {
      >*+* {
        margin-top: 10px;
      }

      >*+.title-maru {
        margin-top: 20px;
      }
    }

    .attention-list>li,
    .attention-text {
      font-size: var(--fz-14);
      color: var(--dark-gray);
      padding-left: 1em;
      text-indent: -1em;
      position: relative;

      >* {
        text-indent: 0;
      }

      &::before {
        content: "※";
        width: 1em;
        display: inline-block;
        text-indent: 0;
      }
    }

    .btn {
      display: block;
      background: var(--dark-green);
      border: 2px solid var(--dark-green);
      color: #fff;
      font-size: var(--fz-16);
      font-weight: 700;
      padding: 16px 24px;
      border-radius: 50px;
      line-height: 1;
      position: relative;
      width: 340px;
      max-width: 100%;
      margin: 0 auto;
      transition: background-color 0.5s ease, color 0.5s ease;

      &:focus-visible {
        outline: 2px solid var(--dark-green);
        outline-offset: 4px;
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      &::before {
        right: 24px;
        width: 36px;
        height: 24px;
        border-radius: 50px;
        background: var(--pail-green);
      }

      &::after {
        position: absolute;
        width: 12px;
        height: 12px;
        right: 35px;
        background: linear-gradient(to right, #fff 0%, #fff 50%, var(--dark-green) 50%, var(--dark-green) 100%);
        background-size: 200% 100%;
        background-position: 100% 0;
        mask-image: url('/ex/aid/2026/assets/img/icon-arrow.svg');
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url('/ex/aid/2026/assets/img/icon-arrow.svg');
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: background-position 0.5s ease;
      }

      &:hover {
        background: #fff;
        color: var(--dark-green);

        &::after {
          background-position: 0% 0;
        }
      }

      &.is-ticket {
        background: var(--primary);
        color: var(--black, #111);
        width: 100%;
        border: 2px solid var(--primary);

        &:focus-visible {
          outline-color: var(--black);
        }

        &::before {
          background: #fff;
        }

        &::after {
          background: linear-gradient(to right, #fff 0%, #fff 50%, var(--black) 50%, var(--black) 100%);
          background-size: 200% 100%;
          background-position: 100% 0;
        }

        &:hover {
          background: #fff;

          &::before {
            background: var(--primary);
          }

          &::after {
            background-position: 0% 0;
          }
        }
      }
    }

    .more-button {
      display: block;
      margin: 0 auto;
      background: #fff;
      border: 2px solid var(--black, #111);
      padding: 16px 24px;
      width: 90%;
      text-align: left;
      font-size: var(--fz-16);
      font-weight: 700;
      position: relative;
      cursor: pointer;
      transition: background-color 0.5s ease, color 0.5s ease;

      &:focus-visible {
        outline: 2px solid var(--dark-green);
        outline-offset: 2px;
      }

      &:hover {
        background: var(--dark-green);
        color: #fff;
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      &::before {
        content: '';
        background: var(--pail-green);
        width: 36px;
        height: 24px;
        right: 24px;
        border-radius: 50px;
        transition: background 0.3s ease;
      }

      &::after {
        width: 13px;
        height: 13px;
        right: 35px;
        background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 13 13"%3E%3Cpath fill="%23111" d="M0 5h13v3H0z"/%3E%3Cpath fill="%23111" d="M5 13V0h3v13z"/%3E%3C/svg%3E') no-repeat center/contain;
      }

      &.is-open::after {
        background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 13 13"%3E%3Cpath fill="%23111" d="M0 5h13v3H0z"/%3E%3C/svg%3E') no-repeat center/contain;
      }
    }

    *+.btn,
    *+.more-button {
      margin-top: 30px;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      will-change: opacity, transform;
    }

    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }
  }

  #uniform {
    background: url('/ex/aid/2026/assets/img/uniform-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--primary, #FC0) 100px, var(--green) 100px);
  }

  #schedule {
    background: url('/ex/aid/2026/assets/img/schedule-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--green) 100px, var(--gray, #F2F2F2) 100px);

    .more-button {
      +.content-box {
        margin-top: 72px;
      }
    }

    .schedule-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;

      li a {
        display: grid;
        grid-template-columns: 1fr auto;
        border-radius: 16px;
        background: #fff;
        border: 4px solid var(--green, #A0B792);
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        &:focus-visible {
          outline: 2px solid var(--dark-green);
          outline-offset: 2px;
        }

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }

      .text-area {
        padding: 8px 32px 16px;

        @container (width < 500px) {
          padding: 8px;
        }

        .date {
          @container (width < 500px) {
            width: 90%;
          }
        }

        .venue {
          font-size: var(--fz-20);
          font-weight: 700;
          line-height: 1.2;

          @container (width < 500px) {
            font-size: var(--fz-18);
          }
        }
      }

      .link-area {
        background: var(--green, #A0B792);
        padding: 10px;
        display: flex;
        align-items: center;

        span {
          display: block;
          padding: 10px 6px;
          border-radius: 50px;
          background: var(--pail-green);

          img {
            transform: rotate(90deg);
          }
        }
      }
    }

    .is-schedule {
      padding: 0;
      overflow: hidden;

      &.has-more {
        border-radius: 24px 24px 0 0;

        &.is-open {
          border-radius: 24px;
        }
      }
    }

    .schedule-head {
      display: grid;
      grid-template-columns: auto 1fr;

      .date-area {
        background: var(--green, #A0B792);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 173px;

        @container (width < 500px) {
          padding: 10px;
          min-width: 100px;
        }
      }

      .date {
        height: 90px;

        @container (width < 500px) {
          height: 50px;
        }

        img {
          height: 100%;
        }

        &.is-white img {
          filter: brightness(0) invert(1);
        }
      }

      .time {
        color: #fff;
        font-size: var(--fz-16);
        font-weight: 700;

        @container (width < 500px) {
          font-size: var(--fz-14)
        }
      }

      .detail-area {
        background: #fff;
        padding: 24px;

        @container (width < 500px) {
          padding: 16px 16px 24px;
        }
      }

      .place-area {
        display: grid;
        grid-template-columns: 1fr auto;
        font-size: var(--fz-14);

        .main {
          font-family: var(--font-title);
          font-size: var(--fz-48);
          font-weight: 900;
          line-height: 1.4;
        }

        .team {
          width: 80px;

          img {
            width: 100%;
          }
        }
      }

      .comingsoon {
        margin-top: 20px;
      }

      .link-list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;

        a {
          color: var(--dark-green, #A0B792);
          font-size: var(--fz-14);
          font-weight: 700;
          text-decoration: underline;
          text-underline-offset: 3px;
          transition: text-decoration 0.5s ease;
          position: relative;
          padding-right: 16px;

          &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            mask-image: url('/ex/aid/2026/assets/img/icon-arrow.svg');
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-image: url('/ex/aid/2026/assets/img/icon-arrow.svg');
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            background-color: var(--green, #A0B792);
            transition: all .5s;
          }

          &:focus-visible {
            outline: 2px solid var(--dark-green);
            outline-offset: 2px;
          }

          &:hover {
            text-decoration: none;

            &::after {
              transform: translateY(-50%) translateX(4px);
            }
          }
        }
      }

      .btn {
        margin-top: 16px;

        @media (width < 768px) {
          margin-top: 10px;
          padding: 16px;

          &::before {
            right: 16px;
          }

          &::after {
            right: 26px;
          }
        }
      }
    }

    .event-box {
      padding: 30px;
      transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;

      &:nth-child(odd) {
        background: #fff;
      }

      &:nth-child(n+4) {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
      }

      &.is-show {
        max-height: 1000px;
        opacity: 1;
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
  }

  #project {
    background: url('/ex/aid/2026/assets/img/project-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--gray, #F2F2F2) 100px, var(--green) 100px);
  }

  #goods {
    background: url('/ex/aid/2026/assets/img/goods-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--green) 100px, var(--gray, #F2F2F2) 100px);

    .goods-list {
      margin-top: 72px;
      display: flex;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;

      /* IE and Edge */
      &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
      }

      padding-left: 5%;
      padding-right: 5%;
      gap: 20px;
      user-select: none;
      -webkit-user-select: none;

      li {
        width: 60%;
        flex-shrink: 0;
      }

      .title {
        background: var(--pail-green);
        font-size: var(--fz-14);
        font-weight: 700;
        padding: 10px;
      }

      a {
        transition: opacity 0.4s ease;

        &:focus-visible {
          outline: 2px solid var(--dark-green);
          outline-offset: 2px;
        }

        &:hover {
          opacity: .5;
        }
      }
    }
  }

  #campaign {
    background: url('/ex/aid/2026/assets/img/campaign-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--gray, #F2F2F2) 100px, var(--green) 100px);
  }

  #outline {
    background: url('/ex/aid/2026/assets/img/outline-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--green) 100px, var(--primary, #FC0) 100px);
    padding: 0;

    .inner {
      width: 300px;
      margin: 0 auto;
      padding: 100px 0 40px;

      h2 {
        width: 254px;
        max-width: 80%;
        margin: 0 auto;
      }

      .text-box {
        margin-top: 30px;
      }

      p {
        font-size: var(--fz-16);
        font-weight: 700;
        line-height: 1.75;

        +p {
          margin-top: 1.5em;
        }
      }
    }
  }

  #news {
    background: url('/ex/aid/2026/assets/img/news-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--primary, #FC0) 100px, var(--gray, #F2F2F2) 100px);
    padding: 36cqi 0 40px;

    .news-list {
      margin-top: 30px;
      padding-right: 10px;
      max-height: 200px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--dark-gray) transparent;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: var(--dark-gray);
        border-radius: 4px;
      }

      li {
        &:first-of-type a {
          padding: 0 0 20px;
        }

        a {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: flex-start;
          gap: 20px;
          padding: 20px 0;

          &:focus-visible {
            outline: 2px solid var(--dark-green);
            outline-offset: 2px;
            border-radius: 4px;
          }
        }

        .date {
          font-size: var(--fz-20);
          color: var(--green);
          font-weight: 800;
          font-family: var(--font-title);
        }

        .title {
          font-size: var(--fz-14);
          margin-top: .5em;
        }

        +li {
          border-top: 1px solid var(--green);
        }
      }
    }
  }

  #sponsor {
    background: url('/ex/aid/2026/assets/img/sponsor-bg.webp') no-repeat center top 20px / 100% auto, linear-gradient(to bottom, var(--gray, #F2F2F2) 100px, var(--green) 100px);
    padding: 30cqi 0 80px;

    .sponsor-list {
      width: 90%;
      margin: 30px auto 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;

      li {
        transition: max-height 0.4s ease, opacity 0.4s ease;

        &:nth-child(n+7) {
          max-height: 0;
          opacity: 0;
          overflow: hidden;
        }

        &.is-show {
          max-height: 500px;
          opacity: 1;
        }
      }

      a {
        transition: opacity 0.4s ease;

        &:focus-visible {
          outline: 2px solid var(--primary);
          outline-offset: 2px;
        }

        &:hover {
          opacity: .5;
        }
      }
    }
  }

  footer {
    background: var(--black, #111);
    padding: 60px 0;
    text-align: center;

    .logo {
      display: block;
      margin: 0 auto;
      width: 150px;
    }

    small {
      display: block;
      margin-top: 40px;
      color: var(--white, #FFF);
      font-size: 10px;
    }
  }
}

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

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