/* 10 導入後のサポート —— このページ専用の差分 */

/* ===== 販促ツール一式 ===== */
.photo-grid.tool-photos { margin-bottom: 32px; }
.tool-photos .photo { --photo-h: 200px; }

/* 3つの補足（入稿データ／2色展開／業態別）はマス目で見せる */
.tool-notes .tile { gap: 10px; }
.tool-notes .tile__text {
  font-size: 13.5px;
  line-height: 2;
  color: var(--text-body);
}

/* 見出し列が340pxなので、アートボード通りの26pxに揃えて折り返しを防ぐ
   （「会員エリアの情報の取り扱い」が2行になるのを避ける） */
.split--narrow .section-head__title { font-size: clamp(22px, 2vw, 26px); }

/* ===== 運用プログラムの3枠 ===== */
.program-section .program-grid { margin-top: 72px; }
.program-card {
  gap: 14px;
  padding: 32px 30px;
  min-height: 230px;
}
.program-card .card__name { font-size: 21px; }

/* ===== サポートドア（濃色面） ===== */
.scope-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.scope-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px 30px;
  border: 1px solid var(--border-ink);
}
.scope-box__label {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold-light);
}
.scope-box__text {
  font-size: 14.5px;
  line-height: 2;
  color: var(--on-ink-body);
}
/* 2つ目以降は細罫で区切る */
.scope-box__text + .scope-box__text {
  padding-top: 14px;
  border-top: 1px solid var(--border-ink);
}

/* ===================== タブレット ===================== */
@media (max-width: 1024px) {
  .photo-grid.tool-photos { margin-bottom: 24px; }
  .tool-photos .photo { --photo-h: 170px; }

  .program-section .program-grid { margin-top: 40px; }
  .program-card { min-height: 0; padding: 28px 26px; }

  .scope-box { padding: 24px 26px; }
}

/* ===================== スマホ（390px アートボード準拠） ===================== */
@media (max-width: 767px) {
  .photo-grid.tool-photos { margin-bottom: 14px; }
  .tool-photos .photo { --photo-h: 130px; }

  /* 補足は縦積み */
  .tool-notes.tile-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .tool-notes .tile { gap: 6px; }
  .tool-notes .tile__text { font-size: 12.5px; line-height: 1.95; }

  .program-section .program-grid { margin-top: 14px; }
  .program-card { min-height: 0; gap: 10px; padding: 20px; }
  .program-card .card__name { font-size: 18px; }

  .scope-list { gap: 16px; }
  .scope-box { gap: 10px; padding: 18px 20px; }
  .scope-box__label { font-size: 12px; }
  .scope-box__text { font-size: 12.5px; line-height: 1.95; }
  .scope-box__text + .scope-box__text { padding-top: 10px; }

}