@charset "UTF-8";
/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2012/10/05
 */

/* a-Modern
------------------------------------------------------------------*/
body{
	background-color: #fff;
}
body #gWrapper.bgNone{
	background-color: #fff;
}
.pBlock{
	/*background-color: #fff;*/
}

#nBlocks{}


/* .detailArea */
#detailArea h1{
	line-height: 1.3;
}
#detailArea h1 span.enName{
	display: block;	
	font-size: 70%;
}

.mainItem{
	
}
/* clearfix */
.mainItem:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .mainItem {zoom: 1;}
*:first-child+html .mainItem {zoom: 1;}

.mainItem .pic{
	float: left;
	display: inline;
	width:425px;
	position: relative;
}
.mainItem .pic .off{
	position: absolute;
	top:8px;
	left:0px;
	color: #fff;
	font-weight: bold;
	background-color: #842c37;
	z-index: 10;
	padding: 2px 5px;
	font-size: 100%;
}
.mainItem .pic .off .num{
	font-weight: bold;
	font-size: 120%;
}
.mainItem .text{
	float: right;
	display: inline;
	width:280px;
}
.mainItem .text h2{
	margin-bottom:15px;
}
.mainItem .text h2 a{
	font-size: 80%;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
.mainItem .text h2 a:hover{
	text-decoration: underline;
}

/* NEW CATEGORY PAGE
------------------------------------------------------------------*/
.cTopPart { margin-bottom: 20px; }
.cTopPart .image { width: 100%; height: 500px; overflow: hidden; }
.cTopPart .image img { display: block; height: 100%; width: auto; margin: 0px auto; position: absolute; left: 50%; transform: translateX(-50%); }
.cTopPart .image .link { display: block; width: fit-content; padding: 5px 10px; margin: 0px; color: #707070; background-color: rgba(255,255,255,0.7); text-decoration: none; position: absolute; left: max(0px, (100% - 3100px / 740 * 370) / 2); bottom: 0px; } 
.cTopPart .image .link:hover { text-decoration: underline; }
.cTopPart .nBlockInner { width: 100%; }

.cProdCat h1 { text-align: center; line-height: 1.2; margin: 20px 0px; }
.cProdCat h1 span { display: block; font-size: 80%; }
.cProdCat p { font-size: 80%; text-align: center; }
.cProdCat #showFilterButton {
	padding-left: 43px;
	background-image: url(/_resource/image/btn_filter01.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: top calc(50% - 1px) left 15px;
	border-radius: 15px;
}
.cProdCat a[href='#cGuideSofa2'],
.cProdCat a[href='#cGuideLayoutPlanStep2LowTable2'],
.cProdCat a[href='#cGuideDining2'],
.cProdCat a[href='#cGuideStorage2'] { border-radius: 15px; }

#stickyFilterTrigger1 { position: absolute; top: 0px; }
#stickyFilterTrigger2 { position: absolute; top: 50dvh; }
#showFilterButton.sticky { position: fixed; top: calc(var(--headerHeight) + var(--extraHeaderHeight) + 5px); left: calc(var(--nblock-margin)); box-shadow: 0px 0px 4px gray; z-index: 2; }

.cGuideArea2 .contentsArea { width: 100%; }
.cProdPanel h2,
.cProdRank h2,
.cGuideArea2 h2,
#lineupArea.newDesign .lineupIndex em,
.cRelatedArticles.newDesign h2 { color: #842c37; font-size: 100%; line-height: 2.0; border-bottom: 1px solid #842c37; margin-bottom: 20px; }
.cProdPanel h2 span,
.cGuideArea2 h2 span,
.cProdRank h2 span,
#lineupArea.newDesign .lineupIndex em span,
.cRelatedArticles.newDesign h2 span { display: inline-block; font-size: 90%; margin-left: 20px; }

.cProdPanel { margin: 40px 0px; font-size: 90%; }
.cProdPanel .tabList { display: flex; justify-content: center; gap: 5px; border-bottom: 1px solid #842c37; }
.cProdPanel .tabList.tab4 a { width: calc((100% - 20px - 5px * 3) / 4); box-sizing: border-box; }
.cProdPanel .tabList a { color: #842c37; background-color: #ffffff; border: 1px solid #842c37; border-radius: 5px 5px 0px 0px; text-decoration: none; text-align: center; padding: 3px; cursor: pointer; }
.cProdPanel .tabList a.active { color: #ffffff; background-color: #842c37; }
.cProdPanel .flexCol4,
.cProdPanel .flexCol5 { display: flex; flex-wrap: wrap; justify-content: space-around; }
.cProdPanel .flexCol4 > a,
.cProdPanel .flexCol5 > a { display: block; text-align: center; text-decoration: none; }
.cProdPanel .flexCol4 > a { width: 145px; margin: 0px calc((100% - 145px * 4) / 4 / 2); }
.cProdPanel .flexCol5 > a { width: 140px; margin: 0px calc((100% - 140px * 5) / 5 / 2); }
.cProdPanel .flexCol4 > a img,
.cProdPanel .flexCol5 > a img { display: block; width: 100%; height: auto; margin: 0px auto; }
.cProdPanel .flexCol4 > a span,
.cProdPanel .flexCol5 > a span { display: block; margin: 0px auto; position: relative; }
.cProdPanel .flexCol4 > a span::after,
.cProdPanel .flexCol5 > a span::after { content: ">"; position: absolute; right: 0px; }
.cProdPanel .flexCol4.w160 > a { width: 160px; margin: 0px calc((100% - 160px * 4) / 4 / 2); }
.cProdPanel .flexCol4.w160.txtw140 > a span { width: 140px; }
.cProdPanel .flexCol4.w180 > a { width: 180px; margin: 0px calc((100% - 180px * 4) / 4 / 2); }
.cProdPanel .flexCol4.w180.imgw145 > a img { width: 145px; }
.cProdPanel .flexCol4.w180.imgw160 > a img { width: 160px; }
.cProdPanel .flexCol4.w180.txtw140 > a span { width: 140px; }
.cProdPanel .flexCol4.w180.txtw160 > a span { width: 160px; }
.cProdPanel .flexCol4.txtmgt10 > a span { margin-top: 10px; }
.cProdPanel .flexCol5.txtmgt20 > a span { margin-top: 20px; }
.cProdPanel .categorySplide .splide__list { transition: max-height 300ms; /* for variable height tab panels */ }
.cProdPanel .categorySplide .splide__slide { height: fit-content; /* for variable height tab panels */ }

.cProdRank { margin: 40px 0px; }
.cProdRank.coverList h2 em { display: inline-block; color: #ffffff; font-size: 80%; font-weight: normal; line-height: 0px; border-width: 10px 5px; border-style: solid; border-color: #cccccc #cccccc #cccccc transparent; padding: 0px 0px 0px 5px; }
.cProdRank .flexCol5 { display: flex; flex-wrap: wrap; gap: 20px; counter-reset: rank; }
.cProdRank .flexCol5 > a { display: block; width: calc((100% - 20px * 4) / 5); position: relative; color: #000000; text-decoration: none; counter-increment: rank; }
.cProdRank .flexCol5 > a::before { content: counter(rank); position: absolute; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #842c37; background-color: #ffffff; border: 1px solid #842c37; border-radius: 12px; z-index: 1; }
.cProdRank .flexCol5 > a > img { display: block; width: calc(100% - 10px); height: auto; margin: 10px 0px 0px 10px; }
.cProdRank .flexCol5 > a > span { display: block; margin-left: 10px; }
.cProdRank .flexCol5 > a .name { font-size: 90%; font-weight: bold; line-height: 1.5; margin-top: 5px; }
.cProdRank .flexCol5 > a .sysReviewInfo .stars {
	margin: 0px 3px 0px 0px; color: transparent;
	background: linear-gradient(to right, #e08023, #e08023 var(--stars-percent), #d0d0d0 var(--stars-percent), #d0d0d0); background-clip: text;
}
.cProdRank .flexCol5 > a .sysReviewInfo .stars::before { content: "★★★★★"; }
.cProdRank .flexCol5 > a .sysReviewInfo .numReviews { font-size: 80%; margin-left: 5px; }
.cProdRank .flexCol5 > a .sysReviewInfo .numReviews::before { content: var(--num-reviews); }
.cProdRank .flexCol5 > a .sysReviewInfo .numReviews::after { content: "レビュー"; }
.cProdRank .flexCol5 > a .tax { font-size: 80%; }
.cProdRank .flexCol5 > a .salesCopy { font-size: 80%; }
.cProdRank.coverList { position: relative; }
.cProdRank.coverList .prevBtn,
.cProdRank.coverList .nextBtn { position: absolute; top: -6px; font-size: 24px; text-decoration: none; cursor: pointer; }
.cProdRank.coverList .prevBtn { right: 40px; }
.cProdRank.coverList .nextBtn { right: 0px; }
.cProdRank.coverList:not(.scrolled) .prevBtn { color: #a0a0a0; }
.cProdRank.coverList.scrolled .nextBtn { color: #a0a0a0; }
.cProdRank.coverList .scroller { overflow: hidden; }
.cProdRank.coverList .scroller .flexCol5 { flex-wrap: nowrap; transition: transform 500ms; }
.cProdRank.coverList.scrolled .scroller .flexCol5 { transform: translateX(calc(-100% - 19px)); }
.cProdRank.coverList .scroller .flexCol5 > a { min-width: calc((100% - 20px * 4) / 5); }

.cGuideArea2 { margin: 40px 0px; }
.cGuideArea2 .flexCol4 { display: flex; flex-wrap: wrap; gap: 20px; }
.cGuideArea2 .flexCol4 > a { display: block; width: calc((100% - 20px * 3) / 4); text-decoration: none; background-color: #ffffff; outline: 1px solid #e0e0e0; border-radius: 7px; overflow: hidden; }
.cGuideArea2 .flexCol4 > a:hover { opacity: 0.8; }
.cGuideArea2 .flexCol4 > a img { display: block; width: 100%; height: auto; opacity: 1 !important; }
.cGuideArea2 .flexCol4 > a span { display: block; margin: 10px; line-height: 1.2; }
.cGuideArea2 .flexCol4 > a span.ttl { color: #842c37; font-size: 95%; font-weight: bold; }
.cGuideArea2 .flexCol4 > a span.txt { color: #000000; }
.cGuideArea2 .flexCol4 > a span.txt,
.cGuideArea2 .flexCol4 > a span.dtl { font-size: 85%; }
.cGuideArea2 .flexCol4 > a span.dtl { text-decoration: underline; }
.cGuideArea2 .flexCol4 > a span.dtl::before { content: ">"; display: inline-block; text-decoration: none; margin-right: 0.5em; }

#lineupArea.newDesign .contentsArea { width: 100%; }

#lineupArea.newDesign .lineupIndex { padding: 0px; background-color: transparent; }
#lineupArea.newDesign .lineupIndex em { text-align: left; color: #842c37; line-height: 2.0; border-bottom: 1px solid #842c37; margin: 0px 0px 20px 0px; padding: 0px; }
#lineupArea.newDesign .lineupIndex ul { text-align: left; }
#lineupArea.newDesign .lineupIndex ul li { margin: 0px 20px 0px 0px; }
#lineupArea.newDesign .lineupIndex ul li a { color: #000000; text-decoration: none; }
#lineupArea.newDesign .lineupIndex ul li a::before { content: "●"; color: #842c37; }

#lineupArea.newDesign .lineupSect .sectImg { width: 350px; height: auto; aspect-ratio: 770 / 550; float: left; margin-right: 20px; position: relative; }
#lineupArea.newDesign .lineupSect .sectImg img { width: 100%; }
#lineupArea.newDesign .lineupSect .sectImg a { display: block; width: fit-content; padding: 5px 10px; margin: 0px; color: #707070; background-color: rgba(255, 255, 255, 0.7); font-size: 90%; line-height: 1.5; text-decoration: none; position: absolute; left: 0px; bottom: 0px; }

#lineupArea.newDesign a[id].offsetAnchor + .lineupSect { margin: 0px 0px 30px 0px; padding: 0px; }

#lineupArea.newDesign .lineupSect + .separate,
#lineupArea.newDesign .separate.moreDiv { width: 100%; }
#lineupArea.newDesign .lineupSect + .separate .separateInner,
#lineupArea.newDesign .separate.moreDiv .separateInner { width: 100%; margin-right: 0px; display: flex; gap: 30px 20px; flex-wrap: wrap; }
#lineupArea.newDesign .lineupSect + .separate .separateInner .col,
#lineupArea.newDesign .separate.moreDiv .separateInner .col { width: calc((100% - 20px * 3) / 4); float: none; margin: 0px; }

#lineupArea.newDesign .moreLessButton { color: #842c37; background-color: #ffffff; font-weight: bold; border: 1px solid #842c37; padding: 5px 50px; cursor: pointer; position: relative; }
#lineupArea.newDesign .moreLessButton::before { content: "もっと見る"; }
#lineupArea.newDesign .moreLessButton::after { content: "＞"; font-weight: bold; transform: scale(0.8) rotate(90deg); position: absolute; right: 10px; }
#lineupArea.newDesign .moreLessButton.open::before { content: "閉じる"; }
#lineupArea.newDesign .moreLessButton.open::after { content: "＜"; }

#lineupArea.newDesign .tag { height: auto; }
#lineupArea.newDesign .info { background-color: transparent; }
#lineupArea.newDesign .info .name { margin: 5px 0px 8px 0px !important; min-height: unset; }
#lineupArea.newDesign .info .name a { color: #000000 !important; }
#lineupArea.newDesign .info .prices { margin: 0px !important; }
#lineupArea.newDesign .info .prices .price { text-align: left; }
#gContainer #lineupArea.newDesign .info .prices span.price { font-size: 99%; font-weight: normal; color: #000000 !important; }
#lineupArea.newDesign .info .salesCopy { font-size: 80%; margin: 3px 0px 0px 0px; }

#lineupArea .info span.salesCopy { display: inline; }

/* special side navi */
:root {
	--sidenavi-width: 180px;
	--sidenavi-spacing: 15px;
	--sidenavi-outside: 0;
	--nblock-width: 950px;
	--nblock-margin: max((100% - var(--nblock-width) - (var(--sidenavi-spacing) + var(--sidenavi-width)) * var(--sidenavi-outside)) / 2, 0px);
}
body.withForWide .nBlockInner {
	margin-left: var(--nblock-margin);
	margin-right: calc(var(--nblock-margin) + (var(--sidenavi-spacing) + var(--sidenavi-width)) * var(--sidenavi-outside));
}
body.withForWide .nBlockInner.notForWide,
body.withForWide #cPathNavi .nBlockInner,
body.withForWide #bottomContents .nBlockInner { margin-left: auto; margin-right: auto; }
.gSide.forWide {
	display: block; opacity: 1; position: fixed; z-index: 100;
	left: calc(var(--nblock-margin) + var(--nblock-width) - var(--sidenavi-width));
}
@media (max-width: 1170px) {
	#markerForWide { position: absolute; top: 120dvh; }
}
@media (min-width: 1171px) {
	:root {
		--sidenavi-outside: 1;
	}
	.gSide.forWide { left: calc(var(--nblock-margin) + var(--nblock-width) + var(--sidenavi-spacing)); }
}

#lineupArea .reviewInfo { display: inline-flex; margin: 0px; font-size: 100%; }
#lineupArea .reviewInfo a { color: #000000; text-decoration: none; display: inline-flex; }
#lineupArea .reviewInfo a:hover span:nth-child(2) { text-decoration: underline; }
#lineupArea .reviewInfo span { font-weight: normal !important; }
#lineupArea .reviewInfo span:nth-child(2) { font-size: 80%; line-height: calc(1.4 / 0.8) }
#lineupArea .reviewInfo .stars { color: transparent; background: linear-gradient(to right,#e08023,#e08023 var(--stars-percent),#d0d0d0 var(--stars-percent),#d0d0d0); background-clip: text; margin: 0px 3px 0px 0px; }
#lineupArea .reviewInfo .stars::before { content: "★★★★★"; }
#lineupArea .reviewInfo:empty::before { content: "\00A0"; }

.cRelatedArticles.newDesign {
	margin-left: var(--nblock-margin);
	margin-right: calc(var(--nblock-margin) + (var(--sidenavi-spacing) + var(--sidenavi-width)) * var(--sidenavi-outside));
}
.cRelatedArticles.newDesign .inner { width: 100%; }
.cRelatedArticles.newDesign li { background-color: #ffffff; outline: 1px solid #e0e0e0; border-radius: 7px; overflow: hidden; }
.cRelatedArticles.newDesign a { display: block; }
.cRelatedArticles.newDesign a:hover { opacity: 0.8; }
.cRelatedArticles.newDesign a img { width: 200px; margin: 0px 15px 0px 0px; }
.cRelatedArticles.newDesign a div { width: 240px; margin: 10px 0px; }
.cRelatedArticles.newDesign a div .title { display: block; color: #842c37; line-height: 1.5; }
.cRelatedArticles.newDesign a div .summary { display: block; margin-top: 5px; color: #000000; }
.cRelatedArticles.newDesign a div span.dtl { font-size: 85%; }
.cRelatedArticles.newDesign a div span.dtl { text-decoration: underline; }
.cRelatedArticles.newDesign a div span.dtl::before { content: ">"; display: inline-block; text-decoration: none; margin-right: 0.5em; }
.cRelatedArticles.newDesign .inner .aR { text-align: center; }
.cRelatedArticles.newDesign .inner .aR .moreLink,
.cRelatedArticles.newDesign .inner .aR .lessLink { display: inline-block; color: #842c37; background-color: #ffffff; font-weight: bold; border: 1px solid #842c37; padding: 5px 50px; cursor: pointer; position: relative; }
.cRelatedArticles.newDesign .inner .aR .moreLink::after,
.cRelatedArticles.newDesign .inner .aR .lessLink::after { font-weight: bold; transform: scale(0.8) rotate(90deg); position: absolute; right: 10px; }
.cRelatedArticles.newDesign .inner .aR .moreLink::after { content: "＞"; }
.cRelatedArticles.newDesign .inner .aR .lessLink::after { content: "＜"; }