/* Stylesheet block 1 */
/* PC版ファーストビューの土台 */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: #000; }
img { display: block; width: 100%; height: auto; }
.hero { width: 100%; height: 100svh; overflow: hidden; }
.hero__canvas { position: relative; width: 100%; height: 100%; background: #fff; isolation: isolate; }

/* 上部タイトル：黒地に白文字、横幅いっぱい */
.hero__title { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vw * 184 / 1412 * .97); margin: 0; background: #000; overflow: hidden; }
.hero__title img { width: 100%; height: auto; filter: invert(1); transform: scaleY(.97); transform-origin: top; }

/* 後ろの「二」の中央付近から右端までの縦コピー */
.hero__copy { position: absolute; top: calc(100vw * 184 / 1412 * .97); right: 0; width: 17%; bottom: 0; background: transparent; overflow: hidden; }
.hero__copy::before { content: ""; position: absolute; inset: 0; background: #000; }
.hero__copy img { position: relative; width: 100%; height: 100%; object-fit: fill; filter: invert(1); }

/* SVGのアートボード余白を除き、左下に合わせる */
.hero__next { position: absolute; left: 0; bottom: 0; width: 53.12%; height: calc((100svh - 100vw * 184 / 1412 * .97) * .8); }

/* 日付はNEXTの見えている上端のすぐ上に配置 */
.hero__date { position: absolute; z-index: 3; left: 0; bottom: calc(min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) + 1svh); width: min(32vw, max(0px, calc((100svh - 100vw * 184 / 1412 * .97 - min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) - 2svh) * 578 / 208))); }

.hero__sphere { position: absolute; z-index: -2; left: 50%; top: 57.5%; transform: translate(-50%, -50%); width: 25.2%; height: auto; max-height: 47.25svh; object-fit: contain; pointer-events: none; }

/* 手は球体と文字の後ろに配置 */
.hero__hands { position: absolute; inset: calc(100vw * 184 / 1412 * .97) 16.32% 0 0; overflow: hidden; pointer-events: none; }
.hero__hand { position: absolute; max-width: none; }
.hero__hand--left { z-index: -1; left: -5%; top: -28%; width: 78.32060775%; transform: rotate(10deg); transform-origin: center; }
.hero__hand--right { z-index: -3; left: 43%; top: 51%; width: 94.67222625%; }

/* 呼吸するように、左右で少しずらして動かす */
.hero__hand--left {
  animation: hand-left-breathe 6.8s ease-in-out infinite;
  will-change: transform;
}
.hero__hand--right {
  transform-origin: 85% 50%;
  animation: hand-right-breathe 7.6s ease-in-out -2.4s infinite;
  will-change: transform;
}
@keyframes hand-left-breathe {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(-7px) rotate(9.2deg); }
}
@keyframes hand-right-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hand--left, .hero__hand--right { animation: none; will-change: auto; }
}

