@charset "utf-8";
/* ------------------------------------------------------------
   選択肢別の価格・写真（SKU統合）／トップページのカテゴリーバナー
   2026-09-11 株式会社ポケット
   ※ sass には取り込まず、この別ファイルを header.php で読み込んでいる。
   ------------------------------------------------------------ */

/* --- カートJS（price=y）が出す販売価格は隠す ---------------------
   価格はカラーミーが持つが、お客様に見せるのはサイト側の表示（.price）。
   同じ金額が2か所に出ないようにする。
   ※ layout.css の .section_collection_02 … table tr が display:block を当てているので、
      同じ深さの書き方で上書きする（!important を増やさない）。 */
.section_collection_02 .collection_r .collection_cart table tr.cartjs_sales_price {
	display: none;
}

/* 選択肢のセレクトをサイトのトーンに寄せる（作り込みすぎない） */
.section_collection_02 .collection_r .collection_cart table tr.cartjs_option th {
	font-family: '游明朝', YuMincho, 'Noto Serif JP', serif;
	white-space: nowrap;
	width: auto !important;
	padding-right: 1em !important;
}
.section_collection_02 .collection_r .collection_cart table tr.cartjs_option select {
	font-family: inherit;
	letter-spacing: 1px;
	border-radius: 0 !important;
	border-color: #d6d6d6 !important;
	height: 40px !important;
	line-height: 40px !important;
	color: #150f13 !important;
}

/* 写真の差し替え中に高さが跳ねないようにする */
#slider {
	min-height: 1px;
}

/* --- トップページ：カテゴリーから探す -------------------------- */
.section_category .category_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 40px 2.5%;
}
.section_category .category_item a {
	display: block;
	line-height: 1.5;
}
.section_category .category_img {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	background-color: #ebecee;
}
.section_category .category_img::before {
	content: '';
	display: block;
	padding-top: 100%;
}
.section_category .category_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .7s;
}
.section_category .category_item a:hover .category_img img {
	transform: scale(1.1);
}
.section_category .category_name {
	font-family: 'GaramondPremrPro', '游明朝', YuMincho, serif;
	font-size: 1.0625em;
	margin-bottom: .3em;
}
.section_category .category_count {
	font-size: .75em;
	color: #8b8b8b;
	font-family: 'Oswald', sans-serif;
	letter-spacing: .08em;
}

@media screen and (max-width: 767px) {
	/* 点数が増えても崩れないように、スマートフォンでは横スクロールにする */
	.section_category .category_list {
		display: flex;
		gap: 0 4%;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		margin: 0 -5vw;
		padding: 0 5vw 10px;
	}
	.section_category .category_item {
		flex: 0 0 42%;
		scroll-snap-align: start;
	}
	.section_category .category_img {
		margin-bottom: 12px;
	}
	.section_category .category_name {
		font-size: 1em;
	}
}