/* ===============================
   contact-notice: 予約確定の注意 + 電話案内
   SP: 警告ボックスと電話ボックスの縦積み
   PC: ほぼ等幅の2カラム横並び
   =============================== */

.contact-notice {
	padding-block: var(--space-4) var(--space-7);
}

.contact-notice__inner {
	display: grid;
	gap: var(--space-5);
}

/* ---- 警告ボックス ----
   薄ピンク地のトークンが無いため bg-card + primary細枠で代用 */

.contact-notice__warning {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-bg-card);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

.contact-notice__warning-icon {
	flex: none;
	width: var(--space-7);
	height: var(--space-7);
	background-color: var(--color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L22 20H2z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M11.1 9.5h1.8l-.35 5h-1.1z'/%3E%3Ccircle cx='12' cy='16.8' r='1.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L22 20H2z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M11.1 9.5h1.8l-.35 5h-1.1z'/%3E%3Ccircle cx='12' cy='16.8' r='1.1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-notice__warning-text {
	font-size: var(--fs-caption);
	color: var(--color-primary);
	letter-spacing: 0;
}

/* ---- 電話ボックス ---- */

.contact-notice__phone {
	padding: var(--space-5);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.contact-notice__phone-heading {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
}

.contact-notice__phone-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-3);
}

.contact-notice__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	color: var(--color-primary);
	letter-spacing: 0.05em;
	line-height: var(--lh-tight);
	white-space: nowrap;
}

.contact-notice__tel-icon,
.contact-notice__call-icon {
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-notice__tel-icon {
	width: var(--space-5);
	height: var(--space-5);
}

.contact-notice__call-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: background-color var(--duration-fast);
}

.contact-notice__call-btn:hover {
	background: var(--color-primary-hover);
}

.contact-notice__call-icon {
	width: var(--space-4);
	height: var(--space-4);
}

@media (max-width: 767px) {
	.contact-notice__inner,
	.contact-notice__warning,
	.contact-notice__phone {
		min-width: 0;
	}

	.contact-notice__warning {
		align-items: flex-start;
	}

	.contact-notice__warning-text,
	.contact-notice__phone-heading {
		overflow-wrap: anywhere;
		font-size: var(--fs-body-pc);
	}

	.contact-notice__call-btn {
		font-size: var(--fs-body);
	}

	.contact-notice__phone-row {
		flex-direction: column;
		align-items: stretch;
	}

	.contact-notice__tel,
	.contact-notice__call-btn {
		justify-content: center;
		width: 100%;
		min-height: var(--space-9);
	}
}

/* ===============================
   md: 768px〜（2カラム横並び）
   =============================== */

@media (min-width: 768px) {
	.contact-notice {
		padding-block: var(--space-5) var(--space-9);
	}

	.contact-notice__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
		align-items: stretch;
	}

	.contact-notice__warning {
		justify-content: center;
		padding: var(--space-7);
	}

	.contact-notice__warning-text {
		font-size: var(--fs-body);
		letter-spacing: 0.05em;
	}

	.contact-notice__phone {
		padding: var(--space-6) var(--space-7);
	}

	.contact-notice__phone-heading {
		font-size: var(--fs-body);
		text-align: center;
	}

	.contact-notice__phone-row {
		justify-content: center;
		gap: var(--space-6);
		margin-top: var(--space-4);
	}

	.contact-notice__tel {
		font-size: var(--fs-h2);
	}

	.contact-notice__tel-icon {
		width: var(--space-7);
		height: var(--space-7);
	}

	.contact-notice__call-btn {
		padding: var(--space-4) var(--space-5);
		font-size: var(--fs-body);
	}
}