/* Override JS-dependent styles for static rendering */ /* `.service-list-inner` の opacity 既定値を 1 で固定。 index.html インラインCSSには opacity 指定がないが、JS駆動の中間状態として `.scroll-fade` 等が後付けで opacity:0 を当てる前提があり、それらが効くまでの 初期表示でちらつかせないために `!important` で固定する。 `.scroll-fade.service-list-inner` の場合は後段の .scroll-fade ルール（同じく !important）がソース順で勝つので問題ない。 */ .service-list-inner { opacity: 1 !important; } /* === KV loading (JS controls fade-out) === */ /* transition は CSS 側で固定し、JS は opacity 値変更だけ行う。 duration は kv-animation.js の `TIMINGS.loadingFadeMs` と一致させる必要あり。 */ .kv-loading { background: #fff; height: 100%; left: 0; position: fixed; top: 0; transition: opacity 0.8s ease-in; width: 100%; z-index: 100; } /* === SVG表示 (JS controls display) === */ /* `.js` クラスは index.html の 内インライン script で に付与する。 JS 無効環境ではクラスが付かないので KV SVG が初期表示される（no-JS フォールバック）。 */ .js #kvTitle { display: none; } /* === circle/line アニメーション制御 === */ /* index.html インラインCSSの `.title-line.is-animation` / `.title-circle.is-animation` は `display: none` を含むため、`is-animation` 付与時に表示するためには `!important` で `display: block` を当てて勝つ必要がある。JS が `is-animation` を付与した後に発火する。 */ .title-line.is-animation, .title-circle.is-animation { display: block !important; } /* セクションタイトルのclipPath — JS無効時のフォールバック（全表示）。 JSが動く場合は section-title-animation.js が style.width をインラインで上書きする。 セレクタは JS 側 (`[id$="ClipTitle"] > rect`) と意図を合わせる。 */ [id$="ClipTitle"] > rect { width: 100%; } /* === スクロールフェードイン（IntersectionObserver連動） === */ /* 初期状態: 非表示。`.service-list-inner { opacity: 1 !important }` 等の 先行スタイルに勝つため `!important` を付ける（旧 .service-list.scroll-fade 個別ルールの代替）。 */ .scroll-fade { opacity: 0 !important; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* IntersectionObserverが付与するクラスで表示 */ .scroll-fade.is-visible { opacity: 1 !important; transform: translateY(0); } /* === アクセシビリティ: prefers-reduced-motion 対応 === ユーザーがアニメ低減を選択している場合、スクロールフェードは即時表示。 JS 側でも is-visible を付けて状態を揃えるが、JS 無効環境のためにも CSS で保険をかける。 */ @media (prefers-reduced-motion: reduce) { .scroll-fade { opacity: 1 !important; transform: none !important; transition: none !important; } }