/* 神社仏閣マップ 段階 0 の試し。見た目は「老舗の旅の情報誌」（和紙の地・明朝の見出し・罫・朱印）。
   色はデザイン案と同じ: 朱（神社・主なボタン・済の印）× 森（寺・進み具合）× 墨（文字）。紙と墨の色を足している */
:root {
  color-scheme: light;
  --shu: #CF3F23;       /* 朱: 神社・主なボタン・「済」の朱印・この端末の印 */
  --shu-dark: #A8301A;  /* 濃い朱: 朱の小さい文字 */
  --shu-wash: #FBEBE5;  /* 薄い朱: うまくいかない行の地 */
  --mori: #2E7D6B;      /* 森: 寺・進み具合・ほかの端末の印 */
  --mori-dark: #1F6252; /* 濃い森: 森の小さい文字 */
  --sumi: #22282B;      /* 墨: 文字 */
  --usuzumi: #57534B;   /* 薄墨: 添え書き（和紙の上で 6:1 ほど） */
  --muted: var(--usuzumi);   /* css/omikuji.css が使う添え書きの色 */
  --nezu: #8A8378;      /* 鼠: 枠・点線（和紙の上で 3:1 ほど） */
  --washi: #F4EFE4;     /* 和紙: 地 */
  --kinari: #FBF8F1;    /* 生成り: 用紙・ボタンの地 */
  --kei: rgba(34, 40, 43, .2);   /* 細い罫 */
  --mincho: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --gothic: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', 'Yu Gothic', YuGothic, 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
  /* 大きさの決まり（狭い画面・PC では、ここだけを変える） */
  --gutter: 16px;       /* 左右の余白 */
  --no-box: 38px;       /* 節の番号（一〜五）の枠 */
  --h2: 20px;           /* 節の見出し */
  --mark-col: 48px;     /* 確かめることの、右の印の列 */
}

* { box-sizing: border-box; }
/* hidden を付けたものは必ず隠す（form { display: flex } などに負けないように） */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--washi); touch-action: manipulation; }   /* 2 回つづけて押しても、画面が拡大されないように */
/* 目次から移るときは、すっと動かす（動きを減らす設定のときは、すぐに移る） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  /* 和紙の地。むら・繊維・塵は css/washi.svg（くり返し） */
  background: var(--washi) url('washi.svg') 0 0 / 360px 360px;
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.7;
  /* iPhone の切り欠き・角・下のバーをよける */
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  overflow-wrap: anywhere;
  /* 行頭に「ー」や小さい「ゃ」などを出さない（日本語の禁則を厳しく） */
  line-break: strict;
}
h1, h2, p, ol, ul, dl, dd, figure { margin: 0; }
small { font-size: .72em; }
/* 見出しと短い題は、かなを詰め（palt）、文節で折り返す（対応しているブラウザだけ） */
h1, h2, .issue, .sub, .checks .t, .kicker, .mokuji, .fig-no, .ok-title, .hanrei .hl { font-feature-settings: 'palt'; }
h1, h2, .checks .t, .lead, .sub, .cap, .save-hint, .okuduke dd { word-break: auto-phrase; }
/* キーボードで動かしたときの枠（ボタン・欄・目次の字の、どれにも） */
:focus-visible { outline: 3px solid var(--mori); outline-offset: 2px; }

