body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* =========================================================
   Hidden Utility（非表示用）
========================================================= */
.product-card.hidden { /* 非表示用クラス（JSで制御） */
	display: none !important;
}

/* =========================================================
   Products Section（商品一覧セクション全体）
========================================================= */
.products-section { /* 商品一覧セクション */
	text-align: center;
	padding: 0 2.4vw;
}

/* =========================================================
   Tabs（カテゴリ切替タブ）
========================================================= */
.tabs { /* タブ全体 */
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 1.7vw;
}
.tabs .tab { /* 各タブ */
	background: transparent;
	border: none;
	font-size: 1vw;
	font-weight: normal;
	color: #444;
	cursor: pointer;
	padding: 0 0 1.2vh;
	transition: color 0.2s, font-weight 0.2s;
}
.tabs .tab:hover { /* ホバー時 */
	color: #e60000;
}
.tabs .active { /* アクティブ状態 */
	color: #e60000;
	font-weight: 700;
	border-bottom: 2px solid #e60000;
}

/* =========================================================
   Products Container（横スクロールの外枠）
========================================================= */
.products-container { /* 横スクロール外枠 */
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0 3.4vw;
	box-sizing: border-box;
}

/* =========================================================
   Products Scroll（横スクロール領域）
========================================================= */
.products-scroll { /* 横スクロール部分 */
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5vw;
	padding: 4.6vh 10px 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	justify-content: flex-start;
	width: 100%;
	scroll-snap-type: x mandatory;
}
.products-scroll::-webkit-scrollbar { /* スクロールバー本体 */
	height: 1.8vh;
}
.products-scroll::-webkit-scrollbar-track { /* スクロールバー背景 */
	background: #fdfdfd;
	border-radius: 1.4vh;
}
.products-scroll::-webkit-scrollbar-thumb { /* スクロールバーつまみ */
	background-color: #e60000;
	border-radius: 1.4vh;
}
.products-scroll::-webkit-scrollbar-thumb:hover { /* ホバー時 */
	background-color: #b30000;
}
.products-scroll { /* Firefox用スクロールバー */
	scrollbar-width: auto;
	scrollbar-color: #e60000 #fdfdfd;
}
.products-scroll.center { /* 中央寄せ */
	justify-content: center !important;
}

/* =========================================================
   Product Card（商品カード1枚）
========================================================= */
.product-card { /* 商品カード */
	flex: 0 0 auto;
	width: 220px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fff;
	padding: 12px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	scroll-snap-align: center;
}
.product-img { /* 商品画像 */
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 8px;
}
.product-info { /* 商品情報全体 */
	margin-top: 1.1vh;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.product-name { /* 商品名 */
	font-size: 1.1rem;
	font-weight: bold;
}
.product-category { /* カテゴリ名 */
	font-size: 0.7rem;
	color: #888;
}
.product-desc { /* 商品説明 */
	font-size: 0.9rem;
	margin: 8px 0;
	flex-grow: 1;
}
.product-price { /* 価格 */
	font-size: 1.1rem;
	font-weight: bold;
	color: #e60000;
	margin-top: auto;
}
.product-price .tax-note { /* （税込） */
	font-size: 0.65em;
	font-weight: normal;
	margin: 0 0.4em;
	color: #e60000;
}
.product-price .tax-note:last-of-type { /* ゴースト化 */
	color: transparent;
	visibility: hidden;
}

/* =========================================================
   Scroll Buttons（左右のスクロールボタン）
========================================================= */
.scroll-btn { /* 共通ボタン */
	position: absolute;
	top: 54%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	font-size: 1.4rem;
	background: #ffccd3;
	border: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.3s, transform 0.2s;
}
.scroll-btn:hover { /* ホバー時 */
	background: #ff99aa;
	transform: translateY(-50%) scale(1.1);
}
.scroll-btn.left { /* 左矢印 */
	left: 10px;
}
.scroll-btn.right { /* 右矢印 */
	right: 10px;
}

/* =========================================================
   Responsive（～900px）
========================================================= */
@media (max-width:900px){
	.products-section { /* モバイル：セクション余白 */
		padding: 0 6vw;
	}
	.tabs { /* モバイル：タブ */
		gap: 4vw;
	}
	.tabs .tab { /* モバイル：タブ文字 */
		font-size: 3.4vw;
		padding: 0 0 0.8vh;
	}
	.products-container { /* モバイル：スクロール外枠 */
		padding: 0 7vw;
	}
	.products-scroll { /* モバイル：スクロール部分 */
		gap: 2vw;
		padding: 3.2vh 0 0;
		justify-content: flex-start;
	}
	.product-info { /* モバイル：商品情報 */
		margin-top: 1.1vh;
	}
	.product-card { /* モバイル：商品カード */
		width: 80%;
		margin: 0 auto;
		scroll-snap-align: start;
	}
	.product-name { font-size: 14px; }
	.product-category { font-size: 11px; }
	.product-desc { font-size: 14px; margin: 8px 0; }
	.product-price { font-size: 14px; }
	.scroll-btn { /* モバイル：矢印ボタン */
		top: 52%;
		width: 44px;
		height: 44px;
		font-size: 22px;
	}
	.scroll-btn.left { left: 2px; }
	.scroll-btn.right { right: 2px; }
}