/* 使い方ページ。配色と書体は shop.css（＝地図と同じ）に乗せ、差分だけ足す。 */
.lead { font-size:.95rem; margin:0 0 2rem; }
/* 規約・ポリシーなどの制定日・最終改定日（題のすぐ下・§11.220） */
.doc-date { font-size:.8rem; color:var(--muted); margin:-.4rem 0 1rem; font-variant-numeric:tabular-nums; }
h2 {
  font-size:1.05rem; margin:2.4rem 0 .8rem; padding-top:1rem;
  border-top:1px solid var(--line);
}
h3 { font-size:.92rem; margin:1.6rem 0 .5rem; }
/* 節の中の小見出し（§11.65 の交差点の節で使う）。
   ★h3 より一段小さく、でも本文より重く。h3 と同じ大きさにすると
     「*9 近くの交差点」の下の話がどこまでなのか読み取れない */
h4 { font-size:.85rem; margin:1.5rem 0 .45rem; color:var(--fg); }
p  { font-size:.88rem; margin:0 0 1rem; }

/* 補足。本文と地続きにせず、一段引いて置く */
.note {
  font-size:.8rem; color:var(--muted); background:var(--panel);
  border-left:3px solid var(--line); border-radius:0 9px 9px 0;
  padding:.7rem .9rem; margin:0 0 1rem;
}

/* 操作の対応表。shop.css の .spec を借りて、見出し列だけ広げる */
.spec th { width:4.5em; }
/* ★中身の側は、割れない長い文字列（URL・英語の出典表記）でも折り返す（§11.185）。
   折り返さないと表が幅を越え、見出しの列が1字ずつ縦に潰れていた（「データについて」・幅390で 16px） */
.spec td { overflow-wrap:anywhere; }
.spec.compare th, .spec.compare td { text-align:center; }
.spec.compare th:first-child, .spec.compare td:first-child { text-align:left; width:8em; }

/* 掲載の3段（§11.62）。見出し列に注釈が入るので、4.5em では潰れる */
.spec.tier th:first-child, .spec.tier td:first-child { width:9em; }
.spec.tier td { vertical-align:top; }
.spec.tier .note {
  display:block; font-size:.72rem; background:none; border:none;
  padding:0; margin:.15rem 0 0;
}

/* リングの図 */
.rings { margin:1.2rem 0 1.4rem; text-align:center; }
.rings svg { max-width:340px; height:auto; }
.rings figcaption { font-size:.75rem; color:var(--muted); margin-top:.4rem; }

code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--panel); border:1px solid var(--line);
  border-radius:5px; padding:.05em .35em;
}
a { color:var(--accent-2); }
.actions .hp-link { color:#fff; }

/* 店舗ページの「*1」から飛んでくる先の印（§11.26）。
   ★同じ形の印を両側に置く。片方だけだと、飛んだ先で
   「どこに着いたのか」が分からない */
.fn-mark { color:var(--accent); font-weight:700; font-size:.8em;
  margin-right:.35em; vertical-align:super; }
/* ★飛んできた節を一瞬だけ光らせる。アンカーで飛ぶと画面が切り替わるだけで
   どこに着いたか分かりにくい。色は薄く、すぐ消す（読む邪魔をしない） */
:target { animation:fn-land 1.6s ease-out; }
@keyframes fn-land {
  from { background:color-mix(in srgb, var(--accent) 22%, transparent); }
  to   { background:transparent; }
}
@media (prefers-reduced-motion: reduce) { :target { animation:none; } }
/* 節の見出し・表の項目名を押すとリンクをコピー（anchor.js・§11.202）。押せる所は手の形、触ると薄い #、押したら一瞬光る */
.can-copy { cursor: pointer; }
.can-copy:hover::after { content: " #"; color: var(--muted); font-weight: 400; font-size: .8em; }
.is-copied { animation: fn-land 1.6s ease-out; }
.copy-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50;
  max-width: min(90vw, 28rem); padding: .55rem .9rem; border-radius: 8px; font-size: .8rem; line-height: 1.5;
  background: #1b1a18; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.copy-toast.show { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .is-copied { animation: none; } .copy-toast { transition: none; } }

/* 標高タイルの抜け方を見せる絵（§11.72）。全角の■・で描いてあるので、
   ★等幅にしないと桁がそろわず、形が読めなくなる。
   狭い画面では**この箱の中だけ**横に流す（本文は横に流さない） */
.map-art {
  font-family: ui-monospace, SFMono-Regular, Menlo, "Noto Sans Mono CJK JP", monospace;
  font-size:.62rem; line-height:1.15; letter-spacing:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:.6rem 0; padding:.6rem .7rem;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  color:var(--muted);
}

/* 目次（§11.185）。ページが長いので頭に置く。使い方の節だけ1段下げて並べる */
.toc { margin:0 0 2rem; padding:.9rem 1rem .6rem; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.toc h2 { margin:0 0 .5rem; padding:0; border:0; font-size:.95rem; }
.toc ol { margin:0; padding-left:1.3rem; font-size:.86rem; line-height:1.75; }
.toc ol ol { padding-left:1.1rem; font-size:.82rem; }
.toc li.has-v > a::after { content:" ▶"; font-size:.7em; color:var(--muted); }
.toc-note { font-size:.74rem; color:var(--muted); margin:.5rem 0 0; }
/* 飛んだ先の見出しが画面の上に貼りつかないように */
h2[id], h3[id] { scroll-margin-top:.8rem; }

/* 紹介動画（§11.185）。押すまで読み込まない（preload="none"・表紙だけ） */
.hv { margin:.4rem 0 1.2rem; }
.hv video { display:block; width:100%; max-width:720px; aspect-ratio:16 / 9; height:auto;
  border-radius:9px; background:#000; }
.hv figcaption { font-size:.74rem; color:var(--muted); margin-top:.3rem; }

/* 目次へ戻る（§11.185）。右下に置いたまま。★端末の下の帯（ホームバー）に重ねない */
.to-top { position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom));
  z-index:20; padding:.45rem .75rem; border-radius:999px; font-size:.8rem; text-decoration:none;
  color:var(--fg); background:var(--panel); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.to-top:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
/* 縦型（§11.199）。縦長で狭い画面では help-video.js が 名前-v.mp4 に付け替え、is-v を付ける */
.hv video.is-v { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }

/* 👍👎 の絵（店舗ページの sc-thumb と同じ線の親指・白黒）。文の中に小さく。下は逆さ */
.thumb-ico { width:1.05em; height:1.05em; vertical-align:-.18em; color:var(--fg); }
.thumb-ico.is-down { transform:rotate(180deg); }