@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;
}

.category_cmn { 
	position: relative;
	width: 100%;
	max-width: 1000px;
}
.category_cmn * {
	box-sizing: border-box;
}
.category_cmn img {
	width: 100%;
	height: auto;
}
.category_cmn .pc_none {
	display: none!important;
}



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

.category_cmn #kanban {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
}
.category_cmn #kanban h2 {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
.category_cmn #kanban p {
	color: #666;
	font-size: 14px;
	line-height: 1.75;
}



/* 汎用
====================================================================== */

.category_cmn .block {
	position: relative;
	width: 100%;
	margin-bottom: 40px;
}

.category_cmn .block > h2,
.category_cmn .block > h3 {
	position: relative;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 1em;
}

.category_cmn .block > h2 > a,
.category_cmn .block > h3 > a {
	position: relative;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 1em;
	text-decoration: underline;
}

/* リスト共通設定 */
ul[class^="list_cmn"] {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
}
ul[class^="list_cmn"] > li {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
ul[class^="list_cmn"] > li > a {
	display: block;
}
ul[class^="list_cmn"] > li > a h4,
ul[class^="list_cmn"] > li > a h5 {
	font-size: 14px;
	/* margin-top: 0.5em; */
}
ul[class^="list_cmn"] > li > a img {
	margin-bottom: 12px;
}
ul[class^="list_cmn"] > li:hover > a img {
	opacity: 0.8;
}

/* 3カラム */
.list_cmn.pc_clm3 > li { width: calc((100% - 20px*2)/3);}

/* 4カラム */
.list_cmn.pc_clm4 > li { width: calc((100% - 20px*3)/4);}

ul[class^="list_cmn"] > li.w100 { width: 100%!important; }


/* テキストリンク */
.link_txt {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 20px 0;
	margin-bottom: 40px;
}
.link_txt > li {
	position: relative;
	width: auto;
}
.link_txt > li:nth-child(n+2)::before {
	position: relative;
	display: inline-block;
	content: "｜";
	margin: 0 0.5em;
}
.link_txt > li > a {
	font-size: 14px;
	text-decoration: underline;
}



/* 一商品目だけ大きく表示
====================================================================== */

.category_cmn .list_grid {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 52% 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	gap: 20px;
}
.category_cmn .list_grid > li {
	position: relative;
}
.category_cmn .list_grid > li > a {
	display: block;
}
.category_cmn .list_grid > li > a h4 {
	font-size: 14px;
	margin-top: 0.5em;
	text-align: center;
}
.category_cmn .list_grid > li:hover > a img {
	opacity: 0.8;
}

.category_cmn .list_grid > li:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
.category_cmn .list_grid > li:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.category_cmn .list_grid > li:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
.category_cmn .list_grid > li:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; }
.category_cmn .list_grid > li:nth-child(5) { grid-column: 3 / 4; grid-row: 2 / 3; }



/* セット品スライダー　PCは固定表示
====================================================================== */

/* reset */
.swiper-wrapper {
    -webkit-align-items: stretch!important;
    align-items: stretch!important;
}


.category_cmn .slide_package {
	position: relative;
	width: 100%;
}

.category_cmn .slide_package .swiper-wrapper {
	position: relative;
	width: 100%;
	/* display: flex;
	flex-wrap: wrap; */
	display: grid;
	place-content: flex-start;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.category_cmn .slide_package .swiper-slide {
	/* display: flex;
	width: calc((100% - 20px*2)/3); */
	display: contents;
}
.category_cmn .slide_package .swiper-slide a {
	/* display: flex;
	flex-direction: column; */
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 16px 0;
	color: #fff;
	text-align: left;
	/* background-color: #efefef; */
	/* min-height: 400px; カテゴリごとに個別設定 */
}

.category_cmn .slide_package .swiper-slide .thumb {
	width: 100%;
}
.category_cmn .slide_package .swiper-slide h4 {
	font-size: 25px;
	font-weight: 700;
	padding: 0 20px;
	text-decoration: underline;
	color: #48413b;
}
.category_cmn .slide_package .swiper-slide p {
	font-size: 18px;
	line-height: 1.75;
	padding: 0 20px;
	color: #48413b;
}
.category_cmn .slide_package .swiper-slide ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px 0;
	padding: 0 20px 20px;
	color: #48413b;
}
.category_cmn .slide_package .swiper-slide ul li {
	position: relative;
	font-size: 15px;
	line-height: 1;
	margin: 0 2% 0 0;
}
.category_cmn .slide_package .swiper-slide ul li::before {
	position: relative;

}
.category_cmn .slide_package .swiper-slide ul li:last-child:after { display: none; }

.category_cmn .swiper-pagination,
.category_cmn .swiper-button-prev,
.category_cmn .swiper-button-next {
	display: none!important;
}




/* ボタン類
====================================================================== */

