/* ===============================
   contact confirm
=============================== */

.contact_bg {
	background-image: url('../../images/order-derivary_bg.webp');
	background-repeat: repeat-y;
	background-size: 100%;
	padding-bottom: var(--space-xl);
}

.contact-confirm {
	padding: var(--space-lg) 0;
}

.contact-confirm_container {
	width: min(900px, 92%);
	margin: 0 auto;
	background: var(--akamaru-color-white);
	padding: var(--space-lg);
}

.contact-confirm_header {
	text-align: center;
	margin-bottom: var(--space-sm);
}

.contact-confirm_header .title {
	font-size: var(--fz-28);
	font-weight: 600;
	margin-bottom: 0.5em;
}

.contact-confirm_header .lead {
	font-size: var(--fz-14);
	color: #555;
}

.contact-confirm_list {
	border-top: 1px solid #ddd;
}

.confirm-item {
	display: grid;
	grid-template-columns: 220px 1fr;
	border-bottom: 1px solid #ddd;
	padding: 1em 0;
	column-gap: 1.5em;
}

.confirm-item .label {
	font-weight: 500;
	color: #333;
}

.confirm-item .value {
	color: #111;
	line-height: 1.7;
	word-break: break-all;
}

.contact-confirm_actions {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 48px;
}

/* 共通 */
.contact-confirm .wpcf7-submit,
.contact-confirm .wpcf7-previous {
	width: 240px;
	height: 52px;
	font-size: 14px;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* 戻る */
.contact-confirm .wpcf7-previous {
	background: #fff;
	border: 1px solid var(--akamaru-color-navy_main);
	color: var(--akamaru-color-navy_main);
}

/* 送信 */
.contact-confirm .wpcf7-submit {
	background: var(--akamaru-color-navy_main);
	color: #fff;
	border: none;
}





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

	.confirm-item {
		grid-template-columns: 1fr;
		row-gap: 0.5em;
	}

	.confirm-item .label {
		font-size: 13px;
		color: #666;
	}

	.confirm-item .value {
		font-size: 14px;
	}

	.contact-confirm_actions {
		flex-direction: column;
		gap: 16px;
	}
}
@media screen and (max-width: 500px) {
	.contact-confirm{
			padding: var(--space-md) 0;
		}

	.contact-confirm_container {
		padding: var(--space-md) 1em;
	}

	.contact-confirm_header {
		margin-bottom: var(--space-sm);
	}

	.contact-confirm_header .title {
		font-size: 18px;
		margin-bottom: 0.3em;
	}

	.contact-confirm_header .lead {
		font-size: 12px;
		line-height: 1.6;
	}

	.confirm-item {
		padding: 0.6em 0;
		row-gap: 0.3em;
	}

	.confirm-item .label {
		font-size: 11px;
		letter-spacing: 0.05em;
		color: #777;
	}

	.confirm-item .value {
		font-size: 13px;
		line-height: 1.6;
	}

	.confirm-item.message {
		padding-top: 0.8em;
	}

	.confirm-item.message .value {
		background: #f7f7f7;
		padding: 0.6em 0.7em;
		border-radius: 4px;
	}

	.contact-confirm_actions {
		margin-top: var(--space-md);
		gap: 12px;
	}

	.contact-confirm_actions input,
	.contact-confirm_actions .previous {
		width: 100%;
		height: 52px;
		font-size: 14px;
	}
		.contact-confirm_actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 32px;
	}

	.contact-confirm .wpcf7-submit,
	.contact-confirm .wpcf7-previous {
		width: 100%;
		height: 50px;
	}
}