/* =============================================================
   join-reel.css — 採用LP（/join/）だけ（2026-10-14 第3段）
   既定（JSなし・動きを減らす設定）：縦動画が1つ置いてあるだけ（押せば再生）
   .is-reel（JS が付ける）：画面を止め、布のようにうねる1枚が広がって動画になる
   ============================================================= */
.jn-reel { position: relative; background: var(--black); border-bottom: 1px solid var(--gold-border); overflow: clip; }
.jn-sticky { position: relative; padding: 96px 0; text-align: center; }
.jn-kicker { font-family: var(--font-label); font-size: 11px; letter-spacing: .4em; color: var(--gold); margin: 0 0 28px; }
.jn-kicker span { font-family: var(--font-sans); letter-spacing: .18em; color: var(--gray-light); margin-left: .8em; }
.jn-stage { position: relative; perspective: 1100px; }
.jn-frame { position: relative; width: min(360px, 78vw); aspect-ratio: 9 / 16; margin: 0 auto; border: 1px solid var(--gold-border); border-radius: 3px; overflow: hidden; background: #000; transform-origin: 50% 50%; will-change: transform; }
.jn-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jn-words { display: none; }
.jn-sound { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--gold-border); color: var(--gold-light);
  font-family: var(--font-sans); font-size: 14px; letter-spacing: .14em; padding: 12px 22px; border-radius: 2px; cursor: pointer; }
.jn-sound:hover { border-color: var(--gold); color: #fff; }
.jn-sound svg { width: 16px; height: 16px; }
.jn-cap { margin: 14px 0 0; font-size: 13px; color: var(--gray); letter-spacing: .08em; }

.jn-reel.is-reel { height: 320vh; }
.jn-reel.is-reel .jn-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.jn-reel.is-reel .jn-kicker { position: absolute; z-index: 3; top: calc(var(--nav-h) + 3vh); left: 0; right: 0; }
.jn-reel.is-reel .jn-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.jn-reel.is-reel .jn-frame { width: auto; height: 84vh; height: 84svh; max-width: 90vw; }
.jn-reel.is-gl .jn-frame { opacity: 0; }
.jn-gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; z-index: 1; }
.jn-reel.is-reel .jn-words { display: flex; position: absolute; z-index: 2; inset: 0; align-items: center; justify-content: center; gap: max(24vw, 300px); pointer-events: none; }
.jn-words span { font-family: var(--font-serif-ja); font-weight: 200; font-size: clamp(40px, 6vw, 104px); letter-spacing: .06em; color: var(--white); white-space: nowrap; will-change: transform, opacity; text-shadow: 0 2px 30px rgba(0,0,0,.7); }
.jn-words span em { font-style: normal; color: var(--gold-light); }
.jn-reel.is-reel .jn-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 3vh; }
.jn-reel.is-reel .jn-sound { margin-top: 0; background: rgba(10,10,10,.6); }
.jn-reel.is-reel .jn-cap { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .jn-reel.is-reel .jn-frame { height: 72svh; }
  .jn-reel.is-reel .jn-words { flex-direction: column; gap: 58vh; }
  .jn-words span { font-size: 34px; }
  .jn-reel.is-reel .jn-foot { bottom: calc(2vh + 64px); }
}