@charset "utf-8";
/* =============================================================================
 * 解説ページ（費用の相場・工事の流れ）の共通部品  2026-10-16
 *   使う場所：/ecokyu-to/price/（.ect の中）・/maker/html/kouji/（.kyt の中）・/dishwasher/kouji/（.dwt の中）
 *   色は各商材TOPのCSSが持つ変数（--c-ink/--c-sub/--c-navy/--c-mid/--c-line/--c-panel/--c-red）をそのまま使う。
 *   ★ここで色を決めない。商材の色はその商材のCSSが正本。
 *   ★左だけ太い線・影は使わない。@media は最後。
 * ========================================================================== */
.gs-g { --g-ac: var(--c-mid, #2a7aa8); --g-line: var(--c-line, #e4e9ee); --g-panel: var(--c-panel, #f6f8fa); }
.gs-g ul li::before,
.gs-g ol li::before { content: none; }
/* 文中のリンクはリンクと分かるように（ボタン・目次・関連ページは除く） */
.gs-g .gs-g-steps span a,
.gs-g .gs-g-cards p a,
.gs-g .kt-lead a, .gs-g .kt-note a, .gs-g .kt-faq__a a,
.gs-g .dt-lead a, .gs-g .dt-note a, .gs-g .dt-faq__a a { color: var(--g-ac); text-decoration: underline; }

/* 目次（eco は .dt-toc の中で使う） */
.gs-g .gs-g-toc { list-style: none; margin: 0; padding: 10px 12px 12px; }

/* 目次（単独で使う） */
.gs-g .gs-g-toc2 { margin: 0 0 18px; border: 1px solid var(--g-line); background: #fff; }
.gs-g .gs-g-toc2 > p { margin: 0; padding: 8px 12px; background: var(--g-panel); font-size: 13px; font-weight: bold; color: var(--c-ink, #22303a); }
.gs-g .gs-g-toc2 ul { list-style: none; margin: 0; padding: 10px 12px 12px; display: flex; flex-wrap: wrap; gap: 5px 6px; }
.gs-g .gs-g-toc2 li { margin: 0; padding: 0; }
.gs-g .gs-g-toc2 a {
	display: inline-block; padding: 5px 11px; border: 1px solid var(--g-line); border-radius: 3px;
	background: #fff; color: var(--c-ink, #22303a); font-size: 13px; line-height: 1.5; text-decoration: none;
}
.gs-g .gs-g-toc2 a:hover { background: var(--g-ac); border-color: var(--g-ac); color: #fff; }

/* 数字の帯（3つ） */
.gs-g .gs-g-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.gs-g .gs-g-kpi > div { padding: 12px 10px; border: 1px solid var(--g-line); border-radius: 4px; background: var(--g-panel); text-align: center; }
.gs-g .gs-g-kpi dt { margin: 0 0 4px; font-size: 12.5px; font-weight: bold; color: var(--c-sub, #5a6b78); }
.gs-g .gs-g-kpi dd { margin: 0; font-size: 13px; color: var(--c-ink, #22303a); }
.gs-g .gs-g-kpi dd b { margin-right: 2px; font-size: 28px; line-height: 1.2; color: var(--g-ac); }
.gs-g .gs-g-kpi dd small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-sub, #5a6b78); }

/* 横棒の分布 */
.gs-g .gs-g-hist { list-style: none; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--g-line); background: #fff; }
.gs-g .gs-g-hist li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; margin: 0; padding: 4px 0; }
.gs-g .gs-g-hist__k { font-size: 13px; white-space: nowrap; color: var(--c-ink, #22303a); }
.gs-g .gs-g-hist__b { display: block; height: 16px; background: var(--c-rail, #e7eef3); border-radius: 2px; overflow: hidden; }
.gs-g .gs-g-hist__b i { display: block; height: 100%; background: var(--g-ac); }
.gs-g .gs-g-hist__n { font-size: 13px; text-align: right; white-space: nowrap; color: var(--c-sub, #5a6b78); }

/* 相場の表（.dt-otbl に重ねる）：金額の列は右ぞろえにしない（SPの積み上げと揃える） */
.gs-g .gs-g-tbl td b { color: var(--c-red, #d7000f); }
.gs-g .gs-g-tbl tbody th { width: 15em; }
.gs-g .gs-g-tbl tbody th small { white-space: nowrap; }

/* 表（単独で使う） */
.gs-g .gs-g-tbl2 { width: 100%; margin: 0 0 16px; border-collapse: collapse; background: #fff; font-size: 14px; }
.gs-g .gs-g-tbl2 caption { padding: 0 0 6px; text-align: left; font-size: 14px; font-weight: bold; color: var(--c-ink, #22303a); }
.gs-g .gs-g-tbl2 th,
.gs-g .gs-g-tbl2 td { padding: 9px 11px; border: 1px solid var(--g-line); line-height: 1.6; vertical-align: middle; }
.gs-g .gs-g-tbl2 thead th { background: var(--c-navy, #123a56); color: #fff; text-align: center; font-size: 13.5px; }
.gs-g .gs-g-tbl2 tbody th { background: var(--g-panel); text-align: left; font-weight: bold; font-size: 13.5px; }
.gs-g .gs-g-tbl2 td { text-align: center; }
.gs-g .gs-g-tbl2 td[data-l] { text-align: left; }

.gs-g .gs-g-sub { margin: 20px 0 8px; font-size: 15px; font-weight: bold; color: var(--c-ink, #22303a); }

/* 工事パックの中身 */
.gs-g .gs-g-pack { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-g .gs-g-pack li { margin: 0; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 4px; background: var(--g-panel); }
.gs-g .gs-g-pack b { display: block; font-size: 14px; color: var(--c-ink, #22303a); }
.gs-g .gs-g-pack span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.6; color: var(--c-sub, #5a6b78); }

/* 段取り・ポイント（番号つき） */
.gs-g .gs-g-steps { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: none; }
.gs-g .gs-g-steps li { margin: 0; padding: 12px 14px; border: 1px solid var(--g-line); background: #fff; }
.gs-g .gs-g-steps li + li { border-top: 0; }
.gs-g .gs-g-steps li:nth-child(odd) { background: var(--g-panel); }
.gs-g .gs-g-steps b { display: block; margin-bottom: 3px; font-size: 15px; color: var(--g-ac); }
.gs-g .gs-g-steps span { display: block; font-size: 14px; line-height: 1.8; color: var(--c-ink, #22303a); }

/* 置き場所などの説明（2列） */
.gs-g .gs-g-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.gs-g .gs-g-cards > div { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: 4px; background: #fff; }
.gs-g .gs-g-cards p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--c-ink, #22303a); }
.gs-g .gs-g-cards .gs-g-cards__h { margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid var(--g-line); font-size: 15px; font-weight: bold; color: var(--g-ac); }

/* 部材（写真つき・3列） */
.gs-g .gs-g-opt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gs-g .gs-g-opt li { margin: 0; padding: 0 0 10px; border: 1px solid var(--g-line); border-radius: 4px; background: #fff; overflow: hidden; }
.gs-g .gs-g-opt img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 350; object-fit: contain; background: #fff; }
.gs-g .gs-g-opt b { display: block; margin: 8px 10px 2px; font-size: 14px; color: var(--c-ink, #22303a); }
.gs-g .gs-g-opt span { display: block; margin: 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--c-sub, #5a6b78); }

/* 関連ページ */
.gs-g .gs-g-rel { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-g .gs-g-rel li { margin: 0; padding: 0; display: flex; }
.gs-g .gs-g-rel a {
	display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 10px 12px;
	border: 1px solid var(--g-line); border-radius: 4px; background: #fff; text-decoration: none;
}
.gs-g .gs-g-rel a:hover { border-color: var(--g-ac); }
.gs-g .gs-g-rel b { font-size: 14px; color: var(--g-ac); }
.gs-g .gs-g-rel span { margin-top: 2px; font-size: 12px; color: var(--c-sub, #5a6b78); }

/* ---- 画像つきの部品（2026-10-16 追加：文字と表だけにしない） ---- */

/* 最初の画面：左に要点、右に写真 */
.gs-g .gs-g-hero {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start;
	margin: 12px 0 18px; padding: 18px; border: 1px solid var(--g-line); border-radius: 6px; background: var(--g-panel);
}
.gs-g .gs-g-hero__eye { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 3px; background: var(--g-ac); color: #fff; font-size: 12px; font-weight: bold; line-height: 1.6; }
.gs-g .gs-g-hero__c { margin: 0 0 10px; font-size: 20px; font-weight: bold; line-height: 1.55; color: var(--c-ink, #22303a); }
.gs-g .gs-g-hero__c em { font-style: normal; color: var(--g-ac); }
.gs-g .gs-g-hero__d { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: var(--c-ink, #22303a); }
.gs-g .gs-g-hero__l { list-style: none; margin: 0; padding: 0; }
.gs-g .gs-g-hero__l li { position: relative; margin: 0 0 6px; padding: 0 0 0 26px; font-size: 14px; line-height: 1.7; color: var(--c-ink, #22303a); }
.gs-g .gs-g-hero__l li svg { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; color: var(--g-ac); }

/* 交換前・交換後の写真 */
.gs-g .gs-g-ba { margin: 0; }
.gs-g .gs-g-ba__p { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.gs-g .gs-g-ba__arr { display: block; width: 18px; height: 28px; margin: 0 auto; background: var(--g-ac); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gs-g .gs-g-ba__p > span { position: relative; display: block; border-radius: 4px; overflow: hidden; background: #e9edf1; }
.gs-g .gs-g-ba__p img { display: block; width: 100%; height: auto; }
.gs-g .gs-g-ba__p i { position: absolute; left: 8px; top: 8px; padding: 3px 12px; font-size: 13px !important; border-radius: 3px; background: rgba(34, 48, 58, .78); color: #fff; font-style: normal; font-size: 12px; font-weight: bold; line-height: 1.6; }
.gs-g .gs-g-ba__p > span:last-child i { background: var(--g-ac); }
.gs-g .gs-g-ba figcaption { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--c-sub, #5a6b78); }

/* 金額の例（商品写真つき・3つ） */
.gs-g .gs-g-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-g .gs-g-trio li { display: flex; flex-direction: column; margin: 0; padding: 8px 8px 10px; border: 1px solid var(--g-line); border-radius: 4px; background: #fff; text-align: center; }
.gs-g .gs-g-trio a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.gs-g .gs-g-trio img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.gs-g .gs-g-trio small { display: block; margin: 6px 0 2px; font-size: 12px; font-weight: bold; color: var(--g-ac); }
.gs-g .gs-g-trio span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--c-sub, #5a6b78); }
.gs-g .gs-g-trio b { display: block; margin-top: auto; padding-top: 4px; font-size: 16px; color: var(--c-red, #d7000f); }
.gs-g .gs-g-trio b em { font-style: normal; font-size: 11px; }

/* 段取り（写真つき） */
.gs-g .gs-g-flow { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.gs-g .gs-g-flow > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; }
.gs-g .gs-g-flow__ph { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: #f3f5f7; }
.gs-g .gs-g-flow__ph img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gs-g .gs-g-flow__ph.is-fit { background: #fff; border: 1px solid var(--g-line); }
.gs-g .gs-g-flow__ph.is-fit img { left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; }
.gs-g .gs-g-flow__ph svg { display: block; width: 100%; height: 100%; }
.gs-g .gs-g-flow__n { position: absolute; left: 4px; top: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g-ac); color: #fff; font-size: 12.5px; font-weight: bold; }
.gs-g .gs-g-flow__b { display: block; margin: 0 0 4px; font-size: 16px; font-weight: bold; line-height: 1.5; color: var(--g-ac); }
.gs-g .gs-g-flow__d { margin: 0; font-size: 14px; line-height: 1.8; color: var(--c-ink, #22303a); }
.gs-g .gs-g-flow__d a { color: var(--g-ac); text-decoration: underline; }

/* 説明（写真つきの2列） */
.gs-g .gs-g-cards > div.has-img { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.gs-g .gs-g-cards__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 4px; background: #f3f5f7; overflow: hidden; }
.gs-g .gs-g-cards__ph img,
.gs-g .gs-g-cards__ph svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* 工事パックの中身（絵つき） */
.gs-g .gs-g-pack li.has-ic { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.gs-g .gs-g-pack li.has-ic img { display: block; width: 44px; height: 44px; object-fit: contain; }

/* 説明図 */
.gs-g .gs-g-fig { margin: 0 0 14px; padding: 14px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; text-align: center; }
.gs-g .gs-g-fig svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.gs-g .gs-g-fig figcaption { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--c-sub, #5a6b78); text-align: left; }

/* 説明図を2枚並べる */
.gs-g .gs-g-fig2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.gs-g .gs-g-fig2 img { display: block; width: 100%; height: auto; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; }

/* 写真と文の横並び */
.gs-g .gs-g-side { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.gs-g .gs-g-side__ph { margin: 0; }
.gs-g .gs-g-side__ph img { display: block; width: 100%; height: auto; border-radius: 4px; }
.gs-g .gs-g-side__ph figcaption { margin: 5px 0 0; font-size: 12px; color: var(--c-sub, #5a6b78); }

/* 人数の目安（絵） */
.gs-g .gs-g-fam { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gs-g .gs-g-fam li { margin: 0; padding: 10px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; text-align: center; }
.gs-g .gs-g-fam img { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; }
.gs-g .gs-g-fam b { display: block; margin-top: 6px; font-size: 17px; color: var(--g-ac); }
.gs-g .gs-g-fam span { display: block; font-size: 13px; color: var(--c-ink, #22303a); }

/* 表の中の小さい写真・ロゴ */
.gs-g .gs-g-thumb { display: flex; align-items: center; gap: 8px; }
.gs-g .gs-g-thumb img { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 3px; }
.gs-g .gs-g-tbl tbody th:has(.gs-g-thumb) { width: 14em; }
.gs-g .gs-g-logo { display: block; height: 18px; width: auto; max-width: 110px; margin: 0 0 3px; }

/* 横にスライドする表（列が多い表。SPでも積み上げない） */
.gs-g .gs-g-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; border: 1px solid var(--g-line); }
.gs-g .gs-g-tblx { width: 100%; min-width: 680px; border-collapse: collapse; background: #fff; font-size: 13.5px; }
.gs-g .gs-g-tblx th,
.gs-g .gs-g-tblx td { padding: 9px 11px; border: 1px solid var(--g-line); line-height: 1.6; vertical-align: middle; text-align: left; }
.gs-g .gs-g-tblx tr > *:first-child { border-left: 0; }
.gs-g .gs-g-tblx tr > *:last-child { border-right: 0; }
.gs-g .gs-g-tblx thead th { border-top: 0; background: var(--c-navy, #123a56); color: #fff; font-size: 13px; text-align: center; white-space: nowrap; }
.gs-g .gs-g-tblx tbody th { background: var(--g-panel); font-size: 13px; white-space: nowrap; }
.gs-g .gs-g-tblx tbody tr:last-child > * { border-bottom: 0; }
.gs-g .gs-g-tblx td:nth-child(2) { white-space: nowrap; }
.gs-g .gs-g-tblx td b { color: var(--c-red, #d7000f); }
.gs-g .gs-g-tblx .gs-g-thumb img { width: 40px; height: 40px; }
.gs-g .gs-g-tblx .dt-na { color: var(--c-sub, #5a6b78); font-size: 12px; }
.gs-g .gs-g-scroll__hint { display: none; margin: 0 0 12px; font-size: 11.5px; color: var(--c-sub, #5a6b78); text-align: right; }


/* ---- 表（3ページ共通・2026-10-16 作り直し） ----
   列幅は各表の colgroup で決める。数字は折り返さない。スマホは横にスライド。 */
.gs-g .gs-g-cap { margin: 0 0 6px; font-size: 14px; font-weight: bold; color: var(--c-ink, #22303a); }
.gs-g .gs-g-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; border: 1px solid var(--g-line); border-radius: 4px; background: #fff; }
.gs-g .gs-g-scroll + .gs-g-scroll__hint { margin-top: -10px; }
.gs-g .gs-g-t { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; background: #fff; font-size: 14px; }
.gs-g .gs-g-t th,
.gs-g .gs-g-t td { padding: 11px 12px; border: 0; border-bottom: 1px solid var(--g-line); line-height: 1.6; vertical-align: middle; }
.gs-g .gs-g-t tbody tr:last-child > * { border-bottom: 0; }
.gs-g .gs-g-t thead th { padding: 9px 8px; background: var(--c-navy, #123a56); color: #fff; font-size: 13px; font-weight: bold; text-align: center; white-space: normal; line-height: 1.45; }
.gs-g .gs-g-t tbody th { background: var(--g-panel); font-size: 14px; font-weight: bold; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--c-ink, #22303a); }
.gs-g .gs-g-t tbody th small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; white-space: normal; color: var(--c-sub, #5a6b78); }
.gs-g .gs-g-t tbody th a { color: var(--c-ink, #22303a); text-decoration: none; }
.gs-g .gs-g-t td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-ink, #22303a); }
.gs-g .gs-g-t td.is-c { text-align: center; }
.gs-g .gs-g-t td.is-l { text-align: left; white-space: normal; }
.gs-g .gs-g-t td b { color: var(--c-red, #d7000f); }
.gs-g .gs-g-t td b { white-space: nowrap; }
.gs-g .gs-g-hist.is-wide li { grid-template-columns: 15em minmax(0, 1fr) 5em; }
.gs-g .gs-g-hist.is-wide .gs-g-hist__k { white-space: normal; line-height: 1.4; }
.gs-g .gs-g-side__ph.is-small img { width: auto; max-width: 100%; margin: 0 auto; }
.gs-g .gs-g-t .dt-na { color: var(--c-sub, #5a6b78); font-size: 12px; }
.gs-g .gs-g-t .gs-g-thumb { min-width: 0; }
.gs-g .gs-g-t .gs-g-thumb span { min-width: 0; }
.gs-g .gs-g-t .gs-g-thumb img { width: 40px; height: 40px; }
.gs-g .gs-g-t th img.gs-g-logo { display: block; width: auto !important; height: 24px !important; max-width: 130px !important; margin: 0 0 4px; object-fit: contain; object-position: left center; }
.gs-g .gs-g-scroll__hint { display: none; margin: 0 0 14px; font-size: 11.5px; color: var(--c-sub, #5a6b78); text-align: right; }


/* ---- エラーコードのページ（2026-10-16） ---- */
.gs-g .ec-find { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0 0 12px; padding: 12px 14px; border-radius: 6px; background: var(--c-navy, #123a56); }
.gs-g .ec-find label { color: #fff; font-size: 14px; font-weight: bold; white-space: nowrap; }
.gs-g .ec-find input { min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 4px; font-size: 15px; }
.gs-g .ec-find button { height: 42px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--c-amber, #e8912d); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; }
.gs-g .ec-find__r { grid-column: 1 / -1; margin: 0; color: #fff; font-size: 13px; }
.gs-g .ec-find__r[hidden] { display: none; }
.gs-g .ec-mk { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-g .ec-mk li { margin: 0; }
.gs-g .ec-mk a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 10px 6px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; text-decoration: none; }
.gs-g .ec-mk a:hover { border-color: var(--g-ac); }
.gs-g .ec-mk img { display: block; width: auto !important; height: 24px !important; max-width: 90%; }
.gs-g .ec-mk span { font-size: 12.5px; color: var(--c-ink, #22303a); }
.gs-g .ec-logo img { width: auto !important; height: 36px !important; max-width: 100%; margin: 20px auto 0; }
.gs-g .ec-basic-box { margin: 4px 0 14px; padding: 10px 14px; border: 1px solid var(--g-line); border-radius: 6px; background: var(--g-panel); font-size: 14px; line-height: 1.8; }
.gs-g .ec-basic-box b { display: inline-block; margin-right: 10px; padding: 1px 10px; border-radius: 3px; background: var(--g-ac); color: #fff; font-size: 12.5px; }
.gs-g .ec-basic { color: var(--c-sub, #5a6b78); font-size: 12.5px; }
.gs-g .ec-ok { color: #1d7a3e; font-weight: bold; white-space: normal; }
.gs-g .gs-g-steps .ec-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 8px 0 0; border-radius: 50%; background: var(--g-ac); color: #fff; font-size: 12px; vertical-align: 1px; }
.gs-g .ec-t td.is-c { white-space: normal; }
.gs-g .ec-t tr.is-hit > * { background: #fff3c4; }


/* ---- 故障・不具合のページ（2026-10-16） ---- */
.gs-g .tb-i { display: block; width: 100%; height: 100%; }
.gs-g .tb-idx { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-g .tb-idx li { margin: 0; }
.gs-g .tb-idx a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; color: var(--c-ink, #22303a); font-size: 14px; font-weight: bold; line-height: 1.45; text-decoration: none; }
.gs-g .tb-idx a:hover { border-color: var(--g-ac); color: var(--g-ac); }
.gs-g .tb-idx__i { flex: 0 0 auto; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--g-panel); color: var(--g-ac); }
.gs-g .tb-cap { display: flex; align-items: center; gap: 8px; }
.gs-g .tb-cap__i { flex: 0 0 auto; width: 26px; height: 26px; color: var(--g-ac); }

/* 横長のバナー画像 */
.gs-g .gs-g-banner { display: block; margin: 0 0 14px; }
.gs-g .gs-g-banner img { display: block; width: 100%; height: auto; border-radius: 4px; }

@media screen and (max-width: 767px) {
.gs-g .gs-g-pack,
.gs-g .gs-g-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-g .gs-g-opt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-g .gs-g-cards { grid-template-columns: 1fr; }
.gs-g .gs-g-hero { grid-template-columns: 1fr; padding: 14px; }
.gs-g .gs-g-side { grid-template-columns: 1fr; }
.gs-g .gs-g-side__ph { max-width: 360px; }
.gs-g .gs-g-fig2 { grid-template-columns: 1fr; }
}
@media screen and (max-width: 640px) {
.gs-g .gs-g-kpi { gap: 6px; }
.gs-g .gs-g-kpi > div { padding: 10px 4px; }
.gs-g .gs-g-kpi dt { font-size: 11px; }
.gs-g .gs-g-kpi dd b { font-size: 22px; }
.gs-g .gs-g-hist { padding: 10px; }
.gs-g .gs-g-hist li { grid-template-columns: 5.5em minmax(0, 1fr) 4em; gap: 6px; }
.gs-g .gs-g-hist.is-wide li { grid-template-columns: 8.5em minmax(0, 1fr) 4.5em; }
.gs-g .gs-g-hist.is-wide .gs-g-hist__k { white-space: normal; font-size: 12px; line-height: 1.35; }
.gs-g .gs-g-tbl2 { font-size: 13px; }
.gs-g .gs-g-tbl2 th,
.gs-g .gs-g-tbl2 td { padding: 8px 6px; }
.gs-g .gs-g-tbl2 thead th { font-size: 11px; padding: 7px 2px; letter-spacing: -.02em; white-space: nowrap; }
.gs-g .gs-g-tbl2 td:not([data-l]) { white-space: nowrap; font-size: 12.5px; }
/* 内容の長い表は行ごとに積み上げる */
.gs-g .gs-g-tbl2:has(td[data-l]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gs-g .gs-g-tbl2:has(td[data-l]) tbody,
.gs-g .gs-g-tbl2:has(td[data-l]) tr,
.gs-g .gs-g-tbl2:has(td[data-l]) th,
.gs-g .gs-g-tbl2:has(td[data-l]) td { display: block; width: auto; }
.gs-g .gs-g-tbl2:has(td[data-l]) tr { margin-bottom: 8px; border: 1px solid var(--g-line); }
.gs-g .gs-g-tbl2:has(td[data-l]) th,
.gs-g .gs-g-tbl2:has(td[data-l]) td { border: 0; }
.gs-g .gs-g-tbl2:has(td[data-l]) td + td { border-top: 1px dotted var(--g-line); }
.gs-g .gs-g-tbl2 td[data-l]::before { content: attr(data-l); display: block; font-size: 11px; font-weight: bold; color: var(--g-ac); }
.gs-g .gs-g-pack { grid-template-columns: 1fr 1fr; }
.gs-g .gs-g-rel { grid-template-columns: 1fr; }
.gs-g .gs-g-hero__c { font-size: 18px; }
.gs-g .gs-g-flow > li { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px; align-items: start; }
.gs-g .gs-g-flow__n { width: 20px; height: 20px; font-size: 11.5px; left: 3px; top: 3px; }
.gs-g .gs-g-flow__b { font-size: 14.5px; }
.gs-g .gs-g-flow__d { font-size: 13px; line-height: 1.7; }
.gs-g .gs-g-cards > div.has-img { grid-template-columns: 84px minmax(0, 1fr); }
.gs-g .gs-g-trio { gap: 5px; }
.gs-g .gs-g-trio li { padding: 6px 4px 8px; }
.gs-g .gs-g-trio b { font-size: 13.5px; }
.gs-g .gs-g-fam { gap: 6px; }
.gs-g .gs-g-fam li { padding: 6px; }
.gs-g .gs-g-fam b { font-size: 14px; }
.gs-g .gs-g-fam span { font-size: 11.5px; }
.gs-g .gs-g-thumb img { width: 36px; height: 36px; }
.gs-g .tb-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gs-g .tb-idx a { padding: 8px; gap: 6px; font-size: 12.5px; }
.gs-g .tb-idx__i { width: 28px; height: 28px; padding: 5px; }
.gs-g .ec-find { grid-template-columns: minmax(0, 1fr) auto; }
.gs-g .ec-find label { grid-column: 1 / -1; }
.gs-g .ec-mk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-g .gs-g-t { min-width: 640px; font-size: 13px; }
.gs-g .gs-g-t.is-s { min-width: 0; }
.gs-g .gs-g-t th,
.gs-g .gs-g-t td { padding: 9px 8px; }
.gs-g .gs-g-t tbody th { font-size: 13px; }
.gs-g .gs-g-t thead th { font-size: 12px; padding: 8px 4px; }
.gs-g .gs-g-scroll:not(.is-s) + .gs-g-scroll__hint { display: block; }
.gs-g .gs-g-ba__p { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 4px; }
.gs-g .gs-g-ba__arr { width: 12px; height: 18px; }
.gs-g .gs-g-tbl tbody th small { white-space: normal; }
.gs-g .gs-g-scroll__hint { display: block; }
.gs-g .gs-g-tblx { font-size: 12.5px; }
}
@media screen and (min-width: 641px) {
.gs-g .gs-g-tbl2 td[data-l]::before { content: none; }
}