/* ==========================================================================
   矢印付きボタン — ラベル中央・矢印は右から 16px（レイアウトに含めない）
   ========================================================================== */

:root {
	--btn-with-arrow-icon-right: 16px;
	--btn-with-arrow-icon-size: 27px;
	--btn-with-arrow-side-pad: max(24px, calc(var(--btn-with-arrow-icon-right) + var(--btn-with-arrow-icon-size) + 12px));
}

/* 対象ボタン（見た目は各コンポーネント側で定義） */
.top-reason__company-btn,
.top-construction__more-btn,
.top-notice__archive-btn,
.top-blog__more-btn,
.site-footer__btn,
.c-contents-contact__btn,
.contact-page__gravel-btn,
.contact-page__general-btn,
.error404__btn,
.estate-service__more-btn {
	position: relative;
	justify-content: center;
	gap: 0;
	padding-right: var(--btn-with-arrow-side-pad);
	padding-left: var(--btn-with-arrow-side-pad);
}

/* ラベル — ボタン中央（矢印の flex 幅に引っ張られない） */
.top-reason__company-btn-text,
.top-construction__more-text,
.top-notice__archive-btn-text,
.top-blog__more-text,
.site-footer__btn-text,
.c-contents-contact__btn-text,
.contact-page__gravel-btn-text,
.contact-page__general-btn-text,
.error404__btn-text,
.estate-service__more-btn > span {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - var(--btn-with-arrow-side-pad) * 2);
	margin: 0;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.site-footer__btn-text,
.c-contents-contact__btn-text,
.contact-page__gravel-btn-text,
.contact-page__general-btn-text {
	flex: none;
	min-width: 0;
}

/* 矢印（img 直付け） */
.top-reason__company-btn-icon,
.top-construction__more-icon,
.top-notice__archive-btn-icon,
.top-blog__more-icon,
.error404__btn-icon,
.estate-service__more-btn > img {
	position: absolute;
	top: 50%;
	right: var(--btn-with-arrow-icon-right);
	left: auto;
	z-index: 2;
	display: block;
	flex: none;
	width: var(--btn-with-arrow-icon-size);
	height: auto;
	max-height: 12px;
	margin: 0;
	object-fit: contain;
	transform: translateY(-50%);
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 矢印（span ラッパー） */
.site-footer__btn-arrow,
.c-contents-contact__btn-arrow,
.contact-page__gravel-btn-arrow,
.contact-page__general-btn-arrow {
	position: absolute;
	top: 50%;
	right: var(--btn-with-arrow-icon-right);
	left: auto;
	z-index: 2;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	transform: translateY(-50%);
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.site-footer__btn-arrow img,
.c-contents-contact__btn-arrow img,
.contact-page__gravel-btn-arrow img,
.contact-page__general-btn-arrow img {
	display: block;
	width: var(--btn-with-arrow-icon-size);
	height: auto;
	max-height: 12px;
	max-width: none;
}

/* ホバー — 矢印が右へ */
.top-reason__company-btn:hover .top-reason__company-btn-icon,
.top-construction__more-btn:hover .top-construction__more-icon,
.top-notice__archive-btn:hover .top-notice__archive-btn-icon,
.top-blog__more-btn:hover .top-blog__more-icon,
.site-footer__btn:hover .site-footer__btn-arrow,
.c-contents-contact__btn:hover .c-contents-contact__btn-arrow,
.contact-page__gravel-btn:hover .contact-page__gravel-btn-arrow,
.contact-page__general-btn:hover .contact-page__general-btn-arrow,
.error404__btn:hover .error404__btn-icon,
.estate-service__more-btn:hover > img {
	transform: translateY(-50%) translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	.top-reason__company-btn-icon,
	.top-construction__more-icon,
	.top-notice__archive-btn-icon,
	.top-blog__more-icon,
	.error404__btn-icon,
	.estate-service__more-btn > img,
	.site-footer__btn-arrow,
	.c-contents-contact__btn-arrow,
	.contact-page__gravel-btn-arrow,
	.contact-page__general-btn-arrow {
		transition: none;
	}

	.top-reason__company-btn:hover .top-reason__company-btn-icon,
	.top-construction__more-btn:hover .top-construction__more-icon,
	.top-notice__archive-btn:hover .top-notice__archive-btn-icon,
	.top-blog__more-btn:hover .top-blog__more-icon,
	.site-footer__btn:hover .site-footer__btn-arrow,
	.c-contents-contact__btn:hover .c-contents-contact__btn-arrow,
	.contact-page__gravel-btn:hover .contact-page__gravel-btn-arrow,
	.contact-page__general-btn:hover .contact-page__general-btn-arrow,
	.error404__btn:hover .error404__btn-icon,
	.estate-service__more-btn:hover > img {
		transform: translateY(-50%);
	}
}