/* components/inview.css — ビュー侵入で fade-up（トップページ）。 - 単体要素 : data-inview … 自身がフェードアップ - 横並びグループ : data-inview="stagger" … 直下の子をシーケンシャルに（遅延はJSが付与） 画像は属する単体要素／グループの子として、その inview タイミングでフェードする。 初期の非表示は .js-inview（IntersectionObserver 対応かつ reduced-motion でない時のみ へ付与）配下でだけ適用する。→ JS無効・reduced-motion 時は常に表示（演出なし）。 */ .js-inview [data-inview] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-inview [data-inview].is-inview { opacity: 1; transform: none; } /* グループ：コンテナ自身は出したまま、直下の子をアニメーション対象にする。 */ .js-inview [data-inview="stagger"] { opacity: 1; transform: none; transition: none; } .js-inview [data-inview="stagger"] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js-inview [data-inview="stagger"].is-inview > * { opacity: 1; transform: none; } /* 安全網：reduced-motion では演出を完全に無効化（通常は .js-inview 自体が付かない）。 */ @media (prefers-reduced-motion: reduce) { .js-inview [data-inview], .js-inview [data-inview="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; } }