@charset "utf-8";
/* =============================================================================
 * リンナイ スペリア（Superia） シリーズページ 固有CSS
 *
 *  レイアウト・UIは共通 ../css/series.css。このファイルは
 *  「アクセント色」と「スペリアだけ枚数が違うカードの並び」の上書きだけを持つ。
 *  共通CSSを触ると既に公開済みの他シリーズが動くので、ここに閉じる。
 *
 *  ※必ず series.css より後に読み込む（index.html でその順に指定している）。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * シリーズのアクセント色
 *   ★茶・オレンジ系は使わない（2026-09-06 指示）。深いインディゴにしている。
 *   ・白地とのコントラスト比 約7.4:1（見出し文字・白抜きバッジの両方で足りる）
 *   ・他シリーズと色が近くなるのは構わない（シリーズ数のほうが多いので避けきれない）
 *   色を変えるときはこの2つの変数だけを直せばページ全体に反映される。
 * -------------------------------------------------------------------------- */
.gc2.superia2 {
	--gc2-accent:    #4a4f8c;
	--gc2-accent-bg: #eef0f8;
}

/* -----------------------------------------------------------------------------
 * カラーは3色。共通は5列グリッド（マイトーンの5色に合わせてある）なので、
 * そのままだと3枚が左に寄って細長くなる。3列にして1枚あたりを広く使う。
 * -------------------------------------------------------------------------- */
.gc2.superia2 .gc2-colors { grid-template-columns: repeat(3, 1fr); }

/* -----------------------------------------------------------------------------
 * 選び方カード（.gc2-vs）の中身
 *   ★共通CSS（series.css）には .gc2-vs__t span と .gc2-vs__list の指定が無く、
 *     デリシア・グリレ・ユーディアエフが各自のCSSで同じ定義を持っている。
 *     ここに書き忘れると、見出しの副題と箇条書きの文字サイズが他ページと変わる
 *     （2026-09-06 に実際に副題11.5px・箇条書き14pxになっていた／正解は12px・13px）。
 *   ※次にシリーズを追加するときに series.css へ移し、各シリーズCSSから外す。
 * -------------------------------------------------------------------------- */
.gc2.superia2 .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.superia2 .gc2-vs__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gc2.superia2 .gc2-vs__list li {
	position: relative; padding: 0 0 0 1.9em; margin: 0 0 7px; line-height: 1.75;
}
/* マーカーは「・」ではなくチェックのバッジ。1項目ずつ拾い読みできるようにする。 */
.gc2.superia2 .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.superia2 .gc2-vs__list li:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
 * 選び方STEP3（カラー）だけカードが3枚。共通の .gc2-vs は2列固定なので、
 * 3枚のときだけ3列にする。SPは共通側が1列に落とすのでそのまま。
 * -------------------------------------------------------------------------- */
.gc2.superia2 .gc2-vs--3 { grid-template-columns: repeat(3, 1fr); }
.gc2.superia2 .gc2-vs--3 .gc2-vs__t { font-size: 13.5px; }
.gc2.superia2 .gc2-vs--3 .gc2-vs__list { font-size: 12.5px; }

/* -----------------------------------------------------------------------------
 * .gc2-pick … 比較表の直後に置く「どれを選ぶべきか」の3枚カード
 *   共通CSS（series.css）には入っていないブロックで、各シリーズのCSSが持っている。
 *   ここに書き忘れると素のテキストで表示される（2026-09-06 にセイフルプラスで発生）。
 *   ※次にシリーズを追加するときに series.css へ移し、各シリーズCSSから外す。
 * -------------------------------------------------------------------------- */
.gc2.superia2 .gc2-pick {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 10px 0;
}
.gc2.superia2 .gc2-pick__i {
	border: 1px solid var(--gc2-line); border-top: 3px solid var(--gc2-accent);
	border-radius: var(--gc2-radius); background: #fff; padding: 11px 12px 12px;
}
.gc2.superia2 .gc2-pick__t {
	margin: 0 0 6px; font-size: 14px; font-weight: bold; line-height: 1.45;
	color: var(--gc2-accent);
}
.gc2.superia2 .gc2-pick__i p { margin: 0; font-size: 13px; line-height: 1.7; }

/* -----------------------------------------------------------------------------
 * 「主な特徴」と「お手入れ」で同じ .gc2-care を使う。
 * 図版の元素材が 3:2 と 1.5:1 で混ざっているため、共通の height 固定＋cover で
 * はみ出さないように念のため overflow を切る。
 * -------------------------------------------------------------------------- */
.gc2.superia2 .gc2-care__fig { overflow: hidden; }

/* 商品一覧のタグ。スペリアは「非対応」を明示する行があるので、
   否定のタグ（.is-no）を打ち消し色にせず、落ち着いたグレーで出す。 */
.gc2.superia2 .gc2-tags .is-no {
	color: #6b6b6b; border-color: #cfcfcf; background: #f7f7f7;
}

@media screen and (max-width: 767px) {
	.gc2.superia2 .gc2-vs--3 { grid-template-columns: 1fr; }
	.gc2.superia2 .gc2-vs--3 .gc2-vs__t { font-size: 14px; }
	.gc2.superia2 .gc2-vs--3 .gc2-vs__list { font-size: 12.5px; }
	.gc2.superia2 .gc2-pick { grid-template-columns: 1fr; gap: 8px; margin: 12px 8px 0; }
	.gc2.superia2 .gc2-pick__t { font-size: 13.5px; }
	.gc2.superia2 .gc2-pick__i p { font-size: 12.5px; }
}

@media screen and (max-width: 480px) {
	.gc2.superia2 .gc2-colors { grid-template-columns: repeat(2, 1fr); }
}

/* 型番の読み方・ココットプレートの有無で使う .gc2-flags。
   スペリアは左ラベルが短い（RS／71／72／W45／T2 など）ので、
   他シリーズの12〜13emより詰めた9emにし、折り返さないようにする。 */
@media screen and (min-width: 768px) {
	.gc2.superia2 .gc2-flags > li { grid-template-columns: 9em 1fr; }
	.gc2.superia2 .gc2-flags b { white-space: nowrap; }
}