/* ============================================================
   B.D.M 公開LP デザインシステム（/parking・/vacant-house・/inheritance）

   ★正本は管理LP（/management）です。そこで固まった考え方を、
     各ページの内容に合わせて横展開しています（見た目のコピーではありません）。

   ★このファイルを読み込むのは上の3ページだけです。
     `/`（index）と `/management` は読み込みません。
   ★ページ固有の調整は必ず `body[data-consult="…"]` で囲みます。
     3ページに共通で効かせてよいものだけ、囲まずに書いています。
   ★既存の style.css は1バイトも書き換えていません。上書きは後読みのここで行います。
   ★クラス名はすべて bdm- 接頭辞（既存クラスは上書きのみ）。
   ★影・グラデーション・アニメーション・半透明の文字色は使いません。
   ★角丸はカード4px・ピル999pxまで。

   目次
     1. デザイントークン
     2. 3ページ共通の整え
     3. /parking
     4. /vacant-house
     5. /inheritance
     6. 画面幅ごとの調整
   ============================================================ */


/* ============================================================
   1. デザイントークン（管理LPと同じ値）
   ============================================================ */
:root{
  --bdm-teal:        #007F89;
  --bdm-teal-strong: #006A73;
  --bdm-teal-tint:   #F2F8F8;
  --bdm-teal-line:   #B3D6D9;

  --bdm-paper:       #FFFFFF;
  --bdm-kinari:      #FAF8F4;
  --bdm-gray-bg:     #F5F6F6;

  --bdm-line:        #E3E6E6;
  --bdm-line-strong: #CFD5D5;

  --bdm-ink:         #1C2529;
  --bdm-ink-sub:     #5A666B;
  --bdm-ink-faint:   #8A9497;

  --bdm-s1: 8px;
  --bdm-s2: 12px;
  --bdm-s3: 16px;
  --bdm-s4: 24px;
  --bdm-s5: 32px;
  --bdm-s6: 48px;
  --bdm-s7: 64px;
  --bdm-s8: 96px;
}

/* 読み上げだけに残す文字 */
.bdm-sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}


/* ============================================================
   2. 3ページ共通の整え
   ============================================================ */

/* --- 2-1. 角丸をそろえる（14px / 12px / 11px → 4px） ---
   管理LPと同じ「カード4px」に統一します。丸みが強いと上品さが落ちるためです。 */
.worries li,
.tile,
.qlist li,
.opt,
.steps3__item,
.split__card,
.money,
.money__pair span,
.deadline,
.trio li,
.callout,
.lead-out,
.note-box{
  border-radius: 4px;
}
.callout,
.lead-out{
  border-radius: 0 4px 4px 0;
}

/* --- 2-2. 「こんなお悩み」は白い面＋細い罫のカードに ---
   （この節の地色は白なので、面ではなく罫でカードにします） */
.bdm-worries li{
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  padding: var(--bdm-s2) var(--bdm-s3);
  color: var(--bdm-ink);
}
.bdm-worries li svg{ color: var(--bdm-teal); }

/* --- 2-3. 補足は「箱」をやめて休符にする ---
   ★最終CTAの直前に、面も枠も持たない区間を1つ作ります。
     情報が終わる → 目が休まる → CTA、という流れにするためです。 */
.section .note-box{
  background: transparent;
  border-radius: 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
}
.section .note-box__icon{
  background: transparent;
  border: 1px solid var(--bdm-teal-line);
}

/* --- 2-4. 最終CTAの上に余白をとる ---
   HTML側に padding-top:0 が直接書かれているので、中の器で空けます。 */
.section--tint > .container{
  padding-top: var(--bdm-s7);
}

/* --- 2-5. teal の帯が続きすぎないようにする ---
   ★`.callout` と `.lead-out` は、もとはどちらも「teal の面＋左3pxの罫」で
     まったく同じ見た目でした。節ごとに2本並ぶと、そこだけが主張しすぎます。
     まとめの一文（.lead-out）は teal のまま、補足（.callout）は面をやめて
     細い罫だけにし、強弱をつけます。 */
.callout{
  background: transparent;
  border-left: 2px solid var(--bdm-line-strong);
  padding: var(--bdm-s2) 0 var(--bdm-s2) var(--bdm-s4);
}
.callout__ic{ color: var(--bdm-ink-faint); }
.callout b{ color: var(--bdm-ink); }
.callout span{ color: var(--bdm-ink-sub); }
.lead-out{
  background: var(--bdm-teal-tint);
  border-left-color: var(--bdm-teal);
}

