/* ============================================================
   管理LP（/management）B案 — 追加スタイル
   正本の仕様書: 管理LP改善レビュー/design_handoff_kanri_lp/実装仕様書_管理LP_B案.md

   ★このファイルは kanri.html だけが読み込みます。
     他の4ページ（index / parking / akiya / souzoku）には1バイトも影響しません。
     だから既存クラス（.worries / .case / .topics …）の上書きもここで安全に行えます。
   ★既存の style.css は書き換えていません。
   ★追加クラスはすべて bdm- 接頭辞。
   ★アニメーション・影（box-shadow）・グラデーションは使いません。
   ★角丸はカード 4px・ピル型 999px まで（8px以上は使わない）。
   ★半透明の文字色（rgba / opacity / color-mix）は使いません。
   ★図解は HTML+CSS で作ります（SVGに文字を入れると、スマホで viewBox ごと
     縮んで読めなくなるため。実テキストなら縮まず・直せて・読み上げも効きます）。

   目次
     1. デザイントークン
     2. ①〜⑤（CHECK）共通マークアップ
     3. ナビチップ
     4. PC 2カラム / スマホ アコーディオン
     5. 図解の共通部品（面・棒・経路・比較表・歩調・タイムライン）
     6. 数字カード
     7. 実例（Before / After）
     8. こんなことありませんか？
     9. MANAGEMENT の中身
    10. 中間CTA
    11. 画面幅ごとの調整
   ============================================================ */


/* ============================================================
   1. デザイントークン
   既存の :root（style.css）には手を入れず、bdm- 接頭辞で足しています。
   ============================================================ */
:root{
  /* --- 色 --- */
  --bdm-teal:        #007F89;  /* 既存アクセントと同値。面・罫線・図形・24px以上の見出しだけ */
  --bdm-teal-strong: #006A73;  /* 文字で teal を使うとき（白背景で4.5:1を満たす） */
  --bdm-teal-tint:   #F2F8F8;  /* 「B.D.Mの場合」の面 */
  --bdm-teal-line:   #B3D6D9;  /* teal系の細罫 */

  --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;  /* 注記・単位のみ。12px未満では使わない */

  --bdm-num:         #CBE2E4;  /* ①〜⑤の番号。薄く見せるのは opacity ではなく色で */

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

  /* --- アンカーの着地位置 ---
     ★scrollIntoView は使わず、通常のアンカー + scroll-margin-top で合わせます。 */
  --bdm-anchor-offset: calc(var(--header-h) + var(--bdm-s4));
}

/* 読み上げだけに残す文字（○ / — の意味を伝えるため） */
.bdm-sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}


/* ============================================================
   2. ①〜⑤（CHECKセクション）の共通マークアップ
   ============================================================ */

/* ★CHECK は和紙の地色（#F7F5F0）の上にあります。
   仕様書の --bdm-gray-bg #F5F6F6 は和紙とほぼ同じ明るさで面が消えてしまうので、
   この節だけ和紙に合う暖かいグレーへ置き換えます（面の役割は同じ）。 */
.section--washi .bdm-check-list{
  --bdm-gray-bg: #EDEBE4;
}
/* ★ただし図解の中は白地なので、白地向けの値に戻します（継がせない） */
.bdm-figure{
  --bdm-gray-bg: #F5F6F6;
}

.bdm-check-list{
  display: block;
  margin-top: var(--bdm-s5);
}

.bdm-check-item{
  scroll-margin-top: var(--bdm-anchor-offset);
}

/* ★CHECK を包んでいる .reveal は translateY(14px) → none で入ってきます。
   ナビチップで飛ぶと、スクロールしている最中にこの移動が解けるため、
   ブラウザは【移動前の位置】を目指したまま止まり、着地が14pxずれます
   （実測：狙い82px → 実際68px。あとから直りません）。
   この節だけ移動をやめ、透明度だけで出します。見え方はほとんど変わりません。 */
.reveal:has(.bdm-check-list),
.reveal:has(.bdm-check-list).is-in{
  transform: none;
}

/* 項目の区切り。影は使わず 1px の罫線だけで分けます */
/* ★margin と padding の両方に入れると二重に空きます（実測128px）。
   仕様書 §2.2 の「項目間 PC 64px / SP 48px」になるよう半分ずつにして、
   区切りの罫線がそのまん中に来るようにします。 */
.bdm-check-item + .bdm-check-item{
  margin-top: var(--bdm-s4);
  padding-top: var(--bdm-s4);
  border-top: 1px solid var(--bdm-line);
}

/* --- 見出し（番号 + 文） --- */
.bdm-check-item__head{
  display: flex;
  align-items: baseline;
  gap: var(--bdm-s3);
  /* details の既定マーカーを消す（Safari も含めて） */
  list-style: none;
}
.bdm-check-item__head::-webkit-details-marker{ display: none; }
.bdm-check-item__head::marker{ content: ""; }

.bdm-check-item__num{
  flex: 0 0 auto;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--bdm-num);
  font-variant-numeric: tabular-nums;
}

.bdm-check-item__title{
  margin: 0;
  flex: 1 1 auto;
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--bdm-ink);
}

/* 開閉の目印。★PCでは出しません（常時表示なので押すものが無い） */
.bdm-check-item__mark{
  display: none;
  position: relative;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  align-self: center;
}
.bdm-check-item__mark::before,
.bdm-check-item__mark::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 2px;
  border-radius: 1px;
  background: var(--bdm-teal);
  transform: translate(-50%, -50%);
}
.bdm-check-item__mark::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.bdm-check-item[open] .bdm-check-item__mark::after{
  transform: translate(-50%, -50%) rotate(0deg);
}

/* --- 本文の器 --- */
.bdm-check-item__body{
  display: block;
  margin-top: var(--bdm-s4);
}
.bdm-check-item__text{
  display: grid;
  gap: var(--bdm-s4);
}

/* --- 4つの面 ---
   文字量を減らさずに読みやすくする中核。背景色と1px罫線だけで区別します。 */
.bdm-block{ margin: 0; }

/* よくあること — 落ち着いたグレーの面・罫線なし */
.bdm-block--common{
  background: var(--bdm-gray-bg);
  border: 0;
  border-radius: 4px;
  padding: var(--bdm-s3) var(--bdm-s4);
}

