@charset "utf-8";
/*--------------------------------------------
  goodsDetail.css
  商品詳細画面用CSS
--------------------------------------------*/

.contents {
	min-width: unset;
}
.topGroupName {
	padding: 0;
	padding-inline: var(--screen-pd-lr);
}
@media (max-width: 960px) {
	.topGroupName {
		padding-inline: 0;
	}
	.set-group.message,
	.set-group.errorGroup,
	.area_Detail {
		padding-inline: var(--screen-pd-lr);
	}
}

.goodsDetailContents {
	display: flex;
	justify-content: space-between;
	gap: clamp(30px, 7vw, 80px);

	@media screen and (max-width: 960px) {
		flex-direction: column;
	}
}

.goodsDetailContents img {
	visibility: hidden;
}

.goodsDetailContents.cf::before, .goodsDetailContents.cf::after {
	content: none;
}

.note {
	padding-left: 1em;
	text-indent: -1em;
}

ul {
	&.circle_black {
		padding-left: 1em;
		text-indent: -1em;

		& li {
			&::before {
				content: "●";
			}
		}
	}
}

/* 商品写真 */
.goodsDetailContents #goodDetail_left_area {
		margin: 0 auto;
		width: min(100%, 500px);

		& .swiperWrap {
			position: relative;
			padding: 0;
		}
		& .swiper-container {
			overflow: hidden;
			&:not(.noSlider) {
				& .swiper-button-next,
				& .swiper-button-prev {
					display: block;
				}
			}
		}
		& .swiper-button-next,
		& .swiper-button-prev {
			display: none;
			background-color: var(--color-main);
			border-color: var(--color-main);
			border-radius: 100%;
			width: 35px;
			height: 35px;
			top: 50%;
			z-index: 1;
		}
		& .swiper-button-next {
			right: -17px;
		}
		& .swiper-button-prev {
			left: -17px;
		}
		@media screen and (max-width: 600px) {
			& .swiper-button-next {
				right: 5px;
				opacity: 0.8;
			}
			& .swiper-button-prev {
				left: 5px;
				opacity: 0.8;
			}
		}
		& .swiper-button-next:after,
		& .swiper-button-prev:after {
			color: #fff;
			font-size: 0.8em;
		}

		& .swiper-pagination-bullet,
		& .swiper-pagination-bullets.swiper-pagination-horizontal {
			display: none;
		}

		& .area_Photo {
			margin-bottom: clamp(10px, 1.3vw, 15px);
			& li {
				height: auto;
				max-width: 100%;
				& a {
					border: none;
					position: relative;
					width: 100%;
					height: 100%;
					padding-top: 100%;
					
					& img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}
			}
		}

	/*商品写真サムネイル*/
	& ul.goods_images {
		gap: 10px;

		& li {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid rgba(245, 196, 204, 0);/*--color-main*/
			cursor: pointer;
			margin: 0 !important;
			width: 75px !important;
			height: 75px !important;
			&.swiper-slide {
				height: auto;
			}

			& img {
				object-fit: contain;
				height: 100%;
			}

			&.swiper-slide-thumb-active, &:hover {
				border-color: rgba(245, 196, 204, 100);/*--color-main*/
			}
		}

		@media screen and (max-width: 600px) {
			flex-wrap: nowrap;
			padding: 0 0 5px 10px;
		}
	}

	@media screen and (max-width: 600px) {
			margin: 0;
			width: auto;
			overflow: hidden;
			& .swiper-button-next,
			& .swiper-button-prev {
				display: none;
			}

			/*商品写真サムネイル*/
			& .normalThumbnailWrap {
				overflow: auto;
			}
		}
}/*.goodsDetailContents #goodDetail_left_area*/

/*商品名・価格・数量エリア*/
.goodsDetailContents .area_Detail {
	flex: 1 0 0%;
}

/*商品詳細テキストエリア*/
/*見出し*/
.itemDetailName {
	font-size: clamp(20px, 2.1vw, 24px);
	margin-bottom: .5em;
}

