/* =====================================================================
   コーティングページ 全面統一（2026-09-04）
   V0（Vercel）の全面修正指示書 v0_20260904_170109.json のとおりに実装。
   きっかけは社長のご指摘「イマイチ。V0の提案とは思えない」。
   原因は、ヒーローだけV0の指示で作り、その下は昔のままだったこと。

   実測していた乱れ（幅1440px・全要素をブラウザで計測）:
     ・ボタン12種類（地色6色 × 角丸4px/6px/8px の3種）
     ・見出し h2 が 文字5サイズ・太さ3種・色4種・そろえ left/start/center 混在
     ・何も無い空白が4箇所（216〜302px）
     ・地色が #F7F5F1 / #f8f9fa / 白 の3色混在

   V0の文言例のうち2つは当社の禁止事項に触れるため採用しない:
     ・「LINEで予約する」→ 予約の権利をお客様に渡さない
       （memory/feedback_no_customer_booking_power）
     ・「電話で相談する」→ 「お電話ください」フローは禁止
       （memory/feedback_customer_dx_no_phone_flow）
     ボタンの色と形の規格だけを採り、文言は既存のまま変えない。

   このファイルは coating.php だけが読む。他ページには影響しない。
   ===================================================================== */

/* ---------------------------------------------------------------
   A. ボタン：12種類 → 4種類
   角丸はすべて8pxに統一。地色は 濃紺#004098 / LINE緑#00b900 / 白 の3つだけ。
   オレンジ#f97316・金#b08d57・#4a6fa5・黒#212529 は当社の色ではないので全廃。
   --------------------------------------------------------------- */
#wrapper.ct-page .btn{
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* A-1 LINE（問い合わせ64件中30件＝43%で最大の入口。ここだけ緑を残す） */
#wrapper.ct-page a[href*="line.me"].btn{
  background: #00b900 !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 16px !important;
  padding: 16px 32px !important;
}

/* A-2 濃紺の塗り（相談・見積りの主要ボタン）
   旧オレンジ・旧金色・旧4a6fa5・旧黒 をここへ集約 */
#wrapper.ct-page .btn[style*="f97316"],
#wrapper.ct-page .btn[style*="F97316"],
#wrapper.ct-page .btn[style*="b08d57"],
#wrapper.ct-page .btn[style*="4a6fa5"],
#wrapper.ct-page .btn-primary,
#wrapper.ct-page .btn-dark,
#wrapper.ct-page .btn-danger,
#wrapper.ct-page .ct-hero__cta{
  background: #004098 !important;
  background-color: #004098 !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 16px !important;
  padding: 16px 32px !important;
}
#wrapper.ct-page .btn[style*="f97316"]:hover,
#wrapper.ct-page .btn-primary:hover,
#wrapper.ct-page .ct-hero__cta:hover{ background:#00306f !important; color:#fff !important; }

/* A-3 白地に濃紺の枠（まだ強く押さない案内）
   旧 枠線のみ #1e3a8a / #8a5a1e / #6c757d（角丸4px・6px・8px 全部）をここへ統合 */
#wrapper.ct-page .btn-outline-primary,
#wrapper.ct-page .btn-outline-secondary,
#wrapper.ct-page .btn-outline-warning,
#wrapper.ct-page .btn-outline-dark{
  background: #fff !important;
  color: #004098 !important;
  border: 1px solid #004098 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
}

/* 赤いバッジ型のボタンも濃紺へ */
#wrapper.ct-page a.badge.bg-danger{
  background: #004098 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
}

@media (max-width: 767px){
  #wrapper.ct-page a[href*="line.me"].btn,
  #wrapper.ct-page .btn[style*="f97316"],
  #wrapper.ct-page .btn-primary,
  #wrapper.ct-page .ct-hero__cta{ padding: 14px 24px !important; }
}

/* ---------------------------------------------------------------
   B. 見出しの型
   h2 = PC28px / SP22px・太さ700・#1e2b3d・左揃え
   h3 = PC18px / SP16px・太さ600・#2c2c2c・左揃え
   ヒーローの見出しと、開閉パネルの見出しは別規格なので除外する
   --------------------------------------------------------------- */
#wrapper.ct-page h2:not(.accordion-header):not(.ct-hero__title):not(.visually-hidden){
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1e2b3d !important;
  /* [2026-09-05 撤去] text-align:left の強制。
     今朝「すべて左揃え？誰の判断だ？」と指摘され、V0も『全部左寄せは不適切』と
     自分の回答を撤回したのに、CSSに残っていた。
     見出しだけ左・本文は中央、というちぐはぐの原因になっていた。
     元のHTMLの指定（text-center 等）に従わせる。 */
  line-height: 1.4 !important;
  margin: 0 0 32px !important;
  width: auto !important;
  max-width: none !important;
}
#wrapper.ct-page h3:not(.accordion-header){
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
  /* [2026-09-05 撤去] 同上 */
  margin: 0 0 8px !important;
  width: auto !important;
}
@media (max-width: 767px){
  #wrapper.ct-page h2:not(.accordion-header):not(.ct-hero__title):not(.visually-hidden){
    font-size: 22px !important; margin-bottom: 24px !important;
  }
  #wrapper.ct-page h3:not(.accordion-header){ font-size: 16px !important; }
}

