/*
 * components/final-cta.css
 * 複数ページで使う .about-final-cta 系の共通スタイル。
 * about.css 全体を共通読み込みしないための軽量スライス。
 */

.site-footer {
	margin-top: 0;
}

.about-final-cta {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
	padding-block: var(--space-11) var(--space-10);
}

@media (max-width: 1023px) {
	.about-final-cta {
		padding-block: var(--space-10) var(--space-9);
	}
}

.about-final-cta .final-cta__inner {
	display: block;
	text-align: left;
	gap: var(--space-7);
}

.about-final-cta .final-cta__title {
	color: var(--color-text-dark-primary);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
	text-align: left;
}

.about-final-cta .final-cta__lead {
	color: var(--color-text-dark-secondary);
	font-size: var(--fs-base);
	line-height: var(--lh-loose);
	max-width: none;
	margin: var(--space-5) 0 0;
	text-align: left;
}

.about-final-cta .final-cta__buttons {
	margin-top: var(--space-6);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: flex-start;
	align-items: stretch;
}

.about-final-cta .final-cta__sub-link {
	margin-top: var(--space-6);
	font-size: var(--fs-sm);
	text-align: left;
	color: var(--color-text-dark-muted);
}

.about-final-cta .final-cta__sub-link a {
	color: var(--color-brand-300);
	border-bottom-color: rgba(91, 174, 174, 0.30);
}

.about-final-cta .final-cta__sub-link a:hover {
	color: var(--color-brand-300);
	border-bottom-color: var(--color-brand-300);
}

.about-final-cta::before {
	width: min(1100px, 90vw);
	height: min(720px, 70vh);
	background: radial-gradient(
		ellipse at center,
		rgba(91, 174, 174, 0.22) 0%,
		rgba(91, 174, 174, 0.08) 35%,
		transparent 65%
	);
	filter: blur(60px);
}

.about-final-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--z-behind);
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}

.about-final-cta .section-label__num,
.about-final-cta .section-label__en {
	color: var(--color-brand-300);
}

.about-final-cta .final-cta__price-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: var(--space-5) 0 0;
	padding: 0;
	border-block: 1px solid rgba(232, 240, 240, 0.16);
	background: rgba(232, 240, 240, 0.12);
	list-style: none;
}

.about-final-cta .final-cta__price-list > div {
	padding: var(--space-4);
	background: rgba(10, 20, 20, 0.76);
}

.about-final-cta .final-cta__price-list dt {
	margin: 0 0 var(--space-1);
	color: var(--color-brand-300);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	text-transform: none;
}

.about-final-cta .final-cta__price-list dd {
	margin: 0;
	color: var(--color-text-dark-primary);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.about-final-cta .btn--secondary,
.about-final-cta .about-final-cta__tel {
	color: var(--color-text-dark-primary);
	background: var(--color-glass-dark-default);
	border: 1px solid var(--color-border-dark-default);
	/* 電話番号の数字を等幅(JetBrains Mono)で表示。「お電話：」等の和文はグリフ単位フォールバックで Zen Kaku のまま（2026-06-02） */
	font-family: var(--font-mono), var(--font-sans-jp);
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.01em;
}

.about-final-cta .btn--secondary:hover,
.about-final-cta .about-final-cta__tel:hover {
	color: var(--color-brand-300);
	background: var(--color-glass-dark-strong);
	border-color: var(--color-border-dark-strong);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	.about-final-cta .final-cta__price-list {
		grid-template-columns: 1fr;
	}

	.about-final-cta .final-cta__buttons {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.about-final-cta .final-cta__buttons .btn {
		width: 100%;
		min-height: 56px;
	}
}