/* --- 2-6. 図解の器（必要なページだけ使います） --- */
.bdm-figure{
  margin: var(--bdm-s5) 0 0;
  padding: var(--bdm-s4);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
/* ★読むための文なので 12px は小さすぎます。スマホを優先して 13px へ。 */
.bdm-figure__cap{
  margin-top: var(--bdm-s3);
  padding-top: var(--bdm-s2);
  border-top: 1px solid var(--bdm-line-strong);
  font-size: var(--font-note);
  line-height: 1.7;
  color: var(--bdm-ink-sub);
}
.bdm-ic{
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
}
.bdm-ic svg{ width: 19px; height: 19px; }

/* --- 2-7. 中間CTA（管理LPと同じ。最終CTAより弱く） --- */
.bdm-cta-mid{
  margin-top: var(--bdm-s6);
  padding: var(--bdm-s4);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
/* ★中間CTAの本文は、行の長さをそろえます（公開LPデザインシステムの共通ルール）。
   そろえないと、最後の行が「す。」の2文字だけになる幅が出ます
   （/inheritance 430px で [21,21,2]、/management 900px で [21,22,2]、375px で [19,17,2]）。
   ★高さは変わりません（7幅で実測。行の分かれ方だけが変わります）。
   ★対応していないブラウザでは、いまと同じ折り返しに戻るだけで崩れません。 */
.bdm-cta-mid__t{
  text-wrap: balance;
  margin: 0 0 var(--bdm-s3);
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--bdm-ink);
}
.bdm-cta-mid__btns{
  display: grid;
  gap: var(--bdm-s1);
}
.bdm-cta-mid .btn{
  min-height: 50px;
  border-radius: 4px;
  box-shadow: none;
  font-size: min(var(--font-cta), 16px);
  background: #fff;
}
.bdm-cta-mid .btn--tel{
  border: 1.5px solid var(--bdm-teal);
  color: var(--bdm-teal-strong);
}
.bdm-cta-mid .btn--line{
  border: 1.5px solid var(--line-green-d);
  color: var(--line-green-d);
}
.bdm-cta-mid .btn:hover{ background: var(--bdm-teal-tint); }
.bdm-cta-mid .btn--line:hover{ background: #F1FBF4; }
.bdm-cta-mid__note{
  margin: var(--bdm-s2) 0 0;
  font-size: var(--font-note);
  line-height: 1.7;
  color: var(--bdm-ink-sub);
}


/* ============================================================
   3. /parking
   ★図解は足していません。
     このページの本文には「順番」や「手順」の記述が無く、図にすると
     本文に無いサービスや流れを足すことになるためです。
     代わりに、6つの対応（サービスの一覧）の見せ方を整えています。
   ============================================================ */

/* 6つが同じ白い箱で並ぶと、同じ形が続いて単調に見えます。
   箱をやめて、細い罫で区切った一覧にします。 */
body[data-consult="parking"] .tiles,
body[data-consult="vacant-house"] .tiles{
  display: grid;
  /* ★列を明示します。土台の .tiles は flex ＋ justify-content:center で、
     grid にすると列が内容幅になり、行が枠の中で中央に浮きます
     （390px で 350px の枠に 212px の行になっていました）。 */
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 0;
  max-width: 720px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  overflow: hidden;
}
body[data-consult="parking"] .tile,
body[data-consult="vacant-house"] .tile{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: var(--bdm-s3);
  min-width: 0;
  padding: var(--bdm-s3) var(--bdm-s4);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
}
body[data-consult="parking"] .tile__icon,
body[data-consult="vacant-house"] .tile__icon{
  margin: 0;
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
}
body[data-consult="parking"] .tile__label,
body[data-consult="vacant-house"] .tile__label{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bdm-ink);
}


/* ============================================================
   4. /vacant-house
   ★図解を1つだけ足しています——「売る・貸す・残す」。
     これはこのページ本文の言葉そのもの（CTA前の一文）で、
     「まだ決まっていない段階でも構いません」という
     このページでいちばん伝えたいことを、目で分かる形にしたものです。
   ============================================================ */
.bdm-choice{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bdm-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-choice li{
  display: grid;
  /* ★アイコン／見出し／説明の3段を固定します。
     こうしないと説明の行数の違いで、3つの見出しの高さがずれます。 */
  grid-template-rows: auto auto 1fr;
  align-content: start;
  justify-items: center;
  gap: var(--bdm-s2);
  padding: var(--bdm-s4) var(--bdm-s2);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
.bdm-choice__t{
  font-family: var(--mincho-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--bdm-ink);
}
.bdm-choice__d{
  font-size: var(--font-note);
  line-height: 1.7;
  color: var(--bdm-ink-sub);
  text-align: center;
}
/* 3つは横並びで、どれも同じ重さ（どれかを勧める形にしない） */
.bdm-choice-note{
  margin: var(--bdm-s4) 0 0;
  padding: var(--bdm-s2) var(--bdm-s4);
  background: var(--bdm-teal-tint);
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  font-size: var(--font-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--bdm-teal-strong);
}


/* ============================================================
   5. /inheritance
   ★図解は足していません（このページには既に
     期限の数字カード・分け方の図・3ステップ図があります）。
     箱の重さと teal の量を整え、中間CTAを1か所だけ足しています。
   ============================================================ */

/* 8つの選択肢が同じ白い箱で続くので、箱をやめて罫で区切ります */
body[data-consult="inheritance"] .opts{
  gap: 0;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  overflow: hidden;
}
body[data-consult="inheritance"] .opt{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--bdm-s3) var(--bdm-s4);
}
body[data-consult="inheritance"] .opt + .opt{
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="inheritance"] .opt__n{
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
  border-radius: 4px;
}

/* 5つの質問（qlist）も同じ扱いに */
body[data-consult="inheritance"] .qlist{
  gap: 0;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  overflow: hidden;
}
body[data-consult="inheritance"] .qlist li{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--bdm-s3) var(--bdm-s4);
}
body[data-consult="inheritance"] .qlist li + li{
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="inheritance"] .qlist__n{
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
  border-radius: 4px;
}

/* 期限の数字カード —— 管理LPの数字カードと同じ作りに */
body[data-consult="inheritance"] .deadline{
  background: var(--bdm-kinari);
  border: 0;
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  padding: var(--bdm-s4);
}
body[data-consult="inheritance"] .deadline__k{
  font-size: var(--font-min);
  letter-spacing: .06em;
  color: var(--bdm-ink-sub);
}
body[data-consult="inheritance"] .deadline__n{ color: var(--bdm-teal-strong); }
body[data-consult="inheritance"] .deadline__d{ color: var(--bdm-ink); }
body[data-consult="inheritance"] .deadline__note{ color: var(--bdm-ink-sub); }

/* 分け方の図 */
body[data-consult="inheritance"] .money{
  background: var(--bdm-kinari);
}
body[data-consult="inheritance"] .money__pair span{
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}

/* 3ステップ図 */
body[data-consult="inheritance"] .steps3__item{
  background: var(--bdm-kinari);
  border-color: var(--bdm-line);
}
body[data-consult="inheritance"] .steps3__n{
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
  border-radius: 4px;
}
body[data-consult="inheritance"] .steps3__arrow,
body[data-consult="inheritance"] .steps3__arrow::after{
  background: var(--bdm-line-strong);
  border-color: var(--bdm-line-strong);
}
body[data-consult="inheritance"] .steps3__arrow::after{ background: none; }

/* 2枚のカード（分けやすい / 分けにくい） */
body[data-consult="inheritance"] .split__card{ border-color: var(--bdm-line); }
body[data-consult="inheritance"] .split__ic{
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
  border-radius: 4px;
}

/* 専門家ネットワークの札 */
body[data-consult="inheritance"] .talks__list li{ border-radius: 999px; }


/* ============================================================
   6. 画面幅ごとの調整
   ブレークポイントは既存ページと同じ 900 / 760 / 699 / 599px。
   ============================================================ */

@media (min-width: 900px){
  /* 対応一覧は2列に（1列だと縦に長くなりすぎるため） */
  body[data-consult="parking"] .tiles,
  body[data-consult="vacant-house"] .tiles{
    grid-template-columns: 1fr 1fr;
  }
  body[data-consult="parking"] .tile:nth-child(2n),
  body[data-consult="vacant-house"] .tile:nth-child(2n){
    border-left: 1px solid var(--bdm-line);
  }
  body[data-consult="parking"] .tile:nth-child(n+3),
  body[data-consult="vacant-house"] .tile:nth-child(n+3){
    border-top: 1px solid var(--bdm-line);
  }
  /* ★項目が奇数のとき（/vacant-house は5つ）、最後の1つが片側に
     取り残されて右が空きます。最後だけ横いっぱいに使います。 */
  body[data-consult="parking"] .tile:last-child:nth-child(odd),
  body[data-consult="vacant-house"] .tile:last-child:nth-child(odd){
    grid-column: 1 / -1;
  }

  /* 中間CTA —— 文とボタンを横に並べる。
     ★ただし文の列が細くなるときは、横並びをやめて縦に積みます。
       器の幅はページによって違い（/inheritance は 620px）、
       ボタン 392px を引くと文が 138px しか残らず、
       44文字が**1行8文字で6行**になっていました。
       grid は折り返せないので flex ＋ flex-wrap を使います。 */
  .bdm-cta-mid{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bdm-s4);
    padding: var(--bdm-s4) var(--bdm-s5);
  }
  .bdm-cta-mid__t{
    /* 260px を下回るなら、ボタンは次の行へ回す */
    flex: 1 1 260px;
    margin-bottom: 0;
  }
  .bdm-cta-mid__btns{ flex: 0 0 auto; grid-template-columns: auto auto; }
  .bdm-cta-mid .btn{ padding-inline: var(--bdm-s4); }
  .bdm-cta-mid__note{ flex: 1 1 100%; margin-top: 0; }
}