/* B-1 見出しの上の英字ラベル（「整理されている」印象を作る主役） */
#wrapper.ct-page .ct-eyebrow-label{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #004098;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-align: left;
}
#wrapper.ct-page .ct-eyebrow-label::after{
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: #004098;
  margin-top: 8px;
}

/* ---------------------------------------------------------------
   C. セクション間の余白
   「間隔はセクション自身の内側の余白だけで作る」に一本化する。
   個別の margin-top / margin-bottom を全部打ち消す。
   実測で 216〜302px の空白が4箇所あったのは、
   古い余白指定（mt-md-10＝128px 等）とセクションの余白が二重にかかっていたため。
   --------------------------------------------------------------- */
#wrapper.ct-page > section,
#wrapper.ct-page > div.container-fluid,
#wrapper.ct-page > div > section{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* 🚨 2026-09-05 社長指示で広げた。V0の「どの隙間も80pxを超えない」は採らない。
       社長逐語:「マージンを適度にあけるのも、見せ方ですよ？ぼくはどちらかというと、
       詰まっていない、マージンがゆったりと設定されているサイトのほうが見やすいし安心感がでる」
       前は片側40px（隙間の合計80px）でセクション同士がくっついて見えていた。
       片側72px＝隙間の合計144px にする（スマホは片側44px＝合計88px）。 */
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 767px){
  #wrapper.ct-page > section,
  #wrapper.ct-page > div.container-fluid,
  #wrapper.ct-page > div > section{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
/* ヒーローは自前の余白を持っているので対象外 */
#wrapper.ct-page > section.ct-hero{ padding-top:0 !important; padding-bottom:0 !important; }

/* 二重の原因になっていた大きな余白クラスを無効化 */
#wrapper.ct-page .mt-md-10, #wrapper.ct-page .mt-md-8, #wrapper.ct-page .mt-md-7,
#wrapper.ct-page .mt-8, #wrapper.ct-page .mt-5,
#wrapper.ct-page .my-md-5, #wrapper.ct-page .my-5,
#wrapper.ct-page .mb-md-7, #wrapper.ct-page .mb-md-10{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   D. 地色は 白 と #F7F5F1 の2色だけ
   #f8f9fa（グレー寄り・当社の色と無関係）は廃止
   --------------------------------------------------------------- */
#wrapper.ct-page [class*="bg-light"],
#wrapper.ct-page [style*="#f8f9fa"],
#wrapper.ct-page [style*="#F8F9FA"]{
  background-color: #F7F5F1 !important;
  background-image: none !important;
}

/* ---------------------------------------------------------------
   E. 開閉パネル
   枠だけの箱が白い余白の中に離れて浮いている状態をやめる
   --------------------------------------------------------------- */
#wrapper.ct-page .accordion-item{
  border: 1px solid #e3e8ef !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
#wrapper.ct-page .accordion-item:last-child{ margin-bottom: 0 !important; }
#wrapper.ct-page .accordion-button{
  padding: 20px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
#wrapper.ct-page .accordion-button:not(.collapsed){ color:#004098 !important; background:#fff !important; }
#wrapper.ct-page .accordion-body{
  padding: 0 24px 20px !important;
  font-size: 15px !important;
  color: #2c2c2c !important;
  line-height: 1.8 !important;
}

/* ---------------------------------------------------------------
   G. カード共通
   枠線ではなく、薄い影で区別する
   --------------------------------------------------------------- */
#wrapper.ct-page .card{
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
#wrapper.ct-page .card .card-body{ padding: 24px !important; }
@media (max-width: 767px){
  #wrapper.ct-page .card .card-body{ padding: 20px !important; }
}

/* ---------------------------------------------------------------
   追記: 診断ツールの見出し（.v0-main-title）だけ中央揃えが残っていたため個別に指定。
   V0のB-2「全セクション左揃えに統一（中央揃えは廃止）」に合わせる。
   --------------------------------------------------------------- */
#wrapper.ct-page h2.v0-main-title,
#wrapper.ct-page .v0-main-title{
  /* [2026-09-05 撤去] text-align:left */
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1e2b3d !important;
}
@media (max-width: 767px){
  #wrapper.ct-page h2.v0-main-title,
  #wrapper.ct-page .v0-main-title{ font-size: 22px !important; }
}

/* ---------------------------------------------------------------
   H. ボタン以外に残っていた「当社の色でない色」を濃紺に寄せる（2026-09-04 追記）
   実測で14種類残っていた。V0の A「当社の色ではないので全廃」を
   アイコン・バッジ・価格の文字にも適用する。

     金 #b8860b（アイコン44個・「人気」バッジ2個）
     オレンジ #f97316（アイコン8個）
     #003366（アイコン6個）
     #4a6fa5（グレードのバッジ6個）
     #8b4a4a（「WEB予約」バッジ4個）
     赤 #d32f2f（価格の文字4個）
     #2c3e50 / #1e3a8a / #8a5a1e / #ca8a04 / #5a7c5a（見出しの文字）

   お知らせ帯（.booking-notice）は全ページ共通の注意喚起なので触らない。
   --------------------------------------------------------------- */
/* [2026-09-05 撤去] ここにあった「アイコンと色付き文字を1色に潰す」指定を削除した。
   社長のご指摘:「青が多すぎて暗く見える。清潔感、安心感、温かさが感じられない」
   V0の診断:「意味の違うクラス(warning/success/primary/danger)を1色に潰す設計自体が誤り。
             役割別に分岐させること」
   置き換えはこのファイル末尾の「色の役割分け」にまとめてある。 */
