/* ============================================================================
 *  介護施設 修繕の窓口（kaigo-shuzen.jp）｜assets/css/theme.css
 *  WordPress が表示するページの本文と部品の見た目
 *  改訂：2026.09.27（以前の143行から作り直し）
 * ----------------------------------------------------------------------------
 *
 *  ■ このファイルが効く画面
 *   includes/script.php が、WordPress が表示するページでだけ読む。
 *     効く   ：投稿・固定ページ・Elementor で作ったページ・検索・404・一覧
 *     効かない：完成HTMLのページ（TOP・台帳の175ページ）。functions.php が
 *              そのまま配信するため、このファイルは読まれない
 *   → TOP のデザインと文言には、いっさい影響しない（条件24）。
 *
 *  ■ 読み込みの順番（あとのものが勝つ）
 *     1) ksth-shell      完成HTMLと同じ共通CSS（変数 --nv・--ink など）
 *     2) style.css       テーマの基本
 *     3) theme.css       このファイル
 *     4) header-footer   ダイナミック／Elementor Pro のヘッダー・フッター
 *     5) 各テンプレートの <style>（single.php・search.php・404.php など。本文の中に出る）
 *
 *  ■ 強さ（詳細度）の決め方
 *   ・本文の文字組みは :where() で包み、詳細度を0にする。
 *     テンプレートの <style>・Elementor のサイト設定（キット）・ブロックの設定が、
 *     いつでもこのファイルより優先される（編集した見た目が必ず出る）。
 *   ・次の「守り」だけは強く書く（!important を含む）。
 *       - 相談フォームの入力欄の文字が白くならない（条件23）
 *       - コピー保護のプラグインを入れても、フォームに文字が打てる（条件29）
 *       - ページがスクロールできなくなる・アコーディオンが開かない、を防ぐ（条件69）
 *       - ロゴが伸びたり潰れたりしない（条件43）
 *
 *  ■ 色（TOP の完成HTMLと同じ値）
 *     紺     #0a2e5c   見出し・枠・主なボタンの縁
 *     青     #1f6fd1   リンク・検索のボタン・図の線
 *     空色   #eaf3fc   面（図・囲みの地）
 *     橙     #f0831e   相談ボタン（上 #ff9f40 → 下 #f0831e のグラデーション・影 #c9660d）
 *     灰面   #f5f7fa   節の地
 *     罫線   #d9e2ec
 *     本文   #1d2733   補助 #5b6b7c   本文2 #34404d
 *     LINE   #06c755
 *     マーカー #ffd9ad（TOP の見出しの下線と同じ）
 *   白い地に #1d2733 の文字は、コントラスト比 15:1 前後（WCAG の AAA）。
 *   補助の #5b6b7c も 5.5:1 前後で、AA を満たす。
 *
 *  ■ 文字
 *     本文 17px（1.0625rem）・行間 1.95・1行の幅 最大 760px 前後（全角 42〜44字）
 *     スマホ 16.5px・行間 1.9。左右の余白は 16〜24px（画面の幅で変わる）
 *     文章はどの画面でも1列（2段組みにしない。条件70）
 *
 *  ■ 節の番号（このファイルの中の目次）
 *     §01 変数                       §17 ボタン・行動の呼びかけ
 *     §02 土台                       §18 相談フォーム（Contact Form 7）
 *     §03 スクロールの備え           §19 WordPress のブロック
 *     §04 本文の器                   §20 Elementor
 *     §05 見出し                     §21 一覧・カード・ページ送り・検索
 *     §06 段落・強調・リンク         §22 記事の下・ウィジェット・コメント
 *     §07 リスト                     §23 ロゴ
 *     §08 表                         §24 固定のバー・ヘッダーとの重なり
 *     §09 図                         §25 コピー保護との両立
 *     §10 導入インタビュー           §26 読みやすさの補い（アクセシビリティ）
 *     §11 囲み・根拠・出典           §27 画面の幅ごとの調整
 *     §12 よくある質問（開閉）       §28 印刷
 *     §13 手順（HowTo）              §29 小さな道具（ユーティリティ）
 *     §14 目次                       §30 以前の class との互換
 *     §15 監修者・著者               §31 確かめ方
 *     §16 記事の頭（タイトル・メタ）
 *
 *  ■ 画面の幅の区切り（メディアクエリ）
 *     〜520px   小さいスマホ
 *     〜860px   スマホ（ヘッダーがハンバーガーメニューになる幅と同じ）
 *     〜1024px  タブレット
 *     1025px〜  パソコン
 * ============================================================================ */


/* ============================================================================
 * §01 変数
 * ----------------------------------------------------------------------------
 *   共通CSS（ksth-shell）の変数（--nv・--ink・--mu・--ln・--sf・--sf2・--nv2・
 *   --gd・--ink2・--lg）があればそれを使い、無い環境では TOP と同じ値にする。
 *   このファイルの中では、--ksth- で始まる名前だけを使う。
 * ========================================================================== */

