@charset "utf-8";
/* =============================================================================
 * 給湯器 カテゴリTOP 専用UI
 * /maker/css/kyuutouki_top.css
 *
 *  このページ（/maker/html/）専用。すべて .kyt 配下にスコープしてあるので、
 *  家庭用ガス給湯器TOP（.dw2 .gt-*）・石油給湯器TOP・業務用TOP・
 *  メーカーTOP（.dw2 .mk-*）・シリーズページ（.dw2-*）には影響しない。
 *  h2.heading_01 は既存の共通デザインをそのまま使うため、ここでは一切触らない。
 *
 *  【設計の考え方】
 *   ★他の商材カテゴリTOPと<同じ見た目にしない>。
 *     ガスコンロTOP（.gct）・食洗機TOP（.dwt）・乾太くんTOP（.ktt）は
 *     「濃紺＋水色＋オレンジ」の青系で、寸法と部品も共通。最初はそこから
 *     移植したが、給湯器は<その3つの上>に立つカテゴリの最上位なので、
 *     同じ色・同じ形だとどのページに居るのか分からない。
 *     寸法と余白の作法だけ借り、色と主役の部品は作り直した。
 *   ★色は<深い森緑（--c-navy）＋ティールグリーン（--c-acc）＋緑がかった白
 *     （--c-panel）>。他商材TOPの「濃紺＋水色＋オレンジ」とは別の寒色にして、
 *     同じ系統でも一目で別のページだと分かるようにする。
 *     ★茶・銅・ベージュは使わない。
 *   ★ファーストビューの主役は<型番検索>。給湯器の交換で最初にすることは
 *     いまの型番を入れることなので、導入文とタイルより先に検索を置く。
 *     サイドメニューにある単純なキーワード検索は置かない（重なるだけ）。
 *     ここに置くのは旧品番から後継機種を出す検索（_model_find.php）。
 *   ・カテゴリTOPなので「同じカードを並べる」ことをやめ、情報の種類ごとに
 *     見せ方を変える（燃料カード／横棒グラフ／レンジチャート／値札／
 *     マトリクス／アイコンタイル／数字バンド／写真グリッド／検索パネル）。
 *   ・給湯器は扱うカテゴリが3つ（家庭用ガス／石油／業務用ガス）あるので、
 *     メーカー色だけでなく<カテゴリ色>も --t-* に持つ。
 *     ★エコキュートはこのページでは扱わない（2026-10-01 指示）。
 *       商品マスタの給湯器のカテゴリ木もこの3つだけで、エコキュートは外にある。
 *   ★メーカーのロゴは出せる場所すべてに出す（既存の
 *     /common-new/images/*_logo.webp。新しく作らない）。
 * ========================================================================== */

.kyt {
	/* 給湯器の色。★青ベース。
	   ★コンロTOP・食洗機TOP・乾太くんTOPは
	     「濃紺 #0f3b52（緑みのある紺）＋ 水色 #1f7fa8 ＋ オレンジ」。
	     給湯器は<コバルトブルー>（#0d3b80 ＋ #1252a8）にして、
	     同じ青系でも並べたときに別のページだと分かるようにする。
	   ★茶・銅・ベージュ・黄緑は使わない。
	   ★白文字を載せる色（--c-navy / --c-acc / --c-amber）は、
	     白に対して十分な濃さを保つこと。明るくすると字が読めなくなる。 */
	--c-ink:    #1c2430;   /* 本文 */
	--c-sub:    #5a6775;   /* 補助の文字 */
	--c-navy:   #0d3b80;   /* 濃い面（表の見出しなど）。深いコバルト */
	--c-acc:    #1252a8;   /* ★このページのさし色 */
	--c-acc-d:  #0b3a7c;   /* さし色の濃いほう（線・hover） */
	--c-lime:   #7fb8ff;   /* 濃い面の上で使う明るい青（文字・アイコン） */
	--c-mid:    var(--c-acc);
	--c-rail:   #e6edf7;   /* 棒グラフの溝 */
	--c-line:   #dce4f0;   /* 罫線 */
	--c-panel:  #f3f7fd;   /* 面。青がかった白 */
	--c-amber:  #1565d8;   /* ボタン。さし色より1段明るくして「押せる」と分かるように */
	--c-red:    #c0272d;   /* 金額 */
	color: var(--c-ink);
	font-size: 14px;
	line-height: 1.85;
}
/*  カテゴリの色。給湯器は3カテゴリ。
    ガス = 明るい空の青／石油 = 緑／業務用 = 設備の鉄。
    さし色（コバルト #1252a8）と混ざらないよう、ガスは明るい側へ離した。
    色だけで見分けさせず、どの図でも必ずカテゴリ名を文字で併記する。 */
