/* ==========================================================================
   Layout shell (aside-left + #SP frame + aside-right)
   ========================================================================== */

body {
  --sp-max-width: 490px;
  --aside-catchup-width: 420px;
  --extra-width: max(100vw - var(--sp-max-width), 0px);
  --excess-width: max(var(--extra-width) - (var(--aside-catchup-width) * 2), 0px);
  --aside-left-width: calc(min(max(var(--extra-width) - var(--aside-catchup-width), 0px), var(--aside-catchup-width)) + var(--excess-width) / 2);

  --bg-photo-height: max(100dvh, min(140dvh, calc(560px + (100dvh - 400px) * 19 / 35)));
}

#SP {
  position: relative;
  contain: layout;
  flex: 0 0 auto;
  width: min(100vw, var(--sp-max-width));
  height: 100%;
  overflow: hidden;
}

.sp-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sp-scroll::-webkit-scrollbar {
  display: none;
}

/* Lenis稼働中はCSSのネイティブsmooth-scrollを無効化する。
   scroll-behavior:smoothが有効なままだとscrollTop代入(Lenisが毎フレーム行う)自体が
   ネイティブのアニメーション対象になり、Lenis側の慣性計算と競合して止まって見える。
   is-lenis-activeはassets/js/main.jsがLenis有効/無効の切り替え時にhtmlへ付け外しする。 */
.is-lenis-active .sp-scroll {
  scroll-behavior: auto;
}

/* 写真パララックス共通(assets/js/main.jsが対象の写真だけに.parallax-photoを付与し、
   --parallax-overscan(はみ出し量)/--parallax-y(移動量)を書き込む)。
   各写真固有の position/height/object-fit 等は個別のセクションのルール側で定義する。 */
.parallax-photo {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.parallax-photo.is-parallax-active {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-photo {
    transform: none !important;
  }
}

/* スクロールフェード共通(パララックスとは別の演出。要素が画面にある程度入ったら
   assets/js/main.jsが対象に.is-visibleを一度だけ付与する。stagger幅は
   --fade-delayをdata-fade-delay(ms)から書き込むことで個別要素ごとに調整する)。 */
:root {
  --fade-distance: 22px;
  --fade-duration: 1.1s;
  --fade-easing: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 789px) {
  :root {
    --fade-distance: 16px;
    --fade-duration: 0.95s;
  }
}

.fade-item {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition: opacity var(--fade-duration) var(--fade-easing), transform var(--fade-duration) var(--fade-easing);
  transition-delay: var(--fade-delay, 0ms);
}

.fade-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.is-preload .aside-left,
.is-preload .aside-left *,
.is-preload .aside-right,
.is-preload .aside-right * {
  transition: none !important;
}

.aside-left {
  position: relative;
  flex: 0 0 auto;
  width: var(--aside-left-width);
  height: 100%;
  overflow: hidden;
  background: var(--color-black);
  transition: background-color 1s ease;
  container-type: inline-size;
}

[data-surface="light"].aside-left {
  background: var(--color-paper);
}

.aside-left__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--bg-photo-height);
  object-fit: cover;
  transition: opacity 1s ease;
}

.aside-left__bg--dark {
  object-position: 22% center;
  opacity: 1;
}

.aside-left__bg--light {
  object-position: center;
  opacity: 0;
}

[data-surface="light"] .aside-left__bg--dark {
  opacity: 0;
}

[data-surface="light"] .aside-left__bg--light {
  opacity: 1;
}

.aside-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-black-alpha-10);
  opacity: 1;
  transition: opacity 1s ease;
  pointer-events: none;
}

[data-surface="light"].aside-left::after {
  opacity: 0;
}

.aside-left__content {
  display: none;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--gap-block-xl) var(--gap-inline-lg);
  text-align: center;
}

@container (min-width: 260px) {
  .aside-left__content {
    display: flex;
  }
}

