/* ============================================================================
 *  介護施設 修繕の窓口（kaigo-shuzen.jp）｜assets/css/header-footer.css
 *  WordPress が組み立てるページの、ヘッダー・フッター・画面下の相談バーの「土台と見張り」
 *  改訂：2026.09.28（以前の103行から作り直し）
 * ----------------------------------------------------------------------------
 *
 *  ■ 読まれる場所
 *     includes/script.php の front()（wp_enqueue_scripts）で、theme.css の後に読み込む。
 *     すぐ後ろに、カスタマイザーの色（ksth_customizer_css：:root{--ksth-dh-bg…}）が付く。
 *     ・WordPress が組み立てるページだけ（Elementor で作ったページ・検索・404・
 *       台帳に無い投稿や固定ページ）
 *     ・TOP と完成HTMLの175ページには読み込まれない（functions.php が HTML を丸ごと返すため）
 *     ・管理画面・Elementor の編集画面には読み込まれない
 *
 *  ■ ヘッダー・フッターの部品と、このファイルの関係
 *     ヘッダーとフッターの見た目は、それぞれの部品のファイルが自分の CSS を持っている。
 *
 *       部品のファイル                        出す要素（class）          見た目の CSS
 *       ───────────────────────────────────────────────────────────
 *       header.php §H25（方式 site・fl 版）    header.fl-hd・.fl-float    ksth-header（head の中）
 *       header.php §H21（予備）                .ksth-fh                   ksth-header（head の中）
 *       template-parts/header.php（ks 版）     .ksth-sh                   部品の <style>
 *       template-parts/dynamic-header.php     .ksth-dh                   部品の <style>
 *       template-parts/footer.php（site）      footer.ksth-sf・.ksth-sf-float  部品の <style>
 *       template-parts/dynamic-footer.php     .ksth-df・.ksth-df-float   部品の <style>
 *       footer.php（予備のフッター）           .ksth-rf・.ksth-rf-float   部品の <style>
 *       Elementor Pro のテーマビルダー         .elementor-location-header／-footer  Elementor
 *
 *     このファイルは、部品の見た目を描き直さない（条件24：今のデザイン・文言は変えない）。
 *     受け持つのは、1つの部品の中では決めきれない「部品どうしの間のこと」と「困ったときの見張り」。
 *
 *       1) 方式（site・dynamic・none・Elementor Pro）ごとの、本文の上下の余白
 *       2) スマホで開いたメニューを、画面を動かしても画面の中に留める（条件64）
 *       3) 重なりの順番（ヘッダー・開いたメニュー・画面下の相談バー・ポップアップ）
 *       4) 画面下の相談バーが、フォームの入力中やキーボードの操作の邪魔をしない
 *       5) 画面が止まったまま戻らない（スクロールできない）ときの見張り（条件69）
 *       6) ロゴが伸びたり潰れたりしない（条件43）
 *       7) 開いたメニューの文字が、白い地の上で白くならない
 *       8) キーボードで操作したときの、今いる所の枠
 *       9) ヘッダー・相談バーが二重に出たときの片付け（条件64）
 *      10) 以前の class（.ks-dh・.ks-df）との互換
 *
 *     ふだんの状態では、見た目が1画素も変わらないように書いている（§HF99 の確かめ方で、
 *     差し換えの前と後の画面を画素ごとに比べる）。見た目が変わるのは次のときだけ。
 *       ・スマホでメニューを開いたまま画面を動かしたとき（ヘッダーが画面の上に留まる）
 *       ・フォームに入力している間（画面下の相談バーが下に隠れる）
 *       ・キーボードの Tab で操作したとき（今いる所に枠が付く）
 *       ・相談フォームへ飛んだ直後（フォームの枠の外に薄い橙の輪が2秒ほど出る）
 *       ・端末の設定で、コントラストを上げる・動きを減らす・JavaScript を止めているとき
 *       ・fl 版のヘッダーを 861〜959px の幅で見たとき（横にはみ出していたのを直す。§HF13）
 *       ・fl 版の相談バーを Tab で選んだとき（枠を橙にそろえる。§HF09）
 *
 *  ■ CSS が並ぶ順番と、強さの決め方
 *       ksth-shell（共通CSS）→ style.css → theme.css → このファイル → カスタマイザーの色
 *       → ksth-header（header.php）→ 部品の <style>（本文の中）
 *     部品の CSS は、このファイルより後ろに並ぶ。同じ強さなら部品が勝つため、
 *       ・部品の見た目を変えない規則は、同じか弱い強さで書く（部品の値がそのまま残る）
 *       ・見張りの規則（困ったときだけ効くもの）は、状態の class（.is-open など）や
 *         :has() を足して、部品より強くする。!important は、部品が !important を
 *         使っている所に合わせる必要があるときだけ使う
 *
 *  ■ 重なりの順番（大きいほど上。theme.css §24 と同じ考え）
 *       本文                                    0
 *       ヘッダー（ks 版・ダイナミック）          50
 *       画面下の相談バー（sf・df・rf）           60
 *       開いたメニュー（ks 版・ダイナミック）    70   ← §HF03 で開いている間だけ上げる
 *       読了バー                                 119
 *       画面下の相談バー（fl 版）                990
 *       ヘッダー（fl 版・開いたメニューを含む）  1000
 *       本文へスキップ                           1000 以上
 *       Elementor のポップアップ                 100000（theme.css §24）
 *       WordPress の管理バー                     99999（WordPress の値）
 *
 *  ■ body に付く class（theme.php の body_class）
 *       ksth-header-site ／ ksth-header-dynamic ／ ksth-header-none   ヘッダーの方式
 *       ksth-footer-site ／ ksth-footer-dynamic ／ ksth-footer-none   フッターの方式
 *       ksth-elementor-header   Elementor Pro のヘッダーを使っている
 *       ksth-fl                 ヘッダーが fl 版（TOP と同じ見た目）
 *       ks-wp ／ ks-sub         WordPress が組み立てたページ
 *       ksth-preview            Elementor の編集画面の中（プレビュー）
 *
 *  ■ 画面の幅の区切り（部品と同じ）
 *       〜520px   小さいスマホ
 *       〜600px   WordPress の管理バーが画面と一緒に流れる幅
 *       〜860px   ヘッダーがハンバーガーメニューになる幅（fl 版・ks 版）
 *       〜1024px  タブレット（画面下の相談バーは出たまま）
 *       1025px〜  パソコン
 *     ダイナミックヘッダーは、ハンバーガーになる幅を管理画面で変えられるため、
 *     幅ではなく「開いている（.is-open）」という状態で書く。
 *
 *  ■ 節の番号
 *       §HF01 変数                             §HF11 Elementor Pro のテーマビルダー
 *       §HF02 方式ごとの本文の上下の余白        §HF12 管理バー（ログイン中）
 *       §HF03 開いたメニューを画面に留める      §HF13 画面の幅ごとの調整
 *       §HF04 重なりの順番                     §HF14 強制カラー・動き・印刷
 *       §HF05 画面下の相談バー                 §HF15 二重に出たときの片付け
 *       §HF06 画面が止まったときの見張り        §HF16 以前の .ks-dh・.ks-df との互換
 *       §HF07 ロゴ                             §HF17 JavaScript が動かないとき
 *       §HF08 文字の色（白くならない）          §HF18 見やすさの設定（コントラストを上げる）
 *       §HF09 キーボードで操作したときの枠      §HF19 相談フォームへ飛んだときの目印
 *       §HF10 フッター（折り返し・読みやすさ）
 *       説明
 *       §HF90 ヘッダー・フッターの決まり方      §HF94 条件64 で調べたこと
 *       §HF90a 部品ごとの class と、この        §HF95 表示の速さで気をつけること
 *              ファイルがすること               §HF96 書き足すときの決まり
 *       §HF91 色の変え方                       §HF97 改訂の記録
 *       §HF92 メニューの項目を変えるとき        §HF98 よくある困りごとと、直す所
 *       §HF93 相談の入口の決まり               §HF99 確かめ方
 * ============================================================================ */


/* ============================================================================
 * §HF01 変数
 * ----------------------------------------------------------------------------
 *   このファイルの中では --ksth-hf- で始まる名前だけを作る（部品・theme.css と重ならない）。
 *   ダイナミックヘッダー・フッターの色（--ksth-dh-bg など）は、カスタマイザーの値が
 *   このファイルの後ろで :root に出る。ここでは、値が無いときの初めの値だけを置く。
 * ========================================================================== */

:root {
	/* 重なりの順番 */
	--ksth-hf-z-header: 50;
	--ksth-hf-z-float: 60;
	--ksth-hf-z-menu: 70;
	--ksth-hf-z-progress: 119;
	--ksth-hf-z-fl-float: 990;
	--ksth-hf-z-fl-header: 1000;

	/* 画面下の相談バーの高さ（部品の空き・body の下の余白と同じ 84px） */
	--ksth-hf-float-h: 84px;

	/* 開いたメニューの高さの上限を決めるときに引く、ヘッダーの高さの目安。
	   スマホで測った高さ：fl 版 104px・ダイナミック 97px・ks 版 96px。少し余裕を足す */
	--ksth-hf-hd-h: 120px;

	/* ログイン中の管理バーの高さ（WordPress が html に --wp-admin--admin-bar--height を付ける） */
	--ksth-hf-admin: var(--wp-admin--admin-bar--height, 0px);

	/* キーボードで操作したときの枠の色（白い地・紺の地のそれぞれで見える色。§HF09） */
	--ksth-hf-focus: #0b66c3;
	--ksth-hf-focus-on-dark: #ffb35c;

	/* ダイナミックヘッダー・フッターの色の初めの値（カスタマイザーで上書きされる） */
	--ksth-dh-bg: #ffffff;
	--ksth-dh-text: #0a2e5c;
	--ksth-df-bg: #0a2e5c;
	--ksth-df-text: #c9d6e6;
}


/* ============================================================================
 * §HF02 方式ごとの本文の上下の余白
 * ----------------------------------------------------------------------------
 *   完成HTMLの下層ページの共通CSSは、固定ヘッダー（.ks-hd）の分だけ body の上に余白を取る
 *   （padding-top: var(--ks-hh)）。WordPress が組み立てるページのヘッダーは固定ではない
 *   （画面と一緒に流れる）ため、上の余白は0にする。
 *
 *     方式                         上の余白    下の余白
 *     ────────────────────────────────────────────
 *     site（fl 版）                0           84px（header.php が body に付ける。fl 版の相談バーの分）
 *     site（ks 版）・dynamic        0           0（フッターの部品が 84px の空きを持つ）
 *     none                         0           0（相談バーを出さない）
 *     Elementor Pro のヘッダー      0           Elementor の指定のまま
 *
 *   右端の追従タブ（.ks-stab）は、完成HTMLのヘッダーと組になる部品のため、
 *   ダイナミックと「出さない」の方式では隠す。
 *
 *   読み込み中のずれ（Core Web Vitals の CLS）との関係
 *     初版では、site の方式の上の余白を0にしていなかった。そのため、ページを開いた直後は
 *     共通CSSの上の余白（固定ヘッダーの分）が付いたまま描かれ、読み込みの途中でヘッダーと
 *     本文が 60px 上へ動いていた（2026年9月28日に測定：ヘッダー 60px → 0px、本文 164px → 104px）。
 *     このファイルは head の中で早く読まれるため、ここで0にしておくと、初めから正しい位置に
 *     描かれ、この動きが無くなる。
 *       CLS（5回の中央の値）      差し換える前      差し換えた後
 *       ─────────────────────────────────────
 *       スマホ 390px・記事         0.085            0.010
 *       スマホ 390px・Elementor    0.085            0.035
 *       スマホ 390px・検索         0.085            0.010
 *       パソコン 1280px・記事      0.060            0.007
 *       パソコン 1280px・Elementor 0.053            0.013
 *       パソコン 1280px・検索      0.060            0.007
 *     （Google の目安は 0.1 以下が「良好」。残りの小さなずれは本文の部品のもの）
 * ========================================================================== */

body.ksth-header-site.ks-wp,
body.ksth-header-dynamic,
body.ksth-header-none,
body.ksth-elementor-header {
	padding-top: 0 !important;
}

body.ksth-header-dynamic .ks-stab,
body.ksth-header-none .ks-stab {
	display: none;
}

/* Elementor のキャンバスのテンプレート（ヘッダーもフッターも出さない）は、上下とも余白を持たない */
body.elementor-template-canvas.ks-wp {
	padding-top: 0;
}


/* ============================================================================
 * §HF03 開いたメニューを画面に留める（条件55・64）
 * ----------------------------------------------------------------------------
 *   スマホの幅では、ヘッダーのメニューはハンバーガー（☰）で開く。開いたメニューは
 *   ヘッダーの下に重なって出る（部品の CSS：position:absolute; top:100%）。
 *   ヘッダーは画面と一緒に流れるため、メニューを開いたまま画面を下へ動かすと、
 *   ヘッダーごとメニューが画面の上へ消えてしまう（2026年9月28日に、fl 版・ダイナミック・
 *   ks 版のどれでも起きることを確かめた。400px 動かすと、メニューの下の端が画面の上から
 *   15〜112px の所まで上がり、ほとんど見えなくなる）。
 *
 *   ここでは、メニューが開いている間だけ、ヘッダーを画面の上に留める（position:sticky）。
 *     ・閉じれば、元の「流れるヘッダー」に戻る（開いていない間は何も変わらない）
 *     ・開いたメニューの高さの上限を、画面の見える高さ（dvh）からヘッダーの分を引いた値にし、
 *       長いメニューは中でスクロールさせる。メニューの端まで動かしたとき、裏のページが
 *       一緒に動かないようにする（overscroll-behavior: contain）
 *     ・ks 版・ダイナミックは、開いている間だけ重なりを 70 に上げ、画面下の相談バー（60）の
 *       下にメニューの下の方が隠れないようにする（fl 版は、もとから 1000 と 990）
 *     ・開いている間は、画面の上の読了バーを隠す（メニューの上に線が重ならない）
 *   ログイン中は、管理バーの下に留める。600px 以下では管理バーが画面と一緒に流れるため、
 *   画面のいちばん上に留める。
 *
 *   図1　メニューを開いたまま、画面を下へ 400px 動かしたとき（スマホ 390px・高さ 700px）
 *
 *     差し換える前                         差し換えた後
 *     ┌────────────┐ ← 画面の上         ┌────────────┐ ← 画面の上
 *     │ メニューの下の端だけ     │            │ ヘッダー（留まる）      │
 *     │ （上の端から 15〜112px） │            ├────────────┤
 *     │                        │            │ メニュー（全部見える）   │
 *     │ 本文                    │            │ ・お役立ちガイド         │
 *     │                        │            │ ・よくある質問           │
 *     │                        │            │ ・…                     │
 *     │                        │            ├────────────┤
 *     │                        │            │ 本文                    │
 *     ├────────────┤            ├────────────┤
 *     │ 画面下の相談バー         │            │ 画面下の相談バー         │
 *     └────────────┘            └────────────┘
 *     メニューが画面の上へ流れて消える       ヘッダーとメニューが画面の上に留まる
 *
 *   図2　開いたメニューと画面下の相談バーの重なり（高さの低い画面・ダイナミックヘッダー）
 *
 *     差し換える前：ヘッダー 50 ＜ 相談バー 60 → メニューの下の2項目が相談バーの下に隠れる
 *     差し換えた後：開いている間はヘッダー 70 ＞ 相談バー 60 → メニューが相談バーの上に出る
 * ========================================================================== */