/* ---------- 表紙（題字） ---------- */
.masthead { max-width: 1160px; margin: 0 auto; padding-top: 12px; border-bottom: 1px solid var(--sumi); }
/* 号数と年月の行。下に子持ち罫（太い線＋細い線） */
.issue {
  position: relative;
  display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  padding-bottom: 14px;
  font-family: var(--mincho); font-size: 13px; font-weight: 400; letter-spacing: .14em; line-height: 1.5; color: var(--usuzumi);
}
.issue span:first-child { color: var(--shu-dark); }
.issue::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(var(--sumi) 0 3px, transparent 3px 5px, var(--sumi) 5px 6px);
}
/* 題字と落款 */
.daiji {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 14px 0 12px;
}
.masthead h1 {
  font-family: var(--mincho); font-weight: 700;
  /* 320px の iPhone でも 1 行に収まる大きさ（落款の分をよける） */
  font-size: clamp(30px, calc((100vw - 100px) / 6.6), 66px);
  line-height: 1.12; letter-spacing: .06em;
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .1em;
}
.masthead .d2 { font-size: .62em; color: var(--shu); letter-spacing: .1em; }
.rakkan { width: 52px; height: 52px; transform: rotate(3deg); filter: drop-shadow(0 .5px 0 rgba(120, 30, 10, .25)); }
.sub {
  grid-column: 1 / -1; margin-top: 6px;
  font-family: var(--mincho); font-size: clamp(12.5px, 3.5vw, 15px); font-weight: 400; letter-spacing: .12em; color: var(--usuzumi);
}
/* 縦書きの一行（PC だけ出す） */
.tagline { display: none; }
/* 段階 0 の試し: 森の二重枠の札と、リード文 */
.stage {
  padding: 12px 0 14px;
  border-top: 1px solid var(--sumi);
  font-family: var(--mincho); font-size: 15px; line-height: 1.85;
  text-wrap: pretty;
}
.badge {
  float: left; margin: 2px 10px 0 0;
  font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .08em;
  color: var(--mori-dark);
  padding: 5px 8px 4px;
  border: 1.5px solid var(--mori-dark);
  box-shadow: inset 0 0 0 2px var(--washi), inset 0 0 0 3px var(--mori-dark);
  background: rgba(46, 125, 107, .06);
}

/* 目次: 五つの節へ。スマホは番号の下に短い名前、PC は横一列に */
.mokuji { border-top: 1px solid var(--kei); }
.mokuji-h { display: none; }
.mokuji ol { list-style: none; padding: 0; display: flex; }
.mokuji li { flex: 1 1 auto; min-width: 44px; }
.mokuji li + li { border-left: 1px solid var(--kei); }
.mokuji a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; padding: 5px 2px;
  font-family: var(--mincho); color: var(--sumi); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mokuji a:active { background: rgba(34, 40, 43, .06); }
.mokuji .n { font-size: 12.5px; line-height: 1.3; color: var(--shu-dark); }
.mokuji .l { font-size: 13.5px; line-height: 1.45; letter-spacing: .02em; white-space: nowrap; }
.mokuji .w { display: none; }

/* ---------- 本文のならび ---------- */
main { max-width: 1160px; margin: 0 auto; padding-top: 32px; }
.sec { position: relative; scroll-margin-top: calc(14px + env(safe-area-inset-top)); }
main > .sec + .sec { margin-top: 52px; }

/* 節の見出し: 朱の漢数字（二重の枠）・明朝の見出し・小見出し。下に二重罫 */
.sec-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 3px double var(--sumi);
}
.sec-head .no {
  flex: none; display: grid; place-items: center;
  width: var(--no-box); height: var(--no-box);
  font-family: var(--mincho); font-weight: 700; font-size: calc(var(--no-box) * .53); line-height: 1; color: var(--shu);
  border: 1.5px solid var(--shu);
  box-shadow: inset 0 0 0 2px var(--washi), inset 0 0 0 3px rgba(207, 63, 35, .55);
}
.sec-head h2 { flex: 1; min-width: 0; font-family: var(--mincho); font-weight: 700; font-size: var(--h2); line-height: 1.4; letter-spacing: .05em; }
.sec-head h2 small { font-weight: 400; letter-spacing: 0; }
.sec-head .kicker {
  flex: none;
  font-family: var(--mincho); font-weight: 400; font-size: 12.5px; letter-spacing: .3em; color: var(--usuzumi);
  padding: 2px 0 2px 8px; border-left: 3px solid var(--shu);
}