.aside-right {
  position: relative;
  flex: 0 0 auto;
  width: calc(min(var(--extra-width), var(--aside-catchup-width)) + var(--excess-width) / 2);
  height: 100%;
  overflow: hidden;
  background: var(--color-black);
  transition: background-color 1s ease;
}

[data-surface="light"].aside-right {
  background: var(--color-paper);
}

.aside-right__bg {
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--bg-photo-height);
  object-fit: cover;
  transition: opacity 1s ease;
}

.aside-right__bg--dark {
  object-position: 0% center;
  filter: brightness(0.62);
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  opacity: 1;
}

.aside-right__bg--light {
  object-position: center;
  mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  opacity: 0;
}

[data-surface="light"] .aside-right__bg--dark {
  opacity: 0;
}

[data-surface="light"] .aside-right__bg--light {
  opacity: 1;
}

.aside-right__heading-spacer {
  width: 1px;
  height: 1px;
}

.aside-right__content {
  display: none;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block-lg);
  width: 100%;
  height: 100%;
  padding: var(--gap-block-xl) var(--gap-inline-lg);
  text-align: center;
  color: var(--color-text-primary);
}

.aside-left__content,
.aside-left__content *,
.aside-right__content,
.aside-right__content * {
  transition: color 1s ease, text-shadow 1s ease;
}

@media (min-width: 790px) {
  .aside-right__content {
    display: flex;
  }
}

.sp-scrollbar {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  z-index: 2;
}

@media (min-width: 790px) {
  .sp-scrollbar {
    display: block;
  }
}

.sp-scrollbar__thumb {
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 24px;
  border-radius: 3px;
  background: var(--color-text-secondary);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 1s ease;
}

.sp-scrollbar__thumb:hover,
.sp-scrollbar__thumb:active {
  opacity: 0.55;
}

.aside-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-en-serif);
  font-size: var(--font-size-20);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-accent-primary);
  text-shadow: var(--shadow-dropshadow-dark60);
  text-decoration: none;
  transition: filter 0.2s ease, color 1s ease, text-shadow 1s ease;
}

.aside-label:hover {
  filter: brightness(1.15);
}

[data-surface="light"] .aside-label {
  text-shadow: none;
}

.aside-right__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-xl);
}

.aside-right__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  width: 100%;
  max-width: 260px;
  padding: var(--gap-block-md) var(--gap-inline-md);
  background: var(--color-black-alpha-10);
  transition: background-color 1s ease;
}

[data-surface="light"] .aside-right__info {
  background: var(--color-white-alpha-10);
}

@media (min-width: 790px) and (max-height: 669px) {
  .aside-right__info {
    display: none;
  }
}

.aside-right__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
}

.aside-right__menu a {
  position: relative;
  display: inline-block;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--color-text-link);
  text-decoration: none;
  transition: filter 0.2s ease, color 1s ease;
}

[data-surface="light"] .aside-right__menu a {
  color: var(--color-text-accent-primary);
}

.aside-right__menu a:hover {
  filter: brightness(1.2);
}

.aside-right__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  opacity: 0.6;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.aside-right__menu a:hover::after {
  transform: scaleX(1);
}

.aside-right__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, color 1s ease, text-shadow 1s ease;
}

.aside-right__heading:hover,
.aside-right__heading:focus-visible {
  filter: brightness(1.15);
}

.aside-right__name {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-32);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-none);
}

.aside-right__subtitle {
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-none);
  color: var(--color-text-accent-primary);
}

.aside-right__date {
  gap: var(--space-8);
}

.aside-right__date-year,
.aside-right__date-weekday {
  font-size: var(--font-size-16);
}

.aside-right__date-day {
  font-size: var(--font-size-24);
}

.aside-right__place {
  gap: var(--space-4);
}

.aside-right__place-venue {
  font-size: var(--font-size-16);
}

.aside-right__place-city {
  font-size: var(--font-size-10);
}

.aside-right__cta {
  max-width: 280px;
  min-height: 46px;
  transition: background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease, color 1s ease;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 60%),
    0 4px 12px var(--color-black-alpha-10);
}

