/* 記事末尾のお問い合わせCTA
   ボタンの形（丸み・余白）はテーマの .btn を利用し、色はここで指定する。
   色はテーマのCSS変数を使い、万一読めない場合に備えて代替色を第2引数に置いている。
   ホバー時の指定は .mandalink-cta を前置きして、テーマの .btn:hover より優先されるようにしている。
   下線は、記事本文のリンク下線に負けないよう a.mandalink-cta-btn として打ち消している。 */

.mandalink-cta {
	margin: 48px 0;
	padding: 28px 24px;
	background: var(--bg-blue-tint, #EEF4FF);
	border-radius: var(--radius-m, 14px);
	text-align: center;
}

/* いちばん上の小見出し：小さめ・青・太字 */
.mandalink-cta-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-main, #1D5FD6);
	text-align: center;
	letter-spacing: 0.04em;
}

/* 1行目の問いかけ：中央寄せ・大きめ・太字 */
.mandalink-cta-title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-text, #1B2A46);
	text-align: center;
}

.mandalink-cta-text {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-text-sub, #4A5A75);
	text-align: left;
}

/* ボタン：白背景・青枠・青文字 */
.mandalink-cta a.mandalink-cta-btn {
	background: var(--color-white, #FFFFFF);
	color: var(--color-main, #1D5FD6);
	border: 2px solid var(--color-main, #1D5FD6);
	box-shadow: none;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ホバー：色を反転（青背景・白文字） */
.mandalink-cta a.mandalink-cta-btn:hover,
.mandalink-cta a.mandalink-cta-btn:focus-visible {
	background: var(--color-main, #1D5FD6);
	color: var(--color-white, #FFFFFF);
	text-decoration: none;
	opacity: 1;
}

@media (max-width: 600px) {
	.mandalink-cta {
		padding: 22px 18px;
	}

	.mandalink-cta-title {
		font-size: 17px;
	}

	.mandalink-cta-btn {
		width: 100%;
	}
}