@charset "utf-8";
/*--------------------------------------------
  goodsList.css
  商品一覧画面用CSS
--------------------------------------------*/
.contents {
	min-width: unset;
	max-width: min(100%, 1240px);
	padding-left: 20px;
	padding-right: 20px;
	gap: 0 40px;

	@media screen and (max-width: 600px){
		padding-left: 15px;
		padding-right: 15px;
	}
}

.twoColumns form {
	flex: 1 0 0%;

	@media screen and (max-width: 960px){
		width: 100%;
	}
}

.sideContents {
	width: min(100%, 240px);

	@media screen and (max-width: 960px){
		width: 100%;
	}
}

.topGroupName {
	@media screen and (max-width: 960px){
		padding: 0;
	}
}

.level_h1 {
	border: none;
	font-size: clamp(21px, 2.1vw, 24px);
	margin: 0 0 1em;
	padding: 0;
}

#keyMatchListResults:not(:empty) {
	margin-bottom: 20px;
}

/*---------------------------------------------
	goodsList 商品一覧(全体)
  ---------------------------------------------*/
.goodsList .matrix-header,
.goodsList .matrix-footer {
	font-size: 0.875em;
	color: var(--color-text-gray);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--screen-pd-lr) clamp(0.625rem, -0.313rem + 4.167vw, 1.25rem);

	& select, & a {
		color: var(--color-text-gray);
	}
}
.goodsList .matrix-header {
	margin-bottom: 20px;
}
.goodsList .matrix-footer {
	margin-top: 20px;
}

/* エラーメッセージの表示制御 */
#errorsOnModal{
	display: none;
}

/*---------------------------------------------
	goodsSort 商品一覧(ソート)
  ---------------------------------------------*/
/* 絞り込みボタン */
.filterBtn {
	display: none;
	background-color: var(--color-background-pink);
	padding: .5rem var(--screen-pd-lr);
	& span {
		display: flex;
		align-items: baseline;
		gap: 0.5em;
		line-height: 1;
		&::before {
			content: "";
			background: url(../images/icon/icon_filter.svg) no-repeat center center / contain;
			display: block;
			height: 12px;
			width: 17px;
		}
	}

	@media screen and (max-width: 960px){
		display: block;
	}
}

/* 表示順 */
.sortTypeLabelItemWrap {
	display: none;
}

/* 表示形式 */
.displayTypeGroup {
	display: none;
}

/* 表示件数 */
.resultsShowMaxLine {
	margin-top: 0;
	display: flex;
	white-space: nowrap;
	align-items: center;
	gap: 0.5em;
}
.resultsShowMaxLine::before {
	content: "表示件数";
}

.maxLineSelectLabel {
	display: none;
}

/* ページネーション */
.pageInfo {
	float: none;
	margin: 0 0 0 auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0.25em 1em;

	@media screen and (max-width: 960px){
		width: 100%;
		margin: 0 auto;
		flex-direction: column-reverse;
	}
}
ul.pagination {
	margin: 0;
}

/* ●件目表示 */
.pagingResultsShow {
	display: flex;
	margin-left: auto;

	@media screen and (max-width: 960px){
		margin-left: unset;
	}
}
.resultsDataNumber {
	order: 1;
}
span.dataNumber::before {
	content: "/";
}
span.dataNumber::after {
	content: "件";
	padding-left: 0;
}
span.endNumber::after {
	content: "件";
	padding: 0 4px 0 0;
}

/*---------------------------------------------
	goodsItem 商品一覧(商品行)
  ---------------------------------------------*/
.goodsList .results .matrix-body,
.goodsList.favorites .matrix-body {
	font-size: 14px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 30px 20px;

	& a {
		border: none;
	}

	/* 価格　ログイン後表示 */
	.loginPriceMessageItemWrap {
		& .items {
			&::before {
				display: inline-block;
				content: "BW価格";
				font-size: 0.8em;
				margin-right: 0.25em;
			}
		}
		& span {
			display: inline-block;
			border-bottom: 1px solid var(--color-border-pink);
			margin-bottom: 0.25em;
			padding-bottom: 0.25em;
		}
	}
}

