/* =====================================================================
   お役立ち記事「静岡・愛知・神奈川の中小企業向け補助金まとめ」の図表
   ---------------------------------------------------------------------
   本文に .mp-ls-* のクラスを持つ記事だけで読み込む（inc/column-single.php）。
   図表はすべてコアブロック（表・リスト・グループ・段落）で組んであり、
   ここでは見た目だけを足す。セレクタは必ず .col-article__body と
   .mp-ls-* の組み合わせにして、他の記事・ページに影響させない。
   色・余白は theme.json のプリセットだけを使い、新しい色は増やさない。
   枠・注意書き・リンク集・相談枠は column-level35.css と同じ見た目にそろえる。
   ===================================================================== */

/* ---------- 共通：図表の枠 ---------- */
.col-article__body .mp-ls-fig {
  margin: var(--wp--preset--spacing--space-lg) 0;
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background-color: var(--wp--preset--color--white);
}
.col-article__body .mp-ls-fig > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-ls-fig > * + * { margin-top: var(--wp--preset--spacing--space-sm); }
.col-article__body .mp-ls-fig__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
  padding-left: 12px;
  border-left: 4px solid var(--wp--preset--color--accent);
}
.col-article__body .mp-ls-fig__note {
  font-size: 14px;
  line-height: 1.85;
  color: var(--wp--preset--color--text-light);
}

/* ---------- 最終確認日 ---------- */
.col-article__body .mp-ls-checked {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 999px;
  background-color: var(--wp--preset--color--sage);
  font-size: 14px;
  line-height: 1.8;
  color: var(--wp--preset--color--accent-ink);
}

/* ---------- 一覧表（3県の比較） ----------
   PCは本文幅（760px）に収まる。スマートフォンでは文字を小さくしすぎず、
   表だけを横スクロールにして、表の上に「横にスクロールできます」を出す。 */
.col-article__body .mp-ls-scroll-hint { display: none; }
.col-article__body .mp-ls-compare { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.col-article__body .mp-ls-compare table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.7;
}
.col-article__body .mp-ls-compare th,
.col-article__body .mp-ls-compare td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 8px;
  vertical-align: top;
  text-align: left;
}
.col-article__body .mp-ls-compare thead th {
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}
/* 列幅の目安（残りの幅は「主な対象事業」に回る） */
.col-article__body .mp-ls-compare thead th:nth-child(1) { width: 4.5em; }
.col-article__body .mp-ls-compare thead th:nth-child(2) { width: 9.5em; }
.col-article__body .mp-ls-compare thead th:nth-child(4) { width: 5.5em; }
.col-article__body .mp-ls-compare thead th:nth-child(5) { width: 6.5em; }
.col-article__body .mp-ls-compare thead th:nth-child(6) { width: 9em; }
.col-article__body .mp-ls-compare thead th:nth-child(7) { width: 2.5em; }
/* 1列目（地域）：県名の帯 */
.col-article__body .mp-ls-compare tbody td:first-child {
  white-space: nowrap;
  background-color: var(--wp--preset--color--mist);
  font-weight: 700;
  color: var(--wp--preset--color--brand);
}
/* 2列目（補助金名） */
.col-article__body .mp-ls-compare tbody td:nth-child(2) { font-weight: 700; }
/* 5列目（補助上限）・6列目（申請締切）は目立たせる */
.col-article__body .mp-ls-compare tbody td:nth-child(5),
.col-article__body .mp-ls-compare tbody td:nth-child(6) { background-color: var(--wp--preset--color--sage); }
.col-article__body .mp-ls-compare tbody td:nth-child(6) strong { color: var(--wp--preset--color--accent-ink); }
.col-article__body .mp-ls-compare tbody td:last-child { white-space: nowrap; }
.col-article__body .mp-ls-compare figcaption {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
  text-align: left;
  margin-top: 10px;
}

/* ---------- 制度ごと：補助上限・申請期限の札 ---------- */
.col-article__body .mp-ls-keys {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: var(--wp--preset--spacing--space-sm) 0;
}
.col-article__body .mp-ls-keys li {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--wp--preset--color--border);
  border-top: 4px solid var(--wp--preset--color--accent);
  border-radius: 10px;
  background-color: var(--wp--preset--color--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
}
/* 札の見出し（「補助上限」「申請締切」）。値は li 本文側に書く */
.col-article__body .mp-ls-keys li strong {
  display: block;
  font-size: 13px;
  color: var(--wp--preset--color--text-light);
}

/* ---------- 制度ごと：概要表（2列） ---------- */
.col-article__body .mp-ls-spec { margin: var(--wp--preset--spacing--space-sm) 0; }
.col-article__body .mp-ls-spec table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.8;
}
.col-article__body .mp-ls-spec th,
.col-article__body .mp-ls-spec td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.col-article__body .mp-ls-spec tbody td:first-child {
  width: 8.5em;
  background-color: var(--wp--preset--color--mist);
  font-weight: 700;
  color: var(--wp--preset--color--brand);
}

/* ---------- 制度ごと：公式リンク ---------- */
.col-article__body .mp-ls-official {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: var(--wp--preset--spacing--space-sm) 0 0;
}
.col-article__body .mp-ls-official li { margin: 0; font-size: 14px; line-height: 1.6; }
.col-article__body .mp-ls-official li a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--wp--preset--color--brand);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.col-article__body .mp-ls-official li a:hover,
.col-article__body .mp-ls-official li a:focus-visible {
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
}
.col-article__body .mp-ls-official li a::after { content: " \2197"; }

/* ---------- 注意書き・リンク集・相談案内 ---------- */
.col-article__body .mp-ls-note {
  margin: var(--wp--preset--spacing--space-md) 0;
  padding: 16px 20px;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--brand);
  border-radius: 8px;
  background-color: var(--wp--preset--color--mist);
}
.col-article__body .mp-ls-note > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-ls-note > * + * { margin-top: 6px; }
.col-article__body .mp-ls-note p,
.col-article__body .mp-ls-note li { font-size: 15px; line-height: 1.85; }

.col-article__body .mp-ls-links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.col-article__body .mp-ls-links li {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--wp--preset--color--text-light);
}
.col-article__body .mp-ls-links li strong { color: var(--wp--preset--color--contrast); }
.col-article__body .mp-ls-links li a {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.col-article__body .mp-ls-consult {
  margin: var(--wp--preset--spacing--space-md) 0 0;
  padding: var(--wp--preset--spacing--space-md);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 12px;
  background-color: var(--wp--preset--color--sage);
}
.col-article__body .mp-ls-consult > * { margin-top: 0; margin-bottom: 0; }
.col-article__body .mp-ls-consult > * + * { margin-top: 10px; }
.col-article__body .mp-ls-consult__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--wp--preset--color--brand);
}
.col-article__body .mp-ls-consult a { font-weight: 700; }
.col-article__body .mp-ls-consult ul { font-size: 15px; }

/* ---------- スマートフォン ---------- */
@media (max-width: 768px) {
  .col-article__body .mp-ls-fig { padding: 16px; }
  .col-article__body .mp-ls-scroll-hint {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--wp--preset--color--text-light);
  }
  .col-article__body .mp-ls-scroll-hint::before { content: "\2194\00a0"; }
  .col-article__body .mp-ls-compare table { min-width: 640px; font-size: 13px; }
  .col-article__body .mp-ls-keys { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .col-article__body .mp-ls-spec table { font-size: 14px; }
  .col-article__body .mp-ls-spec tbody td:first-child { width: 6.5em; }
  .col-article__body .mp-ls-spec th,
  .col-article__body .mp-ls-spec td { padding: 8px 10px; }
}