@media (max-width: 899px){
  /* 対応一覧は1列（罫線で区切る） */
  body[data-consult="parking"] .tile + .tile,
  body[data-consult="vacant-house"] .tile + .tile{
    border-top: 1px solid var(--bdm-line);
  }
}

@media (max-width: 699px){
  .bdm-figure{ padding: var(--bdm-s2); }
  /* 3つの選択肢は、細い画面でも横に3つ並べます
     （縦に積むと「順番がある」ように見えてしまうため） */
  /* ★列の内側を広げます。4px ずつだと1行7文字ぶんしか入らず、
     16文字の説明が 7+7+2 になって最後の行が「する」だけになりました。 */
  .bdm-choice{ gap: 4px; }
  .bdm-choice li{ padding: var(--bdm-s3) 2px; }
  .bdm-choice__t{ font-size: 17px; letter-spacing: .04em; }
  .bdm-choice__d{
    font-size: var(--font-note);
    letter-spacing: 0;
    /* 行の長さをそろえて、最後の行だけ極端に短くなるのを防ぎます */
    text-wrap: balance;
  }
  /* ★細い画面では改行位置の指定を無効にします。
     1列が8文字ぶんしかなく、指定どおりに折ると
     あふれてさらに折り返され、1〜2文字の行が出るためです。 */
  .bdm-choice__d br{ display: none; }
}

@media (max-width: 599px){
  .section--tint > .container{ padding-top: var(--bdm-s6); }
  body[data-consult="parking"] .tile,
  body[data-consult="vacant-house"] .tile{
    padding: var(--bdm-s2) var(--bdm-s3);
    gap: var(--bdm-s2);
  }
  body[data-consult="inheritance"] .opt,
  body[data-consult="inheritance"] .qlist li{
    padding: var(--bdm-s3);
  }
}

/* ============================================================
   7. 行の分かれ方（★孤立した1〜2文字だけを直す）
   正本は docs/lp/B.D.M_Public_LP_Design_System.md §5-2。

   ★一括指定はしません。7幅（1440/1280/900/768/430/390/375）で
     「直る件数」と「もともと孤立が無いのに行が変わる件数（巻き添え）」を
     実測し、巻き添えが小さいセレクタだけに当てています。
   ★どれも高さ・ページ全長は変わりません（実測 0 件）。
   ★対応していないブラウザでは、いまと同じ折り返しに戻るだけです。
   ============================================================ */

/* 選べる道の説明 —— 「収支と募集条件を確かめま／す。」の「す。」が孤立
   （直る16 / 巻き添え0） */
body[data-consult="inheritance"] .opt__d{ text-wrap: balance; }

/* 図解の注記 —— 「…構いませ／ん。」（直る2 / 巻き添え0） */
.bdm-choice-note{ text-wrap: balance; }

/* ほかのご相談への導線 —— 768px で「選び／直す」（直る4 / 巻き添え0） */
.other-link__l{ text-wrap: balance; }

/* こんなお悩み —— 「…見えにく／い」（直る2 / 巻き添え2） */
.worries li span{ text-wrap: balance; }

/* 補足の強調文 —— 「…必要がありま／す。」（直る1 / 巻き添え1） */
.note-box strong{ text-wrap: balance; }

/* ★中央揃えのリード文だけ。中央揃えで最後の2文字が残ると、
   いちばん目立ちます（直る3 / 巻き添え5）。
   ★`.sec-lead` 全体に当てると巻き添えが82件になるので、当てません。 */
.center .sec-lead{ text-wrap: balance; }

/* ============================================================
   8. /vacant-house — 空き家ページの作り込み
   ★このページの目的は「空き家を売ってもらうこと」ではなく、
     「何もしないまま時間が経つのを終わらせること」です。
     だから、危険色・強い影・警告マークは使いません。
     面と細い罫と余白だけで、落ち着いて読める形にします。
   ★ページ固有の指定なので、すべて body[data-consult="vacant-house"] で
     囲っています（他の4ページには1バイトも届きません）。
   ============================================================ */

/* --- 8-1. 小さめの節見出し（「もし、実際に使われてしまったら。」など） --- */
body[data-consult="vacant-house"] .sec-title--sm{
  font-size: var(--font-heading);
}

/* --- 8-2. 4つのリスク（建物／近隣／行政・税／防犯） ---
   白いカードを4枚並べると「AIっぽい」見た目になるので、
   1つの生成りの器の中を、細い罫で4つに分けます。 */
body[data-consult="vacant-house"] .bdm-figure--risk{
  padding: 0;
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  overflow: hidden;
}
body[data-consult="vacant-house"] .bdm-risk{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-consult="vacant-house"] .bdm-risk__item{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  /* ★align-content を指定しないと、2段が箱の高さに合わせて伸び、
     見出しと説明のあいだが行によってずれます（実測で確認）。 */
  align-content: start;
  align-items: start;
  column-gap: var(--bdm-s3);
  row-gap: 6px;
  padding: var(--bdm-s4);
}
body[data-consult="vacant-house"] .bdm-risk__item + .bdm-risk__item{
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="vacant-house"] .bdm-risk__item .bdm-ic{
  grid-row: 1 / 3;
}
body[data-consult="vacant-house"] .bdm-risk__t{
  font-family: var(--mincho-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--bdm-ink);
}
body[data-consult="vacant-house"] .bdm-risk__d{
  font-size: var(--font-body);
  line-height: 1.85;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}

/* --- 8-3. 防犯（公的機関が確認している使われ方） ---
   ★teal の面は使いません。白い面＋左の罫だけにして、
     「警告」ではなく「事実の引用」に見えるようにします。 */
/* ★2026-09-24（画像レビュー）：中盤で「同じテンポの説明が続く」件の実測と対応。
   この節は**白地**で、その上に**白い箱が4つ**積み上がっていました
   （`.bdm-guard` / `__src` / `--sub` / `__note` の地色と節の地色の
   明るさの差が **0.0**。細い罫だけが頼りの状態）。
   図解（`.bdm-figure`）が前から使っている**生成り**へそろえると、
   差は **7.7** になり、節の中が「面」として読めるようになります。
   ★新しい色は作っていません（既存の --bdm-kinari）。
   ★teal の面は増やしていません。影・角丸・余白・高さは据え置きで、
     **ページの長さは1pxも変わりません**（塗りを変えただけ）。 */
body[data-consult="vacant-house"] .bdm-guard{
  margin-top: var(--bdm-s5);
  padding: var(--bdm-s4) var(--bdm-s5);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
}

/* ★和紙の節に置かれた中間CTAは「白」。

   器の色（生成り #FAF8F4）は、白い節の上なら明るさの差 7.7 で読めますが、
   **和紙の節（#F7F5F0）の上では差が 3.3 しかなく**、器の境界がほとんど
   見えませんでした（2026-09-24 の画像レビューで判明。実測で
   /management 1か所・/inheritance 1か所・/vacant-house 2か所が該当）。
   白にすると差は **11.0** になり、同じ節に置かれる `.bdm-selfcheck` や
   `.bdm-care`（白／差 11.0）と同じ読みやすさにそろいます。

   ★目立たせるためではなく、**背景との境界を読めるようにする**だけです。
     枠・角丸・余白・文字・ボタン・文言・数は変えていません。
     新しい色も影も作っていません（白だけ）。
   ★中間CTAは /management（kanri-b.css）と他3ページ（lp-design.css）の
     両方で使う部品なので、**同じ規則を両方のCSSに置きます**（正本 §5-2）。
   ★`/parking` と `/` には中間CTAが 0 個なので、この規則は当たりません。 */
.section--washi .bdm-cta-mid{
  background: #fff;
}
body[data-consult="vacant-house"] .bdm-guard--sub{
  border-left-color: var(--bdm-line-strong);
}
body[data-consult="vacant-house"] .bdm-guard__h{
  margin: 0 0 var(--bdm-s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--bdm-teal-strong);
}
body[data-consult="vacant-house"] .bdm-guard--sub .bdm-guard__h{
  color: var(--bdm-ink-sub);
}
body[data-consult="vacant-house"] .bdm-guard__list{
  display: grid;
  gap: var(--bdm-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-consult="vacant-house"] .bdm-guard__list li{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s2);
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--bdm-ink);
}
body[data-consult="vacant-house"] .bdm-guard__list .bdm-ic{
  width: 34px;
  height: 34px;
}
body[data-consult="vacant-house"] .bdm-guard__list b{
  font-weight: 700;
  color: var(--bdm-ink);
}
body[data-consult="vacant-house"] .bdm-guard__src,
body[data-consult="vacant-house"] .bdm-guard__note{
  margin: var(--bdm-s3) 0 0;
  padding-top: var(--bdm-s3);
  border-top: 1px solid var(--bdm-line);
  font-size: var(--font-note);
  line-height: 1.85;
  color: var(--bdm-ink-faint);
  text-wrap: balance;
}
body[data-consult="vacant-house"] .bdm-guard__note{
  color: var(--bdm-ink-sub);
}

/* --- 8-4. もし使われてしまったら ---
   ★いちばん大事な一文（所有者が当然に責任を負うわけではない）を
     面で囲わず、文字の大きさだけで立てます。 */
body[data-consult="vacant-house"] .bdm-calm{
  margin: var(--bdm-s4) 0 var(--bdm-s3);
  font-size: clamp(16.5px, 4vw, 18.5px);
  line-height: 1.9;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="vacant-house"] .bdm-body{
  margin: 0 0 var(--bdm-s3);
  font-size: 16px;
  line-height: 1.95;
  color: var(--bdm-ink-sub);
}
body[data-consult="vacant-house"] .bdm-body b{
  font-weight: 700;
  color: var(--bdm-ink);
}

/* --- 8-5. 行政の段階（1→2→3→4）---
   ★段が進むほど右へ寄る「階段」にはしません。
     制度の話なので、まっすぐ並べて番号で順番を示します。 */
body[data-consult="vacant-house"] .bdm-figure--gov{
  background: var(--bdm-kinari);
  border: 0;
}
body[data-consult="vacant-house"] .bdm-gov{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
body[data-consult="vacant-house"] .bdm-gov__step{
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: var(--bdm-s3);
  padding: var(--bdm-s3) 0 var(--bdm-s4);
}
/* 番号どうしを縦線でつなぐ（最後だけ線を出さない） */
body[data-consult="vacant-house"] .bdm-gov__step::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 40px;
  /* 次の番号の丸まで届かせる（前の段の下余白24px＋次の段の上余白16px） */
  bottom: -18px;
  width: 1px;
  background: var(--bdm-teal-line);
}
body[data-consult="vacant-house"] .bdm-gov__step--last::before{
  display: none;
}
body[data-consult="vacant-house"] .bdm-gov__n{
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bdm-teal-line);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--bdm-teal-strong);
  font-variant-numeric: tabular-nums;
}
body[data-consult="vacant-house"] .bdm-gov__b{
  display: grid;
  gap: 4px;
  padding-top: 3px;
}
body[data-consult="vacant-house"] .bdm-gov__t{
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="vacant-house"] .bdm-gov__d{
  font-size: var(--font-body);
  line-height: 1.85;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}
/* 最後の段（特例が受けられなくなる）だけ、見出しを teal に */
body[data-consult="vacant-house"] .bdm-gov__step--last .bdm-gov__n{
  background: var(--bdm-teal);
  border-color: var(--bdm-teal);
  color: #fff;
}
body[data-consult="vacant-house"] .bdm-gov__step--last .bdm-gov__t{
  color: var(--bdm-teal-strong);
}
body[data-consult="vacant-house"] .bdm-gov__more{
  margin: var(--bdm-s3) 0 0;
  padding: var(--bdm-s3) var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  font-size: var(--font-body);
  line-height: 1.9;
  color: var(--bdm-ink-sub);
}
body[data-consult="vacant-house"] .bdm-gov__more b{
  font-weight: 700;
  color: var(--bdm-ink);
}