:root {
	/* 色 */
	--ksth-navy: var(--nv, #0a2e5c);
	--ksth-navy-2: var(--nv2, #0a4f9a);
	--ksth-blue: #1f6fd1;
	--ksth-sky: #eaf3fc;
	--ksth-orange: #f0831e;
	--ksth-orange-2: #ff9f40;
	--ksth-orange-shadow: #c9660d;
	--ksth-orange-text: var(--gd, #b54e00);
	--ksth-gray: var(--sf, #f5f7fa);
	--ksth-gray-2: var(--sf2, #eef2f8);
	--ksth-line: var(--ln, #d9e2ec);
	--ksth-text: var(--ink, #1d2733);
	--ksth-text-2: var(--ink2, #34404d);
	--ksth-sub: var(--mu, #5b6b7c);
	--ksth-line-green: var(--lg, #06c755);
	--ksth-marker: #ffd9ad;
	--ksth-white: #ffffff;
	--ksth-ok: #1b7f4b;
	--ksth-ok-bg: #edf8f1;
	--ksth-ng: #c62828;
	--ksth-ng-bg: #fdecec;
	--ksth-warn: #9a5b00;
	--ksth-warn-bg: #fff6e6;
	--ksth-info: #0a4f9a;
	--ksth-info-bg: #eef5fd;

	/* 図の色（TOP のタイルと同じ4色） */
	--ksth-c1: #1f6fd1;
	--ksth-c2: #f0831e;
	--ksth-c3: #2a9d8f;
	--ksth-c4: #6c5ce7;
	--ksth-c1-dark: #0a2e5c;
	--ksth-c2-dark: #d9531e;
	--ksth-c3-dark: #1b6f66;
	--ksth-c4-dark: #3f3494;

	/* 文字 */
	--ksth-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--ksth-font-num: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
	--ksth-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ksth-fs: 1.0625rem;
	--ksth-fs-sm: .9375rem;
	--ksth-fs-xs: .8125rem;
	--ksth-fs-lg: 1.1875rem;
	--ksth-lh: 1.95;
	--ksth-lh-tight: 1.5;
	--ksth-ls: .02em;

	/* 幅と余白 */
	--ksth-w: 760px;
	--ksth-w-article: 880px;
	--ksth-wide: 1120px;
	--ksth-full: 1180px;
	--ksth-pad: clamp(16px, 4vw, 24px);
	--ksth-gap: 1.1em;
	--ksth-sec: clamp(40px, 7vw, 64px);

	/* 角・影 */
	--ksth-r-sm: 6px;
	--ksth-r: 10px;
	--ksth-r-lg: 14px;
	--ksth-r-xl: 18px;
	--ksth-r-pill: 999px;
	--ksth-shadow-sm: 0 2px 10px rgba(10, 46, 92, .05);
	--ksth-shadow: 0 8px 30px rgba(10, 46, 92, .12);
	--ksth-shadow-btn: 0 3px 0 var(--ksth-orange-shadow);

	/* 重なりの順番（ヘッダー 50・固定の相談バー 60・ポップアップ 80〜90 は TOP と同じ） */
	--ksth-z-header: 50;
	--ksth-z-float: 60;
	--ksth-z-menu: 70;
	--ksth-z-overlay: 80;
	--ksth-z-dialog: 90;
	--ksth-z-top: 1000;

	/* 固定の相談バーの高さ（本文の末尾が隠れないよう、その分だけ下を空ける） */
	--ksth-float-h: 84px;

	/* 動き */
	--ksth-ease: cubic-bezier(.2, .7, .2, 1);
	--ksth-dur: .18s;

	/* フォームの部品を明るい色で描かせる（ブラウザの自動ダークで入力欄が黒地・白文字にならない） */
	color-scheme: light;
}


/* ============================================================================
 * §02 土台
 * ----------------------------------------------------------------------------
 *   ・:where() で包み、詳細度を0にする（テンプレート・Elementor の指定が必ず勝つ）
 *   ・html の文字の大きさは変えない（読む人のブラウザの設定を尊重する）
 * ========================================================================== */

:where(.ks-wp) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "palt" 0;
}

:where(.ks-wp-main, .ks-wp-content, .ks-wp-elhead, .ksth-form-auto) *,
:where(.ks-wp-main, .ks-wp-content, .ks-wp-elhead, .ksth-form-auto) *::before,
:where(.ks-wp-main, .ks-wp-content, .ks-wp-elhead, .ksth-form-auto) *::after {
	box-sizing: border-box;
}

:where(.ks-wp) img,
:where(.ks-wp) svg,
:where(.ks-wp) video,
:where(.ks-wp) canvas,
:where(.ks-wp) iframe {
	max-width: 100%;
}

:where(.ks-wp) img,
:where(.ks-wp) video {
	height: auto;
}

:where(.ks-wp) ::selection {
	background: var(--ksth-marker);
	color: var(--ksth-text);
}

:where(.ks-wp) :focus-visible {
	outline: 3px solid #ffb35c;
	outline-offset: 2px;
}

:where(.ks-wp) [hidden] {
	display: none !important;
}

/* 画面には出さず、読み上げには読ませる文字（WordPress の標準） */
.screen-reader-text,
.ksth-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	white-space: nowrap;
}

.screen-reader-text:focus,
.ksth-sr-only:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	z-index: var(--ksth-z-top);
	background: #fff;
	color: var(--ksth-navy);
	padding: .6em 1em;
	border-radius: 0 0 8px 8px;
	box-shadow: var(--ksth-shadow);
	font-weight: 700;
	white-space: normal;
}

/* 「本文へスキップ」（ヘッダーの部品が無い環境の予備） */
:where(.skip-link) {
	position: absolute;
	left: 8px;
	top: -80px;
	z-index: var(--ksth-z-top);
	background: var(--ksth-navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 8px 8px;
	font-weight: 700;
	text-decoration: none;
}

:where(.skip-link):focus {
	top: 0;
}

/* 本文へのリンクや #form で飛んだとき、見出しが固定のヘッダーに隠れないようにする */
:where(.ks-wp) :target,
:where(.ks-wp) [id="form"],
:where(.ks-wp) [id^="faq"],
:where(.ks-wp) h2[id],
:where(.ks-wp) h3[id] {
	scroll-margin-top: 88px;
}


/* ============================================================================
 * §03 スクロールの備え（条件69「記事が固まってスクロールできない」への対策）
 * ----------------------------------------------------------------------------
 *   よくある原因と、ここでの備え
 *     1) 他のCSS・プラグインが html・body に height:100%＋overflow:hidden を付けたまま
 *        → 開いたままの窓（メニュー・ポップアップ）が無いときは、縦のスクロールを戻す
 *     2) メニューを閉じても、body に「止める」ための class が残る
 *        → 止める class は、このサイトでは fl-lock（TOP）・ksth-lock・Elementor の
 *          dialog-prevent-scroll の3つだけ。それ以外のときは止めない
 *     3) 横にはみ出した部品（長い URL・表・図）で、画面が横に揺れて縦に進まない
 *        → 横のはみ出しは切る（overflow-x:clip。対応しない古い端末は hidden）
 *        html には overflow を付けない。付けると body が「自分でスクロールする箱」になり、
 *        ヘッダーの sticky が効かなくなったり、二重のスクロールで固まったりするため
 *     4) プラグインが body に touch-action:none を付け、スマホで指のスクロールが効かない
 *        → 窓が開いていないときは touch-action を標準（auto）に戻す
 *     5) スマホの「引っぱって更新」と重なって動かない
 *        → overscroll-behavior は触らない（端末の標準に任せる）
 * ========================================================================== */

html {
	scroll-behavior: smooth;
}

/* html に overflow を付けない（visible のままにする）。
   こうすると body の overflow が画面全体に引き継がれ、ヘッダーの sticky も効いたままになる。
   他のCSSが html に overflow:hidden を付けていても、ここで元に戻す */
html:not(.ksth-lock) {
	overflow: visible;
	height: auto;
}

body.ks-wp:not(.fl-lock):not(.ksth-lock):not(.dialog-prevent-scroll):not(.elementor-editor-active) {
	overflow-y: visible !important;
	height: auto !important;
	min-height: 100%;
	touch-action: auto;
}

body.ks-wp {
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body.ks-wp {
		overflow-x: clip;
	}
}

/* 窓が開いている間だけ、裏のページを止める（閉じれば class が外れて元に戻る） */
body.ks-wp.ksth-lock {
	overflow: hidden;
}

/* スクロールの動きを減らす設定の人には、なめらかな移動をしない */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* 本文の中で横にはみ出しやすいもの（長い英数字・URL）を折り返す */
:where(.ks-wp-content, .ks-wp-main) {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

:where(.ks-wp-content) pre,
:where(.ks-wp-content) code {
	overflow-wrap: normal;
	word-break: normal;
}


/* ============================================================================
 * §04 本文の器
 * ----------------------------------------------------------------------------
 *   東洋経済オンラインの記事のように、白い地に1列の本文を置き、左右に余白を取る。
 *     器（.ks-wp-content）  最大 880px・左右 16〜24px の余白
 *     文章の行              最大 760px（1行が長すぎて目が迷わないように）
 *     図・表・囲み          器の幅いっぱい（880px）まで広げてよい
 *   文章はどの画面でも1列（2段組みにしない。条件70）。
 * ========================================================================== */

.ks-wp-main {
	display: block;
	min-height: 40vh;
	background: #fff;
}

.ks-wp-main--el {
	min-height: 0;
}

.ks-wp-content {
	max-width: var(--ksth-w-article);
	margin: 0 auto;
	padding: 0 var(--ksth-pad);
	font-family: var(--ksth-font);
	font-size: var(--ksth-fs);
	line-height: var(--ksth-lh);
	letter-spacing: var(--ksth-ls);
	color: var(--ksth-text);
	column-count: 1;
	columns: auto;
}

/* 文章の要素のあいだの間隔（前の要素との間だけを空ける） */
:where(.ks-wp-content) > * + * {
	margin-top: var(--ksth-gap);
}

:where(.ks-wp-content) > :first-child {
	margin-top: 0;
}

:where(.ks-wp-content) > :last-child {
	margin-bottom: 0;
}

/* 文章の行の幅（段落・リスト・引用）は 760px まで */
:where(.ks-wp-content) > p,
:where(.ks-wp-content) > ul,
:where(.ks-wp-content) > ol,
:where(.ks-wp-content) > dl,
:where(.ks-wp-content) > blockquote,
:where(.ks-wp-content) > h2,
:where(.ks-wp-content) > h3,
:where(.ks-wp-content) > h4,
:where(.ks-wp-content) > h5,
:where(.ks-wp-content) > h6 {
	max-width: var(--ksth-w);
	margin-left: auto;
	margin-right: auto;
}

/* 節（section）で区切ったとき */
:where(.ks-wp-content) > section + section {
	margin-top: var(--ksth-sec);
}

/* 節の地の色を変える帯（TOP の fl-rk・fl-faq と同じ灰面） */
.ksth-band {
	background: var(--ksth-gray);
	padding: var(--ksth-sec) 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

.ksth-band--sky {
	background: var(--ksth-sky);
}


/* ============================================================================
 * §05 見出し
 * ----------------------------------------------------------------------------
 *   h2  紺の太字・下に細い罫線（左の縦線・番号は共通CSSとテンプレートが描く）
 *   h3  紺の太字・左に橙の縦線
 *   h4  紺の太字だけ
 *   見出しのすぐ下の段落との間は詰め、前の文章との間は広く空ける（区切りを見せる）。
 * ========================================================================== */

:where(.ks-wp-content) h1,
:where(.ks-wp-content) h2,
:where(.ks-wp-content) h3,
:where(.ks-wp-content) h4,
:where(.ks-wp-content) h5,
:where(.ks-wp-content) h6 {
	font-family: var(--ksth-font);
	color: var(--ksth-navy);
	font-weight: 900;
	line-height: var(--ksth-lh-tight);
	letter-spacing: .01em;
	font-feature-settings: "palt" 1;
}

:where(.ks-wp-content) h2 {
	font-size: clamp(1.3125rem, 1.1rem + .9vw, 1.5625rem);
	margin: 2.6em auto .9em;
	padding: .55em 0 .55em;
	border-bottom: 1px solid var(--ksth-line);
}

/* 見出しの飾り（左の縦線・番号）は、共通CSS（ksth-shell）と各テンプレートが描く。
   ここで疑似要素の飾りを足すと二重になるため、足さない。
   中央寄せの見出しで TOP と同じ橙の線を付けたいときは、class「ksth-h2c」を付ける */

:where(.ks-wp-content) h3 {
	font-size: clamp(1.125rem, 1.02rem + .45vw, 1.28rem);
	margin: 2.1em auto .7em;
	padding: .1em 0 .1em .75em;
	border-left: 4px solid var(--ksth-orange);
}

:where(.ks-wp-content) h4 {
	font-size: 1.0625rem;
	margin: 1.8em auto .5em;
}

:where(.ks-wp-content) h5,
:where(.ks-wp-content) h6 {
	font-size: 1rem;
	margin: 1.6em auto .4em;
	color: var(--ksth-text);
}

:where(.ks-wp-content) h2 + *,
:where(.ks-wp-content) h3 + *,
:where(.ks-wp-content) h4 + * {
	margin-top: 0;
}

/* 見出しの上に置く小さな文字（東洋経済の「肩書き」のような位置づけ） */
.ksth-eyebrow,
:where(.ks-wp-content) .eyebrow {
	display: block;
	margin: 0 0 .35em;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ksth-orange-text);
}

/* 見出しに添える番号（1 2 3） */
.ksth-hno {
	display: inline-grid;
	place-items: center;
	min-width: 1.9em;
	height: 1.9em;
	margin-right: .5em;
	padding: 0 .3em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-navy);
	color: #fff;
	font-size: .8em;
	font-weight: 900;
	vertical-align: .12em;
}

/* 見出しの中央寄せ（TOP の fl-h2 と同じ形。まとめの節などで使う） */
.ksth-h2c {
	text-align: center;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.ksth-h2c::before {
	display: none !important;
}

.ksth-h2c::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: var(--ksth-orange);
}


/* ============================================================================
 * §06 段落・強調・リンク
 * ========================================================================== */

:where(.ks-wp-content) p {
	margin: 0 auto 1.1em;
}

:where(.ks-wp-content) strong,
:where(.ks-wp-content) b {
	font-weight: 700;
	color: inherit;
}

/* マーカー（TOP の見出しの下半分に引く色と同じ） */
:where(.ks-wp-content) mark,
.ksth-mark {
	background: linear-gradient(transparent 62%, var(--ksth-marker) 62%);
	color: inherit;
	padding: 0 .1em;
}

:where(.ks-wp-content) em {
	font-style: normal;
	font-weight: 700;
}

:where(.ks-wp-content) small {
	font-size: .85em;
	color: var(--ksth-sub);
}

:where(.ks-wp-content) sup,
:where(.ks-wp-content) sub {
	font-size: .72em;
	line-height: 0;
}

:where(.ks-wp-content) abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

:where(.ks-wp-content) kbd {
	display: inline-block;
	padding: .05em .45em;
	border: 1px solid var(--ksth-line);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: #fff;
	font-family: var(--ksth-font-mono);
	font-size: .88em;
}

:where(.ks-wp-content) code {
	background: var(--ksth-gray-2);
	padding: .1em .38em;
	border-radius: 4px;
	font-family: var(--ksth-font-mono);
	font-size: .9em;
}

:where(.ks-wp-content) pre {
	overflow-x: auto;
	padding: 1em 1.2em;
	border-radius: var(--ksth-r);
	background: #0f2744;
	color: #e8eef6;
	font-size: .88rem;
	line-height: 1.7;
	-webkit-overflow-scrolling: touch;
}

:where(.ks-wp-content) pre code {
	background: none;
	padding: 0;
	color: inherit;
}

:where(.ks-wp-content) hr {
	border: 0;
	border-top: 1px solid var(--ksth-line);
	margin: 2.6em auto;
	max-width: var(--ksth-w);
}

/* リンク：本文の中は青い下線。押した先が分かるよう、訪問済みも同じ色にする */
:where(.ks-wp-content) a {
	color: var(--ksth-navy-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--ksth-dur) var(--ksth-ease);
}

:where(.ks-wp-content) a:hover {
	color: var(--ksth-navy);
	text-decoration-thickness: 2px;
}

:where(.ks-wp-content) a:visited {
	color: var(--ksth-navy-2);
}

/* 外へのリンクの印（出典のリンクなど。target="_blank" のときだけ） */
/* 外へのリンクの印は、本文で書いた class の無いリンクにだけ付ける（ボタン・テンプレートの部品には付けない） */
:where(.ks-wp-content) a[target="_blank"]:not([class])::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .2em;
	vertical-align: .02em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* リード文（記事の冒頭の要約。東洋経済の太字のリードに近い形） */
.ksth-lead,
:where(.ks-wp-content) .lead {
	font-size: var(--ksth-fs-lg);
	line-height: 1.85;
	font-weight: 700;
	color: var(--ksth-text-2);
	margin-bottom: 1.4em;
}

/* 結論の一文（AI や検索の回答に引用されやすい「答えの最小単位」を目立たせる） */
.ksth-answer,
:where(.ks-wp-content) .ans {
	max-width: var(--ksth-w);
	margin: 0 auto 1.4em;
	padding: 1em 1.2em;
	border-radius: var(--ksth-r-lg);
	background: var(--ksth-sky);
	border-left: 5px solid var(--ksth-navy);
	font-weight: 700;
	color: var(--ksth-text);
	line-height: 1.85;
}

.ksth-answer > :last-child,
:where(.ks-wp-content) .ans > :last-child {
	margin-bottom: 0;
}


/* ============================================================================
 * §07 リスト
 * ----------------------------------------------------------------------------
 *   ul   紺の小さな丸
 *   ol   紺の丸の中に白い数字
 *   .ksth-check  チェックの印（確かめる項目の一覧）
 *   .ksth-cross  × の印（やってはいけないこと）
 * ========================================================================== */

:where(.ks-wp-content) ul,
:where(.ks-wp-content) ol {
	margin: 0 auto 1.3em;
	padding-left: 1.5em;
}

:where(.ks-wp-content) li {
	margin: .35em 0;
	padding-left: .1em;
}

:where(.ks-wp-content) li > ul,
:where(.ks-wp-content) li > ol {
	margin: .35em 0 .2em;
}

:where(.ks-wp-content) ul > li::marker {
	color: var(--ksth-navy);
	font-size: .9em;
}

:where(.ks-wp-content) ol > li::marker {
	color: var(--ksth-navy);
	font-weight: 900;
}

/* 丸の中の数字（class を付けたときだけ。普通の ol はブラウザの番号のまま） */
.ksth-num {
	list-style: none;
	counter-reset: ksth-num;
	padding-left: 0 !important;
}

.ksth-num > li {
	position: relative;
	counter-increment: ksth-num;
	padding-left: 2.5em;
	margin: .7em 0;
}

.ksth-num > li::before {
	content: counter(ksth-num);
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.75em;
	height: 1.75em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-navy);
	color: #fff;
	font-size: .88em;
	font-weight: 900;
	line-height: 1;
}

.ksth-num > li:nth-child(2)::before {
	background: var(--ksth-orange);
}

/* チェックの一覧 */
.ksth-check,
.is-style-ksth-check {
	list-style: none;
	padding-left: 0 !important;
}

.ksth-check > li,
.is-style-ksth-check > li {
	position: relative;
	padding: .5em .6em .5em 2.1em;
	margin: 0;
	border-bottom: 1px dashed var(--ksth-line);
}

.ksth-check > li:last-child,
.is-style-ksth-check > li:last-child {
	border-bottom: 0;
}

.ksth-check > li::before,
.is-style-ksth-check > li::before {
	content: "";
	position: absolute;
	left: .35em;
	top: .95em;
	width: 1.05em;
	height: 1.05em;
	border-radius: 4px;
	background: var(--ksth-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 76% no-repeat;
}

/* やってはいけないことの一覧 */
.ksth-cross {
	list-style: none;
	padding-left: 0 !important;
}

.ksth-cross > li {
	position: relative;
	padding: .45em .6em .45em 2.1em;
	margin: 0;
}

.ksth-cross > li::before {
	content: "";
	position: absolute;
	left: .35em;
	top: .9em;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	background: var(--ksth-ng) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* 用語と説明（dl） */
:where(.ks-wp-content) dl {
	margin: 0 auto 1.3em;
	border-top: 1px solid var(--ksth-line);
}

:where(.ks-wp-content) dt {
	font-weight: 700;
	color: var(--ksth-navy);
	padding: .8em 0 .2em;
}

:where(.ks-wp-content) dd {
	margin: 0;
	padding: 0 0 .8em;
	border-bottom: 1px solid var(--ksth-line);
	color: var(--ksth-text-2);
}


/* ============================================================================
 * §08 表
 * ----------------------------------------------------------------------------
 *   ・表の外枠（.ksth-table・.wp-block-table・figure.table）で横に動かせるようにする。
 *     本文の中の table も、そのままで横に動かせる（display:block にしない。
 *     見出しのセルの幅がそろわなくなるため、外枠に overflow を持たせる）
 *   ・スマホでは、左の列（行の見出し）を固定して横に動かす
 *   ・数字は桁をそろえる（tabular-nums）
 * ========================================================================== */

.ksth-table,
:where(.ks-wp-content) .wp-block-table,
:where(.ks-wp-content) figure.table {
	width: 100%;
	margin: 1.6em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--ksth-r);
	border: 1px solid var(--ksth-line);
	background: #fff;
}

:where(.ks-wp-content) table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .95rem;
	line-height: 1.7;
	font-variant-numeric: tabular-nums;
	margin: 1.6em 0;
}

:where(.ks-wp-content) :is(.ksth-table, .wp-block-table, figure.table) table {
	margin: 0;
	min-width: 520px;
}

:where(.ks-wp-content) > table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:where(.ks-wp-content) caption {
	caption-side: top;
	padding: .8em 1em .4em;
	text-align: left;
	font-size: .85rem;
	font-weight: 700;
	color: var(--ksth-sub);
}

:where(.ks-wp-content) th,
:where(.ks-wp-content) td {
	border: 1px solid var(--ksth-line);
	padding: .7em .85em;
	text-align: left;
	vertical-align: top;
}

:where(.ks-wp-content) :is(.ksth-table, .wp-block-table, figure.table) th,
:where(.ks-wp-content) :is(.ksth-table, .wp-block-table, figure.table) td {
	border-width: 0 0 1px 0;
}

:where(.ks-wp-content) thead th {
	background: var(--ksth-navy);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	border-color: var(--ksth-navy);
}

:where(.ks-wp-content) tbody th {
	background: var(--ksth-gray-2);
	color: var(--ksth-navy);
	font-weight: 700;
}

:where(.ks-wp-content) tbody tr:nth-child(even) td {
	background: #fafcfe;
}

:where(.ks-wp-content) tbody tr:hover td {
	background: #f3f8fe;
}

:where(.ks-wp-content) td.num,
:where(.ks-wp-content) th.num,
.ksth-table .num {
	text-align: right;
	white-space: nowrap;
}

/* 比べる表で「おすすめの列」を強調するときの色（施設の条件で選ぶ列など） */
.ksth-table .is-pick,
.ksth-table td.is-pick {
	background: #fff7ef !important;
	font-weight: 700;
}

.ksth-table thead th.is-pick {
	background: var(--ksth-orange-text);
	border-color: var(--ksth-orange-text);
}

/* 表の下の注記 */
.ksth-table-note {
	margin: -.8em 0 1.6em;
	font-size: .82rem;
	color: var(--ksth-sub);
	line-height: 1.7;
}

/* 横に動かせることを知らせる帯（スマホのときだけ出る） */
.ksth-table-hint {
	display: none;
	margin: 0 0 .4em;
	font-size: .78rem;
	color: var(--ksth-sub);
}


/* ============================================================================
 * §09 図
 * ----------------------------------------------------------------------------
 *   記事の図は画像を使わず、HTML と SVG と CSS で描く（読み込みが軽く、拡大してもぼやけない。
 *   文字として読めるため、検索エンジンと AI が中身を読める）。
 *     .ksth-fig        図の外枠（空色の地・角丸）。見出しと「図1」の番号を自動で付ける
 *     .ksth-bars       横棒グラフ（--v に 0〜100 の値）
 *     .ksth-rings      円のグラフ（TOP の fl-ring と同じ形。--p に 0〜100）
 *     .ksth-flow       手順の流れ（矢印でつなぐ）
 *     .ksth-matrix     2×2 の早見表（TOP の fl-ans と同じ形）
 *     .ksth-compare    2つを比べる図（スマホでは縦に並ぶ）
 *     .ksth-timeline   時間の流れ（左に縦線）
 *     .ksth-stat       大きな数字（件数・時間・人数）
 *   図の番号は記事ごとに 図1・図2… と自動で振る（counter）。
 * ========================================================================== */

.ks-wp-content {
	counter-reset: ksth-fig;
}

.ksth-fig,
:where(.ks-wp-content) .fig {
	counter-increment: ksth-fig;
	position: relative;
	margin: 1.8em 0;
	padding: 1.2em 1.2em 1em;
	border-radius: var(--ksth-r-lg);
	background: var(--ksth-sky);
	border: 1px solid #d6e6f7;
}

.ksth-fig__t,
:where(.ks-wp-content) .fig > .fig__t {
	display: block;
	margin: 0 0 .8em;
	font-size: .95rem;
	font-weight: 900;
	color: var(--ksth-navy);
	line-height: 1.5;
}

.ksth-fig__t::before {
	content: "図" counter(ksth-fig);
	display: inline-block;
	margin-right: .55em;
	padding: .1em .55em;
	border-radius: 4px;
	background: var(--ksth-navy);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	vertical-align: .08em;
}

.ksth-fig figcaption,
.ksth-fig__cap,
:where(.ks-wp-content) figure > figcaption,
:where(.ks-wp-content) .wp-element-caption {
	margin-top: .7em;
	font-size: .82rem;
	line-height: 1.7;
	color: var(--ksth-sub);
	text-align: left;
}

.ksth-fig svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ksth-fig svg text {
	font-family: var(--ksth-font);
	fill: var(--ksth-text);
}

/* 横棒グラフ */
.ksth-bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .6em;
}

.ksth-bars > li {
	display: grid;
	grid-template-columns: minmax(6em, 30%) 1fr auto;
	align-items: center;
	gap: .6em;
	margin: 0;
	padding: 0;
	font-size: .9rem;
}

.ksth-bars__k {
	font-weight: 700;
	color: var(--ksth-navy);
	line-height: 1.45;
}

.ksth-bars__b {
	position: relative;
	height: 14px;
	border-radius: var(--ksth-r-pill);
	background: #d9e7f6;
	overflow: hidden;
}

.ksth-bars__b::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--v, 50) * 1%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ksth-c1), var(--ksth-c1-dark));
}

.ksth-bars > li:nth-child(4n+2) .ksth-bars__b::after {
	background: linear-gradient(90deg, var(--ksth-orange-2), var(--ksth-orange));
}

.ksth-bars > li:nth-child(4n+3) .ksth-bars__b::after {
	background: linear-gradient(90deg, var(--ksth-c3), var(--ksth-c3-dark));
}

.ksth-bars > li:nth-child(4n+4) .ksth-bars__b::after {
	background: linear-gradient(90deg, var(--ksth-c4), var(--ksth-c4-dark));
}

.ksth-bars__v {
	font-family: var(--ksth-font-num);
	font-weight: 900;
	color: var(--ksth-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 円のグラフ（TOP の fl-ring と同じ作り） */
.ksth-rings {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .8em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ksth-ring {
	text-align: center;
	margin: 0;
}

.ksth-ring__g {
	--p: 50;
	width: 84px;
	height: 84px;
	margin: 0 auto;
	border-radius: 50%;
	background: conic-gradient(var(--ksth-blue) calc(var(--p) * 1%), #dbe5f0 0);
	display: grid;
	place-items: center;
}

.ksth-ring__g > span {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	font-family: var(--ksth-font-num);
	font-weight: 900;
	font-size: 1.1rem;
	color: var(--ksth-navy);
	line-height: 1;
}

.ksth-ring__g small {
	font-size: .62rem;
	margin-left: 1px;
	color: var(--ksth-sub);
}

.ksth-ring__t {
	margin: .4em 0 0;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ksth-sub);
	line-height: 1.45;
}

.ksth-ring:nth-child(2) .ksth-ring__g {
	background: conic-gradient(var(--ksth-orange) calc(var(--p) * 1%), #f5e2cf 0);
}

.ksth-ring:nth-child(3) .ksth-ring__g {
	background: conic-gradient(var(--ksth-c3) calc(var(--p) * 1%), #d5ece9 0);
}

.ksth-ring:nth-child(4) .ksth-ring__g {
	background: conic-gradient(var(--ksth-c4) calc(var(--p) * 1%), #e3e0fb 0);
}

/* 手順の流れ（横に3〜4つ。スマホでは縦） */
.ksth-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 18px;
	counter-reset: ksth-flow;
}

.ksth-flow > li {
	position: relative;
	counter-increment: ksth-flow;
	margin: 0;
	padding: 1em 1em 1.1em;
	border-radius: var(--ksth-r-lg);
	background: #fff;
	border: 1px solid var(--ksth-line);
	line-height: 1.7;
	font-size: .92rem;
}

.ksth-flow > li::before {
	content: counter(ksth-flow);
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	margin-bottom: .4em;
	border-radius: 50%;
	background: var(--ksth-blue);
	color: #fff;
	font-weight: 900;
	font-size: .9rem;
}

.ksth-flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -15px;
	top: 50%;
	border: 7px solid transparent;
	border-left-color: var(--ksth-blue);
	transform: translateY(-50%);
}

.ksth-flow b,
.ksth-flow strong {
	display: block;
	color: var(--ksth-navy);
	font-size: 1rem;
	margin-bottom: .2em;
}

/* 2×2 の早見表（TOP の fl-ans と同じ配色） */
.ksth-matrix {
	display: grid;
	gap: 10px;
}

.ksth-matrix__ax,
.ksth-matrix__row {
	display: grid;
	grid-template-columns: 120px 1fr 1fr;
	gap: 10px;
}

.ksth-matrix__ax > span {
	text-align: center;
	font-weight: 900;
	color: #fff;
	background: var(--ksth-navy);
	border-radius: var(--ksth-r);
	padding: 8px;
	font-size: .88rem;
}

.ksth-matrix__ax > span:first-child {
	background: none;
}

.ksth-matrix__rh {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: var(--ksth-r);
	font-weight: 900;
	color: var(--ksth-navy);
	text-align: center;
	line-height: 1.4;
}

.ksth-matrix__rh small {
	font-size: .7rem;
	font-weight: 700;
	color: var(--ksth-sub);
}

.ksth-matrix__c {
	border-radius: 12px;
	padding: 14px;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--ksth-text-2);
	border: 2px solid;
	background: #fff;
}

.ksth-matrix__c b {
	display: block;
	font-size: 1rem;
	margin-bottom: 4px;
}

.ksth-matrix__c--1 {
	border-color: #f0831e;
	background: #fff7ef;
}

.ksth-matrix__c--1 b {
	color: #b54e00;
}

.ksth-matrix__c--2 {
	border-color: #2a9d8f;
	background: #effaf8;
}

.ksth-matrix__c--2 b {
	color: #1b6f66;
}

.ksth-matrix__c--3 {
	border-color: #1f6fd1;
	background: #eef5fd;
}

.ksth-matrix__c--3 b {
	color: #1a5fb4;
}

.ksth-matrix__c--4 {
	border-color: #6c5ce7;
	background: #f3f1fe;
}

.ksth-matrix__c--4 b {
	color: #3f3494;
}

/* 2つを比べる図（図の中だけ横に並べる。文章ではない） */
.ksth-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ksth-compare__col {
	border-radius: var(--ksth-r-lg);
	background: #fff;
	border: 1px solid var(--ksth-line);
	overflow: hidden;
}

.ksth-compare__h {
	margin: 0;
	padding: .6em .9em;
	background: var(--ksth-navy);
	color: #fff;
	font-weight: 900;
	font-size: .95rem;
	text-align: center;
}

.ksth-compare__col:nth-child(2) .ksth-compare__h {
	background: var(--ksth-orange-text);
}

.ksth-compare__b {
	padding: .8em .95em;
	font-size: .9rem;
	line-height: 1.75;
}

.ksth-compare__b ul {
	margin: 0;
	padding-left: 1.2em;
}

/* 時間の流れ */
.ksth-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.4em;
	border-left: 3px solid #cfe0f3;
}

.ksth-timeline > li {
	position: relative;
	margin: 0 0 1.1em;
	padding: 0 0 0 .6em;
}

.ksth-timeline > li::before {
	content: "";
	position: absolute;
	left: calc(-1.4em - 9px);
	top: .45em;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--ksth-blue);
}

.ksth-timeline__when {
	display: block;
	font-size: .8rem;
	font-weight: 900;
	color: var(--ksth-blue);
	letter-spacing: .06em;
}

.ksth-timeline__what {
	display: block;
	font-weight: 700;
	color: var(--ksth-navy);
}

/* 大きな数字（時間・頻度・件数・人数の「前と後」を見せる） */
.ksth-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 1.6em 0;
}

.ksth-stat {
	margin: 0;
	padding: 1em;
	border-radius: var(--ksth-r-lg);
	background: #fff;
	border: 1px solid var(--ksth-line);
	text-align: center;
}

.ksth-stat__k {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ksth-sub);
}

.ksth-stat__v {
	display: block;
	margin: .15em 0;
	font-family: var(--ksth-font-num);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	font-weight: 900;
	color: var(--ksth-navy);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ksth-stat__v small {
	font-size: .45em;
	margin-left: .1em;
}

.ksth-stat__d {
	display: block;
	font-size: .78rem;
	color: var(--ksth-sub);
	line-height: 1.6;
}

/* 前 → 後 */
.ksth-ba {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
}

.ksth-ba__x {
	padding: .9em;
	border-radius: var(--ksth-r);
	background: #fff;
	border: 1px solid var(--ksth-line);
	text-align: center;
}

.ksth-ba__x b {
	display: block;
	font-family: var(--ksth-font-num);
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--ksth-sub);
	line-height: 1.3;
}

.ksth-ba__x--after {
	border-color: var(--ksth-orange);
	background: #fff7ef;
}

.ksth-ba__x--after b {
	color: var(--ksth-orange-text);
}

.ksth-ba__arrow {
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-left: 12px solid var(--ksth-orange);
}


/* ============================================================================
 * §10 導入インタビュー（お客様の声・第三者の話法）
 * ----------------------------------------------------------------------------
 *   導入事例の記事は「成果 → 背景 → 導入前 → 選んだ理由 → 使い方」の順（成果先行型）。
 *   聞き手の問いと、話し手の答えを見分けやすくする。
 *     .ksth-iv            インタビューのまとまり
 *     .ksth-iv__q         聞き手（編集部）の問い。灰色の細字
 *     .ksth-iv__a         話し手の答え。話し手の名前（肩書き）を頭に付ける
 *     .ksth-iv__who       話し手の名前・肩書き（例「事務長」）
 *     .ksth-pull          抜き出した一言（東洋経済の大きな引用のような形）
 *     .ksth-profile       取材先の概要（施設の種類・規模・地域・話し手）
 *     .ksth-result        導入後の変化（数字の前と後）
 *   ご本人の言葉を「」で示し、書き手が付け足した言葉と混ぜない。
 * ========================================================================== */

.ksth-iv {
	max-width: var(--ksth-w);
	margin: 1.4em auto;
}

.ksth-iv__q {
	position: relative;
	margin: 1.8em 0 .8em;
	padding: 0 0 0 2.1em;
	font-weight: 700;
	color: var(--ksth-sub);
	line-height: 1.75;
}

.ksth-iv__q::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.55em;
	height: 1.55em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-gray-2);
	color: var(--ksth-navy);
	font-size: .85em;
	font-weight: 900;
}