[data-surface="light"] .aside-right__cta {
  color: var(--color-text-accent-primary);
  --btn-cta-arrow: url("../img/icon-chevron-right-gold.svg");
  --cta-glass-bg:
    linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, transparent 45%),
    rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Nav / Hamburger Menu
   ========================================================================== */

.nav-toggle {
  position: fixed;
  top: var(--space-16);
  right: var(--space-8);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-8);
  width: 72px;
  height: 59px;
  padding-right: var(--space-16);
  color: var(--color-text-primary);
  filter: drop-shadow(var(--shadow-dropshadow-dark60));
}

.nav-toggle__line {
  display: block;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle__line--1 {
  width: 40px;
}

.nav-toggle__line--2 {
  width: 35px;
}

.nav-toggle__line--3 {
  width: 30px;
}

.nav-toggle.is-open .nav-toggle__line {
  width: 40px;
}

.nav-toggle.is-open .nav-toggle__line--1 {
  transform: translateY(9px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__line--2 {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__line--3 {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-toggle[data-nav-surface="light"] {
  color: var(--color-gray-900);
  filter: drop-shadow(var(--shadow-dropshadow-light40));
}

.nav-toggle.is-open[data-nav-surface="light"] {
  color: var(--color-text-primary);
  filter: drop-shadow(var(--shadow-dropshadow-dark60));
}

.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-space-default);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: max(88px, var(--space-24));
  --space-24: clamp(8px, 2.6dvh, 24px);
  --space-16: clamp(6px, 1.8dvh, 16px);
  background: var(--color-black-alpha-76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-menu__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-16);
  margin-top: auto;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--shadow-dropshadow-dark60);
  transition: filter 0.2s ease;
}

.nav-menu__heading:hover {
  filter: brightness(1.15);
}

.nav-menu__subtitle {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-mv-md);
}

.nav-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: var(--gap-block-lg);
  margin-bottom: auto;
}

.nav-menu__list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-nav);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-none);
  color: var(--color-text-link);
  text-decoration: none;
  transition: filter 0.2s ease;
}

.nav-menu__list a:hover {
  filter: brightness(1.2);
}

.nav-menu__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  opacity: 0.6;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-menu__list a:hover::after {
  transform: scaleX(1);
}

.nav-menu__footer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-24) var(--space-16);
  background: var(--color-black-alpha-76);
}

.nav-menu__cta {
  max-width: 358px;
}

/* ==========================================================================
   mainVisual
   ========================================================================== */

.main-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  --mv-vh: max(450px, 100dvh);
  min-height: var(--mv-vh);
  overflow: hidden;
  background: var(--color-bg-default);
  --space-24: clamp(8px, calc(var(--mv-vh) * 0.026), 24px);
  --space-16: clamp(6px, calc(var(--mv-vh) * 0.018), 16px);
  --gap-block-md: var(--space-24);
  --font-size-mv-display: min(var(--font-size-56), calc(36px + max(0px, var(--mv-vh) - 500px) * 20 / 250));
  --font-size-mv-lg: min(var(--font-size-40), calc(26px + max(0px, var(--mv-vh) - 500px) * 14 / 250));
  --font-size-mv-md: min(var(--font-size-24), calc(16px + max(0px, var(--mv-vh) - 500px) * 8 / 250));
  --font-size-mv-sm: min(var(--font-size-14), calc(9px + max(0px, var(--mv-vh) - 500px) * 5 / 250));
}

.main-visual__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  /* パララックスのはみ出し分(--parallax-overscan)だけ縦に余分に確保し、上下の余白が見えないようにする */
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
  object-position: 50% 20%;
  z-index: 0;
}

