/* =========================================================================
   map.css — 施設マップの全スタイル
   -------------------------------------------------------------------------
   ・参照するのは Layer 2 の --fm-* トークンのみ。Layer 1(--c-*)を直接見ない
   ・Leaflet 標準CSSの上書きもこのファイルに集約する。!important は使わない
   ・モバイルファースト。min-width のメディアクエリのみ
   ・iframe 埋め込み前提。高さは height:100% に依存させない
   ========================================================================= */

/* =========================================================================
   1. 基盤
   ========================================================================= */
/* Leaflet は吹き出しの位置を margin で組み立てる
   （.leaflet-popup の margin-bottom:20px / tip-container の -20px /
     tip の margin:-10px auto 0 による水平センタリング）。
   一括リセットを当てると吹き出しが右に9.5pxずれ、tip がピンに被る。
   ポップアップの中身は p 要素で組むためリセットを効かせたい。除外はこの3クラス自身に限る。

   :not() を :where() で包むのは詳細度のため。**この1行が無いと、この先の
   単一クラスの margin 指定が全部死ぬ。**
   :not() は引数のうち最も高い詳細度を持つので、素で書くと
   `.fm`(0,1,0) + `:not(.leaflet-popup…)`(0,1,0) = (0,2,0) になり、
   `.fm-main__content { margin-inline: auto }` のような (0,1,0) の指定に
   書く順番と無関係に勝ってしまう（中央寄せが効かず左に寄る／
   基準日が下端に落ちない／件数の「/ 全191件」がくっつく、等が全部これだった）。
   :where() は詳細度0なので、この行は (0,1,0) になり、
   ファイルの先頭にあるリセットとして正しく後続に譲る。 */
.fm *:where(:not(.leaflet-popup, .leaflet-popup-tip-container, .leaflet-popup-tip)) { margin: 0; }
.fm * { box-sizing: border-box; }

.fm {
  /* .fm は body 自身。上の `.fm *` は子孫にしか当たらないので、
     これが無いとブラウザ既定の margin:8px が残る。
     全ブロックが width:100% + padding-inline で組まれているため 8px の縁は不要で、
     iframe 埋め込みでは掲載先の余白と二重になる（高さも 16px 増える）。 */
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--fm-text);
  background: var(--fm-page-bg);
  font-feature-settings: "palt" 0;
  -webkit-text-size-adjust: 100%;
}

.fm a { color: var(--fm-action); }

.fm :focus-visible {
  outline: 2px solid var(--fm-focus-ring);
  outline-offset: 2px;
}

/* フルワイドブロック = 画面幅いっぱい + padding。内側の __content が幅を制御する */
.fm-head,
.fm-main,
.fm-results {
  width: 100%;
  padding-inline: var(--space-inline);
}

.fm-head__content,
.fm-main__content,
.fm-results__content {
  max-width: 1280px;
  margin-inline: auto;
}

/* =========================================================================
   2. ヘッダ
   -------------------------------------------------------------------------
   掲載先サイトのページが見出しとリード文を持つため、この中では出さない。
   単体で使う場合は下の1行を外す。
   h1 はここにあるので、非表示にすると見出しは h2（検索結果）から始まる。
   埋め込み先の h1 の下にぶら下がる形になり、階層としてはこちらが正しい。
   ========================================================================= */
.fm-head { display: none; }

.fm-head { padding-block: var(--space-block) var(--fm-gap-lg); }

.fm-head__eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--fm-count-figure);
}

.fm-head__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  margin-top: 8px;
}

.fm-head__lede {
  font-size: var(--text-md);
  color: var(--fm-text-sub);
  margin-top: var(--fm-gap);
  max-width: 40em;
}

/* =========================================================================
   3. メイン(絞り込み + 地図)
   ========================================================================= */