.ksth-iv__a {
	position: relative;
	margin: 0 0 1em;
	padding: 0 0 0 2.1em;
	line-height: var(--ksth-lh);
}

.ksth-iv__a::before {
	content: "A";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.55em;
	height: 1.55em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-navy);
	color: #fff;
	font-size: .85em;
	font-weight: 900;
}

.ksth-iv__who {
	display: inline-block;
	margin: 0 .5em .2em 0;
	padding: .05em .6em;
	border-radius: 4px;
	background: var(--ksth-sky);
	color: var(--ksth-navy);
	font-size: .78rem;
	font-weight: 700;
	vertical-align: .1em;
}

/* 抜き出した一言 */
.ksth-pull {
	position: relative;
	max-width: var(--ksth-w);
	margin: 2em auto;
	padding: 1.2em 1.4em 1.2em 3.2em;
	border-top: 2px solid var(--ksth-navy);
	border-bottom: 1px solid var(--ksth-line);
	font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.8;
	color: var(--ksth-navy);
}

.ksth-pull::before {
	content: "";
	position: absolute;
	left: .6em;
	top: 1.15em;
	width: 1.8em;
	height: 1.4em;
	background: var(--ksth-orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13C0 6 3.6 1.6 10.8 0l1.6 3.2C8.4 4.6 6.6 7 6.4 10.4H12V24H0zm18 0V13c0-7 3.6-11.4 10.8-13l1.6 3.2c-4 1.4-5.8 3.8-6 7.2H30V24H18z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13C0 6 3.6 1.6 10.8 0l1.6 3.2C8.4 4.6 6.6 7 6.4 10.4H12V24H0zm18 0V13c0-7 3.6-11.4 10.8-13l1.6 3.2c-4 1.4-5.8 3.8-6 7.2H30V24H18z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ksth-pull cite,
.ksth-pull__who {
	display: block;
	margin-top: .6em;
	font-size: .8rem;
	font-style: normal;
	font-weight: 700;
	color: var(--ksth-sub);
}

/* 取材先の概要（記事の冒頭に置く表） */
.ksth-profile {
	max-width: var(--ksth-w);
	margin: 1.6em auto;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r-lg);
	overflow: hidden;
	background: #fff;
}

.ksth-profile__h {
	margin: 0;
	padding: .7em 1em;
	background: var(--ksth-navy);
	color: #fff;
	font-size: .9rem;
	font-weight: 900;
}

.ksth-profile dl {
	margin: 0;
	border: 0;
	display: grid;
	grid-template-columns: 8.5em 1fr;
}

.ksth-profile dt,
.ksth-profile dd {
	margin: 0;
	padding: .65em 1em;
	border-bottom: 1px solid var(--ksth-line);
	font-size: .9rem;
	line-height: 1.7;
}

.ksth-profile dt {
	background: var(--ksth-gray);
	color: var(--ksth-navy);
	font-weight: 700;
}

.ksth-profile dd {
	color: var(--ksth-text-2);
}

.ksth-profile dt:last-of-type,
.ksth-profile dd:last-of-type {
	border-bottom: 0;
}

/* 導入後の変化（成果を最初に見せる箱） */
.ksth-result {
	max-width: var(--ksth-w-article);
	margin: 1.6em auto 2em;
	padding: 1.2em 1.2em 1em;
	border-radius: var(--ksth-r-xl);
	background: linear-gradient(135deg, #e7f1fc 0%, #f7fbff 55%, #fff4e8 100%);
	border: 1px solid #d6e6f7;
}

.ksth-result__h {
	margin: 0 0 .8em;
	font-size: 1rem;
	font-weight: 900;
	color: var(--ksth-navy);
}

.ksth-result .ksth-stats {
	margin: 0;
}

/* お客様の声のカード（TOP の fl-vc と同じ形） */
.ksth-voices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 1.6em 0;
}

.ksth-voice {
	position: relative;
	margin: 0;
	padding: 1em 1.1em;
	border-radius: var(--ksth-r-lg);
	background: #fff;
	border: 1px solid var(--ksth-line);
}

.ksth-voice::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 16px;
	right: 16px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: var(--ksth-orange);
}

