/* Fix5（2026-10-14、Owner 指示 v02「第2回Owner修正」）：TOP と全下層で読み込む（Fix4 の CSS の後）。 1) P01・S07 PC ヘッダーの 3 つの CTA（電話・LINE・フォーム）だけ Rainbow Button（@dillionverma）の構造：塗り／上半分を塗りで覆う縦のグラデーション／ 横のグラデーションの 3 層（background-clip: padding-box, border-box, border-box、background-origin: border-box）、透明な枠、200% の大きさで 背景の位置を 2 秒ごとに流す、下の光（::before：下 -20%・幅 60%・高さ 20%・ぼかし 0.8rem）。虹色は使わず、光は 1 色の明るさ（透明度）だけ： 電話＝白、LINE＝緑 #06C755、フォーム＝オレンジ #FF5F00。色の値はヘッダーのボタンにだけ置く（:root には置かない）。 → Fix6（2026-10-14、Owner 指示 v03 A01）：3 つの背景（塗り）を電話の濃色 #27272A（--f5-fill:39 39 42）に統一。フォーム「プライベート相談予約」の 白い地を廃止し、文字を白に（通常・ホバー・フォーカス・押下・訪問済みのすべて）。光と縁の色（電話＝白、LINE＝緑、フォーム＝オレンジ）・Rainbow の 構造・寸法・文言・リンク先・計測属性は Fix5 のまま。モバイルは変更なし。 ボタンの位置・幅・高さ・余白・文言・塗り・文字色は Fix4 の拡大前（OfficeFix1・Fix3）のまま：LINE と予約は既存の 1px の枠を透明にして使い、 電話は 1px の透明な枠を足した分だけ左右の余白を 1px 減らす（幅 236px／1024〜1279px は 228px のまま）。LINE の塗りは元の透明と同じ見た目の ヘッダーの地の色 #1a1a1a。電話の中の構造は Fix3 のまま（Book a Call の部品は使わない）。モバイルは変更なし。 2) P03・S01・S02・S03・S06 TOP の調査の流れ・相談ガイド・調査詳細の中間と末尾・料金ページ下部・中央区下部の相談導線：周囲の光の輪（::after）と 下の光（::before）だけを外す。塗り・形・文字・並び・遷移先・押したときの動きは Fix4 のまま。TOP の調査項目の CTA（.hh-cta）はそのまま（P02）。 3) S04 相談者の声の FV「CASE NN で全文と調査事例を読む」（PC）：通常は黒の地・白い文字と点、ホバーで白い地・黒い文字と矢印（Interactive Hover の 形・動き・アンカーは同じ）。モバイルは変更なし。 → Fix6（2026-10-14、Owner 追加指示「相談者の声FVカード」②）：このボタンに限り黒→白の指定を更新。PC・モバイル共通で、通常はオレンジ #FF5F00 の地・ 白い文字・オレンジの枠、ホバー（モバイルは押している間）で白い地・オレンジの文字・オレンジの枠。形・寸法・文字と矢印の動き・文言・リンク先は同じ。 4) P04 TOP コラム：最新 3 件を自動で出す（inc/adopted/column.php）。承認済みの改行の指定が無い新しい題名は、PC でも折り返して見切れないようにする。 5) M01 料金ページ「調査の種類から探す」（モバイル）：分類のリンクの列の直下に ← 01 / 08 →（assets/subpages/js/cost-cat-pager.js）。参照は 21st.dev 「The Pagination」（cdn.21st.dev/lyanchouss/the-pagination の公開プレビュー）：透明のボタン・角 8px・ホバーで薄い灰・無効は 40%・フォーカスの輪 2px、 矢印 20px。左右のボタンは 44×44px、番号は 16px。 */ /* ---------- 1) PC ヘッダー：Rainbow の構造（単色の光） ---------- → Fix7（2026-10-15、Owner 指示 v04 PC-02「ヘッダーCTAの回転発光は停止し、下部だけ優しく光っている状態」）：本体と ::before の連続の動き （背景の位置を流す animation）と、枠に出ていた光の層（横のグラデーション・縦のグラデーション）を外した。背景は #27272A の塗りだけで、透明な 1px の枠の位置まで同じ色（枠に光を出さない）。光は下の ::before だけ：下の中央・幅 60%・高さ 20%・ぼかし 12.8px・不透明度 0.35 の静止した 1 色（電話＝白、LINE＝#06C755、フォーム＝#FF5F00）。通常・ホバー・フォーカス・押下で同じ。文字色・文言・寸法・位置・リンク先・計測属性・ フォーカスの輪は同じ。モバイル・ヘッダー以外は対象外。 → Fix8（2026-10-15、Fix4 からの追加修正指示 ①「Chrome・Safari の光の見え方を揃える」）： ・下辺の細い光（新しい層 ::after）：ボタンの下辺の 1px（透明な枠の行）に、ぼかしの無い高輝度の線を 1 本。色は光と同じ（電話＝白、LINE＝#06C755、 フォーム＝#FF5F00）、両端だけ横に薄くする。上辺・左右の辺には出さない。 ・その下に拡散する光（既存の層 ::before）：Fix4 の光は Chrome の実測（隔離 WP、ヘッドレスと GPU の実 Chrome、DPR 1・2）で、祖先の overflow・ clip-path・contain を全部外しても画素が変わらず（切れていない）、重なり順もボタンの地の上（z-index 0）だった。弱いのは値そのもの （高さ 7.6px の光源・ぼかし 12.8px・不透明度 0.35 → 明るい所でも約 8%）で、白い光はヘッダーの下端（ボタンの 19px 下）から先の白い本文では 見えなかった。Safari の描画は測れていない（未確認）。ぼかしのフィルター（ブラウザーで処理が分かれうる）をやめ、ボタンのすぐ下の楕円の グラデーション（中央 0.4 → 半分の位置 0.14 → 縁で 0、幅 80%・高さ 16px、ヘッダーの中に収まる）にした。 ・どちらも静止（animation・transition なし）。通常・ホバー・フォーカス・押下で同じ。背景・文字・寸法・位置・リンク先は変えない。 → Fix9（2026-10-15、Fix5 からの追加修正指示 ①「光を淡くする」）：1px の線が明るすぎるため、太さ 1px のまま強さだけ下げた。線（::after）の中央の 不透明度 1.0 → 0.45、拡散光（::before）の中央 0.4 → 0.25・中間 0.14 → 0.08。両端の透明へのフェード・色・位置・幅・高さは同じ。 */ @media (min-width:1024px){ :is(#hal-wp-fv,.hal-lp) .hal-header a:is(.hal-header__tel,.hal-header__cta-btn--line,.hal-header__cta-btn--book):not(#hal-f5-a):not(#hal-f5-b), :is(#hal-wp-fv,.hal-lp) .hal-header a:is(.hal-header__tel,.hal-header__cta-btn--line,.hal-header__cta-btn--book):not(#hal-f5-a):not(#hal-f5-b):is(:hover,:focus,:focus-visible,:active,:visited){ position:relative;border-style:solid;border-color:transparent; background:rgb(var(--f5-fill));background-clip:border-box;background-origin:border-box;animation:none} :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__tel:not(#hal-f5-a):not(#hal-f5-b){--f5-fill:39 39 42;--f5-glow:255 255 255;border-width:1px;padding-left:13px;padding-right:13px} :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__cta-btn--line:not(#hal-f5-a):not(#hal-f5-b){--f5-fill:39 39 42;--f5-glow:6 199 85} :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__cta-btn--book:not(#hal-f5-a):not(#hal-f5-b){--f5-fill:39 39 42;--f5-glow:255 95 0} /* Fix6 A01：濃色の地で読めるよう、フォームの文字を白に（電話・LINE は既存の白のまま。全状態で同じ） */ :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__cta-btn--book:not(#hal-f5-a):not(#hal-f5-b), :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__cta-btn--book:not(#hal-f5-a):not(#hal-f5-b):is(:hover,:focus,:focus-visible,:active,:visited){color:#fff} :is(#hal-wp-fv,.hal-lp) .hal-header a:is(.hal-header__tel,.hal-header__cta-btn--line,.hal-header__cta-btn--book):not(#hal-f5-a):not(#hal-f5-b)::before{ content:'';display:block;position:absolute;left:50%;top:calc(100% + 1px);bottom:auto;z-index:0;width:80%;height:16px;transform:translateX(-50%);pointer-events:none; background:radial-gradient(50% 100% at 50% 0,rgb(var(--f5-glow) / .25),rgb(var(--f5-glow) / .08) 50%,rgb(var(--f5-glow) / 0) 100%);filter:none;opacity:1;animation:none;transition:none} :is(#hal-wp-fv,.hal-lp) .hal-header a:is(.hal-header__tel,.hal-header__cta-btn--line,.hal-header__cta-btn--book):not(#hal-f5-a):not(#hal-f5-b)::after{ content:'';display:block;position:absolute;left:0;right:0;top:auto;bottom:-1px;z-index:1;width:auto;height:1px;pointer-events:none; background:linear-gradient(90deg,rgb(var(--f5-glow) / 0),rgb(var(--f5-glow) / .45) 16%,rgb(var(--f5-glow) / .45) 84%,rgb(var(--f5-glow) / 0)); border:0;border-radius:0;box-shadow:none;filter:none;opacity:1;transform:none;animation:none;transition:none} } @media (min-width:1024px) and (max-width:1279.98px){ :is(#hal-wp-fv,.hal-lp) .hal-header a.hal-header__tel:not(#hal-f5-a):not(#hal-f5-b){padding-left:9px;padding-right:9px} } /* ---------- 2) 指定の相談導線から周囲の光の輪と下の光を外す（PC。Fix4 の ::after・::before） ---------- */ @media (min-width:1024px){ body #hal-wp-flow a.urgent::after,body #hal-wp-flow a.urgent::before, .hal-lp .hal-guide-cta .hal-sub3-cta__actions>a.hal-afb::after,.hal-lp .hal-guide-cta .hal-sub3-cta__actions>a.hal-afb::before, .hal-lp .hal-guide-cta .hal-sub3-cta__subs>a::after,.hal-lp .hal-guide-cta .hal-sub3-cta__subs>a::before, .hal-lp .hal-sub1-cta:is(.hal-sub1-cta--middle,.hal-sub1-cta--final) .hal-sub1-cta__actions>a.hal-afb::after, .hal-lp .hal-sub1-cta:is(.hal-sub1-cta--middle,.hal-sub1-cta--final) .hal-sub1-cta__actions>a.hal-afb::before, .hal-lp .hal-sub1-cta:is(.hal-sub1-cta--middle,.hal-sub1-cta--final) .hal-sub1-cta__subs>a::after, .hal-lp .hal-sub1-cta:is(.hal-sub1-cta--middle,.hal-sub1-cta--final) .hal-sub1-cta__subs>a::before, .hal-lp .hal-chuo-cta .hal-sub1-cta__actions>a.hal-afb::after,.hal-lp .hal-chuo-cta .hal-sub1-cta__actions>a.hal-afb::before, .hal-lp .hal-chuo-cta .hal-sub1-cta__subs>a::after,.hal-lp .hal-chuo-cta .hal-sub1-cta__subs>a::before, /* Fix6（v03 A03）：FAQ 専用ページの相談の箱（新しいページへ Rainbow の光を足さない。相談ガイドと同じ扱い） */ .hal-lp .hal-faqp-cta .hal-sub3-cta__actions>a.hal-afb::after,.hal-lp .hal-faqp-cta .hal-sub3-cta__actions>a.hal-afb::before, .hal-lp .hal-faqp-cta .hal-sub3-cta__subs>a::after,.hal-lp .hal-faqp-cta .hal-sub3-cta__subs>a::before{content:none!important;display:none!important;animation:none!important} } /* ---------- 3) S04 → Fix6 相談者の声の全文リンク（PC・モバイル共通）：通常はオレンジ、ホバー（モバイルは押下）で白 ---------- Interactive Hover の仕組みのまま：ボタンの地＝通常の色、点（--ihb-primary）が広がって白い地になり、その上の文字と矢印（--ihb-primary-fg）がオレンジ。 Fix5 の PC だけの黒の指定はこの規則に置き換えた（競合なし）。対象はこのボタンだけ（共通の Interactive Hover には当てない）。 */ html body .hal-lp.hal-case-studies .hal-tc__more.hal-ihb:not(#hal-f5-a):not(#hal-f5-b){--ihb-primary:#fff;--ihb-primary-fg:#ff5f00;--ihb-line:#ff5f00} html body .hal-lp.hal-case-studies .hal-tc__more.hal-ihb:not(#hal-f5-a):not(#hal-f5-b), html body .hal-lp.hal-case-studies .hal-tc__more.hal-ihb:not(#hal-f5-a):not(#hal-f5-b):is(:link,:visited,:hover,:focus,:focus-visible,:active){background:#ff5f00;color:#fff;border-color:#ff5f00} html body .hal-lp.hal-case-studies .hal-tc__more.hal-ihb:not(#hal-f5-a):not(#hal-f5-b):focus-visible{outline:2px solid #ff5f00;outline-offset:3px} /* ---------- 4) P04 TOP コラム：承認済みの改行の指定が無い題名（新しい記事）は折り返す ---------- */ #hal-column-review-v02 .article-title.article-title--auto{white-space:normal;overflow-wrap:anywhere;word-break:auto-phrase} /* ---------- 5) M01 料金ページ「調査の種類から探す」：モバイルの横移動の操作 ---------- */ .hal-sub1--cost .hal-cat-pager{display:none} .hal-cat-pager__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (max-width:767.98px){ .hal-sub1--cost .hal-sub2-cats__list{scroll-snap-type:x mandatory;scroll-padding-left:16px} .hal-sub1--cost .hal-sub2-cats__item{scroll-snap-align:start} .hal-sub1--cost .hal-sub2-cats__list::after{content:'';flex:0 0 var(--hal-cat-tail,0px)} .hal-sub1--cost .hal-cat-pager:not([hidden]){display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 0} .hal-sub1--cost .hal-cat-pager__nav, .hal-sub1--cost .hal-cat-pager__nav:is(:hover,:focus,:focus-visible,:active){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px; margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:#1b1813;box-shadow:none;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent; transition:background-color .15s ease,opacity .15s ease} .hal-sub1--cost .hal-cat-pager__nav svg{display:block;width:20px;height:20px;flex:0 0 auto} @media (hover:hover){.hal-sub1--cost .hal-cat-pager__nav:hover{background:#f5f5f5}} .hal-sub1--cost .hal-cat-pager__nav:active{background:#f0f0f0} .hal-sub1--cost .hal-cat-pager__nav:focus{outline:none} .hal-sub1--cost .hal-cat-pager__nav:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1b1813} .hal-sub1--cost .hal-cat-pager__nav:disabled{opacity:.4;pointer-events:none;cursor:default;background:transparent} .hal-sub1--cost .hal-cat-pager__summary{margin:0;min-width:88px;text-align:center;font-family:var(--hal-mono,'Space Mono',monospace);font-size:16px;font-weight:500;line-height:1.5; letter-spacing:.06em;color:#1b1813;font-variant-numeric:tabular-nums;white-space:nowrap} .hal-sub1--cost .hal-cat-pager__sep{margin:0 .35em;color:var(--s1-muted,#6b6356)} } @media (max-width:767.98px) and (prefers-reduced-motion:reduce){.hal-sub1--cost .hal-cat-pager__nav{transition:none}}