@charset "UTF-8";

/* ===============================
	共通スタイル
=============================== */

/* セクション */
.sub-section {
	padding-top: 6rem;
}

/* ページタイトル */
.page-title {
	font-size: 2.4rem;
	font-weight: 700;
	margin-top: 3.2rem;
}

/* 別売品一覧 */
.option__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	--option-row-gap: 4rem;
	gap: var(--option-row-gap) 4%;
	text-align: center;
}

.option__list>li {
	padding-bottom: var(--option-row-gap);
	border-bottom: 1px solid var(--light-gray);
}

.option__category {
	font-size: 1.4rem;
	margin-top: 1em;
}

.option__image {
	aspect-ratio: 1 / 1;
	inline-size: 70%;
	margin-inline: auto;
}

.option__title {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0.2em;
}

.option__text {
	font-size: 1.2rem;
	margin-top: 0.7em;
}

/* 在庫僅少マーク */
/* .option__title:has(.zaiko) {
	display: flex;
	align-items: center;
} */

.zaiko {
	position: relative;
	top: -0.15em;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
	color: var(--caption-color);
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	/* セクション */
	.sub-section {
		padding-top: 10rem;
	}

	/* ページタイトル */
	.page-title {
		font-size: 4rem;
		margin-top: 5rem;
	}

	/* 別売品一覧 */
	.option__list {
		grid-template-columns: repeat(3, 1fr);
		--option-row-gap: 5rem;
	}

	.option__category {
		font-size: 1.6rem;
	}

	.option__title {
		font-size: 2.4rem;
	}

	.option__text {
		font-size: 1.4rem;
	}
}