@charset "UTF-8"; /* ============================================ about-test ページ スクロールアニメーション ============================================ 【方針】メリハリを付けるため、動かす要素をあえて絞っています。 ● 動かすもの（1セクションにつき「1つの見せ場」） ・セクションの導入ラベルと見出し ・主要ビジュアル（メイン画像・仕組み図・フロー図） ・主要カード群（カード・グリッド・ステップ・料金プラン・冒頭の数字） ● 動かさないもの（読み込み時からそのまま表示） ・本文・リード文・注記 ・リストの各項目、料金表の明細、事例、フォーム など ・旧デザイン部分のセクション（secAbout02〜04） ・ に .anim-ready が付いたときだけ有効 ※このファイルの対象セレクタと page-about-test.php 内の SELECTOR は 同じ内容にしてあります。変更する場合は必ず両方を揃えてください。 ============================================ */ /* --- セクションの導入ラベル：左からすっと --- */ .anim-ready .aboutTestMain [class*="__eyebrow"], .anim-ready .aboutTestMain [class*="__label"] { opacity: 0; transform: translateX(-14px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* --- セクション見出し：下から（このページの主役） --- */ .anim-ready .aboutTestMain [class*="__title"], .anim-ready .aboutTestMain [class*="__subTitle"], .anim-ready .aboutTestMain [class*="__answerLead"], .anim-ready .aboutTestMain [class*="__sectionHead"] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* --- 主要ビジュアル：少し大きい状態から縮んで収まる --- */ .anim-ready .aboutTestMain .aboutTestHero__visual, .anim-ready .aboutTestMain .aboutTestEvaluation__image, .anim-ready .aboutTestMain .aboutTestFlow__visual, .anim-ready .aboutTestMain .aboutTestFlow__detailsImage, .anim-ready .aboutTestMain .aboutTestIntro__symbolImage { opacity: 0; transform: scale(1.04); transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* --- 主要カード群：下から（1つずつ順に） --- */ .anim-ready .aboutTestMain [class*="__cards"] > *, .anim-ready .aboutTestMain [class*="__grid"] > *, .anim-ready .aboutTestMain [class*="__steps"] > *, .anim-ready .aboutTestMain [class*="__plans"] > *, .anim-ready .aboutTestMain .aboutTestHero__stats > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } /* --- 表示領域に入ったら解除 --- ※ 非表示側は属性セレクタを含み詳細度が高くなるため、 確実に上書きできるよう !important を付けています --- */ .anim-ready .aboutTestMain .is-inview { opacity: 1 !important; transform: none !important; } /* アニメーション完了後は will-change を解除（描画負荷を残さない） */ .anim-ready .aboutTestMain .is-inview.is-anim-done { will-change: auto; } /* --- 数字のカウントアップ中に右端がガタつかないように --- */ .aboutTestHero__stat dt strong { display: inline-block; font-variant-numeric: tabular-nums; } /* --- 動きを減らす設定の端末では無効化 --- */ @media (prefers-reduced-motion: reduce) { .anim-ready .aboutTestMain [class*="__eyebrow"], .anim-ready .aboutTestMain [class*="__label"], .anim-ready .aboutTestMain [class*="__title"], .anim-ready .aboutTestMain [class*="__subTitle"], .anim-ready .aboutTestMain [class*="__answerLead"], .anim-ready .aboutTestMain [class*="__sectionHead"], .anim-ready .aboutTestMain .aboutTestHero__visual, .anim-ready .aboutTestMain .aboutTestEvaluation__image, .anim-ready .aboutTestMain .aboutTestFlow__visual, .anim-ready .aboutTestMain .aboutTestFlow__detailsImage, .anim-ready .aboutTestMain .aboutTestIntro__symbolImage, .anim-ready .aboutTestMain [class*="__cards"] > *, .anim-ready .aboutTestMain [class*="__grid"] > *, .anim-ready .aboutTestMain [class*="__steps"] > *, .anim-ready .aboutTestMain [class*="__plans"] > *, .anim-ready .aboutTestMain .aboutTestHero__stats > * { opacity: 1 !important; transform: none !important; transition: none !important; } }