/* なぜ起きるのか — 面を持たない（地のまま） */
.bdm-block--why{
  background: transparent;
  border: 0;
  padding: 0;
}

/* ご自身で確かめる方法 — 白い面 + 1px罫線 */
.bdm-block--try{
  background: var(--bdm-paper);
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
  padding: var(--bdm-s3) var(--bdm-s4);
}

/* B.D.Mの場合 — teal の淡い面 + 左だけ 3px の罫 */
.bdm-block--bdm{
  background: var(--bdm-teal-tint);
  border: 0;
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  padding: var(--bdm-s3) var(--bdm-s4);
}

/* --- 本文 --- */
.bdm-block p{
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--bdm-ink);
}
.bdm-block p + p{ margin-top: var(--bdm-s2); }
/* 既存の強調は <b> です。色は本文と同じにして、太さだけで差を付けます */
.bdm-block b{
  font-weight: 700;
  color: var(--bdm-ink);
}

/* --- ラベル（ピル型） --- */
.bdm-label{
  display: inline-block;
  font-size: var(--font-min);
  letter-spacing: .08em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bdm-line);
  color: var(--bdm-ink-sub);
  margin-bottom: var(--bdm-s2);
}
.bdm-label--teal{
  background: #fff;
  border-color: var(--bdm-teal-line);
  color: var(--bdm-teal-strong);
}


/* ============================================================
   3. ナビチップ（1〜5への内部リンク）
   ★scrollIntoView は使いません。素のアンカー + scroll-margin-top です。
   ============================================================ */
.bdm-check-nav{
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdm-s1);
  margin-top: var(--bdm-s4);
}
.bdm-check-nav a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;          /* 指で押せる大きさ */
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--bdm-line);
  background: #fff;
  color: var(--bdm-ink);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.bdm-check-nav a > span{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bdm-teal-strong);
}
.bdm-check-nav a:hover{
  border-color: var(--bdm-teal-line);
  background: var(--bdm-teal-tint);
}
.bdm-check-nav a:focus-visible{
  outline: 2px solid var(--bdm-teal);
  outline-offset: 2px;
}


/* ============================================================
   4. PC 2カラム / スマホ アコーディオン
   ★中身はPCとスマホで同じです。並べ方と、開いているかどうかだけが違います。
   ============================================================ */

/* ---- PC（900px以上）: 常時表示 + 左に本文・右に図解 ---- */
@media (min-width: 900px){
  /* 図解の列を置くぶんだけ、この節の器を広げます */
  .readable:has(.bdm-check-list){ max-width: 1000px; }

  .bdm-check-item + .bdm-check-item{
    margin-top: var(--bdm-s5);
    padding-top: var(--bdm-s5);
  }
  .bdm-check-item__num{ font-size: 56px; }
  .bdm-check-item__title{ font-size: 20px; }
  .bdm-label{ font-size: var(--font-min); }
  .bdm-block p{ line-height: 1.9; }

  /* ★押せるものではないので、見た目も挙動も見出しに寄せます
     （閉じられないことは JS 側でも二重に担保しています） */
  .bdm-check-item__head{
    cursor: default;
    pointer-events: none;
  }
  .bdm-check-item__mark{ display: none; }

  .bdm-check-item__body{
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--bdm-s6);
    align-items: stretch;
    margin-top: var(--bdm-s5);
  }
  /* 行が長くなりすぎないように */
  .bdm-check-item__text{ max-width: 34em; }

  /* 長い説明を読む間、図が視界に残るようにします。
     ★①〜⑤の中だけ（MANAGEMENT の図解には効かせない） */
  .bdm-check-item__body > .bdm-figure{
    align-self: start;
    position: sticky;
    top: var(--bdm-anchor-offset);
    margin: 0;
  }
}

/* ---- スマホ・タブレット（899px以下）: アコーディオン ---- */
@media (max-width: 899px){
  .bdm-check-item{
    background: #fff;
    border: 1px solid var(--bdm-line);
    border-radius: 4px;
    overflow: hidden;
  }
  /* 罫線で区切るのではなく、カードを積みます */
  .bdm-check-item + .bdm-check-item{
    margin-top: var(--bdm-s2);
    padding-top: 0;
    border-top: 1px solid var(--bdm-line);
  }

  .bdm-check-item__head{
    cursor: pointer;
    align-items: center;
    gap: var(--bdm-s2);
    min-height: 60px;           /* 指で押せる大きさ */
    padding: var(--bdm-s2) var(--bdm-s3);
  }
  .bdm-check-item__num{ font-size: 30px; }
  .bdm-check-item__mark{ display: block; }
  .bdm-check-item[open] .bdm-check-item__head{
    border-bottom: 1px solid var(--bdm-line);
  }
  .bdm-check-item__head:focus-visible{
    outline: 2px solid var(--bdm-teal);
    outline-offset: -2px;
  }

  .bdm-check-item__body{
    margin-top: 0;
    padding: var(--bdm-s4) var(--bdm-s3);
    /* ★図解を「なぜ起きるのか」の直後へ入れるため、
       4つの面と図解を同じ並びの要素にします（display: contents）。 */
    display: flex;
    flex-direction: column;
    gap: var(--bdm-s4);
  }
  .bdm-check-item__text{ display: contents; }

  .bdm-block--common{ order: 1; }
  .bdm-block--why   { order: 2; }
  /* ★図解だけは前後を少し広めに空けます（本文の面と見分けやすくするため）。
     もともとは、あとに書いた `.bdm-figure{ margin: var(--bdm-s4) 0 }` が
     詳細度で勝って「たまたま」この余白になっていました。
     セレクタを絞ったときに消えてしまったので、意図として明示しておきます。 */
  .bdm-check-item__body > .bdm-figure{ order: 3; margin: var(--bdm-s4) 0; }
  .bdm-block--try   { order: 4; }
  .bdm-block--bdm   { order: 5; }

  /* アコーディオンの中は白地なので、面は白地向けの値に戻します */
  .section--washi .bdm-check-item{ --bdm-gray-bg: #F5F6F6; }
}


/* ============================================================
   5. 図解の共通部品
   ============================================================ */
.bdm-figure{
  margin: var(--bdm-s4) 0;
  padding: var(--bdm-s4) var(--bdm-s3);
  background: #fff;
  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);
  font-size: var(--font-note);
  line-height: 1.7;
  color: var(--bdm-ink-sub);
}