/* 左手の呼吸と同じ周期で球体もそっと浮かせる */
.hero__sphere {
  animation: sphere-breathe 6.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes sphere-breathe {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sphere { animation: none; will-change: auto; }
}

/* 右手の親指だけ球体の前へ。同じ画像・配置・動きで重ねる */
.hero__hand--thumb {
  z-index: -1;
  clip-path: polygon(19% 50%, 21% 40%, 28% 30%, 33% 15%, 37% 3%, 43% 1%, 47% 10%, 48% 28%, 43% 47%, 35% 62%, 28% 73%, 23% 74%, 20% 67%);
}

/* 初回表示：登場したあと、呼吸の動きを続ける */
.hero__title { animation: title-enter .85s cubic-bezier(.22,1,.36,1) both; }
.hero__copy { animation: copy-enter .9s cubic-bezier(.22,1,.36,1) .15s both; }
.hero__date { animation: text-enter .85s ease-out .3s both; }
.hero__next { animation: text-enter 1s cubic-bezier(.22,1,.36,1) .4s both; }
.hero__hand--left {
  animation: left-enter 1.35s cubic-bezier(.22,1,.36,1) .35s both,
             hand-left-breathe 6.8s ease-in-out 1.7s infinite;
}
.hero__hand--right {
  animation: right-enter 1.35s cubic-bezier(.22,1,.36,1) .35s both,
             hand-right-breathe 7.6s ease-in-out 1.7s infinite;
}
.hero__sphere {
  animation: sphere-enter 1.15s cubic-bezier(.22,1,.36,1) .55s both,
             sphere-breathe 6.8s ease-in-out 1.7s infinite;
}
@keyframes title-enter {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes copy-enter {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes text-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes left-enter {
  from { opacity: 0; transform: translateX(-65px) rotate(10deg); }
  to { opacity: 1; transform: translateX(0) rotate(10deg); }
}
@keyframes right-enter {
  from { opacity: 0; transform: translateX(65px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes sphere-enter {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(22px) scale(.92); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__copy, .hero__date, .hero__next,
  .hero__hand--left, .hero__hand--right, .hero__sphere {
    animation: none;
    will-change: auto;
  }
}

/* 線のスケッチから写真へ移るオープニング */
.hero__intro-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  animation: sketch-fade .65s ease 1.65s both;
}
.intro-line {
  fill: none; stroke: #282828; stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sketch-draw 1.5s cubic-bezier(.45,0,.2,1) .1s both;
}
.intro-line--left { animation-delay: .2s; }
.intro-line--right { animation-delay: .35s; }
.hero__hand--left {
  animation: left-enter 1.2s cubic-bezier(.22,1,.36,1) 1.1s both,
             hand-left-breathe 6.8s ease-in-out 2.5s infinite;
}
.hero__hand--right {
  animation: right-enter 1.2s cubic-bezier(.22,1,.36,1) 1.1s both,
             hand-right-breathe 7.6s ease-in-out 2.5s infinite;
}
.hero__sphere {
  animation: sphere-enter 1.15s cubic-bezier(.22,1,.36,1) 1.25s both,
             sphere-breathe 6.8s ease-in-out 2.5s infinite;
}
@keyframes sketch-draw { to { stroke-dashoffset: 0; } }
@keyframes sketch-fade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .hero__intro-lines { display: none; }
  .hero__hand--left, .hero__hand--right, .hero__sphere { animation: none; }
}

/* 文字の実際のSVGパスを描いてから塗りを表示 */
.hero__title, .hero__copy, .hero__next { animation: none; }
.hero__letter-trace { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; pointer-events: none; animation: lettering-fade .5s ease 1.9s both; }
.hero__title .hero__letter-trace { transform: scaleY(.97); transform-origin: top; }
.hero__next .hero__letter-trace { color: #000; }
.letter-outline { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lettering-draw 1.8s cubic-bezier(.4,0,.2,1) .1s both; }
.hero__copy .letter-outline { animation-delay: .2s; }
.hero__next .letter-outline { animation-delay: .3s; }
.hero__title img, .hero__copy img, .hero__next > image { animation: lettering-fill .65s ease 1.6s both; }
.hero__hand--left { animation: left-enter 1.2s cubic-bezier(.22,1,.36,1) .35s both, hand-left-breathe 6.8s ease-in-out 1.7s infinite; }
.hero__hand--right { animation: right-enter 1.2s cubic-bezier(.22,1,.36,1) .35s both, hand-right-breathe 7.6s ease-in-out 1.7s infinite; }
.hero__sphere { animation: sphere-enter 1.15s cubic-bezier(.22,1,.36,1) .55s both, sphere-breathe 6.8s ease-in-out 1.7s infinite; }
@keyframes lettering-draw { to { stroke-dashoffset: 0; } }
@keyframes lettering-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes lettering-fade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
 .hero__letter-trace { display: none; }
 .hero__title img, .hero__copy img, .hero__next > image,
 .hero__hand--left, .hero__hand--right, .hero__sphere { animation: none; }
}

/* NEXTの画像と輪郭を同じSVG座標に揃える */
.hero__next-trace { color: #000; pointer-events: none; animation: lettering-fade .55s ease 2.1s both; }
.hero__next-trace .letter-outline { stroke-width: 1.4; animation: lettering-draw 2s cubic-bezier(.4,0,.2,1) .15s both; }
.hero__next > image { animation: lettering-fill .7s ease 1.8s both; }
@media (prefers-reduced-motion: reduce) {
 .hero__next-trace { display: none; }
 .hero__next > image { animation: none; }
}

/* 輪郭と完成画像の表示領域・伸縮方法を一致させる */
.hero__title .hero__letter-trace {
  height: auto;
  aspect-ratio: 1412 / 184;
  transform: scaleY(.97);
  transform-origin: top;
}
.hero__copy .hero__letter-trace { width: 100%; height: 100%; }
.hero__next-trace { transform: none; }

/* 縦コピーは同一パスの線と塗りを使い、位置の差をなくす */
.hero__copy-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__copy-art .copy-letter {
 fill: #fff; stroke: #fff; stroke-width: 1;
 vector-effect: non-scaling-stroke; stroke-linejoin: round;
 stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
 animation: copy-outline-draw 1.8s cubic-bezier(.4,0,.2,1) .2s both,
            copy-fill-in .65s ease 1.6s both;
}
@keyframes copy-outline-draw { to { stroke-dashoffset: 0; } }
@keyframes copy-fill-in {
 from { fill-opacity: 0; stroke-opacity: 1; }
 to { fill-opacity: 1; stroke-opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .hero__copy-art .copy-letter { animation: none; fill-opacity: 1; stroke: none; }
}

/* 黒い帯の範囲だけ、同じ手を反転して前面に重ねる */
.hero__hand-inversion {
 position: absolute; inset: 0; z-index: 2; pointer-events: none;
 clip-path: polygon(0 0, 100% 0, 100% 100%, 83% 100%, 83% calc(100vw * 184 / 1412 * .97), 0 calc(100vw * 184 / 1412 * .97));
 overflow: hidden;
}
.hero__hand-inversion .hero__hands { overflow: visible; }
.hero__hand-inversion .hero__hand { z-index: auto; filter: invert(1); }

/* 白い文字は前面、黒背景は独立して背面に配置 */
.hero__canvas::before, .hero__canvas::after { content: ""; position: absolute; background: #000; z-index: -4; pointer-events: none; }
.hero__canvas::before { inset: 0 0 auto; height: calc(100vw * 184 / 1412 * .97); }
.hero__canvas::after { top: calc(100vw * 184 / 1412 * .97); right: 0; bottom: 0; width: 17%; }
.hero__title, .hero__copy { z-index: 3; background: transparent; }
.hero__copy::before { display: none; }
.hero__date { z-index: 0; }
.hero__hand-inversion--next, .hero__hand-inversion--date {
 clip-path: none;
 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
 mask-mode: alpha;
}
.hero__hand-inversion--next {
 -webkit-mask-image: url("../images/next-logo-mask.svg"); mask-image: url("../images/next-logo-mask.svg");
 -webkit-mask-size: min(53.12vw, calc((100svh - 100vw * 184 / 1412 * .97) * .8 * 978.5 / 438.2)) auto; mask-size: min(53.12vw, calc((100svh - 100vw * 184 / 1412 * .97) * .8 * 978.5 / 438.2)) auto;
 -webkit-mask-position: left bottom; mask-position: left bottom;
}
.hero__hand-inversion--date {
 -webkit-mask-image: url("../images/festival-date.svg"); mask-image: url("../images/festival-date.svg");
 -webkit-mask-size: min(32vw, max(0px, calc((100svh - 100vw * 184 / 1412 * .97 - min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) - 2svh) * 578 / 208))) auto; mask-size: min(32vw, max(0px, calc((100svh - 100vw * 184 / 1412 * .97 - min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) - 2svh) * 578 / 208))) auto;
 -webkit-mask-position: left 0 bottom calc(min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) + 1svh); mask-position: left 0 bottom calc(min(53.12vw * 438.2 / 978.5, (100svh - 100vw * 184 / 1412 * .97) * .8) + 1svh);
}

/* 反転用の手を独立した前面レイヤーに固定 */
.hero__hand-inversion { z-index: 4; isolation: isolate; }
.hero__hand-inversion .hero__hands { z-index: 0; }
.hero__hand-inversion .hero__hand { z-index: 1; }
.hero__title, .hero__copy { z-index: 5; }
.hero__next { z-index: 0; }

/* 背景色そのものと合成し、黒い文字の上でも反転させる */
.hero__canvas > .hero__hands {
 z-index: 4;
 overflow: visible;
 filter: invert(1);
 mix-blend-mode: difference;
}
.hero__canvas > .hero__hands .hero__hand { z-index: auto; }
.hero__title, .hero__copy { z-index: 5; }

/* 日付の輪郭も、同じ素材・座標で左から描き出す */
.hero__date { animation: none; }
.hero__date > img { animation: lettering-fill .65s ease 1.7s both; }
.hero__date-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: lettering-fade .5s ease 2s both; }
.date-draw-window { transform-box: fill-box; transform-origin: left center; animation: date-line-reveal 1.65s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes date-line-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
 .hero__date-trace { display: none; }
 .hero__date > img { animation: none; }
}

/* 球体の円内は通常色、円外だけ背景との差分合成 */
@property --orb-float { syntax: "<length>"; inherits: true; initial-value: 0px; }
.hero__canvas {
 --orb-rx: calc(min(25.2vw, 47.25svh * 330 / 331) / 2);
 --orb-ry: calc(min(25.2vw * 331 / 330, 47.25svh) / 2);
 animation: orb-mask-breathe 6.8s ease-in-out 1.7s infinite;
}
.hero__canvas > .hero__hands {
 /* マスクは手のコンテナを基準とするので、全画面の外枠を使う */
 mask: none;
}
.hero__canvas > .hero__hands {
 clip-path: none;
}
.hero__sphere-hands { position: absolute; inset: 0; z-index: 4; pointer-events: none;
 mask-image: radial-gradient(ellipse var(--orb-rx) var(--orb-ry) at var(--orb-x,50%) calc(var(--orb-y,57.5%) + var(--orb-float)), #000 99%, transparent 100%);
 -webkit-mask-image: radial-gradient(ellipse var(--orb-rx) var(--orb-ry) at var(--orb-x,50%) calc(var(--orb-y,57.5%) + var(--orb-float)), #000 99%, transparent 100%);
}
.hero__sphere-hands .hero__hands { filter: none; mix-blend-mode: normal; overflow: visible; z-index: 0; }
.hero__sphere-hands .hero__hand { z-index: 0; }
@keyframes orb-mask-breathe { 0%,100% { --orb-float: 0px; } 50% { --orb-float: -4px; } }
@media (prefers-reduced-motion: reduce) { .hero__canvas { animation: none; } }

.hero__blend-hands { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: difference; filter: invert(1);
 mask-image: radial-gradient(ellipse var(--orb-rx) var(--orb-ry) at var(--orb-x,50%) calc(var(--orb-y,57.5%) + var(--orb-float)), transparent 99%, #000 100%);
 -webkit-mask-image: radial-gradient(ellipse var(--orb-rx) var(--orb-ry) at var(--orb-x,50%) calc(var(--orb-y,57.5%) + var(--orb-float)), transparent 99%, #000 100%);
}
.hero__blend-hands .hero__hands { overflow: visible; z-index: 0; }
.hero__blend-hands .hero__hand { z-index: auto; }

/* モノクロの細い線で、下への動きを控えめに示す */
.hero__scroll {
 position: absolute; z-index: 6; left: 61%; bottom: 22px;
 display: flex; flex-direction: column; align-items: center; gap: 10px;
 color: #000; pointer-events: none;
 animation: scroll-cue-enter .8s ease 2.4s both;
}
.hero__scroll-label {
 font-family: Arial, Helvetica, sans-serif; font-size: 9px;
 font-weight: 500; letter-spacing: .28em; padding-left: .28em;
}
.hero__scroll-track { position: relative; display: block; width: 1px; height: 42px; background: rgba(0,0,0,.16); overflow: hidden; }
.hero__scroll-track span { position: absolute; inset: 0; background: #000; transform-origin: top;
 animation: scroll-cue-line 2.3s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes scroll-cue-line {
 0% { transform: translateY(-100%); }
 55%, 65% { transform: translateY(0); }
 100% { transform: translateY(100%); }
}
@keyframes scroll-cue-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .hero__scroll, .hero__scroll-track span { animation: none; }
}

/* 手を避け、右の黒帯の下端に置く */
.hero__scroll { left: auto; right: 8.5%; bottom: 20px; transform: translateX(50%); color: #fff; }
.hero__scroll-track { background: rgba(255,255,255,.25); }
.hero__scroll-track span { background: #fff; }

/* 「八十」の左横に収まる縦型のスクロール誘導 */
.hero__scroll {
 left: auto; right: 17.7%;
 top: calc(100vw * 184 / 1412 * .97 + 3svh);
 bottom: auto; transform: none;
 flex-direction: row; align-items: center; gap: 9px; color: #000;
}
.hero__scroll-label { writing-mode: vertical-rl; padding: 0; font-size: 9px; letter-spacing: .22em; }
.hero__scroll-track { height: 60px; background: rgba(0,0,0,.16); }
.hero__scroll-track span { background: #000; }

.hero__scroll-label { font-size: 12px; font-weight: 700; }
.hero__scroll-track { width: 2px; height: 72px; }

/* スクロールをきっかけに、固定画面のシーンを切り替える */
body { overflow: hidden; }
.hero__title, .hero__copy, .hero__date, .hero__next, .hero__scroll {
 transition: opacity .65s ease, translate 1.2s cubic-bezier(.22,1,.36,1);
}
.hero__canvas::before, .hero__canvas::after { transition: opacity .9s ease; }
.hero__sphere { transition: top 1.35s cubic-bezier(.22,1,.36,1), width 1.35s cubic-bezier(.22,1,.36,1), max-height 1.35s cubic-bezier(.22,1,.36,1); }
.hero__blend-hands, .hero__sphere-hands { transition: opacity .8s ease, translate 1.35s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .hero__title { opacity: 0; translate: 0 -45px; }
.hero.is-detail .hero__copy { opacity: 0; translate: 45px 0; }
.hero.is-detail .hero__date, .hero.is-detail .hero__next { opacity: 0; translate: 0 45px; }
.hero.is-detail .hero__scroll { opacity: 0; }
.hero.is-detail .hero__canvas::before, .hero.is-detail .hero__canvas::after { opacity: 0; }
.hero.is-detail .hero__blend-hands, .hero.is-detail .hero__sphere-hands { opacity: 0; translate: 0 -28px; }
.hero.is-detail .hero__sphere { top: 50%; width: 37.8%; max-height: 68.25svh; }
@media (prefers-reduced-motion: reduce) {
 .hero *, .hero__canvas::before, .hero__canvas::after { transition-duration: .01ms !important; }
}

/* 次のシーンでは手を対角の端に残す */
.hero.is-detail .hero__blend-hands, .hero.is-detail .hero__sphere-hands { opacity: 1; translate: 0 0; }
.hero__hand { transition: left 1.35s cubic-bezier(.22,1,.36,1), top 1.35s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .hero__hand--left { left: -40%; top: -90%; }
.hero.is-detail .hero__hand--right { left: 48%; top: 61%; }

/* 球体と同じ倍率（36 / 25.2）で手も拡大 */
.hero__hand { transition: left 1.35s cubic-bezier(.22,1,.36,1), top 1.35s cubic-bezier(.22,1,.36,1), width 1.35s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .hero__hand--left { width: 111.8865825%; }
.hero.is-detail .hero__hand--right { width: 135.2460375%; }

/* 次のシーンの左手だけ、呼吸を残してさらに10度傾ける */
.hero__hand--left { rotate: 0deg; transition: left 1.35s cubic-bezier(.22,1,.36,1), top 1.35s cubic-bezier(.22,1,.36,1), width 1.35s cubic-bezier(.22,1,.36,1), rotate 1.35s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .hero__hand--left { rotate: 5deg; }

/* 拡大しながら球体から80周年ロゴへクロスフェード */
.hero__sphere {
 transition: top 1.35s cubic-bezier(.22,1,.36,1), width 1.35s cubic-bezier(.22,1,.36,1), max-height 1.35s cubic-bezier(.22,1,.36,1), opacity .8s ease .15s;
}
.hero__sphere--poster { animation: sphere-breathe 6.8s ease-in-out 1.7s infinite; }
.hero__sphere--anniversary { opacity: 0; animation: sphere-breathe 6.8s ease-in-out 1.7s infinite; }
.hero.is-detail .hero__sphere--poster { opacity: 0; }
.hero.is-detail .hero__sphere--anniversary { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
 .hero__sphere--poster, .hero__sphere--anniversary { animation: none; }
}

.hero.is-detail .hero__sphere--anniversary { top: 55%; }

/* 参考サイトと同じ右端の縦型進捗表示へ切り替える */
.scroll-gauge { position: absolute; z-index: 6; top: 50%; right: 20px; width: 18px; height: min(420px, calc(100svh - 48px)); transform: translateY(-50%); opacity: 0; visibility: hidden; pointer-events: none; color: #000; transition: opacity .4s ease, visibility 0s linear .4s; }
.hero.is-detail .scroll-gauge { opacity: 1; visibility: visible; transition: opacity .4s ease .2s, visibility 0s linear 0s; }
.gauge-meta { display: flex; height: 100%; align-items: center; justify-content: flex-start; flex-direction: column; font-family: Arial, Helvetica, sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .12em; }
.gauge-label { writing-mode: vertical-rl; }
.gauge-track { position: absolute; top: 62px; right: 5px; bottom: 0; left: 5px; overflow: hidden; background: rgba(0,0,0,.15); }
.gauge-fill { width: 100%; height: 100%; background: #000; transform: scaleY(0); transform-origin: center top; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .gauge-fill { transform: scaleY(1); }

.hero.is-detail .hero__scroll { animation: none; opacity: 0; visibility: hidden; }

/* ロゴに切り替わるたび、輪郭を描いてから元の色を入れる */
.anniversary-letter { fill-opacity: 0; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero[data-scene="1"]:not(.is-restored) .anniversary-letter { animation: anniversary-draw 1.7s cubic-bezier(.4,0,.2,1) .35s both, anniversary-color .65s ease 1.65s both; }
@keyframes anniversary-draw { to { stroke-dashoffset: 0; } }
@keyframes anniversary-color { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
 .hero[data-scene="1"]:not(.is-restored) .anniversary-letter { animation: none; fill-opacity: 1; stroke-opacity: 0; }
}

/* ロゴの説明は手と反対の対角へ */
.hero__logo-notes { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.hero.is-detail .hero__logo-notes { opacity: 1; visibility: visible; transition: opacity .8s ease 1.25s, visibility 0s linear 0s; }
.hero__logo-note { position: absolute; margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: clamp(12px, 1.05vw, 18px); font-weight: 500; line-height: 1.95; letter-spacing: .08em; color: #000; translate: 0 12px; transition: translate .8s cubic-bezier(.22,1,.36,1); }
.hero.is-detail .hero__logo-note { translate: 0 0; transition-delay: 1.25s; }
.hero__logo-note--upper { top: 12%; right: 9.5%; }
.hero__logo-note--lower { left: 6%; bottom: 10%; }

.hero__logo-note { writing-mode: vertical-rl; text-orientation: upright; line-height: 2; }

/* 保存したシーンは完成状態から表示する */
.hero.is-restored *, .hero.is-restored .hero__canvas::before, .hero.is-restored .hero__canvas::after { transition: none !important; }
.hero.is-restored .anniversary-letter { animation: none; fill-opacity: 1; stroke-opacity: 0; }
.hero.is-restored .hero__logo-note { translate: 0 0; }

/* 現在の説明セクションを右上に表示 */
.hero__section-label { position: absolute; z-index: 6; top: 28px; right: 48px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: #000; opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity .4s ease, translate .4s ease, visibility 0s linear .4s; }
.hero.is-detail .hero__section-label { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .6s ease .75s, translate .6s ease .75s, visibility 0s linear 0s; }
.hero__section-label-en { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .18em; }
.hero__section-label-ja { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 11px; letter-spacing: .12em; }

/* ３番目のシーン：中央をNEXT OCTAVEへ */
.hero__theme-logo { position: absolute; z-index: 2; left: 50%; top: 53%; width: 46.2%; height: auto; aspect-ratio: 978.5 / 438.2; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility 0s linear .65s; }
.hero.is-theme .hero__theme-logo { opacity: 1; visibility: visible; transition: opacity .8s ease .15s, visibility 0s linear 0s; animation: sphere-breathe 6.8s ease-in-out infinite; }
.theme-letter { fill: #000; fill-opacity: 0; stroke: #000; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero.is-theme .theme-letter { animation: anniversary-draw 1.7s cubic-bezier(.4,0,.2,1) .25s both, anniversary-color .65s ease 1.55s both; }
.hero.is-theme .hero__sphere--anniversary { opacity: 0; }
.hero.is-theme .hero__logo-notes { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.hero.is-detail .gauge-fill { transform: scaleY(var(--scene-progress, .5)); }
.hero.is-restored .theme-letter { animation: none; fill-opacity: 1; stroke-opacity: 0; }
@media (prefers-reduced-motion: reduce) {
 
 .hero.is-theme .theme-letter { animation: none; fill-opacity: 1; stroke-opacity: 0; }
}

.hero__theme-notes { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.hero.is-theme .hero__theme-notes { opacity: 1; visibility: visible; transition: opacity .8s ease 1.25s, visibility 0s linear 0s; }

/* NEXT登場後、指定のミント色の線が右から左へ貫通する */
.hero__theme-line { position: absolute; z-index: 3; left: 0; right: 0; top: 53%; height: 3px; margin-top: -1.5px; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.hero__theme-line::after { content: ""; display: block; width: 100%; height: 100%; background: #82fcc7; transform: scaleX(0); transform-origin: right center; }
.hero.is-theme .hero__theme-line { opacity: 1; }
.hero.is-theme .hero__theme-line::after { animation: theme-line-cross 1.25s cubic-bezier(.65,0,.25,1) 2.25s both; }
@keyframes theme-line-cross { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero.is-restored.is-theme .hero__theme-line::after { animation: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
 .hero.is-theme .hero__theme-line::after { animation: none; transform: scaleX(1); }
}

.hero__theme-line { z-index: 1; height: 18px; margin-top: -9px; }
.hero__theme-line::after { transform-origin: left center; }

/* 全シーン共通の固定背景：すべての素材より背面 */
.site-background { position: fixed; inset: 0; z-index: -5; width: 100vw; height: 100svh; object-fit: cover; pointer-events: none; }

.site-background { opacity: .2; }

.site-background { opacity: .4; }
.hero__title-texture { position: absolute; inset: 0; width: 100%; height: auto; aspect-ratio: 1412 / 184; transform: scaleY(.97); transform-origin: top; pointer-events: none; animation: lettering-fill .65s ease 1.6s both; }
.hero__copy-art .copy-letter { fill: url(#copy-texture); }
@media (prefers-reduced-motion: reduce) { .hero__title-texture { animation: none; } }

/* NEXTの次はポスターを中央へ */
.hero__poster { position: absolute; z-index: 2; left: 50%; top: 53%; width: auto; height: 76svh; max-width: 46vw; object-fit: contain; opacity: 0; visibility: hidden; transform: translate(-50%, -50%) translateY(18px) scale(.97); transition: opacity .85s ease, transform 1.2s cubic-bezier(.22,1,.36,1), visibility 0s linear .85s; }
.hero.is-poster .hero__poster { opacity: 1; visibility: visible; transform: translate(-50%, -50%) translateY(0) scale(1); transition: opacity .85s ease .15s, transform 1.2s cubic-bezier(.22,1,.36,1) .15s, visibility 0s linear 0s; }
.hero.is-poster .hero__sphere--anniversary { opacity: 0; }
.hero.is-poster .hero__logo-notes { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }

/* ポスターへ切り替える際、手は外へ、線は右へ抜ける */
.hero.is-poster .hero__blend-hands, .hero.is-poster .hero__sphere-hands { opacity: 1; }
.hero.is-poster .hero__hand--left { left: -40%; top: -100%; }
.hero.is-poster .hero__hand--right { left: 48%; top: 66%; }
.hero.is-poster .hero__theme-line { opacity: 1; }
.hero.is-poster .hero__theme-line::after { animation: theme-line-exit .9s cubic-bezier(.65,0,.35,1) both; }
@keyframes theme-line-exit { from { transform: translateX(0) scaleX(1); } to { transform: translateX(105%) scaleX(1); } }
.hero.is-restored.is-poster .hero__theme-line { display: none; }
@media (prefers-reduced-motion: reduce) { .hero.is-poster .hero__theme-line { display: none; } }

.hero__poster-notes { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.hero.is-poster .hero__poster-notes { opacity: 1; visibility: visible; transition: opacity .8s ease 1s, visibility 0s linear 0s; }

.hero__poster-notes .hero__logo-note--upper { right: 13%; }
.hero__poster-notes .hero__logo-note--lower { left: 13%; }

.hero__logo-notes .hero__logo-note--upper { right: 13%; }
.hero__logo-notes .hero__logo-note--lower { left: 13%; }

/* スクロール後の登場だけ約2倍速。常時の揺れは変更しない */
.hero.is-detail .hero__sphere { transition-duration: .675s, .675s, .675s, .4s; transition-delay: 0s, 0s, 0s, .075s; }
.hero.is-detail .hero__hand { transition-duration: .675s; }
.hero.is-detail .hero__blend-hands, .hero.is-detail .hero__sphere-hands { transition-duration: .4s, .675s; }
.hero.is-detail .hero__logo-note { transition-duration: .4s; transition-delay: .625s; }
.hero.is-detail .scroll-gauge { transition: opacity 0.2s ease 0.1s, visibility 0s linear 0s; }
.hero.is-detail .hero__scroll { animation: none; }
.hero[data-scene="1"]:not(.is-restored) .anniversary-letter { animation: anniversary-draw 0.85s cubic-bezier(.4,0,.2,1) 0.175s both, anniversary-color 0.325s ease 0.825s both; }

.hero.is-detail .hero__logo-notes { transition: opacity 0.4s ease 0.625s, visibility 0s linear 0s; }
.hero.is-detail .hero__section-label { transition: opacity 0.3s ease 0.375s, translate 0.3s ease 0.375s, visibility 0s linear 0s; }
.hero.is-theme .hero__theme-logo { transition: opacity 0.4s ease 0.075s, visibility 0s linear 0s; }
.hero.is-theme .theme-letter { animation: anniversary-draw 0.85s cubic-bezier(.4,0,.2,1) 0.125s both, anniversary-color 0.325s ease 0.775s both; }
.hero.is-theme .hero__logo-notes { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }


.hero.is-theme .hero__theme-notes { transition: opacity 0.4s ease 0.625s, visibility 0s linear 0s; }
.hero.is-theme .hero__theme-line::after { animation: theme-line-cross 0.625s cubic-bezier(.65,0,.25,1) 1.125s both; }

.hero.is-poster .hero__poster { transition: opacity 0.425s ease 0.075s, transform 0.6s cubic-bezier(.22,1,.36,1) 0.075s, visibility 0s linear 0s; }
.hero.is-poster .hero__logo-notes { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.hero.is-poster .hero__theme-line::after { animation: theme-line-exit 0.45s cubic-bezier(.65,0,.35,1) both; }
.hero.is-poster .hero__poster-notes { transition: opacity 0.4s ease 0.5s, visibility 0s linear 0s; }
/* ポスター周辺に小さな色付きの星を散らす */
.hero__poster-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.hero.is-poster .hero__poster-stars { opacity: 1; visibility: visible; transition: opacity .55s ease .45s, visibility 0s linear 0s; }
.hero__poster-stars img { position: absolute; height: auto; transform: translate(-50%,-50%); }

/* Draw poster ornaments before revealing their original colors. */
.hero__poster-stars .hero__poster-decoration { position:absolute; height:auto; overflow:visible; transform:translate(-50%,-50%); }
.poster-decoration-path { stroke-dasharray:1; stroke-dashoffset:1; }
.hero.is-poster .poster-decoration-path { animation:poster-ornament-draw .5s ease forwards; animation-delay:var(--draw-delay); }
.hero.is-poster .poster-decoration-path[data-filled] { animation:poster-ornament-draw .5s ease forwards,poster-ornament-fill .2s ease forwards; animation-delay:var(--draw-delay),calc(var(--draw-delay) + .42s); }
@keyframes poster-ornament-draw { to { stroke-dashoffset:0; } }
@keyframes poster-ornament-fill { to { fill-opacity:1; stroke-opacity:0; } }
.hero.is-restored .poster-decoration-path { animation:none !important; stroke-dashoffset:0; }
.hero.is-restored .poster-decoration-path[data-filled] { fill-opacity:1; stroke-opacity:0; }
@media(prefers-reduced-motion:reduce) { .hero .poster-decoration-path { animation:none !important; stroke-dashoffset:0; } .hero .poster-decoration-path[data-filled] { fill-opacity:1; stroke-opacity:0; } }

/* Keep ornaments visible throughout their stroke entrance. */
.hero.is-poster .hero__poster-stars { opacity:1; visibility:visible; transition:none; }
.hero.is-poster .poster-decoration-path { animation-duration:.75s; animation-delay:calc(var(--draw-delay) + .1s); }
.hero.is-poster .poster-decoration-path[data-filled] { animation-duration:.75s,.25s; animation-delay:calc(var(--draw-delay) + .1s),calc(var(--draw-delay) + .95s); }

/* Explicit SVG sizes and visible fallback for every ornament. */
.poster-decoration-path[data-filled] { fill-opacity:1; }
.hero.is-poster .poster-decoration-path[data-filled] { animation-fill-mode:forwards,both; }
@keyframes poster-ornament-fill { from { fill-opacity:0; stroke-opacity:1; } to { fill-opacity:1; stroke-opacity:0; } }

/* Music notes appear in solid gold; stars retain their drawing animation. */
.hero .hero__music-note .poster-decoration-path { animation:none !important; stroke-dasharray:none; stroke-dashoffset:0; stroke-opacity:1; }
.hero .hero__music-note .poster-decoration-path[data-filled] { fill-opacity:1; stroke-opacity:0; }

/* Keep the poster artwork clear on every viewport size. */
.hero__poster-stars:not(.is-laid-out) .hero__poster-decoration { visibility:hidden; }

/* Fifth scene: hands leave, then a mint line descends from the top. */
.hero__descending-line { position:absolute; z-index:2; left:50%; top:0; width:18px; height:100%; margin-left:-9px; pointer-events:none; visibility:hidden; transform:scaleY(0); transform-origin:center top; }
.hero__descending-line::after { content:""; display:block; width:100%; height:100%; background:#82fcc7; }
.hero.is-line-scene .hero__descending-line { visibility:visible; animation:descending-line-enter .75s cubic-bezier(.65,0,.25,1) .2s both; }
@keyframes descending-line-enter { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.hero.is-line-scene .hero__blend-hands, .hero.is-line-scene .hero__sphere-hands { opacity:0; transition:opacity .35s ease; }
.hero.is-line-scene .hero__sphere--anniversary, .hero.is-line-scene .hero__sphere--poster { opacity:0; }
.hero.is-line-scene .hero__logo-notes, .hero.is-line-scene .hero__section-label { opacity:0; visibility:hidden; transition:opacity .25s ease,visibility 0s linear .25s; }
.hero.is-restored.is-line-scene .hero__descending-line { animation:none; transform:scaleY(1); }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene .hero__descending-line { animation:none; transform:scaleY(1); } }

/* Festival introduction: perspective road and photographic collage. */
.hero__about { position:absolute; inset:0; z-index:3; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility 0s linear .3s; overflow:hidden; }
.hero.is-line-scene .hero__about { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease,visibility 0s; }
.hero.is-line-scene .hero__descending-line { display:none; }
.hero__about-road { position:absolute; inset:0; background:#82fcc7; clip-path:polygon(39% 0,61% 0,100% 100%,0 100%); transform:scaleY(0); transform-origin:center top; }
.hero.is-line-scene .hero__about-road { animation:descending-line-enter .75s cubic-bezier(.65,0,.25,1) .1s both; }
.hero__about-copy { position:absolute; z-index:2; top:21%; left:50%; width:75%; transform:translateX(-50%); text-align:center; opacity:0; }
.hero__about-copy h2 { margin:0; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:clamp(32px,4vw,66px); font-weight:900; letter-spacing:-.04em; }
.hero__about-arrow { display:block; font-size:26px; line-height:1.3; }
.hero__about-copy p { margin:20px auto 0; writing-mode:vertical-rl; text-orientation:upright; font-size:clamp(11px,.95vw,16px); font-family:"Yu Gothic",sans-serif; font-weight:600; line-height:1.9; letter-spacing:.05em; max-height:26svh; text-align:left; }
.hero__about-link { position:absolute; z-index:5; top:65%; left:50%; transform:translateX(-50%); text-align:center; opacity:0; }
.hero__about-link a { padding:10px 24px; border:2px solid #000; background:transparent; color:#000; font:700 clamp(18px,1.7vw,28px)/1.3 "Yu Gothic",sans-serif; opacity:1; }
.hero__about-link small { display:block; margin-top:6px; font-size:11px; }
.hero__about-building { position:absolute; z-index:2; bottom:8%; width:25%; height:auto; opacity:0; }
.hero__about-building--left { left:1%; }
.hero__about-building--right { right:1%; }
.hero__about-crowd { position:absolute; z-index:4; bottom:-1px; left:0; width:100%; height:auto; max-height:30svh; object-fit:fill; opacity:0; }
.hero.is-line-scene .hero__about-copy, .hero.is-line-scene .hero__about-link, .hero.is-line-scene .hero__about-building, .hero.is-line-scene .hero__about-crowd { animation:about-collage-enter .45s ease .55s both; }
@keyframes about-collage-enter { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
.hero.is-restored.is-line-scene .hero__about-road { animation:none; transform:scaleY(1); }
.hero.is-restored.is-line-scene .hero__about-copy, .hero.is-restored.is-line-scene .hero__about-link, .hero.is-restored.is-line-scene .hero__about-building, .hero.is-restored.is-line-scene .hero__about-crowd { animation:none; opacity:1; }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene .hero__about-road { animation:none; transform:scaleY(1); } .hero.is-line-scene .hero__about-copy, .hero.is-line-scene .hero__about-link, .hero.is-line-scene .hero__about-building, .hero.is-line-scene .hero__about-crowd { animation:none; opacity:1; } }

/* Let the festival introduction extend beyond one screen. */
.hero.is-line-scene .hero__about { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.hero__about-content { position:relative; min-height:170svh; height:max(170svh,1100px); isolation:isolate; overflow:hidden; }
.hero__about-copy { top:20%; }
.hero__about-copy p { font-size:clamp(14px,1.1vw,19px); max-height:none; margin-top:35px; line-height:2; }
.hero__about-link { top:65%; }
.hero__about-building { bottom:10%; width:28%; }
.hero__about-crowd { max-height:none; }
.hero.is-line-scene .scroll-gauge { opacity:0; visibility:hidden; }

/* After poster, continue in the normal vertical document flow. */
.hero.is-document-scroll { height:auto; overflow:visible; }
.hero.is-document-scroll .hero__canvas { height:100svh; overflow:hidden; }
.hero.is-document-scroll > .hero__about { position:relative; inset:auto; width:100%; opacity:1; visibility:visible; overflow:hidden; pointer-events:auto; transition:none; }
.hero.is-document-scroll .hero__about-content { min-height:260svh; height:max(260svh,1800px); }
.hero.is-document-scroll .hero__about-road { transform:scaleY(1); animation:none; }
.hero.is-document-scroll .hero__about-copy, .hero.is-document-scroll .hero__about-link, .hero.is-document-scroll .hero__about-building, .hero.is-document-scroll .hero__about-crowd { opacity:1; animation:none; }
.hero.is-document-scroll .hero__about-copy { top:18%; }
.hero.is-document-scroll .hero__about-link { top:64%; }
.hero.is-document-scroll .hero__about-building { bottom:8%; }

/* Release the original fullscreen body scroll lock after the poster. */
body.has-document-scroll { overflow-x:hidden; overflow-y:auto; }

/* Join the poster exit to the introduction road without a cut. */
.hero.is-document-scroll .hero__descending-line { display:block; visibility:visible; top:91%; bottom:0; height:auto; transform:none; animation:none; z-index:1; }
.hero.is-document-scroll .hero__about-road { clip-path:polygon(calc(50% - 9px) 0,calc(50% + 9px) 0,100% 100%,0 100%); }
.hero.is-document-scroll .hero__blend-hands, .hero.is-document-scroll .hero__sphere-hands { transition:opacity .35s ease; }
.hero.is-document-scroll.is-leaving-poster .hero__blend-hands, .hero.is-document-scroll.is-leaving-poster .hero__sphere-hands { opacity:0; }

/* Exit the final horizontal scene before enabling vertical travel. */
.hero.is-line-scene .hero__poster { opacity:0; visibility:hidden; transform:translate(-50%,-58%) scale(.94); transition:opacity .3s ease,transform .4s ease,visibility 0s linear .4s; }
.hero.is-line-scene .hero__blend-hands, .hero.is-line-scene .hero__sphere-hands { opacity:0; transition:opacity .3s ease; }
.hero.is-line-scene .hero__poster-stars, .hero.is-line-scene .hero__poster-notes { opacity:0; visibility:hidden; }
.hero.is-line-scene.is-document-scroll .hero__descending-line { top:0; height:100%; bottom:auto; transform:scaleY(0); animation:descending-line-enter .65s cubic-bezier(.65,0,.25,1) .4s both; }
.hero.is-restored.is-line-scene .hero__descending-line { animation:none; transform:scaleY(1); }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene.is-document-scroll .hero__descending-line { animation:none; transform:scaleY(1); } }

/* One continuous perspective ribbon from the entrance into the introduction. */
.hero.is-line-scene.is-document-scroll .hero__descending-line { left:0; width:100%; margin-left:0; clip-path:polygon(calc(50% - 9px) 0,calc(50% + 9px) 0,64% 100%,36% 100%); }
.hero.is-line-scene.is-document-scroll .hero__about-road { clip-path:polygon(36% 0,64% 0,100% 100%,0 100%); }

/* Reveal the ribbon downward without stretching its perspective shape. */
.hero.is-line-scene.is-document-scroll .hero__descending-line { transform:none; animation:none; }
.hero.is-line-scene.is-document-scroll .hero__descending-line::after { clip-path:inset(0 0 100% 0); animation:ribbon-extend .9s cubic-bezier(.4,0,.2,1) .35s both; }
@keyframes ribbon-extend { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
.hero.is-restored.is-line-scene .hero__descending-line::after { animation:none; clip-path:inset(0); }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene.is-document-scroll .hero__descending-line::after { animation:none; clip-path:inset(0); } }

/* Overlap the two ribbon surfaces to remove the section-edge seam. */
.hero.is-document-scroll > .hero__about { margin-top:-2px; }
.hero.is-line-scene.is-document-scroll .hero__descending-line { height:calc(100% + 2px); }
.hero.is-document-scroll .hero__canvas { overflow:visible; }
.hero.is-document-scroll .hero__about-road { top:-2px; }

/* Reveal the lower road only after the entering ribbon reaches it. */
.hero.is-line-scene.is-document-scroll .hero__about-road { background:transparent; }
.hero.is-line-scene.is-document-scroll .hero__about-road::after { content:""; position:absolute; inset:0; background:#82fcc7; clip-path:inset(0 0 100% 0); animation:ribbon-extend 1.2s cubic-bezier(.4,0,.2,1) 1.25s both; }
.hero.is-restored.is-line-scene .hero__about-road::after { animation:none; clip-path:inset(0); }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene.is-document-scroll .hero__about-road::after { animation:none; clip-path:inset(0); } }

/* Give the start of the widening ribbon a stronger width. */
.hero.is-line-scene.is-document-scroll .hero__descending-line { clip-path:polygon(calc(50% - 27px) 0,calc(50% + 27px) 0,64% 100%,36% 100%); }

/* Allow wheel scrolling to reach the document after scene navigation. */
html:has(body.has-document-scroll) { overflow-y:auto; height:auto; }
body.has-document-scroll { overflow-y:auto; height:auto; }
.hero.is-document-scroll > .hero__about { overflow:visible; overscroll-behavior:auto; }
.hero.is-document-scroll .hero__about-content { overscroll-behavior:auto; }
.hero.is-line-scene.is-document-scroll .hero__descending-line { clip-path:polygon(calc(50% - 60px) 0,calc(50% + 60px) 0,64% 100%,36% 100%); }

/* Remove nested scroll containers so the introduction uses one document scroll. */
.hero.is-document-scroll > .hero__about, .hero.is-document-scroll .hero__about-content { overflow:visible !important; overscroll-behavior:auto !important; }
body.has-document-scroll, html:has(body.has-document-scroll) { overflow-y:auto !important; max-height:none !important; height:auto !important; }

/* Shorter introduction and wider continuous green ribbon. */
.hero.is-document-scroll .hero__about-content { min-height:210svh; height:max(210svh,1450px); }
.hero.is-line-scene.is-document-scroll .hero__descending-line { clip-path:polygon(calc(50% - 90px) 0,calc(50% + 90px) 0,69% 100%,31% 100%); }
.hero.is-line-scene.is-document-scroll .hero__about-road { clip-path:polygon(31% 0,69% 0,100% 100%,0 100%); }

/* Bring introduction content upward and reduce its overall length. */
.hero.is-document-scroll .hero__about-content { min-height:180svh; height:max(180svh,1250px); }
.hero.is-document-scroll .hero__about-copy { top:12%; }
.hero.is-document-scroll .hero__about-link { top:55%; }
.hero.is-document-scroll .hero__about-building { bottom:8%; }

/* Compact vertical introduction: reduce the empty entrance and content spacing. */
.hero.is-document-scroll .hero__canvas { height:45svh; }
.hero.is-document-scroll .hero__about-content { min-height:120svh; height:max(120svh,950px); }
.hero.is-document-scroll .hero__about-copy { top:8%; }
.hero.is-document-scroll .hero__about-copy p { margin-top:24px; }
.hero.is-document-scroll .hero__about-link { top:62%; }
.hero.is-document-scroll .hero__about-building { bottom:6%; }

/* Shorten the line-only entrance before the festival heading. */
.hero.is-document-scroll .hero__canvas { height:15svh; }

/* A single trapezoid spans the whole vertical introduction, without a join. */
.hero.is-line-scene.is-document-scroll { position:relative; isolation:isolate; }
.hero.is-line-scene.is-document-scroll::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; clip-path:polygon(calc(50% - 90px) 0,calc(50% + 90px) 0,100% 100%,0 100%); background-image:linear-gradient(#82fcc7,#82fcc7); background-repeat:no-repeat; background-position:center top; background-size:100% 0%; animation:single-ribbon-extend 1.2s cubic-bezier(.4,0,.2,1) .35s both; }
@keyframes single-ribbon-extend { from { background-size:100% 0%; } to { background-size:100% 100%; } }
.hero.is-line-scene.is-document-scroll .hero__descending-line, .hero.is-line-scene.is-document-scroll .hero__about-road { display:none; }
.hero.is-document-scroll > .hero__about { margin-top:0; }
.hero.is-restored.is-line-scene.is-document-scroll::after { animation:none; background-size:100% 100%; }
@media(prefers-reduced-motion:reduce) { .hero.is-line-scene.is-document-scroll::after { animation:none; background-size:100% 100%; } }

/* Use the supplied outlined title and vertical description artwork. */
.hero__about-title-svg { display:block; width:clamp(320px,43vw,650px); height:auto; margin:0 auto; }
.hero__about-description-svg { display:block; width:auto; height:clamp(300px,38svh,390px); margin:24px auto 0; }

.hero__about-arrow { margin-top:18px; }
.hero__about-description-svg { margin-top:34px; }

/* Trace supplied SVG typography when it enters view. */
.about-art-path { fill-opacity:0; stroke-dasharray:1; stroke-dashoffset:1; stroke-linejoin:round; }
.about-art.is-art-visible .about-art-path { animation:about-art-draw .75s ease both,about-art-fill .3s ease .65s both; }
@keyframes about-art-draw { to { stroke-dashoffset:0; } }
@keyframes about-art-fill { from { fill-opacity:0; stroke-opacity:1; } to { fill-opacity:1; stroke-opacity:0; } }
.festival-continuation { display:none; position:relative; background:transparent; padding-top:12svh; }
body.has-document-scroll .festival-continuation { display:block; }
.chairman-section, .access-section { padding:100px max(6vw,28px); }
.chairman-grid, .access-grid { max-width:1240px; margin:auto; display:grid; gap:48px; }
.chairman-grid { grid-template-columns:1fr 1fr; align-items:center; }
.chairman-title { grid-column:1/-1; font:900 clamp(36px,4vw,64px)/1.2 "Yu Gothic",sans-serif; margin:0 0 16px; }
.chairman-photo-wrap { margin:0; }
.chairman-photo { width:100%; max-height:480px; object-fit:contain; }
.chairman-caption { font:600 12px/1.8 "Yu Gothic",sans-serif; margin:18px 0 0; text-align:center; }
.chairman-message { font:600 clamp(15px,1.2vw,19px)/2.5 "Yu Gothic",sans-serif; margin:0; }
.access-section { border-top:1px solid #000; }
.access-grid { grid-template-columns:1.2fr 1fr; }
.access-title { font:900 clamp(36px,4vw,64px)/1.2 "Yu Gothic",sans-serif; margin:0 0 32px; }
.access-map { height:360px; border:2px solid #000; background:#eee; }
.access-map iframe { width:100%; height:100%; border:0; }
.access-info { font:600 14px/2 "Yu Gothic",sans-serif; }
.access-address { margin:0 0 20px; }
.access-lines { padding-left:20px; }
.access-walk { font-size:20px; font-weight:800; margin:24px 0; }
.access-photo { max-height:330px; width:100%; object-fit:contain; }
.festival-footer { position:relative; isolation:isolate; overflow:hidden; padding:64px max(6vw,28px) 24px; color:#fff; background:#000; }
.footer-score { position:absolute; left:0; right:0; bottom:72px; width:100%; height:clamp(110px,13vw,180px); overflow:hidden; filter:invert(1) grayscale(1) contrast(.86); opacity:.42; z-index:-1; pointer-events:none; }
.footer-score img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:auto; }
.footer-menu, .footer-bottom { max-width:1240px; margin:auto; }
.footer-menu nav a { display:flex; align-items:center; gap:24px; padding:20px 0; border-bottom:1px solid #666; color:inherit; text-decoration:none; }
.footer-menu nav strong { font:800 clamp(24px,2.5vw,40px)/1.4 "Yu Gothic",sans-serif; }
.footer-menu nav span { color:#82fcc7; font:700 14px/1 Arial; }
.footer-menu nav b { margin-left:auto; font-size:32px; color:#82fcc7; }
.score-details { margin-top:36px; max-width:700px; }
.score-details summary { cursor:pointer; display:flex; gap:24px; font:700 20px/1.5 "Yu Gothic",sans-serif; }
.score-details p { font:400 14px/2 "Yu Gothic",sans-serif; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:70px; font:500 11px/1.8 Arial,sans-serif; }
.footer-top-link { color:#82fcc7; text-decoration:none; font-weight:700; font-size:16px; }
@media(prefers-reduced-motion:reduce) { .about-art .about-art-path { animation:none !important; fill-opacity:1; stroke-opacity:0; } }

/* Match the supplied two-view festival introduction composition. */
.hero.is-document-scroll .hero__about-content { height:max(180svh,1500px); min-height:180svh; }
.hero.is-document-scroll .hero__about-copy { top:18%; }
.hero__about-title-svg { width:clamp(400px,39vw,680px); }
.hero__about-description-svg { height:358px; margin-top:40px; }
.hero__about-arrow { margin-top:6px; }
.hero.is-document-scroll .hero__about-link { top:68%; }
.hero__about-link a { background:#d9e3dc; border:0; padding:6px 12px; font-weight:500; font-size:clamp(25px,2.7vw,42px); }
.hero__about-link a span { display:none; }
.hero.is-document-scroll .hero__about-building { bottom:10svh; width:28%; height:90svh; max-height:none; object-fit:contain; object-position:center bottom; }
.hero__about-building--left { left:1%; }
.hero__about-building--right { right:1%; }
.hero.is-document-scroll .hero__about-crowd { bottom:0; height:43svh; width:100%; object-fit:fill; max-height:none; }

.hero__about-description-svg { height:394px; }

.hero__about-description-svg { height:430px; margin-top:32px; }
.hero__about-arrow { margin-top:32px; }

.hero.is-document-scroll .hero__about-crowd { height:auto; width:100%; max-height:none; object-fit:contain; }

/* Refined festival site button. */
.hero__about-link a { display:inline-flex; align-items:center; gap:30px; min-width:230px; justify-content:space-between; padding:19px 24px; background:#000; color:#82fcc7; border:2px solid #000; border-radius:0; font:800 clamp(20px,1.8vw,28px)/1.25 "Yu Gothic",sans-serif; letter-spacing:.08em; box-shadow:6px 6px 0 rgba(0,0,0,.18); }
.hero__about-link a span { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; font:400 25px/1 Arial,sans-serif; }
.hero__about-link small { display:inline-block; margin-top:13px; color:#000; font:700 11px/1.5 "Yu Gothic",sans-serif; letter-spacing:.18em; }
.hero__about-link a { transition:background .2s,color .2s,box-shadow .2s,translate .2s; cursor:pointer; }
.hero__about-link a:hover { background:#82fcc7; color:#000; translate:2px 2px; box-shadow:4px 4px 0 rgba(0,0,0,.18); }
.hero__about-link a:focus-visible { outline:3px solid #000; outline-offset:6px; }

.hero__about-link a span { display:none; }
.hero__about-link a { justify-content:center; gap:0; }

.hero__about-link a { box-shadow:0 6px 0 rgba(0,0,0,.18); }
.hero__about-link small { display:block; margin-top:20px; }
.hero__about-link a:hover { translate:0 2px; box-shadow:0 4px 0 rgba(0,0,0,.18); }

.hero.is-document-scroll .hero__about-crowd { bottom:-4svh; }

.hero.is-document-scroll .hero__about-crowd { bottom:-10svh; }

/* Reveal photographic collage pieces as they enter the viewport. */
.photo-reveal { clip-path:inset(100% 0 0 0); translate:0 28px; filter:blur(3px); }
.photo-reveal.is-photo-visible { animation:photo-unveil .95s cubic-bezier(.22,1,.36,1) both !important; }
.hero__about-building--right.photo-reveal.is-photo-visible { animation-delay:.12s !important; }
.hero__about-crowd.photo-reveal.is-photo-visible { animation-delay:0s !important; }
@keyframes photo-unveil { from { clip-path:inset(100% 0 0 0); translate:0 28px; filter:blur(3px); } to { clip-path:inset(0); translate:0 0; filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { .photo-reveal, .photo-reveal.is-photo-visible { animation:none !important; clip-path:inset(0); translate:0 0; filter:none; } }

/* Keep reveal targets measurable; clipping them before observation prevents entry detection. */
.photo-reveal { clip-path:none; translate:0 0; filter:none; }
.photo-reveal:not(.is-photo-visible) { opacity:0 !important; }
@keyframes photo-unveil { from { opacity:0; clip-path:inset(100% 0 0 0); translate:0 28px; filter:blur(3px); } to { opacity:1; clip-path:inset(0); translate:0 0; filter:blur(0); } }
@media(prefers-reduced-motion:reduce) { .photo-reveal:not(.is-photo-visible) { opacity:1 !important; } }
/* Tablet and phone layouts; desktop composition stays unchanged. */
@media(max-width:1024px) {
 .chairman-section,.access-section { padding:72px 5vw; }
 .chairman-grid,.access-grid { gap:32px; }
 .hero__logo-note { font-size:12px; line-height:1.7; }
 .hero__section-label { right:34px; top:20px; }
 .scroll-gauge { right:10px; }
 .hero__about-title-svg { width:min(80vw,600px); }
}
@media(max-width:767px) {
 html { overflow-x:clip; }
 .hero__canvas { touch-action:pan-y; }
 .hero__next { width:74%; height:34svh; }
 .hero__date { width:55%; bottom:calc(74vw * 438.2 / 978.5 + 2svh); }
 .hero__sphere { width:43%; top:47%; max-height:35svh; }
 .hero__hands { inset:calc(100vw * 184 / 1412 * .97) 17% 0 0; }
 .hero__hand--left { width:120%; left:-37%; top:7%; }
 .hero__hand--right { width:145%; left:22%; top:43%; }
 .hero__scroll { right:20%; top:calc(100vw * 184 / 1412 * .97 + 2svh); gap:6px; }
 .hero__scroll-label { font-size:10px; }
 .hero__scroll-track { height:54px; }
 .hero.is-detail .hero__sphere { width:60%; max-height:38svh; }
 .hero.is-detail .hero__sphere--anniversary { top:49%; }
 .hero.is-detail .hero__hand--left { width:145%; left:-69%; top:-7%; }
 .hero.is-detail .hero__hand--right { width:170%; left:44%; top:67%; }
 .hero.is-poster .hero__hand--left { top:-15%; }
 .hero.is-poster .hero__hand--right { top:76%; }
 .hero__theme-logo { width:72%; top:49%; }
 .hero__theme-line { top:49%; height:12px; margin-top:-6px; }
 .hero__poster { top:48%; height:43svh; max-width:62vw; }
 .hero__logo-note { font-size:clamp(10px,2.7vw,12px); line-height:1.6; letter-spacing:.03em; }
 .hero__logo-note--upper { top:11%; }
 .hero__logo-note--lower { bottom:7%; }
 .hero__logo-notes .hero__logo-note--upper,.hero__poster-notes .hero__logo-note--upper,.hero__theme-notes .hero__logo-note--upper { right:9%; }
 .hero__logo-notes .hero__logo-note--lower,.hero__poster-notes .hero__logo-note--lower,.hero__theme-notes .hero__logo-note--lower { left:7%; }
 .hero__section-label { top:max(16px,env(safe-area-inset-top)); right:28px; gap:4px; }
 .hero__section-label-en { font-size:15px; }
 .hero__section-label-ja { font-size:10px; }
 .scroll-gauge { right:6px; width:12px; height:32svh; }
 .gauge-meta { font-size:8px; }
 .hero.is-document-scroll .hero__canvas { height:12svh; }
 .hero.is-line-scene.is-document-scroll::after { clip-path:polygon(calc(50% - 34px) 0,calc(50% + 34px) 0,100% 100%,0 100%); }
 .hero.is-document-scroll .hero__about-content { min-height:1250px; height:max(170svh,1250px); }
 .hero.is-document-scroll .hero__about-copy { top:9%; width:92%; }
 .hero__about-title-svg { width:90%; max-width:550px; }
 .hero__about-description-svg { height:360px; margin-top:24px; }
 .hero__about-arrow { margin-top:24px; }
 .hero.is-document-scroll .hero__about-link { top:64%; width:90%; }
 .hero__about-link a { min-width:210px; padding:17px 20px; font-size:20px; }
 .hero.is-document-scroll .hero__about-building { width:33%; height:52svh; bottom:8svh; }
 .hero.is-document-scroll .hero__about-crowd { width:150%; max-width:none; left:50%; transform:translateX(-50%); bottom:-4svh; }
 .festival-continuation { padding-top:12svh; }
 .chairman-section,.access-section { padding:64px 24px; }
 .chairman-grid,.access-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 .chairman-title,.access-title { font-size:32px; margin-bottom:8px; }
 .chairman-photo { max-height:340px; }
 .chairman-message { font-size:15px; line-height:2.2; }
 .access-map { height:300px; }
 .access-info { font-size:13px; overflow-wrap:anywhere; }
 .access-walk { font-size:18px; }
 .access-photo { max-height:280px; }
 .festival-footer { padding:40px 24px max(24px,env(safe-area-inset-bottom)); }
 .footer-menu nav a { gap:16px; min-height:64px; }
 .footer-menu nav strong { font-size:22px; }
 .footer-menu nav b { font-size:26px; }
 .score-details summary { font-size:18px; }
 .score-details p { font-size:13px; }
 .footer-score { bottom:74px; height:115px; }
 .footer-score img { width:160%; left:-30%; }
 .footer-bottom { margin-top:64px; gap:16px; align-items:flex-end; }
 .footer-bottom p { max-width:65%; font-size:9px; }
 .footer-top-link { min-height:44px; display:flex; align-items:center; }
}
@media(max-width:1024px) and (max-height:520px) and (orientation:landscape) {
 .hero__logo-note { font-size:10px; line-height:1.5; }
 .hero__section-label { top:10px; }
 .hero__poster { height:66svh; max-width:35vw; }
 .hero__theme-logo { width:40%; }
 .hero.is-detail .hero__sphere { width:32%; }
 .hero__logo-note--upper { top:18%; }
 .hero__logo-note--lower { bottom:5%; }
}


/* Reference layout for the chairman, access, and footer. */
.chairman-title { grid-column:auto; }
.chairman-photo { max-height:none; }
.chairman-message { font-weight:400; letter-spacing:normal; }
.access-section { border-top:0; }
.access-map { height:auto; border:0; background:#eee; }
.access-info { font-weight:400; }
.access-photo { max-height:none; }
.footer-menu,.footer-bottom { max-width:none; width:100%; margin-inline:0; }
.footer-menu nav a { padding:0; gap:0; }
.footer-menu nav strong { font-weight:700; line-height:1.4; }
.footer-menu nav b { margin-left:0; color:inherit; }
.score-details { margin-top:0; max-width:none; }
.score-details summary { font-weight:400; gap:0; }
.footer-bottom { gap:0; }
.footer-bottom p { max-width:none; font-size:inherit; }
.footer-top-link { min-height:0; font-size:inherit; display:inline; }
.chairman-section {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 6svh 12vw 8svh;
  box-sizing: border-box;
}

.chairman-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5vw;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.chairman-title {
  flex: 0 0 auto;
  order: 4;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: .1em;
  color: #000;
}

.chairman-photo-wrap {
  order: 3;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
}

.chairman-photo {
  position: relative;
  z-index: 10000;
  width: clamp(160px, 20vw, 260px);
  height: auto;
  object-fit: contain;
}

.chairman-caption {
  order: 0;
  flex: 0 0 auto;
  margin: 0;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  text-align: center;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.6;
  color: #000;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.chairman-message {
  order: 1;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 480px;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 2.4;
  color: #000;
  height: 34em;
}

.access-section {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 6svh 8vw 8svh;
  box-sizing: border-box;
}

.access-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6vw;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.access-left {
  flex: 0 1 min(760px, calc(78vw - 340px));
  min-width: 320px;
}

.access-title {
  margin: 0 0 .6em;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: .04em;
  color: #000;
}

.access-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: min(760px, calc(78vw - 340px));
  overflow: hidden;
  z-index: 10000;
}

.access-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.access-right {
  position: relative;
  flex: 0 1 320px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
}

.access-info {
  padding-top: calc(clamp(28px, 3.4vw, 48px) * 2.05);
}

.access-address {
  margin: 0 0 1.2em;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.6;
  color: #000;
}

.access-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-lines li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: .5em;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #000;
}

.access-lines li::before {
  content: '●';
  position: absolute;
  left: 0;
  font-size: .7em;
  top: .3em;
}

.access-walk {
  margin: 1em 0 2.4em;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #000;
}

.access-photo {
  position: static;
  align-self: flex-start;
  margin-top: auto;
  width: 55%;
  min-width: 110px;
  max-width: 300px;
  height: auto;
  z-index: 10000;
}

.festival-footer {
  --gold: #c8a85d;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
  overflow: hidden;
  padding: 28px clamp(24px, 5vw, 76px) 22px;
  color: #fff;
  background: #000;
  box-sizing: border-box;
}


.footer-menu { margin-top: 24px; }
.festival-footer nav { border-top: 1px solid rgba(255, 255, 255, .45); }
.festival-footer nav a {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: color .2s, padding .2s;
  color: #fff;
  text-decoration: none;
}
.festival-footer nav a:hover { padding-left: 8px; color: #c8a85d; }
.festival-footer nav a span { color: #c8a85d; font-size: 11px; letter-spacing: .12em; }
.festival-footer nav a strong,
.festival-footer summary strong { font-size: 15px; letter-spacing: .08em; }
.festival-footer nav a b { font-size: 20px; font-weight: 400; }

.score-details { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.festival-footer summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 64px;
  cursor: pointer;
  list-style: none;
  color: #fff;
}
.festival-footer summary::-webkit-details-marker { display: none; }
.festival-footer summary:hover { color: #c8a85d; }
.festival-footer summary span { font-size: 20px; transition: transform .2s; }
.score-details[open] summary span { transform: rotate(180deg); }
.score-details p {
  max-width: 650px;
  margin: 0;
  padding: 4px 40px 24px 0;
  color: rgba(255, 255, 255, .65);
  font-size: 14px;
  line-height: 1.9;
}

.footer-bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .45);
  font-size: 11px;
  letter-spacing: .18em;
  color: #fff;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { position: absolute; right: 0; color: #c8a85d; text-decoration: none; }

@media (max-width: 720px) {
  .festival-footer { min-height: auto; padding-bottom: 22px; }
    .footer-bottom { padding-right: 48px; padding-left: 48px; text-align: center; font-size: 9px; }
}



@media(max-width:700px) {
 .chairman-section { padding:6svh 6vw 8svh; }
 .chairman-grid { flex-direction:column; align-items:center; gap:4svh; }
 .chairman-title { order:1; }
 .chairman-photo-wrap { order:2; width:55vw; }
 .chairman-photo { width:100%; }
 .chairman-message { order:4; flex:none; max-width:100%; height:22em; }
 .access-section { padding:6svh 4vw 8svh; }
 .access-info { padding-top:0; overflow-wrap:normal; }
 .access-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); grid-template-areas:"title title" "info info" "map photo"; align-items:start; gap:4vw; }
 .access-left,.access-right { display:contents; }
 .access-title { grid-area:title; }
 .access-info { grid-area:info; }
 .access-map { grid-area:map; max-width:none; width:100%; }
 .access-photo { grid-area:photo; position:static; align-self:start; justify-self:start; margin-top:0; width:90%; max-width:none; min-width:0; }
}
@media(max-width:720px) {
 .footer-bottom p { font-size:9px; }
 .footer-score { bottom:74px; height:115px; }
 .footer-score img { width:160%; left:-30%; }
}


/* Only the right thumb crosses in front of the sphere. */
.hero__sphere-hands .hero__hand--right { clip-path:polygon(19% 50%,21% 40%,28% 30%,33% 15%,37% 3%,43% 1%,47% 10%,48% 28%,43% 47%,35% 62%,28% 73%,23% 74%,20% 67%); }
@media(max-width:767px) {
 .hero__canvas { --orb-y:47%; --orb-rx:calc(min(43vw,35svh * 330 / 331) / 2); --orb-ry:calc(min(43vw * 331 / 330,35svh) / 2); }
}
/* Size safeguards shared across changing viewport dimensions. */
.festival-continuation *, .hero__about-content { min-width:0; }
.hero__about-title-svg { max-width:100%; }
.footer-menu a:focus-visible, .score-details summary:focus-visible { outline:2px solid #82fcc7; outline-offset:4px; }
@media(min-width:768px) and (max-aspect-ratio:4/3) {
 .hero__sphere { width:34%; max-height:36svh; top:52%; }
 .hero__canvas { --orb-y:52%; --orb-rx:calc(min(34vw,36svh * 330 / 331) / 2); --orb-ry:calc(min(34vw * 331 / 330,36svh) / 2); }
 .hero.is-detail .hero__sphere { width:48%; max-height:44svh; }
 .hero.is-detail .hero__sphere--anniversary { top:50%; }
 .hero__theme-logo { width:58%; top:50%; }
 .hero__theme-line { top:50%; }
 .hero__poster { height:56svh; max-width:54vw; top:50%; }
 .hero__logo-note { font-size:clamp(12px,1.6vw,15px); }
 .hero__logo-note--upper { top:11%; }
 .hero__logo-note--lower { bottom:8%; }
 .hero.is-detail .hero__hand--left { left:-48%; top:-25%; }
 .hero.is-detail .hero__hand--right { left:48%; top:66%; }
 .hero.is-poster .hero__hand--left { top:-36%; }
 .hero.is-poster .hero__hand--right { top:75%; }
}
@media(max-width:767px) {
 .hero__next { height:min(34svh,calc(74vw * 438.2 / 978.5)); }
 .hero__date { bottom:calc(min(34svh,74vw * 438.2 / 978.5) + 2svh); }
 .hero__hand-inversion--next { mask-size:min(74vw,calc(34svh * 978.5 / 438.2)) auto; -webkit-mask-size:min(74vw,calc(34svh * 978.5 / 438.2)) auto; }
 .hero__hand-inversion--date { mask-size:55vw auto; -webkit-mask-size:55vw auto; mask-position:left 0 bottom calc(min(34svh,74vw * 438.2 / 978.5) + 2svh); -webkit-mask-position:left 0 bottom calc(min(34svh,74vw * 438.2 / 978.5) + 2svh); }
 .hero__logo-note { max-height:25svh; }
 .hero__about-link a { max-width:100%; }
 .footer-menu nav a { grid-template-columns:36px minmax(0,1fr) auto; }
 .footer-menu nav strong { overflow-wrap:anywhere; }
}
@media(max-width:380px) {
 .hero__logo-note { font-size:10px; line-height:1.5; }
 .hero__logo-note--upper { top:12%; }
 .hero__logo-note--lower { bottom:6%; }
 .hero__section-label-en { font-size:13px; }
 .hero__poster { max-width:58vw; height:40svh; }
 .chairman-message { font-size:14px; line-height:2; }
 .chairman-caption { font-size:12px; }
 .access-lines li { font-size:14px; }
 .footer-bottom { padding-inline:26px; letter-spacing:.08em; }
}
/* Short screens reserve distinct side lanes for copy and center artwork. */
@media(max-height:600px) and (min-aspect-ratio:4/3) {
 .hero__logo-note { font-size:clamp(9px,1.4svh,12px); line-height:1.55; max-height:66svh; }
 .hero__logo-note--upper { top:20%; }
 .hero__logo-note--lower { bottom:7%; }
 .hero__section-label { top:12px; }
 .hero__section-label-en { font-size:14px; }
 .hero__section-label-ja { font-size:9px; }
 .hero__theme-logo { width:40%; top:53%; }
 .hero__theme-line { top:53%; }
 .hero__poster { height:62svh; max-width:36vw; top:53%; }
 .hero.is-detail .hero__sphere { width:32%; max-height:54svh; }
 .hero.is-detail .hero__sphere--anniversary { top:53%; }
 .hero__logo-notes .hero__logo-note--upper,.hero__poster-notes .hero__logo-note--upper,.hero__theme-notes .hero__logo-note--upper { right:9%; }
 .hero__logo-notes .hero__logo-note--lower,.hero__poster-notes .hero__logo-note--lower,.hero__theme-notes .hero__logo-note--lower { left:6%; }
 .scroll-gauge { height:54svh; }
}
@media(min-width:768px) and (max-height:600px) {
 .hero.is-document-scroll .hero__about-content { height:max(180svh,1250px); min-height:1250px; }
 .hero.is-document-scroll .hero__about-copy { top:10%; }
 .hero__about-description-svg { height:360px; }
 .hero.is-document-scroll .hero__about-link { top:67%; }
}

/* Faster entrances for the crowd and buildings, preserving their order. */
.hero__about-crowd.photo-reveal.is-photo-visible,
.hero__about-building.photo-reveal.is-photo-visible { animation-duration:.6s !important; }
.hero__about-building--right.photo-reveal.is-photo-visible { animation-delay:.08s !important; }

/* Keep the shared background visible through the lower content sections. */
.chairman-section, .access-section { background:transparent; }

/* Countdown uses the same opening time and format as the reference site. */
.hero__countdown { position:absolute; z-index:5; left:50%; top:calc(var(--orb-y,57.5%) + var(--orb-float,0px)); width:calc(var(--orb-rx) * 1.56); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; color:#fff; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.85); font-family:Arial,sans-serif; font-variant-numeric:tabular-nums; pointer-events:none; transition:opacity .3s,visibility .3s; }
.hero__countdown-value { display:block; font-size:calc(var(--orb-rx) * .28); line-height:1; letter-spacing:.025em; font-weight:400; white-space:nowrap; }
.hero__countdown-label { display:block; margin-top:.55em; font-size:clamp(9px,.95vw,13px); line-height:1; letter-spacing:.16em; opacity:.78; white-space:nowrap; }
.hero.is-detail .hero__countdown { opacity:0; visibility:hidden; }
@media(max-width:767px) { .hero__countdown-label { font-size:clamp(7px,2vw,10px); letter-spacing:.09em; } }

/* Fine typography and dividers echo the teaser's line artwork. */
.hero__countdown { width:calc(var(--orb-rx) * 1.78); gap:calc(var(--orb-rx) * .055); text-shadow:0 1px 5px rgba(0,0,0,.9); }
.hero__countdown-heading { display:block; color:#b8ffe2; font:600 clamp(7px,.7vw,10px)/1.2 Arial,sans-serif; letter-spacing:.2em; white-space:nowrap; }
.hero__countdown-value { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; padding:calc(var(--orb-rx) * .06) 0; border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.35); letter-spacing:0; }
.countdown-unit { position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(var(--orb-rx) * .025); min-width:0; }
.countdown-unit + .countdown-unit::before { content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.25); }
.countdown-number { font:300 calc(var(--orb-rx) * .27)/1 Arial,sans-serif; letter-spacing:-.045em; }
.countdown-unit-label { font:500 clamp(6px,.6vw,9px)/1.2 Arial,sans-serif; letter-spacing:.12em; opacity:.7; }
.hero__countdown-label { margin-top:0; font-size:clamp(7px,.65vw,10px); letter-spacing:.12em; opacity:.8; }
.hero__countdown.is-open .hero__countdown-value { display:block; font-size:calc(var(--orb-rx) * .3); letter-spacing:.1em; }
@media(max-width:767px) { .hero__countdown-heading { font-size:clamp(7px,1.8vw,9px); } .countdown-unit-label { font-size:clamp(6px,1.6vw,8px); } .hero__countdown-label { font-size:clamp(7px,1.8vw,9px); } }

/* Reveal the arrow only after the festival heading has been drawn. */
.hero__about-arrow { opacity:0; visibility:hidden; }
.hero.is-document-scroll .hero__about-copy:has(.hero__about-title-svg.is-art-visible) .hero__about-arrow { visibility:visible; animation:about-arrow-enter .3s ease 1s both; }
.hero:not(.is-document-scroll) .hero__about-arrow { opacity:0 !important; visibility:hidden !important; animation:none !important; }
@keyframes about-arrow-enter { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:reduce) { .hero.is-document-scroll .hero__about-copy:has(.hero__about-title-svg.is-art-visible) .hero__about-arrow { animation:none; opacity:1; } }
/* Phone opening composition follows the supplied reference screenshot. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__canvas { background:transparent; --orb-x:49%; --orb-y:50.5%; --orb-rx:calc(min(50vw,34svh * 330 / 331) / 2); --orb-ry:calc(min(50vw * 331 / 330,34svh) / 2); }
 .hero:not(.is-detail) .hero__canvas::before,.hero:not(.is-detail) .hero__canvas::after { display:none; }
 .hero:not(.is-detail) .hero__title { top:0; background:transparent; }
 .hero:not(.is-detail) .hero__next { left:0; top:8%; bottom:auto; width:100%; height:19svh; }
 .hero:not(.is-detail) .hero__copy { top:27%; right:0; bottom:auto; width:22%; height:33svh; }
 .hero:not(.is-detail) .hero__copy::before { display:none; }
 .hero:not(.is-detail) .hero__sphere { left:49%; top:50.5%; width:50%; max-height:34svh; }
 .hero:not(.is-detail) .hero__hands { inset:0; }
 .hero:not(.is-detail) .hero__hand--left { width:106%; left:-36%; top:24%; }
 .hero:not(.is-detail) .hero__hand--right { width:145%; left:16%; top:55%; }
 .hero:not(.is-detail) .hero__blend-hands { filter:none; mix-blend-mode:normal; }
 .hero:not(.is-detail) .hero__date { left:1%; top:73%; bottom:auto; width:78%; }
 .hero:not(.is-detail) .hero__countdown { left:49%; }
 .hero:not(.is-detail) .hero__scroll { top:auto; right:6%; bottom:max(20px,env(safe-area-inset-bottom)); }
 .hero:not(.is-detail) .hero__hand-inversion--next { mask-size:100vw 19svh; -webkit-mask-size:100vw 19svh; mask-position:left top 8svh; -webkit-mask-position:left top 8svh; }
 .hero:not(.is-detail) .hero__hand-inversion--date { mask-size:78vw auto; -webkit-mask-size:78vw auto; mask-position:left 1vw top 73svh; -webkit-mask-position:left 1vw top 73svh; }
}

/* Black typography and original artwork proportions on the phone opening. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__title { height:calc(100vw * 184 / 1412); }
 .hero:not(.is-detail) .hero__title img { filter:none; transform:none; }
 .hero:not(.is-detail) .hero__title .hero__letter-trace { color:#000; transform:none; }
 .hero:not(.is-detail) .hero__title-texture { filter:brightness(0); transform:none; }
 .hero:not(.is-detail) .hero__copy { height:auto; aspect-ratio:223 / 617; }
 .hero:not(.is-detail) .hero__copy-art .copy-letter { fill:#000; stroke:#000; }
 .hero:not(.is-detail) .hero__copy img { filter:none; object-fit:contain; }
 .hero:not(.is-detail) .hero__next { height:auto; aspect-ratio:978.5 / 438.2; }
}

/* Sequence the lower intro: heading, arrow, then description. */
.hero__about-arrow { opacity:0; visibility:hidden; }
.hero__about-description-svg { opacity:0; visibility:hidden; }
.hero.is-document-scroll .hero__about-copy:has(.hero__about-title-svg.is-art-visible) .hero__about-arrow { visibility:visible; animation:about-arrow-enter .3s ease 1s both; }
.hero.is-document-scroll .hero__about-copy:has(.hero__about-description-svg.is-art-visible) .hero__about-description-svg { visibility:visible; animation:about-copy-enter .35s ease both; }
@keyframes about-copy-enter { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }
/* Phone opening keeps the black bands and white text without distorting SVG artwork. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__canvas { background:#fff; }
 .hero:not(.is-detail) .hero__canvas::before { display:block; height:calc(100vw * 184 / 1412); background:#000; }
 .hero:not(.is-detail) .hero__canvas::after { display:block; top:calc(100vw * 184 / 1412); bottom:0; width:22%; background:#000; }
 .hero:not(.is-detail) .hero__title { background:#000; height:calc(100vw * 184 / 1412); }
 .hero:not(.is-detail) .hero__title img { filter:invert(1); transform:none; }
 .hero:not(.is-detail) .hero__title .hero__letter-trace { color:#fff; }
 .hero:not(.is-detail) .hero__title-texture { filter:invert(1); }
 .hero:not(.is-detail) .hero__copy::before { display:block; background:#000; }
 .hero:not(.is-detail) .hero__copy-art .copy-letter { fill:#fff; stroke:#fff; }
 .hero:not(.is-detail) .hero__copy img { filter:invert(1); }
}

/* Stable phone-first composition: each hand uses one shared animated layer. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__canvas::before,
 .hero:not(.is-detail) .hero__canvas::after { display:none; }
 .hero:not(.is-detail) .hero__title { height:calc(100vw * 184 / 1412); background:#000; overflow:hidden; }
 .hero:not(.is-detail) .hero__copy { background:#000; overflow:hidden; }
 .hero:not(.is-detail) .hero__copy::before { display:none; }
 .hero:not(.is-detail) .hero__hand-inversion,
 .hero:not(.is-detail) .hero__blend-hands,
 .hero:not(.is-detail) .hero__sphere-hands { display:none; }
 .hero:not(.is-detail) .hero__canvas > .hero__hands { display:block; filter:none; mix-blend-mode:normal; z-index:1; }
 .hero:not(.is-detail) .hero__sphere { z-index:2; }
 .hero:not(.is-detail) .hero__countdown { z-index:3; }
 .hero:not(.is-detail) .hero__title,
 .hero:not(.is-detail) .hero__copy,
 .hero:not(.is-detail) .hero__next,
 .hero:not(.is-detail) .hero__date { z-index:4; }
 .hero:not(.is-detail) .hero__hand--left { transform-origin:center; }
 .hero:not(.is-detail) .hero__hand--right { transform-origin:85% 50%; }
}

/* Restore the original layered hand treatment on the phone opening. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__hand-inversion,
 .hero:not(.is-detail) .hero__blend-hands,
 .hero:not(.is-detail) .hero__sphere-hands { display:block; }
 .hero:not(.is-detail) .hero__canvas > .hero__hands { filter:invert(1); mix-blend-mode:difference; z-index:4; }
 .hero:not(.is-detail) .hero__blend-hands { filter:invert(1); mix-blend-mode:difference; z-index:4; }
 .hero:not(.is-detail) .hero__sphere-hands { z-index:4; }
 .hero:not(.is-detail) .hero__copy { top:32%; }
}

/* Final phone fixes: remove the stray top strip and lower the 80th copy. */
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__canvas::before { display:none !important; }
 .hero:not(.is-detail) .hero__title { top:0; background:#000; }
 .hero:not(.is-detail) .hero__copy { top:36% !important; }
}

/* Mobile correction: single festival-title artwork layer; invert hands only over the 80th-anniversary black panel. */ @media(max-width:767px) and (orientation:portrait) { .hero:not(.is-detail) .hero__canvas::before { display:none !important; } .hero:not(.is-detail) .hero__title { background:transparent !important; z-index:5 !important; } .hero:not(.is-detail) .hero__title > img { position:relative; z-index:2; filter:none !important; } .hero:not(.is-detail) .hero__title .hero__letter-trace { display:none !important; } .hero:not(.is-detail) .hero__title-texture { z-index:1; filter:none !important; } .hero:not(.is-detail) .hero__canvas::after { display:block !important; top:36%; right:0; bottom:auto; width:22%; height:auto; aspect-ratio:223 / 617; z-index:2; } .hero:not(.is-detail) .hero__copy { background:transparent !important; z-index:6 !important; } .hero:not(.is-detail) .hero__blend-hands { clip-path:inset(36% 0 24% 78%); filter:invert(1); mix-blend-mode:difference; z-index:5 !important; } .hero.is-poster .hero__poster-stars { display:none !important; } }

/* Stylesheet block 2 */
.hero__about-building { scale:1.5; }
.hero__about-building--left { transform-origin:left bottom; transform:translate(-20%,15%); }
.hero__about-building--right { transform-origin:right bottom; transform:translate(20%,15%); }
.hero:not(.is-detail) .hero__hand--left { margin-top:-2svh; }
.hero:not(.is-detail) .hero__hand--right { margin-top:2svh; }
@media(max-width:767px) and (orientation:portrait) {
  .hero:not(.is-detail) .hero__date { top:auto !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; }
  .hero:not(.is-detail) .hero__title-texture { display:none !important; }
  /* This is the full hand layer outside the sphere, not an inversion-only clone. */
  .hero:not(.is-detail) .hero__blend-hands { clip-path:none !important; }
}

/* Stylesheet block 3 */
.cls-1 {
        fill: #1f2a66;
      }

      .cls-2 {
        fill: none;
        stroke: #1f2a66;
        stroke-miterlimit: 10;
        stroke-width: .71px;
      }

/* Restore the safe margin ornaments, including on phones. */
.hero.is-poster .hero__poster-stars { display:block !important; }

/* Responsive safeguards: artwork keeps its proportions; content owns its height. */
html { overflow-x:clip; }
.site-background { width:100%; height:100lvh; }
.hero__canvas {
 --orb-size:min(25.2vw,47.25svh * 330 / 331);
 --orb-x:50%; --orb-y:57.5%;
 --orb-rx:calc(var(--orb-size) / 2);
 --orb-ry:calc(var(--orb-size) * 331 / 330 / 2);
}
.hero:not(.is-detail) .hero__sphere { left:var(--orb-x); top:var(--orb-y); width:var(--orb-size); max-height:none; }
.hero:not(.is-detail) .hero__countdown { left:var(--orb-x); }
.hero__logo-note { max-height:none; }
.hero__section-label { max-width:calc(100% - 56px); }
.hero__section-label-en { overflow-wrap:anywhere; }
.hero__theme-logo { max-width:calc(100% - 80px); }
.hero.is-document-scroll .hero__about-content {
 display:flex; flex-direction:column; align-items:center;
 height:auto; min-height:max(1250px,155svh);
 padding:clamp(80px,10svh,140px) 0 clamp(320px,42vw,560px);
 gap:clamp(64px,8svh,100px);
}
.hero.is-document-scroll .hero__about-copy {
 position:relative; top:auto; left:auto; transform:none;
 width:min(92%,760px); flex:none;
}
.hero.is-document-scroll .hero__about-link {
 position:relative; top:auto; left:auto; transform:none;
 width:min(90%,520px); flex:none;
}
.hero__about-title-svg { width:min(100%,680px); }
.hero__about-description-svg { max-width:100%; object-fit:contain; }
.hero__about-link a { max-width:100%; min-width:0; overflow-wrap:anywhere; }
.festival-continuation { padding-top:clamp(96px,14svh,180px); }
.chairman-message { max-width:100%; }
.access-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.access-left,.access-right { min-width:0; }
.access-map { max-width:100%; }
.access-info { overflow-wrap:anywhere; }
.footer-bottom { padding-inline:0; flex-wrap:wrap; gap:16px 32px; }
.footer-bottom p { min-width:0; overflow-wrap:anywhere; text-align:center; }
.footer-bottom a { position:static; flex:none; min-height:44px; display:flex; align-items:center; }
.festival-footer nav a { grid-template-columns:36px minmax(0,1fr) auto; gap:12px; }
.festival-footer nav strong { overflow-wrap:anywhere; }

@media(min-width:768px) and (max-aspect-ratio:4/3) {
 .hero:not(.is-detail) .hero__canvas { --orb-size:min(34vw,36svh * 330 / 331); --orb-y:52%; }
}
@media(max-width:767px) and (orientation:portrait) {
 .hero:not(.is-detail) .hero__canvas {
  --orb-size:min(50vw,28svh * 330 / 331);
  --orb-x:49%; --orb-y:50.5%;
  --orb-rx:calc(var(--orb-size) / 2);
  --orb-ry:calc(var(--orb-size) * 331 / 330 / 2);
 }
 .hero:not(.is-detail) .hero__next { top:max(8%,calc(100vw * 184 / 1412 + 8px)); width:min(100%,58svh); }
 /* Match the desktop left/right visual scale while keeping the fingertips anchored. */
 .hero:not(.is-detail) .hero__hand--left {
  width:calc(var(--orb-size) * 2.4);
  left:calc(var(--orb-x) - var(--orb-size) * 1.972);
  top:calc(var(--orb-y) - var(--orb-size) * 1.184);
 }
 .hero:not(.is-detail) .hero__hand--right {
  width:calc(var(--orb-size) * 2.9);
  left:calc(var(--orb-x) - var(--orb-size) * .66);
  top:calc(var(--orb-y) + var(--orb-size) * .195);
 }
 .hero:not(.is-detail) .hero__date { width:min(78%,58svh); }
 .hero:not(.is-detail) .hero__copy { width:min(22%,23svh); }
 .hero:not(.is-detail) .hero__canvas::after { width:min(22%,23svh) !important; }
 .hero:not(.is-detail) .hero__scroll { bottom:max(20px,env(safe-area-inset-bottom)); }
 .hero__theme-logo { width:62%; }
 .hero__logo-note { font-size:clamp(10px,2.6vw,12px); line-height:1.6; height:min(16svh,140px); max-width:88%; }
 .hero__logo-note--upper { top:max(68px,10svh); }
 .hero__logo-note--lower { bottom:max(24px,7svh); }
 .hero__logo-notes .hero__logo-note--upper,.hero__poster-notes .hero__logo-note--upper,.hero__theme-notes .hero__logo-note--upper { right:7%; }
 .hero__logo-notes .hero__logo-note--lower,.hero__poster-notes .hero__logo-note--lower,.hero__theme-notes .hero__logo-note--lower { left:5%; }
 .hero__poster { top:50.5%; max-width:52vw; height:min(36svh,72vw); }
}
@media(max-width:700px) {
 .chairman-message { flex:none; height:34em; max-width:100%; }
 .chairman-photo-wrap { width:min(55vw,260px); }
 .access-grid { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
 .access-photo { min-width:0; }
 .access-address { font-size:clamp(14px,3.8vw,18px); }
 .footer-bottom p { max-width:100%; }
}
@media(max-height:600px) and (orientation:landscape) {
 .hero__logo-note {
  writing-mode:vertical-rl; text-orientation:upright; width:auto; max-width:none; height:66svh;
  font-size:clamp(9px,2.6svh,12px); line-height:1.6;
 }
 /* Keep the 80th-anniversary explanation vertical on short screens too. */
 .hero__logo-notes .hero__logo-note {
  writing-mode:vertical-rl; text-orientation:upright;
  width:auto; max-width:none; height:66svh;
 }
 .hero__logo-note--upper { top:24%; }
 .hero__logo-note--lower { bottom:7%; }
 .hero__theme-logo { width:36%; }
 .hero__theme-line { height:12px; margin-top:-6px; }
 .hero__section-label { top:max(10px,env(safe-area-inset-top)); }
 .hero__poster { height:62svh; max-width:32vw; }
}

/* Keep the original SVG sizes; only the hands adapt to ultra-wide openings. */
@media(min-aspect-ratio:2/1) {
 .hero:not(.is-detail) .hero__hands { inset:0; }
 .hero:not(.is-detail) .hero__hand--left { width:calc(var(--orb-size) * 2.6); left:calc(50% - var(--orb-size) * 2.15); top:calc(var(--orb-y) - var(--orb-size) * 1.52); }
 .hero:not(.is-detail) .hero__hand--right { width:calc(var(--orb-size) * 3.14); left:calc(50% - var(--orb-size) * .56); top:calc(var(--orb-y) + var(--orb-size) * .085); }
}

/* Blend the explanation group with the hands beneath it, including during motion. */
.hero__logo-notes,
.hero__theme-notes,
.hero__poster-notes { mix-blend-mode:difference; }
.hero__logo-notes .hero__logo-note,
.hero__theme-notes .hero__logo-note,
.hero__poster-notes .hero__logo-note { color:#fff; }

/* Reveal the main-site button when its own position enters the viewport. */
.hero.is-document-scroll .hero__about-link:not(.is-button-visible) { opacity:0; translate:0 24px; }
.hero.is-document-scroll .hero__about-link.is-button-visible { animation:main-site-button-enter .6s cubic-bezier(.22,1,.36,1) both; }
.hero__about-link.is-button-visible small { animation:main-site-button-enter .45s ease .15s both; }
@keyframes main-site-button-enter { from { opacity:0; translate:0 24px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:reduce) {
 .hero.is-document-scroll .hero__about-link { opacity:1 !important; translate:0 0; animation:none !important; }
 .hero__about-link.is-button-visible small { animation:none; }
}

/* Use one sphere-relative position for both desktop hand layers, even in narrow windows. */
@media(hover:hover) and (pointer:fine) {
 .hero:not(.is-detail) .hero__hand--left {
  width:var(--left-hand-width,calc(var(--orb-size) * 2.6));
  left:var(--left-hand-x,-5%); top:var(--left-hand-y,-28%);
  margin-top:0; margin-left:0; transition:none;
 }
}
@media(min-width:768px) and (hover:hover) and (pointer:fine) {
 .hero.is-detail .hero__hand--left { margin-top:3svh; }
}

/* Keep fingertips visible in the upper-left of all desktop detail scenes. */
@media(hover:hover) and (pointer:fine) {
 .hero.is-detail .hero__canvas { --detail-hand-size:calc(100vw * .8368 * 1.118865825); }
 .hero.is-detail .hero__hand--left {
  width:var(--detail-hand-size);
  left:calc(var(--detail-hand-size) * -.45);
  top:calc(var(--detail-hand-size) * -.15 - 100vw * 184 / 1412 * .97);
  margin-top:0; margin-left:0;
 }
 .hero.is-poster .hero__hand--left {
  top:calc(var(--detail-hand-size) * -.22 - 100vw * 184 / 1412 * .97);
 }
}

/* Supplied SVG headings for the logo, theme, and poster scenes. */
.hero__section-label-en[hidden] { display:none; }
.hero__section-label-ja { display:block; max-width:100%; }
.hero__section-label-ja img { display:block; width:clamp(180px,20vw,280px); max-width:100%; height:auto; }
@media(max-width:767px) {
 .hero__section-label-ja img { width:190px; max-width:65vw; }
}

/* Frame the supplied poster without its white side margins. */
.hero__poster { aspect-ratio:486 / 683; object-fit:cover; object-position:center; }

/* Historical context below the introduction photo collage. */
.hero__history-caption { position:relative; z-index:5; padding:max(80px,12svh) 24px 36px; color:#000; text-align:center; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.9; }
.hero__history-caption p { margin:0; font-size:clamp(14px,1.2vw,18px); }
.hero__history-caption strong { font-size:clamp(20px,2vw,28px); }
.hero__history-caption .hero__history-caption-note { margin-top:12px; font-size:clamp(11px,1vw,14px); }

/* White SVG titles on a black band in all three explanation scenes. */
.hero__section-label {
 background:#000;
 padding:12px 18px;
 box-sizing:border-box;
 color:#fff;
}
.hero__section-label-ja img { filter:brightness(0) invert(1); }
@media(max-width:767px) {
 .hero__section-label { padding:10px 14px; }
}

/* Small historical caption over the people in the photo collage. */
.hero__history-caption {
 position:absolute; z-index:5; left:50%; bottom:16px;
 transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px);
 box-sizing:border-box; padding:8px 12px;
 background:rgba(0,0,0,.72); color:#fff; text-align:left; line-height:1.6;
}
.hero__history-caption p { font-size:11px; }
.hero__history-caption strong { font-size:13px; }
.hero__history-caption .hero__history-caption-note { margin-top:4px; font-size:10px; }
@media(max-width:767px) {
 .hero__history-caption { bottom:10px; padding:6px 9px; }
 .hero__history-caption p { font-size:10px; }
 .hero__history-caption strong { font-size:12px; }
 .hero__history-caption .hero__history-caption-note { font-size:9px; }
}

/* Leave room below the two-line NEXT OCTAVE title band. */
.hero__theme-notes .hero__logo-note--upper { top:max(150px,22%); }
@media(max-width:767px) {
 .hero__theme-notes .hero__logo-note--upper { top:max(112px,20svh); }
}
@media(max-height:600px) and (orientation:landscape) {
 .hero__theme-notes .hero__logo-note--upper { top:max(110px,27svh); }
}

/* Align the historical photo caption at the lower right. */
.hero__history-caption { left:auto; right:16px; bottom:16px; transform:none; }
@media(max-width:767px) {
 .hero__history-caption { right:10px; bottom:10px; max-width:calc(100% - 20px); }
}

/* Match the caption to the crowd photo's lowered bottom edge. */
.hero.is-document-scroll > .hero__about { padding-bottom:10svh; }
.hero__history-caption { bottom:calc(-10svh + 12px); right:12px; }
@media(max-width:767px) {
 .hero.is-document-scroll > .hero__about { padding-bottom:4svh; }
 .hero__history-caption { bottom:calc(-4svh + 8px); right:8px; }
}

/* Let the poster stars and music note drift after their entrance. */
.hero.is-poster .hero__poster-decoration {
 animation:poster-decoration-float 4.8s ease-in-out infinite;
 animation-delay:calc(var(--draw-delay,0s) + 1.2s);
}
.hero.is-poster .hero__poster-decoration:nth-child(even) { animation-duration:5.6s; }
.hero.is-poster .hero__music-note { animation-name:poster-note-float; animation-duration:4.2s; }
@keyframes poster-decoration-float {
 0%,100% { translate:0 0; scale:1; }
 50% { translate:0 -6px; scale:1.06; }
}
@keyframes poster-note-float {
 0%,100% { translate:0 0; }
 50% { translate:0 -10px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero.is-poster .hero__poster-decoration { animation:none !important; translate:0 0; scale:1; }
}

/* Lower the crowd and buildings slightly as one collage. */
.hero.is-document-scroll .hero__about-building { bottom:7svh; }
.hero.is-document-scroll .hero__about-crowd { bottom:-13svh; }
.hero.is-document-scroll > .hero__about { padding-bottom:13svh; }
.hero__history-caption { bottom:calc(-13svh + 12px); }
@media(max-width:767px) {
 .hero.is-document-scroll .hero__about-building { bottom:5svh; }
 .hero.is-document-scroll .hero__about-crowd { bottom:-7svh; }
 .hero.is-document-scroll > .hero__about { padding-bottom:7svh; }
 .hero__history-caption { bottom:calc(-7svh + 8px); }
}

/* Cover the thin mint seam at the crowd photo's bottom edge. */
.hero.is-document-scroll .hero__about-crowd { bottom:calc(-13svh - 3px); }
@media(max-width:767px) {
 .hero.is-document-scroll .hero__about-crowd { bottom:calc(-7svh - 3px); }
}

/* Keep every explanation below the title band, with a consistent clear gap. */
.hero__logo-notes,
.hero__theme-notes,
.hero__poster-notes { top:var(--description-top,150px); bottom:max(24px,7svh); }
.hero__logo-notes .hero__logo-note,
.hero__theme-notes .hero__logo-note,
.hero__poster-notes .hero__logo-note {
 height:auto; max-height:100%; box-sizing:border-box;
}
.hero__logo-notes .hero__logo-note--upper,
.hero__theme-notes .hero__logo-note--upper,
.hero__poster-notes .hero__logo-note--upper { top:0; bottom:auto; }
.hero__logo-notes .hero__logo-note--lower,
.hero__theme-notes .hero__logo-note--lower,
.hero__poster-notes .hero__logo-note--lower { top:auto; bottom:0; }


/* 学園祭パンフレット */
.pamphlet-section {
  position: relative;
  padding: 6svh 8vw 8svh;
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.pamphlet-content { max-width: 1240px; margin: 0 auto; padding-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid #000; }
.pamphlet-label { margin: 0 0 16px; font: 700 12px Arial, sans-serif; letter-spacing: .2em; }
.pamphlet-title { margin: 0; font-size: clamp(26px, 3.2vw, 48px); font-weight: 900; letter-spacing: .04em; line-height: 1.5; }
.pamphlet-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.pamphlet-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 16px 24px; border: 1px solid #000;
  background: #fff; color: #000; font-size: 15px; font-weight: 700; line-height: 1.6;
  text-decoration: none; transition: background .2s, color .2s;
}
.pamphlet-button--primary { background: #000; color: #fff; }
.pamphlet-button:hover { background: #e8dbb5; color: #000; }
.pamphlet-button:focus-visible, .pamphlet-preview:focus-visible { outline: 3px solid #756025; outline-offset: 5px; }
.pamphlet-preview { display: block; margin-top: 28px; border: 1px solid #bbb; background: #fff; }
.pamphlet-preview img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .pamphlet-section { padding: 6svh 6vw 8svh; }
  .pamphlet-actions { flex-direction: column; }
  .pamphlet-button { width: 100%; padding-inline: 20px; font-size: 14px; }
  .pamphlet-title { letter-spacing: 0; }
}

/* 高解像度の表紙プレビュー */
.pamphlet-content { text-align: center; }
.pamphlet-preview { width: min(280px, 74vw); margin: 28px auto 0; border: 0; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.pamphlet-actions { justify-content: center; }

/* Link and update dates */
.hero__about-link a { text-decoration: none; }
.pamphlet-updated { margin: 16px 0 0; font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
.teaser-updated { position: relative; z-index: 1; margin: 24px 0 16px; text-align: center; font-size: 12px; line-height: 1.8; letter-spacing: .04em; }