/* ============================================== Animations 控えめ方針: fade (opacity 0→1) + 16px rise, 0.5s ease-out - 隠すのは JS 有効時 (.js on ) のみ → JS無効/失敗時は全て表示 - prefers-reduced-motion で全無効化 ============================================== */ /* --- スクロール登場: トップページの hero 以降のセクション --- */ .js .hero ~ section { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .js .hero ~ section.is-visible { opacity: 1; transform: none; } /* --- ヒーロー: 初期ロードで下から順にフェードイン (stagger) --- */ @keyframes urulab-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .js .hero__inner > * { opacity: 0; animation: urulab-fade-up 0.5s ease-out forwards; } .js .hero__tagline { animation-delay: 0.05s; } .js .hero__title { animation-delay: 0.15s; } .js .hero__sub { animation-delay: 0.25s; } .js .hero__lead { animation-delay: 0.35s; } .js .hero__cta { animation-delay: 0.45s; } .js .hero__badges { animation-delay: 0.55s; } /* --- モーション無効設定を尊重: すべて即表示・動きなし --- */ @media (prefers-reduced-motion: reduce) { .js .hero ~ section, .js .hero ~ section.is-visible, .js .hero__inner > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }