/* ==========================================================================
   かなさホーム — ボタン（template-parts/kanasa/button.php。Figma p-kanasa-button：文字＋丸い矢印）
   - primary（緑・白い丸に緑の矢印）／accent（黄・緑の丸）／secondary（白・緑の枠・緑の丸）
   - 高さ l 64px（初期値）／m 56px。枠のあるもの（secondary）も同じ高さにそろえる
   - SP は幅いっぱいで、文字を左・矢印を右に
   - 支給額チェック・お問い合わせのページは project-contact-button.css（担当 K-B）の指定が後から効く
   ========================================================================== */

.p-kanasa-button {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
	min-height: 64px;
	margin: 0;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	text-align: left;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color 0.2s;
}

.p-kanasa-button__arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: transform 0.2s;
}

.p-kanasa-button__arrow .c-kanasa-icon {
	width: 18px;
	height: 18px;
}

/* 緑 */
.p-kanasa-button--primary {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-action-primary);
}

.p-kanasa-button--primary .p-kanasa-button__arrow {
	color: var(--kanasa-action-primary);
	background: var(--kanasa-bg-surface);
}

/* 黄 */
.p-kanasa-button--accent {
	color: var(--kanasa-text-primary);
	background: var(--kanasa-action-accent);
}

/* 白・緑の枠（枠線 2px ぶん内側の余白を減らして、高さを 64px にそろえる） */
.p-kanasa-button--secondary {
	padding: 10px 10px 10px 30px;
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--kanasa-border-strong);
}

.p-kanasa-button--accent .p-kanasa-button__arrow,
.p-kanasa-button--secondary .p-kanasa-button__arrow {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-action-primary);
}

/* 高さ 56px */
.p-kanasa-button--m {
	min-height: 56px;
	padding: 10px 10px 10px 28px;
}

.p-kanasa-button--m.p-kanasa-button--secondary {
	padding: var(--space-xs) var(--space-xs) var(--space-xs) 26px;
}

.p-kanasa-button--m .p-kanasa-button__arrow {
	width: 36px;
	height: 36px;
}

/* PC は文字を折り返さない（ボタンの幅は文字に合わせる） */
@media (min-width: 768px) {
	.p-kanasa-button {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

@media (hover: hover) {
	.p-kanasa-button--primary:hover {
		background: color-mix(in srgb, var(--kanasa-action-primary) 85%, #000); /* 押せることがわかる程度に濃く */
	}

	.p-kanasa-button--accent:hover {
		background: var(--kanasa-yellow-600);
	}

	.p-kanasa-button--secondary:not([aria-disabled="true"]):hover {
		background: var(--kanasa-bg-green-soft);
	}

	.p-kanasa-button:not([aria-disabled="true"]):hover .p-kanasa-button__arrow {
		transform: translateX(3px);
	}
}

@media (max-width: 767px) {
	.p-kanasa-button {
		justify-content: space-between;
		width: 100%;
		padding-left: var(--space-xl);
	}

	.p-kanasa-button--secondary {
		padding-left: 22px;
	}
}