@charset "utf-8";
/*--------------------------------------------
  orderGoodsList.css
  注文明細表示用CSS
--------------------------------------------*/

.orderGoodsListWrap {
	margin-bottom: var(--section-bottom);
}

.contents .orderGoodsList {
	border-top: 1px solid var(--border-color-table);
	border-bottom: 1px solid var(--border-color-table);
	margin-bottom: .5em;

	/* 商品行 レイアウト */
	& .orderGoodsListRow {
		display: grid;
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-columns: 110px 8em 10em 1fr 65px;
		grid-template-areas: 
			"img goodsName goodsName goodsName deleteBtn"
			"img updownSellBtn updownSellBtn updownSellBtn deleteBtn"
			"img goodsAlert goodsAlert goodsAlert deleteBtn"
			"img price num subTotal deleteBtn"
			"img . . . deleteBtn";
		gap: 0 1.5em;
		padding: 15px 0;
		font-size: var(--font-size-ss);

		& + .orderGoodsListRow {
			border-top: 1px dashed var(--border-color-table);
		}

		& select {
			padding: 5px 5px 5px 7px;
		}

		/* 商品画像 */
		& .orderGoodsImageCol {
			grid-area: img;

			& .detailsImg {
				max-width: 100px;
			}
		}

		/* 商品名 */
		& .orderGoodsNameCol {
			grid-area: goodsName;
			margin-bottom: .5em;

			& .goodsName {
				font-size: 142%;
			}

			& .childGoodsName {
				white-space: pre-wrap;
			}

			& .reglTermDispPreLabel:has( + .reglTermDisp:empty),
			& .reglTermDispPreLabel:has( ~ .reglTermPreLabel),
			& .reglTermDisp:has( + .reglTermPreLabel),
			& .reglTermPreLabel:has( + .reglTerm:empty) {
				display: none;
			}

			& select.reglTerm {
				width: clamp(100px, 25.000px + 12.5vw, 150px);;
			}
			& .reglTerm:not(:empty)::before {
				content: "定期間隔：";
			}
		}

		/* 商品アラート */
		& .goodsAlertLinkItemWrap  {
			grid-area: goodsAlert;

			& a {
				color: var(--text-color-link);
			}
		}

		/* 商品アップダウンセルリンク */
		& .orderGoodsUpDownSellCol {
			grid-area: updownSellBtn;

			& a {
				color: var(--text-color-link);
				padding-right: 1em;
				background: url(../../img/common/icon/arr03.gif) no-repeat right center;
			}
		}

		/* 単価 */
		& .orderGoodsPriceCol {
			grid-area: price;
			align-self: center;
		}

		/* 数量 */
		& .orderGoodsOrderNumCol {
			grid-area: num;
			align-self: center;

			& .items {
				display: flex;
				align-items: center;

				& .preLabel {
					white-space: nowrap;
					padding-right: .5em;
				}
			}

			& select {
				width: 75px;
				margin-right: 0;
			}
		}

		/* 小計 */
		& .orderGoodsTotalPriceCol {
			grid-area: subTotal;
			align-self: center;

			& .items {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
			}

			& .goodsTotalPrice {
				color: #b12704;
				font-size: 158%;
				word-break: keep-all;

				&::before {
					content: "￥";
					font-size: var(--font-size-ss);
				}
			}
		}

		/* 削除ボタン */
		& .orderGoodsDeleteLinkCol {
			grid-area: deleteBtn;
			align-self: center;

			& .deleteLink {
				width: calc(100% - 5px);
				min-height: 20px;
				padding: 3px 0 0 30px;
				background: url(../../img/common/icon/icon_delete.gif) no-repeat left center;
				color: var(--text-color-link);
				border: none;
			}
		}
	}

	/* 確認画面 商品行 レイアウト */
	&.orderGoodsListConfirm .orderGoodsListRow {
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-template-columns: 110px 8em 10em 1fr;
		grid-template-areas: 
			"img goodsName goodsName goodsName"
			"img price num subTotal"
			"img guideLine guideLine guideLine";

		/* ガイドライン */
		& .guideLineItemWrap {
			grid-area: guideLine;

			& .guideLine:not(:empty) {
				background-color: var(--bg-color-l-gray);
				padding: 15px var(--screen-pd-lr);
				margin-top: .5em;
			}
		}
	}
}

.cartAttensionMessage {
	display: block;
	font-size: var(--font-size-ss);
	margin-top: 1em;
}

@media screen and (max-width: 960px) {
	.cartAttensionMessage {
		margin-top: 0;
		text-align: right;
	}
}

@media screen and (max-width: 600px) {
	.contents .orderGoodsList {	
		/* 商品行 レイアウト */
		& .orderGoodsListRow {
			display: grid;
			grid-template-rows: auto auto auto auto auto 1fr;
			grid-template-columns: 110px 1fr 65px;
			grid-template-areas: 
				"img goodsName goodsName"
				"img updownSellBtn updownSellBtn"
				"img goodsAlert goodsAlert"
				"img price price"
				"img subTotal subTotal"
				"img num deleteBtn";
	
			& + .orderGoodsListRow {
				border-top: 1px dashed var(--border-color-table);
			}
	
			& select {
				padding: 7px;
			}
	
			/* 商品名 */
			& .orderGoodsNameCol {
				margin-bottom: .5em;
				
				& .goodsName {
					display: inline-block;
					font-size: var(--font-size-s);
					margin-bottom: .5em;
				}	
			}

			/* 単価 */
			& .orderGoodsPriceCol {
				justify-self: end;
			}

			/* 数量 */
			& .orderGoodsOrderNumCol {
				justify-self: end;

				& select {
					text-align: center;
				}
			}
	
			/* 小計 */
			& .orderGoodsTotalPriceCol {
				justify-self: end;
				margin-bottom: .6em;

				& .goodsTotalPrice {
					font-size: var(--font-size-s);
				}
			}
	
			/* 削除ボタン */
			& .orderGoodsDeleteLinkCol {
				& .deleteLink {
					width: 100%;
					padding: 8px 0 8px 15px;
					background: url(../../img/common/icon/ic_002.png) no-repeat 10px center, linear-gradient(to bottom, #fefefe 30%, #b8b8b8 100%);
					background-size: 12px 12px,100% 100%;
					color: var(--text-color-strong);
					font-weight: bold;
					border: 1px solid var(--text-color);
					box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
				}
			}
		}

		&.orderGoodsListConfirm .orderGoodsListRow { /* 確認テーブル用 */
			display: grid;
			grid-template-rows: auto auto auto auto auto 1fr;
			grid-template-columns: 80px 1fr;
			grid-template-areas:
				"img goodsName"
				"img price"
				"img num"
				"img subTotal"
				"img guideLine";
		}
	}
}