/* ============================================================
   machi.css — 市町村別の支援まとめ（/machi）専用
   2026-09-02 新設。style.css のトークンだけを使う。
   外部フォント・外部リソースの参照はしない。
   ============================================================ */

/* ---------- 市町村を選ぶ枠 ---------- */
.machi-picker {
  background: var(--green-50);
  border: 2px solid var(--green-700);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0 18px;
}
.machi-picker__label {
  display: block;
  margin: 0 0 8px;
  color: var(--green-900);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
}
.machi-picker__select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  padding: 9px 13px;
  border: 2px solid var(--green-700);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.machi-picker__select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.machi-picker__help {
  margin: 9px 0 0;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---------- 未選択のときの市町村ボタン一覧（2列） ---------- */
.machi-city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 8px;
}
.machi-city-grid .btn {
  padding-left: 8px;
  padding-right: 8px;
  overflow-wrap: anywhere;
}

/* ---------- 節どうしの間隔（節が多いので区切りを強めにとる） ---------- */
.machi section[id] {
  margin-top: 26px;
}
.machi section[id] > h2 {
  padding-top: 14px;
  border-top: 2px solid var(--line);
}
.machi #sec-search {
  margin-bottom: 8px;
}

/* ---------- サイト内検索 ---------- */
.machi-search__label {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.5;
}
.machi-search__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  padding: 9px 13px;
  border: 2px solid var(--green-700);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.machi-search__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.machi-search__results {
  margin-top: 12px;
}
.machi-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.machi-search__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.machi-search__item:last-child {
  border-bottom: none;
}
.machi-search__item > a {
  color: var(--green-700);
  font-weight: 700;
  line-height: 1.55;
}
.machi-search__item > a:visited {
  color: var(--green-700);
}
.machi-search__kind {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-800);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.machi-search__desc {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---------- 狭い画面（375px）で横に溢れないための保険 ---------- */
@media (max-width: 400px) {
  .machi-city-grid {
    gap: 8px;
  }
  .machi-search__kind {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* 検索は市町村の選択と独立。短い例からも探せる。 */
.machi #sec-search { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 18px 0 24px; }
.machi #sec-search > summary { color: var(--green-800); font-weight: 800; font-size: 1.1rem; cursor: pointer; min-height: 44px; padding: 6px 0; line-height: 1.65; }
.machi #sec-search[open] > summary { margin-bottom: 14px; }
.machi-search__examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.machi-search__examples button { min-height: 44px; padding: 7px 12px; background: var(--green-50); border: 1px solid #9ebbb0; border-radius: 999px; color: var(--green-800); font-size: .88rem; font-weight: 700; cursor: pointer; }
.machi-search__examples button:hover { background: #dbeae2; }
.machi-search__item > a { display: inline-block; padding: 8px 0; }
.machi-search__empty { background: var(--green-50); border-radius: 10px; padding: 14px; }
.machi-search__results > .btn { margin-top: 12px; }