@charset "utf-8";
/* =============================================================================
 * メタルトップ「Metal Top」・その他 固有CSS
 *
 *  レイアウト・UIは共通の /gasconro/css/series.css にある。
 *  このファイルはこのページ固有の上書きだけを持つ。
 *  読み込み順は必ず series.css → このファイル。
 *
 *  ★共通CSS（series.css）は一切変更していない。
 *    マイトーン・リッセ・デリシア・グリレ・ユーディアエフ・セイフルプラス・セイフルが
 *    本番稼働しているため、このページの都合はすべて .gc2.metal2 配下で閉じる。
 *
 *  ★このページは単一シリーズページではない（カテゴリページ）。
 *    そのため他シリーズには無い「商品区分バッジ（.gc2-badge）」と
 *    「区分ブロックの見出し（.gc2-gh）」「区分の一覧（.gc2-grp）」を持つ。
 * ========================================================================== */

/* ページのアクセント色。
   メタルトップはホーロー天板（ダークグレー／ブラック）の実用シリーズなので、
   金属らしい青系にする。地の文(#333)と本文中の強調を見分けられる明るさが必要なので、
   暗すぎるグレー（#4a6076 は #333 と差が小さく強調が効かなかった）は使わない。
   （デリシア=#1f3d52／リッセ=#2a5f7f／マイトーン=#1b6ea8／グリレ=#3d4650／
     ユーディアエフ=#2f6b5f／セイフルプラス=#6b3d73／セイフル=#8a5a2b と重ならない色。
     指示によりアクセント色に茶・オレンジ系は使わない） */
.gc2.metal2 {
	--gc2-accent:    #1f3d52;
	--gc2-accent-bg: #eef3f7;
	--m2-mt:  #2f6b93;	/* メタルトップ */
	--m2-std: #4a6076;	/* スタンダード（ガラストップ） */
	--m2-cmp: #5c6b3f;	/* コンパクト45cm */
	--m2-cab: #6b5566;	/* キャビネット型 */
}

/* -----------------------------------------------------------------------------
 * 商品区分バッジ
 *   商品一覧の枠の左上と、区分ブロックの見出しに同じ見た目で出す。
 *   「その他」が雑多に見えないよう、どの枠も必ず区分が分かる状態にする。
 * -------------------------------------------------------------------------- */
.gc2.metal2 .gc2-badge {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	background: var(--m2-mt); color: #fff;
	font-size: 11px; font-weight: bold; line-height: 1.6; white-space: nowrap;
	vertical-align: middle;
}
.gc2.metal2 .gc2-badge.is-mt  { background: var(--m2-mt); }
.gc2.metal2 .gc2-badge.is-std { background: var(--m2-std); }
.gc2.metal2 .gc2-badge.is-cmp { background: var(--m2-cmp); }
.gc2.metal2 .gc2-badge.is-cab { background: var(--m2-cab); }

/* -----------------------------------------------------------------------------
 * 区分の一覧（「メタルトップ・その他とは」の中）
 *   4区分を横並びの枠で出し、このページの骨格を最初に示す。
 * -------------------------------------------------------------------------- */
