/* ボタン。3タイプ：Outline（既定）／ Solid Dark（RESERVEバンド）／ Header Reserve（header.css）。
   角丸なし・1pxの細い枠・Oswald・広めの字間。hover は (hover:hover) and (pointer:fine) のみ（SPは hover に依存しない）。
   focus-visible は hover と同じ反転＋リングで、同等以上に見えるようにする。 */
:root {
	--lw-btn-ease: 0.3s ease-out;
}

.lw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px; /* 44〜52px。タップ領域 44px 以上 */
	padding: 14px 26px;
	border: 1px solid var(--lw-line-strong);
	background: transparent;
	color: var(--lw-text);
	font-family: var(--lw-font-en);
	font-size: var(--lw-fs-eyebrow);
	letter-spacing: 0.2em;
	line-height: normal; /* Claude Design と同じ（フォント標準の行間） */
	text-align: center;
	cursor: pointer;
	transition: color var(--lw-btn-ease), background-color var(--lw-btn-ease), border-color var(--lw-btn-ease);
}

.lw-btn--l {
	min-height: 52px;
	padding: 16px 34px;
	font-size: 13px;
}

/* 矢印（hover で右へ） */
.lw-arr {
	display: inline-block;
	transition: translate var(--lw-btn-ease);
}

/* 1. Outline：透明＋1px。hover で白地・黒文字へ反転 */
/* 2. Solid Dark：黒地・白文字・細い枠（ピンクのRESERVEバンド上）。hover で白地・黒文字 */
.lw-btn--dark {
	background: #14100F;
	border-color: rgba(var(--lw-text-rgb), 0.5); /* 細い罫線 */
	color: #F2EFEC;
}

/* 補助：白地（ヒーローの主CTA。hover で淡いピンク）／ ピンク地（予約導線。hover で濃いピンク） */
.lw-btn--solid {
	background: var(--lw-text);
	border-color: var(--lw-text);
	color: var(--lw-inverse);
}

.lw-btn--pink {
	background: var(--lw-grad-reserve-button);
	border-color: transparent;
	color: #fff;
}

/* 無効（予約URL確認中など）。文字は読めること（muted）。 */
.lw-btn[aria-disabled="true"] {
	background: transparent;
	border-color: var(--lw-muted);
	color: var(--lw-muted);
	cursor: not-allowed;
}

.lw-btn--block {
	display: flex;
	width: 100%;
}

/* hover（PCのみ）／ focus-visible（常時） */
@media (hover: hover) and (pointer: fine) {
	.lw-btn:not([aria-disabled="true"]):hover,
	.lw-btn--outline:not([aria-disabled="true"]):hover,
	.lw-btn--dark:not([aria-disabled="true"]):hover {
		background: var(--lw-text);
		border-color: var(--lw-text);
		color: var(--lw-inverse);
	}

	.lw-btn--solid:not([aria-disabled="true"]):hover {
		background: var(--lw-accent-pale);
		border-color: var(--lw-accent-pale);
		color: var(--lw-inverse);
	}

	.lw-btn--pink:not([aria-disabled="true"]):hover {
		background: var(--lw-accent-deep);
		color: #fff;
	}

	a:hover > .lw-arr,
	.lw-pnav__card:hover .lw-arr,
	.lw-btn:not([aria-disabled="true"]):hover .lw-arr {
		translate: 5px 0;
	}
}

.lw-btn:not([aria-disabled="true"]):focus-visible {
	outline: 2px solid var(--lw-accent-pale);
	outline-offset: 3px;
	background: var(--lw-text);
	border-color: var(--lw-text);
	color: var(--lw-inverse);
}

.lw-btn--solid:not([aria-disabled="true"]):focus-visible {
	background: var(--lw-accent-pale);
	border-color: var(--lw-accent-pale);
}

.lw-btn--pink:not([aria-disabled="true"]):focus-visible {
	background: var(--lw-accent-deep);
	border-color: transparent;
	color: #fff;
}

.lw-btn:focus-visible .lw-arr {
	translate: 5px 0;
}

@media (min-width: 768px) {
	.lw-btn--block-mobile {
		display: inline-flex;
		width: auto;
	}
}

/* flex コンテナ内のテキストリンクでは矢印前の空白が消えるため、間隔を明示 */
.lw-tone-tile__more .lw-arr,
.lw-fnews__all .lw-arr,
.lw-social__follow .lw-arr {
	margin-left: 0.4em;
}