/**
 * ==================================================
 * Theater Re write WEB SHOP
 * 注文手続き画面CSS
 *
 * ファイル：
 * assets/css/checkout.css
 *
 * 【役割】
 *
 * ・注文手続き画面
 * ・注文内容
 * ・お客様情報
 * ・配送先情報
 * ・支払い方法
 * ・確認ボタン
 * ・スマートフォン表示
 *
 * ==================================================
 */


/* ==================================================
 * 01. 注文手続き画面全体
 * ==================================================
 */

.trw-shop-main {
	min-width: 0;
}


/* ==================================================
 * 02. 注文手続きヘッダー
 * ==================================================
 */

.trw-order-header {
	margin-bottom: 28px;

	padding:
		36px
		38px;

	background:
		linear-gradient(
			135deg,
			#303030 0%,
			#292929 100%
		);

	border: 1px solid #494949;

	border-left: 4px solid #a82d35;
}


.trw-order-header .trw-shop-eyebrow {
	margin-bottom: 8px;

	color: #999999 !important;
}


.trw-order-header h1 {
	margin: 0;

	color: #f3f3f3 !important;

	font-size:
		clamp(
			27px,
			4vw,
			36px
		);

	font-weight: 600;

	letter-spacing: .04em;
}


.trw-order-header-lead {
	margin:
		12px
		0
		0;

	color: #b7b7b7 !important;

	font-size: 13px;

	line-height: 1.8;
}


/* ==================================================
 * 03. エラー表示
 * ==================================================
 */

.trw-order-error {
	margin-bottom: 24px;

	padding:
		18px
		20px;

	background: #3b292b;

	border: 1px solid #814149;

	border-left: 4px solid #b64a55;
}


.trw-order-error strong {
	color: #ffffff !important;

	font-size: 14px;
}


.trw-order-error ul {
	margin:
		10px
		0
		0;

	padding-left: 20px;
}


.trw-order-error li {
	margin-top: 4px;

	color: #f0d3d6 !important;

	font-size: 12px;

	line-height: 1.7;
}


/* ==================================================
 * 04. 共通カード
 * ==================================================
 */

.trw-order-card {
	margin-bottom: 24px;

	padding: 28px;

	background: #303030;

	border: 1px solid #4a4a4a;
}


/* ==================================================
 * 05. カード見出し
 * ==================================================
 */

.trw-order-card-heading {
	display: flex;

	align-items: flex-start;

	gap: 15px;

	margin-bottom: 25px;

	padding-bottom: 18px;

	border-bottom: 1px solid #4b4b4b;
}


.trw-order-step {
	display: flex;

	align-items: center;

	justify-content: center;

	width: 38px;
	height: 38px;

	flex:
		0
		0
		38px;

	background: #202020;

	border: 1px solid #5a5a5a;

	border-radius: 4px;

	color: #dddddd !important;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: .08em;
}


.trw-order-card-heading h2 {
	margin:
		0
		0
		4px;

	color: #f0f0f0 !important;

	font-size: 18px;

	font-weight: 700;
}


.trw-order-card-heading p {
	margin: 0;

	color: #929292 !important;

	font-size: 11px;

	line-height: 1.6;
}


/* ==================================================
 * 06. ご注文内容
 * ==================================================
 */


/* ------------------------------------------
 * 注文明細
 * ------------------------------------------ */

.trw-checkout-order-item {
	padding:
		16px
		0;

	border-bottom: 1px solid #494949;

	line-height: 1.7;
}


.trw-checkout-order-item strong {
	color: #eeeeee !important;
}


/* ------------------------------------------
 * 応援メッセージ
 * ------------------------------------------ */

.trw-checkout-order-item-message {
	margin:
		6px
		0
		0;

	color: #aaaaaa !important;

	font-size: 12px;

	line-height: 1.7;
}


/* ------------------------------------------
 * 明細金額
 * ------------------------------------------ */

.trw-checkout-order-item-price {
	margin:
		8px
		0
		0;

	color: #eeeeee !important;

	font-weight: 700;
}


/* ------------------------------------------
 * 合計
 * ------------------------------------------ */

