@charset "utf-8";
/* =============================================================================
 * ビルトインガスコンロ カテゴリTOP 専用UI
 * /gasconro/css/gasconro_top.css
 *
 *  このページ（/gasconro/）専用。すべて .gct 配下にスコープしてあるので、
 *  メーカーTOP（.gc2 .mk-*）や各シリーズページには影響しない。
 *  h2.heading_01 は既存の共通デザインをそのまま使うため、ここでは一切触らない。
 *
 *  【設計の考え方】
 *   ・カテゴリTOPなので「同じカードを並べる」ことをやめ、
 *     情報の種類ごとに見せ方を変える（表彰台／密な一覧／チャート／
 *     値札／マトリクス／アイコンタイル／数字バンド／写真グリッド／検索パネル）。
 *   ・文字サイズと行間はメーカーTOP（.gc2 = lead 15px / 本文 13px / 注記 13px）に合わせ、
 *     情報密度を上げる。角丸は 4px、影は使わない。
 *   ・色は 3メーカーTOPの紺（#1a4f72）とも旧TOPの水色（#29abe9）とも変え、
 *     濃紺 #123a56 ＋ 中間 #2a7aa8 ＋ 差し色オレンジ #e8912d の3本立て。
 * ========================================================================== */

.gct {
	--c-ink:    #22303a;
	--c-sub:    #5a6b78;
	--c-navy:   #123a56;
	--c-mid:    #2a7aa8;
	--c-rail:   #e7eef3;
	--c-line:   #e4e9ee;
	--c-panel:  #f6f8fa;
	--c-amber:  #e8912d;
	--c-red:    #d7000f;
	color: var(--c-ink);
	font-size: 14px;
	line-height: 1.85;
}
/* メーカーの色。--t-* は円グラフの conic-gradient から直接参照するので .gct に置く */
.gct { --t-ri: #123a56; --t-no: #1c77d3 ; --t-pa: #41b033; }
.gct .is-ri { --c-mk: var(--t-ri); }
.gct .is-no { --c-mk: var(--t-no); }
.gct .is-pa { --c-mk: var(--t-pa); }

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

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

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

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

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

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

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

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

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

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

/* メーカーの極小ラベル */
.gct .gt-mk {
	display: inline-block; padding: 0 7px; border-radius: 2px;
	background: var(--c-mk, #0065cc); color: #fff;
	font-size: 11px; font-weight: bold; line-height: 1.75; white-space: nowrap; vertical-align: 1px;
}

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

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

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

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

/* =============================================================================
 * メーカーのブランドパネル
 * ========================================================================== */
.gct .gt-brand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.gct .gt-brand__c { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-top: 4px solid var(--c-mk); background: #fff; }
.gct .gt-brand__h { margin: 0; padding: 9px 13px 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--c-line); }
.gct .gt-brand__h b { font-size: 17px; line-height: 1.3; white-space: nowrap; }
.gct .gt-brand__h small { display: block; font-size: 11px; color: var(--c-sub); font-weight: normal; white-space: nowrap; }
/* 共通CSSの article#mainContents img { height:auto } のほうが詳細度が高いので上書きする */
.gct .gt-brand__h img { display: block; width: auto; margin-left: auto; }
/* ロゴの上に本社の写真を小さく置く。
   元画像（460x550）は下にロゴ帯が焼き込まれているので、
   object-fit: cover ＋ object-position: top で上の写真部分だけを見せる。
   共通CSSの article#mainContents img { height:auto } に勝てないので、
   高さは指定せず aspect-ratio で決める。 */
.gct .gt-brand__mk { display: block; margin-left: auto; }
.gct .gt-brand__h img.gt-brand__hq {
	width: 80px; aspect-ratio: 4 / 3; margin: 0 0 4px auto;
	object-fit: cover; object-position: center top; border: 1px solid var(--c-line);
}
.gct .gt-brand__k { margin: 0; padding: 9px 13px; background: var(--c-panel); font-size: 13.5px; font-weight: bold; line-height: 1.55; color: var(--c-mk); }
.gct .gt-brand__d { margin: 10px 13px 0; font-size: 13px; line-height: 1.8; }
.gct .gt-brand__l { list-style: none; margin: 10px 13px 0; padding: 0; }
.gct .gt-brand__l li { margin: 0; padding: 5px 0; display: grid; grid-template-columns: 5.2em 1fr; gap: 6px; font-size: 12px; line-height: 1.6; border-top: 1px dotted var(--c-line); }
.gct .gt-brand__l li::before { content: none; }
.gct .gt-brand__l b { color: var(--c-sub); }
.gct .gt-brand__s { margin: 9px 13px 0; font-size: 12px; line-height: 1.65; color: var(--c-sub); }
.gct .gt-brand__s b { color: var(--c-ink); }
.gct .gt-brand__p { margin: 9px 13px 0; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 12px; }
.gct .gt-brand__p b { font-size: 19px; color: var(--c-red); font-weight: bold; }
/* 並べたブロックの末尾ボタンは下端でそろえる（高さが違っても位置を合わせる） */
.gct .gt-brand__a { margin: 10px 13px 13px; margin-top: auto; padding-top: 10px; }
.gct .gt-brand__a a {
	display: block; padding: 9px 8px; text-align: center; text-decoration: none;
	background: var(--c-mk); color: #fff; font-size: 13px; font-weight: bold; border-radius: 3px;
}
.gct .gt-brand__a a:hover { opacity: .88; }

/* メーカー比率（細い1本の帯） */
.gct .gt-share { margin: 16px 0 0; }
.gct .gt-share__h { margin: 0 0 6px; font-size: 12.5px; color: var(--c-sub); }
.gct .gt-share__b { display: flex; height: 24px; }
.gct .gt-share__b > span {
	display: flex; align-items: center; justify-content: center; min-width: 0;
	background: var(--c-mk); color: #fff; font-size: 12px; font-weight: bold; white-space: nowrap;
}
.gct .gt-share__l { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; }
.gct .gt-share__l li { margin: 0; padding: 0 0 0 14px; position: relative; }
.gct .gt-share__l li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--c-mk); }
.gct .gt-share__l b { margin-left: 5px; }
.gct .gt-share__l em { font-style: normal; margin-left: 4px; color: var(--c-sub); font-size: 11.5px; }

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

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

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

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

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

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

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

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

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

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

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

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

