/* ====================================================
トップへ戻るボタン（2026-09-23 追加）
値は 2026-09-23 本人が見て決定。色が目立ちすぎる場合は白い丸・黒い矢印・灰色の線に替える。
==================================================== */
:root {
  /* 2026-09-23 決定 */
  --page-top-size: 48px;
  --page-top-gap-sp: 16px;
  --page-top-gap-pc: 24px;
  --page-top-bg: #212121;
  --page-top-fade: 0.2s;
}

.page-top {
  position: fixed;
  right: var(--page-top-gap-sp);
  bottom: var(--page-top-gap-sp);
  z-index: 90; /* ヘッダー・ドロワー（100）より下。メニューを開いたときはメニューの下に隠れる */
  width: var(--page-top-size);
  height: var(--page-top-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--page-top-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--page-top-fade) ease, visibility var(--page-top-fade) ease;
}

@media screen and (min-width: 768px) {
  .page-top {
    right: var(--page-top-gap-pc);
    bottom: var(--page-top-gap-pc);
  }
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

.page-top__icon {
  width: 24px;
  height: 24px;
}

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