.ksth-voice__m {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: .2em 0 .4em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--ksth-sub);
}

.ksth-voice__h {
	margin: 0 0 .4em;
	font-weight: 900;
	color: var(--ksth-navy);
	font-size: .98rem;
	line-height: 1.55;
}

.ksth-voice__q {
	margin: 0;
	font-size: .92rem;
	color: var(--ksth-text-2);
	line-height: 1.85;
}

.ksth-voice-note {
	margin: .6em 0 0;
	font-size: .78rem;
	color: var(--ksth-sub);
}


/* ============================================================================
 * §11 囲み・根拠・出典
 * ----------------------------------------------------------------------------
 *   .ksth-box            基本の囲み（灰面）
 *   .ksth-box--point     大事な点（紺の縁）
 *   .ksth-box--warn      気をつける点（橙の縁）
 *   .ksth-box--ng        やってはいけないこと（赤の縁）
 *   .ksth-box--ok        できること（緑の縁）
 *   .ksth-summary        この記事の要点（冒頭・末尾）
 *   .ksth-evidence       根拠（数字・法令・公的な資料の要約）
 *   .ksth-sources        出典の一覧（書名・発行元・日付・住所）
 *   .ksth-updated        更新の記録（いつ、何を直したか）
 *   根拠と出典は、読む人と AI が「どこから来た情報か」をたどれるようにするための欄。
 * ========================================================================== */

.ksth-box {
	max-width: var(--ksth-w);
	margin: 1.6em auto;
	padding: 1em 1.2em;
	border-radius: var(--ksth-r-lg);
	background: var(--ksth-gray);
	border: 1px solid var(--ksth-line);
	line-height: 1.85;
}

.ksth-box > :last-child {
	margin-bottom: 0;
}

.ksth-box__t {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .5em;
	font-weight: 900;
	color: var(--ksth-navy);
	font-size: .98rem;
}

.ksth-box__t::before {
	content: "";
	flex: 0 0 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var(--ksth-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.ksth-box--point {
	background: var(--ksth-info-bg);
	border-color: #b9d3f0;
	border-left: 5px solid var(--ksth-navy);
}

.ksth-box--warn {
	background: var(--ksth-warn-bg);
	border-color: #f3d3a8;
	border-left: 5px solid var(--ksth-orange);
}

.ksth-box--warn .ksth-box__t {
	color: var(--ksth-warn);
}

.ksth-box--warn .ksth-box__t::before {
	background-color: var(--ksth-orange);
}

.ksth-box--ng {
	background: var(--ksth-ng-bg);
	border-color: #f2c1c1;
	border-left: 5px solid var(--ksth-ng);
}

.ksth-box--ng .ksth-box__t {
	color: var(--ksth-ng);
}

.ksth-box--ng .ksth-box__t::before {
	background-color: var(--ksth-ng);
}

.ksth-box--ok {
	background: var(--ksth-ok-bg);
	border-color: #bfe3cc;
	border-left: 5px solid var(--ksth-ok);
}

.ksth-box--ok .ksth-box__t {
	color: var(--ksth-ok);
}

.ksth-box--ok .ksth-box__t::before {
	background-color: var(--ksth-ok);
}

/* この記事の要点 */
.ksth-summary {
	max-width: var(--ksth-w);
	margin: 1.6em auto 2em;
	padding: 1.1em 1.3em 1em;
	border: 2px solid var(--ksth-navy);
	border-radius: var(--ksth-r-lg);
	background: #fff;
}

.ksth-summary__t {
	display: inline-block;
	margin: 0 0 .5em;
	padding: .15em .8em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-navy);
	color: #fff;
	font-size: .82rem;
	font-weight: 900;
	letter-spacing: .08em;
}

.ksth-summary ul,
.ksth-summary ol {
	margin: 0;
}

.ksth-summary li {
	margin: .4em 0;
	line-height: 1.8;
}

/* 根拠（Evidence） */
.ksth-evidence {
	max-width: var(--ksth-w);
	margin: 1.6em auto;
	padding: 1em 1.2em;
	border-radius: var(--ksth-r);
	background: #fff;
	border: 1px dashed #9fbde0;
	font-size: .92rem;
	line-height: 1.85;
}

.ksth-evidence__t {
	display: block;
	margin: 0 0 .4em;
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .12em;
	color: var(--ksth-blue);
}

.ksth-evidence__src {
	display: block;
	margin-top: .5em;
	font-size: .78rem;
	color: var(--ksth-sub);
}

/* 出典の一覧（Reference） */
.ksth-sources {
	max-width: var(--ksth-w);
	margin: 2.4em auto 1.6em;
	padding: 1em 1.2em;
	border-top: 2px solid var(--ksth-navy);
	background: var(--ksth-gray);
	border-radius: 0 0 var(--ksth-r) var(--ksth-r);
	font-size: .86rem;
	line-height: 1.8;
}

.ksth-sources__t {
	margin: 0 0 .5em;
	font-size: .92rem;
	font-weight: 900;
	color: var(--ksth-navy);
}

.ksth-sources ol,
.ksth-sources ul {
	margin: 0;
	padding-left: 1.4em;
}

.ksth-sources li {
	margin: .3em 0;
	color: var(--ksth-text-2);
}

.ksth-sources a {
	word-break: break-all;
}

/* 更新の記録 */
.ksth-updated {
	max-width: var(--ksth-w);
	margin: 1.2em auto;
	font-size: .8rem;
	color: var(--ksth-sub);
	line-height: 1.7;
}

.ksth-updated time {
	font-weight: 700;
	color: var(--ksth-text-2);
}

/* 引用（本文の中の blockquote） */
:where(.ks-wp-content) blockquote {
	position: relative;
	margin: 1.8em auto;
	padding: 1em 1.2em 1em 1.4em;
	background: var(--ksth-gray);
	border-left: 4px solid var(--ksth-navy);
	border-radius: 0 var(--ksth-r) var(--ksth-r) 0;
	color: var(--ksth-text-2);
	line-height: 1.9;
}

:where(.ks-wp-content) blockquote > :last-child {
	margin-bottom: 0;
}

:where(.ks-wp-content) blockquote cite {
	display: block;
	margin-top: .5em;
	font-size: .8rem;
	font-style: normal;
	color: var(--ksth-sub);
}


/* ============================================================================
 * §12 よくある質問（開閉）
 * ----------------------------------------------------------------------------
 *   HTML の <details><summary> で作る（JavaScript が無くても開く。検索エンジンと AI も
 *   閉じた中身まで読める）。TOP の fl-qa と同じ形（紺の丸に Q）。
 *
 *   「アコーディオンのクリックバーが開かない」（条件69）への備え
 *     ・summary を押せる範囲いっぱいにし、上に何も重ねない（z-index・pointer-events）
 *     ・summary に display:flex を付けても開閉できるよう、印は疑似要素で描く
 *     ・開閉の印（＋／−）は summary の中に置き、押した場所がずれない
 *     ・光るボタンなどの疑似要素（::after）は、押す邪魔をしない（pointer-events:none）
 *   Elementor の「アコーディオン」「トグル」も同じ考えで補う（§20）。
 * ========================================================================== */

:where(.ks-wp) details {
	position: relative;
}

:where(.ks-wp) details > summary {
	position: relative;
	z-index: 1;
	cursor: pointer;
	pointer-events: auto;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(31, 111, 209, .12);
	touch-action: manipulation;
}

:where(.ks-wp) details > summary::-webkit-details-marker {
	display: none;
}

.ksth-faq,
:where(.ks-wp-content) .ksth-qa-list {
	max-width: var(--ksth-w);
	margin: 1.6em auto;
}

.ksth-qa,
:where(.ks-wp-content) details.fl-qa,
:where(.ks-wp-content) details.ac {
	margin: 12px 0 0;
	border: 1px solid var(--ksth-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.ksth-qa > summary,
:where(.ks-wp-content) details.fl-qa > summary,
:where(.ks-wp-content) details.ac > summary {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 52px;
	padding: 14px 48px 14px 16px;
	list-style: none;
	font-weight: 700;
	color: var(--ksth-text);
	line-height: 1.65;
}

.ksth-qa > summary::before,
:where(.ks-wp-content) details.fl-qa > summary::before,
:where(.ks-wp-content) details.ac > summary::before {
	content: "Q";
	flex: 0 0 26px;
	height: 26px;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	margin-top: 1px;
}

.ksth-qa > summary::after,
:where(.ks-wp-content) details.fl-qa > summary::after,
:where(.ks-wp-content) details.ac > summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	pointer-events: none;
	background:
		linear-gradient(var(--ksth-navy), var(--ksth-navy)) center / 12px 2px no-repeat,
		linear-gradient(var(--ksth-navy), var(--ksth-navy)) center / 2px 12px no-repeat;
	transition: transform var(--ksth-dur) var(--ksth-ease);
}

.ksth-qa[open] > summary::after,
:where(.ks-wp-content) details.fl-qa[open] > summary::after,
:where(.ks-wp-content) details.ac[open] > summary::after {
	background: linear-gradient(var(--ksth-navy), var(--ksth-navy)) center / 12px 2px no-repeat;
}

.ksth-qa > summary:hover,
:where(.ks-wp-content) details.fl-qa > summary:hover,
:where(.ks-wp-content) details.ac > summary:hover {
	background: #f7faff;
}

.ksth-qa[open] > summary,
:where(.ks-wp-content) details.fl-qa[open] > summary,
:where(.ks-wp-content) details.ac[open] > summary {
	border-bottom: 1px dashed var(--ksth-line);
}

.ksth-qa__a,
.ksth-qa > p,
.ksth-qa > div,
:where(.ks-wp-content) details.fl-qa > p,
:where(.ks-wp-content) details.ac > p,
:where(.ks-wp-content) details.ac > div {
	position: relative;
	margin: 0;
	padding: 14px 16px 16px 52px;
	color: var(--ksth-text-2);
	line-height: 1.9;
}

.ksth-qa__a::before {
	content: "A";
	position: absolute;
	left: 16px;
	top: 14px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-orange);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.ksth-qa__a > :last-child {
	margin-bottom: 0;
}

/* 開いたときの動き（動きを減らす設定の人には付けない） */
@media (prefers-reduced-motion: no-preference) {
	.ksth-qa[open] > .ksth-qa__a,
	:where(.ks-wp-content) details.fl-qa[open] > p,
	:where(.ks-wp-content) details.ac[open] > p,
	:where(.ks-wp-content) details.ac[open] > div {
		animation: ksth-open .22s var(--ksth-ease);
	}
}

@keyframes ksth-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ブロックエディタの「詳細」ブロック（wp-block-details） */
:where(.ks-wp-content) .wp-block-details {
	margin: 1em 0;
	padding: 0;
	border: 1px solid var(--ksth-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

:where(.ks-wp-content) .wp-block-details > summary {
	display: block;
	padding: 14px 48px 14px 16px;
	list-style: none;
	font-weight: 700;
	color: var(--ksth-navy);
}

:where(.ks-wp-content) .wp-block-details > summary::after {
	content: "＋";
	position: absolute;
	right: 16px;
	top: 12px;
	font-weight: 900;
	color: var(--ksth-navy);
	pointer-events: none;
}

:where(.ks-wp-content) .wp-block-details[open] > summary::after {
	content: "−";
}

:where(.ks-wp-content) .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 16px 14px;
}


/* ============================================================================
 * §13 手順（HowTo）
 * ----------------------------------------------------------------------------
 *   手順は、番号・見出し・説明・かかる時間・必要なもので1段ずつ見せる。
 *   縦の線でつなぎ、どの段にいるかが分かるようにする。
 *     <ol class="ksth-steps">
 *       <li><b class="ksth-steps__t">…</b><p>…</p><span class="ksth-steps__time">約10分</span></li>
 *     </ol>
 * ========================================================================== */

.ksth-steps,
:where(.ks-wp-content) ol.ks-sg-steps {
	list-style: none;
	max-width: var(--ksth-w);
	margin: 1.6em auto;
	padding: 0;
	counter-reset: ksth-step;
}

.ksth-steps > li,
:where(.ks-wp-content) ol.ks-sg-steps > li {
	position: relative;
	counter-increment: ksth-step;
	margin: 0;
	padding: 0 0 1.4em 3.4em;
	line-height: 1.85;
}

.ksth-steps > li::before,
:where(.ks-wp-content) ol.ks-sg-steps > li::before {
	content: counter(ksth-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.3em;
	height: 2.3em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-navy);
	color: #fff;
	font-weight: 900;
	font-size: .95rem;
	z-index: 1;
}

.ksth-steps > li:not(:last-child)::after,
:where(.ks-wp-content) ol.ks-sg-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.15em - 1px);
	top: 2.4em;
	bottom: .2em;
	width: 2px;
	background: #cfe0f3;
}

.ksth-steps > li:last-child::before {
	background: var(--ksth-orange);
}

.ksth-steps__t {
	display: block;
	margin: .25em 0 .3em;
	font-size: 1.05rem;
	font-weight: 900;
	color: var(--ksth-navy);
	line-height: 1.55;
}

.ksth-steps__time,
.ksth-steps__need {
	display: inline-block;
	margin: .3em .5em 0 0;
	padding: .1em .65em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-gray-2);
	color: var(--ksth-navy);
	font-size: .76rem;
	font-weight: 700;
}

