@charset "UTF-8"; /* ========================================================= reveal.css ― スクロール登場アニメーション（リッチ表示） --------------------------------------------------------- ■ 大原則：静止状態（=デザイン）は一切変えない - すべてのルールは html.js-reveal 配下に限定。 JS 無効 / prefers-reduced-motion 時は に js-reveal が 付かないため、本ファイルは完全に無効化され元のデザインのまま。 - アニメーション終了状態は opacity:1 / transform:none（=既定値）。 既に transform を持つ要素は「不透明度のみ」グループで扱い、 位置やホバー挙動を壊さない。 ========================================================= */ /* --------------------------------------------------------- GROUP A : フェードアップ（不透明度 + 縦移動） ※ 静止状態で transform を持たない要素のみ対象 --------------------------------------------------------- */ html.js-reveal .intro__copy, html.js-reveal .intro__logo, html.js-reveal .intro__lead, html.js-reveal .colors__grid > .color-card, html.js-reveal .showcase__item, html.js-reveal .scenes__title, html.js-reveal .scenes__list .scene, html.js-reveal .features__lead, html.js-reveal .features__intro, html.js-reveal .features__grid > .feature, html.js-reveal .compare, html.js-reveal .brand__head, html.js-reveal .brand__text, html.js-reveal .brand .btn, html.js-reveal .ranking__eyebrow, html.js-reveal .ranking__title, html.js-reveal .ranking__sub, html.js-reveal .ranking__board, html.js-reveal .check__media, html.js-reveal .faq__set, html.js-reveal .faq__title, html.js-reveal .faq__sub, html.js-reveal .faq__list > .faq-item { opacity: 0; transform: translateY(28px); 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); } html.js-reveal .intro__copy.is-visible, html.js-reveal .intro__logo.is-visible, html.js-reveal .intro__lead.is-visible, html.js-reveal .colors__grid > .color-card.is-visible, html.js-reveal .showcase__item.is-visible, html.js-reveal .scenes__title.is-visible, html.js-reveal .scenes__list .scene.is-visible, html.js-reveal .features__lead.is-visible, html.js-reveal .features__intro.is-visible, html.js-reveal .features__grid > .feature.is-visible, html.js-reveal .compare.is-visible, html.js-reveal .brand__head.is-visible, html.js-reveal .brand__text.is-visible, html.js-reveal .brand .btn.is-visible, html.js-reveal .ranking__eyebrow.is-visible, html.js-reveal .ranking__title.is-visible, html.js-reveal .ranking__sub.is-visible, html.js-reveal .ranking__board.is-visible, html.js-reveal .check__media.is-visible, html.js-reveal .faq__set.is-visible, html.js-reveal .faq__title.is-visible, html.js-reveal .faq__sub.is-visible, html.js-reveal .faq__list > .faq-item.is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------- GROUP B : フェードのみ（不透明度） ※ 静止状態で transform を持つ / ホバーで transform する要素。 transform には一切触れず位置・ホバー挙動を保持。 --------------------------------------------------------- */ html.js-reveal .hero__img, html.js-reveal .hero__title, html.js-reveal .footer > .foot-cta { opacity: 0; transition: opacity 0.9s ease; } html.js-reveal .hero__img.is-visible, html.js-reveal .hero__title.is-visible, html.js-reveal .footer > .foot-cta.is-visible { opacity: 1; } /* --------------------------------------------------------- スタガー（グリッド内で順番に登場） ※ transition-delay は GROUP A の対象のみに付与。 ホバー transform を持つ要素には付けない（遅延の副作用回避）。 --------------------------------------------------------- */ html.js-reveal .colors__grid > .color-card:nth-child(2) { transition-delay: 0.09s; } html.js-reveal .colors__grid > .color-card:nth-child(3) { transition-delay: 0.18s; } html.js-reveal .colors__grid > .color-card:nth-child(4) { transition-delay: 0.27s; } html.js-reveal .colors__grid > .color-card:nth-child(5) { transition-delay: 0.36s; } html.js-reveal .colors__grid > .color-card:nth-child(6) { transition-delay: 0.45s; } html.js-reveal .scenes__list .scene:nth-child(2) { transition-delay: 0.12s; } html.js-reveal .scenes__list .scene:nth-child(3) { transition-delay: 0.24s; } html.js-reveal .features__grid > .feature:nth-child(2) { transition-delay: 0.1s; } html.js-reveal .features__grid > .feature:nth-child(3) { transition-delay: 0.2s; } html.js-reveal .features__grid > .feature:nth-child(4) { transition-delay: 0.3s; } html.js-reveal .faq__list > .faq-item:nth-child(2) { transition-delay: 0.06s; } html.js-reveal .faq__list > .faq-item:nth-child(3) { transition-delay: 0.12s; } html.js-reveal .faq__list > .faq-item:nth-child(4) { transition-delay: 0.18s; } html.js-reveal .faq__list > .faq-item:nth-child(5) { transition-delay: 0.24s; } html.js-reveal .faq__list > .faq-item:nth-child(6) { transition-delay: 0.3s; } html.js-reveal .faq__list > .faq-item:nth-child(7) { transition-delay: 0.36s; } html.js-reveal .faq__list > .faq-item:nth-child(8) { transition-delay: 0.42s; } /* --------------------------------------------------------- 安全装置：万一 js-reveal が付与されても、モーション低減設定なら 隠さず即表示（二重の保険） --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* GROUP A + hero__img（静止状態で transform を持たない）: transform もリセット可 */ html.js-reveal .intro__copy, html.js-reveal .intro__logo, html.js-reveal .intro__lead, html.js-reveal .colors__grid > .color-card, html.js-reveal .showcase__item, html.js-reveal .scenes__title, html.js-reveal .scenes__list .scene, html.js-reveal .features__lead, html.js-reveal .features__intro, html.js-reveal .features__grid > .feature, html.js-reveal .compare, html.js-reveal .brand__head, html.js-reveal .brand__text, html.js-reveal .brand .btn, html.js-reveal .ranking__eyebrow, html.js-reveal .ranking__title, html.js-reveal .ranking__sub, html.js-reveal .ranking__board, html.js-reveal .check__media, html.js-reveal .faq__set, html.js-reveal .faq__title, html.js-reveal .faq__sub, html.js-reveal .faq__list > .faq-item, html.js-reveal .hero__img { opacity: 1 !important; transform: none !important; transition: none !important; } /* GROUP B（静止状態で transform を持つ）: transform には触れず不透明度のみ復帰 */ html.js-reveal .hero__title, html.js-reveal .footer > .foot-cta { opacity: 1 !important; transition: none !important; } }