@charset "Shift_JIS";

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

	■ 【2026年改修】カテゴリページ 共通CSS

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

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


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

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightgray-rgb: 201,201,200;

	--main-clr-lightbeige: #cbc1ae;
	--main-clr-lightbeige-rgb: 202,194,175;

	--main-clr-white: #f4f5f0;
	--main-clr-white-rgb: 244,245,240;

	--main-clr-gray: #7f7c7a;
	--main-clr-gray-rgb: 127,124,122;

	--main-clr-red: #d07157;
	--main-clr-red-rgb: 208,113,87;

	--clr-ss-black: #48413b;
	--clr-ss-black-rgb: 72,65,59;
}

.c_common2026 {
	position: relative;
	width: 100%;
}
.c_common2026 *,
.c_common2026 *::before,
.c_common2026 *::after {
	line-height: 1;
	box-sizing: border-box;
}
.c_common2026 img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.c_common2026 .pc_none { display: none!important; }


/* 価格プロ */
.c_common2026 .buy_price,
.c_common2026 .buy_price ul { margin: 0 auto; }

.c_common2026 .buy_price .spesicalprice,
.c_common2026 .buy_price .intax,
.c_common2026 .itemcg_price .m_price_grid,
.c_common2026 .itemcg_price .intax,
.c_common2026 .itemcg_price .price_comment { display: none; }



/* セクション共通
====================================================================== */

/* セクション */
.c_common2026 [class^="block_c-"] {
	position: relative;
	width: 100%;
	margin: 0 auto 80px;
}

/* 見出し */
.c_common2026 [class^="h_cmn-"] {
	position: relative;
	width: 100%;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.5em;
}

.c_common2026 .h_cmn-1 {
	font-size: 24px;
	background-color: rgba(var(--main-clr-lightgray-rgb),0.5);
	padding: 0.25em 0.5em;
}
.c_common2026 .h_cmn-2 {
	font-size: 20px;
	border-bottom: solid 1px var(--main-clr-gray);
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}

/* 更新日 */
.c_common2026 .update {
	position: absolute;
	top: 50%;
	right: 16px;
	font-size: 12px;
	line-height: 1;
	transform: translateY(-50%);
}


/* 見出し下テキスト関連 */
.c_common2026 .section-lead {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	margin-bottom: 1em;
}
.c_common2026 .h_cmn-2 + p {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 1em;
}


/* 看板
====================================================================== */

.c_common2026 .block_c-cmn#kanban {
	margin: 0 auto 24px;
	padding: 0;
}



/* 総論
====================================================================== */

/**/




/* 汎用カラムレイアウト
====================================================================== */

.c_common2026 [class^="list_col-"] {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px 16px;
	margin: 0 auto 32px;
}
.c_common2026 [class^="list_col-"] > li {
	position: relative;
	display: flex;
}
.c_common2026 [class^="list_col-"] > li > a {
	position: relative;
	width: 100%;
}

.c_common2026 .list_col-pc1 > li { width: 100%; }
.c_common2026 .list_col-pc2 > li { width: calc((100% - 16px*1)/2); }
.c_common2026 .list_col-pc3 > li { width: calc((100% - 16px*2)/3); }
.c_common2026 .list_col-pc4 > li { width: calc((100% - 16px*3)/4); }


/* 汎用ボタン
====================================================================== */

/* シンプルなテキストボタン */
.c_common2026 .list_btn-txt > li > a {
	min-height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: solid 1px var(--main-clr-gray);
	border-radius: 4px;
}
.c_common2026 .list_btn-txt > li > a::after {
	position: absolute;
	top: 48%;
	right: 16px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #666;
	border-right: solid 2px #666;
	transform: rotate(45deg) translateY(-50%);
}
.c_common2026 .list_btn-txt > li:hover > a {
	color: #fff;
	border-color: var(--main-clr-lightbeige);
	background-color: var(--main-clr-lightbeige);
}
.c_common2026 .list_btn-txt > li:hover > a::after {
	border-color: #fff;
}

