/* =====================================================================
   carheart.jp ボディコーティングの料金（page-ch-coating.php）
   色・文字・共通部品は ch-works.css（.chw-*）を使い、このページだけの部品をここに足す
   ===================================================================== */

.chcp-br-pc{ display:none; }
.chw .chcp-sec{ margin:0 !important; }
.chcp{ font-variant-numeric:tabular-nums; }

/* タイトル */
.chcp-ttl{ padding-block:32px 48px; max-width:820px; }
.chcp-lead{ font-size:14px; line-height:2.05; color:var(--chw-sub); letter-spacing:.04em; max-width:42em; }
.chw .chcp-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chcp-facts li{ font-size:12px; letter-spacing:.06em; color:var(--chw-sub); padding:5px 12px; border:1px solid var(--chw-line); border-radius:2px; }

/* セクション */
.chcp-sec{ padding-block:64px; border-top:1px solid var(--chw-line); scroll-margin-top:calc(var(--chw-head) + 8px); }
.chcp-sec--sim,.chcp-sec--surf{ background:var(--chw-surf); }
.chcp-sec-tx{ font-size:14px; line-height:2; color:var(--chw-sub); max-width:34em; }
.chw .chcp-h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:17px !important; font-weight:500 !important; letter-spacing:.04em; line-height:1.6 !important; margin:40px 0 12px !important; }
.chw .chcp-h3:first-of-type{ margin-top:0 !important; }
.chcp-h3 small{ font-size:12px; font-weight:400; color:var(--chw-grey); letter-spacing:.04em; }
.chcp-note{ font-size:12px; line-height:1.9; color:var(--chw-grey); }
.chcp-note a{ color:var(--chw-wine) !important; border-bottom:1px solid currentColor !important; margin-left:6px; }
.chcp-note b{ font-weight:500; color:var(--chw-fg); }

/* ---------- シミュレーション ---------- */
.chcp-sim{ display:grid; grid-template-columns:1fr; gap:24px; }
.chcp-steps{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.chw .chcp-step{ margin:0; padding:24px 20px; border:1px solid var(--chw-line); background:var(--chw-bg); min-width:0; display:flex; flex-direction:column; gap:16px; }
.chcp-step legend{ float:left; width:100%; padding:0; display:flex; align-items:center; gap:12px; font-size:16px; letter-spacing:.04em; }
.chcp-step legend small{ font-size:12px; color:var(--chw-grey); }
.chcp-step legend + *{ clear:both; }
.chcp-step__n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--chw-fg); border-radius:50%; font-family:var(--chw-en); font-stretch:112%; font-size:12px; }
.chcp-step .chw-cta{ align-self:flex-start; min-height:36px; }
.chcp-step .chw-cta::after{ bottom:4px; }

/* サイズ */
.chcp-sizes{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--chw-fg); border-radius:2px; overflow:hidden; }
.chw .chcp-sizes button{ height:44px; padding:0; border:0; border-radius:0; background:var(--chw-bg); font-family:var(--chw-en); font-stretch:112%; font-size:14px; letter-spacing:.04em; color:var(--chw-fg); cursor:pointer; transition:background .2s,color .2s; }
.chw .chcp-sizes button + button{ border-left:1px solid var(--chw-line); }
.chw .chcp-sizes button[aria-pressed="true"]{ background:var(--chw-fg); color:var(--chw-bg); }
.chcp-ex{ display:flex; gap:12px; align-items:baseline; font-size:13px; line-height:1.8; color:var(--chw-sub); }
.chcp-ex__lb{ flex:none; font-size:12px; color:var(--chw-grey); }

/* コーティング */
.chcp-coats{ display:grid; grid-template-columns:1fr; gap:8px; }
.chcp-coat{ position:relative; cursor:pointer; }
.chcp-coat input,.chcp-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.chcp-coat__in{ display:grid; grid-template-columns:1fr; gap:2px; padding:14px 16px; border:1px solid var(--chw-line); border-radius:2px; background:var(--chw-bg); transition:border-color .2s; }
.chcp-coat__in .chw-en{ font-size:10px; }
.chcp-coat__nm{ font-size:15px; letter-spacing:.03em; }
.chcp-coat__tx{ font-size:12px; color:var(--chw-grey); line-height:1.7; }
.chcp-coat__pr{ margin-top:6px; font-family:var(--chw-en); font-stretch:112%; font-size:16px; letter-spacing:.02em; }
.chcp-coat:hover .chcp-coat__in{ border-color:var(--chw-grey); }
.chcp-coat input:checked + .chcp-coat__in{ border-color:var(--chw-fg); box-shadow:inset 0 0 0 1px var(--chw-fg); }
.chcp-coat input:focus-visible + .chcp-coat__in{ outline:1px solid var(--chw-wine); outline-offset:3px; }