/* --- 8-6. セルフチェック ---
   ★点数化しないので、チェックボックスにも順位にも見せません。
     1つの器の中を細い罫で区切るだけにします。 */
body[data-consult="vacant-house"] .bdm-selfcheck{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--bdm-s5) 0 var(--bdm-s4);
  padding: 0 var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  list-style: none;
}
body[data-consult="vacant-house"] .bdm-selfcheck li{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s2);
  padding: var(--bdm-s3) 0;
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="vacant-house"] .bdm-selfcheck li + li{
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="vacant-house"] .bdm-selfcheck .bdm-ic{
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  color: var(--bdm-teal);
}
body[data-consult="vacant-house"] .bdm-selfcheck .bdm-ic svg{
  width: 18px;
  height: 18px;
}

/* --- 8-7. 選べる道を4つにする ---
   ★説明は「いまの状況」と「そのときの動き」の2段にします。
     1行に続けて書くと、細い画面で「→」が行の途中に落ちて読みにくくなります。 */
body[data-consult="vacant-house"] .bdm-choice--4{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body[data-consult="vacant-house"] .bdm-choice--4 .bdm-choice__d{
  display: grid;
  /* ★「行動」の行を下にそろえます。「状況」が1行か2行かで
     細い画面では区切り線の高さがずれるためです（実測 136/147/136/157）。 */
  grid-template-rows: 1fr auto;
  gap: var(--bdm-s2);
  text-wrap: balance;
}
body[data-consult="vacant-house"] .bdm-choice__a{
  padding-top: var(--bdm-s2);
  border-top: 1px solid var(--bdm-line);
  font-weight: 700;
  color: var(--bdm-teal-strong);
}

/* --- 8-8. 見に行ったときに確かめること --- */
body[data-consult="vacant-house"] .bdm-care{
  margin-top: var(--bdm-s5);
  padding: var(--bdm-s4) var(--bdm-s5);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
body[data-consult="vacant-house"] .bdm-care__h{
  margin: 0 0 var(--bdm-s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bdm-ink-sub);
}
body[data-consult="vacant-house"] .bdm-care__list{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-consult="vacant-house"] .bdm-care__list li{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s2);
  padding: var(--bdm-s2) 0;
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--bdm-ink);
}
body[data-consult="vacant-house"] .bdm-care__list li + li{
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="vacant-house"] .bdm-care__list .bdm-ic{
  width: 30px;
  height: 30px;
}
body[data-consult="vacant-house"] .bdm-care__note{
  margin: var(--bdm-s3) 0 0;
  padding-top: var(--bdm-s3);
  border-top: 1px solid var(--bdm-line);
  font-size: var(--font-note);
  line-height: 1.85;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}

/* --- 8-9. 管理 → その先 --- */
body[data-consult="vacant-house"] .bdm-figure--path{
  background: var(--bdm-kinari);
  border: 0;
}
body[data-consult="vacant-house"] .bdm-path{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s2);
}
body[data-consult="vacant-house"] .bdm-path__now{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s3);
  padding: var(--bdm-s3) var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-teal-line);
  border-radius: 4px;
}
body[data-consult="vacant-house"] .bdm-path__t{
  font-family: var(--mincho-head);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bdm-teal-strong);
}
body[data-consult="vacant-house"] .bdm-path__arrow{
  justify-self: center;
  width: 1px;
  height: 22px;
  background: var(--bdm-teal-line);
}
body[data-consult="vacant-house"] .bdm-path__next{
  padding: var(--bdm-s3) var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
body[data-consult="vacant-house"] .bdm-path__label{
  display: block;
  margin-bottom: var(--bdm-s2);
  font-size: var(--font-min);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bdm-ink-faint);
}
body[data-consult="vacant-house"] .bdm-path__next ul{
  display: grid;
  gap: var(--bdm-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-consult="vacant-house"] .bdm-path__next li{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s2);
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--bdm-ink);
}
body[data-consult="vacant-house"] .bdm-path__next .bdm-ic{
  width: 30px;
  height: 30px;
}

/* --- 8-10. 参考にした情報 ---
   ★面も枠も付けません。読み終わったあとの「注記」の位置づけです。 */
body[data-consult="vacant-house"] .bdm-refs{
  padding-top: var(--bdm-s4);
  border-top: 1px solid var(--bdm-line);
}
body[data-consult="vacant-house"] .bdm-refs__h{
  margin: 0 0 var(--bdm-s2);
  font-size: var(--font-min);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--bdm-ink-faint);
}
body[data-consult="vacant-house"] .bdm-refs ul{
  display: grid;
  gap: 6px;
  margin: 0 0 var(--bdm-s3);
  padding: 0 0 0 1.1em;
}
body[data-consult="vacant-house"] .bdm-refs li{
  font-size: var(--font-note);
  line-height: 1.8;
  color: var(--bdm-ink-sub);
}
body[data-consult="vacant-house"] .bdm-refs__note{
  margin: 0;
  font-size: var(--font-note);
  line-height: 1.8;
  color: var(--bdm-ink-faint);
  text-wrap: balance;
}

/* ============================================================
   9. /vacant-house 画面幅ごとの調整
   ============================================================ */

@media (min-width: 760px){
  /* リスクは2×2に。細い罫だけで分けます */
  body[data-consult="vacant-house"] .bdm-risk{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-consult="vacant-house"] .bdm-risk__item + .bdm-risk__item{
    border-top: 0;
  }
  body[data-consult="vacant-house"] .bdm-risk__item:nth-child(2n){
    border-left: 1px solid var(--bdm-line);
  }
  body[data-consult="vacant-house"] .bdm-risk__item:nth-child(n+3){
    border-top: 1px solid var(--bdm-line);
  }

  /* 選べる道は4つ横並び */
  body[data-consult="vacant-house"] .bdm-choice--4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 管理 → その先 は左右に */
  body[data-consult="vacant-house"] .bdm-path{
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr);
    gap: 0;
  }
  body[data-consult="vacant-house"] .bdm-path__arrow{
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 759px){
  /* ★既存の一文には <br> が入っています。細い画面では改行位置の指定を
     無効にして、行の長さをそろえられるようにします（文言は変えません）。 */
  body[data-consult="vacant-house"] .sec-lead br{ display: none; }
  body[data-consult="vacant-house"] .bdm-guard,
  body[data-consult="vacant-house"] .bdm-care{
    padding: var(--bdm-s3) var(--bdm-s4);
  }
  body[data-consult="vacant-house"] .bdm-risk__item{
    padding: var(--bdm-s3) var(--bdm-s4);
  }
  body[data-consult="vacant-house"] .bdm-selfcheck{
    padding: 0 var(--bdm-s3);
  }
  /* ★4つの選択肢は2×2のまま。縦1列に積むと「順番がある」ように見えます。 */
  body[data-consult="vacant-house"] .bdm-choice--4 li{
    padding: var(--bdm-s3) var(--bdm-s2);
  }
  body[data-consult="vacant-house"] .bdm-choice--4 .bdm-choice__t{
    font-size: 17px;
    letter-spacing: .04em;
  }
  body[data-consult="vacant-house"] .bdm-choice--4 .bdm-choice__d{
    font-size: var(--font-min);  /* ★2列の細い欄。14px だと「貸せる状態／か確かめる」と割れる（2026-09-27） */
  }
}

