/* =============================================================================
   Component: Button (outline + 矢印アイコン)
   本番デザイン準拠: 白背景 / 黒枠 / 黒文字 + 右側に黒矢印
   hover: 半透明黒で背景を覆い、文字と矢印は白に。矢印は少し右にスライド。
   ========================================================================== */

.btn,
.btn:visited,
.tt-btn,
.tt-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 56px;
	padding: 20px 28px;
	background: transparent;
	color: var(--tt-ink);
	border: 1px solid var(--tt-ink);
	border-radius: var(--radius-button);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-heading);
	letter-spacing: var(--tracking-heading);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-none);
	transition:
		background var(--dur-base) var(--ease),
		color var(--dur-base) var(--ease),
		transform var(--dur-fast) var(--ease);
}

/* 矢印アイコン (::after, mask-image で currentColor 継承) */
.tt-btn::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 56px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask-image: url("/wp-content/uploads/2025/09/btn-arrow-icon.svg");
	mask-image: url("/wp-content/uploads/2025/09/btn-arrow-icon.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--dur-base) var(--ease);
}

/* :visited:hover も明示 (base.css の a:visited:hover が 0,2,1 で勝つため) */
.tt-btn:hover,
.tt-btn:focus-visible,
.tt-btn:visited:hover,
.tt-btn:visited:focus-visible {
	background: var(--tt-ink-soft); /* rgba(0,0,0,0.72) で半透明グレー風 */
	color: var(--tt-surface);
	border-color: var(--tt-ink);
}

.tt-btn:hover::after,
.tt-btn:focus-visible::after {
	transform: translateX(6px);
}

.tt-btn:active {
	transform: translateY(1px);
}

.tt-btn:disabled,
.tt-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.tt-btn--block {
	width: 100%;
}

.tt-btn--ghost {
	border-color: var(--tt-muted);
	color: var(--tt-muted);
}

.tt-btn--ghost:hover,
.tt-btn--ghost:focus-visible,
.tt-btn--ghost:visited:hover,
.tt-btn--ghost:visited:focus-visible {
	background: var(--tt-muted);
	color: var(--tt-surface);
	border-color: var(--tt-muted);
}