/* チェック（プレミアムパック・オプション） */
.chcp-check{ position:relative; display:grid; grid-template-columns:20px 1fr auto; gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--chw-line); cursor:pointer; }
.chcp-check__b{ width:20px; height:20px; margin-top:2px; border:1px solid var(--chw-grey); border-radius:2px; background:var(--chw-bg); position:relative; transition:background .2s,border-color .2s; }
.chcp-check__b::after{ content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid var(--chw-bg); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); opacity:0; }
.chcp-check input:checked + .chcp-check__b{ background:var(--chw-fg); border-color:var(--chw-fg); }
.chcp-check input:checked + .chcp-check__b::after{ opacity:1; }
.chcp-check input:focus-visible + .chcp-check__b{ outline:1px solid var(--chw-wine); outline-offset:3px; }
.chcp-check__t{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.6; letter-spacing:.03em; }
.chcp-check__t b{ font-weight:500; }
.chcp-check__t small{ font-size:12px; color:var(--chw-grey); line-height:1.7; }
.chcp-check__p{ font-family:var(--chw-en); font-stretch:112%; font-size:14px; white-space:nowrap; padding-top:1px; }
.chcp-check.is-inc{ cursor:default; }
.chcp-check.is-inc .chcp-check__t{ color:var(--chw-grey); }
.chcp-check.is-inc .chcp-check__p{ font-family:var(--chw-jp); font-size:12px; color:var(--chw-wine); }
.chcp-pp{ border-top:1px solid var(--chw-line); }
.chcp-pp .chcp-check__p{ color:var(--chw-wine); }

/* 新車割引 */
.chcp-disc{ display:flex; flex-direction:column; gap:10px; }
.chcp-sublb{ font-size:13px; letter-spacing:.04em; }
.chcp-discs{ display:grid; grid-template-columns:1fr; gap:6px; }
.chw .chcp-discs button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; border:1px solid var(--chw-line); border-radius:2px; background:var(--chw-bg); text-align:left; font-family:var(--chw-jp); color:var(--chw-fg); cursor:pointer; transition:border-color .2s; }
.chcp-discs b{ font-weight:400; font-size:14px; }
.chcp-discs small{ font-size:11px; color:var(--chw-grey); }
.chw .chcp-discs button:hover{ border-color:var(--chw-grey); }
.chw .chcp-discs button[aria-pressed="true"]{ border-color:var(--chw-fg); box-shadow:inset 0 0 0 1px var(--chw-fg); }
.chw .chcp-discs button:disabled{ opacity:.4; cursor:not-allowed; }

/* オプション */
.chcp-opts{ display:flex; flex-direction:column; }
.chcp-opt-cat{ font-size:12px; letter-spacing:.08em; color:var(--chw-grey); padding:14px 0 4px; border-bottom:1px solid var(--chw-line); }
.chcp-opt-cat:first-child{ padding-top:0; }

/* 結果 */
.chcp-result__in{ display:flex; flex-direction:column; gap:16px; padding:28px 24px; background:var(--chw-dark); color:var(--chw-dark-fg); }
.chcp-result .chw-en{ color:var(--chw-rose); }
.chcp-result__lines{ display:flex; flex-direction:column; border-top:1px solid var(--chw-dark-line); }
.chcp-result__lines li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--chw-dark-line); font-size:13px; }
.chcp-result__lines .t{ display:flex; flex-direction:column; gap:2px; }
.chcp-result__lines small{ font-size:11px; color:var(--chw-dark-sub); }
.chcp-result__lines .p{ font-family:var(--chw-en); font-stretch:112%; white-space:nowrap; }
.chcp-result__lines li.is-off .p{ color:var(--chw-rose); }
.chcp-result__total{ display:flex; flex-direction:column; gap:4px; }
.chcp-result__total span{ font-size:12px; color:var(--chw-dark-sub); letter-spacing:.06em; }
.chcp-result__total b{ font-family:var(--chw-en); font-stretch:112%; font-weight:400; font-size:32px; line-height:1.2; letter-spacing:.01em; }
.chcp-result__note{ font-size:12px; line-height:1.9; color:var(--chw-dark-sub); }
.chw .chcp-result .chw-btn{ height:50px; width:100%; border-color:var(--chw-dark-fg); color:var(--chw-dark-fg) !important; }
.chw .chcp-result .chw-btn:hover{ background:var(--chw-dark-fg); color:var(--chw-dark) !important; }