.gct .gt-old { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.gct .gt-old th, .gct .gt-old td { padding: 6px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.gct .gt-old thead th { border-bottom: 2px solid #0065cc; font-size: 11.5px; color: var(--c-sub); font-weight: normal; padding-bottom: 5px; }
.gct .gt-old tbody tr:nth-child(2n) th, .gct .gt-old tbody tr:nth-child(2n) td { background: #fbfcfd; }
.gct .gt-old tbody th { font-weight: bold; font-size: 13.5px; white-space: nowrap; }
.gct .gt-old td.is-n { white-space: nowrap; color: var(--c-sub); font-size: 12px; }
.gct .gt-old td a { text-decoration: none; font-weight: bold; }
.gct .gt-old td em { font-style: normal; margin-left: 6px; font-size: 11.5px; color: var(--c-sub); }

/* =============================================================================
 * 選び方（図解 + 8ステップの密な一覧）
 * ========================================================================== */
/* 8ステップ。上から順に決めていく流れが見えるように、番号の丸を縦のレールでつなぐ。
   1〜4を左の列、5〜8を右の列に流す（grid-auto-flow:column）。 */
.gct .gt-step {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column;
	grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, 1fr);
	gap: 0 30px;
}
.gct .gt-step > li {
	position: relative; margin: 0; padding: 0 0 16px 44px;
	display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 3px 8px;
}
/* 番号の丸から次の番号へ伸びる縦の線。各列の最後（4・8）には引かない */
.gct .gt-step > li::before {
	content: ""; position: absolute; left: 14px; top: 31px; bottom: 0; width: 2px; background: #d8e6f5;
}
.gct .gt-step > li:nth-child(4)::before,
.gct .gt-step > li:nth-child(8)::before { content: none; }
.gct .gt-step__n {
	position: absolute; left: 0; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: #0065cc; color: #fff; font-size: 14px; font-weight: bold;
}
.gct .gt-step__i {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; color: #0065cc;
}
.gct .gt-step__i .gt-i { width: 100%; height: 100%; }
.gct .gt-step b { font-size: 14px; font-weight: bold; line-height: 1.4; }
.gct .gt-step__d {
	grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.75; color: var(--c-sub);
}

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

/* =============================================================================
 * CTA・関連リンク
 * ========================================================================== */
/* CTAは3メーカーTOP（series.css の .gc2-cta / .gc2-btn）と同じ見た目にそろえる。
   series.css はこのページで読み込まないので、値だけ写している。 */
.gct .gt-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.gct .gt-cta a {
	display: block; padding: 13px 10px; text-align: center; text-decoration: none; border-radius: 4px;
	font-size: 18px; font-weight: bold; line-height: 1.4; transition: all .25s;
}
.gct .gt-cta small { display: block; margin-top: 2px; font-size: 14px; font-weight: normal; }
.gct .gt-cta__p { background: #1f7fd8; border: 2px solid #004f9e; color: #fff; }
.gct .gt-cta__p:hover { background: #004f9e; color: #fff; }
.gct .gt-cta__t { background: #fff; border: 2px solid #004f9e; color: #004f9e; }
.gct .gt-cta__t:hover { background: #eff6fd; }

/* 次に見ておきたいページ。文字だけの箇条書きをやめ、
   メーカーはロゴ・それ以外はアイコンを頭に付けて、行ごとに押せる面にする。 */
.gct .gt-rel__g {
	margin: 0 0 8px; padding: 0 0 5px; font-size: 12.5px; font-weight: bold; color: var(--c-sub);
	border-bottom: 1px solid var(--c-line);
}
.gct .gt-rel__g + .gt-rel { margin-bottom: 18px; }
.gct .gt-rel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.gct .gt-rel.is-mk { grid-template-columns: repeat(3, 1fr); }
.gct .gt-rel > li { margin: 0; padding: 0; }
.gct .gt-rel > li::before { content: none; }
.gct .gt-rel a {
	position: relative; height: 100%; box-sizing: border-box; display: grid;
	grid-template-columns: 34px 1fr; align-items: center; gap: 11px;
	padding: 10px 26px 11px 11px; text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--c-line); border-left: 3px solid var(--c-mk, #0065cc);
	transition: background .15s, border-color .15s;
}
.gct .gt-rel a::after {
	content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px;
	border-top: 2px solid #0065cc; border-right: 2px solid #0065cc;
	transform: translateY(-50%) rotate(45deg); transition: right .15s;
}
.gct .gt-rel a:hover { background: #f5faf5; border-color: #0065cc; border-left-color: var(--c-mk, #0065cc); }
.gct .gt-rel a:hover::after { right: 8px; }
/* メーカーはロゴ、それ以外はアイコン */
.gct .gt-rel__logo { display: flex; align-items: center; justify-content: center; width: 34px; }
.gct .gt-rel__logo img { display: block; width: auto; height: 20px !important; }
.gct .gt-rel__i {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; font-size: 20px; color: #0065cc; background: #eef5fc;
}
.gct .gt-rel__x { min-width: 0; }
.gct .gt-rel b { display: block; font-size: 13.5px; font-weight: bold; line-height: 1.4; color: var(--c-ink); }
/* メーカー3枚は幅が狭いので、名前は1行に収める */
.gct .gt-rel.is-mk a { grid-template-columns: 30px 1fr; gap: 9px; }
.gct .gt-rel.is-mk .gt-rel__logo { width: 30px; }
.gct .gt-rel.is-mk b { white-space: nowrap; }
.gct .gt-rel__x span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-sub); line-height: 1.6; }

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

/* ビルトインと据置型の断面 */
.gct .gt-viz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; margin: 0 0 16px; }
.gct .gt-viz__c { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 14px; }
.gct .gt-viz__d { position: relative; display: block; height: 54px; }
/* キッチンの天板 */
.gct .gt-viz__d::before {
	content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 7px; background: #cdd8e0;
}
/* キャビネット */
.gct .gt-viz__d::after {
	content: ""; position: absolute; left: 10px; right: 10px; top: 37px; bottom: 0;
	border: 1px solid #cdd8e0; border-top: 0; background: #f1f4f7;
}
/* コンロ本体 */
.gct .gt-viz__d i { position: absolute; z-index: 1; left: 28px; right: 28px; background: #0065cc; }
.gct .gt-viz__d.is-built i { top: 25px; height: 12px; }		/* 天板の高さにそろう */
.gct .gt-viz__d.is-set   i { top: 9px;  height: 21px; }		/* 天板の上に置く */
/* ビルトインは本体がキャビネットの中に入っている */
.gct .gt-viz__d.is-built i::after {
	content: ""; position: absolute; left: 5px; right: 5px; top: 12px; height: 15px;
	border: 1px dashed #8ea3b4; border-top: 0;
}
.gct .gt-viz__c p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--c-sub); }
.gct .gt-viz__c p b { display: block; font-size: 13.5px; color: var(--c-ink); }

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

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

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

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

/* 型番から総額までの4手順 */
.gct .gt-hop {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line);
	counter-reset: hop;
}
.gct .gt-hop > li {
	position: relative; margin: 0; padding: 11px 13px 12px; background: #fff;
	display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 2px 9px; counter-increment: hop;
}
.gct .gt-hop > li::before { content: none; }
/* 手順のあいだの三角 */
.gct .gt-hop > li:not(:last-child)::after {
	content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 0; height: 0;
	border-left: 7px solid #c3ccd3; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
	transform: translateY(-50%);
}
.gct .gt-hop__i {
	grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; font-size: 19px; color: var(--c-mid); background: #eef4f8;
}
.gct .gt-hop b { font-size: 13px; line-height: 1.35; }
.gct .gt-hop b::before { content: counter(hop) ". "; color: var(--c-mid); }
.gct .gt-hop > li > span:last-child { grid-column: 2; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }

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

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

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

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

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

/* 総額の内訳 */
.gct .gt-sum { border: 1px solid var(--c-line); background: #fff; }
.gct .gt-sum__h {
	margin: 0; padding: 8px 14px; background: #0065cc; color: #fff;
	font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
.gct .gt-sum__g { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 0; }
.gct .gt-sum__c { padding: 11px 14px 13px; border-left: 1px solid var(--c-line); }
.gct .gt-sum__c:first-child { border-left: 0; }
.gct .gt-sum__c.is-b { background: #f7fafc; }
.gct .gt-sum__t {
	display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
	font-size: 13.5px; font-weight: bold; line-height: 1.35;
}
.gct .gt-sum__t > span {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 24px; height: 24px; font-size: 18px; color: var(--c-mid); background: #eef4f8;
}
.gct .gt-sum__d { margin: 0; font-size: 12px; line-height: 1.7; color: var(--c-sub); }
.gct .gt-sum__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 12px; }
.gct .gt-sum__l li {
	margin: 0; padding: 0; display: grid; grid-template-columns: 15px 1fr; align-items: center; gap: 6px;
	font-size: 12px; line-height: 1.55;
}
.gct .gt-sum__l li::before { content: none; }
.gct .gt-sum__l .gt-i { width: 15px; height: 15px; color: var(--c-mid); }
.gct .gt-sum__f {
	margin: 0; padding: 9px 14px; border-top: 1px solid var(--c-line);
	background: var(--c-panel); font-size: 12.5px; line-height: 1.7;
}
.gct .gt-sum__f b { color: #0065cc; }

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

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

/* =============================================================================
 * 10年保証
 *   旧 hosyou_mainbox / tokucho（丸い囲み）は使わない。
 * ========================================================================== */
.gct .gt-grt { border: 1px solid var(--c-line); background: #fff; }
.gct .gt-grt__h {
	display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 15px;
	background: #0065cc; color: #fff; font-size: 17px; font-weight: bold; line-height: 1.3;
}
.gct .gt-grt__i {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; font-size: 24px; color: #0065cc; background: #fff;
}
.gct .gt-grt__h b { font-size: 27px; color: #fff; margin: 0 1px; letter-spacing: -.01em; }
.gct .gt-grt__h em {
	font-style: normal; font-size: 11.5px; font-weight: normal;
	color: rgba(255, 255, 255, .82); margin-left: auto; text-align: right; line-height: 1.5;
}
.gct .gt-grt__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.gct .gt-grt__l > li { margin: 0; padding: 10px 13px 12px; border-left: 1px solid var(--c-line); }
.gct .gt-grt__l > li:first-child { border-left: 0; }
.gct .gt-grt__l > li::before { content: none; }
.gct .gt-grt__l b { display: block; font-size: 13px; line-height: 1.4; color: #0065cc; }
.gct .gt-grt__l b::before {
	content: ""; display: inline-block; width: 9px; height: 5px; margin-right: 6px; vertical-align: 3px;
	border-left: 2px solid var(--c-amber); border-bottom: 2px solid var(--c-amber); transform: rotate(-45deg);
}
.gct .gt-grt__l span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.65; color: var(--c-sub); }
/* 保証の他社比較（画像ではなく表） */
.gct .gt-vs { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
.gct .gt-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gct .gt-vs th, .gct .gt-vs td { padding: 8px 6px; border: 1px solid var(--c-line); text-align: center; vertical-align: middle; font-weight:bold;}
.gct .gt-vs thead th {
	padding: 7px 6px; background: var(--c-panel); border-bottom: 2px solid #0065cc;
	font-size: 12.5px; font-weight: bold; color: var(--c-sub); line-height: 1.4;
}
.gct .gt-vs thead th:first-child { width: 26%; }
/* 自社の列だけ通しで強める */
.gct .gt-vs thead th.is-us { background: #0065cc; border-bottom-color: #0065cc; color: #fff; font-size: 13.5px; }
.gct .gt-vs tbody th {
	width: 26%; text-align: left; background: #fbfcfd;
	font-size: 12.5px; font-weight: bold; line-height: 1.5;
}
.gct .gt-vs td.is-us { background: #f2f7fa; }
.gct .gt-vs__m { display: block; font-size: 19px; line-height: 1; }
.gct .gt-vs .is-o .gt-vs__m { color: var(--c-red); }
.gct .gt-vs .is-t .gt-vs__m { color: var(--c-amber); }
.gct .gt-vs .is-x .gt-vs__m { color: #9aa8b3; }
.gct .gt-vs td b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: bold; line-height: 1.4; }
.gct .gt-vs td.is-us b { font-size: 15px; color: #0065cc; }
.gct .gt-vs td small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--c-sub); line-height: 1.4; }

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

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

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

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

	.gct .gt-def { grid-template-columns: 1fr; gap: 0; }

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

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

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

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

	.gct .gt-panel, .gct .gt-panel-a { padding: 11px 11px 12px; }

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

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

	/* 総額の内訳：縦に積む */
	.gct .gt-sum__g { grid-template-columns: 1fr; }
	.gct .gt-sum__c { padding: 9px 11px 11px; border-left: 0; border-top: 1px solid var(--c-line); }
	.gct .gt-sum__c:first-child { border-top: 0; }
	.gct .gt-sum__h, .gct .gt-sum__f { padding: 8px 11px; font-size: 12.5px; }
	.gct .gt-sum__l { gap: 2px 10px; }
	.gct .gt-sum__l li { font-size: 11.5px; }

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

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

	.gct .gt-cond > li { font-size: 12px; }

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

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

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

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

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

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

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

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

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

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

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

	.gct .gt-find { padding: 14px 13px 15px; }
	.gct .gt-find__h { font-size: 15.5px; }
	.gct .gt-find__row { grid-template-columns: 1fr; }
	.gct .gt-find__sel { grid-template-columns: 1fr 1fr; }
	.gct .gt-find__sel select:last-child { grid-column: 1 / -1; }

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

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


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

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

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

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

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

@media screen and (max-width: 640px) {
	.gt-sa .gt-sa__lead { padding: 11px 13px; font-size: 13.5px; line-height: 1.85; }
	.gt-sa .gt-sa__areaname { font-size: 15px; }
	.gt-sa .gt-sa__prefs { grid-template-columns: 1fr; gap: 8px; }
	.gt-sa .gt-sa__sum { padding: 12px 36px 12px 13px; font-size: 14.5px; }
	.gt-sa .gt-sa__body { padding: 12px 13px 13px; }
	.gt-sa .gt-sa__c { padding: 4px 10px; font-size: 12.5px; }
}

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