@charset "Shift_JIS";

/* ======================================================================

	■ カテゴリページ 共通CSS 2025年リニューアル版

	※すべてのカテゴリページで共通で使用しているため、原則編集禁止とします。
	個別で設定したい場合は、別途CSSを作成してください。

====================================================================== */



/* 基本設定
====================================================================== */

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightbeige: #cbc1ae;

	--main-clr-white: #f4f5f0;
	--main-clr-gray: #7f7c7a;
	--main-clr-red: #d07157;

	--clr-ss-black: #48413b;
}

.sale_basic { 
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
.sale_basic * {
	box-sizing: border-box;
}
.sale_basic img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.sale_basic .pc_none {
	display: none!important;
}

.sale_basic h2 {
	position: relative;
	margin: 0;
	padding: 0;
}
.sale_basic ul[class^="col_"] {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.sale_basic ul[class^="col_"] > li {
	position: relative;
}
.sale_basic ul[class^="col_"] > li > a {
	position: relative;
	display: block;
}
.sale_basic ul[class^="col_"] > li:hover > a img {
	opacity: 0.7;
}

.sale_basic ul.col_1 > li { width: 100%; }
.sale_basic ul.col_2 > li { width: calc(100% / 2); }
.sale_basic ul.col_3 > li { width: calc(100% / 3); }