.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 10px 20px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-sm);
	transition: background var(--transition-base), color var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
	cursor: pointer;
	white-space: nowrap;
}

.btn:active {
	transform: scale(0.97);
}

/* ===== ピル型 ===== */
.btn--pill {
	border-radius: var(--radius-pill);
	padding-inline: 24px;
}

/* ===== プライマリ（黄色） ===== */
.btn--primary {
	background: var(--color-primary-yellow);
	color: var(--color-text);
}

.btn--primary:hover {
	opacity: 0.85;
}

/* ===== アウトライン ===== */
.btn--outline {
	background: transparent;
	color: var(--color-text);
	border: 1.5px solid var(--color-border);
}

.btn--outline:hover {
	border-color: var(--color-primary-orange);
	color: var(--color-primary-orange);
}

/* ===== 電話ボタン（オレンジ） ===== */
.btn--phone {
	background: var(--color-primary-orange);
	color: #FFFFFF;
	border-radius: var(--radius-pill);
	padding: 14px 28px;
	font-size: var(--font-size-base);
}

.btn--phone:hover {
	opacity: 0.9;
}

/* ===== 地図ボタン ===== */
.btn--map {
	background: var(--color-text);
	color: #FFFFFF;
	border-radius: var(--radius-pill);
}

.btn--map:hover {
	opacity: 0.85;
}

/* ===== サイズ ===== */
.btn--large {
	padding: 16px 32px;
	font-size: var(--font-size-base);
}

.btn--small {
	padding: 6px 14px;
	font-size: var(--font-size-xs);
}

/* ===== 戻るボタン ===== */
.btn--back {
	background: var(--color-bg-gray);
	color: var(--color-text);
	border-radius: var(--radius-pill);
}

.btn--back:hover {
	background: var(--color-border);
}