@charset "utf-8";
/* =============================================================================
 * セイフルプラス（SAFULL+）固有CSS
 *
 *  レイアウト・UIは共通の /gasconro/css/series.css にある。
 *  このファイルはシリーズ固有の上書きと、このページで初めて使う受賞ブロックだけ。
 *  読み込み順は必ず series.css → このファイル。
 *
 *  ★共通CSS（series.css）は一切変更していない。
 *    本番稼働中の5ページ（マイトーン・リッセ・デリシア・グリレ・ユーディアエフ）に
 *    波及させないため、すべて .gc2.safullplus2 配下で閉じる。
 * ========================================================================== */

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

/* 天板の仕上げ見本は1色ぶんだけ。共通CSSは5色を横に並べる前提なので、
   1列・幅上限つきにして文字サイズを戻す（グリレと同じ扱い）。 */
.gc2.safullplus2 .gc2-colors--one { grid-template-columns: minmax(0, 260px); }
.gc2.safullplus2 .gc2-colors--one .gc2-colors__n { font-size: 13px; padding-top: 8px; }
.gc2.safullplus2 .gc2-colors--one .gc2-colors__t { font-size: 11.5px; letter-spacing: normal; padding-bottom: 9px; }
@media screen and (max-width: 767px) {
	.gc2.safullplus2 .gc2-colors--one { grid-template-columns: minmax(0, 220px); }
}

/* -----------------------------------------------------------------------------
 * 現行1品番のラインナップ
 *   共通CSSの .gc2-items は2列なので、1枚だと右半分が空いてしまう。
 *   PCでは商品写真を左・説明を右に置いた1枚の横並びカードにする。
 *   アバンセ（/gasconro/paloma/avance/css/avance.css）と同じ形にそろえている
 *   （2026-09-23 指示）。
 *   子要素の並びは index.html の順（バッジ／写真／型番／仕様／タグ／価格／総額／ボタン）。
 * -------------------------------------------------------------------------- */
.gc2.safullplus2 .gc2-items { grid-template-columns: 1fr; }

@media screen and (min-width: 768px) {
	.gc2.safullplus2 .gc2-item {
		display: grid; grid-template-columns: 330px minmax(0, 1fr);
		column-gap: 20px; align-items: start; padding: 16px;
	}
	.gc2.safullplus2 .gc2-item > .gc2-item__badges { grid-column: 1 / -1; }
	.gc2.safullplus2 .gc2-item > .gc2-item__figure { grid-column: 1; grid-row: 2 / span 6; }
	.gc2.safullplus2 .gc2-item > .gc2-item__sku,
	.gc2.safullplus2 .gc2-item > .gc2-item__spec,
	.gc2.safullplus2 .gc2-item > .gc2-tags,
	.gc2.safullplus2 .gc2-item > .gc2-item__prices,
	.gc2.safullplus2 .gc2-item > .gc2-item__total,
	.gc2.safullplus2 .gc2-item > .gc2-item__acts { grid-column: 2; }
	/* 横並びになるぶん、型番は少し大きく出す */
	.gc2.safullplus2 .gc2-item__sku { font-size: 19px; }
}

/* 操作パネルは1枚だけ。共通CSSの .gc2-panels は2列なので1列にする。
   図版は 860×360（2.4:1）で、枠幅いっぱいに出しても文字が読める。 */
.gc2.safullplus2 .gc2-panels { grid-template-columns: 1fr; }

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

/* -----------------------------------------------------------------------------
 * .gc2-prizes … 受賞・認定の3枚（このページで初めて使う）
 *   共通CSSには入れていない。将来ほかのシリーズでも使うことになったら
 *   series.css へ移して、ここから外す。
 * -------------------------------------------------------------------------- */
.gc2.safullplus2 .gc2-prizes {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
	margin: 0 10px 14px; padding: 0; list-style: none;
}
.gc2.safullplus2 .gc2-prizes > li {
	border: 1px solid var(--gc2-line); border-top: 3px solid var(--gc2-accent);
	border-radius: var(--gc2-radius); background: #fff; padding: 0 12px 12px;
}
.gc2.safullplus2 .gc2-prizes figure { margin: 0 -12px 9px; }
.gc2.safullplus2 .gc2-prizes img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
	background: #fff; border-bottom: 1px solid var(--gc2-line);
	border-radius: var(--gc2-radius) var(--gc2-radius) 0 0;
}
.gc2.safullplus2 .gc2-prizes b {
	display: block; font-size: 13.5px; line-height: 1.5; color: var(--gc2-accent); margin-bottom: 5px;
}
.gc2.safullplus2 .gc2-prizes span { display: block; font-size: 12.5px; line-height: 1.7; }

@media screen and (max-width: 767px) {
	.gc2.safullplus2 .gc2-prizes { grid-template-columns: 1fr; gap: 8px; margin: 0 8px 12px; }
	.gc2.safullplus2 .gc2-prizes b { font-size: 13px; }
	.gc2.safullplus2 .gc2-prizes span { font-size: 12px; }
}

/* -----------------------------------------------------------------------------
 * 商品一覧の枠のタグ：このシリーズは「無い機能」を出さないので is-no は使わない。
 * お手入れ枠（.gc2-care）の中に横長の操作パネル図（860×360）を1枚使うため、
 * 枠内でだけ横スクロールできるようにしておく（はみ出さない）。
 * -------------------------------------------------------------------------- */
.gc2.safullplus2 .gc2-care__fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }