@charset "utf-8";
/* =============================================================================
   ガス給湯器TOP 専用
     /maker/css/kyutou_top.css

   【このファイルの立ち位置】
   ・使ってよい土台は /maker/css/series.css（.dw2-* の商材共通UI）と
     /maker/css/kyutou_series.css（給湯器の色）だけ。
   ・メーカーTOPの /maker/css/kyutou_maker.css（.mk-*）は読み込まない。
     商材TOPはメーカーTOPと同じ見た目にしない（利用者が自分の居場所を
     見失うため）。ここで定義する部品はすべて .gt- を頭に付ける。
   ・ここに書いた指定が他のページへ漏れないよう、すべて
     .dw2.kyutou-top を先頭に付けて閉じる。

   【メーカーTOPと変えているところ】
     ・ファーストビュー … 帯写真を置かず、濃紺の面に「型番を入れる欄」を直接置く
     ・売れ筋ランキング … 1〜3位を金・銀・銅の大きな枠で出す（このページの柱）
     ・タイプ       … 3列のカードではなく、図が左・中身が右の横長の行
     ・メーカー     … 色の帯を頭に付けた3本の縦枠
   ========================================================================== */

.dw2.kyutou-top {
	--gt-navy:    #12324f;
	--gt-navy-d:  #0b2338;
	--gt-line:    #dfe4e9;
	--gt-soft:    #f5f7f9;
	--gt-gold:    #b8901f;
	--gt-gold-bg: #fdf6e3;
	--gt-silv:    #78838c;
	--gt-silv-bg: #f3f5f7;
	--gt-bron:    #9c6434;
	--gt-bron-bg: #faf2ea;
}

/* -----------------------------------------------------------------------------
 * ファーストビュー
 *   写真は置かない。3メーカーをまたぐこのページに当てはまる素材が無いため。
 *   代わりに「いまの型番を入れる欄」を最初に見える場所へ出す。
 * -------------------------------------------------------------------------- */
/* ファーストビュー。
   メイン画像は枠いっぱいに上へ。余白の中に入れて小さく出さない
   （ガスコンロのメーカーページ .mk-fv と同じ出し方にそろえる）。 */