/* 図の中の小見出し（「早い対応」など） */
.bdm-fig-h{
  margin: 0 0 var(--bdm-s2);
  font-size: var(--font-min);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--bdm-ink-sub);
}
.bdm-fig-h--act{ color: var(--bdm-teal-strong); }

/* 凡例 */
.bdm-legend{
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdm-s3);
  margin: var(--bdm-s4) 0 0;
  padding-top: var(--bdm-s3);
  padding-left: 0;
  border-top: 1px solid var(--bdm-line);
  list-style: none;
}
.bdm-legend li{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-min);
  line-height: 1.5;
  color: var(--bdm-ink-sub);
}
.bdm-legend__sw{
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--bdm-gray-bg);
  border: 1px solid var(--bdm-line-strong);
}
.bdm-legend__sw--act{
  background: var(--bdm-teal);
  border-color: var(--bdm-teal);
}

/* ---- ① 年間タイムライン ---- */
.bdm-year + .bdm-year{ margin-top: var(--bdm-s4); }
.bdm-year__months{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-year__m{
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 3px;
  background: var(--bdm-gray-bg);
  color: var(--bdm-ink-sub);
  font-size: var(--font-min);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bdm-year__m--act{
  background: var(--bdm-teal);
  color: #fff;
}

/* ---- ② 棒の比較 ---- */
.bdm-bars{
  display: grid;
  gap: var(--bdm-s4);
}
.bdm-bar__name{
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bdm-ink-sub);
}
.bdm-bar__track{
  height: 22px;
  border-radius: 3px;
  background: var(--bdm-gray-bg);
}
.bdm-bar__fill{
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--bdm-line-strong);
}
.bdm-bar--act .bdm-bar__fill{ background: var(--bdm-teal); }
.bdm-bar__val{
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bdm-ink);
  font-variant-numeric: tabular-nums;
}
.bdm-bar--act .bdm-bar__val{ color: var(--bdm-teal-strong); }

/* ---- ③ 募集の経路 ----
   ★見出し2つ・経路2つを同じグリッドに直接置いています。
     入れ子にすると、見出しが1行と2行で左右の開始位置がずれるためです。 */
.bdm-route{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bdm-s2) var(--bdm-s4);
}
.bdm-route__h{ margin-bottom: 0; }
.bdm-route__steps{
  display: grid;
  /* 箱の数が左右で違うので、余った高さは下に逃がします（箱を伸ばさない） */
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-route__steps li{
  position: relative;
  padding: 9px 12px;
  border: 1px solid var(--bdm-line);
  border-radius: 3px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bdm-ink);
  text-align: center;
}
/* 次の箱へ向かう矢印（縦） */
.bdm-route__steps li + li{ margin-top: 20px; }
.bdm-route__steps li + li::before{
  content: "";
  position: absolute;
  left: 50%; top: -17px;
  width: 1px; height: 14px;
  background: var(--bdm-line-strong);
}
.bdm-route__steps li + li::after{
  content: "";
  position: absolute;
  left: 50%; top: -8px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--bdm-line-strong);
  border-bottom: 1.5px solid var(--bdm-line-strong);
  transform: translate(-50%, 0) rotate(45deg);
}
.bdm-route__steps li:last-child{
  background: var(--bdm-gray-bg);
  border-color: var(--bdm-line-strong);
}
.bdm-route__steps--act li{ border-color: var(--bdm-teal-line); }
.bdm-route__steps--act li + li::before{ background: var(--bdm-teal-line); }
.bdm-route__steps--act li + li::after{ border-color: var(--bdm-teal-line); }
.bdm-route__steps--act li:last-child{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
  color: var(--bdm-teal-strong);
  font-weight: 700;
}

/* ---- ④ 比較表 ---- */
.bdm-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
}
.bdm-table th,
.bdm-table td{
  padding: 9px 8px;
  border-bottom: 1px solid var(--bdm-line);
  text-align: center;
  color: var(--bdm-ink);
}
.bdm-table thead th{
  font-size: var(--font-min);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bdm-ink-sub);
  border-bottom: 1px solid var(--bdm-line-strong);
}
.bdm-table thead th.bdm-table__act{ color: var(--bdm-teal-strong); }
.bdm-table tbody th{
  text-align: left;
  font-weight: 400;
  color: var(--bdm-ink);
}
.bdm-table td{
  width: 5.2em;
  font-size: 15px;
  font-weight: 700;
  color: var(--bdm-ink-faint);
  font-feature-settings: "tnum";
}
.bdm-table td.bdm-table__yes{ color: var(--bdm-ink-sub); }
.bdm-table .bdm-table__act{ background: var(--bdm-teal-tint); }
.bdm-table td.bdm-table__act{ color: var(--bdm-teal-strong); }
.bdm-table tbody tr:last-child th,
.bdm-table tbody tr:last-child td{ border-bottom: 0; }

/* ---- ⑤ 対応の歩調 ---- */
.bdm-pace{ display: grid; gap: var(--bdm-s4); }
.bdm-pace__steps{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-pace__steps li{
  padding: 7px 11px;
  border: 1px solid var(--bdm-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bdm-ink);
}
.bdm-pace__steps li + li{ position: relative; margin-left: 12px; }
.bdm-pace__steps li + li::before{
  content: "";
  position: absolute;
  left: -11px; top: 50%;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--bdm-line-strong);
  border-top: 1.5px solid var(--bdm-line-strong);
  transform: translateY(-50%) rotate(45deg);
}
.bdm-pace__row--act .bdm-pace__steps li{
  border-color: var(--bdm-teal-line);
  color: var(--bdm-teal-strong);
}
.bdm-pace__row--act .bdm-pace__steps li:last-child{
  background: var(--bdm-teal-tint);
  font-weight: 700;
}
.bdm-pace__row--slow .bdm-pace__steps li:last-child{
  background: var(--bdm-gray-bg);
  border-color: var(--bdm-line-strong);
  color: var(--bdm-ink-sub);
}


/* ============================================================
   6. 数字カード
   ★大きな数字 + 小さな説明。数字は必ず本文と同じ値を使います。
   ============================================================ */