/* 飾り罫: 細い線 ─ 花菱 ─ 細い線（奥付の前に一つだけ） */
.kazari {
  max-width: 1160px; height: 18px; margin: 56px auto 0;
  background:
    url('kazari.svg') center / 72px 18px no-repeat,
    linear-gradient(var(--kei), var(--kei)) left center / calc(50% - 44px) 1px no-repeat,
    linear-gradient(var(--kei), var(--kei)) right center / calc(50% - 44px) 1px no-repeat;
}

/* ---------- 一　確かめること ---------- */
/* 見出しの行に「済み n / 5」を出すため、この節だけ格子に組む。
   済み（.tally）は数え終えてから出すので一覧のあとにあるが、見た目は 1 行目の右に置く */
.checks {
  counter-reset: done;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
.checks > .sec-head { display: contents; }
.checks > .sec-head .no { grid-row: 1; grid-column: 1; }
.checks > .sec-head h2 { grid-row: 1; grid-column: 2; align-self: center; }
.checks > .tally { grid-row: 1; grid-column: 3; }
/* 見出しの下の二重罫 */
.checks::before { content: ''; grid-row: 2; grid-column: 1 / -1; margin-top: 10px; border-bottom: 3px double var(--sumi); }
.checks > .hanrei { grid-row: 3; grid-column: 1 / -1; }
.checks > ol { grid-row: 4; grid-column: 1 / -1; }

/* 済んだ数と、5 つに区切った森の棒 */
.tally { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--mincho); color: var(--mori-dark); line-height: 1; }
.tally-t { display: flex; align-items: baseline; gap: 5px; font-size: 13px; letter-spacing: .1em; white-space: nowrap; }
.tally .n::before { content: counter(done); font-size: 24px; font-weight: 700; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.tally .of { font-size: 14px; letter-spacing: .06em; }
.bar { display: flex; gap: 3px; }
.bar i { width: 13px; height: 5px; background: rgba(31, 98, 82, .16); }
/* 棒の長さは :has() で決める（古い iPhone では棒は空のまま。数は出る） */
.checks:has(li[data-state="ok"]) .bar i:nth-child(1),
.checks:has(li[data-state="ok"] ~ li[data-state="ok"]) .bar i:nth-child(2),
.checks:has(li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"]) .bar i:nth-child(3),
.checks:has(li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"]) .bar i:nth-child(4),
.checks:has(li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"] ~ li[data-state="ok"]) .bar i:nth-child(5) { background: var(--mori); }

/* 凡例（印の見方）。一覧の前に */
.hanrei {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 9px 0 8px;
  border-bottom: 1px solid var(--kei);
  font-size: 13.5px; line-height: 1.5; color: var(--usuzumi);
}
.hanrei .hl { font-family: var(--mincho); font-weight: 700; letter-spacing: .2em; color: var(--sumi); }
.hanrei .k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.checks ol { list-style: none; padding: 0; }
.checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) var(--mark-col);
  column-gap: 6px;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--kei);
  position: relative;
  /* 朱印を押す動き（少し大きくしてから押す）で、横にはみ出さないように */
  overflow-x: clip;
}
.checks li[data-state="ok"] { counter-increment: done; }
.checks li > .no { grid-column: 1; grid-row: 1; align-self: start; margin-top: 1px; font-family: var(--mincho); font-weight: 400; font-size: 16px; line-height: 26px; color: var(--usuzumi); text-align: center; }
.checks li[data-state="ok"] > .no { color: var(--shu-dark); }
.checks .tl { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; min-height: 28px; }
.checks .t { flex: 0 1 auto; min-width: 0; font-family: var(--mincho); font-weight: 700; font-size: 17px; line-height: 26px; letter-spacing: .03em; text-wrap: pretty; padding-bottom: 1px; }
.checks .t-sub { display: block; font-size: 13.5px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--usuzumi); }
/* 点線のリーダー（目次の「……」）。題の最後の行から印まで。点が 3 つ入らないときは題を折り返す */
.checks .dots {
  flex: 1 0 22px; height: 3px; margin: 0 2px 6px 8px;
  background: radial-gradient(circle, var(--nezu) 1.05px, transparent 1.5px) left center / 7px 3px repeat-x;
}
.checks .s { grid-column: 2 / 4; grid-row: 2; margin-top: 7px; font-size: 14px; line-height: 1.65; color: var(--usuzumi); text-wrap: pretty; }
.checks .s:empty { display: none; }
.checks .mark { grid-column: 3; grid-row: 1; justify-self: center; align-self: center; margin: -8px 0; }
/* 画面読み上げ用（見た目には出さない）: 状態をことばで */
.st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checks li[data-state="ok"] .st::after { content: '（できた）'; }
.checks li[data-state="wait"] .st::after { content: '（まだ）'; }
.checks li[data-state="ng"] .st::after { content: '（うまくいかない）'; }