.dw2.kyutou-top .gt-hero {
	position: relative; overflow: hidden;
	border-radius: var(--dw2-radius-lg);
	background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-navy-d) 100%);
	color: #fff;
}
.dw2.kyutou-top .gt-hero__ph { margin: 0; background: #0b2338; }
.dw2.kyutou-top .gt-hero__ph picture { display: block; }
.dw2.kyutou-top .gt-hero__ph img { display: block; width: 100%; height: auto; }
.dw2.kyutou-top .gt-hero__body { padding: 22px 26px 24px; }
/* PC用の画像がまだ無いときは、SP用をPCで出さない（引き伸ばすと粗い）。 */
.dw2.kyutou-top .gt-hero.is-sponly .gt-hero__ph { display: none; }
.dw2.kyutou-top .gt-hero__eye {
	margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; color: #9fc4e4;
}
.dw2.kyutou-top .gt-hero__t {
	margin: 0 0 10px; font-size: 27px; font-weight: bold; line-height: 1.4; color: #fff;
}
.dw2.kyutou-top .gt-hero__t em { font-style: normal; color: #ffd466; }
.dw2.kyutou-top .gt-hero__l {
	margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: #d7e3ec;
}
.dw2.kyutou-top .gt-hero__l strong { color: #fff; }

/* 型番を入れる欄。ファーストビューの中に置く。 */
.dw2.kyutou-top .gt-find {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--dw2-radius); padding: 14px 16px 12px;
}
.dw2.kyutou-top .gt-find__t {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 9px; font-size: 14.5px; font-weight: bold; color: #fff;
}
.dw2.kyutou-top .gt-find__t .gt-ico {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: 0 0 auto;
	background: #ffd466; color: var(--gt-navy-d); border-radius: 50%;
}
.dw2.kyutou-top .gt-find__t .gt-ico .dw2-ic { width: 15px; height: 15px; }
.dw2.kyutou-top .gt-find__f { display: flex; gap: 8px; }
.dw2.kyutou-top .gt-find__f input[type="search"] {
	flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px;
	font-size: 15px; color: var(--dw2-ink); background: #fff;
	border: 0; border-radius: var(--dw2-radius); -webkit-appearance: none; appearance: none;
}
.dw2.kyutou-top .gt-find__f button {
	flex: 0 0 auto; height: 44px; padding: 0 20px; cursor: pointer;
	font-size: 14.5px; font-weight: bold; color: var(--gt-navy-d);
	background: #ffd466; border: 0; border-radius: var(--dw2-radius);
}
.dw2.kyutou-top .gt-find__n { margin: 8px 0 0; font-size: 11.5px; line-height: 1.7; color: #bdd0de; }
.dw2.kyutou-top .gt-find__n a { color: #ffd466; }

/* 数字の4枠。ヒーローの外に置く。
   【白い面にしない／取り扱いメーカーの枠（.gt-mkentry）と同じ形にしない】
   あちらは<白い面＋頭の色帯>。こちらは<色で塗った面＋白ぬきの数字>にして、
   同じページの中で別のものだと一目で分かるようにする。
   色は HTML 側の --gt-tone で渡す（ここで4つ書き分けない）。 */
.dw2.kyutou-top .gt-num {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.dw2.kyutou-top .gt-num > li {
	position: relative; overflow: hidden;
	padding: 15px 17px 16px;
	border: 0; border-radius: 10px;
	background: var(--gt-tone, var(--gt-navy));
	color: #fff;
}
.dw2.kyutou-top .gt-num dl { position: relative; z-index: 1; margin: 0; }

/* 絵は読むものではないので、枠のすみに地紋として薄く敷く。 */
.dw2.kyutou-top .gt-num__ic {
	position: absolute; top: 50%; right: -8px; transform: translateY(-50%);
	color: #fff; opacity: .16;
}
.dw2.kyutou-top .gt-num__ic .dw2-ic { width: 66px; height: 66px; stroke-width: 1.4; }

/* 見出し。文字は2行ぶんの高さを確保する
   （1行と2行が混ざると数字の位置がずれて読みにくい）。 */
.dw2.kyutou-top .gt-num dt {
	margin: 0 0 9px; height: 2.9em; overflow: hidden;
	font-size: 12.5px; font-weight: bold; line-height: 1.45;
	color: rgba(255, 255, 255, .88);
}

/* 数字。単位とのあいだで改行させない（「14,839」と「件」を割らない）。 */
.dw2.kyutou-top .gt-num dd { margin: 0; line-height: 1.1; white-space: nowrap; }
.dw2.kyutou-top .gt-num dd b {
	font-size: 30px; font-weight: bold; line-height: 1.05; color: #fff;
	font-feature-settings: "tnum"; letter-spacing: -.015em;
}
.dw2.kyutou-top .gt-num dd em {
	font-style: normal; font-weight: bold; font-size: 13px;
	margin-left: 3px; color: rgba(255, 255, 255, .9);
}
.dw2.kyutou-top .gt-num dd b,
.dw2.kyutou-top .gt-num dd em { white-space: nowrap; }
/* 年月は数字より字数が多いので小さくする。30px のままだと枠からはみ出す。 */
.dw2.kyutou-top .gt-num dd b.is-sm { font-size: 20px; letter-spacing: -.02em; }

/* 注記。数字と線で区切って、別の情報だと分かるようにする。 */
.dw2.kyutou-top .gt-num dd.gt-num__sub {
	margin-top: 11px; padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .3);
	font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .88);
	white-space: normal;
	/* 「ノーリツ」のような語の途中で折り返さない（折るのは・や／のところ）。 */
	word-break: keep-all;
}
/* 金額と単位、件数と単位は必ず同じ行に置く。 */
.dw2.kyutou-top .gt-num .gt-nw { white-space: nowrap; }

/* 満足度は数字だけだと高低が分からないので星でも出す。 */
.dw2.kyutou-top .gt-num__st {
	position: relative; display: block; width: max-content;
	margin-top: 2px; font-size: 14px; line-height: 1.45;
	letter-spacing: .06em; white-space: nowrap;
}
.dw2.kyutou-top .gt-num__st::before { content: "★★★★★"; color: rgba(255, 255, 255, .35); }
.dw2.kyutou-top .gt-num__st i {
	position: absolute; top: 0; left: 0; overflow: hidden;
	font-style: normal; color: #ffd466;
}
.dw2.kyutou-top .gt-num__st i::before { content: "★★★★★"; }

/* 選び方は3つ、という案内。
   番号を丸で大きく出し、段ごとに色を変えて、3つの手順だと一目で分かるようにする。 */
.dw2.kyutou-top .gt-step {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.dw2.kyutou-top .gt-step > li {
	position: relative; display: flex; flex-direction: column;
	padding: 26px 16px 16px; background: #fff;
	border: 2px solid var(--gt-st, var(--gt-navy)); border-radius: 14px;
}
.dw2.kyutou-top .gt-step > li.is-s1 { --gt-st: #16537a; --gt-stbg: #eaf2f8; }
.dw2.kyutou-top .gt-step > li.is-s2 { --gt-st: #1f7a5a; --gt-stbg: #e9f5f0; }
.dw2.kyutou-top .gt-step > li.is-s3 { --gt-st: #b8721f; --gt-stbg: #fbf1e3; }

/* 番号の丸。枠の上にまたがせて目立たせる。 */
.dw2.kyutou-top .gt-step__n {
	position: absolute; top: -15px; left: 14px;
	display: inline-flex; align-items: baseline; gap: 5px;
	padding: 4px 13px 5px; border-radius: 999px;
	background: var(--gt-st, var(--gt-navy)); color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.dw2.kyutou-top .gt-step__n em { font-style: normal; font-size: 10.5px; font-weight: bold; letter-spacing: .08em; }
.dw2.kyutou-top .gt-step__n b { font-size: 17px; font-weight: bold; line-height: 1; }

/* つぎへ進む矢印 */
.dw2.kyutou-top .gt-step > li::after {
	content: ""; position: absolute; top: 50%; right: -13px; z-index: 1;
	width: 11px; height: 11px; margin-top: -6px;
	border-top: 3px solid var(--gt-st, var(--gt-navy));
	border-right: 3px solid var(--gt-st, var(--gt-navy));
	border-radius: 2px; transform: rotate(45deg);
}
.dw2.kyutou-top .gt-step > li:last-child::after { content: none; }

.dw2.kyutou-top .gt-step__h {
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 7px; font-size: 16px; font-weight: bold; line-height: 1.35; color: var(--gt-st, var(--gt-navy));
}
.dw2.kyutou-top .gt-step__i {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--gt-stbg, var(--gt-soft)); color: var(--gt-st, var(--gt-navy));
}
.dw2.kyutou-top .gt-step__i .dw2-ic { width: 19px; height: 19px; }
.dw2.kyutou-top .gt-step__d { margin: 0 0 10px; font-size: 12.5px; line-height: 1.75; color: var(--dw2-ink); }
.dw2.kyutou-top .gt-step__a { margin: auto 0 0; padding-top: 4px; text-align: center; }
.dw2.kyutou-top .gt-step__a a {
	display: inline-block; padding: 5px 16px 6px; border-radius: 999px;
	font-size: 12.5px; font-weight: bold; text-decoration: none;
	background: var(--gt-stbg, var(--gt-soft)); color: var(--gt-st, var(--gt-navy));
	border: 1px solid var(--gt-st, var(--gt-navy));
}
.dw2.kyutou-top .gt-step__a a::after { content: " ›"; font-weight: bold; }
.dw2.kyutou-top .gt-step__a a:hover,
.dw2.kyutou-top .gt-step__a a:focus-visible { background: var(--gt-st, var(--gt-navy)); color: #fff; }

/* -----------------------------------------------------------------------------
 * 売れ筋ランキング（このページの柱）
 *   1〜3位は金・銀・銅で大きく、4位以下は1行ずつ。
 *   並べ替えの根拠は当社の完工件数だけ。編集で順番を動かさない。
 * -------------------------------------------------------------------------- */
/* 1〜3位を横に3列で並べる。枠は同じ大きさで、色と数字だけが違う。 */
.dw2.kyutou-top .gt-podium {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.dw2.kyutou-top .gt-podium > li {
	position: relative; display: flex; flex-direction: column; background: #fff;
	border: 2px solid var(--gt-line); border-radius: var(--dw2-radius-lg); overflow: hidden;
}
.dw2.kyutou-top .gt-podium > li.is-r1 { border-color: var(--gt-gold); }
.dw2.kyutou-top .gt-podium > li.is-r2 { border-color: var(--gt-silv); }
.dw2.kyutou-top .gt-podium > li.is-r3 { border-color: var(--gt-bron); }

/* 順位の帯。数字を大きく出す。 */
.dw2.kyutou-top .gt-podium__rank {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 7px 10px; color: #fff; font-weight: bold; letter-spacing: .04em;
}
.dw2.kyutou-top .gt-podium__rank b {
	font-size: 30px; line-height: 1; font-feature-settings: "tnum";
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.dw2.kyutou-top .gt-podium__rank span { font-size: 15px; }
.dw2.kyutou-top .is-r1 .gt-podium__rank { background: linear-gradient(180deg, #d9b040 0%, var(--gt-gold) 100%); }
.dw2.kyutou-top .is-r2 .gt-podium__rank { background: linear-gradient(180deg, #98a2aa 0%, var(--gt-silv) 100%); }
.dw2.kyutou-top .is-r3 .gt-podium__rank { background: linear-gradient(180deg, #b87c46 0%, var(--gt-bron) 100%); }

/* 商品写真は 500×500 なので、上限を決めないと果てしなく大きくなる。
   1位は写真列が240pxなのでその幅、２・3位は枠の高さが伸びすぎないよう押さえる。 */
/* 商品写真は枠の中央に置く。500×500なので上限も決める（決めないと果てしなく大きくなる）。 */
.dw2.kyutou-top .gt-podium__fig { margin: 0; padding: 12px 12px 4px; background: #fff; text-align: center; }
.dw2.kyutou-top .gt-podium__fig img { display: inline-block; width: auto; max-width: 150px; height: auto; }
.dw2.kyutou-top .gt-podium__b { display: flex; flex-direction: column; flex: 1; padding: 0 14px 14px; }
.dw2.kyutou-top .gt-podium__mk { margin: 0 0 2px; font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-podium__md { margin: 0 0 8px; font-size: 15px; font-weight: bold; line-height: 1.35; letter-spacing: -.03em; }
.dw2.kyutou-top .gt-podium__md a { text-decoration: none; }

/* 仕様の札。色で優劣を付けない（全部同じ濃さ）。 */
.dw2.kyutou-top .gt-tags { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.dw2.kyutou-top .gt-tags li {
	font-size: 11px; line-height: 1.6; padding: 1px 8px; color: #33506a;
	background: #eaf1f7; border: 1px solid #cddced; border-radius: 3px;
}

/* 金額。内訳を出してから合計を大きく。 */
.dw2.kyutou-top .gt-price { margin: 0 0 9px; padding: 9px 11px; background: var(--gt-soft); border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-price dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0; font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-price dt { white-space: nowrap; }
.dw2.kyutou-top .gt-price dt { margin: 0; }
.dw2.kyutou-top .gt-price dd { margin: 0; text-align: right; white-space: nowrap; font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-price__tot {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-price__tot span { font-size: 11.5px; font-weight: bold; color: var(--dw2-ink); white-space: nowrap; }
.dw2.kyutou-top .gt-price__tot b { white-space: nowrap; font-size: 21px; font-weight: bold; color: var(--dw2-red); font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-price__tot b em { font-style: normal; font-size: 13px; margin-left: 1px; }

/* 交換件数と、現行品のなかで何％を占めるか。 */
.dw2.kyutou-top .gt-share { margin: 0 0 4px; font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-share b { font-size: 15px; color: var(--gt-navy); font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-bar { display: block; height: 6px; margin: 5px 0 9px; background: #e6ebef; border-radius: 3px; overflow: hidden; }
.dw2.kyutou-top .gt-bar i { display: block; height: 100%; background: var(--gt-navy); border-radius: 3px; }
.dw2.kyutou-top .is-r1 .gt-bar i { background: var(--gt-gold); }
.dw2.kyutou-top .is-r2 .gt-bar i { background: var(--gt-silv); }
.dw2.kyutou-top .is-r3 .gt-bar i { background: var(--gt-bron); }
.dw2.kyutou-top .gt-podium__d { margin: 0 0 10px; font-size: 12.5px; line-height: 1.75; }
.dw2.kyutou-top .gt-podium__a { margin: auto 0 0; }
.dw2.kyutou-top .gt-podium__a .dw2-btn { width: 100%; }

/* 4位から下。1行ずつ並べる。 */
.dw2.kyutou-top .gt-rank { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--gt-line); }
.dw2.kyutou-top .gt-rank > li {
	display: grid; grid-template-columns: 44px 72px minmax(0, 1fr) auto;
	gap: 12px; align-items: center;
	padding: 10px 6px; border-bottom: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-rank__n {
	text-align: center; font-size: 17px; font-weight: bold; color: var(--gt-navy);
	font-feature-settings: "tnum";
}
.dw2.kyutou-top .gt-rank__n span { display: block; font-size: 10px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-rank__f { margin: 0; text-align: center; }
.dw2.kyutou-top .gt-rank__f img { display: inline-block; width: auto; max-width: 100%; height: auto; }
.dw2.kyutou-top .gt-rank__b { min-width: 0; }
.dw2.kyutou-top .gt-rank__md { margin: 0 0 3px; font-size: 14.5px; font-weight: bold; line-height: 1.4; }
.dw2.kyutou-top .gt-rank__md em { font-style: normal; font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); margin-right: 6px; }
.dw2.kyutou-top .gt-rank__s { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-rank__p { text-align: right; white-space: nowrap; font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-rank__p b { display: block; font-size: 17px; color: var(--dw2-red); font-feature-settings: "tnum"; white-space: nowrap; }

/* タイプごとの1位。8タイプを4列×2段で並べる。
   1枚の幅が狭いので、セルの中身も縦積みにする。 */
.dw2.kyutou-top .gt-tyrank {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.dw2.kyutou-top .gt-tyrank > li {
	display: flex; flex-direction: column; padding: 10px 11px 11px;
	background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius);
}
.dw2.kyutou-top .gt-tyrank__f { margin: 0 0 6px; text-align: center; }
.dw2.kyutou-top .gt-tyrank__f img { display: inline-block; width: auto; max-width: 100%; max-height: 100px; height: auto; }
.dw2.kyutou-top .gt-tyrank__t {
	margin: 0 0 4px; padding-bottom: 4px; font-size: 12px; font-weight: bold; line-height: 1.5;
	color: var(--gt-navy); border-bottom: 1px dashed var(--gt-line);
}
.dw2.kyutou-top .gt-tyrank__t span { font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-tyrank__m { margin: 0 0 6px; font-size: 12.5px; font-weight: bold; line-height: 1.45; letter-spacing: -.02em; }
.dw2.kyutou-top .gt-tyrank__m em { display: block; font-style: normal; font-size: 11px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-tyrank__n {
	display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
	margin: auto 0 0; padding-top: 6px; border-top: 1px solid var(--gt-line);
	font-size: 11.5px; color: var(--dw2-ink-sub); font-feature-settings: "tnum";
}
.dw2.kyutou-top .gt-tyrank__n b { font-size: 15px; color: var(--gt-navy); }

/* -----------------------------------------------------------------------------
 * タイプ：図が左・中身が右の横長の行（メーカーTOPの3列カードとは変える）
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-ty { list-style: none; margin: 0; padding: 0; }
.dw2.kyutou-top .gt-ty > li {
	display: grid; grid-template-columns: 210px minmax(0, 1fr) 186px; gap: 18px;
	padding: 16px 0; border-top: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-ty > li:last-child { border-bottom: 1px solid var(--gt-line); }
.dw2.kyutou-top .gt-ty__f { margin: 0; }
.dw2.kyutou-top .gt-ty__f img { display: block; width: 100%; height: auto; border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-ty__b { min-width: 0; }
.dw2.kyutou-top .gt-ty__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.dw2.kyutou-top .gt-ty__h b { font-size: 19px; font-weight: bold; color: var(--gt-navy); }
.dw2.kyutou-top .gt-ty__h span { font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-ty__d { margin: 0 0 9px; font-size: 13px; line-height: 1.8; }

/* できること4つ。○△−を同じ幅で並べる。 */
.dw2.kyutou-top .gt-fn {
	list-style: none; margin: 0 0 9px; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--gt-line); border-radius: var(--dw2-radius); overflow: hidden;
}
.dw2.kyutou-top .gt-fn li {
	padding: 6px 4px; text-align: center; font-size: 11.5px; line-height: 1.5;
	color: #46505a; background: var(--gt-soft); border-left: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-fn li:first-child { border-left: 0; }
.dw2.kyutou-top .gt-fn li::before {
	content: "−"; display: block; font-size: 15px; font-weight: bold; color: #aab3ba; line-height: 1.3;
}
.dw2.kyutou-top .gt-fn li.is-y { background: #fff; }
.dw2.kyutou-top .gt-fn li.is-y::before { content: "○"; color: #1f7a33; }
.dw2.kyutou-top .gt-fn li.is-p { background: #fff; }
.dw2.kyutou-top .gt-fn li.is-p::before { content: "△"; color: #b9770e; }
.dw2.kyutou-top .gt-ty__for { margin: 0; font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-ty__for strong { color: var(--dw2-ink); }

/* 右側：価格帯と、そのタイプを扱っているメーカーの入口 */
.dw2.kyutou-top .gt-ty__s { align-self: start; padding: 11px 12px; background: var(--gt-soft); border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-ty__p { margin: 0 0 3px; font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-ty__p b { display: block; font-size: 19px; color: var(--dw2-red); font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-ty__p b em { font-style: normal; font-size: 12px; }
.dw2.kyutou-top .gt-ty__k { margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--gt-line); font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-ty__l { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dw2.kyutou-top .gt-ty__l a {
	display: block; padding: 5px 10px; font-size: 12.5px; text-decoration: none; text-align: center;
	background: #fff; border: 1px solid var(--dw2-accent); border-radius: var(--dw2-radius);
}

/* -----------------------------------------------------------------------------
 * メーカー：色の帯を頭に付けた3本の縦枠
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-mk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dw2.kyutou-top .gt-mk > li {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--gt-line); border-radius: var(--dw2-radius-lg); overflow: hidden;
}
.dw2.kyutou-top .gt-mk__h { padding: 11px 14px; color: #fff; background: var(--gt-tone, var(--gt-navy)); }
.dw2.kyutou-top .gt-mk__h b { display: block; font-size: 19px; font-weight: bold; line-height: 1.3; }
.dw2.kyutou-top .gt-mk__h span { font-size: 11.5px; opacity: .9; }
.dw2.kyutou-top .gt-mk__b { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 14px; }
.dw2.kyutou-top .gt-mk__d { margin: 0 0 10px; font-size: 12.5px; line-height: 1.8; }
.dw2.kyutou-top .gt-mk__dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: 12px; }
.dw2.kyutou-top .gt-mk__dl dt { margin: 0; color: var(--dw2-ink-sub); white-space: nowrap; }
.dw2.kyutou-top .gt-mk__dl dd { margin: 0; text-align: right; font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-mk__dl dd b { color: var(--dw2-red); font-size: 13.5px; }
.dw2.kyutou-top .gt-mk__a { margin: auto 0 0; }
.dw2.kyutou-top .gt-mk__a .dw2-btn { width: 100%; }

/* -----------------------------------------------------------------------------
 * 目的から選ぶ：3列の帯（メーカーTOPの枠とは作りを変える）
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-use { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dw2.kyutou-top .gt-use > li {
	display: flex; flex-direction: column; padding: 13px 14px 14px; background: #fff;
	border: 1px solid var(--gt-line); border-radius: var(--dw2-radius);
	border-top: 3px solid var(--gt-navy);
}
.dw2.kyutou-top .gt-use__h { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 14.5px; font-weight: bold; color: var(--gt-navy); }
.dw2.kyutou-top .gt-use__h .gt-ico {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 27px; height: 27px; border-radius: 50%; background: var(--gt-navy); color: #fff;
}
.dw2.kyutou-top .gt-use__h .gt-ico .dw2-ic { width: 15px; height: 15px; }
.dw2.kyutou-top .gt-use__d { margin: 0 0 9px; font-size: 12.5px; line-height: 1.7; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-use__l { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.dw2.kyutou-top .gt-use__l a {
	display: inline-block; padding: 4px 11px; font-size: 12.5px; text-decoration: none;
	background: var(--dw2-accent-bg); border: 1px solid #c6dbe9; border-radius: 14px;
}

/* -----------------------------------------------------------------------------
 * 数字のまとまり（施工実績など）
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-box { margin-top: 16px; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius-lg); }
.dw2.kyutou-top .gt-box__h { margin: 0 0 11px; font-size: 15px; font-weight: bold; color: var(--gt-navy); }
.dw2.kyutou-top .gt-box__h span { display: block; font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-box__n { margin: 10px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--dw2-ink-sub); }

.dw2.kyutou-top .gt-stack { display: flex; height: 26px; border-radius: 4px; overflow: hidden; }
.dw2.kyutou-top .gt-stack__s {
	display: flex; align-items: center; justify-content: center; min-width: 2px;
	background: var(--gt-tone, var(--gt-navy)); color: #fff; font-size: 11.5px; font-weight: bold;
}
.dw2.kyutou-top .gt-legend { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
.dw2.kyutou-top .gt-legend li { display: flex; align-items: center; gap: 6px; }
.dw2.kyutou-top .gt-legend li::before { content: ""; width: 11px; height: 11px; border-radius: 2px; background: var(--gt-tone, var(--gt-navy)); }
.dw2.kyutou-top .gt-legend span { color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-legend em { font-style: normal; font-weight: bold; }

.dw2.kyutou-top .gt-pref { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dw2.kyutou-top .gt-pref li { display: flex; align-items: baseline; gap: 5px; padding: 3px 10px; font-size: 12px; background: var(--gt-soft); border: 1px solid var(--gt-line); border-radius: 13px; }
.dw2.kyutou-top .gt-pref li.is-top { background: var(--dw2-accent-bg); border-color: #c6dbe9; }
.dw2.kyutou-top .gt-pref li b { font-weight: bold; }
.dw2.kyutou-top .gt-pref li span { font-size: 11px; color: var(--dw2-ink-sub); font-feature-settings: "tnum"; }

/* 設置のしかたの札 */
.dw2.kyutou-top .gt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dw2.kyutou-top .gt-chips li { display: flex; align-items: baseline; gap: 6px; padding: 4px 11px; font-size: 12.5px; background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-chips li em { font-style: normal; font-weight: bold; color: var(--gt-navy); font-feature-settings: "tnum"; }

/* 気をつけること（2列） */
.dw2.kyutou-top .gt-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
/* 節によっては1枚しか出ない。半分空けたままにしない。 */
.dw2.kyutou-top .gt-notes > .gt-note:only-child { grid-column: 1 / -1; }
.dw2.kyutou-top .gt-note {
	padding: 13px 15px 14px; background: var(--gt-soft);
	border: 1px solid var(--gt-line); border-radius: var(--dw2-radius);
}
.dw2.kyutou-top .gt-note > b { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; color: var(--gt-navy); }
.dw2.kyutou-top .gt-note > b .gt-ico {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 25px; height: 25px; border-radius: 50%; background: var(--gt-navy); color: #fff;
}
.dw2.kyutou-top .gt-note > b .gt-ico .dw2-ic { width: 14px; height: 14px; }
.dw2.kyutou-top .gt-note p { margin: 0; font-size: 12.5px; line-height: 1.85; }

/* 小見出し（節の中で分ける） */
.dw2.kyutou-top .gt-h3 {
	position: relative; margin: 26px 0 12px; padding: 0 0 7px;
	font-size: 17px; font-weight: bold; color: var(--gt-navy); border-bottom: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--gt-navy); }

/* 同じ条件でそろえた価格の表 */
.dw2.kyutou-top .gt-samep td { text-align: right; white-space: nowrap; font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-samep td b { font-size: 17px; color: var(--dw2-ink); }
.dw2.kyutou-top .gt-samep td a { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-samep td.is-lo { background: #eef6ee; }
.dw2.kyutou-top .gt-samep td.is-lo b { color: #1f7a33; }
.dw2.kyutou-top .gt-samep th span { display: block; font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-samep .gt-samep__g th { text-align: left; background: var(--gt-soft); font-size: 12.5px; color: var(--dw2-ink-sub); letter-spacing: .04em; }

/* 交換前メーカー × 交換後メーカーの表 */
.dw2.kyutou-top .gt-mx td { text-align: center; font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-mx td b { font-size: 17px; }
.dw2.kyutou-top .gt-mx td span { display: block; font-size: 11px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-mx td.is-same { background: var(--gt-soft); }
.dw2.kyutou-top .gt-mx td.is-same b { color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-mx th span { display: block; font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); }
/* 2段の見出し。上段の「交換したメーカー」は3列にまたがる。 */
.dw2.kyutou-top .gt-mx thead th[colspan] { text-align: center; }
.dw2.kyutou-top .gt-mx thead th[rowspan] { vertical-align: middle; }
.dw2.kyutou-top .gt-mx thead th .gt-lg { margin-bottom: 2px; }

/* 型番の早見表 */
.dw2.kyutou-top .gt-pfx th { white-space: nowrap; font-family: "Helvetica Neue", Arial, sans-serif; }
.dw2.kyutou-top .gt-pfx th span { display: block; font-family: inherit; font-size: 11px; font-weight: normal; color: var(--dw2-ink-sub); white-space: normal; }
.dw2.kyutou-top .gt-pfx td.is-d { font-size: 12px; color: var(--dw2-ink-sub); }

/* 施工事例 */
.dw2.kyutou-top .gt-case { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dw2.kyutou-top .gt-case > li { background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius-lg); overflow: hidden; }
.dw2.kyutou-top .gt-case a { display: block; text-decoration: none; color: inherit; }
.dw2.kyutou-top .gt-case__ph { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; background: var(--gt-soft); }
.dw2.kyutou-top .gt-case__im { position: relative; display: block; height: 0; padding-top: 75%; overflow: hidden; }
.dw2.kyutou-top .gt-case__im img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.dw2.kyutou-top .gt-case__im em {
	position: absolute; left: 0; bottom: 0; padding: 1px 7px; font-style: normal;
	font-size: 10.5px; color: #fff; background: rgba(0, 0, 0, .6);
}
.dw2.kyutou-top .gt-case__ar { position: relative; display: block; height: 100%; }
.dw2.kyutou-top .gt-case__ar::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px;
	border-top: 2px solid var(--gt-navy); border-right: 2px solid var(--gt-navy); transform: rotate(45deg);
}
.dw2.kyutou-top .gt-case__b { display: block; padding: 11px 13px 13px; }
.dw2.kyutou-top .gt-case__m { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.dw2.kyutou-top .gt-case__m span { font-size: 10.5px; padding: 1px 7px; background: var(--gt-soft); border: 1px solid var(--gt-line); border-radius: 3px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-case__sw { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 12px; }
.dw2.kyutou-top .gt-case__sw i { font-style: normal; display: inline-block; min-width: 3.6em; font-size: 10.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-case__sw b { font-weight: bold; }
.dw2.kyutou-top .gt-case__sw em { font-style: normal; margin-left: 4px; color: var(--dw2-accent); }
.dw2.kyutou-top .gt-case__a { display: block; margin-top: 8px; font-size: 11.5px; color: var(--dw2-accent); text-decoration: underline; }

/* 口コミ */
.dw2.kyutou-top .gt-rev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.dw2.kyutou-top .gt-rev__i { padding: 12px 14px 13px; background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-rev__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 0 0 6px; font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.kyutou-top .gt-rev__h b { font-size: 13px; color: var(--dw2-ink); }
.dw2.kyutou-top .gt-rev__st { color: #f0a500; letter-spacing: .05em; }
.dw2.kyutou-top .gt-rev__b { margin: 0; font-size: 12.5px; line-height: 1.85; }

/* -----------------------------------------------------------------------------
 * スマートフォン
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * メーカーのロゴ
 *   文字だけよりロゴがあったほうが、どのメーカーの話かが一目で分かる。
 *   ページ内のどこでも同じ高さでそろえる（大きさで優劣を付けない）。
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-lg { display: inline-block; width: auto; height: auto; vertical-align: middle; }
.dw2.kyutou-top .gt-lg--s  { height: 15px; width: auto; }
.dw2.kyutou-top .gt-lg--m  { height: 20px; width: auto; }
.dw2.kyutou-top .gt-lg--l  { height: 24px; width: auto; }
/* 濃い色の上に置くロゴは、白い板に載せて色を保つ（ロゴの色を変えない） */
.dw2.kyutou-top .gt-lgbox {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 5px 11px; background: #fff; border-radius: 3px;
}

/* 取り扱いメーカー：写真・ロゴ・メーカー名を1ブロックずつ、3つ並べる。 */
/* 「取り扱いメーカー」の見出し。うすい字だと見出しに見えない。 */
.dw2.kyutou-top .gt-mkentry__h {
	position: relative; margin: 22px 0 11px; padding: 0 0 7px;
	font-size: 17px; font-weight: bold; color: var(--gt-navy);
	border-bottom: 1px solid var(--gt-line);
}
.dw2.kyutou-top .gt-mkentry__h::after {
	content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--gt-navy);
}
.dw2.kyutou-top .gt-mkentry {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.dw2.kyutou-top .gt-mkentry > li {
	background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius-lg); overflow: hidden;
}
.dw2.kyutou-top .gt-mkentry > li { border-top: 3px solid var(--gt-tone, var(--gt-navy)); }
.dw2.kyutou-top .gt-mkentry a { display: block; padding: 12px 14px 13px; text-decoration: none; color: inherit; }
/* 会社（本社）の写真とメーカー名を、頭にひとまとめで置く。 */
.dw2.kyutou-top .gt-mkentry__hd {
	display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 11px; align-items: center;
	padding-bottom: 10px; border-bottom: 1px solid var(--gt-line);
}
/* 素材の下側にロゴが入っているので、建物だけが見えるように上を切り出す。 */
.dw2.kyutou-top .gt-mkentry__hq {
	position: relative; display: block; height: 0; padding-top: 74%;
	overflow: hidden; border-radius: var(--dw2-radius); background: #eef0f2;
}
.dw2.kyutou-top .gt-mkentry__hq img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center top;
}
.dw2.kyutou-top .gt-mkentry__nm { display: block; min-width: 0; }
.dw2.kyutou-top .gt-mkentry__lg { display: block; margin-bottom: 3px; }
.dw2.kyutou-top .gt-mkentry__nm b {
	display: block; font-size: 16px; font-weight: bold; line-height: 1.35;
	color: var(--gt-navy); white-space: nowrap;
}
.dw2.kyutou-top .gt-mkentry__b { display: block; padding-top: 9px; }
.dw2.kyutou-top .gt-mkentry__n,
.dw2.kyutou-top .gt-mkentry__p,
.dw2.kyutou-top .gt-mkentry__t {
	display: block; font-size: 11.5px; line-height: 1.65; color: var(--dw2-ink-sub);
}
.dw2.kyutou-top .gt-mkentry__n { margin-top: 2px; }
.dw2.kyutou-top .gt-mkentry__n em { font-style: normal; font-weight: bold; color: var(--dw2-ink); font-size: 13px; }
.dw2.kyutou-top .gt-mkentry__p em { font-style: normal; font-weight: bold; color: var(--dw2-red); font-size: 15px; }
.dw2.kyutou-top .gt-mkentry__t { margin-top: 4px; overflow-wrap: anywhere; }

/* 表の見出しに入れるロゴは、名前の上に置く。
   行の見出し（左端の列）は左ぞろえ。中央に寄せると読み出しがそろわない。
   列の見出し（上の行）は、その下の数字が中央ぞろえなので中央に置く。 */
.dw2.kyutou-top .dw2-cmp thead th .gt-lg { display: block; margin: 0 auto 3px; }
.dw2.kyutou-top .dw2-cmp tbody th { text-align: left; }
.dw2.kyutou-top .dw2-cmp tbody th .gt-lg { display: block; margin: 0 0 3px; }

/* ランキングの枠に入れるロゴ */
.dw2.kyutou-top .gt-podium__mk { display: flex; align-items: center; gap: 8px; }
.dw2.kyutou-top .gt-rank__md em { display: inline-flex; align-items: center; vertical-align: middle; }

/* -----------------------------------------------------------------------------
 * 2枚並べる図（追いだき と 高温差し湯）
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-figs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
.dw2.kyutou-top .gt-figs2 figure { margin: 0; padding: 12px 14px 13px; background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius); }
.dw2.kyutou-top .gt-figs2 img { display: block; width: 100%; height: auto; }
.dw2.kyutou-top .gt-figs2 figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.75; }
.dw2.kyutou-top .gt-figs2 figcaption b { display: block; margin-bottom: 3px; font-size: 14.5px; color: var(--gt-navy); }

/* -----------------------------------------------------------------------------
 * 図つきで3つ並べる（フルオートとオートのちがい）
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-opts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dw2.kyutou-top .gt-opts > li { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius); overflow: hidden; }
.dw2.kyutou-top .gt-opts figure { margin: 0; background: var(--gt-soft); }
.dw2.kyutou-top .gt-opts figure img { display: block; width: 100%; height: auto; }
.dw2.kyutou-top .gt-opts__b { padding: 11px 13px 13px; }
/* 見出しと札。札は見出しの長さで行が変わらないよう、いつも次の行に置く
   （3枚並べたとき、1枚だけ札の位置が上にずれるのを防ぐ）。 */
.dw2.kyutou-top .gt-opts__t { display: block; margin: 0 0 6px; font-size: 14.5px; font-weight: bold; line-height: 1.45; color: var(--gt-navy); }
.dw2.kyutou-top .gt-opts__t em {
	display: table; margin: 5px 0 0; font-style: normal; font-size: 11px; font-weight: bold;
	padding: 1px 7px; border-radius: 3px; background: var(--dw2-accent-bg);
	color: var(--dw2-accent); border: 1px solid #c6dbe9;
}
.dw2.kyutou-top .gt-opts__t em.is-both { background: #eef6ee; color: #1f7a33; border-color: #cbe3cd; }
.dw2.kyutou-top .gt-opts__d { margin: 0; font-size: 12.5px; line-height: 1.75; }

/* -----------------------------------------------------------------------------
 * 設置のしかた：図つきで並べる
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-setti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.dw2.kyutou-top .gt-setti > li {
	background: #fff; border: 1px solid var(--gt-line); border-radius: var(--dw2-radius);
	transition: box-shadow .15s, border-color .15s;
}
.dw2.kyutou-top .gt-setti > li:hover,
.dw2.kyutou-top .gt-setti > li:focus-within {
	border-color: var(--dw2-accent); box-shadow: 0 2px 8px rgba(18, 50, 79, .14);
}
.dw2.kyutou-top .gt-setti a {
	display: flex; flex-direction: column; align-items: center; height: 100%;
	padding: 9px 6px 10px; text-align: center; text-decoration: none; color: inherit;
}
.dw2.kyutou-top .gt-setti a:hover .gt-setti__n,
.dw2.kyutou-top .gt-setti a:focus-visible .gt-setti__n { color: var(--dw2-accent); text-decoration: underline; }
.dw2.kyutou-top .gt-setti figure { margin: 0 0 6px; }
.dw2.kyutou-top .gt-setti figure img { display: block; width: auto; max-width: 100%; height: auto; }
.dw2.kyutou-top .gt-setti__n { display: block; margin: 0 0 2px; font-size: 11.5px; font-weight: bold; line-height: 1.4; }
.dw2.kyutou-top .gt-setti__v { display: block; margin: auto 0 0; font-size: 11px; color: var(--dw2-ink-sub); font-feature-settings: "tnum"; }
.dw2.kyutou-top .gt-setti__v b { font-size: 14px; color: var(--gt-navy); }


/* -----------------------------------------------------------------------------
 * ブロックどうしの間隔
 *   まとまりが変わるところは必ず離す。詰まっていると1つの塊に見える。
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-step { margin-bottom: 20px; }
.dw2.kyutou-top .gt-mkentry { margin-bottom: 20px; }
.dw2.kyutou-top .dw2-cta { margin: 20px 0; }
.dw2.kyutou-top .dw2-toc { margin-top: 20px; }
.dw2.kyutou-top .gt-podium { margin-bottom: 16px; }
.dw2.kyutou-top .gt-setti { margin-bottom: 4px; }
.dw2.kyutou-top .gt-ty__k + .gt-ty__k { margin-top: 8px; }
.dw2.kyutou-top .gt-ty__k a { font-weight: bold; }

/* いちばん安いマスの王冠。色だけだと見落とすので印を足す。
   順位の金メダルと同じ色にして、意味（1番）をそろえる。 */
.dw2.kyutou-top .gt-lowmk { display: inline-block; margin-right: 4px; vertical-align: 1px; }
.dw2.kyutou-top .gt-crown { display: block; width: 17px; height: 14px; fill: var(--gt-gold); }
.dw2.kyutou-top .gt-samep td.is-lo b { color: #1f7a33; }

/* -----------------------------------------------------------------------------
 * 押せるところは、触れたときに色を変える
 *   枠ごとリンクになっている部品は、見た目が変わらないと押せると分からない。
 *   キーボードで移動したときも同じ見た目にする。
 * -------------------------------------------------------------------------- */
.dw2.kyutou-top .gt-mkentry > li,
.dw2.kyutou-top .gt-case > li,
.dw2.kyutou-top .gt-podium > li { transition: box-shadow .15s, border-color .15s; }
.dw2.kyutou-top .gt-mkentry > li:hover,
.dw2.kyutou-top .gt-mkentry > li:focus-within {
	border-color: var(--gt-tone, var(--dw2-accent));
	box-shadow: 0 2px 10px rgba(18, 50, 79, .16);
}
.dw2.kyutou-top .gt-mkentry a:hover,
.dw2.kyutou-top .gt-mkentry a:focus-visible { background: var(--dw2-accent-bg); }
.dw2.kyutou-top .gt-mkentry a:hover .gt-mkentry__nm b,
.dw2.kyutou-top .gt-mkentry a:focus-visible .gt-mkentry__nm b { color: var(--dw2-accent); text-decoration: underline; }

.dw2.kyutou-top .gt-case > li:hover,
.dw2.kyutou-top .gt-case > li:focus-within {
	border-color: var(--dw2-accent); box-shadow: 0 2px 10px rgba(18, 50, 79, .14);
}
.dw2.kyutou-top .gt-case a:hover .gt-case__a,
.dw2.kyutou-top .gt-case a:focus-visible .gt-case__a { color: var(--dw2-blue-dark); }

/* 枠の中の小さなリンク（タイプの絞り込み・目的から選ぶ・ランキングの型番など） */
.dw2.kyutou-top .gt-ty__l a:hover,
.dw2.kyutou-top .gt-ty__l a:focus-visible,
.dw2.kyutou-top .gt-use__l a:hover,
.dw2.kyutou-top .gt-use__l a:focus-visible {
	background: var(--dw2-accent); border-color: var(--dw2-accent); color: #fff;
}
.dw2.kyutou-top .gt-tyrank > li:hover,
.dw2.kyutou-top .gt-tyrank > li:focus-within,
.dw2.kyutou-top .gt-rank > li:hover,
.dw2.kyutou-top .gt-rank > li:focus-within { background: var(--gt-soft); }
.dw2.kyutou-top .gt-samep td a:hover,
.dw2.kyutou-top .gt-samep td a:focus-visible,
.dw2.kyutou-top .gt-ty__k a:hover,
.dw2.kyutou-top .gt-ty__k a:focus-visible { color: var(--dw2-accent); text-decoration: underline; }

/* ボタンを2つ以上並べる行。共通CSSは text-align:center の inline-block なので、
   タグの間に改行が無いとボタンどうしがくっついてしまう。隙間を持たせる。 */
.dw2.kyutou-top .dw2-morelink {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}

/* =============================================================================
 * 石油給湯器TOP（.dw2.kyutou-top.oil-top）
 *   部品はガス給湯器TOPと同じものをそのまま使い、<色だけ>石油の緑に差し替える。
 *   ガス給湯器は青、石油は緑で、ひと目で別の商材と分かるようにする。
 *   見出し（h2.heading_01）は上書きしない。他の商材ページと同じ共通CSSのまま。
 * ========================================================================== */
.dw2.kyutou-top.oil-top {
	--gt-navy:   #1a6349;
	--gt-navy-d: #0f3d2c;
	--gt-line:   #d3e6dc;
	--gt-soft:   #f2f8f5;
	--dw2-accent:    #1f7a5a;
	--dw2-accent-bg: #eef7f2;
}
/* ファーストビューの濃い面に乗る文字。青系の既定値だと緑の上で濁るので差し替える。 */
.dw2.kyutou-top.oil-top .gt-hero__eye { color: #a6d9c3; }
.dw2.kyutou-top.oil-top .gt-hero__l   { color: #dcece5; }
.dw2.kyutou-top.oil-top .gt-pref li.is-top { border-color: #bcdccd; }

/* ---- メーカー入口の写真 ----
   ガス給湯器TOPは<本社の縦写真>（460×550）なので、名前の左に小さく置いている。
   石油は各メーカーTOPのメイン画像（850×300・950×295）を使うため、
   縦に切ると商品が切れる。写真を上に全幅で敷き、名前を下に置く形へ変える。 */
.dw2.kyutou-top.oil-top .gt-mkentry__hd {
	display: block; padding-bottom: 9px;
}
.dw2.kyutou-top.oil-top .gt-mkentry__hq {
	padding-top: 35.3%; margin-bottom: 9px;   /* 850×300 の比。切らずに収まる */
}
.dw2.kyutou-top.oil-top .gt-mkentry__hq img { object-position: center center; }

/* ---- 設置方式のタイル ----
   石油給湯器の設置方式は分類の第4層で、商品検索は第4層だけでは絞れない。
   押しても絞り込めないリンクは作らないので、<a> ではなく中身の入れ物を置く。
   見た目（中身の並び・余白）は .gt-setti a と同じにする。 */
.dw2.kyutou-top .gt-setti__in {
	display: flex; flex-direction: column; align-items: center; height: 100%;
	padding: 9px 6px 10px; text-align: center;
}
.dw2.kyutou-top.oil-top .gt-setti > li:hover,
.dw2.kyutou-top.oil-top .gt-setti > li:focus-within { box-shadow: none; border-color: var(--gt-line); }
/* ---- スマホでメーカー入口が1列にならない不具合 ----
   @media(max-width:767px) の .gt-mkentry（1列）が、あとに出てくる
   基本の3列指定に負けていた（同じ強さなので、あとに書いたほうが勝つ）。
   指定の意図どおり1列にする。ファイル末尾に置くので順序の影響を受けない。 */

/* ---- 石油給湯器TOPの金額は6桁になる ----
   工事費込み総額が 128,293〜331,124円 と6桁で、ガス給湯器TOPの文字の大きさでは
   枠から出て末尾（円〜）が切れる。石油のページだけ数字を一段小さくする。 */
.dw2.kyutou-top.oil-top .gt-num dd b  { font-size: 24px; letter-spacing: -.03em; }
.dw2.kyutou-top.oil-top .gt-num dd em { font-size: 12px; margin-left: 2px; }
.dw2.kyutou-top.oil-top .gt-price dl  { font-size: 11px; }
.dw2.kyutou-top.oil-top .gt-price__tot b { font-size: 19px; }

/* =============================================================================
 * 給湯器TOP（.dw2.kyutou-top.wh-top）＝ 給湯器カテゴリ全体の最上位ハブ
 *   部品は家庭用ガス給湯器TOPと同じものをそのまま使い、<色だけ>変える。
 *   ここは親のページなので、子（ガス＝青／石油＝緑）より濃く中立な色にする。
 *   見出し（h2.heading_01）は上書きしない。他の商材ページと同じ共通CSSのまま。
 * ========================================================================== */
.dw2.kyutou-top.wh-top {
	--gt-navy:   #1f2d3d;
	--gt-navy-d: #121b26;
	--gt-line:   #dfe3e8;
	--gt-soft:   #f5f6f8;
	--dw2-accent:    #1f2d3d;
	--dw2-accent-bg: #eef0f3;
}
/* ファーストビューの濃い面に乗る文字。青系の既定値だと灰紺の上で沈むので差し替える。 */
.dw2.kyutou-top.wh-top .gt-hero__eye { color: #b9c6d4; }
.dw2.kyutou-top.wh-top .gt-hero__l   { color: #dde3e9; }

/* ---- 種類のカード（.gt-ty）----
   給湯器TOPは4カテゴリ。1行の中で写真が<遷移先と同じ絵>になるので、
   横長の写真を切らずに収める（子ページのタイプ図より横長の素材が来る）。 */
.dw2.kyutou-top.wh-top .gt-ty > li { grid-template-columns: 250px minmax(0, 1fr) 210px; }
.dw2.kyutou-top.wh-top .gt-ty__f img { object-fit: contain; background: var(--gt-soft); }
.dw2.kyutou-top.wh-top .gt-ty__for + .gt-ty__for { margin-top: 5px; }

/* ---- 交換の流れ（.gt-opts の中に手順の定義リストを入れる）---- */
.dw2.kyutou-top.wh-top .gt-opts__b .gt-mk__dl { margin-top: 8px; }
.dw2.kyutou-top.wh-top .gt-opts__t em {
	display: block; margin-top: 3px; font-style: normal; font-size: 11.5px;
	font-weight: normal; color: var(--dw2-red);
}

/* =============================================================================
 * ★画面幅のきまり（@media）は**このファイルのいちばん後ろ**にまとめる。
 *  部品の指定より前に置くと優先度が同じなので<あとに書いた部品の指定>が勝ち、
 *  スマホのきまりが黙って効かなくなる。
 *  実際、メーカー入口（.gt-mkentry）が1列にならず3列のままだった。
 *  **部品を足すときは、きまりをこの下へ書く。上には書かない。**
 * ========================================================================== */

@media screen and (max-width: 1000px) {
	.dw2.kyutou-top .gt-tyrank { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
	.dw2.kyutou-top .gt-ty > li { grid-template-columns: 160px minmax(0, 1fr); }
	.dw2.kyutou-top .gt-ty__s { grid-column: 1 / -1; }
	.dw2.kyutou-top .gt-ty__l { flex-direction: row; flex-wrap: wrap; }
	.dw2.kyutou-top .gt-ty__l a { flex: 1 1 30%; }
}

@media screen and (max-width: 767px) {
	.dw2.kyutou-top .gt-hero__body { padding: 16px 15px 17px; }
	.dw2.kyutou-top .gt-hero.is-sponly .gt-hero__ph { display: block; }
	.dw2.kyutou-top .gt-hero__t { font-size: 20px; }
	.dw2.kyutou-top .gt-hero__l { font-size: 12.5px; margin-bottom: 14px; }
	.dw2.kyutou-top .gt-find__f { flex-direction: column; }
	.dw2.kyutou-top .gt-find__f button { width: 100%; }
	.dw2.kyutou-top .gt-num { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.dw2.kyutou-top .gt-mkentry { grid-template-columns: 1fr; gap: 8px; }
	.dw2.kyutou-top .gt-mkentry__hd { grid-template-columns: 64px minmax(0, 1fr); }
	.dw2.kyutou-top .gt-num > li { padding: 13px 14px 14px; }
	.dw2.kyutou-top .gt-num dd b { font-size: 25px; }
	.dw2.kyutou-top .gt-num dd b.is-sm { font-size: 18px; }
	.dw2.kyutou-top .gt-num dd.gt-num__sub { margin-top: 9px; padding-top: 8px; font-size: 11.5px; white-space: normal; }
	.dw2.kyutou-top .gt-step { grid-template-columns: 1fr; gap: 20px; }
	.dw2.kyutou-top .gt-step > li::after { top: auto; right: 50%; bottom: -14px; margin: 0 -6px 0 0; transform: rotate(135deg); }

	.dw2.kyutou-top .gt-podium { grid-template-columns: 1fr; gap: 11px; }
	.dw2.kyutou-top .gt-podium__fig img { max-width: 100%; }

	.dw2.kyutou-top .gt-podium > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
	.dw2.kyutou-top .gt-podium__rank { grid-column: 1 / -1; }
	.dw2.kyutou-top .gt-podium__rank b { font-size: 24px; }
	.dw2.kyutou-top .gt-podium__fig { padding: 10px; align-self: center; text-align: center; }
	.dw2.kyutou-top .gt-podium__b { padding: 10px 12px 12px 6px; }
	.dw2.kyutou-top .gt-podium__md { font-size: 15px; }
	.dw2.kyutou-top .gt-price__tot b { font-size: 20px; }

	.dw2.kyutou-top .gt-rank > li { grid-template-columns: 34px 54px minmax(0, 1fr); gap: 9px; }
	.dw2.kyutou-top .gt-rank__p { grid-column: 2 / -1; text-align: left; }
	.dw2.kyutou-top .gt-rank__p b { display: inline; font-size: 15px; margin-right: 6px; }

	.dw2.kyutou-top .gt-tyrank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dw2.kyutou-top .gt-mk { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-use { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-notes { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-case { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-rev { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-h3 { font-size: 15.5px; margin-top: 20px; }
	.dw2.kyutou-top .gt-samep td b { font-size: 15px; }
	.dw2.kyutou-top .gt-mx td b { font-size: 15px; }
}

@media screen and (max-width: 420px) {
	.dw2.kyutou-top .gt-ty > li { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-ty__f { max-width: 260px; }
	.dw2.kyutou-top .gt-fn li { font-size: 10.5px; letter-spacing: -.04em; }
	/* 4枠を1列にすると縦に長くなりすぎる。スマホでも2列のままにして、
	   入りきらないぶんは文字を少し詰める。 */
	.dw2.kyutou-top .gt-num > li { padding: 11px 11px 12px; }
	.dw2.kyutou-top .gt-num dt { font-size: 11.5px; gap: 6px; margin-bottom: 9px; }
	.dw2.kyutou-top .gt-num__ic .dw2-ic { width: 44px; height: 44px; }
	.dw2.kyutou-top .gt-num dd b { font-size: 21px; }
	.dw2.kyutou-top .gt-num dd b.is-sm { font-size: 16px; }
	.dw2.kyutou-top .gt-num dd em { font-size: 11.5px; }
	.dw2.kyutou-top .gt-num__st { font-size: 12px; margin-top: 1px; }
	.dw2.kyutou-top .gt-num dd.gt-num__sub { font-size: 11px; }
}

@media screen and (max-width: 1000px) {
	.dw2.kyutou-top .gt-setti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
	.dw2.kyutou-top .gt-figs2 { grid-template-columns: 1fr; gap: 10px; }
	.dw2.kyutou-top .gt-opts { grid-template-columns: 1fr; }
	.dw2.kyutou-top .gt-opts > li { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; }
	.dw2.kyutou-top .gt-setti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 420px) {
	.dw2.kyutou-top .gt-setti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
	.dw2.kyutou-top .dw2-morelink { gap: 10px; }
}

@media screen and (max-width: 767px) {
	.dw2.kyutou-top .gt-mkentry { grid-template-columns: 1fr; gap: 8px; }
}

@media screen and (max-width: 767px) {
	.dw2.kyutou-top.oil-top .gt-num dd b { font-size: 23px; }
}

@media screen and (max-width: 900px) {
	.dw2.kyutou-top.wh-top .gt-ty > li { grid-template-columns: 190px minmax(0, 1fr); }
}

@media screen and (max-width: 420px) {
	.dw2.kyutou-top.wh-top .gt-ty > li { grid-template-columns: 1fr; }
	.dw2.kyutou-top.wh-top .gt-ty__f { max-width: 100%; }
}