/* --- 8-10b. 静かな念押し ---
   ★teal の面はページ内で増やしません。左の細い罫だけにして、
     「大事だが、強くは言わない」位置づけにします。 */
body[data-consult="vacant-house"] .bdm-quiet{
  margin: var(--bdm-s4) 0 0;
  padding: var(--bdm-s2) 0 var(--bdm-s2) var(--bdm-s4);
  border-left: 3px solid var(--bdm-teal);
  font-size: var(--font-body);
  line-height: 1.9;
  color: var(--bdm-ink);
  text-wrap: balance;
}

/* --- 8-10c. 最終CTAの下の注記 --- */
body[data-consult="vacant-house"] .bdm-cta-note{
  margin: var(--bdm-s3) 0 0;
  text-align: center;
  font-size: var(--font-note);
  line-height: 1.8;
  color: var(--bdm-ink-sub);
}

/* --- 8-11. 行の分かれ方（★このページの中だけ）---
   正本は docs/lp/B.D.M_Public_LP_Design_System.md §5-2。
   ★`.sec-lead` と `.bdm-figure__cap` は、全ページに当てると巻き添えが大きいので
     「C判定」にしてあります。ここでは body[data-consult="vacant-house"] で
     囲っているので、他の4ページには1バイトも届きません。
     このページは今回まるごと作り直したので、巻き添えという概念がありません。 */
body[data-consult="vacant-house"] .sec-lead,
body[data-consult="vacant-house"] .lead-out,
body[data-consult="vacant-house"] .bdm-figure__cap,
body[data-consult="vacant-house"] .bdm-guard__h,
body[data-consult="vacant-house"] .bdm-guard__list li > span:not(.bdm-ic),
body[data-consult="vacant-house"] .bdm-care__list li,
body[data-consult="vacant-house"] .bdm-gov__more,
body[data-consult="vacant-house"] .bdm-path__next li,
body[data-consult="vacant-house"] .bdm-choice__t,
body[data-consult="vacant-house"] .bdm-refs li,
body[data-consult="vacant-house"] .bdm-calm{
  text-wrap: balance;
}

/* ============================================================
   10. /parking — 駐車場ページの作り込み（2026-09-24）

   ★このページの目的は「管理を全部まかせてください」ではありません。
     **空いている区画だけ・客付けだけでも相談できる**と伝えることです。

   ★すべて `body[data-consult="parking"]` で囲っています。
     他の4ページへは1pxも届きません（テストで固定）。
   ★色は既存トークンだけ。新しい色・gradient・大きな影・派手な動きは作りません。
   ★赤やバツ印は使いません——比較図で「今のやり方」を悪者にしないためです。
   ============================================================ */

/* --- 10-1. 空車の収入機会（表） --- */
body[data-consult="parking"] .bdm-loss{
  width: 100%;
  margin-top: var(--bdm-s5);
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
body[data-consult="parking"] .bdm-loss th,
body[data-consult="parking"] .bdm-loss td{
  padding: var(--bdm-s3) var(--bdm-s2);
  border-bottom: 1px solid var(--bdm-line);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: right;
}
body[data-consult="parking"] .bdm-loss thead th{
  background: var(--bdm-kinari);
  font-size: 13px;
  font-weight: 600;
  color: var(--bdm-ink-sub);
  border-bottom-color: var(--bdm-line-strong);
}
body[data-consult="parking"] .bdm-loss th:first-child,
body[data-consult="parking"] .bdm-loss td:first-child{
  text-align: left;
  color: var(--bdm-ink-sub);
  white-space: nowrap;
}
body[data-consult="parking"] .bdm-loss tbody tr:last-child th,
body[data-consult="parking"] .bdm-loss tbody tr:last-child td{ border-bottom: 0; }
body[data-consult="parking"] .bdm-loss td b{
  font-weight: 600;
  color: var(--bdm-ink);
}
body[data-consult="parking"] .bdm-loss__year{
  display: block;
  font-size: var(--font-min);
  color: var(--bdm-ink-faint);
}

/* --- 10-2. 空車のかんたん計算（シミュレーター） ---
   ★入力はこの画面の中だけで計算します。送りも保存もしません。 */
body[data-consult="parking"] .bdm-sim{
  margin-top: var(--bdm-s5);
  padding: var(--bdm-s4);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
body[data-consult="parking"] .bdm-sim__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bdm-s3);
}
body[data-consult="parking"] .bdm-sim__f{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bdm-s1);
}
body[data-consult="parking"] .bdm-sim__f label{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bdm-ink-sub);
}
body[data-consult="parking"] .bdm-sim__in{
  display: flex;
  align-items: center;
  gap: var(--bdm-s2);
  padding: 0 var(--bdm-s3);
  background: #fff;
  border: 1px solid var(--bdm-line-strong);
  border-radius: 4px;
}
body[data-consult="parking"] .bdm-sim__in:focus-within{
  border-color: var(--bdm-teal);
}
body[data-consult="parking"] .bdm-sim__in input{
  flex: 1 1 auto;
  min-width: 0;
  /* ★スマホで勝手に拡大されないよう 16px 以上 */
  height: 52px;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-family: inherit;
  color: var(--bdm-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body[data-consult="parking"] .bdm-sim__in input:focus{ outline: none; }
body[data-consult="parking"] .bdm-sim__unit{
  flex: none;
  font-size: 14px;
  color: var(--bdm-ink-sub);
}
body[data-consult="parking"] .bdm-sim__out{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bdm-s2);
  margin-top: var(--bdm-s4);
  padding-top: var(--bdm-s4);
  border-top: 1px solid var(--bdm-line-strong);
}
body[data-consult="parking"] .bdm-sim__o{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bdm-s2);
}
body[data-consult="parking"] .bdm-sim__ol{
  font-size: 13.5px;
  color: var(--bdm-ink-sub);
}
body[data-consult="parking"] .bdm-sim__ov{
  font-size: 24px;
  font-weight: 600;
  color: var(--bdm-teal-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
body[data-consult="parking"] .bdm-sim__ov--year{ font-size: 28px; }
body[data-consult="parking"] .bdm-sim__note{
  margin: var(--bdm-s3) 0 0;
  font-size: var(--font-note);
  line-height: 1.75;
  color: var(--bdm-ink-faint);
  text-wrap: balance;
}

/* --- 10-3. なぜ埋まらないか（気づきにくい理由の一覧） --- */
/* ★図の下の核心文。**一段だけ**視認性を上げる。
   大きさは 13.5 → 15px、太さ 600、色を本文と同じに。
   面・teal・影・gradient・角丸・カードは足しません（余白と字の強さだけ）。 */
body[data-consult="parking"] .bdm-figure__cap--lead{
  margin-top: var(--bdm-s4);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="parking"] .bdm-figure__cap--lead span{
  display: block;
  margin-top: var(--bdm-s1);
  font-size: var(--font-note);
  font-weight: 400;
  color: var(--bdm-ink-sub);
}

body[data-consult="parking"] .bdm-why{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--bdm-s5) 0 0;
  padding: 0 var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  list-style: none;
}
body[data-consult="parking"] .bdm-why li{
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: var(--bdm-s3);
  padding: var(--bdm-s3) 0;
  border-bottom: 1px solid var(--bdm-line);
  font-size: var(--font-body);
  line-height: 1.7;
}
body[data-consult="parking"] .bdm-why li:last-child{ border-bottom: 0; }

/* --- 10-4. 募集経路の比較 ---
   ★左を悪者にしません。赤もバツ印も使わず、
     **届く相手が違う**ことだけが分かるようにします。 */
body[data-consult="parking"] .bdm-route2{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bdm-s4);
  margin: 0;
}
body[data-consult="parking"] .bdm-route2__col{
  padding: var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
/* ★右の列で変えるのは「teal の左罫」だけ。
     角丸・見出しの色・地色まで変えると合図が3つ重なり、
     「右が正解」に見えてしまいます（左を悪者にしないため）。 */
body[data-consult="parking"] .bdm-route2__col--bdm{
  border-left: 3px solid var(--bdm-teal);
}
body[data-consult="parking"] .bdm-route2__h{
  margin: 0 0 var(--bdm-s3);
  padding-bottom: var(--bdm-s2);
  border-bottom: 1px solid var(--bdm-line-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--bdm-ink-sub);
}
/* ★見出しの色は左右で同じ（teal にすると右だけ強く見える） */
/* ★左右の最上部に「誰に届くか」を置く。
   面・枠・影・角丸は増やさず、**太さと色**だけで見出しの次に立たせます。
   左右で大きさ・太さ・色は同じ（右だけ強くしない）。 */
body[data-consult="parking"] .bdm-route2__to{
  margin: calc(-1 * var(--bdm-s2)) 0 var(--bdm-s3);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--bdm-ink);
  text-wrap: balance;
}

