/* Fix4（2026-10-14、Owner 統合修正 v01 G04・T04・S01・S04・S05・A01・A02・C02・C04・D02・D04・V01）：用途別のボタン（TOP と全下層で読み込む）。 原作の確認：21st.dev の公開プレビュー（cdn.21st.dev の bundle）で、要素の構造・class・計算値・ホバー時の変化を確認した（ソースコードは取得していない、 サンプルの文言・画像は使っていない）。 1) Interactive Hover Button（@dillionverma）：白・丸・1px の枠（zinc-200 #e4e4e7）・p-2・semibold。濃色の点（左 20%・上 40%・8px・角 8px）が ホバーで左上 0・全幅全高・1.8 倍へ広がって全体を塗る。文字は右へ 4px → ホバーで右へ 48px・透明。白い文字＋右矢印の層が右 48px から -4px へ入る（300ms）。原作は幅 128px 固定（短い英語）。日本語の文言に合わせて幅は文字に合わせ、点は左の余白の中（左 14px・上下中央）に置く。 ホバーできる端末はホバー、キーボードは :focus-visible で同じ塗り、タップは :active の間だけ（ホバーの状態は残さない）。訪問後も色は変えない。 2) ArrowFillButton の色の種類：黒（調査一覧の「詳しく見る」・調査詳細の対象リンク・相談ガイドの「すべて開いて読む」）、反転（「あわせて確認する」・ 中央区の調査項目：通常は白地・オレンジの枠と文字、ホバーで矢印の円からオレンジが広がって全体を塗り、文字は白）。形・高さ・矢印・動きは共通部品のまま。 3) 連絡CTA（電話・LINE・フォーム）の PC（1024px 以上＝既存の固定CTA を出さない PC の判定）：Rainbow Button（@dillionverma）の構造。 各ボタンの既存の外形（幅・高さ・余白・角・ヘッダーの並び）は変えない（OfficeFix1 の TOP・ヘッダーは Owner PASS。T04 の「外形まで勝手に原作へ 置き換えない」）。原作の中の塗り・縁を流れるグラデーション（200% の大きさで 2 秒ごと）・下の光（::before：幅 60%・高さ 20%・ぼかし 0.8rem）を、 箱の大きさを変えないよう縁は枠ではなく ::after（0.08rem の輪をマスクで切り出す）で描く。虹色は使わず、同じ色の明暗の 5 色：電話＝白（白〜灰）、 LINE＝緑（#06C755 の明暗）、フォーム＝オレンジ（#FF5F00 の明暗）。電話は Book a Call Button（@jatin-yadav05）の中の構造だけ：アイコン 2 個 （上が上へ抜け、下から次が入る）・文字が右へ 4px・斜めの光が抜ける。全体にホバーで影が深く・押すと 0.95 倍。モバイル（1023.98px 以下）は既存のまま。 */ /* ---------- 1) Interactive Hover Button ---------- */ .hal-ihb{--ihb-primary:#18181b;--ihb-primary-fg:#fafafa;--ihb-line:#e4e4e7;--ihb-fg:#09090b;--ihb-ease:cubic-bezier(.4,0,.2,1); position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;max-width:100%;margin:0; padding:8px 24px 8px 34px;overflow:hidden;isolation:isolate;border:1px solid var(--ihb-line);border-radius:9999px;background:#fff;color:var(--ihb-fg); font-weight:600;font-size:15px;line-height:1.45;letter-spacing:.02em;text-align:center;text-decoration:none;cursor:pointer;list-style:none; -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:middle} .hal-ihb::-webkit-details-marker{display:none} .hal-ihb::marker{content:''} .hal-ihb .hal-ihb__dot{position:absolute;left:14px;top:calc(50% - 4px);z-index:0;width:8px;height:8px;border-radius:8px;background:var(--ihb-primary);transform:scale(1); transition:all .3s var(--ihb-ease);pointer-events:none} .hal-ihb .hal-ihb__label{position:relative;z-index:1;display:inline-block;transform:translateX(4px);transition:all .3s var(--ihb-ease)} .hal-ihb .hal-ihb__hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;color:var(--ihb-primary-fg); opacity:0;transform:translateX(48px);transition:all .3s var(--ihb-ease);pointer-events:none} .hal-ihb .hal-ihb__hovertext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hal-ihb .hal-ihb__arrow{flex:0 0 auto;width:18px;height:18px} /* 塗った状態（ホバー・キーボードのフォーカス・押している間・選択中） */ @media (hover:hover){ .hal-ihb:hover .hal-ihb__dot{left:0;top:0;width:100%;height:100%;transform:scale(1.8)} .hal-ihb:hover .hal-ihb__label{transform:translateX(48px);opacity:0} .hal-ihb:hover .hal-ihb__hover{transform:translateX(-4px);opacity:1} } .hal-ihb:is(:focus-visible,:active) .hal-ihb__dot,.hal-ihb[aria-current="true"] .hal-ihb__dot{left:0;top:0;width:100%;height:100%;transform:scale(1.8)} .hal-ihb:is(:focus-visible,:active) .hal-ihb__label,.hal-ihb[aria-current="true"] .hal-ihb__label{transform:translateX(48px);opacity:0} .hal-ihb:is(:focus-visible,:active) .hal-ihb__hover,.hal-ihb[aria-current="true"] .hal-ihb__hover{transform:translateX(-4px);opacity:1} /* テーマ（Astra の button・a の状態、各ページの旧規則）の色・下線・影を当てない */ html body .hal-ihb.hal-ihb:is(:link,:visited,:hover,:focus,:focus-visible,:active){background:#fff;color:var(--ihb-fg);border-color:var(--ihb-line);text-decoration:none;box-shadow:none;opacity:1} html body .hal-ihb.hal-ihb:focus{outline:none} html body .hal-ihb.hal-ihb:focus-visible{outline:2px solid var(--ihb-primary);outline-offset:3px} @media (prefers-reduced-motion:reduce){.hal-ihb :is(.hal-ihb__dot,.hal-ihb__label,.hal-ihb__hover){transition:none}} /* 開閉（）を開いている間：開いていることが分かるよう濃色の枠 */ html body details[open]>summary.hal-ihb.hal-ihb{border-color:var(--ihb-primary)} /* ---------- 2) ArrowFillButton：黒・反転（共通部品の色の変数だけを変える。:not(#…) は一致しない id で詳細度を共通規則より上げる） ---------- */ .hal-afb.hal-afb--black:not(#hal-f4-a):not(#hal-f4-b){--btn-bg:#000;--btn-text:#fff;--btn-fill-bg:#fff;--btn-fill-text:#000;--btn-arrow:#000;--afb-focus:#000;border-color:#000} .hal-afb.hal-afb--black:not(#hal-f4-a):not(#hal-f4-b):is(:hover,:active,:focus,:focus-visible){background:#000;border-color:#000;color:#fff} .hal-afb.hal-afb--invert:not(#hal-f4-a):not(#hal-f4-b){--btn-bg:#fff;--btn-text:#ff5f00;--btn-fill-bg:#ff5f00;--btn-fill-text:#fff;--btn-arrow:#fff;--afb-focus:#1b1813;border-color:#ff5f00} .hal-afb.hal-afb--invert:not(#hal-f4-a):not(#hal-f4-b):is(:hover,:active,:focus,:focus-visible){background:#fff;border-color:#ff5f00;color:#ff5f00} /*