.trw-checkout-order-total {
	margin-top: 18px;

	color: #ffffff !important;

	font-size: 20px;

	font-weight: 700;

	line-height: 1.7;

	text-align: right;
}




/* ==================================================
 * 07. 入力欄
 * ==================================================
 */

.trw-order-field {
	margin-bottom: 23px;
}


.trw-order-field:last-child {
	margin-bottom: 0;
}


.trw-order-field label {
	display: block;

	margin-bottom: 8px;

	color: #dddddd !important;

	font-size: 13px;

	font-weight: 700;
}


.trw-required {
	display: inline-block;

	margin-left: 7px;

	padding:
		2px
		7px;

	background: #8f3039;

	border-radius: 3px;

	color: #ffffff !important;

	font-size: 9px;

	font-weight: 700;

	vertical-align: 1px;
}


.trw-order-field input[type="text"],
.trw-order-field input[type="email"],
.trw-order-field input[type="tel"],
.trw-order-field input[type="number"],
.trw-order-field select,
.trw-order-field textarea {
	width: 100%;

	min-height: 48px;

	padding:
		12px
		14px;

	background: #252525 !important;

	border: 1px solid #565656 !important;

	border-radius: 4px;

	color: #eeeeee !important;

	font: inherit;

	font-size: 14px;

	outline: none;

	transition:
		border-color .15s ease,
		background .15s ease,
		box-shadow .15s ease;
}


.trw-order-field input:hover,
.trw-order-field select:hover,
.trw-order-field textarea:hover {
	border-color: #707070 !important;
}


.trw-order-field input:focus,
.trw-order-field select:focus,
.trw-order-field textarea:focus {
	background: #292929 !important;

	border-color: #a82d35 !important;

	box-shadow:
		0
		0
		0
		2px
		rgba(
			168,
			45,
			53,
			.15
		);
}


.trw-order-field input::placeholder,
.trw-order-field textarea::placeholder {
	color: #777777;
}


/* ==================================================
 * 08. 個人情報について
 * ==================================================
 */

.trw-order-privacy-note {
	margin-top: 28px;

	padding:
		17px
		18px;

	background: #292929;

	border: 1px solid #454545;

	border-left: 3px solid #666666;
}


.trw-order-privacy-note p {
	margin:
		0
		0
		7px;

	color: #a8a8a8 !important;

	font-size: 11px;

	line-height: 1.8;
}


.trw-order-privacy-note p:last-child {
	margin-bottom: 0;
}


.trw-order-privacy-note strong {
	color: #d9d9d9 !important;
}


/* ==================================================
 * 09. 支払い方法
 * ==================================================
 */

.trw-radio-list {
	display: grid;

	gap: 12px;
}


.trw-radio-item {
	position: relative;

	display: flex !important;

	align-items: center;

	gap: 14px;

	margin: 0 !important;

	padding:
		17px
		18px;

	background: #292929;

	border: 1px solid #4d4d4d;

	border-radius: 5px;

	cursor: pointer;

	transition:
		background .15s ease,
		border-color .15s ease,
		transform .15s ease;
}


.trw-radio-item:hover {
	background: #303030;

	border-color: #6a6a6a;

	transform:
		translateY(
			-1px
		);
}


.trw-radio-item input[type="radio"] {
	width: 18px;
	height: 18px;

	flex:
		0
		0
		18px;

	margin: 0;

	accent-color: #a82d35;

	cursor: pointer;
}


.trw-radio-item-text {
	display: block;

	min-width: 0;
}


.trw-radio-item-text strong {
	color: #e8e8e8 !important;

	font-size: 14px;

	font-weight: 700;
}


/*
 * 選択中
 */
.trw-radio-item:has(
	input[type="radio"]:checked
) {
	background: #382d2f;

	border-color: #a82d35;

	box-shadow:
		inset
		0
		0
		0
		1px
		#a82d35;
}


.trw-radio-item:has(
	input[type="radio"]:checked
)
.trw-radio-item-text strong {
	color: #ffffff !important;
}


/* ==================================================
 * 10. 注文確認ボタンエリア
 * ==================================================
 */

.trw-order-submit {
	margin-top: 30px;

	padding:
		28px
		24px;

	background: #292929;

	border: 1px solid #494949;

	text-align: center;
}


