/* =============================================================
   エリアページ：サイドバーの絞り込み（2026-09-06 本番反映）

   ・見た目は「外構費用かんたん診断（案B）」の緑基調に合わせる
   ・⛔ 左線（border-left）は使わない。状態は背景色で表す
   ・角丸は 5px（テーマの --radius と同じ）
   ============================================================= */

/* hidden 属性を必ず効かせる。
   このファイルの中で display:flex / grid を指定している要素（.hf-fopt / .hf-active など）は、
   この1行が無いと hidden を付けても消えない（2026-09-06 プレビューで実際に消えなかった）。
   ⛔ 対象は hf- が付いた要素だけに限定する（入れ物の中に別の機能の要素が入っても巻き込まないため）。 */
.hf-layout [class^="hf-"][hidden],
.hf-layout [class*=" hf-"][hidden] { display: none !important; }

.hf-layout {
  --hf-green: #2f7d4f;
  --hf-green-dark: #24603c;
  --hf-green-pale: #f4faf5;
  --hf-green-soft: #eaf3ec;
  --hf-line: #dfeadf;
}

/* ⛔ レイアウトをJSが付けるクラスに依存させない（2026-09-06・ちらつきの修正）。
   以前は .hf-ready（JSが付ける）が付くまで1カラム＋サイドバー非表示だったため、
   ページを開くと「サイドバーの無い状態」が一瞬出てから横に組み替わっていた。
   実測（PC1280px）＝カードが x=68・幅1128 → x=354・幅842 に動き、
   ページの高さが 29,431px → 40,833px に変わっていた（286pxのズレ）。
   いまはこのファイルだけで配置が決まる＝最初の1フレームから正しい位置に出る。 */
.hf-filter { display: block; }

/* ---- PC：左に絞り込み・右に一覧 ---- */
/* ⛔ 2列にするのは、サイドバーが実際に出ているページだけ（PHPが hf-has-filter を付ける）。
   絞り込みを出さないページ（市区町村ページ）まで2列にすると、
   中身が左の260pxの列に入って一覧が細くなる。 */
@media (min-width: 861px) {
  .hf-layout.hf-has-filter {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .hf-layout .hf-filter { position: sticky; top: 16px; }
  /* 画面からはみ出さない高さにして、あふれた分はサイドバーの中でスクロールさせる。
     ⛔ ここを外すと、選択肢を全部開いたときに下の「条件をクリア」に手が届かなくなる。 */
  .hf-layout .hf-filter-box { max-height: calc(100vh - 32px); }
  .hf-filter-toggle { display: none; }
  /* PC幅では、is-open が付いていてもいなくても中身を必ず出す。
     開閉の判断をJSの幅判定に持たせないための1行（操作できないサイドバーを作らない）。 */
  .hf-filter-body { display: block; }
}

.hf-content { min-width: 0; }

/* ---- 絞り込みの箱 ---- */
.hf-filter-box {
  background: #ffffff;
  border: 1px solid var(--hf-line);
  border-radius: 5px;
  overflow: hidden;
  /* 頭（見出し）・中身（選択肢）・足（件数とクリア）の3段。
     中身だけが伸び縮みして、足は必ず見える位置に残る。 */
  display: flex;
  flex-direction: column;
}
.hf-filter-head,
.hf-filter-foot { flex: 0 0 auto; }
.hf-filter-body {
  flex: 1 1 auto;
  min-height: 0;      /* これが無いと中身が縮まずスクロールしない */
  overflow-y: auto;
  overscroll-behavior: contain;  /* 端まで来てもページごと動かない */
  /* ⛔ スクロールバーの場所を、出ていないときも空けておく（2026-09-07・ガタつきの修正）。
     Windows の Chrome はスクロールバーが幅を持つ（実測15px）ので、
     初期値の scrollbar-gutter:auto のままだと、
     アコーディオンを開いてスクロールバーが出た瞬間に中身の幅が 258px → 243px に縮む。
     すると「土間コンクリート・駐車場工事」が1行→2行に変わり、
     その下の項目が 18.8px 下にずれる＝開け閉めのたびに他の項目がガタつく。
     stable にすると、スクロールバーが出ても出なくても中身の幅が変わらない。
     ⛔ 幅の判定をJSでやらない（レイアウトはこのファイルだけで確定させる）。 */
  scrollbar-gutter: stable;
}

/* 左右の余白は 10px（2026-09-07）。
   もとは 14px だったが、上で scrollbar-gutter:stable にして
   スクロールバーのぶん（15px）を常に空けるようにしたため、
   そのままだと選択肢の幅が 246px → 231px になり、
   「土間コンクリート・駐車場工事」が常に2行（最後の1文字だけ次の行）になってしまう。
   4px 詰めて 239px にすると1行に収まる（1行に必要な幅は実測 235px）。
   ⛔ 見出し・選択肢・足元の3段はそろえる（片方だけ変えると文字の左端がずれる）。 */
.hf-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  background: var(--hf-green-soft);
  border-bottom: 1px solid var(--hf-line);
}
.hf-filter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hf-green-dark);
}
.hf-filter-head-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--hf-green-dark);
}
.hf-filter-head-count b { font-size: 15px; }

