/* [2026-09-06 15:30] 本番と同じ内容に戻した。変更は1点だけ: CTAの帯を選ぶ書き方を [style*="linear-gradient(135deg, #f8f9fa"] → .cta-inline-box に。前者は coating.php の同じ地色の 全幅ブロックまで巻き込み、薄い地に白文字（読めない）を本番に出していた。parts/cta-inline.php に同クラス付与済み */ /* ============================================================================ design-unify.css — 見た目のガタつきを揃える（2026-09-06 新規） 【なぜ作ったか】 運用者のお言葉: 「プロテクションフィルムページも、コンテンツごとに幅が違ってガタガタで、なんなんだこれ」 「ヘッダー・フッター、その他デザイン的に左右いっぱいを使うデザインと、 途中途中のコンテンツは1260のセンタリングが普通じゃないのか？」（2026-09-05） 【実測したガタつきの原因】（運用上の判断） 1位 背景色20種（明るい地が #fff / #fbf8f3 / #f8f9fa の3つ） 2位 H2が8種類（24/27/28/29/32px・5色） 3位 本文の左端が65種類 4位 縦の間隔7種（mt150 / mt128 が突出） 5位 コンテナ幅3〜4種（1320 / 1440 / 960 / 720）← 幅は5番目 【このファイルの決まり】 ・🚨 効くのは **#wrapper に du の印が付いたページだけ**（2026-09-16 改訂） 印の付け方:
head-styles.php の は全ページに置いてよい。印が無いページには 1 行も当たらない。 ＝ 配るのは 1 回で済み、効かせるのはページごとに 1 枚ずつ刻める。 （2026-09-06 は「#wrapper の中に常に効く」＝スイッチ撤去 と書いていたが **2026-09-16 に失効**。理由は実測で分かった 3 つ: ① #wrapper はヘッダーとフッターを含む（index.php:292 / :298 / :932）。 「ヘッダー・フッターは全幅のままにする」というこのファイル自身の前提が破れていた ② 効く先は 32 ページではなく **約 62 ページ**（parts/area-template.php 経由で 地域ページ 31 本が入る）。地域ページは誰も見ていなかった ③ pricelist_new.php には #wrapper が無く、そこだけ揃わない＝ 統一のつもりで新しい不揃いを 1 件作ってしまう ） ・!important は使わない **……という決まりだったが、実際には 74 箇所で使っている** （2026-09-16 実測）。上の `du` の印で効く範囲が閉じたので、 印を外せばルールごと当たらなくなる＝可逆性はそちらで担保する。 **新しく !important を足さないこと。** ・calc() は必ず max() で包む（画面が基準幅より狭いと負値になり、宣言ごと破棄される） ・coating-unify.css には追記しない（コーティング本番が即座に動くため） ・縦の間隔（mt150等）はHTML直書きが3ページで650箇所あるため、ここでは扱わない（別作業） ========================================================================== */ :root { --du-w: 1260px; /* 標準幅（2026-09-05 ご指示） */ --du-w-read: 680px; /* 読み物幅。JIS X 4051「横書き1行15〜40全角」から算出 */ --du-gut-pc: 40px; /* PC・タブレットの左右余白 */ --du-gut-sp: 20px; /* スマホの左右余白 */ --du-bg-a: #FFFFFF; /* 地色A（奇数セクション） */ --du-bg-b: #F7F5F2; /* 地色B（偶数セクション）。#fbf8f3 と #f8f9fa を1色に統合 */ --du-ink: #1A1A1A; /* 見出しの色 */ --du-accent: #2B3A4A; /* アクセント（濃紺グレー）。Bootstrap既定の #0d6efd を置き換える */ --du-muted: #6B6B6B; /* 添え字 */ --du-r-card: 8px; /* 角丸・カード */ --du-r-btn: 6px; /* 角丸・ボタン */ --du-sh: 0 2px 8px rgba(0,0,0,.08); /* 影・静止 */ --du-sh-hover:0 4px 16px rgba(0,0,0,.12); /* 影・ホバー */ } /* --- 1. 幅を1260pxに揃える -------------------------------------------- */ /* Bootstrap の .container は xxl で 1320px。誰かが決めた数字ではなく初期値 */ #wrapper.du .container, #wrapper.du .container-sm, #wrapper.du .container-md, #wrapper.du .container-lg, #wrapper.du .container-xl, #wrapper.du .container-xxl { max-width: var(--du-w); margin-left: auto; margin-right: auto; } /* 背景を全幅で敷くブロックは、背景はそのまま・中身だけ1260中央にする。 max() が無いと画面が1260px未満のとき負値になり、宣言ごと捨てられる */ #wrapper.du > section > .container-fluid, #wrapper.du > div.container-fluid, #wrapper.du main > section > .container-fluid, #wrapper.du main > div.container-fluid { padding-left: max(var(--du-gut-pc), calc((100% - var(--du-w)) / 2)); padding-right: max(var(--du-gut-pc), calc((100% - var(--du-w)) / 2)); } /* ページ内で使っている「中くらいの幅」も1260に寄せる（960 → 1260） */ #wrapper.du .ppf-mid, #wrapper.du .cf-mid { max-width: var(--du-w); } /* 【2026-09-06 修正】ここを 680px にしたところ、CTAブロックなど `.cf-narrow` を使う箱が 周囲の1260pxに対して極端に細くなり、運用者から 「なぜこのセクションだけこんな小さくする必要があるんか？」とご指摘。 読み物幅は「長い文章そのもの」に当てるもので、ブロックの箱に当ててはいけない。 箱は標準幅にそろえる。 */ #wrapper.du .ppf-narrow, #wrapper.du .cf-narrow { max-width: var(--du-w); } /* --- 2. 背景色を3種に揃える ------------------------------------------- */ #wrapper.du .ppf-white, #wrapper.du .cf-white { background: var(--du-bg-a); } #wrapper.du .ppf-gray, #wrapper.du .cf-gray { background: var(--du-bg-b); } /* 共通部品が持っている中途半端な明るい地も1色に寄せる */ #wrapper.du .v0-bg-alt, #wrapper.du .section-wrapper.v0-bg-alt, #wrapper.du .bg-light-section, #wrapper.du .bg-light { background: var(--du-bg-b); } /* 🚨 !important を使う2箇所目。 「一日にお受けできる台数を…」のブロックは HTML に style="background:#fbf8f3" と 直書きされている。直書きはCSSでは勝てないので、ここだけ !important で寄せる。 影響は #wrapper の中に閉じる。 （HTML側を直すのが本筋だが、この部品は他ページでも使うため今は触らない） */ #wrapper.du > section[style*="fbf8f3"], #wrapper.du main > section[style*="fbf8f3"], #wrapper.du [style*="background:#fbf8f3"], #wrapper.du [style*="background: #fbf8f3"] { background: var(--du-bg-b) !important; } /* --- 3. 見出しを1種類に揃える ----------------------------------------- */ /* 🚨 !important を1箇所だけ使う理由（2026-09-06 実測） 既存CSSに `.h2 { font-size: 2rem !important }` があり、!important は どんな詳細度にも勝つため、普通の書き方では上書きできなかった （代車ブロックの見出しだけ32pxのまま残っていた）。 この行は `#wrapper` の中でしか当たらないので、スイッチを外せば ルールごと効かなくなる＝「完全に元通り」は保たれる。 */ /* 【2026-09-06 修正】.section-title を h2 と同じ扱いにしたのが誤りだった。 料金ブロックの「リア全面」等はブロックの見出しで、28pxにしたら 青いベタ塗りの箱が余計に大きく見えるようになった（ご指摘）。 PPF側の `h2.section-title` は h2 セレクタで拾えるので、ここから外す。 */ #wrapper.du h2, #wrapper.du .h2, #wrapper.du .ppf-sh h2, #wrapper.du .cf-sh h2 { font-size: 28px !important; font-weight: 700; color: var(--du-ink); line-height: 1.4; margin-top: 0; margin-bottom: 24px; } /* 🚨 [2026-09-16 追記] 大きな区切りの見出しだけ 34px に残す。 h2 を 1 種類（28px）に揃えたら、**ページの大きな区切りの合図が本文の強調と同じ強さまで落ちた** （V0 の事後チェックで指摘。本番の実画面で確認した）。 実測すると 40px だったのは `.target-main-title` の 1 クラスだけ（はっ水 5 個・親水 7 個）で、 他は 28.8〜32px だった。ここだけ 34px に戻せば **2 種類（34/28）** で済み、 社長のご指摘「H2 が 8 種類（24/27/28/29/32px）」も満たしたまま強弱が戻る。 ⚠ これ以上 段を増やさない。増やすなら実測で「何クラスか」を先に数えること。 */ #wrapper.du h2.target-main-title { font-size: 34px !important; } #wrapper.du h3, #wrapper.du .ppf-sh h3, #wrapper.du .cf-sh h3 { font-size: 20px; font-weight: 600; color: var(--du-ink); line-height: 1.5; margin-bottom: 16px; } /* --- 4. 角丸を2種に揃える --------------------------------------------- */ #wrapper.du .card, #wrapper.du .ppf-card, #wrapper.du .cf-card, #wrapper.du .ppf-link-box, #wrapper.du .cf-link-box, #wrapper.du table { border-radius: var(--du-r-card); } #wrapper.du .btn, #wrapper.du .badge { border-radius: var(--du-r-btn); } /* 丸くする意図がある要素（アイコンの丸背景など）は例外として残す */ #wrapper.du .rounded-circle { border-radius: 50%; } /* --- 5. 影を2種に揃える ----------------------------------------------- */ #wrapper.du .card, #wrapper.du .ppf-card, #wrapper.du .cf-card, #wrapper.du .shadow, #wrapper.du .shadow-sm { box-shadow: var(--du-sh); } #wrapper.du .card:hover, #wrapper.du .ppf-card:hover, #wrapper.du .cf-card:hover { box-shadow: var(--du-sh-hover); } /* --- 5.5 読み物幅（2026-09-16 新設・V0＋専門家3名＋Perplexity の討議で決定）----- 箱は 1260px のまま、**長い文章だけ** 640px（全角 40 字）に収めて左寄せにする。 ・640px の根拠: WCAG 1.4.8 は日本語 40 字以下。W3C の日本語組版要件も横組み最大 40 字。 本文 16px × 40 字 = 640px ・左寄せの根拠: 本番の実測で、本文の左端が器より 150px 内側にあった（本文 240 / 器 90 / 見出し 102）。 段落に入るたび読み手が左端を探し直す形だった。中央寄せ案もあったが 2 対 1 で左寄せ ・🚨 **汎用クラス（`mb-0`・`small`・`site-description`）には絶対に当てない。** 実測: `mb-0` は 123 ファイル 465 箇所で、うち表 45・ラベル 12・定義リスト 20 など箱が半分。 `site-description` はヘッダーの 1 行 SEO 文（本文ではない・37 ファイル共通）。 当てると料金比較表が 640px に潰れ、中央寄せの注記が左端に張り付く ・見分け方は **本文専用のクラスを名指し** ＋ 直下セレクタ `>`（カードの中には当たらない） ・PPF ページ側の `.ppf-body` は `protectionfilm.php` の中に同じ規則がある（あちらが正） */ #wrapper.du .area-section-lead, #wrapper.du .service-local-note, #wrapper.du .service-diff, #wrapper.du .hero-description, /* 🚨 [2026-09-16 16:10 撤回] ここに .worth-warning-box p / .info-card > p / .climate-card > p / .craftsman-card p を入れていたが、**実物で見て取り消した**。 箱の幅 1236px に対して文章が 575px しか無く、**右が 53〜55% 空いて** 「中身が読み込めなかった」ように見えた（濃紺の箱で特に目立つ）。 可読性の専門家は最初から「カード内の説明文は原則適用しない（カード幅に従う）」と 書いており、それを破ったのが原因。**囲みのある箱の中には当てない。** 箱の中の長文（79〜82 字）をどうするかは、箱を細くするか段組みにするかの設計判断が要る。 HTML を変えずに幅だけで解くと必ずこの空白が出る。 */ /* カーフィルム側の本文（2026-09-16 実測で追加）。 .cf-body は .cf-notice-box の中にも入るので直下セレクタ `>` は使わない（80 字の段落がそこにあった）。 中央寄せのセクション見出しの文（.cf-sh > p）は入れない。左寄せにすると見出しの体裁が崩れる。 */ #wrapper.du .cf-body, #wrapper.du .cf-hero-lead, /* コーティング（はっ水・親水）・クリーニングの本文（2026-09-16 実測で追加）。 どちらも囲みのある箱ではないので、左寄せの読み物幅を当ててよい。 .features-article-prose は共通部品 parts/features-benefits-section.php の本文。 .quality-content の中の列は器を広げた分だけ本文が 59→78 字に伸びていた。 */ #wrapper.du .features-article-prose, #wrapper.du .quality-content p, #wrapper.du .plan-detail-desc { max-width: 40em; /* ＝全角40字ちょうど。px で書くと文字サイズが変わったとき字数がずれる */ margin-left: 0; margin-right: 0; } /* --- 5.6 囲みのある箱の中の長文（2026-09-16・V0＋専門家3名＋Perplexity の討議で決定）--- 【原因】5.5 の下にある「② 細い列を標準幅に戻す」規則が、**文章だけのカードを包む列まで 広げていた**（2026-09-16 に私が入れた規則）。実測と計算が一致: .info-card 元 .col-lg-9 927px（61字） → 1236px（82字） .climate-card 元 .col-lg-10 1032px（68字） → 1236px（82字） つまり 82 字は元からの不具合ではなく、この日つくった後退だった。 【却下した案（すべて実物を作って確かめたうえで）】 ・本文に読み物幅（40em）… 箱 1236px に対し文章 575px ＝ **右が 53〜55% 空く**。撤回済み ・箱ごと 760px に細くする … **箱の左端が 102px → 340px に動く**（見出し・器と揃わなくなる）。 社長が `.cf-narrow` を 680px にして叱った形と同じ。V0 も自案を撤回 ・2 段組み（columns: 34em auto）… 箱は埋まり 39 字になるが、**段の境目で語が割れる** （実物で「黄／砂」「効果が薄れるた／びに」を確認） ・本文 19px … 1 行 57 字になるが、**見出し（17.6px / worth は 16px）より本文が大きくなり 階層が逆転する**（実測）。V0「実害である」 【採った形】箱の幅も左端も 1px も変えない。内側の左右余白と文字の大きさだけ変える。 1 行 82 字 → **約 63 字**。語は割れず、右も空かず、左端も動かない。 スマホ（767px 以下）は今までどおり（幅 100%）。 */ @media (min-width: 768px) { #wrapper.du .info-card, #wrapper.du .climate-card, #wrapper.du .worth-warning-box { padding-left: 80px; padding-right: 80px; } #wrapper.du .info-card > p, #wrapper.du .climate-card > p, #wrapper.du .worth-warning-box p { font-size: 17px; line-height: 36px; } /* 🚨 .worth-warning-box の見出しだけ 16px で、本文 17px にすると **本文の方が大きくなり階層が逆転する**（実測。他の 2 箱は見出し 17.6px なので起きない）。 V0「実害である」。この箱の見出しだけ 18px に上げて解消する。 文言・アイコン・太さ（600）は変えない。 */ #wrapper.du .worth-warning-box h3 { font-size: 18px; } } /* --- 5.7 段落と段落の間（2026-09-16・V0＋組版の専門家の討議で決定）----------- 【何が起きていたか】隣り合う段落 27 組のうち **19 組（70%）で、段落の間が行送りより狭い**（実測）。 いちばん狭い `.cf-feature-card` は **0px** で、書き手が 2 段落に分けた文章が 1 段落に見えていた。 「文章を 1 文字も変えない」の裏側は「書き手が入れた段落の切れ目も 1 つも失わせない」。 【1.4em の根拠】**サイト内に既に正解がある。** `.features-article-prose` は 24px / 行送り 30px ＝ 0.79 倍で、ここは妥当と判定済み。1.4em は全箱で 0.75〜0.83 倍に収まり 0.79 を挟む。 **この件で新しく決める数字は 1 つも無い**のが決め手。 （V0 は 1.3em を推したが、それだと `.features-article-prose` を 24 → 20.8px に**狭めて** 既に妥当な箇所を悪くするので採らなかった） 【器を名指しする理由】🚨 `p + p` は使えない。実測で PPF は 69 組のうち**本文は 16 組だけ**で、 残り 53 組は「表示価格はすべて税込です。」「可視光線透過率計 PT-500」「— スタートラスト 施工担当」 といった**注記・キャプション・署名**だった。一律に広げると、意図して詰めてある組み合わせがばらける。 `mb-0` のときと同じ罠。**実測で狭いと出た器だけを名指しする。** 【注記は別扱い】※ の但し書き（`.text-start.mx-auto`）は ・本文から注記へ降りる境目 … 2.1em（性格が変わる合図） ・※ どうしの間 … 0.7em（同列の物なので詰める） にする。全部同じにすると、控えめな但し書きが独立した主張に見えてしまう。 */ /* ⚠ 直下の `>` では届かない入れ子があった（実測で .ppf-card / .cf-link-box / .quality-content の中の列が残った）。子孫セレクタにする。 それでも `p` 単独には当てない（69 組のうち 53 組が注記・キャプション・署名）。 */ #wrapper.du .cf-feature-card p, #wrapper.du .ppf-card p, #wrapper.du .ppf-body p, #wrapper.du .cf-notice-box p, #wrapper.du .cf-link-box p, #wrapper.du .plan-card-h-info p, #wrapper.du .quality-content p, #wrapper.du .features-article-prose p { margin-bottom: 1.4em; } /* 箱の下辺が「段落の間 ＋ 内側余白」の二重にならないようにする */ #wrapper.du .cf-feature-card p:last-child, #wrapper.du .ppf-card p:last-child, #wrapper.du .ppf-body p:last-child, #wrapper.du .cf-notice-box p:last-child, #wrapper.du .cf-link-box p:last-child, #wrapper.du .plan-card-h-info p:last-child, #wrapper.du .quality-content p:last-child, #wrapper.du .features-article-prose p:last-child { margin-bottom: 0; } /* ※ の但し書き（全ページ共通の部品・代車の注意書き） */ #wrapper.du .text-start.mx-auto { margin-top: 2.1em; } #wrapper.du .text-start.mx-auto > p { margin-bottom: 0.7em; } #wrapper.du .text-start.mx-auto > p:last-child { margin-bottom: 0; } /* --- 5.8 コーティング総合ページ（coating.php）は触らない（2026-09-16 決定・実測 3 回）--- 【印（du）を付けない理由】 ・器はもともと 1260px（`coating-unify.css` で既に揃っている）＝幅の得が無い ・**ページの主役の見出し `.ct-hero__title`（36.8px）が 28px に下がる**（明確な後退） ・承認を経ていない変更が混ざる（料金の帯が紺色化・サイズ選択タブの形が変わる・ 診断ブロックが全幅。V0 の指摘を実物で確認） ・得られるのは長い本文 13 → 9 件だけ 【段落の間だけ直す案も試したが、取り消した】 狭い 3 組（`.p-4.bg-white` 2 組・`.dc-preempt__item` 1 組）は、いずれも段落に **`mb-2` / `mb-0` が明示的に付いている**（Bootstrap の余白指定・`!important` 付き）。 上書きするには新しく `!important` を足すしかなく、それはこのファイルの決まりで禁じている。 しかも `mb-0` は**書き手が意図してゼロにしている**もの。 → **効かない規則を置くのは害**（次に見た人が「直してある」と誤解する）ので消した。 直すなら CSS ではなく HTML 側の `mb-2` / `mb-0` を見直す話になる。別案件。 */ /* --- 6. 本文の左端について（2026-09-06 いったん撤去） ------------------- 箇条書きの padding-left とカードの padding を一律で書き換えたところ、 実測で左端の種類が **増えた**（PPF 39→57 / カーフィルム 27→62）。 親要素の幅がまちまちなので、子に同じ数値を当てても揃わず、 かえって新しいズレを作った。 左端を1〜2本に揃えるには、どの要素がどのレールに乗るべきかを 1つずつ決める必要がある。ここで一律に当てるのは誤り。別作業とする。 （撤去した内容は git 履歴と plans/V0_width_and_blocks_20260906.md に残る） */ /* --- 6. 器に乗っていないブロックを同じ線に乗せる（2026-09-06 実測して追加） --- 実測でレールから外れていたのは2種類だけだった。 ① 料金・パーツ一覧（.ppf-pricing-v0 の直下）… 左20pxから始まっていた ② 共通部品の中の列（.col-md-8 = 幅840px・左300 / .col-md-9 = 幅945px・左248） V0の決め（線は2本まで）に合わせる: 線1 = 標準1260px … カード・グリッド（col-md-9 系） 線2 = 読み物680px … 長い文章（col-md-8 系）。JIS X 4051 の1行40全角以内 ヘッダー・フッターは全幅のままにする（2026-09-05 ご指示のとおり）。 */ /* ① 料金・パーツ一覧を標準の線に乗せる */ /* +12px は、標準の器(.container)が内側に12pxの余白を持っているぶん。 これを足さないと、この2ブロックだけ左に12pxずれる（実測 90px vs 102px）。 */ #wrapper.du .ppf-pricing-v0 > div, #wrapper.du .cf-pricing-v0 > div { padding-left: max(32px, calc((100% - var(--du-w)) / 2 + 12px)); padding-right: max(32px, calc((100% - var(--du-w)) / 2 + 12px)); } /* 料金ブロックの見出しだけ 29px のまま残っていた（ページ独自CSSに負けていた）。 ID付きのセレクタで確実に 28px に揃える。 */ #wrapper.du .ppf-pricing-v0 h2, #wrapper.du .ppf-pricing-v0 .ppf-pricing-header h2, #wrapper.du .ppf-pricing-v0 .ppf-gallery-header h2 { font-size: 28px; color: var(--du-ink); } /* ② 共通部品の中で中央寄せに縮められている列を、標準幅いっぱいに使う。 実測で col-md-8（幅840〜1212px）と col-md-9（幅927〜945px）が 周囲の1260pxより明らかに細く、運用者から 「なぜこのセクションだけこんな小さくする必要があるんか？」とご指摘。 親が container-fluid とは限らないので、場所を限定せずに当てる。 */ /* 幅を狭めているだけの列を、標準幅に戻す。次の2通りを両方とも対象にする。 (1) mx-auto で中央に寄せて狭めている列 (2) 兄弟がいない列（＝2段組みではなく、ただ狭めているだけの箱） :only-child を使うので、本物の2段組み（col-md-8 + col-md-4 の並び）には当たらない。 実測で 840px / 927px / 945px / 1026px / 1131px の箱がこれに当たっていた。 */ /* col-md-6 / col-md-7 は「2列に並べる」ための列。ここを100%にすると 2列組みが縦積みに壊れる（実測: ブログとInstagramの2列が1列になった）。対象にしない。 */ /* 🚨 [2026-09-16] フッター（#footerN）は必ず除く。 #wrapper はフッターも含んでいる（index.php:292 が wrapper・:932 で footer.php を読む）。 除かないと footer.php の .col-md-11.mx-auto が 1320 → 1440、 .col-md-10.mx-auto.text-center が 1080 → 1416 になり、**そのページだけフッターの形が変わる**。 フッターは全ページ共通なので、印を付けたページだけ違う形になるのは「揃える」の逆。 実際に 2026-09-16 昼の配布で protectionfilm.php のフッターだけ全幅になっていた（実測して是正）。 ヘッダーも同じ理由で除く（このファイル冒頭の「ヘッダー・フッターは全幅のまま」の意図どおりにする）。 */ #wrapper.du :is(.col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11).mx-auto:not(#footerN *):not(#headerN *):not(header *):not(.craftsman-note-col), #wrapper.du [class*="col-md-"]:only-child:not(#footerN *):not(#headerN *):not(header *):not(.craftsman-note-col), #wrapper.du [class*="col-lg-"]:only-child:not(#footerN *):not(#headerN *):not(header *):not(.craftsman-note-col) { flex: 0 0 100%; width: 100%; max-width: none; margin-left: 0; margin-right: 0; } /* ③ 両端揃え（justify）だけをやめる。 日本語は単語の区切りが無いので、両端を揃えると行の中に不自然な空きができる。 【2026-09-06 修正】ここを一度 `p { text-align:left }` と一律で書いたところ、 中央寄せだった注記（「表示価格はすべて税込です。」など）まで左に寄ってしまい、 運用者から「コンテンツ内が左寄せになっている」とご指摘。 一律指定はやめ、両端揃えを指定しているブロックだけを対象にする。 */ #wrapper.du .features-article-section p, #wrapper.du .features-article-section li { text-align: left; } /* --- 7. スマホの左右余白を20pxの1種類にする -------------------------- */ @media (max-width: 767px) { #wrapper.du .container, #wrapper.du .container-fluid, #wrapper.du .container-sm, #wrapper.du .container-md, #wrapper.du .container-lg, #wrapper.du .container-xl, #wrapper.du .container-xxl { padding-left: var(--du-gut-sp); padding-right: var(--du-gut-sp); } #wrapper.du .ppf-mid, #wrapper.du .cf-mid, #wrapper.du .ppf-narrow, #wrapper.du .cf-narrow { max-width: none; } #wrapper.du h2, #wrapper.du .h2, #wrapper.du .ppf-sh h2, #wrapper.du .cf-sh h2 { font-size: 22px !important; } #wrapper.du h3 { font-size: 18px; } #wrapper.du .card-body, #wrapper.du .ppf-card, #wrapper.du .cf-card { padding: 20px; } } /* タブレット */ @media (min-width: 768px) and (max-width: 1259px) { #wrapper.du .container, #wrapper.du .container-fluid { padding-left: var(--du-gut-pc); padding-right: var(--du-gut-pc); } } /* --- 8. 料金ブロックの見た目（V0 第4版の設計・2026-09-06） ------------- 方針を受けてV0が要素ごとに設計し直したもの。 */ /* ① ブロックの見出し「リア全面」等: 青いベタ塗りの箱をやめ、下線1本にする。 面で塗ると「押せるボタン」に見えて、他の2ブロックの存在が消える。 */ #wrapper.du .price-block .section-title, #wrapper.du .section-title--rear, #wrapper.du .section-title--front-lr, #wrapper.du .section-title--front-center { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--du-accent) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--du-ink) !important; font-size: 18px !important; font-weight: 700; text-align: left !important; padding: 0 0 8px !important; margin: 32px 0 16px !important; letter-spacing: 0.02em; } #wrapper.du .price-block .section-title strong { font-size: inherit !important; } #wrapper.du .price-block .section-title::before, #wrapper.du .price-block .section-title::after { content: none !important; } /* ② 保証バッジ: 色を使わず、無彩色に近いグレーにする（後から貼った感を消す） */ #wrapper.du .warranty-badge, #wrapper.du .mobile-warranty-badge { display: inline-block; background: #F0EFEC !important; color: #4A4A4A !important; border: 0 !important; border-radius: 4px; font-size: 11px !important; padding: 2px 8px; margin-top: 6px; } /* ③ 「リア向け」等の黒いベタ塗りバッジをやめ、小見出しの体裁に合わせる */ #wrapper.du .cf-h3 .badge.bg-dark, #wrapper.du .cf-h3 .badge { background: transparent !important; color: var(--du-accent) !important; font-size: 13px !important; font-weight: 700; padding: 0 8px 0 0 !important; border-radius: 0 !important; } /* ④ Bootstrap既定の鮮やかな青を、この店の落ち着いた色に置き換える */ #wrapper.du .btn-primary { background-color: var(--du-accent) !important; border-color: var(--du-accent) !important; } #wrapper.du .btn-outline-primary { color: var(--du-accent) !important; border-color: var(--du-accent) !important; } #wrapper.du .btn-outline-primary:hover { background-color: var(--du-accent) !important; color: #fff !important; } #wrapper.du .cf-sh-eyebrow, #wrapper.du .ppf-sh-eyebrow { color: var(--du-accent) !important; } /* ⑤ 料金表の下の1行リンク（色付きバッジ2つの置き換え先） */ #wrapper.du .cf-price-note-link a { font-size: 14px; color: var(--du-accent); text-decoration: none; } #wrapper.du .cf-price-note-link a:hover { text-decoration: underline; } /* ⑥ 「表示価格はすべて税込です。」だけが左に寄っていた（ご指摘）。 同じ場所にある他の説明文は中央寄せなので、それに合わせる。 */ #wrapper.du .cf-pricing .st-tax-note, #wrapper.du .ppf-pricing-v0 .st-tax-note { text-align: center; } /* ⑦ 価格マス: 水色のベタ塗りをやめる。 「通常価格 / WEB予約割引 / セット割」が3段とも塗られていて、 どれが本当の価格か分からない状態だった（V0 第4版 §2）。 価格の値は1円も変えない。塗りをやめて、数字の大きさで順位を付けるだけ。 */ #wrapper.du .price-cell .price_normal, #wrapper.du .price-cell .price_member, #wrapper.du .price-cell .set_discount, #wrapper.du .price-cell .price-value, #wrapper.du .price-cell .condition-label { background: transparent !important; background-color: transparent !important; } #wrapper.du .price-cell .price_normal, #wrapper.du .price-cell .price_member, #wrapper.du .price-cell .set_discount { padding: 6px 4px; } #wrapper.du .price-cell .price_member, #wrapper.du .price-cell .set_discount { border-top: 1px solid #E8E6E2; } /* 通常価格は添え字あつかい。割引後の価格を主役にする */ #wrapper.du .price-cell .price_normal .condition-label, #wrapper.du .price-cell .price_normal .price-value { font-size: 11px !important; color: var(--du-muted) !important; } #wrapper.du .price-cell .condition-label { font-size: 10px !important; color: var(--du-muted) !important; letter-spacing: .02em; } #wrapper.du .price-cell .price_member .price-value, #wrapper.du .price-cell .set_discount .price-value { font-size: 16px !important; font-weight: 700; color: var(--du-ink) !important; } /* ⑧ 表の見出し行: 大きい文字と小さい例示が2段でガタついていた（V0 第4版 §4）。 行の高さを揃え、例示は添え字の大きさに落とす。 */ #wrapper.du .desktop-pricing-table thead th { height: 56px; vertical-align: middle; } #wrapper.du .desktop-pricing-table thead th > div:first-child { font-size: 14px !important; font-weight: 700; color: var(--du-ink); } #wrapper.du .desktop-pricing-table thead th > div:last-child { font-size: 11px !important; font-weight: 400; color: #8A8A8A; margin-top: 2px; } /* ⑨ 料金のタブ（js/price-tabs.js が作る）。V0 第4版 §1 の設計。 面で塗ると「押せるボタン」に見えて他のタブの存在が消えるので、下線1本にする。 */ #wrapper.du .cf-price-tabs { display: flex; gap: 0; border-bottom: 1px solid #E3E1DD; margin: 0 0 24px; } #wrapper.du .cf-price-tab { flex: 1 1 0; height: 48px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #6B6B6B; font-size: 15px; font-weight: 400; cursor: pointer; padding: 0; } #wrapper.du .cf-price-tab.is-on { color: var(--du-ink); font-weight: 700; border-bottom-color: var(--du-accent); } #wrapper.du .cf-price-tab:hover { color: var(--du-ink); } /* タブを作れたときだけ、ブロックの見出し（タブと同じ文字）を隠す。 JSが動かない環境では見出しが残るので、情報は消えない。 */ #wrapper.js-price-tabs-ready .price-block .section-title { display: none !important; } /* --- 10. 右端に貼り付く固定バナー（2026-09-06 やってみて撤回した記録） --- V0 第4版 §6 の設計（幅56px・白背景・枠1px・縦書きの文字ボタン）を CSSだけで作ろうとしたが、**画面が崩れたので撤回した**。 崩れた理由（実測）: ・中身は画像1枚ではなく、画像＋アイコン＋文字の組み合わせだった ・img を消してもスタッフの写真が別要素として残った ・::after で入れた縦書きの文字が枠からはみ出し、元の文字と二重になって 「せ 合 い 問」のように散らばった 結論: ここは画像を作り直さないと直せない。CSSでの置き換えは不可。 位置と大きさだけ変えるのも中身が崩れるので行わない。 */ /* --- 11. 施工箇所別イメージの写真（2026-09-06） ---------------------- 写真3枚が原寸に近い大きさで並び、このブロックだけで 4,302px あった。 ページ全体18,833pxのうち約4分の1がここ。 文章は1文字も削らず、写真の高さだけ抑える。 */ #wrapper.du .features-article-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--du-r-card); } @media (max-width: 767px) { #wrapper.du .features-article-image { max-height: 260px; } } /* --- 12. ボタンの下の注記（2026-09-06 ご指摘） ------------------- 「お車の正確な料金を確認しませんか？」のブロックで、 注記（車種を選ぶだけで、その場で概算が出ます）が**ボタンの横**に並んで 右に離れ、バランスが崩れていた。 原因: 箱の幅を720px→1260pxに広げたため、 ボタン2つ＋注記が1行に収まるようになった。 元の指定は `width: 100%` だけで、横に並ぶのを止められていなかった （flex の中では縮んで同じ行に入ってしまう）。 `flex: 0 0 100%` にして必ず改行させる。 */ #wrapper.du .cf-hero-cta .cf-hero-cta-note, #wrapper.du .ppf-hero-cta .ppf-hero-cta-note { flex: 0 0 100%; width: 100%; margin-top: 10px; } /* ボタンが中央にそろっているのに注記だけ左端に残っていたので、 中央寄せの箱（.text-center）の中では注記も中央にする。 ヒーローは左寄せの設計なので、そちらは変えない。 */ #wrapper.du .text-center .cf-hero-cta .cf-hero-cta-note, #wrapper.du .text-center .ppf-hero-cta .ppf-hero-cta-note { text-align: center !important; } /* --- 13. 料金補足の3カード（2026-09-06 ご指摘） ------------------ 「すき間が多い」「3つ目のカードがどでかい」。 3枚を同じ大きさで横に並べ、見出しの色をアクセント1色にそろえる。 カード内の余白も、この3枚だけ少し詰める。 */ #wrapper.du .cf-note-cards .cf-card { padding: 18px 20px; } #wrapper.du .cf-note-cards .cf-h3 { font-size: 15px !important; color: var(--du-accent) !important; margin-bottom: 10px; } #wrapper.du .cf-note-cards .cf-h3 i { color: var(--du-accent); } #wrapper.du .cf-note-cards a, #wrapper.du .cf-note-cards strong { color: var(--du-accent); } #wrapper.du .cf-note-cards .cf-body { font-size: 13px; line-height: 1.8; } #wrapper.du .cf-note-cards li { margin-bottom: 4px; } /* --- 14. よくある質問の幅（2026-09-06 ご指摘） ------------------ 「よくある質問だけ幅が小さい理由は？」 もともと `#cf .cf-faq .accordion { max-width: 720px }` が指定されていて、 周囲の1260pxに対してここだけ720pxだった。標準幅にそろえる。 */ #wrapper.du .cf-faq .accordion, #wrapper.du .ppf-faq .accordion { max-width: none; } /* ============================================================ 15. 左の縦線を全部やめる（2026-09-06 ご指示） サイト全体で 274箇所（＋左に線を描く影19箇所）。 代わりに使うもの（V0の5案から選んだ3種類・plans/V0_width_and_blocks_20260906.md）: 案2 地の色の切り替え … 並列カード・注意・補足（基本形） 案3 面ごと塗る … CTAの帯（1ページ1〜2箇所だけ） 案4 上下だけ細い線 … 引用・出典 新しい色は1つも足していない（白 → #F7F5F2 → #2B3A4A の3段階）。 ============================================================ */ /* まず、このページで左に線を引いているものを全部止める */ #wrapper.du .cf-film-brand, #wrapper.du .cf-notice-box, #wrapper.du .cf-quote, #wrapper.du .ppf-notice-box, #wrapper.du .ppf-quote, #wrapper.du [style*="border-left"] { border-left: 0 !important; border-left-color: transparent !important; } /* --- 案2 地の色の切り替え（基本形）------------------------------ 線も影も使わず、その部分だけ地の色を変えて区切る。 */ #wrapper.du .cf-film-brand, #wrapper.du .cf-notice-box, #wrapper.du .ppf-notice-box { background: var(--du-bg-b) !important; border-radius: var(--du-r-card) !important; box-shadow: none !important; padding: 16px 20px !important; } /* 「職人のひとこと」も同じ扱い（黄色い地＋オレンジの縦線だった） */ #wrapper.du .craftsman-note-box, #wrapper.du [style*="#fefce8"] { background: var(--du-bg-b) !important; border-radius: var(--du-r-card) !important; } /* --- 案4 上下だけ細い線（引用・出典）----------------------------- 新聞の引用のように上下で挟む。左右に線が無いので本文と文字の位置がそろう。 */ #wrapper.du .cf-quote, #wrapper.du .ppf-quote { background: transparent !important; border-top: 1px solid #E5E3DF !important; border-bottom: 1px solid #E5E3DF !important; border-radius: 0 !important; padding: 16px 0 !important; margin: 20px 0 !important; } /* --- 案3 面ごと塗る（CTAの帯・1ページ1〜2箇所だけ）---------------- 線ではなく地の色そのものを変えて、ここだけ強く区切る。 */ #wrapper.du .cta-inline-box, #wrapper.du .cta-inline-box { background: var(--du-accent) !important; border-radius: var(--du-r-card) !important; color: #FFFFFF !important; padding: 24px 32px !important; } #wrapper.du .cta-inline-box p, #wrapper.du .cta-inline-box h2, #wrapper.du .cta-inline-box h3, #wrapper.du .cta-inline-box p, #wrapper.du .cta-inline-box h2, #wrapper.du .cta-inline-box h3 { color: #FFFFFF !important; } #wrapper.du .cta-inline-box .text-muted { color: #C9D1DA !important; } /* 🚨 [2026-09-16] 帯を濃紺に塗ると、3本目のボタンだけ沈んで「押せない」ように見える。 parts/cta-inline.php:37 の「30秒で料金チェック」は Bootstrap の .btn-outline-secondary で、 文字も枠も既定のグレー #6c757d のまま。上の規則は p / h2 / h3 しか白くしていない。 **実測したコントラスト比は 1.15 : 1**（WCAG の基準は文字 4.5:1・UI の枠 3:1）。 この帯は共通部品なので、直さずに出すと 11 ページで同時に起きる。 しかもこのボタンは「メールもLINEも使わず、匿名で金額だけ見たい人」の唯一の入口 （当店のモットーは「勧めない」＝まだ話しかけられたくないお客様が最初に押すところ）。 HTML は触らない（GA4 の data-track-cta が付いているため）。CSS だけで直す。 */ #wrapper.du .cta-inline-box .btn-outline-secondary { color: #FFFFFF !important; border-color: rgba(255, 255, 255, .72) !important; background-color: transparent !important; } #wrapper.du .cta-inline-box .btn-outline-secondary:hover, #wrapper.du .cta-inline-box .btn-outline-secondary:focus { color: var(--du-accent) !important; background-color: #FFFFFF !important; border-color: #FFFFFF !important; } /* キーボードで辿ったときに、濃紺の上でも居場所が分かるようにする（WCAG 2.4.11） */ #wrapper.du .cta-inline-box .btn-outline-secondary:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; } /* 実測で残っていた分（2026-09-06）。 .features-recommendation-item = 「おすすめの施工パターン」の3項目（青4px） .cf-vlt-item = 透過率ギャラリーの札（緑2px・黒2px） どちらも地の色の切り替えに置き換える。 */ #wrapper.du .features-recommendation-item, #wrapper.du .cf-vlt-item, #wrapper.du .ppf-vlt-item, #wrapper.du .color-ppf-notice, #wrapper.du .ppf-card { border-left: 0 !important; background: var(--du-bg-b) !important; border-radius: var(--du-r-card) !important; padding: 14px 18px !important; }