/* =========================================================
   修正一覧（2026-10-24）法人・自治体の方へ（59番・別紙3）の修正案
   部品は、このページにすでにあるもの（business.css）をそのまま使う。
   ここに書くのは、部品の組み合わせ方（間隔・列の数）と、暗い面で使うときの色だけ
   ========================================================= */

/* ---------- 入口ごとの中のかたまりの間隔：いまの「お引き受けできること」などの間と同じ 80px ---------- */
.bz-block { margin-top: 80px; }

/* ---------- 04 ケアマネジャー・地域包括支援センター：新しい面。上下の余白はほかの面と同じ、背景は紙の色 ---------- */
.sec--care { padding: 120px 0; background: var(--paper); }

/* ---------- 01 入居前／入居中／ご退去後：「ご提案は2段階です」のカードを3枚に ---------- */
.bz-phases {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.bz-phases .plan__card { min-height: 0; justify-content: flex-start; }

/* ---------- 02 企業：暗い面で使う部品の色 ---------- */
.sec--corp .sec-head__title { color: #fff; }
.bz-worry--dark .worry__list { border-top-color: rgba(255, 255, 255, .16); }
.bz-worry--dark .worry__list li { border-bottom-color: rgba(255, 255, 255, .16); color: #fff; }
.sec--corp .statement { margin-bottom: 80px; }

/* 研修で目指す3つのこと：いまの「メニュー2枚」のカードを3枚に。下の線から下は文 */
.bz-menus { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-menu__text {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, .85);
}

/* チェックの一覧が1つだけのとき */
.after-list.bz-one { grid-template-columns: minmax(0, 1fr); }

/* ※の注記：いまの「共通の約束」の下の一行と同じ見た目 */
.bz-note {
  margin-top: 16px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .72);
}

/* ---------- お約束：見出しはほかと同じ小見出しの形。見出し→枠は、ほかの見出し→中身と同じ 40px ---------- */
.bz-promise { margin-top: 40px; }
/* 幅が狭くなって枠の中が折り返すとき（business.css の 1100px 以下）、ボタンが文の上に来ないよう、いつも文の後ろに置く */
.bz-promise > .btn { order: 3; }
/* 本文は、いまの枠の1行目と同じ指定（明朝・24px）。薄い面のときは紺 */
.corp-note--light .corp-note__body > p:first-child { color: var(--navy-deep); }

/* ---------- 04 A／B：「入居前／入居中／ご退去後」と同じカードを2枚。カードの文は、カードの見出しの下に ---------- */
.bz-phases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-phase__text { margin-top: 16px; font-size: 20px; line-height: 32px; color: var(--ink); }

/* ---------- 4つの入口に共通のお約束：見出しはほかの面と同じ大きな見出し。
   見出し→中身は、ほかの面の見出し→中身と同じ 100px。上下の余白は、ほかの面と同じ 120px ---------- */
.sec--pledge { padding: 120px 0; }
.sec--pledge .sec-head__title { color: #fff; }
.sec--pledge .reasons { margin-top: 100px; }
/* 01〜03の下：文2行とボタンを、締めくくりのひとまとまりにする。
   01〜03との間は、このページのかたまり同士の間と同じ 80px。3列の下に左寄せで小さく残ると片寄って見えるので、
   3列の真ん中にそろえる（JUDGEとはの「現場の7つの決まり」の下の締めの一文と同じ置き方） */
.sec--pledge .pledge__note { margin-top: 80px; text-align: center; }
.sec--pledge .bz-contact { margin-top: 0; }
.sec--pledge .pledge__btn { display: flex; width: fit-content; margin: 40px auto 0; }

/* ---------- 冒頭のボタン：トップのヒーローのボタンと同じ、白い線のボタン（色だけ。文字の太さ・字間はいまのまま） ---------- */
.bhero__btns .btn {
  background: none;
  box-shadow: inset 0 0 0 1px #fff;
}
.bhero__btns .btn:hover { background: rgba(255, 255, 255, .08); }

/* ---------- 03 自治体：お引き受けできること（番号は付けない）・教材 ---------- */
.bz-offers span { font-weight: 700; }
.bz-material__btn { margin-top: 32px; }

/* ---------- 共通のお約束：連絡先の行 ---------- */
.bz-contact { margin-top: 8px; }
.bz-contact a { color: inherit; }

/* ---------- 狭い幅・スマホ（business.css の同じ幅の決まりに合わせる） ---------- */
@media (max-width: 1200px) and (min-width: 751px) {
  .sec--care { padding: 100px 0; }
}
@media (max-width: 1100px) and (min-width: 751px) {
  .bz-menus { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) and (min-width: 751px) {
  .bz-phases, .bz-phases--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 750px) {
  .bz-block { margin-top: 7rem; }
  .sec--care { padding: 10rem 0; }
  .bz-phases, .bz-phases--2 { margin-top: 4rem; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .sec--corp .statement { margin-bottom: 7rem; }
  .bz-menus { margin-top: 4rem; grid-template-columns: minmax(0, 1fr); }
  .bz-menu__text { padding-top: 2.4rem; font-size: 2.6rem; line-height: 1.7; }
  .bz-note { margin-top: 2rem; font-size: 2.2rem; line-height: 1.7; }
  .bz-promise { margin-top: 4rem; }
  .bz-phase__text { margin-top: 1.6rem; font-size: 2.6rem; line-height: 1.85; }
  .sec--pledge { padding: 10rem 0; }
  .sec--pledge .reasons { margin-top: 6rem; }
  .sec--pledge .pledge__note { margin-top: 7rem; text-align: left; }
  .sec--pledge .bz-contact { margin-top: 0; }
  .sec--pledge .pledge__btn { margin: 4rem 0 0; }
  .bhero__btns .btn { box-shadow: inset 0 0 0 .1rem #fff; }
  .bz-material__btn { margin-top: 4rem; }
}

/* 03 自治体：この面は見出しの下に 100px の余白が元から付いている（.sec--public .sec-head）ので、
   写真の側の上の余白（100px）を重ねない。見出し→写真はほかの入口と同じ 100px */
.sec--public .worry { margin-top: 0; }

/* ---------- 改行の位置 ----------
   この面の文はすべて新しい文。幅が変わるたびに「整／理」「研／修」のように言葉の途中で切れるので、
   文節の切れ目に <wbr>（改行してよい印）を入れ、印のない所では改行しないようにする。
   1つの言葉が枠より長いときだけ、はみ出さないよう途中で折る（overflow-wrap） */
.bhero__text,
.pn__what,
.sec-head__title,
.worry__list li,
.blk__lead,
.plan__card h3,
.after-list li,
.corp-note__body > p:first-child,
.bz-phase__text,
.statement p,
.menu h4,
.bz-menu__text,
.bz-note,
.offers span,
.material__body p,
.reasons p,
.pledge__note { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 59番：目次が3つ → 4つ ----------
   751〜1200px では4つ横並びだとカードが狭く、「地域包括支援センター」が1語でも収まらず途中で折れる。
   この幅だけ、ほかのページの目次と同じ 2枚×2段にする（JUDGEとは・ご相談と料金の目次と同じ指定） */
@media (max-width: 1200px) and (min-width: 751px) {
  .pn__list { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; }
  .pn__list > li { min-height: 220px; }
  .pn__list > li::before { display: block; }
  .pn__list > li:nth-child(2n+1)::before { display: none; }
  .pn__list > li:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--line-soft); }
}

/* ---------- 説明の文（小見出しの下の文） ----------
   business.css には説明の文の指定がなく、白い文字を受け継いで白い地で見えなくなるので、
   専門家一覧（network.css）の説明の文と同じ指定をそのまま写す */
.blk__lead { font-weight: 400; font-size: 20px; line-height: 32px; color: #fff; }
.blk__head--dark .blk__lead { color: var(--navy-deep); }
@media (max-width: 750px) {
  .blk__lead { font-size: 2.6rem; line-height: 1.85; }
}

/* ---------- 59番：目次が4つになり、PCでは「ケアマネジャー・地域包括支援センター」だけ2行になる ----------
   中身を上下の真ん中に置く作りなので、04だけ番号・VIEW の高さがずれる。
   名前の欄を4つとも2行分の高さにそろえ、番号・英字・名前・VIEW を横一列にそろえる。
   カードの高さ（220px）と、まわりの余白は変わらない */
@media (min-width: 1201px) {
  .pn__what { min-height: 2lh; }
}

/* ---------- 同じ役目（カードの名前）を同じ見た目に ----------
   01「入居前〜」・04「A／B」のカードの名前はゴシック 32px（.plan__card h3）。
   02「研修で目指す3つのこと」のカードの名前だけ明朝 36px（.menu h4）だったので、同じ指定にそろえる（色は暗い面なので白のまま） */
.bz-menus .menu h4 { font-family: var(--f-jp); font-weight: 700; font-size: 32px; line-height: 48px; }
@media (max-width: 1520px) and (min-width: 751px) {
  .bz-menus .menu h4 { font-size: 26px; line-height: 40px; }
}
@media (max-width: 750px) {
  .bz-menus .menu h4 { font-size: 3.2rem; line-height: 1.5; }
}


/* ---------- 目次カード → 「01」の見出しの間 ----------
   スマホでカードと見出しがくっついていた（0px）。751〜1200px も 80px で、ほかのページ（JUDGEとは・中立の構造・資料室・お問い合わせ）と違っていた。
   ほかのページと同じ、スマホ 140px（14rem）、751〜1200px 170px にそろえる */
@media (max-width: 1200px) and (min-width: 751px) {
  .pn { margin-bottom: 60px; }
}
@media (max-width: 750px) {
  .pn { margin-bottom: 14rem; }
}

/* ---------- こんなことはありませんか：お問い合わせの「お約束」と同じ金の丸のチェックを、1行ずつ頭に付ける ----------
   チェックは行の高さの真ん中。文字の頭の位置は今の左の空き（52px）のまま */
.worry__list li { position: relative; }
.worry__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  background: url("../svg/icon-first-step.svg") no-repeat center / contain;
}
@media (max-width: 1560px) and (min-width: 751px) {
  .worry__list li { padding-left: 44px; }
  .worry__list li::before { width: 28px; height: 28px; margin-top: -14px; }
}
@media (max-width: 750px) {
  .worry__list li { padding-left: 5.6rem; }
  .worry__list li::before { width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; }
}

/* ---------- こんなことはありませんか：チェックが上から1つずつ付いていく動き ----------
   お問い合わせの「お約束」と同じ動き（anim.css の .an-check）。はじめは金の線の丸だけで、
   画面に入ると丸の中にチェックが落ちてくる。待ち時間も同じ（180ms＋1行ごとに 260ms）。
   印（an-check）は business.html の最後の小さなスクリプトが付ける。動きを減らす設定では付かず、チェックが付いた形のまま */
.js .worry__list li.an-check::before {
  background: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(158, 129, 73, .6);
}
.js .worry__list li.an-check::after {
  width: 32px; height: 32px; margin-top: -16px; background-size: 32px 32px;
}
@media (max-width: 1560px) and (min-width: 751px) {
  .js .worry__list li.an-check::after { width: 28px; height: 28px; margin-top: -14px; background-size: 28px 28px; }
}
@media (max-width: 750px) {
  .js .worry__list li.an-check::after { width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; background-size: 3.6rem 3.6rem; }
}