.main-visual__info {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: max(56px, calc(var(--mv-vh) * 0.4)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: var(--container-card);
  padding: var(--gap-block-md) 0;
  background: var(--color-black-alpha-30);
  color: var(--color-text-primary);
  text-align: center;
  text-shadow: var(--shadow-dropshadow-dark60);
}

.main-visual__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.main-visual__footer {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding: var(--space-24) var(--space-16);
}

@media (min-width: 790px) {

  .main-visual__footer,
  .nav-toggle,
  .nav-menu {
    display: none;
  }
}

.main-visual__cta {
  max-width: 358px;
  transition: color 0.3s ease;
}

.main-visual__footer[data-cta-surface="light"] {
  --btn-cta-arrow: url("../img/icon-chevron-right-gold.svg");
  --cta-glass-bg:
    linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, transparent 45%),
    rgba(255, 255, 255, 0.6);
}

.main-visual__footer[data-cta-surface="light"] .main-visual__cta {
  color: var(--color-gold-warm);
}

/* ==========================================================================
   Introduction
   ========================================================================== */

.introduction {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--section-space-default) 0;
}

.introduction__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
  object-position: 30% 50%;
  z-index: 0;
}

.introduction__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 0;
}

.introduction__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: min(var(--container-md), calc(100% - var(--space-32)));
}

.introduction__description {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block-sm);
  width: 100%;
}

/* ==========================================================================
   Location
   ========================================================================== */

.location {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-default);
  padding: var(--section-space-default) 0;
}

.location__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-xl);
  width: min(var(--container-md), calc(100% - var(--space-32)));
}

.location__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-block-sm);
  width: 100%;
  text-align: left;
}

.location__photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2100 / 1497;
  overflow: hidden;
}

.location__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
}

.location__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  overflow: hidden;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.location__link:hover {
  filter: brightness(1.07);
}

.location__link-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
  z-index: 0;
}

.location__link .btn-link {
  z-index: 1;
}

.location__link:hover .btn-link::after {
  transform: translateY(-50%) translateX(2px);
}

/* ==========================================================================
   Program
   ========================================================================== */

.program {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--section-space-default) 0;
}

.program__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-bg-subtle);
}

.program__bg-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  opacity: 0.46;
}

.program__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-lg);
  width: var(--container-card);
}

.program__lead {
  width: 100%;
}

.program__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block-lg);
  width: 100%;
}

.program__part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  width: 100%;
}

.program__part-text {
  padding-bottom: var(--space-8);
  white-space: nowrap;
}

.program__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: 0 var(--gap-block-sm);
}

.program__info-title {
  font-family: var(--font-en-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-40);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-none);
  color: var(--color-text-primary);
}

.program__info-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-xs);
}

.program__info-time-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-en-number);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-20);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-none);
  color: var(--color-text-accent-primary);
}

.program__info-time-sep {
  width: 14px;
  height: 1px;
  background: var(--color-text-accent-primary);
}

.program__info-place {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.program__info-desc {
  width: 100%;
  text-align: center;
  color: var(--color-text-primary);
}

/* ==========================================================================
   Dinner
   ========================================================================== */

.dinner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dinner__bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.dinner__container {
  --dinner-pad-x: clamp(8px, calc((100vw - 287px - var(--space-16)) / 2), var(--gap-inline-md));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-lg);
  width: min(max(76%, calc(287px + 2 * var(--dinner-pad-x))), calc(100% - var(--space-16)), 340px);
  min-height: 100vh;
  margin-top: calc(var(--gap-block-xl) - 100vh);
  margin-bottom: var(--gap-block-xl);
  padding: var(--gap-block-xl) var(--dinner-pad-x);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  text-shadow: var(--shadow-dropshadow-white-glow);
}

.dinner__lead {
  width: 100%;
  color: var(--color-black);
}

.dinner__text-tight {
  width: 100%;
  text-align: center;
  color: var(--color-black);
}

.dinner__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: 100%;
}

/* ==========================================================================
   Concert
   ========================================================================== */

.concert {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--section-space-large) 0;
}

.concert__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}