/* 上の余白は「単体か埋め込みか」で変える。CSSからは iframe の中にいるか判別できないので、
   embed.js が埋め込み時だけ html に .fm-embedded を付ける。

   ・単体 … .fm-head を隠しているため、この上には何も無い。ページの天として
            --space-block を取る。.fm-results の下端と同じ値で上下が揃う
   ・埋め込み … 上の余白は掲載先が持っている（gbHD では .article-body の padding 80px）。
                ここでも取ると二重になるので 0

   既定（クラス無し）を単体側にしてあるのは、embed.js が読めなかったときに
   余白が余るほうが、詰まって見えるより安全なため。 */
.fm-main { padding-block: var(--space-block) var(--fm-gap-lg); }
.fm-embedded .fm-main { padding-block: 0 var(--fm-gap-lg); }

.fm-main__content {
  display: grid;
  gap: var(--fm-gap-lg);
}

/* =========================================================================
   4. 絞り込みパネル
   モバイル = 開閉。980px以上 = 常時展開のサイドバー(JSが open を固定する)
   ========================================================================= */
.fm-panel {
  background: var(--fm-panel-bg);
  border-radius: var(--radius-surface);
  padding: var(--fm-gap);
}

.fm-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fm-gap);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 700;
  list-style: none;
  padding-block: 8px;
}
.fm-panel__summary::-webkit-details-marker { display: none; }

/* 開閉の記号。絵文字を使わず、CSSの図形で作る */
.fm-mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.fm-mark::before,
.fm-mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.fm-mark::after { transform: rotate(90deg); }

/* 開いている間は縦棒を寝かせて「−」にする。
   panel は details なので [open]、それ以外は aria-expanded で状態を持つ。
   panel 側は > で直下の summary に限定する（配下の軸のマークまで巻き込むため） */
.fm-panel[open] > .fm-panel__summary .fm-mark::after,
.fm [aria-expanded="true"] .fm-mark::after { transform: rotate(0deg); }

.fm-panel__body {
  display: grid;
  gap: var(--fm-gap);
  padding-top: var(--fm-gap);
}

.fm-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-gap);
  align-items: center;
}

/* 初期状態は「全部オフ＝全件表示」。オフを『何も出ない』と読む人がいるので、
   その場で言い切っておく */
.fm-panel__lede {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--fm-text-sub);
}

.fm-panel__note {
  font-size: var(--text-sm);
  color: var(--fm-empty-note);
}

/* 掲載情報の基準日。施設情報は開所・閉所・定員で変わるので、
   何件という数字がいつ時点のものかを添える */
.fm-panel__as-of {
  padding-top: var(--fm-gap-lg);
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
}

/* =========================================================================
   5. フィールド
   ========================================================================= */
/* 章区切りは面と余白で作り、罫線は最小限。囲みは使わない。
   罫線は下辺に引く。**上辺には引けない** — legend は fieldset の上辺に乗る
   HTML仕様のため、乗った幅だけ罫線が途切れて右側だけが残る。
   軸を閉じている状態が基本なので、見出しのボタン(min-height 44px)が
   線と線の天地中央に来るよう合わせる。
   線の上は この padding 16px、線の下は .fm-panel__body の gap 16px。 */
.fm-field {
  border: 0;
  border-bottom: 1px solid var(--fm-panel-rule);
  padding: 0 0 var(--fm-gap);
}
.fm-field[hidden] { display: none; }

/* 最後のフィールドの下は操作ボタンが続くので引かない。
   :last-child ではなく :last-of-type — 後続の .fm-panel__actions は div なので
   型が違い、fieldset だけを数える */
.fm-field:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

/* legend は summary に置き換えない。fieldset のグループラベルという関係が
   失われるため、中にボタンを入れて aria-expanded で開閉を伝える。
   legend 自体は幅が内容に依存するので width を明示する */
.fm-field__legend {
  width: 100%;
  padding: 0;
}

/* 操作要素は a[role=button] に揃える（既存の .fm-btn / #fm-more と同じ流儀。
   iframe 埋め込み・テーマ移植を前提とした配布物のため）。
   キーボードの Enter / Space は filter.js の onActivate() が拾う */
.fm-field__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;   /* 見出しがそのままタップ領域になる */
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--fm-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fm-field__title { flex: none; }

/* 閉じている間に「この軸で絞り込み中かどうか」を残す。
   これが無いと、絞り込んだまま閉じたときに件数が減った理由を追えなくなる */