/* ---------- 表 ---------- */
.chcp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chw .chcp-table{ width:100%; min-width:640px; border-collapse:collapse; margin:0 !important; border:0 !important; font-size:13px; }
.chw .chcp-table thead,.chw .chcp-table tbody,.chw .chcp-table tr{ background:none !important; border:0 !important; }
.chw .chcp-table th,.chw .chcp-table td{ border:0 !important; border-bottom:1px solid var(--chw-line) !important; background:none !important; padding:12px 8px !important; text-align:right; font-weight:400 !important; color:var(--chw-fg) !important; line-height:1.5; white-space:nowrap; }
.chw .chcp-table thead th{ font-family:var(--chw-en); font-stretch:112%; font-size:12px; color:var(--chw-sub) !important; font-weight:500 !important; border-bottom:1px solid var(--chw-fg) !important; }
.chw .chcp-table th:first-child{ text-align:left; padding-left:0 !important; font-family:var(--chw-jp); white-space:normal; min-width:150px; }
.chw .chcp-table td{ font-family:var(--chw-en); font-stretch:112%; }
.chw .chcp-table td:last-child,.chw .chcp-table th:last-child{ padding-right:0 !important; }
.chw .chcp-table .hl{ background:rgba(110,43,73,.06) !important; color:var(--chw-wine) !important; }
.chcp-list{ display:flex; flex-direction:column; gap:6px; margin-top:20px !important; }
.chcp-list li{ position:relative; padding-left:14px; font-size:13px; line-height:1.9; color:var(--chw-sub); }
.chcp-list li::before{ content:""; position:absolute; left:0; top:.9em; width:6px; height:1px; background:var(--chw-grey); }

/* ---------- 相談フォーム ----------
   左：お送りする内容（1）／右：上にフォーム（2）、下にLINE */
.chcp-send{ display:grid; grid-template-columns:1fr; gap:40px; }
.chcp-sendsum,.chcp-sendway{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.chcp-send__n{ display:flex; align-items:center; gap:12px; margin:0 !important; font-size:15px; font-weight:500; letter-spacing:.06em; color:var(--chw-fg); }
.chcp-send__n span{ flex:none; width:28px; height:28px; border:1px solid var(--chw-fg); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--chw-en); font-stretch:112%; font-size:12px; font-weight:400; }

/* 1 お送りする内容 */
.chcp-sendsum__card{ display:flex; flex-direction:column; gap:18px; padding:24px; background:var(--chw-surf); }
.chcp-sendsum__lines{ display:flex; flex-direction:column; margin:0 !important; padding:0 !important; list-style:none; border-top:1px solid var(--chw-line); }
.chcp-sendsum__lines li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--chw-line); font-size:13px; line-height:1.7; }
.chcp-sendsum__lines .p{ flex:none; font-family:var(--chw-en); font-stretch:112%; white-space:nowrap; }
.chcp-sendsum__lines li.is-off .p{ color:var(--chw-wine); }
.chcp-sendsum__total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.chcp-sendsum__total span{ font-size:12px; letter-spacing:.06em; color:var(--chw-sub); }
.chcp-sendsum__total b{ font-family:var(--chw-en); font-stretch:112%; font-weight:400; font-size:24px; line-height:1.2; }
.chw .chcp-sendsum__edit{ align-self:flex-start; font-size:12px; letter-spacing:.06em; color:var(--chw-sub) !important; border-bottom:1px solid var(--chw-line) !important; padding-bottom:2px; }
.chw .chcp-sendsum__edit:hover{ color:var(--chw-wine) !important; border-color:var(--chw-wine) !important; }

/* 2 送り方：上にフォーム、下にLINE */
.chcp-sendway{ gap:0; }
.chcp-way{ display:flex; flex-direction:column; gap:20px; }
.chcp-send__n small{ margin-left:auto; font-size:11px; font-weight:400; letter-spacing:.04em; color:var(--chw-grey); }
.chcp-send__n span.is-line{ border-color:var(--chw-line); background:var(--chw-surf); color:var(--chw-wine); }
.chcp-or{ display:flex; align-items:center; gap:16px; margin:36px 0 !important; font-size:12px; letter-spacing:.2em; color:var(--chw-grey); }
.chcp-or::before,.chcp-or::after{ content:""; flex:1; height:1px; background:var(--chw-line); }
.chcp-pane__tx{ margin:0 !important; font-size:13px; line-height:1.9; color:var(--chw-sub); }
.chcp-pane__note{ margin:0 !important; font-size:12px; line-height:1.8; color:var(--chw-grey); text-align:center; }
.chcp-sendsum__lines .t{ display:flex; flex-direction:column; gap:2px; }
.chcp-sendsum__lines small{ font-size:11px; color:var(--chw-grey); line-height:1.6; }