.hf-filter-body { padding: 4px 10px 12px; }

.hf-fgroup { padding: 12px 0; border-bottom: 1px solid var(--hf-line); }
.hf-fgroup:last-child { border-bottom: 0; }
.hf-fgroup-t {
  font-size: 12.5px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 8px;
}

.hf-fsearch {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: #333333;
  background: #ffffff;
  border: 1px solid var(--hf-line);
  border-radius: 5px;
  padding: 9px 11px;
}
.hf-fsearch:focus {
  outline: none;
  border-color: var(--hf-green);
  background: var(--hf-green-pale);
}

/* 選択肢。状態は背景色で表す（左線は使わない） */
.hf-fopt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 1px -8px;
  border-radius: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #333333;
  cursor: pointer;
}
.hf-fopt:hover { background: var(--hf-green-pale); }
.hf-fopt.is-on { background: var(--hf-green-soft); font-weight: 700; }
.hf-fopt input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #c8d6cb;
  border-radius: 5px;
  background: #ffffff;
  position: relative;
  cursor: pointer;
}
.hf-fopt input:checked {
  background: var(--hf-green);
  border-color: var(--hf-green);
}
.hf-fopt input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hf-fopt input:focus-visible { outline: 2px solid var(--hf-green); outline-offset: 1px; }
.hf-fopt-name { min-width: 0; }
.hf-fn { margin-left: auto; font-size: 11px; color: #888888; }


/* ---- ジャンルごとのアコーディオン（開閉は <details> の標準機能） ---- */
.hf-accs { margin-top: 2px; }
.hf-acc { border-top: 1px solid var(--hf-line); }
.hf-acc:first-child { border-top: 0; }
.hf-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  margin: 0 -8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #333333;
  list-style: none;          /* 標準の三角を消す */
  user-select: none;
}
.hf-acc-head::-webkit-details-marker { display: none; }
.hf-acc-head:hover { background: var(--hf-green-pale); }
.hf-acc-head:focus-visible { outline: 2px solid var(--hf-green); outline-offset: -2px; }
.hf-acc-name { min-width: 0; }
/* 選択肢の数（ふだん）と、選択中の数（選んだとき） */
.hf-acc-num {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: #888888;
}
.hf-acc-picked {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: var(--hf-green);
  border-radius: 5px;
  padding: 1px 7px;
}
/* 選択中のときは、選択肢の数のほうを引っ込める */
.hf-acc.is-picked .hf-acc-num { display: none; }
.hf-acc.is-picked > .hf-acc-head { background: var(--hf-green-soft); }
/* 開閉の矢印 */
.hf-acc-mark {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border: solid #7a8a7d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
.hf-acc[open] > .hf-acc-head .hf-acc-mark { transform: rotate(-135deg) translate(-2px, -2px); }
.hf-acc > .hf-fgroup-opts { padding: 2px 0 10px; }
.hf-fgroup-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #888888;
  margin-top: 2px;
}

