@charset "utf-8";
/* =============================================================================
 * ノーリツ ファミ（Fami） シリーズ固有CSS
 * /gasconro/noritz/fami/css/fami.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/css/series.css（.gc2-* のレイアウト一式）
 *   ② ノーリツ共通     … /gasconro/noritz/css/noritz.css
 *   ③ このファイル     … ファミのアクセント色と固有の上書きだけ（最小限）
 *
 *  ファミは普及価格帯で、3口と2口が並ぶのが持ち味。
 *  プログレ（金）・オルシェ（青灰）・ネスト（グレージュ）・ミッケ（ローズブラウン）と
 *  変えて、ムーンシルバーの天板に寄せた落ち着いた青みグレーをアクセントにする。
 *  見出しはサイト共通のまま使う（メーカーごとに体裁を変えない）。
 * ========================================================================== */

.gc2.noritz.fami {
	--gc2-accent: #1f3d52; /* 全シリーズ共通の色（デリシアと同色・2026-09-16 指示） */
}

/* -----------------------------------------------------------------------------
 * 写真つき解説（デザイン／コンロ／グリル）
 *   共通CSSに同じ用途のグリッドが無いのでここで持つ。
 *   オルシェ・ネストと同じ形（.orc-cards / .nst-cards）。
 *   将来ノーリツ共通へ移すときは3ページの link を同時に直すこと。
 * -------------------------------------------------------------------------- */
.fam-cards {
	list-style: none; margin: 0 10px; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px;
}
.fam-cards > li {
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
	background: #fff; overflow: hidden;
}
.fam-cards > li::before { content: none; }
.fam-cards__fig { margin: 0; background: #fff; }
.fam-cards__fig img {
	display: block; width: 100%; height: auto;
	/* 画像の縦横比はまちまち（500x320・544x270・900x240 など）。
	   高さを揃えるために切らず、そのまま入れる。 */
}
.fam-cards__b { padding: 11px 13px 13px; }
.fam-cards__t { display: block; font-size: 16px; font-weight: bold; line-height: 1.35; }
.fam-cards__sub {
	display: inline-block; margin: 4px 0 0; padding: 2px 8px;
	font-size: 11.5px; font-weight: bold; line-height: 1.4;
	color: #fff; background: var(--gc2-accent); border-radius: 3px;
}
.fam-cards__d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.75; }

@media screen and (min-width: 760px) {
	.fam-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* -----------------------------------------------------------------------------
 * 口数と旧品番の目印
 *   ファミは3口と2口が並び、2口には旧品番（在庫限り）も混ざるので、
 *   どれなのかがひと目で分かるようにする。
 *   天板幅バッジの隣に足すと横に入りきらないので、型番の下の説明に置く。
 * -------------------------------------------------------------------------- */
.fam-burner, .fam-old {
	display: inline-block; margin-right: 5px; padding: 1px 7px;
	font-size: 11px; font-weight: bold; line-height: 1.5; letter-spacing: 0;
	color: #fff; background: #8f8f8f; border-radius: 3px; white-space: nowrap;
	vertical-align: 1px;
}
.fam-burner.is-two { background: #1f7a8c; }	/* 2口タイプ */
.fam-old { background: #a8743a; }			/* 旧品番・在庫限り */

/* カラーの一覧に「どのキッチンに合うか」の一行を足す */
.fam-fit { display: block; font-size: 11px; line-height: 1.5; color: var(--gc2-ink-sub); padding: 0 5px 7px; }

@media screen and (max-width: 640px) {
	.fam-cards { margin: 0 8px; }
	.fam-cards__t { font-size: 15px; }
	.fam-cards__d { font-size: 13px; }
	.fam-burner, .fam-old { font-size: 10.5px; padding: 1px 6px; margin-right: 4px; }
	.fam-fit { font-size: 10.5px; }
}

/* -----------------------------------------------------------------------------
 * お手入れの一覧で図版が無い項目
 *   共通CSSの .gc2-care__tag は図版の左上に重ねる作り（position:absolute）なので、
 *   図版が無い項目では見出しに重なってしまう。その項目だけ通常の流れに戻す。
 * -------------------------------------------------------------------------- */
.gc2.noritz.fami .gc2-care li.is-noimg .gc2-care__tag {
	position: static; display: inline-block; margin: 0 0 5px;
	background: var(--gc2-accent);
}

/* -----------------------------------------------------------------------------
 * 横に並ぶ図版の大きさをそろえる
 *   ファミの素材は 500x320・558x270・500x470 と縦横比がまちまちで、
 *   そのまま並べると隣同士で高さが違って見づらい。
 *   同じ縦横比の枠に収め、切り取らずに中央へ入れる（object-fit:contain）。
 * -------------------------------------------------------------------------- */
.gc2.noritz.fami .fam-cards__fig,
.gc2.noritz.fami .gc2-panel__fig {
	aspect-ratio: 25 / 16;			/* 500x320 に合わせる */
	display: flex; align-items: center; justify-content: center;
	background: #fff; overflow: hidden;
}
.gc2.noritz.fami .fam-cards__fig img,
.gc2.noritz.fami .gc2-panel__fig img {
	width: 100%; height: 100%; object-fit: contain;
}

/* 付属品・別売品の図版。素材の縦横比がまちまち（500x320・250x128・210x140）なので、
   同じ枠に収めて大きさをそろえる。 */
.gc2.noritz.fami .gc2-opt__fig {
	width: 140px; aspect-ratio: 3 / 2;
	display: flex; align-items: center; justify-content: center;
	background: #fff; overflow: hidden;
}
.gc2.noritz.fami .gc2-opt__fig img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* お手入れの図版の大きさをそろえる。
   aspect-ratio だけでは画像そのものの縦横比が勝ってしまうため、
   枠の高さを決めて画像を敷き詰める（position:absolute）。 */
.gc2.noritz.fami .gc2-care__fig { height: 150px; }
.gc2.noritz.fami .gc2-care__fig img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; object-fit: cover;
}
@media screen and (max-width: 640px) {
	.gc2.noritz.fami .gc2-opt__fig { width: 100px; }
	.gc2.noritz.fami .gc2-care__fig { height: 130px; }
}

/* サイドカバーの写真は公式に200x163しかない。
   cover で枠を埋めると引き伸ばして粗くなるので、この1枚だけは
   contain（枠に収める＝縮小表示）にして鮮明さを保つ。
   ※より大きい素材が手に入ったら、この指定は外してよい。 */
.gc2.noritz.fami .gc2-care__fig img[src*="pic_sidecover"] {
	object-fit: contain; background: #fff;
}