.ksth-steps__need {
	background: #fff4e8;
	color: var(--ksth-orange-text);
}

.ksth-steps > li > p {
	margin: 0 0 .4em;
}


/* ============================================================================
 * §14 目次
 * ----------------------------------------------------------------------------
 *   記事の冒頭に置く目次。開閉できる形（details）と、開いたままの形の両方に対応する。
 *   ページ内のどこへ飛べるかを最初に見せると、読む人は自分の知りたい節へ直接進める。
 * ========================================================================== */

.ksth-toc,
:where(.ks-wp-content) .ks-sg-toc {
	max-width: var(--ksth-w);
	margin: 1.6em auto 2.2em;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r-lg);
	background: var(--ksth-gray);
	overflow: hidden;
}

.ksth-toc > summary,
.ksth-toc__t {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0;
	padding: .8em 1.1em;
	list-style: none;
	font-weight: 900;
	color: var(--ksth-navy);
	font-size: .95rem;
}

.ksth-toc > summary::after {
	content: "開く";
	margin-left: auto;
	padding: .1em .7em;
	border-radius: var(--ksth-r-pill);
	border: 1px solid var(--ksth-navy);
	font-size: .72rem;
	font-weight: 700;
	pointer-events: none;
}

.ksth-toc[open] > summary::after {
	content: "閉じる";
}

.ksth-toc ol,
.ksth-toc ul {
	margin: 0;
	padding: 0 1.1em 1em 2.6em;
	counter-reset: ksth-toc;
}

.ksth-toc li {
	margin: .25em 0;
	font-size: .92rem;
	line-height: 1.65;
}

.ksth-toc li li {
	font-size: .86rem;
}

.ksth-toc a {
	color: var(--ksth-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ksth-toc a:hover {
	color: var(--ksth-navy-2);
	border-bottom-color: currentColor;
}


/* ============================================================================
 * §15 監修者・著者（誰が書き、誰が確かめたか）
 * ----------------------------------------------------------------------------
 *   記事の頭と末尾に、監修者の名前・肩書き・経験（年数・施設数・件数）と、
 *   運営会社を出す。TOP の fl-sv と同じ形（紺の丸・白い線の人の印）。
 *   顔写真は使わない（画像なし）。
 * ========================================================================== */

.ksth-author,
:where(.ks-wp-content) .ks-sv {
	max-width: var(--ksth-w);
	margin: 1.8em auto;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 20px;
	border: 1px solid var(--ksth-line);
	border-radius: 16px;
	background: #fff;
}

.ksth-author__i {
	flex: 0 0 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ksth-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM2 21v-1a7 7 0 0 1 14 0v1M16 3.5a4 4 0 0 1 0 7.5M22 21v-1a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E") center / 58% no-repeat;
}

.ksth-author__k {
	margin: 0;
	font-size: .74rem;
	font-weight: 900;
	letter-spacing: .1em;
	color: var(--ksth-orange-text);
}

.ksth-author__n {
	margin: .1em 0 .25em;
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--ksth-navy);
	line-height: 1.4;
}

.ksth-author__n small {
	margin-left: .6em;
	font-size: .74rem;
	font-weight: 700;
	color: var(--ksth-sub);
}

.ksth-author__d {
	margin: 0;
	font-size: .88rem;
	line-height: 1.8;
	color: var(--ksth-text-2);
}

.ksth-author__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: .5em 0 0;
	padding: 0;
	list-style: none;
}

.ksth-author__nums li {
	margin: 0;
	padding: .15em .65em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-sky);
	color: var(--ksth-navy);
	font-size: .74rem;
	font-weight: 700;
}

/* 運営会社の一行 */
.ksth-org {
	max-width: var(--ksth-w);
	margin: .8em auto 0;
	font-size: .8rem;
	color: var(--ksth-sub);
	line-height: 1.7;
}


/* ============================================================================
 * §16 記事の頭（タイトル・日付・読む時間）
 * ----------------------------------------------------------------------------
 *   東洋経済の記事の頭と同じ並び：分類 → タイトル（大きく）→ 日付・読む時間 → 監修者。
 *   タイトルは1ページに1つだけ（h1）。テンプレートの見出しがあるときは、そちらが勝つ。
 * ========================================================================== */

.ksth-ahead {
	max-width: var(--ksth-w-article);
	margin: 0 auto;
	padding: clamp(24px, 4vw, 40px) var(--ksth-pad) 0;
}

.ksth-ahead__cat {
	display: inline-block;
	margin: 0 0 .6em;
	padding: .15em .8em;
	border-radius: 4px;
	background: var(--ksth-orange-text);
	color: #fff;
	font-size: .76rem;
	font-weight: 700;
	text-decoration: none;
}

:where(.ks-wp) .entry-title,
.ksth-ahead__t {
	margin: 0;
	font-family: var(--ksth-font);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
	font-weight: 900;
	line-height: 1.45;
	color: var(--ksth-navy);
	letter-spacing: .01em;
	font-feature-settings: "palt" 1;
}

.ksth-ahead__meta,
.ks-wp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3em 1.1em;
	margin: .9rem 0 0;
	font-size: .84rem;
	color: var(--ksth-sub);
	line-height: 1.6;
}

.ksth-ahead__meta time,
.ks-wp-meta time {
	font-variant-numeric: tabular-nums;
}

.ksth-ahead__rule {
	height: 0;
	margin: 1.2em 0 0;
	border: 0;
	border-top: 3px solid var(--ksth-navy);
}

/* パンくず（どの階層にいるか） */
.ksth-crumbs {
	max-width: var(--ksth-w-article);
	margin: 0 auto;
	padding: 14px var(--ksth-pad) 0;
	font-size: .78rem;
	color: var(--ksth-sub);
}

.ksth-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .2em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ksth-crumbs li {
	margin: 0;
}

.ksth-crumbs li + li::before {
	content: "›";
	margin: 0 .45em 0 .2em;
	color: #9aa7b4;
}

.ksth-crumbs a {
	color: var(--ksth-sub);
	text-decoration: none;
}

.ksth-crumbs a:hover {
	color: var(--ksth-navy);
	text-decoration: underline;
}


/* ============================================================================
 * §17 ボタン・行動の呼びかけ
 * ----------------------------------------------------------------------------
 *   TOP と同じ3種類。色は変えない。
 *     .ksth-btn            橙のグラデーション（無料で相談・見積）。白い文字・下に橙の影
 *     .ksth-btn--line      LINE の緑（#06c755）。白い文字
 *     .ksth-btn--outline   白地に紺の縁・紺の文字
 *   ボタンの文字は、どの地の上でも白（または紺）のまま。親の色を引き継がない（!important）。
 *   光る動き（TOP の fl-shine）は、動きを減らす設定の人には出さない。
 *   光の帯は疑似要素で描き、押す邪魔をしない（pointer-events:none）。
 * ========================================================================== */

.ksth-btn,
:where(.ks-wp-content) .btn,
:where(.ks-wp-content) .fl-btn,
:where(.ks-wp-content) .fl-btn2 {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 48px;
	padding: .75em 1.6em;
	border: 0;
	border-radius: var(--ksth-r-pill);
	background: linear-gradient(180deg, var(--ksth-orange-2), var(--ksth-orange));
	box-shadow: var(--ksth-shadow-btn);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-family: var(--ksth-font);
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--ksth-dur) var(--ksth-ease), box-shadow var(--ksth-dur) var(--ksth-ease), filter var(--ksth-dur);
}

.ksth-btn:hover,
:where(.ks-wp-content) .btn:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
}

.ksth-btn:active,
:where(.ks-wp-content) .btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--ksth-orange-shadow);
}

.ksth-btn:visited {
	color: #fff !important;
}

.ksth-btn--line {
	background: var(--ksth-line-green);
	box-shadow: 0 3px 0 #04994a;
}

.ksth-btn--line:active {
	box-shadow: 0 1px 0 #04994a;
}

.ksth-btn--outline,
:where(.ks-wp-content) .fl-btn2--o {
	background: #fff;
	color: var(--ksth-navy) !important;
	-webkit-text-fill-color: var(--ksth-navy);
	border: 2px solid var(--ksth-navy);
	box-shadow: none;
}

.ksth-btn--outline:visited {
	color: var(--ksth-navy) !important;
}

.ksth-btn--block {
	display: flex;
	width: 100%;
}

.ksth-btn--lg {
	min-height: 56px;
	font-size: 1.08rem;
	padding: .9em 2em;
}

.ksth-btn small {
	font-size: .72em;
	font-weight: 700;
	opacity: .95;
}

/* 光る帯（TOP の fl-shine と同じ動き） */
.ksth-shine,
:where(.ks-wp) .fl-shine {
	position: relative;
	overflow: hidden;
}

.ksth-shine::after,
:where(.ks-wp) .fl-shine::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -60%;
	width: 30%;
	height: 200%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	transform: rotate(20deg);
	animation: ksth-shine 3.2s ease-in-out infinite;
}

@keyframes ksth-shine {
	0% {
		left: -60%;
	}
	35%,
	100% {
		left: 130%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ksth-shine::after,
	:where(.ks-wp) .fl-shine::after {
		animation: none;
		display: none;
	}
}

/* 行動の呼びかけの箱（記事の途中・末尾） */
.ksth-cta,
:where(.ks-wp-content) .cta {
	max-width: var(--ksth-w-article);
	margin: 2.2em auto;
	padding: 1.4em 1.4em 1.3em;
	border-radius: var(--ksth-r-xl);
	background: #fff;
	border: 3px solid var(--ksth-orange);
	text-align: center;
}

.ksth-cta__t {
	margin: 0 0 .4em;
	font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
	font-weight: 900;
	color: var(--ksth-navy);
	line-height: 1.5;
}

.ksth-cta__d {
	margin: 0 auto 1em;
	max-width: 36em;
	font-size: .92rem;
	color: var(--ksth-text-2);
	line-height: 1.8;
}

.ksth-cta__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	font-size: .84rem;
	font-weight: 700;
	color: var(--ksth-navy);
}

.ksth-cta__points li {
	margin: 0;
}

.ksth-cta__points li::before {
	content: "✓ ";
	color: var(--ksth-orange);
}

.ksth-cta__btns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}

.ksth-cta__note {
	margin: .8em 0 0;
	font-size: .78rem;
	color: var(--ksth-sub);
}


/* ============================================================================
 * §18 相談フォーム（Contact Form 7）
 * ----------------------------------------------------------------------------
 *   サイトのフォームは [contact-form-7 id="0040899" title="コンタクトフォーム 1"]。
 *   どの画面に置いても（投稿・固定ページ・Elementor・末尾の自動フォーム）同じ見た目で、
 *   次のことが必ず守られるようにする（条件23）。
 *
 *     ・入力した文字が白くならない
 *         親の色（紺の地の白い文字など）を引き継がない。ブラウザの自動入力の黄色い地でも
 *         文字は濃い色のまま（-webkit-text-fill-color も指定）。自動ダークモードでも白地
 *     ・送信ボタンの文字は白、地は橙（TOP と同じ）。押せない間は薄くする
 *     ・スマホで入力欄を押しても画面が拡大されない（文字 16px 以上）
 *     ・入力欄は押しやすい高さ（48px 以上）
 *     ・エラー・送信完了の知らせが、色だけでなく文字と枠で分かる
 *     ・コピー保護のプラグインがあっても、入力欄は選べて打てる（§25）
 *
 *   CF7 の JavaScript・送信の仕組み（AJAX・nonce）には触らない。見た目だけを整える
 *   （display:none で CF7 の部品を隠さない。隠すと送信の結果が出なくなるため）。
 * ========================================================================== */

.wpcf7 {
	max-width: 100%;
	font-family: var(--ksth-font);
	color: var(--ksth-text);
	text-align: left;
}

.wpcf7 form {
	margin: 0;
}

.wpcf7 p {
	margin: 0 0 16px;
}

.wpcf7 label {
	display: block;
	font-size: .92rem;
	font-weight: 700;
	color: var(--ksth-text) !important;
	line-height: 1.6;
}