/* ---- 市区町村は「絞る」ではなく「ページ下の一覧へ送る」リンク（2026-09-07・れのぼの指示） ----

   ⛔ アコーディオンに戻さない。市区町村は40項目あり、開くとサイドバーの中身が
      1,871px（PC）／2,502px（スマホ）になる。箱はいちばん高いときでも760pxしかないので、
      開いた瞬間に縦スクロールバーが必ず出ていた。

   ⛔ 見た目はアコーディオンの見出し（.hf-acc-head）と必ず変える。
      押すとページが下へ動くので、開閉と同じ見た目だと何が起きるか分からない。
      変えているのは3つ＝①ふだんから薄い背景を敷く ②矢印を「下向きの矢印」にする
      （アコーディオンは「く」の字だけ）③右に「ページ下の一覧へ移動」と書く。
   ⛔ 左線は使わない（このサイトの決まり）。状態は背景色で表す。角は5px。
   ⛔ 高さ・余白は .hf-acc-head とそろえる（PC 40.5px／スマホ 44px）。
      指で押す44pxはスマホ用のメディアクエリ側で決める（このサイトの他の行と同じ作り）。
      ⛔ ここで min-height:44px を書かない。PCで行が1つぶん高くなり、
         5項目のグループを開いたときにサイドバーの中身が箱を超える（＝縦スクロールバーが出る）。
         実測＝44pxにすると765px、40.5pxにすると757px（箱は760px）。 */
.hf-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  /* ⛔ 左右の -8px は .hf-acc-head とそろえる（文字の左端をそろえるため）。 */
  margin: 0 -8px;
  border-radius: 5px;
  background: var(--hf-green-pale);
  color: var(--hf-green-dark);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.hf-jump:hover { background: var(--hf-green-soft); }
.hf-jump:focus-visible { outline: 2px solid var(--hf-green); outline-offset: -2px; }
/* ⛔ 2行に折り返させない。折り返すと行が63pxになり、上の高さの話が崩れる（2026-09-07に実際に起きた）。
   ⛔ そのために文字は短くしてある（「市区町村から探す」＋「下の一覧へ」）。
      文字を増やすときは、PCの実測幅223pxに収まるかを必ず測ること。 */
.hf-jump-name { white-space: nowrap; }
.hf-jump-note {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: #6b7a6e;
  white-space: nowrap;
}
/* 下向きの矢印（棒＋頭）。⛔ 文字の「↓」は使わない（フォントによっては出ない）。 */
.hf-jump-mark {
  position: relative;
  flex: none;
  width: 10px;
  height: 14px;
  margin-left: 2px;
}
.hf-jump-mark::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 2px;
  height: 9px;
  background: var(--hf-green);
}
.hf-jump-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 1px;
  width: 6px;
  height: 6px;
  border: solid var(--hf-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 飛んだ先の見出しが画面の上端に貼りつかないようにする。
   このサイトに上部固定ヘッダーは無い（実測）ので、余白の確保だけが目的。
   ⛔ この id は taxonomy-area.php の「市区町村から探す」のH2と対。消さない。 */
#area-city-list { scroll-margin-top: 20px; }

.hf-filter-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  background: var(--hf-green-pale);
  border-top: 1px solid var(--hf-line);
  font-size: 12.5px;
  color: #333333;
}
.hf-hits b { font-size: 16px; font-weight: 700; color: var(--hf-green); margin-right: 2px; }
.hf-reset {
  margin-left: auto;
  font-family: inherit;
  font-size: 11.5px;
  color: #555555;
  background: #ffffff;
  border: 1px solid var(--hf-line);
  border-radius: 5px;
  padding: 6px 11px;
  cursor: pointer;
}
.hf-reset:hover { border-color: var(--hf-green); color: var(--hf-green-dark); }

/* 絞り込みで消えたカード。HTMLからは消さない＝クロールされる状態を保つ */
.hf-layout .hf-hidden { display: none !important; }