.trw-order-submit p {
	margin:
		0
		0
		15px;

	color: #999999 !important;

	font-size: 11px;

	line-height: 1.7;
}


.trw-order-submit-button {
	min-width: 300px;

	padding:
		15px
		32px;

	background: #a82d35 !important;

	border: 1px solid #a82d35 !important;

	border-radius: 4px;

	color: #ffffff !important;

	font-size: 14px;

	font-weight: 700;

	cursor: pointer;

	transition:
		background .15s ease,
		border-color .15s ease,
		transform .15s ease;
}


.trw-order-submit-button:hover {
	background: #bd3741 !important;

	border-color: #bd3741 !important;

	transform:
		translateY(
			-1px
		);
}


/* ==================================================
 * 11. パンくず
 * ==================================================
 */

.trw-shop-breadcrumb {
	margin-bottom: 20px;
}


/* ==================================================
 * 12. タブレット
 * ==================================================
 */

@media (max-width: 1100px) {

	.trw-order-header {
		padding:
			32px
			30px;
	}


	.trw-order-card {
		padding: 24px;
	}

}


/* ==================================================
 * 13. スマートフォン
 * ==================================================
 */

@media (max-width: 700px) {

	/*
	 * 固定下メニューとの重なり防止
	 */
	.trw-shop-page {
		padding-bottom: 110px;
	}


	.trw-order-header {
		margin-bottom: 20px;

		padding:
			26px
			20px;

		border-left-width: 3px;
	}


	.trw-order-header h1 {
		font-size: 26px;
	}


	.trw-order-header-lead {
		font-size: 12px;
	}


	.trw-order-card {
		margin-bottom: 18px;

		padding:
			20px
			16px;
	}


	.trw-order-card-heading {
		gap: 11px;

		margin-bottom: 20px;

		padding-bottom: 15px;
	}


	.trw-order-step {
		width: 32px;
		height: 32px;

		flex-basis: 32px;

		font-size: 9px;
	}


	.trw-order-card-heading h2 {
		font-size: 16px;
	}


	.trw-order-card-heading p {
		font-size: 10px;
	}


	.trw-order-field {
		margin-bottom: 20px;
	}


	.trw-order-field input[type="text"],
	.trw-order-field input[type="email"],
	.trw-order-field input[type="tel"],
	.trw-order-field input[type="number"],
	.trw-order-field select,
	.trw-order-field textarea {
		min-height: 50px;

		font-size: 16px;
	}


	.trw-radio-item {
		padding:
			16px
			14px;
	}


	.trw-order-submit {
		margin-top: 22px;

		padding:
			22px
			16px;
	}


	.trw-order-submit-button {
		width: 100%;

		min-width: 0;

		padding:
			16px
			18px;
	}

}


/* ==================================================
 * 14. 注文完了画面
 * ==================================================
 */


/* ------------------------------------------
 * 完了画面全体
 * ------------------------------------------ */

.trw-checkout-complete-main {
	min-width: 0;
}


/* ------------------------------------------
 * THANK YOU ヘッダー
 * ------------------------------------------ */

.trw-checkout-complete-main .trw-order-header {
	position: relative;

	overflow: hidden;

	margin-bottom: 28px;

	padding:
		42px
		38px;

	background:
		linear-gradient(
			135deg,
			#303030 0%,
			#272727 55%,
			#34272a 100%
		);

	border: 1px solid #4b4b4b;

	border-left: 4px solid #a82d35;
}


.trw-checkout-complete-main .trw-order-header::after {
	content: "";

	position: absolute;

	top: -90px;
	right: -60px;

	width: 220px;
	height: 220px;

	border: 1px solid rgba(
		168,
		45,
		53,
		.25
	);

	border-radius: 50%;
}


.trw-checkout-complete-main .trw-order-header .trw-shop-eyebrow {
	position: relative;

	z-index: 1;

	margin-bottom: 9px;

	color: #b86d73 !important;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: .18em;
}


.trw-checkout-complete-main .trw-order-header h1 {
	position: relative;

	z-index: 1;

	margin: 0;

	color: #ffffff !important;

	font-size:
		clamp(
			28px,
			4vw,
			38px
		);

	font-weight: 700;

	letter-spacing: .05em;
}


