/*
 * ボタンのホバーアニメーション(全ボタン共通)。
 * 背景の塗りが左から広がり、矢印が右へ動く。他のCSSより後に読み込んで上書きする。
 */
.about__btn,
.service__btn,
.price__btn,
.case__btn,
.faq__btn,
.news__btn,
.column__btn,
.recruit__btn,
.btn-outline {
	background-image: linear-gradient(var(--color-blue-dark), var(--color-blue-dark));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size .35s ease, border-color .35s ease;
}
.btn-outline--line { background-image: linear-gradient(var(--color-line), var(--color-line)); }

.about__btn:hover,
.service__btn:hover,
.price__btn:hover,
.case__btn:hover,
.faq__btn:hover,
.news__btn:hover,
.column__btn:hover,
.recruit__btn:hover,
.btn-outline:hover {
	background-size: 100% 100%;
}

/* 矢印: 右へ動いて白くなる */
.about__btn::after,
.service__btn::after,
.price__btn::after,
.case__btn::after,
.faq__btn::after,
.news__btn::after,
.column__btn::after,
.recruit__btn::after {
	transition: transform .35s ease, border-color .35s ease;
}
.about__btn:hover::after,
.service__btn:hover::after,
.price__btn:hover::after,
.case__btn:hover::after,
.faq__btn:hover::after,
.news__btn:hover::after,
.column__btn:hover::after,
.recruit__btn:hover::after {
	border-color: #fff;
	transform: translateX(6px) rotate(45deg);
}

.btn-outline::after { transition: transform .35s ease; }
.btn-outline:hover::after { transform: translate(6px, -50%) rotate(45deg); }

/* ヒーローのCTA: 明るくなって押し込まれる */
.hero__cta-btn {
	transition: filter .25s ease, transform .25s ease, border-bottom-width .25s ease;
}
.hero__cta-btn::after { transition: right .25s ease; }
.hero__cta-btn:hover {
	filter: brightness(1.15);
	transform: translateY(2px);
	border-bottom-width: 2px;
}
.hero__cta-btn:hover::after { right: 14px; }

@media (prefers-reduced-motion: reduce) {
	.about__btn, .service__btn, .price__btn, .case__btn, .faq__btn, .news__btn,
	.column__btn, .recruit__btn, .btn-outline, .hero__cta-btn,
	.about__btn::after, .service__btn::after, .price__btn::after, .case__btn::after,
	.faq__btn::after, .news__btn::after, .column__btn::after, .recruit__btn::after,
	.btn-outline::after, .hero__cta-btn::after {
		transition: none;
	}
}