/* 印（右の丸・角）。凡例の .seal も同じ形で、--m の倍率で小さくする */
.checks .mark, .seal {
  --m: 1;
  position: relative; flex: none;
  display: grid; place-items: center;
  font-family: var(--mincho); font-weight: 700; line-height: 1;
}
.seal { --m: .6; }
/* 待: 点線の丸に「待」（まだ押していない御朱印の枠のように）。細く、薄く */
.checks li[data-state="wait"] .mark, .seal-wait {
  width: calc(34px * var(--m)); height: calc(34px * var(--m)); border-radius: 50%;
  border: 1.5px dashed var(--nezu);
  color: var(--usuzumi); font-size: calc(14px * var(--m)); font-weight: 400;
}
.checks li[data-state="wait"] .mark::before, .seal-wait::before { content: '待'; }
/* 済: 朱印。朱の丸に白い「済」と細い内枠。手で押したように、項目ごとに傾きを変える（--kata） */
.checks li[data-state="ok"] .mark, .seal-ok {
  width: calc(42px * var(--m)); height: calc(42px * var(--m)); border-radius: 50%;
  background: var(--shu); color: #fff; font-size: calc(21px * var(--m));
  box-shadow: inset 0 0 0 calc(2.5px * var(--m)) var(--shu), inset 0 0 0 calc(3.6px * var(--m)) rgba(255, 255, 255, .85);
  transform: rotate(var(--kata, -8deg));
}
.checks li[data-state="ok"] .mark::before, .seal-ok::before { content: '済'; }
#c-home { --kata: -9deg; }
#c-map { --kata: -4deg; }
#c-geo { --kata: -12deg; }
#c-login { --kata: -6deg; }
#c-sync { --kata: -10deg; }
/* 朱印のかすれ（css/hanko.svg を mask に。効かないブラウザでは、むらのない朱になるだけ） */
.checks li[data-state="ok"] .mark, .rakkan, .kenin-in {
  -webkit-mask-image: url('hanko.svg'); mask-image: url('hanko.svg');
  -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
}
/* 要: 墨の角印に白抜きの「要」（うまくいかない。説明を見て直すか、やり直す） */
.checks li[data-state="ng"] .mark, .seal-ng {
  width: calc(34px * var(--m)); height: calc(34px * var(--m)); border-radius: 3px;
  background: var(--sumi); color: #fff; font-size: calc(17px * var(--m));
  box-shadow: inset 0 0 0 calc(2px * var(--m)) var(--sumi), inset 0 0 0 calc(3px * var(--m)) rgba(255, 255, 255, .55);
}
.checks li[data-state="ng"] .mark::before, .seal-ng::before { content: '要'; }
/* うまくいかない行は、薄い朱の地と左の朱の線で、さっと見ても分かるように */
.checks li[data-state="ng"] {
  margin: 0 -10px; padding-left: 10px; padding-right: 10px;
  background: var(--shu-wash); box-shadow: inset 3px 0 var(--shu);
}
.checks li[data-state="ng"] .s { color: var(--sumi); }
.checks li[data-state="ng"] .s::before { content: 'うまくいきませんでした　'; font-weight: 700; color: var(--shu-dark); }