.fm-field__summary {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fm-action);
}
.fm-field__summary:empty { display: none; }

/* 見出しと中身の間隔。閉じている間は body ごと消えるので余白も残らない */
.fm-field__body { padding-top: 8px; }
.fm-field__body[hidden] { display: none; }

.fm-check-list { display: grid; }

/* --- サービス見出し + 配下のブランド ---------------------------------
   8ブランドを平坦に並べると1件と91件が同じ重みで見える。
   見出しと字下げで階層を作る。囲みも左罫線も使わない
   （border-left のアクセント帯は視覚的な松葉杖なので使わない）。 */
.fm-groups { display: grid; gap: var(--fm-gap); }

.fm-group + .fm-group { padding-top: 8px; }

.fm-check--service .fm-check__label {
  font-weight: 700;
  font-size: var(--text-sm);
}
.fm-check--service .fm-check__count { font-weight: 700; }

/* 字下げは左パディングだけで作る。チェックボックスの列が揃う */
.fm-check-list--nested { padding-left: 30px; }

/* --- 選べるが該当がない年齢区分 ---------------------------------------
   サービスを選ぶと、そのサービスに存在しない年齢区分を沈める。
   **非表示にはしない。**押せば「該当なし」が返る（軸としては常に存在する） */
.fm-check.is-muted .fm-check__label { color: var(--fm-text-sub); }
.fm-check.is-muted .fm-check__count { opacity: 0.5; }

/* --- 申込不要の告知 ---------------------------------------------------
   子育て支援拠点は申込が要らない。保育園と同じ列に並ぶので、
   利用者の行動が違うことをその場で伝える */
.fm-note-open {
  display: inline-block;
  /* 置かれるのはポップアップと一覧カードで、どちらも親が flex。
     既定の stretch だと帯が幅いっぱいに伸びるので内容幅に留める。
     上下の間隔は親の gap が持つため margin は持たせない */
  align-self: flex-start;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--fm-action);
  background: var(--fm-action-pale);
  padding: 2px 8px;
  border-radius: var(--radius-control);
}

/* 件数は右端の独立した列に置く。テキスト内に入れると
   ラベル・補足に続く3行目になり、パネルが無駄に縦に伸びる */
.fm-check {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding-block: 8px;
  cursor: pointer;
}

.fm-check__input {
  width: 18px;
  height: 18px;
  accent-color: var(--fm-action);
  cursor: pointer;
}

/* ブランドのスウォッチ。ロゴが読めない場合の代替 */
.fm-check__swatch {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-control);
  background: var(--fm-swatch, transparent);
}

/* 横長ワードマーク。高さを固定し、幅は画像の比率に任せる
   （viewBox がブランドごとに違うため幅を決め打ちしない） */
.fm-check__logo {
  display: block;
  height: 16px;
  width: auto;
  max-width: 100%;
}

.fm-check__text { min-width: 0; }

.fm-check__label {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.fm-check__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  line-height: 1.5;
}

.fm-check__count {
  justify-self: end;
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  font-variant-numeric: tabular-nums;
}

/* --- セレクト --- */
.fm-select-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  margin-bottom: 4px;
}
.fm-select-label + .fm-select { margin-bottom: var(--fm-gap); }
/* フィールド末尾のセレクトは次の label を持たない。チェックリスト末尾
   （.fm-check の padding-block 8px）と罫線までの距離を揃えるため 8px に落とす */
.fm-field > .fm-select:last-child { margin-bottom: 8px; }

.fm-select {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fm-text);
  background: var(--fm-page-bg);
  border: 1px solid var(--fm-panel-rule);
  border-radius: var(--radius-control);
  padding: 10px 12px;
}
.fm-select:disabled { color: var(--fm-text-sub); }

/* --- キーワード --- */
.fm-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  background: var(--fm-page-bg);
  border: 1px solid var(--fm-panel-rule);
  border-radius: var(--radius-control);
  padding-inline: 12px;
}
.fm-search__icon { color: var(--fm-text-sub); }
.fm-search__input {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fm-text);
  background: transparent;
  border: 0;
  padding-block: 10px;
  min-width: 0;
}
.fm-search__input:focus { outline: none; }
.fm-search:focus-within {
  outline: 2px solid var(--fm-focus-ring);
  outline-offset: 1px;
}

