@charset "utf-8";
/* =============================================================================
 * ガス衣類乾燥機「乾太くん」 カテゴリTOP 専用UI
 * /clothesdryer/css/clothesdryer_top.css
 *
 *  このページ（/clothesdryer/）専用。すべて .ktt 配下にスコープしてあるので、
 *  各シリーズページ（.dw2-* / css/series.css）には影響しない。
 *  h2.heading_01 は既存の共通デザインをそのまま使うため、ここでは一切触らない。
 *
 *  【設計の考え方】
 *   ・食洗機TOP（/dishwasher/css/dishwasher_top.css）を土台にしている。
 *     同じサイトに見えるように、寸法・余白・文字サイズ・角丸はそのままにし、
 *     クラス名だけ .ktt / .kt- に付け替えた。食洗機側には手を入れていない。
 *     この流儀（商材ごとに1本ずつコピーを持つ）はサイト全体で統一している。
 *   ・カテゴリTOPなので「同じカードを並べる」ことをやめ、情報の種類ごとに
 *     見せ方を変える（表彰台／密な一覧／チャート／値札／マトリクス／
 *     アイコンタイル／数字バンド／写真グリッド／検索パネル）。
 *   ・乾太くんはシリーズページと同じ**グレーベース**にそろえる。
 *     濃グレー #3a4046 ＋ 中間 #6b7178 ＋ 差し色オレンジ #e8912d の3本立て。
 *   ・乾太くんだけの節（ガスコンセント増設／置ける場所／排湿の経路／
 *     新規設置と交換／年別の実績）はこのファイルの末尾にまとめてある。
 * ========================================================================== */

.ktt {
	--c-ink:    #22303a;
	--c-sub:    #5f686e;
	--c-navy:   #3a4046;
	--c-mid:    #6b7178;
	--c-rail:   #ebedee;
	--c-line:   #e3e6e8;
	--c-panel:  #f5f6f7;
	--c-amber:  #e8912d;
	--c-red:    #d7000f;
	color: var(--c-ink);
	font-size: 14px;
	line-height: 1.85;
}
/* タイプの色。--t-* は conic-gradient から直接参照するので .ktt に置く。
   デラックス／スタンダード／業務用に優劣はない。色は見分けるためだけに変えている。
   どの色が上ということが無いよう明度をそろえ、必ずタイプ名を併記する。 */
.ktt { --t-dx: #4f5459; --t-st: #5b7d8f; --t-bu: #7d6a52; }
.ktt .is-dx { --c-mk: var(--t-dx); }
.ktt .is-st { --c-mk: var(--t-st); }
.ktt .is-bu { --c-mk: var(--t-bu); }

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

/* -----------------------------------------------------------------------------
 * 飛んだ先に出す「↑ 戻る」
 *   メーカーTOPは h2 の中に入れているが、このページは見出しの文字と重なるので
 *   h2 の「直後」に独立した行として出す。JSが動的に差し込む。
 * -------------------------------------------------------------------------- */
.ktt .kt-back { margin: 6px 0 10px; text-align: right; line-height: 1; }
.ktt .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 #0065cc; color: #0065cc;
	font-family: inherit; font-size: 12px; font-weight: bold; line-height: 1.5;
	white-space: nowrap; transition: background .2s, color .2s;
}
.ktt .kt-back__b:hover, .ktt .kt-back__b:focus-visible { background: #0065cc; color: #fff; }
.ktt .kt-back__b span { font-size: 13px; }

/* -----------------------------------------------------------------------------
 * ページ内リンクの着地位置
 *   上部のヘッダーが position:fixed（PC 136px / SP 62+44=106px）なので、
 *   そのまま飛ぶと見出しがヘッダーの裏に入って見えない。
 *   飛び先に余白を持たせて、見出しが隠れないようにする。
 *   このCSSは /clothesdryer/ でしか読み込まないので ID 直指定でよい。
 * -------------------------------------------------------------------------- */
article#mainContents section[id],
/* 節のidはすべて section[id] で拾えるので、個別idの追加指定は要らない */

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

.ktt .kt-lead { margin: 14px 0 16px; font-size: 15px; line-height: 1.9; }
.ktt .kt-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--c-sub); }

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

/* -----------------------------------------------------------------------------
 * アイコン
 *   gt_icon() が吐くインラインSVG。大きさは親の font-size に追随させ、
 *   色は currentColor のまま。アイコンライブラリは読み込まない。
 * -------------------------------------------------------------------------- */
.ktt .kt-i { display: block; width: 1.2em; height: 1.2em; flex: none; }
.ktt .kt-h3__i, .ktt .kt-data__i, .ktt .kt-find__i, .ktt .kt-two__i {
	display: inline-block; width: 1.05em; height: 1.05em; margin-right: 6px;
	vertical-align: -.16em; color: var(--c-mid);
}
.ktt .kt-find__i { color: rgba(255, 255, 255, .8); }
.ktt .kt-h3__i .kt-i, .ktt .kt-data__i .kt-i,
.ktt .kt-find__i .kt-i, .ktt .kt-two__i .kt-i { width: 100%; height: 100%; }

/* -----------------------------------------------------------------------------
 * 導入文（メイン画像の直下）
 *   共通の .syozaitext（灰色のベタ箱）は9,000ページ超で共有しているので触らない。
 *   このページだけこちらに差し替える。
 * -------------------------------------------------------------------------- */
.ktt .kt-intro { margin: 10px 0 0; padding: 13px 16px 14px; background: #f6f7f8; }
.ktt .kt-intro__c { margin: 0 0 6px; font-size: 17px; font-weight: bold; line-height: 1.55; }
.ktt .kt-intro__c b { color: #0065cc; }
.ktt .kt-intro__d { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--c-sub); }
.ktt .kt-intro__d b { color: var(--c-ink); }
/* 下の実績サマリと数字がかぶらないよう、ここは「選ばれる理由」だけ置く */
.ktt .kt-intro__p {
	list-style: none; margin: 11px 0 0; padding: 10px 0 0; border-top: 1px solid #e0e3e5;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px;
}
.ktt .kt-intro__p > li {
	position: relative; margin: 0; padding: 0 0 0 26px;
	font-size: 11.5px; line-height: 1.6; color: var(--c-sub);
}
.ktt .kt-intro__p > li::before { content: none; }
.ktt .kt-intro__p .kt-i {
    /* position: absolute; */
    left: 0;
    top: 1px;
    width: 1.2em;
    height: 1.2em;
    color: #0065cc;
    font-size: 45px;
    font-weight: bold;
    border-radius: 50%;
    background: #FFF;
    padding: 6px;
    text-align: center;
    margin: 13px auto;
}
.ktt .kt-intro__p b {
    display: block;
    font-size: 18px;
    color: var(--c-ink);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
 * 選び方ナビ（ファーストビュー直下）
 *   「上から順に読む」前提をやめ、目的別の入口をここに集める。
 *   1項目＝アイコン＋短いタイトル＋1行。大きなブロックにはしない。
 * -------------------------------------------------------------------------- */
.ktt .kt-nav { margin: 14px 0 0; padding: 12px 14px 14px; background: var(--c-panel); border: 1px solid var(--c-line); }
.ktt .kt-nav__h {
	margin: 0 0 9px; padding: 0 0 7px; font-size: 15px; font-weight: bold; line-height: 1.4;
	border-bottom: 2px solid #0065cc;
}
.ktt .kt-nav__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ktt .kt-nav__l > li { margin: 0; padding: 0; }
.ktt .kt-nav__l > li::before { content: none; }
.ktt .kt-nav__l a {
	position: relative; height: 100%; box-sizing: border-box; display: grid;
	grid-template-columns: 30px 1fr; align-items: center; gap: 10px;
	padding: 9px 26px 9px 11px; background: #fff; border: 1px solid var(--c-line);
	text-decoration: none; color: inherit;
}
.ktt .kt-nav__l a::after {
	content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid var(--c-mid); border-right: 2px solid var(--c-mid);
	transform: translateY(-50%) rotate(45deg);
}
.ktt .kt-nav__l a:hover { border-color: var(--c-mid); background: #fafbfb; }
.ktt .kt-nav__i {
	display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	font-size: 21px; color: var(--c-mid); background: #eef0f1;
}
.ktt .kt-nav__x { min-width: 0; }
.ktt .kt-nav__x b { display: block; font-size: 14px; font-weight: bold; line-height: 1.35; white-space: nowrap; }
.ktt .kt-nav__x small { display: block; font-size: 11px; color: var(--c-sub); line-height: 1.5; }
/* データベースから入る実データ（1位のシリーズ・最安・件数など） */
.ktt .kt-nav__x em {
	display: block; margin-top: 1px; font-style: normal; font-size: 10.5px; font-weight: bold;
	color: var(--c-mid); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ナビの中に置く型番検索（サイドの「ガスコンロ検索」と同じ送信先）
   地はベタ塗りをやめ、45度のごく薄い斜線を重ねて質感を出す。
   影は使わず、上端の細いハイライト1本だけで面を立てる。 */
.ktt .kt-nav__f {
	position: relative; overflow: hidden;
	margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
	padding: 11px 13px; border-radius: 4px;
	background:
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, .055) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
		linear-gradient(180deg, #4f92d2 0%, #3a74ad 100%);
}
.ktt .kt-nav__f::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
	background: rgba(255, 255, 255, .3);
}
.ktt .kt-nav__f label {
	display: flex; align-items: center; gap: 7px; margin: 0;
	font-size: 12.5px; font-weight: bold; color: #fff; white-space: nowrap; letter-spacing: .02em;
}
.ktt .kt-nav__f label .kt-i { width: 1.25em; height: 1.25em; color: rgba(255, 255, 255, .92); }
.ktt .kt-nav__f input[type="search"] {
	width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 13.5px; font-family: inherit;
	border: 0; border-radius: 3px; background: #fff; color: var(--c-ink);
	outline: 2px solid rgba(255, 255, 255, 0); outline-offset: 0; transition: outline-color .15s;
}
.ktt .kt-nav__f input[type="search"]::placeholder { color: #a2a8ad; }
.ktt .kt-nav__f input[type="search"]:focus { outline-color: rgba(255, 255, 255, .85); }
.ktt .kt-nav__f button {
	padding: 9px 24px; font-size: 13.5px; font-family: inherit; font-weight: bold; color: #fff; cursor: pointer;
	border: 0; border-radius: 3px; white-space: nowrap; letter-spacing: .04em;
	background:
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, .10) 0 5px, rgba(255, 255, 255, 0) 5px 10px),
		linear-gradient(180deg, #f0a03c 0%, #e07d15 100%);
	transition: filter .2s;
}
.ktt .kt-nav__f button:hover { filter: brightness(1.07); }

/* タイプの極小ラベル */
.ktt .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;
}

/* テキストリンクボタン（控えめ・矢印つき） */
.ktt .kt-more { margin: 14px 0 0; text-align: right; font-size: 13.5px; }
.ktt .kt-more a { position: relative; padding-right: 16px; font-weight: bold; text-decoration: none; }
.ktt .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);
}

/* =============================================================================
 * 見出し直下のサマリ帯（数字だけの横並び）
 * ========================================================================== */
.ktt .kt-kpi {
	margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	background: #29abe9; color: #fff;
}
.ktt .kt-kpi > div {
	padding: 11px 13px 12px; border-left: 1px solid rgba(255, 255, 255, .16);
	display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 0 10px;
}
.ktt .kt-kpi > div:first-child { border-left: 0; }
.ktt .kt-kpi__i {
	grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; font-size: 22px; color: #0065cc; background: #fff;
}
.ktt .kt-kpi dt { font-size: 11.5px; color: rgba(255, 255, 255, .82); line-height: 1.5; white-space: nowrap; }
.ktt .kt-kpi dd { margin: 0; line-height: 1.2; }
.ktt .kt-kpi b { font-size: 25px; font-weight: bold; letter-spacing: -.01em; }
.ktt .kt-kpi em { font-style: normal; font-size: 12px; margin-left: 2px; }	/* 単位は数字より小さく */
/* dd の中の span だけに当てる。gt-kpi__i も span なので、
   .kt-kpi span と書くとアイコンの大きさと色まで奪われる。 */
.ktt .kt-kpi dd span { display: block; margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, .7); line-height: 1.45; }

/* =============================================================================
 * 目次（グループ単位・1行に収める）
 * ========================================================================== */
.ktt .kt-toc { margin: 0 0 18px; border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-toc__h {
	margin: 0; padding: 7px 13px; background: var(--c-panel); border-bottom: 1px solid var(--c-line);
	font-size: 12px; font-weight: bold; color: var(--c-sub); letter-spacing: .02em;
}
.ktt .kt-toc dl { margin: 0; }
/* 1グループ＝1行。見出しを左に固定して、アンカーは右へ流す */
.ktt .kt-toc dl > div {
	display: grid; grid-template-columns: 8.6em 1fr; align-items: start; gap: 0 12px;
	padding: 6px 13px; border-top: 1px solid var(--c-line);
}
.ktt .kt-toc dl > div:first-child { border-top: 0; }
.ktt .kt-toc dt {
	display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: bold; color: #0065cc; line-height: 1.9;
}
.ktt .kt-toc__i { display: flex; width: 18px; height: 18px; color: var(--c-mid); }
.ktt .kt-toc__i .kt-i { width: 100%; height: 100%; }
.ktt .kt-toc dd { margin: 0; }
.ktt .kt-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 5px; }
.ktt .kt-toc li { margin: 0; padding: 0; }
.ktt .kt-toc li::before { content: none; }
.ktt .kt-toc a {
	display: inline-block; padding: 2px 9px; font-size: 12px; line-height: 1.6;
	text-decoration: none; color: var(--c-ink); background: var(--c-panel); border: 1px solid var(--c-line);
}
.ktt .kt-toc a:hover { background: var(--c-mid); border-color: var(--c-mid); color: #fff; }

/* =============================================================================
 * ビルトインガスコンロとは（2列の定義）
 * ========================================================================== */
.ktt .kt-def { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ktt .kt-def > div { padding: 9px 0; border-top: 1px solid var(--c-line); }
.ktt .kt-def dt { font-size: 12.5px; font-weight: bold; color: var(--c-mid); line-height: 1.6; }
.ktt .kt-def dd { margin: 2px 0 0; font-size: 13px; line-height: 1.8; }

/* =============================================================================
 * タイプのパネル（デラックス／スタンダード／業務用）
 * ========================================================================== */
.ktt .kt-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ktt .kt-brand__c { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-top: 4px solid var(--c-mk); background: #fff; }
.ktt .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); }
.ktt .kt-brand__h b { font-size: 17px; line-height: 1.3; white-space: nowrap; }
.ktt .kt-brand__h small { display: block; font-size: 11px; color: var(--c-sub); font-weight: normal; white-space: nowrap; }
/* 共通CSSの article#mainContents img { height:auto } のほうが詳細度が高いので上書きする */
.ktt .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 で決める。 */
.ktt .kt-brand__mk { display: block; margin-left: auto; }
.ktt .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);
}
.ktt .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); }
.ktt .kt-brand__d { margin: 10px 13px 0; font-size: 13px; line-height: 1.8; }
.ktt .kt-brand__l { list-style: none; margin: 10px 13px 0; padding: 0; }
.ktt .kt-brand__l li { margin: 0; padding: 5px 0; display: grid; grid-template-columns: 5.2em 1fr; gap: 6px; font-size: 12px; line-height: 1.6; border-top: 1px dotted var(--c-line); }
.ktt .kt-brand__l li::before { content: none; }
.ktt .kt-brand__l b { color: var(--c-sub); }
.ktt .kt-brand__s { margin: 9px 13px 0; font-size: 12px; line-height: 1.65; color: var(--c-sub); }
.ktt .kt-brand__s b { color: var(--c-ink); }
.ktt .kt-brand__p { margin: 9px 13px 0; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 12px; }
.ktt .kt-brand__p b { font-size: 19px; color: var(--c-red); font-weight: bold; }
/* 並べたブロックの末尾ボタンは下端でそろえる（高さが違っても位置を合わせる） */
.ktt .kt-brand__a { margin: 10px 13px 13px; margin-top: auto; padding-top: 10px; }
.ktt .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;
}
.ktt .kt-brand__a a:hover { opacity: .88; }