/* ボタン小 */
.category_cmn .btn_s {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 16px;
	margin-top: 20px;
}
.category_cmn .btn_s a {
	position: relative;
	width: 80%;
	display: block;
	font-size: 14px;
	text-align: center;
	line-height: 1;
	/* background-color: var(--main-clr-white); */
	border: solid 1px var(--main-clr-gray);
	padding: 0.75em 0;
}
.category_cmn .btn_s a::after {
	position: absolute;
	top: 50%;
	right: 6%;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px var(--clr-ss-black);
	border-right: solid 2px var(--clr-ss-black);
	transform: rotate(45deg) translateY(-50%);
}

.category_cmn .btn_s a:active {
	color: #fff;
	background-color: var(--clr-ss-black);
}
.category_cmn .btn_s a:active::after {
	border-color: #fff;
}

/* ボタン大 */
.category_cmn .btn_l {
	position: relative;
	width: 100%;
}
.category_cmn .btn_l a {
	position: relative;
	width: 100%;
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	border: solid 1px var(--clr-ss-black);
	padding: 1em 0;
	text-align: center;
}
.category_cmn .btn_l a::after {
	position: absolute;
	top: 50%;
	right: 6%;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px var(--clr-ss-black);
	border-right: solid 2px var(--clr-ss-black);
	transform: rotate(45deg) translateY(-50%);
}

.category_cmn .btn_l a:hover {
	color: #fff;
	background-color: var(--clr-ss-black);
}
.category_cmn .btn_l a:hover::after {
	border-color: #fff;
}




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

.list_ranking {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 64px;
}
.list_ranking > li {
	position: relative;
	width: calc((100% - 24px*4)/5);
}

/* 商品画像 */
.list_ranking > li > dl > a > dd > img {
	border-radius: 8px;
}

/* ランキングアイコン */
.list_ranking > li > dl > a > dd:nth-child(1) { position: relative; }
.list_ranking > li > dl > a > dd:nth-child(1)::before,
.list_ranking > li > dl > a > dd:nth-child(1)::after {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	content: "";
	width: 32px;
	height: 32px;
}
.list_ranking > li > dl > a > dd:nth-child(1)::before {
	left: 0;
	bottom: 0;
	background: rgb(0,0,0);
	background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}
.list_ranking > li > dl > a > dd:nth-child(1)::after {
	left: 4px;
	bottom: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}
.list_ranking > li:nth-child(1) > dl > a > dd:nth-child(1)::after { content: "1"; }
.list_ranking > li:nth-child(2) > dl > a > dd:nth-child(1)::after { content: "2"; }
.list_ranking > li:nth-child(3) > dl > a > dd:nth-child(1)::after { content: "3"; }
.list_ranking > li:nth-child(4) > dl > a > dd:nth-child(1)::after { content: "4"; }
.list_ranking > li:nth-child(5) > dl > a > dd:nth-child(1)::after { content: "5"; }

/* 価格 */

/* 販売価格 */
.list_ranking > li > dl > a > dd.itemcg_price div .price-icons .m_price_grid {
	color: #fff;
	font-size: 0.7em;
	background: #7e7c7f;
	padding: 2px 10px;
	display: none;
}

/* 価格 */
.list_ranking > li > dl > a > dd.itemcg_price div .m_price {
	color: #c66f60;
	font-size: 1.5em;
	font-weight: bold;
}

/* 送料無料 */
.list_ranking > li > dl > a > dd.itemcg_price div .intax {
	position: relative;
	color: #222;
	font-size: 80%;
	margin-left: 0.5em;
}

/* セール価格 */
.list_ranking > li > dl > a > dd.itemcg_price .sale .price-icons .m_price_grid {
	background: #cc0000;
}
.list_ranking > li > dl > a > dd.itemcg_price .sale .m_price,
.list_ranking > li > dl > a > dd.itemcg_price .sale .intax {
	color: #cc0000;
}

/* 下記非表示 */
.list_ranking > li > dl > dt,
.list_ranking > li > dl > dd.itemcg_kikaku,
.list_ranking > li > dl > a > dd.itemcg_name,
.list_ranking > li > dl > a > dd.itemcg_kataban,
.list_ranking > li > dl > a > dd.itemcg_star {
	display: none!important;
}

/* hover */
.list_ranking > li:hover > dl > a {
	opacity: 0.8;
}


/* その他アイコン類
====================================================================== */
.m_pointup {
	font-size: 12px;
	line-height: 1;
	color: #fff;
	background-color: #be8f32;
	padding: 2px 6px;
    font-size: 0.7em;
}



/* 寝具系共通
====================================================================== */

.heading_btn {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* background-color: #ccc; */
	padding: 0.75em 1em;
	margin-bottom: 18px;
}
.heading_btn h4 {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}
.heading_btn h4 span {
	color: #fff;
	font-size: 65%;
	font-weight: 700;
	line-height: 1;
}
.heading_btn button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	border-radius: 0;
	width: 160px;
	height: 100%;
}
.heading_btn button a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	text-indent: -10px;
	background-color: var(--clr-ss-black);
	width: 100%;
	height: 100%;
}
.heading_btn button a::after {
	position: absolute;
	top: 49%;
	right: 20px;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg) translateY(-50%);
}
.heading_btn button:hover a {
	background-color: var(--main-clr-lightbeige);
}

