/*
 * Harashina Standard — CTA（正式実装）
 *
 * 承認済みプロトタイプの「タイポグラフィ中心の静かなCTA」をそのまま
 * 正式移植したもの。カード・大きな背景色ボックス・青い塗りボタンは
 * 一切使わない。中央寄せ・十分な余白・書体の階層だけで「まずは、
 * お気軽にご相談ください。」を主役にする、Business/SHOP/Informationと
 * 同じeditorialな方針を踏襲する。
 *
 * 色・フォントはtokens.css（--bg-alt/--text/--text-muted/--accent/
 * --font-serif/--font-mono/--ease-in）を、余白の単位はBusiness/SHOP/
 * Informationで使っているclamp()の書式を踏襲する。
 */

.cta{
	/* ---- 背景交互配色＋vertical rhythm構造（比較試作・再修正） ----
	   CTA自身の色（--bg）は変更していない。Information→CTAの遷移は、
	   下の.cta::beforeという独立した疑似要素（--transition-inの高さ
	   ぶんのgradient専用）が担当する。

	   コンテンツ自身の上下solid余白は、既存の.cta__inner（見出し・
	   本文・リンクをすでに1つに包んでいたラッパー。新規追加ではない）
	   のpadding-top/padding-bottomに分離した（同値、以前のpadding-bottom
	   値を両方に適用）。CTA→Footerの遷移はFooter側の::beforeが担当する
	   ため、CTA自身にはgradientを持たせていない。CTA内部の見出し・
	   本文・リンク間spacing、背景色自体は変更していない。 */
	--pad-h: clamp(1.2rem, 4vw, 3rem);
	--transition-in: clamp(3rem, 6vw, 5rem);
	background: var(--bg);
	padding: 0 var(--pad-h);
}
.cta::before{
	content: "";
	display: block;
	height: var(--transition-in);
	margin: 0 calc(-1 * var(--pad-h));
	background: linear-gradient(to bottom, var(--bg-dark) 0%, var(--bg) 100%);
}
.cta__inner{
	max-width: 1180px; margin: 0 auto;
	text-align: center;
	--own-pad: clamp(2.5rem, 5.5vw, 5rem);
	padding-top: var(--own-pad);
	padding-bottom: var(--own-pad);
}

.cta__heading{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
	line-height: 1.5; margin: 0; color: var(--text);
}

.cta__desc{
	font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
	color: var(--text-muted);
	margin: 1rem 0 0;
	line-height: 1.85;
}

.cta__link{
	display: inline-block;
	margin-top: 2rem;
	font-family: var(--font-mono); font-size: 0.92rem; letter-spacing: 0.04em;
	color: var(--text); text-decoration: none;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.3rem;
	transition: color 0.3s var(--ease-in), border-color 0.3s var(--ease-in);
}
.cta__link:hover,
.cta__link:focus-visible{
	color: var(--accent); border-color: var(--accent);
}
/* リンク末尾の矢印だけを穏やかに動かす（大きな移動・拡大・背景反転は
   使わない）。矢印はaria-hidden、リンク自体は「お問い合わせ →」全体で
   1つの<a>のため、矢印だけの独立リンクにはなっていない。 */
.cta__link span{
	display: inline-block;
	transition: transform 0.35s var(--ease-in);
}
.cta__link:hover span,
.cta__link:focus-visible span{
	transform: translateX(4px);
}

@media (max-width: 820px){
	.cta__inner{
		text-align: left;
	}
}