/* =========================================================================
   pc.css  ―  オンライン査定TOP（買取相場シミュレーションTOP）PC 本文スタイル
   --------------------------------------------------------------------------
   読み込み順: ../_shared/skeleton-base.css → tokens.css → ../_shared/chrome-pc.css → pc.css
   ★色・体裁は Figma 元画像からのピクセル実測に合わせています（tokens.css 参照）。
   ★共有 chrome（.gh）の一部（ロゴ色/アクティブタブ形状）は本デザインに合わせて
     このファイルで上書きします（_shared は他画面共有のため改変しない方針）。
     ※本デザインのヘッダーは _shared/chrome-pc.css（赤下線タブ・赤ロゴ）と体裁が異なるため、
       共有chromeを本デザインに寄せて更新するかは別途デザイン統一の判断が必要（README参照）。
   ========================================================================= */

/* ---- ページ土台 ------------------------------------------------------- */
.scl-page { margin: 0; background: #fafafa; color: var(--scl-color-text); font-family: var(--scl-font-base); font-size: var(--scl-fs-md); line-height: var(--scl-lh-base); }  /* 実デザイン: ページ地#FAFAFA・白パネルが浮く */
.scl-page a { color: inherit; text-decoration: none; }
.scl-page img { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
.scl-container { max-width: var(--scl-container); margin: 0 auto; padding: 0 24px; }

/* 共通フォーカスリング（PC/SP整合） */
.scl-select:focus-visible, .scl-cta:focus-visible, .scl-page a:focus-visible,
.scl-consent input:focus-visible {
  outline: 3px solid var(--scl-color-required); outline-offset: 2px;
}

/* ===== 共有chrome（ヘッダー）の本デザイン向け上書き ====================
   ★実デザイン(3267:26972 Header_PC2)＝共有chromeの単段ヘッダー（赤ロゴ画像・縦区切り線・赤下線active）に準拠。 */
.gh { background: #fff; }
/* ★実デザイン(3267:26972 Header_PC2)＝共有chromeの単段ヘッダー（赤ロゴ画像・縦区切り線・赤下線active）に準拠。
   以前ワイヤー(1055:10202)に合わせた黒文字ロゴ/グレーフォルダタブ/2段の上書きは撤去。
   実デザインに合わせた微調整のみ: タブ文字16px・#212121（非アクティブは通常ウェイト） */
.gh__tabs a { font-size: 16px; color: #212121; font-weight: 400; }
.gh__tabs a.is-active { color: #212121; font-weight: 600; }

/* ---- ① ヒーロー（実デザイン 3267:26970）：白背景・見出し＋実績リード ---------- */
.scl-hero { background: transparent; color: var(--scl-color-text); }
.scl-hero__inner { padding: 32px 24px 16px; text-align: center; }
.scl-hero__title { margin: 0 0 12px; font-size: 32px; font-weight: 700; letter-spacing: .02em; color: var(--scl-color-text); }   /* 実デザイン: Bold 32px */
/* 実デザイン: リード前段はグレー16px、「年間実績 70万件以上」は赤#dc0000・太字・大きめ(22px) */
.scl-hero__lead { margin: 0; font-size: 16px; color: #737373; }
.scl-hero__lead-em { margin-left: 10px; color: #dc0000; font-weight: 700; font-size: 22px; }

/* ---- ② 簡易査定フォーム（実デザイン 3267:27136）---------------------- */
.scl-formsec { background: transparent; padding: 0 0 var(--scl-space-8); }
.scl-simform { max-width: 1120px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
/* 0731調整デザイン: 赤バー(#dc0000) + 3特徴バッジ帯(#ebebeb・白カード) + フィールド帯(#f2f2f2) */
.scl-simform__bar { min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 8px 24px; background: #dc0000; font-size: 20px; font-weight: 700; line-height: 1.4; color: #fff; text-align: center; }
.scl-simform__badges { background: #ebebeb; display: flex; justify-content: center; gap: 16px; padding: 24px 32px; }
.scl-simform__badge { flex: 0 1 290px; min-height: 80px; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 10px; padding: 12px 20px; }
.scl-simform__badge-ico { flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain; }
.scl-simform__badge span { font-size: 16px; font-weight: 700; line-height: 1.4; color: #333; }
.scl-simform__body { background: #f2f2f2; padding: 0 80px 40px; }
.scl-fields { max-width: 680px; margin: 0 auto; padding: 28px 0; display: flex; flex-direction: column; gap: 20px; }
.scl-field { display: block; }
.scl-field__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #333; }
/* 青OKバッジ #1874e8・赤必須 */
.scl-ok { font-style: normal; flex: none; width: 32px; height: 20px; display: none; align-items: center; justify-content: center; background: #1874e8; color: #fff; font-size: 12px; font-weight: 600; border-radius: 2px; }
.scl-req { font-style: normal; flex: none; width: 32px; text-align: center; background: none; color: #dc0000; font-size: 12px; font-weight: 600; }
/* 入力＝白・#dcdcdc枠・角丸4・44px・赤シェブロン。値プリフィル表示 */
.scl-select { width: 100%; height: 44px; padding: 0 40px 0 16px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; font-size: 16px; color: #333;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23dc0000' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; }
  .scl-field select { width: 100%; height: 44px; padding: 0 40px 0 16px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; font-size: 16px; color: #333;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23dc0000' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; }
.scl-select--empty { color: rgba(51,51,51,.3); }
.scl-select--input { background-image: none; padding-right: 16px; }  /* 郵便番号/メールは<input>＝プルダウン矢印を出さない */
.scl-field__row { display: flex; gap: 10px; }
.scl-select--year { width: 184px; }
.scl-select--month { width: 104px; }
/* 送信部 */
.scl-simform__foot { max-width: 960px; margin: 0 auto; border-top: 1px solid #dedede; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.scl-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: #333; cursor: pointer; }
/* 実デザイン: 枠は赤。ネイティブcheckboxは appearance:none にしないと border が効かないため自前描画 */
.scl-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; appearance: none; -webkit-appearance: none;
  border: 1px solid #dc0000; border-radius: 2px; background: #fff; cursor: pointer; }
.scl-consent input:checked { background: #dc0000; }
.scl-consent input:checked::after { content: "\2713"; display: block; color: #fff; font-size: 11px; line-height: 14px; text-align: center; }
.scl-cta { width: 420px; height: 53px; border: none; border-radius: 10px; background: #dc0000; color: #fff; font-size: 24px; font-weight: 600; cursor: pointer; }
.scl-cta:hover { background: #c40000; }
.scl-simform__links { display: flex; gap: 16px; justify-content: center; }
.scl-simform__links a { font-size: 14px; color: #333; text-decoration: underline; }

/* ---- 汎用セクション（実デザイン：左寄せ見出し＋リード） ---------------- */
.scl-sec { padding: 32px 0; }
.scl-sec__h2 { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.6; color: #212121; }
.scl-sec__lead { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: #555; }
.scl-sec__h3 { margin: 24px 0 16px; font-size: 24px; font-weight: 700; line-height: 1.6; color: #212121; }

/* ---- 汎用プレースホルダ（写真・ロゴ・記事画像。本番は実画像へ差し替え） -- */
.scl-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background: var(--scl-color-panel);
  border: 1px dashed var(--scl-color-border-line);
  border-radius: var(--scl-radius-sm);
  color: var(--scl-color-text-sub);
  font-size: var(--scl-fs-xs);
  box-sizing: border-box;
}
.scl-ph--wide { aspect-ratio: 16 / 9; }


/* ④ メーカー別：白カード内ロゴグリッド9列 */
.scl-makercard { background: #fff; border-radius: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 40px 80px; }
.scl-makers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 24px; }
.scl-makers__item { text-align: center; }
.scl-makers__item a { display: flex; flex-direction: column; align-items: center; gap: 8px; }
a.scl-makers__link { display: flex; flex-direction: column; align-items: center; gap: var(--scl-space-2); }
/* .scl-makers__logo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; max-width: 85px; background: #fff; border: 1px solid #ebebeb; border-radius: 16px; padding: 10px; } */
/* .scl-makers__logo img { max-width: 100%; max-height: 56px; object-fit: contain; } */
.scl-makers__name { font-size: 14px; color: rgba(0,0,0,.9); text-align: center; line-height: 1.2; }
.scl-makers__logo {box-sizing: border-box; width: 64px; height: 64px; border-radius: 16px;
  background: #fff; border: 1px solid #ebebeb;   /* 白地＋薄グレー枠。本番はロゴ画像を敷く */
}
.scl-makers__logo--dark { background: #111; border-color: transparent; }   /* 暗色ロゴは黒地（本番はロゴ画像側） */

.scl-makers__item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
}

.scl-makers__logo {
    display: block !important;
    box-sizing: border-box !important;
    width: 64px !important;
    height: 64px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin-bottom: 8px !important;
}

.scl-makers__name {
    display: block !important;
    text-align: center !important;
}

/* ⑤ 3つの特徴：枠カード3（アイコン＋テキスト） */
.scl-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #dcdcdc; border: 1px solid #dcdcdc; border-radius: 8px; overflow: hidden; }  /* 実デザイン: 1枠を縦区切りで3分割の連結ボックス */
.scl-feature { display: flex; align-items: center; gap: 16px; background: #fff; border: none; border-radius: 0; padding: 20px 24px; }
.scl-feature__icon { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.scl-feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.scl-feature__text { font-size: 14px; font-weight: 700; line-height: 1.4; color: #212121; }

/* ⑥ 人気車種（実デザイン: 5列×2行の連結カード・トヨタ12px＋車種14px濃紺・DIN数字20px＋万円10px） */
.scl-popular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #dcdcdc; border: 1px solid #dcdcdc; border-radius: 16px; overflow: hidden; }
.scl-popcard { background: #fff; }
.scl-popcard a { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 13px 20px; height: 100%; }
.scl-popcard__top { display: flex; align-items: center; gap: 10px; }
.scl-popcard__thumb { flex: none; width: 68px; height: 34px; }
.scl-popcard__thumb img { width: 100%; height: 100%; object-fit: contain; }
.scl-popcard__names { display: flex; flex-direction: column; min-width: 0; }
.scl-popcard__maker { font-size: 12px; font-weight: 600; color: #212121; line-height: 1.4; }
.scl-popcard__name { font-size: 14px; font-weight: 700; color: #1d2088; line-height: 1.4; }
.scl-popcard__price { display: flex; flex-direction: column; align-items: flex-start; }
.scl-popcard__plabel { font-size: 10px; color: #212121; line-height: 1.3; }
.scl-popcard__prow { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.scl-popcard__prow b { font-size: 20px; font-weight: 600; color: #212121; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scl-popcard__unit, .scl-popcard__tilde { font-size: 10px; color: #212121; padding-bottom: 3px; }

/* ⑦ 3つの理由：赤丸番号カード3 */
.scl-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.scl-reasoncard { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; }
.scl-reasoncard__head { margin: 0 0 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 700; line-height: 1.5; color: #212121; }
.scl-reasoncard__no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #dc0000; color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.scl-reasoncard__text { margin: 0; font-size: 14px; line-height: 1.6; color: #555; }

/* ⑧ おすすめ情報：画像カード3 */
.scl-reco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.scl-reco__item a { display: block; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; height: 100%; }
.scl-reco__thumb { display: block; aspect-ratio: 16 / 10; background: #eceef0; }
.scl-reco__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scl-reco__thumb .scl-ph { border-radius: var(--scl-radius-sm); }
.scl-reco__body { display: block; padding: 16px; }
.scl-reco__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: #212121; }
.scl-reco__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 14px; line-height: 1.6; color: #212121; }

/* レスポンシブ */
@media (max-width: 1180px) {
  .scl-makers { grid-template-columns: repeat(6, 1fr); }
  .scl-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .scl-makers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .scl-features, .scl-reasons, .scl-reco { grid-template-columns: 1fr; }
  .scl-popular { grid-template-columns: repeat(2, 1fr); }
  .scl-simform__badges { flex-wrap: wrap; padding-left: 16px; padding-right: 16px; }
  .scl-simform__body { padding-left: 24px; padding-right: 24px; }
}

/* メインフォント（入力要素は継承しないため明示）。値は tokens.css の --scl-font-base 参照 */
.scl-page, .scl-page input, .scl-page select, .scl-page button, .scl-page textarea { font-family: var(--scl-font-base); }
.only-sp { display: none; }
/* SP専用の「もっと見る」展開UI（checkbox/label）は PC では出さない */
.scl-popmore-chk, .scl-popmore { display: none; }
/* 実デザイン: 「愛車相場を知る」〜サポートバーは約20px。共有chromeの .gf{margin-top:64px} を本画面のみ上書き
   （_shared は改変しない方針のため、ここで打ち消す） */
.scl-backlink { padding: 4px 0 0; font-size: 13px; }
.gf { margin-top: 16px; }
.scl-backlink a { color: #555; }
.scl-exhaust-row{
  display: flex;
  align-items: center;
  gap: 8px;
}
.scl-unit{
  flex: 0 0 auto;
}

.scl-field-error {
    width: 100%;
    margin: 0 0 var(--scl-space-2);
    color: var(--scl-color-required);
    font-size: var(--scl-fs-xs);
    font-weight: 400;
    line-height: 1.5;
}
#car_exhaust_list{
   width: 100%;
}

#auc_ref_grade_nm{
  font-size: 16px;
}