/* シンプルなテキストボタン */
.c_common2026 .list_btn-icon > li > a {
	min-height: 48px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	border: solid 1px var(--main-clr-gray);
	border-radius: 4px;
	padding: 8px;
	gap: 8px;
}
.c_common2026 .list_btn-icon > li > a > span.icon_c {
	width: 48px;
	height: 48px;
}
.c_common2026 .list_btn-icon > li > a::after {
	position: absolute;
	top: 48%;
	right: 16px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #666;
	border-right: solid 2px #666;
	transform: rotate(45deg) translateY(-50%);
}
.c_common2026 .list_btn-icon > li:hover > a {
	color: #fff;
	border-color: var(--main-clr-lightbeige);
	background-color: var(--main-clr-lightbeige);
}
.c_common2026 .list_btn-icon > li:hover > a::after {
	border-color: #fff;
}


/* キャッチ画像＋キャッチコピー＋カテゴリ名 */
.c_common2026 .list_btn-catch > li > a {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.c_common2026 .list_btn-catch .catch_cate {
	color: var(--main-clr-red);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 0.5em
}
.c_common2026 .list_btn-catch .name_cate {
	position: relative;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 0.25em
}
.c_common2026 .list_btn-catch .name_cate::after {
	position: relative;
	/* top: 48%;
	right: 16px; */
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #666;
	border-right: solid 2px #666;
	transform: rotate(45deg) translateY(-50%);
	margin-left: 4px;
}

.c_common2026 .list_btn-catch > li:hover > a {
	background-color: rgba(var(--main-clr-lightbeige-rgb),0.25);
}
.c_common2026 .list_btn-catch li:hover .name_cate {
	color: var(--clr-ss-black);
}



/* 何か商品を紹介したときに使用
====================================================================== */

.c_common2026 .list_item > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background-color: var(--main-clr-white);
	padding: 16px;
	overflow: hidden;
}
.c_common2026 .list_item > li > a > div {
	position: relative;
	width: calc((100% - 16px*1)/2);
}
/* .c_common2026 .list_item > li > a > div.thumb {} */
.c_common2026 .list_item > li > a > div.spec {
	position: relative;
}
.c_common2026 .list_item .cacth_item {
	color: var(--main-clr-red);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.25em;
}
.c_common2026 .list_item .name_item {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
.c_common2026 .list_item .buy_price .price { font-size: 24px; }
.c_common2026 .list_item .btn_item {
	position: relative;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	background-color: var(--main-clr-red);
	margin: 16px auto 0;
	padding: 0.75em 0;
	border-radius: 100px;
}
.c_common2026 .list_item .btn_item::after {
	position: absolute;
	top: 48%;
	right: 16px;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg) translateY(-50%);
}

.c_common2026 .list_item > li:hover > a {
	background-color: rgba(var(--main-clr-lightbeige-rgb),0.5);
}
.c_common2026 .list_item > li:hover .name_item { color: var(--clr-ss-black); }
.c_common2026 .list_item > li:hover .btn_item {
	color: var(--main-clr-red);
	background-color: #fff;
}
.c_common2026 .list_item > li:hover .btn_item::after {
	border-color: solid 2px var(--main-clr-red);
}

/* アイコン */
.c_common2026 .list_item [class^="icon_"] {
	position: absolute;
	top: -65px;
	left: -65px;
	z-index: 5;
	width: 120px;
	height: 120px;
	transform: rotate(-45deg);
}
.c_common2026 .list_item [class^="icon_"] span {
	position: absolute;
	bottom: 8px;
	left: 50%;
	z-index: 1;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-indent: -0.1em;
	transform: translateX(-50%);
}

.c_common2026 .list_item .icon_new { background-color: var(--main-clr-red); }
.c_common2026 .list_item .icon_new span { font-size: 14px; }
.c_common2026 .list_item .icon_pickup { background-color: var(--main-clr-lightbeige); }


/* ※swiper 共通の処理
====================================================================== */