/* レビューエリア（商品名下） */
.detailReviewGroup {
	margin-bottom: 12px;
}
.reviewStarItemWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 6px;
	row-gap: 2px;
}
.reviewStarWrap {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
}
.reviewNumText {
	white-space: nowrap;
	font-size: 0.95em;
	color: var(--color-text-gray);
}
.star {
	position: relative;
	display: inline-block;
	font-size: 18px;
	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_normal_box,
.detail_sku_box {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 1em;
	.detail_price {
		margin-left: auto;
		min-width: fit-content;
		align-self: flex-end;
	}
	.detail_normal_cart_box  {
		width: 100%;
	}
}

/*商品コード、ブランド、送料ランク */
.goodsMeta {
	font-size: 12px;
	color: var(--color-sub);
	.label {
		display: inline-block;
		width: 7.5em;
		margin-right: .5em;
	}
}

/*販売形式*/
.delail_sales_type {
	font-size: 12px;
}

/*商品詳細金額エリア*/
.goods_price {
	& .price_normal,
	& .price_down,
	& .goods_price_hidden,
	& .price_vip,
	& .price_down_apply_vip ,
	& .list_price {
		line-height: 1.4;
		margin-left: auto;
		width: fit-content;
		& .price {
			font-size: 1.75rem;
			font-family: var(--font-en-num);
			transform: var(--font-en-num-style);
			letter-spacing: var(--font-en-num-kerning);
		}
		& span, em {
			display: inline-block;
			font-size: 1rem;
			color: var(--color-text);
		}
		& .price_off {
			color: var(--color-alert);
			margin-right: 1em;
			display: inline-flex;
			align-items: center;
			gap: 0.2em;
			position: relative;
			& .discount_tooltip_wrap {
				&.is-open {
					& .discount_tooltip_text {
						opacity: 1;
					}
				}
			}
			& .discount_tooltip_btn {
				font-size: 0.85em;
				color: var(--color-alert);
				cursor: pointer;
				flex-shrink: 0;
			}
			& .discount_tooltip_text {
				position: absolute;
				bottom: calc(100% + 8px);
				left: 50%;
				transform: translateX(-50%);
				white-space: nowrap;
				background: rgba(30, 30, 30, 0.88);
				color: #fff;
				padding: 0.45em 0.85em;
				border-radius: 5px;
				font-size: 0.75rem;
				font-weight: normal;
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.2s;
				z-index: 100;
				&::after {
					content: "";
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
					border: 6px solid transparent;
					border-top-color: rgba(30, 30, 30, 0.88);
				}
			}
		}
	}
	& .price_normal,
	& .price_down,
	& .goods_price_hidden,
	& .price_down_apply_vip,
	& .price_vip {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: baseline;
	}
	& .price_normal span {
		text-decoration: line-through;
		text-decoration-thickness: 1px;
	}
	& .price_down {
		&::before {
			content: "BW価格：";
		}
	}
	& .goods_price_hidden + .price_down,
	& .price_down_apply_vip + .price_vip {
		border-bottom: 1px solid var(--color-border-pink);
		&::before {
			display: none;
		}
	}
	/*値引額(price_down)が無い場合は通常価格(goods_price_hidden)のスタイルを変更*/
	&:has(.goods_price_hidden) {
		.goods_price_hidden {
			border-bottom: none;
			position: relative;
			margin-bottom: 0.25em;
			.price {
				font-size: 1rem;
			}
			span, em {
				text-decoration: none;
				font-size: 0.875em;
			}
			&::before {
				content: "BW価格：";
				font-size: 0.875em;
			}
			&::after {
				content: "";
				display: inline-block;
				border-bottom: 1px solid var(--color-sub);
				width: calc(100% - 4.0em);
				position: absolute;
				top: 0.7em;
				right: 0;
			}
		}
	}
	.price_down_apply_vip {
			border-bottom: none;
			position: relative;
			margin-bottom: 0.25em;
			.price {
				font-size: 1rem;
			}
			span, em {
				text-decoration: none;
				font-size: 0.875em;
			}
			&::before {
				content: "キャンペーン価格：";
				font-size: 0.875em;
			}
			&::after {
				content: "";
				display: inline-block;
				border-bottom: 1px solid var(--color-sub);
				width: calc(100% - 7.8em);
				position: absolute;
				top: 0.7em;
				right: 0;
			}
		}

	.list_price {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		border-bottom: none;
		position: relative;
		color: var(--color-sub);
		margin-bottom: .5em;
		.price {
			font-size: 1rem;
		}
		span, em {
			color: var(--color-sub);
			text-decoration: none;
			font-size: 0.875em;
		}
		&::before {
			content: "定価：";
			font-size: 0.875em;
		}
	}
	p.priceIncludingTax {
		color: var(--color-sub);
		font-size: var(--font-size-s);
		text-align: right;
		.price {
			font-size: var(--font-size-base);
		}
		em {
			font-size: .875em;
			color: var(--color-sub);
		}
		&::before {
			content: "(税込";
			margin-right: .25em;
		}
		&::after {
			content: ")";
		}
	}
}

/*商品詳細カート部分*/
.detail_normal_cart_box,
.detail_sku_cart_box {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	align-items: flex-end;
	gap: .75em 25px;
	width: 100%;
	@media (max-width: 960px) {
		justify-content: flex-end;
	}

	& .orderNumLimitWrap {
		width: 100%;
		text-align: right;
		font-size: var(--font-size-s);
		p {
			margin: 0;
		}
	}

	& .quantity_area {
		display: flex;
		align-items: center;
		margin-left: auto;
		& p {
			margin: 0 10px 0 0;
		}
		& .quantity_select {
			display: grid;
			grid-template-columns: 40px 1fr 40px;
			grid-template-rows: auto;
			grid-template-areas: "minus num plus";
			align-items: end;
			width: 150px;
			.minusButton {
				grid-area: minus;
			}
			.addCount,
			.addCount_sku {
				grid-area: num;
				padding: 0;
				height: 2.25rem;
				text-align: center;
			}
			.plusButton {
				grid-area: plus;
			}
			input[type="button"] {
				padding: 0;
				text-align: center;
				height: 2.25rem;
			}
		}
	}

	& .btn_cart {
		flex: 1 0 0%;
		min-width: 250px;
		width: fit-content;
		& a {
			font-size: 1.2rem;
			padding: 15px 8px;
			text-align: center;
			& span {
				line-height: 1;
			}
		}
	}
	
	&:has(.after_login_message) {
		justify-self: flex-end;
		flex-direction: column;
		font-size: 1.25em;
		& .after_login_message {
			border-bottom: 1px solid var(--color-border-pink);
		}
	}

	@media screen and (max-width: 600px) {
		& .quantity_area {
			margin-left: auto;
		}
	}
}

/*ブランド登録申請ボタン、欠品解消お知らせ登録ボタン、 事前購入必須商品ボタン、商品選択ボタン */
.btn_to_brand_consent,
.btn_add_stock_request,
.btn_to_pre_purchase_goods,
.btn_to_campaign_page,
.btn_cart.is_yoridori,
.btn_before_sale,
.btn_end_of_sale,
.btn_discontinued {
	flex: 1 0 0%;
	width: 100%;
	justify-items: end;
	a {
		display: block;
		background-color: var(--color-conversion);
		color: #fff;
		width: 100%;
		max-width: 400px;
		padding: 0.6em 1em;
		border-bottom: none;
		text-align: center;
		font-size: 1.125em;
	}
	@media (max-width: 960px) {
		flex: initial;
	}
}
.btn_before_sale,
.btn_end_of_sale,
.btn_discontinued {
	a {
		background-color: #aaa !important;
		pointer-events: none;
	}
}

.out_of_stock_message {
	width: 100%;
	font-size: 0.94rem;
}

/* お気に入りボタン */
.icon_favorite_area {
	width: 100%;
}
.icon_favorite {
	color: var(--color-text-gray);
	font-size: 0.94rem;
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	margin-left: auto;
	&::before {
		content: "";
		background: url(../images/icon/icon_alexander.svg) no-repeat center right / contain;
		display: inline-block;
		width: 1.573em;
		height: 2em;
		vertical-align: text-top;
		transition: var(--transition);
	}

	& a {
		border: none;
		&:hover {
			color: var(--color-text);
			opacity: 0.8;
		}
	}

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

/*商品キャッチコピー*/
.itemDetailCatchtext {
	margin-top: 20px;
	white-space: pre-wrap;
}

/*インクルードエリア*/
.goodsDetail_include {
	font-size:1.0em;
}
.goodsDetail_include table {
	border-collapse:collapse;
	border:1px solid #666;
}
.goodsDetail_include table td {
	border:1px solid #666;
	padding:5px;
}
.goodsDetail_include p {
	margin:10px 0 0;
}

/*ご注意*/
.attention {
	font-size:1.0em;
}
.attention ul {
	border:1px solid #CCC;
	padding:7px;
}
.attention li p {
	color:#FF0000;
}
.attention li.list {
	text-indent: -1em;
	margin-left: 1em;
}

.recommendTitle {
	display: none;
}
.recommend_item {
	width: 122px;
	float: left;
	display: block;
	margin: 0 20px 0 0;
	padding-bottom: 10px;
}
.recommend_item:nth-child(5) {
	margin-right:0;
}

@media screen and (max-width: 600px) {
	.recommend_item {
		width: 40%;
		float: left;
		display: block;
		margin: 0 10px;
		padding-bottom: 10px;
	}
	.recommend_item:nth-child(5){
		margin-right:10px;
	}
	.area_sns {
		padding: 1em var(--screen-pd-lr);
		text-align: right;
	}
}

.relatedGoodsIncludeItemWrap {
	display: flex;
	flex-wrap: wrap;
	.items {
		width: 100%;
	}
}
.relatedGoodsList {
	ul {
		li {
			width: 25%;
		}
	}
}

/* SKU見出し */
.pWrap[class*="skuClassifyName"] {
	color: var(--color-text-gray);
	font-size: var(--font-size-s);
}
.skuClassifyName2ItemWrap,
.skuClassifyName3ItemWrap {
	margin-top: .5em;
}

/* SKU選択ボタン */
.skuSelectedGroup {
	border-top: var(--border);
	border-bottom: var(--border);
	padding: 10px 0;
}
.skuSelectedGroup .comboboxWrap .items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(139px, 1fr));

	@media screen and (max-width: 600px) {
		grid-template-columns: 1fr;		
	}
}