.concert__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(213.83% 71.49% at 50% 53.07%,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(3, 21, 31, 0) 47.12%,
      rgba(4, 31, 45, 0.86) 100%),
    rgba(0, 0, 0, 0.2);
}

.concert__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-lg);
  width: var(--container-card);
}

.concert .section-heading__title {
  text-shadow: var(--shadow-dropshadow-dark60);
}

.concert__description {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block-md);
  width: 100%;
  text-shadow: var(--shadow-dropshadow-dark60);
}

/* ==========================================================================
   Artist Profile
   ========================================================================== */

.artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-default);
  padding: var(--section-space-default) 0;
}

.artist__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-lg);
  width: var(--container-card);
}

.artist__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-xs);
  text-align: center;
}

.artist__name {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-mv-display-xs);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
  color: var(--color-text-primary);
}

.artist__photo-wrap {
  position: relative;
  width: 100%;
  height: 365px;
  overflow: hidden;
}

.artist__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  top: calc(-1 * var(--parallax-overscan, 0px));
  height: calc(100% + 2 * var(--parallax-overscan, 0px));
  object-fit: cover;
  object-position: center top;
}

.artist__description {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block-sm);
  width: 100%;
  text-align: justify;
  color: var(--color-text-primary);
}

.artist__sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline-sm);
  width: 100%;
}

.artist__sns-label {
  color: var(--color-text-primary);
}

.artist__sns-list {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
}

.artist__sns-link {
  display: flex;
  width: 44px;
  height: 44px;
}

/* ==========================================================================
   Ticket
   ========================================================================== */

.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--color-bg-subtle);
  padding: var(--section-space-default) 0;
}

.ticket__bg-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/img-ticket-pattern.png");
  background-repeat: repeat;
  background-position: top left;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.ticket__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-xl);
  width: var(--container-card);
}

.ticket__heading-text {
  color: var(--color-text-primary);
  white-space: nowrap;
}

.ticket__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: 100%;
}

.ticket__info-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
  text-shadow: var(--shadow-dropshadow-dark60);
}

.ticket__info-name {
  font-size: var(--font-size-mv-display-sm);
  color: var(--color-text-primary);
}

.ticket__info-date {
  line-height: var(--line-height-none);
  color: var(--color-text-primary);
  text-shadow: var(--shadow-dropshadow-dark60);
}

.ticket__info-program {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  color: var(--color-text-primary);
}

.ticket__info-program-row {
  display: flex;
  gap: var(--gap-inline-md);
  align-items: flex-start;
}

.ticket__info-program-label {
  flex-shrink: 0;
  width: 80px;
  white-space: nowrap;
}

.ticket__info-place {
  line-height: var(--line-height-none);
  text-align: center;
  text-shadow: var(--shadow-dropshadow-dark60);
}

.ticket__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: 100%;
}

.ticket__price-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-24);
  background: var(--color-white-alpha-20);
  color: var(--color-text-primary);
}

.ticket__price-amount {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  color: var(--color-text-primary);
}

.ticket__price-number {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-medium);
}

.ticket__price-digits {
  font-size: var(--font-size-40);
}

.ticket__price-comma {
  font-size: var(--font-size-32);
}

.ticket__price-unit {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-24);
  line-height: 1.1;
}

.ticket__price-note {
  text-align: center;
  color: var(--color-text-primary);
}

.ticket__sale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  width: 100%;
}

.ticket__sale-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-block-md);
  width: 100%;
  padding: var(--gap-block-md) var(--gap-inline-lg);
  background: rgba(0, 0, 0, 0.16);
  border-left: 1px solid var(--color-gold-warm);
  border-right: 1px solid var(--color-gold-warm);
}

.ticket__sale-label {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-20);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
  color: var(--color-text-accent-primary);
}

.ticket__sale-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  letter-spacing: var(--letter-spacing-hairline);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  text-align: justify;
}

