/* ============================================ scroll-reveal.css（PHASE 2 改訂版） スクロール連動フェードイン演出 管理者ページ・ログイン・こども英語ページ（クイズ/ゲーム/せってい） には読み込まないでください。 PHASE 2での変更点： ・時間を少し短縮（1s→0.7s）し、「もったり」した印象を軽減。 ・移動距離もわずかに小さく（34px→24px）し、上品な動きに調整。 ・.reveal-instant を追加：ページを開いた瞬間から画面内にある要素は アニメーションさせず即座に表示するためのクラス（scroll-reveal.js側で付与）。 安全設計： ・JavaScriptが動かない場合は常に opacity:1（＝完全に表示された状態）。 に "js-reveal-ready" クラスが付いた時だけ、非表示スタートに切り替わる （このクラスはhead内の極小インラインスクリプトで即座に付与されるため、 　「一瞬表示されてから消える」ようなチラつきは起きません）。 ・prefers-reduced-motion（アニメーション低減設定）を尊重。 ============================================ */ .reveal { opacity: 1; transform: none; } html.js-reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } html.js-reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ファーストビュー内の要素：アニメーションさせず即座に表示する （transitionを無効化してから is-visible を付与するため、一瞬だけ 　フェードしてすぐ終わる、というチラつきを防げる） */ html.js-reveal-ready .reveal.reveal-instant { transition: none !important; } /* 写真（カルーセル・セクション写真）は、テキストとは違う 「じわっと収まる」演出にする（わずかな拡大→等倍、より洗練された 写真らしい見え方になる） */ html.js-reveal-ready .reveal.hero-carousel, html.js-reveal-ready .reveal.content-image-slot { transform: scale(1.05); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } html.js-reveal-ready .reveal.hero-carousel.is-visible, html.js-reveal-ready .reveal.content-image-slot.is-visible { transform: scale(1); } @media (prefers-reduced-motion: reduce) { html.js-reveal-ready .reveal { opacity: 1; transform: none; transition: none; } }