/* ==========================================================================
   c-button（Figma c-button 7:49）— template-parts/corporate/button.php
   - Type: primary（標準の遷移）／cta（問い合わせ・相談。ページに1つまで）／secondary（白地の補助）／inverse（色面・写真の上）
   - Size: l（高さ 68・幅 320）／m（高さ 52・幅 240）。c-button--block で親の幅いっぱい
   - SP はどちらも高さ 52・幅いっぱい（Figma の SP の画面）
   ========================================================================== */

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	max-width: 100%;
	color: var(--color-text-on-brand);
	text-align: left;
	text-decoration: none;
	background: var(--color-action-primary);
	border: 0;
	border-radius: var(--radius-full);
	transition: background-color 0.2s, color 0.2s;
}

.c-button__label {
	min-width: 0;
}

.c-button__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
	transition: transform 0.2s;
}

.c-button__icon .c-icon {
	width: 1em;
	height: 1em;
}

/* 大きさ */
.c-button--m {
	width: 240px;
	min-height: 52px;
	padding: 8px 8px 8px 24px; /* Figma の値（SP でも同じなので px で） */
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.c-button--m .c-button__icon {
	width: 36px;
	height: 36px;
	font-size: 16px;
}

.c-button--l {
	width: 320px;
	min-height: 68px;
	padding: 12px 12px 12px 32px; /* Figma の値 */
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.c-button--l .c-button__icon {
	width: 44px;
	height: 44px;
	font-size: 18px;
}

.c-button--block {
	width: 100%;
}

/* 種類 */
.c-button--cta {
	background: var(--color-action-cta);
}

.c-button--cta .c-button__icon {
	color: var(--color-text-cta);
}

.c-button--secondary,
.c-button--inverse {
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
}

.c-button--secondary {
	box-shadow: inset 0 0 0 1.5px var(--color-border-brand); /* 枠線（高さを変えないように内側の影で） */
}

.c-button--secondary .c-button__icon,
.c-button--inverse .c-button__icon {
	color: var(--color-text-on-brand);
	background: var(--color-action-primary);
}

/* 押せるとき */
@media (hover: hover) {
	a.c-button:hover,
	button.c-button:not(:disabled):hover {
		background-color: var(--color-action-primary-hover);
	}

	a.c-button--cta:hover,
	button.c-button--cta:not(:disabled):hover {
		background-color: var(--color-action-cta-hover);
	}

	a.c-button--secondary:hover,
	a.c-button--inverse:hover,
	button.c-button--secondary:not(:disabled):hover,
	button.c-button--inverse:not(:disabled):hover {
		background-color: var(--color-bg-muted);
	}

	a.c-button:hover .c-button__icon,
	button.c-button:not(:disabled):hover .c-button__icon {
		transform: translateX(3px);
	}
}

.c-button:disabled {
	cursor: not-allowed;
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.c-button--m,
	.c-button--l {
		width: 100%;
		min-height: 52px;
		padding: 8px 8px 8px 24px; /* Figma の値 */
		font: var(--text-label-m);
		letter-spacing: var(--ls-label-m);
	}

	.c-button--l .c-button__icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-button,
	.c-button__icon {
		transition: none;
	}
}