body[data-consult="parking"] .bdm-route2__steps{
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-consult="parking"] .bdm-route2__steps li{
  position: relative;
  padding: 0 0 var(--bdm-s4);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--bdm-ink);
  text-wrap: balance;
}
/* 段と段をつなぐ細い線（矢じりは使わない＝静かに） */
body[data-consult="parking"] .bdm-route2__steps li::after{
  content: "";
  position: absolute;
  left: 8px; bottom: 8px;
  width: 1px; height: calc(var(--bdm-s4) - 16px);
  background: var(--bdm-line-strong);
}
body[data-consult="parking"] .bdm-route2__steps li:last-child{ padding-bottom: 0; }
body[data-consult="parking"] .bdm-route2__steps li:last-child::after{ display: none; }
body[data-consult="parking"] .bdm-route2__who{
  display: block;
  margin-top: var(--bdm-s1);
  padding: var(--bdm-s2) var(--bdm-s3);
  background: var(--bdm-kinari);
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--bdm-ink-sub);
}
/* ★「誰に届くか」の地色も左右で同じ */

/* --- 10-5. 届ける仕組みの一覧 --- */
body[data-consult="parking"] .bdm-reach{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--bdm-s5) 0 0;
  padding: 0 var(--bdm-s4);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  list-style: none;
}
body[data-consult="parking"] .bdm-reach li{
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: var(--bdm-s3);
  padding: var(--bdm-s3) 0;
  border-bottom: 1px solid var(--bdm-line);
}
body[data-consult="parking"] .bdm-reach li:last-child{ border-bottom: 0; }
body[data-consult="parking"] .bdm-reach__t{
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="parking"] .bdm-reach__d{
  display: block;
  margin-top: 2px;
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}

/* --- 10-6. 事例（稼働率の改善） ---
   ★平均でも保証でもありません。**事例**として静かに置きます。 */
body[data-consult="parking"] .bdm-proof{
  margin-top: var(--bdm-s5);
  padding: var(--bdm-s5) var(--bdm-s4);
  background: var(--bdm-kinari);
  border: 1px solid var(--bdm-line);
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  text-align: center;
}
/* ★これがB.D.M自身の事例だと、数字より先に分かるようにする。
   ★数字は大きくしません（clamp(44px, 12vw, 72px) のまま）。 */
body[data-consult="parking"] .bdm-proof__l{
  margin: 0 0 var(--bdm-s2);
  font-size: var(--font-min);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bdm-teal-strong);
}

body[data-consult="parking"] .bdm-proof__n{
  display: block;
  font-size: clamp(44px, 12vw, 72px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--bdm-teal-strong);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
body[data-consult="parking"] .bdm-proof__u{
  font-size: .46em;
  margin-left: 2px;
}
body[data-consult="parking"] .bdm-proof__t{
  margin: var(--bdm-s2) 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="parking"] .bdm-proof__s{
  margin: var(--bdm-s1) 0 0;
  font-size: var(--font-note);
  line-height: 1.7;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}

body[data-consult="parking"] .bdm-proof__d{
  margin: var(--bdm-s3) 0 0;
  font-size: var(--font-body);
  line-height: 1.85;
  color: var(--bdm-ink-sub);
  text-align: left;
  text-wrap: balance;
}

/* --- 10-7. 用意するもの / 流れ --- */
body[data-consult="parking"] .bdm-prep{
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdm-s2);
  margin: var(--bdm-s4) 0 0;
  padding: 0;
  list-style: none;
}
body[data-consult="parking"] .bdm-prep li{
  padding: var(--bdm-s2) var(--bdm-s3);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--bdm-ink);
}
body[data-consult="parking"] .bdm-flow{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--bdm-s5) 0 0;
  padding: 0 var(--bdm-s4);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  list-style: none;
  counter-reset: pkflow;
}
body[data-consult="parking"] .bdm-flow li{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: var(--bdm-s3);
  padding: var(--bdm-s3) 0;
  border-bottom: 1px solid var(--bdm-line);
}
body[data-consult="parking"] .bdm-flow li:last-child{ border-bottom: 0; }
body[data-consult="parking"] .bdm-flow li::before{
  counter-increment: pkflow;
  content: counter(pkflow);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
  font-size: 13px;
  font-weight: 600;
}
body[data-consult="parking"] .bdm-flow__t{
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--bdm-ink);
  text-wrap: balance;
}
body[data-consult="parking"] .bdm-flow__d{
  display: block;
  margin-top: 2px;
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}