.trw-checkout-complete-main .trw-order-header-lead {
	position: relative;

	z-index: 1;

	margin-top: 13px;

	color: #bdbdbd !important;

	font-size: 13px;

	line-height: 1.8;
}


/* ------------------------------------------
 * 受付完了カード
 * ------------------------------------------ */

.trw-checkout-complete-main .trw-order-card:first-of-type {
	position: relative;

	padding:
		32px
		30px;

	background:
		linear-gradient(
			180deg,
			#313131 0%,
			#2b2b2b 100%
		);

	border: 1px solid #505050;
}


.trw-checkout-complete-main
.trw-order-card:first-of-type
.trw-order-card-heading {
	align-items: center;

	margin-bottom: 26px;
}


.trw-checkout-complete-main
.trw-order-card:first-of-type
.trw-order-step {
	width: 44px;
	height: 44px;

	flex:
		0
		0
		44px;

	background: #a82d35;

	border: 1px solid #bd4a52;

	border-radius: 50%;

	color: #ffffff !important;

	font-size: 18px;

	box-shadow:
		0
		0
		0
		5px
		rgba(
			168,
			45,
			53,
			.12
		);
}


.trw-checkout-complete-main
.trw-order-card:first-of-type
.trw-order-card-heading h2 {
	color: #ffffff !important;

	font-size: 20px;
}


.trw-checkout-complete-main
.trw-order-card:first-of-type
.trw-order-card-heading p {
	color: #a8a8a8 !important;

	font-size: 11px;
}


/* ------------------------------------------
 * 受付番号
 * ------------------------------------------ */

.trw-checkout-complete-order-number {
	position: relative;

	margin:
		28px
		0 !important;

	padding:
		26px
		22px !important;

	background: #242424;

	border: 1px solid #5a5a5a !important;

	border-radius: 6px;

	text-align: center;
}


.trw-checkout-complete-order-number::before {
	content: "ORDER NUMBER";

	display: block;

	margin-bottom: 8px;

	color: #8b8b8b;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: .18em;
}


.trw-checkout-complete-order-number span {
	margin-bottom: 8px !important;

	color: #9b9b9b !important;

	font-size: 10px !important;

	letter-spacing: .06em;
}


.trw-checkout-complete-order-number strong {
	display: block;

	color: #ffffff !important;

	font-size:
		clamp(
			20px,
			4vw,
			28px
		) !important;

	font-weight: 700;

	letter-spacing: .12em !important;

	word-break: break-all;
}


.trw-checkout-complete-main
.trw-order-card:first-of-type
> p {
	margin:
		18px
		0
		0;

	color: #aaa !important;

	font-size: 12px;

	line-height: 1.8;

	text-align: center;
}


/* ------------------------------------------
 * ご注文内容
 * ------------------------------------------ */

.trw-checkout-complete-main
.trw-order-card:nth-of-type(2) {
	padding:
		30px;

	background: #303030;

	border: 1px solid #4a4a4a;
}


.trw-checkout-complete-main
.trw-order-card:nth-of-type(2)
> div:not(.trw-order-card-heading) {
	padding:
		18px
		0 !important;

	border-bottom: 1px solid #484848 !important;
}


.trw-checkout-complete-main
.trw-order-card:nth-of-type(2)
> div:not(.trw-order-card-heading)
strong {
	display: block;

	color: #eeeeee !important;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.7;
}


.trw-checkout-complete-main
.trw-order-card:nth-of-type(2)
> div:not(.trw-order-card-heading)
p {
	margin:
		8px
		0
		0 !important;

	color: #cfcfcf !important;

	font-size: 14px;

	font-weight: 700 !important;
}


/* ------------------------------------------
 * 合計
 * ------------------------------------------ */

.trw-checkout-complete-main
.trw-order-card:nth-of-type(2)
> div:last-child {
	margin-top: 22px !important;

	padding:
		22px
		0
		0 !important;

	border-bottom: 0 !important;

	border-top: 1px solid #5a5a5a;

	color: #ffffff !important;

	font-size: 22px !important;

	font-weight: 700 !important;

	text-align: right !important;
}