/* タイプ比率（細い1本の帯） */
.ktt .kt-share { margin: 16px 0 0; }
.ktt .kt-share__h { margin: 0 0 6px; font-size: 12.5px; color: var(--c-sub); }
.ktt .kt-share__b { display: flex; height: 24px; }
.ktt .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;
}
.ktt .kt-share__l { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; }
.ktt .kt-share__l li { margin: 0; padding: 0 0 0 14px; position: relative; }
.ktt .kt-share__l li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--c-mk); }
.ktt .kt-share__l b { margin-left: 5px; }
.ktt .kt-share__l em { font-style: normal; margin-left: 4px; color: var(--c-sub); font-size: 11.5px; }

/* =============================================================================
 * 人気ランキング｜1〜3位は表彰台、4〜10位は密な一覧
 * ========================================================================== */
.ktt .kt-pod { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ktt .kt-pod > li { position: relative; margin: 0; padding: 0 0 12px; border: 1px solid var(--c-line); background: #fff; display: flex; flex-direction: column; }
.ktt .kt-pod > li::before { content: none; }
/* 1位はゴールド（2位＝シルバー／3位＝ブロンズと並びをそろえる） */
.ktt .kt-pod > li.is-1 { border-color: #c9a227; }
.ktt .kt-pod__n {
	position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 12px 4px;
	background: #949a9f; color: #fff; font-size: 12px; font-weight: bold; line-height: 1.3;
}
.ktt .kt-pod__n b { font-size: 17px; margin-right: 2px; }
.ktt .kt-pod > li.is-1 .kt-pod__n {
	background: linear-gradient(160deg, #e6c964 0%, #c9a227 48%, #a17d16 100%);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* 王冠は1位のバッジの中だけ */
.ktt .kt-pod__crown { display: inline-flex; width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.ktt .kt-pod__crown .kt-i { width: 100%; height: 100%; }
.ktt .kt-pod > li.is-2 .kt-pod__n { background: #9aa0a5; }
.ktt .kt-pod > li.is-3 .kt-pod__n { background: #b08152; }
.ktt .kt-pod__ph { display: block; margin: 0; background: #fff; }
.ktt .kt-pod__ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; padding: 6%;}
.ktt .kt-pod__b { padding: 0 13px; }
.ktt .kt-pod__logo { display: block; width: auto; margin: 0 0 5px; }
.ktt .kt-pod__t { margin: 0; font-size: 18px; font-weight: bold; line-height: 1.35; }
.ktt .kt-pod__t a { text-decoration: none; }
.ktt .kt-pod__t em { display: block; font-style: normal; font-size: 11.5px; font-weight: normal; color: var(--c-sub); }
.ktt .kt-pod__g { margin: 8px 0 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.ktt .kt-pod__bar { height: 8px; background: var(--c-rail); }
.ktt .kt-pod__bar i { display: block; height: 100%; background: var(--c-mid); }
.ktt .kt-pod > li.is-1 .kt-pod__bar i { background: #c9a227; }
.ktt .kt-pod__v { font-size: 12px; color: var(--c-sub); white-space: nowrap; }
.ktt .kt-pod__v b { color: var(--c-ink); font-size: 14px; }
.ktt .kt-pod__p { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 11px; color: var(--c-sub); line-height: 1.4; }
.ktt .kt-pod__p b { display: block; font-size: 20px; color: var(--c-red); line-height: 1.25; }

.ktt .kt-rest { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.ktt .kt-rest > li {
	margin: 0; padding: 7px 8px; border-bottom: 1px solid var(--c-line);
	display: grid; grid-template-columns: 34px 54px minmax(11em, 1.5fr) 1.1fr 8.6em; align-items: center; gap: 10px;
}
.ktt .kt-rest > li::before { content: none; }
.ktt .kt-rest > li:nth-child(2n) { background: #fafbfb; }
.ktt .kt-rest__n { text-align: center; font-size: 13px; font-weight: bold; color: var(--c-sub); }
.ktt .kt-rest__ph { display: block; }
.ktt .kt-rest__ph img { display: block; width: 100%; height: auto; object-fit: contain; }
.ktt .kt-rest__t { font-size: 14px; font-weight: bold; line-height: 1.4; }
.ktt .kt-rest__t a { text-decoration: none; }
.ktt .kt-rest__t img { display: inline-block; width: auto; margin-right: 7px; vertical-align: -5px; }
.ktt .kt-rest__t em { display: block; font-style: normal; font-size: 11px; font-weight: normal; color: var(--c-sub); }
.ktt .kt-rest__g { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.ktt .kt-rest__bar { height: 7px; background: var(--c-rail); }
.ktt .kt-rest__bar i { display: block; height: 100%; background: var(--c-mid); }
.ktt .kt-rest__v { font-size: 11.5px; color: var(--c-sub); white-space: nowrap; }
.ktt .kt-rest__p { text-align: right; font-size: 14.5px; font-weight: bold; color: var(--c-red); white-space: nowrap; line-height: 1.35; }
.ktt .kt-rest__p span { display: block; font-size: 10.5px; font-weight: normal; color: var(--c-sub); }

/* =============================================================================
 * 価格帯ごとの構成比（ドーナツ）※乾太くんTOPでは未使用
 *   レンジチャートの「幅」は円にできないので、こちらは品番の構成比だけを出す。
 *   1枚3切れに抑える。切れ数が増えると円は読めなくなる。
 * ========================================================================== */
.ktt .kt-mix {
	list-style: none; margin: 0 0 14px; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
	background: var(--c-line); border: 1px solid var(--c-line);
}
.ktt .kt-mix > li { margin: 0; padding: 10px 13px 12px; background: #fff; }
.ktt .kt-mix > li::before { content: none; }
.ktt .kt-mix__h {
	margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid var(--c-line);
	font-size: 14px; font-weight: bold; line-height: 1.35;
}
.ktt .kt-mix__h span { display: block; font-size: 11px; font-weight: normal; color: var(--c-sub); }
.ktt .kt-mix__b { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; }
/* ドーナツ本体。背景の conic-gradient は PHP 側でインライン指定する */
.ktt .kt-mix__d {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 88px; height: 88px; border-radius: 50%; background: var(--c-rail);
}
.ktt .kt-mix__d::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
	margin: -26px 0 0 -26px; border-radius: 50%; background: #fff;
}
.ktt .kt-mix__d b { position: relative; z-index: 1; font-size: 20px; font-weight: bold; line-height: 1.1; }
.ktt .kt-mix__d em { position: relative; z-index: 1; font-style: normal; font-size: 10.5px; color: var(--c-sub); }
.ktt .kt-mix__l { list-style: none; margin: 0; padding: 0; }
.ktt .kt-mix__l li {
	margin: 0; padding: 2px 0 2px 13px; position: relative;
	display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 6px;
	font-size: 11.5px; line-height: 1.5;
}
.ktt .kt-mix__l li::before {
	content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--c-mk);
}
.ktt .kt-mix__l b { font-size: 13px; font-weight: bold; text-align: right; }
.ktt .kt-mix__l em { grid-column: 2; font-style: normal; font-size: 10.5px; color: var(--c-sub); text-align: right; }

/* =============================================================================
 * 工事費込み価格帯｜チャートが主役
 * ========================================================================== */
.ktt .kt-chart { padding: 0 0 2px; }
.ktt .kt-chart__ax { position: relative; height: 18px; margin: 0 0 4px 15.8em; border-bottom: 1px solid #0065cc; }
.ktt .kt-chart__ax span { position: absolute; bottom: 2px; font-size: 10.5px; color: var(--c-sub); white-space: nowrap; transform: translateX(-50%); }
.ktt .kt-chart__ax span.is-first { transform: none; }
.ktt .kt-chart__ax span.is-last { transform: translateX(-100%); }
.ktt .kt-chart ol { list-style: none; margin: 0; padding: 0; }
/* 25行を価格帯で区切る小見出し。上から順に追わせないための目印 */
.ktt .kt-chart__g {
	margin: 12px 0 3px; padding: 3px 0 3px 15.8em;
	font-size: 12px; font-weight: bold; color: var(--c-sub);
	border-top: 1px solid var(--c-line);
}
.ktt .kt-chart__g:first-of-type { margin-top: 2px; border-top: 0; }
.ktt .kt-chart__g span { margin-left: 8px; font-weight: normal; font-size: 11px; }
.ktt .kt-chart li {
	margin: 0; padding: 3px 0; display: grid; grid-template-columns: 15.8em 1fr;
	align-items: center; gap: 0;
}
.ktt .kt-chart li::before { content: none; }
.ktt .kt-chart li:hover { background: #fafbfb; }
.ktt .kt-chart__t { display: flex; align-items: center; gap: 0; font-size: 12.5px; line-height: 1.4; padding-right: 10px; overflow: hidden; }
/* シリーズ名だけを省略する。順位バッジは切らない */
.ktt .kt-chart__t a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktt .kt-chart__t a { text-decoration: none; font-weight: bold; }
.ktt .kt-chart__t i { flex: none; display: block; width: 8px; height: 8px; margin-right: 6px; background: var(--c-mk); font-style: normal; }
.ktt .kt-chart__tr {
	position: relative; height: 22px;
	background-image: repeating-linear-gradient(to right,
		var(--c-rail) 0, var(--c-rail) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) calc(100% / var(--c-div, 5)));
}
.ktt .kt-chart__sg {
	position: absolute; top: 6px; height: 10px; min-width: 8px; background: var(--c-mk); border-radius: 5px;
}
.ktt .kt-chart__lb {
	position: absolute; top: 2px; font-size: 11.5px; white-space: nowrap; color: var(--c-ink);
	background: rgba(255, 255, 255, .82); padding: 0 3px;
}
.ktt .kt-chart__lb b { color: var(--c-red); font-size: 12.5px; }
.ktt .kt-chart__lb.is-left { text-align: right; }

/* =============================================================================
 * 予算から選ぶ｜金額の値札カード
 * ========================================================================== */
.ktt .kt-bud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ktt .kt-bud__c { display: flex; flex-direction: column; border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-bud__h {
	position: relative; margin: 0; padding: 10px 12px 9px; background: #004388; color: #fff;
	font-size: 16px; font-weight: bold; line-height: 1.35;
}
.ktt .kt-bud__c:nth-child(2) .kt-bud__h { background: #4d5359; }
.ktt .kt-bud__c:nth-child(3) .kt-bud__h { background: #6b7178; }
.ktt .kt-bud__c:nth-child(4) .kt-bud__h { background: #868d93; }
.ktt .kt-bud__h span { display: block; font-size: 11px; font-weight: normal; color: rgba(255, 255, 255, .82); }
.ktt .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); }
.ktt .kt-bud__l { list-style: none; margin: 0; padding: 6px 0; }
.ktt .kt-bud__l > li { margin: 0; padding: 6px 10px; border-bottom: 1px dotted var(--c-line); }
.ktt .kt-bud__l > li::before { content: none; }
.ktt .kt-bud__l > li:last-child { border-bottom: 0; }
.ktt .kt-bud__l a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; text-decoration: none; color: inherit; }
.ktt .kt-bud__l img { display: block; width: 48px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.ktt .kt-bud__l b { display: block; font-size: 12.5px; line-height: 1.35; }
.ktt .kt-bud__l small { display: block; font-size: 10.5px; color: var(--c-sub); line-height: 1.5; }
.ktt .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; }
.ktt .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); }
.ktt .kt-bud__m a { text-decoration: none; }

/* =============================================================================
 * グレード別マトリクス
 * ========================================================================== */
.ktt .kt-grade { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.ktt .kt-grade th, .ktt .kt-grade td { border-bottom: 1px solid var(--c-line); padding: 9px 11px; vertical-align: top; text-align: left; }
.ktt .kt-grade thead th { border-bottom: 2px solid #0065cc; padding-bottom: 6px; }
.ktt .kt-grade thead th img { display: block; width: auto; }
.ktt .kt-grade thead th:first-child { width: 17%; }
.ktt .kt-grade tbody th { width: 17%; }
.ktt .kt-grade tbody th b { display: block; font-size: 14px; color: #0065cc; }
.ktt .kt-grade tbody th span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: var(--c-sub); line-height: 1.65; }
.ktt .kt-grade tbody tr:nth-child(2n) th, .ktt .kt-grade tbody tr:nth-child(2n) td { background: #fafbfb; }
.ktt .kt-grade ul { list-style: none; margin: 0; padding: 0; }
.ktt .kt-grade li { margin: 0 0 5px; padding: 0 0 0 11px; position: relative; line-height: 1.5; }
.ktt .kt-grade li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--c-mk); }
.ktt .kt-grade li:last-child { margin-bottom: 0; }
.ktt .kt-grade li a { text-decoration: none; font-weight: bold; font-size: 13.5px; }
.ktt .kt-grade li em { font-style: normal; margin-left: 6px; font-size: 12px; color: var(--c-red); font-weight: bold; }

/* =============================================================================
 * 目的・機能｜アイコンタイル
 * ========================================================================== */
/* 10項目を「軸名｜ひとこと｜該当シリーズ」の1行ずつに畳む。
   ブロックを並べると縦に伸びて余白が出るので、行の一覧にして密度を上げる。 */
.ktt .kt-tile { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-tile > li {
	margin: 0; padding: 8px 13px 9px; border-top: 1px solid var(--c-line);
	display: grid; grid-template-columns: 22px 8.4em minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 0 14px; align-items: start;
}
.ktt .kt-tile > li::before { content: none; }
.ktt .kt-tile > li:first-child { border-top: 0; }
.ktt .kt-tile > li:nth-child(2n) { background: #fafbfb; }
.ktt .kt-tile > li:hover { background: #f2f4f5; }
/* p は箱を消して、中のアイコンと軸名をそのまま行のセルにする */
.ktt .kt-tile__h { display: contents; }
.ktt .kt-tile__i {
	display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
	color: var(--c-mid); font-size: 17px; background: #eef0f1;
}
.ktt .kt-tile__h > span:last-child { font-size: 13px; font-weight: bold; line-height: 1.55; }
.ktt .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列に流す（区切りは／） */
.ktt .kt-tile__l { list-style: none; margin: 0; padding: 1px 0 0; font-size: 0; }
.ktt .kt-tile__l li { display: inline; margin: 0; padding: 0; }
.ktt .kt-tile__l li::before { content: none; }
.ktt .kt-tile__l li + li::before {
	content: "／"; font-size: 11px; color: #ccd0d3; margin: 0 1px; content: "／";
}
.ktt .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;
}
.ktt .kt-tile__l a:hover { background: var(--c-mk); color: #fff; }

/* =============================================================================
 * 60cm / 75cm
 * ========================================================================== */
.ktt .kt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.ktt .kt-two > div { padding: 0 0 4px; }
.ktt .kt-two h4 { margin: 0 0 6px; padding: 0 0 5px; font-size: 15px; font-weight: bold; border-bottom: 2px solid var(--c-mid); }
.ktt .kt-two h4 em { font-style: normal; margin-left: 8px; font-size: 12px; font-weight: normal; color: var(--c-sub); }
.ktt .kt-two p { font-size: 13px; line-height: 1.8; }
.ktt .kt-chk { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.ktt .kt-chk > li { margin: 0; padding: 9px 0 9px 22px; position: relative; font-size: 13px; line-height: 1.8; border-bottom: 1px solid var(--c-line); }
.ktt .kt-chk > li::before {
	content: ""; position: absolute; left: 2px; top: .95em; width: 9px; height: 5px;
	border-left: 2px solid var(--c-mid); border-bottom: 2px solid var(--c-mid); transform: rotate(-45deg);
}
.ktt .kt-chk b { color: #0065cc; }

/* =============================================================================
 * 施工実績｜数字が主役
 * ========================================================================== */
.ktt .kt-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; align-items: start; }
.ktt .kt-data__h { margin: 0 0 8px; padding: 0 0 5px; font-size: 13.5px; font-weight: bold; border-bottom: 1px solid var(--c-line); }
.ktt .kt-data__h span { margin-left: 8px; font-size: 11.5px; font-weight: normal; color: var(--c-sub); }
.ktt .kt-bar { list-style: none; margin: 0 0 18px; padding: 0; }
.ktt .kt-bar > li { margin: 0; padding: 4px 0; display: grid; grid-template-columns: 9.4em 1fr 5.6em; align-items: center; gap: 9px; }
.ktt .kt-bar > li::before { content: none; }
.ktt .kt-bar__l { font-size: 12.5px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktt .kt-bar__t { height: 10px; background: var(--c-rail); }
.ktt .kt-bar__t i { display: block; height: 100%; background: var(--c-mk, var(--c-mid)); }
.ktt .kt-bar__v { text-align: right; font-size: 11.5px; color: var(--c-sub); white-space: nowrap; }
.ktt .kt-bar__v b { color: var(--c-ink); font-size: 12.5px; }
.ktt .kt-pref { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.ktt .kt-pref > li { margin: 0; padding: 2px 9px; font-size: 12px; border: 1px solid var(--c-line); }
.ktt .kt-pref > li::before { content: none; }
.ktt .kt-pref > li.is-top { background: #0065cc; border-color: #0065cc; color: #fff; }
.ktt .kt-pref span { margin-left: 5px; font-size: 11px; color: var(--c-sub); }
.ktt .kt-pref > li.is-top span { color: rgba(255, 255, 255, .78); }

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

/* =============================================================================
 * 口コミ
 * ========================================================================== */
.ktt .kt-voice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.ktt .kt-voice > li { margin: 0; padding: 12px 0; border-top: 1px solid var(--c-line); }
.ktt .kt-voice > li::before { content: none; }
.ktt .kt-voice__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; }
.ktt .kt-voice__s { color: var(--c-amber); font-size: 13px; letter-spacing: 1px; }
.ktt .kt-voice__s i { font-style: normal; color: #e0e2e4; }
.ktt .kt-voice__d { font-size: 11px; color: var(--c-sub); }
.ktt .kt-voice__t { margin: 0 0 4px; font-size: 13.5px; font-weight: bold; line-height: 1.5; }
.ktt .kt-voice p { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--c-sub); }
.ktt .kt-voice__f { margin: 8px 0 0; font-size: 11.5px; color: var(--c-sub); }

/* =============================================================================
 * 型番から探す｜検索パネル
 * ========================================================================== */
.ktt .kt-find { background: #0065cc; color: #fff; padding: 16px 18px 18px; }
.ktt .kt-find__h { margin: 0 0 4px; font-size: 17px; font-weight: bold; line-height: 1.45; }
.ktt .kt-find p { margin: 0 0 10px; font-size: 12.5px; color: rgba(255, 255, 255, .84); }
.ktt .kt-find__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ktt .kt-find input[type="search"] {
	width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 15px; font-family: inherit;
	border: 0; border-radius: 3px; background: #fff; color: var(--c-ink);
}
.ktt .kt-find select {
	width: 100%; box-sizing: border-box; padding: 9px 8px; font-size: 13px; font-family: inherit;
	border: 0; border-radius: 3px; background: #fff; color: var(--c-ink);
}
.ktt .kt-find__sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ktt .kt-find button {
	padding: 11px 26px; font-size: 15px; font-family: inherit; font-weight: bold; color: #fff; cursor: pointer;
	background: var(--c-amber); border: 0; border-radius: 3px; white-space: nowrap;
}
.ktt .kt-find button:hover { opacity: .9; }
.ktt .kt-find__n { margin: 10px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .74); line-height: 1.8; }
.ktt .kt-find__n a { color: #d8dcdf; }

.ktt .kt-old { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.ktt .kt-old th, .ktt .kt-old td { padding: 6px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.ktt .kt-old thead th { border-bottom: 2px solid #0065cc; font-size: 11.5px; color: var(--c-sub); font-weight: normal; padding-bottom: 5px; }
.ktt .kt-old tbody tr:nth-child(2n) th, .ktt .kt-old tbody tr:nth-child(2n) td { background: #fafbfb; }
.ktt .kt-old tbody th { font-weight: bold; font-size: 13.5px; white-space: nowrap; }
.ktt .kt-old td.is-n { white-space: nowrap; color: var(--c-sub); font-size: 12px; }
.ktt .kt-old td a { text-decoration: none; font-weight: bold; }
.ktt .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）。 */
.ktt .kt-step {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column;
	grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px; align-items: start;
}
.ktt .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;
}
/* 番号の丸から次の番号へ伸びる縦の線。各列の最後（4・8）には引かない */
.ktt .kt-step > li::before {
	content: ""; position: absolute; left: 14px; top: 31px; bottom: 0; width: 2px; background: #e0e3e5;
}
.ktt .kt-step > li:nth-child(4)::before,
.ktt .kt-step > li:nth-child(7)::before { content: none; }
.ktt .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: #0065cc; color: #fff; font-size: 14px; font-weight: bold;
}
.ktt .kt-step__i {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; color: #0065cc;
}
.ktt .kt-step__i .kt-i { width: 100%; height: 100%; }
.ktt .kt-step b { font-size: 14px; font-weight: bold; line-height: 1.4; }
.ktt .kt-step__d {
	grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.75; color: var(--c-sub);
}

/* =============================================================================
 * FAQ
 * ========================================================================== */
.ktt .kt-faq__i { border-bottom: 1px solid var(--c-line); }
.ktt .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;
}
.ktt .kt-faq summary::-webkit-details-marker { display: none; }
.ktt .kt-faq summary::before {
	content: "Q"; position: absolute; left: 6px; top: 11px;
	font-size: 14px; font-weight: bold; color: var(--c-mid);
}
.ktt .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);
}
.ktt .kt-faq__i[open] summary::after { transform: rotate(-135deg); top: 22px; }
.ktt .kt-faq summary:hover { background: var(--c-panel); }
.ktt .kt-faq__a { padding: 0 16px 12px 34px; }
.ktt .kt-faq__a p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--c-sub); }

/* =============================================================================
 * CTA
 *   ★CTAは緑で統一する（#41b033）。商材TOP4本とも同じ。
 *     白地に置く文字と枠だけ濃いほうの緑（#2f8a26）を使う。
・関連リンク
 * ========================================================================== */
/* CTAは各シリーズページ（series.css の .dw2-cta / .dw2-btn）と同じ見た目にそろえる。
   series.css はこのページで読み込まないので、値だけ写している。 */
.ktt .kt-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 16px 0 0; }
.ktt .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;
}
.ktt .kt-cta small { display: block; margin-top: 2px; font-size: 14px; font-weight: normal; }
.ktt .kt-cta__p { background: #41b033; border: 2px solid #2f8a26; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .32); }
.ktt .kt-cta__p:hover { background: #2f8a26; color: #fff; }
.ktt .kt-cta__t { background: #fff; border: 2px solid #2f8a26; color: #2f8a26; }
.ktt .kt-cta__t:hover { background: #f1faee; }

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

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

/* ビルトインと据置型の断面 */
/* 価格クラスの目安（3段） */
.ktt .kt-class { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.ktt .kt-class > li {
	margin: 0; padding: 10px 12px 11px; background: #fff;
	display: grid; grid-template-columns: 24px auto 1fr; align-items: baseline; gap: 3px 9px;
}
.ktt .kt-class > li::before { content: none; }
.ktt .kt-class__i { grid-row: 1 / 3; align-self: center; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 18px; color: var(--c-mid); }
.ktt .kt-class b { grid-column: 2; grid-row: 1; font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.ktt .kt-class em { grid-column: 3; grid-row: 1; font-style: normal; font-size: 13.5px; font-weight: bold; color: var(--c-red); white-space: nowrap; }
.ktt .kt-class > li > span:last-child { grid-column: 2 / -1; grid-row: 2; font-size: 11.5px; line-height: 1.7; color: var(--c-sub); }
.ktt .kt-class > li:nth-child(1) { border-bottom: 3px solid #d8dcdf; }
.ktt .kt-class > li:nth-child(2) { border-bottom: 3px solid #aeb4b9; }
.ktt .kt-class > li:nth-child(3) { border-bottom: 3px solid #0065cc; }

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

/* 天板幅の比較。60cmと75cmを同じ縮尺で並べて、差をそのまま見せる */
.ktt .kt-wcmp { margin: 0 0 16px; padding: 12px 14px 13px; background: var(--c-panel); border: 1px solid var(--c-line); }
.ktt .kt-wcmp__h { margin: 0 0 10px; font-size: 12.5px; font-weight: bold; color: var(--c-sub); }
.ktt .kt-wcmp__r { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: 10px; margin: 0 0 9px; }
.ktt .kt-wcmp__r:last-of-type { margin-bottom: 0; }
.ktt .kt-wcmp__lb { font-size: 15px; font-weight: bold; }
.ktt .kt-wcmp__track { position: relative; display: block; height: 30px; }
/* 寸法はバーの中に入れる（外に出すと右端で切れる） */
.ktt .kt-wcmp__bar { position: relative; display: block; height: 30px; background: #3a4046; }
/* バーナーはバー全体に均等に置く（左に寄らないよう絶対配置） */
.ktt .kt-wcmp__bar i {
	position: absolute; display: block; top: 50%; transform: translate(-50%, -50%);
	width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%;
}
.ktt .kt-wcmp__bar i:nth-child(1) { left: 20%; }
.ktt .kt-wcmp__bar i:nth-child(2) { left: 44%; }
.ktt .kt-wcmp__bar i:nth-child(3) { left: 68%; }
/* 寸法は斜線の上に重なっても読めるよう、濃い下地を敷く */
.ktt .kt-wcmp__bar b {
	position: absolute; right: 0; top: 0; z-index: 2;
	display: flex; align-items: center; height: 100%; padding: 0 10px;
	font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap;
	background: rgba(10, 34, 52, .9);
}
.ktt .kt-wcmp__bar.is-75 { background: #4d5359; }
/* 75cmが60cmより広い分を斜線で示す */
.ktt .kt-wcmp__ex {
	position: absolute; display: block; top: 0; height: 30px;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,.32) 0 4px, rgba(255,255,255,0) 4px 8px);
	border-left: 2px dashed rgba(255, 255, 255, .9);
}
.ktt .kt-wcmp__d { margin: 9px 0 0; font-size: 12.5px; line-height: 1.6; }
.ktt .kt-wcmp__d b { color: var(--c-red); font-size: 14px; }
.ktt .kt-wcmp__chip {
	display: inline-block; width: 22px; height: 12px; margin-right: 7px; vertical-align: -1px;
	background: #4d5359; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.32) 0 4px, rgba(255,255,255,0) 4px 8px);
	border-left: 2px dashed rgba(255, 255, 255, .9);
}

/* レンジフード幅とコンロ幅。上から見た関係をそのまま並べる */
.ktt .kt-hood { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0 0 14px; }
.ktt .kt-hood > div { padding: 10px 12px 11px; border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-hood__t { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: 13.5px; font-weight: bold; line-height: 1.3; }
.ktt .kt-hood__m {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: bold;
}
.ktt .kt-hood > div.is-ng .kt-hood__m { background: #c0392b; }
.ktt .kt-hood > div.is-ok .kt-hood__m { background: #0065cc; }
.ktt .kt-hood > div.is-ng .kt-hood__t { color: #b3403f; }
.ktt .kt-hood > div.is-ok .kt-hood__t { color: #0065cc; }
.ktt .kt-hood__d { position: relative; padding: 2px 0 4px; }
.ktt .kt-hood__h, .ktt .kt-hood__c {
	display: flex; align-items: center; justify-content: center; margin: 0 auto;
	height: 22px; font-size: 10.5px; font-weight: bold; color: #fff; white-space: nowrap;
}
.ktt .kt-hood__h { background: #949a9f; }								/* レンジフード */
.ktt .kt-hood__c { position: relative; margin-top: 16px; background: #3a4046; }	/* コンロ */
/* フードからはみ出した左右の端。ここから煙が逃げることを赤い印で示す */
.ktt .kt-hood > div.is-ng .kt-hood__c::before,
.ktt .kt-hood > div.is-ng .kt-hood__c::after {
	content: ""; position: absolute; top: -14px; width: 0; height: 0;
	border-bottom: 8px solid #d64541; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0);
}
.ktt .kt-hood > div.is-ng .kt-hood__c::before { left: 4%; }
.ktt .kt-hood > div.is-ng .kt-hood__c::after  { right: 4%; }
.ktt .kt-hood__x { margin: 8px 0 0; padding: 7px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--c-sub); border-top: 1px solid var(--c-line); }

/* 型番から総額までの4手順 */
.ktt .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;
}
.ktt .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;
}
.ktt .kt-hop > li::before { content: none; }
/* 手順のあいだの三角 */
.ktt .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 #ccd0d3; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
	transform: translateY(-50%);
}
/* アイコンは1行目の左上に置く（縦中央だと見出しと段差が出る） */
.ktt .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: #eef0f1;
}
.ktt .kt-hop b { font-size: 13px; line-height: 1.35; }
.ktt .kt-hop b::before { content: counter(hop) ". "; color: var(--c-mid); }
.ktt .kt-hop > li > span:last-child { grid-column: 2; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }

/* 施工実績の数字帯 */
.ktt .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);
}
.ktt .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; }
.ktt .kt-num > li::before { content: none; }
.ktt .kt-num__i { grid-row: 1 / 3; align-self: center; display: flex; width: 22px; height: 22px; font-size: 17px; color: var(--c-mid); }
.ktt .kt-num b { font-size: 25px; font-weight: bold; line-height: 1.15; letter-spacing: -.01em; color: #0065cc; }
.ktt .kt-num em { font-style: normal; font-size: 12px; color: var(--c-sub); }
.ktt .kt-num > li > span:last-child { grid-column: 2 / -1; font-size: 11.5px; color: var(--c-sub); line-height: 1.5; }

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

/* 価格帯チャート：受注実績の上位10シリーズだけ強める */
.ktt .kt-chart li.is-pop .kt-chart__t a { color: #0065cc; }
.ktt .kt-chart li.is-pop .kt-chart__t { font-weight: bold; }
.ktt .kt-chart li.is-pop { background: #f8f9f9; }
.ktt .kt-chart__r {
	flex: none; display: inline-block; margin-left: 6px; padding: 0 5px;
	background: var(--c-amber); color: #fff; font-size: 10px; font-weight: bold;
	line-height: 1.6; vertical-align: 1px; white-space: nowrap;
}
/* 予算帯の見出しアイコン */
.ktt .kt-bud__i { display: inline-block; width: 1em; height: 1em; margin-right: 5px; vertical-align: -.12em; }
.ktt .kt-bud__i .kt-i { width: 100%; height: 100%; }

/* =============================================================================
 * キャンペーンの帯
 *   旧 #cp_bg（大きな画像帯）は使わない。1行で読める細い帯にする。
 * ========================================================================== */
.ktt .kt-cp {
	display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 13px;
	margin: 14px 0 0; padding: 10px 14px; text-decoration: none;
	background: #5db127; color: #fff;
}
.ktt .kt-cp:hover { background: #d9821f; }
.ktt .kt-cp__i {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	font-size: 24px; color: var(--c-amber); background: #fff;
}
.ktt .kt-cp__b { min-width: 0; }
.ktt .kt-cp__b em {
	display: block; font-style: normal; font-size: 11.5px; font-weight: bold;
	letter-spacing: .06em; color: rgba(255, 255, 255, .88); line-height: 1.4;
}
/* 帯の中の h2 は heading_01 ではないのでここで見た目を決める */
.ktt .kt-cp__b h2 {
	margin: 0; padding: 0; border: 0; background: none; color: #fff;
	font-size: 19px; font-weight: bold; line-height: 1.3;
}
.ktt .kt-cp__a {
	position: relative; padding: 0 17px 0 0; font-size: 12.5px; font-weight: bold; white-space: nowrap;
}
.ktt .kt-cp__a::after {
	content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg);
}

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

/* 総額の内訳 */
.ktt .kt-sum { border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-sum__h {
	margin: 0; padding: 8px 14px; background: #0065cc; color: #fff;
	font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
/* 見出しの帯と3つの枠、枠どうしをくっつけない（2026-09-19 指摘） */
.ktt .kt-sum__g {
	display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 12px; padding: 12px;
}
.ktt .kt-sum__c {
	padding: 11px 14px 13px; background: #fff;
	border: 1px solid var(--c-line); border-radius: 4px;
}
.ktt .kt-sum__c.is-b { background: #f8f9f9; }
.ktt .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;
}
.ktt .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: #eef0f1;
}
.ktt .kt-sum__d { margin: 0; font-size: 12px; line-height: 1.7; color: var(--c-sub); }
.ktt .kt-sum__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
.ktt .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;
}
.ktt .kt-sum__l li::before { content: none; }
.ktt .kt-sum__l .kt-i { width: 15px; height: 15px; color: var(--c-mid); }
.ktt .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;
}
.ktt .kt-sum__f b { color: #0065cc; }

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

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

/* =============================================================================
 * 10年保証
 *   ★保証は緑（#41b033）で統一する。商材TOP4本とも同じ。
 *     ページのさし色は変えない（ここだけ緑）。
 *   旧 hosyou_mainbox / tokucho（丸い囲み）は使わない。
 * ========================================================================== */
.ktt .kt-grt { border: 1px solid var(--c-line); background: #fff; }
.ktt .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);
}
.ktt .kt-grt__i {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; font-size: 24px; color: #41b033; background: #fff;
}
.ktt .kt-grt__h b { font-size: 27px; color: #fff; margin: 0 1px; letter-spacing: -.01em; }
.ktt .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;
}
.ktt .kt-grt__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ktt .kt-grt__l > li { margin: 0; padding: 10px 13px 12px; border-left: 1px solid var(--c-line); }
.ktt .kt-grt__l > li:first-child { border-left: 0; }
.ktt .kt-grt__l > li::before { content: none; }
.ktt .kt-grt__l b { display: block; font-size: 13px; line-height: 1.4; color: #41b033; }
.ktt .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);
}
.ktt .kt-grt__l span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }
/* 保証の他社比較（画像ではなく表） */
.ktt .kt-vs { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
.ktt .kt-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ktt .kt-vs th, .ktt .kt-vs td { padding: 8px 6px; border: 1px solid var(--c-line); text-align: center; vertical-align: middle; font-weight:bold;}
.ktt .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;
}
.ktt .kt-vs thead th:first-child { width: 26%; }
/* 自社の列だけ通しで強める */
.ktt .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);}
.ktt .kt-vs tbody th {
	width: 26%; text-align: left; background: #fafbfb;
	font-size: 12.5px; font-weight: bold; line-height: 1.5;
}
.ktt .kt-vs td.is-us { background: #f3f4f5; }
.ktt .kt-vs__m { display: block; font-size: 19px; line-height: 1; }
.ktt .kt-vs .is-o .kt-vs__m { color: var(--c-red); }
.ktt .kt-vs .is-t .kt-vs__m { color: var(--c-amber); }
.ktt .kt-vs .is-x .kt-vs__m { color: #a2a8ad; }
.ktt .kt-vs td b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: bold; line-height: 1.4; }
.ktt .kt-vs td.is-us b { font-size: 15px; color: #41b033; }
.ktt .kt-vs td small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--c-sub); line-height: 1.4; }

/* =============================================================================
 * スマートフォン（縦に伸ばさないことを最優先）
 * ========================================================================== */
@media screen and (max-width: 767px) {
	.ktt { font-size: 13.5px; line-height: 1.8; }
	.ktt section { margin: 0 0 16px !important; }
	/* スマホは ヘッダー62px ＋ 商材タブ44px */
	article#mainContents section[id],

	.ktt .kt-lead { font-size: 14px; margin: 12px 0 14px; }
	.ktt .kt-h3 { font-size: 15px; margin: 20px 0 10px; }

	.ktt .kt-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ktt .kt-kpi > div { padding: 9px 10px 10px; grid-template-columns: 26px 1fr; gap: 0 8px; }
	.ktt .kt-kpi > div:nth-child(3) { border-left: 0; }
	.ktt .kt-kpi > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
	.ktt .kt-kpi__i { width: 26px; height: 26px; font-size: 18px; }
	.ktt .kt-kpi dt { font-size: 10.5px; }
	.ktt .kt-kpi b { font-size: 21px; }
	.ktt .kt-kpi dd span { font-size: 10px; }

	/* 目次：見出しを上、アンカーを下に回して1グループ2行 */
	.ktt .kt-toc dl > div { grid-template-columns: 1fr; gap: 3px; padding: 7px 10px; }
	.ktt .kt-toc dt { line-height: 1.5; font-size: 12px; }
	.ktt .kt-toc a { font-size: 11.5px; padding: 2px 8px; }

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

	.ktt .kt-def { grid-template-columns: 1fr; gap: 0; }

	/* 導入文：理由は縦に積む */
	.ktt .kt-intro { padding: 11px 12px 12px; border-left-width: 3px; }
	.ktt .kt-intro__c { font-size: 15px; }
	.ktt .kt-intro__d { font-size: 12.5px; }
	.ktt .kt-intro__p {gap: 7px; margin-top: 9px; padding-top: 9px; }
	.ktt .kt-intro__p b{ font-size:15px;}
	.ktt .kt-intro__p li{ padding:0}
	/* 選び方ナビ：2列。説明の1行は落として、アイコン＋名前＋実データだけ残す */
	.ktt .kt-nav { margin: 12px 0 0; padding: 10px 11px 12px; }
	.ktt .kt-nav__h { font-size: 14px; margin-bottom: 8px; }
	.ktt .kt-nav__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.ktt .kt-nav__l a { grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 18px 8px 9px; }
	.ktt .kt-nav__l a::after { right: 8px; width: 5px; height: 5px; }
	.ktt .kt-nav__i { width: 26px; height: 26px; font-size: 18px; }
	.ktt .kt-nav__x b { font-size: 12.5px; }
	.ktt .kt-nav__x small { display: none; }
	.ktt .kt-nav__x em { font-size: 10px; }
	.ktt .kt-nav__f { grid-template-columns: 1fr auto; row-gap: 6px; padding: 8px 9px; }
	.ktt .kt-nav__f label { grid-column: 1 / -1; font-size: 12px; }
	.ktt .kt-nav__f button { padding: 8px 16px; font-size: 13px; }

	/* CSS図解：横並びをやめる */
	.ktt .kt-hood { grid-template-columns: 1fr; gap: 10px; }
	.ktt .kt-wcmp { padding: 10px 11px 11px; }
	.ktt .kt-wcmp__r { grid-template-columns: 3.6em 1fr; gap: 8px; }
	.ktt .kt-wcmp__lb { font-size: 14px; }
	.ktt .kt-wcmp__track { height: 26px; }
	.ktt .kt-wcmp__bar { height: 26px; padding-right: 5.6em; }
	.ktt .kt-wcmp__bar i { width: 10px; height: 10px; margin-left: 10%; }
	.ktt .kt-wcmp__bar b { font-size: 11px; padding: 0 7px; }
	/* SPは寸法ラベルが広い割合を占めるので、3つ目の丸が隠れないよう内側へ寄せる */
	.ktt .kt-wcmp__bar i:nth-child(1) { left: 15%; }
	.ktt .kt-wcmp__bar i:nth-child(2) { left: 35%; }
	.ktt .kt-wcmp__bar i:nth-child(3) { left: 55%; }
	.ktt .kt-wcmp__ex { height: 26px; }
	.ktt .kt-wcmp__d { font-size: 11.5px; }

	/* 価格クラス・予算帯へのリンク */
	.ktt .kt-class { grid-template-columns: 1fr; }
	.ktt .kt-class > li { padding: 8px 11px 9px; }
	.ktt .kt-class b { font-size: 13px; }
	.ktt .kt-jump > span { width: 100%; margin-bottom: 2px; }
	.ktt .kt-jump a { padding: 4px 9px; font-size: 12px; }

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

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

	/* キャンペーンの帯 */
	.ktt .kt-cp { grid-template-columns: 34px 1fr; gap: 10px; padding: 9px 11px; }
	.ktt .kt-cp__i { width: 34px; height: 34px; font-size: 21px; }
	.ktt .kt-cp__b h2 { font-size: 15.5px; }
	.ktt .kt-cp__b em { font-size: 10.5px; }
	.ktt .kt-cp__a { grid-column: 2; padding-left: 0; font-size: 11.5px; }

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

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

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

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

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

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

	/* ランキング：1〜3位も1行カードにして縦を詰める */
	.ktt .kt-pod { grid-template-columns: 1fr; gap: 8px; }
	.ktt .kt-pod > li { display: grid; grid-template-columns: 96px 1fr; padding: 0 0 10px; column-gap: 10px; }
	.ktt .kt-pod__n { position: static; grid-column: 1 / -1; padding: 2px 10px 3px; }
	.ktt .kt-pod__ph { grid-column: 1; align-self: start; margin: 6px 0 0 8px; }
	.ktt .kt-pod__b { grid-column: 2; padding: 6px 12px 0 0; }
	.ktt .kt-pod__t { font-size: 16px; }
	.ktt .kt-pod__p { margin-top: 6px; padding-top: 6px; }
	.ktt .kt-pod__p b { font-size: 17px; }

	.ktt .kt-rest > li { grid-template-columns: 34px 55px 1fr; row-gap: 4px; gap: 8px; padding: 7px 4px; }
	.ktt .kt-rest__n { font-size: 12px; white-space: nowrap; }
	.ktt .kt-rest__g { grid-column: 3; }
	.ktt .kt-rest__p { grid-column: 2 / -1; grid-row: 3; text-align: left; font-size: 14px; }
	.ktt .kt-rest__p span { display: inline; margin-left: 6px; }
	.ktt .kt-rest__ph { grid-row: 1 / 3; }
	.ktt .kt-rest__n { grid-row: 1 / 3; }

	/* 価格帯ごとの円：1列に積む（3つ横並びだと円が小さくなりすぎる） */
	.ktt .kt-mix { grid-template-columns: 1fr; }
	.ktt .kt-mix > li { padding: 9px 11px 11px; }
	.ktt .kt-mix__h { font-size: 13px; margin-bottom: 7px; }
	.ktt .kt-mix__b { grid-template-columns: 76px 1fr; gap: 11px; }
	.ktt .kt-mix__d { width: 76px; height: 76px; }
	.ktt .kt-mix__d::before { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
	.ktt .kt-mix__d b { font-size: 18px; }

	/* 価格チャート：ラベルを上、帯を下に */
	.ktt .kt-chart__ax { margin-left: 0; }
	.ktt .kt-chart__g { padding-left: 0; margin: 14px 0 4px; }
	.ktt .kt-chart li { grid-template-columns: 1fr; padding: 5px 0; }
	.ktt .kt-chart__t { white-space: normal; padding-right: 0; font-size: 12.5px; }
	.ktt .kt-chart__tr { height: 20px; margin-top: 2px; }
	.ktt .kt-chart__sg { top: 5px; }
	.ktt .kt-chart__lb { font-size: 11px; }

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

	/* グレード表：横スクロールにせずグレード単位で積む */
	.ktt .kt-grade, .ktt .kt-grade thead, .ktt .kt-grade tbody,
	.ktt .kt-grade tr, .ktt .kt-grade th, .ktt .kt-grade td { display: block; width: auto; }
	.ktt .kt-grade thead { display: none; }
	.ktt .kt-grade tbody tr { margin: 0 0 10px; border: 1px solid var(--c-line); }
	.ktt .kt-grade tbody th { width: auto; border-bottom: 1px solid var(--c-line); background: var(--c-panel) !important; }
	.ktt .kt-grade tbody td { border-bottom: 1px dotted var(--c-line); padding: 8px 11px; background: #fff !important; }
	.ktt .kt-grade tbody td:last-child { border-bottom: 0; }
	.ktt .kt-grade tbody td::before {
		content: attr(data-mk); display: inline-block; margin: 0 7px 3px 0; padding: 0 7px;
		background: var(--c-mk); color: #fff; font-size: 11px; font-weight: bold;
	}
	.ktt .kt-grade tbody td ul { display: inline; }
	.ktt .kt-grade tbody td li { display: inline-block; margin: 0 10px 2px 0; padding-left: 9px; }

	/* 目的：アイコン＋軸名を1行目に、説明と該当シリーズをその下へ回す */
	.ktt .kt-tile > li { grid-template-columns: 20px 1fr; gap: 2px 8px; padding: 8px 10px 9px; }
	.ktt .kt-tile__i { width: 20px; height: 20px; font-size: 15px; }
	.ktt .kt-tile__h > span:last-child { font-size: 12.5px; }
	.ktt .kt-tile > li > p:not(.kt-tile__h) { grid-column: 2; font-size: 11.5px; }
	.ktt .kt-tile__l { grid-column: 2; }

	.ktt .kt-two { grid-template-columns: 1fr; gap: 16px; }
	.ktt .kt-data { grid-template-columns: 1fr; gap: 16px; }
	.ktt .kt-bar > li { grid-template-columns: 8em 1fr 5em; gap: 7px; }
	.ktt .kt-bar__l { font-size: 11.5px; }

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

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

	.ktt .kt-find { padding: 14px 13px 15px; }
	.ktt .kt-find__h { font-size: 15.5px; }
	.ktt .kt-find__row { grid-template-columns: 1fr; }
	.ktt .kt-find__sel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ktt .kt-find__sel select:last-child { grid-column: 1 / -1; }

	/* 旧型番：1件＝1行に圧縮 */
	.ktt .kt-old, .ktt .kt-old thead, .ktt .kt-old tbody,
	.ktt .kt-old tr, .ktt .kt-old th, .ktt .kt-old td { display: block; width: auto; }
	.ktt .kt-old thead { display: none; }
	.ktt .kt-old tbody tr { padding: 8px 6px; border-bottom: 1px solid var(--c-line); }
	.ktt .kt-old th, .ktt .kt-old td { padding: 0; border: 0; background: none !important; display: inline; }
	.ktt .kt-old tbody th { font-size: 14px; }
	.ktt .kt-old td.is-n::before { content: "／"; margin: 0 4px; color: #ccd0d3; }
	.ktt .kt-old td:last-child { display: block; margin-top: 2px; font-size: 12px; }

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


/* =============================================================================
 * 工事対応エリア（#servicearea / .kt-sa）  2026-09-15 全面作り替え
 *
 *   ・h3.heading_06（水色の帯）は使わない
 *   ・chiiki.css のアコーディオンと共通スクリプトに依存しない（details/summary）
 *   ・**専用ページが無い地域を灰色にしない**。灰色は「対応範囲外」に見えるため。
 *     ページがある地域だけ緑のリンク色で見分けられるようにする。
 *   ・このブロックは /clothesdryer/index.html だけで使う（id=servicearea は他に無い）
 * ========================================================================== */
.kt-sa {
	--sa-ink:   #1d2b36;
	--sa-sub:   #5f686e;
	--sa-green: #0065cc;
	--sa-line:  #e5e7e9;
	--sa-panel: #f6f7f8;
	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; }

@media screen and (max-width: 640px) {
	.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; }
}

/* =============================================================================
 * キャンペーンの帯（.kt-cp）  2026-09-15
 *   ・背景は赤系（セール導線。地域ページのセールボタンと同じ扱い）
 *     ※直前まで #5db127 の緑だったのを青基準化のときに拾い落としていた
 *   ・背景にキラキラ星を入れる。星は data URI のSVGで描き、画像ファイルは作らない
 *   ・2層を時間差で薄く明滅させて「キラキラ」にする
 *     （動きを減らす設定の端末では止める）
 * ========================================================================== */
.ktt .kt-cp {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, #e8131f 0%, #c40010 100%) !important;
}
.ktt .kt-cp:hover { background: linear-gradient(135deg, #f01b27 0%, #d10011 100%) !important; }
.ktt .kt-cp::before,
.ktt .kt-cp::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-repeat: repeat; background-size: 220px 64px;
}
.ktt .kt-cp::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64' viewBox='0 0 220 64'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='0.85' transform='translate(20,14) scale(0.70)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.65' transform='translate(86,18) scale(0.50)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.80' transform='translate(120,46) scale(0.62)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.70' transform='translate(190,38) scale(0.52)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3C/g%3E%3C/svg%3E");
	animation: gtCpTwinkleA 2.8s ease-in-out infinite;
}
.ktt .kt-cp::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64' viewBox='0 0 220 64'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='0.70' transform='translate(48,44) scale(0.45)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.60' transform='translate(156,12) scale(0.42)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.50' transform='translate(60,10) scale(0.30)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3Cpath opacity='0.55' transform='translate(210,16) scale(0.34)' d='M0 -12 C1.2 -4 4 -1.2 12 0 C4 1.2 1.2 4 0 12 C-1.2 4 -4 1.2 -12 0 C-4 -1.2 -1.2 -4 0 -12 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-position: 110px 0;
	animation: gtCpTwinkleB 3.6s ease-in-out .7s infinite;
}
/* 文字とアイコンは星より前に出す */
.ktt .kt-cp > * { position: relative; z-index: 1; }
@keyframes gtCpTwinkleA { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
@keyframes gtCpTwinkleB { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ktt .kt-cp::before,
	.ktt .kt-cp::after { animation: none; }
}

/* 交換前のメーカーが施工記録に無いとき。**「メーカー不明」とは書かない**
   （入力していないだけなのに、分からない機種だったように読めるため。2026-09-19 指摘）。
   表は列をそろえる必要があるので、空欄ではなく控えめな「−」を置く。 */
.ktt .kt-na { color: #adb5bd; }

/* -----------------------------------------------------------------------------
 * 食洗機TOPで追加したブロック（ガスコンロTOPには無いもの）を引き継いだもの
 *   .kt-open  … 扉の開き方（スライド／フロント）の2枚
 *   .kt-otbl  … 扉の開き方の比較表（SPは項目ごとに積み上げる）
 *   .kt-size  … サイズ・設置タイプの一覧（写真＋説明＋導線）
 *   .kt-chk3  … 交換できるかの確認項目（3列）
 *   .kt-shot  … お見積りで必要な写真
 *   寸法・余白・文字サイズは他の .kt-* と同じ基準にそろえてある。
 * -------------------------------------------------------------------------- */

/* ---- 扉の開き方 ---- */
.ktt .kt-open {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
	margin: 0 0 18px; padding: 0; list-style: none;
}
.ktt .kt-open > li {
	display: flex; gap: 12px; margin: 0; padding: 12px; background: #fff;
	border: 1px solid var(--c-line); border-radius: 4px;
}
.ktt .kt-open > li::before { content: none; }
.ktt .kt-open > li.is-slide { border-top: 3px solid var(--c-mid); }
.ktt .kt-open > li.is-front { border-top: 3px solid var(--c-navy); }
.ktt .kt-open__ph { flex: 0 0 116px; margin: 0; }
.ktt .kt-open__ph img {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
	object-fit: cover; border-radius: 3px; background: #fff;
}
.ktt .kt-open__b { flex: 1 1 auto; min-width: 0; }
.ktt .kt-open__t {
	margin: 0 0 6px; padding-bottom: 6px; font-size: 15.5px; font-weight: bold;
	line-height: 1.4; color: var(--c-navy); border-bottom: 1px dashed var(--c-line);
}
.ktt .kt-open__t em {
	display: block; margin-top: 3px; font-size: 11.5px; font-weight: normal;
	font-style: normal; color: var(--c-sub); line-height: 1.6;
}
.ktt .kt-open__d { margin: 0 0 7px; font-size: 13px; line-height: 1.8; }
.ktt .kt-open__l { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.ktt .kt-open__l li {
	position: relative; padding-left: 1.25em; margin-bottom: 3px; line-height: 1.7;
}
.ktt .kt-open__l li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--c-mid);
}

/* ---- 扉の開き方の比較表 ---- */
.ktt .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;
}
.ktt .kt-otbl__cap {
	caption-side: top; text-align: left; padding: 0 0 7px;
	font-size: 13.5px; font-weight: bold; color: var(--c-ink);
}
.ktt .kt-otbl th,
.ktt .kt-otbl td {
	border: 1px solid var(--c-line); padding: 9px 11px; vertical-align: top;
	overflow-wrap: anywhere;
}
.ktt .kt-otbl thead th { background: #909090; color: #fff; text-align: center; font-size: 13.5px; }
.ktt .kt-otbl thead th:first-child { width: 10em; background: var(--c-panel); color: var(--c-ink); }
.ktt .kt-otbl tbody th { width: 10em; background: var(--c-panel); text-align: left; font-size: 12.5px; }

/* ---- サイズ・設置タイプ ---- */
.ktt .kt-size {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
	margin: 0 0 14px; padding: 0; list-style: none;
}
.ktt .kt-size > li {
	display: flex; gap: 12px; margin: 0; padding: 12px; background: #fff;
	border: 1px solid var(--c-line); border-radius: 4px;
}
.ktt .kt-size > li::before { content: none; }
.ktt .kt-size__ph { flex: 0 0 104px; margin: 0; }
.ktt .kt-size__ph img {
	display: block; width: 100%; height: auto;
	object-fit: cover; border-radius: 3px; background: #fff;
}
.ktt .kt-size__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ktt .kt-size__t {
	margin: 0 0 4px; font-size: 14.5px; font-weight: bold; line-height: 1.4; color: var(--c-navy);
}
.ktt .kt-size__t em {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 2px;
	background: var(--c-rail); font-size: 11px; font-style: normal; font-weight: bold;
	color: var(--c-sub); vertical-align: 2px;
}
.ktt .kt-size__c { margin: 0 0 6px; font-size: 12px; color: var(--c-sub); line-height: 1.6; }
.ktt .kt-size__d { margin: 0 0 7px; font-size: 13px; line-height: 1.8; }
.ktt .kt-size__x {
	display: flex; gap: 6px; margin: 0 0 8px; padding: 7px 9px; border-radius: 3px;
	background: #fff8ee; font-size: 12px; line-height: 1.7; color: #7a5410;
}
.ktt .kt-size__x svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }
.ktt .kt-size__a { margin: auto 0 0; font-size: 13px; }

/* ---- 交換できるかの確認 ---- */
.ktt .kt-chk3 {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px;
}
.ktt .kt-chk3__c {
	background: #fff; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
}
.ktt .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;
}
.ktt .kt-chk3__c ul { margin: 0; padding: 10px 12px 12px; list-style: none; font-size: 13px; }
.ktt .kt-chk3__c li {
	position: relative; padding-left: 1.3em; margin-bottom: 5px; line-height: 1.75;
}
.ktt .kt-chk3__c li:last-child { margin-bottom: 0; }
.ktt .kt-chk3__c li::before {
	content: ""; position: absolute; left: 2px; top: .6em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--c-mid);
}

/* ---- お見積りで必要な写真 ---- */
.ktt .kt-shot {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
	margin: 0 0 14px; padding: 0; list-style: none;
}
.ktt .kt-shot > li {
	display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 11px;
	background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 3px;
	font-size: 12.5px; line-height: 1.5;
}
.ktt .kt-shot > li::before { content: none; }
.ktt .kt-shot svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-mid); }

/* ---- 選び方の手順に置く「この項目を見る」 ---- */
.ktt .kt-step__a {
	grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 12.5px;
}

@media screen and (max-width: 767px) {
.ktt .kt-chk3 { grid-template-columns: 1fr; }
.ktt .kt-shot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
.ktt .kt-open,
.ktt .kt-size { grid-template-columns: 1fr; gap: 10px; }
.ktt .kt-open__ph { flex-basis: 96px; }
.ktt .kt-size__ph { flex-basis: 88px; }
/* 比較表は項目ごとに積み上げる（横スクロールさせない） */
.ktt .kt-otbl { border: 0; table-layout: auto; }
.ktt .kt-otbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ktt .kt-otbl tbody,
.ktt .kt-otbl tr,
.ktt .kt-otbl th,
.ktt .kt-otbl td { display: block; width: auto; }
.ktt .kt-otbl tr {
	margin-bottom: 10px; background: #fff; overflow: hidden;
	border: 1px solid var(--c-line); border-radius: 4px;
}
.ktt .kt-otbl tbody th {
	width: auto; border: 0; border-bottom: 1px solid var(--c-line);
	padding: 8px 11px; background: #eff0f1; font-size: 13.5px;
}
.ktt .kt-otbl td { border: 0; padding: 9px 11px; }
.ktt .kt-otbl td + td { border-top: 1px dotted var(--c-line); }
.ktt .kt-otbl td::before {
	content: attr(data-l); display: block; margin-bottom: 3px;
	font-size: 11px; font-weight: bold; color: var(--c-mid); line-height: 1.5;
}
}
@media screen and (max-width: 359px) {
.ktt .kt-shot { grid-template-columns: 1fr; }
.ktt .kt-open > li,
.ktt .kt-size > li { flex-direction: column; }
.ktt .kt-open__ph,
.ktt .kt-size__ph { flex-basis: auto; max-width: 140px; }
}
.ktt .kt-old__cap {
	caption-side: top; text-align: left; padding: 0 0 7px;
	font-size: 13.5px; font-weight: bold; color: var(--c-ink);
}

/* -----------------------------------------------------------------------------
 * 「乾太くんとは」の要点（.kt-abt）
 *   写真は置かない。番号と見出しで読み分けられるようにし、本文を読みやすくする。
 * -------------------------------------------------------------------------- */
.ktt .kt-abt {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
	margin: 0; padding: 0; list-style: none;
}
.ktt .kt-abt > li {
	margin: 0; padding: 13px 15px 14px; background: #fff;
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-mid); border-radius: 0 4px 4px 0;
}
.ktt .kt-abt > li::before { content: none; }
.ktt .kt-abt__h {
	display: flex; align-items: baseline; gap: 9px;
	margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--c-line);
}
.ktt .kt-abt__n {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 18px; padding: 0 5px; border-radius: 2px;
	background: var(--c-navy); color: #fff;
	font-size: 18px; font-weight: bold; letter-spacing: .02em;
	font-variant-numeric: tabular-nums; align-self: center;
}
.ktt .kt-abt__t { font-size: 15px; font-weight: bold; line-height: 1.4; color: var(--c-navy); }
.ktt .kt-abt__d { margin: 0; font-size: 13.5px; line-height: 1.9; }
.ktt .kt-abt__d a { text-decoration: underline; }
@media screen and (max-width: 640px) {
.ktt .kt-abt { grid-template-columns: 1fr; gap: 10px; }
.ktt .kt-abt > li { padding: 11px 12px 12px; }
.ktt .kt-abt__t { font-size: 14px; }
.ktt .kt-abt__d { font-size: 13px; line-height: 1.85; }
}

/* =============================================================================
 *  ここから下は乾太くんTOPだけのブロック
 *   ・タイプカードを3枚並べる（.kt-brand--3）
 *   ・乾燥容量から選ぶ（.kt-cap）
 *   ・置けない場所（.kt-ng）
 *   ・排湿の経路が作れないときの選択肢（.kt-alt）
 *   ・新規設置と交換（.kt-ns）
 *   ・ガスコンセント増設工事（.kt-gas / .kt-step6）
 *   ・年別の施工実績（.kt-year）／新規と交換の内訳（.kt-kind）
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * タイプカードを3枚
 *   .kt-brand の作りをそのまま使い、列数と写真だけ足す。
 * -------------------------------------------------------------------------- */
.ktt .kt-brand--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ktt .kt-brand__ph { display: block; margin: 0; border-bottom: 1px solid var(--c-line); background: #fff; }
/* 写真ごとに縦横比が違うので、同じ枠に中央で収める（切り取らない）。
   共通CSSの article#mainContents img { height:auto } に勝てないので aspect-ratio で決める。 */
.ktt .kt-brand__ph img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
	background: #fff; padding: 6px; box-sizing: border-box;
}
.ktt .kt-brand__cap {
	margin: 0; padding: 7px 13px; font-size: 12px; line-height: 1.6;
	background: var(--c-mk); color: #fff; font-weight: bold;
}
.ktt .kt-brand__cap em { font-style: normal; font-weight: normal; opacity: .85; margin-left: 6px; }

/* -----------------------------------------------------------------------------
 * 乾燥容量から選ぶ
 *   3・5・6・8・9kg を横に並べ、容量 → タイプ → 価格の順に読ませる。
 * -------------------------------------------------------------------------- */
.ktt .kt-cap {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
}
.ktt .kt-cap > li {
	position: relative; margin: 0; padding: 0; background: #fff;
	border: 1px solid var(--c-line); border-top: 3px solid var(--c-mk);
	display: flex; flex-direction: column;
}
.ktt .kt-cap > li::before { content: none; }
.ktt .kt-cap__h { margin: 0; padding: 9px 11px 8px; border-bottom: 1px solid var(--c-line); }
.ktt .kt-cap__n { display: block; font-size: 25px; font-weight: bold; line-height: 1.1; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.ktt .kt-cap__n em { font-style: normal; font-size: 14px; margin-left: 2px; }
.ktt .kt-cap__w { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-sub); line-height: 1.5; }
.ktt .kt-cap__t { margin: 0; padding: 6px 11px; background: var(--c-panel); font-size: 11.5px; font-weight: bold; color: var(--c-mk); line-height: 1.5; }
.ktt .kt-cap__d { margin: 0; padding: 9px 11px 0; font-size: 12.5px; line-height: 1.75; }
.ktt .kt-cap__s { margin: 0; padding: 7px 11px 0; font-size: 11px; color: var(--c-sub); line-height: 1.6; }
.ktt .kt-cap__p { margin: 8px 11px 0; padding-top: 7px; border-top: 1px dotted var(--c-line); font-size: 11.5px; }
.ktt .kt-cap__p b { font-size: 16px; color: var(--c-red); }
/* 並べたブロックの末尾ボタンは下端でそろえる */
.ktt .kt-cap__a { margin: 9px 11px 11px; margin-top: auto; padding-top: 8px; }
.ktt .kt-cap__a a {
	display: block; padding: 7px 4px; text-align: center; text-decoration: none; border-radius: 3px;
	background: var(--c-mk); color: #fff; font-size: 12px; font-weight: bold; line-height: 1.4;
}
.ktt .kt-cap__a a:hover { opacity: .88; }
/* 施工実績がいちばん多い容量に印を付ける（優劣ではなく実績の表示） */
.ktt .kt-cap__b {
	position: absolute; top: -1px; right: -1px; padding: 2px 7px;
	background: var(--c-amber); color: #fff; font-size: 10.5px; font-weight: bold; line-height: 1.6;
}

/* -----------------------------------------------------------------------------
 * 置けない場所（リンナイの説明図つき）
 * -------------------------------------------------------------------------- */
.ktt .kt-ng {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.ktt .kt-ng > li {
	margin: 0; padding: 0 0 12px; background: #fff;
	border: 1px solid var(--c-line); border-top: 3px solid var(--c-red);
}
.ktt .kt-ng > li::before { content: none; }
.ktt .kt-ng__ph { display: block; margin: 0; }
.ktt .kt-ng__ph img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
	background: #fff; padding: 8px; box-sizing: border-box; border-bottom: 1px solid var(--c-line);
}
.ktt .kt-ng__t {
	margin: 0; padding: 9px 12px 0; font-size: 13.5px; font-weight: bold; line-height: 1.55;
	display: flex; gap: 7px; align-items: flex-start;
}
.ktt .kt-ng__t::before {
	content: "\00d7"; flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
	background: var(--c-red); color: #fff; font-size: 12px; line-height: 1;
}
.ktt .kt-ng__d { margin: 6px 12px 0; font-size: 12.5px; line-height: 1.8; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 排湿の経路が作れないときの選択肢
 * -------------------------------------------------------------------------- */
.ktt .kt-alt {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.ktt .kt-alt > li {
	margin: 0; padding: 13px 15px 14px; background: #fff;
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-mid);
}
.ktt .kt-alt > li::before { content: none; }
.ktt .kt-alt__h {
	display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
	padding-bottom: 8px; border-bottom: 1px dashed var(--c-line);
	font-size: 14.5px; font-weight: bold; line-height: 1.45; color: var(--c-navy);
}
.ktt .kt-alt__i {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; background: var(--c-panel); color: var(--c-mid);
}
.ktt .kt-alt__i .kt-i { width: 17px; height: 17px; }
.ktt .kt-alt__d { margin: 0; font-size: 13px; line-height: 1.9; }
.ktt .kt-alt__d a { text-decoration: underline; }
/* 補足は本文より一段落とす（本文と同じ濃さだと注意書きに見えない） */
.ktt .kt-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 新規設置と交換
 *   2枚を並べるが、色を変えて優劣に見せない（どちらも同じ扱い）。
 * -------------------------------------------------------------------------- */
.ktt .kt-ns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ktt .kt-ns__c {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--c-line); border-top: 4px solid var(--c-mid);
}
.ktt .kt-ns__h {
	margin: 0; padding: 10px 14px 9px; border-bottom: 1px solid var(--c-line);
	display: flex; align-items: center; gap: 10px;
}
.ktt .kt-ns__i {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; background: var(--c-panel); color: var(--c-mid);
}
.ktt .kt-ns__i .kt-i { width: 20px; height: 20px; }
.ktt .kt-ns__h b { display: block; font-size: 16px; line-height: 1.35; }
.ktt .kt-ns__h em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-sub); font-weight: normal; }
.ktt .kt-ns__d { margin: 0; padding: 11px 14px 0; font-size: 13px; line-height: 1.85; }
.ktt .kt-ns__lh { margin: 12px 14px 0; font-size: 12px; font-weight: bold; color: var(--c-sub); }
.ktt .kt-ns__l { list-style: none; margin: 4px 14px 0; padding: 0; }
.ktt .kt-ns__l li {
	margin: 0; padding: 6px 0 6px 22px; position: relative;
	font-size: 12.5px; line-height: 1.7; border-top: 1px dotted var(--c-line);
}
.ktt .kt-ns__l li::before {
	content: ""; position: absolute; left: 3px; top: .8em;
	width: 10px; height: 5px; border-left: 2px solid var(--c-mid); border-bottom: 2px solid var(--c-mid);
	transform: rotate(-45deg);
}
.ktt .kt-ns__n { margin: 10px 14px 0; padding: 9px 11px; background: var(--c-panel); font-size: 12px; line-height: 1.75; }
.ktt .kt-ns__a { margin: 11px 14px 14px; margin-top: auto; padding-top: 10px; }
.ktt .kt-ns__a a {
	display: block; padding: 9px 8px; text-align: center; text-decoration: none; border-radius: 3px;
	background: var(--c-mid); color: #fff; font-size: 13px; font-weight: bold;
}
.ktt .kt-ns__a a:hover { opacity: .88; }

/* -----------------------------------------------------------------------------
 * ガスコンセント増設工事
 *   キャッチ帯 → 工事の内容（定義リスト）→ 施工の流れ（写真6枚）
 *   写真は「並べるだけ」にせず、番号を振って工程として読ませる。
 * -------------------------------------------------------------------------- */
.ktt .kt-gas__c {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0 0 14px; padding: 13px 16px; background: var(--c-navy); color: #fff;
}
.ktt .kt-gas__c .kt-i { width: 30px; height: 30px; flex: none; }
.ktt .kt-gas__c b { font-size: 20px; line-height: 1.35; }
.ktt .kt-gas__c span { flex: 1 1 14em; min-width: 0; font-size: 13px; line-height: 1.7; }
.ktt .kt-gas__c em { font-style: normal; display: block; font-size: 12px; opacity: .85; }

.ktt .kt-gas__h3 {
	margin: 22px 0 11px; padding: 0 0 7px; font-size: 15.5px; font-weight: bold; line-height: 1.5;
	border-bottom: 2px solid var(--c-mid);
}
.ktt .kt-gas__h3 span { margin-left: 10px; font-size: 12px; font-weight: normal; color: var(--c-sub); }

.ktt .kt-step6 {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.ktt .kt-step6 > li {
	position: relative; margin: 0; padding: 0 0 12px; background: #fff; border: 1px solid var(--c-line);
}
.ktt .kt-step6 > li::before { content: none; }
.ktt .kt-step6__ph { display: block; margin: 0; }
.ktt .kt-step6__ph img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	border-bottom: 1px solid var(--c-line);
}
.ktt .kt-step6__n {
	position: absolute; left: 0; top: 0; z-index: 1;
	display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px 3px 8px;
	background: var(--c-navy); color: #fff; font-size: 11px; font-weight: bold; line-height: 1.6;
	font-variant-numeric: tabular-nums;
}
.ktt .kt-step6__n b { font-size: 14px; }
.ktt .kt-step6__t { margin: 9px 12px 0; font-size: 13.5px; font-weight: bold; line-height: 1.5; }
.ktt .kt-step6__d { margin: 5px 12px 0; font-size: 12.5px; line-height: 1.8; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 年別の施工実績（横棒）
 * -------------------------------------------------------------------------- */
.ktt .kt-year { list-style: none; margin: 0; padding: 0; }
.ktt .kt-year > li {
	margin: 0; padding: 4px 0; display: grid; grid-template-columns: 4.6em 1fr 6.6em;
	gap: 0 10px; align-items: center;
}
.ktt .kt-year > li::before { content: none; }
.ktt .kt-year__y { font-size: 12.5px; font-weight: bold; color: var(--c-sub); font-variant-numeric: tabular-nums; }
.ktt .kt-year__t { display: block; height: 15px; background: var(--c-rail); }
/* 実績の棒はサイト共通の水色にそろえる（シリーズページの施工実績と同じ） */
.ktt .kt-year__t i { display: block; height: 100%; background: #29abe9; }
.ktt .kt-year > li.is-now .kt-year__t i { background: repeating-linear-gradient(135deg, #29abe9 0 6px, #7fcef3 6px 12px); }
.ktt .kt-year__v { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.ktt .kt-year__v b { font-size: 14px; }
.ktt .kt-year__v em { font-style: normal; display: block; font-size: 10.5px; color: var(--c-sub); }

/* -----------------------------------------------------------------------------
 * 新規設置と交換の内訳（1本の帯）
 * -------------------------------------------------------------------------- */
.ktt .kt-kind { margin: 0; }
.ktt .kt-kind__b { display: flex; height: 26px; }
.ktt .kt-kind__b > span {
	display: flex; align-items: center; justify-content: center; min-width: 0;
	color: #fff; font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden;
}
.ktt .kt-kind__b .is-swap { background: var(--c-navy); }
.ktt .kt-kind__b .is-new  { background: #29abe9; }
.ktt .kt-kind__b .is-unk  { background: #c4c8cb; color: var(--c-ink); }
.ktt .kt-kind__l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; }
.ktt .kt-kind__l li { margin: 0; padding: 0 0 0 14px; position: relative; }
.ktt .kt-kind__l li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--c-ink); }
.ktt .kt-kind__l li.is-swap::before { background: var(--c-navy); }
.ktt .kt-kind__l li.is-new::before  { background: #29abe9; }
.ktt .kt-kind__l li.is-unk::before  { background: #c4c8cb; }
.ktt .kt-kind__l b { margin-left: 5px; }
.ktt .kt-kind__l em { font-style: normal; margin-left: 4px; color: var(--c-sub); }

/* 交換前の型番の表。件数は等幅の数字にして桁をそろえる。 */
.ktt .kt-old td.is-n, .ktt .kt-old td.is-n b { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
 * 画面が狭いとき
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
.ktt .kt-cap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
.ktt .kt-brand--3 { grid-template-columns: 1fr; }
.ktt .kt-brand__ph img { aspect-ratio: 16 / 9; }
.ktt .kt-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ktt .kt-cap__n { font-size: 21px; }
.ktt .kt-cap__d { font-size: 12px; }
.ktt .kt-ng { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ktt .kt-ng__t { font-size: 12.5px; margin-left: 0; padding-left: 9px; padding-right: 9px; }
.ktt .kt-ng__d { font-size: 11.5px; margin-left: 9px; margin-right: 9px; }
.ktt .kt-alt { grid-template-columns: 1fr; gap: 10px; }
.ktt .kt-ns { grid-template-columns: 1fr; gap: 10px; }
.ktt .kt-gas__c { gap: 10px; padding: 11px 13px; }
.ktt .kt-gas__c b { font-size: 17px; }
.ktt .kt-gas__c span { flex-basis: 100%; font-size: 12.5px; }
.ktt .kt-step6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ktt .kt-step6__t { font-size: 12.5px; margin-left: 9px; margin-right: 9px; }
.ktt .kt-step6__d { font-size: 11.5px; margin-left: 9px; margin-right: 9px; }
.ktt .kt-year > li { grid-template-columns: 3.8em 1fr 5.4em; }
.ktt .kt-year__v b { font-size: 13px; }
}

/* -----------------------------------------------------------------------------
 * メイン画像（LCP）。旧 #mainImg.clothesdryer_img（CSS背景）はやめ、
 * img要素にして幅と高さを持たせる。背景画像だと先読みが効きにくいため。
 * -------------------------------------------------------------------------- */
.ktt .kt-hero {}
.ktt .kt-hero img { display: block; width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
 * 横に長い表の入れ物
 *   ※ここに入れてよいのは「スマホでも表のまま横スクロールさせる表」だけ。
 *     スマホで1行1ブロックに積む表（.kt-old）を入れると caption が縮んで
 *     1文字ずつ折り返る。
 * -------------------------------------------------------------------------- */
.ktt .kt-cmp__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 搭載の○。非搭載の − は .kt-na（共通）を使う。 */
.ktt .kt-yes { color: #2f7a33; font-weight: bold; }

/* -----------------------------------------------------------------------------
 * 機種別機能一覧・比較表（.kt-otbl の列数が多い版）
 *   見出し行に商品写真と型番を入れる。
 * -------------------------------------------------------------------------- */
.ktt .kt-cmpt thead th { padding: 8px 6px; vertical-align: bottom; }
.ktt .kt-cmpt thead th img {
	display: block; width: 100%; max-width: 90px; height: auto; margin: 0 auto 5px;
	background: #fff; border: 1px solid rgba(255, 255, 255, .35);padding: 6%;
}
/* 見出し行は濃いグレーの背景。サイト共通の #mainContents a{color:#333} のほうが
   詳細度が高く、白にしないと背景に沈んで型番が読めない（2026-09-21 指摘）。 */
.ktt .kt-cmpt thead th a {
	color: #fff !important; text-decoration: underline; font-size: 12.5px; font-weight: bold;
}
.ktt .kt-cmpt thead th a:hover { color: #fff !important; opacity: .8; }
.ktt .kt-cmpt thead th small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: normal; opacity: .88; }
.ktt .kt-cmpt thead th:first-child { width: 11em; }
.ktt .kt-cmpt tbody th span { display: block; font-size: 10.5px; font-weight: normal; color: var(--c-sub); line-height: 1.4; }
.ktt .kt-cmpt tbody td { text-align: center; }
.ktt .kt-cmpt tbody td b { font-size: 14px; color: var(--c-red); }

@media screen and (max-width: 767px) {
	/* 19行 × 5列を積み上げると長くなりすぎるので、この表だけ横スクロールにする。
	   .kt-otbl のスマホ用（1行1ブロック）を打ち消す。 */
	.ktt .kt-cmpt { table-layout: auto; min-width: 620px; border: 1px solid var(--c-line); }
	.ktt .kt-cmpt thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
	.ktt .kt-cmpt tbody { display: table-row-group; }
	.ktt .kt-cmpt tr { display: table-row; border: 0; padding: 0; }
	.ktt .kt-cmpt th, .ktt .kt-cmpt td { display: table-cell; width: auto; border: 1px solid var(--c-line); padding: 7px 8px; }
	.ktt .kt-cmpt td::before { content: none; }
	.ktt .kt-cmpt thead th { padding: 6px 5px; font-size: 11.5px; }
	.ktt .kt-cmpt thead th img { max-width: 60px; }
	.ktt .kt-cmpt thead th a { font-size: 11px; }
	.ktt .kt-cmpt tbody th { position: sticky; left: 0; z-index: 1; width: 9.4em; min-width: 9.4em; font-size: 11.5px; background: var(--c-panel); }
	.ktt .kt-cmpt tbody td { font-size: 11.5px; }
	.ktt .kt-cmpt tbody td b { font-size: 12.5px; }
}

/* =============================================================================
 *  2026-09-21 指摘への修正
 *   ① 動画が幅いっぱいにならず右に隙間が空く
 *   ② 人気ランキングのTOP3をスマホでも横3列に並べる
 *   ③ 価格帯のチャートが読みにくい → 価格順リスト（.kt-plist）に作り替え
 *   ④ 置ける場所の図が小さくて見えない → 縦型カードで大きく出す
 *   ⑤ 排湿の経路がそっけない → 図とアイコン付きのカード（.kt-spec）に作り替え
 *   ⑥ 旧型番の表の caption が1文字ずつ折り返る
 * ========================================================================== */

/* ---- ① 動画。iframe の width 属性（300）が残ると右が余る ---- */
.ktt .kt-two iframe,
.ktt .kt-two__ph iframe {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
}
.ktt .kt-two p:has(> iframe) { margin: 0; }

/* ---- ⑥ 旧型番の表。スマホでは表を block 表示にしているので caption も block にする。
         table-caption のままだと縮んで1文字ずつ折り返る。 ---- */
@media screen and (max-width: 767px) {
.ktt .kt-old__cap, .ktt .kt-otbl__cap { display: block; width: auto; }
}

/* -----------------------------------------------------------------------------
 * ③ 工事費込み価格の一覧（.kt-plist）
 *    乾太くんは1品番＝1価格なので、レンジの帯ではなく
 *    「型番／容量・接続／棒／金額」の4列で読ませる。
 * -------------------------------------------------------------------------- */
.ktt .kt-plist { margin: 0 0 14px; border: 1px solid var(--c-line); background: #fff; }
.ktt .kt-plist__g {
	margin: 0; padding: 8px 13px; background: var(--c-mk); color: #fff;
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
	font-size: 15px; font-weight: bold; line-height: 1.5;
}
.ktt .kt-plist__g a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); }
.ktt .kt-plist__g span { font-size: 11.5px; font-weight: normal; opacity: .9; }
.ktt .kt-plist__g em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: normal; }
.ktt .kt-plist__l { list-style: none; margin: 0; padding: 0; }
.ktt .kt-plist__l > li {
	margin: 0; padding: 7px 13px; border-top: 1px solid var(--c-line);
	display: grid; grid-template-columns: 11.6em 11.4em minmax(0, 1fr) 7.6em;
	align-items: center; gap: 0 12px;
}
.ktt .kt-plist__l > li::before { content: none; }
.ktt .kt-plist__l > li:first-child { border-top: 0; }
.ktt .kt-plist__l > li:nth-child(2n) { background: #fafbfb; }
.ktt .kt-plist__l > li.is-pop { background: var(--c-panel); }
.ktt .kt-plist__n { font-size: 14px; font-weight: bold; line-height: 1.4; }
.ktt .kt-plist__n a { text-decoration: none; }
.ktt .kt-plist__r {
	display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: 1px;
	background: var(--c-amber); color: #fff; font-size: 10.5px; font-weight: bold; line-height: 1.6;
}
.ktt .kt-plist__c { display: flex; flex-wrap: wrap; gap: 4px; }
.ktt .kt-chip {
	display: inline-block; padding: 1px 7px; border: 1px solid var(--c-line);
	background: #fff; color: var(--c-sub); font-style: normal;
	font-size: 11px; font-weight: bold; line-height: 1.7; white-space: nowrap;
}
.ktt .kt-chip.is-gas { font-weight: normal; }
.ktt .kt-plist__t { display: block; height: 10px; background: var(--c-rail); }
.ktt .kt-plist__t i { display: block; height: 100%; background: var(--c-mk); }
.ktt .kt-plist__l > li.is-pop .kt-plist__t i { background: var(--c-amber); }
.ktt .kt-plist__p { text-align: right; font-size: 12px; color: var(--c-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ktt .kt-plist__p b { font-size: 17px; color: var(--c-red); margin-right: 1px; }

/* -----------------------------------------------------------------------------
 * ⑤ 図とアイコン付きの説明カード（.kt-spec）
 *    排湿の経路・ガス工事の内容で使う。定義リストの棒読みをやめる。
 * -------------------------------------------------------------------------- */
.ktt .kt-spec {
	list-style: none; margin: 0 0 4px; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.ktt .kt-spec > li {
	margin: 0; padding: 0; background: #fff; border: 1px solid var(--c-line);
	display: flex; flex-direction: column; overflow: hidden;
}
.ktt .kt-spec > li::before { content: none; }
/* 図のあるものは上に大きく置く。縦横比がばらつくので同じ枠に中央で収める（切り取らない）。 */
.ktt .kt-spec__ph { margin: 0; border-bottom: 1px solid var(--c-line); }
.ktt .kt-spec__ph img {
	display: block; width: 100%; object-fit: contain;
	padding: 6px; box-sizing: border-box;
}
.ktt .kt-spec__b { padding: 11px 14px 13px; }
.ktt .kt-spec__h {
	display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
	padding-bottom: 7px; border-bottom: 1px dashed var(--c-line);
	font-size: 14.5px; font-weight: bold; line-height: 1.45; color: var(--c-navy);
}
.ktt .kt-spec__i {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; background: var(--c-panel); color: var(--c-mid);
}
.ktt .kt-spec__i .kt-i { width: 17px; height: 17px; }
.ktt .kt-spec__d { margin: 0; font-size: 13px; line-height: 1.85; }
.ktt .kt-spec__d b { color: var(--c-navy); }

/* -----------------------------------------------------------------------------
 * ④ 置ける場所（.kt-size--place）
 *    図が104pxでは読めないので、写真を上に大きく置く縦型カードにする。
 * -------------------------------------------------------------------------- */
.ktt .kt-size--place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ktt .kt-size--place > li { display: flex; flex-direction: column; padding: 0 0 13px; overflow: hidden; }
.ktt .kt-size--place .kt-size__ph {
	flex: none; margin: 0; background: var(--c-panel); border-bottom: 1px solid var(--c-line);
}
/* 線画（500x320）・実物写真（500x500）・実写（横長）が混ざるので、
   同じ枠に中央で収めてカードの高さをそろえる。切り取らない。 */
.ktt .kt-size--place .kt-size__ph img {
	display: block; width: 100%; height: auto;
	object-fit: contain; padding: 6px; box-sizing: border-box;
}
.ktt .kt-size--place .kt-size__b { padding: 11px 14px 0; }
.ktt .kt-size--place .kt-size__t { font-size: 16px; }
.ktt .kt-size--place .kt-size__d { font-size: 13px; }

/* -----------------------------------------------------------------------------
 * ② 人気ランキングのTOP3（スマホでも横3列）
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
.ktt .kt-plist__l > li {
	grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 8px 10px;
}
.ktt .kt-plist__n { grid-column: 1; font-size: 13.5px; }
.ktt .kt-plist__p { grid-column: 2; grid-row: 1; }
.ktt .kt-plist__p b { font-size: 15px; }
.ktt .kt-plist__c { grid-column: 1 / -1; grid-row: 2; }
.ktt .kt-plist__t { grid-column: 1 / -1; grid-row: 3; height: 8px; }
.ktt .kt-plist__g { font-size: 14px; padding: 7px 11px; }
.ktt .kt-plist__g em { margin-left: 0; flex-basis: 100%; }

.ktt .kt-spec { grid-template-columns: 1fr; gap: 10px; }
.ktt .kt-spec__ph img {}
.ktt .kt-spec__b { padding: 10px 12px 12px; }
.ktt .kt-spec__h { font-size: 13.5px; }
.ktt .kt-spec__d { font-size: 12.5px; }

.ktt .kt-size--place { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ktt .kt-size--place > li { flex-direction: column; }
.ktt .kt-size--place .kt-size__ph { flex-basis: auto; max-width: none; }
.ktt .kt-size--place .kt-size__b { padding: 9px 10px 0; }
.ktt .kt-size--place .kt-size__t { font-size: 13.5px; }
.ktt .kt-size--place .kt-size__t em { font-size: 10.5px; }
.ktt .kt-size--place .kt-size__d { font-size: 12px; }
.ktt .kt-size--place .kt-size__x { font-size: 11.5px; }

/* ランキングのTOP3。1列に積むと3スクロールぶんの高さになるので横3列で見せる。
   3列に入り切らないもの（ロゴ）は出さない。乾太くんはリンナイ1社なので支障はない。 */
.ktt .kt-pod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ktt .kt-pod > li { display: flex; flex-direction: column; padding: 0 0 9px; column-gap: 0; }
.ktt .kt-pod__n {
	position: static; padding: 2px 4px 3px; text-align: center;
	font-size: 10.5px; line-height: 1.35;
}
.ktt .kt-pod__n b { font-size: 14px; margin-right: 1px; }
.ktt .kt-pod__crown { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
.ktt .kt-pod__ph { margin: 0; }
.ktt .kt-pod__ph img { aspect-ratio: 4 / 3;}
.ktt .kt-pod__b { padding: 0 7px; }
.ktt .kt-pod__logo { display: none; }
.ktt .kt-pod__t { font-size: 12.5px; line-height: 1.3; word-break: break-all; }
.ktt .kt-pod__t em { font-size: 10px; line-height: 1.35; }
.ktt .kt-pod__g { grid-template-columns: 1fr; gap: 3px; margin-top: 6px; }
.ktt .kt-pod__bar { height: 6px; }
.ktt .kt-pod__v { font-size: 10.5px; white-space: normal; line-height: 1.4; }
.ktt .kt-pod__v b { font-size: 12px; }
.ktt .kt-pod__p { margin-top: 6px; padding-top: 6px; font-size: 9.5px; line-height: 1.35; }
.ktt .kt-pod__p b { font-size: 13.5px; line-height: 1.2; }
}

/* 360px を下回ると3列では型番が入らないので、文字だけさらに詰める */
@media screen and (max-width: 359px) {
.ktt .kt-pod { gap: 4px; }
.ktt .kt-pod__b { padding: 0 5px; }
.ktt .kt-pod__t { font-size: 11px; }
.ktt .kt-pod__p b { font-size: 12px; }
}

/* =============================================================================
 *  2026-09-21 追加修正
 *   ⑦ 乾燥容量カードの「タイプ帯」「寸法」「価格」「ボタン」の高さがそろわない
 *   ⑧ 説明カードは図のあり／なしで別ブロックにする
 * ========================================================================== */

/* ---- ⑦ 容量カード。カードごとに文章量が違っても、同じ要素が同じ高さに並ぶようにする。
         行を固定し、伸び縮みするのは説明文（__d）だけにする。 ---- */
.ktt .kt-cap > li {
	display: grid; grid-template-rows: auto auto 1fr auto auto auto; align-content: stretch;
}
/* 1〜2行で揺れる箇所は2行ぶんの高さを確保して、続く帯の位置をそろえる */
.ktt .kt-cap__w { min-height: 3em; }
.ktt .kt-cap__s { min-height: 3.2em; }
.ktt .kt-cap__a { margin-top: 0; }

/* ---- ⑧ 説明カード。図ありと図なしで別のグリッドにする。
         列数は**項目数に合わせて詰める**（auto-fit は空いた列をつぶす）。
         3列固定にすると、2枚しかないガス工事の節で右端が空いてしまう。 ---- */
.ktt .kt-spec--ph { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ktt .kt-spec--tx { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 12px; }
.ktt .kt-spec--tx > li { border-left: 3px solid var(--c-mid); }
@media screen and (max-width: 767px) {
.ktt .kt-cap__w { min-height: 3.4em; }
.ktt .kt-cap__s { min-height: 3.4em; }
}

/* ---- ⑨ ランキングのカード。型番が1行のものと2行のものが混ざると、
         件数バーと価格の位置がカードごとにずれる。下端でそろえる。 ---- */
.ktt .kt-pod__b { flex: 1 1 auto; display: flex; flex-direction: column; }
.ktt .kt-pod__g { margin-top: auto; }

/* ---- ⑩ 価格一覧の順位。1〜3位は金・銀・銅にする（ランキングの表彰台と同じ色）。
         4位以下はオレンジのまま。棒の色もバッジに合わせる。 ---- */
.ktt .kt-plist__l > li.is-r1 .kt-plist__r {
	background: linear-gradient(160deg, #e6c964 0%, #c9a227 48%, #a17d16 100%);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.ktt .kt-plist__l > li.is-r2 .kt-plist__r { background: #9aa0a5; }
.ktt .kt-plist__l > li.is-r3 .kt-plist__r { background: #b08152; }
.ktt .kt-plist__l > li.is-r1 .kt-plist__t i { background: #c9a227; }
.ktt .kt-plist__l > li.is-r2 .kt-plist__t i { background: #9aa0a5; }
.ktt .kt-plist__l > li.is-r3 .kt-plist__t i { background: #b08152; }

/* ---- ⑪ タイプカード。代表画像は 500x500 の商品写真でそろえたので、
         同じ枠に中央で収めれば3枚が同じ見え方になる。
         見出しの小さいリンナイロゴは外した（3タイプともリンナイなので情報が無い）。 ---- */
.ktt .kt-brand__h { grid-template-columns: minmax(0, 1fr); }
.ktt .kt-brand__ph img { aspect-ratio: 4 / 3; padding: 4px; }
@media screen and (max-width: 767px) {
.ktt .kt-brand__ph img { aspect-ratio: 3 / 2; }
}

/* ---- ⑫ タイプカードの代表画像は背景のある写真にしたので、余白を作らず枠いっぱいに敷く ---- */
.ktt .kt-brand__ph img { aspect-ratio: 4 / 3; object-fit: cover; padding: 0; }
@media screen and (max-width: 767px) {
.ktt .kt-brand__ph img { aspect-ratio: 2 / 1; }
}

/* =============================================================================
 *  ⑬ お見積り／電話のボタンは**サイト共通の緑**。商材やページのアクセント色に
 *     追随させない。series.css の .dw2-btn--primary / --tel と同じ指定にそろえる。
 *       緑     #34aa34（--dw2-green）
 *       濃い緑 #208d14（--dw2-green-dark）
 *       hover  #207720 / #f2fbf2
 * ========================================================================== */
.ktt .kt-cta__p { background: #41b033; border: 2px solid #2f8a26; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .32); }
.ktt .kt-cta__p:hover { background: #2f8a26; color: #fff; }
.ktt .kt-cta__t { background: #fff; border: 2px solid #2f8a26; color: #2f8a26; }
.ktt .kt-cta__t:hover { background: #f1faee; color: #208d14; }

/* ---- ⑭ ガス配管工事の施工例。番号バッジは使わない（工程ではなく別々の現場の例） ---- */
.ktt .kt-step6__n { display: none; }

/* ---- ⑮ タイプカードの「工事費込み…円〜」とボタンを下端でそろえる。
         いままでボタンだけ margin-top:auto だったので、金額の位置が
         上の一覧の行数でずれていた。 ---- */
.ktt .kt-brand__p { margin-top: auto; }
.ktt .kt-brand__a { margin-top: 10px; }

/* ---- ⑯ 比較表のセルは上下中央に置く。項目名が2〜3行になる行で、
         値だけ上に張り付いて見えていた。 ---- */
.ktt .kt-cmpt tbody th,
.ktt .kt-cmpt tbody td { vertical-align: middle; }

/* ---- ⑰ 施工事例カードの中身。ラベル（工事区分／既設の機器なし／設置後）は付けない。
         お支払総額は数字を大きく赤にして、いちばん知りたい情報を目立たせる。 ---- */
.ktt .kt-case__k {
	display: inline-block; margin: 0 0 5px; padding: 1px 8px;
	background: var(--c-panel); border-left: 3px solid var(--c-mk);
	font-size: 12px; font-weight: bold; line-height: 1.65; color: var(--c-navy);
}
.ktt .kt-case__k.is-new { background: #eef6ee; border-left-color: #2f7a33; color: #2f7a33; }
.ktt .kt-case__g { margin: 0 0 4px; font-size: 13px; font-weight: bold; line-height: 1.5; color: var(--c-mk); }
.ktt .kt-case__g em { font-style: normal; margin-left: 5px; color: var(--c-ink); }
.ktt .kt-case__y { margin: 0; font-size: 12px; color: var(--c-sub); line-height: 1.4; }
.ktt .kt-case__y b { margin: 0 1px 0 4px; font-size: 21px; color: var(--c-red); font-variant-numeric: tabular-nums; }
.ktt .kt-case__y small { margin-left: 5px; font-size: 11px; }
@media screen and (max-width: 767px) {
.ktt .kt-case__k { font-size: 11px; }
.ktt .kt-case__g { font-size: 12px; }
.ktt .kt-case__y b { font-size: 18px; }
}

/* ---- ⑲ 施工事例の工事区分バッジ。新規設置＝緑、交換＝タイプ色。
         交換のときは既存機器（メーカー・型番）を必ず併記する。 ---- */
.ktt .kt-case__k.is-swap { background: var(--c-panel); border-left-color: var(--c-mk); color: var(--c-sub); }
.ktt .kt-case__k.is-swap b { color: var(--c-ink); font-weight: bold; }

/* ---- ⑳ 施工事例カード。文章量が違ってもお支払総額の行を下端でそろえる。 ---- */
.ktt .kt-case > li { display: flex; flex-direction: column; }
.ktt .kt-case__b { flex: 1 1 auto; display: flex; flex-direction: column; }
.ktt .kt-case__y { margin-top: auto; padding-top: 6px; }
.ktt .kt-case__y > span { margin-right: 2px; }

/* ---- ㉑ 横長（3:2）の図版を使うカード。1:1に切り抜くと文字や被写体が切れるので、
         枠を横長にして全体を収める（切り取らない）。2026-09-21 指摘。 ---- */
.ktt .kt-size--wide .kt-size__ph { flex: 0 0 150px; }
.ktt .kt-size--wide .kt-size__ph img { object-fit: contain; background: var(--c-panel);
}
@media screen and (max-width: 767px) {
.ktt .kt-size--wide .kt-size__ph { flex-basis: 118px; }
}
@media screen and (max-width: 480px) {
.ktt .kt-size--wide .kt-size__ph { flex-basis: auto; max-width: 100%; }
.ktt .kt-size--wide .kt-size__ph img {}
}

/* ---- ㉒ 図版の下が大きく空いていたのを直す。
         画像を左に回り込ませ、本文が画像の下まで回り込むようにする
         （2カラムのままだと画像の下が丸ごと余白になる）。2026-09-21 指摘。 ---- */
.ktt .kt-size--wide > li { display: block; }
.ktt .kt-size--wide > li::after { content: ""; display: block; clear: both; }
.ktt .kt-size--wide .kt-size__ph {
	float: left; width: 100%; margin: 0 0px 10px 0;
}
.ktt .kt-size--wide .kt-size__b { display: block; }
.ktt .kt-size--wide .kt-size__t,
.ktt .kt-size--wide .kt-size__c,
.ktt .kt-size--wide .kt-size__d,
.ktt .kt-size--wide .kt-size__x { margin-left: 0; }
@media screen and (max-width: 767px) {
.ktt .kt-size--wide .kt-size__ph { width: 128px; margin: 0 10px 7px 0; }
}
@media screen and (max-width: 480px) {
.ktt .kt-size--wide .kt-size__ph { float: none; width: 100%; margin: 0 0 8px; }
}

/* ---- ㉓ 施工事例の1行目（地域／住まい／時期）は1行のものと2行のものが混ざるので、
         2行ぶんの高さを確保して、下の工事区分バッジ以降の位置をそろえる。 ---- */
.ktt .kt-case__m { line-height: 1.7; min-height: 3.4em; }

/* ---- ㉔ 「選ばれる理由」だけ3列にする（#reason に限定。ほかの .kt-size には影響させない）。
         2026-09-21 指摘。3項目なので3列で1行に収まる。 ---- */
#reason .kt-size--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 900px) {
#reason .kt-size--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
#reason .kt-size--wide { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * デラックスタイプの特長（.kt-feat）
 *   このページは左に太いボーダーを引くカード（.kt-spec--tx / .kt-alt / .kt-abt）が
 *   多いので、ここは**大きな通し番号を薄く敷いた雑誌風**にして単調さを避ける。
 *   2026-09-21 指摘。
 * -------------------------------------------------------------------------- */
.ktt .kt-feat {
	list-style: none; margin: 0 0 4px; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.ktt .kt-feat > li {
	position: relative; overflow: hidden; margin: 0; padding: 15px 16px 16px;
	background: #fff; border: 1px solid var(--c-line);
}
.ktt .kt-feat > li::before { content: none; }
/* 通し番号。読み上げには出さない飾りなので、HTML側で aria-hidden にしている。 */
.ktt .kt-feat__n {
	position: absolute; right: 4px; top: -14px; z-index: 0;
	font-size: 64px; font-weight: bold; line-height: 1; letter-spacing: -.03em;
	color: var(--c-rail); font-variant-numeric: tabular-nums; user-select: none;
}
.ktt .kt-feat__t {
	position: relative; z-index: 1;
	margin: 0 0 9px; padding-bottom: 9px; border-bottom: 2px solid var(--c-mk);
	font-size: 15px; font-weight: bold; line-height: 1.45; color: var(--c-navy);
	display: flex; align-items: flex-start; gap: 8px;
}
.ktt .kt-feat__i {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; color: var(--c-mk);
}
.ktt .kt-feat__i .kt-i { width: 21px; height: 21px; }
.ktt .kt-feat__d { position: relative; z-index: 1; margin: 0; font-size: 13px; line-height: 1.85; }
@media screen and (max-width: 900px) {
.ktt .kt-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
.ktt .kt-feat { grid-template-columns: 1fr; gap: 8px; }
.ktt .kt-feat__n { font-size: 52px; top: -10px; }
.ktt .kt-feat__t { font-size: 14px; }
.ktt .kt-feat__d { font-size: 12.5px; }
}

/* -----------------------------------------------------------------------------
 * 排湿の経路が作れないときの選択肢（.kt-alt）を作り直す
 *   左に太いボーダーを引くカードがページ内で続くので、ここは
 *   **上辺に色を敷き、左上に CASE タグを載せる**形にする。2026-09-21 指摘。
 *   タグは CSS カウンタで出すので HTML は変えていない。
 * -------------------------------------------------------------------------- */
.ktt .kt-alt { counter-reset: kt-alt; }
.ktt .kt-alt > li {
	position: relative; counter-increment: kt-alt;
	border: 1px solid var(--c-line); border-top: 3px solid var(--c-mid);
	padding: 32px 15px 14px;
}
.ktt .kt-alt > li::after {
	content: "CASE " counter(kt-alt);
	position: absolute; left: 0; top: 0;
	padding: 2px 11px 3px; background: var(--c-mid); color: #fff;
	font-size: 11px; font-weight: bold; line-height: 1.6; letter-spacing: .04em;
}
/* 見出しの下線は点線をやめ、本文と間を空けるだけにする（線が多いと重くなる） */
.ktt .kt-alt__h { border-bottom: 0; padding-bottom: 0; margin-bottom: 7px; }
.ktt .kt-alt__i { background: transparent; width: 22px; height: 22px; }
.ktt .kt-alt__i .kt-i { width: 20px; height: 20px; }

/* -----------------------------------------------------------------------------
 * スマホのメイン画像は画面の端まで伸ばす
 *   ガスコンロ・食洗機など他商材の #mainImg（.gasconro_img / .dishwasher_img）と
 *   同じ手法（margin: 0 calc(50% - 50vw)）にそろえる。2026-09-21 指摘。
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
.ktt .kt-hero { margin: 0 calc(50% - 50vw); }
.ktt .kt-hero img { width: 100vw; max-width: none; }
}

/* ---- 選び方ナビの見出しが枠からはみ出す。nowrap をやめて折り返す。2026-09-21 指摘。 ---- */
.ktt .kt-nav__x b { white-space: normal; overflow-wrap: anywhere; }
.ktt .kt-nav__x small,
.ktt .kt-nav__x em { overflow-wrap: anywhere; }

/* =============================================================================
 * 10年保証の枠（2026-10-13 商品詳細の .pd-grt2 と同じ見た目に統一）
 *   「全品」は白い札、10を大きく。色は商品詳細と同じ緑 #209512。全商材TOPで共通。
 *   見出しの中身：<span class="kt-grt__b">全品</span><b>10</b><em>年</em>保証<small>…</small>
 * ========================================================================== */
.ktt .kt-grt { border: 2px solid #209512; background: #fff; }
.ktt .kt-grt__h {
	display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 11px 15px;
	background: #209512; color: #fff; font-size: 20px; font-weight: bold; line-height: 1.2; text-shadow: none;
}
.ktt .kt-grt__b { padding: 2px 9px; background: #fff; color: #209512; font-size: 14px; border-radius: 2px; }
.ktt .kt-grt__h b { font-size: 40px; letter-spacing: -.02em; color: #fff; margin: 0; }
.ktt .kt-grt__h em { font-style: normal; font-size: 19px; font-weight: bold; color: #fff; margin: 0; }
.ktt .kt-grt__h small { margin-left: auto; font-size: 11.5px; font-weight: normal; text-align: right; line-height: 1.5; color: #fff; }
.ktt .kt-grt__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ktt .kt-grt__l > li { margin: 0; padding: 10px 13px 12px; border-left: 1px solid #e4e9ee; border-top: 0; font-size: 11.5px; line-height: 1.7; color: #5a6b78; }
.ktt .kt-grt__l > li:first-child { border-left: 0; }
.ktt .kt-grt__l > li::before { content: none; }
.ktt .kt-grt__l b { display: block; font-size: 13px; line-height: 1.5; color: #209512; }
.ktt .kt-grt__l b::before {
	content: ""; display: inline-block; width: 9px; height: 5px; margin-right: 6px; vertical-align: 3px;
	border-left: 2px solid #209512; border-bottom: 2px solid #209512; transform: rotate(-45deg);
}
.ktt .kt-grt__l span { display: block; margin: 0; font-size: 11.5px; line-height: 1.7; color: #5a6b78; }
@media screen and (max-width: 767px) {
	.ktt .kt-grt__h { flex-wrap: wrap; padding: 9px 11px; font-size: 17px; }
	.ktt .kt-grt__h b { font-size: 32px; }
	.ktt .kt-grt__h em { width: auto; margin: 0; text-align: left; }
	.ktt .kt-grt__h small { width: 100%; margin-left: 0; text-align: left; }
	.ktt .kt-grt__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ktt .kt-grt__l > li { padding: 10px 13px 12px; }
	.ktt .kt-grt__l > li:nth-child(2n+1) { border-left: 0; }
	.ktt .kt-grt__l > li:nth-child(n+3) { border-top: 1px solid #e4e9ee; }
}


/* ---- 2026-10-14 サマリ帯の行をそろえる（指摘「横の行がそろってない見ずらい」・全商材TOP共通）----
   ラベル（dt）・数字（b＋単位em）・注記（dd span）を、帯の全マスで共通の3行にする（subgrid）。
   以前は1マスごとに上下中央ぞろえで、数字が「円〜」で折り返したマスだけ行がずれていた。数字と単位は折り返さない。 */
.ktt .kt-kpi { grid-auto-rows: auto; row-gap: 0; }
.ktt .kt-kpi > div { grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; row-gap: 0; column-gap: 9px; }
.ktt .kt-kpi__i { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; }
.ktt .kt-kpi dt { grid-column: 2; grid-row: 1; align-self: end; }
.ktt .kt-kpi dd { grid-column: 2; grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
.ktt .kt-kpi dd b { grid-row: 1; grid-column: 1; font-size: 23px; white-space: nowrap; }
.ktt .kt-kpi dd em { grid-row: 1; grid-column: 2; white-space: nowrap; }
.ktt .kt-kpi dd span { grid-row: 2; grid-column: 1 / -1; align-self: start; }
@media screen and (max-width: 767px) {
	.ktt .kt-kpi > div { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
	.ktt .kt-kpi__i { width: 26px; height: 26px; }
	.ktt .kt-kpi dd b { font-size: 20px; }
}

/* ---- 2026-10-14 サマリ帯の配色（指摘「背景の色もよくない。もっと見やすい色に。おしゃれに」）----
   塗りつぶしの水色＋白文字をやめ、うすい水色の面＋細い枠に。アイコンは水色の丸に白、数字は濃い紺で読みやすく。 */
.ktt .kt-kpi {
	background: linear-gradient(180deg, #f6fbfe 0%, #eaf5fc 100%); color: #12324a;
	border: 1px solid #cfe6f5; border-radius: 12px; overflow: hidden;
}
.ktt .kt-kpi > div { border-left: 1px solid #d9ebf7; padding-top: 13px; padding-bottom: 14px; }
.ktt .kt-kpi > div:first-child { border-left: 0; }
.ktt .kt-kpi__i {
	border-radius: 50%; color: #fff; background: linear-gradient(135deg, #3cb6ef 0%, #1a8fd0 100%);
	box-shadow: 0 0 0 4px rgba(41, 171, 233, .14);
}
.ktt .kt-kpi__i svg { stroke: #fff; }
.ktt .kt-kpi dt { color: #4f6b80; font-weight: bold; letter-spacing: .02em; }
.ktt .kt-kpi dd b { color: #0b3a5c; }
.ktt .kt-kpi dd em { color: #0b3a5c; }
.ktt .kt-kpi > div:first-child dd b, .ktt .kt-kpi > div:first-child dd em { color: #d7000f; }
.ktt .kt-kpi dd span { color: #6b8193; }
@media screen and (max-width: 767px) {
	.ktt .kt-kpi > div:nth-child(n+3) { border-top: 1px solid #d9ebf7; }
	.ktt .kt-kpi > div:nth-child(3) { border-left: 0; }
}

/* =============================================================================
 * 2026-10-14 カードの作り直し（指摘「左の太いボーダーデザインやめろって言ったよな」
 *   「排湿の経路と壁の穴…ここもデザイン変えろ」「ガスコンセント増設工事…ここも！」）
 *   左に太い線を引くカードをページから無くす。サマリ帯（.kt-kpi）と同じ
 *   うすい水色の枠・角丸12px・水色の丸アイコン／番号で1つの見た目にそろえる。
 * ========================================================================== */
.ktt {
	--kt-b1: #3cb6ef; --kt-b2: #1a8fd0;		/* 丸アイコン・番号のグラデーション */
	--kt-bl: #d6e8f5;						/* 枠 */
	--kt-tint: #f4f9fd;						/* うすい面 */
	--kt-ink: #12324a;						/* 見出しの文字 */
}
/* 丸アイコン・丸番号（共通） */
.ktt .kt-abt__n, .ktt .kt-spec__i, .ktt .kt-alt__i {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%;
	background: linear-gradient(135deg, var(--kt-b1) 0%, var(--kt-b2) 100%); color: #fff;
	box-shadow: 0 0 0 4px rgba(41, 171, 233, .13);
}
.ktt .kt-spec__i .kt-i, .ktt .kt-alt__i .kt-i { width: 18px; height: 18px; color: #fff; }

/* 乾太くんとは（.kt-abt） */
.ktt .kt-abt { gap: 14px; }
.ktt .kt-abt > li { padding: 16px 18px 17px; background: #fff; border: 1px solid var(--kt-bl); border-radius: 12px; }
.ktt .kt-abt__h { align-items: center; gap: 11px; margin: 0 0 9px; padding-bottom: 0; border-bottom: 0; }
.ktt .kt-abt__n { font-size: 13px; letter-spacing: 0; }
.ktt .kt-abt__t { font-size: 15.5px; color: var(--kt-ink); }

/* 排湿の経路・ガス工事の内容（.kt-spec） */
.ktt .kt-spec { gap: 14px; }
.ktt .kt-spec > li, .ktt .kt-spec--tx > li { border: 1px solid var(--kt-bl); border-radius: 12px; background: #fff; }
.ktt .kt-spec--tx > li { background: var(--kt-tint); }
.ktt .kt-spec__ph { background: var(--kt-tint); border-bottom: 1px solid var(--kt-bl); }
.ktt .kt-spec__b { padding: 14px 16px 15px; }
.ktt .kt-spec__h { gap: 10px; margin: 0 0 8px; padding-bottom: 0; border-bottom: 0; font-size: 15px; color: var(--kt-ink); }

/* 置けないときの提案（.kt-alt）。CASE は角丸の札をカードの中の左上に置く */
.ktt .kt-alt { gap: 14px; }
.ktt .kt-alt > li { border: 1px solid var(--kt-bl); border-radius: 12px; background: #fff; padding: 48px 18px 16px; }
.ktt .kt-alt > li::after {
	left: 18px; top: 16px; padding: 2px 12px 3px; border-radius: 999px;
	background: var(--kt-tint); border: 1px solid var(--kt-bl); color: var(--kt-b2); letter-spacing: .06em;
}
.ktt .kt-alt__h { align-items: center; gap: 10px; margin-bottom: 9px; font-size: 15px; color: var(--kt-ink); }

/* ガスコンセント増設のキャッチ帯（.kt-gas__c）。濃いグレーの塗りをやめる */
.ktt .kt-gas__c {
	gap: 16px; padding: 16px 20px; border-radius: 12px; color: var(--kt-ink);
	background: linear-gradient(135deg, #e6f4fc 0%, #f6fbfe 100%); border: 1px solid var(--kt-bl);
}
.ktt .kt-gas__c > .kt-i {
	width: 48px; height: 48px; padding: 12px; box-sizing: border-box; border-radius: 50%; color: #fff;
	background: linear-gradient(135deg, var(--kt-b1) 0%, var(--kt-b2) 100%); box-shadow: 0 0 0 5px rgba(41, 171, 233, .13);
}
.ktt .kt-gas__c b { color: #0b3a5c; }
.ktt .kt-gas__c strong { color: var(--kt-b2); }
.ktt .kt-gas__c em { color: #5a7184; opacity: 1; }

/* ほかの左の太い線も外す（関連リンク・施工事例の札） */
.ktt .kt-rel a { border: 1px solid var(--kt-bl); border-radius: 10px; }
.ktt .kt-case__k { border-left: 0; border-radius: 999px; padding: 1px 10px; background: var(--kt-tint); color: var(--kt-b2); }

/* 4枚のときは3列だと右が空くので2列×2段（ガス工事の内容が4枚） */
.ktt .kt-spec:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 施工例の写真カードも同じ角丸・枠に */
.ktt .kt-step6 > li { border: 1px solid var(--kt-bl); border-radius: 12px; overflow: hidden; }

@media screen and (max-width: 767px) {
	.ktt .kt-abt > li { padding: 13px 14px 14px; }
	.ktt .kt-spec__b { padding: 12px 14px 13px; }
	.ktt .kt-alt > li { padding: 44px 14px 14px; }
	.ktt .kt-alt > li::after { left: 14px; top: 13px; }
	.ktt .kt-gas__c { padding: 13px 14px; gap: 12px; }
	.ktt .kt-gas__c > .kt-i { width: 42px; height: 42px; padding: 10px; }
}

/* ---- 2026-10-14 上のブロックとくっつけない（他の商材と同じ） ---- */
.ktt .kt-kpi { margin-top: 16px; }
@media screen and (max-width: 767px) { .ktt .kt-kpi { margin-top: 12px; } }