/* 済になった時に、朱印を押すように */
@keyframes osu {
  0% { transform: rotate(calc(var(--kata, -8deg) - 4deg)) scale(1.25); opacity: 0; }
  55% { transform: rotate(var(--kata, -8deg)) scale(.93); opacity: 1; }
  100% { transform: rotate(var(--kata, -8deg)) scale(1); opacity: 1; }
}
.checks li[data-state="ok"] .mark { animation: osu .34s cubic-bezier(.3, .7, .4, 1) both; }

/* ---------- 二　地図（図版として） ---------- */
.fig { padding-top: 16px; }
/* 二重枠（墨の線を 2 本） */
.mapbox {
  position: relative; overflow: hidden;
  height: 56vh; min-height: 300px; max-height: 620px;
  margin: 4px;
  background: #E9E4D6;
  border: 1px solid var(--sumi);
  outline: 1px solid var(--sumi); outline-offset: 3px;
}
#map { position: absolute; inset: 0; }
/* 地図の出典（OpenFreeMap・OpenStreetMap）: いつも見える所に小さく出す */
#map .maplibregl-ctrl-attrib { font-size: 10px; line-height: 1.3; background: rgba(248,243,232,.85); }
/* 地図が出るまで（キーがまだ・読み込み中）は、枠の中に断りと、見る所を出す */
#map:empty::before, #map:empty::after {
  position: absolute; left: 12px; right: 12px; text-align: center;
  font-family: var(--mincho); color: var(--usuzumi);
}
#map:empty::before { content: 'ここに地図が出ます'; top: calc(50% + 30px); font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--sumi); }
#map:empty::after {
  content: '出ないときは、一「確かめること」の\A二「地図が出る」を見てください';
  white-space: pre-line; top: calc(50% + 60px);
  font-size: 13.5px; line-height: 1.75; letter-spacing: .02em;
}
#map:empty {
  /* 方眼の薄い罫（白地図の見立て） */
  background:
    linear-gradient(rgba(34, 40, 43, .06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(34, 40, 43, .06) 1px, transparent 1px) 0 0 / 32px 32px;
}
/* 真ん中の印: 印刷のトンボ（十字と丸） */
.cross {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 9.2px, var(--sumi) 9.8px 11.2px, transparent 11.8px),
    linear-gradient(var(--sumi), var(--sumi)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--sumi), var(--sumi)) center / 100% 1.5px no-repeat;
  opacity: .8;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
