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

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

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

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

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

/* -----------------------------------------------------------------------------
 * 現行が1品番なので、商品一覧の枠が1枚だけ横に伸びないように幅の上限を付ける。
 * 共通の .gc2-items はPC・SPとも2列なので、1枚だと左半分だけになる。
 * 旧モデル（details の中）は6品番あるので2列のまま。
 * -------------------------------------------------------------------------- */
.gc2.sence2 #lineup > div > .gc2-items { grid-template-columns: minmax(0, 356px); }

/* 旧モデルの商品写真は 690×390（1.77:1）で、共通の 3:2 の枠に収めると上下に余白が出る。
   背景を白にして letterbox が目立たないようにする。 */
.gc2.sence2 .gc2-item--old .gc2-item__main { background: #fff; }

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

/* 「主な特徴」と「お手入れ」で同じ .gc2-care を使う。図版の縦横比が混ざるので
   共通の height 固定＋cover ではみ出さないように overflow を切る。 */
.gc2.sence2 .gc2-care__fig { overflow: hidden; }

@media screen and (max-width: 767px) {
	.gc2.sence2 .gc2-colors--one { grid-template-columns: minmax(0, 220px); }
				.gc2.sence2 .gc2-vs__list { font-size: 12.5px; }
	.gc2.sence2 .gc2-vs__list li { padding-left: 1.8em; margin-bottom: 6px; }
	.gc2.sence2 .gc2-vs__list li::before { width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
	/* SPは1列なので幅の上限は外す */
	.gc2.sence2 #lineup > div > .gc2-items { grid-template-columns: 1fr; }
}