/* ------------------------------------------
 * 完了案内
 * ------------------------------------------ */

.trw-checkout-complete-main
.trw-checkout-confirm-notice {
	margin:
		28px
		0;

	padding:
		22px
		24px;

	background: #292929;

	border: 1px solid #494949;

	border-left: 4px solid #a82d35;
}


.trw-checkout-complete-main
.trw-checkout-confirm-notice strong {
	display: block;

	margin-bottom: 8px;

	color: #ffffff !important;

	font-size: 14px;
}


.trw-checkout-complete-main
.trw-checkout-confirm-notice p {
	margin: 0;

	color: #aaa !important;

	font-size: 12px;

	line-height: 1.8;
}


/* ------------------------------------------
 * WEB SHOPへ戻る
 * ------------------------------------------ */

.trw-checkout-complete-main .trw-order-submit {
	margin-top: 28px;

	padding:
		28px
		24px;

	background: #292929;

	border: 1px solid #494949;
}


.trw-checkout-complete-main
.trw-order-submit
.trw-order-submit-button {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 280px;

	min-height: 50px;

	padding:
		14px
		30px;

	background: #a82d35 !important;

	border: 1px solid #a82d35 !important;

	border-radius: 4px;

	color: #ffffff !important;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none !important;

	transition:
		background .15s ease,
		transform .15s ease;
}


.trw-checkout-complete-main
.trw-order-submit
.trw-order-submit-button:hover {
	background: #bd3741 !important;

	transform:
		translateY(
			-1px
		);
}


/* ==================================================
 * 15. 注文完了画面 スマートフォン
 * ==================================================
 */

@media (max-width: 700px) {

	.trw-checkout-complete-main .trw-order-header {
		padding:
			30px
			20px;
	}


	.trw-checkout-complete-main
	.trw-order-card:first-of-type,
	.trw-checkout-complete-main
	.trw-order-card:nth-of-type(2) {
		padding:
			22px
			16px;
	}


	.trw-checkout-complete-main
	.trw-order-card:first-of-type
	.trw-order-step {
		width: 38px;
		height: 38px;

		flex-basis: 38px;

		font-size: 15px;
	}


	.trw-checkout-complete-order-number {
		padding:
			22px
			14px !important;
	}


	.trw-checkout-complete-order-number strong {
		font-size: 18px !important;

		letter-spacing: .06em !important;
	}


	.trw-checkout-complete-main
	.trw-checkout-confirm-notice {
		padding:
			18px
			16px;
	}


	.trw-checkout-complete-main
	.trw-order-submit {
		padding:
			20px
			16px;
	}


	.trw-checkout-complete-main
	.trw-order-submit
	.trw-order-submit-button {
		width: 100%;

		min-width: 0;
	}

}



/* ==================================================
 * 16. 注文確認画面 戻るボタン
 * ==================================================
 *
 * ・案内文と戻るボタンは近く
 * ・注文確定ボタンとはしっかり離す
 *
 * ==================================================
 */


/* ------------------------------------------
 * 16-01. 入力画面へ戻る
 * ------------------------------------------ */

.trw-checkout-back-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 44px;

	margin-top: 6px;
	margin-bottom: 30px;

	padding:
		11px
		22px;

	background: #242424 !important;

	border: 1px solid #5c5c5c !important;

	border-radius: 4px;

	color: #cfcfcf !important;

	font-size: 12px;

	font-weight: 600;

	line-height: 1;

	letter-spacing: .03em;

	cursor: pointer;

	transition:
		background .15s ease,
		border-color .15s ease,
		color .15s ease,
		transform .15s ease;
}


.trw-checkout-back-button:hover {
	background: #303030 !important;

	border-color: #858585 !important;

	color: #ffffff !important;

	transform:
		translateY(
			-1px
		);
}


/* ------------------------------------------
 * 16-02. スマートフォン
 * ------------------------------------------ */

@media (max-width: 700px) {

	.trw-checkout-back-button {
		width: 100%;

		min-height: 46px;

		margin-top: 3px;
		margin-bottom: 10px;

		padding:
			13px
			18px;

		font-size: 12px;
	}

}