.resultsRow {
	/* アイコン */
	& .detail_icon_list {
		font-size: 13px;
		min-height: 28px;
		margin-bottom: 8px;
		padding-right: 20px;
		color: var(--color-text);
		gap: 4px 6px;
		align-items: flex-start;
		align-content: flex-start;
		height: auto;
	}
}

.goodsInfo {
	margin-top: 10px;
	position: relative;
	&:has(.afterLoginMessageItemWrap) {
		margin-top: 0;
	}
}

/* 商品名 */
.goodsNameItemWrap {
	margin: 10px 0;
}

/* 販売ステータス */
.saleStatusItemWrap {
	display: none;
}

/* 最小注文数・最大注文数 */
.minOrderNumItemWrap,
.maxOrderNumItemWrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 1;
	margin-top: .25em;
	label {
		font-size: 0.875em;
		margin-right: .5em;
		line-height: 1;
	}
}

/* 数量 */
.addCountItemWrap {
	display: none;
}

/* お気に入りボタン */
.addFavoriteLinkItemWrap {
	position: absolute;
	top: 0;
	right: 0;

	& a {
		&::before {
			content: "";
			background: url(../images/icon/icon_alexander.svg) no-repeat center right / contain;
			display: inline-block;
			width: 1.3em;
			height: 1.3em;
			vertical-align: text-top;
			transition: var(--transition);
		}

		&:hover, &.current {
			&::before {
				background-image: url(../images/icon/icon_alexander_on.svg);
			}
		}
	}
}