.skuSelectedGroup label {
	font-size: 14px;
	border: 1px solid transparent;
	border-radius: 2px;
	padding: 8px 8px 8px 2em;
	cursor: pointer;
	position: relative;
	transition: var(--transition);
}

.skuSelectedGroup label + label {
	margin: 0;
}
.skuSelectedGroup label:empty {
	display: none;
}

.skuSelectedGroup input[type="radio"] {
	display: none;
}
.skuSelectedGroup label::before, .skuSelectedGroup label::after {
	content: "";
	display: inline-block;
	background-color: #fff;	
	border-radius: 100%;
	position: absolute;
	inset: 0;
	margin: auto 0;
}
.skuSelectedGroup label::before {
	border: var(--border);
	width: 0.86em;
	height: 0.86em;
	left: 8px;
}
.skuSelectedGroup label::after {	
	width: 0.43em;
	height: 0.43em;
	left: calc(8px + 0.28em);
}

.skuSelectedGroup label:has(input[type="radio"]:checked) {
	border-color: var(--color-sub);
	&::after {
		background-color: var(--color-sub);
	}
}
.skuSelectedGroup label:hover {
	background-color: var(--color-background-pink);
	border-color: var(--color-sub);
	&::after {
		background-color: var(--color-sub);
	}
}

