@charset "utf-8";
/* =============================================================================
 * グリレ（GRILLER）固有CSS
 *
 *  レイアウト・UIは共通の /gasconro/css/series.css にある。
 *  このファイルはシリーズ固有の上書きだけを持つ。
 *  読み込み順は必ず series.css → このファイル。
 *
 *  ★共通CSS（series.css）は一切変更していない。
 *    マイトーン・リッセ・デリシアの3本が本番稼働しているため、
 *    グリレの都合はすべてこのファイルの中（.gc2.griller2 配下）で閉じる。
 * ========================================================================== */

/* シリーズのアクセント色。
   グリレはフラットメタル天板（アルミ）＋ステンレス鋳物ごとく＋ステンレス前面パネルで
   金属の質感が主役のシリーズなので、金属寄りのダークグラファイトにする。
   （デリシア=#1f3d52 ネイビー／リッセ・マイトーンとも別の色にして取り違えを防ぐ） */
.gc2.griller2 {
	--gc2-accent:    #1f3d52;
	--gc2-accent-bg: #eef3f7;
}

/* 型番の読み方一覧（.gc2-flags）：
   グリレはラベルが「末尾が L / R」など長いので、共通CSSの既定（9em）だと
   折り返して読みにくい。列幅を広げて折り返しを止める。
   スマホは共通CSSで1カラムに切り替わるため上書き不要。 */
@media screen and (min-width: 768px) {
	.gc2.griller2 .gc2-flags > li { grid-template-columns: 12em 1fr; }
	.gc2.griller2 .gc2-flags b { white-space: nowrap; }
}

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

/* -----------------------------------------------------------------------------
 * 選び方枠（.gc2-vs）の中身
 *   グリレの選び方は「強火力を左右どちらにするか」の1ステップで、
 *   選ぶ理由を箇条書きで出す（デリシアと同じ形）。
 *   共通CSSには箇条書き用の指定が無いので、ここでデリシアと同じ見え方に揃える。
 *   枠自体（枠・画像・.gc2-vs__in の余白）は共通CSSのまま。
 * -------------------------------------------------------------------------- */
.gc2.griller2 .gc2-vs__t span {
	display: block; margin-top: 3px;
	font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub); line-height: 1.5;
}
/* ※デリシアにある「画像を3:2に収めて左右の高さを揃える」上書きは、
   グリレでは入れていない。選び方枠の図版が2枚とも公式の選び方ガイド図
   （900×600＝ちょうど3:2）で縦横比がそろっているため、上書きしなくても
   左右の枠の高さが揃う。 */
.gc2.griller2 .gc2-vs__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gc2.griller2 .gc2-vs__list li {
	position: relative; padding: 0 0 0 1.9em; margin: 0 0 7px; line-height: 1.75;
}
/* マーカーは「・」ではなくチェックのバッジ。1項目ずつ拾い読みできるようにする。 */
.gc2.griller2 .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.griller2 .gc2-vs__list li:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px) {
	.gc2.griller2 .gc2-vs__list { font-size: 12.5px; }
	.gc2.griller2 .gc2-vs__list li { padding-left: 1.8em; margin-bottom: 6px; }
	.gc2.griller2 .gc2-vs__list li::before { width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
}

/* ラインナップ：共通CSSの .gc2-items はPC・SPとも2列なので、
   現行2品番のグリレでもそのまま1行に収まる（上書き不要）。 */

/* -----------------------------------------------------------------------------
 * 天板の仕上げ（.gc2-colors を1色ぶんだけ使う）
 *   共通CSSの .gc2-colors は5色を横に並べる前提で列数と文字サイズを決めている。
 *   グリレはシルバー1色なので、そのままだと1枚が本文幅いっぱいまで伸びて
 *   文字も小さすぎる。1列・幅上限つきにして文字サイズを戻す。
 * -------------------------------------------------------------------------- */
.gc2.griller2 .gc2-colors--one { grid-template-columns: minmax(0, 260px); }
.gc2.griller2 .gc2-colors--one .gc2-colors__n { font-size: 13px; padding-top: 8px; }
.gc2.griller2 .gc2-colors--one .gc2-colors__t { font-size: 11.5px; letter-spacing: normal; padding-bottom: 9px; }

@media screen and (max-width: 767px) {
	.gc2.griller2 .gc2-colors--one { grid-template-columns: minmax(0, 220px); }
}

/* -----------------------------------------------------------------------------
 * 施工実績データ
 *   グリレは仕様の内訳（割合）を出さないため、枠は「施工した都道府県」の
 *   1枚だけになる。共通CSSの is-wide（全幅）はそのまま効くので指定は不要。
 *   件数が少ないシリーズなので、バーの代わりに件数だけを読ませる作りにしている。
 * -------------------------------------------------------------------------- */