.kyt { --t-gas: #1a86c7; --t-oil: #1f9d6b; --t-biz: #5a6775; }
.kyt .is-gas { --c-mk: var(--t-gas); }
.kyt .is-oil { --c-mk: var(--t-oil); }
.kyt .is-biz { --c-mk: var(--t-biz); }

/* メーカーを見分ける色。6社あるので帯や枠で取り違えないようにする。
   ★これは<図の中で見分けるための色>で、メーカーのブランドカラーではない。
     だからどの図でも必ずメーカー名を文字で併記する。 */
.kyt {
	--t-rinnai: #c8102e; --t-noritz: #1a4f9c; --t-paloma: #0e7490;
	--t-chofu:  #4f8a2f; --t-corona: #6b4d9b; --t-purpose: #53646e;
}
.kyt .is-rinnai  { --c-mk: var(--t-rinnai); }
.kyt .is-noritz  { --c-mk: var(--t-noritz); }
.kyt .is-paloma  { --c-mk: var(--t-paloma); }
.kyt .is-chofu   { --c-mk: var(--t-chofu); }
.kyt .is-corona  { --c-mk: var(--t-corona); }
.kyt .is-purpose { --c-mk: var(--t-purpose); }

/* 共通CSSの article#mainContents section のほうが詳細度が高いので !important で押さえる。
   セクション間はメーカーTOP（15px）に合わせて詰める。 */
.kyt section { margin: 0 0 16px !important; }
/* .kyt の line-height:1.85 が h2 まで効くと行間が他商材（35.7px）より広くなる。
   見出しは他商材とそろえる（23.8px × 1.5 = 35.7px）。 */
.kyt h2.heading_01 { line-height: 1.5; }

/* -----------------------------------------------------------------------------
 * 飛んだ先に出す「↑ 戻る」
 *   メーカーTOPは h2 の中に入れているが、このページは見出しの文字と重なるので
 *   h2 の「直後」に独立した行として出す。JSが動的に差し込む。
 * -------------------------------------------------------------------------- */
.kyt .kt-back { margin: 6px 0 10px; text-align: right; line-height: 1; }
.kyt .kt-back__b {
	appearance: none; -webkit-appearance: none;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 14px; border-radius: 999px; cursor: pointer;
	background: #fff; border: 1px solid var(--c-acc); color: var(--c-acc);
	font-family: inherit; font-size: 12px; font-weight: bold; line-height: 1.5;
	white-space: nowrap; transition: background .2s, color .2s;
}
.kyt .kt-back__b:hover, .kyt .kt-back__b:focus-visible { background: var(--c-acc); color: #fff; }
.kyt .kt-back__b span { font-size: 13px; }

/* =============================================================================
 * ▼給湯器TOP 専用に作り直した部品
 *   色は「外装のチャコール（--c-navy）＋銅（--c-acc）＋温かい白（--c-panel）」。
 *   青は使わない。他商材TOP（コンロ・食洗機・乾太くん）と同じ形にしない。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * ファーストビュー｜給湯器専用
 *   ★他商材TOPの「灰色の箱＋アイコン3列＋タイル6枚」は使わない。同じ形だと
 *     給湯器のページに見えないし、最初にしてほしいことが伝わらない。
 *   給湯器の交換で最初にすることは<いまの型番を入れること>。だから
 *   型番検索を主役にして、そのまわりに金額とメーカーと入口を置く。
 *   ★サイドメニューにある単純なキーワード検索はここに置かない（重なるだけ）。
 *     ここに置くのは旧品番から後継機種を出す検索（_model_find.php）。
 *   上辺の3色は扱う3つの燃料。色だけで語らず、種類の節のカードに名前を書く。
 *   共通の .syozaitext（9,000ページ超で共有）は触らない。
 * -------------------------------------------------------------------------- */
.kyt .kt-hero {
	position: relative; margin: 10px 0 0; padding: 18px 20px 20px; overflow: hidden;
	background: #f5f5f5; color: var(--c-ink);
	border: 1px solid var(--c-line);
}
/* 上辺のすぐ下に3つの燃料の色。細い線だけにして主張させない */
.kyt .kt-hero::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(to right,
		var(--t-gas) 0 33.34%, var(--t-oil) 33.34% 66.67%, var(--t-biz) 66.67% 100%);
}
.kyt .kt-hero > * { position: relative; z-index: 1; }
.kyt .kt-hero__eye {
	margin: 0 0 7px; font-size: 12px; font-weight: bold; letter-spacing: .04em; color: var(--c-acc);
}
.kyt .kt-hero__eye span { margin-left: 10px; font-weight: normal; color: var(--c-sub); }
.kyt .kt-hero__t { margin: 0 0 9px; font-size: 26px; font-weight: bold; line-height: 1.42; }
.kyt .kt-hero__t em { font-style: normal; color: var(--c-acc); }
.kyt .kt-hero__t b { font-size: 34px; letter-spacing: -.02em; color: var(--c-red); }
.kyt .kt-hero__l { margin: 0 0 15px; font-size: 13.5px; line-height: 1.85; color: var(--c-sub); }
.kyt .kt-hero__l strong { color: var(--c-ink); }
/* 取り扱いメーカーのロゴ。★ロゴごとに縦横比が違うので、同じ箱に入れてそろえる */
.kyt .kt-hero__mk {
	margin: 15px 0 0; padding: 11px 0 0; border-top: 1px solid var(--c-line);
	display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px;
}
/* ★見出しは1行に独立させる。ロゴと同じ行に置くと、
   折り返しがロゴの途中（最後の1社だけ次の行）で起きる。 */
.kyt .kt-hero__mk > span:first-child { width: 100%; margin: 0 0 7px; font-size: 11.5px; font-weight: bold; color: var(--c-sub); }
.kyt .kt-hero__mk a, .kyt .kt-hero__mk > span.is-logo {
	display: flex; align-items: center; justify-content: center;
	width: 94px; height: 28px; padding: 0 6px; box-sizing: border-box;
	background: #fff; border: 1px solid var(--c-line); border-radius: 3px; text-decoration: none;
}
.kyt .kt-hero__mk a:hover { border-color: var(--c-acc); }
.kyt .kt-hero__mk img { display: block; max-width: 100%; max-height: 16px; width: auto; height: auto; }
/* 型番が分からない方の入口 */
.kyt .kt-hero__alt { margin: 13px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.kyt .kt-hero__alt > span {
	font-size: 12px; font-weight: bold; color: var(--c-sub);
	display: inline-flex; align-items: center; gap: 5px;
}
.kyt .kt-hero__alt > span .kt-i { width: 1.2em; height: 1.2em; color: var(--c-acc); }
.kyt .kt-hero__alt a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; font-size: 12.5px; font-weight: bold; text-decoration: none;
	color: var(--c-acc); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-panel);
}
.kyt .kt-hero__alt a:hover { background: var(--c-acc); border-color: var(--c-acc); color: #fff; }
.kyt .kt-hero__alt a .kt-i { width: 1.15em; height: 1.15em; color: var(--c-acc); }
.kyt .kt-hero__alt a:hover .kt-i { color: #fff; }
.kyt .kt-hero__alt a em { font-style: normal; font-weight: normal; font-size: 11px; color: var(--c-sub); }
.kyt .kt-hero__alt a:hover em { color: rgba(255, 255, 255, .85); }

/* -----------------------------------------------------------------------------
 * 型番から探す｜白いカード
 *   ★ファーストビューと「型番から探す」の節で<同じ部品>を使う。
 *     結果の一覧は /maker/css/model_find.css（[data-mf-result]）が受け持つので、
 *     こちらは白い面として置くだけ。濃い面の上でも結果が読める。
 * -------------------------------------------------------------------------- */
.kyt .kt-tfind {
	position: relative; padding: 14px 16px 15px 19px; background: #fff; color: var(--c-ink);
	border-radius: 3px; box-shadow: 0 3px 5px rgba(0, 0, 0, .22); border: 3px solid #0065cc;
	--dw2-accent: var(--c-acc);
}
.kyt .kt-tfind__t {
	margin: 0 0 4px; font-size: 19px; font-weight: bold; line-height: 1.4;
	display: flex; align-items: center; gap: 8px;
}
.kyt .kt-tfind__t .kt-i { width: 1.25em; height: 1.25em; color: var(--c-acc); }
.kyt .kt-tfind__d { margin: 0 0 11px; font-size: 13.5px; line-height: 1.75; color: var(--c-sub); }
.kyt .kt-tfind__d strong { color: var(--c-red); }
.kyt .kt-tfind__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.kyt .kt-tfind input[type="search"] {
	width: 100%; box-sizing: border-box; padding: 12px 13px; font-size: 16px; font-family: inherit;
	border: 2px solid #c9d6e6; border-radius: 3px; background: #fff; color: var(--c-ink);
}
.kyt .kt-tfind input[type="search"]::placeholder { color: #8e9bab; font-size: 13px; }
.kyt .kt-tfind input[type="search"]:focus { border-color: var(--c-acc); outline: 2px solid rgba(26, 134, 199, .18); }
.kyt .kt-tfind__f button {
	padding: 12px 24px; font-size: 15px; font-family: inherit; font-weight: bold; color: #fff;
	cursor: pointer; background: var(--c-acc); border: 0; border-radius: 3px; white-space: nowrap;
}
.kyt .kt-tfind__f button:hover { background: var(--c-acc-d); }
.kyt .kt-tfind__n { margin: 9px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--c-sub); }
.kyt .kt-tfind__n strong { color: var(--c-ink); }
/* 判定結果が入る箱。見た目は /maker/css/model_find.css の [data-mf-result] が持つ。
   ここで何も指定しないのは<意図してそうしている>ので、見落としと間違えないように残す。 */
.kyt .kt-tfind__r { /* 中身の体裁は model_find.css が決める */ }

/* -----------------------------------------------------------------------------
 * メーカー名の横に出す小さなロゴ
 *   ★ロゴだけにしない。読めない方がいるので必ず名前も文字で並べる。
 *   画像は既存の /common-new/images/*_logo.webp をそのまま使う（新しく作らない）。
 * -------------------------------------------------------------------------- */
/* ★ロゴ＋社名の組。<幅のあるところだけ>で使う。
   3列の数値表や省略記号の付くラベルに入れると社名が切れて読めない。 */
.kyt .kt-lg { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
/* ★ロゴは75%の大きさにする（指示）。社名の文字より目立たせない */
.kyt .kt-lg img { display: block; width: auto; height: 10.5px; max-height: 10.5px; flex: none; }
.kyt .kt-lg.is-sm img { height: 9px; max-height: 9px; }
/* 表の行見出しの中では折り返さない */
/* ★表の行見出しは width:10em の固定幅。ロゴと名前を横に並べて nowrap にすると
   「長府製作所」などが枠からはみ出す。表の中では縦に積み、折り返しも許す。 */
.kyt .kt-otbl th .kt-lg,
.kyt .kt-old td .kt-lg {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
	white-space: normal; line-height: 1.4;
}
/* ★旧型番の表は<メーカーと型番を1列>にまとめている。
     メーカーは型番の上に小さく、ロゴと名前を横に並べる（幅があるので切れない）。
     ロゴは小さすぎたので少しだけ大きくする（10px → 13px）。 */
.kyt .kt-old tbody th .kt-lg {
	display: flex; flex-direction: row; align-items: center; gap: 5px;
	margin-bottom: 2px; font-size: 11.5px; font-weight: normal; color: var(--c-sub);
	white-space: nowrap; line-height: 1.4;
}
.kyt .kt-old tbody th b { display: block; font-size: 14px; }
.kyt .kt-otbl th .kt-lg img, .kyt .kt-old td .kt-lg img { height: 13px; max-height: 20px; }
.kyt .kt-old tbody th .kt-lg img { height: 13px; max-height: 13px; }

/* -----------------------------------------------------------------------------
 * 給湯器本体の写真（商品検索の商品画像をそのまま使う）
 *   ★新しく作らない。/maker/commodity_search/commodity_image/<型番>.jpg。
 *   背景が白の正方形なので、枠を付けて白地に置く。
 * -------------------------------------------------------------------------- */
.kyt .kt-ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid var(--c-line); }
.kyt .kt-ph--xs { width: 46px; height: 46px; }
.kyt .kt-ph--s  { width: 64px; height: 64px; }
.kyt .kt-ph--m  { width: 92px; height: 92px; }
/* 写真＋説明を横に並べる小さな組 */
.kyt .kt-pr { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; }
.kyt .kt-pr__x { min-width: 0; }
/* ★幅の狭い枠では写真を上・文字を下に積む。
   横に並べると文字が1〜3文字で折り返して読めない。 */
.kyt .kt-bud__m .kt-pr { display: block; }
.kyt .kt-bud__m .kt-ph { width: 64px; height: 64px; margin: 0 0 7px; }
.kyt .kt-bud__m small { display: block; font-size: 11px; line-height: 1.5; color: var(--c-sub); }
.kyt .kt-bud__m a { display: block; margin-top: 2px; font-size: 12.5px; font-weight: bold; line-height: 1.45; text-decoration: none; }
.kyt .kt-bud__m b { display: block; margin-top: 2px; font-size: 14px; font-weight: bold; color: var(--c-red); }

/* -----------------------------------------------------------------------------
 * 強みの帯｜細い3つ
 *   ★アイコンを大きく3列に並べる形（他商材TOPと同じ）はやめ、1行の帯にして、
 *     ファーストビューの主役（型番検索）を邪魔しないようにする。
 * -------------------------------------------------------------------------- */
.kyt .kt-str {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
	background: var(--c-line); border: 1px solid var(--c-line); border-top: 0;
}
.kyt .kt-str > li {
	margin: 0; padding: 10px 14px 11px; background: #fff;
	display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 0 9px;
}
.kyt .kt-str > li::before { content: none; }
.kyt .kt-str__i {
	grid-row: 1 / 3; align-self: center; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; font-size: 20px; color: var(--c-acc);
}
.kyt .kt-str b { grid-column: 2; font-size: 14px; font-weight: bold; line-height: 1.3; }
.kyt .kt-str span:last-child { grid-column: 2; font-size: 11.5px; line-height: 1.6; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 数字のサマリ
 *   ★アイコンを左の列に置いて横に並べる形はやめた。カードの幅が足りず
 *     「3,125品／番」のように<数字が途中で折り返して>読めなかった。
 *   アイコンと見出しを1行目、数字を2行目、説明を3行目の縦3段にして、
 *   数字の行は折り返さない。数字が長いときは文字を縮めて1行に収める。
 * -------------------------------------------------------------------------- */
.kyt .kt-kpi {
	margin: 0; padding: 0; background: #fff;
	border: 1px solid var(--c-line); border-top: 3px solid var(--c-acc);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ★カードの間に隙間を作らない。隙間があると後ろの色が透けて帯が割れて見える。
     1本の枠の中を1pxの線で区切る。 */
.kyt .kt-kpi > div { margin: 0; padding: 11px 14px 12px; border-left: 1px solid var(--c-line); }
.kyt .kt-kpi > div:first-child { border-left: 0; }
/* 1行目：アイコンと見出しは<同じ行>。アイコンだけ浮かせない */
.kyt .kt-kpi dt {
	margin: 0 0 5px; font-size: 12px; font-weight: bold; line-height: 1.35; color: var(--c-sub);
	display: flex; align-items: center; gap: 6px;
}
.kyt .kt-kpi__i { display: flex; width: 1.25em; height: 1.25em; flex: none; color: var(--c-acc); }
.kyt .kt-kpi dd { margin: 0; }
/* 2行目：数字。ここは絶対に折り返さない */
.kyt .kt-kpi dd b {
	font-size: 27px; font-weight: bold; letter-spacing: -.02em; line-height: 1.1;
	color: var(--c-acc); white-space: nowrap;
}
.kyt .kt-kpi dd em {
	font-style: normal; font-size: 13px; font-weight: bold; color: var(--c-ink);
	margin-left: 2px; white-space: nowrap;
}
/* 3行目：補足 */
.kyt .kt-kpi dd span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 目次
 *   ★水色の枠をやめた。グループごとに銅の縦線で区切り、
 *     中のリンクは文字だけの札にして、帯が主張しないようにする。
 * -------------------------------------------------------------------------- */
.kyt .kt-toc { margin: 16px 0 0; padding: 0; background: none; border: 0; }
.kyt .kt-toc__h {
	margin: 0 0 8px; padding: 0 0 6px; font-size: 14px; font-weight: bold;
	border-bottom: 2px solid var(--c-navy);
}
.kyt .kt-toc dl { margin: 0; }
.kyt .kt-toc > dl > div {
	display: grid; grid-template-columns: 12.6em 1fr; align-items: start; gap: 0 14px;
	padding: 9px 0; border-bottom: 1px solid var(--c-line);
}
.kyt .kt-toc > dl > div:last-child { border-bottom: 0; }
.kyt .kt-toc dt {
	margin: 0; font-size: 13.5px; font-weight: bold; line-height: 1.5;
	display: flex; align-items: center; gap: 7px;
	padding-left: 0;
}
.kyt .kt-toc__i { display: flex; width: 1.25em; height: 1.25em; color: var(--c-acc); }
.kyt .kt-toc dd { margin: 0; }
.kyt .kt-toc dd ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kyt .kt-toc dd li { margin: 0; padding: 0; }
.kyt .kt-toc dd li::before { content: none; }
.kyt .kt-toc dd a {
	display: inline-block; padding: 4px 11px; font-size: 12.5px; text-decoration: none;
	color: var(--c-ink); background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 2px;
}
.kyt .kt-toc dd a:hover { background: var(--c-acc); border-color: var(--c-acc); color: #fff; }

/* -----------------------------------------------------------------------------
 * 「給湯器とは」の要点
 *   ★番号＋1行だけの素っ気ない並びをやめた。
 *     1項目を「見出し／本文／見分け方」の3段にして、読んで分かるようにする。
 *     左の番号は銅の四角で、項目の切れ目が分かるようにする。
 * -------------------------------------------------------------------------- */
.kyt .kt-abt {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-rows: repeat(24, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; row-gap: 0;
	background: var(--c-line); border: 1px solid var(--c-line);
}
.kyt .kt-abt > li { margin: 0; padding: 13px 15px 14px; background: #fff; }
.kyt .kt-abt > li::before { content: none; }
.kyt .kt-abt__h { margin: 0 0 6px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 0 10px; }
.kyt .kt-abt__n {
	display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	font-size: 15px; font-weight: bold; color: #fff; background: var(--c-navy);
}
.kyt .kt-abt > li:nth-child(2n) .kt-abt__n { background: var(--c-acc); }
.kyt .kt-abt__t { font-size: 17px; font-weight: bold; line-height: 1.4; }
.kyt .kt-abt__d { margin: 0; font-size: 14px; line-height: 1.9; }
.kyt .kt-abt__d strong { font-weight: bold; }
/* その項目に添える図。もともとサイトにある図を並べる。
   図だけだと何の絵か分からないので、必ず下に名前を書く。 */
/* ★ul/li にしない。サイト共通のJSが「liの直下のul」を開閉するので、
   図を押すと図の列ごと消えてしまう。div と figure で組む。 */
/* ★列の数は<枚数に合わせる>（--fig をマークアップから渡す）。
   auto-fill だと1枚のときも2枚のときも左に小さく寄って、右が空いていた。
   ★縦横比は固定しない。図は 0.92:1〜3:1 まで形がまちまちで、
     4:3に押し込むと上下に余白が出て小さく見えていた。 */
.kyt .kt-abt__fig {
	margin: 10px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(var(--fig, 3), minmax(0, 1fr)); gap: 8px;
	align-items: start;
}
.kyt .kt-abt__fig > figure { margin: 0; padding: 0; text-align: center; }
.kyt .kt-abt__fig a { display: block; text-decoration: none; }
.kyt .kt-abt__fig img {
	display: block; width: 100%; height: auto;
	background: #fff; border: 1px solid var(--c-line); box-sizing: border-box;
}
.kyt .kt-abt__fig a:hover img { border-color: var(--c-acc); }
.kyt .kt-abt__fig figcaption { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--c-sub); }

/* 見分け方。本文と区別したいので温かい面に落とす */
/* ★囲まない。囲みが並ぶと紙面が細切れになる。
   「見分け方」の語だけを太字＋青にして、本文より1段小さい文字で続ける。 */
.kyt .kt-abt__k { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--c-sub); }
.kyt .kt-abt__k b:first-child { color: var(--c-acc); font-size: 12px; margin-right: 2px; }
.kyt .kt-abt__k b { color: var(--c-ink); }







/* -----------------------------------------------------------------------------
 * 種類から選ぶ｜燃料ごとのカード3枚
 *   ★各ページのメイン画像（横長のバナー）は使わない。宣伝用の絵なので
 *     カテゴリの説明にならないし、小さい枠では潰れて読めない。
 *     代わりに<そのカテゴリでいちばん安い実在の商品写真>を出す。
 *   ★中身は詰め込まない。商品タイプは上位3つ＋「ほか◯種類」に畳む。
 *   3枚の高さはそろえ、末尾のボタンは下端でそろえる。
 * -------------------------------------------------------------------------- */
/* ★3枚の行を<隣同士そろえる>。
   カードごとに文の長さが違うので、価格・メーカー・仕様・ボタンの位置がばらばらだった。
   親が6段の行を持ち、カードはその行を borrow する（grid-template-rows: subgrid）。
   subgrid が使えない環境では普通のグリッドに落ちるだけなので崩れない。
   そのときも段差が出ないよう、各段の文は1行に収まる長さにしてある。 */
.kyt .kt-fuel {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(6, auto);
	column-gap: 14px; row-gap: 0;
}
.kyt .kt-fuel > li {
	margin: 0; padding: 0;
	grid-row: 1 / span 6;
	display: grid; grid-template-rows: subgrid;
	/* カテゴリの色は<上辺>に出す（左の太い縦線は使わない） */
	background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-mk);
}
.kyt .kt-fuel > li::before { content: none; }
/* メーカーの段（品番数＋ロゴ＋社名）をひとまとめにして1段として扱う */
.kyt .kt-fuel__g { padding: 11px 14px 0; }
/* 見出し：左の太い縦線がカテゴリの色 */
.kyt .kt-fuel__h {
	margin: 0; padding: 12px 14px 11px; border-bottom: 1px solid var(--c-line);
}
.kyt .kt-fuel__h b { display: block; font-size: 18px; font-weight: bold; line-height: 1.3; }
.kyt .kt-fuel__h span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--c-sub); }
/* 最安の商品写真＋金額 */
.kyt .kt-fuel__p {
	margin: 0; padding: 12px 14px; background: var(--c-panel); border-bottom: 1px solid var(--c-line);
	display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 0 11px;
}
.kyt .kt-fuel__ph { margin: 0; }
.kyt .kt-fuel__ph img {
	display: block; width: 64px; height: 64px; object-fit: contain; background: #fff;
	border: 1px solid var(--c-line);
}
.kyt .kt-fuel__px { min-width: 0; }
.kyt .kt-fuel__px em { display: block; font-style: normal; font-size: 11px; color: var(--c-sub); line-height: 1.45; }
/* ★枠からはみ出さないよう、画面幅に追随させる（固定pxにしない）。
   写真の幅を引いた残りに「128,293円〜」が収まる上限を 21px にしてある。 */
.kyt .kt-fuel__px b {
	display: block; font-size: clamp(15px, 2.05vw, 21px); font-weight: bold; color: var(--c-red);
	letter-spacing: -.03em; line-height: 1.2; white-space: nowrap;
}
.kyt .kt-fuel__px b small { font-size: .62em; margin-left: 1px; }
.kyt .kt-fuel__px a { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; text-decoration: none; }
/* 品番数とメーカー */
.kyt .kt-fuel__n { margin: 0; font-size: 12.5px; line-height: 1.5; }
.kyt .kt-fuel__n b { font-size: 16px; font-weight: bold; }
/* ★ul/li にしない（共通JSがliの直下のulを開閉するため） */
.kyt .kt-fuel__mk { margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.kyt .kt-fuel__mk a {
	display: flex; align-items: center; height: 26px; padding: 0 8px;
	border: 1px solid var(--c-line); border-radius: 3px; background: #fff; text-decoration: none;
}
.kyt .kt-fuel__mk a:hover { border-color: var(--c-mk); }
.kyt .kt-fuel__mk img { display: block; width: auto; height: 13px; }
.kyt .kt-fuel__mkn { margin: 5px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--c-sub); }
/* 3つの要点だけ。表組みにして縦に目で追えるようにする */
.kyt .kt-fuel__s { margin: 0 14px; padding: 11px 0 0; border-top: 1px solid var(--c-line); }
.kyt .kt-fuel__s > div { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; padding: 3px 0; font-size: 12.5px; line-height: 1.6; }
.kyt .kt-fuel__s dt { color: var(--c-sub); }
.kyt .kt-fuel__s dd { margin: 0; }
/* できること。全部出さず上位3つ＋「ほか◯種類」 */
.kyt .kt-fuel__l { margin: 0 14px; padding: 11px 0 0; border-top: 1px solid var(--c-line); font-size: 12.5px; line-height: 1.75; }
.kyt .kt-fuel__l b { display: block; font-size: 12px; color: var(--c-sub); font-weight: bold; }
.kyt .kt-fuel__l span { color: var(--c-ink); }
.kyt .kt-fuel__l em { font-style: normal; color: var(--c-sub); }
.kyt .kt-fuel__a { margin: 0 14px 14px; padding-top: 13px; align-self: end; }
.kyt .kt-fuel__a a {
	display: block; padding: 11px 8px; text-align: center; text-decoration: none;
	background: var(--c-mk); color: #fff; font-size: 13.5px; font-weight: bold; border-radius: 3px;
}
.kyt .kt-fuel__a a:hover { opacity: .88; }

/* -----------------------------------------------------------------------------
 * 一緒に取り付けることが多い部材｜写真つきのカード
 *   ★表のセルに写真を押し込むと潰れるので、カードで並べる。
 *   写真はもともとサイトにある図（option01〜06.webp・600×350）。新しく作らない。
 * -------------------------------------------------------------------------- */
.kyt .kt-opt {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-rows: repeat(12, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 0;
}
.kyt .kt-opt > li { margin: 0; padding: 0 0 12px; background: #fff; border: 1px solid var(--c-line); }
.kyt .kt-opt > li::before { content: none; }
.kyt .kt-opt__ph { margin: 0; }
.kyt .kt-opt__ph img {
	display: block; width: 100%; height: auto; aspect-ratio: 600 / 350;
	object-fit: cover; background: var(--c-panel);
}
.kyt .kt-opt__n { margin: 10px 13px 0; font-size: 15px; font-weight: bold; line-height: 1.4; }
.kyt .kt-opt__d { margin: 5px 13px 0; font-size: 12.5px; line-height: 1.8; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 価格帯ごとの分かれ方｜横棒1枚
 *   ★円グラフ4つ（旧 .kt-mix）はやめた。どの帯も家庭用ガスが9割を占めるので
 *     4つの円が全部同じ形に見えて、肝心の<分布>が読めなかった。
 *   棒の長さ＝品番数（分布）、棒の中の色＝カテゴリ（構成比）。1枚で両方読める。
 * -------------------------------------------------------------------------- */
.kyt .kt-dist { margin: 0; }
.kyt .kt-dist > ol { list-style: none; margin: 0; padding: 0; }
.kyt .kt-dist > ol > li {
	margin: 0; padding: 5px 0; display: grid; grid-template-columns: 8.6em 1fr 11.4em;
	align-items: center; gap: 0 10px;
}
.kyt .kt-dist > ol > li::before { content: none; }
.kyt .kt-dist__h { font-size: 13.5px; font-weight: bold; line-height: 1.4; white-space: nowrap; }
.kyt .kt-dist__tr { position: relative; height: 24px; background: var(--c-rail); }
/* 積み上げの棒。中はカテゴリごとの区画 */
.kyt .kt-dist__b { position: absolute; left: 0; top: 0; height: 24px; display: flex; }
.kyt .kt-dist__b > span {
	display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
	background: var(--c-mk); color: #fff; font-size: 11px; font-weight: bold; white-space: nowrap;
}
/* 数字は<固定の列>に置く。棒に浮かせると名前の列と重なって読めない */
.kyt .kt-dist__v { font-size: 12px; white-space: nowrap; color: var(--c-sub); text-align: right; }
.kyt .kt-dist__v b { font-size: 15px; font-weight: bold; color: var(--c-ink); }
.kyt .kt-dist__v em { font-style: normal; margin-left: 7px; }
/* 凡例。色だけで分からないようにカテゴリ名と件数を書く */
.kyt .kt-dist__lg {
	list-style: none; margin: 11px 0 0; padding: 9px 0 0; border-top: 1px solid var(--c-line);
	display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12.5px;
}
.kyt .kt-dist__lg > li { margin: 0; padding: 0 0 0 15px; position: relative; }
.kyt .kt-dist__lg > li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px;
	background: var(--c-mk); border-radius: 0;
}
.kyt .kt-dist__lg b { margin-left: 5px; }
.kyt .kt-dist__lg em { font-style: normal; margin-left: 4px; font-size: 11.5px; color: var(--c-sub); }





/* -----------------------------------------------------------------------------
 * タイプごとの価格帯｜カテゴリごとに折りたたむ
 *   ★14行を1枚のチャートに並べるのはやめた。行が細かく、金額のラベルも小さく、
 *     棒に重なって読めなかった。
 *   カテゴリ単位で details/summary に畳む。閉じているときは
 *   「何タイプ・何品番・いくらから」だけ。開くと<読める大きさの表>が出る。
 *   棒は行の背景に薄く敷くだけにして、数字を主役にする。
 * -------------------------------------------------------------------------- */
.kyt .kt-trg { margin: 0; }
/* カテゴリの色は<上辺>に出す（左の太い縦線は使わない） */
.kyt .kt-trg__c { border: 1px solid var(--c-line); border-top: 3px solid var(--c-mk); background: #fff; margin: 0 0 8px; }
.kyt .kt-trg__c[open] { border-color: var(--c-mk); }
.kyt .kt-trg__s {
	list-style: none; cursor: pointer; position: relative;
	padding: 11px 38px 11px 15px;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.kyt .kt-trg__s::-webkit-details-marker { display: none; }
.kyt .kt-trg__s:hover { background: var(--c-panel); }
.kyt .kt-trg__s::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
	margin-top: -6px; border-right: 2px solid var(--c-mk); border-bottom: 2px solid var(--c-mk);
	transform: rotate(45deg); transition: transform .15s;
}
.kyt .kt-trg__c[open] .kt-trg__s::after { transform: rotate(-135deg); margin-top: -2px; }
.kyt .kt-trg__s b { font-size: 17px; font-weight: bold; line-height: 1.35; }
.kyt .kt-trg__s span { font-size: 12.5px; color: var(--c-sub); }
.kyt .kt-trg__s em { font-style: normal; font-size: 15px; font-weight: bold; color: var(--c-red); }
.kyt .kt-trg__b { padding: 0 15px 14px; }
.kyt .kt-trg__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.kyt .kt-trg__t th, .kyt .kt-trg__t td { padding: 9px 10px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.kyt .kt-trg__t thead th {
	font-size: 11.5px; font-weight: normal; color: var(--c-sub); text-align: left;
	padding-top: 4px; padding-bottom: 5px; border-bottom: 2px solid var(--c-mk);
}
.kyt .kt-trg__t tbody th { text-align: left; font-size: 14px; font-weight: bold; }
.kyt .kt-trg__t tbody tr:last-child th, .kyt .kt-trg__t tbody tr:last-child td { border-bottom: 0; }
.kyt .kt-trg__t td.is-r { width: 42%; }
.kyt .kt-trg__t td.is-r span { font-size: 14px; white-space: nowrap; }
.kyt .kt-trg__t td.is-r b { color: var(--c-red); font-size: 15px; font-weight: bold; }
.kyt .kt-trg__t td.is-n { white-space: nowrap; font-size: 13px; color: var(--c-sub); text-align: right; width: 7.5em; }
.kyt .kt-trg__t td.is-n b { color: var(--c-ink); font-size: 14px; font-weight: bold; }

/* -----------------------------------------------------------------------------
 * キャンペーンの帯
 *   ★ベタ赤をやめた。ページの色（チャコール＋銅）から外れていて、
 *     ここだけ別のサイトのように浮いていた。
 * -------------------------------------------------------------------------- */
.kyt .kt-cp {
	display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 0 13px;
	margin: 16px 0 0; padding: 12px 16px; text-decoration: none;
	background: linear-gradient(100deg, var(--c-navy) 0%, #164b94 62%, var(--c-acc-d) 100%);
	color: #fff;
}
.kyt .kt-cp:hover { filter: brightness(1.1); color: #fff; }
.kyt .kt-cp__i {
	display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	font-size: 25px; color: #bfdcff; background: rgba(255, 255, 255, .1); border-radius: 50%;
}
.kyt .kt-cp__b { min-width: 0; }
.kyt .kt-cp__b em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-lime); line-height: 1.5; }
.kyt .kt-cp__b h2 {
	margin: 1px 0 0; padding: 0; font-size: 19px; font-weight: bold; line-height: 1.35;
	color: #fff; background: none; border: 0;
}
.kyt .kt-cp__a {
	padding: 7px 15px; font-size: 12.5px; font-weight: bold; white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
}
.kyt .kt-cp:hover .kt-cp__a { background: #fff; color: var(--c-acc-d); border-color: #fff; }

/* -----------------------------------------------------------------------------
 * ▲作り直した部品 ここまで｜以下はスマートフォン
 * -------------------------------------------------------------------------- */
/* 3枚以上を横に並べるので、段をそろえる（4段） */
.kyt .kt-bud__c {
	grid-row: 1 / span 4;
	display: grid; grid-template-rows: subgrid;
}
/* 3枚以上を横に並べるので、段をそろえる（4段） */
.kyt .kt-disc > li {
	grid-row: 1 / span 4;
	display: grid; grid-template-rows: subgrid;
}

/* メーカー枠：2列に折り返して並ぶので、<何枚目か>で行を割り当てる。
   全部を1行目に置くと、グリッドが足りない列を作って列幅が潰れる。 */
.kyt .kt-brand__c {
	display: grid; grid-template-rows: subgrid;
}
.kyt .kt-brand__c:nth-child(1), .kyt .kt-brand__c:nth-child(2) { grid-row: 1 / span 6; }
.kyt .kt-brand__c:nth-child(3), .kyt .kt-brand__c:nth-child(4) { grid-row: 7 / span 6; }
.kyt .kt-brand__c:nth-child(5), .kyt .kt-brand__c:nth-child(6) { grid-row: 13 / span 6; }
.kyt .kt-brand__c:nth-child(7), .kyt .kt-brand__c:nth-child(8) { grid-row: 19 / span 6; }
.kyt .kt-brand__c:nth-child(9), .kyt .kt-brand__c:nth-child(10) { grid-row: 25 / span 6; }
.kyt .kt-brand__c:nth-child(11), .kyt .kt-brand__c:nth-child(12) { grid-row: 31 / span 6; }
/* 想定（12枚）を超えたら行の共有をやめて普通に積む */
.kyt .kt-brand__c:nth-child(n+13) { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }

/* 給湯器とは：2列に折り返して並ぶので、<何枚目か>で行を割り当てる。
   全部を1行目に置くと、グリッドが足りない列を作って列幅が潰れる。 */
.kyt .kt-abt > li {
	display: grid; grid-template-rows: subgrid;
}
.kyt .kt-abt > li:nth-child(1), .kyt .kt-abt > li:nth-child(2) { grid-row: 1 / span 4; }
.kyt .kt-abt > li:nth-child(3), .kyt .kt-abt > li:nth-child(4) { grid-row: 5 / span 4; }
.kyt .kt-abt > li:nth-child(5), .kyt .kt-abt > li:nth-child(6) { grid-row: 9 / span 4; }
.kyt .kt-abt > li:nth-child(7), .kyt .kt-abt > li:nth-child(8) { grid-row: 13 / span 4; }
.kyt .kt-abt > li:nth-child(9), .kyt .kt-abt > li:nth-child(10) { grid-row: 17 / span 4; }
.kyt .kt-abt > li:nth-child(11), .kyt .kt-abt > li:nth-child(12) { grid-row: 21 / span 4; }
/* 想定（12枚）を超えたら行の共有をやめて普通に積む */
.kyt .kt-abt > li:nth-child(n+13) { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }

/* 部材：3列に折り返して並ぶので、<何枚目か>で行を割り当てる。
   全部を1行目に置くと、グリッドが足りない列を作って列幅が潰れる。 */
.kyt .kt-opt > li {
	display: grid; grid-template-rows: subgrid;
}
.kyt .kt-opt > li:nth-child(1), .kyt .kt-opt > li:nth-child(2), .kyt .kt-opt > li:nth-child(3) { grid-row: 1 / span 3; }
.kyt .kt-opt > li:nth-child(4), .kyt .kt-opt > li:nth-child(5), .kyt .kt-opt > li:nth-child(6) { grid-row: 4 / span 3; }
.kyt .kt-opt > li:nth-child(7), .kyt .kt-opt > li:nth-child(8), .kyt .kt-opt > li:nth-child(9) { grid-row: 7 / span 3; }
.kyt .kt-opt > li:nth-child(10), .kyt .kt-opt > li:nth-child(11), .kyt .kt-opt > li:nth-child(12) { grid-row: 10 / span 3; }
/* 想定（12枚）を超えたら行の共有をやめて普通に積む */
.kyt .kt-opt > li:nth-child(n+13) { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }

/* ===========================================================================
 * ▼対応エリアの節を差し替えたときに一緒に消えてしまった規則を戻したもの
 *   比較表の見出し（.kt-cmph）／確認の3列（.kt-chk3）／
 *   送っていただく写真（.kt-shot）／手順の「この項目を見る」（.kt-step__a）／
 *   表の見出し（.kt-otbl__cap）
 * ======================================================================== */

.kyt .kt-otbl__cap {
	caption-side: top; text-align: left; padding: 0 0 7px;
	font-size: 13.5px; font-weight: bold; color: var(--c-ink);
}

.kyt .kt-cmph {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	height: 100%; box-sizing: border-box;
	background: #fff; border-bottom: 3px solid var(--c-mk); padding: 2px 8px 12px;
}

/* その種類でいちばん安い実機の写真。
   ★枠で囲まず、薄い面に載せる。機器は白いので、面の色で形の輪郭が出る。 */
.kyt .kt-cmph__ph {
	display: block; width: 86px; height: 86px; margin: 0 auto 8px;
	object-fit: contain; background: #f7faff; border-radius: 4px;
}

/* 文字の包み。これがあるので、スマートフォンで横並びにしても文字は縦に積まれる */
.kyt .kt-cmph__x { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; }

.kyt .kt-cmph b { font-size: 15px; font-weight: bold; line-height: 1.35; color: var(--c-ink); }

/* 燃料は小さな札にする。色はその種類の色（列の下の罫と同じ） */
.kyt .kt-cmph em {
	align-self: center; margin-top: 5px; padding: 1px 8px; border-radius: 9px;
	background: var(--c-panel); color: var(--c-mk);
	font-style: normal; font-size: 11px; font-weight: bold; line-height: 1.65; white-space: nowrap;
}

/* 金額は帯の下端にそろえる（列ごとに文の行数が違っても位置が動かない）。
   ★数字だけを大きくし、何の金額かと単位は小さく添える。 */
.kyt .kt-cmph i {
	display: block; margin-top: auto; padding-top: 9px; font-style: normal;
	font-size: 11.5px; color: var(--c-red); white-space: nowrap;
}
.kyt .kt-cmph i small { display: block; font-size: 10.5px; color: var(--c-sub); line-height: 1.4; }
.kyt .kt-cmph i b {
	display: inline; font-size: clamp(17px, 2.1vw, 22px); color: var(--c-red);
	letter-spacing: -.03em; vertical-align: -1px;
}




/* ---- 交換できるかの確認 ---- */
.kyt .kt-chk3 {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px;
}

.kyt .kt-chk3__c {
	background: #fff; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
}

.kyt .kt-chk3__h {
	margin: 0; padding: 8px 12px; background: var(--c-navy); color: #fff;
	font-size: 13.5px; font-weight: bold; line-height: 1.5;
}

.kyt .kt-chk3__c ul { margin: 0; padding: 10px 12px 12px; list-style: none; font-size: 13px; }

.kyt .kt-chk3__c li {
	position: relative; padding-left: 1.3em; margin-bottom: 5px; line-height: 1.75;
}

.kyt .kt-chk3__c li:last-child { margin-bottom: 0; }

.kyt .kt-chk3__c li::before {
	content: ""; position: absolute; left: 2px; top: .6em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--c-mid);
}


/* ---- お見積りで必要な写真 ---- */
/* お送りいただきたい写真。
   ★文字だけの一覧をやめ、<撮る範囲を描いた図>を並べる。
     実写ではなく線画にする（指示）。機種や背景が現場ごとに違う実写より、
     「どこを撮るか（破線の枠）」「何を写すか（さし色）」だけを描いた図のほうが
     迷わない。図はページの中に直接描くので読み込みが増えず、
     どの画面の大きさでもぼやけない。 */
.kyt .kt-shot {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.kyt .kt-shot > li {
	margin: 0; padding: 0 0 11px; background: #fff; border: 1px solid var(--c-line);
}
.kyt .kt-shot > li::before { content: none; }
.kyt .kt-shot__fig {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
	background: #fafbfc; border-bottom: 1px solid var(--c-line);
}
.kyt .kt-shot__n { display: block; margin: 9px 11px 0; font-size: 13.5px; font-weight: bold; line-height: 1.4; }
.kyt .kt-shot__d { display: block; margin: 4px 11px 0; font-size: 11.5px; line-height: 1.7; color: var(--c-sub); }



/* ---- 選び方の手順に置く「この項目を見る」 ---- */
.kyt .kt-step__a {
	grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 12.5px;
}
/* 対応エリアの注記。案内の箱と同じ見た目を2つ並べないよう、箱にしない */
.kt-sa .kt-sa__note { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.85; color: var(--sa-sub, #5a6b78); }
.kt-sa .kt-sa__note strong { color: var(--sa-ink, #1d2b36); }

/* ===========================================================================
 * ▼比較表（.kt-otbl）／「−」の表示（.kt-na）
 *   ★対応エリアの節を差し替えたときに消してしまった指定を戻したもの。
 *     移植元（食洗機TOPの .dt-otbl）から取り直してクラス名を付け替えた。
 *     枠・見出しの背景・スマートフォンでの積み上げがここに入っている。
 *     これが無いと表が枠なしになり、セルの文字が隣とつながって読めない。
 * ======================================================================== */



/* 交換前のメーカーが施工記録に無いとき。**「メーカー不明」とは書かない** （入力していないだけなのに、分からない機種だったように読めるため。2026-09-19 指摘）。 表は列をそろえる必要があるので、空欄ではなく控えめな「−」を置く。 */ .kyt .kt-na { color: #adb5bd; }
/* 種類の比較表の土台。枠・見出しの背景・列幅 */
.kyt .kt-otbl { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; border: 1px solid var(--c-line); font-size: 13px; line-height: 1.7; }
.kyt .kt-otbl th, .kyt .kt-otbl td { border: 1px solid var(--c-line); padding: 9px 11px; vertical-align: top; overflow-wrap: anywhere; }
.kyt .kt-otbl thead th { background: var(--c-navy); color: #fff; text-align: center; font-size: 13.5px; }
.kyt .kt-otbl thead th:first-child { width: 10em; background: var(--c-panel); color: var(--c-ink); }
/* ★比較表（is-cmp）の見出しは、中の札（.kt-cmph）が枠いっぱいに入る。
     表の見出しの濃紺の背景と内側の余白をそのままにすると、
     白い札のまわりに濃紺の縁が出て枠が二重に見える。 */
.kyt .kt-otbl.is-cmp thead th:not(:first-child) { padding: 0; background: #fff; border-bottom: 0; }
.kyt .kt-otbl tbody th { width: 10em; background: var(--c-panel); text-align: left; font-size: 12.5px; }


/* -----------------------------------------------------------------------------
 * ページ内リンクの着地位置
 *   上部のヘッダーが position:fixed（PC 136px / SP 62+44=106px）なので、
 *   そのまま飛ぶと見出しがヘッダーの裏に入って見えない。
 *   飛び先に余白を持たせて、見出しが隠れないようにする。
 *   このCSSは /maker/html/ でしか読み込まないので ID 直指定でよい。
 * -------------------------------------------------------------------------- */
article#mainContents section[id],
#budget-1, #budget-2, #budget-3, #budget-4 { scroll-margin-top: 146px; }

/* 共通CSSに #voice を float させるルールがあり（他ページ用のIDと衝突）、
   h2.heading_01 が clear:both なので次の見出しが口コミ節の高さぶん下に落ちる。
   「型番から探す」へ飛ぶと見出しが画面外になっていた。このページでは float させない。 */
article#mainContents section#voice { float: none !important; }
.kyt p { margin: 0 0 10px; }
.kyt img { max-width: 100%; }

.kyt .kt-lead { margin: 14px 0 20px; font-size: 15px; line-height: 1.9; }
.kyt .kt-note { margin: 11px 0 0; font-size: 12px; line-height: 1.8; color: var(--c-sub); }
/* ★注記のあとに次のブロックが続くときは下に余白を取る。
   .kt-brand / .kt-class / .kt-sum / .kt-otbl / .kt-chk3 / .kt-grt は
   margin-top が 0 なので、これが無いと貼り付いて見える。
   隣り合う余白は大きいほうに潰れるので、.kt-h3（上28px）などは今のまま。 */
.kyt .kt-note:not(:last-child) { margin-bottom: 22px; }
/* 訂正や「含まれる／含まれない」の線引きなど、読み落とすと誤解する語 */
.kyt ins { text-decoration: none; font-weight: bold; border-bottom: 2px solid var(--c-acc); }
/* 小見出しのすぐ下に置く説明文のあとも同じだけ空ける */
.kyt .kt-h3 + p:not([class]) { margin: 0 0 18px; font-size: 14px; line-height: 1.9; }

/* 小見出し：下線だけの見出し（カードのヘッダー帯は使わない） */
.kyt .kt-h3 {
	margin: 28px 0 13px; padding: 0 0 7px; font-size: 18px; font-weight: bold; line-height: 1.45;
	border-bottom: 2px solid var(--c-acc);
}
.kyt .kt-h3 span { margin-left: 10px; font-size: 12px; font-weight: normal; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * アイコン
 *   gt_icon() が吐くインラインSVG。大きさは親の font-size に追随させ、
 *   色は currentColor のまま。アイコンライブラリは読み込まない。
 * -------------------------------------------------------------------------- */
.kyt .kt-i { display: block; width: 1.2em; height: 1.2em; flex: none; }
/* 小見出し・データ見出しの先頭に置く小さなアイコン枠。
   以前は使わなくなった .kt-two__i と同じルールに同居していたので入れ直した。 */
.kyt .kt-h3__i, .kyt .kt-data__i {
	display: inline-block; width: 1.05em; height: 1.05em; margin-right: 6px;
	vertical-align: -.16em; color: var(--c-acc);
}
.kyt .kt-h3__i .kt-i, .kyt .kt-data__i .kt-i { width: 100%; height: 100%; }









/* メーカーの極小ラベル。★既定色はガスコンロTOPと同じ #0065cc にそろえる */
.kyt .kt-mk {
	display: inline-block; padding: 0 7px; border-radius: 2px;
	background: var(--c-mk, #0065cc); color: #fff;
	font-size: 11px; font-weight: bold; line-height: 1.75; white-space: nowrap; vertical-align: 1px;
}

/* テキストリンクボタン（控えめ・矢印つき） */
.kyt .kt-more { margin: 14px 0 0; text-align: right; font-size: 13.5px; }
.kyt .kt-more a { position: relative; padding-right: 16px; font-weight: bold; text-decoration: none; }
.kyt .kt-more a::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

	/* 単位は数字より小さく */







/* =============================================================================
 * メーカーのブランドパネル
 * ========================================================================== */
.kyt .kt-brand { display: grid; grid-template-rows: repeat(36, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; align-items: stretch; }
/* ★display はここで指定しない。あとから書くと subgrid を上書きして
   行の共有が効かなくなる（並べ方は .kt-brand__c の subgrid 規則が持つ）。 */
.kyt .kt-brand__c { border: 1px solid var(--c-line); border-top: 4px solid var(--c-mk); background: #fff; }
.kyt .kt-brand__h { margin: 0; padding: 9px 13px 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--c-line); }
.kyt .kt-brand__h b { font-size: 18px; line-height: 1.3; white-space: nowrap; }
/* 補助の文字なので折り返しを許す（nowrap だと狭い枠で溢れる） */
.kyt .kt-brand__h small { display: block; font-size: 11px; color: var(--c-sub); font-weight: normal; }
/* 共通CSSの article#mainContents img { height:auto } のほうが詳細度が高いので上書きする */
.kyt .kt-brand__h img { display: block; width: auto; margin-left: auto; }
/* ロゴの上に本社の写真を小さく置く。
   元画像（460x550）は下にロゴ帯が焼き込まれているので、
   object-fit: cover ＋ object-position: top で上の写真部分だけを見せる。
   共通CSSの article#mainContents img { height:auto } に勝てないので、
   高さは指定せず aspect-ratio で決める。 */
.kyt .kt-brand__mk { display: block; margin-left: auto; }
.kyt .kt-brand__h img.kt-brand__hq {
	width: 80px; aspect-ratio: 4 / 3; margin: 0 0 4px auto;
	object-fit: cover; object-position: center top; border: 1px solid var(--c-line);
}
.kyt .kt-brand__k { margin: 0; padding: 9px 13px; background: var(--c-panel); font-size: 13.5px; font-weight: bold; line-height: 1.55; color: var(--c-mk); }
.kyt .kt-brand__d { margin: 10px 13px 0; font-size: 13px; line-height: 1.8; }
/* メーカー枠に出す「そのメーカーでいちばん安い機種」の写真 */
.kyt .kt-brand__ph { margin: 10px 13px 0; padding: 9px; background: var(--c-panel); border: 1px solid var(--c-line); }
.kyt .kt-brand__ph small { display: block; font-size: 11px; color: var(--c-sub); line-height: 1.5; }
.kyt .kt-brand__ph a { display: block; margin-top: 1px; font-size: 13px; font-weight: bold; text-decoration: none; line-height: 1.4; }
.kyt .kt-brand__ph b { display: block; margin-top: 2px; font-size: 16px; font-weight: bold; color: var(--c-red); }
/* 価格がまだ入っていないメーカー。金額の体裁にしない */
.kyt .kt-brand__ph b.is-tbd { font-size: 11.5px; font-weight: normal; color: var(--c-sub); }
.kyt .kt-brand__l { list-style: none; margin: 10px 13px 0; padding: 0; }
.kyt .kt-brand__l li { margin: 0; padding: 4px 0; display: grid; grid-template-columns: 5.2em 1fr; gap: 8px; font-size: 12.5px; line-height: 1.65; }
.kyt .kt-brand__l li::before { content: none; }
.kyt .kt-brand__l b { color: var(--c-sub); }
.kyt .kt-brand__s { margin: 9px 13px 0; font-size: 12px; line-height: 1.65; color: var(--c-sub); }
.kyt .kt-brand__s b { color: var(--c-ink); }
.kyt .kt-brand__p { margin: 9px 13px 0; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 12px; }
.kyt .kt-brand__p b { font-size: 19px; color: var(--c-red); font-weight: bold; }
/* 並べたブロックの末尾ボタンは下端でそろえる（高さが違っても位置を合わせる） */
.kyt .kt-brand__a { margin: 10px 13px 13px; margin-top: auto; padding-top: 10px; }
.kyt .kt-brand__a a {
	display: block; padding: 9px 8px; text-align: center; text-decoration: none;
	background: var(--c-mk); color: #fff; font-size: 13px; font-weight: bold; border-radius: 3px;margin-top: 4px;
}
.kyt .kt-brand__a a:hover { opacity: .88; }

/* メーカー比率（細い1本の帯） */
.kyt .kt-share { margin: 16px 0 0; }
.kyt .kt-share__h { margin: 0 0 6px; font-size: 12.5px; color: var(--c-sub); }
.kyt .kt-share__b { display: flex; height: 24px; }
/* 構成比が小さいメーカーは帯が細くなる。nowrap の文字が隣にはみ出すので切る。
   （細い区画のメーカーは帯には出さず、下の一覧で全社を見せる） */
.kyt .kt-share__b > span {
	display: flex; align-items: center; justify-content: center; min-width: 0;
	background: var(--c-mk); color: #fff; font-size: 12px; font-weight: bold; white-space: nowrap;
	overflow: hidden;
}
.kyt .kt-share__b > span.is-etc { background: #8a97a7; }
/* ★ロゴ・社名・件数・割合を1行に流すと折り返して塊になり、読めなかった。
   列をそろえた一覧にする。色の四角はロゴと重複するのでやめる。 */
.kyt .kt-share__l { list-style: none; margin: 11px 0 0; padding: 0; border-top: 1px solid var(--c-line); display: block; }
.kyt .kt-share__l > li {
	margin: 0; padding: 7px 2px; border-bottom: 1px solid var(--c-line); position: static;
	display: grid; grid-template-columns: minmax(0, 1fr) 6.4em 5.4em;
	align-items: center; gap: 0 10px; font-size: 13.5px;
}
.kyt .kt-share__l > li::before { content: none; }
.kyt .kt-share__l a { text-decoration: none; }
.kyt .kt-share__l b { margin: 0; text-align: right; font-size: 14px; font-weight: bold; }
.kyt .kt-share__l em { margin: 0; text-align: right; font-style: normal; font-size: 13px; color: var(--c-sub); }












/* =============================================================================
 * 予算から選ぶ｜金額の値札カード
 * ========================================================================== */
.kyt .kt-bud { display: grid; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; align-items: stretch; }
/* ★display はここで指定しない（上と同じ理由） */
.kyt .kt-bud__c { border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-bud__h {
	position: relative; margin: 0; padding: 10px 12px 9px; background: var(--c-navy); color: #fff;
	font-size: 16px; font-weight: bold; line-height: 1.35;
}
.kyt .kt-bud__c:nth-child(2) .kt-bud__h { background: #164b94; }
.kyt .kt-bud__c:nth-child(3) .kt-bud__h { background: #1d5fb8; }
.kyt .kt-bud__c:nth-child(4) .kt-bud__h { background: #3179cc; }
.kyt .kt-bud__h span { display: block; font-size: 11px; font-weight: normal; color: rgba(255, 255, 255, .82); }
.kyt .kt-bud__d { margin: 0; padding: 8px 12px; font-size: 12px; line-height: 1.7; color: var(--c-sub); border-bottom: 1px solid var(--c-line); }
.kyt .kt-bud__l { list-style: none; margin: 0; padding: 6px 0; }
.kyt .kt-bud__l > li { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--c-line); }
.kyt .kt-bud__l > li::before { content: none; }
.kyt .kt-bud__l > li:last-child { border-bottom: 0; }
.kyt .kt-bud__l a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; text-decoration: none; color: inherit; }
.kyt .kt-bud__l img { display: block; width: 48px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.kyt .kt-bud__l b { display: block; font-size: 12.5px; line-height: 1.35; }
.kyt .kt-bud__l small { display: block; font-size: 10.5px; color: var(--c-sub); line-height: 1.5; }
.kyt .kt-bud__l em { display: block; font-style: normal; font-size: 13.5px; font-weight: bold; color: var(--c-red); white-space: nowrap; line-height: 1.4; }
.kyt .kt-bud__m { margin: auto 12px 12px; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 11.5px; line-height: 1.7; color: var(--c-sub); }
.kyt .kt-bud__m a { text-decoration: none; }



/* =============================================================================
 * 目的・機能｜アイコンタイル
 * ========================================================================== */
/* 10項目を「軸名｜ひとこと｜該当シリーズ」の1行ずつに畳む。
   ブロックを並べると縦に伸びて余白が出るので、行の一覧にして密度を上げる。 */
.kyt .kt-tile { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-tile > li {
	margin: 0; padding: 8px 13px 9px; border-top: 1px solid var(--c-line);
	/* ★3列。見出しの列は<いちばん長い見出しに合わせた幅>にして折り返さず、
	     余った幅は全部本文にまわす（右側を空けない）。
	     4列目（該当シリーズ用）は、どのタイルにも入っていないので置かない。 */
	display: grid; grid-template-columns: 22px 14.5em minmax(0, 1fr);
	gap: 0 14px; align-items: start;
}
.kyt .kt-tile > li::before { content: none; }
.kyt .kt-tile > li:first-child { border-top: 0; }
.kyt .kt-tile > li:nth-child(2n) { background: #f8fbff; }
.kyt .kt-tile > li:hover { background: #f3f7fd; }
/* p は箱を消して、中のアイコンと軸名をそのまま行のセルにする */
.kyt .kt-tile__h { display: contents; }
.kyt .kt-tile__i {
	display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
	color: var(--c-mid); font-size: 17px; background: #f1f6fc;
}
.kyt .kt-tile__h > span:last-child { font-size: 13px; font-weight: bold; line-height: 1.55; white-space: nowrap; }
.kyt .kt-tile > li > p:not(.kt-tile__h) {
	margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--c-sub); padding-top: 1px;
}
/* 該当シリーズは横1列に流す（区切りは／） */
.kyt .kt-tile__l { list-style: none; margin: 0; padding: 1px 0 0; font-size: 0; }
.kyt .kt-tile__l li { display: inline; margin: 0; padding: 0; }
.kyt .kt-tile__l li::before { content: none; }
.kyt .kt-tile__l li + li::before {
	content: "／"; font-size: 11px; color: #bfcbdb; margin: 0 1px; content: "／";
}
.kyt .kt-tile__l a {
	font-size: 11.5px; line-height: 1.75; text-decoration: none; white-space: nowrap;
	border-bottom: 2px solid var(--c-mk); padding-bottom: 1px;
}
.kyt .kt-tile__l a:hover { background: var(--c-mk); color: #fff; }



/* =============================================================================
 * 施工実績｜数字が主役
 * ========================================================================== */
/* ★2列の<行をそろえる>。右の見出しだけ2行に折り返すと、
   下の棒グラフの開始位置がずれる。親が2段の行を持ち、2列がその行を共有する。
   subgrid が無い環境でも崩れないよう、見出しに下限の高さを入れておく。 */
.kyt .kt-data {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto); column-gap: 26px; row-gap: 0; align-items: start;
}
.kyt .kt-data > div { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
.kyt .kt-data__h { margin: 0 0 8px; padding: 0 0 5px; min-height: 3.1em; box-sizing: border-box; font-size: 13.5px; font-weight: bold; border-bottom: 1px solid var(--c-line); }
.kyt .kt-data__h span { margin-left: 8px; font-size: 11.5px; font-weight: normal; color: var(--c-sub); }
.kyt .kt-bar { list-style: none; margin: 0 0 18px; padding: 0; }
.kyt .kt-bar > li { margin: 0; padding: 4px 0; display: grid; grid-template-columns: 9.4em 1fr 5.6em; align-items: center; gap: 9px; }
.kyt .kt-bar > li::before { content: none; }
.kyt .kt-bar__l { font-size: 12.5px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyt .kt-bar__t { height: 10px; background: var(--c-rail); }
/* 棒の色。カテゴリ色・メーカー色（--c-mk）が付いていればそれを使う。
   付いていないとき（口コミの点数の分布）はガスコンロTOPと同じ #2a7aa8 */
.kyt .kt-bar__t i { display: block; height: 100%; background: var(--c-mk, #2a7aa8); }
.kyt .kt-bar__v { text-align: right; font-size: 11.5px; color: var(--c-sub); white-space: nowrap; }
.kyt .kt-bar__v b { color: var(--c-ink); font-size: 12.5px; }
.kyt .kt-pref { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.kyt .kt-pref > li { margin: 0; padding: 2px 9px; font-size: 12px; border: 1px solid var(--c-line); }
.kyt .kt-pref > li::before { content: none; }
.kyt .kt-pref > li.is-top { background: var(--c-acc); border-color: var(--c-acc); color: #fff; }
.kyt .kt-pref span { margin-left: 5px; font-size: 11px; color: var(--c-sub); }
.kyt .kt-pref > li.is-top span { color: rgba(255, 255, 255, .78); }

/* =============================================================================
 * 施工事例｜写真主役
 * ========================================================================== */
.kyt .kt-case { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kyt .kt-case > li { margin: 0; padding: 0; border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-case > li::before { content: none; }
.kyt .kt-case__ph { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--c-line); }
.kyt .kt-case__ph span { position: relative; display: block; }
.kyt .kt-case__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f1f6fd; }
.kyt .kt-case__ph i {
	position: absolute; left: 0; top: 0; padding: 1px 7px; font-style: normal;
	font-size: 10.5px; color: #fff; background: rgba(18, 58, 86, .82);
}
.kyt .kt-case__b { padding: 9px 11px 11px; }
.kyt .kt-case__m { margin: 0 0 6px; font-size: 11px; color: var(--c-sub); }
.kyt .kt-case__m span::after { content: "／"; margin: 0 3px; color: #bfcbdb; }
.kyt .kt-case__m span:last-child::after { content: none; }
.kyt .kt-case__r { margin: 0; font-size: 12.5px; line-height: 1.6; }
.kyt .kt-case__r dt { display: inline-block; min-width: 3.4em; font-size: 10.5px; color: var(--c-sub); }
.kyt .kt-case__r dd { display: inline; margin: 0; }
.kyt .kt-case__r dd b { font-weight: bold; }
.kyt .kt-case__r dd em { font-style: normal; color: var(--c-sub); font-size: 11.5px; margin-left: 4px; }
.kyt .kt-case__r .is-after + dd b { color: var(--c-mk); }
.kyt .kt-case__row { display: block; }

/* =============================================================================
 * 口コミ
 * ========================================================================== */
.kyt .kt-voice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.kyt .kt-voice > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--c-line); }
.kyt .kt-voice > li::before { content: none; }
.kyt .kt-voice__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; }
/* 星。★ガスコンロTOPと同じ色。給湯器のさし色（--c-amber）は青なので使わない */
.kyt .kt-voice__s { color: #e8912d; font-size: 13px; letter-spacing: 1px; }
.kyt .kt-voice__s i { font-style: normal; color: #dde3e8; }
.kyt .kt-voice__d { font-size: 11px; color: var(--c-sub); }
.kyt .kt-voice__t { margin: 0 0 4px; font-size: 13.5px; font-weight: bold; line-height: 1.5; }
.kyt .kt-voice p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--c-sub); }
.kyt .kt-voice__f { margin: 8px 0 0; font-size: 11.5px; color: var(--c-sub); }

/* =============================================================================
 * 型番から探す｜検索パネル
 * ========================================================================== */



.kyt .kt-old { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.kyt .kt-old th, .kyt .kt-old td { padding: 6px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.kyt .kt-old thead th { border-bottom: 2px solid var(--c-acc); font-size: 11.5px; color: var(--c-sub); font-weight: normal; padding-bottom: 5px; }
.kyt .kt-old tbody tr:nth-child(2n) th, .kyt .kt-old tbody tr:nth-child(2n) td { background: #f8fbff; }
/* 長い型番（GTH-2434SAWX3H-T など）が入るので、狭いときはどこでも折る */
.kyt .kt-old tbody th { font-weight: bold; font-size: 13.5px; overflow-wrap: anywhere; }
.kyt .kt-old td.is-n { white-space: nowrap; color: var(--c-sub); font-size: 12px; }
.kyt .kt-old td a { text-decoration: none; font-weight: bold; }
.kyt .kt-old td em { font-style: normal; margin-left: 6px; font-size: 11.5px; color: var(--c-sub); }

/* =============================================================================
 * 選び方（図解 + 8ステップの密な一覧）
 * ========================================================================== */
/* 8ステップ。上から順に決めていく流れが見えるように、番号の丸を縦のレールでつなぐ。
   1〜4を左の列、5〜8を右の列に流す（grid-auto-flow:column）。 */
.kyt .kt-step {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column;
	/* ★行数は手順の数から決める（マークアップが --rows を渡す）。
	   決め打ちにすると、手順が5つのとき片方の列に1つだけ残る。 */
	grid-template-rows: repeat(var(--rows, 4), auto); grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px; align-items: start;
}
.kyt .kt-step > li {
	position: relative; margin: 0; padding: 0 0 16px 44px;
	display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 3px 8px;
}
/* 番号の丸から次の番号へ伸びる縦の線。各列の最後には引かない
   （何番目かは手順の数で変わるので、マークアップ側で is-tail を付けている） */
.kyt .kt-step > li::before {
	content: ""; position: absolute; left: 14px; top: 31px; bottom: 0; width: 2px; background: #dce8f7;
}
.kyt .kt-step > li.is-tail::before { content: none; }
.kyt .kt-step__n {
	position: absolute; left: 0; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--c-acc); color: #fff; font-size: 14px; font-weight: bold;
}
.kyt .kt-step__i {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; color: var(--c-acc);
}
.kyt .kt-step__i .kt-i { width: 100%; height: 100%; }
.kyt .kt-step b { font-size: 14px; font-weight: bold; line-height: 1.4; }
.kyt .kt-step__d {
	grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.75; color: var(--c-sub);
}

/* =============================================================================
 * FAQ
 * ========================================================================== */
.kyt .kt-faq__i { border-bottom: 1px solid var(--c-line); }
.kyt .kt-faq summary {
	position: relative; padding: 11px 38px 11px 34px; cursor: pointer; list-style: none;
	font-size: 14.5px; font-weight: bold; line-height: 1.6;
}
.kyt .kt-faq summary::-webkit-details-marker { display: none; }
.kyt .kt-faq summary::before {
	content: "Q"; position: absolute; left: 6px; top: 11px;
	font-size: 14px; font-weight: bold; color: var(--c-mid);
}
.kyt .kt-faq summary::after {
	content: ""; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px;
	border-right: 2px solid var(--c-sub); border-bottom: 2px solid var(--c-sub); transform: rotate(45deg);
}
.kyt .kt-faq__i[open] summary::after { transform: rotate(-135deg); top: 22px; }
.kyt .kt-faq summary:hover { background: var(--c-panel); }
.kyt .kt-faq__a { padding: 0 16px 12px 34px; }
.kyt .kt-faq__a p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--c-sub); }

/* =============================================================================
 * CTA
 *   ★CTAは緑で統一する（#41b033）。商材TOP4本とも同じ。
 *     白地に置く文字と枠だけ濃いほうの緑（#2f8a26）を使う。
・関連リンク
 * ========================================================================== */
/* CTAは3メーカーTOP（series.css の .gc2-cta / .gc2-btn）と同じ見た目にそろえる。
   series.css はこのページで読み込まないので、値だけ写している。 */
.kyt .kt-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 16px 0 0; }
.kyt .kt-cta a {
	display: block; padding: 13px 10px; text-align: center; text-decoration: none; border-radius: 4px;
	font-size: 18px; font-weight: bold; line-height: 1.4; transition: all .25s;
}
.kyt .kt-cta small { display: block; margin-top: 2px; font-size: 14px; font-weight: normal; }
.kyt .kt-cta__p { background: #41b033; border: 2px solid #2f8a26; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .32); }
.kyt .kt-cta__p:hover { background: #2f8a26; color: #fff; }
.kyt .kt-cta__t { background: #fff; border: 2px solid #2f8a26; color: #2f8a26; }
.kyt .kt-cta__t:hover { background: #f1faee; }

/* 次に見ておきたいページ。文字だけの箇条書きをやめ、
   メーカーはロゴ・それ以外はアイコンを頭に付けて、行ごとに押せる面にする。 */
.kyt .kt-rel__g {
	margin: 0 0 8px; padding: 0 0 5px; font-size: 12.5px; font-weight: bold; color: var(--c-sub);
	border-bottom: 1px solid var(--c-line);
}
.kyt .kt-rel__g + .kt-rel { margin-bottom: 18px; }
.kyt .kt-rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.kyt .kt-rel.is-mk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kyt .kt-rel > li { margin: 0; padding: 0; }
.kyt .kt-rel > li::before { content: none; }
.kyt .kt-rel a {
	position: relative; height: 100%; box-sizing: border-box; display: grid;
	grid-template-columns: 34px 1fr; align-items: center; gap: 11px;
	padding: 10px 26px 11px 11px; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--c-line);
	transition: background .15s, border-color .15s;
}
.kyt .kt-rel a::after {
	content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid var(--c-acc); border-right: 2px solid var(--c-acc);
	transform: translateY(-50%) rotate(45deg); transition: right .15s;
}
.kyt .kt-rel a:hover { background: #f4f9fe; border-color: var(--c-mk, var(--c-acc)); }
.kyt .kt-rel a:hover::after { right: 8px; }
/* メーカーはロゴ、それ以外はアイコン */
.kyt .kt-rel__logo { display: flex; align-items: center; justify-content: center; width: 34px; }
.kyt .kt-rel__logo img { display: block; width: auto; }
.kyt .kt-rel__i {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; font-size: 20px; color: var(--c-acc); background: #eef5fc;
}
.kyt .kt-rel__x { min-width: 0; }
.kyt .kt-rel b { display: block; font-size: 13.5px; font-weight: bold; line-height: 1.4; color: var(--c-ink); }
/* メーカー3枚は幅が狭いので、名前は1行に収める */
/* ★メーカーの枠はロゴを<上>に置く。横に並べるとロゴに使える幅が狭く、
     小さくしないと収まらないので文字との釣り合いが悪い。
     上に置けば枠の幅をそのまま使えるので、大きく出せる。 */
.kyt .kt-rel.is-mk a { grid-template-columns: 1fr; gap: 8px; align-items: start; }
.kyt .kt-rel.is-mk .kt-rel__logo img {
	width: auto; max-height: 22px;
}
.kyt .kt-rel.is-mk .kt-rel__logo { width: 55px; }
.kyt .kt-rel__x span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-sub); line-height: 1.6; }

/* =============================================================================
 * CSSだけで描く図解
 *   新しい画像は作らない。寸法・位置関係が伝わればよいものは矩形と罫線で描く。
 * ========================================================================== */

/* ビルトインと据置型の断面 */
/* 価格クラスの目安（3段） */
/* 費用の3段。
   ★アイコン・名前・金額を1行に横並びにして nowrap を掛けていたので、
     3分の1幅の列に収まらず文字が枠からはみ出していた。
     縦に積み、名前は折り返しを許し、金額だけ nowrap にする。
     大きさで段を付ける（名前16px → 金額24px → 説明12px）。 */
.kyt .kt-class {
	list-style: none; margin: 0 0 14px; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
	background: #fff; border: 1px solid var(--c-line);
}
.kyt .kt-class > li {
	margin: 0; padding: 13px 15px 14px; min-width: 0;
	border-left: 1px solid var(--c-line); border-top: 3px solid var(--k-step, var(--c-acc));
}
.kyt .kt-class > li:first-child { border-left: 0; }
.kyt .kt-class > li::before { content: none; }
.kyt .kt-class__i { display: none; }   /* 絵は使わない。段は数字と大きさで示す */
.kyt .kt-class b {
	display: block; font-size: 16px; font-weight: bold; line-height: 1.4;
	white-space: normal; overflow-wrap: anywhere;
}
.kyt .kt-class em {
	display: block; margin: 5px 0 0; font-style: normal;
	/* ★固定pxにしない。狭い列で「128,293円〜」が枠から出る */
	font-size: clamp(17px, 2.3vw, 24px); font-weight: bold; color: var(--c-red);
	letter-spacing: -.02em; line-height: 1.15; white-space: nowrap;
}
.kyt .kt-class > li > span:last-child {
	display: block; margin: 7px 0 0; font-size: 12px; line-height: 1.8; color: var(--c-sub);
}
/* 段が上がるほど濃くする */
.kyt .kt-class > li:nth-child(1) { --k-step: #9cc3ea; }
.kyt .kt-class > li:nth-child(2) { --k-step: #4a86c8; }
.kyt .kt-class > li:nth-child(3) { --k-step: var(--c-acc); }

/* 予算帯へ飛ぶ横並び（価格帯グラフの手前） */
.kyt .kt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.kyt .kt-jump > span {
	display: flex; align-items: center; gap: 5px; margin-right: 4px;
	font-size: 12px; font-weight: bold; color: var(--c-sub);
}
.kyt .kt-jump > span .kt-i { width: 1.2em; height: 1.2em; color: var(--c-mid); }
.kyt .kt-jump a {
	display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px;
	font-size: 12.5px; font-weight: bold; text-decoration: none; color: var(--c-acc);
	background: #fff; border: 1px solid var(--c-mid);
}
.kyt .kt-jump a:hover { background: var(--c-mid); color: #fff; }
.kyt .kt-jump a em { font-style: normal; font-size: 10.5px; font-weight: normal; opacity: .78; }
.kyt .kt-jump a em::before { content: "("; }
.kyt .kt-jump a em::after  { content: ")"; }







									/* コンロ */


/* 型番から総額までの4手順 */
.kyt .kt-hop {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line);
	counter-reset: hop;
}
.kyt .kt-hop > li {
	position: relative; margin: 0; padding: 11px 13px 12px; background: #fff;
	display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 2px 9px; counter-increment: hop;
}
.kyt .kt-hop > li::before { content: none; }
/* 手順のあいだの三角 */
.kyt .kt-hop > li:not(:last-child)::after {
	content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 0; height: 0;
	border-left: 7px solid #bfcbdb; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
	transform: translateY(-50%);
}
/* アイコンは1行目の左上に置く（縦中央だと見出しと段差が出る） */
.kyt .kt-hop__i {
	grid-row: 1 / 3; align-self: start; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; font-size: 19px; color: var(--c-mid); background: #f1f6fc;
}
.kyt .kt-hop b { font-size: 13px; line-height: 1.35; }
.kyt .kt-hop b::before { content: counter(hop) ". "; color: var(--c-mid); }
.kyt .kt-hop > li > span:last-child { grid-column: 2; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }

/* 施工実績の数字帯 */
.kyt .kt-num {
	list-style: none; margin: 0 0 16px; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line);
}
.kyt .kt-num > li { margin: 0; padding: 10px 13px 11px; background: #fff; display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; gap: 0 7px; }
.kyt .kt-num > li::before { content: none; }
.kyt .kt-num__i { grid-row: 1 / 3; align-self: center; display: flex; width: 22px; height: 22px; font-size: 17px; color: var(--c-mid); }
.kyt .kt-num b { font-size: 25px; font-weight: bold; line-height: 1.15; letter-spacing: -.01em; color: var(--c-acc); }
.kyt .kt-num em { font-style: normal; font-size: 12px; color: var(--c-sub); }
.kyt .kt-num > li > span:last-child { grid-column: 2 / -1; font-size: 11.5px; color: var(--c-sub); line-height: 1.5; }

/* =============================================================================
 * セクションの地色（全部を白にしない）
 *   h2 のデザインには触れないので、h2 より下のブロックにだけ地色を敷く。
 * ========================================================================== */
.kyt .kt-panel   { padding: 14px 16px 16px; background: var(--c-panel); border: 1px solid var(--c-line); }
.kyt .kt-panel-a { padding: 14px 16px 16px; background: #f3f7fd; border: 1px solid #dbe6f5; }
.kyt .kt-panel > :last-child, .kyt .kt-panel-a > :last-child { margin-bottom: 0; }


/* 予算帯の見出しアイコン */
.kyt .kt-bud__i { display: inline-block; width: 1em; height: 1em; margin-right: 5px; vertical-align: -.12em; }
.kyt .kt-bud__i .kt-i { width: 100%; height: 100%; }




/* =============================================================================
 * 交換工事費
 *   旧 gasconro_hiyou（赤い表）と costpanel（3枚の色パネル）は使わない。
 * ========================================================================== */
.kyt .kt-fee { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-fee > li {
	margin: 0; padding: 8px 14px; border-top: 1px solid var(--c-line);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 9.6em; gap: 0 14px; align-items: center;
}
.kyt .kt-fee > li::before { content: none; }
.kyt .kt-fee > li:first-child { border-top: 0; }
.kyt .kt-fee > li:nth-child(2n) { background: #f8fbff; }
.kyt .kt-fee__f, .kyt .kt-fee__t { position: relative; font-size: 13px; line-height: 1.45; }
.kyt .kt-fee__f small, .kyt .kt-fee__t small {
	display: block; font-size: 10.5px; color: var(--c-sub); line-height: 1.4;
}
/* 「いまの設置 → 交換の内容」を示す矢印 */
.kyt .kt-fee__t::before {
	content: ""; position: absolute; left: -11px; top: 68%; width: 6px; height: 6px;
	border-top: 2px solid #b8c5d6; border-right: 2px solid #b8c5d6;
	transform: translateY(-50%) rotate(45deg);
}
.kyt .kt-fee__p { text-align: right; white-space: nowrap; line-height: 1.25; }
.kyt .kt-fee__p b { font-size: 19px; font-weight: bold; color: var(--c-red); }
.kyt .kt-fee__p small { font-size: 12px; color: var(--c-red); margin-left: 1px; }	/* 「円」は数字より小さく */
.kyt .kt-fee__p em { display: block; font-style: normal; font-size: 10.5px; color: var(--c-sub); }

/* 総額の内訳 */
.kyt .kt-sum { border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-sum__h {
	margin: 0; padding: 8px 14px; background: var(--c-acc); color: #fff;
	font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
/* 見出しの帯と3つの枠、枠どうしをくっつけない（2026-09-19 指摘） */
.kyt .kt-sum__g {
	display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 12px; padding: 12px;
}
.kyt .kt-sum__c {
	padding: 11px 14px 13px; background: #fff;
	border: 1px solid var(--c-line); border-radius: 4px;
}
.kyt .kt-sum__c.is-b { background: #f6fafe; }
.kyt .kt-sum__t {
	display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
	font-size: 13.5px; font-weight: bold; line-height: 1.35;
}
.kyt .kt-sum__t > span {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 24px; height: 24px; font-size: 18px; color: var(--c-mid); background: #f1f6fc;
}
.kyt .kt-sum__d { margin: 0; font-size: 12px; line-height: 1.7; color: var(--c-sub); }
.kyt .kt-sum__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
.kyt .kt-sum__l li {
	margin: 0; padding: 0; display: grid; grid-template-columns: 15px 1fr; align-items: center; gap: 6px;
	font-size: 12px; line-height: 1.55;
}
.kyt .kt-sum__l li::before { content: none; }
.kyt .kt-sum__l .kt-i { width: 15px; height: 15px; color: var(--c-mid); }
.kyt .kt-sum__f {
	margin: 0; padding: 9px 14px; border-top: 1px solid var(--c-line);
	background: var(--c-panel); font-size: 12.5px; line-height: 1.7;
}
.kyt .kt-sum__f b { color: var(--c-acc); }

/* 条件のただし書き */
.kyt .kt-cond { list-style: none; margin: 14px 0 0; padding: 0; }
.kyt .kt-cond > li {
	margin: 0; padding: 4px 0 4px 15px; position: relative;
	font-size: 12.5px; line-height: 1.7; color: var(--c-sub);
}
.kyt .kt-cond > li::before {
	content: ""; position: absolute; left: 1px; top: .78em; width: 6px; height: 6px;
	border: 1px solid #8e9bab; background: none;
}

/* =============================================================================
 * ガスペックだけのサービス（.kt-svc）
 *   ★2つを横に並べる。
 *   ★すぐ上の割引特典（.kt-disc）と同じ組み方にしない。
 *     あちらは「見出し→画像」で枠なし。こちらは「画像→見出し」で枠つき。
 *   ★隣り同士の行をそろえる（subgrid）。画像・見出し・本文・注記・リンクの5段。
 * ========================================================================== */
.kyt .kt-svc {
	list-style: none; margin: 0; padding: 0;
	/* ★縦の隙間は0。gap は縦にも効き、subgrid の子が親の gap を受け継ぐので、
	     18pxのままだと5段のあいだに白い帯が入る。 */
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px; row-gap: 0;
	grid-template-rows: repeat(5, auto);
}
.kyt .kt-svc > li {
	margin: 0; padding: 0; background: #fff; border: 1px solid #dbe6f5;
	/* 5段をそろえる。★display はここで指定しない（あとの規則で上書きされる） */
	grid-row: 1 / span 5;
	display: grid; grid-template-rows: subgrid;
}
.kyt .kt-svc > li::before { content: none; }
/* 画像は枠の上端いっぱいに入れる（実寸433×200の比率のまま） */
.kyt .kt-svc img {
	display: block; width: 100%; height: auto; aspect-ratio: 433 / 200;
	object-fit: cover; background: var(--c-panel);
}
.kyt .kt-svc__h {
	display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px;
	margin: 0; padding: 12px 15px 10px; font-size: 15px; font-weight: bold; line-height: 1.4;
}
.kyt .kt-svc__i {
	display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
	font-size: 19px; color: #fff; background: var(--c-acc);
}
.kyt .kt-svc__i .kt-i { width: 17px; height: 17px; }
/* 本文の面を薄く落として、画像・見出しと区切る */
.kyt .kt-svc__b {
	margin: 0; padding: 11px 15px 0; font-size: 12.5px; line-height: 1.8;
	background: var(--c-panel); border-top: 1px solid #e4ecf7;
}
.kyt .kt-svc__b b { color: var(--c-red); }
.kyt .kt-svc__n {
	margin: 0; padding: 8px 15px 0; font-size: 11.5px; line-height: 1.7; color: var(--c-sub);
	background: var(--c-panel);
}
.kyt .kt-svc__m {
	margin: 0; padding: 11px 15px 13px; background: var(--c-panel);
	text-align: right; font-size: 13px;
}

/* =============================================================================
 * 選ばれる理由（.kt-rsn）
 *   ★図は左、文字は右。部材カード（.kt-opt）の「画像が上」とは分ける。
 *   ★隣り同士の行をそろえる（subgrid）。見出しと本文の2段。
 *     3列で折り返すので、何枚目かで開始行を割り当てる。
 * ========================================================================== */
.kyt .kt-rsn {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 14px; row-gap: 14px;
	grid-template-rows: repeat(4, auto);
}
.kyt .kt-rsn > li {
	margin: 0; padding: 12px 14px 13px; background: #fff; border: 1px solid var(--c-line);
	border-top: 3px solid var(--c-acc);
	/* 2段をそろえる。★display はここで指定しない */
	grid-template-rows: subgrid;
	grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px;
}
.kyt .kt-rsn > li::before { content: none; }
.kyt .kt-rsn > li:nth-child(1), .kyt .kt-rsn > li:nth-child(2), .kyt .kt-rsn > li:nth-child(3) { grid-row: 1 / span 2; display: grid; }
.kyt .kt-rsn > li:nth-child(4), .kyt .kt-rsn > li:nth-child(5), .kyt .kt-rsn > li:nth-child(6) { grid-row: 3 / span 2; display: grid; }
/* 想定（6枚）を超えたら行の共有をやめて普通に積む */
.kyt .kt-rsn > li:nth-child(n+7) { grid-row: auto; grid-template-rows: none; display: block; }
/* ★図は li の直下に置き、li を2列にする。
     1列目＝図（見出しと本文の2段にまたがる）／2列目＝見出しと本文。
     図を見出しの中に入れると、本文が2列目の1段目に入って3列に割れる。 */
.kyt .kt-rsn > li > img {
	grid-column: 1; grid-row: 1 / span 2; align-self: start;
	display: block; width: 70px; height: 105px; object-fit: contain;
}
.kyt .kt-rsn__h {
	grid-column: 2; margin: 0; font-size: 14px; font-weight: bold; line-height: 1.45;
}
.kyt .kt-rsn__h b { display: block; }
.kyt .kt-rsn__h b::before {
	content: counter(rsn) ". "; color: var(--c-mid);
}
.kyt .kt-rsn { counter-reset: rsn; }
.kyt .kt-rsn > li { counter-increment: rsn; }
.kyt .kt-rsn__b { margin: 0; grid-column: 2; font-size: 12px; line-height: 1.75; color: var(--c-sub); }
.kyt .kt-rsn__b a { font-weight: bold; }

/* =============================================================================
 * アウトレットのバナー（.kt-ob）
 *   ★キャンペーン帯（.kt-cp）のすぐ下に置くので、同じ組み方にしない。
 *     あちらはアイコン＋文字の帯。こちらは<写真｜文字｜ボタン>の3枠。
 * ========================================================================== */
.kyt .kt-ob {
	display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 0 15px;
	margin: 10px 0 0; padding: 0 15px 0 10px; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--c-line);
	transition: background .15s, border-color .15s;
}
.kyt .kt-ob:hover { background: var(--c-panel); border-color: var(--c-acc); }
.kyt .kt-ob__ph { display: block; width: 150px; height: auto; aspect-ratio: 600 / 400; object-fit: cover; }
.kyt .kt-ob__b { padding: 11px 0 12px; }
.kyt .kt-ob__b em { display: block; font-style: normal; font-size: 11.5px; font-weight: bold; color: var(--c-red); }
.kyt .kt-ob__b b { display: block; margin-top: 2px; font-size: 16px; line-height: 1.35; }
.kyt .kt-ob__b span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--c-sub); }
.kyt .kt-ob__a {
	position: relative; padding: 8px 28px 8px 14px; background: var(--c-amber); color: #fff;
	font-size: 13px; font-weight: bold; white-space: nowrap;
}
.kyt .kt-ob__a::after {
	content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid #fff; border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}
/*	★アウトレットのバナーはPC用の指定が後ろ（ここ）にあるため、
	  上のレスポンシブの塊（@media max-width:767px の中・828行目あたり）に
	  書いてあるスマホ用の指定が負けていた。CSSは同じ強さなら後に書いた
	  ほうが勝つ。画面幅400pxで
	      写真150px ＋ ボタン約190px ＋ すきま15px×2
	  となり、文字の列が約20pxしか残らず1文字ずつ改行していた。
	  同じ内容をここでもう一度置いて勝たせる（上の塊は消さない）。 */

/* =============================================================================
 * 割引特典
 *   旧 tokuten / waribiki（黄色の囲み）は使わない。
 * ========================================================================== */
.kyt .kt-disc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: start; }
.kyt .kt-disc > li { margin: 0; padding: 0; }
.kyt .kt-disc > li::before { content: none; }
.kyt .kt-disc__h {
	display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 9px;
	margin: 0 0 9px; padding: 0 0 7px; font-size: 15px; font-weight: bold; line-height: 1.35;
	border-bottom: 2px solid var(--c-mid);
}
.kyt .kt-disc__i {
	display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
	font-size: 19px; color: var(--c-mid); background: #f1f6fc;
}
.kyt .kt-disc img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 320; object-fit: contain; background: #fff; }
.kyt .kt-disc p { margin: 9px 0 0; font-size: 12.5px; line-height: 1.8; }
.kyt .kt-disc p b { color: var(--c-red); }
.kyt .kt-disc .kt-note { margin-top: 6px; }

/* =============================================================================
 * 10年保証
 *   ★保証は緑（#41b033）で統一する。商材TOP4本とも同じ。
 *     ページのさし色は変えない（ここだけ緑）。
 *   旧 hosyou_mainbox / tokucho（丸い囲み）は使わない。
 * ========================================================================== */
.kyt .kt-grt { border: 1px solid var(--c-line); background: #fff; }
.kyt .kt-grt__h {
	display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 15px;
	background: #41b033; color: #fff; font-size: 17px; font-weight: bold; line-height: 1.3;

	/* ★緑（#41b033）は白文字との明暗比が2.81:1でやや薄い。
	   色は指定のままにして、影で文字の輪郭を立てる。 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}
.kyt .kt-grt__i {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; font-size: 24px; color: #41b033; background: #fff;
}
.kyt .kt-grt__h b { font-size: 27px; color: #fff; margin: 0 1px; letter-spacing: -.01em; }
.kyt .kt-grt__h em {
	font-style: normal; font-size: 11.5px; font-weight: normal;
	color: rgba(255, 255, 255, .82); margin-left: auto; text-align: right; line-height: 1.5;
}
.kyt .kt-grt__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.kyt .kt-grt__l > li { margin: 0; padding: 10px 13px 12px; border-left: 1px solid var(--c-line); }
.kyt .kt-grt__l > li:first-child { border-left: 0; }
.kyt .kt-grt__l > li::before { content: none; }
.kyt .kt-grt__l b { display: block; font-size: 13px; line-height: 1.4; color: #41b033; }
.kyt .kt-grt__l b::before {
	content: ""; display: inline-block; width: 9px; height: 5px; margin-right: 6px; vertical-align: 3px;
	border-left: 2px solid var(--c-amber); border-bottom: 2px solid var(--c-amber); transform: rotate(-45deg);
}
.kyt .kt-grt__l span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }
/* 保証の他社比較（画像ではなく表） */
.kyt .kt-vs { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
.kyt .kt-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kyt .kt-vs th, .kyt .kt-vs td { padding: 8px 6px; border: 1px solid var(--c-line); text-align: center; vertical-align: middle; font-weight:bold;}
.kyt .kt-vs thead th {
	padding: 7px 6px; background: var(--c-panel); border-bottom: 2px solid #41b033;
	font-size: 12.5px; font-weight: bold; color: var(--c-sub); line-height: 1.4;
}
.kyt .kt-vs thead th:first-child { width: 26%; }
/* 自社の列だけ通しで強める */
.kyt .kt-vs thead th.is-us { background: #41b033; border-bottom-color: #41b033; color: #fff; font-size: 14px;  text-shadow: 0 1px 2px rgba(0, 0, 0, .32);}
.kyt .kt-vs tbody th {
	width: 26%; text-align: left; background: #f8fbff;
	font-size: 12.5px; font-weight: bold; line-height: 1.5;
}
.kyt .kt-vs td.is-us { background: #f2f7fd; }
.kyt .kt-vs__m { display: block; font-size: 19px; line-height: 1; }
.kyt .kt-vs .is-o .kt-vs__m { color: var(--c-red); }
.kyt .kt-vs .is-t .kt-vs__m { color: var(--c-amber); }
.kyt .kt-vs .is-x .kt-vs__m { color: #8e9bab; }
.kyt .kt-vs td b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: bold; line-height: 1.4; }
.kyt .kt-vs td.is-us b { font-size: 15px; color: #41b033; }
.kyt .kt-vs td small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--c-sub); line-height: 1.4; }

/* =============================================================================
 * スマートフォン（縦に伸ばさないことを最優先）
 * ========================================================================== */


/* =============================================================================
 * 工事対応エリア
 *   ★他の商材TOP（コンロ・食洗機・乾太くん）と<同じ見た目>にする。
 *     色・見出し・寸法は食洗機TOPの値をそのまま使っている。
 *     ここは商材ごとに変えるところではない（給湯器の配色に寄せない）。（#servicearea / .kt-sa）  2026-09-15 全面作り替え
 *
 *   ・h3.heading_06（水色の帯）は使わない
 *   ・chiiki.css のアコーディオンと共通スクリプトに依存しない（details/summary）
 *   ・**専用ページが無い地域を灰色にしない**。灰色は「対応範囲外」に見えるため。
 *     ページがある地域だけ緑のリンク色で見分けられるようにする。
 *   ・このブロックは /gasconro/index.html だけで使う（id=servicearea は他に無い）
 * ========================================================================== */
.kt-sa {
	--sa-ink:   #1d2b36;
	--sa-sub:   #5a6b78;
	--sa-green: #0065cc;
	--sa-line:  #e1e8ee;
	--sa-panel: #f5f8fa;
	color: var(--sa-ink);
}
.kt-sa .kt-sa__lead {
	margin: 16px 0 20px; padding: 13px 16px;
	background: var(--sa-panel); border-radius: 7px;
	font-size: 14px; line-height: 1.9;
}
.kt-sa .kt-sa__lead b { font-weight: bold; color: var(--sa-green); }

/* エリア（北海道／関東…）。帯にせず、左に緑の印を置いた小見出しにする */
.kt-sa .kt-sa__area { margin: 0 0 22px; }
.kt-sa .kt-sa__areaname {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; padding: 0 0 8px;
	border-bottom: 2px solid var(--sa-line);
	font-size: 16px; font-weight: bold; line-height: 1.4;
}
.kt-sa .kt-sa__areaname::before {
	content: ""; flex: 0 0 auto; width: 5px; height: 19px;
	background: var(--sa-green); border-radius: 3px;
}

/* 都道府県は details で開閉。2列（PC）で並べる */
.kt-sa .kt-sa__prefs {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start;
}
.kt-sa .kt-sa__pref {
	background: #fff; border: 1px solid var(--sa-line); border-radius: 7px; overflow: hidden;
}
.kt-sa .kt-sa__pref[open] { border-color: var(--sa-green); }
.kt-sa .kt-sa__sum {
	display: flex; align-items: center; gap: 10px;
	padding: 13px 40px 13px 15px; position: relative;
	background: #fff; cursor: pointer; list-style: none;
	font-size: 15px; line-height: 1.4;
}
.kt-sa .kt-sa__sum::-webkit-details-marker { display: none; }
.kt-sa .kt-sa__sum:hover { background: #f7fbf6; }
.kt-sa .kt-sa__pref[open] .kt-sa__sum {
	background: #eff6fd; border-bottom: 1px solid var(--sa-line);
}
/* 開閉の矢印はCSSで描く（Font Awesomeに依存しない） */
.kt-sa .kt-sa__sum::after {
	content: ""; position: absolute; right: 17px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid var(--sa-sub); border-bottom: 2px solid var(--sa-sub);
	transform: rotate(45deg); transition: transform .15s;
}
.kt-sa .kt-sa__pref[open] .kt-sa__sum::after {
	margin-top: -2px; transform: rotate(-135deg); border-color: var(--sa-green);
}
.kt-sa .kt-sa__pn { font-weight: bold; }
.kt-sa .kt-sa__cnt {
	padding: 1px 9px; background: var(--sa-panel); border: 1px solid var(--sa-line);
	border-radius: 999px; font-size: 11.5px; color: var(--sa-sub); white-space: nowrap;
}
.kt-sa .kt-sa__body { padding: 13px 15px 15px; }
.kt-sa .kt-sa__all { margin: 0 0 10px; font-size: 13.5px; }
.kt-sa .kt-sa__all a {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--sa-green); font-weight: bold; text-decoration: none;
}
.kt-sa .kt-sa__all a::after {
	content: ""; width: 6px; height: 6px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.kt-sa .kt-sa__all a:hover { text-decoration: underline; }

/* 市区町村。**ページの有無で見た目を変えない**（全部同じ色）。
   色で差を付けると、ページが無い地域が対応範囲外に見えてしまう。 */
.kt-sa .kt-sa__cities,
.kt-sa .kt-sa__wards { margin: 0; padding: 0; list-style: none; }
.kt-sa .kt-sa__cities { display: flex; flex-wrap: wrap; gap: 7px; }
.kt-sa .kt-sa__cities > li { margin: 0; padding: 0; list-style: none; background: none; }
.kt-sa .kt-sa__cities > li::before { content: none; display: none; }
.kt-sa .kt-sa__c {
	display: inline-block; padding: 4px 11px;
	background: #fff; border: 1px solid var(--sa-line); border-radius: 999px;
	font-size: 13px; line-height: 1.6; color: var(--sa-ink);	/* ページ無しも通常の文字色 */
	text-decoration: none; white-space: nowrap;
}
/* リンクの有無で色は変えない。触ったときだけ反応させる */
.kt-sa .kt-sa__c--link:hover { background: var(--sa-green); border-color: var(--sa-green); color: #fff; }

/* 政令指定都市の区は、市のすぐ下に一段下げて並べる */
.kt-sa .kt-sa__wards {
	display: flex; flex-wrap: wrap; gap: 6px;
	width: 100%; margin: 7px 0 3px; padding: 8px 0 0 12px;
	border-left: 2px solid var(--sa-line);
}
.kt-sa .kt-sa__wards > li { margin: 0; padding: 0; list-style: none; background: none; }
.kt-sa .kt-sa__wards > li::before { content: none; display: none; }
.kt-sa .kt-sa__wards .kt-sa__c { padding: 3px 9px; font-size: 12px; }



/* ★区の一覧は ul/li ではなく div で組んでいる。
   サイト共通のJSが「liの直下のul」を開閉するので、ul のままだと
   市区町村を押すと区の一覧が消えてしまう。見た目は同じにそろえる。 */
div.kt-sa__wards { display: flex; flex-wrap: wrap; }

/* =============================================================================
 * カテゴリを横に並べる表（.kt-otbl.is-cat3）のスマホ表示
 *
 *  3つのくくり（家庭用ガス／石油／業務用）を列にしている表は、
 *  既定のきまりでは<項目ごとに縦積み>になる。すると
 *    「型番」→ 家庭用ガス…／石油…／業務用…
 *    「商品代」→ 家庭用ガス…／石油…／業務用…
 *  と、くくりの名前が4回ずつ出るうえ、1つのくくりの金額が縦に離れてしまい
 *  **見比べられない**（2026-10-02 指摘）。
 *
 *  かといって3列を375pxへ押し込むと、字も写真も小さくなりすぎて読めない
 *  （同日 再指摘）。**字の大きさは落とさず、横へスクロールさせる。**
 *  項目名の列は左に貼り付けて、スクロールしても何の行か分かるようにする。
 * ========================================================================== */
.kyt .kt-tblsc__hint { display: none; }


/* =============================================================================
 * 小見出しの折り返し（.kt-h3）
 *
 *  先頭のアイコン（.kt-h3__i）は inline-block なので、見出しが2行になると
 *  **2行目が左端＝アイコンの真下から始まって**、字下げが崩れて見える
 *  （2026-10-02 指摘：「標準基本工事費に入らないもの（追加になりやすい工事）」）。
 *  1行目だけ左へずらして、全部の行を本文の開始位置にそろえる。
 *  ずらす量＝アイコンの幅(1.05em)＋右の余白(0.34em)。
 *  flex や grid にはしない。見出しは<アイコン＋地の文＋添え書きの span>で、
 *  地の文が無名のボックスになって添え書きと分かれてしまうため。
 * ========================================================================== */
.kyt .kt-h3 { padding-left: 1.39em; text-indent: -1.39em; }
.kyt .kt-h3__i { margin-right: .34em; }

/* =============================================================================
 * ★画面幅のきまり（@media）は**このファイルのいちばん後ろ**にまとめる。
 *
 *  部品の指定より前に置くと、優先度が同じなので<あとに書いた部品の指定>が勝ち、
 *  スマホのきまりが効かなくなる。実際、選ばれる理由（.kt-rsn）が
 *  3列のままになるなど、25か所が効いていなかった（2026-10-02 指摘）。
 *  **部品を足すときは、きまりをこの下へ書く。上には書かない。**
 * ========================================================================== */

@media screen and (max-width: 767px) {
	/* 選ばれる理由は1列（図＋文字の組みはそのまま） */
	.kyt .kt-rsn { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 9px; }
	.kyt .kt-rsn > li, .kyt .kt-rsn > li:nth-child(n) {
		grid-row: auto; grid-template-rows: none; padding: 10px 11px 11px;
		display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px;
	}
	.kyt .kt-rsn > li > img { grid-row: 1 / span 2; width: 56px; height: 84px; }
	.kyt .kt-rsn__h { font-size: 13.5px; }
	.kyt .kt-rsn__b { margin-top: 4px; }
	/* アウトレットのバナーは縦に積む */
	.kyt .kt-ob { grid-template-columns: 1fr; gap: 0; padding: 0 0 12px; }
	.kyt .kt-ob__ph { width: 100%; }
	.kyt .kt-ob__b { padding: 10px 12px 0; }
	.kyt .kt-ob__a { margin: 10px 12px 0; text-align: center; }

	/* サービスは縦に積む（横幅が足りない） */
	.kyt .kt-svc { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 12px; }
	.kyt .kt-svc > li { grid-row: auto; grid-template-rows: none; display: block; }
	.kyt .kt-svc__h { padding: 10px 11px 8px; font-size: 14px; }
	.kyt .kt-svc__b { padding: 9px 11px 0; font-size: 12px; }
	.kyt .kt-svc__n { padding: 7px 11px 0; }
	.kyt .kt-svc__m { padding: 9px 11px 11px; }

	/* ▼比較表。縦に積んで、各セルに列名（data-l）を出す（戻したもの） */

	.kyt .kt-hero { padding: 14px 12px 15px; }
	.kyt .kt-hero__t { font-size: 20px; }
	.kyt .kt-hero__t b { font-size: 25px; }
	.kyt .kt-hero__l { font-size: 12.5px; line-height: 1.8; }
	.kyt .kt-hero__mk a, .kyt .kt-hero__mk > span.is-logo { width: 84px; height: 26px; }
	.kyt .kt-hero__mk img { max-height: 14px; }
	.kyt .kt-hero__alt { gap: 6px; }
	.kyt .kt-hero__alt > span { width: 100%; }
	.kyt .kt-hero__alt a { padding: 6px 10px; font-size: 12px; }
	.kyt .kt-hero__alt a em { display: none; }

	.kyt .kt-tfind { padding: 12px 12px 13px 15px; }
	.kyt .kt-tfind__t { font-size: 16.5px; }
	.kyt .kt-tfind__f { grid-template-columns: 1fr; }
	.kyt .kt-tfind__f button { padding: 11px 8px; }

	/* 1列に積むときは行を共有する必要がないので subgrid を解除する */
	.kyt .kt-data { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 18px; }
	.kyt .kt-data > div { grid-row: auto; grid-template-rows: none; display: block; }
	.kyt .kt-data__h { min-height: 0; }
	/* 1列・2列に積むときは行を共有する必要がないので subgrid を解除する */
	.kyt .kt-brand, .kyt .kt-bud, .kyt .kt-abt, .kyt .kt-opt, .kyt .kt-disc { grid-template-rows: auto; }
	.kyt .kt-brand__c, .kyt .kt-bud__c, .kyt .kt-abt > li, .kyt .kt-opt > li, .kyt .kt-disc > li,
	.kyt .kt-brand__c:nth-child(n), .kyt .kt-abt > li:nth-child(n), .kyt .kt-opt > li:nth-child(n) {
		grid-row: auto; grid-template-rows: none; display: block;
	}
	.kyt .kt-brand__c { display: flex; flex-direction: column; }
	.kyt .kt-bud__c { display: flex; flex-direction: column; }
	/* ★比較表の見出し。3列だと幅が足りないので写真を左・文字を右に並べる。
	     （この指定は対応エリアの節を差し替えたときに一緒に消えていた） */
	.kyt .kt-cmph { flex-direction: row; align-items: center; text-align: left; gap: 11px; padding: 9px 8px; }
	.kyt .kt-cmph__ph { width: 58px; height: 58px; margin: 0; flex: none; }
	.kyt .kt-cmph em { align-self: flex-start; }
	.kyt .kt-cmph i { margin-top: 0; padding-top: 4px; }
	.kyt .kt-cmph i small { display: inline; margin-right: 5px; }
	/* 確認の3列は1列に積む */
	.kyt .kt-chk3 { grid-template-columns: 1fr; gap: 9px; }
	.kyt .kt-shot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
	.kyt .kt-shot__n { font-size: 12.5px; margin: 7px 9px 0; }
	.kyt .kt-shot__d { margin: 3px 9px 0; }
	.kyt .kt-str { grid-template-columns: 1fr; }
	.kyt .kt-str > li { padding: 8px 11px 9px; }

	/* ★種類カードは1列に積む。subgrid は列をそろえるための仕掛けなので解除する。
	     （部品を作り直したときにこの指定が消えていて、3列のままだった） */
	.kyt .kt-fuel { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 11px; }
	.kyt .kt-fuel > li { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
	.kyt .kt-fuel__a { margin-top: auto; }
	.kyt .kt-fuel__px b { font-size: 22px; }
	/* 部材は2列 */
	.kyt .kt-opt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kyt .kt-opt__n { font-size: 14px; margin: 8px 10px 0; }
	.kyt .kt-opt__d { margin: 4px 10px 0; font-size: 12px; }
	/* 表のセルが縦に積むと幅が変わるので、写真と文字も積む */
	/* ▼比較表。狭い画面では5列が潰れて読めないので、セルを縦に積み、
	   各セルの頭に列名（data-l）を出す（移植元と同じ作り） */
	
	.kyt .kt-otbl .kt-pr, .kyt .kt-old .kt-pr, .kyt .kt-trg__t .kt-pr { display: block; }
	.kyt .kt-otbl .kt-pr .kt-ph, .kyt .kt-old .kt-pr .kt-ph, .kyt .kt-trg__t .kt-pr .kt-ph { margin: 0 0 6px; }
	/* メーカー比率の一覧 */
	.kyt .kt-share__l > li { grid-template-columns: minmax(0, 1fr) 5.2em 4.6em; font-size: 12px; }
	/* 「給湯器とは」の図は小さくなりすぎないように */
	/* 画面が狭いときは最大2列。1枚のときは1列のまま */
	/* 狭い画面の列数は --figsp（4枚なら2列）。--fig をそのまま使うと
	   4枚が3列になり、最後の1枚だけが次の行に残る。 */
	.kyt .kt-abt__fig { grid-template-columns: repeat(min(var(--figsp, var(--fig, 2)), 3), minmax(0, 1fr)); }

	.kyt .kt-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kyt .kt-kpi > div { padding: 9px 10px 10px; }
	.kyt .kt-kpi > div:nth-child(3) { border-top: 1px solid var(--c-line); }
	.kyt .kt-kpi > div:nth-child(4) { border-top: 1px solid var(--c-line); }
	.kyt .kt-kpi > div:nth-child(3) { border-left: 0; }
	.kyt .kt-kpi dt { font-size: 11px; }
	.kyt .kt-kpi dd b { font-size: 22px; }
	.kyt .kt-kpi dd em { font-size: 12px; }
	.kyt .kt-kpi dd span { font-size: 10.5px; }

	.kyt .kt-toc > dl > div { grid-template-columns: 1fr; gap: 6px; }
	.kyt .kt-toc dd a { font-size: 12px; padding: 4px 9px; }

	.kyt .kt-abt { grid-template-columns: 1fr; }
	.kyt .kt-abt > li { padding: 11px 12px 12px; }
	.kyt .kt-abt__t { font-size: 15.5px; }
	.kyt .kt-abt__d { font-size: 13.5px; }

	/* 横棒はラベルの列を下へ落とす（3列のままだと棒が細くなりすぎる） */
	.kyt .kt-dist > ol > li { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; }
	.kyt .kt-dist__v { text-align: left; }
	.kyt .kt-dist__lg { gap: 3px 14px; font-size: 11.5px; }  

	.kyt .kt-cp { grid-template-columns: 34px 1fr; gap: 0 10px; padding: 10px 12px; }
	.kyt .kt-cp__i { width: 34px; height: 34px; font-size: 20px; }
	.kyt .kt-cp__b h2 { font-size: 16px; }
	.kyt .kt-cp__a { grid-column: 1 / -1; margin-top: 8px; text-align: center; }
}

@media screen and (max-width: 359px) {
	.kyt .kt-kpi { grid-template-columns: 1fr; }
	.kyt .kt-hero__t { font-size: 18px; }
	.kyt .kt-hero__t b { font-size: 22px; }
}

@media screen and (max-width: 767px) {
	.kyt .kt-ob { grid-template-columns: 1fr; gap: 0; padding: 0 0 12px; }
	.kyt .kt-ob__ph { width: 100%; }
	.kyt .kt-ob__b { padding: 10px 12px 0; }
	.kyt .kt-ob__a { margin: 10px 12px 0; text-align: center; }
}

@media screen and (max-width: 767px) {
	.kyt { font-size: 13.5px; line-height: 1.8; }
	.kyt section { margin: 0 0 16px !important; }
	/* スマホは ヘッダー62px ＋ 商材タブ44px */
	article#mainContents section[id],
	#budget-1, #budget-2, #budget-3, #budget-4 { scroll-margin-top: 118px; }
	.kyt .kt-lead { font-size: 14px; margin: 12px 0 14px; }
	.kyt .kt-h3 { font-size: 15px; margin: 20px 0 10px; }

	

	/* 保証の比較表：列を詰めて横に並べたまま読ませる */
	.kyt .kt-vs th, .kyt .kt-vs td { padding: 6px 3px; }
	.kyt .kt-vs thead th { font-size: 10.5px; }
	.kyt .kt-vs thead th:first-child, .kyt .kt-vs tbody th { width: 24%; }
	.kyt .kt-vs thead th.is-us { font-size: 11.5px; }
	.kyt .kt-vs tbody th { font-size: 11px; padding-left: 6px; line-height: 1.4; }
	.kyt .kt-vs__m { font-size: 15px; }
	.kyt .kt-vs td b { font-size: 11.5px; }
	.kyt .kt-vs td.is-us b { font-size: 12.5px; }
	.kyt .kt-vs td small { font-size: 9.5px; }

	
	

	
	

	/* 価格クラス・予算帯へのリンク */
	.kyt .kt-class { grid-template-columns: 1fr; }
	.kyt .kt-class > li { padding: 11px 12px 12px; border-left: 0; border-top: 3px solid var(--k-step, var(--c-acc)); }
	.kyt .kt-class b { font-size: 15px; }
	.kyt .kt-class em { font-size: 22px; }
	.kyt .kt-class b { font-size: 13px; }
	.kyt .kt-jump > span { width: 100%; margin-bottom: 2px; }
	.kyt .kt-jump a { padding: 4px 9px; font-size: 12px; }

	/* 手順・数字帯 */
	.kyt .kt-hop { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
	.kyt .kt-hop > li { padding: 9px 10px 10px; }
	.kyt .kt-hop > li:nth-child(2)::after { content: none; }
	.kyt .kt-num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kyt .kt-num > li { padding: 8px 10px 9px; }
	.kyt .kt-num b { font-size: 21px; }

	.kyt .kt-panel, .kyt .kt-panel-a { padding: 11px 11px 12px; }

	

	/* 工事費：3列だと入らないので価格を下の行へ */
	.kyt .kt-fee > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 5px; gap: 0 16px; padding: 8px 11px; }
	.kyt .kt-fee__f, .kyt .kt-fee__t { font-size: 12px; }
	.kyt .kt-fee__p { grid-column: 1 / -1; text-align: left; padding-top: 7px; }
	.kyt .kt-fee__p b { font-size: 17px; }
	.kyt .kt-fee__p em { display: inline; margin-left: 6px; }

	/* 総額の内訳：縦に積む */
	.kyt .kt-sum__g { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
	.kyt .kt-sum__c { padding: 9px 11px 11px; }
	.kyt .kt-sum__h, .kyt .kt-sum__f { padding: 8px 11px; font-size: 12.5px; }
	.kyt .kt-sum__l { gap: 2px 10px; }
	.kyt .kt-sum__l li { font-size: 11.5px; }

	/* 割引：1列 */
	.kyt .kt-disc { grid-template-columns: 1fr; gap: 18px; }
	.kyt .kt-disc__h { font-size: 14px; grid-template-columns: 24px 1fr; gap: 8px; }
	.kyt .kt-disc__i { width: 24px; height: 24px; font-size: 18px; }
	.kyt .kt-disc p { font-size: 12px; }

	/* 保証：見出しを2行に、特長は2列 */
	.kyt .kt-grt__h { flex-wrap: wrap; padding: 9px 11px; font-size: 15px; }
	.kyt .kt-grt__i { width: 26px; height: 26px; font-size: 20px; }
	.kyt .kt-grt__h b { font-size: 23px; }
	.kyt .kt-grt__h em { width: 100%; margin-left: 0; text-align: left; }
	.kyt .kt-grt__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kyt .kt-grt__l > li { padding: 9px 11px 10px; }
	.kyt .kt-grt__l > li:nth-child(2n+1) { border-left: 0; }
	.kyt .kt-grt__l > li:nth-child(n+3) { border-top: 1px solid var(--c-line); }
	.kyt .kt-grt__l b { font-size: 12.5px; }

	.kyt .kt-cond > li { font-size: 12px; }

	/* メーカー：3枚を横に見せる（縦積みにしない） */
	.kyt .kt-brand { grid-template-columns: 1fr; }
	.kyt .kt-brand__c { display: grid; grid-template-columns: 1fr; }
	.kyt .kt-brand__d { font-size: 12.5px; }
	.kyt .kt-brand__l li { grid-template-columns: 4.6em 1fr; font-size: 11.5px; }

	

	

	

	/* 予算：2列 */
	.kyt .kt-bud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.kyt .kt-bud__h { font-size: 14px; padding: 8px 10px; }
	.kyt .kt-bud__d { display: none; }
	.kyt .kt-bud__l > li { padding: 5px 9px; }
	.kyt .kt-bud__l a { grid-template-columns: 42px 1fr; gap: 7px; }
	.kyt .kt-bud__l img { width: 42px; }
	.kyt .kt-bud__l b { font-size: 12px; }
	.kyt .kt-bud__l small { font-size: 10px; }
	.kyt .kt-bud__m { margin: auto 9px 10px; font-size: 11px; }

	

	/* 目的：アイコン＋軸名を1行目に、説明と該当シリーズをその下へ回す */
	.kyt .kt-tile > li { grid-template-columns: 20px 1fr; gap: 2px 8px; padding: 8px 10px 9px; }
	.kyt .kt-tile__i { width: 20px; height: 20px; font-size: 15px; }
	/* スマートフォンは2列に組み替えるので、見出しの折り返しを戻す（はみ出すため） */
	.kyt .kt-tile__h > span:last-child { font-size: 12.5px; white-space: normal; }
	.kyt .kt-tile > li > p:not(.kt-tile__h) { grid-column: 2; font-size: 11.5px; }
	.kyt .kt-tile__l { grid-column: 2; }
	.kyt .kt-data { grid-template-columns: 1fr; gap: 16px; }
	.kyt .kt-bar > li { grid-template-columns: 8em 1fr 5em; gap: 7px; }
	.kyt .kt-bar__l { font-size: 11.5px; }

	/* 事例：2列（1列だと長すぎる） */
	.kyt .kt-case { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.kyt .kt-case__b { padding: 7px 8px 9px; }
	.kyt .kt-case__m { font-size: 10px; }
	.kyt .kt-case__r { font-size: 11.5px; }
	.kyt .kt-case__r dt { min-width: 3em; font-size: 10px; }

	.kyt .kt-voice { grid-template-columns: 1fr; }
	/* 8ステップ：スマホは1列。レールは最後の1件だけ消す */
	.kyt .kt-step { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; gap: 0; }
	.kyt .kt-step > li { padding: 0 0 13px 40px; }
	.kyt .kt-step > li::before { left: 13px; top: 29px; }
	.kyt .kt-step > li:nth-child(4)::before { content: ""; }
	.kyt .kt-step > li:nth-child(7)::before { content: none; }
	.kyt .kt-step__n { width: 28px; height: 28px; font-size: 13px; }
	.kyt .kt-step b { font-size: 13.5px; }
	.kyt .kt-step__d { font-size: 11.5px; }
	.kyt .kt-rel { grid-template-columns: 1fr; gap: 6px; }
	.kyt .kt-rel.is-mk { grid-template-columns: 1fr; }
	.kyt .kt-rel a { grid-template-columns: 30px 1fr; gap: 9px; padding: 9px 22px 10px 9px; }
	.kyt .kt-rel__i { width: 30px; height: 30px; font-size: 18px; }
	.kyt .kt-rel__logo { width: 30px; }
	.kyt .kt-rel b { font-size: 13px; }
	.kyt .kt-cta { grid-template-columns: 1fr; }

	/* 旧型番：1件＝1行に圧縮 */
	.kyt .kt-old, .kyt .kt-old thead, .kyt .kt-old tbody,
	.kyt .kt-old tr, .kyt .kt-old th, .kyt .kt-old td { display: block; width: auto; }
	.kyt .kt-old thead { display: none; }
	/* ★1件＝<交換前>と<交換先>を横に並べる。縦に積むと別々の機種に見えるうえ、
	   1件がむだに高くなって一覧として読めない（2026-10-02 指摘）。
	   左＝交換前／まん中＝矢印／右＝いちばん多い交換先。 */
	.kyt .kt-old tbody tr { padding: 9px 6px; border-bottom: 1px solid var(--c-line);
		display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
		column-gap: 4px; align-items: start; }
	.kyt .kt-old tbody tr::before {
		content: ""; grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: center;
		width: 0; height: 0; border-left: 7px solid #9fb0c2;
		border-top: 5px solid transparent; border-bottom: 5px solid transparent;
	}
	.kyt .kt-old th, .kyt .kt-old td { padding: 0; border: 0; background: none !important; display: inline; }
	/* ★行見出しはメーカー＋型番の2行になるので、インラインではなくブロックで置く */
	.kyt .kt-old tbody th { display: block; font-size: 13.5px; grid-column: 1; grid-row: 1; }
	.kyt .kt-old tbody th b { font-size: 14.5px; }
	/* 件数と種類は交換前の下に小さく。横幅が半分なので2行に分ける
	   （「／」でつなぐと折り返して読みにくい） */
	.kyt .kt-old td:nth-of-type(1) { grid-column: 1; grid-row: 2; }
	.kyt .kt-old td:nth-of-type(2) { grid-column: 1; grid-row: 3; }
	/* ★<交換前の機種> と <交換先> が続けて並ぶだけだと、関係が分からず
	   別々の機種が2つ出ているように見える（2026-10-02 指摘）。
	   交換先の前に区切りと列名（↓ いちばん多い交換先）を出す。 */
	/* 右＝交換先。矢印で関係が分かるので、見出しは列名だけ出す */
	.kyt .kt-old td:last-child { display: block; grid-column: 3; grid-row: 1 / span 3;
		margin: 0; padding: 0; font-size: 12px; }
	.kyt .kt-old td:last-child::before {
		content: attr(data-l); display: block; margin-bottom: 3px;
		font-size: 10.5px; font-weight: bold; color: var(--c-sub);
	}
	/* 交換先は<写真を左・文字を右>。縦に積むと1件がむだに高くなる */
	.kyt .kt-old td:last-child .kt-pr { display: flex; align-items: flex-start; gap: 6px; }
	.kyt .kt-old td:last-child .kt-pr .kt-ph { margin: 0; width: 40px; height: 40px; flex: none; }
	.kyt .kt-old td:last-child .kt-pr__x { min-width: 0; }
	/* 「34件」が型番のうしろで割れないようにする */
	.kyt .kt-old td:last-child em { white-space: nowrap; }
	/* 表を display:block にしているので caption の幅が決まらず、1文字ずつ折り返して
	   いた。すぐ上の見出しと同じ文言なので、画面には出さず読み上げ用に残す。 */
	.kyt .kt-old__cap {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	.kyt .kt-faq summary { padding: 10px 32px 10px 30px; font-size: 13.5px; }
	.kyt .kt-faq__a { padding: 0 12px 11px 30px; }
	.kyt .kt-faq__a p { font-size: 12.5px; }
}

@media screen and (max-width: 640px) {
	/* ▼比較表。狭い画面では列が潰れて読めないので、セルを縦に積み、
	   各セルの頭に列名（data-l）を出す（移植元と同じ作り）。
	   点線はこのページでは使わないので、区切りは実線にしてある。 */
	/* 比較表は項目ごとに積み上げる（横スクロールさせない） */ .kyt .kt-otbl { border: 0; table-layout: auto; }
	.kyt .kt-otbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kyt .kt-otbl tbody, .kyt .kt-otbl tr, .kyt .kt-otbl th, .kyt .kt-otbl td { display: block; width: auto; }
	.kyt .kt-otbl tr { margin-bottom: 10px; background: #fff; overflow: hidden; border: 1px solid var(--c-line); border-radius: 4px; }
	/* ★積み上げたときの字の大小。もとは列名（data-l）が16pxの太字で、
	   肝心の<項目名>と<中身>より大きく見えていた。読む順は
	   項目名 → 中身 なので、列名はいちばん小さくする（2026-10-02 指摘）。 */
	.kyt .kt-otbl tbody th { width: auto; border: 0; border-bottom: 1px solid var(--c-line);
		padding: 9px 11px; background: #eef1f4; font-size: 14.5px; font-weight: bold; color: var(--c-ink); }
	.kyt .kt-otbl td { border: 0; padding: 9px 11px; font-size: 13px; line-height: 1.75; }
	.kyt .kt-otbl td + td { border-top: 1px solid var(--c-line); }
	.kyt .kt-otbl td::before { content: attr(data-l); display: block; margin-bottom: 1px;
		font-size: 11px; font-weight: bold; color: var(--c-sub); line-height: 1.5; }

	.kt-sa .kt-sa__lead { padding: 11px 13px; font-size: 13.5px; line-height: 1.85; }
	.kt-sa .kt-sa__areaname { font-size: 15px; }
	.kt-sa .kt-sa__prefs { grid-template-columns: 1fr; gap: 8px; }
	.kt-sa .kt-sa__sum { padding: 12px 36px 12px 13px; font-size: 14.5px; }
	.kt-sa .kt-sa__body { padding: 12px 13px 13px; }
	.kt-sa .kt-sa__c { padding: 4px 10px; font-size: 12.5px; }
}

@media screen and (max-width: 640px) {
	.kyt .kt-tblsc { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.kyt .kt-tblsc__hint { display: block; margin: 0 0 4px; font-size: 11.5px; color: var(--c-sub); }

	/* 表そのもの。横幅は<読める大きさ>から決める（3列×約165px＋項目名の列）。 */
	.kyt .kt-otbl.is-cat3 { display: table; table-layout: fixed; width: 600px; min-width: 600px;
		border: 1px solid var(--c-line); font-size: 13px; line-height: 1.6; }
	.kyt .kt-otbl.is-cat3 thead { display: table-header-group; position: static;
		width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
	.kyt .kt-otbl.is-cat3 tbody { display: table-row-group; }
	.kyt .kt-otbl.is-cat3 tr { display: table-row; margin: 0; border: 0; border-radius: 0; }
	.kyt .kt-otbl.is-cat3 th,
	.kyt .kt-otbl.is-cat3 td { display: table-cell; width: auto;
		border: 1px solid var(--c-line); padding: 7px 8px; }
	/* 列名が見えているので、セル頭の列名（data-l）は要らない */
	.kyt .kt-otbl.is-cat3 td::before { content: none; }
	.kyt .kt-otbl.is-cat3 thead th { padding: 6px 6px; font-size: 12.5px; text-align: center; }

	/* 項目名の列は左に貼り付ける。横へスクロールしても何の行か分かるように。 */
	.kyt .kt-otbl.is-cat3 thead th:first-child,
	.kyt .kt-otbl.is-cat3 tbody th { width: 7.4em; padding: 7px 8px; text-align: left;
		font-size: 12px; background: var(--c-panel);
		position: sticky; left: 0; z-index: 1; }
	.kyt .kt-otbl.is-cat3 thead th:first-child { z-index: 2; }
	.kyt .kt-otbl.is-cat3 tbody th small { display: block; font-size: 10.5px; }

	/* 商品写真。小さくしすぎない */
	.kyt .kt-otbl.is-cat3 .kt-pr { display: block; }
	.kyt .kt-otbl.is-cat3 .kt-ph { width: 64px; height: 64px; margin: 0 auto 4px; }
	.kyt .kt-otbl.is-cat3 .kt-pr__x { display: block; text-align: center; overflow-wrap: anywhere; }

	/* 比較表の見出し（写真＋名前＋最安値）は縦に積む */
	.kyt .kt-otbl.is-cat3 .kt-cmph { flex-direction: column; align-items: center;
		text-align: center; gap: 5px; padding: 8px 6px; }
	.kyt .kt-otbl.is-cat3 .kt-cmph__ph { width: 64px; height: 64px; margin: 0; }
	.kyt .kt-otbl.is-cat3 .kt-cmph b { font-size: 13px; line-height: 1.35; }
	.kyt .kt-otbl.is-cat3 .kt-cmph em { font-size: 11px; line-height: 1.35; }
	/* 「工事費込み総額」と金額は行を分ける（横に並べると列からはみ出す） */
	.kyt .kt-otbl.is-cat3 .kt-cmph i { display: block; padding-top: 2px; font-size: 11px; }
	.kyt .kt-otbl.is-cat3 .kt-cmph i small { display: block; margin-right: 0; font-size: 10px; }
	.kyt .kt-otbl.is-cat3 .kt-cmph i b { font-size: 14px; }
	.kyt .kt-otbl.is-cat3 .kt-lg img { height: 12px; }
}