/* fl 版（header.php §H25）：メニューは 860px 以下でハンバーガー */
@media (max-width: 860px) {
	body > header.fl-hd:has(.fl-nav.is-open) {
		position: sticky;
		top: var(--ksth-hf-admin);
	}

	body > header.fl-hd .fl-nav.is-open {
		max-height: calc(100vh - var(--ksth-hf-hd-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	@supports (height: 100dvh) {
		body > header.fl-hd .fl-nav.is-open {
			max-height: calc(100dvh - var(--ksth-hf-hd-h));
		}
	}
}

/* ks 版（template-parts/header.php）：開いている間は .ksth-sh に is-open が付く */
body > .ksth-sh.is-open {
	position: sticky;
	top: var(--ksth-hf-admin);
	z-index: var(--ksth-hf-z-menu);
}

body > .ksth-sh.is-open .ksth-sh-nav {
	max-height: calc(100vh - var(--ksth-hf-hd-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
	body > .ksth-sh.is-open .ksth-sh-nav {
		max-height: calc(100dvh - var(--ksth-hf-hd-h));
	}
}

/* ダイナミックヘッダー（template-parts/dynamic-header.php）：開いている間は .ksth-dh に is-open が付く。
   相談のボタンだけの横並び（.ksth-dh-nav--cta）は、メニューではないため対象にしない */
body > .ksth-dh.is-open {
	position: sticky;
	top: var(--ksth-hf-admin);
	z-index: var(--ksth-hf-z-menu);
}

body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta) {
	max-height: calc(100vh - var(--ksth-hf-hd-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
	body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta) {
		max-height: calc(100dvh - var(--ksth-hf-hd-h));
	}
}

/* 予備のヘッダー（header.php §H21 .ksth-fh）は、メニューを開閉しない（主要ページのリンクを並べるだけ）。
   ここでは何もしない */

/* 管理バーが画面と一緒に流れる幅（600px 以下）では、画面のいちばん上に留める */
@media (max-width: 600px) {
	body.admin-bar > header.fl-hd:has(.fl-nav.is-open),
	body.admin-bar > .ksth-sh.is-open,
	body.admin-bar > .ksth-dh.is-open {
		top: 0;
	}
}

/* メニューが開いている間は、読了バーを隠す */
body:has(> header.fl-hd .fl-nav.is-open) .ksth-progress,
body:has(> .ksth-sh.is-open) .ksth-progress,
body:has(> .ksth-dh.is-open) .ksth-progress {
	visibility: hidden;
}


/* ============================================================================
 * §HF04 重なりの順番
 * ----------------------------------------------------------------------------
 *   ふだんの重なりは、部品の CSS が決めている（冒頭の表）。ここでは、部品どうしが
 *   ぶつかる場面だけを整える。
 *     ・窓（Elementor のポップアップ・テーマの窓）が開いている間は、画面下の相談バーを
 *       窓より下に下げる（theme.css §24 は site のフッターの相談バーだけを扱っているため、
 *       ダイナミック・予備・fl 版の相談バーも同じにする）
 *     ・「本文へスキップ」は、押す直前（キーボードで選んだとき）にいちばん上に出す
 * ========================================================================== */

body.ksth-lock :is(.fl-float, .ksth-df-float, .ksth-rf-float),
body.dialog-prevent-scroll :is(.fl-float, .ksth-df-float, .ksth-rf-float) {
	z-index: 1;
}

/* 本文へスキップ（header.php・ks 版のヘッダーが出す）：キーボードで選んだときに、
   固定のバー・管理バーより上に出す */
:is(.ksth-skip, .ks-skip, .ksth-sh-skip):focus,
:is(.ksth-skip, .ks-skip, .ksth-sh-skip):focus-visible {
	z-index: 100001;
}

/* ダイナミックヘッダーの子メニュー（パソコンの幅で、項目に乗せると下に開く）は、
   ヘッダーの外（本文の上）に出るため、本文の部品より上に出す。
   部品の CSS が 60 を指定している。ヘッダー（50）の中の値なので、本文の上に出る */


/* ============================================================================
 * §HF05 画面下の相談バー
 * ----------------------------------------------------------------------------
 *   画面下の相談バー（「30秒で無料相談・一括見積」「LINE」）は、どの方式でも1つだけ出る
 *   （header.php と各フッターの部品が、出す・出さないを決めている。2026年9月28日に
 *   6通りの組み合わせで確かめた）。このバーが、次の場面で邪魔をしないようにする。
 *
 *   1) キーボードの Tab で操作したとき、今いる所（リンク・入力欄）がバーの下に隠れない
 *      → 画面の下にバーの高さ分の「見えない余白」を取る（scroll-padding-bottom）。
 *        見た目は変わらず、Tab で進んだ先がバーの上に来るように画面が動く
 *        （WCAG 2.2 の「フォーカスが隠れない」の考え方）
 *   2) スマホ・タブレットで、相談フォームに入力している間、バーが入力欄や送信ボタンに
 *      重ならない（画面のキーボードが出ると、画面の下の方が狭くなるため）
 *      → 入力欄を選んでいる間だけ、バーを隠す。入力欄から離れると元に戻る
 *      → 区切りを 1024px にしたのは、タブレット（iPad の縦・横）でも画面のキーボードが
 *        出るため。パソコン（1025px 以上）では、キーボードで画面が狭くならないため隠さない
 *      → 対象は、文字を打つ欄（1行の欄・複数行の欄・選択の欄）だけ。チェックの欄・
 *        送信のボタンを選んだときは隠さない（送信のボタンを押す直前に、バーが消えて
 *        画面が動くことが無いように）
 *   3) 相談フォームの枠（#form）へ飛んだとき、送信ボタンがバーの下に隠れない
 *      → theme.css §24 がフォームの下に余白を取っている（ここでは扱わない）
 *
 *   図3　スマホで相談フォームに入力しているとき
 *
 *     入力欄を押す前               入力欄を押したあと（画面のキーボードが出る）
 *     ┌──────────┐          ┌──────────┐
 *     │ お名前 [      ]   │          │ お名前 [ 山田   ] │ ← 入力中
 *     │ ご相談の内容       │          │ ご相談の内容       │
 *     ├──────────┤          │                   │ ← 相談バーを隠すので、
 *     │ 相談バー（84px）   │          ├──────────┤    入力欄の下が見える
 *     └──────────┘          │ 画面のキーボード   │
 *                                   └──────────┘
 *     入力欄から離れる（キーボードを閉じる）と、相談バーは元に戻る。
 *     1025px 以上（パソコン）では、画面のキーボードが出ないため、相談バーは出たまま。
 * ========================================================================== */

/* 1) Tab で進んだ先が、画面下の相談バーの下に隠れない */
html:has(:is(.fl-float, .ksth-sf-float, .ksth-df-float, .ksth-rf-float)) {
	scroll-padding-bottom: calc(var(--ksth-hf-float-h) + 12px);
}

/* 2) 相談フォーム・本文の入力欄に入力している間は、相談バーを隠す（1024px 以下） */
@media (max-width: 1024px) {
	body:has(:is(.wpcf7, .ks-wp-main, main) :is(input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus) :is(.fl-float, .ksth-sf-float, .ksth-df-float, .ksth-rf-float, .ks-fix) {
		visibility: hidden !important;
		transform: translateY(110%) !important;
		pointer-events: none !important;
	}
}

/* 相談バーの中の2つのボタン（相談・LINE）は、どの地の上でも白い文字（部品の指定と同じ） */
:is(.fl-float__b, .fl-float__l, .ksth-sf-float__b, .ksth-sf-float__l, .ksth-df-float__b, .ksth-df-float__l, .ksth-rf-float__b, .ksth-rf-float__l) {
	-webkit-text-fill-color: currentColor;
}

/* ============================================================================
 * §HF06 画面が止まったときの見張り（条件69）
 * ----------------------------------------------------------------------------
 *   TOP の完成HTMLを Elementor のページに貼ると、TOP の「詳細条件」の窓（.fl-pop）を
 *   開いたときに、body に fl-lock が付いて裏のページが止まる。閉じれば外れるが、
 *   JavaScript が途中で止まると、fl-lock が残ったまま画面が動かなくなることがある。
 *   header.php と footer.php の JavaScript も、残った fl-lock を外す（二重の備え）。
 *
 *   ここでは、JavaScript が動かないときの最後の備えとして、
 *     「fl-lock が付いているのに、開いている窓が1つも無い」
 *   ときは、body の縦のスクロールを戻す（CSS の :has() で見分ける）。
 *   開いている窓があるときは、何もしない（窓の裏のページは止まったまま）。
 *
 *     開いている窓とみなすもの
 *       .fl-pop（TOP の詳細条件）で hidden の無いもの
 *       .fl-nav.is-open（fl 版のヘッダーのメニュー）
 *       .ks-dw（完成HTMLの引き出しのメニュー）で hidden の無いもの
 *       dialog[open]・Elementor のポップアップ
 * ========================================================================== */

body.ks-wp.fl-lock:not(:has(.fl-pop:not([hidden]), .fl-nav.is-open, .ks-dw:not([hidden]), dialog[open], .elementor-popup-modal)) {
	overflow-y: visible !important;
	touch-action: auto;
}

/* 窓が閉じているのに、暗い幕（.fl-ov）だけが残って画面を押せないとき */
body.ks-wp .fl-ov:not([hidden]):not(:has(~ .fl-pop:not([hidden]))) {
	display: none;
}


/* ============================================================================
 * §HF06a 見張りが効くかを確かめる手順
 * ----------------------------------------------------------------------------
 *   画面が止まった状態は、ふだんは起きないため、わざと作って確かめる。
 *     1) 記事のページを開き、開発者ツールの Console に次を貼る
 *          document.body.classList.add('fl-lock')
 *     2) ページを下へ動かせれば正しい（窓が開いていないため、見張りがスクロールを戻す）
 *     3) 次を貼って元に戻す
 *          document.body.classList.remove('fl-lock')
 *   2026年9月28日の結果：TOP と同じ止め方（body.fl-lock に overflow: hidden）を足した状態で、
 *     窓が無いとき → 動かせる／窓（.fl-pop）が開いているとき → 止まったまま／
 *     窓を閉じた（hidden）とき → 動かせる
 * ========================================================================== */


/* ============================================================================
 * §HF07 ロゴ（条件43：伸びたり潰れたりしない）
 * ----------------------------------------------------------------------------
 *   ロゴの画像（https://kaigo-shuzen.jp/wp-content/uploads/2026/09/cropped-25cd9ba1-….webp）は
 *   正方形。どの部品も、決まった大きさの枠（44px・40px）に、縦横の比を保って収めている。
 *   ほかのプラグインの CSS（遅延読み込み・画像の圧縮など）が img に高さや幅を付けても、
 *   伸びたり潰れたりしないよう、縦横の比を保つ指定（object-fit: contain）と、
 *   横に並んだ文字に押されて縮まない指定（flex-shrink: 0）を重ねておく。
 *   大きさそのものは、部品の指定のまま（ここでは変えない）。
 * ========================================================================== */

:is(.fl-logo, .fl-ft__logo, .ksth-sh-logo, .ksth-dh-logo, .ksth-fh__logo, .ksth-sf-logo, .ksth-df-logo, .ksth-rf-logo) img,
:is(.ksth-sh, .ksth-dh, .ksth-fh, .ksth-sf, .ksth-df, .ksth-rf) .custom-logo {
	object-fit: contain;
	flex-shrink: 0;
	max-width: none;
}

/* WordPress の「サイトのロゴ」（custom-logo）を、ダイナミックヘッダーで使うとき */
.ksth-dh .custom-logo-link {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

/* ロゴの画像が読み込めなかったとき（onerror で消える）でも、サイト名の文字は残る。
   文字だけになったときに、左に空きができないようにする */
:is(.fl-logo, .ksth-sh-logo, .ksth-dh-logo):not(:has(img)) {
	gap: 0;
}


/* ============================================================================
 * §HF08 文字の色（白くならない）
 * ----------------------------------------------------------------------------
 *   スマホで開いたメニューは、白い地に出る。ほかのプラグインやカスタム CSS が
 *   リンクの色を白にしていても、開いたメニューの文字が白い地に溶けないよう、
 *   部品と同じ色をもう一度指定する（値は部品と同じなので、見た目は変わらない）。
 *     fl 版      #1d2733（--fl-tx）
 *     ks 版      親の色を引き継ぐ（color: inherit。ヘッダーの文字の色）
 *     ダイナミック  管理画面で決めた文字の色（--ksth-dh-text-c）
 *   相談・LINE のボタンは白い文字のまま（部品が !important で決めている）。
 * ========================================================================== */

body > header.fl-hd .fl-nav.is-open > a:not(.fl-hd__cta):not(.fl-hd__line):not(:hover):not(:focus-visible) {
	color: var(--fl-tx, #1d2733);
	-webkit-text-fill-color: currentColor;
}

body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta) .ksth-dh-menu__a {
	-webkit-text-fill-color: currentColor;
}

body > .ksth-sh.is-open .ksth-sh-nav .ksth-sh-a {
	-webkit-text-fill-color: currentColor;
}

/* ヘッダーの数字（ご相談実績・記事の本数）は、補助の灰色と橙のまま */
body > header.fl-hd .fl-hd__st {
	-webkit-text-fill-color: currentColor;
}


/* ============================================================================
 * §HF09 キーボードで操作したときの枠
 * ----------------------------------------------------------------------------
 *   Tab キーで操作したとき、今どのリンク・ボタンにいるかは、枠（3px）で分かる。
 *   2026年9月28日に、記事のページで Tab を400回押して、全部の操作できる所の枠を調べた。
 *
 *     部品                          枠の色（差し換える前）        このファイル
 *     ──────────────────────────────────────────────────────
 *     fl 版のヘッダー（白い地）      青 #0b66c3（共通CSS）          そのまま
 *     fl 版の相談バー（紺の地）      青 #0b66c3（共通CSS）          橙 #ffb35c にする
 *     site のフッター（紺の地）      橙 #ffb35c（部品）              そのまま
 *     ダイナミックヘッダー           橙 #ffb35c（部品）              そのまま
 *     ダイナミックフッター・相談バー  橙 #ffb35c（部品）              そのまま
 *
 *   fl 版の相談バーだけは、紺の地に青の枠で、境目が見えにくい（色の差が 3:1 に届かない）。
 *   ほかの相談バー・フッターと同じ橙の枠にそろえる。マウスやタッチで押したときは出ない。
 * ========================================================================== */

body > .fl-float :is(a, button):focus-visible {
	outline: 3px solid var(--ksth-hf-focus-on-dark);
	outline-offset: 2px;
}

/* ハンバーガーのボタン（☰）は、押せる大きさ（44px 四方）を保つ（部品の指定と同じ） */
:is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb) {
	min-width: 44px;
	min-height: 44px;
	touch-action: manipulation;
}


/* ============================================================================
 * §HF10 フッター（折り返し・読みやすさ）
 * ----------------------------------------------------------------------------
 *   フッターには、47都道府県の一覧・運営会社・主要ページのリンクが並ぶ。
 *   ・長い英数字（メールアドレス・URL）が入っても、フッターが横にはみ出さない
 *     （overflow-wrap: break-word。枠の幅の計算は変えない）
 *   ・フッターの中の縦の並び・見出しの大きさは、部品の CSS のまま（ここでは変えない）
 *   ・フッターの文字の色は、紺の地の上で読める色のまま（部品の指定）。
 *     ほかの CSS が文字の色を紺にしてしまったときに、紺の地に溶けないよう、
 *     リンクは「親の色を引き継ぐ」を重ねておく（部品と同じ指定）
 * ========================================================================== */

:is(footer.ksth-sf, .ksth-df, .ksth-rf-ft, footer.fl-ft) :is(p, li, a, span, small, dd) {
	overflow-wrap: break-word;
}

footer.ksth-sf a:not([class*="btn"]):not([class*="float"]):not(.ksth-sf-logo),
.ksth-df a:not([class*="btn"]):not([class*="cta"]):not(.ksth-df-logo) {
	-webkit-text-fill-color: currentColor;
}

/* コピーライトの行は、狭い画面でも1行に収まらないときに折り返す */
:is(.ksth-sf-cp, .ksth-df-cp, .ksth-rf-cp, .fl-ft__cp) {
	overflow-wrap: break-word;
	word-break: normal;
}


/* ============================================================================
 * §HF11 Elementor Pro のテーマビルダー
 * ----------------------------------------------------------------------------
 *   Elementor Pro で作ったヘッダー・フッター（表示条件が合うページ）を使うとき、
 *   header.php はテーマのヘッダーを出さず、body に ksth-elementor-header を付ける。
 *   ・本文の上の余白は0（§HF02）
 *   ・Elementor Pro のフッターは、本文の後ろに並ぶ（重なりを1にして、本文の部品の上に
 *     フッターの背景が重ならないようにする）
 *   ・何かの設定の食い違いで、テーマのヘッダーも同じページに出てしまったときは、
 *     テーマのヘッダーを隠す（ヘッダーが二重にならない。§HF15 も参照）
 * ========================================================================== */

.elementor-location-header + .ks-wp-main,
.elementor-location-header ~ .ks-wp-main {
	margin-top: 0;
}

.elementor-location-footer {
	position: relative;
	z-index: 1;
}

body.ksth-elementor-header > :is(header.fl-hd, .ksth-sh, .ksth-dh, .ksth-fh) {
	display: none !important;
}

/* ============================================================================
 * §HF12 管理バー（ログイン中）
 * ----------------------------------------------------------------------------
 *   ログイン中は、画面の上に WordPress の管理バー（パソコン 32px・スマホ 46px）が出る。
 *   ・開いたメニューのヘッダーは、管理バーの下に留める（§HF03）
 *   ・「本文へスキップ」をキーボードで選んだとき、管理バーの下に隠れないよう、
 *     管理バーの高さの分だけ下に出す（読者の画面では管理バーが無いため、何も変わらない）
 * ========================================================================== */

body.admin-bar :is(.ksth-skip, .ks-skip):focus {
	top: calc(var(--ksth-hf-admin) + 8px);
}

body.admin-bar .ksth-sh-skip:focus {
	top: var(--ksth-hf-admin);
}

/* 600px 以下では、管理バーは画面と一緒に流れる（固定ではない）ため、上に足さない */
@media (max-width: 600px) {
	body.admin-bar :is(.ksth-skip, .ks-skip):focus {
		top: 8px;
	}

	body.admin-bar .ksth-sh-skip:focus {
		top: 0;
	}
}


/* ============================================================================
 * §HF13 画面の幅ごとの調整
 * ----------------------------------------------------------------------------
 *   ヘッダー・フッターの並び方は、部品の CSS が幅ごとに決めている（fl 版は 1320px・
 *   1239px・860px・720px・520px、ks 版・ダイナミックは 1200px・1100px・520px と
 *   管理画面で決めたハンバーガーの幅、フッターは 1024px・860px・520px）。
 *   ここでは、横にはみ出す幅だけを直す。
 *     ・fl 版のヘッダー：861〜959px（パソコンの並びに切り替わった直後の幅）で、メニューが
 *       1行に収まらず、ページが横にはみ出していた。この幅の間だけ、項目の間と文字を少し詰める
 *     ・小さいスマホ（520px 以下）で、相談のボタンの文字が長くても、ボタンの中で折り返す
 *   2026年9月28日に、320〜1440px の9通りの幅で測り、直したあとはどの版も横のはみ出しが0。
 * ========================================================================== */

/* fl 版のヘッダー：861〜959px の幅では、メニューの横並び（1行・折り返さない）が
   画面の幅に収まらず、ページが横に最大 51px はみ出していた（2026年9月28日に測定。
   861px で 51px・880px で 32px・900px で 12px。940px 以上は収まる）。
   はみ出すと、画面が横に揺れ、右端の「無料一括見積」のボタンが切れる。
   この幅の間だけ、メニューの項目の間を 16px → 10px、文字を 13.5px → 12.5px にして収める。
   項目・文言・色は変えない。860px 以下（ハンバーガー）と 960px 以上は、部品の指定のまま */
@media (min-width: 861px) and (max-width: 959px) {
	body > header.fl-hd .fl-nav {
		gap: 10px;
		font-size: 12.5px;
	}

	body > header.fl-hd .fl-hd__st span {
		font-size: 18px;
	}

	body > header.fl-hd .fl-hd__cta {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 520px) {
	:is(.ksth-sf-float__b, .ksth-df-float__b, .ksth-rf-float__b, .fl-float__b, .ksth-df-btn, .ksth-rf-btn) {
		overflow-wrap: break-word;
	}
}


/* ============================================================================
 * §HF13a 861〜959px の直しの根拠（2026年9月28日に測った値）
 * ----------------------------------------------------------------------------
 *   fl 版のヘッダーは、861px 以上でメニューを1行に並べる（折り返さない）。
 *   メニューの幅は 749px（項目の間 16px・文字 13.5px）、ロゴの並びは 127px。
 *
 *     画面の幅   横のはみ出し（直す前）   メニューの幅（直した後）   横のはみ出し（直した後）
 *     ─────────────────────────────────────────────────────
 *     861px      51px                    674px                     0
 *     880px      32px                    674px                     0
 *     900px      12px                    674px                     0
 *     940px      0                       674px                     0
 *     960px〜    0                       749px（部品の指定のまま）   0
 *
 *   ・直す前にはみ出していたのは、メニューの右端の「無料一括見積」のボタンと、
 *     実績の数字（記事 153 本）の一部
 *   ・直した後も、項目・文言・色・並びの順番は同じ。項目の間と文字だけが少し小さい
 *   ・960px 以上は直していない（収まっているため）。区切りは、今の項目の長さで測って決めた
 *     （項目を足すときは §HF92c）
 * ========================================================================== */


/* ============================================================================
 * §HF14 強制カラー・動き・印刷
 * ----------------------------------------------------------------------------
 *   ・強制カラー（Windows のハイコントラスト）では、色の地で形を見せていたボタンが
 *     見えなくなるため、枠を付ける
 *   ・動きを減らす設定の人には、開いたメニューのヘッダーを画面に留めるときの動きを付けない
 *   ・印刷では、ハンバーガー・画面下の相談バー・読了バーを出さない
 * ========================================================================== */

@media (forced-colors: active) {
	:is(.fl-hd__cta, .fl-hd__line, .fl-float__b, .fl-float__l, .ksth-sf-float__b, .ksth-sf-float__l, .ksth-df-float__b, .ksth-df-float__l, .ksth-rf-float__b, .ksth-rf-float__l, .ksth-df-btn, .ksth-rf-btn) {
		border: 2px solid ButtonText;
	}

	:is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb) {
		border: 1px solid ButtonText;
	}

	body > header.fl-hd .fl-nav.is-open,
	body > .ksth-sh.is-open .ksth-sh-nav,
	body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta) {
		border: 1px solid CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	body > header.fl-hd,
	body > .ksth-sh,
	body > .ksth-dh {
		transition: none;
	}
}

@media print {
	:is(.fl-float, .ksth-sf-float, .ksth-df-float, .ksth-rf-float, .ks-fix, .ks-stab, .ksth-progress),
	:is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb),
	:is(.ksth-sf-spacer, .ksth-df-spacer, .ksth-rf-spacer) {
		display: none !important;
	}

	body > header.fl-hd,
	body > .ksth-sh,
	body > .ksth-dh {
		position: static !important;
		box-shadow: none !important;
	}

	body.ksth-header-site.ks-wp {
		padding-bottom: 0 !important;
	}
}


/* ============================================================================
 * §HF14a 印刷したときの見え方（2026年9月28日に、印刷の見た目で確かめた値）
 * ----------------------------------------------------------------------------
 *     部品                          fl 版のヘッダーのとき   ダイナミックのとき
 *     ───────────────────────────────────────────────
 *     ヘッダー                       出さない（部品）         出す（画面と一緒に流れる形）
 *     ☰                             出さない                 出さない
 *     画面下の相談バー               出さない                 出さない
 *     フッターの空き（84px）          （無い）                 出さない
 *     読了バー                       出さない                 出さない
 *     フッター                       出す                     出す
 *     body の下の余白                0                        0
 *
 *   ・印刷した紙には、本文とフッター（運営会社・都道府県・主要ページ）が残る
 *   ・相談フォームの送信のボタンなど、本文の中の部品の印刷は theme.css §28 が受け持つ
 * ========================================================================== */


/* ============================================================================
 * §HF15 二重に出たときの片付け（条件64）
 * ----------------------------------------------------------------------------
 *   ふだんは、ヘッダー・画面下の相談バーは1つずつしか出ない（header.php と各部品が決める）。
 *   設定の食い違いやプラグインの出力で、同じ役目の部品が2つ並んだときに、
 *   後から出た方を隠す。1つしか無いときは、何も変わらない。
 *
 *     2つ並んだもの                                        隠す方
 *     ─────────────────────────────────────────────────
 *     テーマの fl 版ヘッダーが2つ（body の直下）              後の方
 *     fl 版の相談バーが2つ（body の直下）                    後の方
 *     fl 版の相談バー と フッターの相談バー                    フッターの相談バーと、その分の空き
 *     fl 版の相談バー と 完成HTMLの相談バー（.ks-fix）         .ks-fix
 *
 *   本文の中に貼った完成HTMLのヘッダー・相談バー（Elementor の HTML ウィジェットの中）は、
 *   theme.css §20 が隠す（ここでは body の直下の部品だけを扱う）。
 * ========================================================================== */

body > header.fl-hd ~ header.fl-hd {
	display: none !important;
}

body > .fl-float ~ .fl-float {
	display: none !important;
}

body:has(> .fl-float) :is(.ksth-sf-float, .ksth-df-float, .ksth-rf-float, .ks-fix) {
	display: none !important;
}

body:has(> .fl-float) :is(.ksth-sf-spacer, .ksth-df-spacer, .ksth-rf-spacer) {
	display: none !important;
}

/* ks 版とダイナミックのヘッダーが同時に出たとき（部品の差し替えの途中など）は、後の方を隠す */
body > :is(.ksth-sh, .ksth-dh) ~ :is(.ksth-sh, .ksth-dh) {
	display: none !important;
}


/* ============================================================================
 * §HF16 以前の .ks-dh・.ks-df との互換
 * ----------------------------------------------------------------------------
 *   2026.09.23 の初版のダイナミックヘッダー・フッターは、.ks-dh・.ks-df という class を
 *   使っていた。今の部品（.ksth-dh・.ksth-df）はこの class を出さないが、
 *   Elementor のサイト設定に保存された CSS や、子テーマ・カスタム CSS が古い class を
 *   使っているときのために、初版と同じ見た目を残す。
 *   古い class の要素がページに無いときは、どの規則も当たらない。
 *   色は CSS 変数で受け取る：--ksth-dh-bg／--ksth-dh-text／--ksth-df-bg／--ksth-df-text
 *   （カスタマイザーは :root に、Elementor のサイト設定は .elementor-kit-N に出す）
 * ========================================================================== */

/* ---- ダイナミックヘッダー（初版） ---- */
.ks-dh {
	position: relative;
	z-index: var(--ksth-hf-z-header);
	background: var(--ksth-dh-bg, #ffffff);
	color: var(--ksth-dh-text, #0a2e5c);
	border-bottom: 1px solid var(--ln, #e3e7ee);
}

.ks-dh__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 12px clamp(14px, 4vw, 24px);
}

.ks-dh__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-right: auto;
}

.ks-dh__brand img,
.ks-dh .custom-logo {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex-shrink: 0;
}

.ks-dh__text {
	min-width: 0;
}

.ks-dh__name {
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--ksth-dh-text, #0a2e5c);
	text-decoration: none;
}

.ks-dh__tag {
	margin: 2px 0 0;
	font-size: .74rem;
	line-height: 1.4;
	opacity: .8;
}

.ks-dh__nav {
	display: none;
	width: 100%;
	order: 3;
}

.ks-dh__menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-dh__menu a {
	display: block;
	padding: 12px 4px;
	border-top: 1px solid var(--ln, #e3e7ee);
	color: var(--ksth-dh-text, #0a2e5c);
	font-weight: 600;
	text-decoration: none;
}

.ks-dh__menu .sub-menu {
	list-style: none;
	padding-left: 1em;
}

.ks-dh__toggle {
	position: relative;
	order: 2;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ln, #e3e7ee);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}

.ks-dh__bar,
.ks-dh__bar::before,
.ks-dh__bar::after {
	content: "";
	position: absolute;
	left: 11px;
	width: 20px;
	height: 2px;
	background: var(--ksth-dh-text, #0a2e5c);
	transition: transform .2s;
}

.ks-dh__bar {
	top: 21px;
}

.ks-dh__bar::before {
	top: -6px;
	left: 0;
}

.ks-dh__bar::after {
	top: 6px;
	left: 0;
}

.ks-dh__toggle[aria-expanded="true"] .ks-dh__bar {
	background: transparent;
}

.ks-dh__toggle[aria-expanded="true"] .ks-dh__bar::before {
	transform: translateY(6px) rotate(45deg);
}

.ks-dh__toggle[aria-expanded="true"] .ks-dh__bar::after {
	transform: translateY(-6px) rotate(-45deg);
}

.ks-dh__toggle[aria-expanded="true"] + .ks-dh__nav {
	display: block;
}

.ks-dh__cta {
	display: none;
	gap: 8px;
}

.ks-dh__btn {
	padding: 10px 14px;
	font-size: .9rem;
}

.ks-dh :is(a, button):focus-visible {
	outline: 3px solid var(--ksth-hf-focus);
	outline-offset: 2px;
}

@media (min-width: 960px) {
	.ks-dh__toggle {
		display: none;
	}

	.ks-dh__nav {
		display: block;
		width: auto;
		order: 0;
	}

	.ks-dh__menu {
		flex-direction: row;
		gap: 4px;
	}

	.ks-dh__menu a {
		padding: 8px 10px;
		border-top: 0;
		border-radius: 8px;
	}

	.ks-dh__menu a:hover {
		background: rgba(10, 46, 92, .06);
	}

	.ks-dh__cta {
		display: flex;
	}

	.ks-dh--centered .ks-dh__in {
		flex-direction: column;
		gap: 10px;
	}

	.ks-dh--centered .ks-dh__brand {
		margin: 0;
	}

	.ks-dh--stacked .ks-dh__in {
		flex-wrap: wrap;
	}

	.ks-dh--stacked .ks-dh__nav {
		order: 3;
		width: 100%;
		padding-top: 6px;
		border-top: 1px solid var(--ln, #e3e7ee);
	}
}

/* ---- ダイナミックフッター（初版） ---- */
.ks-df {
	margin-top: 2rem;
	background: var(--ksth-df-bg, #0a2e5c);
	color: var(--ksth-df-text, #c9d6e6);
}

.ks-df__in {
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px clamp(14px, 4vw, 24px) 96px;
}

.ks-df__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.ks-df__name {
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}

.ks-df__tag {
	margin: 8px 0 0;
	font-size: .86rem;
	line-height: 1.8;
}

.ks-df__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.ks-df__cta .btn {
	padding: 11px 16px;
	font-size: .92rem;
}

.ks-df__note {
	margin: 10px 0 0;
	font-size: .78rem;
	opacity: .85;
}

.ks-df__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ks-df__h {
	margin: 0 0 6px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: #fff;
}

.ks-df__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-df__menu li {
	margin: 0;
}

.ks-df__menu a {
	display: block;
	padding: 5px 0;
	font-size: .86rem;
	color: var(--ksth-df-text, #c9d6e6);
	text-decoration: none;
}

.ks-df__menu a:hover {
	color: #fff;
	text-decoration: underline;
}

.ks-df__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .78rem;
}

.ks-df__org,
.ks-df__copy {
	margin: 0;
}

.ks-df :is(a, button):focus-visible {
	outline: 3px solid var(--ksth-hf-focus-on-dark);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.ks-df__top {
		grid-template-columns: 1.1fr 2fr;
	}

	.ks-df__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ks-df__in {
		padding-bottom: 40px;
	}
}

@media print {
	.ks-dh__toggle,
	.ks-dh__cta,
	.ks-df__cta {
		display: none !important;
	}

	.ks-df {
		background: none;
		color: #333;
	}
}


/* ============================================================================
 * §HF17 JavaScript が動かないとき
 * ----------------------------------------------------------------------------
 *   スマホの幅のメニュー（☰）は、JavaScript で開く。JavaScript が止まっている環境
 *   （ブラウザの設定・一部の読み上げ用のブラウザ・古い端末）では、☰ を押しても開かない。
 *   header.php は、その環境のために主要ページの案内（<noscript> の .ksth-nojs）を出している。
 *
 *   ここでは、JavaScript が動かないと分かる環境（@media (scripting: none)）で、
 *     ・押しても何も起きない ☰ を隠す（押せるように見えて動かない部品を残さない）
 *     ・ダイナミックヘッダーのパソコンの幅の子メニューは、乗せると開く（CSS だけで動く）ため、
 *       そのままにする
 *   JavaScript が動く環境（ほとんどの読者と検索エンジン）では、何も変わらない。
 * ========================================================================== */

@media (scripting: none) {
	:is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb) {
		display: none !important;
	}

	/* 画面下の相談バーは、ただのリンクなので JavaScript が無くても使える。そのまま出す */
}


/* ============================================================================
 * §HF18 見やすさの設定（コントラストを上げる）
 * ----------------------------------------------------------------------------
 *   端末で「コントラストを上げる」を選んでいる人（@media (prefers-contrast: more)）には、
 *     ・ヘッダーのメニューとフッターのリンクに下線を付ける（色だけに頼らず、リンクと分かる）
 *     ・ハンバーガーのボタンに枠を付ける
 *     ・画面下の相談バーの2つのボタンに白い枠を付ける（紺の地との境目を見せる）
 *   それ以外の人には何も変わらない。
 * ========================================================================== */

@media (prefers-contrast: more) {
	body > header.fl-hd .fl-nav > a:not(.fl-hd__cta):not(.fl-hd__line),
	body > .ksth-sh .ksth-sh-nav .ksth-sh-a,
	body > .ksth-dh .ksth-dh-menu__a {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	:is(footer.ksth-sf, .ksth-df, .ksth-rf-ft) a:not([class*="btn"]):not([class*="cta"]):not([class*="logo"]) {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	:is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb) {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	:is(.fl-float__b, .fl-float__l, .ksth-sf-float__b, .ksth-sf-float__l, .ksth-df-float__b, .ksth-df-float__l, .ksth-rf-float__b, .ksth-rf-float__l) {
		box-shadow: 0 0 0 2px #ffffff;
	}
}


/* ============================================================================
 * §HF19 相談フォームへ飛んだときの目印
 * ----------------------------------------------------------------------------
 *   ヘッダーの「無料一括見積」・画面下の「30秒で無料相談」を押すと、同じページの
 *   相談フォームの枠（id="form"）へ飛ぶ。長いページでは、飛んだ先がどこか分かりにくいため、
 *   飛んだ直後に、フォームの枠の外側に薄い橙の輪を2秒ほど出して消す。
 *   ・輪は枠の外側に出すだけで、フォームの形・大きさ・文字は変えない
 *   ・動きを減らす設定の人には、動かさず、輪も出さない
 *   ・フォームの入力欄を押したあとは、輪は出ない（:target のときだけ）
 * ========================================================================== */

@keyframes ksth-hf-target {
	0% {
		box-shadow: 0 0 0 0 rgba(240, 131, 30, .55);
	}

	35% {
		box-shadow: 0 0 0 10px rgba(240, 131, 30, .28);
	}

	100% {
		box-shadow: 0 0 0 16px rgba(240, 131, 30, 0);
	}
}

body.ks-wp [id="form"]:target {
	animation: ksth-hf-target 1.8s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
	body.ks-wp [id="form"]:target {
		animation: none;
	}
}


/* ============================================================================
 * §HF19a 目印の見え方
 * ----------------------------------------------------------------------------
 *     時間        輪の広がり（フォームの枠の外側）   色
 *     ─────────────────────────────────────────
 *     0 秒        0px                              橙 #f0831e（濃さ 55%）
 *     0.6 秒      10px                             同じ橙（濃さ 28%）
 *     1.8 秒      16px                             消える（濃さ 0）
 *
 *   ・輪は1回だけ出る。同じページで、もう一度 #form へ飛んだときは出ない
 *     （ブラウザが同じ飛び先を「新しく選んだ」とみなさないため）
 *   ・フォームの枠が、もともと影（box-shadow）を持っているときは、輪の間だけ影が
 *     輪に置き換わり、1.8 秒後に元の影に戻る
 * ========================================================================== */


/* ============================================================================
 * §HF90 ヘッダー・フッターの決まり方（どのページに、どの部品が出るか）
 * ----------------------------------------------------------------------------
 *
 *     ページ                                   ヘッダー・フッター
 *     ─────────────────────────────────────────────────────
 *     TOP・完成HTMLの175ページ                 完成HTMLに書かれたもの（このファイルは読まれない）
 *     Elementor で作ったページ（全幅）          下の決まり方で選ぶ
 *     Elementor のキャンバス                    出さない（Elementor の中身だけ）
 *     検索・404・一覧・台帳に無い投稿           下の決まり方で選ぶ
 *
 *     ヘッダーの決まり方（header.php 図2。上から見て、当てはまった所で決まる）
 *       ① Elementor Pro のヘッダー（表示条件が合う）  → Elementor Pro（body に ksth-elementor-header）
 *       ② テーマ設定「サイト共通のヘッダー・フッター」がオフ → 出さない
 *       ③ ヘッダーの方式
 *            site     → 方式の見た目が fl（初めの値）なら header.php §H25（header.fl-hd）
 *                       ks なら template-parts/header.php（.ksth-sh）
 *            dynamic  → template-parts/dynamic-header.php（.ksth-dh）
 *            none     → 出さない
 *       部品のファイルが見つからないときは、予備のヘッダー（.ksth-fh）を出す
 *
 *     フッターの決まり方
 *            site     → template-parts/footer.php（footer.ksth-sf）
 *            dynamic  → template-parts/dynamic-footer.php（.ksth-df）
 *            none     → 出さない
 *       部品のファイルが見つからないときは、予備のフッター（footer.php の .ksth-rf）を出す
 *
 *     画面下の相談バーは、どの組み合わせでも1つだけ出る
 *            fl 版のヘッダーがあるとき → .fl-float（header.php。body の下に 84px の余白）
 *            それ以外で、フッターがあるとき → フッターの相談バー（.ksth-sf-float・.ksth-df-float）
 *                                              と、その分の空き（…-spacer 84px）
 *            ヘッダーもフッターも出さないとき → 出さない（本文の末尾の相談フォームだけ）
 *
 *     2026年9月28日に、6通りの組み合わせ（site／dynamic／none のヘッダーとフッター）を
 *     記事・検索・404 のページで開いて、相談バーが1つだけ出ることを確かめた。
 * ========================================================================== */


/* ============================================================================
 * §HF90a 部品ごとの class と、このファイルがすること
 * ----------------------------------------------------------------------------
 *   部品の中の class 名と役目、このファイルの中で扱っている節を、部品ごとに並べる。
 *   「—」は、このファイルでは扱わない（部品の CSS のまま）もの。
 *
 * ── 1. fl 版のヘッダー（header.php §H25・方式 site の初めの見た目）────────────
 *
 *     class                  役目                                   このファイル
 *     ────────────────────────────────────────────────────────
 *     header.fl-hd           ヘッダーの器（body の直下）              §HF03 §HF14 §HF15
 *     .fl-hd__in             ロゴ・メニューを横に並べる箱              —
 *     .fl-hd__l              ロゴと、監修・運営の札の並び              —
 *     .fl-logo               ロゴ（画像44px＋サイト名）               §HF07
 *     .fl-badge              監修・運営の札（狭い幅で隠れる）            —
 *     .fl-nb                 ハンバーガー（860px 以下で出る）          §HF09 §HF14 §HF17 §HF18
 *     .fl-nav                メニュー（860px 以下は開閉）              §HF03 §HF08 §HF14 §HF18
 *     .fl-hd__st             ご相談実績・記事の本数                    §HF08
 *     .fl-hd__cta            無料一括見積のボタン                      §HF14
 *     .fl-hd__line           LINE のボタン（スマホのメニューの中だけ）  §HF14
 *     .fl-sub                「設備が止まった方へ」「修繕を計画する方へ」 —
 *     .fl-float              画面下の相談バー（body の直下）           §HF04 §HF05 §HF09 §HF15 §HF18
 *     .fl-float__b・__l      相談・LINE のボタン                       §HF05 §HF09 §HF13 §HF14 §HF18
 *     .ksth-progress         読了バー（画面の上の細い線）              §HF03 §HF14
 *     .ksth-skip             本文へスキップ                            §HF04 §HF12
 *
 * ── 2. 予備のヘッダー（header.php §H21。部品のファイルが見つからないとき）──────
 *
 *     .ksth-fh               ヘッダーの器                              §HF07 §HF11 §HF15
 *     .ksth-fh__logo・__name ロゴとサイト名                            §HF07
 *     .ksth-fh__nav          主要ページのリンク（開閉しない）          —
 *     .ksth-fh__cta          相談フォーム・LINE のボタン               —
 *
 * ── 3. ks 版のヘッダー（template-parts/header.php・方式 site で見た目を ks にしたとき）─
 *
 *     .ksth-sh               ヘッダーの器（開くと is-open が付く）     §HF03 §HF11 §HF14 §HF15
 *     .ksth-sh-in・-c        中の箱                                    —
 *     .ksth-sh-logo          ロゴ                                      §HF07
 *     .ksth-sh-badge・-st    札・実績の数字                            —
 *     .ksth-sh-nb            ハンバーガー                              §HF09 §HF14 §HF17 §HF18
 *     .ksth-sh-nav・-a       メニューと、その項目                      §HF03 §HF08 §HF14 §HF18
 *     .ksth-sh-cta・-line    相談・LINE のボタン                       —
 *     .ksth-sh-sub           ヘッダーの下の段のリンク                  —
 *     .ksth-sh-skip          本文へスキップ                            §HF04 §HF12
 *     .ksth-sh-ed            編集者向けの表（ログイン中だけ）          —
 *
 * ── 4. ダイナミックヘッダー（template-parts/dynamic-header.php・方式 dynamic）──────
 *
 *     .ksth-dh               ヘッダーの器（開くと is-open が付く）     §HF03 §HF11 §HF14 §HF15
 *     .ksth-dh--default・--centered・--stacked  並び方（管理画面で選ぶ） —
 *     .ksth-dh-logo・-brand  ロゴ・サイト名                            §HF07
 *     .ksth-dh-tag           サイト名の下の一言                        —
 *     .ksth-dh-stats・-st    実績の数字                                —
 *     .ksth-dh-nb            ハンバーガー                              §HF09 §HF14 §HF17 §HF18
 *     .ksth-dh-nav           メニューの器（相談のボタンの並び --cta は別） §HF03 §HF08 §HF14
 *     .ksth-dh-menu・__a     メニューと、その項目（外観 → メニュー）   §HF08 §HF18
 *     .ksth-dh-menu__sub     子メニュー（パソコンの幅で下に開く）      §HF04
 *     .ksth-dh-menu__more    子メニューを開く印                        —
 *     .ksth-dh-cta__form・__line  相談・LINE のボタン                  —
 *     .ksth-dh-notice        お知らせの帯                              —
 *     .ksth-dh-ed            編集者向けの表（ログイン中だけ）          —
 *     色は管理画面の値から部品が計算し、要素に直接書く（--ksth-dh-bg-c など。§HF91）
 *
 * ── 5. site のフッター（template-parts/footer.php・方式 site）────────────────────
 *
 *     footer.ksth-sf         フッターの器                              §HF08 §HF10 §HF18
 *     .ksth-sf-w・-c         中の箱                                    —
 *     .ksth-sf-l・-col       リンクの列（目的・分類・対応エリア）       §HF10
 *     .ksth-sf-rg・-pref     地方ごとの都道府県の並び                  §HF10
 *     .ksth-sf-m・-logo      右の列（ロゴ・実績・主要ページ）           §HF07
 *     .ksth-sf-nums          ご相談実績・アンケートの数字              —
 *     .ksth-sf-cp            コピーライト                              §HF10
 *     .ksth-sf-float         画面下の相談バー（fl 版のヘッダーが無いとき） §HF05 §HF15 §HF18
 *     .ksth-sf-spacer        相談バーの分の空き（84px）                §HF14 §HF15
 *     .ksth-sf-ed            編集者向けの表（ログイン中だけ）          —
 *
 * ── 6. ダイナミックフッター（template-parts/dynamic-footer.php・方式 dynamic）──────
 *
 *     .ksth-df               フッターの器                              §HF08 §HF10 §HF18
 *     .ksth-df-cta           相談の帯（相談フォーム・LINE）            —
 *     .ksth-df-flow          相談の流れの図（3つの段）                 —
 *     .ksth-df-season        いまの月に多い故障の案内（1行）           —
 *     .ksth-df-l・-col・-list  リンクの列（外観 → メニュー）           §HF10
 *     .ksth-df-side          右の列                                    —
 *     .ksth-df-trust         所在地と監修者                            —
 *     .ksth-df-logo          ロゴ                                      §HF07
 *     .ksth-df-cp            コピーライト                              §HF10
 *     .ksth-df-float         画面下の相談バー（fl 版のヘッダーが無いとき） §HF04 §HF05 §HF15
 *     .ksth-df-spacer        相談バーの分の空き（84px）                §HF14 §HF15
 *     .ksth-df-ed            編集者向けの表（ログイン中だけ）          —
 *
 * ── 7. 予備のフッター（footer.php。部品のファイルが見つからないとき）─────────────
 *
 *     .ksth-rf-ft            フッターの器                              §HF10 §HF18
 *     .ksth-rf-anchor        本文にフォームが無いページの相談の入口（id="form"）  §HF19
 *     .ksth-rf-logo          ロゴ                                      §HF07
 *     .ksth-rf-btn           相談・LINE のボタン                       §HF13 §HF14
 *     .ksth-rf-float         画面下の相談バー                          §HF04 §HF05 §HF15 §HF18
 *     .ksth-rf-spacer        相談バーの分の空き                        §HF14 §HF15
 *     .ksth-rf-st            お知らせ・注意の札（info・ok・warn）      —
 *     .ksth-rf-ed            編集者向けの表（ログイン中だけ）          —
 *
 * ── 8. Elementor Pro のテーマビルダー ────────────────────────────────────
 *
 *     .elementor-location-header   Elementor Pro のヘッダー            §HF02 §HF11
 *     .elementor-location-footer   Elementor Pro のフッター            §HF11
 *
 * ── 9. 初版の class（今の部品は出さない）────────────────────────────────────
 *
 *     .ks-dh・.ks-dh__…      初版のダイナミックヘッダー                §HF16
 *     .ks-df・.ks-df__…      初版のダイナミックフッター                §HF16
 * ========================================================================== */


/* ============================================================================
 * §HF90b 画面の幅ごとの見え方（2026年9月28日に、記事のページで測った値）
 * ----------------------------------------------------------------------------
 *   ○ は出ている、－ は隠れている。高さの単位は px。
 *   「横」は、ページが横にはみ出した量（0 が正しい）。861px の fl 版は、§HF13 で直した後の値
 *   （直す前は 51px）。
 *
 * ── fl 版のヘッダー ＋ site のフッター（方式 site の初めの組み合わせ）──────────────
 *
 *     幅     ヘッダー  ☰   メニュー  札   実績  見積   下の段  フッター  相談バー  横
 *     ───────────────────────────────────────────────────────
 *     320    128      ○   －       －   －    －     ○      1429     86       0
 *     390    104      ○   －       －   －    －     ○      1296     66       0
 *     520    104      ○   －       －   －    －     ○      1222     66       0
 *     768    114      ○   －       －   －    －     ○       821     68       0
 *     860    114      ○   －       －   －    －     ○       821     68       0
 *     861    114      －   ○       －   ○    ○     ○       727     68       0
 *     1024   114      －   ○       －   ○    ○     ○       653     68       0
 *     1280   114      －   ○       －   ○    ○     ○       472     68       0
 *     1440   114      －   ○       ○   ○    ○     ○       472     68       0
 *
 *     札   ＝ 監修・運営の札（1320px 以下で隠れる）
 *     実績 ＝ ご相談実績・記事の本数
 *     見積 ＝ 「無料一括見積」のボタン（860px 以下は、開いたメニューの中にある）
 *     下の段 ＝ 「設備が止まった方へ」「修繕を計画する方へ」
 *
 * ── ダイナミックヘッダー ＋ ダイナミックフッター ───────────────────────────
 *
 *     幅     ヘッダー  ☰   メニュー  札   実績  見積   下の段  フッター  相談バー  横
 *     ───────────────────────────────────────────────────────
 *     320     97      ○   －       －   －    －     ○      1570     79       0
 *     390     97      ○   －       －   －    －     ○      1455     69       0
 *     520     97      ○   －       －   －    －     ○      1340     69       0
 *     768    107      ○   －       －   －    －     ○       973     71       0
 *     860    107      ○   －       －   －    －     ○       953     71       0
 *     861    115      －   ○       －   －    ○     ○       859     71       0
 *     1024   115      －   ○       －   －    ○     ○       785     71       0
 *     1280   115      －   ○       ○   ○    ○     ○       547     71       0
 *     1440   115      －   ○       ○   ○    ○     ○       547     71       0
 *
 * ── ks 版のヘッダー ＋ site のフッター ──────────────────────────────────
 *
 *     幅     ヘッダー  ☰   メニュー  札   実績  見積   下の段  フッター  相談バー  横
 *     ───────────────────────────────────────────────────────
 *     320     97      ○   －       －   －    －     ○      1411     79       0
 *     390     97      ○   －       －   －    －     ○      1296     71       0
 *     768    107      ○   －       －   －    －     ○       821     73       0
 *     861    115      －   ○       －   －    ○     ○       727     73       0
 *     1280   115      －   ○       ○   ○    ○     ○       472     73       0
 *
 *   ・ハンバーガーに切り替わる幅は、どの版も 860px（ダイナミックは管理画面で変えられる）
 *   ・相談バーの高さは 66〜86px。body の下の余白・フッターの空きは 84px で、
 *     320px の幅の fl 版（86px）だけ、2px が本文の末尾に重なる（本文の末尾には
 *     相談フォームの下の余白があるため、読めなくなる所は無い）
 * ========================================================================== */


/* ============================================================================
 * §HF90c 部品の CSS の要点（参照用）
 * ----------------------------------------------------------------------------
 *   部品の CSS を直すときに、どの値がどこにあるかを探す手がかり。
 *   値は 2026年9月28日の部品のファイルから取り出した。
 *
 * ── fl 版のヘッダー（header.php §H25）────────────────────────────────
 *     CSS の場所        head の中（wp_add_inline_style で ksth-header に付ける）
 *     幅の区切り        1320px（札）・1239px・860px（ハンバーガー）・720px・520px
 *     重なり            ヘッダー 1000・相談バー 990・読了バー 119
 *     主な色            紺 #0a2e5c・文字 #1d2733・補助 #5b6b7c・橙 #f0831e／#ff9f40・
 *                       橙の影 #c9660d・LINE #06c755
 *     ヘッダーの高さ     72px 以上（1段目）＋下の段
 *     ロゴ              44px 四方・角の丸み 10px・縦横の比を保つ
 *     開いたメニュー     ヘッダーの下に重なる・高さの上限 100vh−80px（§HF03 で 100dvh−120px）
 *
 * ── ks 版のヘッダー（template-parts/header.php）──────────────────────────
 *     CSS の場所        部品の <style>（本文の中）
 *     幅の区切り        1200px・1100px・520px・ハンバーガーの幅（初めは 860px）
 *     重なり            ヘッダー 50（§HF03 で開いている間 70）・本文へスキップ 1000
 *     主な色            紺 #0a2e5c・罫線 #d9e2ec・補助 #5b6b7c・橙 #f0831e・枠 #ffb35c
 *     押せる部品の高さ   44px 以上
 *     開いたメニュー     高さの上限 100dvh−72px（§HF03 で 100dvh−120px）
 *
 * ── ダイナミックヘッダー（template-parts/dynamic-header.php）──────────────────
 *     CSS の場所        部品の <style>（本文の中）。色はヘッダーの要素に直接書く
 *     幅の区切り        1200px・1100px・520px・ハンバーガーの幅（管理画面で変える）
 *     重なり            ヘッダー 50（§HF03 で開いている間 70）・子メニュー 60
 *     主な色            管理画面の値（初めは白の地・紺の文字）・罫線 #d9e2ec・青 #1f6fd1
 *     押せる部品の高さ   44px 以上
 *     並び方            default（左にロゴ）・centered（中央）・stacked（2段）
 *
 * ── site のフッター（template-parts/footer.php）───────────────────────────
 *     CSS の場所        部品の <style>（本文の中）
 *     幅の区切り        1024px・860px・520px
 *     重なり            相談バー 60
 *     主な色            紺の地 #0a2e5c・文字 #dfe8f2・枠 #ffb35c・LINE #06c755
 *     ロゴ              40px 四方・縦横の比を保つ
 *     相談バー          高さ 66〜86px・空き 84px（…-spacer）
 *
 * ── ダイナミックフッター（template-parts/dynamic-footer.php）─────────────────
 *     CSS の場所        部品の <style>（本文の中）。色はフッターの要素に直接書く
 *     幅の区切り        1024px・860px・520px
 *     重なり            相談バー 60
 *     主な色            管理画面の値（初めは紺の地）・橙 #f0831e・本文の文字 #34404d
 *     押せる部品の高さ   48px 以上（相談の帯のボタン）
 *     出す・出さない     flow（相談の流れ）・season（季節の案内）・trust（所在地と監修者）
 *
 * ── 予備のフッター（footer.php）──────────────────────────────────────
 *     CSS の場所        部品の <style>（本文の中）
 *     幅の区切り        1024px・860px・520px
 *     重なり            相談バー 60
 *     主な色            紺の地 #0a2e5c・文字 #dfe8f2・橙 #f0831e・LINE #06c755
 *     相談の入口        本文にフォームが無いとき、#form の入口（.ksth-rf-anchor）を置く
 * ========================================================================== */


/* ============================================================================
 * §HF90d 方式の組み合わせごとの、画面下の相談バーと本文の下の余白
 * ----------------------------------------------------------------------------
 *   ヘッダーとフッターの方式は、別々に選べる（外観 → カスタマイズ）。
 *   2026年9月28日に、9通りの組み合わせを記事のページで開いて測った。
 *
 *     ヘッダー   フッター   相談バー            重なり  高さ(1280/390)  下の余白の取り方
 *     ─────────────────────────────────────────────────────────
 *     site      site       .fl-float           990     68 / 66        body に 84px
 *     site      dynamic    .fl-float           990     68 / 66        body に 84px
 *     site      none       .fl-float           990     68 / 66        body に 84px
 *     dynamic   site       .ksth-sf-float      60      73 / 71        フッターの空き 84px
 *     dynamic   dynamic    .ksth-df-float      60      71 / 69        フッターの空き 84px
 *     dynamic   none       （出ない）          —       —              —
 *     none      site       .ksth-sf-float      60      73 / 71        フッターの空き 84px
 *     none      dynamic    .ksth-df-float      60      71 / 69        フッターの空き 84px
 *     none      none       （出ない）          —       —              —
 *
 *   ・相談バーは、どの組み合わせでも2つ以上は出ない
 *   ・「dynamic ＋ none」と「none ＋ none」では、相談バーが出ない。相談の入口は、ヘッダーの
 *     相談のボタン（dynamic のとき）と本文の末尾の相談フォームだけになる。
 *     相談の数を保つため、ふだんのページは site か dynamic のフッターと組み合わせる
 *   ・fl 版のヘッダー（site）を選ぶと、フッターの方式にかかわらず fl 版の相談バーが出る
 *     （TOP と同じ見た目の相談バーにそろえるため。フッターの相談バーは出さない）
 * ========================================================================== */


/* ============================================================================
 * §HF90e ヘッダー・フッターの目印（読み上げ・検索エンジン・AI が読む骨組み）
 * ----------------------------------------------------------------------------
 *   ヘッダー・フッターは、HTML の意味の決まった要素で書かれている。読み上げのソフトは
 *   この目印で「ヘッダーへ」「本文へ」と飛べ、検索エンジンや AI の読み取りも、
 *   どこがページの本文かを見分けやすくなる。2026年9月28日に記事のページで確かめた並び。
 *
 *     順番   要素（目印）                        出す部品
 *     ────────────────────────────────────────────────
 *     1      a.ksth-skip「本文へスキップ」→ #main  header.php
 *     2      header（fl 版は #flHd、ダイナミックは #ksthDh）  ヘッダーの部品
 *     3      nav「メインメニュー」                 ヘッダーの部品
 *     4      main#main                            テンプレート（本文）
 *     5      nav「パンくず」「この記事の見出し」「前後の記事」  テンプレート（本文）
 *     6      footer「サイトのフッター」            フッターの部品
 *     7      nav（フッターのリンクの列）           フッターの部品
 *
 *   ・このファイルは、どの目印も隠さない。スマホの幅で閉じているメニューも、HTML には
 *     入っていて、読み上げ・検索エンジンからは見える
 *   ・「本文へスキップ」は、Tab を1回押すと出る（§HF04・§HF12）
 * ========================================================================== */


/* ============================================================================
 * §HF90f ページの種類ごとの出方（2026年9月28日・方式 site・スマホ 390px）
 * ----------------------------------------------------------------------------
 *     ページ                      body の class          ヘッダー  フッター  相談バー  相談フォーム  応答
 *     ──────────────────────────────────────────────────────────
 *     投稿（記事）                 ksth-kind-post          ○        ○        ○        ○（#form）   200
 *     固定ページ（Elementor）      ksth-kind-page          ○        ○        ○        ○（#form）   200
 *     サイト内検索（/?s=修繕）      ksth-kind-search        ○        ○        ○        ○（#form）   200
 *     見つからない（404）          ksth-kind-404           ○        ○        ○        ○（#form）   404
 *     カテゴリーの一覧              ksth-kind-category      ○        ○        ○        ○（#form）   200
 *     Elementor のキャンバス       elementor-template-canvas  －     －        －        ページしだい
 *
 *   ・どの種類のページにも、ヘッダーの「無料一括見積」・相談バーの「30秒で無料相談・一括見積」と
 *     「LINE」・ページの末尾の相談フォーム（#form）が1つずつある
 *   ・404 のページは、応答の番号 404 のまま出す（検索エンジンに「無いページ」と正しく伝わる）。
 *     リダイレクトのプラグイン（All 404 Redirect to Homepage など）を有効にすると、
 *     この表の 404 の行は TOP への転送に変わる
 *   ・キャンバスは、ヘッダー・フッターを出さない特別なページ用（§HF93a）
 * ========================================================================== */


/* ============================================================================
 * §HF91 色の変え方
 * ----------------------------------------------------------------------------
 *   fl 版のヘッダー・site のフッターは、TOP と同じ色で固定（紺 #0a2e5c・橙 #f0831e・
 *   LINE #06c755）。変えるときは header.php §H25・template-parts/footer.php の CSS を直す。
 *
 *   ダイナミックヘッダー・フッターの色は、管理画面で変えられる。
 *     ・外観 → カスタマイズ →「修繕の窓口：ヘッダー・フッター」
 *       → :root に --ksth-dh-bg・--ksth-dh-text・--ksth-df-bg・--ksth-df-text が出る
 *     ・Elementor → サイト設定 →「サイトのヘッダー（修繕の窓口）」「サイトのフッター（修繕の窓口）」
 *       → Elementor のサイト設定が優先される（includes/customizer-functions.php の ksth_mod）
 *     部品は、この色から、文字の色・線の色・乗せたときの色を計算して、
 *     ヘッダー・フッターの要素に直接書く（--ksth-dh-bg-c など）。
 *     地の色と文字の色が近すぎると読めなくなるため、変えたら §HF99 の 5) で確かめる。
 * ========================================================================== */


/* ============================================================================
 * §HF91a 色を変えるときの読みやすさの目安
 * ----------------------------------------------------------------------------
 *   文字と地の色の差（コントラスト比）は、ふつうの文字で 4.5 以上、大きな文字・ボタンの枠・
 *   キーボードの枠で 3 以上が目安（WCAG 2.2）。今の組み合わせを計算した値。
 *
 *     比      文字（線）の色   地の色      使っている所
 *     ────────────────────────────────────────────
 *     15.11   #1d2733          #ffffff     fl 版のメニューの文字
 *     13.48   #0a2e5c          #ffffff     ヘッダーのサイト名・見出しの紺
 *     13.48   #ffffff          #0a2e5c     フッター・相談バーの白い文字
 *     10.89   #dfe8f2          #0a2e5c     site のフッターの文字
 *      9.14   #c9d6e6          #0a2e5c     ダイナミックフッターの文字の初めの値
 *      7.61   #ffb35c          #0a2e5c     紺の地の上のキーボードの枠（§HF09）
 *      5.67   #0b66c3          #ffffff     白い地の上のキーボードの枠
 *      5.47   #5b6b7c          #ffffff     補助の文字（実績の説明など）
 *      2.63   #ffffff          #f0831e     橙のボタンの白い文字（下の色）
 *      2.26   #ffffff          #06c755     LINE のボタンの白い文字
 *      2.38   #0b66c3          #0a2e5c     紺の地の上の青い枠（§HF09 で橙にした）
 *
 *   橙と緑のボタンの白い文字は、TOP と同じ見た目（ブランドの色）のため、このファイルでは
 *   変えていない。太字で大きめの文字にしてあるが、目安の 3 には届かない。
 *   色を見直すときは、橙を #c9660d（白い文字で 3.9）、緑を #05a847 前後にすると目安に近づく。
 *   ダイナミックヘッダー・フッターの色を管理画面で変えるときも、この表の目安で確かめる。
 * ========================================================================== */


/* ============================================================================
 * §HF91b ダイナミックヘッダー・フッターの色の組み合わせの例
 * ----------------------------------------------------------------------------
 *   管理画面で色を選ぶときの例。比は文字と地の色の差（4.5 以上なら、ふつうの文字でも読める）。
 *
 *     地の色      文字の色    比      向いている所
 *     ─────────────────────────────────────────
 *     #ffffff     #0a2e5c     13.48   ヘッダー（初めの値）
 *     #f5f7fa     #1d2733     14.07   ヘッダー（うすい灰色の地）
 *     #eaf3fc     #0a2e5c     12.02   ヘッダー（うすい水色の地。TOP のファーストビューに近い）
 *     #0a2e5c     #ffffff     13.48   フッター（見出し）
 *     #0a2e5c     #c9d6e6      9.14   フッター（初めの値）
 *     #0a4f9a     #ffffff      8.08   フッター（少し明るい紺）
 *     #3f3494     #ffffff      9.86   フッター（紫。TOP のタイルの4色目）
 *     #1b6f66     #ffffff      5.98   フッター（緑。TOP のタイルの3色目）
 *     #1f6fd1     #ffffff      4.94   フッター（青。目安ぎりぎり）
 *
 *   避けたい組み合わせ
 *     #f0831e     #ffffff      2.63   橙の地に白い文字（小さな文字が読みにくい）
 *     #ffffff     #9aa7b4      2.45   白い地に薄い灰色の文字
 *   地の色だけを変えて、文字の色を初めの値のままにすると、差が小さくなることがある。
 *   2つの色は、組にして変える。
 * ========================================================================== */


/* ============================================================================
 * §HF92 メニューの項目を変えるとき
 * ----------------------------------------------------------------------------
 *   ・fl 版のヘッダー：TOP と同じ項目（お役立ちガイド・よくある質問・ご利用者の声・
 *     費用の目安・無料一括見積）。header.php §H25 が台帳を見て、無いページへの
 *     リンクは出さない（リンク切れを作らない）
 *   ・ダイナミックヘッダー・フッター：外観 → メニュー の「ヘッダーのメニュー」
 *     「フッターのメニュー」。項目が多いと、スマホで開いたメニューが長くなる。
 *     長くなっても、メニューの中で上下に動かせる（§HF03）。項目は8つ前後までにする
 *   ・どのメニューにも、電話番号は入れない（受付は LINE とお問い合わせフォームだけ）
 * ========================================================================== */


/* ============================================================================
 * §HF92a ヘッダー・フッターから張っている内部リンク（2026年9月28日に数えた値）
 * ----------------------------------------------------------------------------
 *   ヘッダーとフッターは、WordPress が組み立てるどのページにも出る。ここから張るリンクは、
 *   サイトの中の主要なページ（TOP・分類のページ）へ、読者と検索エンジンの両方を案内する
 *   道になる（どのページからも TOP と分類のページに1回で行ける）。
 *
 *     場所          リンクの数   TOP   相談フォーム   LINE   電話   外のサイト
 *     ─────────────────────────────────────────────────
 *     ヘッダー          9          1        1           1      0        0
 *     相談バー          2          0        1           1      0        0
 *     フッター（site）   25          1        0           0      0        0
 *     フッター（動的）   28          1        0           0      0        0
 *
 *     ヘッダーから行ける分類のページ
 *       /column/・/faq/・/jirei/・/hiyou/・/kinkyu/・/keikaku/
 *     フッターから行ける分類のページ
 *       /kinkyu/・/hiyou/・/komarigoto/・/keikaku/・/hojokin/・/checklist/・/setsubi/・
 *       /shisetsu/・/taiou/・/nagare/・/yougo/・/taiyoko/・/area/・/company/・/privacy/・
 *       /column/・/mitsumori/・/faq/
 *
 *   ・リンクは HTML に書かれている。このファイルは、リンクを CSS で隠したり、読者に見えない
 *     リンクを作ったりしない（検索エンジンの決まりで、見えない文字・リンクは嫌われる）
 *   ・スマホの幅で閉じているメニューのリンクも、HTML には入っている（開けば見える）
 *   ・電話のリンクは張らない（受付は LINE とお問い合わせフォームだけ）
 * ========================================================================== */


/* ============================================================================
 * §HF92b スマホで開いたメニューに入る項目の数の目安
 * ----------------------------------------------------------------------------
 *   開いたメニューの高さの上限は「画面の見える高さ − 120px」（§HF03）。上限を超えると、
 *   メニューの中で上下に動かして見る形になる（見えなくなるわけではない）。
 *   2026年9月28日に測った、今のメニューの高さと1項目あたりの高さ。
 *
 *     版              今の高さ   項目   1項目あたり
 *     ────────────────────────────────────
 *     fl 版           407px      6      47px（実績の数字・見積・LINE のボタンを含む）
 *     ダイナミック     318px      6      45px
 *
 *   画面の高さごとに、中で動かさずに全部見える、足せる項目の数の目安
 *
 *     画面の高さ   上限     fl 版で足せる数   ダイナミックで足せる数
 *     ───────────────────────────────────────────
 *     560px        440px    0                2
 *     667px        547px    2                5
 *     844px        724px    6                9
 *     915px        795px    8                10
 *
 *   ・画面の高さは、ブラウザのアドレス欄などを除いた、見えている高さ
 *   ・項目を足しても、上限を超えた分はメニューの中で動かして見られる。読めなくなることはない
 *   ・読者が迷わないよう、メニューは8項目前後までにし、細かいページはフッターに置く
 * ========================================================================== */


/* ============================================================================
 * §HF92c メニューの項目の文字の長さ（パソコンの幅）
 * ----------------------------------------------------------------------------
 *   861px 以上では、ヘッダーのメニューは1行に並び、折り返さない。項目の文字が長いと、
 *   狭いパソコン・タブレットの幅で横にはみ出す（§HF13 の直しは、今の項目の長さで測った）。
 *   2026年9月28日に、1024px の幅で測った、今の項目の幅。
 *
 *     項目                          幅（fl 版）   幅（ダイナミック）
 *     ────────────────────────────────────────────
 *     ご相談実績 710 施設            121px         （狭い幅で隠れる。1280px 以上で出る）
 *     記事 153 本                    73px         （狭い幅で隠れる。1280px 以上で出る）
 *     お役立ちガイド                  98px          98px
 *     よくある質問                    84px          84px
 *     ご利用者の声                    84px          84px
 *     費用の目安                      70px          70px
 *     24時間受付 無料一括見積         122px         （相談のボタンは別の並び）
 *
 *   ・1文字は約 13.5px（fl 版の文字の大きさ）。項目を1つ足すと、文字の幅＋項目の間 16px が増える
 *   ・fl 版で項目を足したり、文字を長くしたりしたときは、861・900・940・1024px の幅で
 *     §HF99c の 3 を確かめ、はみ出すなら §HF13 の幅（959px）を広げる
 *   ・ダイナミックヘッダーの項目は「外観 → メニュー」で変える。1項目は7文字前後までにする
 * ========================================================================== */


/* ============================================================================
 * §HF93 相談の入口（フォームと LINE）が、どのページにも必ずある決まり
 * ----------------------------------------------------------------------------
 *   読む人が「相談したい」と思った所で、すぐに入口が見えるよう、次の3か所に置く。
 *     1) ヘッダーの「無料一括見積」（fl 版）・相談のボタン（ks 版・ダイナミック）
 *     2) 画面下の相談バー（「30秒で無料相談・一括見積」と「LINE」）
 *     3) 本文の末尾の相談フォーム（[contact-form-7 id="0040899" title="コンタクトフォーム 1"]。
 *        本文にフォームが無いときは、footer.php が末尾に1つだけ置く。id="form"）
 *   ボタンの行き先
 *     相談フォーム  #form（同じページのフォームの枠）
 *     LINE          https://contact.worksmobile.com/p/worksat-invitation?externalCode=73bd2ae4-9188-4969-815b-04aaa17ad766
 *   このファイルは、2) が入力の邪魔をしないこと（§HF05）と、2) が二重に出ないこと（§HF15）を受け持つ。
 * ========================================================================== */


/* ============================================================================
 * §HF93a 相談の入口が、画面のどこにあるか（2026年9月28日に確かめた値）
 * ----------------------------------------------------------------------------
 *     幅          ヘッダー                         画面下の相談バー        本文の末尾
 *     ────────────────────────────────────────────────────
 *     〜860px      ☰ を開くと「無料一括見積」「LINE」  いつも出ている           相談フォーム
 *     861px〜      「無料一括見積」のボタン            いつも出ている           相談フォーム
 *
 *   ・相談バーの「30秒で無料相談・一括見積」は #form（同じページの相談フォーム）へ飛ぶ。
 *     飛んだ直後に、フォームの枠の外に薄い橙の輪を出す（§HF19）
 *   ・相談バーの「LINE」は、新しいタブで LINE の友だち追加の画面を開く
 *   ・相談フォームに入力している間は、スマホ・タブレットでは相談バーを隠す（§HF05）
 *   ・ヘッダーもフッターも出さない方式では、相談バーも出ない。本文の末尾の相談フォームだけになる
 *     （相談の数を減らさないため、「出さない」の方式は、Elementor のキャンバスで
 *     作る特別なページだけに使う）
 * ========================================================================== */


/* ============================================================================
 * §HF93b 相談の入口の文言（2026年9月28日に、ページに出ている文字を読み取った値）
 * ----------------------------------------------------------------------------
 *     場所                          文言                          行き先
 *     ─────────────────────────────────────────────────────
 *     ヘッダー（fl 版・861px 以上）  24時間受付／無料一括見積        #form
 *     ヘッダー（fl 版・開いたメニュー）  上と同じ ＋「LINEで相談する」  #form・LINE
 *     画面下の相談バー              30秒で無料相談・一括見積        #form
 *     画面下の相談バー              LINE                          LINE（新しいタブ）
 *     ページの末尾                  相談フォーム（Contact Form 7）  送信すると管理者と
 *                                                                ご本人にメール
 *
 *   ・文言は部品（header.php §H25・各フッター）が持つ。このファイルは文言を持たず、変えない
 *   ・電話番号の入口は無い（受付は LINE とお問い合わせフォームだけ）
 *   ・メールが届く仕組みは、Contact Form 7 と WP Mail SMTP の設定、functions.php の
 *     自動返信の処理が受け持つ（このファイルの外）
 * ========================================================================== */


/* ============================================================================
 * §HF94 条件64（メニューが重複する・画面を動かすとメニューの文字が消える）で調べたこと
 * ----------------------------------------------------------------------------
 *   2026年9月28日に、検証環境（WordPress 6.8.2）の記事のページで確かめた。
 *   メニューの位置は、画面の上の端からの距離（px）。
 *
 * ── 1) メニューを開いて、画面を下へ 400px 動かす（スマホ 390px・高さ 700px）──────────
 *
 *     版              差し換える前                  差し換えた後
 *     ─────────────────────────────────────────────────
 *     fl 版           上の端 −297・下の端 112          上の端 103・下の端 512（全部見える）
 *                     （6項目のうち4つが画面の外）
 *     ダイナミック     上の端 −304・下の端 15           上の端 96・下の端 415（全部見える）
 *                     （6項目すべてが画面の外）
 *     ks 版           （同じように画面の外へ流れる）   上の端 96・下の端 493（全部見える）
 *
 *     閉じたあとは、どの版もヘッダーが元の「画面と一緒に流れる」形に戻る。
 *
 * ── 2) 高さの低い画面（390px・高さ 420px）で、メニューを開く ───────────────────
 *
 *     版              差し換える前                  差し換えた後
 *     ─────────────────────────────────────────────────
 *     fl 版           メニューの下の端 443（画面の     下の端 403。画面の中に収まり、
 *                     外。最後の項目に届かない）       メニューの中で動かして最後まで届く
 *     ダイナミック     2項目が相談バーの下に隠れる      隠れる項目 0（メニューが相談バーの上）
 *
 * ── 3) そのほか ─────────────────────────────────────────────────
 *
 *     調べたこと                                        結果
 *     ─────────────────────────────────────────────────
 *     ヘッダーが二重に出るか（WordPress のページ）         出ない（§HF15 で見張る）
 *     本文に貼った完成HTMLのヘッダー                      theme.css §20 が隠す
 *     画面下の相談バーが二重に出るか（6通りの組み合わせ）   出ない（§HF15 で見張る）
 *     メニューを開いている間の読了バー                    メニューの上に線が重なっていた → 隠す
 *
 *   §HF03 は、メニューが開いている間だけ効く。閉じているときの見た目・動きは変わらない。
 * ========================================================================== */


/* ============================================================================
 * §HF94a 条件64 の不具合を、自分の端末で確かめる手順
 * ----------------------------------------------------------------------------
 *   差し換える前の不具合（メニューが画面の外へ流れる）が直ったことを、スマホで確かめる。
 *     1) スマホで、WordPress で作ったページ（記事・検索・Elementor のページ）を開く
 *        （TOP と完成HTMLのページは、このファイルを読まないため対象外）
 *     2) 右上の ☰ を押して、メニューを開く
 *     3) メニューの外（本文の所）を指で上へ動かし、ページを下へ進める
 *     4) ヘッダーとメニューが画面の上に留まり、項目が全部読めれば正しい
 *     5) ☰（×の形）を押して閉じる。ページを動かすと、ヘッダーが画面と一緒に流れれば正しい
 *   パソコンでは、ブラウザの幅を 860px 以下にすると、同じことを確かめられる。
 * ========================================================================== */


/* ============================================================================
 * §HF94b このファイルが頼っている、部品の JavaScript の印
 * ----------------------------------------------------------------------------
 *   このファイルの見張りの規則は、部品の JavaScript が付ける印（class・属性）を見て動く。
 *   部品の JavaScript を直すときは、この印の名前と付け方を変えない。
 *
 *     印                         付ける所                    付ける部品            使う節
 *     ──────────────────────────────────────────────────────────
 *     is-open                    .fl-nav（メニュー）          header.php §H25       §HF03 §HF08 §HF14
 *     is-open                    .ksth-sh（ヘッダーの器）     template-parts/header.php  §HF03 §HF08 §HF14
 *     is-open                    .ksth-dh（ヘッダーの器）     template-parts/dynamic-header.php  §HF03 §HF08 §HF14
 *     is-open                    .ksth-dh-menu__i（子メニューの項目）  同上             使わない
 *     aria-expanded="true"       ☰ のボタン                   各ヘッダー             部品の CSS（☰ を × にする）
 *     fl-lock                    body                         TOP の HTML の JavaScript  §HF06
 *     hidden                     .fl-pop・.fl-ov・.ks-dw       TOP・完成HTMLの JavaScript  §HF06
 *     ksth-lock                  body・html                   （予約。今は付ける部品が無い）  §HF04・theme.css §03
 *     dialog-prevent-scroll      body                         Elementor のポップアップ  §HF04・theme.css §03
 *
 *   ・fl 版は、印をメニュー（.fl-nav）に付ける。ks 版・ダイナミックは、ヘッダーの器に付ける。
 *     そのため §HF03 の書き方が、fl 版だけ :has() を使う形になっている
 *   ・Esc キーを押すと、どの版もメニューが閉じて印が外れる（部品の JavaScript）
 * ========================================================================== */


/* ============================================================================
 * §HF95 表示の速さで、ヘッダー・フッターに気をつけること
 * ----------------------------------------------------------------------------
 *   ・ロゴは正方形の小さな画像1枚（44px・40px で出す）。幅と高さを HTML に書き、
 *     読み込み中にヘッダーの高さが変わらないようにしている（読み込み中のずれ：CLS）
 *   ・ヘッダー・フッターの図柄（アイコン）は、画像ではなく SVG で描く
 *   ・光るボタン（fl-shine）の動きは、transform だけで描く（画面の描き直しを増やさない）。
 *     動きを減らす設定の人には出さない
 *   ・このファイルの規則は、:is()・:has() でまとめて書き、同じ指定を部品ごとに
 *     繰り返さない（ファイルの大きさを抑える）
 *   ・画面下の相談バーの分の余白（84px）は、初めから取っておく（後から相談バーが出て、
 *     本文の末尾が隠れたり、ページの高さが変わったりしない）
 *   ・本文の上の余白も、初めから正しい値（0）にする。途中で変わると、ヘッダーと本文が
 *     動いて見え、読み込み中のずれ（CLS）が増える（§HF02 に測った値）
 * ========================================================================== */


/* ============================================================================
 * §HF95a 使っている CSS の書き方と、対応していないブラウザでの動き
 * ----------------------------------------------------------------------------
 *   このファイルの見張りの規則は、新しい CSS の書き方を使う。対応していない古いブラウザでは、
 *   その規則だけが読み飛ばされ、差し換える前と同じ動きになる（壊れることはない）。
 *
 *     書き方                     使っている節        おおむね対応しているブラウザ
 *     ────────────────────────────────────────────────────────
 *     :has()                    §HF03 §HF05 §HF06    Chrome・Edge 105〜、Safari 15.4〜、
 *                               §HF15               Firefox 121〜
 *     100dvh（見える高さ）       §HF03               Chrome 108〜、Safari 15.4〜、Firefox 101〜
 *                                                   （対応しないときは 100vh の指定を使う）
 *     overscroll-behavior        §HF03               Chrome 63〜、Firefox 59〜、Safari 16〜
 *     position: sticky           §HF03               今の主なブラウザすべて
 *     @media (scripting: none)   §HF17               Chrome 120〜、Safari 17〜、Firefox 113〜
 *     @media (prefers-contrast)  §HF18               Chrome 96〜、Safari 14.1〜、Firefox 101〜
 *     @media (forced-colors)     §HF14               Chrome・Edge 89〜、Firefox 89〜
 *     :focus-visible             §HF09               今の主なブラウザすべて
 *     env(safe-area-inset-…)     部品                 iPhone の Safari ほか
 *
 *   ・:has() を使う規則は、:has() の中に :has() を入れない（入れると規則ごと捨てられる。§HF96）
 *   ・2026年9月28日に、Chrome に規則を1つずつ読ませ、捨てられる規則が無いことを確かめた
 * ========================================================================== */


/* ============================================================================
 * §HF95b このファイルの大きさと、本番で小さくする方法
 * ----------------------------------------------------------------------------
 *   このファイルは、保守する人が読んで分かるよう、説明（コメント）を多く書いている。
 *   2026年9月28日の大きさ。
 *
 *     形                          大きさ        送られる大きさ（gzip で圧縮したとき）
 *     ────────────────────────────────────────────────────
 *     このファイル（説明を含む）   約 158KB      約 37KB
 *     説明と空白を除いた規則だけ     約 13.0KB     約 3.0KB
 *     初版（103行）                 約 6KB        約 2KB
 *
 *   ページの表示の前に読み込まれる CSS のため、送る大きさは小さいほど表示が速い。
 *   本番では、次のどちらかで説明を除いて送る。
 *     ・W3 Total Cache：パフォーマンス → 一般設定 →「Minify」を有効にし、CSS の縮小を選ぶ
 *       （説明と空白を除いて送る。変えたあとは「すべてのキャッシュを削除」）
 *     ・このファイルを縮めた版（header-footer.min.css）を作り、
 *       assets/css/header-footer.asset.php の 'src' をその版に変える
 *   どちらも、規則の中身は変わらない。ここに書いた説明は、テーマのファイルの中に残る。
 * ========================================================================== */


/* ============================================================================
 * §HF96 このファイルに書き足すときの決まり（保守する人へ）
 * ----------------------------------------------------------------------------
 *   1) 部品の見た目（色・大きさ・並び）は、部品のファイルの CSS で直す。
 *      このファイルには、部品どうしの間のことと、困ったときの見張りだけを書く
 *   2) ふだんの状態で見た目を変える規則を書かない。書き足したら、§HF99 の 1) で
 *      差し換えの前と後の画面を画素ごとに比べ、違いが無いことを確かめる
 *   3) 部品の class 名は、部品のファイルと同じ名前を使う（冒頭の表）。部品の class 名を
 *      変えたときは、このファイルの同じ名前も直す
 *   4) :has() の中に :has() を入れない（ブラウザが規則ごと捨てる）
 *   5) body の直下の部品（ヘッダー・fl 版の相談バー）は「body > …」で書き、本文の中に貼った
 *      完成HTMLの同じ class（theme.css §20 が隠すもの）に当たらないようにする
 *   6) 重なりの順番（z-index）を足すときは、冒頭の表と theme.css §24 の表に合わせる
 * ========================================================================== */


/* ============================================================================
 * §HF96a Elementor で編集するとき
 * ----------------------------------------------------------------------------
 *   ・このファイルは、Elementor の編集画面の左のパネルには読み込まれない。
 *     右のプレビューの中では、公開ページと同じヘッダー・フッターが出る
 *     （header.php §H19：見たまま編集できるように）
 *   ・プレビューの中では、画面下の相談バーなどの固定の部品を editor.css が隠す
 *     （編集の邪魔をしないため。公開ページでは出る）
 *   ・Elementor のページに、TOP の完成HTMLを HTML ウィジェットで貼ったときは、
 *     貼った HTML の中のヘッダー・相談バーを theme.css §20 が隠す。
 *     詳細条件の窓（.fl-pop）を閉じたあとに画面が止まったら、§HF06 が戻す
 *   ・Elementor Pro のテーマビルダーでヘッダー・フッターを作ったときは、
 *     テーマのヘッダーは出ない（§HF11）。Elementor Pro のヘッダーに相談の入口
 *     （#form へのボタン・LINE）を入れる
 *   ・ヘッダー・フッターの方式と色は、Elementor → サイト設定 でも変えられる（§HF91）
 * ========================================================================== */


/* ============================================================================
 * §HF96b 部品の CSS とぶつからないための表（このファイルが使う強さ）
 * ----------------------------------------------------------------------------
 *   部品の CSS を直すときに、このファイルの規則に負けたり勝ったりする所の一覧。
 *   強さは（id の数, class・属性・疑似クラスの数, 要素の数）。
 *
 *     このファイルの選び方                                        強さ     効く状態
 *     ──────────────────────────────────────────────────────
 *     body > header.fl-hd:has(.fl-nav.is-open)                     0,3,2    fl 版のメニューが開いている
 *     body > header.fl-hd .fl-nav.is-open                           0,3,2    同上
 *     body > .ksth-sh.is-open                                       0,2,1    ks 版のメニューが開いている
 *     body > .ksth-dh.is-open                                       0,2,1    ダイナミックのメニューが開いている
 *     body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta)   0,4,1    同上
 *     html:has(…相談バー)                                          0,1,1    相談バーがあるページ
 *     body:has(…:focus) …相談バー（!important）                    0,3,1〜  入力欄を選んでいる間
 *     body.ks-wp.fl-lock:not(:has(…))（!important）                0,3,1〜  fl-lock が残ったとき
 *     :is(.fl-logo, …) img                                          0,1,1    いつも（値は部品と同じ）
 *     body > header.fl-hd .fl-nav（861〜959px）                     0,2,2    その幅のとき
 *     body > .fl-float :is(a, button):focus-visible                0,2,2    Tab で選んだとき
 *     body:has(> .fl-float) …相談バー（!important）                0,1,1〜  相談バーが2つあるとき
 *
 *   部品の CSS は、このファイルより後ろに並ぶ。同じ強さなら部品が勝つ。
 *   上の表より弱い書き方で部品の CSS を足しても、上の状態の間は、このファイルの値が残る。
 * ========================================================================== */


/* ============================================================================
 * §HF96c class 名の決まり
 * ----------------------------------------------------------------------------
 *   class 名の頭の文字で、どの部品のものかが分かる。
 *
 *     頭の文字       部品                                   出すファイル
 *     ────────────────────────────────────────────────────
 *     fl-            TOP と同じ見た目の部品                  html/index.html・header.php §H25
 *     ks-            完成HTMLの共通の部品                    完成HTML・共通CSS（ksth-shell）
 *     ksth-sh-       ks 版のヘッダー                          template-parts/header.php
 *     ksth-dh-       ダイナミックヘッダー                     template-parts/dynamic-header.php
 *     ksth-sf-       site のフッター                          template-parts/footer.php
 *     ksth-df-       ダイナミックフッター                     template-parts/dynamic-footer.php
 *     ksth-rf-       予備のフッター                           footer.php
 *     ksth-fh        予備のヘッダー                           header.php §H21
 *     ksth-hf-       このファイルの変数・動き                 assets/css/header-footer.css
 *     ks-dh・ks-df   初版のダイナミックヘッダー・フッター     （今は出さない。§HF16）
 *
 *   ・部品の中の小さな部品は「__」でつなぐ（例：.ksth-df-float__b は相談バーの中のボタン）
 *   ・見た目の違い（並び方・色の違い）は「--」でつなぐ（例：.ksth-dh--stacked）
 *   ・状態は is- で表す（is-open：開いている、is-on：選ばれている）
 *   ・このファイルで新しく作る変数・動きの名前は、必ず ksth-hf- で始める
 *     （部品・theme.css・Elementor の名前と重ならない）
 * ========================================================================== */


/* ============================================================================
 * §HF96e このファイルの変数（--ksth-hf-）
 * ----------------------------------------------------------------------------
 *     変数                      値            使う節      意味
 *     ─────────────────────────────────────────────────
 *     --ksth-hf-z-header         50            （説明用）   ks 版・ダイナミックのヘッダーの重なり
 *     --ksth-hf-z-float          60            （説明用）   フッターの相談バーの重なり
 *     --ksth-hf-z-menu           70            §HF03       開いている間のヘッダーの重なり
 *     --ksth-hf-z-progress       119           （説明用）   読了バーの重なり
 *     --ksth-hf-z-fl-float       990           （説明用）   fl 版の相談バーの重なり
 *     --ksth-hf-z-fl-header      1000          （説明用）   fl 版のヘッダーの重なり
 *     --ksth-hf-float-h          84px          §HF05       相談バーの分の余白
 *     --ksth-hf-hd-h             120px         §HF03       開いたメニューの上限から引く高さ
 *     --ksth-hf-admin            管理バーの高さ  §HF03       ログイン中に留める位置
 *     --ksth-hf-focus            #0b66c3       （説明用）   白い地の上のキーボードの枠
 *     --ksth-hf-focus-on-dark    #ffb35c       §HF09 §HF16  紺の地の上のキーボードの枠
 *
 *   ・（説明用）の変数は、部品の値を1か所で見られるように置いている。部品の値を変えたら、
 *     ここも同じ値に直す（このファイルの規則は、これらの変数を使わない）
 *   ・--ksth-dh-bg・--ksth-dh-text・--ksth-df-bg・--ksth-df-text は、カスタマイザーが上書きする
 *     初めの値（§HF01・§HF91）
 * ========================================================================== */


/* ============================================================================
 * §HF96d このファイルの規則の索引
 * ----------------------------------------------------------------------------
 *   このファイルの規則を、節ごとに並べた一覧（選び方と、効く画面の幅・条件）。
 *   長い選び方は、途中で「…」と略している。§HF16（初版の class との互換）の規則は、
 *   .ks-dh・.ks-df で始まる約60の規則のため、ここでは並べない。
 *
 *   §HF01
 *     :root
 *   §HF02
 *     body.ksth-header-site.ks-wp, body.ksth-header-dynamic, body.ksth-header-none, bod…
 *     body.ksth-header-dynamic .ks-stab, body.ksth-header-none .ks-stab
 *     body.elementor-template-canvas.ks-wp
 *   §HF03
 *     body > header.fl-hd:has(.fl-nav.is-open)（max-width: 860px のとき）
 *     body > header.fl-hd .fl-nav.is-open（max-width: 860px のとき）
 *     body > header.fl-hd .fl-nav.is-open（100dvh に対応するとき）
 *     body > .ksth-sh.is-open
 *     body > .ksth-sh.is-open .ksth-sh-nav
 *     body > .ksth-sh.is-open .ksth-sh-nav（100dvh に対応するとき）
 *     body > .ksth-dh.is-open
 *     body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta)
 *     body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta)（100dvh に対応するとき）
 *     body.admin-bar > header.fl-hd:has(.fl-nav.is-open), body.admin-bar > .ksth-sh.is-…（max-width: 600px のとき）
 *     body:has(> header.fl-hd .fl-nav.is-open) .ksth-progress, body:has(> .ksth-sh.is-o…
 *   §HF04
 *     body.ksth-lock :is(.fl-float, .ksth-df-float, .ksth-rf-float), body.dialog-preven…
 *     :is(.ksth-skip, .ks-skip, .ksth-sh-skip):focus, :is(.ksth-skip, .ks-skip, .ksth-s…
 *   §HF05
 *     html:has(:is(.fl-float, .ksth-sf-float, .ksth-df-float, .ksth-rf-float))
 *     body:has(:is(.wpcf7, .ks-wp-main, main) :is(input:not([type="submit"]):not([type=…（max-width: 1024px のとき）
 *     :is(.fl-float__b, .fl-float__l, .ksth-sf-float__b, .ksth-sf-float__l, .ksth-df-fl…
 *   §HF06
 *     body.ks-wp.fl-lock:not(:has(.fl-pop:not([hidden]), .fl-nav.is-open, .ks-dw:not([h…
 *     body.ks-wp .fl-ov:not([hidden]):not(:has(~ .fl-pop:not([hidden])))
 *   §HF07
 *     :is(.fl-logo, .fl-ft__logo, .ksth-sh-logo, .ksth-dh-logo, .ksth-fh__logo, .ksth-s…
 *     .ksth-dh .custom-logo-link
 *     :is(.fl-logo, .ksth-sh-logo, .ksth-dh-logo):not(:has(img))
 *   §HF08
 *     body > header.fl-hd .fl-nav.is-open > a:not(.fl-hd__cta):not(.fl-hd__line):not(:h…
 *     body > .ksth-dh.is-open .ksth-dh-nav:not(.ksth-dh-nav--cta) .ksth-dh-menu__a
 *     body > .ksth-sh.is-open .ksth-sh-nav .ksth-sh-a
 *     body > header.fl-hd .fl-hd__st
 *   §HF09
 *     body > .fl-float :is(a, button):focus-visible
 *     :is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb)
 *   §HF10
 *     :is(footer.ksth-sf, .ksth-df, .ksth-rf-ft, footer.fl-ft) :is(p, li, a, span, smal…
 *     footer.ksth-sf a:not([class*="btn"]):not([class*="float"]):not(.ksth-sf-logo), .k…
 *     :is(.ksth-sf-cp, .ksth-df-cp, .ksth-rf-cp, .fl-ft__cp)
 *   §HF11
 *     .elementor-location-header + .ks-wp-main, .elementor-location-header ~ .ks-wp-main
 *     .elementor-location-footer
 *     body.ksth-elementor-header > :is(header.fl-hd, .ksth-sh, .ksth-dh, .ksth-fh)
 *   §HF12
 *     body.admin-bar :is(.ksth-skip, .ks-skip):focus
 *     body.admin-bar .ksth-sh-skip:focus
 *     body.admin-bar :is(.ksth-skip, .ks-skip):focus（max-width: 600px のとき）
 *     body.admin-bar .ksth-sh-skip:focus（max-width: 600px のとき）
 *   §HF13
 *     body > header.fl-hd .fl-nav（min-width: 861px) and (max-width: 959px のとき）
 *     body > header.fl-hd .fl-hd__st span（min-width: 861px) and (max-width: 959px のとき）
 *     body > header.fl-hd .fl-hd__cta（min-width: 861px) and (max-width: 959px のとき）
 *     :is(.ksth-sf-float__b, .ksth-df-float__b, .ksth-rf-float__b, .fl-float__b, .ksth-…（max-width: 520px のとき）
 *   §HF14
 *     :is(.fl-hd__cta, .fl-hd__line, .fl-float__b, .fl-float__l, .ksth-sf-float__b, .ks…（forced-colors: active のとき）
 *     :is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb)（forced-colors: active のとき）
 *     body > header.fl-hd .fl-nav.is-open, body > .ksth-sh.is-open .ksth-sh-nav, body >…（forced-colors: active のとき）
 *     body > header.fl-hd, body > .ksth-sh, body > .ksth-dh（prefers-reduced-motion: reduce のとき）
 *     :is(.fl-float, .ksth-sf-float, .ksth-df-float, .ksth-rf-float, .ks-fix, .ks-stab,…（print）
 *     body > header.fl-hd, body > .ksth-sh, body > .ksth-dh（print）
 *     body.ksth-header-site.ks-wp（print）
 *   §HF15
 *     body > header.fl-hd ~ header.fl-hd
 *     body > .fl-float ~ .fl-float
 *     body:has(> .fl-float) :is(.ksth-sf-float, .ksth-df-float, .ksth-rf-float, .ks-fix)
 *     body:has(> .fl-float) :is(.ksth-sf-spacer, .ksth-df-spacer, .ksth-rf-spacer)
 *     body > :is(.ksth-sh, .ksth-dh) ~ :is(.ksth-sh, .ksth-dh)
 *   §HF17
 *     :is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb)（scripting: none のとき）
 *   §HF18
 *     body > header.fl-hd .fl-nav > a:not(.fl-hd__cta):not(.fl-hd__line), body > .ksth-…（prefers-contrast: more のとき）
 *     :is(footer.ksth-sf, .ksth-df, .ksth-rf-ft) a:not([class*="btn"]):not([class*="cta…（prefers-contrast: more のとき）
 *     :is(.fl-nb, .ksth-sh-nb, .ksth-dh-nb)（prefers-contrast: more のとき）
 *     :is(.fl-float__b, .fl-float__l, .ksth-sf-float__b, .ksth-sf-float__l, .ksth-df-fl…（prefers-contrast: more のとき）
 *   §HF19
 *     body.ks-wp [id="form"]:target
 *     body.ks-wp [id="form"]:target（prefers-reduced-motion: reduce のとき）
 * ========================================================================== */


/* ============================================================================
 * §HF97 改訂の記録
 * ----------------------------------------------------------------------------
 *   2026.09.23  初版（103行）。ダイナミックヘッダー・フッター（.ks-dh・.ks-df）、
 *               方式ごとの上の余白、Elementor Pro のヘッダー・フッターとの並び
 *   2026.09.28  作り直し。
 *               ・部品が .ksth-dh・.ksth-df などに変わったため、初版の規則は互換の節（§HF16）に移した
 *               ・スマホで開いたメニューを、画面を動かしても画面の中に留める（条件64）
 *               ・開いたメニューが相談バーの下に隠れない重なりの順番
 *               ・フォームの入力中は相談バーを隠す。Tab で進んだ先が相談バーに隠れない
 *               ・画面が止まったまま戻らないときの見張り（条件69）
 *               ・ロゴ・開いたメニューの文字の色・キーボードの枠・二重に出たときの片付け
 *               ・ログイン中の「本文へスキップ」が管理バーに隠れない
 *               ・fl 版のヘッダーが 861〜959px の幅で横にはみ出していたのを直した
 *               ・fl 版の相談バーの、Tab で選んだときの枠を橙にそろえた
 *               ・JavaScript が動かないときの ☰、コントラストを上げる設定、相談フォームへ飛んだときの目印
 * ========================================================================== */


/* ============================================================================
 * §HF97a 初版（2026.09.23・103行）の規則の移し先
 * ----------------------------------------------------------------------------
 *     初版の規則                                           今の置き場所
 *     ─────────────────────────────────────────────────────
 *     body.ksth-header-dynamic・-none・ksth-elementor-header    §HF02（site の fl 版・キャンバスを足した）
 *     の上の余白を0
 *     .ks-stab を隠す（dynamic・none）                           §HF02（そのまま）
 *     .ks-dh（ダイナミックヘッダーの器・ロゴ・メニュー・          §HF16（そのまま。キーボードの枠と、
 *     開閉ボタン・相談のボタン・960px 以上の並び）                ロゴが縮まない指定を足した）
 *     .ks-df（ダイナミックフッターの器・列・メニュー・下の段・     §HF16（そのまま。キーボードの枠を足した）
 *     900px 以上の4列）
 *     .elementor-location-header の後の本文の上の余白            §HF11（そのまま）
 *     .elementor-location-footer の重なり                        §HF11（そのまま）
 *     印刷で .ks-dh の開閉ボタン・相談のボタンを出さない          §HF16（そのまま）。今の部品の分は §HF14
 *
 *   初版の見た目は、古い class の要素が残っているページでだけ効く（今の部品は出さない）。
 * ========================================================================== */


/* ============================================================================
 * §HF98 よくある困りごとと、直す所
 * ----------------------------------------------------------------------------
 *   困りごと                                  よくある原因                        直す所
 *   ─────────────────────────────────────────────────────────────
 *   ヘッダーが2つ出る                          本文に TOP の HTML を貼った          theme.css §20 が隠す。
 *                                                                                  貼った HTML からヘッダーを消すのが確実
 *                                              Elementor Pro のヘッダーと、         Elementor Pro の表示条件を見直す。
 *                                              テーマのヘッダーが両方出る設定        このファイルは §HF11・§HF15 で片方を隠す
 *   画面下の相談バーが2つ出る                  完成HTMLの相談バー（.ks-fix）が      §HF15 が後の方を隠す。
 *                                              本文に残っている                     貼った HTML から消すのが確実
 *   スマホでメニューを開いて画面を動かすと、    ヘッダーが画面と一緒に流れる          §HF03（開いている間だけ留める）
 *   メニューが消える
 *   開いたメニューの下の方が見えない           相談バーの下に隠れている／            §HF03（重なりの順番・高さの上限）
 *                                              高さの上限が画面より大きい
 *   メニューの文字が白くて読めない             ほかの CSS がリンクを白にしている     §HF08。原因の CSS を探して直すのが確実
 *   ☰ を押してもメニューが開かない            JavaScript の途中のエラー             ブラウザの開発者ツールの「コンソール」で
 *                                                                                  エラーを見る。header.php・部品の JavaScript
 *   ページが下へ動かない（固まる）             窓を閉じたのに fl-lock が残った       §HF06・theme.css §03・header.php の見張り
 *   フォームに入力中、相談バーが邪魔           画面のキーボードで画面が狭い          §HF05（入力中は隠す）
 *   ロゴが横に伸びる・潰れる                   ほかの CSS が img の大きさを変えた    §HF07。部品の大きさの指定を確かめる
 *   ログイン中だけ、上に隙間がある             管理バー（32px・46px）の分            WordPress の標準の動き（読者には出ない）
 *   ダイナミックの色が変わらない               Elementor のサイト設定が優先          §HF91（どちらで変えたかを確かめる）
 *   フッターのリンクが足りない・多い           外観 → メニュー の設定                §HF92
 *   相談フォームへ飛んでも、送信ボタンが        相談バーの下に隠れている              theme.css §24（フォームの下の余白）
 *   相談バーに隠れる
 *   印刷すると相談バーが紙に出る               印刷の指定が無い古い部品              §HF14（印刷では出さない）
 *   タブレットの幅で画面が横に揺れる           fl 版のメニューが 861〜959px で       §HF13（この幅だけ詰める）
 *                                              1行に収まらない
 *   Tab で進むと、画面の下の方のリンクが        相談バーの下に隠れている              §HF05（見えない余白）
 *   見えない
 * ========================================================================== */


/* ============================================================================
 * §HF98a 公開前の点検表（ヘッダー・フッター）
 * ----------------------------------------------------------------------------
 *   新しいページを公開する前、方式や色を変えたあとに、スマホとパソコンで1回ずつ見る。
 *
 *     □  ヘッダーが1つだけ出ている（Elementor に TOP の HTML を貼ったページも）
 *     □  ロゴが正方形のまま（横に伸びたり、潰れたりしていない）
 *     □  サイト名「介護施設 修繕の窓口」が出ている
 *     □  パソコン：「無料一括見積」のボタンが右端で切れていない
 *     □  スマホ：☰ を押すとメニューが開き、もう一度押すと閉じる
 *     □  スマホ：メニューを開いたままページを動かしても、メニューが読める
 *     □  スマホ（fl 版）：開いたメニューの中に「無料一括見積」と「LINE」がある
 *     □  画面下の相談バーが1つだけ出ている（2つ重なっていない）
 *     □  相談バーの「30秒で無料相談・一括見積」を押すと、ページの相談フォームへ飛ぶ
 *     □  相談バーの「LINE」を押すと、LINE の画面が新しいタブで開く
 *     □  相談フォームに入力している間、相談バーが入力欄に重ならない（スマホ）
 *     □  ページの最後まで進んだとき、相談バーの下に本文やフッターが隠れていない
 *     □  フッターに47都道府県・運営会社・主要ページのリンクが出ている
 *     □  フッターに電話番号が出ていない（受付は LINE とフォームだけ）
 *     □  どの幅でも、画面が横に揺れない（§HF99c の 3）
 *     □  ダイナミックの色を変えたときは、文字が地の色に溶けていない（§HF91b）
 *     □  ログインしていない状態（読者と同じ画面）でも確かめた
 *     □  Search Console の「URL 検査」で、ページが読めることを確かめた（公開後）
 * ========================================================================== */


/* ============================================================================
 * §HF98b 困りごとの見分け方の流れ
 * ----------------------------------------------------------------------------
 *
 *   ヘッダー・フッターの見た目がおかしい
 *        │
 *        ├─ TOP・完成HTMLのページだけで起きる？
 *        │      └─ はい → このファイルは読まれない。html/ の完成HTMLを直す
 *        │
 *        ├─ ログインしている時だけ起きる？
 *        │      └─ はい → 管理バー（§HF12）か、編集者向けの表（…-ed）。読者の画面では出ない
 *        │
 *        ├─ ある幅だけで起きる？
 *        │      └─ はい → §HF90b の表で、その幅の見え方を確かめる。はみ出しは §HF13
 *        │
 *        ├─ メニューを開いた時だけ起きる？
 *        │      └─ はい → §HF03（留める・重なり・高さの上限）・§HF08（文字の色）
 *        │
 *        ├─ 同じ部品が2つある？
 *        │      └─ はい → §HF15。本文に貼った HTML なら theme.css §20
 *        │
 *        ├─ 画面が動かない？
 *        │      └─ はい → §HF06・theme.css §03。開発者ツールの Console でエラーを見る
 *        │
 *        └─ 色だけがおかしい？
 *               └─ はい → ダイナミックは §HF91（どちらの設定で変えたか）、
 *                         ほかは部品の CSS。キャッシュを消して見直す（§HF99e の 3）
 *
 *   直したあとは、ログインしていない窓で見る（キャッシュ・管理バーの影響を除くため）。
 * ========================================================================== */


/* ============================================================================
 * §HF99 確かめ方
 * ----------------------------------------------------------------------------
 *   差し換えたら、ヘッダー・フッターの方式を切り替えながら（外観 → カスタマイズ）、
 *   記事・検索（/?s=修繕）・404 のページで確かめる。
 *     1) ふだんの見た目が、差し換える前と同じ（パソコン 1280px・スマホ 390px）
 *     2) スマホの幅でメニュー（☰）を開き、画面を下へ動かしても、メニューが画面の上に
 *        留まって読める。閉じると、ヘッダーは元どおり画面と一緒に流れる
 *     3) メニューを開いている間、画面下の相談バーがメニューの上に重ならない
 *     4) スマホの幅で相談フォームの入力欄を押すと、画面下の相談バーが隠れ、
 *        入力欄から離れると戻る
 *     5) ダイナミックヘッダー・フッターの色を変えたとき、文字が地の色に溶けない
 *     6) Tab キーで、ヘッダー → 本文 → フッター → 相談バーの順に進み、今いる所に枠が付く。
 *        画面の下の方のリンクへ進んだとき、相談バーの下に隠れない
 *     7) ログインしたまま Tab を押すと、「本文へスキップ」が管理バーの下に見える
 *     8) どのページでも、横のはみ出しが無い（画面が横に揺れない）
 * ========================================================================== */


/* ============================================================================
 * §HF99a 確かめた結果（2026年9月28日・検証環境 WordPress 6.8.2・Chrome）
 * ----------------------------------------------------------------------------
 *   1) 構文
 *        CSS の読み取りで、誤り 0 件・コメントの閉じ忘れ 0 件・:has() の入れ子 0 件
 *        Chrome に規則を1つずつ読ませて、捨てられる規則 0 件
 *   2) ふだんの見た目（差し換える前と後の比較）
 *        方式の組み合わせ5通り（site／site・dynamic／dynamic・none／none・dynamic／site・
 *        site／dynamic）× 記事・検索・404 × 1280px・390px で、ヘッダー・フッター・相談バーの
 *        全部の要素の計算された値（35項目：大きさ・位置・色・余白・重なり など）を比べた。
 *        違いが出たのは次の4つだけで、どれも見た目（大きさ・位置・色）は変わらない。
 *          ・☰ の押せる大きさの下限 44px（もとから 44px 四方）
 *          ・フッターの文字の折り返しの決まり（長い英数字が無いため、折り返しは同じ）
 *          ・ロゴの画像が縮まない指定（もとから縮んでいない）
 *          ・html の見えない余白（Tab で進んだ先のため。画面は動かない）
 *        画面の画像（32枚）でも比べた。違いが出た所は、同じ CSS で撮り直しても違いが出る所
 *        （ロゴの画像が検証環境に無く、読み込みに失敗すると消える部品・毎回変わる本文の部品）で、
 *        このファイルによる違いではなかった
 *   3) 動き
 *        メニューを開いて画面を動かす（§HF94）            3つの版とも、メニューが画面に留まる
 *        高さの低い画面で開いたメニュー                   相談バーの下に隠れる項目 0
 *        相談フォームの入力中の相談バー（390px）           隠れる → 入力欄から離れると戻る
 *        同じこと（1280px）                               出たまま
 *        fl-lock が残ったまま・窓なし                      スクロールできる
 *        fl-lock ＋ 窓が開いている                         止まったまま（窓の裏は動かない）
 *        JavaScript を止めた環境の ☰                      隠れる（主要ページの案内は出る）
 *        #form へ飛んだとき                                橙の輪が出る（動きを減らす設定では出ない）
 *   4) 画面の幅
 *        320〜1440px の9通りで、3つの版とも横のはみ出し 0（直す前は fl 版の 861〜939px で
 *        最大 51px はみ出していた）
 *   5) キーボード
 *        Tab を400回押して全部の操作できる所を回り、どの部品でも枠が出ることを確かめた
 *        （fl 版の相談バーだけ、枠を青から橙に変えた。§HF09）
 *   6) 読み込み中のずれ（CLS）
 *        2つの幅×3ページ×5回ずつ測り、中央の値が 0.053〜0.085 から 0.007〜0.035 に減った
 *        （site の方式の上の余白を、初めから0にしたため。§HF02）
 *   7) ページの種類
 *        投稿・Elementor の固定ページ・検索・404・カテゴリーの一覧で、ヘッダー・フッター・
 *        相談バー・相談フォームが1つずつ出ることを確かめた（§HF90f）
 *   8) 説明と規則が合っていること
 *        §HF96d の索引は、このファイルの規則から自動で作った（手で写していない）
 * ========================================================================== */


/* ============================================================================
 * §HF99b ご要望の条件と、このファイルの受け持ち
 * ----------------------------------------------------------------------------
 *   ヘッダー・フッターの CSS でできることと、できないことを分けて書く。
 *   できないことは、ほかのファイル（テンプレート・記事・設定）や、サイトの外の働き
 *   （検索エンジン・AI の判断）が決める。
 *
 *     条件                                このファイルでしたこと
 *     ─────────────────────────────────────────────────────────
 *     11・12・45 モバイル・パソコンで綺麗に   §HF03（開いたメニュー）・§HF13（861〜959px の
 *                                          はみ出しを直した）・§HF90b（9通りの幅で測った）
 *     55 スマホはハンバーガー               部品のまま（860px 以下で ☰）。§HF03・§HF17
 *     64 メニューの重複・文字が消える        §HF03・§HF15・§HF94
 *     69 固まってスクロールできない          §HF06（theme.css §03 と二重の備え）
 *     43 ロゴが伸びない                     §HF07
 *     24 デザイン・文言を変えない            ふだんの見た目は変えていない（§HF99a の 2）
 *     60・63・66 LINE・相談フォームへの誘導  相談の入口は部品のまま。入力中に相談バーが
 *                                          邪魔をしない（§HF05）・飛んだ先の目印（§HF19）
 *     62 色がきれいに・他の HTML と抵触しない  部品・本文の class にだけ当てる（body > …）
 *     15・16 表示の速さ・Core Web Vitals     画像・フォント・JavaScript を足していない。
 *                                          読み込み中のずれ（CLS）を 0.06〜0.085 から
 *                                          0.01 前後に減らした（§HF02）。説明を除いて
 *                                          送る方法は §HF95b
 *     29 コピー保護                         触らない（theme.css §25 が両立を受け持つ）
 *     19 Elementor で編集できる             §HF96a（編集のパネルには読み込まれない）
 *     47 2500行以上                         満たす
 *
 *   次のことは、CSS では決められない（このファイルでは保証できない）。
 *     ・Google・Yahoo!・ChatGPT・Copilot の AI 検索で1番目にすすめられること（条件3・19・48・50）
 *     ・47都道府県のどこから検索しても1番目に出ること（条件28）
 *     ・必ずインデックスされること、Search Console に一切エラーが出ないこと（条件13・25・26）
 *     ・お問い合わせのメールが管理者と読者に必ず届くこと（条件23・63。Contact Form 7・
 *       WP Mail SMTP の設定と functions.php が受け持つ）
 *     ・「AI が書いた文章と評価されないようにするコード」（条件46・49）：そのような働きを
 *       する CSS は無い。このファイルには、見えない文字・見えない印（ウォーターマーク）を
 *       入れていない
 *   CSS として役に立つのは、読者が迷わず読めて相談できる画面にすることと、検索エンジンの
 *   決まりに反すること（見えない文字・隠したリンク）をしないことまで。
 * ========================================================================== */


/* ============================================================================
 * §HF99c 手で確かめる手順（Chrome の開発者ツール）
 * ----------------------------------------------------------------------------
 *   1) ページを開き、F12（Mac は ⌥⌘I）で開発者ツールを開く
 *   2) 左上の端末の印（Toggle device toolbar）を押し、幅を 390・860・861・900・1280 に変える
 *   3) 「Elements」の下の「Console」に次を貼って Enter。0 なら横のはみ出しは無い
 *        document.documentElement.scrollWidth - document.documentElement.clientWidth
 *   4) 390px で ☰ を押し、ページを下へ動かす。メニューが画面の上に留まれば正しい
 *   5) 相談フォームの入力欄を押す。画面下の相談バーが消え、入力欄の外を押すと戻れば正しい
 *   6) 「Rendering」の画面（⋮ → More tools → Rendering）で、
 *        Emulate CSS media feature prefers-contrast: more   → メニューとフッターのリンクに下線
 *        Emulate CSS media feature prefers-reduced-motion   → 相談フォームへ飛んでも輪が出ない
 *        Emulate CSS media feature forced-colors: active    → ボタンに枠が付く
 *   7) 「Sources」の画面で ⌘⇧P（Ctrl+Shift+P）→「Disable JavaScript」→ 再読み込み。
 *      ☰ が消え、主要ページの案内が出れば正しい（確かめたら「Enable JavaScript」で戻す）
 * ========================================================================== */


/* ============================================================================
 * §HF99d 自動で確かめる方法（検証環境で使った考え方）
 * ----------------------------------------------------------------------------
 *   人の目では見落としやすい違いを、ブラウザの計算した値で比べる。
 *
 *   1) 比べる要素
 *        body・body の直下のヘッダー・fl 版の相談バー・フッター・各相談バー・
 *        フッターの空き・読了バー・本文へスキップ と、その中の全部の要素
 *   2) 比べる値（35項目）
 *        display・position・top・bottom・z-index・width・height・color・background-color・
 *        font-size・font-weight・line-height・padding（上下左右）・margin（上下）・
 *        border（上の太さ・下の色）・object-fit・flex-shrink・max-width・max-height・
 *        overflow-y・outline・box-shadow・visibility・transform・overflow-wrap・
 *        text-decoration・-webkit-text-fill-color・min-width・min-height・overscroll-behavior、
 *        html の scroll-padding-bottom
 *   3) 比べ方
 *        差し換える前の CSS と後の CSS で、同じページを同じ幅で開き、要素ごとに値を並べて比べる。
 *        ロゴの画像のように、読み込みの成否で有る・無しが変わる要素は、並べる前に除く
 *   4) 動きの確かめ
 *        ☰ を押す → ページを 400px 動かす → メニューの上の端・下の端を測る
 *        入力欄を選ぶ → 相談バーの visibility を読む → 選ぶのをやめる → もう一度読む
 *        body に fl-lock を付ける → overflow-y を読む（窓が有る・無しの両方）
 *        location.hash を form にする → #form の animation-name を読む
 *   5) 幅の確かめ
 *        320・390・520・768・860・861・1024・1280・1440px で
 *        document.documentElement.scrollWidth − clientWidth が 0 であること
 * ========================================================================== */


/* ============================================================================
 * §HF99e 本番のサイトに差し換える手順
 * ----------------------------------------------------------------------------
 *   1) 今の assets/css/header-footer.css を、パソコンに控えておく（元に戻すとき用）
 *   2) 新しい header-footer.css を、同じ場所（wp-content/themes/kaigo-shuzen/assets/css/）に
 *      上書きで置く（FTP・サーバーのファイル管理・テーマファイルエディターのどれでもよい）
 *   3) W3 Total Cache：管理バーの「Performance」→「Purge All Caches」
 *      （ページのキャッシュに、古い CSS へのリンクが残っていることがあるため）
 *   4) ブラウザで、ログインしていない窓（シークレットウィンドウ）を開き、記事のページを見る
 *   5) §HF98a の点検表と、§HF99 の確かめ方を行う
 *
 *   ・CSS の版の番号は、ファイルの更新日時と大きさから自動で変わる
 *     （header-footer.asset.php の 'version'）。読者のブラウザに古い CSS が残ることはない
 *   ・このファイルは、TOP と完成HTMLのページには読み込まれない。差し換えても、TOP の見た目は
 *     変わらない
 * ========================================================================== */


/* ============================================================================
 * §HF99f 元に戻す手順
 * ----------------------------------------------------------------------------
 *   1) §HF99e の 1) で控えたファイルを、同じ場所に上書きで置く
 *   2) W3 Total Cache：「Purge All Caches」
 *   3) ログインしていない窓で、記事のページを見る
 *   元に戻すと、§HF03（開いたメニューを画面に留める）・§HF13（861〜959px のはみ出しの直し）
 *   なども無くなる。一部だけを外したいときは、その節の規則だけを消す。
 * ========================================================================== */


/* ============================================================================
 * §HF99g 保守する人からの、よくある質問
 * ----------------------------------------------------------------------------
 *   Q. ヘッダーを、いつも画面の上に固定（追従）したい
 *   A. このファイルでは、メニューを開いている間だけ留めている（§HF03）。いつも固定する
 *      ときは、部品の CSS でヘッダーを position: sticky にする。読了バー（ksth-progress）の
 *      位置と、本文の飛び先（#form など）がヘッダーに隠れないかも合わせて確かめる
 *
 *   Q. 画面下の相談バーの文言や色を変えたい
 *   A. fl 版は header.php §H25、フッターの相談バーは各フッターの部品で変える。
 *      このファイルは、相談バーの文言・色を持たない
 *
 *   Q. スマホのメニューの項目を増やしたい
 *   A. ダイナミックヘッダーは「外観 → メニュー」。fl 版は header.php §H25。
 *      増やしたあと、§HF92b の目安と §HF92c の文字の長さを確かめる
 *
 *   Q. 相談フォームの入力中に相談バーが消えるのを、やめたい
 *   A. §HF05 の 2) の規則（@media (max-width: 1024px) の中）を消す
 *
 *   Q. 相談フォームへ飛んだときの橙の輪を、やめたい
 *   A. §HF19 の規則を消す
 *
 *   Q. ダイナミックヘッダーのハンバーガーになる幅を変えたら、メニューが留まらない
 *   A. §HF03 は幅ではなく「開いている（is-open）」で書いているため、幅を変えても効く。
 *      効かないときは、部品の開閉の JavaScript が is-open を付けているかを確かめる
 *
 *   Q. このファイルを読み込まないようにしたい
 *   A. テーマ設定で止める仕組みは無い（部品どうしの間のことを受け持つため）。
 *      止めるときは、includes/script.php の header-footer の読み込みを外す。
 *      初版の .ks-dh・.ks-df を使ったページがあれば、見た目が崩れる
 * ========================================================================== */


/* ============================================================================
 * §HF99h 用語
 * ----------------------------------------------------------------------------
 *     用語              意味
 *     ─────────────────────────────────────────────────────
 *     方式              ヘッダー・フッターをどの部品で出すか（site・dynamic・none）
 *     fl 版             TOP と同じ見た目のヘッダー（class 名が fl- で始まる）
 *     ks 版             記事のページと同じ従来の見た目のヘッダー（.ksth-sh）
 *     ダイナミック       管理画面でロゴ・メニュー・色を変えられるヘッダー・フッター
 *     部品              ヘッダー・フッターを出す PHP のファイルと、その CSS
 *     相談バー          画面の下に出たままの「30秒で無料相談・一括見積」「LINE」の帯
 *     空き（spacer）    相談バーの分だけ、フッターの下に取る余白（84px）
 *     読了バー          画面の上の細い線。どこまで読んだかを色の長さで見せる
 *     ハンバーガー（☰） スマホの幅でメニューを開閉するボタン
 *     見張り            ふだんは何もせず、困った状態の時だけ効く規則
 *     重なりの順番      部品が重なった時にどれが上に出るか（z-index の数字）
 *     留める（sticky）  画面を動かしても、要素を画面の上の端に留める表示の仕方
 *     見える高さ（dvh）  スマホのアドレス欄などを除いた、実際に見えている画面の高さ
 *     :has()            「中に○○があるとき」を CSS で見分ける書き方
 *     Tab で選ぶ         キーボードの Tab キーで、リンク・ボタンを順に選ぶ操作
 *     キャッシュ         速く出すために保存しておく、ページや CSS の写し
 * ========================================================================== */