.gc2.metal2 .gc2-grp {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
	margin: 0 10px 14px; padding: 0; list-style: none;
}
.gc2.metal2 .gc2-grp__i {
	border: 1px solid var(--gc2-line); border-left: 4px solid var(--m2-mt);
	border-radius: var(--gc2-radius); background: #fff; padding: 10px 12px 11px;
}
.gc2.metal2 .gc2-grp__i.is-mt  { border-left-color: var(--m2-mt); }
.gc2.metal2 .gc2-grp__i.is-std { border-left-color: var(--m2-std); }
.gc2.metal2 .gc2-grp__i.is-cmp { border-left-color: var(--m2-cmp); }
.gc2.metal2 .gc2-grp__i.is-cab { border-left-color: var(--m2-cab); }
.gc2.metal2 .gc2-grp__h {
	margin: 0 0 4px; font-size: 14px; line-height: 1.5;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.gc2.metal2 .gc2-grp__h b { font-weight: bold; }
.gc2.metal2 .gc2-grp__n {
	font-size: 11.5px; font-weight: normal; color: var(--gc2-ink-sub);
	border: 1px solid var(--gc2-line); border-radius: 999px; padding: 0 7px;
}
.gc2.metal2 .gc2-grp__s {
	margin: 0 0 5px; font-size: 12px; font-weight: bold; color: var(--gc2-accent);
}
.gc2.metal2 .gc2-grp__d { margin: 0; font-size: 12.5px; line-height: 1.7; }

/* -----------------------------------------------------------------------------
 * 区分ブロックの見出し（ラインナップ内）
 * -------------------------------------------------------------------------- */
.gc2.metal2 .gc2-gh {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.gc2.metal2 .gc2-gh__n {
	font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub);
	border: 1px solid var(--gc2-line); border-radius: 999px; padding: 0 8px;
}
.gc2.metal2 .gc2-gh__d {
	margin: 0 10px 12px; font-size: 13px; line-height: 1.75; color: var(--gc2-ink-sub);
}

/* -----------------------------------------------------------------------------
 * 商品一覧の枠
 *   ★バッジ行（.gc2-item__badges）は共通CSSが「天板幅45%＋保証53%」の2枠で
 *     組んでいるので、区分バッジを足してはいけない（3つ目が折り返して崩れる）。
 *     区分は各ブロックの見出し（.gc2-gh）のバッジで示す。
 * -------------------------------------------------------------------------- */
/* 型番ごとの搭載機能（公式仕様で確認できたものだけ） */
.gc2.metal2 .gc2-fn {
	margin: 0 0 9px; padding: 8px 10px; list-style: none;
	background: var(--gc2-accent-bg); border-radius: var(--gc2-radius);
	font-size: 12px; line-height: 1.7;
}
.gc2.metal2 .gc2-fn li { position: relative; padding-left: 1.1em; }
.gc2.metal2 .gc2-fn li::before {
	content: "＋"; position: absolute; left: 0; color: var(--gc2-accent); font-weight: bold;
}
/* 写真の共用・機能の非搭載などの注記 */
.gc2.metal2 .gc2-item__imgnote {
	margin: -4px 0 8px; font-size: 11px; line-height: 1.6; color: var(--gc2-ink-sub);
}
/* 仕様が公表されていない品番（URG-655TS2A(G)）の説明枠 */
.gc2.metal2 .gc2-item__ask {
	margin: 0 0 9px; padding: 9px 11px; border: 1px dashed var(--gc2-line);
	border-radius: var(--gc2-radius); background: #fcfcfd;
}
.gc2.metal2 .gc2-item__ask b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.gc2.metal2 .gc2-item__ask p { margin: 0; font-size: 12px; line-height: 1.7; }

/* ファーストビューの価格帯に「Metal Top だけの価格」を1行足す。
   共通CSSがラベル・金額・内訳を中央そろえにしたので（2026-09-06）、この行もそろえる。 */
.gc2.metal2 .gc2-pricebar__sub {
	margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; text-align: center;
}
.gc2.metal2 .gc2-pricebar__sub b { font-size: 14px; }

/* .gc2-pick（比較表の直後の「どれを選べばよいか」）の指定は、
 *  8シリーズで同じものを重複して持っていたので共通CSS（/gasconro/css/series.css）へ寄せた。
 *  ここでの上書きは不要（2026-09-08）。 */

/* -----------------------------------------------------------------------------
 * 選び方枠（.gc2-vs）の中身
 *   選ぶ理由を箇条書きで出す（デリシア・グリレ・ユーディアエフと同じ形）。
 *   共通CSSには箇条書き用の指定が無いので、ここで同じ見え方に揃える。
 * -------------------------------------------------------------------------- */
.gc2.metal2 .gc2-vs__t span {
	display: block; margin-top: 3px;
	font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub); line-height: 1.5;
}
.gc2.metal2 .gc2-vs__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gc2.metal2 .gc2-vs__list li {
	position: relative; padding: 0 0 0 1.9em; margin: 0 0 7px; line-height: 1.75;
}
.gc2.metal2 .gc2-vs__list li::before {
	content: "✓"; position: absolute; left: 0; top: .25em;
	width: 17px; height: 17px; line-height: 17px; text-align: center;
	border-radius: 50%; background: var(--gc2-accent); color: #fff;
	font-size: 10px; font-weight: bold;
}
.gc2.metal2 .gc2-vs__list li:last-child { margin-bottom: 0; }
/* STEP2・STEP3は4枚並ぶ。共通は3枚想定なので4列に切り替える */
@media screen and (min-width: 768px) {
	.gc2.metal2 .gc2-vs { grid-template-columns: repeat(4, 1fr); }
	.gc2.metal2 .gc2-step:first-of-type .gc2-vs { grid-template-columns: repeat(3, 1fr); }
}

/* 旧型番の並びは1行が長い。型番の途中で折り返してよい。 */
.gc2.metal2 .gc2-succ__m { white-space: normal; }

/* -----------------------------------------------------------------------------
 * スマホ
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.gc2.metal2 .gc2-grp { grid-template-columns: 1fr; gap: 8px; margin: 0 8px 12px; }
	.gc2.metal2 .gc2-grp__h { font-size: 13.5px; }
	.gc2.metal2 .gc2-grp__d { font-size: 12px; }
	.gc2.metal2 .gc2-gh__d { margin: 0 8px 10px; font-size: 12.5px; }
	.gc2.metal2 .gc2-badge { font-size: 10.5px; padding: 2px 7px; }
				.gc2.metal2 .gc2-vs, .gc2.metal2 .gc2-step:first-of-type .gc2-vs { grid-template-columns: 1fr; }
	.gc2.metal2 .gc2-vs__list { font-size: 12.5px; }
	.gc2.metal2 .gc2-vs__list li { padding-left: 1.8em; margin-bottom: 6px; }
	.gc2.metal2 .gc2-vs__list li::before { width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
	.gc2.metal2 .gc2-fn { font-size: 11.5px; padding: 7px 9px; }
	.gc2.metal2 .gc2-item__ask b { font-size: 12px; }
	.gc2.metal2 .gc2-item__ask p { font-size: 11.5px; }
}