.bdm-nums{
  display: grid;
  gap: var(--bdm-s2);
  margin-top: var(--bdm-s4);
}
.bdm-num{
  padding: var(--bdm-s3) var(--bdm-s4);
  background: var(--bdm-teal-tint);
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
}
.bdm-num__k{
  margin: 0;
  font-size: var(--font-min);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--bdm-ink-sub);
}
.bdm-num__v{
  margin: 2px 0 0;
  font-family: var(--gothic);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--bdm-teal-strong);
  font-variant-numeric: tabular-nums;
}
.bdm-num__v small{
  font-size: 15px;
  font-weight: 700;
  margin-left: 2px;
}


/* ============================================================
   7. 実例（Before / After）
   ★文言は1文字も変えていません。見せ方だけを整えています。
   ============================================================ */
.bdm-case{
  border-radius: 4px;
  border-color: var(--bdm-line);
  box-shadow: none;
  padding: var(--bdm-s4);
  margin-top: var(--bdm-s6) !important;
}
.bdm-case .case__head{
  color: var(--bdm-ink);
  margin-bottom: var(--bdm-s4);
}
.bdm-case .case__grid{
  gap: var(--bdm-s2);
  align-items: stretch;
}
.bdm-case .case__item{
  position: relative;
  background: var(--bdm-gray-bg);
  border: 0;
  border-radius: 4px;
  padding: var(--bdm-s3);
}
/* 変更後・年間の差 は結果なので teal の面にします */
.bdm-case .case__item:nth-child(2),
.bdm-case .case__item:nth-child(3){
  background: var(--bdm-teal-tint);
}
.bdm-case .case__k{
  font-size: var(--font-min);
  color: var(--bdm-ink-sub);
}
.bdm-case .case__v{
  color: var(--bdm-ink);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.bdm-case .case__item:nth-child(2) .case__v,
.bdm-case .case__item:nth-child(3) .case__v{ color: var(--bdm-teal-strong); }
.bdm-case .case__v small{ color: var(--bdm-ink-sub); }
/* 変更前 → 変更後 の向きを、間のすき間に小さな矢印で示します */
@media (min-width: 600px){
  .bdm-case .case__item:nth-child(2)::before{
    content: "";
    position: absolute;
    left: -6px; top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--bdm-line-strong);
    border-top: 1.5px solid var(--bdm-line-strong);
    transform: translate(-50%, -50%) rotate(45deg);
  }
}
.bdm-case .case__note{
  margin-top: var(--bdm-s4);
  padding-top: var(--bdm-s3);
  border-top: 1px solid var(--bdm-line);
  font-size: var(--font-note);
  color: var(--bdm-ink-sub);
}


/* ============================================================
   8. こんなことありませんか？
   ★箱を並べるのではなく、淡い面にして軽く見せます。
   ============================================================ */
/* ★この節の地色は白なので、面ではなく細い罫でカードにします
   （#F5F6F6 の面は白地だとほぼ見えません）。 */
.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); }


/* ============================================================
   9. MANAGEMENT の中身
   ★開閉式（6項目）はそのまま。中の見せ方だけ整えます。
   ============================================================ */

/* 角丸をB案にそろえる（14px → 4px） */
.sec-mgmt .topics,
.sec-mgmt .watch__card,
.sec-mgmt .grow__item,
.sec-mgmt .lead-out,
.sec-mgmt .fee-note,
.sec-mgmt .reach__box{
  border-radius: 4px;
  box-shadow: none;
}
.sec-mgmt .topics{ border-color: var(--bdm-line); }
.sec-mgmt .topic + .topic{ border-top-color: var(--bdm-line); }
.sec-mgmt .topic[open] .topic__q{ background: var(--bdm-kinari); }
.sec-mgmt .topic__q:hover{ background: var(--bdm-kinari); }

/* 節の中の小見出し（01 入居前 …） */
.sec-mgmt .scope__n{ color: var(--bdm-teal-strong); }
.sec-mgmt .scope__item{ border-color: var(--bdm-line); }

/* 募集の5ステップ — 番号を teal の面に、つなぎ線を teal に */
.sec-mgmt .flow__n{
  border-radius: 4px;
  border-color: var(--bdm-teal-line);
  color: var(--bdm-teal-strong);
  background: var(--bdm-teal-tint);
}
.sec-mgmt .flow__step:not(:last-child)::before{ background: var(--bdm-teal-line); }

/* 募集の到達経路 — PCでは横並び（下の @media で） */
.sec-mgmt .reach__box{ border-color: var(--bdm-line); }
.sec-mgmt .reach__box--goal{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}
.sec-mgmt .reach__arrow{ background: var(--bdm-line-strong); }
.sec-mgmt .reach__arrow::after{ border-color: var(--bdm-line-strong); }

/* お金 / 建物 */
.sec-mgmt .watch__card{ border-color: var(--bdm-line); }
.sec-mgmt .watch__head{ border-bottom-color: var(--bdm-line); }
.sec-mgmt .watch__ic{
  border-radius: 4px;
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
}

/* トラブル対応の4ステップ */
.sec-mgmt .fix__n{
  border-radius: 4px;
  background: var(--bdm-teal-tint);
  color: var(--bdm-teal-strong);
}
.sec-mgmt .fix__step + .fix__step{ border-top-color: var(--bdm-line); }
.sec-mgmt .chips li{
  border: 1px solid var(--bdm-teal-line);
  background: #fff;
  color: var(--bdm-teal-strong);
}

/* 更新の4ステップ */
.sec-mgmt .renew__n{ color: var(--bdm-num); }

/* 守る → 改善する → 育てる */
.sec-mgmt .grow__item{ border-color: var(--bdm-line); }
/* ★.grow の子には矢印の div も混ざるので nth-of-type では真ん中を指します。
   行き着く先（育てる）を強調したいので :last-child を使います。 */
.sec-mgmt .grow__item:last-child{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}
.sec-mgmt .grow__t{ color: var(--bdm-ink); }
.sec-mgmt .grow__item:last-child .grow__t{ color: var(--bdm-teal-strong); }
.sec-mgmt .grow__arrow{ background: var(--bdm-line-strong); }
.sec-mgmt .grow__arrow::after{ border-color: var(--bdm-line-strong); }

