@layer base, components, utilities;

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

  body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-main);
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    @media (768px <= width) {
      font-size: clamp(14px, calc(100vw * 16 / 1200), 16px);
    }
    @media (width < 768px) {
      font-size: clamp(12px, calc(100vw * 14 / 375), 14px);
    }
  }
}

@keyframes loadingPartReveal {
  0% {
    opacity: 0;
    filter: blur(18px);
    transform: translate(-50%, -50%) scale(1.04);
  }
  60% {
    filter: blur(0)
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@layer components {
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .btn {
    display: grid;
    grid-template-columns: 1fr 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--gradation, linear-gradient(90deg, #F7C225 0%, #FDE570 25%, #FFD944 50%, #FDE570 75%, #F7C225 100%));
    width: 240px;
    max-width: 100%;
    padding: 4px;
    margin-inline: auto;
    transition: all 0.3s ease;
    &::before {
      content: "";
      position: absolute;
      top: -20%;
      left: -36%;
      width: 28%;
      height: 140%;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.2) 65%, transparent 100%);
      transform: translateX(-220%) skewX(-18deg);
      transition: none;
      pointer-events: none;
      z-index: 0;
    }
    @media (hover: hover) {
      &:hover::before,
      &:focus-visible::before {
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        transform: translateX(520%) skewX(-18deg);
      }
      &:hover,
      &:focus-visible {
        filter: brightness(1.05);
      }
    }
    .text {
      color: var(--navy);
      font-family: var(--font-serif);
      font-weight: 600;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .arrow {
      display: block;
      position: relative;
      background: var(--navy);
      width: 24px;
      height: 36px;
      z-index: 1;
      &::before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 9L6.45 7.9125L9.1125 5.25H0V3.75H9.1125L6.45 1.0875L7.5 0L12 4.5L7.5 9Z' fill='%23CB9B0C'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 9px;
        transform: translate(-50%, -50%);
      }
    }
  }
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/bg-noice.webp') repeat;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.75s ease, filter 0.75s ease, visibility 0.75s ease;
    &.is-hiding {
      opacity: 0;
      filter: blur(8px);
      visibility: hidden;
      pointer-events: none;
      .loading-img {
        transform: scale(0.98);
      }
    }
    &.is-hidden {
      display: none;
    }
    .loading-img {
      aspect-ratio: 1 / 1.81;
      position: relative;
      height: 80vh;
      transition: transform 0.75s ease;
      @media (width < 768px) {
        max-width: 70%;
      }
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
        opacity: 0;
        filter: blur(18px);
        will-change: opacity, filter, transform;
        animation: loadingPartReveal 1.2s ease-out forwards;
        &:nth-child(1) {
          z-index: 2;
          animation-delay: 0s;
        }
        &:nth-child(2) {
          z-index: 3;
          animation-delay: 0.3s;
        }
        &:nth-child(3) {
          z-index: 4;
          animation-delay: 0.6s;
        }
        &:nth-child(4) {
          z-index: 5;
          animation-delay: 1.5s;
        }
        &:nth-child(5) {
          z-index: 1;
          animation-delay: 1.8s;
        }
      }
    }
  }
  .hamburger-btn {
    position: fixed;
    top: 8px;
    right: 8px;
    display: block;
    width: 48px;
    height: 56px;
    background: var(--gold);
    cursor: pointer;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    &.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .hamburger-bar {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 2px;
      background: #fff;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease-in-out;
      &::before,
      &::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 20px;
        height: 2px;
        background: #fff;
        transform: translateX(-50%);
        transition: all 0.3s ease-in-out;
      }
      &::before {
        top: -8px;
      }
      &::after {
        bottom: -8px;
      }
    }
    &.active {
      .hamburger-bar {
        background: transparent;
        &::before {
          transform: translateX(-50%) rotate(45deg);
          top: 0;
        }
        &::after {
          transform: translateX(-50%) rotate(-45deg);
          bottom: 0;
        }
      }
    }
  }
  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/bg-nav.webp') no-repeat center center / cover;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    &.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      .nav-list li {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .global-nav-inner {
      width: 100%;
      height: 100%;
      display: grid;
      place-content: center;
    }
    .logo-area {
      position: absolute;
      top: 0;
      left: 0;
      aspect-ratio: 29 / 56;
      @media (768px <= width) {
        width: 290px;
        max-width: 30%;
        padding: 16px;
      }
      @media (width < 768px) {
        width: 134px;
        max-width: 36%;
        padding: 8px;
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img/bg-noice.webp') repeat;
        clip-path: polygon(0 0, 0% 100%, 100% 0);
        z-index: -1;
      }
      img {
        width: 54%;
      }
    }
    .nav-list {
      display: grid;
      grid-template-rows: repeat(4, auto);
      grid-auto-flow: column;
      justify-content: center;
      align-items: center;
      @media (768px <= width) {
        gap: clamp(32px, 8vh, 80px);
      }
      @media (width < 768px) {
        margin-top: 40px;
        gap: 16px;
      }
      li {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.35s ease, transform 0.35s ease;
        &:nth-child(1) { transition-delay: 0.03s; }
        &:nth-child(2) { transition-delay: 0.06s; }
        &:nth-child(3) { transition-delay: 0.09s; }
        &:nth-child(4) { transition-delay: 0.12s; }
        &:nth-child(5) { transition-delay: 0.15s; }
        &:nth-child(6) { transition-delay: 0.18s; }
        &:nth-child(7) { transition-delay: 0.21s; }
      }
      a {
        display: block;
        @media (768px <= width) {
          padding: 0 40px;
        }
        span {
          display: block;
          text-align: center;
        }
        .en {
          font-size: 45px;
          font-family: var(--font-en);
          background: var(--gradation, linear-gradient(90deg, #F7C225 0%, #FDE570 25%, #FFD944 50%, #FDE570 75%, #F7C225 100%));
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          @media (768px <= width) {
            font-size: clamp(36px, calc(100vw * 46 / 1200), 46px);
          }
          @media (width < 768px) {
            font-size: clamp(32px, calc(100vw * 40 / 375), 40px);
          }
        }
        .jp {
          font-family: var(--font-serif);
          color: var(--gold, #CB9B0C);
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
  .mv {
    position: relative;
    overflow: hidden;
    .mv-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
      transition: opacity 1.4s ease 0.65s, filter 1.4s ease 0.65s, transform 1.4s ease 0.65s;
      @media (width < 768px) {
        aspect-ratio: 780 / 1100;
      }
      .swiper-wrapper,
      .swiper-slide,
      picture,
      img {
        display: block;
        height: 100%;
        width: 100%;
      }
      img {
        object-fit: cover;
      }
    }
    .mv-frame {
      position: absolute;
      z-index: 10;
      aspect-ratio: 29 / 56;
      z-index: 10;
      @media (768px <= width) {
        width: 290px;
        max-width: 30%;
      }
      @media (width < 768px) {
        width: 134px;
        max-width: 36%;
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../img/bg-noice.webp') repeat;
        z-index: -1;
      }
    }
    .logo-area {
      top: 0;
      left: 0;
      @media (768px <= width) {
        padding: 16px;
      }
      @media (width < 768px) {
        padding: 8px;
      }
      &::before {
        top: 0;
        left: 0;
        clip-path: polygon(0 0, 0% 100%, 100% 0);
      }
      img {
        width: 54%;
        opacity: 1;
        transform: translate(0, 0) scale(1);
        transition: transform 1.8s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 1.8s ease;
      }
    }
    .player-img {
      right: 0;
      bottom: 0;
      &::before {
        top: 0;
        left: 0;
        clip-path: polygon(100% 100%, 0% 100%, 100% 0);;
      }
      img {
        position: absolute;
        top: 0;
        right: -30%;
        width: 160%;
        max-width: 160%;
        opacity: 1;
        transform: translate(0, 0) scale(1);
        transition: transform 1.8s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 1.8s ease;
      }
    }
  }
  .loading:not(.is-hidden) ~ main,
  body.is-mv-intro main {
    .mv {
      .logo-area.mv-frame {
        img {
          opacity: 0;
          transform: translate(36%, 36%) scale(0.92);
        }
      }
      .player-img.mv-frame {
        img {
          opacity: 0;
          transform: translate(-36%, -36%) scale(0.92);
        }
      }
      .mv-wrap {
        opacity: 0;
        filter: blur(14px);
        transform: scale(1.04);
      }
    }
  }
  .main-container {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 1fr clamp( 480px, 40vw, 700px);
      align-items: flex-start;
    }
  }
  aside {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/bg-noice.webp') repeat;
    @media (width < 768px) {
      display: none;
    }
    .logo-area {
      height: 70vh;
      padding: 0 32px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .ceremony-info {
      margin-top: 32px;
      font-family: var(--font-serif);
    }
    .title {
      color: var(--gold, #D2AB36);
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }
    .btn {
      margin-top: 16px;
    }
  }
  .content-area {
    background: var(--navy, #121659);
  }
  section {
    --title-en-reveal-duration: 0.2s;
    --title-jp-start-delay: 0.22s;
    --title-jp-text-delay: 0.24s;
    .section-inner {
      padding: 64px 0;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .section-title .jp,
    .section-title-sub span {
      font-family: var(--font-serif);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--gold, #CB9B0C);
      font-weight: 600;
      @media (min-width: 768px) {
        font-size: clamp(14px, calc(100vw * 16 / 1200), 16px);
      }
      @media (max-width: 767px) {
        font-size: clamp(12px, calc(100vw * 14 / 375), 14px);
      }
      &::before,
      &::after {
        content: "";
        width: 57px;
        height: 14px;
        flex: 0 0 57px;
        background: no-repeat center / contain url("data:image/svg+xml,%3Csvg width='57' height='14' viewBox='0 0 57 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 7H56.5' stroke='%23CB9B0C' stroke-linecap='round'/%3E%3Cpath d='M28.9971 6.0918L29.0547 6.44531L29.4082 6.50293L32.4248 7L29.4082 7.49707L29.0547 7.55469L28.9971 7.9082L28.5 10.9248L28.0029 7.9082L27.9453 7.55469L27.5918 7.49707L24.5742 7L27.5918 6.50293L27.9453 6.44531L28.0029 6.0918L28.5 3.07422L28.9971 6.0918Z' fill='%23CB9B0C' stroke='%23CB9B0C'/%3E%3C/svg%3E");
      }
    }
    .section-title {
      text-align: center;
      span {
        display: block;
      }
      .jp.fade-in {
        opacity: 0;
        transform: none;
        transition: opacity 0.35s ease var(--title-jp-text-delay);
        &::before,
        &::after {
          transform: scaleX(0);
          transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--title-jp-start-delay);
        }
        &::before {
          transform-origin: right center;
        }
        &::after {
          transform-origin: left center;
        }
        &.is-visible {
          opacity: 1;
          &::before,
          &::after {
            transform: scaleX(1);
          }
        }
      }
      &.fade-in .en,
      .en.fade-in {
        opacity: 0;
        transform: translateX(-16px);
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
        transition: opacity 0.25s ease, transform var(--title-en-reveal-duration) ease, clip-path var(--title-en-reveal-duration) ease, -webkit-clip-path var(--title-en-reveal-duration) ease;
      }
      &.fade-in.is-visible .en,
      .en.fade-in.is-visible {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
      }
      .en {
        font-family: var(--font-en);
        font-size: 96px;
        background: var(--gradation, linear-gradient(90deg, #F7C225 0%, #FDE570 25%, #FFD944 50%, #FDE570 75%, #F7C225 100%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1.2;
        width: fit-content;
        padding: 0 12px;
        margin-inline: auto;
        @media (768px <= width) {
          font-size: clamp(80px, calc(100vw * 96 / 1200), 96px);
        }
        @media (width < 768px) {
          font-size: clamp(68px, calc(100vw * 74 / 375), 74px);
        }
      }
      + .section-title-sub {
        margin-top: 8px;
      }
    }
    .section-title-sub {
      text-align: center;
      &.fade-in {
        opacity: 1;
        transform: none;
        span {
          opacity: 0;
          transition: opacity 0.35s ease var(--title-jp-text-delay);
          &::before,
          &::after {
            transform: scaleX(0);
            transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--title-jp-start-delay);
          }
          &::before {
            transform-origin: right center;
          }
          &::after {
            transform-origin: left center;
          }
        }
        &.is-visible {
          span {
            opacity: 1;
            &::before,
            &::after {
              transform: scaleX(1);
            }
          }
        }
      }
    }
    * + .section-title-sub {
      margin-top: 32px;
    }
    .section-inner {
      width: 90%;
      margin-inline: auto;
    }
    .clipped-box {
      background: url('../img/bg-noice.webp') repeat;
      clip-path: polygon(6.2% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18%);
    }
    .youtube-box {
      position: relative;
      aspect-ratio: 16 / 9;
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .page-link {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      border-bottom: 1px solid var(--gold, #CB9B0C);
      width: fit-content;
      margin-inline: auto;
      padding: 4px;
      gap: 8px;
      transition: all 0.3s ease;
      .text {
        font-family: var(--font-serif);
        color: var(--gold, #CB9B0C);
        font-size: 16px;
        line-height: 1.5;
        font-weight: 600;
      }
      .arrow {
        display: block;
        width: 9px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.27835e-07 7.5L1.0875 6.45L3.75 9.1125L3.75 -2.29485e-07L5.25 -1.63918e-07L5.25 9.1125L7.9125 6.45L9 7.5L4.5 12L-3.27835e-07 7.5Z' fill='%23CB9B0C'/%3E%3C/svg%3E");
      }
      &:hover {
        opacity: .6;
      }
      &.is-right {
        .arrow {
          transform: rotate(-90deg);
        }
      }
    }
    .card-block {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .card {
      background: var(--gray, #E5E5EB);
      padding: 24px;
      .card-body {
        margin-top: 24px;
      }
      .card-img {
        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }
      .card-title {
        color: var(--navy, #121659);
        font-family: var(--font-serif);
        font-size: 20px;
        font-weight: 600;
        text-align: center;
      }
      .card-text {
        margin-top: 16px;
        font-family: var(--font-serif);
      }
      .btn {
        margin-top: 24px;
      }
    }
    .btn-block {
      gap: 16px;
      display: flex;
      @media (768px <= width) {
        justify-content: center;
      }
      @media (width < 768px) {
        flex-direction: column;
      }
      a {
        @media (768px <= width) {
          margin: 0;
        }
      }
    }
  }

  .ceremony-detail {
    .section-inner {
      width: 440px;
      max-width: 80%;
    }
    .clipped-box {
      padding: 40px 24px;
      h3 {
        color: var(--gold, #D2AB36);
        font-size: clamp(20px, calc(100vw * 24 / 1200), 24px);
        font-weight: 700;
        text-align: center;
        font-family: var(--font-serif);
        @media (width < 768px) {
          font-size: clamp(18px, calc(100vw * 20 / 768), 20px);
        }
      }
      .btn {
        margin-top: 16px;
      }
    }
    .lead-text {
      color: #fff;
      font-family: var(--font-serif);
      line-height: 1.8;
      font-weight: 600;
    }
  }

  .message {
    .section-inner {
      padding-top: 0;
    }
  }

  .history {
    background: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: -10%;
      width: 100%;
      height: 100%;
      background: url('../img/bg-history.webp') no-repeat right top / 50% auto;
      z-index: -1;
    }
    .history-list {
      display: grid;
      grid-template-columns: auto 1fr;
      color: var(--navys, #121659);
      &.fade-in-sequence {
        dt,
        dd {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 0.45s ease, transform 0.45s ease;
        }
        dt.is-visible,
        dd.is-visible {
          opacity: 1;
          transform: translateY(0);
        }
      }
      dt {
        position: relative;
        line-height: 1;
        font-family: var(--font-num);
        font-size: 24px;
        @media (768px <= width) {
          font-size: clamp(20px, calc(100vw * 24 / 1200), 24px);
        }
        @media (width < 768px) {
          font-size: clamp(18px, calc(100vw * 20 / 375), 20px);
        }
        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 5px;
          width: 2px;
          height: 100%;
          background: var(--gray, #E5E5EB);
        }
        &:first-child {
          &::after {
            top: .5em;
          }
        }
        &:not(:last-of-type) {
          display: flex;
          flex-direction: row-reverse;
          padding-bottom: 24px;
          &::before {
            content: "";
            display: block;
            width: 12px;
            height: 16px;
            background: var(--gray, #E5E5EB);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            margin-left: 32px;
            @media (width < 768px) {
              margin-left: 24px;
            }
          }
        }
      }
      dd {
        font-family: var(--font-serif);
        font-weight: 600;
        @media (768px <= width) {
          padding-left: 32px;
          font-size: clamp(14px, calc(100vw * 16 / 1200), 16px);
        }
        @media (width < 768px) {
          padding-left: 24px;
          font-size: clamp(12px, calc(100vw * 14 / 375), 14px);
        }
        &:not(:last-of-type) {
          padding-bottom: 24px;
        }
      }
    }
    .page-link {
      margin-top: 32px;
    }
  }
  .stats {
    .stats-table {
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.9) transparent;
      padding-bottom: 8px;
      &::-webkit-scrollbar {
        height: 6px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.92);
        border-radius: 999px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #fff;
      }
      .table-inner {
        width: fit-content;
        padding: 24px;
        background: #fff;
      }
      table {
        font-size: 12px;
        white-space: nowrap;
        thead {
          th {
            font-family: var(--font-serif);
            padding: 0 8px;
            span {
              background: var(--navy, #121659);
              color: #fff;
              padding: 6px 8px 4px;
            }
          }
        }
        tbody {
          margin-top: 8px;
          color: var(--navy, #121659);
          td {
            padding: 4px 8px;
            text-align: center;
            font-weight: 700;
          }
          tr:first-child {
            td {
              padding-top: 12px;
            }
          }
          tr:last-child {
            td {
              padding-bottom: 12px;
            }
          }
        }
        tfoot {
          margin-top: 8px;
          background: var(--gray, #E5E5EB);
          color: var(--navy, #121659);
        }
      }
    }
  }
  .gallery {
    background: #fff;
    .gallery-title {
      color: var(--navy, #121659);
      font-family: var(--font-num);
      font-size: 24px;
      text-align: center;
    }
    .gallery-list {
      display: grid;
      grid-template-columns: repeat( 4, 1fr );
      gap: 8px;
      margin-top: 16px;
      @media (width < 768px) {
        grid-template-columns: repeat( 3, 1fr );
      }
      &.fade-in-sequence {
        li {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 0.45s ease, transform 0.45s ease;
        }

        li.is-visible {
          opacity: 1;
          transform: translateY(0);
        }
      }
      li {
        aspect-ratio: 1 / 1;
        &[data-title] {
          position: relative;
        }
        &[data-title]::after {
          content: attr(data-title);
          position: absolute;
          bottom: 0;
          left: 0;
          background: var(--navy);
          color: #fff;
          font-size: 14px;
          padding: 2px 8px;
          @media (768px <= width) {
            font-size: clamp(12px, calc(100vw * 14 / 1200), 14px);
          }
          @media (width < 768px) {
            font-size: clamp(10px, calc(100vw * 12 / 375), 12px);
          }
        }
      }
      .gallery-item {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        opacity: .48;
        transition: opacity 0.3s ease, border 0.3s ease;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          border: 4px solid var(--navy);
          opacity: 0;
          transition: all 0.3s ease;
        }
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        &:hover {
          opacity: 1;
          &::before {
            opacity: 1;
          }
        }
      }
    }
    .main-text {
      font-family: var(--font-serif);
      color: var(--gold, #CB9B0C);
      font-size: 24px;
      text-align: center;
      font-weight: 600;
    }
    .btn-block {
      margin-top: 24px;
    }
  }
  .goods {
    .section-inner {
      &.w100 {
        width: 100%;
        padding-inline: 0;
        + * {
          padding-top: 0;
        }
      }
    }
    .goods-swiper {
      width: 100%;
      .swiper-wrapper {
        box-sizing: border-box;
        padding-inline: 8.4%;
        @media (768px <= width) {
          padding-inline: 23.8%;
        }
      }
      .swiper-slide {
        transform: scale(0.94);
        transition: transform 0.45s ease, opacity 0.45s ease;
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        opacity: 1;
        transform: scale(1);
      }
      + .btn {
        margin-top: 24px;
      }
      img {
        width: 100%;
      }
    }
    .clipped-box {
      padding: 40px;
      clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18%);
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-top: 32px;
      @media (width < 768px) {
        padding-inline: 32px
      }
      h4 {
        color: var(--gold, #D2AB36);
        font-family: var(--font-serif);
        font-weight: 600;
        text-align: center;
        span {
          display: block;
        }
        .sub {
          @media (768px <= width) {
            font-size: clamp(12px, calc(100vw * 14 / 1200), 14px);
          }
          @media (width < 768px) {
            font-size: clamp(12px, calc(100vw * 14 / 375), 14px);
          }
        }
        .main {
          @media (768px <= width) {
            font-size: clamp(20px, calc(100vw * 24 / 1200), 24px);
          }
          @media (width < 768px) {
            font-size: clamp(18px, calc(100vw * 20 / 375), 20px);
          }
        }
      }
      .book-img {
        @media (width < 768px) {
          width: 80%;
          margin-inline: auto;
        }
        img {
          display: block;
          margin-inline: auto;
        }
      }
      .text-box {
        color: var(--navy, #121659);
        font-family: var(--font-serif);
        font-size: 14px;
        line-height: 1.8;
        font-weight: 600;
      }
    }
  }
  .ceremony {
    background: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: -10%;
      left: -15%;
      width: 100%;
      height: 100%;
      background: url('../img/bg-ceremony.webp') no-repeat left top / 86% auto;
      z-index: -1;
      @media (width < 768px) {
        top: -5%;
      }
    }
  }
  footer {
    .footer-head {
      aspect-ratio: 596 / 320;
      background: url('../img/bg-footer.webp') no-repeat center top / cover;
      padding: 3vw;
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      @media (width < 768px) {
        padding: 24px;
      }
      p {
        writing-mode: vertical-rl;
        text-orientation: upright;
        color:#fff;
        font-family: var(--font-serif);
        text-shadow: 0 0 6.113px #000;
        font-size: 30px;
        font-weight: 600;
        letter-spacing: .4em;
        @media (768px <= width) {
          font-size: clamp(20px, calc(100vw * 26 / 1200), 30px);
        }
        @media (width < 768px) {
          font-size: clamp(18px, calc(100vw * 24 / 375), 20px);
        }
      }
    }
    .footer-inner {
      padding: 56px 32px 16px;
    }
    .footer-logo {
      width: 160px;
      max-width: 44%;
      margin-inline: auto;
    }
    .copyright {
      display: block;
      color: #fff;
      font-size: 10px;
      margin-top: 24px;
      text-align: center;
    }
  }
}

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

.swiper {
  &:not(.mv-swiper) {
    padding-bottom: 36px;
  }
  .swiper-pagination-bullets {
    .swiper-pagination-bullet {
      border: 1px solid var(--gold, #CB9B0C);
      background: transparent;
      opacity: 1;
      &.swiper-pagination-bullet-active,
      &.is-current {
        background: var(--gold, #CB9B0C);
      }
    }
  }
}