.ticket__sale-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16) 0;
  background-image: var(--gradient-btn-gold);
  background-size: 220% 100%;
  background-position: 78% 0;
  color: var(--color-text-button-primary);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-button);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.ticket__sale-btn:hover {
  background-position: 50% 0;
  filter: brightness(1.08);
}

.ticket__sale-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-image: url("../img/icon-chevron-right-white.svg");
  background-repeat: no-repeat;
  background-size: 4px 7.33px;
  background-position: center;
  transition: transform 0.2s ease;
}

.ticket__sale-btn:hover::after {
  transform: translateY(-50%) translateX(4px);
}

.ticket__sale-btn--soldout {
  background-image: none;
  background-color: var(--color-gray-500);
  color: var(--color-gray-700);
  cursor: default;
  pointer-events: none;
  transition: none;
}

.ticket__sale-btn--soldout::after {
  background-image: url("../img/icon-chevron-right-gray.svg");
  transition: none;
}

/* ==========================================================================
   Access
   ========================================================================== */

.access {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-default);
  padding: var(--section-space-default) 0;
}

.access__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-md);
  width: var(--container-card);
}

.access__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  width: 100%;
}

.access__map {
  position: relative;
  width: 100%;
  aspect-ratio: 519 / 419;
  overflow: hidden;
}

.access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.access__info-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border-bottom: 1px solid var(--color-border-default);
}

.access__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border-default);
}

.access__info:first-child {
  gap: var(--gap-inline-xs);
  padding: var(--gap-block-xs) 0;
}

.access__info-title {
  width: 100%;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.access__info-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  padding-left: var(--gap-inline-md);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-snug);
  text-align: justify;
  color: var(--color-text-primary);
}

.access__car {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.access__parking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 var(--gap-inline-md);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.access__parking-link {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  margin-top: var(--gap-inline-sm);
  color: var(--color-text-link);
  text-decoration: none;
  transition: filter 0.2s ease;
}

.access__parking-link:hover {
  filter: brightness(1.3);
}

.access__parking-icon {
  width: 14px;
  flex-shrink: 0;
}

.access__car .note {
  margin-top: var(--space-8);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-default);
  padding: var(--section-space-default) 0;
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-lg);
  width: min(312px, calc(100% - var(--space-32)));
}

.footer__promoter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  width: 100%;
  text-align: center;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.footer__promoter-label {
  font-size: var(--font-size-16);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-accent-primary);
}

.footer__promoter-name {
  font-size: var(--font-size-lead);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-loose);
}

.footer__promoter-note {
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-inline-md);
  width: 100%;
}

.footer__contact-heading {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-accent-primary);
}

.footer__contact-heading img {
  width: 18px;
  aspect-ratio: 13.5 / 10.5;
}

.footer__contact-desc {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  text-align: center;
  color: var(--color-text-primary);
}

.footer__contact-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  max-width: 100%;
  height: 40px;
  border: 1px solid var(--color-text-link);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-14);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  text-align: center;
  text-decoration: none;
  color: var(--color-text-link);
  background-color: var(--color-bg-default);
  transition: filter 0.2s ease;
}

.footer__contact-btn:hover {
  filter: brightness(1.3);
}

.footer__contact-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  width: 16px;
  height: 10px;
  transform: translateY(-50%);
  background-image: url("../img/icon-chevron-right-gold-pale.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.footer__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block-sm);
  width: 100%;
  padding: var(--gap-block-md) var(--gap-inline-md);
}

.footer__banner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline-md);
  width: 100%;
}

.footer__logo-styleun {
  width: 88px;
  height: auto;
}

.footer__logo-pavilions {
  width: auto;
  height: 20px;
}

.footer__banner-cross {
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-12);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.footer__banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-10);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  text-decoration: none;
  color: var(--color-text-link);
  transition: filter 0.2s ease;
}

.footer__banner-link:hover {
  filter: brightness(1.25);
}

.footer__banner-link img {
  width: 14px;
  height: auto;
}

.footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-block-sm) 0;
  font-family: var(--font-jp-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-10);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}