/* 管理手数料 — 数字カードとして見せます */
.sec-mgmt .topic__a .fee-note{
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  padding: var(--bdm-s4);
}
.sec-mgmt .fee-note__h{
  font-size: var(--font-min);
  letter-spacing: .06em;
  color: var(--bdm-ink-sub);
}
.sec-mgmt .fee-note__v{
  font-size: 34px;
  line-height: 1.2;
  color: var(--bdm-teal-strong);
  margin-bottom: var(--bdm-s2);
}
/* ★クラスの付いていない説明文だけ。`p` にまとめて当てると
   .fee-note__v（p要素）の色まで上書きしてしまいます。 */
.sec-mgmt .fee-note > p:not([class]){ color: var(--bdm-ink); }

/* まとめの一文 */
.sec-mgmt .lead-out{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}
.sec-mgmt .motto{ color: var(--bdm-teal-strong); }


/* ============================================================
   10. 中間CTA
   ★最終CTAより弱めにします（大見出しなし・面は淡く・幅は本文なり）。
   ============================================================ */
/* ★最終CTAより弱くします——地色は生成り、ボタンは塗りではなく線。
   ページの中で「いちばん強いのは最後の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デザインシステムの共通ルール）。
   そろえないと、最後の行が1〜2文字だけになる幅が出ます
   （900px で [21,22,2]、375px で [19,17,2]）。
   ★高さは変わりません（7幅で実測。行の分かれ方だけが変わります）。
   ★対応していないブラウザでは、いまと同じ折り返しに戻るだけで崩れません。
   ★同じ規則が lp/assets/css/lp-design.css にもあります（正本は
     docs/lp/B.D.M_Public_LP_Design_System.md）。 */
.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);
}

/* ★和紙の節に置かれた中間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;
}


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

@media (min-width: 900px){
  /* ① 12ヶ月を横一列に */
  .bdm-year__months{ grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* ③ 左右で見比べる（見出しは同じ行なので、2行になってもそろいます） */
  .bdm-route{ grid-template-columns: 1fr 1fr; }

  /* 中間CTA — ボタンは横並び、文と並べる */
  .bdm-cta-mid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--bdm-s4);
    padding: var(--bdm-s4) var(--bdm-s5);
  }
  .bdm-cta-mid__t{ margin-bottom: 0; }
  .bdm-cta-mid__btns{ grid-template-columns: auto auto; }
  /* ★ボタンの左右は s3（2026-09-27 Release G で s4 から）。LINE ボタンが「LINEで情報を受け取る」に
     なって約48px広がり、2つ目の中間CTA（器880px）で本文が2行→3行（「資／料」で割れる）になったため。
     本文の欄を約6px取り戻せば2行に戻るので、左右を1段だけ詰めて余裕を持たせる（高さ・色・枠は不変）。 */
  .bdm-cta-mid .btn{ padding-inline: var(--bdm-s3); }
  .bdm-cta-mid__note{ grid-column: 1 / -1; margin-top: 0; }

  /* 募集の到達経路 — 横に並べる */
  .sec-mgmt .reach{
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
    gap: 0;
  }
  .sec-mgmt .reach__box{ max-width: none; }
  .sec-mgmt .reach__arrow{
    width: 100%; height: 1px;
    margin-inline: var(--bdm-s2);
  }
  .sec-mgmt .reach__arrow::after{
    left: auto; right: 1px; bottom: auto; top: 50%;
    transform: translate(0, -50%) rotate(-45deg);
  }
}

/* タブレット〜PC手前 */
@media (min-width: 700px) and (max-width: 899px){
  .bdm-year__months{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bdm-route{ grid-template-columns: 1fr 1fr; }
  .bdm-cta-mid__btns{ grid-template-columns: 1fr 1fr; }
}

/* 細い画面 */
@media (max-width: 599px){
  .bdm-check-item__num{ font-size: 28px; }
  .bdm-block--common,
  .bdm-block--try,
  .bdm-block--bdm{ padding: var(--bdm-s3); }
  .bdm-figure{ padding: var(--bdm-s3) var(--bdm-s2); }
  .bdm-num{ padding: var(--bdm-s3); }
  .bdm-num__v{ font-size: 26px; }
  .bdm-case{ padding: var(--bdm-s3); }
  .bdm-case .case__grid{ grid-template-columns: 1fr; }
  .bdm-case .case__item{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--bdm-s2); }
  .bdm-case .case__k{ flex: 0 0 auto; }
  .bdm-case .case__v small{ display: inline; font-size: 13px; margin-left: 3px; }
  .bdm-table th, .bdm-table td{ padding: 9px 5px; }
  .bdm-table td{ width: 4.4em; }
  .bdm-worries li{ padding: var(--bdm-s2); }
}

/* とても細い画面（375px）で番号と見出しがぶつからないように */
@media (max-width: 389px){
  .bdm-check-item__head{ gap: var(--bdm-s1); padding-inline: var(--bdm-s2); }
  .bdm-check-item__num{ font-size: 25px; }
  .bdm-check-item__title{ font-size: 16.5px; }
  .bdm-table{ font-size: var(--font-min); }
}


/* ============================================================
   12. MANAGEMENT の図解
   ★開閉式（6項目）の【中】に入ります。閉じているときの見え方は変わりません。
   ★図解は HTML+CSS。画像もSVGの文字も使いません
     （スマホで文字が縮まない／あとから直せる／読み上げが効くため）。
   ============================================================ */

/* MANAGEMENT 用の器。この節の地色は白なので、生成りにして
   「ここは図解」と分かるようにします。中の箱は白のまま。 */
.bdm-figure--mg{
  background: var(--bdm-kinari);
  margin: var(--bdm-s5) 0 0;
  padding: var(--bdm-s4);
}
.bdm-figure--mg .bdm-figure__cap{ border-top-color: var(--bdm-line-strong); }

/* 丸いアイコン（既存のスプライトを使い回します） */
.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; }


/* ------------------------------------------------------------
   12-1. 管理のライフサイクル（入居前 → 入居中 → 更新 → 退去 → 次の募集）
   ------------------------------------------------------------ */
/* ★「この流れをくりかえします」の札は、戻り線の上に半分はみ出して乗ります。
   そのぶんの高さをここで確保しておかないと、下の説明文と詰まって見えます。 */
.bdm-cycle-wrap{ position: relative; padding-bottom: 10px; }

