/**
 * ページトップに戻るボタン（Figma: 4106:15737 / btn_circle_fill）
 * 画面右下に固定表示。スクロールで一定量下がると表示され、押すと最上部へ戻る。
 */

.page-top {
	position: fixed;
	right: var(--space-40);
	bottom: var(--space-40);
	z-index: 90; /* g-nav（100）・全画面メニュー（200）より背面。本文装飾より前面 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-56);
	height: var(--space-56);
	padding: 0;
	background-color: var(--color-primary-dark);
	border: 2px solid var(--color-primary); /* 非スケール要素（線）の例外 */
	border-radius: var(--radius-full);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--space-8));
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease,
		background-color 0.2s ease;
}

.page-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page-top:hover {
	background-color: var(--color-primary);
}

.page-top__icon {
	display: block;
	width: var(--space-20);
	height: var(--space-20);
}

.page-top__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.page-top {
		transition: opacity 0.01ms;
		transform: none;
	}
}

/* SP（767px以下）：画面端からの余白を詰める */
@media (max-width: 767px) {
	.page-top {
		right: var(--space-20);
		bottom: var(--space-20);
	}
}