/* 入力欄（文字は必ず濃い色・地は必ず白） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin-top: 6px;
	padding: 11px 13px;
	border: 1px solid #b9c6d3;
	border-radius: 8px;
	background-color: #fff !important;
	color: var(--ksth-text) !important;
	-webkit-text-fill-color: var(--ksth-text) !important;
	caret-color: var(--ksth-navy);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	opacity: 1 !important;
	box-shadow: inset 0 1px 2px rgba(10, 46, 92, .04);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--ksth-dur), box-shadow var(--ksth-dur);
}

.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2e5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 18px 18px !important;
	cursor: pointer;
}

.wpcf7 select option {
	color: var(--ksth-text);
	background: #fff;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: #6b7a89;
	-webkit-text-fill-color: #6b7a89;
	opacity: 1;
}

.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
	border-color: #8ea3b8;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--ksth-blue);
	box-shadow: 0 0 0 3px rgba(31, 111, 209, .22);
}

/* ブラウザの自動入力（黄色や水色の地）でも、文字は濃い色のまま */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus,
.wpcf7 textarea:-webkit-autofill,
.wpcf7 select:-webkit-autofill {
	-webkit-text-fill-color: var(--ksth-text) !important;
	-webkit-box-shadow: 0 0 0 1000px #f4f9ff inset !important;
	box-shadow: 0 0 0 1000px #f4f9ff inset !important;
	caret-color: var(--ksth-navy);
	transition: background-color 9999s ease-out 0s;
}

/* 紺・橙など暗い地の中に置かれても、フォームの中の文字は濃い色 */
:where(.ksth-band, .fl-fbox, .ksth-cta, .elementor-section, .e-con, .ks-wp-content) .wpcf7 :is(p, span, label, legend, small, li) {
	color: var(--ksth-text);
}

/* 必須の印 */
.wpcf7 .ksth-req,
.wpcf7 .required,
.wpcf7 abbr.required {
	display: inline-block;
	margin-left: .4em;
	padding: 0 .5em;
	border-radius: 4px;
	background: var(--ksth-ng);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
	vertical-align: .1em;
}

.wpcf7 .ksth-opt {
	display: inline-block;
	margin-left: .4em;
	padding: 0 .5em;
	border-radius: 4px;
	background: #e3ebf4;
	color: var(--ksth-sub) !important;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.7;
	vertical-align: .1em;
}

/* チェック・ラジオ（押せる範囲を広くする） */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.wpcf7 .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 14px;
	border: 1px solid #b9c6d3;
	border-radius: var(--ksth-r-pill);
	background: #fff;
	font-weight: 700;
	font-size: .92rem;
	color: var(--ksth-text) !important;
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item label:hover {
	border-color: var(--ksth-blue);
}

.wpcf7 .wpcf7-list-item label:has(input:checked) {
	border-color: var(--ksth-navy);
	background: var(--ksth-sky);
	color: var(--ksth-navy) !important;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ksth-navy);
	cursor: pointer;
	flex: 0 0 auto;
}

/* 同意の欄（プライバシーポリシー） */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label {
	border-radius: var(--ksth-r);
	width: 100%;
	justify-content: flex-start;
	line-height: 1.6;
}

.wpcf7 .wpcf7-acceptance a {
	color: var(--ksth-navy-2);
	text-decoration: underline;
}

/* 写真の添付 */
.wpcf7 input[type="file"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px;
	border: 1px dashed #9fb3c8;
	border-radius: 8px;
	background: var(--ksth-gray);
	color: var(--ksth-text) !important;
	font-size: .88rem;
	cursor: pointer;
}

.wpcf7 input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* 送信ボタン（白い文字・橙の地） */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.wpcf7 .wpcf7-submit {
	display: block;
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	padding: 14px 20px;
	border: 0;
	border-radius: var(--ksth-r-pill);
	background: linear-gradient(180deg, var(--ksth-orange-2), var(--ksth-orange)) !important;
	box-shadow: var(--ksth-shadow-btn);
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-family: inherit;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1.4;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	opacity: 1;
	transition: transform var(--ksth-dur), box-shadow var(--ksth-dur), filter var(--ksth-dur);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	filter: brightness(1.04);
}

.wpcf7 input[type="submit"]:active,
.wpcf7 .wpcf7-submit:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--ksth-orange-shadow);
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
	outline: 3px solid #ffb35c;
	outline-offset: 3px;
}

/* 同意の前・送信中は押せないことを見せる（文字は白のまま） */
.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled,
.wpcf7 form.submitting .wpcf7-submit {
	cursor: not-allowed;
	filter: grayscale(.35);
	opacity: .72;
	transform: none;
}

/* 送信中の回る印 */
.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 10px auto 0;
	background-color: var(--ksth-navy);
	opacity: .8;
}

.wpcf7 form:not(.submitting) .wpcf7-spinner {
	visibility: hidden;
}

/* 入力の誤り（赤い文字＋赤い縁。色だけに頼らない） */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--ksth-ng) !important;
	background-color: #fffafa !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding-left: 1.3em;
	position: relative;
	color: var(--ksth-ng) !important;
	-webkit-text-fill-color: var(--ksth-ng);
	font-size: .84rem;
	font-weight: 700;
	line-height: 1.6;
}

.wpcf7 .wpcf7-not-valid-tip::before {
	content: "!";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.05em;
	height: 1.05em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ksth-ng);
	color: #fff;
	font-size: .72rem;
	line-height: 1;
}

/* 送信の結果の知らせ */
.wpcf7 .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 2px solid var(--ksth-line) !important;
	border-radius: var(--ksth-r) !important;
	background: #fff;
	color: var(--ksth-text) !important;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.7;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ksth-ok) !important;
	background: var(--ksth-ok-bg);
	color: var(--ksth-ok) !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--ksth-orange) !important;
	background: var(--ksth-warn-bg);
	color: var(--ksth-warn) !important;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--ksth-ng) !important;
	background: var(--ksth-ng-bg);
	color: var(--ksth-ng) !important;
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #c98c00 !important;
	background: #fff8e1;
	color: #7a5600 !important;
}

/* 送信の前の空の知らせ枠は、場所を取らない */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

/* 迷惑な送信よけの隠し欄は画面に出さない（消さずに隠す。消すと判定が効かなくなる）
     .ks-hp        functions.php が相談フォームに足す「会社URL（記入不要）」の欄。
                   functions.php の CSS は .ks-cf7 の中だけを隠すため、ショートコードを
                   本文や Elementor に直接置いたページでは見えてしまっていた。ここでどこでも隠す
     span.hp       業者の口コミのフォームの同じ欄
     honeypot      CF7 の honeypot の追加機能の欄 */
.ks-hp,
.wpcf7 .ks-hp,
span.hp[aria-hidden="true"],
.wpcf7 .wpcf7-form-control-wrap[data-name*="honeypot"],
.wpcf7 .ksth-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* 入力欄の組（2つの欄を横に並べたいとき。スマホでは縦） */
.wpcf7 .ksth-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

/* フォームの枠（TOP の fl-fbox と同じ形。完成HTMLと同じ見た目を WordPress の画面にも） */
.ksth-fbox,
:where(.ks-wp) .fl-fbox {
	max-width: 860px;
	margin: 0 auto;
	border: 3px solid var(--ksth-orange);
	border-radius: var(--ksth-r-xl);
	overflow: hidden;
	background: #fff;
}

.ksth-fbox__h,
:where(.ks-wp) .fl-fbox__h {
	padding: 18px;
	background: linear-gradient(180deg, var(--ksth-orange-2), var(--ksth-orange));
	color: #fff;
	text-align: center;
}

.ksth-fbox__t,
:where(.ks-wp) .fl-fbox__t {
	margin: 0;
	font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.45;
}

.ksth-fbox__h ul,
:where(.ks-wp) .fl-fbox__h ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	font-weight: 700;
}

.ksth-fbox__h li,
:where(.ks-wp) .fl-fbox__h li {
	margin: 0;
	color: #fff;
}

.ksth-fbox__h li::before,
:where(.ks-wp) .fl-fbox__h li::before {
	content: "✓ ";
}

.ksth-fbox__bd,
:where(.ks-wp) .fl-fbox__bd {
	padding: 22px;
	color: var(--ksth-text);
	background: #fff;
}

.ksth-fbox__tel,
:where(.ks-wp) .fl-fbox__tel {
	font-size: .82rem;
	color: var(--ksth-sub);
}

.ksth-fbox__line a,
:where(.ks-wp) .fl-fbox__line a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 14px;
	padding: 12px;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-line-green);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-weight: 700;
	text-decoration: none !important;
}

/* CF7 が止まっているときの代わりの案内（LINE の案内） */
.ksth-form-fallback {
	padding: 16px;
	border: 1px dashed var(--ksth-line);
	border-radius: var(--ksth-r);
	background: var(--ksth-gray);
	color: var(--ksth-text);
	font-size: .92rem;
	line-height: 1.8;
}


/* ============================================================================
 * §19 WordPress のブロック
 * ----------------------------------------------------------------------------
 *   ブロックの標準のCSS（block-library）は functions.php が読み込まないため、
 *   本文でよく使うブロックの見た目をここで補う。
 *   「カラム」ブロックも、文章は1列で読ませる（条件70）。横に並べたいのが図や数字の箱なら、
 *   カラムに「ksth-side」の class を付けると、パソコンでだけ横に並ぶ。
 * ========================================================================== */

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin: .3em 1.4em 1em 0;
}

.alignright {
	float: right;
	margin: .3em 0 1em 1.4em;
}

.alignwide {
	max-width: var(--ksth-wide);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

:where(.ks-wp-content) .alignwide {
	width: min(var(--ksth-wide), 100vw - 2 * var(--ksth-pad));
	margin-left: 50%;
	transform: translateX(-50%);
}

.wp-caption,
.wp-block-image figcaption {
	font-size: .82rem;
	color: var(--ksth-sub);
	text-align: center;
}

:where(.ks-wp-content) .wp-block-image {
	margin: 1.6em 0;
}

:where(.ks-wp-content) .wp-block-image img {
	border-radius: var(--ksth-r);
}

:where(.ks-wp-content) .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
	margin: 1.6em 0;
	padding: 0;
	list-style: none;
}

:where(.ks-wp-content) .wp-block-gallery figure {
	margin: 0;
}

/* カラム：文章は縦に並べる（1列） */
.wp-block-columns {
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	margin: 1.6em 0;
}

.wp-block-column {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-columns.ksth-side,
.wp-block-columns.is-style-ksth-side {
	flex-direction: column;
}

/* 群（グループ）：地の色が付いたときは余白を取る */
:where(.ks-wp-content) .wp-block-group.has-background {
	padding: 1.2em 1.4em;
	border-radius: var(--ksth-r-lg);
}

/* メディアとテキスト：縦に並べる */
:where(.ks-wp-content) .wp-block-media-text {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 1.6em 0;
}

/* カバー：地の上の文字は白（地が暗い前提のブロック） */
:where(.ks-wp-content) .wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 2em 1.4em;
	border-radius: var(--ksth-r-lg);
	overflow: hidden;
	color: #fff;
}

/* ボタン */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin: 1.4em 0;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .8em 1.6em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-navy);
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	text-decoration: none !important;
	font-weight: 700;
	line-height: 1.4;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff;
	color: var(--ksth-navy) !important;
	-webkit-text-fill-color: var(--ksth-navy);
	border: 2px solid var(--ksth-navy);
}

.wp-block-button.is-style-ksth-cta .wp-block-button__link {
	background: linear-gradient(180deg, var(--ksth-orange-2), var(--ksth-orange));
	box-shadow: var(--ksth-shadow-btn);
	font-weight: 900;
}

.wp-block-button.is-style-ksth-line .wp-block-button__link {
	background: var(--ksth-line-green);
	font-weight: 900;
}

/* 表 */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--ksth-gray);
}

/* 区切り */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ksth-line);
	margin: 2.4em auto;
}

.wp-block-separator.is-style-wide {
	max-width: none;
}

.wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
	line-height: 1;
	height: auto;
}

.wp-block-separator.is-style-dots::before {
	content: "···";
	font-size: 1.6em;
	letter-spacing: 1em;
	color: var(--ksth-sub);
	padding-left: 1em;
}

/* 引用・大きな引用 */
:where(.ks-wp-content) .wp-block-quote {
	margin: 1.8em auto;
}

:where(.ks-wp-content) .wp-block-pullquote {
	margin: 2em auto;
	padding: 1.4em 1em;
	border-top: 3px solid var(--ksth-navy);
	border-bottom: 3px solid var(--ksth-navy);
	text-align: center;
}

:where(.ks-wp-content) .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ksth-navy);
}

/* 埋め込み（動画など）は 16:9 で縮む */
:where(.ks-wp-content) .wp-block-embed {
	margin: 1.6em 0;
}

:where(.ks-wp-content) .wp-block-embed__wrapper {
	position: relative;
}

:where(.ks-wp-content) .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
:where(.ks-wp-content) .wp-embed-aspect-16-9 iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* 文字の大きさの指定（ブロックの「文字サイズ」） */
.has-small-font-size {
	font-size: .88rem;
}

.has-medium-font-size {
	font-size: 1.125rem;
}

.has-large-font-size {
	font-size: 1.375rem;
	line-height: 1.6;
}

.has-x-large-font-size {
	font-size: 1.75rem;
	line-height: 1.5;
}

/* 文字の色・地の色（ブロックの色の指定に TOP の色を使えるように） */
.has-ksth-navy-color {
	color: var(--ksth-navy) !important;
}

.has-ksth-navy-background-color {
	background-color: var(--ksth-navy) !important;
	color: #fff;
}

.has-ksth-orange-color {
	color: var(--ksth-orange-text) !important;
}

.has-ksth-orange-background-color {
	background-color: var(--ksth-orange) !important;
	color: #fff;
}

.has-ksth-sky-background-color {
	background-color: var(--ksth-sky) !important;
}

.has-ksth-gray-background-color {
	background-color: var(--ksth-gray) !important;
}

.has-text-align-center {
	text-align: center;
}

.has-text-align-right {
	text-align: right;
}

/* ファイル */
:where(.ks-wp-content) .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em 1em;
	margin: 1.4em 0;
	padding: .8em 1em;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r);
	background: var(--ksth-gray);
}

:where(.ks-wp-content) .wp-block-file__button {
	display: inline-block;
	padding: .4em 1em;
	border-radius: var(--ksth-r-pill);
	background: var(--ksth-navy);
	color: #fff !important;
	text-decoration: none !important;
	font-size: .86rem;
	font-weight: 700;
}

/* 脚注 */
:where(.ks-wp-content) .wp-block-footnotes {
	margin: 2em auto 0;
	padding: 1em 0 0 1.4em;
	border-top: 1px solid var(--ksth-line);
	font-size: .84rem;
	color: var(--ksth-text-2);
}