/* ボタンは地図の下に（地図の右下の Google の字や、拡大のボタンを隠さないように） */
.map-actions { display: flex; gap: 10px; margin-top: 16px; }
.map-actions button { flex: 1; }
.save-hint { display: none; margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--usuzumi); text-align: center; text-wrap: balance; }
/* 「真ん中を記録」が押せない間だけ、わけを出す */
.fig:has(#btn-save:disabled) .save-hint { display: block; }
figcaption { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--kei); }
.cap { font-family: var(--mincho); font-weight: 400; font-size: 14.5px; line-height: 1.75; text-wrap: pretty; }
.fig-no {
  display: inline-block; margin-right: 10px; padding: 0 6px;
  font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--sumi);
  line-height: 1.6;
}
.legend { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--usuzumi); }
.legend li { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; }
.lg { flex: none; display: inline-block; width: 16px; height: 16px; position: relative; }
.lg-own { border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(34, 40, 43, .25); }
.lg-other { width: 13px; height: 13px; margin: 0 1.5px; border-radius: 2px; background: var(--mori); transform: rotate(45deg); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(34, 40, 43, .25); }
.lg-here { width: 12px; height: 12px; margin: 0 2px; border-radius: 50%; background: #2F80ED; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(47, 128, 237, .25); }
.lg-cross {
  background:
    radial-gradient(circle, transparent 0 4.4px, var(--sumi) 4.8px 5.6px, transparent 6px),
    linear-gradient(var(--sumi), var(--sumi)) center / 1.2px 100% no-repeat,
    linear-gradient(var(--sumi), var(--sumi)) center / 100% 1.2px no-repeat;
}

/* ---------- ボタン ---------- */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mincho); font-weight: 600; font-size: 16px; letter-spacing: .06em; line-height: 1.3;
  min-height: 50px; padding: 6px 12px;
  border-radius: 3px;
  border: 1.5px solid var(--sumi); background: var(--kinari); color: var(--sumi);
  box-shadow: 0 2px 0 rgba(34, 40, 43, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button.primary { background: var(--shu); border-color: var(--shu-dark); color: #fff; box-shadow: 0 2px 0 var(--shu-dark); }
/* 水みくじの「水に浮かべる」は青のまま（朱のボタンの決まりに負けないように） */
button.primary.omikuji-float { box-shadow: 0 2px 0 #24506F; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
/* 押せない間: 色を薄くせず、点線の枠にする（字は読める濃さのまま） */
button:disabled { background: transparent; border: 1.5px dashed var(--nezu); color: var(--usuzumi); box-shadow: none; cursor: default; }
.ic { flex: none; width: 19px; height: 19px; }
/* PC（マウス）: 指した所を少し変える */
@media (hover: hover) {
  button:hover:not(:disabled) { background: #fff; }
  button.primary:hover:not(:disabled) { background: #BC3820; }
  button.primary.omikuji-float:hover:not(:disabled) { background: #28597D; }
  .mokuji a:hover { background: rgba(207, 63, 35, .06); }
  .mokuji a:hover .l { text-decoration: underline; text-decoration-color: var(--shu); text-underline-offset: 5px; }
}

/* ---------- 三　ログイン（受付票） ---------- */
.slip {
  margin-top: 16px; padding: 16px 16px 16px;
  background: var(--kinari);
  border: 1px solid var(--nezu);
  box-shadow: 4px 4px 0 rgba(34, 40, 43, .06);
}
form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mincho); font-size: 15px; font-weight: 400; letter-spacing: .06em; color: var(--sumi); }
input {
  font-family: var(--gothic); font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--sumi);
  width: 100%; min-height: 50px; padding: 0 12px;
  border-radius: 2px; border: 1px solid var(--nezu); background: #fff;
  box-shadow: inset 0 1px 2px rgba(34, 40, 43, .08);
  -webkit-appearance: none; appearance: none;
}
input:focus { border-color: var(--sumi); }
form button { margin-top: 4px; }
#who p { margin-bottom: 12px; font-family: var(--mincho); font-weight: 400; line-height: 1.8; word-break: auto-phrase; }
/* 受付済みの札 */
#who p::before {
  content: 'ログイン中'; display: block; width: fit-content; margin-bottom: 8px; padding: 3px 9px 2px;
  font-family: var(--gothic); font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .14em;
  color: var(--mori-dark); border: 1px solid var(--mori-dark); background: rgba(46, 125, 107, .07);
}
#who-mail { font-family: var(--gothic); font-weight: 700; }
.msg { margin-top: 10px; font-size: 14px; color: var(--shu-dark); font-weight: 700; }
/* 空のときも消さない（読み上げが、あとから出る知らせを読めるように） */
.msg:empty { margin: 0; }

/* ---------- 四　試しの記録（記録帳） ---------- */
.note { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--usuzumi); text-wrap: pretty; }
#records { list-style: none; padding: 0; margin-top: 12px; border-top: 1px solid var(--sumi); }
#records li {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kei);
  font-size: 14.5px; line-height: 1.6;
}
#records li > :first-child { flex: 0 1 auto; order: 0; }
/* 点線のリーダー（記録 ……… 時刻） */
#records li::after {
  content: ''; order: 1; flex: 1 0 14px; height: 3px; margin-bottom: 7px;
  background: radial-gradient(circle, var(--nezu) 1px, transparent 1.4px) left center / 6px 3px repeat-x;
}
#records .when { order: 2; flex: none; color: var(--usuzumi); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#records .pending { color: var(--shu-dark); font-weight: 700; }
#records:empty::before {
  content: 'まだ記録はありません';
  display: block; padding: 14px 0; text-align: center;
  font-family: var(--mincho); font-size: 14px; letter-spacing: .1em; color: var(--usuzumi);
  border-bottom: 1px solid var(--kei);
}

