/* =========================================================
   HGMT — レイアウト保険 CSS
   styles.css の指定が何らかの理由で効かない場合でも、
   主要セクションが必ず正しく表示されるよう、最小限の保険スタイル。
   ========================================================= */

/* ── 製品グリッド ── */
/* 4 カードを罫線で連結 (グリッド全体に上・左の枠線を引き、各カードが右・下の枠線を持つ) */
.products-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	margin-top: clamp(40px, 6vw, 80px) !important;
	border-top: 1px solid var(--line-strong, #b8b1a0) !important;
	border-left: 1px solid var(--line-strong, #b8b1a0) !important;
}

@media (max-width: 980px) {
	.products-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.products-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── 製品カード ── */
.product {
	display: block !important;
	position: relative !important;
	padding: clamp(24px, 2.2vw, 36px) !important;
	background: var(--paper, #f5f1e8) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: 1px solid var(--line-strong, #b8b1a0) !important;
	border-bottom: 1px solid var(--line-strong, #b8b1a0) !important;
	min-height: 240px !important;
	overflow: hidden !important;
	transition: 0.3s ease !important;
}

.product .product-no {
	display: block !important;
	font-family: var(--font-en, "Cormorant Garamond", serif) !important;
	font-size: 12px !important;
	letter-spacing: 0.3em !important;
	color: var(--accent, #a8341f) !important;
	margin-bottom: 16px !important;
}

.product .product-name {
	display: block !important;
	font-family: var(--font-jp, "Noto Serif JP", serif) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.06em !important;
	color: var(--ink, #0f1115) !important;
	margin: 0 0 8px !important;
}

.product .product-sub {
	display: block !important;
	font-family: var(--font-en, "Cormorant Garamond", serif) !important;
	font-size: 12px !important;
	letter-spacing: 0.15em !important;
	color: var(--sub, #6a6e78) !important;
	margin-bottom: 16px !important;
}

.product .product-desc {
	display: block !important;
	font-family: var(--font-jp-sans, "Noto Sans JP", sans-serif) !important;
	font-size: 12.5px !important;
	line-height: 1.85 !important;
	letter-spacing: 0.04em !important;
	color: var(--ink-soft, #2a2d35) !important;
	margin: 0 !important;
}

/* ── 製品カード: ホバー時に文字を和紙色 (白系) に反転 ── */
.product:hover .product-no,
.product:hover .product-name,
.product:hover .product-sub,
.product:hover .product-desc {
	color: var(--paper, #f5f1e8) !important;
}

/* ── 駅情報 ── */
#stations {
	margin-top: 32px !important;
}

#stations .station {
	display: block !important;
	padding: 16px 0 !important;
	border-bottom: 1px solid var(--line, #d8d3c6) !important;
}

#stations .station:last-child {
	border-bottom: none !important;
}

#stations .station-line {
	display: block !important;
	font-family: var(--font-jp-sans, "Noto Sans JP", sans-serif) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	color: var(--accent, #a8341f) !important;
	margin-bottom: 4px !important;
}

#stations .station-name {
	display: block !important;
	font-family: var(--font-jp, "Noto Serif JP", serif) !important;
	font-size: 16px !important;
	letter-spacing: 0.05em !important;
	color: var(--ink, #0f1115) !important;
}

/* ── 問い合わせフォーム: ラベル中央寄り問題の保険 ── */
/* style.css の `.field { display: grid; grid-template-columns: 140px 1fr; }` を打ち消し */
#contact .field {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	align-items: stretch !important;
	text-align: left !important;
}

#contact .field label,
#contact .field > label {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	text-align: left !important;
	width: auto !important;
}

#contact .field label > span {
	text-align: left !important;
}