/* ==========================================================
   支援者・施設の方へ(/for-supporters/)
   施設担当者向けの資料ページ。装飾を抑え、見出し・箇条書き・表の読みやすさを優先
   ========================================================== */

.doc { max-width: 1000px; }

/* 見出しは「利用者さんの「毎日」を、」「面談の場に。」の2か所でだけ折り返す */
.sup-hero .page-title { font-size: clamp(26px, 2vw + 19px, 44px); }
.sup-hero .page-title .nw { display: inline-block; }
.sup-hero .page-lead { font-size: 17px; }

/* ② 背景(見出しなしの導入段落) */
.sup-intro { padding-block: 8px 24px; }
.sup-intro p {
  max-width: var(--measure);
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
  line-height: 1.95;
}
@media (min-width: 960px) {
  .sup-intro { padding-block: 0 24px; }
  .sup-intro p { padding: 28px 32px; font-size: 17px; }
}

/* 区画 */
.sup-sec { padding-block: 56px; }
.sup-sec + .sup-sec { border-top: 1px solid var(--border); }
.sup-sec__title { margin-bottom: 28px; }
@media (min-width: 960px) {
  .sup-sec { padding-block: 80px; }
  .sup-sec__title { margin-bottom: 36px; }
}

/* ---------- ③ 支援の場面でできること(PCは表組み:場面|説明|スクショ) ---------- */

.scenes { margin: 0; border-top: 1px solid var(--border); }
.scene {
  display: grid;
  gap: 10px;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}
.scene__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.scene__label .ficon { --ficon-size: 22px; }
.scene__desc { margin: 0; color: var(--text-muted); }
.scene__shots { display: flex; gap: 12px; margin-top: 6px; }
.scene__shots .shot-crop { --crop-h: 220px; justify-content: flex-start; padding: 20px 20px 0; margin: -20px -20px 0; }  /* 発光がはみ出せる余白 */
.scene__shots .shot { --shot-w: 130px; }
.scene__shots .shot__img { border-radius: 14px; }
.scene__shots .shot--zoom::after { width: 20px; height: 20px; right: 5px; background-size: 12px; border-width: 1px; }  /* 小さなサムネイル用に小さく */

@media (min-width: 960px) {
  .scene {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    column-gap: 32px;
    align-items: start;
    padding-block: 28px;
  }
  .scene__label { padding-top: 2px; }
  .scene__desc { font-size: 16px; line-height: 1.9; }
  .scene__shots { margin-top: 0; justify-content: flex-end; }
  .scene__shots .shot-crop { --crop-h: 200px; }
  .scene__shots .shot { --shot-w: 120px; }
}

/* ---------- ④ 施設側の負担 / ⑤ 安全面の線引き(同じリストの見た目) ---------- */

.checks { display: grid; gap: 10px; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  line-height: 1.8;
}
.checks svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--accent); }
@media (min-width: 960px) {
  .checks--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .checks li { padding: 20px 22px; }
}

/* ⑤ 線引き:枠のあるカードに入れる(警告色は使わない) */
.boundary {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-emph);
  border-radius: var(--r-xl);
}
.boundary .checks li { background: transparent; border: 0; border-radius: 0; padding: 12px 4px; }
.boundary .checks li + li { border-top: 1px solid var(--border); }
.boundary .checks svg { color: var(--ps-accent); }
@media (min-width: 960px) {
  .boundary { padding: 16px 32px; }
  .boundary .checks li { padding: 18px 4px; }
}

/* ---------- ⑥ 支援者の声(初期は非表示。引用の枠だけ用意) ---------- */

.voices { display: grid; gap: 16px; }
.voice {
  margin: 0;
  padding: 20px 22px 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
}
.voice__mark { display: block; color: var(--accent); font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 8px; }
.voice blockquote { margin: 0; }

/* ---------- ⑧ 導入を検討されている方へ ---------- */

.contact { display: grid; gap: 16px; max-width: var(--measure); }
.contact p { color: var(--text-muted); }
.contact a[href^="mailto:"] { font-weight: 700; }
.contact .flyer { margin-top: 12px; }
.flyer .btn { gap: 10px; }
.flyer .btn svg { width: 20px; height: 20px; }