/* =========================================================================
   6. ボタン(button タグは使わない。a[role=button])
   ========================================================================= */
.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.fm-btn--outline {
  color: var(--fm-action);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  padding: 11px 20px;
  transition: background 0.2s ease, color 0.2s ease;
}
.fm-btn--outline:hover {
  background: var(--fm-action);
  color: var(--fm-action-on);
}

.fm-btn--text {
  color: var(--fm-text-sub);
  font-weight: 400;
  transition: color 0.2s ease;
}
.fm-btn--text:hover { color: var(--fm-action); }

/* =========================================================================
   7. 地図
   ========================================================================= */
.fm-map { position: relative; }

.fm-map__canvas {
  /* iframe埋め込み時に潰れないよう、height:100% に依存しない */
  height: clamp(360px, 70vh, 640px);
  background: var(--fm-map-bg);
  border-radius: var(--radius-surface);
  z-index: 0;
}

/* モバイルで指のスクロールを地図が奪わないための一枚。
   タップすると地図が有効になる(JSが hidden を外す) */
.fm-map__gate {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-surface);
  z-index: 500;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fm-text);
  background: var(--fm-page-bg);
  opacity: 0.72;
  cursor: pointer;
}
.fm-map__gate[hidden] { display: none; }

.fm-map__note {
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  margin-top: 8px;
}

/* --- 淡色地図を後退させる。ピンを強く見せるための一手 --- */
.fm-map__canvas .leaflet-tile-pane { filter: var(--fm-tile-filter); }

/* --- Leaflet コントロールの上書き(!important なし) --- */
.fm-map__canvas .leaflet-container {
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--fm-map-bg);
}

/* 地図の角からの距離。Leaflet 既定の 10px は .fm * の margin リセットで
   潰れてボタンが角に張り付くため、ここで明示する */
.fm-map__canvas .leaflet-top .leaflet-control { margin-top: 8px; }
.fm-map__canvas .leaflet-left .leaflet-control { margin-left: 8px; }

.fm-map__canvas .leaflet-bar {
  border: 1px solid var(--fm-panel-rule);
  border-radius: var(--radius-control);
  box-shadow: none;
}
.fm-map__canvas .leaflet-bar a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: var(--fm-text);
  background: var(--fm-page-bg);
  border-bottom-color: var(--fm-panel-rule);
}
.fm-map__canvas .leaflet-bar a:hover {
  background: var(--fm-action-pale);
  color: var(--fm-action);
}

.fm-map__canvas .leaflet-control-attribution {
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  background: var(--fm-page-bg);
  padding: 2px 8px;
}
.fm-map__canvas .leaflet-control-attribution a { color: var(--fm-action); }

/* =========================================================================
   8. ピン / 集約ラベル / クラスタ / ポップアップ
   ========================================================================= */

/* --- 施設ピン ---
   形＝category（保育園=正方形 / 通所支援=円 / その他=ひし形）
   色＝ブランド。尖りは持たず、図形の中心が座標に一致する。 */
.fm-pin-box {
  display: grid;
  place-items: center;
  width: var(--fm-pin-size);
  height: var(--fm-pin-size);
}

.fm-pin {
  display: block;
  box-sizing: border-box;
  width: var(--fm-pin-size);
  height: var(--fm-pin-size);
  background: var(--fm-pin-color, var(--fm-action));
  border: 2px solid var(--fm-pin-stroke);
  filter: var(--fm-pin-shadow);
}

.fm-pin--square { border-radius: 4px; }
.fm-pin--circle { border-radius: 50%; } /* reason: 通所支援を示す円 — 形が識別の1軸 */

/* ひし形は正方形を45度回すと対角が1.41倍になり、他の形より大きく見える。
   辺を0.64倍に縮めて視覚的な重さを揃える（28 × 0.64 ≒ 18px、対角25.5px） */