/* 最新の投稿（ブロック） */
:where(.ks-wp-content) .wp-block-latest-posts {
	list-style: none;
	padding: 0;
}

:where(.ks-wp-content) .wp-block-latest-posts li {
	margin: 0;
	padding: .6em 0;
	border-bottom: 1px dashed var(--ksth-line);
}

:where(.ks-wp-content) .wp-block-latest-posts a {
	font-weight: 700;
	text-decoration: none;
}

/* 検索（ブロック）：入力欄の文字は濃い色 */
.wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}

.wp-block-search__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 12px;
	border: 2px solid var(--ksth-blue);
	border-radius: var(--ksth-r);
	background: #fff !important;
	color: var(--ksth-text) !important;
	-webkit-text-fill-color: var(--ksth-text);
	font-size: 16px;
}

.wp-block-search__button {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ksth-r);
	background: var(--ksth-blue);
	color: #fff !important;
	font-weight: 700;
	cursor: pointer;
}


/* ============================================================================
 * §20 Elementor
 * ----------------------------------------------------------------------------
 *   ・Elementor のサイト設定（キット）で決めた文字・色が、いつでもこのファイルより優先される
 *     （ここは :where() の弱い指定だけ。キットが空のときに、記事と同じ見た目になる）
 *   ・完成HTMLを「Elementor に取り込む」で作ったページは、HTML ウィジェットの余白を消し、
 *     完成HTMLと同じ見た目にする
 *   ・アコーディオン・トグル・タブは、押せる範囲に何も重ねない（開かない、を防ぐ）
 *   ・Elementor のフォーム（Pro）も、入力した文字は濃い色
 *   ・完成HTMLの全文（ヘッダー・フッター・固定のバーまで）を本文や HTML ウィジェットに貼ったとき、
 *     テーマのヘッダーと二重にならないようにする（条件64「ヘッダーのメニューが重複している」）。
 *       第1の守り：functions.php §35c が、独自のヘッダーを持つページを1枚のページとして描き、
 *                 テーマのヘッダー・フッターを出さない（body に ks35-own）
 *       第2の守り（ここ）：§35c を止めている環境で、テーマのヘッダーの下の本文（.ks-wp-main）に
 *                 貼った側のヘッダー・固定のバー・フッターが残ったときだけ、それを隠す
 *     次のときは隠さない：Elementor キャンバス（テーマのヘッダーが出ない）・Elementor の
 *     編集画面（貼ったものを編集できるように）・§35c で描いたページ
 * ========================================================================== */

.ks-wp-el {
	width: 100%;
}

.ks-wp-main--el .elementor-widget-html > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

.elementor-page .ks-wp-main--el .elementor-section.elementor-section-full_width > .elementor-container {
	max-width: none;
}

.ks-wp-elhead {
	max-width: var(--ksth-wide);
	margin: 0 auto;
	padding: 2rem var(--ksth-pad) 0;
}

.ks-wp-elhead .entry-title {
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	color: var(--ksth-navy);
	line-height: 1.45;
	margin: 0;
}

/* テキストエディターのウィジェット（記事と同じ文字組み。キットがあればキットが勝つ） */
:where(.elementor-widget-text-editor) {
	font-family: var(--ksth-font);
	font-size: var(--ksth-fs);
	line-height: var(--ksth-lh);
	color: var(--ksth-text);
}

:where(.elementor-widget-text-editor) p {
	margin: 0 0 1.1em;
}

:where(.elementor-widget-text-editor) a {
	color: var(--ksth-navy-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:where(.elementor-widget-heading) .elementor-heading-title {
	font-family: var(--ksth-font);
	color: var(--ksth-navy);
	font-weight: 900;
	line-height: 1.5;
}

/* アコーディオン・トグル（旧型） */
.elementor-accordion .elementor-tab-title,
.elementor-toggle .elementor-tab-title {
	position: relative;
	z-index: 1;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: rgba(31, 111, 209, .12);
	touch-action: manipulation;
}

.elementor-accordion .elementor-tab-title a,
.elementor-toggle .elementor-tab-title a {
	color: inherit;
	text-decoration: none;
}

/* 入れ子のアコーディオン（新型。details と summary で作られる） */
.e-n-accordion-item > summary,
.e-n-accordion-item-title {
	position: relative;
	z-index: 1;
	cursor: pointer;
	pointer-events: auto;
	list-style: none;
}

.e-n-accordion-item > summary::-webkit-details-marker {
	display: none;
}

/* タブ */
.elementor-tabs .elementor-tab-title,
.e-n-tabs-heading .e-n-tab-title {
	cursor: pointer;
	pointer-events: auto;
}

/* Elementor のフォーム（Pro）：入力した文字は濃い色・地は白 */
.elementor-form .elementor-field-textual,
.elementor-form .elementor-field:not(.elementor-button),
.elementor-form select {
	background-color: #fff;
	color: var(--ksth-text) !important;
	-webkit-text-fill-color: var(--ksth-text) !important;
	font-size: max(16px, 1em);
	min-height: 44px;
}

.elementor-form .elementor-field-textual::placeholder {
	color: #6b7a89;
	-webkit-text-fill-color: #6b7a89;
	opacity: 1;
}

.elementor-form .elementor-button[type="submit"] {
	min-height: 52px;
	color: #fff;
}

/* 編集画面での目安（編集している人にだけ見える） */
.elementor-editor-active .ks-wp-main--el {
	min-height: 60vh;
}

.elementor-editor-active .ksth-form-auto {
	outline: 2px dashed #b9c6d3;
	outline-offset: 4px;
}

/* 完成HTMLの全文を貼ったときの二重表示を防ぐ（テーマのヘッダー・フッターが出ているときだけ） */
body.ksth-header-site:not(.elementor-template-canvas):not(.elementor-editor-active):not(.ks35-own) .ks-wp-main :is(header.fl-hd, .fl-float),
body.ksth-header-dynamic:not(.elementor-template-canvas):not(.elementor-editor-active):not(.ks35-own) .ks-wp-main :is(header.fl-hd, .fl-float),
body.ksth-elementor-header:not(.elementor-template-canvas):not(.elementor-editor-active):not(.ks35-own) .ks-wp-main :is(header.fl-hd, .fl-float) {
	display: none !important;
}

body.ksth-footer-site:not(.elementor-template-canvas):not(.elementor-editor-active):not(.ks35-own) .ks-wp-main footer.fl-ft,
body.ksth-footer-dynamic:not(.elementor-template-canvas):not(.elementor-editor-active):not(.ks35-own) .ks-wp-main footer.fl-ft {
	display: none !important;
}

/* 貼った完成HTMLのポップアップ（詳細条件）は、ヘッダー・固定のバーより上に出す */
.ks-wp-main .fl-ov {
	z-index: var(--ksth-z-overlay);
}

.ks-wp-main .fl-pop {
	z-index: var(--ksth-z-dialog);
	color: var(--ksth-text);
	background: #fff;
}

.ks-wp-main .fl-pop label {
	color: var(--ksth-text);
}


/* ============================================================================
 * §21 一覧・カード・ページ送り・検索
 * ----------------------------------------------------------------------------
 *   一覧のカードは1列（文章が2段に並ばないように。条件70）。
 *   検索・404・分類の一覧のテンプレートは、それぞれの <style> が優先される。
 * ========================================================================== */

.ks-wp-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.ks-wp-card {
	margin: 0;
}

.ks-wp-card__a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r-lg);
	color: var(--ksth-text) !important;
	text-decoration: none !important;
	box-shadow: var(--ksth-shadow-sm);
	transition: border-color var(--ksth-dur), box-shadow var(--ksth-dur), transform var(--ksth-dur);
}

.ks-wp-card__a:hover {
	border-color: var(--ksth-blue);
	box-shadow: 0 4px 14px rgba(31, 111, 209, .14);
	transform: translateY(-1px);
}

.ks-wp-card__t {
	font-size: 1.05rem;
	font-weight: 900;
	line-height: 1.55;
	color: var(--ksth-navy);
}

.ks-wp-card__a:hover .ks-wp-card__t {
	color: var(--ksth-blue);
}

.ks-wp-card__d {
	font-size: .9rem;
	line-height: 1.8;
	color: var(--ksth-text-2);
}

.ks-wp-card__m {
	margin-top: auto;
	font-size: .78rem;
	color: var(--ksth-sub);
}

/* ページ送り */
.ks-wp-pagination {
	margin: 28px 0 0;
}

.ks-wp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.ks-wp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r);
	background: #fff;
	color: var(--ksth-navy);
	text-decoration: none;
	font-weight: 700;
}

.ks-wp-pagination a.page-numbers:hover {
	border-color: var(--ksth-navy);
}

.ks-wp-pagination .current {
	background: var(--ksth-navy);
	color: #fff;
	border-color: var(--ksth-navy);
}

.ks-wp-pagination .dots {
	border: 0;
	background: none;
}

/* 投稿の中のページ分け（<!--nextpage-->） */
.ks-wp-pages {
	margin: 2em 0 0;
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
	align-items: center;
}

.ks-wp-pages a,
.ks-wp-pages > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: .4em .8em;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r);
	text-decoration: none;
}

/* 前後の記事 */
.ks-wp-postnav .nav-links {
	display: flex;
	gap: 12px;
}

.ks-wp-postnav .nav-links > div {
	flex: 1;
	min-width: 0;
}

.ks-wp-postnav a {
	display: block;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--ksth-line);
	border-radius: 12px;
	background: #fff;
	color: var(--ksth-navy);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.6;
}

.ks-wp-postnav a:hover {
	border-color: var(--ksth-navy);
}

.ks-wp-postnav small {
	display: block;
	font-size: .72rem;
	color: var(--ksth-sub);
	font-weight: 600;
}

.ks-wp-postnav .nav-next {
	text-align: right;
}

/* 検索の結果 */
.ks-wp-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ks-wp-result {
	padding: 16px 0;
	border-bottom: 1px solid var(--ksth-line);
}

.ks-wp-result__k {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ksth-navy);
	background: var(--ksth-gray-2);
	border-radius: var(--ksth-r-pill);
	padding: 2px 10px;
	margin-bottom: 6px;
}

.ks-wp-result__t {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ksth-navy);
	line-height: 1.6;
}

.ks-wp-result__d {
	margin: .3rem 0 0;
	font-size: .9rem;
	color: var(--ksth-text-2);
	line-height: 1.8;
}

.ks-wp-empty {
	padding: 20px;
	background: #fff;
	border: 1px dashed var(--ksth-line);
	border-radius: var(--ksth-r-lg);
}

.ks-wp-empty__t {
	font-weight: 700;
	color: var(--ksth-navy);
	margin: 1em 0 .4em;
}

.ks-wp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ks-wp-tag {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--ksth-line);
	border-radius: var(--ksth-r-pill);
	background: #fff;
	color: var(--ksth-navy);
	font-size: .86rem;
	font-weight: 700;
	text-decoration: none;
}

.ks-wp-tag:hover {
	border-color: var(--ksth-navy);
}

/* WordPress 標準の検索フォーム（入力した文字は濃い色） */
.ks-wp-search {
	margin: 1rem 0 0;
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 560px;
}

.search-form label {
	flex: 1;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	min-height: 48px;
	font-size: 16px;
	padding: 11px 12px;
	border: 2px solid var(--ksth-blue);
	border-radius: var(--ksth-r);
	background: #fff !important;
	color: var(--ksth-text) !important;
	-webkit-text-fill-color: var(--ksth-text);
	-webkit-appearance: none;
	appearance: none;
}

.search-form .search-field::placeholder {
	color: #6b7a89;
	-webkit-text-fill-color: #6b7a89;
	opacity: 1;
}

.search-form .search-submit {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ksth-r);
	background: var(--ksth-blue);
	color: #fff !important;
	font-weight: 700;
	cursor: pointer;
}


/* ============================================================================
 * §22 記事の下・ウィジェット・コメント
 * ----------------------------------------------------------------------------
 *   sidebar.php・comments.php は、それぞれの <style> で見た目を持つ。
 *   ここは、ウィジェットを置いたときの最小限の形だけ。
 * ========================================================================== */

.ks-wp-aside__search {
	margin: 1.4rem 0 0;
}

.ks-wp-aside__t,
.ks-wp-widget__t {
	font-size: 1rem;
	font-weight: 900;
	color: var(--ksth-navy);
	margin: 0 0 .6rem;
	padding-left: .6em;
	border-left: 4px solid var(--ksth-orange);
	line-height: 1.5;
}

.ks-wp-widget + .ks-wp-widget {
	margin-top: 1.8rem;
}

:where(.ks-wp-widget) ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.ks-wp-widget) li {
	margin: 0;
	padding: .55em 0;
	border-bottom: 1px dashed var(--ksth-line);
}

:where(.ks-wp-widget) a {
	color: var(--ksth-navy);
	font-weight: 700;
	text-decoration: none;
}

:where(.ks-wp-widget) a:hover {
	color: var(--ksth-blue);
	text-decoration: underline;
}

.ks-wp-comments__list {
	list-style: none;
	padding: 0;
}

.ks-wp-comments .comment-body {
	padding: 14px 0;
	border-bottom: 1px solid var(--ksth-line);
}

/* 末尾に自動で補う相談フォーム */
.ksth-form-auto {
	padding-top: 1.6rem;
	padding-bottom: 1rem;
}


/* ============================================================================
 * §23 ロゴ（条件43：伸びたり潰れたりしない）
 * ----------------------------------------------------------------------------
 *   ロゴの画像は、枠の大きさ（44×44・40×40 など）が決まっていても、
 *   縦横の比を保ったまま枠に収める（object-fit:contain）。
 *   大きさはヘッダー・フッターの部品が決める（ここでは変えない）。
 * ========================================================================== */

