@charset "utf-8";
/* =============================================================================
 * /gasconro/chiiki/ 工事対応エリア（市区町村）ページ
 *   /gasconro/chiiki/css/area.css
 *
 *  構成は交換できるくんの市区町村ページと同じ項目に合わせてある。
 *  配色はサイトの既定（緑 #0065cc / 赤 #d7000f / 青 #0065cc）。
 *
 *  すべて .gca 配下にスコープしてあるので、このページの既存ブロック
 *  （エリア割・支店紹介・町域一覧・工事費用の表・保証・施工事例など）や
 *  他ページには影響しない。h2.heading_01 は共通のデザインをそのまま使う。
 *
 *  画像ファイルは使わない。アイコンはこのCSSとインラインSVGだけで作る。
 * ========================================================================== */

.gca {
	--a-ink:    #1d2b36;
	--a-sub:    #5a6b78;
	--a-main:   #0065cc;
	--a-main2: #004f9e;
	--a-red:    #d7000f;
	--a-line:   #e1e8ee;
	--a-panel:  #f5f8fa;
	--a-soft:   #eef5fc;		/* 青のうすい面 */
	--a-shadow: 0 1px 3px rgba(29,43,54,.07), 0 6px 16px rgba(29,43,54,.05);
	color: var(--a-ink);
	font-size: 14.5px;
	line-height: 1.9;
}
.gca.gca-sec { margin: 0 0 38px; }
.gca p { margin: 0 0 12px; }
.gca img { max-width: 100%; height: auto; }
.gca ul, .gca ol, .gca dl { margin: 0; padding: 0; list-style: none; }
.gca li { margin: 0; padding: 0; list-style: none; background: none; }
.gca li::before { content: none; display: none; }
.gca b { font-weight: bold; }
.gca svg { vertical-align: middle; }

/* 見出し直下のリード文。横のボーダーは使わない（2026-09-15 指示） */
.gca .gca-lead {
	margin: 16px 0 18px; padding: 0;
	font-size: 15px; line-height: 2;
}
.gca .gca-note {
	position: relative; margin: 12px 0 0; padding: 10px 12px 10px 34px;
	background: var(--a-panel); border-radius: 6px;
	font-size: 12.5px; line-height: 1.85; color: var(--a-sub);
}
.gca .gca-note::before {
	content: "i"; position: absolute; left: 11px; top: 12px;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--a-sub); color: #fff;
	font-size: 10px; font-weight: bold; font-style: normal;
	line-height: 15px; text-align: center;
}

/* -------------------------------------------------------------- 中見出し */
.gca .gca-h3 {
	display: flex; align-items: center; gap: 10px;
	margin: 30px 0 14px; padding: 0 0 10px;
	border-bottom: 2px solid var(--a-line);
	font-size: 17px; font-weight: bold; line-height: 1.5; color: var(--a-ink);
}
.gca .gca-h3::before {
	content: ""; flex: 0 0 auto; width: 5px; height: 20px;
	background: linear-gradient(180deg, var(--a-main) 0%, var(--a-main2) 100%);
	border-radius: 3px;
}
/* 番号つきの中見出し（選び方の1〜7） */
.gca .gca-h3--n::before { content: none; }
.gca .gca-h3__n {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: linear-gradient(180deg, var(--a-main) 0%, var(--a-main2) 100%);
	color: #fff; font-size: 15px; font-weight: bold; line-height: 1;
	box-shadow: 0 2px 4px rgba(0,101,204,.3);
}