.fm-pin--diamond {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  transform: rotate(45deg);
}

.leaflet-marker-icon:focus-visible .fm-pin {
  outline: 2px solid var(--fm-focus-ring);
  outline-offset: 2px;
}

/* ひし形は45度回転で対角を稼ぐため、実寸が 11px しかない（対角は 15.6px）。
   回転は列幅に影響しないので、grid の auto 列だと この行だけ 5px 狭くなり、
   ロゴの左端が揃わない。ピンの列を実寸で固定し、図形は列の中で中央に置く。
   サービス種別の行はピンを持たない（空の span で列だけ確保している）ので対象外 */
.fm-check--brand { grid-template-columns: auto var(--fm-pin-legend) 1fr auto; }
.fm-legend-pin { justify-self: center; }

/* --- サイドバーの凡例ピン（16px） --- */
.fm-legend-pin {
  display: block;
  box-sizing: border-box;
  width: var(--fm-pin-legend);
  height: var(--fm-pin-legend);
  background: var(--fm-swatch, var(--fm-action));
  border: 1px solid var(--fm-pin-stroke);
}
.fm-legend-pin--square { border-radius: 3px; }
.fm-legend-pin--circle { border-radius: 50%; } /* reason: 地図ピンと同じ形で対応づける */
.fm-legend-pin--diamond {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
}

/* --- 地方ブロック / 都道府県のラベル ---
   markercluster は画面上のピクセル距離でまとめるため県境をまたぐ。
   ズーム9以下はこの自前レイヤーが担当する。 */
/* .fm-label / .fm-cluster 自体には position を指定しない。
   Leaflet が .leaflet-marker-icon に position:absolute を当てて座標配置しており、
   map.css の方が後読みなので relative を書くと配置が壊れる。
   absolute は位置指定済みなので、子要素の absolute はこの要素を基準にできる。 */
.fm-label__body {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--fm-label-bg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease;
}
.fm-label:hover .fm-label__body { background: var(--fm-action-pale); }

/* 地図の左右端に来たラベルが切れないよう、内側へ寄せる。
   縮退(点)にすると件数が読めなくなるので、まず寄せて助ける */
.fm-label.is-edge-left .fm-label__body { transform: translate(0, -50%); }
.fm-label.is-edge-right .fm-label__body { transform: translate(-100%, -50%); }

.fm-label__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fm-label-text);
}
.fm-label__count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fm-label-figure);
  font-variant-numeric: tabular-nums;
}

/* ラベルが重なる場合の縮退表示。重なりは許容しない */
.fm-label__dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%; /* reason: 点は円でしか成立しない — 縮退時の最小表現 */
  background: var(--fm-label-figure);
  border: 2px solid var(--fm-label-bg);
  cursor: pointer;
}

.fm-label:not(.is-collapsed) .fm-label__dot { display: none; }
.fm-label.is-collapsed .fm-label__body { display: none; }

/* 縮退の中間段。県名を落として件数だけにすると幅が 1/3 前後に縮み、
   置き直せることが多い。点まで落とすと「そこに施設がある」ことしか残らないため、
   件数を残せる余地があるうちは残す */
.fm-label.is-compact .fm-label__name { display: none; }
/* 件数だけになった分、余白も詰める。矩形が小さいほど置き直せる余地が増える
   （関東では東京都がこの 4px で点に落ちるか件数を残せるかの境目にいる） */
.fm-label.is-compact .fm-label__body { padding: 4px 8px; }

/* --- クラスタ(ズーム10〜) --- */
.fm-cluster__body {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 8px;
  border-radius: 50%; /* reason: クラスタは方向を持たない集合 — 円が唯一の中立形 */
  background: var(--fm-cluster-bg);
  color: var(--fm-cluster-text);
  border: 2px solid var(--fm-pin-stroke);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fm-cluster--lg .fm-cluster__body { min-width: 44px; height: 44px; font-size: var(--text-sm); }

/* --- ポップアップ --- */
.fm-map__canvas .leaflet-popup-content-wrapper {
  background: var(--fm-page-bg);
  color: var(--fm-text);
  border-radius: var(--radius-control);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.fm-map__canvas .leaflet-popup-tip {
  background: var(--fm-page-bg);
  box-shadow: none;
}
.fm-map__canvas .leaflet-popup-content {
  margin: var(--fm-gap);
  line-height: 1.8;
  width: 240px;
}
.fm-map__canvas .leaflet-popup-close-button { color: var(--fm-text-sub); }

/* 吹き出しの中身は .fm-pop 直下の p で組む。段の間隔は .fm-pop の gap が持つので、
   p 自身の margin は 0 でなければならない。

   Leaflet の `.leaflet-popup-content p { margin: 1.3em 0 }` は (0,1,1) で、
   冒頭のリセット `.fm *:where(:not(…))` (0,1,0) に勝つ。
   しかも flex アイテムの margin は相殺されないため、
   段の間隔が gap 8px + 上下 1.3em ずつ = 約50px に膨らむ。
   ここで (0,2,1) で明示的に打ち消す。除外3クラスの話とは別件なので、
   リセット側の :not に足して解決しないこと（あちらは吹き出しの「位置」の話）。 */
.fm-map__canvas .leaflet-popup-content p { margin: 0; }

/* 中身の間隔は各要素の margin-top ではなく gap に一本化する。
   line-height 1.8 の行間に対して塊の切れ目が読み取れるだけの間隔を全段に均等に置く */
.fm-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fm-pop__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
}
.fm-pop__logo {
  display: block;
  height: 16px;
  width: auto;
  max-width: 100%;
}
.fm-pop__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-control);
  background: var(--fm-swatch, transparent);
}
.fm-pop__name {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.5;
}
.fm-pop__meta {
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
  line-height: 1.5;   /* 住所・受入年齢・駅を br で重ねる。塊の間隔は .fm-pop の gap が持つ */
}
.fm-pop__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fm-pop__links {
  display: grid;
  gap: 8px;
}
.fm-pop__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fm-action);
  text-decoration: none;
}
.fm-pop__link:hover { text-decoration: underline; }

/* --- リンクのアイコン ---
   配布 SVG は fill が単色で固定されているため、img で置くと
   リンク色（--fm-action / --fm-text-sub）に追従せず黒のまま浮く。
   mask で形だけを borrow し、色は currentColor から取る。 */
.fm-icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fm-icon-src) center / contain no-repeat;
  mask: var(--fm-icon-src) center / contain no-repeat;
}
.fm-icon--map       { --fm-icon-src: url("../images/icon-map.svg"); }
.fm-icon--googlemap { --fm-icon-src: url("../images/icon-googlemap.svg"); }
.fm-icon--detail    { --fm-icon-src: url("../images/icon-detail.svg"); }

/* =========================================================================
   9. 件数 / 一覧
   ========================================================================= */
.fm-results { padding-block: var(--fm-gap-lg) var(--space-block); }

/* 見出しレベルを h1 → h2 → h3(カード名)で繋ぐ。
   カードの h3 が h1 の直下にぶら下がるのを避けるための一段 */
.fm-results__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fm-text-sub);
  margin-bottom: 8px;
}

/* 下線は引かない。一覧が複数列に折り返すと、1行目のカードの上線と
   二重に見えるため、区切りは .fm-card 側の上線1本に集約する。
   padding は上線までの距離をカード側の padding-block と揃えるための値 */
.fm-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: var(--fm-gap-lg);
}
.fm-count__figure {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--fm-count-figure);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.fm-count__unit { font-size: var(--text-sm); font-weight: 700; }
.fm-count__total {
  font-size: var(--text-sm);
  color: var(--fm-text-sub);
  margin-left: 4px;
}

.fm-empty {
  font-size: var(--text-sm);
  color: var(--fm-empty-note);
  padding-block: var(--fm-gap-lg);
}
.fm-empty[hidden] { display: none; }

/* 一覧は囲まない。区切りは上罫線1本だけ(Separation Hierarchy) */
.fm-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0 var(--space-inline);
}

