@charset "utf-8";

/* 画面説明 */
.pagePartsHtmlText.Cart {
	margin-top: var(--screen-pd-lr);
	font-size: var(--font-size-ss);
}

/* レイアウト */
.formArea {
	display: grid;
	grid-template-rows: auto auto auto auto auto auto auto 1fr;
	grid-template-columns: calc(100% - 280px - clamp(20px, 5px + 2.5vw, 30px)) 280px;
	grid-template-areas:
		"cartInfo summaryArea"
		"ageVerification summaryArea"
		"alertArea summaryArea"
		"goodsList summaryArea"
		"buyAfterCart summaryArea"
		"promotion summaryArea"
		"appealArea summaryArea"
		"relatedGoods summaryArea";
	gap: 0 clamp(20px, 5px + 2.5vw, 30px);
	margin-top: var(--screen-pd-lr);

	& .cartInfoGroup,
	& .emptyMessageItemWrap {
		grid-area: cartInfo;
	}

	& .liquorGroup {
		grid-area: ageVerification;
	}

	& .goodsAlertGroup {
		grid-area: alertArea;
	}

	& .orderGoodsListWrap {
		grid-area: goodsList;
	}

	& .buyAfterCartGroup {
		grid-area: buyAfterCart;
	}

	& .cartInfoGroup {
		grid-area: cartInfo;
	}

	& .promotionArea {
		grid-area: promotion;
	}

	& .cartSummaryAndButtonGroup {
		grid-area: summaryArea;
	}

	& .appealAreaIncludeItemWrap {
		grid-area: appealArea;
	}

	& .relatedArea {
		grid-area: relatedGoods;
	}
}

/* カートが空の時 */
.CartEmpty {
	font-size: var(--font-size-s);
	margin-bottom: clamp(20px, -10px + 5vw, 40px);
}

/* 後で買うカートメッセージ */
.buyAfterCartTitleItemWrap {
	font-size: var(--font-size-ss);
}

.buyAfterCartTextItemWrap {
	font-size: var(--font-size-ss);
	margin-bottom: 20px;
}

/* 送料無料メッセージ */
.cartInfoGroup {
	border: 1px solid #b12704;
	padding: 15px 20px;
	font-size: .75rem;
	line-height: 1.5;
	margin-bottom: 1em;

	& .postageMsg {
		margin-bottom: .7em;
	}

	& .postageMsgLink {
		padding-left: 10px;
		background: url(../img/common/icon/arr03.gif) no-repeat left center;
	}
}

/* ボタンエリア */
.cartSummaryAndButtonGroup {
	&>.set-group {
		margin-bottom: 1.5em;
	}
	& .orderTotalGroup {
		& .totalPriceCol {
			display: table-row;
		}
	}

	& .buttonArea {
		&:not(:has(.nextButton)) {
			margin-top: 0;
		}

		& .selfOrderLinkItemWrap {
			display: none;
		}
	}
}
.selection .cartSummaryAndButtonGroup {
	.amount_info_title_wrap {
		&::before {
			content: "本注文による利用マイル数（合計）";
			font-weight: bold;
		}
		.level_h2 {
			display: none;
		}
	}


}

/* 注意事項 */
.CartCaution {
	font-size: var(--font-size-ss);
}


@media screen and (max-width: 960px) {

	/* レイアウト */
	.formArea {
		display: block;
	}

	/* 送料無料メッセージ */
	.cartInfoGroup {
		padding: 1em;
	}
}