/* 価格 */
.goods_price {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: flex-end;
	gap: .25em .5em;
	&::before {
		content: "BW価格";
		grid-area: label;
		font-size: 0.8em;
	}
	&:has( .label_off) {
		grid-template-rows: auto auto;
		grid-template-areas: 
			"label hiddenPrice"
			"off price";
		border-bottom: 1px solid var(--color-border-pink);
		padding-bottom: 0.25em;
	}
	.label_off {
		grid-area: off;
		color: var(--color-alert);
		font-size: 0.8em;
		margin-right: auto;
	}
	&:has(.vipPriceBlock),
	&:has(.discountRateBlock),
	&:has(.vipDiscountBlock) {
		&::before {
			display: none;
		}
	}
}
.vipPriceBlock {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"bw-label before-price"
		"vip-label vip-price";
	flex: 1;
	gap: 0.25em 0.5em;
	& .bwPriceLabel {
		grid-area: bw-label;
		font-size: 0.8em;
		align-self: baseline;
	}
	& .taxExcludedPriceBeforeVipItemWrap,
	& .skuMinPriceBeforeVipItemWrap {
		grid-area: before-price;
		text-align: right;
		opacity: 0.8;
		position: relative;
		width: fit-content;
		margin-left: auto;
		&::before {
			content: "";
			display: block;
			border-bottom: 1px solid currentColor;
			width: 100%;
			position: absolute;
			top: 0.6em;
			left: 0;
		}
		& .taxIncludedPrice {
			text-decoration: line-through;
			text-decoration-thickness: 1px;
			text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
		}
	}
	& .vipPriceLabel {
		grid-area: vip-label;
		font-size: 0.8em;
		color: var(--color-alert);
		align-self: baseline;
	}
	& .vipPriceItemWrap {
		grid-area: vip-price;
		text-align: right;
		color: var(--color-alert);
	}
}
.priceItemWrap {
	text-align: center;
}
.discountRateBlock {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"bw-label hiddenPrice"
		"discount-label discount-price";
	flex: 1;
	gap: 0.25em 0.5em;
	& .bwPriceLabel {
		grid-area: bw-label;
		font-size: 0.8em;
		align-self: baseline;
	}
	& .goods_price_hidden {
		opacity: 0.8;
		& .taxExcludedPriceItemWrap,
		& .skuMinPriceItemWrap {
			text-align: right;
		}
	}
	& .discountRateLabel {
		grid-area: discount-label;
		font-size: 0.8em;
		color: var(--color-alert);
		align-self: baseline;
	}
	& .discountedPriceItemWrap {
		grid-area: discount-price;
		text-align: right;
		color: var(--color-alert);
	}
}
.vipDiscountBlock {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"bw-label hiddenPrice"
		"cp-label cp-price"
		"vip-label vip-price";
	flex: 1;
	gap: 0.25em 0.5em;
	& .bwPriceLabel,
	& .cpPriceLabel,
	& .vipPriceLabel {
		white-space: nowrap;
	}
	& .bwPriceLabel {
		grid-area: bw-label;
		font-size: 0.8em;
		align-self: baseline;
	}
	& .cpPriceLabel {
		grid-area: cp-label;
		font-size: 0.8em;
		align-self: baseline;
	}
	& .discountedPriceBeforeVipItemWrap {
		grid-area: cp-price;
		text-align: right;
	}
	& .vipPriceLabel {
		grid-area: vip-label;
		font-size: 0.8em;
		color: var(--color-alert);
		align-self: baseline;
	}
	& .vipPriceItemWrap {
		grid-area: vip-price;
		text-align: right;
		color: var(--color-alert);
	}
}
.discountedPriceItemWrap {
	& .discountedPriceSuffixLabel {
		font-size: 0.8rem;
	}
}
.vipPriceItemWrap {
	& .vipPriceSuffixLabel {
		font-size: 0.85em;
	}
}
.goodsInfo {
	& .price,
	& .discountedPrice {
		font-size: 1.1rem;
		line-height: 1;
		font-family: var(--font-en-num);
		transform: var(--font-en-num-style);
		letter-spacing: var(--font-en-num-kerning);
		margin-right: -0.25em;
	}
	& .goods_price_hidden {
		grid-area: hiddenPrice;
		margin-left: auto;
		width: fit-content;
		& em {
			color: var(--color-text);
			font-size: 0.75rem;
		}
	}
	&:has(.discountedPriceItemWrap) {
		& .goods_price_hidden {
			border-bottom: none;
			font-size: 0.85em;
			position: relative;
			& span, & em {
				color: var(--color-sub);
			}
			&::before {
				content: "";
				display: block;
				border-bottom: 1px solid var(--color-sub);
				width: 100%;
				position: absolute;
				top: 0.6em;
				left: 0;
			}
			& .taxIncludedPrice {
				text-decoration: line-through;
				text-decoration-thickness: 1px;
				text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
			}
		}
	}
	&:has(.discountedPriceBeforeVipItemWrap) {
		& .goods_price_hidden {
			border-bottom: none;
			font-size: 0.85em;
			position: relative;
			& span, & em {
				color: var(--color-sub);
			}
			&::before {
				content: "";
				display: block;
				border-bottom: 1px solid var(--color-sub);
				width: 100%;
				position: absolute;
				top: 0.6em;
				left: 0;
			}
			& .taxIncludedPrice {
				text-decoration: line-through;
				text-decoration-thickness: 1px;
				text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
			}
		}
	}
	&:has(.vipPriceItemWrap) {
		& .taxExcludedPriceBeforeVipItemWrap,
		& .skuMinPriceBeforeVipItemWrap {
			border-bottom: none;
			font-size: 0.85em;
			position: relative;
			text-align: right;
			width: fit-content;
			margin-left: auto;
			&::before {
				content: "";
				display: block;
				border-bottom: 1px solid currentColor;
				width: 100%;
				position: absolute;
				top: 0.6em;
				left: 0;
			}
			& .taxIncludedPrice {
				text-decoration: line-through;
				text-decoration-thickness: 1px;
				text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
			}
			& span, & em {
				color: var(--color-sub);
			}
		}
		& .discountedPriceBeforeVipItemWrap {
			border-bottom: none;
			font-size: 0.85em;
			position: relative;
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			width: 100%;
			& .items {
				text-align: center;
				position: relative;
				&::before {
					content: "";
					display: inline-block;
					border-bottom: 1px solid var(--color-sub);
					width: 100%;
					position: absolute;
					top: 0.6em;
					left: 0;
				}
			}
			& .taxIncludedPrice {
				text-decoration: line-through;
				text-decoration-thickness: 1px;
				text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
			}
			& span, & em {
				color: var(--color-sub);
			}
		}
	}
	& .taxIncludedPrice {
		font-size: 0.7rem;
	}
}

