/* 記事内 CTA [fx_cta]
 *
 * ⚠ 囲みは「罫線なしの背景トーン」で表現する。
 *    左アクセントバー（border-left）・全周罫線・角丸ボックスは使わない（社内 UI 規約）。
 */

.fx-cta {
	background: #f2f6fa;
	padding: 1.6rem 1.8rem;
	margin: 2.4rem 0;
}

.fx-cta__body {
	margin-bottom: 1.2rem;
}

.fx-cta__body p {
	margin: 0 0 0.8em;
	line-height: 1.9;
}

.fx-cta__body p:last-child {
	margin-bottom: 0;
}

.fx-cta__action {
	margin: 0;
}

.fx-cta__action a {
	display: inline-block;
	/* ⚠ 主導線の色はサイト全体で橙に揃える（フローティングバー・記事下ボタンと同じ #eb6100）。
	   2026-08-12 まで青で、サイトに 2 つ目の主色を持ち込んでいた */
	background: #eb6100;
	color: #fff;
	text-decoration: none;
	padding: 0.9em 1.8em;
	font-weight: 700;
	line-height: 1.4;
}

.fx-cta__action a::after {
	content: "→";
	margin-left: 0.6em;
}

.fx-cta__action a:hover,
.fx-cta__action a:focus {
	background: #ee8134;
	color: #fff;
}

/* 資料ダウンロードは主導線と色を分け、問い合わせより一段弱く見せる */
.fx-cta--knowledge {
	background: #f5f4f0;
}

.fx-cta--knowledge .fx-cta__action a {
	background: #3d4a55;
}

.fx-cta--knowledge .fx-cta__action a:hover,
.fx-cta--knowledge .fx-cta__action a:focus {
	background: #2c363e;
}

@media screen and (max-width: 767px) {
	.fx-cta {
		padding: 1.4rem 1.2rem;
	}

	.fx-cta__action a {
		display: block;
		text-align: center;
	}
}