@charset "utf-8";
/* =============================================================================
 * ガスコンロ メーカーTOP 共通CSS
 * /gasconro/css/maker.css
 *
 *  読み込み順： series.css（.gc2-* 共通UI） → このファイル → 各メーカー固有CSS
 *  使うページ： /gasconro/rinnai/  /gasconro/noritz/  /gasconro/paloma/
 *
 *  ・クラスは .mk-* 。メーカーに依存しないレイアウトだけをここに置く。
 *  ・色は --mk-* の変数で受け取り、実際の値は各メーカーのCSSで指定する。
 *  ・見出し（h2.heading_01）は全サイト共通のものをそのまま使う。ここでは変更しない。
 *  ・グラフはHTML＋CSSだけで描く。外部JSライブラリは読み込まない。
 * ========================================================================== */

/* 各メーカーのCSSで上書きする既定値 */
.gc2.maker-top {
	--mk-navy:   #1a4f72;
	--mk-navy-d: #0f3350;
	--mk-red:    #d7000f;
	--mk-tint:   #f3f7fa;
	--mk-line:   #dde6ed;
}


/* 金額の「円」は数字より少し小さく出す（.gc2 全体で共通） */
.gc2 .mk-yen { font-size: .74em; font-style: normal; font-weight: inherit; margin-left: 1px; }
/* 工事費テーブルの「円」も同じ見え方にそろえる */
.gc2.maker-top .gc2-kj td.is-p span { font-size: .74em; }

/* =============================================================================
 * ファーストビュー
 *   シリーズページの「1商品の価格を見せる」作りとは目的が違うので、
 *   価格の箱＋実績タイルをやめ、メーカーの要約を数値ストリップ1本にまとめる。
 * ========================================================================== */