/*SKU用*/
.main_sku_box {
	margin-top: 25px;
}
.detail_sku_box {
	display: none; /* jsで表示制御するので初期非表示に */
	margin-top: 20px;

	& .detail_sku_txt_box {
		display: none;
	}
}

/*SKU用：カート小ボタン*/
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_cart {
	width:58px;
	height:37px;
	margin-right:5px;
	background-image:url(../images/btn_cart_sku.png);
	background-repeat:no-repeat;
}
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_cart:hover {
	width:58px;
	height:37px;
	background-image:url(../images/btn_cart_sku_on.png);
	background-repeat:no-repeat;
}
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_cart span {
	display:none;
}
/*SKU用：再入荷小ボタン*/
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_stock {
	width:58px;
	height:37px;
	margin-right:5px;
	background-image:url(../images/btn_stock_sku.png);
	background-repeat:no-repeat;
}
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_stock:hover {
	width:58px;
	height:37px;
	background-image:url(../images/btn_stock_sku_on.png);
	background-repeat:no-repeat;
}
.detail_sku_box .detail_sku_price_box ul.sku_cart li.sku_stock span {
	display:none;
}

/* よりどり商品選択 */
.selectGoodsArea {
	background-color: var(--color-background-gray);
	padding: 2em clamp(1rem, -0.500rem + 4vw, 2rem);
	overflow-y: auto;
	max-height: calc(100dvh - var(--screen-pd-lr) * 2 - 1.5rem);
}
.goodsSelectionNumItemWrap,
.goodsSelectionMinPriceItemWrap {
	margin-bottom: 1em;
	.goodsSelectionNum,
	.goodsSelectionMinNum,
	.goodsSelectionMinPrice {
		border-bottom: 1px solid var(--color-alert);
	}
}
.bonusItemChildListTitleItemWrap.h2Wrap {
	margin-bottom: .5rem;
}
.itemSelectionGoodsTitleItemWrap {
	margin-bottom: .5rem;
}
.itemSelectionGoodsList {
	display: block;
	tbody {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(2rem, 0.250rem + 2vw, 2.5rem) clamp(1rem, 0.250rem + 2vw, 1.5rem);
		@media (max-width: 960px) {
			grid-template-columns: repeat(3, 1fr);
		}
		@media (max-width: 600px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.itemSelectionGoodsListGoodsSelectionImgThumbCol {
		display: flex;
		flex-direction: column;
		gap: 1em;
		height: 100%;
		a {
			border-bottom: none;
		}
	}
	.detailsImg {
		background-color: #fff;
	}
	.childGoodsName {
		border-bottom: none;
		display: block;
		margin-bottom: .5em;
		@media (max-width: 960px) {
			font-size: var(--font-size-s);
		}
	}
	.priceItemWrap {
		.suffixLabel {
			font-size: var(--font-size-s);
		}
	}
	.childOrderNumItemWrap {
		margin-top: auto;
		.items {
			font-size: var(--font-size-s);
			.quantity_select {
				display: flex;
			}
			.childOrderNumPreLabel {
				grid-area: preLabel;
				padding: 2px 5px 2px 0;
				@media screen and (max-width: 600px) {
					display: none;
				}
			}
			.childOrderNum {
				grid-area: num;
				width: 8em;
				height: 2em;
			}
			.childOrderNumSuffixLabel {
				grid-area: suffixLabel;
			}
			.orderNumMsg {
				grid-area: orderNumMsg;
				margin-top: .5em;
				&:empty {
					display: none;
				}
			}
			.plusButton,
			.minusButton {
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
				background-color: var(--color-conversion);
				margin: 0;
				padding: 0;
				width: 2em;
				height: 2em;
				color: #fff;
			}
			.__error_childOrderNum {
				grid-area: error;
				&:not(:has(.alertMessageContent)) {
					display: none;
				}
			}
			@media (max-width: 600px) {
				grid-template-columns: 1fr 2em 4em 1em;
			}
		}
	}
	@media (max-width: 600px) {
		padding: 1em 0;
	}
}
.selectedNumItemWrap,
.selectedPriceItemWrap,
.selectedMinNumItemWrap {
	text-align: center;
	margin-block: 1.5rem 1.5rem;
	.NUMBER {
		font-size: 1.125em;
	}
	progress {
		-webkit-appearance: none;
		-moz-appearance: none;
		background-color: #fff; /* プログレスバーの背景色/-moz- 用 */
		height: 4px;
		max-width: 280px;
		width: 100%;
	}
	::-webkit-progress-bar {
		background-color: #fff; /* プログレスバーの背景色/-webkit- 用 */
	}
	::-webkit-progress-value {
		background-color: var(--color-main); /* プログレスバーの進捗部分色/-webkit- 用 */
	}
	::-moz-progress-bar {
		background-color: var(--color-main); /* プログレスバーの進捗部分色/-moz- 用 */
	}
	&.few {
		.selectedNum {
			color: var(--color-alert);
		}
		::-webkit-progress-value {
		background-color: var(--color-alert);
		}
		::-moz-progress-bar {
			background-color: var(--color-alert);
		}
	}
}
.selectedNumItemWrap {
	&.over {
		.selectedNum {
			color: var(--color-alert);
		}
		::-webkit-progress-value {
		background-color: var(--color-alert);
		}
		::-moz-progress-bar {
			background-color: var(--color-alert);
		}
	}
}
.orderSelectedGoodsItemWrap {
	a {
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		padding: 0.5em 1em;
		font-size: 1.125em;
		text-align: center;
		background-color: var(--color-sub);
		border: 1px solid var(--color-sub);
		color: #fff;
	}
	&.few,
	&.over {
		a {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}

@media screen and (max-width: 960px) {
	#buttonGroup {
		flex-direction: column-reverse;
		gap: 1em;
	}
}

/* 商品レビュー */
#reviewList {
	& .DETAILS_ROW {
		padding: 30px 0 20px;
		border-bottom: var(--border);
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	& .DETAILS_ROW:first-child {
		padding-top: 0;
	}
}
.evaluation {
	color: var(--color-border-pink);
	font-size: 0.7em;
	width: 100%;
}
.addDate {
	color: var(--color-text-gray);
	font-size: 0.8em;
	margin-left: auto;
	padding-top: 0.12em;
	order: -1;
}
.middleName {
	color: var(--color-text-gray);
	max-width: calc(100% - 80px);
	order: -2;
}
.reviewTitle {
	display: none;
}

/* 全てのレビューを見る */
.viewAllReviewWrap {
	margin-top: 20px;
}



/* */
.reviewSummaryItemWrap .items {
	margin:10px auto;
}
.reviewSummary_itemLabel {
	border-bottom: 1px solid #b0b0b0;
	font-weight:bold;
}

body a#scrollUp{
	bottom: 110px;
}

@media screen and (max-width: 768px) {
	body a#scrollUp{
					bottom: 155px;
	}
}


/* フリーエリア
--------------------------------------------------------- */

/* カラム */
[class*="colWrap"] {
	display: grid;
	gap: 30px 15px;
	margin-top: clamp(20px, 3.5vw, 40px);
}
.colWrap {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.colWrap_s {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
h2 + .colWrap {
	margin-top: 0;
}

.colBox {
	padding-bottom: 20px;

	& .title, & .txt {
		padding: 0 clamp(12px, 2vw, 20px);
	}
	& .title {
		font-size: 16px;
		line-height: 1.5;
		margin-top: 1em;
	}
	& .txt {
		font-size: 14px;
		line-height: 1.7;
		margin-top: 0.5em;
	}
}

.colListWrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 30px 15px;
}
.colList {
	display: flex;
	gap: 30px 15px;

	&	.img {
		width: 150px;
	}
	& .txtWrap {
		flex: 1 0 0%;
	}
	& .title {
		font-size: 16px;
		line-height: 1.5;
	}
	& .txt {
		font-size: 14px;
		margin-top: 0.5em;
	}
}
@media screen and (max-width: 960px) {
	.colListWrap {
		grid-template-columns: auto;
	}
}

/* コンテンツ */
[class*="contentBox"] {
	margin-top: clamp(30px, 4.5vw, 50px);
	padding: clamp(30px, 3.5vw, 50px) clamp(15px, 3.5vw, 40px);
}
.contentBox01 {
	background-color: var(--color-background-pink);

	& .colBox {
		background-color: #fff;
	}
}

.contW_mid {
	margin-left: auto;
	margin-right: auto;
}

.borderBox {
	border-bottom: var(--border);
	padding: 40px 0;

	&:first-of-type {
		padding-top: 0;
	}
}

/* tabs内 */
.tabs {

	& h2 {
		font-size: clamp(18px, 2.2vw, 24px);
		line-height: 1.3;
		margin-bottom: clamp(10px, 2.5vw, 35px);

		&:not(:first-of-type) {
			margin-top: clamp(30px, 4.8vw, 60px);
		}
	}

	& figure {
		text-align: center;

		& figcaption {
			margin-top: 0.8em;
			text-align: left;
		}
	}
}

.tabButtons {
	margin: clamp(50px, 5.8vw, 70px) 0 0;
}

.tabContent {
	padding: 0 var(--screen-pd-lr);
	& p + p {
		margin-top: 1em;
	}
}

.tabContentInner {
	padding: clamp(40px, 5.8vw, 70px) 0;

	&.bdr_btm, & .bdr_btm {
		border-bottom: var(--border);
	}

	& .linkArrowWrap {
		margin-top: 2em;
	}
	& .linkArrow {
		margin-left: auto;
	}
}

.set-group:has( .swiperWrap):not(:has(.browsingGoods)) {
	margin: clamp(3.75rem, 1.875rem + 5vw, 5rem) 0;
}

/* Select goods modal */
.selectGoodsModal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.selectGoodsModal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.selectGoodsModal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.selectGoodsModal.is-open .selectGoodsModal__overlay {
	opacity: 1;
}

.selectGoodsModal__dialog {
	position: relative;
	background-color: #fff;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	max-height: calc(100vh - 3rem);
	width: min(960px, calc(100% - 3rem));
	transform: translateY(1rem);
	opacity: 0;
	transition:
		transform 0.4s ease,
		opacity 0.4s ease;
}

.selectGoodsModal.is-open .selectGoodsModal__dialog {
	transform: translateY(1em);
	opacity: 1;
}

button[type="button"].selectGoodsModal__close {
	position: absolute;
	top: calc(var(--screen-pd-lr) * -1 - 0.5em);
	right: 0;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: var(--font-size-s);
	line-height: 1;
	padding: 0.25em 0.75em;
	transition: opacity 0.2s ease;
	background-color: transparent;
	border: none;
	padding: .25em;
	color: #fff;
	font-family: var(--font-family-base);
	&::before {
		content: "×";
		margin-right: .25em;
	}
}
.font-yumin button[type="button"].selectGoodsModal__close {
	font-weight: 500;
}

.selectGoodsModal__close:hover {
	opacity: 0.7;
}

.selectGoodsModal__close:focus-visible {
	outline: 2px solid var(--color-primary, #111);
	outline-offset: 2px;
}

body.selectGoodsModal-open {
	overflow: hidden;
}

@media screen and (max-width: 960px) {
	.selectGoodsModal {
		padding: 0;
	}
	.selectGoodsModal__overlay {
		background-color: rgba(0, 0, 0, 0.7);
	}
	.selectGoodsModal__dialog {
		width: calc(100% - var(--screen-pd-lr) * 2);
		max-height: calc(100dvh - var(--screen-pd-lr) * 2 - 1.5rem);
	}
}

.introductionGuide{
	width: 100%; 
	justify-content: flex-end;
}

.footerAddCartArea {
	@media (min-width: 961px) {
		display: none !important;
	}
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 100;
	background-color: #fff;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
	padding: 0.5em var(--screen-pd-lr);
	.items {
		display: grid;
		grid-template-columns: 1fr 200px minmax(250px, 400px);
		grid-template-rows: auto;
		grid-template-areas: "num cartBtn";
		gap: .5em 1em;
		max-width: 1200px;
		margin-inline: auto;
		#footerGoodsName {
			grid-area: goodsName;
			font-size: 1.25em;
		}
		#footerGoodsPrice {
			grid-area: price;
			text-align: right;
			p {
				display: inline-block;
			}
			em {
				color: var(--color-sub);
				margin-left: .25em;
			}
			.priceIncludingTax {
				&::before {
					content: "(税込";
					margin-right: .25em;
				}
				&::after {
            		content: ")";
        		}
			}
			strong {
				font-size: 1.6em;
				margin-right: .125em;
			}
			&::before {
				content: "BW価格：";
				font-size: 1em;
				display: inline-block;
			}
		}
		.footerSelect {
			grid-area: num;
			align-self: center;
			display: grid;
			grid-template-columns: 40px 1fr 40px;
			grid-template-rows: auto;
			grid-template-areas: "minus num plus";
			align-items: end;
			justify-self: end;
			width: 100%;
			max-width: 180px;
			height: 2.25rem;
			input {
				padding: 0;
				text-align: center;
				height: 2.25rem;
			}
		}
		.footerAddCart, .footerAddCartSku {
			grid-area: cartBtn;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: .5em;
				font-size: 1.2rem;
				padding: 7px;
				text-align: center;
			}
			.footerSelectItem {
				min-width:100%;
				a {
					min-width:auto;
					&::before {
						display: none;
					}
				}
			}
		}
		.after_login_message {
			grid-area: cartBtn;
			justify-self: flex-end;
        	flex-direction: column;
        	font-size: 1.25em;
        	a {
				border-bottom: 1px solid var(--color-border-pink);
			}
		}
		@media screen and (max-width: 960px) {
			grid-template-columns: 1fr 65%;
			grid-template-rows: auto;
			grid-template-areas: "num cartBtn";
			#footerGoodsName {
				font-size: 1em;
			}
			#footerGoodsPrice {
				font-size: var(--font-size-s);
				line-height: 1;
			}
			.footerAddCart, .footerAddCartSku {
				a {
					padding: .5em;
					font-size: 1em;
				}
			}
		}
	}
}

.iconList .goodsIcon{
	height: 25px;
}