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

/* pagingArea
------------------------------------------------------------------*/
.reSearchArea{
	border-bottom: 1px dotted #ccc;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.reSearchArea input[type=search] { box-sizing: border-box; font-size: 12px; line-height: 32px; padding-left: 8px; width: 326px; height:34px; border: none; background: transparent; border: 1.5px solid #842c37; vertical-align: middle; }
.reSearchArea input[type=search]:focus { outline: none !important; background: #ffffff; }
.reSearchArea input[type=submit] {
	background: url("/common/img/ico/ico_search01.png") no-repeat center center;
	background-size: 40% auto;
	background-color: #842c37;
	border: 1.5px solid #842c37;
	box-sizing: border-box;
	width: 54px;
	height: 34px;
	vertical-align: middle;
	text-indent: -9999px;
	cursor: pointer;
}


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

.pagingArea{
	
}

/* clearfix */
.pages:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .pages {zoom: 1;}
*:first-child+html .pages {zoom: 1;}
.pages{
	width: 400px;
	float: right;
	display: inline;
	text-align: right
}
.pages span{
	border: 1px solid #ccc;
	padding: 5px 5px;
	line-height: 1;
	margin-left: 5px;
}
.pages span.current{
	border: none;
	font-weight: bold;
	color: #832d37;
}

.separate.col04{
	margin-top: 15px;
}
.separate.col04 .col{
	padding-bottom: 25px !important;
}
.separate.col04 .col p{
	margin-bottom: 3px;
}
.separate.col04 .col p .tax{
	font-size: 80%;
}

.separate.col04 .col .photo {
	position: relative;
	height: 100px;
	width: 140px;
}
.separate.col04 .col .photo a {
	position: absolute;
}
.separate.col04 .col .photo .off {
	background-color: #842C37;
	color: #FFFFFF;
	font-size: 100%;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px 3px;
	z-index: 10;
}
.separate.col04 .col .photo .off .num {
	font-size: 100%;
	font-weight: bold;
}

.type00 {
	/*font-size: 123%;*/
	margin: 15px 0 10px 0;
	padding: 3px 10px;
	color: #fff;
	background-color: #842c37;
}

h1.categoryName { text-align: center; line-height: 1.2; padding: 0px; margin: 15px 0px 20px 0px; font-size: 130%; }
h1.categoryName span { display: block; font-size: 80%; }
.searchTop1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.searchTop2 { font-size: 125%; margin: 10px 0px; padding-bottom: 5px; border-bottom: 1px solid #842c37; }
#sortSelect { padding: 5px 10px; color: #842c37; background-color: #f3f3f3; border: none; border-radius: 15px; font-size: 100%; font-weight: bold; }

.searchDetail { font-weight: inherit; background-color: #eee; padding: 5px 4px !important; }
.removeCriteria { display: inline-flex; border: 1px solid #842c37; border-radius: 15px; margin: 0px 10px 10px 0px; padding: 5px; line-height: 1; white-space: nowrap; }
.removeCriteria a { color: #842c37; text-decoration: none; padding: 0px 3px; cursor: pointer; }
.removeCriteria span { color: #842c37; padding: 0px 10px; }

#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;
	white-space: nowrap;
	font-size: 100%;
}

#showFilterButton,
#sortSelect { box-sizing: border-box; height: 32px; }

.reviewInfo { display: flex; margin: 0px; font-size: 100%; }
.reviewInfo a { color: #000000; text-decoration: none; display: flex; }
.reviewInfo span { font-weight: normal !important; }
.reviewInfo span:nth-child(2) { font-size: 80%; line-height: calc(1.4 / 0.8) }
.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; }
.reviewInfo .stars::before { content: "★★★★★"; }
.reviewInfo:empty::before { content: "\00A0"; }

.searchResult .flexCol4 { display: flex; flex-wrap: wrap; gap: 35px 25px; }
.searchResult .flexCol4 .item { display: flex; flex-direction: column; gap: 10px; width: calc((100% - 25px * 3) / 4); line-height: 1.3; }
.searchResult .flexCol4 .item .photo { position: relative; }
.searchResult .flexCol4 .item .photo .off { position: absolute; top: 8px; left: 0px; color: #ffffff; background-color: #842c37; font-weight: bold; padding: 2px 5px; z-index: 10; }
.searchResult .flexCol4 .item .photo .off .num { font-size: 120%; font-weight: inherit; }
.searchResult .flexCol4 .item .photo a { display: block; }
.searchResult .flexCol4 .item .photo a img { display: block; width: 100%; height: auto; }
.searchResult .flexCol4 .item .box { display: flex; flex-direction: column; flex-grow: 1; gap: 3px; }
.searchResult .flexCol4 .item .box .name { font-size: 96%; margin: 0px; }
.searchResult .flexCol4 .item .box .name a { color: #000000; font-weight: bold; text-decoration: none; }
.searchResult .flexCol4 .item .box .reviewInfo { margin: 0px; }
.searchResult .flexCol4 .item .box .prices { text-align: left; margin: 0px; }
.searchResult .flexCol4 .item .box .prices a { color: #000000; text-decoration: none; }
.searchResult .flexCol4 .item .box .prices a .price {}
.searchResult .flexCol4 .item .box .prices a .tax { font-size: 80%; }
.searchResult .flexCol4 .item .box .salesCopy { font-size: 76%; }
.searchResult .flexCol4 .item .box .salesCopy a { color: #000000; text-decoration: none; }

/* 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 #gContainerInner {
	margin-left: var(--nblock-margin);
	margin-right: calc(var(--nblock-margin) + (var(--sidenavi-spacing) + var(--sidenavi-width)) * var(--sidenavi-outside));
}
#gMainBody { width: 100%; }
.gSide.forWide {
	display: block; opacity: 1; position: fixed; z-index: 100;
	left: calc(var(--nblock-margin) + var(--nblock-width) - var(--sidenavi-width));
}
@media (min-width: 1171px) {
	:root {
		--sidenavi-outside: 1;
	}
	.gSide.forWide { left: calc(var(--nblock-margin) + var(--nblock-width) + var(--sidenavi-spacing)); }
}
#markerForWide { position: absolute; top: calc(100dvh + 80px); }

.stickyElm1.sticking,
.stickyElm2.sticking { position: fixed; top: calc(var(--headerHeight) + var(--extraHeaderHeight) + 5px); z-index: 1; }
.stickyElm1.sticking { left: calc(var(--nblock-margin)); }
.stickyElm2.sticking { left: calc(var(--nblock-margin) + var(--nblock-width)); transform: translateX(-100%); }
.stickyElm1.sticking button,
.stickyElm2.sticking select,
.stickyElm2.sticking .customSelectField { box-shadow: 0px 0px 4px gray; }