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

/* シリーズのアクセント色。
   ユーディアエフは操作性・安全性を優先したユニバーサルデザインのシリーズなので、
   落ち着いた深緑にする。
   （デリシア=#1f3d52 ネイビー／グリレ=#3d4650 グラファイトと取り違えない色） */
.gc2.udeaef2 {
	--gc2-accent:    #2f6b5f;
	--gc2-accent-bg: #eef4f2;
}

/* カラーは2種類（ガラストップ／パールクリスタル）。
   共通CSSの既定はマイトーンの5色に合わせた repeat(5,1fr) なので、
   2枚だと1枚あたりが細長くなる。2列にして1枚を大きく見せる。 */
@media screen and (min-width: 768px) {
	.gc2.udeaef2 .gc2-colors { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 12px; }
	.gc2.udeaef2 .gc2-colors__n { font-size: 13.5px; padding-top: 8px; }
	.gc2.udeaef2 .gc2-colors__t { font-size: 11.5px; letter-spacing: normal; padding-bottom: 9px; }
}
@media screen and (max-width: 767px) {
	.gc2.udeaef2 .gc2-colors { grid-template-columns: repeat(2, 1fr); }
	.gc2.udeaef2 .gc2-colors__n { font-size: 12px; }
	.gc2.udeaef2 .gc2-colors__t { font-size: 10.5px; letter-spacing: normal; }
}

/* 施工実績データの内訳は2つ（天板幅／トッププレート）。
   共通CSSは内訳3つのマイトーンに合わせて3枚目を全幅にしているが、
   2枚のときは影響しない。都道府県枠だけ全幅にする指定を明示しておく。 */
@media screen and (min-width: 768px) {
	.gc2.udeaef2 .gc2-idata__c.is-wide { grid-column: 1 / -1; }
}

/* 型番の読み方一覧（.gc2-flags）：
   ユーディアエフはラベルが「RHS7 / RHS / RS」「S11 / S13 / K12」など長い。
   共通CSSの既定（9em）だと折り返して読みにくいので列幅を広げる。
   スマホは共通CSSで1カラムに切り替わるため上書き不要。 */
@media screen and (min-width: 768px) {
	.gc2.udeaef2 .gc2-flags > li { grid-template-columns: 13em 1fr; }
	.gc2.udeaef2 .gc2-flags b { white-space: nowrap; }
}

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

/* -----------------------------------------------------------------------------
 * 商品一覧の枠のタグ：非搭載の機能を「なし」として出すので、
 *   搭載しているタグと見分けが付くようにする。
 *   共通CSSの .gc2-tags li は搭載前提の見た目なので、is-no だけ打ち消す。
 * -------------------------------------------------------------------------- */
.gc2.udeaef2 .gc2-tags li.is-no {
	background: #f6f6f6; border-color: #dcdcdc; color: #8a8a8a;
}

/* -----------------------------------------------------------------------------
 * 天面コンロ操作パネルの図は 1760×140（12.6:1）の横長。
 *   共通CSSの .gc2-panel__fig img はそのまま幅100%で入るが、
 *   枠幅（PCで約320px）だと縦25pxまで縮んでボタンが読めない。
 *   このパネルだけ枠を1枚で全幅にして、横スクロールできるようにする。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	/* 3枚のうち1枚目（天面パネル）だけ全幅 */
	.gc2.udeaef2 .gc2-panels { grid-template-columns: 1fr 1fr; }
	.gc2.udeaef2 .gc2-panel:first-child { grid-column: 1 / -1; }
}
/* 横長の図は枠内で横スクロールさせ、最低幅を確保して文字を読めるようにする */
.gc2.udeaef2 .gc2-panel:first-child .gc2-panel__fig {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.gc2.udeaef2 .gc2-panel:first-child .gc2-panel__fig img {
	min-width: 880px; width: 100%; height: auto;
}
@media screen and (max-width: 767px) {
	.gc2.udeaef2 .gc2-panel:first-child .gc2-panel__fig img { min-width: 760px; }
}

/* お手入れの一覧にも同じ横長の図を1枚使っているので、同様に扱う */
.gc2.udeaef2 .gc2-care__fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

/* -----------------------------------------------------------------------------
 * 選び方枠（.gc2-vs）の中身
 *   選ぶ理由を箇条書きで出す（デリシア・グリレと同じ形）。
 *   共通CSSには箇条書き用の指定が無いので、ここで同じ見え方に揃える。
 * -------------------------------------------------------------------------- */
.gc2.udeaef2 .gc2-vs__t span {
	display: block; margin-top: 3px;
	font-size: 12px; font-weight: normal; color: var(--gc2-ink-sub); line-height: 1.5;
}
/* 選び方枠の図版は縦横比がばらばら（天板幅の図 360×240＝3:2、
   選び方ガイド図 900×600＝3:2、いずれも3:2だが将来差し替える可能性がある）。
   3:2の枠に収めて左右の枠の高さをそろえる。contain なので切れない。 */
.gc2.udeaef2 .gc2-vs__card > img {
	aspect-ratio: 3 / 2; object-fit: contain; background: #fff;
}
.gc2.udeaef2 .gc2-vs__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gc2.udeaef2 .gc2-vs__list li {
	position: relative; padding: 0 0 0 1.9em; margin: 0 0 7px; line-height: 1.75;
}
/* マーカーは「・」ではなくチェックのバッジ。1項目ずつ拾い読みできるようにする。 */
.gc2.udeaef2 .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.udeaef2 .gc2-vs__list li:last-child { margin-bottom: 0; }

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