.bdm-cycle{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--bdm-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-cycle__step{
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--bdm-s1);
  padding: var(--bdm-s3) 6px;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
/* 次の段へ向かう矢羽根（すき間の真ん中に置きます） */
.bdm-cycle__step + .bdm-cycle__step::before{
  content: "";
  position: absolute;
  left: calc(var(--bdm-s1) * -1 - 1px);
  top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--bdm-line-strong);
  border-top: 1.5px solid var(--bdm-line-strong);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* 最後の「次の募集」は、また最初へ戻る段 */
.bdm-cycle__step--loop{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}
.bdm-cycle__t{
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bdm-ink);
  text-align: center;
}

/* 最後から最初へ戻る線（コの字） */
.bdm-cycle__back{
  position: relative;
  margin: 0 10%;
  height: 26px;
  border: 1px solid var(--bdm-teal-line);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.bdm-cycle__back::before{
  content: "";
  position: absolute;
  left: -4px; top: -2px;
  width: 7px; height: 7px;
  border-left: 1.5px solid var(--bdm-teal-line);
  border-top: 1.5px solid var(--bdm-teal-line);
  transform: rotate(45deg);
}
.bdm-cycle__back span{
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  padding: 0 10px;
  background: var(--bdm-kinari);
  font-size: var(--font-min);
  line-height: 1.6;
  color: var(--bdm-teal-strong);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   12-2. 募集の到達経路（物件 → B.D.M → 仲介会社／募集サイト → 入居希望者）
   ★③の「囲い込み」の図は“広いか狭いか”の比較。
     こちらは“実際にどこを通って届くか”の実務の流れです。
   ------------------------------------------------------------ */
.bdm-reach3{ display: grid; }
.bdm-reach3__row{ position: relative; display: grid; justify-items: center; }
.bdm-reach3__row--two{ grid-template-columns: 1fr 1fr; gap: var(--bdm-s3); }
.bdm-reach3__row + .bdm-reach3__row{ margin-top: 30px; }

/* 上の段から降りてくる縦線 */
.bdm-reach3__row + .bdm-reach3__row::before{
  content: "";
  position: absolute;
  left: 50%; top: -30px;
  width: 1px; height: 30px;
  background: var(--bdm-teal-line);
}
/* 2列の段は、途中で横に渡してから それぞれの箱へ落とす。
   ★詳細度に注意——上の `.bdm-reach3__row + .bdm-reach3__row::before` のほうが強いので、
     同じ強さ（隣接セレクタ）で書かないと 30px のままになり、
     B.D.M から入居希望者まで縦線が突き抜けて見えます。 */
.bdm-reach3__row + .bdm-reach3__row--two::before{ height: 15px; }
.bdm-reach3__row--two::after{
  content: "";
  position: absolute;
  left: 25%; right: 25%; top: -15px;
  height: 1px;
  background: var(--bdm-teal-line);
}
.bdm-reach3__row--two .bdm-reach3__box::before{
  content: "";
  position: absolute;
  left: 50%; top: -15px;
  width: 1px; height: 15px;
  background: var(--bdm-teal-line);
}

/* 2列の段から下へ合流する線（各箱から降りて、横に渡してから中央へ） */
.bdm-reach3__row--two .bdm-reach3__box::after{
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 15px;
  background: var(--bdm-teal-line);
}
.bdm-reach3__row--two + .bdm-reach3__row::after{
  content: "";
  position: absolute;
  left: 25%; right: 25%; top: -15px;
  height: 1px;
  background: var(--bdm-teal-line);
}

.bdm-reach3__box{
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: var(--bdm-s2) var(--bdm-s3);
  text-align: center;
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
.bdm-reach3__box b{
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--bdm-ink);
}
.bdm-reach3__box span{
  display: block;
  margin-top: 2px;
  font-size: var(--font-min);
  line-height: 1.6;
  color: var(--bdm-ink-sub);
}
.bdm-reach3__box--hub,
.bdm-reach3__box--goal{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}
.bdm-reach3__box--hub b,
.bdm-reach3__box--goal b{ color: var(--bdm-teal-strong); }


/* ------------------------------------------------------------
   12-3. トラブル対応の流れ（受付 → … → 完了）
   ★下に続く4ステップの「ひと目版」です。数字は付けません
     （下のステップの番号と二重にならないように）。
   ------------------------------------------------------------ */
.bdm-rail{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-rail li{
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--bdm-s2);
}
.bdm-rail li::before{
  content: "";
  position: absolute;
  left: -50%; right: 50%;
  top: 7px;
  height: 1px;
  background: var(--bdm-teal-line);
}
.bdm-rail li:first-child::before{ display: none; }
.bdm-rail__dot{
  position: relative;
  z-index: 1;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bdm-teal-line);
}
.bdm-rail li:last-child .bdm-rail__dot{
  background: var(--bdm-teal);
  border-color: var(--bdm-teal);
}
.bdm-rail__t{
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  color: var(--bdm-ink);
}
.bdm-rail li:last-child .bdm-rail__t{
  font-weight: 700;
  color: var(--bdm-teal-strong);
}


/* ------------------------------------------------------------
   12-4. お金の管理 / 建物の管理 の2本柱 → 資産価値
   ------------------------------------------------------------ */
.bdm-pillars__cols{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bdm-s4);
}
.bdm-pillars__col{
  position: relative;
  padding: var(--bdm-s3);
  background: #fff;
  border: 1px solid var(--bdm-line);
  border-radius: 4px;
}
.bdm-pillars__t{
  display: flex;
  align-items: center;
  gap: var(--bdm-s2);
  margin: 0 0 var(--bdm-s2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bdm-ink);
}
.bdm-pillars__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-pillars__tags li{
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--bdm-line);
  background: var(--bdm-gray-bg);
  font-size: var(--font-min);
  line-height: 1.5;
  color: var(--bdm-ink-sub);
}
/* 柱から降りる線 → 横に渡す → 中央から下へ */
.bdm-pillars__col::after{
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 19px;
  background: var(--bdm-teal-line);
}
.bdm-pillars__cols::after{
  content: "";
  position: absolute;
  left: 25%; right: 25%;
  top: calc(100% + 19px);
  height: 1px;
  background: var(--bdm-teal-line);
}
.bdm-pillars__goal{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bdm-s2);
  margin: 38px auto 0;
  max-width: 22em;
  padding: var(--bdm-s2) var(--bdm-s4);
  background: var(--bdm-teal-tint);
  border: 1px solid var(--bdm-teal-line);
  border-radius: 4px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--bdm-teal-strong);
  text-align: center;
}
.bdm-pillars__goal::before{
  content: "";
  position: absolute;
  left: 50%; top: -19px;
  width: 1px; height: 19px;
  background: var(--bdm-teal-line);
}
.bdm-pillars__goal .bdm-ic{
  width: 30px; height: 30px;
  background: #fff;
}
.bdm-pillars__goal .bdm-ic svg{ width: 16px; height: 16px; }


/* ------------------------------------------------------------
   12-5. 守る → 改善する → 育てる を階段に
   ★HTMLは1行も足していません。並べ方だけで右肩上がりにしています。
   ------------------------------------------------------------ */
.sec-mgmt .grow__item{ position: relative; overflow: hidden; }
/* 上端の teal の帯が、段が進むほど長くなります */
.sec-mgmt .grow__item::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  background: var(--bdm-teal);
}
.sec-mgmt .grow__item:nth-child(1)::before{ width: 34%; }
.sec-mgmt .grow__item:nth-child(3)::before{ width: 67%; }
.sec-mgmt .grow__item:nth-child(5)::before{ width: 100%; }


/* ============================================================
   13. MANAGEMENT の図解：画面幅ごとの調整
   ============================================================ */

@media (min-width: 900px){
  /* 階段にする（矢印は段差そのものが示すので隠します） */
  .sec-mgmt .grow{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bdm-s3);
    align-items: end;
  }
  .sec-mgmt .grow__arrow{ display: none; }
  .sec-mgmt .grow__item:nth-child(3){ margin-bottom: 28px; }
  .sec-mgmt .grow__item:nth-child(5){ margin-bottom: 56px; }
}

/* タブレット以下：図解を縦に積み替える */
@media (max-width: 699px){
  .bdm-figure--mg{ padding: var(--bdm-s3); }

  /* ライフサイクル：縦のつながりにして、左に「戻る」線を引く */
  .bdm-cycle-wrap{ padding-left: 26px; }
  .bdm-cycle-wrap::before{
    content: "";
    position: absolute;
    left: 0; top: 24px; bottom: 58px;
    width: 16px;
    border: 1px solid var(--bdm-teal-line);
    border-right: 0;
    border-radius: 4px 0 0 4px;
  }
  .bdm-cycle-wrap::after{
    content: "";
    position: absolute;
    left: 12px; top: 21px;
    width: 7px; height: 7px;
    border-left: 1.5px solid var(--bdm-teal-line);
    border-top: 1.5px solid var(--bdm-teal-line);
    transform: rotate(45deg);
  }
  .bdm-cycle{ grid-template-columns: 1fr; gap: 20px; }
  .bdm-cycle__step{
    grid-template-columns: 38px 1fr;
    justify-items: start;
    align-items: center;
    gap: var(--bdm-s2);
    padding: 10px 12px;
  }
  .bdm-cycle__step + .bdm-cycle__step::before{
    left: 31px; top: -10px;
    transform: translate(-50%, -50%) rotate(135deg);
  }
  .bdm-cycle__t{ text-align: left; }
  .bdm-cycle__back{
    height: auto;
    margin: var(--bdm-s3) 0 0;
    border: 0;
    border-radius: 0;
    text-align: center;
  }
  .bdm-cycle__back::before{ display: none; }
  .bdm-cycle__back span{
    position: static;
    transform: none;
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--bdm-teal-line);
    border-radius: 999px;
  }

  /* 到達経路：2列をやめて1本の流れに */
  .bdm-reach3__row--two{ grid-template-columns: 1fr; gap: 30px; }
  .bdm-reach3__row--two::after{ display: none; }
  .bdm-reach3__row--two::before{ height: 30px; }
  .bdm-reach3__row--two .bdm-reach3__box::before{ display: none; }
  .bdm-reach3__row--two .bdm-reach3__box::after{ display: none; }
  .bdm-reach3__row--two + .bdm-reach3__row::after{ display: none; }
  .bdm-reach3__row--two .bdm-reach3__box + .bdm-reach3__box::before{
    display: block;
    left: 50%; top: -30px;
    width: 1px; height: 30px;
  }
  .bdm-reach3__box{ max-width: none; }

  /* トラブル対応：縦のレールに */
  .bdm-rail{ grid-template-columns: 1fr; gap: 16px; }
  .bdm-rail li{
    grid-template-columns: 15px 1fr;
    justify-items: start;
    align-items: center;
    gap: var(--bdm-s3);
  }
  .bdm-rail li::before{
    left: 7px; right: auto;
    top: -16px; bottom: 50%;
    width: 1px; height: auto;
  }
  .bdm-rail__t{ text-align: left; }
}

/* 細い画面：2本柱も縦積みに */
@media (max-width: 599px){
  .bdm-pillars__cols{ grid-template-columns: 1fr; gap: 38px; }
  .bdm-pillars__cols::after{ display: none; }
  .bdm-pillars__goal{ max-width: none; }
  .bdm-cycle__t{ font-size: 13px; }
}


/* ============================================================
   14. 仕上げ — 箱の整理・強弱・余白
   ★図解は増やしていません。「置換・整理」だけです。
   ★文言も触っていません（削っていません）。
   ============================================================ */

/* ------------------------------------------------------------
   14-1. お金／建物 → 資産価値 は「合流」だけにする
   ★上の2枚（.watch のカード）と同じ見出しを もう一度カードで
     並べていたのをやめました。器（面と枠）も外して、
     2枚から降りてくる線とゴールだけにしています。
   ------------------------------------------------------------ */
.bdm-figure--merge{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  /* ★上に 24px 空けるのは、合流の線がこの分だけ上へ伸びるからです。
     0 にすると線が上のカードの中に食い込みます。 */
  margin: var(--bdm-s4) 0 0;
}
.bdm-figure--merge .bdm-figure__cap{
  border-top: 0;
  padding-top: 0;
  margin-top: var(--bdm-s3);
  text-align: center;
}
.bdm-pillars{
  position: relative;
  padding-top: 26px;
}
/* 上の2枚の中心から降りて、横に渡す（⊔ の形） */
.bdm-pillars::before{
  content: "";
  position: absolute;
  left: 25%; right: 25%;
  top: calc(var(--bdm-s4) * -1);
  height: calc(var(--bdm-s4) + 26px);
  border: 1px solid var(--bdm-teal-line);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.bdm-pillars__goal{
  margin: 0 auto;
}
.bdm-pillars__goal::before{ display: none; }

/* ------------------------------------------------------------
   14-2. 図解の強弱
   ★大きさは変えません。器の重さとアクセント色の量だけで差をつけます。
   ------------------------------------------------------------ */

/* 主役寄り：② 初期費用の比較 ／ ③ 囲い込み
   —— 細罫を teal にして、少しだけ余白を足します。 */
#check-02 > .bdm-check-item__body > .bdm-figure,
#check-03 > .bdm-check-item__body > .bdm-figure{
  border-color: var(--bdm-teal-line);
  padding: var(--bdm-s4);
}

/* 補助寄り：③ トラブル対応のレール
   —— 下に同じ内容の4ステップが続くので、器の枠を外して面だけにします。 */
.bdm-figure--mg:has(.bdm-rail){
  border: 0;
  padding: var(--bdm-s4) var(--bdm-s3);
}

/* ------------------------------------------------------------
   14-3. 守る → 改善する → 育てる を締めの主役に
   ★要素は増やしていません。段差・面・余白だけで強めています。
   ------------------------------------------------------------ */

/* 1段目・2段目は「途中」なので面だけ（枠を外す）。
   3段目だけが teal の面と細罫を持ち、行き着く先だと分かるようにします。 */
.sec-mgmt .grow__item{
  background: var(--bdm-kinari);
  border-color: transparent;
}
.sec-mgmt .grow__item:last-child{
  background: var(--bdm-teal-tint);
  border-color: var(--bdm-teal-line);
}

/* 締めの一文は、段のあとで一拍おいてから */
.sec-mgmt .motto{
  margin-top: var(--bdm-s6);
  font-size: 19px;
  letter-spacing: .12em;
  line-height: 1.9;
}

/* 管理手数料 —— 枠を外し、面と左の罫だけにします（箱を1つ減らす） */
.sec-mgmt .topic__a .fee-note{
  background: var(--bdm-kinari);
  border: 0;
  border-left: 3px solid var(--bdm-teal);
  border-radius: 0 4px 4px 0;
  margin-top: var(--bdm-s6);
}

/* ------------------------------------------------------------
   14-4. 最終CTAの前に「休符」を作る
   ★内容は足しません。面と余白だけで整えます。
   ------------------------------------------------------------ */

/* 補足は「箱」をやめて、和紙の地の上に文だけを置きます。
   ここがページで唯一、面も枠も持たない区間になります。 */
.section--washi .note-box{
  background: transparent;
  border-radius: 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
}
.section--washi .note-box__icon{
  background: transparent;
  border: 1px solid var(--bdm-teal-line);
}

/* 最終CTAは、上にしっかり余白をとってから始めます
   （もともと padding-top: 0 が直接指定されているので、中の器で空けます）。 */
.section--tint > .container{
  padding-top: var(--bdm-s7);
}

/* ------------------------------------------------------------
   14-5. 画面幅ごとの調整
   ------------------------------------------------------------ */

@media (min-width: 900px){
  /* 段差を少し深くして、右上へ流れる線をはっきりさせます */
  /* 段差のぶん上端がギザギザになるので、上の文とのあいだを広めにとります */
  .sec-mgmt .grow{ margin-top: var(--bdm-s6); }
  .sec-mgmt .grow__item:nth-child(3){ margin-bottom: 36px; }
  .sec-mgmt .grow__item:nth-child(5){ margin-bottom: 72px; }
  .sec-mgmt .motto{ font-size: 20px; }
}

@media (max-width: 899px){
  /* .watch が1列になるので、合流の線も1本にします */
  .bdm-pillars::before{
    left: 50%; right: auto;
    width: 1px;
    border: 0;
    border-left: 1px solid var(--bdm-teal-line);
    border-radius: 0;
  }
}

@media (max-width: 599px){
  .section--tint > .container{ padding-top: var(--bdm-s6); }
  .sec-mgmt .motto{ margin-top: var(--bdm-s5); }
}

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

   ★このページは完成済みなので、「直せるから直す」ではなく
     **明らかに見栄えが良くなるところだけ**に当てています。
     7幅で実測し、巻き添え（もともと孤立が無いのに行が変わる件数）が
     0〜2 のものだけを選びました。高さ・ページ全長は変わりません。
   ★当てていないもの（巻き添えが大きい）:
       .bdm-block p          直る12 / 巻き添え109
       .sec-lead 全体        直る 7 / 巻き添え 87
       .bdm-figure__cap      直る 3 / 巻き添え 27
       .fix__d/.flow__d/.renew__d  直る9 / 巻き添え27
       .bdm-check-item__title 直る 4 / 巻き添え  7
   ============================================================ */

/* 標語 —— 375px で「…「育成」／へ。」（直る1 / 巻き添え0・中央揃え） */
.motto{ text-wrap: balance; }

/* 図解の小見出し —— 「…できる状／態」（直る3 / 巻き添え1） */
.bdm-fig-h{ text-wrap: balance; }

/* 経路図の行き先 —— 中央揃えの短い札（直る2 / 巻き添え0） */
.bdm-route__steps li{ text-wrap: balance; }

/* 守備範囲の副題 —— 768px で「…続けるた／めに」（直る1 / 巻き添え0） */
.scope__s{ text-wrap: balance; }

/* ほかのご相談への導線（直る4 / 巻き添え0） */
.other-link__l{ text-wrap: balance; }

/* こんなお悩み（直る2 / 巻き添え2） */
.worries li span{ text-wrap: balance; }

/* ★中央揃えのリード文だけ（直る3 / 巻き添え5）。
   `.sec-lead` 全体は巻き添え87件なので当てません。 */
.center .sec-lead{ text-wrap: balance; }

/* ★キャプションと注記を 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）に合わせた調整
   ★FV のリード（17px）：「空室を埋める。家賃を集める。修繕をする。」の20文字が
     375px では入らず「2文字だけの行」になるので、この1行が入る上限で頭打ちにする（390px 以上は 17px のまま）。
   ============================================================ */
@media (max-width: 759.98px){
  body[data-consult="management"] .hero__sub{
    font-size: min(var(--font-lead), calc((100vw - 40px) / 20.2));
  }
}