/* フォーム（Contact Form 7）。フォーム内の見積り欄は左の「お送りする内容」と重なるため隠す（送信には使う） */
.chcp-form .orsep,.chcp-form a.tel,.chcp-form a[href^="tel:"]{ display:none !important; }
.chcp-form .chcp-fm__lb,.chcp-form .chcp-fm__sum{ display:none !important; }
.chcp-form .wpcf7{ margin:0 !important; }
.chcp-fm{ display:flex; flex-direction:column; gap:24px; }
.chcp-fm__grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.chcp-fm label{ display:flex; flex-direction:column; gap:7px; margin:0; font-size:13px; letter-spacing:.04em; }
.chcp-fm label > span:first-child{ display:flex; align-items:center; gap:8px; }
.chcp-fm label em{ font-style:normal; font-size:10px; letter-spacing:.08em; color:var(--chw-wine); border:1px solid currentColor; border-radius:2px; padding:0 6px; line-height:1.7; }
.chw .chcp-fm input[type="text"],.chw .chcp-fm input[type="email"],.chw .chcp-fm input[type="tel"],.chw .chcp-fm textarea{
  width:100%; margin:0 !important; padding:12px 14px !important; border:1px solid var(--chw-line) !important; border-radius:2px !important;
  background:var(--chw-bg) !important; box-shadow:none !important; font-family:var(--chw-jp); font-size:15px !important; color:var(--chw-fg); line-height:1.6;
}
.chw .chcp-fm input::placeholder,.chw .chcp-fm textarea::placeholder{ color:#B5B1AC; }
.chw .chcp-fm input:focus,.chw .chcp-fm textarea:focus{ border-color:var(--chw-fg) !important; outline:0; }
.chw .chcp-fm textarea{ min-height:120px; }
.chcp-fm__hidden{ display:none !important; }
.chw .chcp-fm input[type="submit"],.chw .chcp-fm .chcp-fm__submit{
  width:100%; height:56px; border:0 !important; border-radius:2px !important; background:var(--chw-fg) !important; color:var(--chw-bg) !important;
  font-family:var(--chw-jp); font-size:14px !important; letter-spacing:.12em; cursor:pointer; transition:background .2s; box-shadow:none !important;
}
.chw .chcp-fm input[type="submit"]:hover{ background:var(--chw-wine) !important; }
.chcp-form .wpcf7-not-valid-tip{ font-size:12px; color:var(--chw-wine); margin-top:4px; }
.chcp-form .wpcf7-response-output{ margin:16px 0 0 !important; padding:12px 16px !important; font-size:13px; border:1px solid var(--chw-line) !important; }
.chcp-form .wpcf7-spinner{ margin:12px auto 0; display:block; }

/* LINE */
.chw .chcp-line__text{ margin:0 !important; padding:18px 20px; background:var(--chw-surf); border:0; font-family:var(--chw-jp); font-size:13px; line-height:1.9; color:var(--chw-fg); white-space:pre-wrap; word-break:break-all; overflow:auto; max-height:320px; }
.chw .chcp-line ol{ list-style:none; margin:0 !important; padding:0 !important; counter-reset:chl; display:flex; flex-direction:column; border-top:1px solid var(--chw-line); }
.chcp-line li{ counter-increment:chl; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:64px; padding:12px 0 12px 40px; border-bottom:1px solid var(--chw-line); position:relative; font-size:14px; line-height:1.7; }
.chcp-line li::before{ content:counter(chl); position:absolute; left:0; top:50%; transform:translateY(-50%); width:26px; height:26px; border:1px solid var(--chw-line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--chw-en); font-size:11px; color:var(--chw-wine); background:var(--chw-bg); }
.chw .chcp-mini{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:112px; height:40px; padding:0 14px; border:1px solid var(--chw-fg) !important; border-radius:2px; background:var(--chw-bg); font-family:var(--chw-jp); font-size:13px; letter-spacing:.06em; color:var(--chw-fg) !important; cursor:pointer; transition:background .2s,color .2s; }
.chw .chcp-mini:hover{ background:var(--chw-fg); color:var(--chw-bg) !important; }
.chcp-toast{ margin:0 !important; font-size:12px; color:var(--chw-wine); }

/* ====================== PC ====================== */
@media (min-width:960px){
  .chcp-br-pc{ display:inline; }
  .chcp-ttl{ padding-block:48px 64px; }
  .chcp-lead{ font-size:15px; }
  .chcp-sec{ padding-block:112px; }
  .chcp-sec--sim{ padding-block:96px; }
  .chcp-sim{ grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start; }
  .chcp-result{ position:sticky; top:calc(var(--chw-head) + 24px); }
  .chw .chcp-step{ padding:32px 32px 36px; gap:20px; }
  .chw .chcp-sizes button{ height:48px; font-size:15px; }
  .chcp-coats{ grid-template-columns:1fr 1fr; }
  .chcp-discs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .chcp-send{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; align-items:start; }
  .chcp-sendsum{ position:sticky; top:calc(var(--chw-head) + 24px); }
  .chcp-sendsum__card{ padding:28px; }
  .chcp-fm__grid{ grid-template-columns:1fr 1fr; gap:18px 20px; }
  .chcp-fm__grid .is-wide{ grid-column:1 / -1; }
}