/* --- 10-8. 静かに置く一文（節の締め） --- */
body[data-consult="parking"] .bdm-qnote{
  margin: var(--bdm-s4) 0 0;
  padding-left: var(--bdm-s3);
  border-left: 2px solid var(--bdm-teal-line);
  font-size: 14px;
  line-height: 1.9;
  color: var(--bdm-ink-sub);
  text-wrap: balance;
}
/* 核心の一文（このページの思想） */
body[data-consult="parking"] .bdm-core{
  margin: 0;
  font-family: var(--mincho-head);
  font-size: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-section);
  letter-spacing: .03em;
  color: var(--bdm-ink);
  text-wrap: balance;
}


/* --- 10-12. 最後の行が1〜2文字だけになるのを避ける -------------
   ★`body[data-consult="parking"]` で囲っているので、**このページだけ**です。
     正本（/management）と他のLPには1つも届きません。
     ★`.sec-lead` / `.sec-title` は、全体に当てると完成済みページの主役まで
     変わるので「C判定」として手を付けていません。ここは**作り込み中の
     このページの中だけ**なので当てられます（正本 §5-2 の決め方どおり）。 */
body[data-consult="parking"] .sec-title,
body[data-consult="parking"] .sec-lead,
body[data-consult="parking"] .bdm-cta-mid__note,
body[data-consult="parking"] .note-box strong{
  text-wrap: balance;
}

/* --- 10-13. スマホのヒーローの行の分かれ方（★2026-09-24）-----
   ★文言は1文字も変えていません。**入る大きさに合わせる**だけです。

   390px では見出しが [10, 11, 1, 11, 3] になり、「で」と「せん。」が
   行末に1文字だけ残っていました（補足も「す。」が残る）。
   原因は単純で、`<br>` で決めた 12文字・14文字の行が、
   その幅では**器に入りきらず、1文字だけあふれていた**ためです。

   ★直し方は「入る上限で頭打ちにする」——足りない幅でだけ小さくなり、
     足りている幅では**1pxも変わりません**（実測で 700px 以上は完全に不変）。

     見出し … 14文字 ×（1 + 字間 .035em）≒ 14.5 文字ぶん
              ★2026-09-24 に見出しの字間を .05em・詰め組み（palt）にしました。
                palt が句読点まわりを詰めるので、実測で**余裕は 30px ほど残っています**
                （390px：器 350px／最長行 318.5px）。この値はそのままで大丈夫です。
     補足  … 24文字（字間なし）＋ わずかな余裕で 24.2 文字ぶん

   ★この数字は**いまの文面の最長行の文字数**です。文面を変えるときは
     ここも一緒に見直してください（見張りは tests/parkingLanding.test.ts）。
   ★下限を置いているのは、極端に狭い端末で12px未満にならないようにするためです。
   ★HEROの高さ・写真の切り取り・文言・CTAは変えていません。 */
@media (max-width: 759.98px){
  body[data-consult="parking"] .hero--parking .hero__title{
    font-size: min(var(--font-hero), calc((100vw - 40px) / 14.5));
  }
  body[data-consult="parking"] .hero--parking .hero__sub{
    font-size: max(var(--font-min), min(var(--font-lead), calc((100vw - 40px) / 24.2)));
  }
}

/* ============================================================
   11. /parking 画面幅ごとの調整
   ============================================================ */
@media (min-width: 760px){
  /* 入力は横に2つ並べる */
  body[data-consult="parking"] .bdm-sim__row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bdm-s4);
  }
  body[data-consult="parking"] .bdm-sim__out{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bdm-s4);
  }
  body[data-consult="parking"] .bdm-sim__o{
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--bdm-s1);
    align-content: start;
    justify-items: start;
  }
  /* ★比較は左右に並べる。スマホでは縦に積みます（細い2列にしない） */
  body[data-consult="parking"] .bdm-route2{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body[data-consult="parking"] .bdm-proof{
    padding: var(--bdm-s6) var(--bdm-s5);
  }
  body[data-consult="parking"] .bdm-proof__d{
    max-width: 44em;
    margin-inline: auto;
  }
}

/* ★キャプションと注記を 13 / 12.5px に上げたぶん、最後の行が1〜2文字になる所が
   出たので `pretty` で受けます（`balance` より巻き添えが少ない。実測で行の変化 10・高さの変化 0）。
   ★中間CTAの部品なので、正本 §5-2 と同じく **両方のCSSに同じ規則**を置きます。 */
.bdm-figure__cap,
.bdm-cta-mid__note{ text-wrap: pretty; }

/* ============================================================
   文字の正本（2026-09-27）に合わせた調整
   ------------------------------------------------------------
   ★大きさの正本は style.css の :root（--font-*）。ここは「正本の大きさにすると
     <br> で決めた行が入らない」ところだけの手当て。文言は変えない。
   ============================================================ */
/* ★本文を 16px にしたぶん、最後の行が2文字だけになった3か所（pretty では直らない：<br> のあとの段・2行の項目）。行をそろえる */
body[data-consult="parking"] .bdm-why li{ text-wrap: balance; }
/* <br> で分けていた2つ目の段を、段ごとに行をそろえられるよう span（ブロック）にした（文言は同じ）。
   `--gap` は元の <br><br>（1行ぶんの空き）と同じ間隔。 */
.bdm-seg{ display: block; text-wrap: balance; }
.bdm-seg--gap{ margin-top: 1lh; }
@media (max-width: 759.98px){
  /* 核心の一文（中見出し 22px）：<br> で決めた 15/16/16 文字の行が入る上限で頭打ちにする（/parking の FV と同じ考え方） */
  body[data-consult="parking"] .bdm-core{
    font-size: min(var(--font-heading), calc((100vw - 40px) / 16.8));
  }
}