@layer base, components, utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--font-main);
    font-size: var(--fz-16);
    font-weight: 400;
    line-height: 1.8;
    color: var(--navy);
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  .btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 50px;
    text-decoration: none;
    background: var(--navy);
    color: #fff;
    font-size: var(--fz-16);
    font-weight: 700;
    transition: background 0.3s ease;
    .btn-main {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      line-height: 1;
    }
    .btn-label {
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }
    .btn-en {
      margin-left: auto;
      font-family: var(--font-en);
      font-size: var(--fz-12);
      color: var(--gray);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }
    .btn-arrow {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid currentColor;
      border-radius: 24px;
      position: relative;
      flex: 0 0 20px;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: currentColor;
        mask: url('../img/icon-arrow.svg') no-repeat center / 50%;
      }
    }
    &.btn--simple {
      width: fit-content;
      padding: 12px 24px;
    }
    &.btn--with-en {
      width: 100%;
      max-width: 380px;
      justify-content: space-between;
      gap: 24px;
    }
    &.btn--dark {
      background: var(--navy);
      color: #fff;
      border: 1px solid var(--navy);
      &:hover {
        background: var(--gold);
      }
    }
    &.btn--light {
      background: #fff;
      color: var(--navy);
      border: 1px solid var(--navy);
      &:hover {
        background: var(--gold);
      }
    }
    &.btn--disabled {
      background: var(--light-gray);
      color: var(--gray);
      border: 1px solid var(--light-gray);
      pointer-events: none;
    }
    &.btn--center {
      margin-inline: auto;
    }
    &.btn--large {
      padding: 16px 24px;
      .btn-label {
        font-size: var(--fz-20);
      }
      .btn-main {
        gap: 16px;
      }
      .btn-arrow {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
      }
    }
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
    &:hover {
      opacity: 0.5;
    }
    .arrow {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid currentColor;
      border-radius: 24px;
      position: relative;
      flex: 0 0 16px;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: currentColor;
        mask: url('../img/icon-arrow.svg') no-repeat center / 50%;
      }
    }
    &.is-center {
      justify-content: center;
    }
    &.is-back {
      .arrow {
        transform: rotate(180deg);
      }
    }
  }
  .mark-list {
    list-style-type: disc;
    padding-left: 1.5em;
  }
  .attention-list > li,
  .attention-text {
    padding-left: 1.3em;
    text-indent: -1.3em;
    position: relative;
    font-size: var(--fz-14);
    > * {
      text-indent: 0;
    }
    &::before{
      content: "※";
      width: 1.3em;
      display: inline-block;
      text-indent: 0;
    }
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    @media (768px <= width) {
      padding: 16px 48px;
      height: 82px;
      gap: 48px;
    }
    @media (width < 768px) {
      padding: 8px 16px;
      height: 75px;
      align-items: center;
      gap: 16px;
    }
    h1 a {
      display: block;
      transition: opacity 0.3s ease;
      @media (768px <= width) {
        display: grid;
        grid-template-columns: 106px auto;
        align-items: center;
        gap: 8px;
      }
      &:hover {
        opacity: 0.5;
      }
    }
    nav {
      @media (768px <= width) {
        display: flex;
        align-items: center;
        gap: 48px;
        margin-left: auto;
      }
      @media (width < 768px) {
        position: fixed;
        inset: 0;
        background: rgba(176, 169, 116, 0.88);
        z-index: 10;
        opacity: 0;
        pointer-events: none;
      }
      .nav-inner {
        @media (width < 768px) {
          background: #fff;
          width: fit-content;
          margin-left: auto;
          padding: 80px 16px 64px 32px;
          gap: 16px;
          border-radius: 24px 0 0 24px;
        }
        .btn {
          @media (768px <= width) {
            display: none;
          }
          @media (width < 768px) {
            margin-top: 32px;
          }
        }
      }
      .nav-list {
        @media (width < 768px) {
          gap: 32px;
        }
        .jp {
          @media (width < 768px) {
            font-size: var(--fz-20);
          }
        }
      }
      &.active {
        @media (width < 768px) {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
    .toggle-btn {
      @media (768px <= width) {
        display: none;
      }
      width: 24px;
      height: 16px;
      position: relative;
      cursor: pointer;
      z-index: 20;
      &::before,
      &::after,
      span {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--navy);
        transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
        border-radius: 5px;
      }
      &::before {
        top: 0;
      }
      &::after {
        top: 50%;
        transform: translateY(-50%);
      }
      span {
        bottom: 0;
      }
      &.active {
        &::before {
          top: 50%;
          transform: translateY(-50%) rotate(45deg);
        }
        &::after {
          opacity: 0;
        }
        span {
          top: 50%;
          transform: translateY(-50%) rotate(-45deg);
        }
      }
    }
    > .btn-area {
      @media (width < 768px) {
        margin-left: auto;
      }
    }
  }
  h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      display: block;
    }
    .logo {
      display: block;
      @media (768px <= width) {
        width: 106px;
      }
      @media (width < 768px) {
        width: 86px;
      }
      img {
        width: 100%;
      }
    }
    .title {
      font-family: var(--font-en);
      font-size: var(--fz-14);
      color: var(--navy);
      font-weight: 700;
      text-align: center;
      @media (width < 768px) {
        font-size: var(--fz-10);
      }
    }
  }
  .nav-list {
    display: flex;
    @media (768px <= width) {
      gap: 48px;
    }
    @media (width < 768px) {
      flex-direction: column;
    }
    a {
      transition: opacity 0.3s ease;
      &:hover {
        opacity: 0.5;
      }
    }
    span {
      display: block;
      font-weight: 700;
      @media (768px <= width) {
        text-align: center;
      }
    }
    .jp {
      font-size: var(--fz-16);
    }
    .en {
      font-family: var(--font-en);
      font-size: var(--fz-12);
      color: var(--gold);
    }
    .no-link {
      pointer-events: none;
      span {
        color: var(--gray) !important;
      }
    }
  }
  main {
    @media (768px <= width) {
      margin-top: 82px;
      padding-bottom: 80px;
    }
    @media (width < 768px) {
      margin-top: 75px;
      padding-bottom: 40px;
    }
  }
  .inner {
    width: 90%;
    margin-inline: auto;
    @media (768px <= width) {
      max-width: 1440px;
      padding: 120px 0;
    }
    @media (width < 768px) {
      padding: 48px 0;
    }
  }
  .section-heading {
    span {
      display: block;
      font-weight: 800;
      line-height: 1.4;
    }
    .jp {
      margin-top: 8px;
      @media (768px <= width) {
        font-size: var(--fz-40);
      }
      @media (width < 768px) {
        font-size: var(--fz-32);
      }
    }
    .en {
      color: var(--gold);
      font-size: var(--fz-14);
      @media (768px <= width) {
        font-family: var(--font-en);
      }
    }
    + * {
      margin-top: 24px;
    }
  }
  .comingsoon {
    color: var(--light-gray, #EAEAEA);
    font-family: var(--font-en);
    font-size: var(--fz-40);
    font-weight: 700;
    @media (width < 768px) {
      font-size: var(--fz-32);
    }
  }
  footer {
    background: var(--navy);
    nav {
      @media (width < 768px) {
        grid-row: span 2;
      }
    }
    .inner {
      display: grid;
      grid-template-columns: 1fr auto;
      justify-content: space-between;
      gap: 64px 20px;
      @media (768px <= width) {
        padding: 64px 0 40px;
      }
      @media (width < 768px) {
        padding: 40px 0 24px;
        gap: 16px 20px;
        align-items: start;
      }
    }
    .nav-list {
      @media (width < 768px) {
        gap: 16px;
      }
      .jp {
        color: #fff;
      }
      .no-link {
        span {
          color: #46475C !important;
        }
      }
    }
    h1 {
      margin-left: auto;
      width: fit-content;
      .title {
        color: #fff;
        font-size: var(--fz-12);
        margin-top: 4px;
      }
      a {
        transition: opacity 0.3s ease;
        &:hover {
          opacity: 0.5;
        }
      }
    }
    .text-link {
      color: #fff;
      font-size: var(--fz-12);
      @media (width < 768px) {
        align-self: end;
      }
      .arrow {
        border-color: #fff;
        &::before {
          background: #fff;
        }
      }
    }
    small {
      display: block;
      color: #fff;
      font-size: var(--fz-10);
      @media (width < 768px) {
        text-align: center;
        width: 100%;
        margin: 16px auto 0;
        grid-column: 1 / -1;
      }
    }
  }

  .loading {
    --loading-rotate-duration: 4s;
    --loading-shrink-duration: 1.6s;
    --loading-fly-in-duration: 2.0s;
    --loading-ball-travel-duration: 2.2s;
    --loading-minimum-duration: 1.05s;
    --loading-text-enter-duration: 0.8s;
    --loading-text-exit-duration: 0.8s;
    --loading-reveal-duration: 2.0s;
    --loading-reveal-delay: var(--loading-text-exit-duration);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 200vmax #b0a974;
      pointer-events: none;
      z-index: 0;
    }
    .loading-inner {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      .loading-logo {
        width: 60px;
        animation: loadingBallTravel var(--loading-ball-travel-duration) linear forwards;
        z-index: 20;
        @media (width < 768px) {
          width: 50px;
        }
        img {
          width: 100%;
          display: block;
          animation: spinBall var(--loading-rotate-duration) linear infinite;
        }
      }
      .loading-text-area {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        z-index: 10;
        transform: translateY(-3%);
        .logo {
          width: 140px;
          opacity: 0;
          animation: loadingLogoIn var(--loading-text-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
          @media (width < 768px) {
            width: 120px;
          }
        }
        .text-left,
        .text-right {
          font-size: var(--fz-68);
          font-family: "Noto Sans JP", sans-serif;
          font-weight: 700;
          letter-spacing: .1em;
          inset: 0;
          line-height: 1.4;
          opacity: 0;
          @media (width < 768px) {
            font-size: clamp(20px, 8.7vw, 48px);
            white-space: nowrap;
          }
        }
        .text-left {
          animation: loadingTextInLeft var(--loading-text-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
        }
        .text-right {
          animation: loadingTextInRight var(--loading-text-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
        }
      }
    }

    &.is-complete {
      &::before {
        animation: expandLoadingHole var(--loading-reveal-duration) ease-out var(--loading-reveal-delay) forwards;
      }

      .loading-text-area {
        .logo {
          animation: loadingLogoOut var(--loading-text-exit-duration) ease-out forwards;
        }
        .text-left {
          animation: loadingTextOutLeft var(--loading-text-exit-duration) ease-out forwards;
        }
        .text-right {
          animation: loadingTextOutRight var(--loading-text-exit-duration) ease-out forwards;
        }
      }
    }
  }
}

@keyframes expandLoadingHole {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 220vmax;
    height: 220vmax;
  }
}

@keyframes spinBall {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}

@keyframes loadingBallTravel {
  0% {
    transform: translateX(-90vw) translateY(140vh) scale(2.6);
    opacity: 0;
  }
  18% {
    transform: translateX(-62vw) translateY(72vh) scale(2.05);
    opacity: 1;
  }
  58% {
    transform: translateX(0) translateY(0) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translateX(60vw) translateY(-80vh) scale(0.42);
    opacity: 0;
  }
}

@keyframes loadingTextInLeft {
  0% {
    transform: translateX(-56px) translateY(10px) scale(0.96);
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes loadingTextInRight {
  0% {
    transform: translateX(56px) translateY(10px) scale(0.96);
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes loadingTextOutLeft {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(0) translateY(0) scale(0.96);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes loadingTextOutRight {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(0) translateY(0) scale(0.96);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes loadingLogoIn {
  0% {
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes loadingLogoOut {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(0.96);
    opacity: 0;
    filter: blur(3px);
  }
}

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