@charset "UTF-8"; /* ========================================================================== JOMONÖW — Opening Styles ファイル: opening.css 役割: OP-1 / OP-2 / OP-3 のレイアウト・アニメーション ステータス: Phase 2 ========================================================================== */ /* -------------------------------------------------------------------------- オープニング・コンテナ - 全画面オーバーレイ - JS で body[data-opening="active"] が付いている間は固定 - シーン切替は body[data-scene="1|2|3"] で制御 -------------------------------------------------------------------------- */ .opening { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100svh; /* v44.7: dvh→svh。dvhはバー格納/表示で伸縮し内部演出が動く(発振の副燃料)。svh=固定 */ z-index: var(--z-opening); overflow: hidden; pointer-events: none; /* スクロール阻害しない */ /* オープニング再生中は背景がワイン色 (OP-1/OP-2の背景と同色) で、 シーン切替時に下のコンテンツが透けないようにする。 OP-3 シーンになると body[data-scene="3"] で背景色が切り替わる */ background-color: var(--color-wine); transition: background-color 0.6s var(--ease-out); } /* OP-3 シーンでは .opening 自体の背景を明色へ */ body[data-scene="3"] .opening { background-color: var(--color-bg-light); } /* v47.0: 演出スキップ時(ブラウザ戻り等 = html.intro-skip)は JS の data-scene 付与を 待たず、CSS だけで最初から明色にする。 従来は DOMContentLoaded → startOpening → data-scene=3 までの間、 .opening(fixed全画面・小豆背景)がそのまま描画され「一瞬小豆色」が見えていた。 intro-gate.js は で即時にクラスを付けるため、これで最初のペイントから明色。 */ html.intro-skip .opening { background-color: var(--color-bg-light); transition: none; } html.intro-skip body { transition: none; /* 戻り時は wine→明色 のフェードも不要 (即・完了状態) */ } /* オープニング完了前は .site-main 等のメインコンテンツを隠す */ body[data-opening="active"] .site-main, body[data-opening="active"] .site-home, body[data-opening="active"] .anchor-nav, body[data-opening="active"] .site-footer { visibility: hidden; } /* オープニング再生中はページのスクロールをロック */ body[data-opening="active"] { overflow: hidden; } /* オープニング完了後はオーバーレイをポインター透過にする (display:none にすると、その中のフェードアウトtransitionが効かないため、 visibility と pointer-events で制御。背景色は維持 → Home背景と一致するので無問題) */ body[data-opening="done"] .opening { pointer-events: none; } /* -------------------------------------------------------------------------- シーン共通 -------------------------------------------------------------------------- */ /* シーン共通 - 背景色は親 .opening が持つ (シーン自身は透明) */ .opening__scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-out), visibility 0.5s var(--ease-out); background-color: transparent; /* 親が持つ */ } /* アクティブシーンの表示制御 */ body[data-scene="1"] .opening__scene--op1, body[data-scene="2"] .opening__scene--op2, body[data-scene="3"] .opening__scene--op3 { opacity: 1; visibility: visible; } /* OP-1 は自前のアニメーションでフェードアウトしているので、 シーン切替時の opacity transition で「巻き戻し」が起きないよう シーンの opacity は即座に 0 にし、テキスト要素も強制非表示にする */ body[data-scene="2"] .opening__scene--op1, body[data-scene="3"] .opening__scene--op1 { transition: none; opacity: 0; visibility: hidden; } /* シーン1以外では OP-1 のテキスト要素を完全に隠す (アニメーション解除による「再登場」を防止) */ body:not([data-scene="1"]) .opening__line { opacity: 0 !important; visibility: hidden !important; animation: none !important; } /* -------------------------------------------------------------------------- OP-1: 三行縦書きコピー --- Illustrator原本 (CD様より確定): - フォント: DNP 秀英アンチック Std - フォントサイズ: 36pt → 48px (1pt = 1.333px) - 行送り: 63pt → line-height 1.75 (63÷36) - 文字間隔: オプティカル → font-feature-settings: "palt" - 線: 0.5px の縁取り (背景色 #5c0b2e) → -webkit-text-stroke --- Figmaから確定 (CD様スクショより): - コピーグループ位置: X:639 Y:344 (1440x900中央=720,450) - コピーグループサイズ: W:161.13 H:212.43 - 中心点: (719.5, 450) ≒ 画面中央 --- 並び順: 右から左で 想像の共鳴が → コスモスを → 創造する 下揃え (3列の文字数が違う: 7字 / 5字 / 4字) -------------------------------------------------------------------------- */ .opening__copy { /* 画面の完全センターに配置 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: row-reverse; /* 右から左 */ align-items: flex-end; /* 下揃え (文字数が異なるため) */ justify-content: center; gap: 0; /* 列間は line-height で確保される */ } .opening__line { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-shuei-anti); font-size: 36px; /* Illustrator実寸 (W1440アートボード/36pt = 36px) */ line-height: 1.75; /* 行送り63pt ÷ フォント36pt = 1.75 */ color: var(--color-yellow); opacity: 0; margin: 0; padding: 0; /* オプティカル代替: プロポーショナルメトリクス */ font-feature-settings: "palt" 1; /* 細く見せる: .shuei-light クラスを併用。 背景色 (#5c0b2e) を stroke 色として指定。 stroke幅は 36px × 0.01389 ≒ 0.5px が自動で効く。 */ --shuei-light-color: var(--color-wine); } /* シーン1がアクティブになったら順にフェードイン → 全行揃って 1.5秒保持 → フェードアウト タイミング (目視で読めるスピードに調整): 0.5s: 1行目フェードイン (0.6s) 1.5s: 2行目フェードイン (0.6s) 2.5s: 3行目フェードイン (0.6s) 3.1s: 三行揃う 4.6s: 三行揃って1.5秒保持後、フェードアウト開始 (0.7s) 5.3s: 完全フェードアウト → OP-2 シーンへ */ /* 各行の個別キーフレーム (アニメーション総時間が行ごとに異なる) 各キーフレーム内の % は、その行のアニメーション総時間に対する割合 */ /* 1行目: total 4.8s (0.5s後にスタート、5.3sで終了) 0-12.5%(0.6s): fade in 12.5-85.4%(3.5s): hold (= 三行揃う 3.1s - 0.5s + 1.5s 保持 = 3.5s? いや... --- 再計算: 1行目アニメ時間 4.8s (5.3s - 0.5s) 0-12.5% (0-0.6s): fade in 12.5-85.4% (0.6-4.1s): hold (3.5s保持) 85.4-100% (4.1-4.8s): fade out (0.7s) */ @keyframes opLine1 { 0% { opacity: 0; transform: translateY(8px); } 12.5% { opacity: 1; transform: translateY(0); } 85.4% { opacity: 1; } 100% { opacity: 0; } } /* 2行目: total 3.8s (1.5s後にスタート、5.3sで終了) 0-15.8% (0-0.6s): fade in 15.8-81.6% (0.6-3.1s): hold 81.6-100% (3.1-3.8s): fade out */ @keyframes opLine2 { 0% { opacity: 0; transform: translateY(8px); } 15.8% { opacity: 1; transform: translateY(0); } 81.6% { opacity: 1; } 100% { opacity: 0; } } /* 3行目: total 2.8s (2.5s後にスタート、5.3sで終了) 0-21.4% (0-0.6s): fade in 21.4-75% (0.6-2.1s): hold 75-100% (2.1-2.8s): fade out */ @keyframes opLine3 { 0% { opacity: 0; transform: translateY(8px); } 21.4% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } } body[data-scene="1"] .opening__line--1 { animation: opLine1 4.8s var(--ease-out) 0.5s both; } body[data-scene="1"] .opening__line--2 { animation: opLine2 3.8s var(--ease-out) 1.5s both; } body[data-scene="1"] .opening__line--3 { animation: opLine3 2.8s var(--ease-out) 2.5s both; } /* -------------------------------------------------------------------------- OP-2 → OP-3 連続ロゴモーション --- 設計思想 (CD様より): OP-2 でロゴが画面中央に大きく(W148px)出現 → OP-3 へ移行時にロゴはセンタリングのまま W76px に縮小 → 同時に背景が #5c0b2e → #f7f6f6 へ → JOMONÖWタイポがクロスフェードで浮かび上がる --- そのため OP-2 と OP-3 のロゴは「同一の連続したロゴ要素」として扱う。 従来の「シーン切替で別ロゴを表示」ではなく、 1つのロゴが scene 2→3 で大きさだけ変わる構成。 -------------------------------------------------------------------------- */ /* OP-2 シーンの構造をシンプル化 (背景色のみが役割) */ .opening__scene--op2 { /* 背景色のみ。ロゴ要素は別レイヤーで連続描画 */ } /* OP-3 シーンの構造 (JOMONÖWタイポ専用レイヤー) */ .opening__scene--op3 { /* 背景色 #f7f6f6 のみ。ロゴは別レイヤー、JOMONÖWはこの内部 */ } /* -------------------------------------------------------------------------- JOMONÖW + ロゴ - スクロール連動の連続レイヤー --- CD様確定仕様 (1440×960基準): op-3-1 (scrollY=0): - 白地エリア高さ: 480px - JOMONÖW: 中心Y=240 (白地中央)、幅 453.46px - ロゴ: 中心Y=480 (境界線上、境界線=白地高さ)、幅 76px op-3-2 (scrollY >= SCROLL_END): - 白地エリア高さ: 130px - JOMONÖW: 中心Y=65 (白地中央)、幅 225.7px - ロゴ: 中心Y=128 (v38.1: 白帯底130から2px上, 章と一致)、幅 48px 常に「JOMONÖWは白地エリアの中央」「ロゴは境界線をまたぐ」を維持。 間はscrollY量に応じて連続補間。 --- 実装方法: scroll.js で scrollY → progress (0〜1) を計算し、 CSS変数 --scroll-progress として body に付与。 ここでは calc() で線形補間する。 白地高さ = 480 + (130 - 480) * progress = 480 - 350*progress JOMONÖW中心Y = 白地高さ / 2 JOMONÖW幅 = 453.46 + (225.7 - 453.46) * progress ロゴ中心Y = 白地高さ ロゴ幅 = 76 + (48 - 76) * progress -------------------------------------------------------------------------- */ /* CSS変数 (scroll.js で書き換え) --- --scroll-progress: op-3-1(0) → op-3-2(1) [scrollY 0〜350] --- JOMONÖW 453.46→225.7px、ロゴ 76→48px の連続補間。 フッター到達時は拡大せず、スクロール要素は消えるだけ (フッター内のブランドセット+ロゴがスライドインで担当)。 */ body { --scroll-progress: 0; --white-area-height: calc(50vh - (50vh - 130px) * var(--scroll-progress)); --jomonow-y: calc(var(--white-area-height) / 2); /* v38.4: past-anchor-px の base デフォルト。これが無いとオープニング中(update()が early return で px 未設定)に PC/タブレットで calc(... - var(--past-anchor-px)) が無効化され、JOMONÖW が 最上部へ見切れる。SP は max-width:481 ブロックで 0px 定義済みだったため発生しなかった。 */ --past-anchor-px: 0px; /* v38.1: emblem中心を白帯底(130)から分離し OP-3-2 で 128px に (章ページ design-detail と一致, 4の倍数化)。 白帯(--white-area-height)は130のまま維持 (章ヘッダー/DESIGN帯と一致)。 ヒーロー(progress=0)は 50vh(=白/STATEMENT境界=画面天地中央に重なる)、OP-3-2(progress=1)で128。 v38.4: PC/タブレットも SP と同じ連続補間に統一。past-anchor-px(=scrollY-SCROLL_END)で OP-3-2(128) → emblem-only(66) を連続補間。これによりスクロール位置に完全連動し、 戻り時に emblem がそのまま滑らかに降りてくる (discrete past-anchor トグルの末尾カクッを撤廃)。 v38.6: 旧 white-area-height-2px(定数) はヒーローで 50vh-2 となり中央より2px上にずれていた。 50vh→128 の progress 補間に戻し、ヒーロー=50vh(境界=中央に一致)・OP-3-2=128 を両立。past-anchor-px は継続。 */ --logo-y: max( 66px, calc(50vh - (50vh - 128px) * var(--scroll-progress) - var(--past-anchor-px)) ); --jomonow-w: calc(453.46px - 227.76px * var(--scroll-progress)); --logo-w: calc(76px - 28px * var(--scroll-progress)); } /* JOMONÖWタイポ 常に白地エリア中央 (横は画面センター、縦は白地高さの中央) スクロール中はCSS変数で即時反映 (transition なし) */ .opening__jomonow { position: fixed; /* v38.4: past-anchor-px ぶん上へ流す (全VP統一)。スクロールで画面外へ連続上昇し emblem-only を実現、戻りで scroll に連動して滑らかに降りてくる。 */ top: calc(var(--jomonow-y) - var(--past-anchor-px)); left: 50%; transform: translate(-50%, -50%); width: var(--jomonow-w); height: auto; display: block; z-index: 4; pointer-events: none; opacity: 0; } /* ロゴ 境界線をまたぐ (中心=白地高さ) スクロール中はCSS変数で即時反映 (transition なし) */ .opening__logo-continuous { position: fixed; top: var(--logo-y); left: 50%; transform: translate(-50%, -50%); width: var(--logo-w); height: auto; display: block; z-index: 4; pointer-events: none; opacity: 0; } /* v21.9: ホバー時の色変更レイヤー (logo-hover.svg)。base と同じ位置/サイズで追従し、 ホバー時のみ opacity:1。常時は非表示で base(通常色)が見える。 */ .opening__logo-hover { position: fixed; top: var(--logo-y); left: 50%; transform: translate(-50%, -50%); width: var(--logo-w); height: auto; display: block; z-index: 5; pointer-events: none; opacity: 0; } /* -------------------------------------------------------------------------- Lottie モーションロゴ (v10.6 — _lottie-test.html と同じシンプル仕様) --- OP-2 でのみ表示・再生される動くロゴ。再生完了後は SVG ロゴへ切替。 --- サイズ: _lottie-test.html と同じ 200×200px 固定。 Lottie キャンバス 1000px の中の有効図像 740px が、 コンテナ 200px に対して 200 * 740/1000 = 148px で描画される → SVG ロゴ (148px) と一致。 --- 位置: OP-2 では画面の縦中央 (top:50vh)。 OP-3 以降は使わない (SVG ロゴが既存ロジックで表示)。 --- 初期 opacity:0、再生時に .is-active クラスで opacity:1。 -------------------------------------------------------------------------- */ .opening__logo-motion { position: fixed; top: 50vh; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); display: block; z-index: 5; pointer-events: none; opacity: 0; /* v10.7: SVG ロゴと同じ transition で対称的にクロスフェード これがないと Lottie が即時消えて SVG がまだフェードイン中という 瞬間が発生し「一度ロゴが消える」現象が起きる */ transition: opacity 0.4s ease; } /* ブランドアンカー (クリック領域) — JOMONÖW上端〜ロゴ下端 を完全カバー --- レイアウト計算: - JOMONÖWの中心Y = --jomonow-y - JOMONÖWの高さ ≒ 幅 × 0.303 (jomonow.svg 比率 137.09/451.48) - JOMONÖWの上端Y = jomonow-y - jomonow-w * 0.303 / 2 - ロゴの中心Y = --logo-y - ロゴの下端Y = logo-y + logo-w / 2 - クリック領域: top = JOMONÖWの上端Y height = ロゴの下端Y - JOMONÖWの上端Y --- pointer-events: auto を明示、cursor: pointer で手の形に */ .opening__brand-anchor { position: fixed; /* v21.5: クリック/ホバー領域はロゴだけに限定 (JOMONÖWは反応なし)。 CD「ロゴだけをエリアにして」「ロゴのアンカー作用だけに統一」に対応。 */ top: calc(var(--logo-y) - var(--logo-w) / 2); left: 50%; transform: translateX(-50%); width: var(--logo-w); height: var(--logo-w); z-index: 10; /* 最前面に */ cursor: pointer; display: block; pointer-events: auto; text-decoration: none; } /* v21.5: ロゴ ホバー反応 — 少し拡大+明るく (負荷の低いCSSのみ / Lottie流用は挙動不安定で撤去)。 hover 可能端末のみ → SP・タッチでは無反応。Home/Hajimari 共通仕様。 */ @media (hover: hover) and (pointer: fine) { body[data-scene="3"][data-opening="done"] .opening__logo-hover { transition: opacity 0.3s var(--ease-out); } body[data-scene="3"][data-opening="done"]:not(.jomonow-in-footer) .opening:has(.opening__brand-anchor:hover) .opening__logo-hover { opacity: 1; /* v21.9: ホバーで色変更版(小豆#720b2e/琥珀#fdd700)をフェードイン */ } } /* シーン2: ロゴだけが画面中央 (50vh)、JOMONÖWは透明 アンカーはロゴだけを覆う */ body[data-scene="2"] .opening__brand-anchor { top: calc(50vh - 74px); /* ロゴ中心50vh、半径74px */ width: 148px; height: 148px; } /* デバッグモード: bodyに .debug-anchor を付けるとクリック範囲が可視化される */ body.debug-anchor .opening__brand-anchor { background: rgba(255, 0, 255, 0.2); outline: 2px dashed rgba(255, 0, 255, 0.6); } /* シーン2: ロゴだけ表示、画面中央 (op-3-1 とは別、画面真ん中) */ body[data-scene="2"] { --scroll-progress: 0; } body[data-scene="2"] .opening__jomonow { opacity: 0; } body[data-scene="2"] .opening__logo-continuous { /* OP-2では画面の縦中央 (Y=50vh) に配置、サイズ148px opacity は JS (logo-motion.js) が .is-active クラスで制御 */ top: 50vh; width: 148px; transition: opacity 0.4s ease; } body[data-scene="2"] .opening__brand-anchor { top: 50vh; width: 148px; height: 148px; } /* -------------------------------------------------------------------------- .is-active による opacity 制御 (v10.5) --- _lottie-test.html と同じシンプルな仕組み。 JS が SVG ロゴと Lottie コンテナの opacity を独立して制御する。 --- .opening__logo-continuous: 既存の opacity:0 初期値のまま、 JS が再生完了時に .is-active 付与で表示 .opening__logo-motion: 同じく opacity:0 初期、 JS が OP-2 突入時に .is-active 付与で表示、完了時に削除 -------------------------------------------------------------------------- */ .opening__logo-continuous.is-active { opacity: 1; } .opening__logo-motion.is-active { opacity: 1; } /* v10.8: OP-3 突入時は Lottie コンテナを強制的に非表示 --- complete 時点では Lottie 最終フレームを残したまま SVG ロゴをフェードイン して「両方薄くなる瞬間=点滅」を防いでいる。 OP-3 では SVG ロゴが縮小するので、200px のままの Lottie が邪魔。 data-scene="3" のタイミングで強制非表示にする。 --- v10.9: transition を none に上書きして「即座に消す」。 transition 0.4s だと SVG ロゴが縮小していく一方で Lottie が中央に 残ったままフェードアウトする「残像」が見える。即時消しなら、 SVG ロゴが既に表示中なので画面のロゴが消える瞬間は発生しない。 */ body[data-scene="3"] .opening__logo-motion { opacity: 0; transition: none; pointer-events: none; } /* シーン3: op-3-1 状態 = scroll-progress=0 のレイアウト ロゴはCSS変数で即値配置（transitionなし、スクロール連動の即時反映を優先） OP-2→OP-3 への縮小は keyframes で実現 --- 重要: opLogoShrink / opJomonowIn は「OP-2→OP-3 移行時の演出」専用。 :not([data-opening="done"]) で、オープニング再生中のみ有効にする。 オープニング完了後は animation を外し、ロゴ/JOMONÖW のサイズ・位置は --scroll-progress 連動の --logo-w / --jomonow-w / --logo-y だけで制御。 → フッターから戻る時やスクロール時に opLogoShrink が再発火して 「一度148pxに拡大してから縮小」する余分な動きを防ぐ。 */ body[data-scene="3"]:not([data-opening="done"]) .opening__jomonow { animation: opJomonowIn 0.9s var(--ease-out) 0.4s both; } body[data-scene="3"]:not([data-opening="done"]) .opening__logo-continuous { opacity: 1; /* OP-2(148px, Y=50vh) → OP-3(76px, Y=480) への縮小をanimationで OP-3シーンに入った瞬間に発火、1秒で着地 */ animation: opLogoShrink 1.0s var(--ease-emphasized) both; } /* オープニング完了後: JOMONÖW + ロゴは常時表示 (opacityのみ明示)。 サイズ・位置は --scroll-progress 連動の CSS変数で制御。 */ body[data-scene="3"][data-opening="done"] .opening__jomonow, body[data-scene="3"][data-opening="done"] .opening__logo-continuous { opacity: 1; } /* v38.4: 旧 min-width:482 の discrete past-anchor ブロック (emblem-only を opacity:0/top:64/0.3s transition で実現) を撤去。PC/タブレットも SP と同じ「base の連続補間 (--logo-y 128↔66, JOMONÖW top を past-anchor-px で上へ流す)」に統一。emblem-only は JOMONÖW が画面外へ 連続上昇することで実現され、戻りは scroll 連動で滑らかに降りてくる (末尾カクッ撤廃)。 brand-returning (開始時 lockup 復帰) も連続化で不要のため撤去。 */ @keyframes opJomonowIn { from { opacity: 0; } to { opacity: 1; } } @keyframes opLogoShrink { from { /* OP-2 の状態 */ top: 50vh; width: 148px; } to { /* OP-3 op-3-1 の状態 (CSS変数のscroll-progress=0時の値) */ top: var(--logo-y); width: var(--logo-w); } } /* -------------------------------------------------------------------------- Home遷移時 (data-opening="done") の挙動 --- - .opening 自体は背景を透明化、pointer-events 透過に - .opening__scene--op3 (背景レイヤー) は透明化 - JOMONÖW + ロゴ (連続レイヤー) は「居続ける」 スクロールに応じて縮小・移動するため、display維持 -------------------------------------------------------------------------- */ body[data-opening="done"] .opening { background-color: transparent; pointer-events: none; } body[data-opening="done"] .opening__scene--op3 { opacity: 0; transition: opacity 0.5s var(--ease-out); } /* JOMONÖW + ロゴは居続ける (フェードアウトしない、消さない) スクロールに応じて変形するため、Home遷移後も表示維持 */ /* -------------------------------------------------------------------------- フッター到達時 (body.jomonow-in-footer) --- スクロールしてきた JOMONÖW + ロゴ を消す。 フッター内のブランドセット (JOMONÖW+Imagine+ロゴ) が ふわっと拡大フェードインで登場 (footer.css)。 --- 注: セレクタに [data-scene="3"][data-opening="done"] を含めて 詳細度を上げ、上記の data-opening="done" の opacity:1 ルールに 確実に勝つようにする (これが無いと opacity:0 が上書きされ消えない)。 -------------------------------------------------------------------------- */ body[data-scene="3"][data-opening="done"].jomonow-in-footer .opening__jomonow, body[data-scene="3"][data-opening="done"].jomonow-in-footer .opening__logo-continuous { animation: none; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* -------------------------------------------------------------------------- フッターから戻る途中 (body.returning-from-footer) --- jomonow-in-footer 解除直後の opacity フェードインを滑らかにする。 こちらも詳細度を data-opening="done" ルールに勝つよう揃える。 -------------------------------------------------------------------------- */ body[data-scene="3"][data-opening="done"].returning-from-footer .opening__jomonow, body[data-scene="3"][data-opening="done"].returning-from-footer .opening__logo-continuous { animation: none; opacity: 1; transition: opacity 0.3s ease; } /* -------------------------------------------------------------------------- Reduced Motion: アニメーション一切なし、即OP-3状態へ -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body[data-scene="1"] .opening__line--1, body[data-scene="1"] .opening__line--2, body[data-scene="1"] .opening__line--3, .opening__jomonow, .opening__logo-continuous { animation: none; transition: none; } body[data-scene="3"] .opening__jomonow { opacity: 1; } } /* ========================================================================== SP (≤481px) — オープニング OP-1 / OP-2 ========================================================================== */ @media (max-width: 481px) { /* OP-1: 縦組み3列 — shuei-light のまま、32px / 行送り56px */ .opening__line { font-size: 32px; line-height: 1.75; } /* OP-2: ロゴ 148px (Lottie コンテナも 200 → 390 に拡大: 148 × 1000/740 ≒ 200px なのでそのまま使える) OP-3 以降は PC と同じく 76 → 48 */ body[data-scene="2"] { --logo-w: 148px; } /* OP-3 JOMONÖW: SP は 272.07 → 225.74 (PC: 453.46 → 225.7) 白地エリア・ロゴ位置の計算式はPCと同じ (50vh → 130px) */ body { --jomonow-w: calc(272.0738px - 46.333px * var(--scroll-progress)); --past-anchor-px: 0px; } /* v15.5: past-anchor を経過するにつれ、ロゴ y を 130px → 66px に連続補間。 ピンポン/ガクつき防止。past-anchor-px (= scrollY - SCROLL_END) が 0 〜 62px の間で線形に動く。 - past-anchor-px = 0 → logo-y = 128px (アンカートップ位置, v38.1: 旧130, 章と一致) - past-anchor-px ≥ 62 → logo-y = 66px (画面上端から42px下にロゴ上端、中心=66px) JOMONÖW は past-anchor-px ぶん上にずらして自然に流す。 */ body { --logo-y: max( 66px, calc(50vh - (50vh - 128px) * var(--scroll-progress) - var(--past-anchor-px)) ); } body .opening__jomonow { /* JOMONÖW は past-anchor-px ぶん常に上にずらす (0 のときは差し引きゼロ) */ top: calc(var(--jomonow-y) - var(--past-anchor-px)); } /* v15.5: past-anchor 中は brand-anchor (クリック領域) もロゴに追従。 旧: anchor の top は jomonow-y 基準で固定 → ロゴが上部に移動した後も anchor は白地中央のままでロゴクリックが効かなくなっていた。 past-anchor 中は anchor を「JOMONÖW (流れる位置) 上端 〜 ロゴ下端」で再計算。 */ body .opening__brand-anchor { top: calc( (var(--jomonow-y) - var(--past-anchor-px)) - var(--jomonow-w) * 0.303 / 2 ); height: calc( (var(--logo-y) + var(--logo-w) / 2) - ((var(--jomonow-y) - var(--past-anchor-px)) - var(--jomonow-w) * 0.303 / 2) ); } }