.c_common2026 [class^="slider_"] {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
.c_common2026 .swiper {
	width: 100%;
	max-width: 1000px;
	overflow: hidden;
}



/* ランキング
====================================================================== */

/* .c_common2026 .slider_ranking {
} */
/* .c_common2026 .swiper {}*/
.c_common2026 .slider_ranking .swiper-wrapper {
	display: flex;
	/* gap: 16px; */
} 
.c_common2026 .slider_ranking .swiper-slide {
	/* width: calc((100% - 16px*4)/5); */
	width: 240px;
	text-align: left;
}

.c_common2026 .slider_ranking .swiper-button-next,
.c_common2026 .slider_ranking .swiper-rtl .swiper-button-prev,
.c_common2026 .slider_ranking .swiper-button-prev,
.c_common2026 .slider_ranking .swiper-rtl .swiper-button-next { display: none; }

/* 順位 */
.c_common2026 .slider_ranking .swiper-slide > dl {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.c_common2026 .slider_ranking .swiper-slide > dl,
.c_common2026 .slider_ranking .swiper-slide > dl > dt {
	position: relative;
	width: 100%;
	display: inline-block;
}
.c_common2026 .slider_ranking .swiper-slide > dl > dt > span {
	position: absolute;
	display: block;
	top: 3px;
	left: 0;
	z-index: 5;
	width: 32px;
	height: 32px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--clr-ss-black);
}
.c_common2026 .slider_ranking .swiper-slide > dl > dt > span::after {
	position: absolute;
	top: 0;
	left: 12%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 32px;
	height: 32px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	/* transform: translate(-50%,-50%); */
}
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(1) > dl > dt > span::after { content: "1"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(2) > dl > dt > span::after { content: "2"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(3) > dl > dt > span::after { content: "3"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(4) > dl > dt > span::after { content: "4"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(5) > dl > dt > span::after { content: "5"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(6) > dl > dt > span::after { content: "6"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(7) > dl > dt > span::after { content: "7"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(8) > dl > dt > span::after { content: "8"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(9) > dl > dt > span::after { content: "9"; }
.c_common2026 .slider_ranking .swiper-slide:nth-of-type(10) > dl > dt > span::after { content: "10"; }

/* カラバリアイコン */
.c_common2026 .slider_ranking .swiper-slide .itemcg_kikaku {
	position: relative;
	width: 100%;
	min-height: 28px;
	margin: 8px auto;
	display: flex;
	justify-content: flex-start;
	gap: 4px;
}
.c_common2026 .slider_ranking .swiper-slide .itemcg_kikaku > a {
	display: block;
	width: 24px;
	height: 24px;
}
.c_common2026 .slider_ranking .swiper-slide .itemcg_kikaku > a > img {
	width: 100%;
	height: auto;
	border-radius: 50%;
}
/* 応急処置・カラバリの色玉画像がエラーだった場合、枠ごと非表示にする */
.c_common2026 .slider_ranking .swiper-slide .itemcg_kikaku > a:has(img[style*="display: none"])
/* ,.c_common2026 .slider_ranking .swiper-slide .itemcg_kikaku > a:has(img[hidden])*/ { 
	display: none;
}
.c_common2026 .itemcg_name p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-weight: normal;
    letter-spacing: normal;
    word-break: break-all;
    text-align: left;
	margin-bottom: 0.25em;
}
.c_common2026 .itemcg_kataban p { display: none;}
.c_common2026 .itemcg_price .m_price {
	color: var(--main-clr-red);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
/* .c_common2026 .itemcg_star p {
} */

/*お気に入りボタン */
.c_common2026 .slider_ranking .swiper-slide .wish {
	position: absolute;
	top: 0;
	right: 0;
}


/*
.itemcg_name {}*/


/*
.itemcg_kataban {}*/


/*
.itemcg_star {}*/


/**/





/* 〇〇選びでよくある質問
====================================================================== */

/* .c_common2026 .slider_faq {
	
} */
/* .c_common2026 .swiper {}*/
.c_common2026 .slider_faq .swiper-wrapper {
	display: flex;
	/* gap: 24px; */
} 
.c_common2026 .slider_faq .swiper-slide {
	width: 400px;
	/* width: calc((100% - 16px*4)/5); */
	text-align: left;
}

.c_common2026 .slider_faq .swiper-button-next,
.c_common2026 .slider_faq .swiper-rtl .swiper-button-prev,
.c_common2026 .slider_faq .swiper-button-prev,
.c_common2026 .slider_faq .swiper-rtl .swiper-button-next { display: none; }


.block_faq {
	position: relative;
	background-color: var(--main-clr-white);
	padding: 20px;
}
.block_faq dt {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	border-bottom: solid 1px var(--clr-ss-black);
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
}
.block_faq dd {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}