@charset "UTF-8";
/* =========================================================
   components.css
   再利用するUIコンポーネント
   STEP 1では最小限。STEP 3以降で拡充していく。
   ========================================================= */

/* ---------- ボタン基本 ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 56px;
	padding: var(--space-3) var(--space-6);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.1em;
	text-align: center;
	border: var(--border-width) solid currentColor;
	transition: background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.btn--primary {
	background: var(--color-accent);
	color: var(--color-white);
	border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
}

.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--color-text);
	color: var(--color-white);
}

/* ---------- セクション見出し ---------- */
.section-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: var(--space-7);
}

.section-title__en {
	display: block;
	font-family: var(--font-family-en);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	letter-spacing: 0.2em;
	color: var(--color-text-muted);
	margin-top: var(--space-2);
}

@media (max-width: 640px) {
	.section-title {
		font-size: var(--font-size-xl);
	}

	.btn {
		min-width: 180px;
		min-height: 52px;
	}
}