/* 白抜きの場所ではアイコンも白のまま */
#wrapper.ct-page .btn .fas, #wrapper.ct-page .btn .far, #wrapper.ct-page .btn .fab,
#wrapper.ct-page a[href*="line.me"] .fab{ color: inherit !important; }

/* バッジは濃紺の塗り＋白文字に統一 */
#wrapper.ct-page .badge.bg-primary,
#wrapper.ct-page .badge.bg-warning,
#wrapper.ct-page .badge.bg-danger,
#wrapper.ct-page .badge.bg-dark,
#wrapper.ct-page .badge.bg-secondary{
  background-color: #004098 !important;
  color: #fff !important;
}
#wrapper.ct-page .badge.bg-warning.text-dark{ color:#fff !important; }

/* 価格の文字は赤をやめて濃紺に（安売りの見え方をやめる） */
#wrapper.ct-page .cp-price-web,
#wrapper.ct-page .cp-price-web *{ color: #004098 !important; }

/* 見出し類に残っていた色 */
#wrapper.ct-page .form-label{ color: #2c2c2c !important; }
#wrapper.ct-page [style*="color:#1e3a8a"],
#wrapper.ct-page [style*="color:#8a5a1e"],
#wrapper.ct-page [style*="color: #1e3a8a"],
#wrapper.ct-page [style*="color: #8a5a1e"]{ color: #004098 !important; }

/* はっ水／親水の2枚のカードは、文字色ではなく左の線の色で区別する
   （#3890d0 は文字に使うとコントラスト3.3で基準を割るため面と線だけに使う） */
#wrapper.ct-page .st-type-hassui{ border-left: 4px solid #004098 !important; }
#wrapper.ct-page .st-type-shinsui{ border-left: 4px solid #3890d0 !important; }

/* ---------------------------------------------------------------
   I. 本文のそろえ
   見出しを左に統一したので、その直下の説明文も左に揃える
   （見出しが左・本文が中央でバラバラに見えていた）
   --------------------------------------------------------------- */
/* [2026-09-05 撤去] 「見出しを左にしたので本文も左に」という指定。
   見出しの左揃え自体をやめたので、この指定も不要。
   むしろ text-center の中で本文だけ左になる原因だった。 */

/* ---------------------------------------------------------------
   J. 中身が空の箱に余白を付けない（2026-09-04）
   C の指定はセクションの直下すべてに40pxの余白を付けるため、
   中身が無い箱まで80pxの空白として現れていた。
   --------------------------------------------------------------- */
#wrapper.ct-page > div.container-fluid:empty,
#wrapper.ct-page > section:empty{ display:none !important; }
#wrapper.ct-page > div.container-fluid:not(:has(img)):not(:has(p)):not(:has(h1,h2,h3,h4,h5,h6)):not(:has(a)):not(:has(button)):not(:has(table)):not(:has(iframe)):not(:has(span)):not(:has(li)){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   K. 残っていた「当社の色でない色」を全部そろえる（2026-09-04・仕上げ）
   実測で残っていた場所:
     #1e3a8a / #8a5a1e … はっ水・親水の「詳しく見る」ボタンの枠
     #5a7c5a          … 「PREMIUM」のバッジ
     #b08d57          … 「QUALITY FIRST」の見出し
     #2c3e50          … よくあるご質問の質問文（9箇所）
     #ca8a04          … 「職人のひとこと」の見出し
     #ffd700（金）     … 「無料サービス」のバッジ（代車の案内）
     #00185c          … 「TOPへ戻る」ボタン
   --------------------------------------------------------------- */
#wrapper.ct-page .btn[style*="#1e3a8a"],
#wrapper.ct-page .btn[style*="#8a5a1e"]{
  border-color: #004098 !important;
  color: #004098 !important;
}
#wrapper.ct-page .badge.bg-success{ background-color:#004098 !important; color:#fff !important; }
#wrapper.ct-page .rental-car-badge{ background-color:#004098 !important; color:#fff !important; }
#wrapper.ct-page .faq-question{ color:#1e2b3d !important; }
#wrapper.ct-page p[style*="#b08d57"],
#wrapper.ct-page p[style*="#ca8a04"],
#wrapper.ct-page [style*="color:#b08d57"],
#wrapper.ct-page [style*="color:#ca8a04"],
#wrapper.ct-page [style*="color: #b08d57"],
#wrapper.ct-page [style*="color: #ca8a04"]{ color:#004098 !important; }
#wrapper.ct-page .page-top a{ background-color:#004098 !important; color:#fff !important; }

/* ---------------------------------------------------------------
   L. 残っていた 80px 超の空白をなくす（2026-09-04・仕上げ）
   セクションの中にある入れ子の箱にも大きめの余白が残っていたため、
   セクション直下より内側の余白も打ち消す。
   --------------------------------------------------------------- */
#wrapper.ct-page > section > .container-fluid,
#wrapper.ct-page > section > .container,
#wrapper.ct-page > div.container-fluid > .row,
#wrapper.ct-page > div.container-fluid > .container{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 🚨 2026-09-05 根治: ここに :not(section) が無かったため、
     `<section class="py-5">` の余白まで 0 に潰れていた。
     実測で「目次の下 → こんな症状の見出し」の隙間が PC・スマホとも 0px になり、
     しかも上に高さ93pxの固定ナビが乗るので、止めた瞬間に見出しがナビに隠れていた。
     打ち消したいのは「セクションの中の入れ子」だけなので、セクション自身は除く。 */
