@charset "UTF-8";

/* =============================================================================

Top CSS

・トップページ用CSS「.top-×××」

上記はここに記述する

============================================================================= */

.top_l-heading {
  :where(&) {
    display:flex;
    justify-content:center;
    align-items:center;
    width:fit-content;
    font-size:3.6rem;
    line-height:1;
    letter-spacing:0.2em;
    margin-inline:auto;
    position:relative;
    @media (width <= 767px) {
      font-size:2.8rem;
    }
  }

  :where(& img) {
    max-width:unset;
    position:absolute;
    z-index: -1;
    pointer-events: none;
    opacity:.3;
    @media (width <= 767px) {
      opacity:.5;
    }
  }
}

:where(.top_l-deco) {
  pointer-events: none;
  position:absolute;
  z-index: -1;
}



@scope (.top-kv) {
  :scope {
    --bottom_height:6.4rem;
    z-index:5;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      --bottom_height:7.6rem;
    }
  }

  .logo {
    position:absolute;
    top:2.8rem;
    left:5.2rem;
    z-index:10;
    @media (width <= 767px) {
      top:1.2rem;
      left:2.0rem;
    }
  }

  @scope (.inner) {
    :scope {
      color:#fff;
      position:relative;
      z-index:1;
      container-type:inline-size;
      @media (width > 767px) {
        display:flex;
        justify-content:center;
        width:164.0rem;
        height:calc(100lvh - var(--bottom_height));
      }
      @media (width <= 767px) {
        padding-top:6.8rem;
      }
    }
    .text {
      display:flex;
      flex-direction:column;
      align-items:center;
      flex-shrink:0;
      @media (width > 767px) {
        /* 46.75:53.25 の比率で連動（46vw時 → margin ≈ 40.39vw） */
        --text-w:min(53.25cqw,46vw);
        margin-block:auto;
        margin-left:calc(var(--text-w) * 46.75 / 53.25);
        width:var(--text-w);
      }
      .title {
        @media (width <= 767px) {
          margin-bottom:1.6rem;
          padding-inline:.8rem;
        }
        img {
          @media (width > 767px) {
            width:auto;
            max-width:100%;
            max-height:46cqh;
            height:auto;
          }
        }
      }
      .desc {
        font-size:min(3.0rem,3.3cqh);
        letter-spacing:0.2em;
        line-height:1.8;
        filter:drop-shadow(0 0 .5rem #2B88CA);
        @media (width <= 767px) {
          font-size:2.0rem;
        }
      }
      .btn {
        margin-top:min(2.8rem,3.1cqh);
        @media (width > 767px) {
          max-width:22.44vw;
        }
        @media (width <= 767px) {
          margin-top:2.0rem;
          width:24.0rem;
        }

        img {
          @media (width <= 767px) {
            width:100%;
            height:auto;
          }
        }
      }
    }
    .img {
      flex-shrink:0;
      display:flex;
      justify-content:center;
      align-items:end;
      @media (width > 767px) {
        width:84.0rem;
        height:100%;
        position:absolute;
        left:0;
        z-index:-1;
      }
      @media (width <= 767px) {
        margin-top:2.4rem;
        padding-inline:2.0rem;
      }
      img {
        @media (width > 767px) {
          max-height:87cqh;
          height:77.2rem;
          width:auto;
        }
      }
    }
  }

  .m-abs_bg {
    height:calc(100% - var(--bottom_height));
  }

  .bottom {
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--cc-navy-B);
    color:#fff;
    text-align:center;
    font-size:2.0rem;
    font-weight:500;
    letter-spacing:0.2em;
    text-align:center;
    height:var(--bottom_height);
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      font-size:1.5rem;
      letter-spacing:0.1em;
      line-height:1.6;
    }
  }
}

.top-contents_wrap {
  position:relative;
}

