/* ========================================================= Bloomy Support pages micro-animations 対象: .bloomy-contact / .bloomy-support のみ（他ページ非干渉） - 控えめ・上品・信頼感優先。常時動作なし。 - JSが に .bloomy-anim-on を付与した時だけ表示アニメを有効化 （JS未動作なら要素は最初から見える＝FOUC/非表示事故なし）。 - prefers-reduced-motion: reduce では一切アニメしない。 ========================================================= */ /* FAQの開閉高さアニメ用（JSが height を制御）。motion設定に関係なく overflow は固定 */ .bloomy-support-qa__body { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { /* 1) スクロール表示：ふわっと（opacity 0→1 / translateY 10px→0）。 .bloomy-anim はJSが対象ページ(contact/support/legal等)内の要素にのみ付与するため、 html.bloomy-anim-on .bloomy-anim だけで実質スコープされる。 */ html.bloomy-anim-on .bloomy-anim { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } html.bloomy-anim-on .bloomy-anim.is-in { opacity: 1; transform: none; } /* 2) FAQアコーディオン：本文の柔らかいフェード（高さはJSがなめらかに変える／矢印回転はsupport.css） */ .bloomy-support-qa[open] > .bloomy-support-qa__body { animation: bloomy-qa-fade 0.32s ease; } @keyframes bloomy-qa-fade { from { opacity: 0; } to { opacity: 1; } } /* 3) 主CTA hover/tap：ほんの少し浮く／沈む（影変化は控えめ） */ .bloomy-contact-cta, .bloomy-support-cta__btn { transition: transform 0.14s ease, background 0.15s ease, box-shadow 0.18s ease; } .bloomy-contact-cta:hover, .bloomy-support-cta__btn:hover { transform: translateY(-1.5px); box-shadow: 0 12px 24px -12px rgba(21, 116, 245, 0.6); } .bloomy-contact-cta:active, .bloomy-support-cta__btn:active { transform: translateY(1px); } } /* 開いているFAQ項目だけ、ごく薄く背景を変える（motion設定に関係なく適用・控えめ） */ .bloomy-support-qa[open] { background: #fbfdff; }