img.custom-logo,
.custom-logo-link img,
.ksth-sh-logo img,
.ksth-sf-logo img,
.fl-logo img,
.fl-ft__logo img,
.site-logo img,
.elementor-widget-theme-site-logo img,
img[src*="cropped-25cd9ba1-f7ae-4045-ba32-67d01996ae59"] {
	object-fit: contain !important;
	object-position: center;
	aspect-ratio: auto;
	max-width: 100%;
	image-rendering: auto;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.elementor-widget-theme-site-logo img {
	height: auto;
}


/* ============================================================================
 * §24 固定のバー・ヘッダーとの重なり
 * ----------------------------------------------------------------------------
 *   重なりの順番（大きいほど上）
 *     本文 0  →  ヘッダー 50  →  固定の相談バー 60  →  開いたメニュー 70
 *     →  ポップアップの暗い幕 80  →  ポップアップ 90
 *     →  Elementor のポップアップ・WordPress の管理バー（それぞれの値）
 *   ・固定の相談バー（画面の下）で、本文の末尾・フォームの送信ボタンが隠れないように、
 *     footer.php の空き（ksth-sf-spacer）とは別に、フォームの下にも余白を取る
 *   ・ログイン中は、画面の上の管理バー（32px・スマホ46px）の分だけ飛び先を下げる
 * ========================================================================== */

.wpcf7 {
	scroll-margin-bottom: calc(var(--ksth-float-h) + 16px);
}

.wpcf7 form .wpcf7-response-output {
	scroll-margin-bottom: calc(var(--ksth-float-h) + 16px);
}

body.admin-bar :where(.ks-wp) :target,
body.admin-bar :where(.ks-wp) [id="form"] {
	scroll-margin-top: 120px;
}

/* Elementor のポップアップは、固定の相談バーより上に出す */
.elementor-popup-modal,
.dialog-lightbox-widget {
	z-index: 100000;
}

/* 固定のバーが、開いたメニューやポップアップの上に重ならない */
body.ksth-lock .ksth-sf-float,
body.dialog-prevent-scroll .ksth-sf-float {
	z-index: 1;
}

/* 印刷・読み上げでは固定のバーを出さない（§28） */


/* ============================================================================
 * §25 コピー保護との両立
 * ----------------------------------------------------------------------------
 *   「WP Content Copy Protection & No Right Click」などのプラグインは、ページ全体の
 *   文字を選べなくする（user-select:none）。そのままだと、次のことが起きる場合がある。
 *     ・相談フォームの入力欄を押しても、文字が入らない・選べない・貼り付けられない
 *     ・スマホで入力欄を長押ししても、貼り付けのメニューが出ない
 *   そこで、入力欄・編集できる場所だけは、いつでも選べて打てるようにする。
 *   記事の本文の保護は、プラグインの設定に任せる（このファイルでは本文の選択を止めない）。
 *   テーマだけで保護したいときは、本文の外枠に class「ksth-protect」を付ける。
 * ========================================================================== */

input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.elementor-form input,
.elementor-form textarea,
.search-form input,
.wp-block-search__input {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	user-select: text !important;
	-webkit-touch-callout: default !important;
	pointer-events: auto;
}

/* 送信ボタン・チェックは選択しない（誤って文字を選んでしまわない） */
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
button {
	-webkit-user-select: none !important;
	user-select: none !important;
}

/* 編集している人（Elementor の編集画面・プレビュー）には保護をかけない */
body.elementor-editor-active,
body.elementor-editor-active *,
body.ksth-preview .ks-wp-content {
	-webkit-user-select: auto !important;
	user-select: auto !important;
}

/* テーマだけで保護する場合（class を付けたところだけ） */
.ksth-protect {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.ksth-protect img,
.ksth-protect svg {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.ksth-protect a,
.ksth-protect button,
.ksth-protect summary,
.ksth-protect input,
.ksth-protect textarea,
.ksth-protect select {
	pointer-events: auto;
}

.ksth-protect input,
.ksth-protect textarea,
.ksth-protect select {
	-webkit-user-select: text !important;
	user-select: text !important;
}


/* ============================================================================
 * §26 読みやすさの補い（アクセシビリティ）
 * ----------------------------------------------------------------------------
 *   ・動きを減らす設定：動き（光る帯・開く動き・なめらかな移動）を止める
 *   ・コントラストを上げる設定：補助の文字・罫線を濃くする
 *   ・強制カラー（Windows のハイコントラスト）：ボタン・入力欄に枠を出す
 *   ・押せる所は 44×44px 以上
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:where(.ks-wp) *,
	:where(.ks-wp) *::before,
	:where(.ks-wp) *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (prefers-contrast: more) {
	:root {
		--ksth-sub: #3c4a58;
		--ksth-line: #9fb0c2;
	}

	:where(.ks-wp-content) a {
		text-decoration-thickness: 2px;
	}
}

@media (forced-colors: active) {
	.ksth-btn,
	.wp-block-button__link,
	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit,
	.ksth-qa,
	.ksth-fig,
	.ksth-box {
		border: 2px solid CanvasText;
	}

	.wpcf7 input,
	.wpcf7 textarea,
	.wpcf7 select {
		border: 1px solid CanvasText;
		-webkit-text-fill-color: CanvasText !important;
		color: CanvasText !important;
		background-color: Canvas !important;
	}

	.ksth-shine::after,
	:where(.ks-wp) .fl-shine::after {
		display: none;
	}
}

/* 押せる所の大きさは、このファイルの部品（ボタン・入力欄・よくある質問・ページ送り）で
   それぞれ 44px 以上にしている。テンプレートの小さな部品の大きさは変えない */


/* ============================================================================
 * §27 画面の幅ごとの調整
 * ========================================================================== */

/* タブレット（〜1024px） */
@media (max-width: 1024px) {
	.ksth-rings {
		gap: .6em;
	}

	.ksth-matrix__ax,
	.ksth-matrix__row {
		grid-template-columns: 100px 1fr 1fr;
	}
}

/* パソコン（1025px〜）：図の中の横並びだけ許す */
@media (min-width: 1025px) {
	.wp-block-columns.ksth-side,
	.wp-block-columns.is-style-ksth-side {
		flex-direction: row;
	}

	:where(.ks-wp-content) .wp-block-media-text.ksth-side {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* スマホ（〜860px。ヘッダーがハンバーガーメニューになる幅と同じ） */
@media (max-width: 860px) {
	:root {
		--ksth-fs: 1.03125rem;
		--ksth-lh: 1.9;
		--ksth-gap: 1em;
	}

	:where(.ks-wp-content) h2 {
		margin-top: 2.2em;
	}

	.ksth-flow {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ksth-flow > li:not(:last-child)::after {
		right: 50%;
		top: auto;
		bottom: -15px;
		border-left-color: transparent;
		border-top-color: var(--ksth-blue);
		transform: translateX(50%);
	}

	.ksth-matrix__ax,
	.ksth-matrix__row {
		grid-template-columns: 76px 1fr 1fr;
		gap: 8px;
	}

	.ksth-matrix__c {
		padding: 10px;
		font-size: .8rem;
	}

	.ksth-matrix__c b {
		font-size: .9rem;
	}

	.ksth-matrix__ax > span {
		font-size: .74rem;
		padding: 6px 4px;
	}

	.ksth-matrix__rh {
		font-size: .86rem;
	}

	.ksth-ring__g {
		width: 66px;
		height: 66px;
	}

	.ksth-ring__g > span {
		width: 50px;
		height: 50px;
		font-size: .95rem;
	}

	.ksth-ring__t {
		font-size: .72rem;
	}

	.ksth-table-hint {
		display: block;
	}

	:where(.ks-wp-content) tbody th:first-child,
	:where(.ks-wp-content) :is(.ksth-table, .wp-block-table) td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 1px 0 0 var(--ksth-line);
	}

	:where(.ks-wp-content) :is(.ksth-table, .wp-block-table) td:first-child {
		background: #fff;
	}

	.ksth-pull {
		padding: 1em .9em 1em 2.8em;
	}

	.ksth-cta {
		padding: 1.2em 1em 1.1em;
	}

	.ksth-fbox__bd,
	:where(.ks-wp) .fl-fbox__bd {
		padding: 18px 14px;
	}
}

/* 小さいスマホ（〜520px） */
@media (max-width: 520px) {
	:root {
		--ksth-pad: 16px;
	}

	:where(.ks-wp-content) h2 {
		font-size: 1.25rem;
	}

	:where(.ks-wp-content) h3 {
		font-size: 1.1rem;
	}

	.ksth-compare {
		grid-template-columns: 1fr;
	}

	.ksth-ba {
		grid-template-columns: 1fr;
	}

	.ksth-ba__arrow {
		margin: 0 auto;
		border: 10px solid transparent;
		border-top: 12px solid var(--ksth-orange);
		border-bottom-width: 0;
	}

	.ksth-bars > li {
		grid-template-columns: 1fr auto;
	}

	.ksth-bars__k {
		grid-column: 1 / -1;
	}

	.ksth-profile dl {
		grid-template-columns: 1fr;
	}

	.ksth-profile dt {
		padding-bottom: .2em;
		border-bottom: 0;
	}

	.ksth-author,
	:where(.ks-wp-content) .ks-sv {
		flex-direction: column;
		gap: 10px;
	}

	.wpcf7 .ksth-row {
		grid-template-columns: 1fr;
	}

	.wpcf7 .wpcf7-list-item {
		width: 100%;
	}

	.wpcf7 .wpcf7-list-item label {
		width: 100%;
	}

	.ks-wp-postnav .nav-links {
		flex-direction: column;
	}

	.ks-wp-postnav .nav-next {
		text-align: left;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 1em auto;
	}

	.search-form {
		flex-direction: column;
	}

	.ksth-voice {
		padding: .9em .95em;
	}
}


/* ============================================================================
 * §28 印刷
 * ----------------------------------------------------------------------------
 *   稟議や理事会の資料として記事を印刷することがあるため、本文と図と表だけを出す。
 *   閉じたままの「よくある質問」は、印刷の前に開いておく（ブラウザの仕様で、閉じた中身は
 *   印刷されない）。
 * ========================================================================== */

@media print {
	.ks-wp-aside,
	.ksth-form-auto,
	.ks-wp-postnav,
	.ks-wp-search,
	.ksth-sf-float,
	.ksth-sf-spacer,
	.ksth-sh-nav,
	.ksth-sh-nb,
	.ksth-cta,
	.wpcf7,
	.fl-float,
	.elementor-location-popup {
		display: none !important;
	}

	.ks-wp-content {
		max-width: none;
		padding: 0;
		font-size: 10.5pt;
		line-height: 1.8;
		color: #000;
	}

	:where(.ks-wp-content) h2,
	:where(.ks-wp-content) h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	.ksth-fig,
	.ksth-table,
	:where(.ks-wp-content) table,
	.ksth-box,
	.ksth-qa {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ksth-sources a::after {
		content: " （" attr(href) "）";
		font-size: 8pt;
		color: #444;
		word-break: break-all;
	}

	.ksth-shine::after,
	:where(.ks-wp) .fl-shine::after {
		display: none;
	}

	body.ks-wp {
		background: #fff;
	}
}


/* ============================================================================
 * §29 小さな道具（ユーティリティ）
 * ----------------------------------------------------------------------------
 *   Elementor の「CSS クラス」や、ブロックの「追加 CSS クラス」に書いて使う。
 * ========================================================================== */

.ksth-u-center {
	text-align: center !important;
}

.ksth-u-right {
	text-align: right !important;
}

.ksth-u-nowrap {
	white-space: nowrap !important;
}

.ksth-u-num {
	font-family: var(--ksth-font-num);
	font-variant-numeric: tabular-nums;
}

.ksth-u-sub {
	color: var(--ksth-sub) !important;
}

.ksth-u-navy {
	color: var(--ksth-navy) !important;
}

.ksth-u-small {
	font-size: .85em !important;
}

.ksth-u-bold {
	font-weight: 700 !important;
}

.ksth-u-mt0 {
	margin-top: 0 !important;
}

.ksth-u-mb0 {
	margin-bottom: 0 !important;
}

.ksth-u-mt {
	margin-top: 1.6em !important;
}

.ksth-u-mb {
	margin-bottom: 1.6em !important;
}

.ksth-u-w {
	max-width: var(--ksth-w);
	margin-left: auto;
	margin-right: auto;
}

/* スマホだけ・パソコンだけで出す（TOP の fl-sp と同じ考え） */
.ksth-sp {
	display: none !important;
}

@media (max-width: 860px) {
	.ksth-sp {
		display: revert !important;
	}

	.ksth-pc {
		display: none !important;
	}
}


/* ============================================================================
 * §30 以前の class との互換
 * ----------------------------------------------------------------------------
 *   以前の theme.css（143行）で使っていた class は、名前を変えずに残す。
 *   変えたのは1つだけ：.ks-wp-cols を2段組みから1列にした（条件70）。
 * ========================================================================== */

.ks-wp-cols {
	columns: auto;
	column-count: 1;
}

.ks-wp-cols li {
	break-inside: avoid;
}


/* ============================================================================
 * §31 確かめ方
 * ----------------------------------------------------------------------------
 *   差し換えたら、次の画面を パソコン（幅1280px）とスマホ（幅390px）で開く。
 *     1) 投稿（WordPress で書いた記事）
 *          ・本文が1列で、左右に余白があり、文字が 17px 前後で読める
 *          ・見出し（h2・h3）・表・図・囲み・よくある質問が、TOP と同じ色で出る
 *          ・よくある質問を押すと開き、もう一度押すと閉じる
 *          ・ページを最後まで指でスクロールできる（途中で止まらない）
 *     2) 相談フォームのある画面（記事の末尾の自動フォーム）
 *          ・入力した文字が濃い色で見える（白くならない）。送信ボタンの文字は白
 *          ・スマホで入力欄を押しても画面が拡大されない
 *          ・何も入れずに送信すると、赤い枠と「！」の知らせが出る
 *     3) 検索（/?s=給湯器）と 404（/aaa/）：それぞれのテンプレートの見た目のまま
 *     4) Elementor で作った固定ページ：編集画面と公開画面の両方で、崩れない
 *     5) TOP・台帳の175ページ：このファイルは読まれない（見た目は差し換え前と同じ）
 *   キャッシュのプラグイン（W3 Total Cache・Autoptimize）を使っているときは、
 *   差し換えのあとにキャッシュを消す（このファイルの版は、中身の大きさと日時で自動で変わる）。
 *
 *   右から左へ書く言語の版（theme-rtl.css）は、このサイト（日本語）では使われない。
 * ========================================================================== */