.top-ticket_badge_wrap {
  display:flex;
  justify-content:end;
  align-items:end;
  width:0;
  height:calc(100% + 20.0rem + 5.0rem);
  position:absolute;
  top:-20.0rem;
  right:min(5.0rem,2.8vw);
  @media (width <= 767px) {
    height:calc(100% + 24.4rem + 2.0rem);
    top:-24.4rem;
    right:1.0rem;
  }
}
.top-ticket_badge {
  flex-shrink:0;
  --ring-inset:.5rem;
  --ring-stroke:2px;
  --ring-dash:1.4 2.8;
  display:block;
  border-radius:50%;
  width:min(25.0rem,14.0vw);
  position:sticky;
  z-index:10;
  bottom:min(5.0rem,2.8vw);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  overflow:clip;

  @media (width <= 767px) {
    --ring-inset:.4rem;
    --ring-stroke:1px;
    --ring-dash:1.5 2.0;
    width:12.5rem;
    bottom:calc(1.0rem + env(safe-area-inset-bottom));
  }

  .ring {
    border-radius:50%;
    position:absolute;
    inset:var(--ring-inset);
    width:calc(100% - var(--ring-inset) * 2);
    height:calc(100% - var(--ring-inset) * 2);
    pointer-events:none;
    overflow:visible;
    transform-origin:center;
    transform-box:fill-box;
    animation:top-ticket_badge-ring 40s linear infinite;

    circle {
      stroke:#fff;
      stroke-width:var(--ring-stroke);
      stroke-dasharray:var(--ring-dash);
      stroke-linecap:round;
      vector-effect:non-scaling-stroke;
    }
  }
}

@keyframes top-ticket_badge-ring {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}


/* Story
============================================================================= */
@scope (.top-story) {
  :scope {
    padding-block:14.4rem 12.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      padding-block:8.0rem;
    }
  }

  @scope (.inner) {
    :scope {
      @media (width > 767px) {
        display:grid;
        grid-template-columns:32.0rem 1fr;
        align-items:start;
        position:relative;
      }
    }

    .top_l-heading {
      @media (width > 767px) {
        justify-self:start;
        margin-left:0;
        padding-left:7.2rem;
        letter-spacing:0.05em;
      }
      @media (width <= 767px) {
        margin-bottom:2.0rem;
      }

      img {
        @media (width > 767px) {
          bottom:0;
          left:0;
        }
      }
    }
    .desc {
      font-size:1.6rem;
      line-height:calc(36 / 16);
      @media (width <= 767px) {
        font-size:1.5rem;
      }
    }
    .top_l-deco {
      bottom:-10.40rem;
      @media (width > 767px) {
        left:6.0rem;
      }
      @media (width <= 767px) {
        bottom:-2.0rem;
        right:0;
      }
    }
  }
}


/* Photos
============================================================================= */
@scope (.top-photos) {
  :scope {
    overflow:hidden;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
    }
  }

  @scope (.js-infiniteloop) {
    :scope {
      --loop-duration:45s;
      padding-block:1.0rem;
    }
    .js-infiniteloop-item {
      display:flex;

      img {
        margin-right:10px;
        flex-shrink:0;
        max-width:unset;
      }
    }
  }

  .copyright {
    > p {
      margin-left:auto;
      width:fit-content;
    }
  }
}

/* How to Play
============================================================================= */
@scope (.top-how_to_play) {
  :scope {
    padding-block:12.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      padding-block:8.0rem 17.2rem;
    }
  }

  .top_l-heading {
    margin-bottom:3.0rem;
    img {
      margin-left:-2.4rem;
      bottom:-2.0rem;
    }
  }

  @scope (.contents) {
    :scope {
      display:grid;
      gap:2.0rem;
      position:relative;

      @media (width > 767px) {
        grid-template-columns:repeat(4,1fr);
      }
    }

  }

  @scope (.contents > .item) {
    :scope {
      padding:2.4rem 2.0rem 2.8rem;
      background-color:#fff;
      border:1px solid var(--cc-navy-B);
      box-shadow:3px 3px 0 rgba(0,0,0,.15);

      @media (width > 767px) {
        display:flex;
        flex-direction:column;
      }
      @media (width <= 767px) {
        display:grid;
        grid-template-rows:auto 1fr;
        grid-template-columns:11.0rem 1fr;
        column-gap:1.2rem;
        grid-template-areas:
          "img heading"
          "desc desc"
          "btn btn"
        ;
        padding:2.4rem 2.0rem;
      }
    }

    img {
      @media (width > 767px) {
        margin-inline:auto;
      }
      @media (width <= 767px) {
        grid-area:img;
      }
    }

    .heading {
      font-size:2.4rem;
      line-height:1;
      letter-spacing:0.05em;
      @media (width > 767px) {
        margin-block:.8rem 2.0rem;
        text-align:center;
      }
      @media (width <= 767px) {
        grid-area:heading;
        margin-block:auto;
        font-size:2.0rem;
      }
    }

    .desc {
      text-align:justify;
      @media (width <= 767px) {
        margin-top:.8rem;
        grid-area:desc;
      }
    }

    .btn {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:auto;
      height:5.0rem;
      padding-inline:1.5rem 1.2rem;
      font-size:1.4rem;
      letter-spacing:0.05em;
      color:#fff;
      background-color:var(--cc-navy-B);
      box-shadow:0 2px 2px rgba(0,0,0,.15);
      @media (width <= 767px) {
        margin-top:1.2rem;
        grid-area:btn;
      }
    }
  }

  .top_l-deco {
    right:-32.8rem;

    @media (width > 767px) {
      top:-13.2rem;
    }
    @media (width <= 767px) {
      top:calc(100% + 12.0rem);
      right:-2.0rem;
    }
  }

  .practice_btn {
    margin-top:4.8rem;
    margin-inline:auto;
    display:block;
    width:fit-content;
    @media (width <= 767px) {
      margin-top:3.6rem;
    }
    img {
      filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
    }
  }
}