/* 0件のときの表示 */
.hf-noresult {
  border: 1px dashed #c8d6cb;
  border-radius: 5px;
  background: var(--hf-green-pale);
  padding: 26px 20px;
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  color: #333333;
}
.hf-noresult-sub { display: block; margin-top: 6px; font-size: 12.5px; color: #777777; }
.hf-noresult-btn {
  margin-top: 12px;
  font-family: inherit;
  font-size: 13px;
  color: #ffffff;
  background: var(--hf-green);
  border: 0;
  border-radius: 5px;
  padding: 9px 18px;
  cursor: pointer;
}
.hf-noresult-btn:hover { background: var(--hf-green-dark); }

/* 絞り込み中に出す帯（何で絞っているかを一覧の上に出す） */
.hf-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--hf-green-soft);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--hf-green-dark);
}
.hf-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid var(--hf-line);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  color: #333333;
}
.hf-active-chip button {
  border: 0;
  background: transparent;
  color: #888888;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.hf-active-chip button:hover { color: var(--hf-green-dark); }

/* ---- スマホ：横に並べられないので、一覧の上に畳んで置く ----
   条件は上のPC用（min-width:861px）のちょうど裏返し。
   max-width で書くと 860〜861px のあいだが、どちらの指定にも当たらない隙間になる。 */
@media not all and (min-width: 861px) {
  .hf-layout { display: block; }

  /* ⛔ スマホ幅では絞り込みサイドバーを出さない（2026-09-07・れのぼ指示）。

     理由＝スマホでは絞り込みとして使えていなかった。
     箱の高さは画面に収まる 523px しか取れないのに、
     選択肢を全部畳んだ状態でも中身が 628px あり、開く前から縦スクロールバーが出ていた。
     一覧の上に「押しても中が見切れる箱」が居座るだけになっていたので、置くのをやめる。

     ⛔ HTMLごと出さない形にはしない（＝ここをCSSで隠す形にした理由）。
        ①PHPは画面の幅を知らないので、HTMLを出し分けるにはUA（端末の名乗り）を見るしかない。
          UAで出し分けると、ページのキャッシュが端末ごとに割れるうえ、
          Googleはスマホとして見に来る（モバイルファーストインデックス）ので、
          クローラーにだけ違うHTMLを返す形になる。
        ②隠しているのは「絞り込みの操作部品」（チェックボックス・キーワード欄・下の一覧への案内）で、
          読み物ではない。同じ内容の「市区町村から探す」の見出しと一覧は
          ページの下にそのまま出ているので、隠しテキストにはならない。
        ③業者カードは1件もHTMLから消えない（このファイルはサイドバーしか触っていない）。

     ⛔ 幅の判定をJSでやらない（このファイルのメディアクエリだけで決める）。
        JSは .hf-filter-body が消えていないので今までどおり動く（要素は残っている）。 */
  .hf-filter { display: none; margin: 0 0 18px; }
  .hf-filter-head { padding: 0; background: transparent; border-bottom: 0; }
  .hf-filter-title { display: none; }
  .hf-filter-head-count { display: none; }
  .hf-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--hf-green-dark);
    background: var(--hf-green-soft);
    border: 0;
    border-radius: 0;
    padding: 13px 10px;
    cursor: pointer;
    text-align: left;
  }
  .hf-filter-toggle .hf-toggle-count {
    margin-left: auto;
    font-weight: 400;
    font-size: 12.5px;
  }
  .hf-filter-toggle .hf-toggle-mark {
    flex: none;
    width: 12px;
    height: 12px;
    border: solid var(--hf-green-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
  }
  .hf-filter-toggle[aria-expanded="true"] .hf-toggle-mark {
    transform: rotate(-135deg) translate(-4px, -4px);
  }
  /* スマホ幅は「開いているとき（is-open）だけ中身を出す」。
     開閉はこの1行で決まるので、JS側で幅を判定する必要がない。 */
  .hf-filter:not(.is-open) .hf-filter-body { display: none; }
  /* 畳んでいる間は、下の「◯件を表示中／条件をクリア」は出さない（上のバーと同じことを言うため） */
  .hf-filter:not(.is-open) .hf-filter-foot { display: none; }
  /* ⛔ 選択肢は1列（2026-09-07・れのぼ指示で2列から変更）。

     2列（149px × 2）のときは、71項目のうち 22項目が2行になっていた（実測）。
     1列にすると幅が 149px → 306px になり、2行になる項目は 0件。
     すべて1行 44.5px にそろう。

     ⛔ 縦に長くなること自体は問題にならない。サイドバーは「中でスクロールする箱」なので
        （.hf-filter-body の max-height: 62vh）、ページ全体の高さは変わらない
        （実測：中身 2,594px → 3,969px に伸びたが、ページの高さは 92,021px → 92,035px。
         増えた14pxは下の「条件をクリア」を44pxにしたぶんで、1列化とは別）。
     ⛔ 1列にすると横方向に隣がいなくなるので、
        「隣り合う項目の当たり判定が重なる」問題（下のコメント）は構造的に起きなくなる。
        ただし下の ::before の作りは残す（左右の背景のはみ出しは今までどおり必要なため）。 */
  .hf-fgroup-opts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* ⛔ 押せる範囲（当たり判定）は、必ずグリッドの1マスの中に収める（2026-09-07）。

     .hf-fopt は `margin: 1px -8px` で左右に8pxずつはみ出す作り（背景を余白まで広げるため）。
     ところが2列表示の列と列のすき間は `gap: 0 8px` の8pxしかないので、
     隣り合う項目の押せる範囲が **8pxちょうど重なっていた**（本番スマホ390pxで34組すべて実測）。
     重なった帯＝列と列のすき間そのものなので、そこを押すと、
     あとに書かれている「右の列の項目」が必ず勝つ。
     ＝左の列の項目は、見た目の右端8pxを押しても右の項目が選ばれていた（実測で確認）。

     直し方＝はみ出すのを「背景だけ」にして、要素の箱は1マスに戻す。
     ⛔ 単に margin を 0 にすると、padding 8px のぶん文字が右に8pxずれる。
        padding も 0 にして、代わりに ::before に `inset: 0 -8px` を持たせると、
        文字の位置・文字の幅・行の高さ・背景の見え方が1pxも変わらないまま、
        押せる範囲だけが1マスに収まる（71項目×10か所を修正前後で比較して差0を実測）。
     ⛔ 幅の判定をJSでやらない（配置はこのCSSだけで決まる状態を保つ）。 */
  /* ⛔ 縦の余白 12.5px は「指で押せる大きさ（44px）」から逆算した数字（2026-09-07）。

     文字1行の高さは 13px × 1.5 ＝ 19.5px。上下に 12.5px ずつで 44.5px になる。
     8px のままだと 35.5px しかなく、指の目安の44pxに届いていなかった。
     ⛔ 12.25px（＝ちょうど44.0px）にしない。行の位置は小数（実測 top=394.2px）なので、
        44.0pxちょうどだと、端末や倍率によって実測が 43.98px 側に落ちることがある。
        0.5px 足して 44.5px にしておけば、どの環境でも44pxを下回らない。
     ⛔ 当たり判定だけを広げない。押せる範囲は要素の箱そのもの（下の ::before は
        pointer-events:none ＝押せない）なので、背景の見た目も同じ44.5pxになる。
        見た目と押せる範囲は必ず一致させる。
     ⛔ 左右の padding は 0 のまま（当たり判定の重なり対策・下のコメント）。 */
  .hf-fopt {
    font-size: 13px;
    padding: 12.5px 0;
    margin: 1px 0;
    position: relative;
    z-index: 0;         /* ::before を「この項目の中」の一番下に置くための重なり順の土台 */
  }
  /* 背景は ::before が持つので、要素そのものの背景は消す。
     ⛔ .hf-fopt:hover / .hf-fopt.is-on と同じ詳細度で、後ろに書くことで上書きしている
        （`.hf-fopt { background: none }` だけでは詳細度が足りず効かない）。 */
  .hf-fopt:hover,
  .hf-fopt.is-on { background: none; }
  .hf-fopt::before {
    content: "";
    position: absolute;
    /* 見た目のはみ出しは今までどおり左右8px。
       ⛔ inset の一括指定にしない。読めない環境では1行まるごと無視されて、
          大きさを持たない疑似要素になる＝ホバーと選択の背景が消える（Codex指摘・2026-09-07）。
          四辺を個別に書けば、そこだけ落ちることはない。 */
    top: 0;
    right: -8px;
    bottom: 0;
    left: -8px;
    border-radius: 5px;
    z-index: -1;
    /* ⛔⛔ この1行が今回の修正の本体（Codex指摘・2026-09-07）。
       疑似要素も既定では押せる（pointer-events:auto）ので、これが無いと
       背景のはみ出し8pxがそのまま当たり判定として残り、重なりが直らない。
       z-index:-1 は「描く順番」を下げるだけで、押せるかどうかとは無関係。
       ⛔ .hf-fopt の getBoundingClientRect() だけを見ても、この重なりは見つからない。
          必ず document.elementFromPoint() で「実際にどれが押されるか」を測ること。 */
    pointer-events: none;
  }
  .hf-fopt:hover::before { background: var(--hf-green-pale); }
  .hf-fopt.is-on::before { background: var(--hf-green-soft); }

  /* ⛔ グループの見出し（アコーディオンの帯）も44px以上にする（2026-09-07）。

     直す前は 40.5px で、指の目安の44pxに届いていなかった。
     中身の高さは 22.5px なので、上下に 11px ずつで 44.5px になる。
     ⛔ 11px は「44.0pxちょうど」を避けた数字。選択肢（12.5px）と同じ考え方で、
        行の位置が小数になる環境でも44pxを下回らないように 0.5px 足してある。
     ⛔ 左右の padding（8px）は変えない。ここを変えると文字の左端が
        選択肢とそろわなくなる。
     ⛔ 押せる範囲はこの帯そのもの（<summary> 要素）なので、
        背景の見た目と押せる範囲は自動的に一致する。当たり判定だけを広げていない。 */
  .hf-acc-head {
    padding-top: 11px;
    padding-bottom: 11px;
    /* ⛔ 計算だけに頼らず、下限そのものを決めておく（Codex指摘・2026-09-07）。
       文字の行の高さは環境（フォントの置き換え・拡大表示）で変わりうるので、
       「11px × 2 ＋ 中身」が必ず44pxを超えるとは限らない。
       min-height を書いておけば、どんな環境でも44pxを下回らない。 */
    min-height: 44px;
  }

  /* ⛔ 「条件をクリア」も44px以上にする（2026-09-07）。

     直す前は 31px。中身 17px ＋ 枠線 2px なので、上下に 13px ずつで 45px になる。
     ⛔ 左右の padding（11px）は変えない（ボタンの横幅 93px は今までどおり）。
     ⛔ ボタンが高くなったぶん、下の帯（.hf-filter-foot）も 14px 高くなる。
        これは「押せる大きさを確保するために必要な高さ」であって、
        中身がずれたわけではない。 */
  .hf-reset {
    padding-top: 13px;
    padding-bottom: 13px;
    /* ⛔ 見出しと同じ理由で、下限も書いておく（Codex指摘・2026-09-07）。
       このボタンは line-height を指定していないので、
       高さ45pxは環境によって変わりうる。 */
    min-height: 44px;
  }

  /* スマホは箱ごと畳んでいるので、開いたときだけ画面の6割までに収める */
  .hf-filter-box { max-height: none; }
  .hf-filter-body { max-height: 62vh; }

  /* スマホはH2が19pxまで縮むので、飛んだ先の余白もそれに合わせる（読み物3つの .ac-h3 と同じ考え方）。 */
  #area-city-list { scroll-margin-top: 14px; }

  /* ⛔ 市区町村へのリンクも、指で押せる44px以上にする（.hf-acc-head とまったく同じ数字）。
     中身は22.5pxなので、上下に11pxずつで44.5px。
     ⛔ 計算だけに頼らず min-height も書く（文字の行の高さは環境で変わりうる）。
     ⛔ 左右の padding（8px）は変えない。文字の左端がグループ見出しとずれる。 */
  .hf-jump {
    padding-top: 11px;
    padding-bottom: 11px;
    min-height: 44px;
  }
}