@charset "utf-8";
/*--------------------------------------------
	orderSummary.css
	注文合計金額、特典表示用の共通CSS
--------------------------------------------*/

.orderSummaryGroup,
.cartSummaryAndButtonGroup {
	font-size: var(--font-size-ss);

	/* 見出し */
	& .level_h2 {
		margin: 0 0 .5em;
		padding: 0;
		font-size: inherit;
		font-weight: bold;
		color: var(--text-color);
		background-color: transparent;
	}
}

.orderTotalGroup {
	background-color: var(--bg-color-l-gray);
	padding: 15px 20px;

	/* 送料再計算エリア */
	& .address_wrap {
		display: flex;

		& .labels {
			width: auto;
			white-space: nowrap;

			&::after {
				content: "：";
			}
		}
	}
	& .postcode_wrap {
		padding-bottom: .5em;

		& .items {
			display: grid;
			grid-template-rows: auto auto auto;
			grid-template-columns: 1fr 95px;
			grid-template-areas: 
				"input btn_search"
				"btn_recalc btn_recalc"
				"msg_error msg_error";
			gap: 0 .5em;
			margin-top: .5em;

			& input.postcode {
				width: 100%;
				max-width: 100%;
				grid-area: input;
				margin: 0;
			}

			& input.btn_search {
				grid-area: btn_search;
				width: 100%;
				font-size: inherit;
				margin-top: 0;
				background: linear-gradient(to bottom, #898787 30%, #2d2827 100%);
				border: none;
				border-radius: 3px;
				color: #fff;
				font-weight: bold;
			}

			& input.btn_recalc {
				grid-area: btn_recalc;
				width: 100%;
				max-width: 120px;
				margin: .5em auto 0;
				background: linear-gradient(to bottom, #083da9 0%,#05297d 100%);
				border: none;
				border-radius: 3px;
				color: #fff;
				font-size: .875rem;
			}

			& .__error {
				grid-area: msg_error;
			}
		}
	}

	/* 金額テーブル */
	& .table.table_price_summary {
		font-size: inherit;
		margin-top: 1em;

		& .tr {
			& .th,
			& .td {
				padding: 0;
				border: none;
				background-color: transparent;
			}

			& .th {
				width: auto;
			}

			& .td {
				text-align: right;
			}

			&.totalPriceCol {
				& .th,
				& .td {
					border-top: 1px solid var(--border-color-table);
					vertical-align: baseline;
					padding-top: .3em;
				}
				
				& .td {
					color: #b12704;

					& .totalPrice {
						font-size: 158%;
						font-weight: bold;
					}

					& .suffixLabel {
						color: var(--text-color);
					}
				}
			}

			&:has( + .totalPriceCol) {
				& .th,
				& .td {
					padding-bottom: .3em;
				}
			}
		}

		.usePointArea {
			& .th, & .td {
				border-top: 1px solid var(--border-color-table);
				padding-top: .5em;
			}
		}
	}

	& #breakdownArea.tr {
		& .th, & .td {
			padding-bottom: .5em;
		}
		& .breakdownResults tbody tr {
			& th, & td {
				border: none;
				padding: 0;
				background-color: transparent;
			}
			& .right {
				text-align: right;
			}
		}
	}
}

@media screen and (max-width: 960px) {
	.orderSummaryGroup,
	.cartSummaryAndButtonGroup {
		font-size: var(--font-size-s);

		/* 見出し */
		& .level_h2 {
			text-align: left;
		}
	}

	.orderTotalGroup {
		display: block;
		padding: 1em;
		border: 1px solid var(--border-color-section);

		/* 金額テーブル */
		& .table.table_price_summary {
			margin-top: 0;

			& .tr {
				& .th,
				& .td {
					border-bottom: 1px solid var(--border-color-table);
					padding: .3em 0;
				}

				& .th {
					width: 70%;
					padding-left: 50%;
				}

				& .td {
					width: 30%;
				}

				&.totalPriceCol {
					& .th,
					& .td {
						border: none;
					}
				}

				&:has( + .totalPriceCol) {
					& .th,
					& .td {
						padding-bottom: .3em;
						border-bottom: 2px solid var(--text-color-sub2);
					}
				}
			}
		}
	}
}

@media screen and (max-width: 600px) {
	.orderTotalGroup {
		display: block;

		& .table.table_price_summary {
			margin-top: 1em;

			& .tr {
				& .th {
					width: fit-content;
					padding-left: 0;
				}

				& .td {
					width: 60%;
				}
			}
		}
	}
}