/* Event
============================================================================= */
@scope (.top-event) {
  :scope {
    @media (width > 767px) {
      padding-block:13.6rem 18.0rem;
    }
    @media (width <= 767px) {
      padding-block:8.0rem 12.0rem;
    }
  }

  .top_l-heading {
    margin-bottom:4.0rem;
    color:#fff;

    img {
      margin-bottom:2.0rem;
    }
    > span {
      filter:drop-shadow(0 0 2.0rem #2B88CA);
    }
  }

  > .inner {
    position:relative;
  }

  @scope (.contents) {
    :scope {
    display:grid;
      @media (width > 767px) {
        grid-template-columns:repeat(4,1fr);
        gap:4.8rem;
      }
      @media (width <= 767px) {
        grid-template-columns:repeat(2,1fr);
        gap:1.6rem;
      }
    }
  }
  @scope (.contents > .item) {
    :scope {
      width:100%;
      height:auto;
      aspect-ratio:1/1;
      border-radius:50%;
      background-color:#fff;
      text-align:center;
      position:relative;
      @media (width > 767px) {
      }

      &::before {
        content:'';
        display:block;
        border:1px solid var(--cc-yellow-A);
        border-radius:50%;
        opacity:.2;
        position:absolute;
        inset:0;
        pointer-events:none;
      }
    }

    img {
      margin-top:4.0rem;
      margin-inline:auto;
      @media (width <= 767px) {
        margin-top:2.0rem;
      }
    }

    .heading {
      margin-block:1.0rem;
      font-size:2.4rem;
      line-height:1;
      letter-spacing:0.20em;
      @media (width <= 767px) {
        margin-block:.8rem .6rem;
        font-size:2.0rem;
      }
    }
    .desc {
      font-size:1.8rem;
      @media (width <= 767px) {
        font-size:1.4rem;
      }
    }
    .note {
      margin-inline:auto;
      font-size:1.4rem;
      position:absolute;
      inset-inline:0;
      top:calc(100% + 1.5rem);
      @media (width <= 767px) {
        top:calc(100% + .8rem);
        font-size:1.2rem;
      }
    }
  }

  @scope (.info) {
    :scope {
      display:grid;
      margin-top:7.6rem;
      background-color:#fff;
      padding:4.8rem 6.0rem;
      box-shadow:3px 3px 0 rgb(from #16318D r g b / .3);

      @media (width > 767px) {
        grid-template-columns:18.4rem 1fr;
      }
      @media (width <= 767px) {
        padding:3.6rem 2.0rem;
      }
    }
  }
  @scope (.info > .item) {
    :scope {
      font-size:1.8rem;
      font-weight:700;
      line-height:1.5;
      letter-spacing:0.05em;
      position:relative;
      @media (width > 767px) {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:subgrid;
      }
      @media (width <= 767px) {
        font-size:1.6rem;
      }
    }
    &:not(:first-child) {
      margin-top:2.0rem;
      padding-top:calc(2.0rem + 1px);

      &::before {
        content: "";
        display:block;
        width:100%;
        height:1px;
        background-image:linear-gradient(
          to right,
          var(--cc-yellow-A) 0,
          var(--cc-yellow-A) 1px,
          transparent 1px,
          transparent 3px
        );
        background-size:3px 1px;
        background-repeat:repeat-x;
        background-position:center;
        position:absolute;
        top:0;
      }
    }

    .heading {
      @media (width <= 767px) {
        font-size:1.8rem;
        margin-bottom:1.0rem;
      }
    }
    .text {
      display:grid;
      gap:.8rem;
    }
    .note {
      font-size:1.4rem;
      font-weight:500;
    }
    .times {
      font-size:1.6rem;
      @media (width > 767px) {
        display:flex;
        gap:2ch;
        font-weight:700;
      }
    }
    .list {
      display:grid;
      gap:.8rem;
      font-size:1.6rem;
      font-weight:500;

      @media (width <= 767px) {
        font-size:1.4rem;
      }

      > li {
        padding-left:1em;
        position:relative;
        &::before {
          content:"";
          border-radius:50%;
          width:.5rem;
          height:.5rem;
          background-color:currentColor;
          position:absolute;
          left:0;
          top:calc(.5lh - .25rem);
        }
      }
    }
  }
  .top_l-deco {
    bottom:-12.6rem;
    left:-30.0rem;
    @media (width <= 767px) {
      bottom:-14.0rem;
      left:-2.0rem;
    }
  }
}


/* FAQ
============================================================================= */
@scope (.top-faq) {
  :scope {
    padding-block:10.0rem 16.0rem;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      padding-block:8.0rem 12.0rem;
    }
  }

  .top_l-heading {
    margin-bottom:4.0rem;
  }

  @scope (.contents) {
    :scope {
      display:grid;
      gap:3.2rem;
    }
  }
  @scope (.contents > .item) {
    :scope {
      border:2px solid var(--cc-navy-B);
      border-radius:2.0rem;
      box-shadow:3px 3px 0 rgba(0,0,0,.15);
      background-color:#fff;
      overflow:clip;
      font-size:2.0rem;
      line-height:1.5;
      letter-spacing:0.05em;
      @media (width <= 767px) {
        font-size:1.8rem;
      }
    }

    @scope (.q) {
      :scope {
        display:flex;
        justify-content:start;
        align-items:start;
        gap: 2.4rem;
        padding-block:2.8rem;
        padding-inline:4.8rem 2.0rem;
        font-weight:700;
        cursor:pointer;
        &::before {
          flex-shrink:0;
        }
        @media (width <= 767px) {
          gap: 1.2rem;
          padding-block:1.6rem;
          padding-inline:2.0rem 2.0rem;
        }
      }

      > span {
        margin-top: calc((4.0rem - 1lh) / 2);
        @media (width <= 767px) {
          margin-top: calc((3.0rem - 1lh) / 2);
        }
      }

      > i {
        flex-shrink:0;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:auto;
        margin-block:auto;
        border-radius:50%;
        flex-shrink:0;
        width:calc(3.0rem + 2px);
        height:auto;
        background-color:var(--cc-navy-B);
        aspect-ratio:1/1;
        @media (width <= 767px) {
          width:calc(2.4rem + 2px);
        }

        &::before,&::after {
          content:"";
          display:block;
          width:calc(1.6rem + 2px);
          height:2px;
          background-color:#fff;
          transition-property:transform;
          transition-duration:.3s;
          position:absolute;
          @media (width <= 767px) {
            width:calc(1.2rem + 2px);
          }
        }
        &::after {
          transform:rotate(90deg);
        }
        .item[open] & {
          &::before,&::after {
            transform:rotate(180deg);
          }
        }
      }
    }

    &::details-content {
      transition-property:content-visibility;
      transition-duration:.3s;
      transition-behavior:allow-discrete;
      content-visibility:hidden;
    }
    &:is([open])::details-content {
      content-visibility:visible;
    }

    @scope (.dc) {
      :scope {
        display:grid;
        background-color:rgb(from #D5AD50 r g b / .07);
        grid-template-rows:0fr;
        transition-property:grid-template-rows;
        transition-duration:.3s;
        transition-behavior:allow-discrete;
      }
      :is([open]) & {
        grid-template-rows:1fr;
      }
      @starting-style {
        :is([open]) & {
          grid-template-rows:1fr;
        }
        :is([open]) & {
          grid-template-rows:0fr;
        }
      }

      .inner {
        overflow:hidden;
      }
    }

    @scope (.a) {
      :scope {
        grid-row:1/-1;
        display:flex;
        align-items:start;
        gap:2.8rem;
        padding-block:2.0rem;
        padding-inline:4.8rem 4.0rem;
        @media (width <= 767px) {
          gap: 1.2rem;
          padding-block:1.6rem;
          padding-inline:2.0rem 2.0rem;
          font-size:1.6rem;
        }
      }

      &::before {
        flex-shrink:0;
      }

      b {
        display:block;
        margin-bottom:1.2rem;
        font-weight:700;
      }
    }
  }
}



/* Sample
============================================================================= */
@scope (.top-selectorName) {
  :scope {
    @media (width > 767px) {
    }
    @media (width <= 767px) {
    }
  }
}