/* 中身の間隔は各要素の margin-top ではなく gap に一本化する（.fm-pop と同じ扱い） */
.fm-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: var(--fm-gap-lg);
  border-top: 1px solid var(--fm-panel-rule);
}

.fm-card__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
}
.fm-card__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--radius-control);
  background: var(--fm-swatch, transparent);
}

.fm-card__name {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.5;
}

.fm-card__meta {
  font-size: var(--text-xs);
  color: var(--fm-text-sub);
}

.fm-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fm-tag {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1.6;
  background: var(--fm-action-pale);
  color: var(--fm-action);
  padding: 2px 8px;
  border-radius: var(--radius-control);
}

.fm-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-gap);
}
.fm-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fm-action);
  text-decoration: none;
}
.fm-card__link:hover { text-decoration: underline; }
.fm-card__link--sub { font-weight: 400; color: var(--fm-text-sub); }

.fm-card__distance {
  font-size: var(--text-xs);
  color: var(--fm-count-figure);
  font-variant-numeric: tabular-nums;
}

/* 一覧は初期状態で折りたたむ。地図だけで足りる利用者のためにページを短く保つ。
   **DOM からは外さない。** ピンは keyboard:false でタブが当たらないため、
   この一覧が施設に到達する唯一の経路になる（CLAUDE.md 落とし穴8）。
   aria-expanded で「折りたたまれた一覧がある」ことを支援技術に伝え、1操作で開ける */
.fm-results__toggle { margin-top: var(--fm-gap); }
.fm-results__toggle[hidden] { display: none; }

.fm-results__body { padding-top: var(--fm-gap-lg); }
.fm-results__body[hidden] { display: none; }

.fm-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-inline);
}
.fm-more[hidden] { display: none; }


/* =========================================================================
   11. 拡張(min-width のみ)
   ========================================================================= */

/* 一覧を2列に */
@media (min-width: 640px) {
  .fm-cards { grid-template-columns: 1fr 1fr; }
}

/* 絞り込みをサイドバーに。地図と 320px : 残り の非対称2カラム */
@media (min-width: 980px) {
  /* align-items は既定の stretch のまま。パネルを行の高さ（＝地図の高さ）まで
     伸ばし、軸を閉じている間も左右の面が揃うようにする。
     伸ばすのは面であって中身ではないので、内容は上に詰まったまま。 */
  .fm-main__content {
    grid-template-columns: var(--fm-sidebar-w) 1fr;
  }

  /* パネルは行の高さ（＝地図の高さ）まで伸びる。基準日を下端に落として、
     伸びた分の余白を情報で埋める */
  .fm-panel {
    display: flex;
    flex-direction: column;
    padding: var(--fm-gap-lg);
  }
  .fm-panel__as-of { margin-top: auto; }
  .fm-panel__summary { display: none; }
  .fm-panel__body { padding-top: 0; }

  /* 絞り込みパネルは地図より背が高い。地図を追従させないと
     パネル下部を操作している間、右側が空白になる */
  .fm-map {
    /* sticky は伸びきった要素では動く余地がないので、地図だけ start に戻す */
    align-self: start;
    position: sticky;
    top: var(--fm-gap-lg);
  }

  /* sticky の閾値は「上の余白」と揃える。ズレると地図が落ちる。

     埋め込み時は .fm-main の上余白が 0 で、中身が scrollport の上端(y=0)に
     接している。ここで閾値が 24px のままだと「本来の位置より 24px 下に置け」
     という指示になり、**絞り込みの軸を開いてパネルが伸び、コンテナに余白が
     できた瞬間に地図が 24px 落ちる**（開く前は動く余地が無いので出ない）。
     単体では .fm-main が --space-block の上余白を持ち、中身が閾値より下に
     あるため、この現象は起きない。 */
  .fm-embedded .fm-map { top: 0; }
  .fm-map__canvas { height: clamp(480px, 78vh, 720px); }

  .fm-head__title { font-size: var(--text-xl); }
}

/* 一覧を3列に */
@media (min-width: 1100px) {
  .fm-cards { grid-template-columns: 1fr 1fr 1fr; }
}

/* =========================================================================
   12. 動きの抑制
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .fm * {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}