/* カートボタン */
.addCartItemWrap {
	margin-top: 10px;
	&.btn_cart {
		& a {
			font-size: 13px;
			padding: 6px;
			white-space: nowrap;
		}
	}
}

/* ログインして購入ボタン */
.toLoginItemWrap {
	border: var(--border-black);
	margin-top: 10px;
	transition: var(--transition);
	& a {
		background-color: #fff;
		display: block;
		font-size: 13px;
		padding: 6px;
		text-align: center;
		white-space: nowrap;
		&:hover {
			background-color: #f7f7f7;
		}
	}
}

/* 欠品解消お知らせボタン */
.addStockRequestItemWrap {
	border: 1px solid var(--color-background-gray2);
	background-color: var(--color-background-gray2);
	margin-top: 10px;
	transition: var(--transition);
	&:hover {
		opacity: 0.8;
	}
	& a {
		display: block;
		font-size: 13px;
		padding: 6px;
		text-align: center;
		white-space: nowrap;
		& span {
			&::before {
				content: "";
				background: url(../images/icon/icon_mail.svg) no-repeat center center / contain;
				display: inline-block;
				height: 14px;
				width: 14px;
				margin-right: 0.5em;
				vertical-align: text-bottom;
			}
		}
	}
}

/* 詳細を見る */
.toGoodsDetailItemWrap {
	border: 1px solid var(--color-border-black);
	margin-top: 10px;
	transition: var(--transition);
	& a {
		background-color: #fff;
		display: block;
		font-size: 13px;
		padding: 6px;
		text-align: center;
		position: relative;
		white-space: nowrap;
		&:hover {
			background-color: #f7f7f7;
		}
		&::after {
			content: "";
			background: url(../images/icon/icon_arrow_right.svg) no-repeat center center / contain;
			display: block;
			height: 9px;
			width: 9px;
			margin-left: auto;
			position: absolute;
			inset: 0;
			margin: auto 10px auto auto;
		}
	}
}

/* すぐに買うボタン */
.addCartRapidOrderItemWrap {
	display: none;
}

/* レビューエリア */
.detailReviewGroup {
	margin-bottom: 16px;
}
.reviewStarItemWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 4px;
	row-gap: 2px;
	padding-top: 5px;
}
.reviewStarWrap {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
}
.reviewNumText {
	white-space: nowrap;
}
.star {
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
}
.star.full {
	color: #f5a623;
}
.star.half {
	color: #cccccc;
}
.star.half::before {
	content: "★";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
	color: #f5a623;
}
.star.empty {
	color: #cccccc;
}

/* 商品アイコン */
.detail_icon_list,
.detail_icon_list .itemWrap .items,
.detail_icon_list .itemWrap .items .detailsImg {
  height: 12px;
  display: flex;
}
.resultsRow .detail_icon_list .itemWrap,
.resultsRow .detail_icon_list .itemWrap .items,
.resultsRow .detail_icon_list .itemWrap .items .detailsImg {
  height: 18px;
}
.resultsRow .detail_icon_list img {
  height: 15px;
  width: auto;
}