/* ---------- 五　今日のおみくじ（付録。中の見た目は css/omikuji.css） ---------- */
#omikuji { padding-top: 18px; }

/* ---------- 地図の上の印 ---------- */
/* 今いる場所の点（青） */
.here-dot { width: 18px; height: 18px; border-radius: 9px; background: #2F80ED; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47, 128, 237, .22); }
/* 試しの印: この端末は朱の丸、ほかの端末は森の菱形（色だけでなく形でも分かるように） */
.trial-pin { width: 22px; height: 22px; border-radius: 11px; background: var(--shu); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.trial-pin.other { width: 20px; height: 20px; border-radius: 3px; background: var(--mori); transform: rotate(45deg); }

/* ---------- 奥付 ---------- */
.okuduke {
  max-width: 560px; margin: 28px auto 0; padding: 18px 20px 16px;
  border: 1px solid var(--sumi);
  outline: 1px solid var(--sumi); outline-offset: -6px;
  font-family: var(--mincho); font-size: 13.5px; line-height: 1.75;
}
.ok-title {
  text-align: center; font-weight: 700; font-size: 15px; letter-spacing: .6em; text-indent: .6em;
  padding-bottom: 8px; margin: 0 6px 10px; border-bottom: 1px solid var(--sumi);
}
.okuduke dl { padding: 0 6px; }
.okuduke dl > div { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.okuduke dt { font-weight: 400; letter-spacing: .2em; color: var(--usuzumi); }
.okuduke dd { font-weight: 400; }
.ver {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 6px 0; padding-top: 10px; border-top: 1px solid var(--kei);
}
.version { font-family: var(--mincho); font-weight: 400; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
/* 検印: 細い枠の中に、試し刷りの朱印「試」 */
.kenin { display: inline-flex; align-items: center; gap: 8px; }
.kenin-l { font-size: 12px; letter-spacing: .3em; color: var(--usuzumi); }
.kenin-in {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--shu); color: #fff; font-weight: 700; font-size: 17px; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3px rgba(255, 255, 255, .85);
  transform: rotate(-8deg);
}

/* ---------- 狭い画面（320px の iPhone） ---------- */
@media (max-width: 359px) {
  :root { --mark-col: 44px; }
  .sec-head .kicker { display: none; }
  .issue { font-size: 12px; letter-spacing: .08em; }
  /* 狭いと文節で送ったときに 1 行目が大きく空くので、ふつうの折り返しにする */
  .lead { word-break: normal; }
  .mokuji .l { font-size: 13px; letter-spacing: 0; }
  /* ボタンの字が 1 行に収まるように、絵を外して詰める */
  .map-actions .ic { display: none; }
  .map-actions button { padding: 6px 8px; letter-spacing: .02em; }
  .checks li { grid-template-columns: 20px minmax(0, 1fr) var(--mark-col); column-gap: 4px; }
  .checks .t { font-size: 16px; letter-spacing: 0; }
  /* リーダーの点が 2 つほどしか入らないので、出さない */
  .checks .dots { display: none; }
  .hanrei { column-gap: 10px; }
}

/* ---------- 広い画面（タブレット・PC） ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; --mark-col: 56px; }
  .daiji { padding: 18px 0 16px; }
  .rakkan { width: 68px; height: 68px; }
  .stage { font-size: 16px; }
  .slip { max-width: 560px; }
  .checks li { grid-template-columns: 28px minmax(0, 1fr) var(--mark-col); column-gap: 8px; }
  /* 目次: 「目次」の字と、五つの節を横一列に */
  .mokuji { display: flex; align-items: stretch; }
  .mokuji-h {
    display: flex; align-items: center; flex: none; padding: 0 18px 0 2px;
    font-family: var(--mincho); font-weight: 700; font-size: 14px; letter-spacing: .4em;
  }
  .mokuji ol { flex: 1; border-left: 1px solid var(--kei); }
  .mokuji a { flex-direction: row; justify-content: flex-start; gap: 7px; min-height: 52px; padding: 6px 10px; }
  .mokuji .n { font-size: 13.5px; }
  .mokuji .l { font-size: 14px; }
  .mokuji .w { display: inline; }
}
/* PC: 見開きのように左右二段。左に 一 確かめること・三 ログイン・四 記録、右に 二 地図（左の二つと同じ高さまで伸ばす）・五 おみくじ */
@media (min-width: 980px) {
  :root { --gutter: 40px; --no-box: 40px; --h2: 22px; }
  /* 表紙: 左に題字、右にリード文（1200px 以上では、間に縦書きの一行） */
  .masthead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 44px; padding-top: 22px; }
  .issue, .mokuji { grid-column: 1 / -1; }
  .daiji { grid-template-columns: auto minmax(0, 1fr); padding: 24px 0 20px; }
  .rakkan { justify-self: start; margin-left: 10px; }
  .masthead h1 { font-size: clamp(52px, 5.6vw, 66px); }
  /* 目次: 五つを同じ幅に */
  .mokuji li { flex: 1 1 0; }
  .mokuji a { gap: 10px; padding: 6px 14px; }
  .mokuji .n { font-size: 14px; }
  .mokuji .l { font-size: 15px; }
  .badge { float: none; display: table; margin: 0 0 10px; }
  .stage { grid-column: -2; align-self: center; border-top: 0; border-left: 1px solid var(--kei); padding: 4px 0 4px 32px; }
  main {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto;
    column-gap: 64px; row-gap: 56px; align-items: start; padding-top: 44px;
  }
  main > .sec + .sec { margin-top: 0; }
  main > .checks { grid-column: 1; grid-row: 1; }
  main > .fig-sec { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; }
  main > .login { grid-column: 1; grid-row: 2; }
  main > .rec { grid-column: 1; grid-row: 3; }
  main > .omikuji { grid-column: 2; grid-row: 3; }
  /* 地図は、左の二つ（確かめること・ログイン）の高さまで伸ばす（左の下に空きを作らない） */
  .fig { flex: 1 1 auto; display: flex; flex-direction: column; }
  .mapbox { flex: 1 1 auto; height: auto; min-height: 420px; max-height: none; }
  /* 地図が画面より高いと、地図の上で指やホイールを動かしたとき、ページではなく地図が動いてしまう */
  .mapbox { max-height: calc(100vh - 170px); max-height: calc(100svh - 170px); }
  /* 左右の間の細い縦罫（右の段の左に、上から下まで） */
  main::before { content: ''; position: absolute; grid-column: 2; grid-row: 1 / -1; top: 0; bottom: 0; left: -32px; border-left: 1px solid var(--kei); }
}

/* 広い PC: 題字とリード文の間に、縦書きの一行 */
@media (min-width: 1200px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto minmax(0, 400px); }
  .tagline {
    display: block; align-self: center;
    writing-mode: vertical-rl;
    font-family: var(--mincho); font-size: 14px; line-height: 2.1; letter-spacing: .1em; color: var(--usuzumi);
  }
  /* 縦書きの三行を、少しずつ下げて散らす（題字の高さに収まるように） */
  .tagline span { display: block; }
  .tagline span:nth-child(2) { padding-top: .8em; }
  .tagline span:nth-child(3) { padding-top: 1.6em; color: var(--sumi); }
}

/* 動きを減らす設定のときは、朱印を押す動きを止める */
@media (prefers-reduced-motion: reduce) {
  .checks li[data-state="ok"] .mark { animation: none; }
  button:active:not(:disabled) { transform: none; }
}