/* loading =============================== ローディングアニメーション。 @js public_html/assets/js/modules/loading.js が 1. .frame の各マークに --i（ビューポート x 座標ソート順インデックス）を付与 2. :root に --loading-frame-count（マーク総数）を書き出し 3. .hero_layer に --hero-i（DOM 順インデックス）を付与 4. を付与 してくると、ここの keyframes が発火する。 調整用変数（:root にデフォルト定義 / ここを書き換えるだけで挙動が変わる）: --loading-mark-duration : マーク 1 個の遷移時間 --loading-mark-step : マーク間の遅延ステップ --loading-mark-offset-x/y : マークの初期オフセット（画面外方向） --loading-gap : frame 完了から hero 開始までの間隔 0 で「最後のマークが終わった瞬間」開始。 負値（例: -0.4s）で hero が frame に重なって始まる。 正値（例: 0.3s）でいったん間を空けて始まる。 --loading-hero-duration : hero レイヤー 1 枚の遷移時間 --loading-hero-step : hero レイヤー間の遅延ステップ */ :root { --loading-mark-duration: 0.25s; --loading-mark-step: 0.025s; --loading-mark-offset-x: -28px; --loading-mark-offset-y: -28px; --loading-gap: -0.5s; --loading-hero-duration: 1s; --loading-hero-step: 0.5s; } /* SP */ @media screen and (max-width: 768px) { :root { --loading-mark-duration: 0.4s; --loading-mark-step: 0.05s; --loading-mark-offset-x: -28px; --loading-mark-offset-y: -28px; --loading-gap: 0s; --loading-hero-duration: 1s; --loading-hero-step: 0.5s; } } /* 初期状態 — アニメーション対象を不可視にしておく（FOUC 防止） */ .frame svg > :not(.frame_ticks), .frame .frame_ticks > *, .hero_layer { opacity: 0; } /* frame マーク：左上方向から流入 ───────────────────────────── */ :root[data-load="ready"] .frame svg > :not(.frame_ticks), :root[data-load="ready"] .frame .frame_ticks > * { animation: loading-frame-in var(--loading-mark-duration) ease-out forwards; animation-delay: calc(var(--i, 0) * var(--loading-mark-step)); } @keyframes loading-frame-in { from { opacity: 0; transform: translate(var(--loading-mark-offset-x), var(--loading-mark-offset-y)); } to { opacity: 1; transform: translate(0, 0); } } /* .hero_layer：frame 完了後に順次フェードイン ─────────────── */ :root[data-load="ready"] .hero_layer { animation: loading-hero-in var(--loading-hero-duration) ease-out forwards; animation-delay: calc(var(--loading-frame-count, 30) * var(--loading-mark-step) + var(--loading-mark-duration) + var(--loading-gap) + var(--hero-i, 0) * var(--loading-hero-step)); } @keyframes loading-hero-in { from { opacity: 0; } to { opacity: 1; } } /* JS が走らなかった場合のフォールバック（5 秒後に強制的に可視化） */ :root:not([data-load="ready"]) .frame svg > :not(.frame_ticks), :root:not([data-load="ready"]) .frame .frame_ticks > *, :root:not([data-load="ready"]) .hero_layer { animation: loading-safety 0s 5s forwards; } @keyframes loading-safety { to { opacity: 1; } } /* prefers-reduced-motion 対応 — アニメーションをカットして即時表示 */ @media (prefers-reduced-motion: reduce) { .frame svg > :not(.frame_ticks), .frame .frame_ticks > *, .hero_layer { opacity: 1 !important; animation: none !important; transform: none !important; } }