.gc2 .mk-fv {
	background: #fff;
	border: 1px solid var(--mk-line);
	border-radius: var(--gc2-radius-lg);
	overflow: hidden;
	margin-bottom: 16px;
}
.gc2 .mk-fv__ph { margin: 0; background: #eef0f2; }
.gc2 .mk-fv__ph picture { display: block; }
/* 実寸 PC 850×300 ／ SP 520×400。比率をCSSで固定しないと、XPageSpeed が差し込む
   読み込み前の代替画像でいったん正方形に組まれ、本画像に切り替わった瞬間に本文が跳ねる。 */
.gc2 .mk-fv__ph img { display: block; width: 100%; height: auto; aspect-ratio: var(--mk-hero, 850 / 300); }

.gc2 .mk-fv__body { padding: 20px 22px 22px; }
.gc2 .mk-fv__eye {
	margin: 0 0 6px; padding-left: 11px; position: relative;
	font-size: 12px; color: var(--gc2-ink-sub); letter-spacing: .04em;
}
.gc2 .mk-fv__eye::before {
	content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; background: var(--mk-red);
}
.gc2 .mk-fv__name {
	margin: 0 0 10px; padding: 0; border: 0; background: none;
	font-size: 28px; font-weight: bold; line-height: 1.25; color: var(--gc2-ink);
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.gc2 .mk-fv__name span {
	font-size: 14px; font-weight: normal; letter-spacing: .12em; color: var(--gc2-ink-sub);
}
.gc2 .mk-fv__lead { margin: 0 0 15px; font-size: 13.5px; line-height: 1.95; }

/* 数値ストリップ */
.gc2 .mk-fv__stat {
	display: grid; grid-template-columns: repeat(4, 1fr); margin: 0;
	background: var(--mk-tint); border: 1px solid var(--mk-line); border-radius: 8px;
	overflow: hidden;
}
.gc2 .mk-fv__stat > div { padding: 12px 14px 13px; border-left: 1px solid var(--mk-line); }
.gc2 .mk-fv__stat > div:first-child { border-left: 0; }
.gc2 .mk-fv__stat dt { margin: 0 0 5px; font-size: 11.5px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2 .mk-fv__stat dd { margin: 0; line-height: 1.1; }
.gc2 .mk-fv__stat dd b { font-size: 25px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-fv__stat dd b.is-sm { font-size: 18px; white-space: nowrap; }
.gc2 .mk-fv__stat dd em { font-style: normal; font-size: 12.5px; font-weight: bold; color: var(--mk-navy-d); margin-left: 1px; }
.gc2 .mk-fv__stat dd span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.5; }
.gc2 .mk-fv__stat > div.is-price { background: #fff; }
.gc2 .mk-fv__stat > div.is-price dd b,
.gc2 .mk-fv__stat > div.is-price dd em { color: var(--gc2-red); }
.gc2 .mk-fv__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--gc2-ink-sub); }

/* 3つの入口
   アイコンはこのページ専用に描いたもの（王冠＝人気／¥＝価格／つまみ＝絞り込み）。 */
.gc2 .mk-entry { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gc2 .mk-entry > li { margin: 0; padding: 0; }
.gc2 .mk-entry a {
	position: relative; display: flex; flex-direction: column; height: 100%;
	padding: 16px 34px 16px 16px; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--mk-line); border-radius: 6px;
	transition: border-color .15s, background-color .15s;
}
.gc2 .mk-entry a::after {
	content: ""; position: absolute; right: 16px; top: 24px;
	width: 8px; height: 8px; border-top: 2px solid var(--mk-navy); border-right: 2px solid var(--mk-navy);
	transform: rotate(45deg);
}
.gc2 .mk-entry a:hover { background: var(--mk-tint); border-color: var(--mk-navy); }
.gc2 .mk-entry__i {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 46px; height: 46px; margin-bottom: 11px; border-radius: 10px;
	background: var(--mk-navy); color: #fff;
}
.gc2 .mk-entry__i svg { width: 25px; height: 25px; display: block; }
.gc2 .mk-entry b { display: block; margin-bottom: 5px; font-size: 16.5px; line-height: 1.35; color: var(--mk-navy-d); }
.gc2 .mk-entry__d { display: block; font-size: 12.5px; line-height: 1.7; color: var(--gc2-ink-sub); }
.gc2 .mk-entry em {
	align-self: flex-start; margin-top: auto; padding-top: 10px;
	font-style: normal; font-size: 12.5px; font-weight: bold; color: var(--mk-red);
}

/* 「このページの内容」は見積りボタンとくっつけない */
.gc2.maker-top .gc2-cta { margin-bottom: 6px; }
.gc2.maker-top .gc2-toc { margin-top: 30px; }

/* -----------------------------------------------------------------------------
 * リンナイとは（メーカー説明）
 * -------------------------------------------------------------------------- */
.gc2 .mk-fact { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; background: #fff; }
.gc2 .mk-fact > div { display: grid; grid-template-columns: 8.5em 1fr; border-top: 1px solid var(--gc2-line); }
.gc2 .mk-fact > div:nth-child(-n+2) { border-top: 0; }
.gc2 .mk-fact > div:nth-child(2n) { border-left: 1px solid var(--gc2-line); }
.gc2 .mk-fact dt { margin: 0; padding: 11px 12px; background: var(--mk-tint); font-size: 12.5px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-fact dd { margin: 0; padding: 11px 13px; font-size: 12.5px; line-height: 1.8; }

.gc2 .mk-point { list-style: none; counter-reset: mkp; margin: 0; padding: 0; display: grid; gap: 10px; }
.gc2 .mk-point > li {
	counter-increment: mkp; padding: 13px 15px 14px;
	background: #fff; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
.gc2 .mk-point > li::before { content: none; }
.gc2 .mk-point__h { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 15.5px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-point__h::before {
	content: counter(mkp, decimal-leading-zero); flex: 0 0 auto;
	font-size: 24px; font-weight: bold; font-style: italic; color: var(--mk-red);
}
.gc2 .mk-point__i { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--mk-navy); color: #fff; }
.gc2 .mk-point__i .gc2-ic { width: 15px; height: 15px; }
.gc2 .mk-point__d { margin: 0; font-size: 13px; line-height: 1.85; }

.gc2 .mk-pos { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; }
.gc2 .mk-pos > li {
	display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 12px;
	margin: 0; padding: 11px 14px; border-top: 1px solid var(--gc2-line); border-left: 0; border-right: 0; border-bottom: 0;
	background: none; list-style: none;
}
.gc2 .mk-pos > li:first-child { border-top: 0; }
.gc2 .mk-pos > li::before { content: none; }
.gc2 .mk-pos__l {
	justify-self: start; padding: 3px 10px; border-radius: 3px;
	font-size: 11.5px; font-weight: bold; color: #fff; background: var(--mk-tone, #1a5b85); white-space: nowrap;
}
.gc2 .mk-pos > li.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-pos > li.is-high  { --mk-tone: #16537a; }
.gc2 .mk-pos > li.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-pos > li.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-pos > li.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-pos > li.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-pos > li.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-pos > li.is-warm  { --mk-tone: #b07d12; }
.gc2 .mk-pos__b { min-width: 0; }
.gc2 .mk-pos__t { display: inline-block; margin-right: 8px; font-size: 15px; font-weight: bold; text-decoration: none; }
.gc2 .mk-pos__d { font-size: 12.5px; line-height: 1.75; color: var(--gc2-ink-sub); }
.gc2 .mk-pos__p { white-space: nowrap; font-size: 11.5px; color: var(--gc2-ink-sub); }
.gc2 .mk-pos__p b { font-size: 15px; color: var(--gc2-red); }

/* -----------------------------------------------------------------------------
 * リンナイが向いている人
 * -------------------------------------------------------------------------- */
.gc2 .mk-fit { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
.gc2 .mk-fit__c { padding: 0 0 14px; background: #fff; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; }
.gc2 .mk-fit__h { margin: 0 0 10px; padding: 10px 14px; font-size: 15px; font-weight: bold; color: #fff; }
.gc2 .mk-fit__c.is-yes .mk-fit__h { background: var(--mk-navy); }
.gc2 .mk-fit__c.is-no  .mk-fit__h { background: #7b848c; }
.gc2 .mk-fit__c dl { margin: 0; padding: 0 14px; }
.gc2 .mk-fit__c dt { margin: 0; padding-left: 17px; position: relative; font-size: 13.5px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-fit__c.is-yes dt::before {
	content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 6px;
	border-left: 2px solid var(--mk-navy); border-bottom: 2px solid var(--mk-navy); transform: rotate(-45deg);
}
.gc2 .mk-fit__c.is-no dt::before {
	content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 2px; background: #99a1a8;
}
.gc2 .mk-fit__c dd { margin: 4px 0 0; padding-left: 17px; font-size: 12.5px; line-height: 1.8; color: var(--gc2-ink-sub); }
.gc2 .mk-fit__c dd + dt { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--gc2-line); }
.gc2 .mk-fit__c.is-yes dd + dt::before { top: 15px; }
.gc2 .mk-fit__c.is-no dd + dt::before { top: 20px; }

/* -----------------------------------------------------------------------------
 * 3メーカーの違い
 * -------------------------------------------------------------------------- */
/* 3枚組と比較表が接して見えないよう間隔をあける */
.gc2.maker-top #maker .gc2-pick { margin-bottom: 26px; }
.gc2.maker-top #maker .gc2-cmp__wrap { margin-top: 0; }
.gc2 .mk-mk__for { margin: 8px 0 0; font-size: 12px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-mk__a { margin: 8px 0 0; font-size: 12.5px; }
.gc2 .mk-mk tbody th { width: 9em; }
.gc2 .mk-mk td { font-size: 12.5px; line-height: 1.75; }

/* -----------------------------------------------------------------------------
 * 人気ランキング
 *   全順位に商品画像を出す。1〜3位は金・銀・銅の金属フチ＋光沢の走るメダルで別格に。
 * -------------------------------------------------------------------------- */
.gc2 .mk-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gc2 .mk-rank > li {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: 48px 104px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 10px 14px; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
.gc2 .mk-rank > li.is-top { grid-template-columns: 60px 136px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border-width: 2px; }

/* 上位のフチ（金・銀・銅のベタ色。白いぼかしは使わない） */
.gc2 .mk-rank > li.is-1 { border-color: #b8901a; }
.gc2 .mk-rank > li.is-2 { border-color: #78828a; }
.gc2 .mk-rank > li.is-3 { border-color: #8c5a2c; }

/* 順位 */
.gc2 .mk-rank__no {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: #93a0aa; color: #fff; line-height: 1;
}
.gc2 .mk-rank > li.is-top .mk-rank__no { width: 60px; height: 60px; }
.gc2 .mk-rank__no b { font-size: 20px; }
.gc2 .mk-rank > li.is-top .mk-rank__no b { font-size: 23px; }
.gc2 .mk-rank__no span { font-size: 10px; margin-top: 2px; }
.gc2 .mk-rank__crown { width: 20px; height: 13px; margin-bottom: 2px; color: #fff; }
.gc2 .mk-rank > li.is-1 .mk-rank__no { background: #b8901a; }
.gc2 .mk-rank > li.is-2 .mk-rank__no { background: #78828a; }
.gc2 .mk-rank > li.is-3 .mk-rank__no { background: #8c5a2c; }

.gc2 .mk-rank__fig { margin: 0; }
.gc2 .mk-rank__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.gc2 .mk-rank__b { min-width: 0; }
.gc2 .mk-rank__t { margin: 0; font-size: 16px; font-weight: bold; line-height: 1.4; }
.gc2 .mk-rank > li.is-top .mk-rank__t { font-size: 18px; }
.gc2 .mk-rank__t a { text-decoration: none; }
.gc2 .mk-rank__t em {
	font-style: normal; font-size: 11px; font-weight: bold; margin-left: 7px; padding: 2px 7px;
	border-radius: 3px; color: #fff; background: var(--gc2-accent); vertical-align: 2px;
	display: inline-block; white-space: nowrap;
}
.gc2 .mk-rank__bar { display: block; height: 8px; margin: 8px 0 5px; background: #eef1f3; border-radius: 4px; overflow: hidden; }
.gc2 .mk-rank__bar i { display: block; height: 100%; border-radius: 4px; background: var(--mk-navy); }
.gc2 .mk-rank > li.is-1 .mk-rank__bar i { background: #b8901a; }
.gc2 .mk-rank > li.is-2 .mk-rank__bar i { background: #78828a; }
.gc2 .mk-rank > li.is-3 .mk-rank__bar i { background: #8c5a2c; }
.gc2 .mk-rank__m { margin: 0; font-size: 12px; color: var(--gc2-ink-sub); line-height: 1.6; }
.gc2 .mk-rank__p { text-align: right; white-space: nowrap; }
.gc2 .mk-rank__p b { display: block; font-size: 18px; color: var(--gc2-red); }
.gc2 .mk-rank > li.is-top .mk-rank__p b { font-size: 22px; }
.gc2 .mk-rank__p span { font-size: 11px; color: var(--gc2-ink-sub); }

/* 横に3枚並べられる幅のときだけ、1〜3位を並べて縦組みにする */
@media only screen and (min-width: 901px) {
	.gc2 .mk-rank { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.gc2 .mk-rank > li { grid-column: 1 / -1; }
	.gc2 .mk-rank > li.is-top {
		grid-column: auto;
		display: flex; flex-direction: column; align-items: stretch;
		gap: 0; padding: 0 14px 14px;
	}
	/* 順位は上端いっぱいの帯にする */
	.gc2 .mk-rank > li.is-top .mk-rank__no {
		flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px;
		width: auto; height: auto; margin: 0 -14px 12px; padding: 7px 14px; border-radius: 0;
	}
	.gc2 .mk-rank > li.is-top .mk-rank__no b { font-size: 20px; }
	.gc2 .mk-rank > li.is-top .mk-rank__no span { font-size: 12px; margin-top: 0; }
	.gc2 .mk-rank > li.is-top .mk-rank__crown { width: 18px; height: 12px; margin: 0; }
	.gc2 .mk-rank > li.is-top .mk-rank__fig { margin-bottom: 10px; }
	.gc2 .mk-rank > li.is-top .mk-rank__b { flex: 1 1 auto; }
	.gc2 .mk-rank > li.is-top .mk-rank__t { font-size: 17px; }
	.gc2 .mk-rank > li.is-top .mk-rank__p {
		margin-top: 10px; padding-top: 10px; text-align: left;
		border-top: 1px solid var(--gc2-line);
	}
}

/* -----------------------------------------------------------------------------
 * 工事費込み価格帯（横棒チャート）
 *   ・安い順に並べるので、帯が左から右へ階段状に伸びる
 *   ・金額はシリーズ名のすぐ隣に置き、帯と離さない
 *   ・目盛り線は帯の列の背景に content-box で敷くので、行をまたいで1本につながる
 *   マークアップは table のままなので、CSSが効かなくても名前と金額は読める。
 * -------------------------------------------------------------------------- */
.gc2 .mk-chart { background: #fff; border: 1px solid var(--gc2-line); border-radius: 6px; padding: 0 16px 6px; }
/* 列幅を固定しないと、帯の列（中身が絶対配置なので最小幅0）がつぶれる */
.gc2 .mk-band { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.gc2 .mk-band thead th:nth-child(1) { width: 27%; }
.gc2 .mk-band thead th:nth-child(2) { width: 22%; }
.gc2 .mk-band thead th:nth-child(3) { width: 51%; }
.gc2 .mk-band caption { caption-side: bottom; text-align: left; padding: 10px 0 12px; }
.gc2 .mk-band thead th {
	padding: 12px 8px 6px; font-size: 11.5px; font-weight: normal; text-align: left;
	color: var(--gc2-ink-sub); border-bottom: 2px solid var(--mk-navy); vertical-align: bottom;
}
.gc2 .mk-band tbody th, .gc2 .mk-band tbody td { padding: 7px 8px; border-bottom: 1px solid #eef2f5; vertical-align: middle; }
.gc2 .mk-band tbody tr:nth-child(2n) th, .gc2 .mk-band tbody tr:nth-child(2n) td { background: #fafcfd; }
.gc2 .mk-band tbody tr:last-child th, .gc2 .mk-band tbody tr:last-child td { border-bottom: 0; }
.gc2 .mk-band tbody th { text-align: left; font-weight: bold; }
.gc2 .mk-band tbody th a { text-decoration: none; font-size: 14px; }
.gc2 .mk-band tbody th span { display: block; margin-left: 16px; font-size: 11px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2 .mk-band__dot {
	display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%;
	background: var(--mk-tone, #1a5b85); vertical-align: 1px;
}
/* シリーズのグレード色（一覧カードと同じ割り当て） */
.gc2 .mk-band tbody tr.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-band tbody tr.is-high  { --mk-tone: #16537a; }
.gc2 .mk-band tbody tr.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-band tbody tr.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-band tbody tr.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-band tbody tr.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-band tbody tr.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-band tbody tr.is-warm  { --mk-tone: #b07d12; }

.gc2 .mk-band__n { white-space: nowrap; }
.gc2 .mk-band__n b { display: block; font-size: 15px; color: var(--gc2-red); line-height: 1.3; }
.gc2 .mk-band__n span { display: block; font-size: 11.5px; color: var(--gc2-ink-sub); }

/* 目盛り線（0/25/50/75/100%の5本）。見出しの目盛りと本体の線を同じ位置にそろえる */
.gc2 .mk-band__c,
.gc2 .mk-band th.mk-band__axis {
	padding-left: 0; padding-right: 0;
	background-origin: content-box; background-clip: content-box;
	background-repeat: no-repeat; background-size: 1px 100%;
	background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	background-image:
		linear-gradient(#e6edf2, #e6edf2), linear-gradient(#e6edf2, #e6edf2), linear-gradient(#e6edf2, #e6edf2),
		linear-gradient(#e6edf2, #e6edf2), linear-gradient(#e6edf2, #e6edf2);
}
.gc2 .mk-band th.mk-band__axis { position: relative; height: 30px; background-image: none; }
/* 目盛りの本数はデータの幅で変わるので、位置はPHPが style="left:…%" で指定する。
   両端だけは枠からはみ出さないように寄せ方を変える。 */
.gc2 .mk-band__axis span { position: absolute; bottom: 6px; font-size: 11px; color: var(--gc2-ink-sub); white-space: nowrap; transform: translateX(-50%); }
.gc2 .mk-band__axis span.is-first { transform: none; }
.gc2 .mk-band__axis span.is-last  { transform: translateX(-100%); }

.gc2 .mk-band__track { display: block; position: relative; height: 24px; }
.gc2 .mk-band__seg {
	position: absolute; top: 5px; height: 14px; min-width: 6px; border-radius: 7px;
	background: var(--mk-tone, #1a5b85);
}

/* -----------------------------------------------------------------------------
 * 予算から選ぶ
 *   ただのリンク一覧にせず、サムネイル付きの行にして「どれを見に行くか」を決めやすくする。
 * -------------------------------------------------------------------------- */
.gc2 .mk-budget { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.gc2 .mk-budget > li {
	padding: 0 0 6px; background: #fff; overflow: hidden;
	border: 1px solid var(--gc2-line); border-radius: 6px;
}
.gc2 .mk-budget__h {
	display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 10px 14px;
	background: var(--mk-navy); color: #fff;
}
.gc2 .mk-budget__no {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .18);
	font-size: 12.5px; font-weight: bold; font-style: italic;
}
.gc2 .mk-budget__t { flex: 1 1 auto; font-size: 16px; font-weight: bold; }
.gc2 .mk-budget__c { flex: 0 0 auto; font-size: 11px; opacity: .85; }
.gc2 .mk-budget__l { list-style: none; margin: 0; padding: 0; }
.gc2 .mk-budget__l > li { margin: 0; padding: 0; border-top: 1px solid #eef2f5; }
.gc2 .mk-budget__l > li:first-child { border-top: 0; }
.gc2 .mk-budget__l > li::before { content: none; }
.gc2 .mk-budget__l a {
	display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 11px;
	padding: 8px 14px 8px 10px; text-decoration: none; color: inherit;
}
.gc2 .mk-budget__l a:hover { background: var(--mk-tint); }
.gc2 .mk-budget__l img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.gc2 .mk-budget__l > li.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-budget__l > li.is-high  { --mk-tone: #16537a; }
.gc2 .mk-budget__l > li.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-budget__l > li.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-budget__l > li.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-budget__l > li.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-budget__l > li.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-budget__l > li.is-warm  { --mk-tone: #b07d12; }
.gc2 .mk-budget__n { font-size: 14px; font-weight: bold; line-height: 1.35; }
.gc2 .mk-budget__n em { display: block; font-style: normal; font-size: 11px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2 .mk-budget__p { text-align: right; white-space: nowrap; font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.4; }
.gc2 .mk-budget__p b { display: block; font-size: 14px; color: var(--gc2-red); }

/* -----------------------------------------------------------------------------
 * シリーズ一覧
 *   グレードごとに色を割り当てて、一覧の中で位置づけが目で分かるようにする。
 * -------------------------------------------------------------------------- */
.gc2 .mk-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gc2 .mk-cards > li {
	position: relative; display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: 6px; overflow: hidden;
}
.gc2 .mk-cards > li.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-cards > li.is-high  { --mk-tone: #16537a; }
.gc2 .mk-cards > li.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-cards > li.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-cards > li.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-cards > li.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-cards > li.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-cards > li.is-warm  { --mk-tone: #b07d12; }
.gc2 .mk-card__fig { margin: 0; background: #fff; }
.gc2 .mk-card__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.gc2 .mk-card__rank {
	position: absolute; top: 0; left: 0; z-index: 2;
	padding: 4px 11px; color: #fff; font-size: 11.5px; font-weight: bold;
	background: #93a0aa; text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}
/* 順位ごとに金・銀・銅（ランキングのメダルと同じ色づかい） */
.gc2 .mk-card__rank.is-r1 { background: #c9a227; }
.gc2 .mk-card__rank.is-r2 { background: #9aa3ab; }
.gc2 .mk-card__rank.is-r3 { background: #b08152; }
.gc2 .mk-card__b { padding: 12px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.gc2 .mk-card__g {
	align-self: flex-start; margin: 0 0 7px; padding: 3px 10px; font-size: 11.5px; font-weight: bold;
	color: #fff; background: var(--mk-tone, #1a5b85); border-radius: 999px; letter-spacing: .02em;
}
.gc2 .mk-card__t { margin: 0; font-size: 18px; font-weight: bold; line-height: 1.35; }
.gc2 .mk-card__t a { text-decoration: none; }
.gc2 .mk-card__t em { font-style: normal; font-size: 12px; color: var(--gc2-ink-sub); margin-left: 6px; }
.gc2 .mk-card__d { margin: 7px 0 0; font-size: 13px; line-height: 1.75; }
.gc2 .mk-card__tags { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gc2 .mk-card__tags li { font-size: 11px; padding: 2px 7px; background: var(--gc2-bg-soft); border: 1px solid var(--gc2-line); border-radius: 3px; }
.gc2 .mk-card__p { margin: 11px 0 0; padding-top: 9px; border-top: 1px dashed var(--gc2-line); font-size: 12px; color: var(--gc2-ink-sub); }
.gc2 .mk-card__p b { font-size: 19px; color: var(--gc2-red); }
.gc2 .mk-card__for { margin: 5px 0 0; font-size: 12px; color: var(--gc2-ink-sub); }
/* ボタンはカードの高さがまちまちでも下端でそろえる */
.gc2 .mk-card__a { margin: 12px 0 0; margin-top: auto; padding-top: 12px; }
.gc2 .mk-card__a .gc2-btn { width: 100%; }

/* -----------------------------------------------------------------------------
 * 機能から選ぶ／タイプ別おすすめ
 * -------------------------------------------------------------------------- */
.gc2 .mk-fsel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gc2 .mk-fsel > li {
	display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
/* 写真は素材側を3:2にそろえてあるので、どのカードも同じ大きさで表示される */
.gc2 .mk-fsel__fig { margin: 0; background: #f4f6f8; }
.gc2 .mk-fsel__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gc2 .mk-fsel__bd { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.gc2 .mk-fsel__h { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 15px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-fsel__h .gc2-ic { width: 1em; height: 1em; color: #fff; }
.gc2 .mk-fsel__h .mk-ico {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 27px; height: 27px; border-radius: 50%; font-size: 15px; background: var(--mk-navy);
}
.gc2 .mk-fsel__d { margin: 0 0 9px; font-size: 12.5px; line-height: 1.7; color: var(--gc2-ink-sub); }
.gc2 .mk-fsel__l { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gc2 .mk-fsel__l a {
	display: inline-block; padding: 4px 11px; font-size: 12.5px; text-decoration: none;
	background: var(--gc2-accent-bg); border: 1px solid #c6dbe9; border-radius: 14px;
}
.gc2 .mk-fsel__l a:hover { background: var(--gc2-accent); border-color: var(--gc2-accent); color: #fff; }

.gc2 .mk-rec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
.gc2 .mk-rec__i {
	display: flex; flex-direction: column; overflow: hidden; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: 6px;
}
.gc2 .mk-rec__i.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-rec__i.is-high  { --mk-tone: #16537a; }
.gc2 .mk-rec__i.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-rec__i.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-rec__i.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-rec__i.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-rec__i.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-rec__i.is-warm  { --mk-tone: #b07d12; }
.gc2 .mk-rec__t {
	margin: 0; padding: 8px 14px; background: var(--mk-tone, #1a5b85); color: #fff;
	font-size: 13.5px; font-weight: bold;
}
.gc2 .mk-rec__b { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 12px 14px 14px; }
.gc2 .mk-rec__fig { display: block; align-self: start; }
.gc2 .mk-rec__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border: 1px solid var(--gc2-line); border-radius: 3px; }
.gc2 .mk-rec__x { min-width: 0; }
.gc2 .mk-rec__s { margin: 0 0 5px; font-size: 17px; font-weight: bold; line-height: 1.3; }
.gc2 .mk-rec__s a { text-decoration: none; }
.gc2 .mk-rec__s span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2 .mk-rec__s span b { font-size: 14px; color: var(--gc2-red); }
.gc2 .mk-rec__d { margin: 0; font-size: 12.5px; line-height: 1.8; }

/* -----------------------------------------------------------------------------
 * 施工実績データ
 *   シリーズページの内訳ブロック（.gc2-kpi／.gc2-idata／.gc2-bars）は使わない。
 *   構成比＝100%積み上げ帯、2値＝CSSドーナツ（conic-gradient）。JSは使わない。
 * -------------------------------------------------------------------------- */
.gc2 .mk-stat__sum { margin-bottom: 14px; }
.gc2 .mk-stat__box {
	margin-bottom: 14px; padding: 0 0 13px; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: 6px;
}
.gc2 .mk-stat__h {
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
	margin: 0 0 13px; padding: 10px 15px; background: var(--mk-navy); color: #fff;
	font-size: 15px; font-weight: bold;
}
.gc2 .mk-stat__h span { font-size: 11.5px; font-weight: normal; opacity: .85; }
.gc2 .mk-stat__n { margin: 12px 15px 0; font-size: 11.5px; line-height: 1.75; color: var(--gc2-ink-sub); }
.gc2 .mk-stat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.gc2 .mk-stat__grid .mk-stat__box { margin-bottom: 0; }

/* 100%積み上げ帯 */
.gc2 .mk-stack { display: flex; height: 38px; margin: 0 15px; border-radius: 5px; overflow: hidden; }
.gc2 .mk-stack__s {
	flex-basis: 0; min-width: 4px;
	display: flex; align-items: center; justify-content: center;
	background: var(--mk-tone, #1a5b85);
}
.gc2 .mk-stack__s b { font-size: 12px; font-weight: bold; color: #fff; }
.gc2 .mk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 15px 0; padding: 0; }
.gc2 .mk-legend > li { display: flex; align-items: baseline; gap: 5px; margin: 0; padding: 0; font-size: 12px; }
.gc2 .mk-legend > li::before {
	content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px;
	background: var(--mk-tone, #1a5b85); align-self: center;
}
.gc2 .mk-legend a { text-decoration: none; font-weight: bold; }
.gc2 .mk-legend span { color: var(--gc2-ink-sub); }
.gc2 .mk-legend em { font-style: normal; font-weight: bold; color: var(--mk-navy-d); }


/* ドーナツ（conic-gradient） */
.gc2 .mk-stat__box.is-ring { text-align: center; }
.gc2 .mk-ring {
	position: relative; width: 142px; height: 142px; margin: 4px auto 0; border-radius: 50%;
	background: conic-gradient(var(--mk-c, #1a4f72) calc(var(--mk-p, 0) * 1%), #e6edf2 0);
}
.gc2 .mk-ring::after { content: ""; position: absolute; inset: 17px; background: #fff; border-radius: 50%; }
.gc2 .mk-ring__v {
	position: absolute; inset: 0; z-index: 1; margin: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.gc2 .mk-ring__v b { font-size: 34px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-ring__v em { font-style: normal; font-size: 14px; font-weight: bold; color: var(--mk-navy-d); margin-top: -6px; }
.gc2 .mk-ring__v span { margin-top: 4px; font-size: 11.5px; color: var(--gc2-ink-sub); }
.gc2 .mk-kv { list-style: none; margin: 12px 15px 0; padding: 0; text-align: left; }
.gc2 .mk-kv > li { display: flex; align-items: center; gap: 7px; margin: 0; padding: 6px 0; border-top: 1px dashed var(--gc2-line); font-size: 12.5px; }
.gc2 .mk-kv > li:first-child { border-top: 0; }
.gc2 .mk-kv > li::before { content: none; }
.gc2 .mk-kv i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
.gc2 .mk-kv b { margin-left: auto; font-size: 13.5px; }

/* 交換前のメーカー */
.gc2 .mk-before { list-style: none; margin: 0 15px; padding: 0; }
.gc2 .mk-before > li {
	position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px;
	margin: 0; padding: 6px 0 9px; border: 0; background: none;
}
.gc2 .mk-before > li::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: #e9eef2;
}
.gc2 .mk-before__n {
	display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
	border-radius: 3px; background: var(--mk-tint); color: var(--mk-navy-d); font-size: 11px; font-weight: bold;
}
.gc2 .mk-before > li:nth-child(1) .mk-before__n { background: var(--mk-navy); color: #fff; }
.gc2 .mk-before__l { font-size: 13px; font-weight: bold; }
.gc2 .mk-before__v { font-size: 11.5px; color: var(--gc2-ink-sub); white-space: nowrap; }
.gc2 .mk-before__v em { font-style: normal; margin-left: 6px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-before > li i { position: absolute; left: 0; bottom: 0; height: 4px; min-width: 6px; border-radius: 2px; background: var(--mk-navy); }

/* 都道府県 */
.gc2 .mk-pref { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 15px; padding: 0; }
.gc2 .mk-pref > li {
	display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 5px 11px;
	border: 1px solid var(--mk-line); border-radius: 999px; background: #fff; font-size: 12.5px;
}
.gc2 .mk-pref > li::before { content: none; }
.gc2 .mk-pref > li.is-top { border-color: var(--mk-navy); background: var(--mk-navy); color: #fff; }
.gc2 .mk-pref b { font-weight: bold; }
.gc2 .mk-pref span { font-size: 11px; color: var(--gc2-ink-sub); }
.gc2 .mk-pref > li.is-top span { color: rgba(255, 255, 255, .85); }

/* -----------------------------------------------------------------------------
 * リンナイの主な機能
 * -------------------------------------------------------------------------- */
.gc2 .mk-tech { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.gc2 .mk-tech__g { padding: 0 0 13px; background: #fff; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; }
.gc2 .mk-tech__h {
	display: flex; align-items: center; gap: 9px; margin: 0 0 11px; padding: 9px 14px;
	background: var(--mk-navy); font-size: 14.5px; font-weight: bold; color: #fff;
}
.gc2 .mk-tech__h .gc2-ic { width: 1.2em; height: 1.2em; }
.gc2 .mk-tech__l { margin: 0; padding: 0 14px; }
.gc2 .mk-tech__l dt { margin: 0; font-size: 13.5px; font-weight: bold; color: var(--mk-navy-d); }
.gc2 .mk-tech__l dt span {
	display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 3px;
	font-size: 11px; font-weight: normal; color: var(--gc2-ink-sub); background: var(--mk-tint);
}
.gc2 .mk-tech__l dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--gc2-ink-sub); }
.gc2 .mk-tech__l dd + dt { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--gc2-line); }

/* -----------------------------------------------------------------------------
 * 交換施工事例
 *   施工前→施工後を並べて、何から何へ替えたかを写真と型番の両方で見せる。
 * -------------------------------------------------------------------------- */
/* 写真が主役なので2列。3列にすると1枚105pxまで小さくなって中身が読めない */
.gc2 .mk-case { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gc2 .mk-case > li {
	margin: 0; padding: 0; background: #fff; overflow: hidden;
	border: 1px solid var(--gc2-line); border-radius: 6px;
}
.gc2 .mk-case > li::before { content: none; }
.gc2 .mk-case > li.is-top   { --mk-tone: #8b1a3a; }
.gc2 .mk-case > li.is-high  { --mk-tone: #16537a; }
.gc2 .mk-case > li.is-std   { --mk-tone: #2a8ca8; }
.gc2 .mk-case > li.is-spec  { --mk-tone: #c05a1b; }
.gc2 .mk-case > li.is-two   { --mk-tone: #3f7d5c; }
.gc2 .mk-case > li.is-value { --mk-tone: #5d6f80; }
.gc2 .mk-case > li.is-deep  { --mk-tone: #6a4c93; }
.gc2 .mk-case > li.is-warm  { --mk-tone: #b07d12; }
.gc2 .mk-case a { display: block; text-decoration: none; color: inherit; }
.gc2 .mk-case a:hover .mk-case__a { text-decoration: underline; }

.gc2 .mk-case__ph { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 0; background: #f4f6f8; }
.gc2 .mk-case__im { position: relative; display: block; }
.gc2 .mk-case__im img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gc2 .mk-case__im em {
	position: absolute; left: 0; bottom: 0; padding: 2px 7px; font-style: normal;
	font-size: 10.5px; color: #fff; background: rgba(15, 51, 80, .78);
}
.gc2 .mk-case__ar { position: relative; height: 100%; background: #fff; }
.gc2 .mk-case__ar::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px;
	border-top: 2px solid var(--mk-tone, #1a5b85); border-right: 2px solid var(--mk-tone, #1a5b85);
	transform: rotate(45deg);
}

.gc2 .mk-case__b { display: block; padding: 10px 13px 13px; }
.gc2 .mk-case__m { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.gc2 .mk-case__m span { font-size: 10.5px; padding: 2px 7px; border-radius: 3px; background: var(--mk-tint); color: var(--gc2-ink-sub); }
.gc2 .mk-case__m .mk-case__pl { background: var(--mk-navy); color: #fff; }
.gc2 .mk-case__sw { display: block; }
.gc2 .mk-case__from, .gc2 .mk-case__to { display: grid; grid-template-columns: 3.6em 1fr; gap: 7px; align-items: baseline; padding: 4px 0; }
.gc2 .mk-case__from { border-bottom: 1px dashed var(--gc2-line); }
.gc2 .mk-case__sw i {
	font-style: normal; font-size: 10.5px; text-align: center; padding: 2px 0; border-radius: 3px;
	background: #eef2f5; color: var(--gc2-ink-sub);
}
.gc2 .mk-case__to i { background: var(--mk-tone, #1a5b85); color: #fff; }
.gc2 .mk-case__sw b { font-size: 13px; font-weight: bold; line-height: 1.45; overflow-wrap: break-word; }
.gc2 .mk-case__to b { color: var(--mk-navy-d); }
.gc2 .mk-case__to em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--gc2-ink-sub); overflow-wrap: break-word; }
.gc2 .mk-case__a { display: block; margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: var(--gc2-accent); }

/* -----------------------------------------------------------------------------
 * ご依頼から交換工事までの流れ（4ステップだけの簡易版）
 * -------------------------------------------------------------------------- */
.gc2 .mk-flow { list-style: none; counter-reset: mkf; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gc2 .mk-flow > li {
	counter-increment: mkf; position: relative; margin: 0; padding: 0 0 14px;
	background: #fff; border: 1px solid var(--gc2-line); border-radius: 6px; overflow: hidden;
}
.gc2 .mk-flow figure { margin: 0 0 10px; }
.gc2 .mk-flow figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gc2 .mk-flow > li::before {
	content: counter(mkf); position: absolute; left: 0; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	background: var(--mk-navy); color: #fff; font-size: 13px; font-weight: bold;
}
.gc2 .mk-flow b { display: block; margin: 0 13px 5px; font-size: 14.5px; color: var(--mk-navy-d); }
.gc2 .mk-flow span { display: block; margin: 0 13px; font-size: 12px; line-height: 1.75; color: var(--gc2-ink-sub); }

/* -----------------------------------------------------------------------------
 * 口コミ
 * -------------------------------------------------------------------------- */
.gc2 .mk-voice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gc2 .mk-voice > li {
	align-self: stretch; padding: 13px 15px 14px; background: #fff;
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
.gc2 .mk-voice__m { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.gc2 .mk-voice__st { color: #e8a200; font-size: 15px; letter-spacing: 1px; }
.gc2 .mk-voice__st i { color: #dcdfe2; font-style: normal; }
.gc2 .mk-voice__w { font-size: 11.5px; color: var(--gc2-ink-sub); white-space: nowrap; }
.gc2 .mk-voice__t { margin: 0 0 4px; font-size: 14px; font-weight: bold; line-height: 1.5; color: var(--mk-navy-d); }
.gc2 .mk-voice__b { margin: 0; font-size: 12.5px; line-height: 1.8; }
.gc2 .mk-voice__p { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed var(--gc2-line); font-size: 11.5px; color: var(--gc2-ink-sub); }

/* -----------------------------------------------------------------------------
 * スマートフォン
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	.gc2 .mk-fv__ph img { aspect-ratio: var(--mk-hero-sp, 13 / 10); }
	.gc2 .mk-fv__body { padding: 15px 14px 17px; }
	.gc2 .mk-fv__name { font-size: 22px; gap: 8px; }
	.gc2 .mk-fv__name span { font-size: 12px; }
	.gc2 .mk-fv__lead { font-size: 13px; }
	.gc2 .mk-fv__stat { grid-template-columns: repeat(2, 1fr); }
	.gc2 .mk-fv__stat > div { padding: 10px 12px 11px; }
	.gc2 .mk-fv__stat > div:nth-child(2n+1) { border-left: 0; }
	.gc2 .mk-fv__stat > div:nth-child(n+3) { border-top: 1px solid var(--mk-line); }
	.gc2 .mk-fv__stat dd b { font-size: 21px; }

	.gc2 .mk-entry { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
	.gc2 .mk-entry a { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; padding: 12px 30px 12px 13px; }
	.gc2 .mk-entry a::after { top: 50%; margin-top: -5px; right: 14px; }
	.gc2 .mk-entry__i { width: 42px; height: 42px; margin-bottom: 0; grid-row: span 2; }
	.gc2 .mk-entry__i svg { width: 22px; height: 22px; }
	.gc2 .mk-entry b { margin-bottom: 2px; font-size: 15.5px; }
	.gc2 .mk-entry__d { font-size: 12px; }
	.gc2 .mk-entry em { display: none; }
	.gc2.maker-top .gc2-toc { margin-top: 22px; }

	.gc2 .mk-fact,
	.gc2 .mk-fit,
	.gc2 .mk-case,
	.gc2 .mk-stat__grid,
	.gc2 .mk-budget,
	.gc2 .mk-fsel,
	.gc2 .mk-tech,
	.gc2 .mk-voice,
	.gc2 .mk-rec { grid-template-columns: 1fr; }

	.gc2 .mk-cards,.gc2 .mk-fsel,.gc2 .mk-flow{ grid-template-columns: repeat(2, 1fr);}
	
	/* ランキングは全順位が「順位・写真・本文・価格」なので、写真を右肩に固定して2行に組む */
	.gc2 .mk-rank > li { grid-template-columns: 42px 1fr 78px; column-gap: 10px; row-gap: 6px; padding: 10px 12px; }
	.gc2 .mk-rank > li.is-top { grid-template-columns: 50px 1fr 84px; padding: 12px 12px; }
	.gc2 .mk-rank__no { width: 42px; height: 42px; grid-column: 1; grid-row: 1; }
	.gc2 .mk-rank > li.is-top .mk-rank__no { width: 50px; height: 50px; }
	.gc2 .mk-rank__no b { font-size: 17px; }
	.gc2 .mk-rank > li.is-top .mk-rank__no b { font-size: 19px; }
	.gc2 .mk-rank__crown { width: 16px; height: 11px; margin-bottom: 1px; }
	.gc2 .mk-rank__fig { grid-column: 3; grid-row: 1; align-self: center; }
	.gc2 .mk-rank__b { grid-column: 2; grid-row: 1; }
	.gc2 .mk-rank__p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
	.gc2 .mk-rank__t { font-size: 15px; }
	.gc2 .mk-rank > li.is-top .mk-rank__t { font-size: 16px; }
	.gc2 .mk-rank__p b { display: inline; font-size: 16px; }
	.gc2 .mk-rank > li.is-top .mk-rank__p b { font-size: 18px; }
	.gc2 .mk-rank__p span { margin-left: 6px; }

	.gc2 .mk-fact > div { grid-template-columns: 7em 1fr; }
	.gc2 .mk-fact > div:nth-child(2) { border-top: 1px solid var(--gc2-line); }
	.gc2 .mk-fact > div:nth-child(2n) { border-left: 0; }
	.gc2 .mk-pos > li { grid-template-columns: 1fr auto; row-gap: 4px; }
	.gc2 .mk-pos__l { grid-column: 1; grid-row: 1; }
	.gc2 .mk-pos__p { grid-column: 2; grid-row: 1; }
	.gc2 .mk-pos__b { grid-column: 1 / -1; grid-row: 2; }
	.gc2 .mk-rec__b { grid-template-columns: 88px 1fr; gap: 10px; padding: 11px 12px 12px; }
	.gc2 .mk-budget__l a { grid-template-columns: 54px 1fr; row-gap: 2px; padding: 8px 12px 8px 9px; }
	.gc2 .mk-budget__p { grid-column: 2; text-align: left; }
	.gc2 .mk-budget__p b { display: inline; }
	.gc2 .mk-stack { height: 30px; margin: 0 12px; }
	.gc2 .mk-legend { margin: 10px 12px 0; gap: 5px 12px; }
	.gc2 .mk-stat__n, .gc2 .mk-kv, .gc2 .mk-before, .gc2 .mk-pref { margin-left: 12px; margin-right: 12px; }
	.gc2 .mk-stat__h { padding: 9px 12px; }
	.gc2 .mk-ring { width: 128px; height: 128px; }
	.gc2 .mk-ring__v b { font-size: 30px; }

	.gc2 .mk-case__b { padding: 10px 12px 12px; }
	/* ------------------------------------------------------------------
	   価格帯グラフ（スマホ）
	   横に3列並べると帯が細切れになって読めないので、1シリーズ＝1ブロックにする。
	     1段目 シリーズ名＋グレード・品番数
	     2段目 全幅の帯（目盛り線入り）
	     3段目 最安を左端・最高を右端に置いて帯の両端と対応させる
	   目盛りは表の先頭に1本だけ出し、同じ位置の線を各行の帯にも引く。
	   ------------------------------------------------------------------ */
	.gc2 .mk-chart { padding: 0 10px 4px; }

	/* table のままだと thead を block にしても幅が中身なりになるので縦並びの flex にする。
	   caption は order で最後（＝表の下）に戻す。 */
	.gc2 .mk-band { display: flex; flex-direction: column; }
	.gc2 .mk-band caption { order: 3; display: block; }
	.gc2 .mk-band thead { order: 1; display: block; }
	.gc2 .mk-band tbody { order: 2; display: block; }
	.gc2 .mk-band thead tr { display: block; margin-top: 3%;}
	/* PC側の列幅（27%/22%/51%）を打ち消すため、同じ形のセレクタで上書きする */
	.gc2 .mk-band thead th:nth-child(1),
	.gc2 .mk-band thead th:nth-child(2) { display: none; }
	.gc2 .mk-band thead th:nth-child(3) {
		display: block; width: auto; height: 20px;
		padding: 0 0 3px; border-bottom: 2px solid var(--mk-navy);
	}
	.gc2 .mk-band__axis span { bottom: 3px; font-size: 10px; }

	.gc2 .mk-band tbody tr {
		display: grid; grid-template-columns: 1fr auto;
		padding: 12px 0 13px; border-bottom: 1px solid #eef2f5; background: none;
	}
	.gc2 .mk-band tbody tr:nth-child(2n) { background: none; }
	.gc2 .mk-band tbody tr:last-child { border-bottom: 0; }
	.gc2 .mk-band tbody th, .gc2 .mk-band tbody td { padding: 0; border-bottom: 0; background: none; }

	.gc2 .mk-band tbody th { grid-column: 1 / -1; grid-row: 1; line-height: 1.45; }
	.gc2 .mk-band tbody th a { font-size: 15px; }
	.gc2 .mk-band tbody th span { display: inline; margin-left: 8px; }

	/* 金額が主役なので帯より上、左そろえの1行にする */
	.gc2 .mk-band__n {
		grid-column: 1 / -1; grid-row: 2;
		margin-top: 3px; padding: 0; text-align: left; white-space: nowrap;
	}
	.gc2 .mk-band__n b { display: inline; font-size: 18px; }
	.gc2 .mk-band__n span { display: inline; font-size: 13px; }

	.gc2 .mk-band__c { grid-column: 1 / -1; grid-row: 3; margin-top: 7px; }

	/* 目盛り線は --mk-div（目盛りの区間数）ぶんだけ等間隔に引く */
	.gc2 .mk-band__track {
		height: 16px; border-radius: 8px; background-color: #e9eff4;
		background-image: repeating-linear-gradient(to right,
			#cfdae3 0, #cfdae3 1px,
			rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) calc(100% / var(--mk-div, 4)));
	}
	.gc2 .mk-band__seg { top: 0; height: 16px; min-width: 14px; border-radius: 8px; }
}