/* ページの先頭へ戻るボタン 案2「紺の丸」（2026-10-20 夜 Mia が drafts/2026-10-20_to-top/b/ に作り、
   2026-10-21 朝 オーナーが案2に決めた「案2で実装してください」、同じ朝 Mia が work/ に入れた。縦書きの形は採らない）
   形：紺（#1f3a68）の丸。中に白い矢じりと「ページの／先頭へ」を2行で組む
   大きさ：直径64px（PC）、60px（スマートフォン）
   矢じりは16pxの枠の中の整数の線（3.5,10.5）（8,6）（12.5,10.5）で、軸 x=8 が画素の境目に乗り、左右が同じになる
   丸の幅と矢じりの枠の幅はどちらも偶数で、矢じりは丸の中の整数の位置に来る
   紺の帯の上では白い丸に紺の中身（.on-dark）。出し方は to-top.js
   置き方（2026-10-21 Mia、足もとでも消さないため）：to-top.js がボタンを足もとの直前に移し、ここで sticky にする。
   ふだんは画面の下から24pxに張り付き、足もとが上がってくると、足もとの上の端から24pxの所で止まって足もとと一緒に上がる。
   流れの中の高さは余白で0にする（上 -(64+24)px、下 24px。足もとの位置もページの長さも変わらない） */
.to-top {
  position: sticky;
  bottom: 24px;
  z-index: 50;
  margin: -88px 16px 24px auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  height: 64px;
  padding-top: 8px; /* 中身の高さ46px を丸の真ん中に置くと9px。游ゴシックの字のインクが下に寄るので1px 上げた（10/20夜に字10pxで測り、インクの上下の空きが14.75・12.25px → 13.75・13.25px になった） */
  gap: 2px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, background-color .2s ease;
}
.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top-icon { display: block; flex: none; width: 16px; height: 16px; transition: transform .2s ease; }
.to-top-icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 字は11px（10px では等倍の画面で読みづらかった、10/20夜） */
.to-top-text { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .04em; padding-left: .04em; text-align: center; }
.to-top-text span { display: block; }
.to-top:hover { background: var(--brand-dark); }
.to-top:hover .to-top-icon { transform: translateY(-2px); }
/* 白い丸には紺の1pxの縁：紺の帯と白い地の境目に止まったとき（お問い合わせのページの390px、紺の確認のボタンの横）、
   白い地にかかった半分が溶けて丸が欠けて見えたため（2026-10-21 Mia）。紺の地の上では縁は地に溶けて見えない */
.to-top.on-dark { background: #fff; color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.to-top.on-dark:hover { background: var(--pale); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.to-top.on-dark:focus-visible { outline-color: #fff; }
@media (max-width: 700px) {
  .to-top { bottom: 16px; margin: -76px 10px 16px auto; width: 60px; height: 60px; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top-icon { transition: none; }
  .to-top:hover .to-top-icon { transform: none; }
}
@media print {
  .to-top { display: none; }
}