/* 🚨 2026-09-05 再修正: :not(section) だけでは足りなかった。
     `<div class="container-fluid mt-6">` のような**セクション相当の直下の箱**まで
     余白0にしていた。実測で「実績と信頼で選ばれています」の直前が PC・スマホとも 0px。
     打ち消したいのは「箱の中の入れ子」だけなので、直下の子は対象から外す。 */
#wrapper.ct-page > * .py-5, #wrapper.ct-page > * .py-md-5,
#wrapper.ct-page > * .py-md-6, #wrapper.ct-page > * .py-md-7,
#wrapper.ct-page > * .mt-6, #wrapper.ct-page > * .mb-6,
#wrapper.ct-page > * .mb-5{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   M. 診断ツールの「高さの予約」をやめる（2026-09-04）
   .v0-diagnosis-section に min-height:900px が指定されていたが、
   実測すると質問中の高さは PC 661px・スマホ 694〜699px しかなく、
   **常に約240pxの空白を作っているだけ**だった。
   （900pxは結果画面 PC 985px・スマホ 1032px に合わせたと思われるが、それでも足りていない）
   質問1問目から5問目まで高さは661pxで一定なので、切り替え時に跳ねることはない。
   結果が出るときだけ下に伸びるが、結果は画面内に送られるので問題にならない。
   --------------------------------------------------------------- */
#wrapper.ct-page .v0-diagnosis-section{ min-height: 0 !important; }

/* ---------------------------------------------------------------
   N. ページ上部の簡易目次（改善リスト#7・2026-09-05）
   V0の A-4「テキストリンク（背景・枠なし・#004098・14px・太さ600）」に従う。
   飾りの枠や塗りは付けない。押せることは色と下線だけで伝える。
   --------------------------------------------------------------- */
#wrapper.ct-page .ct-toc{
  background: #fff;
  border-bottom: 1px solid #e3e8ef;
  padding: 16px 0;
}
#wrapper.ct-page .ct-toc__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
}
#wrapper.ct-page .ct-toc__list a{
  color: #004098;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#wrapper.ct-page .ct-toc__list a:hover,
#wrapper.ct-page .ct-toc__list a:focus{ text-decoration: underline; }
@media (max-width: 767px){
  #wrapper.ct-page .ct-toc{ padding: 14px 0; }
  #wrapper.ct-page .ct-toc__list{ gap: 10px 18px; justify-content: flex-start; padding: 0 16px; }
  #wrapper.ct-page .ct-toc__list a{ font-size: 13px; }
}
/* 目次で飛んだ先が固定ヘッダーの下に隠れないようにする */
#wrapper.ct-page [id]{ scroll-margin-top: 96px; }

/* ---------------------------------------------------------------
   O. はっ水／親水の切替（改善リスト#19・2026-09-05）
   サイズ選択ボタンと同じ見た目に揃える
   --------------------------------------------------------------- */
#wrapper.ct-page .cp-water-switch{ display:flex; gap:8px; justify-content:center; }
#wrapper.ct-page .cp-water-btn{
  background:#fff;
  color:#004098;
  border:1px solid #004098;
  border-radius:8px;
  padding:8px 24px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}
#wrapper.ct-page .cp-water-btn.is-on{
  background:#004098;
  color:#fff;
}

/* =====================================================================
   P. 濃紺を「印」に戻す（2026-09-05 社長ご指摘「青ばっかり」）

   何を間違えたか:
     K で「当社の色でない色を全部そろえる」としてアイコン・バッジ・星・価格まで
     すべて濃紺 #004098 に置き換えた。結果、濃紺が画面の6.7%を占め、
     星12個・塗りつぶしバッジ10個まで濃紺になった。
     V0の指示は「**濃紺を面として広げる箇所を新設しない**」「印で主張する」だったのに、
     私は逆に広げた。高級車ブランドが色面を1.5%以内に抑えているという実測とも矛盾する。

   直し方:
     ・濃紺の塗り = **CTAボタンと、見出しの前の短い罫だけ**
     ・アイコン・星 = 色を持たせない。落ち着いたグレー #56607a
     ・バッジ = 塗りをやめて「白地＋細い枠＋濃い文字」に
       （V0のG「カード内に塗りボタンを置かない＝ECっぽく見える最大の原因」と同じ考え方）
     ・価格の文字 = 濃紺をやめて黒に近い #1e2b3d。強調は太さで出す
   ===================================================================== */

/* アイコン・星は色を持たせない */
/* [2026-09-05 撤去] ここにあった「アイコンと色付き文字を1色に潰す」指定を削除した。
   社長のご指摘:「青が多すぎて暗く見える。清潔感、安心感、温かさが感じられない」
   V0の診断:「意味の違うクラス(warning/success/primary/danger)を1色に潰す設計自体が誤り。
             役割別に分岐させること」
   置き換えはこのファイル末尾の「色の役割分け」にまとめてある。 */
/* 塗りボタンの中のアイコンは白のまま */
#wrapper.ct-page .btn .fas, #wrapper.ct-page .btn .far, #wrapper.ct-page .btn .fab,
#wrapper.ct-page a[href*="line.me"] .fab{ color: inherit !important; }

