/* ===============================
   private-cta: 相談CTA（option駆動）
   薄ベージュ帯 + 白ボックス（電話 / Web）
   SP: 外枠パネル内に見出し+2カード縦積み / PC: パネル装飾なしで2カラム
   =============================== */

.private-cta {
	padding-block: var(--space-2);
	background: var(--color-bg);
}

/* SPのみ: 見出しとカードを囲うボーダー付きの外枠パネル（内側がやや濃い） */
.private-cta__panel {
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
}

.private-cta__title {
	text-align: center;
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: 0.12em;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.private-cta__boxes {
	margin-top: var(--space-3);
	margin-inline: auto;
	width: fit-content;
	min-width: 66%;
	max-width: 100%;
	display: grid;
	gap: var(--space-3);
}

.private-cta__box {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-1) var(--space-4);
}

/* ---- 電話ボックス: 左に受話器アイコン、右に番号+赤ボタン ---- */

.private-cta__box--tel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-1) var(--space-3);
	align-items: center;
}

.private-cta__box--tel::before {
	content: "";
	grid-row: 1 / 3;
	width: var(--space-7);
	height: var(--space-7);
	background-color: var(--color-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15.2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' transform='translate(5.5 7) scale(0.62)' 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%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' d='M19.5 9a7 7 0 0 1 4 4M17.8 11.6a4.2 4.2 0 0 1 2.6 2.6'/%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 32 32'%3E%3Ccircle cx='16' cy='16' r='15.2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' transform='translate(5.5 7) scale(0.62)' 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%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' d='M19.5 9a7 7 0 0 1 4 4M17.8 11.6a4.2 4.2 0 0 1 2.6 2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.private-cta__tel {
	text-align: center;
	font-size: var(--fs-hero-mobile);
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.private-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	padding: var(--space-1) var(--space-4);
	font-size: var(--fs-body);
	letter-spacing: 0.1em;
	line-height: var(--lh-tight);
	transition: background-color var(--duration-fast);
}

.private-cta__btn::after {
	content: "";
	flex: none;
	width: var(--space-2);
	height: var(--space-2);
	border-top: 2px solid var(--color-text-inverse);
	border-right: 2px solid var(--color-text-inverse);
	transform: rotate(45deg);
}

.private-cta__btn:hover {
	background: var(--color-primary-hover);
}

.private-cta__btn:focus-visible {
	outline-color: var(--color-primary);
}

/* ---- Webボックス: カレンダーアイコン + テキストリンク ---- */

.private-cta__box--web {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-2);
}

.private-cta__web {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-primary);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	line-height: var(--lh-tight);
	transition: color var(--duration-fast);
}

.private-cta__web::before {
	content: "";
	flex: none;
	width: var(--space-6);
	height: var(--space-6);
	background-color: currentColor;
	-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.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 2.5v5M16 2.5v5'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='12' cy='14.5' r='1'/%3E%3Ccircle cx='16' cy='14.5' r='1'/%3E%3Ccircle cx='8' cy='17.5' r='1'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3Ccircle cx='16' cy='17.5' r='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.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 2.5v5M16 2.5v5'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='12' cy='14.5' r='1'/%3E%3Ccircle cx='16' cy='14.5' r='1'/%3E%3Ccircle cx='8' cy='17.5' r='1'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3Ccircle cx='16' cy='17.5' r='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.private-cta__web::after {
	content: "";
	flex: none;
	width: var(--space-2);
	height: var(--space-2);
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.private-cta__web:hover {
	color: var(--color-primary-hover);
}

/* ===============================
   md: 768px〜（パネル装飾を外して2カラム）
   =============================== */

@media (min-width: 768px) {
	.private-cta {
		padding-block: var(--space-2);
		background: var(--color-bg-subtle);
	}

	/* PC: 帯と同じ背景のまま、薄い外周枠だけ残す */
	.private-cta__panel {
		background: none;
		padding: var(--space-4) var(--space-6);
	}

	.private-cta__title {
		font-size: var(--fs-h2-mobile);
	}

	.private-cta__boxes {
		margin-top: var(--space-5);
		width: 100%;
		min-width: 0;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
	}

	/* 電話番号未設定で1カードのみのときは中央に寄せる */
	.private-cta__box:only-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: 50%;
	}

	.private-cta__box {
		padding: var(--space-3) var(--space-5);
	}

	.private-cta__box--tel::before {
		width: var(--space-10);
		height: var(--space-10);
	}

	.private-cta__tel {
		font-size: var(--fs-h2-mobile);
	}

	.private-cta__btn {
		font-size: var(--fs-body-pc);
		padding-block: var(--space-3);
	}

	.private-cta__box--web {
		padding-block: var(--space-4);
	}

	.private-cta__web {
		font-size: var(--fs-body-pc);
	}

	.private-cta__web::before {
		width: var(--space-10);
		height: var(--space-10);
	}
}

@media (max-width: 767px) {
	.private-cta {
		padding-block: var(--space-7);
	}

	.private-cta__panel {
		padding: var(--space-5);
	}

	.private-cta__title {
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
	}

	.private-cta__boxes {
		width: 100%;
		margin-top: var(--space-5);
	}

	.private-cta__box {
		padding: var(--space-4);
	}

	.private-cta__tel {
		font-size: var(--fs-h2-mobile);
	}

	.private-cta__tel a {
		display: flex;
		align-items: center;
		min-height: var(--space-9);
	}

	.private-cta__btn,
	.private-cta__web {
		display: flex;
		align-items: center;
		min-height: var(--space-9);
		font-size: var(--fs-body);
	}
}

/* ===============================
   lg: 1024px〜（カード群を参考画像の比率まで絞る）
   =============================== */

@media (min-width: 1024px) {
	.private-cta__boxes {
		width: 80%;
	}
}