.item_wrap {
	position: relative;
	width: 100%;
	margin-bottom: 64px;
}


/* サムネ入りカード
====================================================================== */

.list_thumb {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
.list_thumb > li {
	position: relative;
	width: calc((100% - 4px*2)/3);
	display: contents;
}
.list_thumb > li > a {
	position: relative;
	width: 100%;
	grid-row: span 5;
	display: grid;
	grid-template-rows: subgrid;
	gap: 8px;
	padding: 16px;
	text-align: center;
}

.list_thumb > li > a .hansoku {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.list_thumb > li > a .pname {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: underline;
}
.list_thumb > li > a .qmax {
	color: #555;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	background-color: #fff;
	padding: 0.25em;
}
.list_thumb > li > a .qmax strong {
	color: #555;
	font-size: 150%;
	font-weight: 700;
	line-height: 1;
}
.list_thumb > li > a .tag {
	width: 100%;
	background-color: rgba(255,255,255,0.5);
	padding: 8px;
	text-align: center;
}
.list_thumb > li > a .tag ul {
	display: inline-block;
	width: auto;
	text-align: left;
	margin: 0 auto;
}
.list_thumb > li > a .tag ul > li {
	position: relative;
	width: auto;
	text-align: left;
	font-size: 13px;
	margin: 0 auto;
}
.list_thumb > li > a .tag ul > li::before {
	content: "＃";
}

/* 寝具背景色 */
.bg_silk { background-color:#bfcbdc; }
.bg_toro { background-color:#dad5ca; }
.bg_tudsuku { background-color:#c6ced2; }
.bg_air { background-color:#e9d1cb; }

/* hover */
.list_thumb > li:hover > a.bg_silk { background-color: #9bacc6; }
.list_thumb > li:hover > a.bg_toro { background-color: #c2bbab;  }
.list_thumb > li:hover > a.bg_tudsuku { background-color: #a5b0b6;  }
.list_thumb > li:hover > a.bg_air { background-color: #dab5ac;  }

.list_thumb > li:hover > a .pname { color: #ffe9e3!important; }
.list_thumb > li > a .tag ul > li,
.list_thumb > li:hover > a .tag ul > li { color: var(--clr-ss-black)!important; }



/* リンクボタン 
====================================================================== */

.category_cmn .link_btn {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
}
.category_cmn .link_btn > li {
	position: relative;
	display: flex;
}
.category_cmn .link_btn > li > a {
	position: relative;
	display: flex;
	width: 100%;
	height: 36px;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	border: solid 1px var(--clr-ss-black);
}
.category_cmn .link_btn > li > a::after {
	position: absolute;
	top: 50%;
	right: 10%;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 1px var(--clr-ss-black);
	border-right: solid 1px var(--clr-ss-black);
	transform: rotate(45deg) translateY(-50%);
}

.category_cmn .link_btn.pc_clm2 > li { width: calc((100% - 20px*1)/2);}
.category_cmn .link_btn.pc_clm3 > li { width: calc((100% - 20px*2)/3);}
.category_cmn .link_btn.pc_clm4 > li { width: calc((100% - 20px*3)/4);}





/*1090*/
#c_1090 .buy_price{text-align: left;}

#c_1090 .buy_price>ol .spesicalprice,
#c_1090 .buy_price>ul .spesicalprice,
#c_1090 .buy_price > ul .price+.intax{display:none;}

#c_1090 .btn a{
	display:block;
	text-align: center;
	margin:5px auto 30px;
	padding:5px;
	border:1px solid #000;
	color: #000;
	border-radius: 5px;
}

#c_1090 .btn a:hover{color:#d07157;}




/*1091*/
#c_1091 .buy_price{text-align: left;}

#c_1091 .buy_price>ol .spesicalprice,
#c_1091 .buy_price>ul .spesicalprice,
#c_1091 .buy_price > ul .price+.intax{display:none;}

#c_1091 .btn a{
	display:block;
	text-align: center;
	margin:5px auto 30px;
	padding:5px;
	border:1px solid #000;
	color: #000;
	border-radius: 5px;
}

#c_1091 .btn a:hover{color:#d07157;}



/*1092*/
#c_1092 .buy_price{text-align: left;}

#c_1092 .buy_price>ol .spesicalprice,
#c_1092 .buy_price>ul .spesicalprice,
#c_1092 .buy_price > ul .price+.intax{display:none;}

#c_1092 .btn a{
	display:block;
	text-align: center;
	margin:5px auto 30px;
	padding:5px;
	border:1px solid #000;
	color: #000;
	border-radius: 5px;
}

#c_1092 .btn a:hover{color:#d07157;}