/* バッジは塗りをやめて枠線に */
#wrapper.ct-page .badge.bg-primary,
#wrapper.ct-page .badge.bg-warning,
#wrapper.ct-page .badge.bg-danger,
#wrapper.ct-page .badge.bg-dark,
#wrapper.ct-page .badge.bg-secondary,
#wrapper.ct-page .badge.bg-success,
#wrapper.ct-page .rental-car-badge{
  background-color: #fff !important;
  color: #1e2b3d !important;
  border: 1px solid #c3d0e2 !important;
  font-weight: 600 !important;
}
/* 「人気」だけは濃紺の塗りを残す（1画面に1点の強調） */
#wrapper.ct-page .badge.bg-warning.text-dark{
  background-color: #004098 !important;
  color: #fff !important;
  border: 0 !important;
}

/* 価格の文字は黒に近い色に。強調は太さで出す */
#wrapper.ct-page .cp-price-web,
#wrapper.ct-page .cp-price-web *{ color: #1e2b3d !important; font-weight: 700 !important; }

/* 見出しの直前の短い罫と、CTAボタンだけが濃紺 */
#wrapper.ct-page .ct-hero__rule{ background:#004098 !important; }

/* =====================================================================
   Q. 写真を大きく戻す（2026-09-05）

   実測で判明した劣化:
     幅200pxを超える写真   23枚 → 1枚
     最大の写真の幅        369px → 231px
     写真の総数            55枚 → 36枚
   原因はすべて私の改修（カードの2列化・折りたたみ・ヒーローの正方形化）。

   社長のご指示「他社よりも魅力的なメニュー表示を。他を圧倒しましょう」に対し、
   ライバル実測でも「スマホの最初の画面に車のビジュアルが無いのは当社だけ
   （測った8ページ中）」という結果が出ている。写真の大きさを戻す。
   ===================================================================== */

/* ヒーローの写真をスマホで画面いっぱいに（72% → 100%・横長） */
@media (max-width: 991px){
  #wrapper.ct-page .ct-hero__media{
    width: 100% !important;
    margin: 24px 0 0 !important;
  }
  #wrapper.ct-page .ct-hero__media img{
    /* height を明示しないと、HTMLのheight属性や親の高さに引きずられる */
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
  }
  /* パネルの左右の余白の分だけ内側に入れる（画面端まで行かせない） */
  #wrapper.ct-page .ct-hero__grid{ padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------------------------------------------------------------
   R. スマホでは写真を文字より先に出す（2026-09-05）

   ライバル実測（8ページ・スマホ幅390px）で分かったこと:
     最初の画面に車のビジュアルが無いのは**当社だけ**だった。
       IIC        … 画面全面（390×844）に自社撮影の施工動画を自動再生
       アートプロ  … 背景写真 390×350
       リアーク    … 幅390pxのヒーロー画像
       XP京都      … 車写真 350×268（最初の画面内）
       当社        … 最初の画面にメディア0件。最初の写真は846px＝画面の下
   文字→写真の順は、PCでは横並びになるので問題ないが、
   スマホでは縦に積まれるため写真が画面の外へ出てしまう。
   スマホだけ順番を入れ替える（HTMLは触らず、並べ方の指定だけで行う）。
   --------------------------------------------------------------- */
@media (max-width: 991px){
  #wrapper.ct-page .ct-hero__grid{ display: flex !important; flex-direction: column !important; }
  #wrapper.ct-page .ct-hero__media { order: 1 !important; margin: 0 0 20px !important; }
  #wrapper.ct-page .ct-hero__panel { order: 2 !important; padding-top: 0 !important; }
  #wrapper.ct-page .ct-hero__actions{ order: 3 !important; }
}


/* ===============================================================
   [2026-09-05 13:25 差し戻し]
   本日 AI が追加した S〜Z（余白を広げる／幅をそろえる／寄せ方を変える）を
   すべて撤去した。理由:
     ・V0 は「各ブロックに共通クラスを付ける」手順を示したのに、
       AI が HTML を触らず CSS の !important で上から潰す方式に変えた。
     ・その結果、効くブロックと効かないブロックが出て、
       開閉パネルの幅が半分になる・見出しの下に黒い線が出る等、
       直す前より崩れた（社長「最悪の改修だな。やればやるほどおかしくなる」）。
   セクション間の余白は、社長が「ひとまず整ったように見えます」と言われた
   時点の値（片側40px・スマホ24px）に戻す。
   やり直す時は V0 の手順どおり、HTML にクラスを付ける正攻法で行う。
   =============================================================== */

/* 本日見つけた本物の不具合の修正だけは残す:
   `.py-5` が付いたセクションの余白が 0 に潰れていた件は、
   上の L セクションで `> * ` に限定する形で根治済み。 */


/* ===============================================================
   幅の統一（2026-09-05 社長ご指示）
   逐語:「ヘッダー・フッター、その他デザイン的に左右いっぱいを使うデザインと、
          途中途中のコンテンツは1260のセンタリングが普通じゃないのか？」
   → 背景・ヘッダー・フッターは全幅のまま。中身だけ 1260px で中央に統一する。
     余白や寄せ方には手を出さない。幅だけ。
   =============================================================== */
