@charset "UTF-8";
/*
 * BUYHOUSE — 買主が物件をさがすためのサイト
 *
 * ── 2026-08-17 全面的に作り直した ──
 *
 * 初版はブランドサイトの型だった（大きな主張 → 説明 → 物件）。
 * オーナーの指摘「AIが作った感がすごい。スーモや他ポータルのようにしてほしい」を受けて、
 * **ポータルサイトの型**に組み直した。違いは次の4点である。
 *
 *   1. **情報密度。** 余白を詰め、罫線で区切る。1画面に入る物件数を増やす
 *   2. **物件が先。** 主張は細い帯に縮め、開いた瞬間に物件が見えるようにする
 *   3. **探せる形。** 検索バー・件数・並び替え・お気に入りを置く
 *   4. **横長のカード＋スペック表。** 縦型カードは «並べる» ためのもので、
 *      «比べる» ためのものではない。数字を表で揃えると比較できる
 *
 * 守るものは変えない：本文16px以上、行間1.7以上、タップ44px、375pxで横スクロールなし。
 */

:root {
  /* ── 色は、いただいたロゴから取っている（2026-08-19） ──
       #0E6EB8 … ロゴの文字の青。見出しとナビゲーション
       #008AD4 … シンボルの明るい青。リンクとボタン
     価格だけは赤のままにしてある。**金額は «いちばん先に目に入る» 必要があり、
     青の中に置いた青字は沈む。**中古車の一覧で赤が使われてきたのには理由がある */
  --navy:      #0e6eb8;
  --navy-d:    #0b62a5;   /* 検索の帯。濃くしすぎると重くなる */
  --navy-l:    #008ad4;
  --price:     #c0392b;   /* 価格。不動産では赤系が慣習 */
  --accent:    #008ad4;   /* 行動を促すボタン。ロゴの明るい青 */

  --bg:        #eef0f2;   /* ポータルらしい薄いグレーの下地 */
  --panel:     #ffffff;
  --line:      #d5d8dc;
  --line-soft: #e8eaec;
  --muted:     #666c72;
  --text:      #1f2325;

  --ok:        #1c7a4a;
  --warn:      #8a5a00;

  --radius:    6px;
  --wrap:      1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* ── 書体（2026-08-19）──
     OS標準に任せると、Windowsは游ゴシック、Macはヒラギノで **別のサイトに見える。**
     游ゴシックは太字が細く、見出しに «強さ» が出ない。
     Noto Sans JP を先頭に置き、届かない環境では従来どおりに戻す */
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-l); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }

/* ── 帯（サンプル・下見中・環境） ───────────────── */
.demo-bar {
  background: #7a2d12; color: #fff;
  font-size: 13.5px; line-height: 1.6; padding: 8px 16px; text-align: center;
}
.demo-bar strong { margin-right: .5em; }
.demo-bar-preview { background: #12395b; }

.env-bar {
  background: #6b21a8; color: #fff;
  font-size: 13.5px; line-height: 1.6; padding: 8px 16px; text-align: center;
}
.env-bar strong { margin-right: .6em; }

/* ── ヘッダ ───────────────────────────────────── */
.site-header { background: #fff; border-bottom: 3px solid var(--navy); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  min-height: 58px; padding-block: 6px;
}
.logo-old-unused {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  color: #fff; text-decoration: none; min-height: 44px; margin-right: auto;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-block: 4px; }
.logo img { height: 38px; width: auto; display: block; }
.logo-owner { font-size: 12px; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }

.nav-bar { background: var(--navy); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
  color: #fff; text-decoration: none; font-size: 14.5px;
  padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,.16); }

.header-tel {
  display: flex; flex-direction: column; align-items: flex-end;
  color: #fff; text-decoration: none; min-height: 44px; justify-content: center;
}
.header-tel-label { font-size: 11px; color: var(--muted); line-height: 1.3; }
.header-tel-num   { font-size: 21px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; color: var(--navy); text-decoration: none; }

/* ── 検索バー ─────────────────────────────────── */
.searchbar { background: var(--navy-d); padding-block: 12px; }
.searchbar-inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sb-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; min-width: 0; }
.sb-field label { font-size: 12px; color: #b9d0e4; font-weight: 700; letter-spacing: .02em; }
.sb-field select {
  min-height: 46px; padding: 8px 10px; font-size: 15px; font-family: inherit;
  border: 1px solid #4a6a88; border-radius: 4px; background: #fff; color: var(--text);
  width: 100%;
}
.sb-go {
  min-height: 46px; padding: 8px 26px; border: 0; border-radius: 4px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700;
  font-family: inherit; cursor: pointer; flex: 0 0 auto;
}
.sb-go:hover, .sb-go:focus-visible { background: #a44715; }
.sb-reset {
  min-height: 46px; padding: 8px 14px; border: 1px solid #4a6a88; border-radius: 4px;
  background: transparent; color: #cfe0ee; font-size: 14px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; flex: 0 0 auto;
}

/* ── パンくず ─────────────────────────────────── */
.breadcrumb { font-size: 12.5px; color: var(--muted); padding-block: 8px; }
.breadcrumb a { color: var(--navy-l); }
.breadcrumb span[aria-hidden] { margin-inline: 5px; color: #9aa0a6; }

/* ── 一覧の見出しと結果バー ───────────────────── */
.list-head { padding-top: 4px; }
.list-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.4; }
.list-note {
  margin: 0 0 12px; font-size: 13.5px; color: var(--muted);
  border-left: 3px solid var(--navy); padding-left: 10px; line-height: 1.6;
}

.resultbar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
.result-count { margin: 0; font-size: 15px; }
.result-count strong { font-size: 26px; font-weight: 700; color: var(--price); margin-inline: 3px; }
.result-sort { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.result-sort label { font-size: 13.5px; color: var(--muted); }
.result-sort select {
  min-height: 44px; padding: 6px 10px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--text);
}

/* ── 物件カード（横長・比べるための形） ───────── */
.cards { display: grid; gap: 10px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.card:hover { border-color: var(--navy-l); }

.card-inner { display: grid; grid-template-columns: 280px 1fr; }

.card-photo { position: relative; background: #e3e6e8; }
.card-photo a { display: block; }
.card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-badges { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.5;
  padding: 3px 9px; color: #fff;
}
.badge-torihiki { background: var(--navy); }
.badge-cut      { background: var(--price); }
.badge-new      { background: var(--ok); }
.photo-count {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12px;
  padding: 2px 8px; border-radius: 3px;
}

.card-body { padding: 12px 14px 12px; display: flex; flex-direction: column; min-width: 0; }

.card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.card-price { margin: 0; font-size: 27px; font-weight: 700; color: var(--price); line-height: 1.25; letter-spacing: -.01em; }
.card-price-old { font-size: 13px; font-weight: 400; color: var(--muted); }

.card-title { margin: 4px 0 3px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover, .card-title a:focus-visible { color: var(--navy-l); text-decoration: underline; }

.card-place { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.card-place span { display: inline-block; }
.card-place .sep { margin-inline: 6px; color: #b6bbc0; }

/* スペック表。数字を揃えると «比べられる» */
.spec-strip {
  width: 100%; border-collapse: collapse; margin-bottom: 8px;
  font-size: 13.5px; table-layout: fixed;
}
.spec-strip th, .spec-strip td {
  border: 1px solid var(--line-soft); padding: 4px 8px; text-align: left; line-height: 1.6;
}
.spec-strip th { background: #f5f6f7; color: var(--muted); font-weight: 700; width: 25%; white-space: nowrap; }
.spec-strip td { background: #fff; }

.card-voice {
  margin: 0 0 8px; font-size: 13.5px; line-height: 1.7;
  background: #f4f7fa; border-left: 3px solid var(--navy-l);
  padding: 7px 10px; color: #2b3237;
}
.card-voice b { color: var(--navy); font-weight: 700; margin-right: .4em; }

.card-meta {
  margin: auto 0 8px; font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 3px 12px; padding-top: 6px; border-top: 1px dotted var(--line);
}

.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card-actions .btn { flex: 0 1 auto; }

/* お気に入り */
.fav {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  min-height: 44px; padding: 6px 14px; border-radius: 4px;
  font-size: 14px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.fav[aria-pressed="true"] { border-color: var(--price); color: var(--price); background: #fff5f4; font-weight: 700; }
.fav-star { font-size: 15px; }

/* ── ボタン ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 46px; padding: 9px 20px; border-radius: 4px;
  font-size: 15.5px; font-weight: 700; font-family: inherit;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.4; text-align: center;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: #a44715; }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--navy); color: #fff; }
.btn-lg { min-height: 54px; font-size: 17px; padding-inline: 32px; }
.btn-tel { background: #fff; color: var(--navy); border-color: var(--line); flex-direction: column; gap: 0; }
.btn-tel-label { font-size: 12px; font-weight: 400; color: var(--muted); }
.btn-tel-num { font-size: 19px; font-weight: 700; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── 該当なし・空 ─────────────────────────────── */
.no-match, .empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 20px; text-align: center; font-size: 15.5px; line-height: 1.9;
}
.empty-action { text-align: center; margin-top: 16px; }

/* ── なぜ他社物を載せないのか（下部・簡潔に） ─── */
.why { background: var(--panel); border-block: 1px solid var(--line); margin-top: 28px; padding-block: 32px; }
.why-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--navy); }
.why-lead  { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); max-width: 46em; }
.why-grid  { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.why-item  { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fafbfc; }
.why-item h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.why-item p  { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text); }

/* ── 売却の誘い ───────────────────────────────── */
.sell-invite { background: var(--navy); color: #fff; padding-block: 28px; }
.sell-invite-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sell-invite-text { flex: 1 1 320px; }
.sell-invite-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.sell-invite-lead  { margin: 0; font-size: 14.5px; color: #d3e2ee; }

/* ── 詳細ページ ───────────────────────────────── */
.detail { padding-bottom: 8px; }

.detail-head {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px;
}
.detail-badges { margin: 0 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.detail-badges .badge { border-radius: 3px; }
.badge-kind { background: #e6ecf2; color: var(--navy); }
.detail-title { margin: 0 0 6px; font-size: 24px; line-height: 1.45; font-weight: 700; }
.detail-place { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }
.detail-price { margin: 0; font-size: 36px; font-weight: 700; color: var(--price); line-height: 1.2; }
.detail-price-old { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.detail-torihiki-note { margin: 8px 0 0; font-size: 14.5px; color: var(--navy); font-weight: 700; }
.detail-meta { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 3px 14px; }

/* 2段組み（PC）：左が中身、右が問い合わせ */
.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
.detail-main { min-width: 0; }
.detail-side { position: sticky; top: 12px; }

.side-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.side-price { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--price); line-height: 1.25; }
.side-title { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.side-box .btn { width: 100%; margin-bottom: 8px; }
.side-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* 写真 */
.gallery { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.gallery-main { background: #e3e6e8; border-radius: 4px; overflow: hidden; }
.gallery-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #22262a; }
.gallery-caption { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); min-height: 1.6em; }
.gallery-thumbs {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px;
}
.thumb { padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: none; cursor: pointer; display: block; width: 100%; min-height: 44px; }
.thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumb.is-current { border-color: var(--accent); }

/* 見出し */
.sec-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.sec-h {
  margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--navy);
  border-bottom: 2px solid var(--navy); padding-bottom: 7px;
}

/* 概要表 */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table th, .spec-table td { border: 1px solid var(--line-soft); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.7; }
.spec-table th { background: #f5f6f7; font-weight: 700; color: var(--muted); width: 30%; }
.spec-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* 担当者から */
.voice-body { display: flex; gap: 14px; }
.voice-face { border-radius: 50%; flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; }
.voice-comment { margin: 0 0 8px; font-size: 15.5px; line-height: 1.9; }
.voice-name { margin: 0; font-size: 14px; font-weight: 700; }
.voice-role { font-weight: 400; color: var(--muted); margin-left: .5em; }

/* 先にお伝えしておきます */
.honest .sec-h { color: var(--warn); border-bottom-color: #d9b74f; }
.honest-lead { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.honest-list { margin: 0; padding: 14px 16px 14px 34px; background: #fdf8ec; border: 1px solid #e8d9ac; border-radius: 4px; font-size: 15px; line-height: 1.85; }
.honest-list li + li { margin-top: 8px; }

/* まわりの様子 */
.around-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.around-list li { display: flex; gap: 12px; font-size: 14.5px; border-bottom: 1px dotted var(--line); padding-bottom: 6px; }
.around-label { flex: 0 0 6.5em; font-weight: 700; color: var(--navy); }

/* 掲載終了 */
.gone { padding-block: 48px; text-align: center; }
.gone-title { font-size: 23px; margin: 0 0 16px; color: var(--navy); }
.gone-text { font-size: 15.5px; margin: 0 0 12px; }
.gone-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.back-link { padding-block: 16px; font-size: 14.5px; }

/* ── 問い合わせの帯（詳細ページ下部） ─────────── */
.cta { background: var(--navy); color: #fff; margin-top: 8px; }
.cta-inner { padding-block: 30px; }
.cta-title { margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.5; }
.cta-lead { margin: 0 0 18px; font-size: 14.5px; color: #d3e2ee; max-width: 44em; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-note { margin: 14px 0 0; font-size: 12.5px; color: #a9c4dc; }

/* ── フォーム ─────────────────────────────────── */
.form-section { padding-block: 24px 40px; }
.form-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.form-intro { margin: 0 0 20px; font-size: 15px; max-width: 44em; line-height: 1.85; }
.form-target { background: #f4f7fa; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 4px; padding: 12px 14px; margin-bottom: 20px; font-size: 14.5px; }
.form-target strong { display: block; font-size: 16px; margin-bottom: 3px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font-size: 16px; font-family: inherit; line-height: 1.7;
  border: 1px solid #a9aeb3; border-radius: 4px; background: #fff; color: var(--text);
}
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.field-error input, .field-error textarea { border-color: #b3261e; background: #fdf4f3; }
.error-text { margin: 5px 0 0; font-size: 14px; color: #b3261e; font-weight: 700; }

.form-alert { border-radius: 4px; padding: 14px 16px; margin-bottom: 20px; font-size: 15px; }
.form-alert-error { background: #fdf4f3; border: 1px solid #e5b4b0; color: #8c1d18; }
.form-alert-ok    { background: #f0f8f3; border: 1px solid #a9d5bd; color: #14562f; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { padding-block: 40px; }
.thanks-title { font-size: 23px; color: var(--navy); margin: 0 0 14px; }

/* ── 売却ページ ───────────────────────────────── */
.sell-hero { background: var(--navy); color: #fff; padding-block: 36px; }
.sell-hero-title { margin: 0 0 12px; font-size: 27px; line-height: 1.45; font-weight: 700; }
.sell-hero-lead { margin: 0; font-size: 15.5px; color: #d3e2ee; max-width: 38em; line-height: 1.9; }

.compare-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--panel); }
.compare-table th, .compare-table td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.75; }
.compare-table thead th { background: #f5f6f7; color: var(--navy); font-weight: 700; }
.compare-table tbody th { background: #fafbfc; width: 26%; font-weight: 700; }
.compare-ours { background: #f2f7fb; }

.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; grid-template-columns: repeat(2, 1fr); }
.steps-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel); }
.steps-list li::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 6px; line-height: 1;
}
.steps-list h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; }
.steps-list p  { margin: 0; font-size: 14px; line-height: 1.8; }

/* ── 会社概要 ─────────────────────────────────── */
.about-table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 14.5px; }
.about-table th, .about-table td { padding: 11px 13px; border: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.about-table th { width: 28%; background: #f5f6f7; font-weight: 700; color: var(--muted); }
.todo { color: var(--warn); font-weight: 700; }

/* ── 共通セクション見出し（下層ページ） ───────── */
.page-title { margin: 0 0 6px; font-size: 23px; font-weight: 700; color: var(--navy); line-height: 1.45; }
.section-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--navy); }
.section-lead { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); max-width: 44em; line-height: 1.85; }
.pad { padding-block: 24px; }

/* ── フッタ ───────────────────────────────────── */
.site-footer { background: var(--navy-d); color: #c3d2df; padding-block: 28px 22px; font-size: 13.5px; }
.footer-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.footer-name { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; }
.footer-license, .footer-line { margin: 0 0 4px; }
.footer-line a { color: #fff; }
.footer-note { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12.5px; color: #9db6cc; line-height: 1.8; }
.footer-copy { margin: 0; font-size: 12px; color: #86a1b8; }

/* ── 狭い画面 ─────────────────────────────────── */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .why-grid { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .card-inner { grid-template-columns: 1fr; }
  .card-photo img { aspect-ratio: 3 / 2; }
  .header-tel { display: none; }
  .nav { width: 100%; }
  .nav a { flex: 1; justify-content: center; font-size: 13.5px; padding-inline: 6px; }
  .searchbar-inner { gap: 6px; }
  .sb-field { flex: 1 1 calc(50% - 3px); }
  .sb-go { flex: 1 1 100%; }
  .sb-reset { flex: 1 1 100%; justify-content: center; }
  .result-sort { margin-left: 0; width: 100%; }
  .result-sort select { flex: 1; }
  .detail-title { font-size: 20px; }
  .detail-price { font-size: 30px; }
  .card-price { font-size: 24px; }
  .spec-strip th { width: 30%; }
  .footer-grid { grid-template-columns: 1fr; }
  .card-actions .btn { flex: 1 1 100%; }
}

/* 印刷（査定訪問で紙に出す） */
@media print {
  .site-header, .searchbar, .cta, .nav, .demo-bar, .env-bar, .back-link,
  .resultbar, .fav, .detail-side, .sell-invite { display: none; }
  body { background: #fff; font-size: 11pt; }
  .sec-box, .detail-head, .card { border-color: #999; }
}

/* ══════════════ ここから中古車サイトで足したぶん ══════════════
   BUYHOUSE（不動産）から骨格を引き継いでいるため、
   **車に固有のもの**だけをここに足している。上の共通部分は触らない。 */

/* ── 価格 ──
   支払総額を «主»、車両本体価格を «従» にする。
   業界の慣習は逆だが、それが不信の源だった（2023年10月の総額表示義務はその是正） */
.price-label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; line-height: 1.4;
}
.card-foot {
  margin: 8px 0 0; font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.card-fresh { font-weight: 700; color: var(--ok); }
.card-more { margin-left: auto; color: var(--navy-l); font-weight: 700; }

/* ── 一覧の印 ── */
.badge-ok   { background: var(--ok); }
.badge-warn { background: var(--warn); }
.badge-nego { background: #6b4bab; }

/* ── 詳細 ── */
.detail-sub { margin: 0 0 8px; font-size: 14.5px; color: var(--muted); }
.detail-nego {
  margin: 8px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.7;
  background: #f3f0fa; border: 1px solid #cfc3ea; border-radius: 4px; color: #40307a;
}

.price-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px;
}
.price-total-label { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.price-total { margin: 2px 0 6px; font-size: 30px; font-weight: 700; color: var(--price); line-height: 1.2; }
.price-body  { margin: 0; font-size: 14px; }
.price-diff  { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.price-area  { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.price-note {
  margin: 12px 0 0; padding: 10px 12px; background: #fdf8ec;
  border: 1px solid #e8d9ac; border-radius: 4px; font-size: 13px; line-height: 1.75;
}
.price-note-title { margin: 0 0 4px; font-weight: 700; color: var(--warn); }
.price-note p { margin: 0; }

.side-cta { display: grid; gap: 8px; margin-top: 14px; }
.side-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.75; }

/* ── 本文の節 ── */
.specs, .equip, .maint, .note-block, .voice, .honest { margin-top: 16px; }
.equip-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px;
  margin: 0; padding: 0 0 0 20px; font-size: 14.5px; line-height: 1.8;
}
.voice-text { margin: 0 0 8px; font-size: 15.5px; line-height: 1.9; }

/* ── 状態を表す文字 ── */
.ok-text   { color: var(--ok); }
.warn-text { color: var(--price); }
.muted     { color: var(--muted); font-size: 13px; }

/* ── 在庫が0台のとき ──
   中古車は1台ずつ売れる。**0件は障害ではなく、ふつうの営業状態である。**
   «見つかりませんでした» で終わらせず、探している車を聞く */
.empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; margin-top: 12px; text-align: center;
}
.empty-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--navy); }
.empty-lead  {
  margin: 16px auto 16px; max-width: 40em; font-size: 15px; line-height: 1.9;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}

/* ── 問い合わせへの導線 ── */
.cta-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 26px; }
.cta-text { flex: 1 1 320px; }
.cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cta .cta-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.cta .cta-note  { margin: 0; font-size: 14px; color: #d3e2ee; line-height: 1.8; }

.btn-form {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-form:hover, .btn-form:focus-visible { background: #a44715; }
.btn-fav { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-fav[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.btn-submit { min-height: 54px; font-size: 17px; padding-inline: 32px; }
.fav-text { font-size: 14px; }
.btn-tel span { font-size: 18px; font-weight: 700; }

/* ── フォーム ── */
.form { max-width: 40em; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 700; margin-bottom: 5px; font-size: 15px; }
.form-row input[type="text"], .form-row textarea {
  width: 100%; padding: 11px 12px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--text);
}
.form-row-err input, .form-row-err textarea { border-color: #c0392b; background: #fdf6f5; }
.form-err  { margin: 5px 0 0; font-size: 13.5px; color: #c0392b; font-weight: 700; }
.form-hint { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.form-privacy { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 20px; }
.req {
  background: var(--price); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 2px;
}
/* 人には見えない欄（機械だけが埋める）。display:none にすると埋めない機械がある */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-check { flex: 0 1 auto; justify-content: flex-end; padding-bottom: 8px; }
.sb-check label { color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 5px; cursor: pointer; }

@media (max-width: 900px) {
  .equip-list { grid-template-columns: 1fr; }
  .cta-buttons { width: 100%; }
  .cta-buttons .btn { flex: 1 1 100%; }
  .price-total { font-size: 26px; }
}


/* ══════════════ ロゴを入れたときの調整（2026-08-19） ══════════════ */

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 10px; flex-wrap: wrap;
}

/* ナビゲーションの帯。**ロゴの下に敷く**ので、幅いっぱいに伸ばす */
.nav-bar .nav { gap: 0; }
.nav-bar .nav a {
  color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 13px 18px; display: inline-flex; align-items: center; min-height: 44px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.nav-bar .nav a:first-child { border-left: 1px solid rgba(255,255,255,.18); }
.nav-bar .nav a:hover, .nav-bar .nav a:focus-visible { background: var(--navy-l); }

/* 電話は «押せるもの» として大きく見せる */
.header-tel {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; text-decoration: none;
}

/* ボタン。オレンジをやめ、ロゴの明るい青にした */
.btn-form { background: var(--navy-l); border-color: var(--navy-l); color: #fff; }
.btn-form:hover, .btn-form:focus-visible { background: #0077b8; border-color: #0077b8; }
.btn-tel  { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-tel:hover, .btn-tel:focus-visible { background: #eef6fc; }
.sb-go    { background: var(--navy-l); }
.sb-go:hover, .sb-go:focus-visible { background: #0077b8; }

/* 見出しの下線もロゴの青で */
.section-title { border-bottom-color: var(--navy); }

@media (max-width: 700px) {
  .header-inner { padding-block: 8px; }
  .logo img { height: 36px; }
  .logo-owner { display: none; }
  .header-tel-num { font-size: 18px; }
  .nav-bar .nav a { flex: 1; justify-content: center; font-size: 13px; padding-inline: 6px; }
}


/* ══════════ 見た目の調整（2026-08-19・オーナーの指摘） ══════════
   「濃い青が微妙」「ロゴが大きすぎてバランスが悪い」

   ── 直したこと ──
   ・ヘッダは白。**ロゴを主役にし、まわりを静かにする**
   ・ロゴは高さ38px。会社名は小さく添えるだけ
   ・ナビゲーションの帯は «濃紺» をやめ、ロゴの青にした。高さも詰めた
   ・検索の帯は、青の面積が増えすぎないよう薄い青地に変え、文字は濃い青にした
     **青は «效かせどころ» に置くから効く。全面に敷くと、ただ重いだけになる** */

.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { padding-block: 12px 10px; align-items: center; }
.logo { gap: 10px; align-items: baseline; }
.logo-owner { font-size: 11.5px; color: var(--muted); }

/* ナビゲーションの帯は細く */
.nav-bar { background: var(--navy); }
.nav-bar .nav a {
  font-size: 14px; padding: 10px 16px; min-height: 40px;
  border-right: 1px solid rgba(255,255,255,.16);
}

/* 検索の帯。**濃い青の面積を減らす** */
.searchbar { background: #eaf3fb; border-bottom: 1px solid #cfe3f4; padding-block: 10px; }
.sb-field label { color: var(--navy); font-weight: 700; }
.sb-check label { color: var(--navy); }
.sb-reset { color: var(--navy); border-color: #b9d5ec; background: #fff; }
.sb-reset:hover, .sb-reset:focus-visible { background: #fff; border-color: var(--navy); }

/* 電話番号は青で。下線は出さない */
.header-tel-num { color: var(--navy); text-decoration: none; }
.header-tel-num:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .logo img { height: 32px; }
}

/* ══════════ 一覧を枠の中でスクロールさせる（2026-08-19） ══════════

   在庫が24台あると、下まで見るのに延々とスクロールすることになり、
   **上にある «並び替え» と «絞り込み» が画面から消える。**
   枠に収めれば、条件を変えながら見比べられる。

   高さは «3台ちょうど» ではなく、**4台目が少し覗く**ようにしてある。
   切りよく収めると「ここで終わり」に見え、下に続きがあることに気づかれない。 */
.cards {
  max-height: min(76vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;      /* 端まで来てもページごと動かない */
  padding: 10px;
  background: #e6ebf0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scrollbar-gutter: stable;
}
.cards:focus-visible { outline: 3px solid var(--navy-l); outline-offset: 2px; }

/* スクロールできることが «見て» 分かるように、つまみを太めにする */
.cards::-webkit-scrollbar { width: 12px; }
.cards::-webkit-scrollbar-track { background: #d9e0e6; border-radius: 6px; }
.cards::-webkit-scrollbar-thumb { background: #9fb3c4; border-radius: 6px; border: 2px solid #d9e0e6; }
.cards::-webkit-scrollbar-thumb:hover { background: var(--navy-l); }
.cards { scrollbar-color: #9fb3c4 #d9e0e6; scrollbar-width: auto; }

.cards-note {
  margin: 6px 0 0; font-size: 12.5px; color: var(--muted); text-align: right;
}

/* ── スマホでは枠の中のスクロールをやめる ──
   小さい画面で入れ子のスクロールを作ると、**指がどちらを動かしているのか分からなくなる。**
   縦に長くなっても、素直に並べるほうが使える */
@media (max-width: 760px) {
  .cards {
    max-height: none; overflow-y: visible; padding: 0;
    background: transparent; border: 0; border-radius: 0;
  }
  .cards-note { display: none; }
}

/* ══════════ 書体が入ったので、見出しの «強さ» を出す（2026-08-19） ══════════
   Noto Sans JP は 900 まである。游ゴシックでは出せなかった太さが使えるので、
   **数字と見出しをはっきり太くする。** 中古車の一覧で読み取るのは、ほとんどが数字である */
.list-title  { font-weight: 900; letter-spacing: -.01em; }
.card-price  { font-weight: 900; letter-spacing: -.02em; }
.price-total { font-weight: 900; letter-spacing: -.02em; }
.detail-title { font-weight: 900; }
.section-title { font-weight: 900; }
.result-count strong { font-weight: 900; }
.logo-mark, .footer-name { font-weight: 900; }

/* ══════════ スマホでの横あふれを潰す（2026-08-19・Chromeで実物を見て発見） ══════════

   390px幅で撮って分かったこと。**電話番号・諸元表・並び順が画面の外へ出ていた。**
   原因は一覧カードの諸元表で、`年式｜値｜走行距離｜値` の4列を横に並べていたため、
   狭い画面では入りきらず、**そのぶんページ全体が横に広がっていた。**

   機械の検査（横幅の測定）では見つけにくく、**実物を見て初めて分かる類の崩れ**である。 */

@media (max-width: 760px) {
  /* ⚠ ここに html, body { overflow-x: hidden } を書いてはいけない。
     はみ出した部分が «隠れる» だけで、中身は画面の外に出たままになる。
     しかも機械の検査（scrollWidth）まで «あふれなし» と答えるようになり、
     **崩れているのに «直った» と報告してしまう。**（2026-08-19 実際にやった）
     はみ出す要素を1つずつ潰すこと。tests/layout.mjs が名指しで教える */
  .wrap { padding-inline: 12px; }

  /* 諸元は «項目｜値» の2列にして、縦に積む */
  .spec-strip tr { display: grid; grid-template-columns: 6.2em 1fr; }
  .spec-strip th, .spec-strip td { width: auto; display: block; }
  .spec-strip th { border-right: 0; }

  /* 見出し・本文が枠から出ないように */
  .card-title, .card-place, .list-note, .detail-title, .detail-sub { overflow-wrap: anywhere; }

  /* ヘッダ。電話は折り返して、左に寄せる */
  .header-inner { gap: 8px; }
  .header-tel { align-items: flex-start; text-align: left; width: 100%; }
  .header-tel-num { font-size: 20px; }

  /* 件数と並び順 */
  .resultbar { flex-wrap: wrap; gap: 8px; }
  .result-sort { width: 100%; margin-left: 0; }
  .result-sort select { flex: 1; min-width: 0; }

  /* 表は、はみ出す前に自分の中で折り返す */
  .spec-table th { width: 34%; }
  .spec-table th, .spec-table td { padding: 8px 10px; }
}

/* ══════════ 一覧の «続きがある» ことを見せる（2026-08-19） ══════════
   枠の下でカードが途中で切れると、**そこで終わったようにも、壊れたようにも見える。**
   下端をうっすら白く落として、「まだ下がある」と分かるようにする */
.cards-wrap { position: relative; }
.cards-wrap::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(230,235,240,0), rgba(230,235,240,.96));
  border-radius: 0 0 var(--radius) var(--radius);
  pointer-events: none;                /* 下のカードは押せるままにする */
}
@media (max-width: 760px) {
  .cards-wrap::after { display: none; }   /* スマホは枠内スクロールをやめているので不要 */
}

/* ══════════ 文字の大きさ（2026-08-19・機械で測って直した） ══════════
   一覧の諸元は情報の密度が要るので小さくしていたが、**13px は本文には小さい。**
   数字を読ませる表なので、14px まで上げる。読めない表は、無いのと同じ */
.spec-strip th, .spec-strip td { font-size: 14px; }
.card-place { font-size: 14px; }
.card-foot  { font-size: 13px; }
.spec-table th, .spec-table td { font-size: 15px; }

@media (max-width: 760px) {
  .spec-strip th, .spec-strip td { font-size: 14.5px; padding: 8px 10px; }
  .card-title { font-size: 17px; }
  .form-hint, .form-privacy { font-size: 13.5px; }
}

/* 押せるものは、指で押せる大きさに（44px以上） */
.form-row input[type="text"], .form-row textarea, .form input, .form textarea { min-height: 46px; }
.form-row textarea { min-height: 120px; }
.hp input { min-height: 0; }        /* 人には見えない欄。ここは対象外 */

/* ══════════ 小さすぎた文字と、押しにくかったところ（2026-08-19・機械で名指しして直した） ══════════ */
.header-tel-label { font-size: 12px; }
.footer-copy      { font-size: 12.5px; }
.footer-note      { font-size: 13px; }
.price-total-label, .price-label { font-size: 12.5px; }
.badge            { font-size: 12.5px; }

/* チェックボックスは小さくてよいが、**押す場所はラベル全体**にする。
   四角そのものを狙わせない */
.sb-check label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.sb-check input[type="checkbox"] { width: 18px; height: 18px; }
.req { font-size: 11.5px; }

/* 諸費用の説明と、来店のご案内は «読ませる文章»。12.5pxでは小さい（機械が名指しした） */
.price-diff, .side-note, .price-area { font-size: 13px; line-height: 1.8; }

/* ══════════ スマホでは «価格» を先に出す（2026-08-19・実物を見て気づいた） ══════════
   PCは右side、スマホは1列になるため、そのままだと
   **支払総額が諸元表20行の «後ろ» に落ちる。**
   中古車を見に来た人が最初に知りたいのは «いくらで乗れるか» であって、排気量ではない。
   1列になったときは、価格と電話のかたまりを先頭へ持ち上げる */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { order: -1; position: static; }
  .price-box   { margin-bottom: 4px; }
}