@charset "utf-8";
/* =============================================================================
* リンナイ ガスコンロ シリーズページ 共通コンポーネント (.gc2-*)
* /gasconro/rinnai/css/series.css
*
* 対象: /gasconro/rinnai/<シリーズ>/index2.html
* （第1号: マイトーン。以降 リッセ／デリシア等へ同じものを使う）
*
* 【使い方】
* 1. このファイルを読み込む
*
* 2. そのあとにシリーズ固有CSS（アクセント色の上書き等）を読み込む
*
* 3. コンテンツを で包む
*
* 【設計ルール】
* ・すべて .gc2 配下にスコープする。既存の共通CSS
* （/css/common.css, /common-new/css/base.css, /gasconro/css/style.css,
* /gasconro/rinnai/css/style.css）のセレクタには一切触らないので、
* 他ページ（本番シリーズページ／リンナイTOP／ガスコンロTOP）へ影響しない。
* ・色・角丸・ボタン・見出しは既存ガスペックの値を踏襲（下の変数を参照）。
* ・シリーズごとに変えるのは --gc2-accent / --gc2-accent-bg の2つだけ。
* ・クラス名にシリーズ名を入れない（.gc2-hero など中立名のままにする）。
*
* 【共通コンポーネント】
* レイアウト .gc2-sec / .gc2-lead / .gc2-note / .gc2-h4 / .gc2-src
* ファースト .gc2-hero / .gc2-pricebar / .gc2-usp / .gc2-toc
* 概要 .gc2-intro / .gc2-facts / .gc2-point
* モデル変更 .gc2-news
* 選び方 .gc2-fit / .gc2-step / .gc2-vs / .gc2-flags / .gc2-colors
* 商品一覧 .gc2-filter / .gc2-items / .gc2-item / .gc2-tags / .gc2-old
* 後継機 .gc2-succ
* 比較 .gc2-cmp
* 長所短所 .gc2-pc
* 機能 .gc2-feat / .gc2-panel / .gc2-media / .gc2-care
* 仕様 .gc2-spec / .gc2-opt
* 費用 .gc2-cost / .gc2-pack / .gc2-kj / .gc2-why / .gc2-promise / .gc2-warn
* 実績 .gc2-kpi / .gc2-idata / .gc2-bars / .gc2-makers / .gc2-bsum
* 施工事例 .gc2-cases / .gc2-case
* 評価 .gc2-rev
* FAQ .gc2-faq
* 関連 .gc2-rel / .gc2-morelink
* 共通部品 .gc2-btn / .gc2-cta / .gc2-ic / .gc2-backtop / .gc2-stars
*
* 【ブレークポイント】
* min-width:960px … PC（固定ヘッダー分の scroll-margin-top）
* max-width:767px … タブレット以下（1カラム化の主戦場）
* max-width:640px … 既存サイトのSP切替点に合わせた微調整
* max-width:480px … スマートフォン
* max-width:359px … 極小幅
* ========================================================================== */
.gc2 {
/* ---- 既存サイトから継承したデザイントークン ---- */
--gc2-blue: #0065cc; /* h2 見出し背景（/css/common.css h2.heading_01） */
--gc2-blue-dark: #004993; /* h2 下線 */
--gc2-green: #34aa34; /* CTAボタン（gasconro/css/style.css .productLink .btn） */
--gc2-green-dark:#208d14;
--gc2-green-txt: #009900; /* ガスペックPRICE の文字色 */
--gc2-red: #eb0000; /* 総額表示 */
--gc2-ink: #333;
--gc2-ink-sub: #666;
--gc2-line: #ddd;
--gc2-line-str: #e3e1e1; /* 商品カード枠 */
--gc2-bg: #f1f1f1;
--gc2-bg-soft: #f7f8f9;
--gc2-radius: 4px;
--gc2-radius-lg: 10px;
/* シリーズアクセント（各シリーズのCSSで上書きする。ここは既定値） */
--gc2-accent: #0065cc;
--gc2-accent-bg: #eef5fd;
}
/* /gasconro/css/reset.css の `* { word-break: break-all }` を打ち消す。
放置すると日本語が不自然に折れ、型番も途中で改行される。 */
.gc2, .gc2 * { word-break: normal; overflow-wrap: break-word; }
.gc2 { color: var(--gc2-ink); line-height: 1.8; }
.gc2 *, .gc2 *::before, .gc2 *::after { box-sizing: border-box; }
.gc2 img { max-width: 100%; height: auto; }
/*.gc2 p { margin: 0 0 1em; font-size: 15px; }
.gc2 p:last-child { margin-bottom: 0; }*/
.gc2 ul, .gc2 ol { list-style: none; margin: 0 10; padding: 0; }
/* 本文中のリンクはアクセント色＋下線。色を抑えつつリンクだと分かる形にする。
:not([class]) にしているので、クラスを持つボタン類（.gc2-btn / .gc2-goseries 等）の
文字色・下線には一切影響しない。 */
.gc2 a:not([class]) {
color: var(--gc2-accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.gc2 a:not([class]):hover,
.gc2 a:not([class]):focus-visible { text-decoration: none; }
/* 目次のピル・カラー見本・商品画像のリンクは見た目がボタン/画像なので下線を出さない */
.gc2-toc a:not([class]),
.gc2-colors a:not([class]),
.gc2-item__figure > a:not([class]) { text-decoration: none; }
/* 共通CSS(/css/base.css)の .button007 —「ビルトインコンロ交換工事までの流れ」ボタン。
a にクラスが無いため本文リンクの色指定(アクセント色＋下線)が当たり、
青背景に青文字＝文字が見えなくなっていた。白文字・下線なしに戻す。 */
.gc2 .button007 a,
.gc2 .button007 a:not([class]) {
color: #fff;
text-decoration: none;
}
/* 共通CSSは「通常=青背景+白文字／ホバー=白背景+青文字」の反転デザイン。
ホバーまで白文字にすると白背景に白文字で読めなくなるため、青文字に戻す。 */
.gc2 .button007 a:hover,
.gc2 .button007 a:focus-visible {
color: #0065cc;
text-decoration: none;
}
.gc2 .gc2-nowrap { word-break: keep-all; white-space: nowrap; }
.gc2 .gc2-sr {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
/* セクション間隔 -------------------------------------------------------- */
.gc2-sec { margin: 0 0 42px; }
.gc2-sec:last-child { margin-bottom: 0; }
.gc2-lead { font-size: 15px; margin: 18px 10px; }
/* 小見出し（h4相当・共通CSSのh4を邪魔しないよう独自クラス） ------------- */
.gc2-h4 {
font-size: 16px; font-weight: bold; color: var(--gc2-ink);
margin: 24px 0 10px; padding: 7px 12px;
background: var(--gc2-bg); border-left: 4px solid var(--gc2-accent);
border-radius: 0 var(--gc2-radius) var(--gc2-radius) 0;
line-height: 1.5;
}
.gc2-h5 { font-size: 15px; font-weight: bold; margin: 16px 0 6px; line-height: 1.6; }
/* =============================================================
* ページ内アンカー（目次 → 各見出し）
* 実際の移動は js/mytone2.js が固定ヘッダーを実測して行う。
* ここは JS 無効時とブラウザ標準のアンカー移動に対する保険。
* 固定ヘッダーの実測値: 幅960px以上=136〜166px / 481〜959px=なし / 480px以下=106px
* ============================================================= */
/* html への scroll-behavior:smooth は付けない。付けるとブラウザによる
スクロール位置の復元までアニメーションし、更新時に見出しへ滑っていくように見える。
スライド移動は js/mytone2.js が担当する。 */
.gc2-sec[id] { scroll-margin-top: 20px; }
@media screen and (min-width: 960px) {
.gc2-sec[id] { scroll-margin-top: 182px; }
}
@media screen and (max-width: 480px) {
.gc2-sec[id] { scroll-margin-top: 122px; }
}
/* =============================================================
* 目次から飛んだ見出しに出す「↑戻る」ボタン
* JS が対象セクションに .is-jumped を付け、h2 の中へ差し込む。
* h2.heading_01 は青帯・白文字なので、半透明の白ピルにする。
* SPでは h2 が全幅（margin: 0 calc(50% - 50vw)）なので右端＝画面右端になる。
* ============================================================= */
.gc2-sec.is-jumped > h2.heading_01 { position: relative; padding-right: 96px; }
.gc2-backtop {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 3px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.85);
color: #fff; font-family: inherit; font-size: 12px; font-weight: bold;
line-height: 1.4; padding: 5px 12px; border-radius: 999px;
cursor: pointer; white-space: nowrap; transition: background .2s;
}
.gc2-backtop:hover, .gc2-backtop:focus-visible { background: rgba(255,255,255,.36); }
.gc2-backtop span { font-size: 13px; }
/* =============================================================
* ファーストビュー
* ============================================================= */
.gc2-hero {
border-radius: var(--gc2-radius-lg);
overflow: hidden;
background: #fff;
margin-bottom: 24px;
border: 1px solid #ccc;
}
.gc2-hero__figure { margin: 0; position: relative; background: #eef0f2; }
/* PCは横長に切って高さを抑える（商品は画像中央にあるので上下カットで問題ない）。SPは4:3。 */
.gc2-hero__figure picture { display: block; }
.gc2-hero__figure img { display: block; width: 100%; }
.gc2-hero__flag {
position: absolute; top: 10px; left: 10px;
background: var(--gc2-red); color: #fff; font-weight: bold;
font-size: 12px; line-height: 1; padding: 7px 10px; border-radius: 999px;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.gc2-hero__body { padding: 18px 18px 20px; }
.gc2-hero__series { font-size: 13px; color: var(--gc2-ink-sub); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* シリーズの位置づけを示す赤いバッジ。
2026-09-06 に「もっと見やすく」の指示で作り直した。
・11px→12.5px、余白 3/9px→5/13px（本文13pxと並んでも小さく見えない大きさ）
・地の赤を #eb0000 → #d70000 に。白文字とのコントラストが 4.63:1 → 5.40:1 になり
11〜12px級の文字でもにじまない（--gc2-red は総額表示の色なので変えない）
・白いパネルの上で浮かせるため、内側に細いハイライトと薄い影を足す
・字間を少し開けて、詰まった和文（「見やすさ・安全に特化」等）を読みやすくする */
.gc2-hero__new {
background: #d70000; color: #fff; font-size: 12.5px; font-weight: bold;
padding: 5px 13px; border-radius: 999px; line-height: 1.35;
letter-spacing: .03em;
box-shadow: 0 1px 3px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.28);
word-break: keep-all; white-space: nowrap;
}
.gc2-hero__name {
font-size: 26px; font-weight: bold; line-height: 1.3; margin: 0 0 6px;
color: var(--gc2-ink); letter-spacing: -.01em;
}
.gc2-hero__sub { font-size: 14px; color: var(--gc2-ink-sub); line-height: 1.7; margin: 0 0 16px; }
.gc2-hero__copy { font-size: 14px; line-height: 1.85; margin: 14px 0 16px; color: #444; }
/* 価格ハイライト（ファーストビューの主役） */
.gc2-pricebar {
background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
border: 2px solid var(--gc2-accent);
border-radius: var(--gc2-radius-lg);
padding: 14px 16px 15px; margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(27,110,168,.10);
}
.gc2-pricebar__label {
display: inline-block; font-size: 12.5px; font-weight: bold; color: #fff;
background: var(--gc2-accent); border-radius: 3px;
padding: 3px 10px; margin: 0 0 8px; line-height: 1.5;
}
.gc2-pricebar__val { margin: 0; line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.gc2-pricebar__val strong {
color: var(--gc2-red); font-size: 42px; font-weight: bold; letter-spacing: -.02em;
}
.gc2-pricebar__val .u { font-size: 18px; font-weight: bold; color: var(--gc2-red); }
.gc2-pricebar__val .to { font-size: 16px; color: var(--gc2-ink-sub); }
.gc2-pricebar__off {
background: var(--gc2-red); color: #fff; font-size: 13px; font-weight: bold;
padding: 4px 10px; border-radius: 999px; margin-left: 6px; line-height: 1.4;
word-break: keep-all; white-space: nowrap;
}
/* 総額に含まれるものをチップで明示 */
.gc2-pricebar__inc { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0 8px; }
.gc2-pricebar__inc li {
font-size: 11.5px; line-height: 1.5; padding: 3px 9px 3px 20px;
background: #fff; border: 1px solid #cfe2f2; border-radius: 999px;
color: var(--gc2-accent); position: relative; word-break: keep-all;
}
.gc2-pricebar__inc li::before {
content: "✓"; position: absolute; left: 7px; font-weight: bold; color: #46a049;
}
.gc2-pricebar__note { font-size: 11.5px; color: var(--gc2-ink-sub); margin: 0; line-height: 1.7; }
/* 3つの価値訴求（色分けタイル） */
.gc2-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.gc2-usp li {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
padding: 0; text-align: center; background: #fff;
border-top: 3px solid var(--gc2-accent);
overflow: hidden;
}
/* タイル全体をクリック範囲にする。クラスを持たせて本文リンクの下線指定を回避 */
.gc2-usp__a {
display: block; position: relative;
padding: 11px 22px 12px 8px;
text-decoration: none; color: inherit; transition: background .2s;
}
.gc2-usp__a::after {
content: "›"; position: absolute; right: 8px; top: 50%;
transform: translateY(-50%);
font-size: 16px; font-weight: bold; color: var(--gc2-ink-sub); line-height: 1;
}
.gc2-usp__a:hover, .gc2-usp__a:focus-visible { background: var(--gc2-accent-bg); text-decoration: none; }
.gc2-usp li.is-a .gc2-usp__a:hover { background: #eef8ee; }
.gc2-usp li.is-c .gc2-usp__a:hover { background: #fff6e8; }
.gc2-usp li.is-a { border-top-color: #46a049; }
.gc2-usp li.is-b { border-top-color: var(--gc2-accent); }
.gc2-usp li.is-c { border-top-color: #e0870f; }
.gc2-usp b { display: block; font-size: 19px; line-height: 1.25; color: var(--gc2-ink); }
.gc2-usp b em { font-style: normal; font-size: 13px; margin-left: 1px; }
.gc2-usp li.is-a b { color: #2f7a33; }
.gc2-usp li.is-b b { color: var(--gc2-accent); }
.gc2-usp li.is-c b { color: #b56a00; }
.gc2-usp span { display: block; font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.5; margin-top: 4px; }
/* CTA ------------------------------------------------------------------ */
.gc2-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gc2-cta--single { grid-template-columns: 1fr; }
.gc2-btn {
display: block; text-align: center; text-decoration: none;
border-radius: var(--gc2-radius); padding: 13px 10px;
font-size: 18px; font-weight: bold; line-height: 1.4;
transition: all .25s;
}
.gc2-btn small { display: block; font-size: 14px; font-weight: normal; margin-top: 2px; }
.gc2-btn--primary {
background: var(--gc2-green); border: 2px solid var(--gc2-green-dark); color: #fff;
}
.gc2-btn--primary:hover { background: #207720; text-decoration: none; color: #fff; }
.gc2-btn--tel {
background: #fff; border: 2px solid var(--gc2-green-dark); color: var(--gc2-green-dark);
}
.gc2-btn--tel:hover { background: #f2fbf2; text-decoration: none; }
.gc2-btn--ghost {
background: #fff; border: 1px solid var(--gc2-line); color: var(--gc2-blue);
font-weight: normal; font-size: 14px; padding: 11px 10px;
}
.gc2-btn--ghost:hover { background: var(--gc2-bg-soft); text-decoration: none; }
/* 目次 ----------------------------------------------------------------- */
.gc2-toc {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; margin-bottom: 34px; overflow: hidden;
}
/* 見出しバー。「何の一覧か」と項目数をはっきり出す。 */
.gc2-toc__h {
display: flex; align-items: center; gap: 8px; margin: 0;
padding: 10px 14px; font-size: 14.5px; font-weight: bold; line-height: 1.4;
background: var(--gc2-accent-bg); border-bottom: 1px solid var(--gc2-line);
}
.gc2-toc__i { display: inline-flex; flex: 0 0 auto; color: var(--gc2-accent); font-size: 18px; width: 1em; }
.gc2-toc__n { margin-left: auto; font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub); }
/* 項目は3列に整列。折り返しで段がズレないようにグリッドにする。 */
.gc2-toc ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 6px; counter-reset: gc2toc; padding: 7px 8px 9px; }
.gc2-toc li { counter-increment: gc2toc; }
.gc2-toc a {
display: flex; align-items: center; gap: 8px;
padding: 8px 8px 8px 7px; font-size: 13px; line-height: 1.5;
text-decoration: none; border-radius: var(--gc2-radius);
}
/* 番号は丸バッジ。本文と同じ色だと埋もれて数えられない。 */
.gc2-toc a::before {
content: counter(gc2toc);
flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px;
border-radius: 50%; text-align: center;
background: var(--gc2-accent); color: #fff;
font-size: 11px; font-weight: bold;
}
.gc2-toc a::after { content: "›"; margin-left: auto; padding-left: 4px; color: #b9c0c7; font-size: 15px; font-weight: bold; line-height: 1; }
.gc2-toc a:hover { background: var(--gc2-accent-bg); text-decoration: none; }
.gc2-toc a:hover::after { color: var(--gc2-accent); }
/* =============================================================
* 汎用：画像＋テキストの2カラム
* ============================================================= */
.gc2-media { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.gc2-media--rev { grid-template-columns: 1fr 300px; }
.gc2-media--rev .gc2-media__fig { order: 2; }
.gc2-media__fig { margin: 0; }
.gc2-media__fig img { display: block; width: 100%; border-radius: var(--gc2-radius); border: 1px solid var(--gc2-line); }
.gc2-media__fig figcaption { font-size: 12px; color: var(--gc2-ink-sub); margin-top: 5px; line-height: 1.6; }
.gc2-media__body > :first-child { margin-top: 0; }
.gc2-media__body p{ padding: 3%;}
/* =============================================================
* 新旧の違い（NEWポイント）
* ============================================================= */
.gc2-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gc2-news li {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
padding: 0; background: #fff; position: relative; overflow: hidden;
display: flex; flex-direction: column;
}
/* 図版（リンナイ公式カタログ）。元画像の縦横比がまちまちなので、共通の枠に
object-fit: contain で収める。背景は元画像に合わせて白。 */
.gc2-news__fig { margin: 0; background: #fff; }
.gc2-news__fig img {
display: block; width: 100%;
object-fit: contain; background: #fff;
}
.gc2-news__b { padding: 13px 16px 15px; }
.gc2-news li b { display: block; font-size: 15px; margin-bottom: 5px; color: var(--gc2-accent); line-height: 1.5; }
.gc2-news li span { display: block; font-size: 13.5px; line-height: 1.75; }
/* NEWバッジは左上。右上に置くと、ココットプレート比較図に元から入っている
カタログ側の「NEW」マークと重なる。 */
.gc2-news li em {
position: absolute; top: 0; left: 0; font-style: normal; z-index: 2;
background: #eb6200; color: #fff; font-size: 10px; font-weight: bold;
padding: 3px 8px; border-radius: 0 0 var(--gc2-radius) 0; letter-spacing: .04em;
}
/* =============================================================
* 向いている／向いていない
* ============================================================= */
/* ブロックは「向いている方」→「別シリーズのほうが合う方」の縦2段。
中の項目を横並びカードにするので、ブロック自体は全幅で使う。 */
.gc2-fit { display: grid; grid-template-columns: 1fr; gap: 14px; }
.gc2-fit__box { border: 2px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; background: #fff; }
.gc2-fit__box h3 { margin: 0; padding: 9px 12px; font-size: 15px; color: #fff; line-height: 1.5; font-weight: bold; }
.gc2-fit__box--yes { border-color: #46a049; }
.gc2-fit__box--yes h3 { background: #46a049; }
.gc2-fit__box--no { border-color: #8a94a0; }
.gc2-fit__box--no h3 { background: #8a94a0; }
/* 項目は横並びのカード。6項目なら 3列×2段でちょうど収まる。 */
.gc2-fit__box ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px; }
.gc2-fit__box li {
position: relative; margin: 0;
padding: 10px 12px 11px 2.5em;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
font-size: 13.5px; line-height: 1.7;
}
.gc2-fit__box li:last-child { margin-bottom: 0; }
/* 見出し（1行目）を太字で立てる。説明文は改行して続ける。 */
.gc2-fit__box li strong { display: block; margin-bottom: 3px; font-size: 14px; line-height: 1.5; }
.gc2-fit__box--yes li { background: #f6fbf7; border-color: #cfe6d1; }
.gc2-fit__box--no li { background: #f7f8fa; border-color: #dde1e6; }
/* 「別シリーズのほうが合う方」のリンクはボタン化する。
文末に「→ デリシア」と地の文で置くと、リンクだと気づかれない。 */
.gc2-fit__why { display: block; font-weight: bold; margin-bottom: 4px; }
.gc2-fit__go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gc2-goseries {
display: inline-flex; align-items: baseline; gap: 2px;
padding: 7px 13px; border-radius: 999px;
background: #fff; border: 1px solid var(--gc2-accent);
color: var(--gc2-accent); font-size: 13.5px; font-weight: bold;
text-decoration: none; line-height: 1.4;
word-break: keep-all; white-space: nowrap;
transition: all .2s;
}
.gc2-goseries small { font-size: 11.5px; font-weight: normal; }
.gc2-goseries::after {
content: "›"; font-size: 15px; font-weight: bold; line-height: 1; margin-left: 2px;
}
.gc2-goseries:hover, .gc2-goseries:focus-visible {
background: var(--gc2-accent); color: #fff; text-decoration: none;
}
/* マーカーは丸バッジ。カードの左上に固定して、本文の頭を揃える。 */
.gc2-fit__box li::before {
position: absolute; top: 11px; left: 11px;
width: 19px; height: 19px; line-height: 19px;
border-radius: 50%; text-align: center;
font-size: 12px; font-weight: bold; color: #fff;
}
.gc2-fit__box--yes li::before { content: "○"; background: #46a049; }
.gc2-fit__box--no li::before { content: "→"; background: #8a94a0; }
/* =============================================================
* 選び方ステップ
* ============================================================= */
.gc2-step { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); margin-bottom: 16px; background: #fff; }
.gc2-step__h {
display: flex; align-items: center; gap: 10px;
margin: 0; padding: 11px 14px; background: var(--gc2-bg); border-bottom: 1px solid var(--gc2-line);
font-size: 16px; line-height: 1.4;
}
.gc2-step__n {
flex: 0 0 auto; background: var(--gc2-accent); color: #fff; font-weight: bold;
font-size: 15px; padding: 4px 9px; border-radius: 999px; letter-spacing: .04em;
}
.gc2-step__b { padding: 14px; }
/* ステップの説明文。見出しのすぐ下に地の文で置くと上下が詰まって読みにくいので、
導入部のリード文と同じ帯にして余白を確保する。 */
.gc2-step__lead {
margin: 2px 0 15px; padding: 12px 14px 13px;
font-size: 14px; line-height: 1.95;
background: var(--gc2-accent-bg);
border-left: 4px solid var(--gc2-accent);
border-radius: 0 var(--gc2-radius) var(--gc2-radius) 0;
}
.gc2-step__lead strong { color: var(--gc2-accent); }
/* 帯にしていない説明文にも下余白を付ける（図版と詰めない） */
.gc2-step__b > p { margin: 0 0 12px; }
/* 2択比較 */
.gc2-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc2-vs__card {
overflow: hidden; background: #fff;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
.gc2-vs__card > img { display: block; width: 100%; object-fit: cover; border-bottom: 1px solid var(--gc2-line); }
.gc2-vs__in { padding: 11px 13px 13px; }
/* 見出しの下に区切り線を引いて、見出しと説明を分ける */
.gc2-vs__t {
font-size: 15px; font-weight: bold; margin: 0 0 9px; padding-bottom: 8px;
color: var(--gc2-accent); line-height: 1.4;
border-bottom: 1px dashed var(--gc2-line);
}
/* 見出しの補足（品番数など）はチップにして本文と区別する */
.gc2-vs__t span {
display: inline-block; margin-top: 6px; padding: 2px 9px;
background: var(--gc2-accent-bg); border-radius: 999px;
font-size: 11.5px; font-weight: bold; color: var(--gc2-ink-sub); line-height: 1.6;
}
.gc2-vs dl { margin: 0 0 8px; font-size: 13px; }
.gc2-vs dl > div { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--gc2-line); }
.gc2-vs dl > div:last-child { border-bottom: 0; }
.gc2-vs dt { flex: 0 0 10em; color: var(--gc2-ink-sub); }
.gc2-vs dd { margin: 0; flex: 1 1 auto; }
.gc2-vs__note { font-size: 12.5px; line-height: 1.7; margin: 0; color: var(--gc2-ink-sub); }
/* 有無の一覧（レンジフード連動など） */
.gc2-flags { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; }
.gc2-flags > li { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--gc2-line); }
.gc2-flags > li:first-child { border-top: 0; }
.gc2-flags b { background: var(--gc2-bg-soft); padding: 10px 12px; font-size: 13.5px; line-height: 1.6; }
.gc2-flags span { padding: 10px 12px; font-size: 13.5px; line-height: 1.7; }
/* =============================================================
* カラーバリエーション
* ============================================================= */
.gc2-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gc2-colors li { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; background: #fff; }
.gc2-colors img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gc2-colors__n { display: block; font-size: 11.5px; font-weight: bold; padding: 6px 5px 2px; line-height: 1.4; text-align: center; }
.gc2-colors__t { display: block; font-size: 10.5px; color: var(--gc2-ink-sub); padding: 0 5px 7px; line-height: 1.4; text-align: center; }
/* =============================================================
* ラインナップ：絞り込み
* ============================================================= */
.gc2-filter {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: var(--gc2-bg-soft); padding: 12px 14px; margin-bottom: 16px;
}
.gc2-filter__row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
/* チップは独立したflexコンテナ内で折り返す。行に直接置くと2行目がラベル幅を無視して
左端から始まり、1行目のチップと揃わない（実際にカラー行で発生）。 */
.gc2-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0%; min-width: 0; }
.gc2-filter__row + .gc2-filter__row { margin-top: 9px; }
.gc2-filter__lb { flex: 0 0 7.2em; font-size: 13px; font-weight: bold; color: var(--gc2-ink-sub); padding-top: 8px; line-height: 1.4; }
.gc2-chip {
appearance: none; -webkit-appearance: none;
border: 1px solid var(--gc2-line); background: #fff; color: var(--gc2-ink);
font-size: 13px; font-family: inherit; line-height: 1.4;
padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.gc2-chip:hover { border-color: var(--gc2-accent); }
.gc2-chip[aria-pressed="true"] {
background: var(--gc2-accent); border-color: var(--gc2-accent); color: #fff; font-weight: bold;
}
.gc2-filter__count { font-size: 13px; color: var(--gc2-ink-sub); margin: 10px 0 0; }
.gc2-filter__count b { color: var(--gc2-red); font-size: 16px; }
.gc2-filter__empty {
display: none; margin: 14px 0 0; padding: 12px; text-align: center;
background: #fff; border: 1px dashed var(--gc2-line); border-radius: var(--gc2-radius);
font-size: 14px; color: var(--gc2-ink-sub);
}
.gc2-filter__empty.is-on { display: block; }
/* =============================================================
* 商品カード
* ============================================================= */
.gc2-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gc2-item {
border: 2px solid var(--gc2-line-str); border-radius: var(--gc2-radius);
background: #fff; padding: 12px; display: flex; flex-direction: column;
}
.gc2-item.is-hidden { display: none; }
.gc2-item--old { border-color: var(--gc2-line); background: #fafafa; }
.gc2-item__badges { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.gc2-item__w {
font-size: 14px; font-weight: bold; border: 1px solid #313131;
padding: 6px 8px; background: #fff; line-height: 1.4; border-radius: 2px;width: 45%;text-align: center;
}
.gc2-item__grt { font-size: 16px; font-weight: bold; color: var(--gc2-red); line-height: 1.4;text-align: center;width: 53%;}
.gc2-item__figure { margin: 0 0 10px; position: relative; }
.gc2-item__figure > a { display: block; text-decoration: none; }
.gc2-item__main {
display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain;
background: #f6f7f8; border-radius: 2px;
}
.gc2-item__swatch {
position: absolute; right: 5px; bottom: 5px; width: 27%; max-width: 84px;
border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.28);
display: block; aspect-ratio: 3 / 2; object-fit: cover;
}
.gc2-item__sku {
font-size: 14px; font-weight: bold; margin: 0 0 7px; line-height: 1.4;
word-break: keep-all; overflow-wrap: anywhere;
}
.gc2-item__sku span { display: block; font-size: 11px; font-weight: normal; color: var(--gc2-ink-sub); margin-top: 1px; }
.gc2-item__spec { margin: 0 0 9px; font-size: 12.5px; border: 1px solid #e6e6e6; border-radius: 2px; }
.gc2-item__spec > div { display: flex; gap: 6px; padding: 5px 8px; border-top: 1px solid #eee; }
.gc2-item__spec > div:first-child { border-top: 0; }
.gc2-item__spec dt { flex: 0 0 4.5em; color: var(--gc2-ink-sub); }
.gc2-item__spec dd { margin: 0; flex: 1 1 auto; line-height: 1.6; }
/* タグの行数はモデルによって1〜2行と変わる。カード内の余り高さをここで吸収させると、
下にある価格・総額・ボタンが隣のカードと同じ位置に揃う（以前はボタンの上に隙間が出ていた）。 */
.gc2-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; margin-bottom: 9px; flex: 1 1 auto; }
.gc2-tags li {
font-size: 11px; line-height: 1.4; padding: 3px 7px; border-radius: 2px;
background: var(--gc2-accent-bg); color: var(--gc2-accent); border: 1px solid #cfe2f2;
}
.gc2-tags li.is-hood { background: #fff3e6; color: #b95c00; border-color: #ffd9ad; }
.gc2-tags li.is-mesh { background: #eef8ee; color: #2b7a2f; border-color: #c9e6c9; }
.gc2-item__prices { margin: 0 0 9px; font-size: 15px; }
.gc2-item__prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 6px; }
.gc2-item__prices dt { color: var(--gc2-ink-sub); }
.gc2-item__prices dd { margin: 0; text-align: right; }
.gc2-item__prices .is-list dd { color: var(--gc2-ink-sub); }
.gc2-item__prices .is-list s { text-decoration: line-through; }
.gc2-item__prices .is-sale dt, .gc2-item__prices .is-sale dd { color: var(--gc2-green-txt); font-weight: bold; }
.gc2-item__prices .yen { font-size: .82em; font-weight: normal; margin-left: 1px; }
.gc2-item__off {
display: inline-block; background: var(--gc2-red); color: #fff; font-weight: bold;
font-size: 14px; padding: 1px 6px; border-radius: 2px; margin-right: 8px;
word-break: keep-all; white-space: nowrap;
}
.gc2-item__total {
background: var(--gc2-bg); border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;
padding: 8px 10px; margin: 0 0 10px; text-align: right;
}
.gc2-item__total b { display: block; font-size: 11.5px; font-weight: bold; color: var(--gc2-ink-sub); text-align: left; line-height: 1.4; margin-bottom: 1%; }
.gc2-item__total strong { color: var(--gc2-red); font-size: 24px; font-weight: bold; line-height: 1.2; }
.gc2-item__total .yen { font-size: 13px;color: var(--gc2-red); }
/* 価格未登録（お見積り）の状態 */
.gc2-item__total--ask { background: #fffbef; border-top-color: #f0dfae; border-bottom-color: #f0dfae; text-align: left; }
.gc2-item__total--ask strong { color: #b95c00; font-size: 20px; }
.gc2-item__askn { display: block; font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.6; margin-top: 2px; }
.gc2-item__acts { display: grid; grid-template-columns: 1fr; gap: 6px; }
.gc2-item__acts .gc2-btn { padding: 10px 8px; font-size: 14px; }
.gc2-item__acts--one { grid-template-columns: 1fr !important; }
/* 旧モデルの折りたたみ */
.gc2-old { margin-top: 26px; border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: var(--gc2-bg-soft); }
.gc2-old > summary {
cursor: pointer; padding: 13px 16px; font-size: 15px; font-weight: bold; list-style: none;
display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.gc2-old > summary::-webkit-details-marker { display: none; }
.gc2-old > summary::after { content: "＋"; margin-left: auto; color: var(--gc2-accent); font-weight: bold; }
.gc2-old[open] > summary::after { content: "−"; }
.gc2-old > summary small { display: block; font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2-old__b { padding: 0 14px 16px; }
/* 施工事例：お客様の声の商品満足度（★） */
.gc2-case__rate { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.gc2-case__rate-lb { font-size: 11px; color: var(--gc2-ink-sub); }
.gc2-case__rate .gc2-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; line-height: 1.2; white-space: nowrap; }
.gc2-case__rate b { font-size: 13px; }
/* =============================================================
* 追加費用なしの明示ブロック
* ============================================================= */
.gc2-promise {
border: 2px solid #34aa34; border-radius: var(--gc2-radius);
background: #f4fbf4; margin: 14px 10px; overflow: hidden;
}
.gc2-promise__h {
margin: 0; background: #34aa34; color: #fff;
font-size: 15px; font-weight: bold; line-height: 1.45; padding: 8px 12px;
}
.gc2-promise__l { margin: 0; padding: 11px 13px 12px 13px; list-style: none; }
.gc2-promise__l li {
position: relative; padding-left: 24px; font-size: 13px; line-height: 1.65;margin: 10px;
}
.gc2-promise__l li + li { margin-top: 7px; }
.gc2-promise__l li::before {
content: "✓"; position: absolute; left: 2px; top: 0;
color: #2b8a2b; font-size: 14px; font-weight: bold;
}
.gc2-promise__l b { color: #1d6b1d; }
/* =============================================================
* 後継機マッピング
* ============================================================= */
.gc2-succ { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gc2-succ__i {
display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 8px;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; padding: 11px 13px;
}
.gc2-succ__from, .gc2-succ__to { min-width: 0; }
/* 型番の横に小さく商品画像（クリックで拡大）。
旧モデルは Craton2（goods_image.php 中継）／現行モデルは images2/ の商品写真。 */
.gc2-succ__row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.gc2-succ__txt { flex: 1 1 auto; min-width: 0; }
.gc2-succ__th {
flex: 0 0 72px; display: block; width: 72px; padding: 2px; margin-top: 1px;
border: 1px solid var(--gc2-line); border-radius: 3px; background: #fff;
line-height: 0; text-decoration: none;
}
.gc2-succ__th img { display: block; width: 100%; height: 50px; object-fit: contain; }
.gc2-succ__lb { display: block; font-size: 10.5px; color: var(--gc2-ink-sub); line-height: 1.4; }
.gc2-succ__m { display: block; font-size: 14px; font-weight: bold; line-height: 1.4; overflow-wrap: anywhere; }
.gc2-succ__c { display: block; font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.5; }
.gc2-succ__ar { text-align: center; color: var(--gc2-accent); font-size: 20px; font-weight: bold; line-height: 1; }
.gc2-succ__to .gc2-succ__m { color: var(--gc2-accent); }
.gc2-succ__to .gc2-succ__m a { color: inherit; }
.gc2-succ__tag {
display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 2px; margin-top: 3px;
word-break: keep-all; white-space: nowrap;
}
.gc2-succ__tag.is-same { background: #eef8ee; color: #2b7a2f; border: 1px solid #c9e6c9; }
.gc2-succ__tag.is-near { background: #fff8e6; color: #8a6100; border: 1px solid #f0dfae; }
/* =============================================================
* 他シリーズ比較表
* ============================================================= */
.gc2-cmp__wrap { margin: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gc2-cmp {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid var(--gc2-line); font-size: 12.5px; line-height: 1.5;
}
.gc2-cmp th, .gc2-cmp td {
border: 1px solid var(--gc2-line); padding: 7px 8px; text-align: center; vertical-align: middle;
}
/* 比較表の見出しにシリーズのサムネイル写真を出す（拡大リンクは付けない）。
文字だけだと「どのシリーズの話か」が伝わりにくい。 */
/* ※`.gc2 img { max-width:100% }` のほうが詳細度が高いので、
クラスだけの指定では効かない。img まで含めて指定する。 */
.gc2 img.gc2-cmp__thumb {
display: block; width: 85%; max-width: 100px; margin: 0 auto 6px;
/* 天板が切れないよう cover ではなく contain。3:2以外の画像を置いても全体が入る。 */
aspect-ratio: 3 / 2; object-fit: contain;
border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px; background: #fff;
}
.gc2-cmp thead th:first-child img.gc2-cmp__thumb { display: none; }
.gc2-cmp thead th { background: #eef4fa; font-size: 13px; line-height: 1.4; }
.gc2-cmp thead th a { color: var(--gc2-accent); }
.gc2-cmp thead th.is-me { background: var(--gc2-accent); color: #fff; }
.gc2-cmp thead th span { display: block; font-size: 10px; font-weight: normal; }
.gc2-cmp tbody th {
background: #f7f8f9; text-align: left; font-size: 12px; white-space: nowrap;
}
/* 横スクロールしても項目名が見えるように1列目を固定する */
.gc2-cmp thead th:first-child,
.gc2-cmp tbody th { position: sticky; left: 0; z-index: 1; }
.gc2-cmp thead th:first-child { background: #eef4fa; z-index: 2; }
.gc2-cmp__hint { display: none; }
.gc2-cmp tbody th span { font-size: 10.5px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2-cmp td.is-me { background: #f2f8fd; font-weight: bold; }
.gc2-cmp__price td { font-size: 12px; white-space: nowrap; }
.gc2-cmp__price b { font-size: 16px; color: var(--gc2-red); }
.gc2-cmp__price span { font-size: 10.5px; color: var(--gc2-ink-sub); }
/* =============================================================
* メリットと注意点
* ============================================================= */
.gc2-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 10px; }
.gc2-pc__col { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; overflow: hidden; }
.gc2-pc__h { margin: 0; padding: 8px 12px; font-size: 14px; font-weight: bold; color: #fff; }
.gc2-pc__col.is-pro .gc2-pc__h { background: #2b8a2b; }
.gc2-pc__col.is-con .gc2-pc__h { background: #b07a12; }
.gc2-pc__col dl { margin: 0; padding: 10px 12px 12px; }
.gc2-pc__col dt { font-size: 13px; font-weight: bold; line-height: 1.5; position: relative; padding-left: 16px; }
.gc2-pc__col dt::before { position: absolute; left: 0; top: 0; font-weight: bold; }
.gc2-pc__col.is-pro dt::before { content: "○"; color: #2b8a2b; }
.gc2-pc__col.is-con dt::before { content: "！"; color: #b07a12; }
.gc2-pc__col dd { margin: 3px 0 0 16px; font-size: 12.5px; line-height: 1.65; color: var(--gc2-ink-sub); }
.gc2-pc__col dd + dt { margin-top: 10px; }
/* =============================================================
* 施工実績データ
* ============================================================= */
/* インラインSVGアイコン共通 */
.gc2-ic { width: 1em; height: 1em; display: block; }
/* 実績KPIタイル */
.gc2-kpi {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
margin: 0 10px 14px; padding: 0; list-style: none;
}
.gc2-kpi li {
display: block; margin: 0; list-style: none; text-align: center;
border: 1px solid #2c9146; border-top: 3px solid #2c9146;
border-radius: var(--gc2-radius); background: #fff; padding: 12px 8px 11px;
}
.gc2-kpi li::before { content: none; }
.gc2-kpi__i { display: block; font-size: 26px; color: #2c9146; margin: 0 auto 6px; width: 1em; }
.gc2-kpi__v { display: block; line-height: 1.1; }
.gc2-kpi__v b { font-size: 30px; font-weight: bold; color: #2c9146; }
.gc2-kpi__v b.is-sm { font-size: 20px; }
.gc2-kpi__v em { font-size: 13px; font-style: normal; font-weight: bold; margin-left: 2px; }
.gc2-kpi__l { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--gc2-ink-sub); }
.gc2-idata { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 10px; }
.gc2-idata__c { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; padding: 11px 12px 12px; }
.gc2-idata__c.is-wide { grid-column: 1 / -1; }
/* 内訳カードは3つなので、3つめは全幅にして行が半分空くのを防ぐ */
.gc2-idata__c:nth-of-type(3) { grid-column: 1 / -1; }
.gc2-idata__c:nth-of-type(3) .gc2-bars__b { max-width: 420px; }
.gc2-idata__h {
display: flex; align-items: center; gap: 6px;
margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--gc2-line);
font-size: 13.5px; font-weight: bold; color: var(--gc2-accent);
}
.gc2-idata__i { font-size: 19px; color: var(--gc2-accent); flex: 0 0 auto; width: 1em; }
.gc2-idata__top { margin: 0 0 9px; line-height: 1.15; }
.gc2-idata__top b { font-size: 27px; font-weight: bold; color: var(--gc2-red); }
.gc2-idata__top b em { font-size: 15px; font-style: normal; margin-left: 1px; }
.gc2-idata__top span { font-size: 13px; font-weight: bold; margin-left: 2px; }
.gc2-idata__n { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--gc2-ink-sub); }
.gc2-bars { margin: 0; padding: 0; list-style: none; }
.gc2-bars li {
/* 共通CSSの ul li 装飾（枠線・背景・余白）を打ち消してから組む */
display: flex; align-items: center; gap: 6px;
border: 0; background: none; padding: 0; margin: 0; list-style: none;
}
.gc2-bars li::before { content: none; }
.gc2-bars li + li { margin-top: 7px; }
.gc2-bars__l { flex: 0 0 6.6em; font-size: 12px; white-space: nowrap; }
.gc2-bars__b { flex: 1 1 auto; height: 12px; background: #eef1f4; border-radius: 6px; overflow: hidden; min-width: 0; }
.gc2-bars__b i { display: block; height: 100%; background: #29abe9; border-radius: 6px; }
.gc2-bars__v { flex: 0 0 5.4em; text-align: right; font-size: 12px; }
.gc2-bars__v b { font-size: 13.5px; font-weight: bold; }
.gc2-bars__v i { font-style: normal; font-size: 11px; color: var(--gc2-ink-sub); margin-left: 4px; }
.gc2-idata__pref { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gc2-idata__pref li {
display: flex; align-items: center; gap: 4px; margin: 0; list-style: none;
border: 1px solid var(--gc2-line); border-radius: 999px; padding: 4px 11px 4px 8px;
background: #fff;
}
.gc2-idata__pref li .gc2-ic { font-size: 13px; color: var(--gc2-accent); flex: 0 0 auto; width: 1em; }
.gc2-idata__pref li::before { content: none; }
.gc2-idata__pref b { font-size: 12.5px; }
.gc2-idata__pref span { font-size: 11px; color: var(--gc2-ink-sub); }
/* =============================================================
* まるごと工事パックの内訳図
* アイコンは /images/kouji_panel*.webp（/gasconro/ の #costpanel と共通）
* ============================================================= */
.gc2-pack {
display: grid; grid-template-columns: 1fr auto 2.8fr auto 1fr;
align-items: stretch; gap: 10px; margin: 0 0 10px;
}
.gc2-pack__op { margin: 0; align-self: center; font-size: 20px; font-weight: bold; color: var(--gc2-accent); line-height: 1; }
.gc2-pack__b {
display: flex; flex-direction: column;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; overflow: hidden; min-width: 0;
}
.gc2-pack__h {
margin: 0; padding: 8px 10px; text-align: center;
background: var(--gc2-accent-bg); color: var(--gc2-accent);
font-size: 13px; font-weight: bold; line-height: 1.45;
border-bottom: 1px solid var(--gc2-line);
}
.gc2-pack__h span { display: block; margin-top: 1px; font-size: 13px; font-weight: bold; color: var(--gc2-red); }
.gc2-pack__g {
display: grid; grid-template-columns: 1fr; gap: 9px;
margin: 0; padding: 14px 14px 15px; list-style: none;
}
.gc2-pack__b.is-pack .gc2-pack__g { grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 10px;}
.gc2-pack__g li {
display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
text-align: center; margin: 0; padding: 11px 6px 10px; list-style: none;
border: 1px solid #e6ecf2; border-radius: 6px; background: #f8fbfe;
}
.gc2-pack__g li::before { content: none; }
/* 中央のパックは項目数が多く縦に伸びるので、左右は縦中央に揃える */
.gc2-pack__g { flex: 1 1 auto; align-content: center; }
.gc2-pack__b.is-goods .gc2-pack__g li,
.gc2-pack__b.is-after .gc2-pack__g li { padding: 13px 8px 12px; border: 0; background: none; }
.gc2-pack__g img { display: block; width: 48px; height: 48px; object-fit: contain; margin: 0 auto 7px; }
.gc2-pack__b.is-after .gc2-pack__g img { width: 66px; height: 74px; margin-bottom: 8px; }
.gc2-pack__g b { display: block; font-size: 12px; font-weight: bold; line-height: 1.5; }
.gc2-pack__g span { display: block; margin-top: 2px; font-size: 12px; font-weight: bold; color: var(--gc2-red); line-height: 1.5; }
.gc2-pack__b.is-goods .gc2-pack__g span { color: #009900; font-size: 11.5px; }
.gc2-pack__total {
margin: 0 0 12px; padding: 10px 12px; text-align: center;
background: var(--gc2-accent); color: #fff; border-radius: var(--gc2-radius);
font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
.gc2-pack__total strong { color: #fff; }
/* =============================================================
* 掃除・お手入れ／工事費表／この価格の理由
* ============================================================= */
.gc2-why { margin: 0 10px 4px; }
.gc2-why dt {
font-size: 13.5px; font-weight: bold; line-height: 1.5;
position: relative; padding-left: 15px; color: var(--gc2-ink);
}
.gc2-why dt::before {
content: ""; position: absolute; left: 0; top: .5em;
width: 8px; height: 8px; border-radius: 2px; background: var(--gc2-accent);
}
.gc2-why dd { margin: 3px 0 0 15px; font-size: 13px; line-height: 1.75; color: #444; }
.gc2-why dd + dt { margin-top: 11px; }
/* お手入れ：図版つきカード（2カラム） */
.gc2-care {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
margin: 0 10px 6px; padding: 0; list-style: none;
}
.gc2-care li {
position: relative;
display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; overflow: hidden;
}
.gc2-care li::before { content: none; }
.gc2-care__fig { position: relative; margin: 0; background: #f4f6f8; line-height: 0; }
.gc2-care__fig img { display: block; width: 100%; height: 150px; object-fit: cover; }
.gc2-care__tag {
position: absolute; left: 8px; top: 8px; z-index: 1;
background: rgba(0,101,204,.92); color: #fff;
font-size: 10.5px; font-weight: bold; line-height: 1.4;
padding: 3px 8px; border-radius: 2px; white-space: nowrap;
}
.gc2-care__tag.is-new { background: rgba(226,26,26,.92); }
.gc2-care__b { padding: 10px 12px 12px; }
.gc2-care__t {
display: block; font-size: 13.5px; font-weight: bold; line-height: 1.5;
color: var(--gc2-accent); margin-bottom: 3px;
}
.gc2-care__b p { margin: 0; font-size: 12.5px; line-height: 1.75; color: #444; }
.gc2-kj__wrap { margin: 0 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gc2-kj { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
.gc2-kj th, .gc2-kj td { border: 1px solid var(--gc2-line); padding: 7px 10px; }
.gc2-kj thead th { background: #eef4fa; text-align: center; font-size: 12.5px; }
.gc2-kj tbody th { background: #f7f8f9; text-align: left; font-weight: normal; white-space: nowrap; }
.gc2-kj td.is-p { text-align: right; white-space: nowrap; font-weight: bold; color: var(--gc2-red); font-size: 15px; }
.gc2-kj td.is-p span { font-size: 11.5px; font-weight: normal; margin-left: 1px; }
.gc2-cost__note { margin: 0 0 4px; }
.gc2-cost__note li { font-size: 12px; line-height: 1.7; color: var(--gc2-ink-sub); }
/* =============================================================
* 関連ページ
* ============================================================= */
.gc2-rel { margin: 0 10px 14px; padding: 0; list-style: none; }
.gc2-rel li {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; padding: 9px 12px; margin: 0; list-style: none;
}
.gc2-rel li::before { content: none; }
.gc2-rel li + li { margin-top: 7px; }
.gc2-rel__t {
display: block; font-size: 13.5px; font-weight: bold;
color: var(--gc2-accent); text-decoration: underline; text-underline-offset: 2px;
}
.gc2-rel li:hover .gc2-rel__t { text-decoration: none; }
.gc2-rel__d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--gc2-ink-sub); }
/* =============================================================
* 機能一覧
* ============================================================= */
.gc2-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc2-feat__g { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; overflow: hidden; }
.gc2-feat__g h3 { margin: 0; padding: 9px 12px; font-size: 14px; background: var(--gc2-accent); color: #fff; line-height: 1.5; font-weight: bold; }
.gc2-feat__g ul { padding: 10px 12px; }
.gc2-feat__g li { font-size: 13px; line-height: 1.7; padding-left: 1.1em; position: relative; margin-bottom: 5px; }
.gc2-feat__g li:last-child { margin-bottom: 0; }
.gc2-feat__g li::before { content: "・"; position: absolute; left: 0; color: var(--gc2-accent); }
/* =============================================================
* 操作パネル・操作部
* ============================================================= */
.gc2-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 10px; }
.gc2-panel {
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius-lg);
background: #fff; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.07);
display: flex; flex-direction: column;
}
/* 見出しは色帯＋左上の斜めアクセント */
.gc2-panel__h {
position: relative; margin: 0; padding: 11px 16px 11px 32px;
background: linear-gradient(135deg, var(--gc2-accent) 0%, #2f8ec9 100%);
color: #fff; line-height: 1.4;
}
.gc2-panel__h::before {
content: ""; position: absolute; left: 0; top: 0;
border-style: solid; border-width: 0 0 52px 24px;
border-color: transparent transparent rgba(255,255,255,.16) transparent;
}
.gc2-panel__h b { position: relative; display: block; font-size: 16px; font-weight: bold; }
.gc2-panel__h span { position: relative; display: block; font-size: 11.5px; opacity: .92; }
.gc2-panel__fig { margin: 0; padding: 12px 14px 0; background: #fff; text-align: center; }
/* 元画像がカタログの小さなラスタ（183x89px）なので、拡大しすぎるとボタン名が潰れる。
実寸2倍（366px）を上限にして中央寄せする。 */
.gc2-panel__fig img { display: block; width: 100%; max-width: 366px; height: auto; margin: 0 auto; }
/* 機能は番号バッジ付き */
.gc2-panel__list { counter-reset: gc2pn; margin: 0; padding: 12px 14px 4px; }
.gc2-panel__list > div {
position: relative; padding: 9px 0 9px 32px;
border-bottom: 1px dashed var(--gc2-line);
}
.gc2-panel__list > div:last-child { border-bottom: 0; }
.gc2-panel__list > div::before {
counter-increment: gc2pn; content: counter(gc2pn);
position: absolute; left: 0; top: 10px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--gc2-accent); color: #fff; border-radius: 50%;
font-size: 11px; font-weight: bold;
}
.gc2-panel__list dt { font-size: 13.5px; font-weight: bold; color: var(--gc2-accent); line-height: 1.5; }
.gc2-panel__list dd { margin: 0; font-size: 12.5px; line-height: 1.7; color: #444; }
/* POINT 囲み */
.gc2-point {
position: relative; margin: 8px 14px 16px; padding: 12px 13px 11px;
background: var(--gc2-accent-bg);
border: 1px dashed var(--gc2-accent); border-radius: var(--gc2-radius);
margin-top: auto;
}
.gc2-point b {
position: absolute; top: -10px; left: 11px;
display: inline-flex; align-items: center; gap: 4px;
background: var(--gc2-accent); color: #fff;
font-size: 10.5px; font-weight: bold; letter-spacing: .08em;
padding: 3px 10px; border-radius: 999px; line-height: 1.4;
}
.gc2-point__i { display: block; font-size: 13px; width: 1em; }
.gc2-point p { font-size: 12.5px; line-height: 1.75; margin: 2px 0 0; color: #333; }
/* =============================================================
* マイトーンとは：写真＋本文＋要点タイル
* ============================================================= */
.gc2-intro { display: grid; grid-template-columns: 300px 1fr; gap: 14px 18px; align-items: start; margin-bottom: 16px; }
.gc2-intro__fig { margin: 0; }
.gc2-intro__fig img {
display: block; width: 100%; border-radius: var(--gc2-radius);
border: 1px solid var(--gc2-line);
}
/* キャプションは「見出し＋詳細」の2行。1行にまとめると3行に折り返して読みにくい。 */
.gc2-intro__fig figcaption { font-size: 11.5px; color: var(--gc2-ink-sub); margin-top: 6px; line-height: 1.6; }
.gc2-intro__fig figcaption b { display: block; font-size: 12.5px; color: var(--gc2-ink); }
.gc2-intro__fig figcaption span { display: block; margin-top: 1px; }
.gc2-intro__body > :first-child { margin-top: 0; }
.gc2-intro__body p { font-size: 14px; line-height: 1.9; }
/* リード文（1段落目）。写真の横に置くので、帯を付けて「まず読む文」だと分かるようにする。 */
.gc2-intro__lead {
margin: 0; padding: 12px 14px 13px;
font-size: 14.5px; line-height: 1.95;
background: var(--gc2-accent-bg);
border-left: 4px solid var(--gc2-accent);
border-radius: 0 var(--gc2-radius) var(--gc2-radius) 0;
}
/* 2段落目以降は写真の下に回して本文幅いっぱいで読ませる（行が短いと読みにくい） */
.gc2-intro__more { grid-column: 1 / -1; }
.gc2-intro__more p { margin: 0 0 10px; font-size: 14px; line-height: 1.95; }
.gc2-intro__more p:last-child { margin-bottom: 0; }
/* 要点だけ拾い読みできるように、強調はアクセント色にする */
.gc2-intro strong { color: var(--gc2-accent); }
/* 要点タイル（アイコン＋大きな値＋補足） */
.gc2-facts__h {
display: flex; align-items: center; gap: 8px;
margin: 0 0 9px; font-size: 14px; font-weight: bold; color: var(--gc2-ink);
}
.gc2-facts__h::before {
content: ""; flex: 0 0 4px; align-self: stretch; min-height: 1.2em;
background: var(--gc2-accent); border-radius: 2px;
}
.gc2-facts__h::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--gc2-line);
}
.gc2-facts {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
margin: 0 0 16px; padding: 0; list-style: none;
}
.gc2-facts li {
display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
align-items: center; column-gap: 10px; row-gap: 6px;
margin: 0; padding: 12px 13px 12px; list-style: none;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: linear-gradient(180deg, #fbfdff 0%, #fff 46%);
transition: box-shadow .2s, border-color .2s;
}
.gc2-facts li::before { content: none; }
.gc2-facts li:hover { border-color: #b9d4ee; box-shadow: 0 2px 7px rgba(0,101,204,.09); }
.gc2-facts__i {
grid-row: 1; grid-column: 1;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--gc2-accent-bg); color: var(--gc2-accent);
font-size: 24px; border: 1px solid #d8e7f6;
}
.gc2-facts__t { grid-row: 1; grid-column: 2; display: block; min-width: 0; }
.gc2-facts__k {
display: inline-block; font-size: 10.5px; font-weight: bold; line-height: 1.4; letter-spacing: .04em;
color: #fff; background: var(--gc2-accent);
border-radius: 2px; padding: 1px 7px; margin-bottom: 4px;
}
.gc2-facts__v { display: block; font-size: 20px; font-weight: bold; color: var(--gc2-ink); line-height: 1.3; }
.gc2-facts__n {
grid-row: 2; grid-column: 1 / -1;
display: block; font-size: 11.5px; color: #555; line-height: 1.65;
padding-top: 7px; border-top: 1px dashed #e2e8ee;
}
/* POINT の全幅版 */
.gc2-point--wide { margin: 4px 0 4px; padding: 15px 15px 13px; }
.gc2-point--wide p { font-size: 13.5px; }
/* =============================================================
* 交換前の機種：メーカー別
* ============================================================= */
.gc2-bsum {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
background: var(--gc2-accent-bg); border: 1px solid #cfe2f2;
border-radius: var(--gc2-radius); padding: 10px 14px; margin: 0 0 14px;
font-size: 13px; color: var(--gc2-accent);
}
.gc2-bsum span { word-break: keep-all; white-space: nowrap; }
.gc2-bsum b { font-size: 22px; font-weight: bold; margin-right: 1px; }
.gc2-makers { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gc2-makers > li {
display: grid; grid-template-columns: 11em 1fr; align-items: start; gap: 12px;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
background: #fff; padding: 10px 13px;
}
.gc2-makers__h { margin: 0; line-height: 1.4; }
.gc2-makers__h b {
display: block; font-size: 14px; font-weight: bold; color: var(--gc2-accent);
word-break: keep-all;
}
.gc2-makers__h span { display: block; font-size: 11px; color: var(--gc2-ink-sub); }
.gc2-makers__m { display: flex; flex-wrap: wrap; gap: 5px; }
.gc2-makers__m li {
font-size: 11.5px; line-height: 1.5; padding: 3px 9px;
background: var(--gc2-bg-soft); border: 1px solid var(--gc2-line);
border-radius: 3px; color: #444; word-break: keep-all;
}
.gc2-makers__m li.is-more { background: #fff; border-style: dashed; color: var(--gc2-ink-sub); }
/* =============================================================
* 操作部のつくり：画像を上、項目を2列
* ============================================================= */
.gc2-facebox__fig { margin: 0 0 14px; text-align: center; }
.gc2-facebox__fig img {
display: block; width: 100%; max-width: 620px; margin: 0 auto;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
}
.gc2-facebox__fig figcaption { font-size: 12px; color: var(--gc2-ink-sub); margin-top: 6px; line-height: 1.6; }
/* 操作部のつくり：写真を2枚並べる場合（天面と前面パネルなど）。
1枚を大きく出すと縦に伸びて読みにくいので、半分の幅で横に並べる。 */
.gc2-facebox__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.gc2-facebox__figs figure { margin: 0; text-align: center; }
.gc2-facebox__figs img {
display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff;
}
.gc2-facebox__figs figcaption { font-size: 12px; color: var(--gc2-ink-sub); margin-top: 6px; line-height: 1.6; }
/* 操作部のつくり：項目は2列。1つめ（概念説明）だけ全幅にして3行→2行に収める */
.gc2-face { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.gc2-face > div {
padding: 11px 13px;
background: var(--gc2-bg-soft);
border-left: 4px solid var(--gc2-accent);
border-radius: 0 var(--gc2-radius) var(--gc2-radius) 0;
}
.gc2-face > div:first-child { grid-column: 1 / -1; }
.gc2-face dt { font-size: 14px; font-weight: bold; color: var(--gc2-accent); line-height: 1.5; margin-bottom: 2px; }
.gc2-face dd { margin: 0; font-size: 13px; line-height: 1.75; }
/* =============================================================
* 仕様表（横スクロールさせない定義リスト型）
* ============================================================= */
.gc2-spec { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; margin: 0; }
.gc2-spec > div { display: grid; grid-template-columns: 15em 1fr; border-top: 1px solid var(--gc2-line); }
.gc2-spec > div:first-child { border-top: 0; }
.gc2-spec dt { background: var(--gc2-bg-soft); padding: 9px 12px; font-size: 13px; font-weight: bold; line-height: 1.6; }
.gc2-spec dd { margin: 0; padding: 9px 12px; font-size: 13px; line-height: 1.7; }
/* =============================================================
* 付属品・オプション
* ============================================================= */
.gc2-opts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gc2-opt {
display: grid; grid-template-columns: 140px 1fr; gap: 14px;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; padding: 13px;
}
.gc2-opt--noimg { grid-template-columns: 1fr; }
.gc2-opt__fig { margin: 0; }
.gc2-opt__fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 2px; }
.gc2-opt__t { font-size: 15px; font-weight: bold; margin: 0 0 5px; line-height: 1.45; }
.gc2-opt__t em {
font-style: normal; font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 2px;
margin-left: 6px; vertical-align: 2px; word-break: keep-all; white-space: nowrap;
}
.gc2-opt__t em.is-std { background: #eef8ee; color: #2b7a2f; border: 1px solid #c9e6c9; }
.gc2-opt__t em.is-opt { background: var(--gc2-bg); color: var(--gc2-ink-sub); border: 1px solid var(--gc2-line); }
.gc2-opt__meta { font-size: 12px; color: var(--gc2-ink-sub); margin: 0 0 6px; line-height: 1.6; }
.gc2-opt__meta b { color: var(--gc2-ink); }
.gc2-opt p { font-size: 13.5px; margin: 0; line-height: 1.75; }
/* =============================================================
* 交換費用
* ============================================================= */
.gc2-cost { border: 2px solid var(--gc2-accent); border-radius: var(--gc2-radius); overflow: hidden; background: #fff; }
.gc2-cost__h { margin: 0; padding: 11px 14px; background: var(--gc2-accent); color: #fff; font-size: 16px; line-height: 1.5; }
.gc2-cost__h span { font-size: 16px; font-weight: normal; }
.gc2-cost__b { padding: 14px; }
.gc2-cost__list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.gc2-cost__list li {
font-size: 13.5px; line-height: 1.6; padding: 8px 10px 8px 2em; position: relative;
background: var(--gc2-bg-soft); border-radius: 2px;
}
.gc2-cost__list li::before {
content: "✓"; position: absolute; left: .8em; color: #46a049; font-weight: bold;
}
.gc2-warn {
border: 1px solid #f0dfae; background: #fffbef; border-radius: var(--gc2-radius);
padding: 12px 14px; font-size: 13.5px; line-height: 1.8;
}
.gc2-warn b { display: block; margin-bottom: 5px; color: #8a6100; font-size: 14px; }
.gc2-warn ul li { padding-left: 1.1em; position: relative; margin-bottom: 4px; }
.gc2-warn ul li::before { content: "・"; position: absolute; left: 0; }
.gc2-warn ul li:last-child { margin-bottom: 0; }
/* =============================================================
* 施工事例
* ============================================================= */
.gc2-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gc2-case { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.gc2-case__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gc2-line); }
.gc2-case__ba figure { margin: 0; background: #fff; position: relative; }
.gc2-case__ba img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f2f3f4; }
.gc2-case__ba figcaption {
position: absolute; top: 5px; left: 5px; font-size: 10.5px; font-weight: bold;
background: rgba(0,0,0,.62); color: #fff; padding: 2px 7px; border-radius: 2px; line-height: 1.5;
}
.gc2-case__ba figure:last-child figcaption { background: rgba(52,170,52,.9); }
.gc2-case__b { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1 1 auto; }
.gc2-case__area { font-size: 13px; font-weight: bold; margin: 0 0 6px; line-height: 1.5; }
.gc2-case__area span { font-size: 11.5px; font-weight: normal; color: var(--gc2-ink-sub); margin-left: 5px; }
.gc2-case__sw { margin: 0 0 8px; font-size: 12px; }
.gc2-case__sw > div { display: flex; gap: 6px; padding: 3px 0; }
.gc2-case__sw dt { flex: 0 0 4.5em; color: var(--gc2-ink-sub); }
.gc2-case__sw dd { margin: 0; flex: 1 1 auto; overflow-wrap: anywhere; line-height: 1.6; }
/* お客様の声（口コミ本文）。以前はスタッフコメントを出していた枠。 */
.gc2-case__voice {
margin: 0 0 10px; padding: 9px 11px;
background: #fffdf3; border: 1px solid #f0e2b8; border-radius: var(--gc2-radius);
position: relative;
}
.gc2-case__voice-lb {
display: inline-block; font-size: 10.5px; font-weight: bold; line-height: 1.4;
color: #8a6100; background: #fdf3d6; border: 1px solid #f0dfae;
border-radius: 2px; padding: 1px 6px; margin-bottom: 5px;
word-break: keep-all; white-space: nowrap;
}
.gc2-case__voice-t { display: block; font-size: 13px; font-weight: bold; color: #6b4c00; line-height: 1.5; margin-bottom: 3px; }
.gc2-case__voice p { font-size: 12.5px; line-height: 1.8; margin: 0; color: #444; }
.gc2-case__more { margin-top: auto; }
/* セクション末尾の「もっと見る」導線。カード内のボタンと見た目を揃える */
.gc2-morelink { margin: 16px 0 0; text-align: center; }
.gc2-morelink .gc2-btn { display: inline-block; min-width: 300px; padding: 12px 22px; }
/* 口コミ集計 */
.gc2-rate { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center;
border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); background: #fff; padding: 16px; }
.gc2-rate__big { text-align: center; }
.gc2-rate__big strong { display: block; font-size: 40px; font-weight: bold; line-height: 1; color: var(--gc2-ink); }
.gc2-rate__big .st { display: block; color: #f5a623; font-size: 18px; letter-spacing: 2px; margin: 4px 0 2px; }
.gc2-rate__big span { display: block; font-size: 12px; color: var(--gc2-ink-sub); }
.gc2-rate__bars { margin: 0; }
.gc2-rate__bars li { display: grid; grid-template-columns: 3.2em 1fr 2.6em; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 4px; }
.gc2-rate__bars li:last-child { margin-bottom: 0; }
.gc2-rate__tr { background: var(--gc2-bg); border-radius: 999px; height: 8px; overflow: hidden; }
.gc2-rate__tr i { display: block; height: 100%; background: #f5a623; border-radius: 999px; }
.gc2-rate__bars b { text-align: right; color: var(--gc2-ink-sub); font-weight: normal; }
/* 交換前機種タグクラウド */
.gc2-before { display: flex; flex-wrap: wrap; gap: 6px; }
.gc2-before li {
font-size: 12px; line-height: 1.5; padding: 5px 10px; border-radius: 999px;
background: #fff; border: 1px solid var(--gc2-line); color: #444;
word-break: keep-all;
}
.gc2-before li b { font-weight: bold; color: var(--gc2-ink-sub); font-size: 11px; margin-right: 3px; }
/* =============================================================
* FAQ
* ============================================================= */
.gc2-faq { border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius); overflow: hidden; background: #fff; }
.gc2-faq__i { border-top: 1px solid var(--gc2-line); }
.gc2-faq__i:first-child { border-top: 0; }
.gc2-faq__i > summary {
cursor: pointer; list-style: none; padding: 13px 40px 13px 44px; position: relative;
font-size: 14.5px; font-weight: bold; line-height: 1.65;
}
.gc2-faq__i > summary::-webkit-details-marker { display: none; }
.gc2-faq__i > summary::before {
content: "Q"; position: absolute; left: 13px; top: 12px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--gc2-accent); color: #fff; border-radius: 50%; font-size: 12px;
}
.gc2-faq__i > summary::after {
content: ""; position: absolute; right: 16px; top: 19px;
width: 8px; height: 8px; border-right: 2px solid var(--gc2-ink-sub);
border-bottom: 2px solid var(--gc2-ink-sub); transform: rotate(45deg); transition: transform .2s;
}
.gc2-faq__i[open] > summary::after { transform: rotate(-135deg); top: 22px; }
.gc2-faq__i > summary:hover { background: var(--gc2-bg-soft); }
.gc2-faq__a { padding: 15px 16px 15px 44px; position: relative; }
.gc2-faq__a::before {
content: "A"; position: absolute; left: 13px; top: 1px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--gc2-bg); color: var(--gc2-ink-sub); border-radius: 50%; font-size: 12px; font-weight: bold;margin-top: 15px;
}
.gc2-faq__a p { font-size: 14px; line-height: 1.85; margin: 0; }
/* =============================================================
* 出典表記
* ============================================================= */
.gc2-src {
font-size: 11.5px; color: var(--gc2-ink-sub); line-height: 1.75;
border-top: 1px dashed var(--gc2-line); padding: 12px; margin-top: 8px;
}
.gc2-src a { color: var(--gc2-ink-sub); }
.gc2-note { font-size: 13px; color: var(--gc2-ink-sub); line-height: 1.75; margin: 14px 0 0; }
/* =============================================================
* タブレット以下
* ============================================================= */
@media screen and (max-width: 767px) {
.gc2-media, .gc2-media--rev { grid-template-columns: 1fr; gap: 12px; }
.gc2-intro { grid-template-columns: 1fr; gap: 12px; }
.gc2-toc ol { grid-template-columns: repeat(2, 1fr); }
.gc2-intro__lead { font-size: 14px; padding: 11px 12px 12px; }
.gc2-step__lead { font-size: 13.5px; padding: 11px 12px 12px; margin-bottom: 13px; }
.gc2-intro__more p { font-size: 13.5px; }
.gc2-stats { grid-template-columns: repeat(2, 1fr); }
.gc2-media--rev .gc2-media__fig { order: 0; }
.gc2-colors { grid-template-columns: repeat(3, 1fr); }
.gc2-spec > div { grid-template-columns: 11em 1fr; }
}
/* =============================================================
* スマートフォン（最重要）
* ============================================================= */
@media only screen and (max-width: 640px) {
.gc2 { line-height: 1.85; }
.gc2 p { font-size: 13px; margin: 3%; }
.gc2-sec { margin-bottom: 34px; }
/* ファーストビュー */
.gc2-sec.is-jumped > h2.heading_01 { padding-right: 84px; }
.gc2-backtop { right: 10px; font-size: 11.5px; padding: 4px 10px; }
.gc2-hero { border-radius: var(--gc2-radius); }
/* バッジはSPで1段小さく。文言が長いシリーズ（マイトーンの「2026年8月
フルモデルチェンジ」）でも1行に収まる大きさにする。 */
.gc2-hero__new { font-size: 12px; padding: 4px 11px; letter-spacing: .02em; }
/* SPバナー(bnr_main_s)は上部中央に「Mytone」ロゴが入っているので、バッジは下に置く */
.gc2-hero__flag { top: auto; top: 10px; }
.gc2-hero__figure img { aspect-ratio: 4 / 3; }
.gc2-hero__body { padding: 14px; }
.gc2-hero__name { font-size: 19px; }
.gc2-pricebar__val strong { font-size: 27px; }
.gc2-usp { grid-template-columns: 1fr; gap: 6px; }
.gc2-hero__name { font-size: 21px; }
.gc2-hero__sub { font-size: 13.5px; }
.gc2-pricebar { padding: 12px 13px 13px; }
.gc2-pricebar__val strong { font-size: 34px; }
.gc2-pricebar__val .u { font-size: 16px; }
.gc2-pricebar__off { font-size: 12px; margin-left: 0; margin-top: 4px; }
.gc2-pricebar__inc li { font-size: 11px; }
/* 要点タイル・メーカー別は縦積み */
.gc2-stats { grid-template-columns: 1fr; gap: 8px; }
.gc2-makers > li { grid-template-columns: 1fr; gap: 6px; }
.gc2-makers__h { display: flex; align-items: baseline; gap: 8px; }
.gc2-makers__h b { font-size: 15px; }
.gc2-face { grid-template-columns: 1fr; }
.gc2 img.gc2-cmp__thumb { max-width: 96px; margin-bottom: 4px; }
.gc2-facebox__fig img { max-width: 100%; }
.gc2-usp li { display: block; text-align: left; padding: 0; }
.gc2-usp__a { display: flex; align-items: baseline; gap: 8px; padding: 10px 26px 10px 12px; }
.gc2-usp b { font-size: 16px; }
.gc2-usp span { margin-top: 0; font-size: 12px; }
.gc2-cta { grid-template-columns: 1fr; }
/* 目次 */
.gc2-toc { margin-bottom: 26px; }
/* スマホは2列。1列だと17項目で画面が埋まって本文が遠くなる。 */
.gc2-toc ol { grid-template-columns: repeat(2, 1fr); gap: 1px 4px; padding: 6px; }
.gc2-toc__h { font-size: 13.5px; padding: 9px 12px; }
.gc2-toc a { font-size: 12px; padding: 7px 6px 7px 6px; gap: 6px; }
.gc2-toc a::before { width: 18px; height: 18px; line-height: 18px; font-size: 10px; }
.gc2-toc a::after { font-size: 13px; padding-left: 2px; }
/* 新旧の違い・向き不向き・比較：1カラムへ */
.gc2-news, .gc2-vs, .gc2-feat, .gc2-cost__list { grid-template-columns: 1fr; }
/* 向いている方：狭い画面では2列。ブロック自体は元から全幅。 */
.gc2-fit { grid-template-columns: 1fr; }
.gc2-fit__box ul { grid-template-columns: repeat(2, 1fr); }
/* 要点タイル：2カラム。アイコンは少し小さく */
.gc2-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
.gc2-facts li { grid-template-columns: 36px 1fr; column-gap: 8px; padding: 10px 10px 10px; }
.gc2-facts__i { width: 36px; height: 36px; font-size: 20px; }
.gc2-facts__v { font-size: 16px; }
.gc2-facts__k { font-size: 10px; }
.gc2-facts__n { font-size: 11px; padding-top: 6px; }
.gc2-goseries { padding: 9px 15px; font-size: 14px; }
.gc2-vs dt { flex: 0 0 6.8em; }
.gc2-news__b { padding: 12px 14px 14px; }
/* 操作パネル：1カラム（横並びだとボタン文字が読めない） */
.gc2-panels { grid-template-columns: 1fr; gap: 14px; }
.gc2-panel__h { padding: 10px 14px 10px 30px; }
.gc2-panel__h b { font-size: 15px; }
.gc2-panel__list dt { font-size: 14px; }
.gc2-panel__list dd { font-size: 13px; }
.gc2-point p { font-size: 13px; }
.gc2-face dt { font-size: 14.5px; }
.gc2-face dd { font-size: 13.5px; }
/* 向いている方：スマホは1列（カードが細くなりすぎる） */
.gc2-fit__box ul { grid-template-columns: 1fr; gap: 8px; padding: 10px 11px; }
.gc2-fit__box li { font-size: 13px; padding: 9px 11px 10px 2.4em; }
.gc2-fit__box li strong { font-size: 13.5px; }
/* 有無一覧・仕様：横並びをやめて縦積み（横スクロールを作らない） */
.gc2-flags > li { grid-template-columns: 1fr; }
.gc2-flags b { border-bottom: 1px solid var(--gc2-line); }
.gc2-spec > div { grid-template-columns: 1fr; }
.gc2-spec dt { border-bottom: 1px solid var(--gc2-line); }
/* カラー：3列（指で押せるサイズを確保） */
.gc2-colors { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gc2-colors__n { font-size: 11px; }
.gc2-colors__t { font-size: 10px; letter-spacing: -.03em; }
/* 絞り込み */
.gc2-filter { padding: 11px 12px; }
.gc2-filter__row { flex-wrap: wrap; }
.gc2-filter__lb { flex: 0 0 100%; margin-bottom: 2px; padding-top: 0; }
.gc2-filter__chips { flex: 0 0 100%; }
.gc2-chip { font-size: 13px; padding: 8px 14px; }
/* 商品カード：スマホでも2列。カード幅が約170pxになるので、
横並びだと収まらない要素（バッジ・仕様・価格）を縦積みに切り替える。 */
.gc2-items { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gc2-item { padding: 8px; border-width: 1px; }
/* バッジ：幅指定を外して自然幅に。入らなければ2行に折り返す */
.gc2-item__badges { gap: 4px; margin-bottom: 6px; }
.gc2-item__w { font-size: 14px; padding: 2px 5px; width: 100%; }
.gc2-item__grt { font-size: 16px; width: 100%; padding: 2px 0; }
.gc2-item__figure { display: grid; grid-template-columns: 1fr; margin-bottom: 8px; }
.gc2-item__swatch { width: 30%; max-width: 56px; right: 3px; bottom: 3px; border-width: 1px; }
.gc2-item__sku { font-size: 13.5px; margin-bottom: 5px; overflow-wrap: anywhere; }
.gc2-item__sku span { font-size: 10px; }
/* 仕様：dt/dd を縦積み（横並びだと dd が潰れて読めない） */
.gc2-item__spec { font-size: 11.5px; margin-bottom: 7px; }
.gc2-item__spec > div { flex-direction: column; gap: 0; padding: 4px 6px; }
.gc2-item__spec dt { flex: none; font-size: 10px; }
.gc2-item__spec dd { line-height: 1.5; }
.gc2-tags { gap: 3px; margin-bottom: 7px; }
.gc2-tags li { font-size: 10px; padding: 2px 5px; }
/* 価格：ラベルと金額を上下に。横並びだと1行に入らない */
.gc2-item__prices { font-size: 12.5px; margin-bottom: 7px; }
.gc2-item__prices > div { flex-direction: column; align-items: stretch; gap: 0; padding: 3px 0; }
.gc2-item__prices dt { font-size: 10.5px; }
.gc2-item__prices dd { text-align: right; font-size: 13.5px; }
.gc2-item__off { font-size: 10px; padding: 1px 4px; margin-right: 5px; margin-left: 0; }
.gc2-item__total { padding: 6px 8px; margin-bottom: 8px; }
.gc2-item__total b { font-size: 10px; }
.gc2-item__total strong { font-size: 21px; }
.gc2-item__total .yen { font-size: 11px; }
.gc2-item__askn { font-size: 10px; }
/* ボタンは縦に2段（横並びでは文字が入らない） */
.gc2-item__acts { grid-template-columns: 1fr; gap: 5px; }
.gc2-item__acts .gc2-btn { padding: 9px 6px; font-size: 12.5px; }
.gc2-item__acts .gc2-btn small { font-size: 9.5px; }
/* 旧モデルの折りたたみ内も同じ */
.gc2-old__b { padding: 0 8px 12px; }
/* 後継機：縦積みにして矢印を下向きに */
.gc2-succ__i { grid-template-columns: 1fr; gap: 4px; }
.gc2-succ__ar { transform: rotate(90deg); font-size: 17px; margin: 2px 0; }
.gc2-promise { margin: 12px 8px; }
.gc2-promise__h { font-size: 13.5px; padding: 7px 10px; }
.gc2-promise__l { padding: 10px 11px; }
.gc2-promise__l li { font-size: 12.5px; padding-left: 21px; margin: 12px; margin}
/* 比較表：横スクロールで見せる（列を潰さない）。1列目は固定。 */
/* 横スクロールの案内は ScrollHint（指アイコン＋影）が出すので、
静的な一文は出さない（同じことを二重に言わない）。 */
.gc2-cmp__hint { display: none; }
.gc2-cmp { font-size: 11.5px; min-width: 540px; }
.gc2-cmp th, .gc2-cmp td { padding: 6px 6px; }
.gc2-cmp thead th { font-size: 12px; }
.gc2-cmp tbody th { font-size: 11px; white-space: normal; }
.gc2-cmp__price b { font-size: 14px; }
/* メリットと注意点：1カラム */
.gc2-pc { grid-template-columns: 1fr; margin: 0 8px; }
.gc2-pc__col dt { font-size: 12.5px; }
.gc2-pc__col dd { font-size: 12px; }
/* 実績データ：KPIは2列、内訳は1列 */
.gc2-kpi { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 8px 12px; }
.gc2-kpi li { padding: 10px 6px 9px; }
.gc2-kpi__i { font-size: 22px; margin-bottom: 4px; }
.gc2-kpi__v b { font-size: 25px; }
.gc2-kpi__v b.is-sm { font-size: 15px; }
.gc2-kpi__l { font-size: 11px; }
.gc2-idata { grid-template-columns: 1fr; margin: 0 8px; }
.gc2-idata__top b { font-size: 24px; }
.gc2-bars__l { flex: 0 0 5.6em; font-size: 11.5px; }
.gc2-bars__v { flex: 0 0 5.2em; }
/* 工事パック内訳図：縦積み。項目は2列にして1マスの余白を確保する */
.gc2-pack { grid-template-columns: 1fr; gap: 6px; }
.gc2-pack__op { text-align: center; font-size: 17px; }
.gc2-pack__g { padding: 11px 11px 12px; gap: 8px; }
.gc2-pack__b.is-pack .gc2-pack__g { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.gc2-pack__g li { padding: 10px 5px 9px; }
.gc2-pack__g img { width: 42px; height: 42px; margin-bottom: 6px; }
.gc2-pack__b.is-after .gc2-pack__g img { width: 56px; height: 63px; }
.gc2-pack__g b, .gc2-pack__g span { font-size: 11.5px; }
.gc2-pack__total { font-size: 12.5px; padding: 9px 10px; }
.gc2-why { margin: 0 8px 4px; }
.gc2-why dt { font-size: 13px; }
.gc2-why dd { font-size: 12.5px; }
.gc2-care { grid-template-columns: 1fr; gap: 10px; margin: 0 8px 6px; }
.gc2-care li { flex-direction: row; align-items: stretch; }
.gc2-care__fig { flex: 0 0 118px; }
.gc2-care__fig img { height: 100%; min-height: 104px; }
/* スマホは画像が細いので、ラベルは画像に重ねず見出しの上に置く */
.gc2-care__tag {
position: static; display: inline-block; margin: 0 0 4px;
font-size: 10px; padding: 2px 7px; white-space: normal;
}
.gc2-care__b { flex: 1 1 auto; min-width: 0; padding: 9px 10px 10px; }
.gc2-care__t { font-size: 13px; }
.gc2-care__b p { font-size: 12px; }
/* 工事費表はスマホでも横スクロールさせず、3列を折り返して収める */
.gc2-kj { font-size: 11.5px; min-width: 0; }
.gc2-kj th, .gc2-kj td { padding: 5px 5px; }
.gc2-kj td.is-p { font-size: 13.5px; }
.gc2-kj tbody th { white-space: normal; }
.gc2-rel { margin: 0 8px 12px; }
.gc2-rel__t { font-size: 13px; }
.gc2-succ__th { flex: 0 0 62px; width: 62px; }
.gc2-succ__th img { height: 44px; }
/* 施工事例：1カラム */
.gc2-cases { grid-template-columns: 1fr; }
.gc2-morelink .gc2-btn { min-width: 0; width: 100%; }
/* 口コミ */
.gc2-rate { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
/* オプション */
.gc2-opt { grid-template-columns: 100px 1fr; gap: 11px; padding: 11px; }
/* FAQ */
.gc2-faq__i > summary { font-size: 14.5px; padding: 12px 36px 12px 42px; }
.gc2-faq__a { padding: 0 14px 14px 42px; }
.gc2-faq__a p { font-size: 14.5px; }
}
/* さらに狭い端末 */
@media only screen and (max-width: 359px) {
.gc2-colors { grid-template-columns: repeat(2, 1fr); }
.gc2-item__acts { grid-template-columns: 1fr; }
.gc2-opt { grid-template-columns: 1fr; }
}
/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
.gc2 * { transition: none !important; }
}
/* =============================================================================
* 搭載機能（.gc2-fhl / .gc2-fl） ※2026-09-06 追加
* 公式「仕様一覧」の項目名を1行ずつ並べるだけだと読み飛ばされるため、
* ・よくご質問をいただく機能はアイコン付きカードで先に出す（.gc2-fhl）
* ・各項目は「項目名＋対象バッジ＋説明」に分ける（.gc2-fl）
* アクセント色は各シリーズの --gc2-accent をそのまま使う。
* 既存の .gc2-feat / .gc2-feat__g の指定は変更していない（追加のみ）。
* ========================================================================== */
/* ▼ よくご質問をいただく機能 */
.gc2-fhl {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 0 0 14px; padding: 0; list-style: none;
}
.gc2-fhl > li {
display: flex; gap: 12px; align-items: flex-start;
padding: 13px 14px; background: var(--gc2-accent-bg);
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--gc2-radius);
}
.gc2-fhl__i {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%;
background: #fff; border: 1px solid rgba(0, 0, 0, 0.1);
color: var(--gc2-accent); font-size: 22px;
}
.gc2-fhl__b { display: block; min-width: 0; }
.gc2-fhl__k { display: block; font-size: 14.5px; line-height: 1.45; color: #2a2a2a; }
.gc2-fhl__v {
display: inline-block; margin: 4px 0 5px; padding: 1px 8px;
font-size: 11.5px; font-weight: bold; letter-spacing: 0;
color: #fff; background: var(--gc2-accent); border-radius: 999px;
}
.gc2-fhl__d { display: block; font-size: 12.5px; line-height: 1.75; color: #4a4a4a; }
/* ▼ グループ見出しのアイコン */
.gc2-feat__g h3 { display: flex; align-items: center; gap: 7px; }
.gc2-feat__i { display: inline-flex; font-size: 16px; }
/* ▼ 項目名＋対象バッジ＋説明 */
.gc2-fl { margin: 0; padding: 10px 12px; }
.gc2-fl > div { padding: 7px 0; border-top: 1px dotted #e2e2e2; }
.gc2-fl > div:first-child { padding-top: 2px; border-top: 0; }
.gc2-fl dt {
font-size: 13.5px; font-weight: bold; line-height: 1.55; color: #2a2a2a;
padding-left: 1.05em; position: relative;
}
.gc2-fl dt::before {
content: ""; position: absolute; left: 0; top: 0.5em;
width: 6px; height: 6px; border-radius: 50%; background: var(--gc2-accent);
}
.gc2-fl dd {
margin: 3px 0 0; padding-left: 1.05em;
font-size: 12.5px; line-height: 1.75; color: #555;
}
.gc2-fl__b {
display: inline-block; margin-left: 6px; padding: 1px 7px;
font-size: 11px; font-weight: normal; letter-spacing: 0; white-space: nowrap;
color: var(--gc2-accent); background: var(--gc2-accent-bg);
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; vertical-align: 2px;
}
.gc2-fl__note {
margin: 0; padding: 0 12px 11px; font-size: 11.5px; line-height: 1.7; color: #7a7a7a;
}
@media screen and (max-width: 767px) {
.gc2-fhl { grid-template-columns: 1fr; }
.gc2-fhl__i { width: 36px; height: 36px; font-size: 19px; }
.gc2-fhl__k { font-size: 14px; }
.gc2-fl__b { white-space: normal; }
}
/* =============================================================================
* 本文の可読性（2026-09-06 指示「ここ見にくいなー。全シリーズ見やすくしろ」）
*
* 指摘箇所は「〜とは」の説明文（.gc2-intro__more）だが、原因は本文段落の共通課題:
* ① 1行が長い … PCの本文幅720pxに14pxの文字＝1行約48〜50字。
* 日本語の読みやすい行長は35〜45字なので、行を追うときに視線が戻る位置を見失う。
* ② 段落の間が狭い … 10pxだと行間（約27px）より狭く、段落の切れ目が見えない。
* ③ 太字が多い … 1段落に太字が5〜8か所あると、どこが要点か分からなくなる。
* 文章は変えず、全シリーズ共通でこの3点を整える。
* （追記のみ。既存セレクタのレイアウト系プロパティは上書きしていない＝骨格は不変）
* ========================================================================== */
/* ① 行長の制限は入れない。
2026-09-06 に .gc2-intro__more p / .gc2-lead / .gc2-note / .gc2-src へ
行長の上限を当てたが、本文幅が全シリーズで狭くなるため取り消した（ユーザー指示）。
本文は #contents の幅（PC 720px）をそのまま使う。 */
.gc2-lead { line-height: 1.95; }
/* ② 段落の切れ目を行間より広くする */
.gc2-intro__more p { margin-bottom: 17px; line-height: 2.0; }
.gc2-intro__more p:last-child { margin-bottom: 0; }
/* 写真＋リード文のかたまりと、続きの説明文を線で分ける（どこから読むかが分かる） */
.gc2-intro__more {
border-top: 1px solid var(--gc2-line);
/* padding は 2% の一括指定で効かせる。以前あった padding-top:15px は
この後ろの一括指定に打ち消されて死んでいたので削除した（見た目は変わらない）。 */
padding: 2%;
}
/* ③ 太字は「色＋薄いマーカー」で拾えるようにし、線の太さは抑える。
アクセント色が暗いシリーズ（デリシア #1f3d52・グリレ #3d4650 など）でも
地の文と見分けられるよう、下側にだけ薄いアクセント帯を敷く。 */
.gc2-intro__more strong,
.gc2-hero__copy strong,
.gc2-lead strong {
font-weight: 600;
/* 下線ではなくマーカー（帯）に見える高さにする。62%だとリンクの下線と
紛らわしかったので 55% まで上げて厚みを出した。 */
background: linear-gradient(transparent 55%, var(--gc2-accent-bg) 55%);
}
@media screen and (max-width: 767px) {
/* SPは1行が約24字なので行長制限は不要。段落の間と行間だけ確保する。 */
.gc2-intro__more p { margin-bottom: 15px; line-height: 1.95; }
.gc2-intro__more { padding-top: 13px; }
}
/* =============================================================================
* ヒーローの価格表示の寄せ ※2026-09-06 追加
* 金額が左端に寄っていて視線に入りにくかったので、
* ラベル・金額・内訳をブロックの中央にそろえる。
* 長文の注記は読みやすさを優先して左そろえのまま。
* ========================================================================== */
/* ラベルはバッジ（inline-block）なので、text-align だけでは中央に来ない。
幅を内容に合わせたブロックにして左右マージンで中央に置く。 */
.gc2-pricebar__label {
display: block; width: -moz-fit-content; width: fit-content;
margin-left: auto; margin-right: auto; text-align: center;
}
.gc2-pricebar__val { justify-content: center; }
.gc2-pricebar__inc { justify-content: center; }