#wrapper.ct-page .container,
#wrapper.ct-page .container-lg,
#wrapper.ct-page .container-md,
#wrapper.ct-page .container-sm{
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 背景を全幅で使うブロックは、背景はそのまま・中身だけ1260中央にする */
#wrapper.ct-page > section:not(.ct-hero),
#wrapper.ct-page > div.container-fluid,
#wrapper.ct-page > nav.ct-toc{
  padding-left: max(16px, calc((100% - 1260px) / 2)) !important;
  padding-right: max(16px, calc((100% - 1260px) / 2)) !important;
}
/* 外側で幅を決めたので、中の器は幅も左右余白も持たない（二重にしない） */
#wrapper.ct-page > section:not(.ct-hero) > .container,
#wrapper.ct-page > section:not(.ct-hero) > .container-fluid,
#wrapper.ct-page > div.container-fluid > .container,
#wrapper.ct-page > div.container-fluid > .container-fluid,
#wrapper.ct-page > nav.ct-toc > .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 相談CTAの箱だけ「画面の66%を中央寄せ」で他より狭かった（col-md-8 mx-auto）。
   ご指示「中身は1260のセンタリング」に合わせて、これも同じ幅にする。 */
#wrapper.ct-page .container-fluid > .col-md-8.mx-auto,
#wrapper.ct-page .container-fluid > .col-md-9.mx-auto,
#wrapper.ct-page .container-fluid > .col-11.mx-auto{
  max-width: none !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ===============================================================
   第3段「数字と年数3つ」（2026-09-05・V0の指示どおり）
   濃紺 #004098 は数字だけに使う（点として）。背景として面で塗らない。
   =============================================================== */
#wrapper.ct-page .dc-facts{ background:#F7F5F1; }
#wrapper.ct-page .dc-facts h2{ margin-bottom:32px; }
#wrapper.ct-page .dc-facts__grid{
  display:grid; grid-template-columns:1fr; gap:0;
}
#wrapper.ct-page .dc-facts__item{ padding:20px 0; }
#wrapper.ct-page .dc-facts__item + .dc-facts__item{ border-top:1px solid #e3e8f0; }
#wrapper.ct-page .dc-facts__num{
  font-size:32px; font-weight:700; color:#004098; margin:0; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
#wrapper.ct-page .dc-facts__unit{
  font-size:.6em; font-weight:600; color:#5a6472; margin-left:4px;
}
#wrapper.ct-page .dc-facts__label{
  font-size:14px; color:#666; margin:8px 0 0;
}
@media (min-width:768px){
  #wrapper.ct-page .dc-facts__grid{ grid-template-columns:1fr 1fr 1fr; gap:40px; }
  #wrapper.ct-page .dc-facts__item{ padding:0; }
  #wrapper.ct-page .dc-facts__item + .dc-facts__item{
    border-top:0; border-left:1px solid #e3e8f0; padding-left:40px;
  }
  #wrapper.ct-page .dc-facts__num{ font-size:40px; }
}


/* ===============================================================
   アイコン付き見出しの段ずれ対策（2026-09-05）
   これまではアイコンと文字が同じ行に流し込まれていたため、
   文字数が短い見出し（ガラスコーティングとは）はアイコンの右に収まり、
   長い見出し（セラミックコーティングとは）はアイコンの下に折り返していた。
   結果、3枚並べたときに1枚目だけ見出しの位置が上にずれていた。
   アイコンを独立した列にして、どの長さでも文字の開始位置を揃える。
   =============================================================== */
#wrapper.ct-page .ct-ihead{
  display:flex; align-items:flex-start; gap:.5rem;
}
#wrapper.ct-page .ct-ihead > i{
  flex:0 0 auto; margin-right:0 !important; line-height:1.5;
}


/* ===============================================================
   第5段「3つの不安に先回り」（2026-09-05・V0の指示どおり）
   カード化しない。左に濃紺の細い線を1本引くだけで区切る。
   =============================================================== */
#wrapper.ct-page .dc-preempt{ background:#fff; }
#wrapper.ct-page .dc-preempt__item{
  border-left:3px solid #004098; padding:4px 0 4px 20px;
}
#wrapper.ct-page .dc-preempt__item + .dc-preempt__item{ margin-top:32px; }
#wrapper.ct-page .dc-preempt__item p{ line-height:2; color:#444; }
@media (min-width:768px){
  #wrapper.ct-page .dc-preempt__item{ padding-left:28px; }
  #wrapper.ct-page .dc-preempt__item + .dc-preempt__item{ margin-top:40px; }
}


/* ===============================================================
   4グレード比較のスマホ表示（2026-09-05・V0の指示）
   横スクロールの表をやめ、1グレード＝1枚の読み物にする。
   カード同士はゆったり離す（詰めない）。
   =============================================================== */
#wrapper.ct-page .dc-grade{
  border:1px solid #e3e8f0; border-radius:8px; padding:18px 16px; background:#fff;
}
#wrapper.ct-page .dc-grade + .dc-grade{ margin-top:20px; }
#wrapper.ct-page .dc-grade__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-bottom:12px; border-bottom:2px solid #004098; margin-bottom:12px;
}
#wrapper.ct-page .dc-grade__name{ font-size:16px; font-weight:700; color:#1a1a1a; }
#wrapper.ct-page .dc-grade__list{ margin:0; }
#wrapper.ct-page .dc-grade__list > div{
  display:flex; align-items:baseline; gap:12px; padding:7px 0;
}
#wrapper.ct-page .dc-grade__list > div + div{ border-top:1px solid #f0f3f8; }
#wrapper.ct-page .dc-grade__list dt{
  flex:0 0 6.5em; font-size:13px; font-weight:400; color:#5a6472;
}
#wrapper.ct-page .dc-grade__list dd{ margin:0; font-size:14px; color:#1a1a1a; }