/* 「もっと見る」リンク */
.gca .gca-more { margin: 16px 0 0; text-align: right; font-size: 14px; }
.gca .gca-more a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 18px 8px 20px;
	background: #fff; border: 1.5px solid var(--a-main); border-radius: 999px;
	color: var(--a-main); font-weight: bold; text-decoration: none;
	transition: background .15s, color .15s;
}
.gca .gca-more a:hover { background: var(--a-main); color: #fff; }
.gca .gca-more a::after {
	content: ""; width: 6px; height: 6px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* 小さなラベル */
.gca .gca-tag {
	display: inline-block; margin: 0 5px 4px 0; padding: 2px 9px;
	background: #fff; border: 1px solid var(--a-line); border-radius: 999px;
	font-size: 11.5px; line-height: 1.7; color: var(--a-sub); white-space: nowrap;
}
.gca .gca-tag--g {
	background: var(--a-soft); border-color: #bdd8f2; color: var(--a-main2); font-weight: bold;
}

/* ------------------------------------------------------------------- 表 */
.gca .gca-tbl {
	width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden;
	box-shadow: var(--a-shadow);
}
.gca .gca-tbl th,
.gca .gca-tbl td {
	padding: 13px 14px; border-bottom: 1px solid var(--a-line);
	font-size: 14px; line-height: 1.65; text-align: left; vertical-align: middle;
}
.gca .gca-tbl thead th {
	background: linear-gradient(180deg, #fbfcfd 0%, var(--a-panel) 100%);
	border-bottom: 2px solid var(--a-line);
	font-size: 12.5px; font-weight: bold; color: var(--a-sub); white-space: nowrap;
}
.gca .gca-tbl tbody tr:last-child th,
.gca .gca-tbl tbody tr:last-child td { border-bottom: 0; }
.gca .gca-tbl tbody tr:nth-child(even) th,
.gca .gca-tbl tbody tr:nth-child(even) td { background: #fbfcfd; }
.gca .gca-tbl tbody tr:hover th,
.gca .gca-tbl tbody tr:hover td { background: var(--a-soft); }
.gca .gca-tbl tbody th { font-weight: bold; font-size: 14.5px; }
.gca .gca-tbl tbody th a {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--a-main); text-decoration: none;
}
.gca .gca-tbl tbody th a::after {
	content: ""; width: 5px; height: 5px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.gca .gca-tbl tbody th a:hover { text-decoration: underline; }
.gca .gca-tbl__n { width: 6em; text-align: right !important; white-space: nowrap; color: var(--a-sub); }
.gca .gca-tbl__p {
	width: 15em; white-space: nowrap; color: var(--a-red);
	font-weight: bold; font-size: 14.5px;
}
.gca .gca-tbl__u { color: var(--a-sub); font-size: 12.5px; }

/* メーカー比率の横棒 */
.gca .gca-tbl--mk tbody th { width: 7.5em; }
.gca .gca-bar { padding-right: 6px !important; }
.gca .gca-bar > span {
	display: block; height: 16px; min-width: 3px; border-radius: 999px;
	background: linear-gradient(90deg, #3f96e0 0%, var(--a-main) 55%, var(--a-main2) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.gca .gca-bar__v {
	width: 4.5em; text-align: right !important;
	font-weight: bold; font-size: 17px; color: var(--a-main2); white-space: nowrap;
}

/* --------------------------------------------------------- 実績の数字 */
.gca .gca-fig {
	display: flex; flex-wrap: wrap; margin: 18px 0 0;
	border-radius: 10px; overflow: hidden; box-shadow: var(--a-shadow);
}
.gca .gca-fig__i {
	flex: 1 1 0; min-width: 25%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	padding: 20px 10px 18px;
	background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
	border: 1px solid var(--a-line); border-left: 0; text-align: center;
}
.gca .gca-fig__i:first-child { border-left: 1px solid var(--a-line); }
.gca .gca-fig__l {
	font-size: 12.5px; line-height: 1.5; color: var(--a-sub); word-break: keep-all;
}
.gca .gca-fig__v {
	font-size: 31px; font-weight: bold; line-height: 1.1;
	color: var(--a-main2); letter-spacing: -0.03em;
}
.gca .gca-fig__v i {
	margin-left: 3px; font-size: 14px; font-style: normal; font-weight: bold;
}
.gca .gca-fig__i--p {
	background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
}
.gca .gca-fig__i--p .gca-fig__v { color: var(--a-red); }

/* ------------------------------------------------- マンション・団地の実績 */
.gca .gca-cd {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 0;
}
.gca .gca-cd > li {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--a-line); border-radius: 9px;
	box-shadow: var(--a-shadow); overflow: hidden;
}
.gca .gca-cd__n {
	margin: 0; padding: 11px 14px 11px 36px; position: relative;
	background: linear-gradient(180deg, #fbfcfd 0%, var(--a-panel) 100%);
	border-bottom: 1px solid var(--a-line);
	font-size: 14.5px; font-weight: bold; line-height: 1.45;
}
/* 建物のしるし（画像は使わずCSSだけで描く） */
.gca .gca-cd__n::before {
	content: ""; position: absolute; left: 14px; top: 16px;
	width: 12px; height: 13px;
	border: 2px solid var(--a-main); border-bottom-width: 3px; border-radius: 1px;
}
.gca .gca-cd__n::after {
	content: ""; position: absolute; left: 17px; top: 19px;
	width: 2px; height: 2px; color: var(--a-main);
	box-shadow: 0 0 0 1px currentColor, 4px 0 0 1px currentColor,
	            0 4px 0 1px currentColor, 4px 4px 0 1px currentColor;
}
.gca .gca-cd__d {
	display: grid; grid-template-columns: 5.5em 1fr; margin: 0; padding: 4px 14px 12px;
	font-size: 12.5px; line-height: 1.7;
}
.gca .gca-cd__d > dt {
	margin: 0; padding: 7px 0 0; color: var(--a-sub);
	border-top: 1px dashed var(--a-line);
}
.gca .gca-cd__d > dd {
	margin: 0; padding: 7px 0 0; border-top: 1px dashed var(--a-line);
}
.gca .gca-cd__d > dt:first-of-type,
.gca .gca-cd__d > dd:first-of-type { border-top: 0; padding-top: 4px; }
.gca .gca-cd__d > dd b { font-size: 15px; color: var(--a-main2); }

/* --------------------------------------------------------- おすすめモデル */
.gca .gca-model {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0;
}
.gca .gca-model > li {
	display: flex; flex-direction: column; position: relative;
	padding: 16px 14px 14px;
	background: #fff; border: 1px solid var(--a-line); border-radius: 10px;
	box-shadow: var(--a-shadow);
	transition: transform .15s, box-shadow .15s;
}
.gca .gca-model > li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(29,43,54,.1), 0 12px 26px rgba(29,43,54,.08);
}
/* 人気順のバッジ。1〜3位で色を変える（順位はDBの実績なので手で入れ替えない） */
.gca .gca-model__r {
	position: absolute; top: -1px; left: 12px;
	display: flex; align-items: baseline; gap: 2px;
	margin: 0; padding: 5px 11px 6px;
	background: #8d99a4; border-radius: 0 0 7px 7px;
	color: #fff; line-height: 1;
	box-shadow: 0 2px 5px rgba(29,43,54,.2);
}
.gca .gca-model__r i { font-size: 10.5px; font-style: normal; }
.gca .gca-model__r b { font-size: 17px; font-weight: bold; }
.gca .gca-model > li:nth-child(1) .gca-model__r {
	background: linear-gradient(180deg, #d4a93a 0%, #b8912f 100%);
}
.gca .gca-model > li:nth-child(2) .gca-model__r {
	background: linear-gradient(180deg, #a8b3bd 0%, #8d99a4 100%);
}
.gca .gca-model > li:nth-child(3) .gca-model__r {
	background: linear-gradient(180deg, #bf8b53 0%, #a3743f 100%);
}
.gca .gca-model__p {
	display: block; margin: 16px 0 12px; padding: 0;
	background: var(--a-panel); border-radius: 5px; overflow: hidden;
	aspect-ratio: 3 / 2;
}
.gca .gca-model__p img { width: 100%; height: auto; object-fit: cover; border-radius: 5px; }
.gca .gca-model__s { margin: 0 0 2px; font-size: 16px; font-weight: bold; line-height: 1.4; }
.gca .gca-model__m {
	margin: 0 0 8px; font-size: 12.5px; color: var(--a-sub);
	line-height: 1.4; word-break: break-all;
}
.gca .gca-model__t { margin: 0 0 8px; }
.gca .gca-model__pr {
	margin: 0 0 13px; padding: 9px 11px;
	background: linear-gradient(180deg, #fffafa 0%, #fff2f2 100%);
	border: 1px solid #f2d2d4; border-radius: 7px;
	font-size: 12px; line-height: 1.35; color: var(--a-sub);
}
.gca .gca-model__pr span { display: block; }
.gca .gca-model__pr b {
	font-size: 25px; font-weight: bold; color: var(--a-red); letter-spacing: -0.03em;
}
.gca .gca-model__pr i { font-size: 11px; font-style: normal; }
.gca .gca-model__a { margin: auto 0 0; }
.gca .gca-model__a a {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 4px 10px;
	background: linear-gradient(180deg, #1f7fd8 0%, var(--a-main) 100%);
	border-radius: 7px; box-shadow: 0 2px 4px rgba(0,101,204,.28);
	font-size: 14px; font-weight: bold; color: #fff; text-decoration: none;
	transition: filter .15s;
}
.gca .gca-model__a a::after {
	content: ""; width: 6px; height: 6px;
	border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}
.gca .gca-model__a a:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------ 口コミ */
.gca .gca-rev { margin: 18px 0 0; display: grid; gap: 12px; }
.gca .gca-rev > li {
	position: relative; padding: 18px 20px 16px;
	background: #fff; border: 1px solid var(--a-line); border-radius: 8px;
	box-shadow: var(--a-shadow);
}
.gca .gca-rev > li::before {
	content: "“"; position: absolute; right: 14px; top: -2px;
	font-size: 58px; line-height: 1; color: #dbeafa; font-family: serif;
}
.gca .gca-rev__m {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	margin: 0 0 8px; font-size: 12.5px; color: var(--a-sub);
}
.gca .gca-rev__a { font-weight: bold; color: var(--a-ink); }
.gca .gca-rev__p {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; background: var(--a-soft); border: 1px solid #bdd8f2;
	border-radius: 999px; font-size: 11.5px; color: var(--a-main2); white-space: nowrap;
}
.gca .gca-rev__p b { font-size: 14px; margin: 0 1px; }
.gca .gca-star { display: inline-flex; gap: 1px; }
.gca .gca-star svg { fill: currentColor; }
.gca .gca-star svg.on  { color: #f5a623; }
.gca .gca-star svg.off { color: #d7dee4; }
.gca .gca-rev__t {
	position: relative; margin: 0 0 6px;
	font-size: 16px; font-weight: bold; line-height: 1.55;
}
.gca .gca-rev__c { position: relative; margin: 0; font-size: 14.5px; line-height: 2; }

/* ------------------------------------------------------------ よくあるご質問 */
.gca .gca-faq {
	margin: 18px 0 0; border: 1px solid var(--a-line); border-radius: 8px;
	overflow: hidden; box-shadow: var(--a-shadow);
}
.gca .gca-faq > dt {
	position: relative; margin: 0; padding: 15px 18px 13px 54px;
	background: linear-gradient(180deg, #fbfcfd 0%, var(--a-panel) 100%);
	border-top: 1px solid var(--a-line);
	font-size: 15.5px; font-weight: bold; line-height: 1.6;
}
.gca .gca-faq > dt:first-child { border-top: 0; }
.gca .gca-faq > dt::before {
	content: "Q"; position: absolute; left: 16px; top: 15px;
	width: 26px; height: 26px; border-radius: 50%;
	background: linear-gradient(180deg, var(--a-main) 0%, var(--a-main2) 100%);
	color: #fff; font-size: 13px; font-weight: bold; line-height: 26px; text-align: center;
	box-shadow: 0 2px 4px rgba(0,101,204,.28);
}
.gca .gca-faq > dd {
	position: relative; margin: 0; padding: 15px 18px 16px 54px;
	background: #fff; font-size: 14.5px; line-height: 2;
}
.gca .gca-faq > dd::before {
	content: "A"; position: absolute; left: 16px; top: 15px;
	width: 26px; height: 26px; border-radius: 50%;
	background: #fff; border: 2px solid var(--a-line); color: var(--a-sub);
	font-size: 13px; font-weight: bold; line-height: 22px; text-align: center;
}

/* ------------------------------------------------------------ 選び方の本文 */
.gca #gca-choose p { font-size: 14.5px; line-height: 2; }
.gca #gca-choose b { color: var(--a-ink); }
.gca .gca-tbl--w th:first-child { width: 9.5em; white-space: nowrap; }

/* 2つ並べて比べる箱 */
.gca .gca-cols {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 12px;
}
.gca .gca-col {
	padding: 0 0 16px; background: #fff;
	border: 1px solid var(--a-line); border-radius: 8px;
	box-shadow: var(--a-shadow); overflow: hidden;
}
.gca .gca-col__h {
	margin: 0 0 12px; padding: 11px 16px;
	background: linear-gradient(180deg, var(--a-main) 0%, var(--a-main2) 100%);
	font-size: 15px; font-weight: bold; color: #fff;
}
.gca .gca-col > p:not(.gca-col__h) { margin: 0 16px 10px; }
.gca .gca-col > p:last-child { margin-bottom: 0; }
/* 2つめは色を変えて見分けやすくする */
.gca .gca-col:nth-child(2) .gca-col__h {
	background: linear-gradient(180deg, #2a86dd 0%, var(--a-main) 100%);
}

/* 確認していく項目の並び */
.gca .gca-chk {
	margin: 12px 0 0; padding: 6px 0;
	background: #fff; border: 1px solid var(--a-line); border-radius: 8px;
	box-shadow: var(--a-shadow);
}
.gca .gca-chk > li {
	position: relative; margin: 0 14px; padding: 10px 0 10px 32px;
	border-bottom: 1px dashed var(--a-line); font-size: 14.5px; line-height: 1.75;
}
.gca .gca-chk > li:last-child { border-bottom: 0; }
.gca .gca-chk > li::before {
	content: ""; position: absolute; left: 0; top: 12px;
	width: 20px; height: 20px; border-radius: 50%; background: var(--a-soft);
}
.gca .gca-chk > li::after {
	content: ""; position: absolute; left: 7px; top: 16px;
	width: 5px; height: 10px;
	border-right: 2px solid var(--a-main); border-bottom: 2px solid var(--a-main);
	transform: rotate(42deg);
}

/* ------------------------------------------------------------ 10年無料保証 */
/* 目立つ帯 */
.gca .gca-grt__band {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px;
	margin: 18px 0 0; padding: 16px 18px;
	background: linear-gradient(135deg, var(--a-main) 0%, var(--a-main2) 100%);
	border-radius: 10px; box-shadow: 0 3px 8px rgba(0,101,204,.25);
	color: #fff; text-align: center;
}
.gca .gca-grt__band b {
	font-size: 30px; font-weight: bold; line-height: 1.15; letter-spacing: -0.01em;
}
.gca .gca-grt__band-s { font-size: 14px; }

/* 横に溢れる表はここだけ横スクロールさせる */
.gca .gca-scroll { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 保証の比較表 */
.gca .gca-grt { min-width: 560px; }
.gca .gca-grt th[scope="col"] { text-align: center; }
.gca .gca-grt td { white-space: nowrap; }
.gca .gca-grt tbody th[scope="row"] {
	width: 11em; background: var(--a-panel) !important;
	font-size: 13.5px; white-space: nowrap;
}
/* 自社の列だけ立たせる */
.gca .gca-grt .gca-grt__me { background: var(--a-soft) !important; }
.gca .gca-grt thead th.gca-grt__me {
	background: linear-gradient(180deg, var(--a-main) 0%, var(--a-main2) 100%) !important;
	color: #fff; font-size: 14px;
}
.gca .gca-grt tbody td.gca-grt__me { font-weight: bold; color: var(--a-ink); }
.gca .gca-grt tbody tr:hover td.gca-grt__me { background: #e3eefb !important; }
.gca .gca-grt small { display: block; font-size: 10.5px; color: var(--a-sub); }
.gca .gca-mk {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
	font-size: 13px; font-weight: bold; line-height: 1;
}
.gca .gca-mk--o { background: var(--a-main); color: #fff; }
.gca .gca-mk--t { background: #f5a623; color: #fff; }
.gca .gca-mk--x { background: #b6c0c9; color: #fff; }

/* 4つの特長 */
.gca .gca-grt4 {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 0;
}
.gca .gca-grt4 > li {
	display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 2px 12px;
	padding: 16px 18px;
	background: #fff; border: 1px solid var(--a-line); border-radius: 8px;
	box-shadow: var(--a-shadow);
}
.gca .gca-grt4__n {
	grid-row: 1 / 3;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--a-soft); border: 2px solid #bdd8f2;
	font-size: 15px; font-weight: bold; color: var(--a-main2); line-height: 1;
}
.gca .gca-grt4__t { font-size: 15.5px; font-weight: bold; line-height: 1.5; }
.gca .gca-grt4__d { font-size: 13.5px; line-height: 1.75; color: var(--a-sub); }

/* まとめ */
.gca .gca-grt__sum {
	margin: 18px 0 0; padding: 18px 20px;
	background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px;
	font-size: 15px; line-height: 1.95;
}
.gca .gca-grt__cond {
	display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--a-sub);
}

/* ------------------------------------------- 対応エリア・関連リンクのボタン列 */
.gca .gca-near,
.gca .gca-links {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin: 4px 0 0;
}
.gca .gca-links { grid-template-columns: repeat(4, 1fr); }
.gca .gca-near > li > a,
.gca .gca-links > li > a {
	display: flex; justify-content: center; align-items: center;
	min-height: 46px; padding: 7px 9px;
	background: #fff; border: 1px solid var(--a-line); border-radius: 7px;
	box-shadow: 0 1px 2px rgba(29,43,54,.05);
	font-size: 13.5px; line-height: 1.4; color: var(--a-ink);
	text-align: center; text-decoration: none;
	transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.gca .gca-near > li > a:hover,
.gca .gca-links > li > a:hover {
	background: var(--a-soft); border-color: var(--a-main);
	color: var(--a-main2); transform: translateY(-1px);
}
.gca .gca-links > li > a { justify-content: flex-start; text-align: left; font-weight: bold; }
.gca .gca-links > li > a::before {
	content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 10px;
	border-top: 2px solid var(--a-main); border-right: 2px solid var(--a-main);
	transform: rotate(45deg);
}
.gca-sec .heading_01 + .gca-links { margin-top: 16px; }

/* ------------------------------------------------------------ 人気ページ */
/* 画像は商品写真（全品500×500）だけを使う。枠も1:1にして寸法をそろえる。 */
.gca .gca-pop {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0 0;
}
.gca .gca-pop > li > a {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--a-line); border-radius: 9px;
	box-shadow: var(--a-shadow); overflow: hidden;
	color: var(--a-ink); text-decoration: none;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gca .gca-pop > li > a:hover {
	transform: translateY(-2px); border-color: var(--a-main);
	box-shadow: 0 4px 10px rgba(29,43,54,.1), 0 12px 26px rgba(29,43,54,.08);
}
.gca .gca-pop__p {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 2; padding: 0;
	background: var(--a-panel); border-bottom: 1px solid var(--a-line);
}
.gca .gca-pop__p img { width: 100%; height: 100%; object-fit: cover; }
.gca .gca-pop__b {
	display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto;
	padding: 11px 12px 12px;
}
.gca .gca-pop__t {
	display: flex; align-items: flex-start; gap: 7px;
	font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
.gca .gca-pop__t::before {
	content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px;
	border-top: 2px solid var(--a-main); border-right: 2px solid var(--a-main);
	transform: rotate(45deg);
}
.gca .gca-pop__s {
	margin-left: 13px; font-size: 12px; font-weight: bold; color: var(--a-red);
}
/* 人気ページの下に置くテキストリンク列 */
#gca-links.gca .gca-links { margin-top: 16px; grid-template-columns: repeat(2, 1fr); }
/* 人気ページ：アイコン付き。アイコンはインラインSVGで、画像ファイルは使わない */
#gca-links.gca .gca-links > li > a {
	justify-content: flex-start; align-items: center; gap: 11px;
	min-height: 60px; padding: 11px 30px 11px 11px; position: relative;
	text-align: left; font-weight: bold;
}
#gca-links.gca .gca-links > li > a::before { content: none; }
#gca-links.gca .gca-links > li > a::after {
	content: ""; position: absolute; right: 13px; top: 50%;
	width: 6px; height: 6px; margin-top: -4px;
	border-top: 2px solid var(--a-main); border-right: 2px solid var(--a-main);
	transform: rotate(45deg);
}
.gca .gca-links__i {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--a-soft); border: 1px solid #cfe0f5; color: var(--a-main2);
}
.gca .gca-links__i svg {
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.gca .gca-links__t { font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; }
#gca-links.gca .gca-links > li > a:hover .gca-links__i {
	background: var(--a-main); border-color: var(--a-main); color: #fff;
}

/* ------------------------------------------------ 価格・タイプ別のシリーズ一覧 */
/* 画像は商品写真（全品500×500）。横4列でそろえる。 */
.gca .gca-se {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0;
}
.gca .gca-se > li > a {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--a-line); border-radius: 9px;
	box-shadow: var(--a-shadow); overflow: hidden;
	color: var(--a-ink); text-decoration: none;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gca .gca-se > li > a:hover {
	transform: translateY(-2px); border-color: var(--a-main);
	box-shadow: 0 4px 10px rgba(29,43,54,.1), 0 12px 26px rgba(29,43,54,.08);
}
.gca .gca-se__p {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 2; padding: 0;
	background: var(--a-panel); border-bottom: 1px solid var(--a-line);
}
.gca .gca-se__p img { width: 100%; height: 100%; object-fit: cover; }
.gca .gca-se__b {
	display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto;
	padding: 10px 12px 12px;
}
.gca .gca-se__t {
	display: flex; align-items: flex-start; gap: 7px;
	font-size: 14.5px; font-weight: bold; line-height: 1.45;
}
.gca .gca-se__t::before {
	content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px;
	border-top: 2px solid var(--a-main); border-right: 2px solid var(--a-main);
	transform: rotate(45deg);
}
.gca .gca-se__pr {
	margin-left: 13px; font-size: 11.5px; line-height: 1.5; color: var(--a-sub);
}
.gca .gca-se__pr b { font-size: 14px; color: var(--a-red); }

/* ------------------------------------------------------------ タブレット以下 */
@media screen and (max-width: 960px) {
	.gca .gca-model { grid-template-columns: repeat(2, 1fr); }
	.gca .gca-cd { grid-template-columns: repeat(2, 1fr); }
	.gca .gca-near { grid-template-columns: repeat(4, 1fr); }
	.gca .gca-links,
	#gca-links.gca .gca-links { grid-template-columns: repeat(2, 1fr); }
	.gca .gca-pop { grid-template-columns: repeat(3, 1fr); }
	.gca .gca-se { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------- スマホ */
@media screen and (max-width: 640px) {
	.gca { font-size: 14px; }
	.gca.gca-sec { margin-bottom: 28px; }
	.gca .gca-lead { margin: 14px 0 16px; font-size: 14px; line-height: 1.95; }
	.gca .gca-h3 { margin: 24px 0 12px; font-size: 15.5px; }
	.gca .gca-h3__n { width: 25px; height: 25px; font-size: 14px; }

	.gca .gca-fig__i { min-width: 50%; flex: 1 1 50%; border-left: 1px solid var(--a-line); }
	.gca .gca-fig__i:nth-child(n+3) { border-top: 0; }
	.gca .gca-fig__v { font-size: 26px; }

	.gca .gca-cd { grid-template-columns: 1fr; gap: 8px; }
	.gca .gca-cd__d { grid-template-columns: 5em 1fr; font-size: 12px; }
	.gca .gca-near { grid-template-columns: repeat(3, 1fr); gap: 7px; }
	.gca .gca-near > li > a { min-height: 42px; font-size: 12.5px; }
	.gca .gca-links,
	#gca-links.gca .gca-links { grid-template-columns: 1fr; }
	.gca .gca-links__i { width: 34px; height: 34px; }
	.gca .gca-links__t { font-size: 13.5px; }
	.gca .gca-pop { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.gca .gca-se { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.gca .gca-se__b { padding: 9px 10px 10px; }
	.gca .gca-se__t { font-size: 13.5px; }
	.gca .gca-pop__b { padding: 10px; }
	.gca .gca-pop__t { font-size: 12.5px; }
	.gca .gca-pop__s { font-size: 11.5px; }
	.gca .gca-tbl__im { width: 76px; padding: 6px 8px !important; }
	.gca .gca-tbl__im a { height: 54px; }

	.gca .gca-tbl th, .gca .gca-tbl td { padding: 11px 10px; font-size: 13px; }
	.gca .gca-tbl__n { width: 4.5em; }
	.gca .gca-tbl__p { width: auto; font-size: 13px; white-space: normal; }
	.gca .gca-tbl--mk tbody th { width: 5.5em; }
	.gca .gca-bar__v { width: 3.8em; font-size: 15px; }

	.gca .gca-faq > dt { padding: 13px 14px 11px 48px; font-size: 14.5px; }
	.gca .gca-faq > dd { padding: 13px 14px 14px 48px; font-size: 14px; line-height: 1.95; }
	.gca .gca-faq > dt::before, .gca .gca-faq > dd::before { left: 12px; width: 24px; height: 24px; }
	.gca .gca-faq > dt::before { line-height: 24px; }
	.gca .gca-faq > dd::before { line-height: 20px; }

	.gca .gca-cols { grid-template-columns: 1fr; gap: 10px; }
	.gca .gca-grt__band { gap: 4px 8px; padding: 14px; }
	.gca .gca-grt__band b { font-size: 25px; }
	.gca .gca-grt__band-s { font-size: 13px; }
	.gca .gca-grt4 { grid-template-columns: 1fr; gap: 8px; }
	.gca .gca-grt4 > li { grid-template-columns: 38px 1fr; gap: 2px 10px; padding: 13px 14px; }
	.gca .gca-grt4__n { width: 38px; height: 38px; font-size: 13px; }
	.gca .gca-grt4__t { font-size: 14.5px; }
	.gca .gca-grt__sum { padding: 15px 16px; font-size: 14px; }
	.gca .gca-grt tbody th[scope="row"] { width: 8.5em; font-size: 12.5px; }
	.gca .gca-grt { min-width: 520px; }
	/* 横スクロールできることが分かるよう、右端をぼかす */
	.gca .gca-scroll {
		background:
			linear-gradient(90deg, #fff 60%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
			linear-gradient(-90deg, #fff 60%, rgba(255,255,255,0)) right / 24px 100% no-repeat;
	}
	.gca .gca-rev > li { padding: 15px 16px 14px; }
	.gca .gca-rev__c { font-size: 14px; line-height: 1.95; }

	/* 天板幅の表はスマホでは4列だと詰まるので、1行ずつ積む（内容は隠さない） */
	.gca .gca-tbl--w thead { display: none; }
	.gca .gca-tbl--w tbody tr { display: block; padding: 12px 12px; }
	.gca .gca-tbl--w tbody tr:nth-child(even) { background: #fbfcfd; }
	.gca .gca-tbl--w tbody tr:hover { background: none; }
	.gca .gca-tbl--w tbody th,
	.gca .gca-tbl--w tbody td {
		display: block; width: auto !important; padding: 0 0 3px;
		border-bottom: 0; background: none !important; text-align: left !important;
		white-space: normal;
	}
	.gca .gca-tbl--w tbody th { font-size: 16px; color: var(--a-main2); }
	.gca .gca-tbl--w tbody td.gca-tbl__n::before { content: "品番数 "; }
	.gca .gca-tbl--w tbody td.gca-tbl__p::before {
		content: "工事費込み "; color: var(--a-sub); font-weight: normal;
	}

	/* おすすめモデルは1件ずつ横並び（画像＋情報） */
	.gca .gca-model { grid-template-columns: 1fr; gap: 12px; }
	.gca .gca-model > li {
		display: grid; grid-template-columns: 116px 1fr; gap: 0 13px;
		padding: 26px 13px 13px;
	}
	.gca .gca-model > li:hover { transform: none; }
	.gca .gca-model__r { top: -1px; left: 10px; padding: 4px 10px 5px; }
	.gca .gca-model__r b { font-size: 15px; }
	.gca .gca-model__p { grid-column: 1; grid-row: 1 / 6; margin: 0; align-self: start; }
	.gca .gca-model__p img { height: 100%; }
	.gca .gca-model__s { grid-column: 2; font-size: 15px; }
	.gca .gca-model__m { grid-column: 2; }
	.gca .gca-model__t { grid-column: 2; }
	.gca .gca-model__pr { grid-column: 2; margin-bottom: 10px; }
	.gca .gca-model__pr b { font-size: 21px; }
	.gca .gca-model__a { grid-column: 1 / 3; }
}

/* =============================================================================
 * リード文とお得訴求（2026-09-15 作り替え）
 *   共通CSSの .syozaitext / .b_kome / .komento / .cp_bg は
 *   4,500〜9,500ファイルで共用されているため触らず、ここに専用の見た目を書く。
 * ========================================================================== */
/* リード文。横のボーダーは使わない。キャッチ・本文・締めの3段で読ませる */
/* 装飾の丸は背景（radial-gradient）で描く。要素で重ねると文字が薄く見えるため。
   画像は使わない。色はサイトの配色（水色・青・だいだい・赤）から薄く取る。
   【丸は重ねない】中心間の距離が半径の和より大きくなる位置だけに置く。 */
.gca.gca-fv {
	margin: 18px 0 24px; padding: 24px 26px 22px; position: relative;
	background-color: #f4f9ff;
	background-image:
		/* 右上（水色・大）中心 右-10 / 上-10 */
		radial-gradient(circle 52px at calc(100% + 10px) -10px, rgba(41,171,233,.26) 99%, transparent 100%),
		/* 青・中  中心 右96 / 上26 */
		radial-gradient(circle 26px at calc(100% - 96px) 26px,  rgba(0,101,204,.20) 99%, transparent 100%),
		/* 赤・小  中心 右170 / 上12 */
		radial-gradient(circle 14px at calc(100% - 170px) 12px, rgba(215,0,15,.15)  99%, transparent 100%),
		/* だいだい 中心 右44 / 上96 */
		radial-gradient(circle 18px at calc(100% - 44px) 96px,  rgba(232,145,45,.26) 99%, transparent 100%),
		/* 青・極小 中心 右122 / 上106 */
		radial-gradient(circle 11px at calc(100% - 122px) 106px, rgba(0,101,204,.24) 99%, transparent 100%),
		/* 左下（だいだい・大）中心 左-14 / 下-14 */
		radial-gradient(circle 34px at -14px calc(100% + 14px), rgba(232,145,45,.16) 99%, transparent 100%),
		/* 左下（水色・小）中心 左74 / 下24 */
		radial-gradient(circle 13px at 74px calc(100% - 24px),  rgba(41,171,233,.26) 99%, transparent 100%),
		/* 地のグラデーション */
		linear-gradient(180deg, #f8fcff 0%, #eaf3fc 100%);
	background-repeat: no-repeat;
	border-radius: 12px; overflow: hidden;
}
.gca .gca-fv__c {
	position: relative; margin: 0 0 14px; padding: 0 0 13px;
	border-bottom: 1px solid #d5e5f5;
	font-size: 21px; font-weight: bold; line-height: 1.55; color: var(--a-main2);
	letter-spacing: -0.01em;
}
.gca .gca-fv__b {
	position: relative; margin: 0 0 12px;
	font-size: 14.5px; line-height: 2.05;
}
.gca .gca-fv__b b { font-weight: bold; color: var(--a-main); }
.gca .gca-fv__e {
	position: relative; margin: 0; padding: 12px 16px;
	background: #fff; border-radius: 8px;
	box-shadow: 0 1px 3px rgba(29,43,54,.06);
	font-size: 14.5px; font-weight: bold; line-height: 1.85;
}
.gca .gca-fv__e b { color: var(--a-red); }

/* お得訴求＋セール導線。赤い帯と赤いボタンが並んで競っていたので1枚にまとめた */
.gca.gca-off {
	margin: 0 0 30px; padding: 22px 24px 24px; position: relative;
	background: #fff; border: 1px solid var(--a-line); border-radius: 12px;
	box-shadow: var(--a-shadow);
}
.gca .gca-off__badge {
	display: inline-flex; align-items: baseline; gap: 2px;
	margin: 0 0 10px; padding: 5px 14px;
	background: linear-gradient(135deg, #e8131f 0%, var(--a-red) 100%);
	border-radius: 999px; box-shadow: 0 2px 5px rgba(215,0,15,.28);
	font-size: 12.5px; font-weight: bold; color: #fff; line-height: 1;
}
.gca .gca-off__badge b { font-size: 19px; font-weight: bold; letter-spacing: -0.02em; }
.gca .gca-off__h {
	margin: 0 0 12px; padding: 0;
	background: none; border: 0;
	font-size: 21px; font-weight: bold; line-height: 1.5; color: var(--a-ink);
}
.gca .gca-off__t { margin: 0 0 20px; font-size: 14.5px; line-height: 2; }

/* セールへの導線。このブロックで唯一の強い色にする */
.gca .gca-off__cta {
	display: block; padding: 16px 44px 18px 24px; position: relative;
	background: linear-gradient(135deg, #e8131f 0%, #c40010 100%);
	border-radius: 10px; box-shadow: 0 3px 8px rgba(196,0,16,.3);
	text-decoration: none; text-align: center;
	transition: filter .15s, transform .1s;
}
.gca .gca-off__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gca .gca-off__cta::after {
	content: ""; position: absolute; right: 22px; top: 50%;
	width: 9px; height: 9px; margin-top: -6px;
	border-top: 3px solid #fff; border-right: 3px solid #fff;
	transform: rotate(45deg);
}
.gca .gca-off__ctah {
	margin: 0; padding: 0; background: none; border: 0;
	font-size: 23px; font-weight: bold; line-height: 1.35; color: #fff;
	letter-spacing: -0.01em;
}
.gca .gca-off__ctas {
	display: block; margin: 0 0 3px;
	font-size: 13.5px; font-weight: bold; opacity: .95;
}

@media screen and (max-width: 640px) {
	.gca.gca-fv { margin: 14px 0 18px; }
	.gca.gca-fv {
		padding: 18px 16px 16px;
		/* スマホは面積が狭いので5つ。こちらも重ねない */
		background-image:
			radial-gradient(circle 38px at calc(100% + 8px) -8px,  rgba(41,171,233,.26) 99%, transparent 100%),
			radial-gradient(circle 18px at calc(100% - 74px) 18px, rgba(0,101,204,.20) 99%, transparent 100%),
			radial-gradient(circle 11px at calc(100% - 32px) 70px, rgba(232,145,45,.26) 99%, transparent 100%),
			radial-gradient(circle 26px at -12px calc(100% + 12px), rgba(232,145,45,.16) 99%, transparent 100%),
			radial-gradient(circle 12px at 62px calc(100% - 20px), rgba(41,171,233,.26) 99%, transparent 100%),
			linear-gradient(180deg, #f8fcff 0%, #eaf3fc 100%);
	}
	.gca .gca-fv__c { margin-bottom: 12px; padding-bottom: 11px; font-size: 17px; line-height: 1.5; }
	.gca .gca-fv__b { font-size: 14px; line-height: 1.95; }
	.gca .gca-fv__e { padding: 11px 13px; font-size: 13.5px; line-height: 1.8; }
	.gca.gca-off { margin-bottom: 24px; padding: 18px 16px 20px; }
	.gca .gca-off__h { font-size: 17.5px; }
	.gca .gca-off__t { margin-bottom: 16px; font-size: 14px; line-height: 1.95; }
	.gca .gca-off__cta { padding: 14px 34px 15px 16px; }
	.gca .gca-off__cta::after { right: 15px; }
	.gca .gca-off__ctah { font-size: 18px; }
	.gca .gca-off__ctas { font-size: 12.5px; }
}


/* =============================================================================
 * 町域別・駅名別の対応エリア（#gca-area の中）  2026-09-15 デザイン一新
 *
 *   中身は共通インクルード（sekou/gasconro/include/choiki.php・eki.php）の出力で、
 *   見た目は sekou/css/list_cust.css が持っている。そのCSSは9,934ファイルで
 *   共用されているので触らず、ここで #gca-area 配下だけ上書きする
 *   （#gca-area + #choiki の2ID なので元の #choiki より必ず優先される）。
 *
 *   直した点
 *     ・駅名別の緑（#31b335 / #43c55d）をやめ、メインカラーの青に合わせる
 *     ・見出しのべた塗りの帯をやめ、左に青い印を置いた小見出しにする
 *     ・行ラベルと本文のグレーのブロック塗りをやめ、行ごとの薄い交互色にする
 *     ・使われていない3列目の空セルを隠して横幅を本文に回す
 * ========================================================================== */
#gca-area #choiki,
#gca-area #eki {
	margin: 0 0 14px !important; padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--a-line) !important; border-radius: 10px;
	box-shadow: var(--a-shadow); overflow: hidden;
}
#gca-area #choiki h3,
#gca-area #eki h3 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 !important; padding: 14px 18px 12px !important;
	background: linear-gradient(180deg, #fbfcfd 0%, var(--a-panel) 100%) !important;
	border-bottom: 1px solid var(--a-line);
	font-size: 16px !important; font-weight: bold; color: var(--a-ink) !important;
	line-height: 1.4;
}
#gca-area #choiki h3::before,
#gca-area #eki h3::before {
	content: ""; flex: 0 0 auto; width: 5px; height: 19px;
	background: var(--a-main); border-radius: 3px;
}
#gca-area table { width: 100%; margin: 0; border-collapse: collapse; }
#gca-area #choiki .gyou1, #gca-area #choiki .gyou2,
#gca-area #eki .gyou1, #gca-area #eki .gyou2 {
	width: 7em !important; padding: 12px 8px 12px 18px !important;
	background: none !important; margin: 0 !important;
	vertical-align: top; font-size: 12.5px; font-weight: bold; color: var(--a-sub);
	white-space: nowrap;
}
#gca-area #eki .gyou1 { width: 10em !important; }
#gca-area .choikieria1, #gca-area .choikieria2,
#gca-area .ekieria1, #gca-area .ekieria2 {
	padding: 12px 18px 12px 0 !important;
	background: none !important;
	font-size: 13.5px !important; line-height: 1.9 !important; color: var(--a-ink);
}
#gca-area tbody tr { border-top: 1px solid var(--a-line); }
#gca-area tbody tr:first-child { border-top: 0; }
#gca-area tbody tr:nth-child(even) { background: #fbfcfd; }
/* 3列目は空のまま出ているので隠す */
#gca-area tbody td:nth-child(3) { display: none; }
#gca-area .acbox td { font-size: 13.5px; }

/* 「続きを見る」。青の枠線ボタンに揃える */
#gca-area .acblock .more {
	width: auto !important; max-width: 300px;
	height: auto !important; line-height: 1.4 !important;
	margin: 0 auto 16px !important; padding: 10px 22px !important;
	background: #fff !important; border: 1.5px solid var(--a-main) !important;
	border-radius: 999px !important;
	font-size: 13.5px !important; font-weight: bold; color: var(--a-main);
	transition: background .15s, color .15s;
}
#gca-area .acblock .more:hover {
	background: var(--a-main) !important; color: #fff !important;
}

@media screen and (max-width: 640px) {
	#gca-area #choiki h3,
	#gca-area #eki h3 { padding: 12px 14px 10px !important; font-size: 15px !important; }
	#gca-area #choiki .gyou1, #gca-area #choiki .gyou2,
	#gca-area #eki .gyou1, #gca-area #eki .gyou2 {
		width: 5.5em !important; padding: 11px 6px 11px 14px !important; font-size: 12px;
	}
	#gca-area #eki .gyou1 { width: 7.5em !important; }
	#gca-area .choikieria1, #gca-area .choikieria2,
	#gca-area .ekieria1, #gca-area .ekieria2 {
		padding: 11px 14px 11px 0 !important; font-size: 13px !important;
	}
}