@charset "utf-8";
/* =============================================================================
 * セイフル（SAFULL）固有CSS
 *
 *  レイアウト・UIは共通の /gasconro/css/series.css にある。
 *  このファイルはシリーズ固有の上書きだけを持つ。
 *  読み込み順は必ず series.css → このファイル。
 *
 *  ★共通CSS（series.css）は一切変更していない。
 *    マイトーン・リッセ・デリシア・グリレ・ユーディアエフ・セイフルプラスが
 *    本番稼働しているため、セイフルの都合はすべて .gc2.safull2 配下で閉じる。
 *
 *  ★セイフルは「セイフルプラス（SAFULL+）」とは別シリーズ。
 *    セイフルプラスのアクセント色（#6b3d73）とは意図的に変えている。
 * ========================================================================== */

/* シリーズのアクセント色。
   セイフルは前面操作・2口・標準幅60cmの、住まいに合わせやすい実用シリーズなので、
   落ち着いた土色にする。
   （デリシア=#1f3d52／リッセ=#2a5f7f／マイトーン=#1b6ea8／グリレ=#3d4650／
     ユーディアエフ=#2f6b5f／セイフルプラス=#6b3d73 と重ならない色） */
.gc2.safull2 {
	--gc2-accent:    #1f3d52;
	--gc2-accent-bg: #eef3f7;
}

/* -----------------------------------------------------------------------------
 * 絞り込み
 *   セイフルで選べるのは「レンジフード連動の有無」と「強火力の左右」の2つだけ。
 *   共通CSSは4行（マイトーン）を想定した余白なので、2行のときに間延びしないよう詰める。
 * -------------------------------------------------------------------------- */
.gc2.safull2 .gc2-filter__row + .gc2-filter__row { margin-top: 8px; }
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-filter__lb { min-width: 9.5em; }
}

/* -----------------------------------------------------------------------------
 * 選び方の枠
 *   STEP1（レンジフード連動あり／なし）は、外観がまったく同じ本体で
 *   中身だけが違う選択なので、比較写真を置いていない（同じ写真を2枚並べると
 *   間違いに見えるため）。画像が無い枠でも見出しが詰まらないようにする。
 * -------------------------------------------------------------------------- */
.gc2.safull2 .gc2-vs__card:not(:has(img)) .gc2-vs__in { padding-top: 16px; }
/* :has() 非対応ブラウザ向けの保険（枠内の余白を最低限確保する） */
.gc2.safull2 .gc2-vs__in { padding-top: 12px; }

/* -----------------------------------------------------------------------------
 * 操作パネル
 *   セイフルの操作パネル図は 860×360 の横長1枚（公式「仕様一覧」の図版）。
 *   共通CSSは横並び3枚（マイトーン）想定なので、枠幅（PCで約320px）に入れると
 *   縦135pxまで縮んでボタンの文字が読めない。1枚を全幅で使う。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-panels { grid-template-columns: 1fr; }
}
.gc2.safull2 .gc2-panel__fig img {
	max-width: 860px; width: 100%; height: auto; margin: 0 auto; display: block;
}
/* スマホは横幅が足りないので、枠内で横スクロールさせて文字を読めるようにする */
@media screen and (max-width: 767px) {
	.gc2.safull2 .gc2-panel__fig {
		overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	.gc2.safull2 .gc2-panel__fig img { min-width: 640px; }
}

/* -----------------------------------------------------------------------------
 * お手入れ
 *   公式に図版がない項目は画像なしで出す。画像ありと並んだときに崩れないよう、
 *   画像なしの行は本文を全幅で使う。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-care > li:not(:has(.gc2-care__fig)) .gc2-care__b { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
 * 後継機
 *   旧型番を件数付きで並べるので1行が長い。型番の途中で折り返してよい。
 * -------------------------------------------------------------------------- */
.gc2.safull2 .gc2-succ__m { white-space: normal; }

/* -----------------------------------------------------------------------------
 * 施工実績データ
 *   セイフルは天板幅・カラー・ごとくが1種類なので、内訳は共通の既定
 *   （交換前メーカー・都道府県）だけになる。都道府県枠は全幅で使う。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-idata__c.is-wide { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
 * 商品一覧の枠のタグ
 *   「レンジフード連動なし」のように、無いことを示すタグも出す。
 *   搭載しているタグと見分けが付くようにする。
 * -------------------------------------------------------------------------- */
.gc2.safull2 .gc2-tags li.is-no {
	background: #f6f6f6; border-color: #dcdcdc; color: #8a8a8a;
}

/* -----------------------------------------------------------------------------
 * 型番の読み方一覧（.gc2-flags）
 *   セイフルはラベルが「RHS / RS」「L / R」など短いので、既定より詰める。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-flags > li { grid-template-columns: 8em 1fr; }
	.gc2.safull2 .gc2-flags b { white-space: nowrap; }
}

/* 操作パネル図はスマホでは画面幅に収まらないので横スクロールさせている。
   スクロールできることが分からないと右端を見落とすため、スマホだけ案内を出す。 */
.gc2.safull2 .gc2-panel__hint { display: none; }
@media screen and (max-width: 767px) {
	.gc2.safull2 .gc2-panel__hint {
		display: block; margin: 6px 0 0; font-size: 11.5px; color: #7a5a3a;
		text-align: right; letter-spacing: 0;
	}
	.gc2.safull2 .gc2-panel__hint::before { content: "← "; }
	.gc2.safull2 .gc2-panel__hint::after  { content: " →"; }
}

/* お手入れは4項目。共通CSSの3列だと最後の1枚が浮くので2列にして写真を大きく見せる */
@media screen and (min-width: 768px) {
	.gc2.safull2 .gc2-care { grid-template-columns: 1fr 1fr; }
}