/* ===============================================================
   星は黄色に戻す（2026-09-05 社長のご指摘）
   社長「口コミの星は、普通黄色では？青はおかしくない？
        世間一般的なカラーリングと合わせてほしい」

   経緯: 2026-09-04 に「色数を減らして高級感を出す」として
   .text-warning を含む色付き文字を濃紺・グレーに一括で潰した。
   その結果、Googleクチコミの5つ星まで青くなり、
   世の中のどのサイトとも違う見え方になっていた。

   色は Google のクチコミで使われている黄色に合わせる（#FBBC04）。
   評価の星（光沢・耐薬品性・防汚性）も同じ色にする。
   同じ形のものが同じページで違う色だと、別の意味に見えてしまうため。
   点いていない星はグレー（.opacity-25 が乗るのでそのまま薄く出る）。
   =============================================================== */
#wrapper.ct-page .text-warning{ color:#FBBC04 !important; }
/* Googleクチコミの星は Font Awesome のアイコン（i.fas.fa-star）で描かれている。
   上のアイコン一括指定（.fas → 濃紺/グレー）より後ろに書いて、星だけ黄色に戻す。 */
#wrapper.ct-page .fas.fa-star,
#wrapper.ct-page .fas.fa-star-half-alt,
#wrapper.ct-page .far.fa-star{ color:#FBBC04 !important; }


/* ===============================================================
   色の役割分け（2026-09-05・社長のご指摘 → V0の指示で全面見直し）

   社長「青が多すぎて暗く見えますよ？清潔感、安心感、温かさ、
        みんな失ったものが感じられない」

   何が起きていたか:
     2026-09-04 に「色数を減らして高級感を出す」として、アイコンも星も
     注意の色も、意味の違うものを全部まとめて濃紺／グレーの2色に潰した。
     結果、画面が青とグレーだけになり、寒く暗く見えるようになった。

   V0の診断と指示:
     「色数を絞る」のは正しいが、潰すべきは飾りの色であって、
     意味を持つ色ではない。役割ごとに分けること。
     温かさは暖色をベタ塗りするのではなく、
     「背景の色温度を上げる（青みを抜く）＋点で金を効かせる」で出す。

   星の色だけV0案（#C9A227 くすんだ金）を採らず #FBBC04 にしている。
   社長のご指示が「世間一般的なカラーリングと合わせてほしい」であり、
   世の中のクチコミの星は Google と同じ黄色だから。
   =============================================================== */

/* 装飾・案内のアイコン ＝ 色を持たせない（低彩度のネイビーグレー）
   判断基準（V0）:「そのアイコンの色が変わったら、
   お客様の行動や理解が変わるか？」→ 変わらないものはここ */
#wrapper.ct-page .fas, #wrapper.ct-page .far, #wrapper.ct-page .fab{
  color: #4C5B72;
}
/* 塗りボタンの中のアイコンは白のまま */
#wrapper.ct-page .btn .fas, #wrapper.ct-page .btn .far, #wrapper.ct-page .btn .fab,
#wrapper.ct-page a[href*="line.me"] .fab{ color: inherit !important; }

/* 意味を持つ色 ＝ 役割ごとに分ける（すべて彩度を落としたトーン） */
#wrapper.ct-page .text-primary{ color:#004098 !important; }   /* 当社の色。強調は1画面に1〜2箇所まで */
#wrapper.ct-page .text-success{ color:#3E7A4E !important; }   /* できる・対応可 */
#wrapper.ct-page .text-danger { color:#A6432E !important; }   /* 注意・できない */

/* 評価の星 ＝ くすんだ金（2026-09-05 社長「金でもいいですよ」）
   V0の理由:「Google公式の明るい黄色 #FBBC04 は彩度が高く安売り感が出る。
   彩度を落とした真鍮色 #C9A227 にする。光沢グラデーションや影は付けず単色で」
   クチコミの星と比較表の評価の星は同じ色にする。
   同じ形のものが場所で色違いだと「別の基準？」と誤読されるため。 */
#wrapper.ct-page .text-warning{ color:#C9A227 !important; }
#wrapper.ct-page .fas.fa-star,
#wrapper.ct-page .fas.fa-star-half-alt,
#wrapper.ct-page .far.fa-star{ color:#C9A227 !important; }
/* 点いていない星は薄いグレー */
#wrapper.ct-page .text-muted.opacity-25{ color:#D9D9D9 !important; opacity:1 !important; }


/* ===============================================================
   ボタンの3段階（2026-09-05）

   社長のご指摘:
   「相談とか見積とかのボタンもすべて青っておかしくない？」
   → 金茶 #b08d57 の塗りで試したところ、
     「自動見積茶色？？？汚くね？？？」「どう見ても茶色だぜ？」
     **実物を見て却下。金茶はベタで塗ると金ではなく茶色に見える。**

   よって、正本を読んだ上での専門家の意見を採る:
     「社長の『全部青っておかしくない？』への回答は『色を分ける』ではなく
      『**塗るのを1つだけにする**』。青であること自体は問題ではない」

   実測: このページに塗りボタンが15個あった（全32個中）。
   どれを押せばよいか分からない状態だった。これが問題の本体。

   決定:
     主ボタン（一番押してほしい＝自動見積） … 濃紺 #004098 の塗り + 白文字
       ・コントラスト 9.60:1（基準4.5を大きく上回る）
       ・当社の色そのもの。新しい色を足さない
       ・**1つのまとまりに1つだけ**
     副ボタン（相談・お問い合わせ）  … 白地 + 濃紺 #004098 の1px枠
     LINE                            … 緑のまま。副と同じ大きさ
     金茶 #b08d57                    … ボタンには使わない。星と細い罫線だけ

   🚨 この指定は body.st-btn-v2 が付いたときだけ効く。
      付くのは確認用サイトだけ。本番の見た目は変わらない。
   =============================================================== */

/* ── 主ボタン: 自動見積へ行くもの（濃紺の塗り） ── */
body.st-btn-v2 #wrapper.ct-page .btn[href*="estimate.php"],
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="estimate"]{
  background: #004098 !important;
  background-color: #004098 !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 32px !important;
}
body.st-btn-v2 #wrapper.ct-page .btn[href*="estimate.php"]:hover,
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="estimate"]:hover{
  background: #00306f !important; background-color: #00306f !important; color:#fff !important;
}
body.st-btn-v2 #wrapper.ct-page .btn[href*="estimate.php"] .fas,
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="estimate"] .fas{ color:#fff !important; }

/* ── 副ボタン: 相談・お問い合わせ（塗りをやめて枠に） ── */
/* 【2026-09-05 修正】副ボタンの枠と文字も青にしていたため、
   主ボタン（青の塗り）と並ぶと「両方青」に見えて区別がつかなかった。
   社長のご指摘:「両方青？？？なんで？？？片方白のままでよかったじゃねーか？？？」
   「さっきも片方だけ茶色だったじゃん！なんで？」
   → 金茶のときは「茶 対 青」で色相が違ったので区別できていた。
   副ボタンから青を抜き、本文と同じ濃いグレーにする。
   **色が付いているのは主ボタン1つだけ**という状態にする。 */
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="contact"],
body.st-btn-v2 #wrapper.ct-page .btn[href*="contact-form.php"],
body.st-btn-v2 #wrapper.ct-page .btn[href*="customer/"],
body.st-btn-v2 #wrapper.ct-page .btn-outline-primary:not([href*="estimate.php"]),
body.st-btn-v2 #wrapper.ct-page .btn-outline-secondary:not([href*="estimate.php"]){
  background: #fff !important;
  background-color: #fff !important;
  color: #2c2c2c !important;
  border: 1px solid #c8ccd4 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 28px !important;
}
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="contact"]:hover,
body.st-btn-v2 #wrapper.ct-page .btn[href*="contact-form.php"]:hover,
body.st-btn-v2 #wrapper.ct-page .btn-outline-primary:not([href*="estimate.php"]):hover,
body.st-btn-v2 #wrapper.ct-page .btn-outline-secondary:not([href*="estimate.php"]):hover{
  background: #f5f5f3 !important; background-color:#f5f5f3 !important; color:#2c2c2c !important;
  border-color:#a8adb8 !important;
}
body.st-btn-v2 #wrapper.ct-page a.btn[data-track-cta="contact"] .fas,
body.st-btn-v2 #wrapper.ct-page .btn[href*="contact-form.php"] .fas,
body.st-btn-v2 #wrapper.ct-page .btn-outline-primary:not([href*="estimate.php"]) .fas,
body.st-btn-v2 #wrapper.ct-page .btn-outline-secondary:not([href*="estimate.php"]) .fas{ color:#6b7280 !important; }

/* ── LINE: 緑のまま。主ボタンより大きくしない ── */
body.st-btn-v2 #wrapper.ct-page a[href*="line.me"].btn{
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 28px !important;
}


/* ── ボタンの高さと文字位置を揃える（2026-09-05 社長のご指摘）
     社長「ボタンの文字、サイズちがうくない？センターになっている？」

     測ったところ:
       高さは3つとも58pxで揃っていた。しかし
       ・文字サイズが 17px と 15px でバラバラ
       ・枠のボタンは中身が48.5pxしかないのに58pxまで引き伸ばされ、文字が上に寄っていた

     直し方: 上下の余白で高さを作るのをやめ、高さそのものを決めて
     中身を上下の中央に置く。文字サイズは3つとも同じにし、
     目立たせるのは太さと色だけにする。 */
/* 【2026-09-05 修正】最初は相談・見積のボタンだけに当てていたが、
   「全メニュー料金一覧」「施工事例を見る」等の枠ボタンが49pxのままで、
   隣に並んだときに高さが揃わなかった（社長のご指摘「おかしいよ？」）。
   小さいボタン(.btn-sm)を除く全てのボタンを同じ高さにする。 */
body.st-btn-v2 #wrapper.ct-page a.btn:not(.btn-sm),
body.st-btn-v2 #wrapper.ct-page button.btn:not(.btn-sm){
  display: inline-flex !important;
  align-items: center !important;      /* 上下の中央に */
  justify-content: center !important;  /* 左右の中央に */
  min-height: 56px !important;
  line-height: 1.4 !important;
  font-size: 16px !important;
}