/* ページの上へ戻るボタン（to-top.js が作る）。右下に浮かべ、少し下まで読んだらふわっと出す。
   色と影は、各ページの :root のトークン（トップページと page.css で同じ値）を使う */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(119, 119, 119, 0.18); border-radius: 50%;
  background: var(--color-pure-white); color: var(--color-charcoal); box-shadow: var(--shadow-card); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-calm), transform 0.5s var(--ease-calm), visibility 0s linear 0.5s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { color: var(--color-vermilion); }
.to-top:focus-visible { outline: 2px solid var(--color-vermilion); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }