*{margin:0;padding:0;box-sizing:border-box}

/* ══ 設計の段（この段の外の値を書かない） ══
   出どころ：apple.com 実CSS実測（2026-08-23取得）＋ 和文サイト設計スキル。
   ・文字は7段。apple.com の 12/14/17/19/24/32/40 に合わせた
   ・字送りは4値。Appleは :lang(ja) で letter-spacing を全部 0 に落としている。
     和文は字間より行間で読ませる、という判断に寄せて、開けるのは小さいラベルだけにした
   ・行間は5段。Appleも日本語版では英語版より軒並み広げている
   ・余白は4/8の倍数のみ
   ・色は無彩色3点（#fff / #f5f5f7 / #1d1d1f）＋アクセント1色。アクセントの面積は5%未満
*/
:root{
 /* 紙は生成り。白い頁ではなく、古い図鑑の紙の上に線画を置く。
    墨も真っ黒にせず、紙に合わせて温かい濃茶に寄せた。
    赤は「登れる高さ」に予約した一色。パステルを足してもここは動かさない */
 /* 色は flypeach.com の公式CSS実測（2026-08）から取った。ロゴは商標なので触らない。
    移したのは層の作りと、黒を使わないこと。
    地はクリーム、その上に白いカード。黒のかわりに焦げ茶を文字色に使い、
    全体を「グレー」ではなく暖色ニュートラルで統一する。
    色は二役に分ける。--acc は「登れる高さ」に予約した測りの色。
    --ui は押せるもの（リンク・現在地・送り）の色。混ぜない */
 --ink:#3a2c25; --sub:#6d564a; --mute:#a08876; --line:#e2c3a6; --line2:#f0e2d3;
 --paper:#ffffff; --gray:#fdf4ec; --acc:#e04e2f; --ui:#e65080; --black:#3a2c25;
 /* 地は白。ベージュは面の色であって、地の色ではない。
    白い余白の上にベージュの面を置くことで、どこからどこまでが一つの話かが見える。
    角丸は面の階層にだけ付ける。中の要素は角のまま（全部に付けると作らせた感が出る） */
 --bg:#fff9f3; --r:24px; --rs:16px;
 --shadow:0 1px 2px rgba(58,44,37,.04),0 6px 24px rgba(58,44,37,.05);
 --min:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
 /* 欧文は Montserrat。この図鑑は数字がとにかく多い（高さ・年・件数）ので、
    数字の顔が変わるだけで全体の印象が変わる。和文は明示指定する。
    Inter を当てて和文をOS任せに落とすのが、いちばんやってはいけない組み方 */
 --got:"Montserrat",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
 /* 見出しと数字の丸ゴシック。Zen Maru Gothic は SIL OFL。
    後ろに macOS/iOS 内蔵のヒラギノ丸ゴを置いてあるので、
    Webフォントが届かなくても丸いまま出る */
 --maru:"Montserrat","Zen Maru Gothic","Hiragino Maru Gothic ProN",
        -apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;

 --f1:12px; --f2:14px; --f3:17px; --f4:19px; --f5:24px; --f6:32px; --f7:40px;
 --fd:clamp(22px,2.2vw,30px); --fl:clamp(26px,3.2vw,40px); --fn:clamp(40px,6vw,64px);

 --lh1:1.15; --lh2:1.35; --lh3:1.6; --lh4:1.8; --lh5:2;
 --ls0:0; --ls1:.02em; --ls2:.04em; --ls3:.08em;

 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
 --s7:48px; --s8:64px; --s9:96px; --s10:128px;
 --navh:48px;

 --ease:cubic-bezier(.32,.72,0,1);
}

/* ── 暗いほうの色 ──
   iPhone を暗い設定で使っている人には、白い頁がそのまま眩しい面になる。
   色は八つの変数しか使っていないので、そこだけ入れ替える。
   明るいほうは「白い紙の上に、扉と口絵と足元だけが黒い」。
   暗いほうはそれを裏返して「黒い面の上に、本文の面だけが少し浮く」。
   図はすべて currentColor で描いているので、線は自動で白になる。
   値は iOS のシステムグレー（#000 / #1c1c1e / #2c2c2e）に合わせた。
   赤は #c1412d のままだと黒地で沈むので、明るいほうへ寄せてある */
@media (prefers-color-scheme:dark){
 :root{
  --ink:#f4ece2; --sub:#c2ab9a; --mute:#94806f; --line:#4a3a2e; --line2:#33281f;
  --paper:#241c16; --gray:#2e241c; --acc:#ff7a5c; --ui:#ff85a8; --black:#171310;
  --bg:#191310;
 }
 /* ヘッダーの面の色は、明るいほうの指定より後ろで上書きしないと効かない。
    この段は :root の値だけを持たせ、ヘッダーはヘッダーの節のあとで差し替える */
}
html{-webkit-text-size-adjust:100%}
/* キーボードで辿れること。既定の輪郭は黒地の上で見えないので自前で引く */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.ft :focus-visible{outline-color:#ff7a5c}
body{font-family:var(--got);color:var(--ink);background:var(--bg);color-scheme:light dark;
 font-size:var(--f3);line-height:var(--lh4);letter-spacing:var(--ls1);
 line-break:strict;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* palt（約物の詰め）は見出しだけに当てる。和文の本文に当てると
   letter-spacing と噛み合って字間がまだらになる */
h1,h2,h3,h4,.htt,.dname{font-feature-settings:"palt" 1}
/* text-wrap:pretty は和文では使わない。Safari で分割位置が壊れる。
   見出しの balance は問題が出ないのでそのまま */
h1,h2,h3,h4{text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s7)}
svg.fg{max-width:100%;height:auto}
/* まだ輪郭を描き起こしていない施設。高さの棒だけを破線で出す。
   建物の形を推測して描かないための、正直な置き方 */
svg .und{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;
 stroke-dasharray:4 4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
svg .n{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;
 stroke-linejoin:round;stroke-linecap:round}
svg .thin{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;
 stroke-linejoin:round;stroke-linecap:round}
svg .hair{fill:none;stroke:currentColor;stroke-width:.65;opacity:.42;vector-effect:non-scaling-stroke}
svg .deck{stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke;fill:none}
svg .deck.sub{stroke-width:1.2;opacity:.85}

/* ── 扉：この図鑑が何を数えているかを、一基で見せる ──
   図の中の文字は本文の段から外す。viewBoxを縮めて表示するので、
   段どおりのpxを書くと画面上ではその半分以下になる */
/* 扉も口絵も、紙の上に出す。黒い面は脚にだけ残す */
.hero{background:var(--paper);color:var(--ink);padding-top:var(--navh)}
.hero .wrap{min-height:calc(100vh - var(--navh) - 160px);
 min-height:calc(100svh - var(--navh) - 160px);display:flex;align-items:center;
 padding-top:var(--s7);padding-bottom:var(--s5)}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--s7);
 align-items:center;width:100%}
.hz{display:block;width:100%;height:auto;max-height:58vh;max-height:62svh}
.hz .n{stroke:var(--ink)}
.hz .thin{stroke:var(--sub)}
.hz .hair{stroke:var(--mute);opacity:.45}
.hz .deck{stroke:var(--acc);stroke-width:2}
.hz .ln{stroke:var(--acc);stroke-width:1;fill:none}
.hz .lnt{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:3 5}
.hz .gnd{stroke:var(--line);stroke-width:1;fill:none}
.hz .ml{font-family:var(--got);font-size:20px;letter-spacing:.06em;
 font-variant-numeric:tabular-nums}
.hz .mn{font-family:var(--got);font-size:16px;letter-spacing:.06em}
.hz .a{fill:var(--acc)}
.hz .g{fill:var(--mute)}
.hz .hit{fill:transparent;cursor:pointer}
/* 扉の肩見出し。数字が主役になったので、ここは小さな札に落とす */
.htt{font-family:var(--got);font-weight:400;font-size:15px;letter-spacing:.14em;
 color:var(--mute)}
.hlede{font-family:var(--min);font-size:var(--fl);line-height:1.7;letter-spacing:var(--ls1);
 margin-top:var(--s6);text-wrap:balance}
.hlede span{display:inline-block}
.hlede b{font-weight:400;color:var(--acc)}
.hsub{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);color:var(--sub);
 margin-top:var(--s5);max-width:26em}
.hgo{display:inline-block;margin-top:var(--s7);font-size:var(--f2);letter-spacing:var(--ls3);
 color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:var(--s2);
 transition:border-color .18s var(--ease),color .18s var(--ease)}
.hgo:hover{border-bottom-color:var(--acc)}
/* ── 扉のあらわれ方 ──
   この図鑑の主題は「三三三のうち、二五〇までしか行けない」こと。
   図をいちどに出すと、それはただの完成図になる。
   地面と塔 → 全高 → 人が立てる床 → 行けない八三メートル、の順に置いていく。
   赤がいちばん最後に来る。落ちが先に見えていては意味がない。
   段の切りかえは 0.32s、全体で 1.4s。押したときの反応ではなく一度きりの口上なので、
   この長さまで取る。動きを減らす設定のときは .anim が付かず、最初から全部出る */
.hz .hp{transform-box:fill-box;transform-origin:50% 100%}
.hz.anim .hp{opacity:0;animation:hpin .5s var(--ease) both}
.hz.anim .hp2{animation-delay:.42s;animation-duration:.36s}
.hz.anim .hp3{animation-delay:.72s;animation-duration:.36s}
.hz.anim .hp4{animation-delay:1.06s;animation-duration:.36s}
/* 床の線だけは、塔の縁から目盛りのほうへ引かれていく */
.hz.anim .hp3 .deck,.hz.anim .hp3 .ln{stroke-dasharray:1;stroke-dashoffset:1;
 animation:hdraw .52s var(--ease) .72s both}
@keyframes hpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hdraw{to{stroke-dashoffset:0}}
/* 見出しから順に、一段ずつ遅らせて起こす */
.anim .htt,.anim .hlede,.anim .hsub,.anim .hgo{animation:hpin .5s var(--ease) both}
.anim .htt{animation-delay:.06s}
.anim .hlede{animation-delay:.16s}
.anim .hsub{animation-delay:.30s}
.anim .hgo{animation-delay:.42s}

/* 狭い画面では二桁を一列に落とす。ただし字を全部先に出して図を下へ送ると、
   最初の一画面が字だけになる。標題と口上のあとに図を挟み、註と行き先はその下へ回す。
   display:contents で .htxt の中身をそのまま格子の駒として扱う */
@media(max-width:980px){.hgrid{grid-template-columns:1fr;gap:0}
 .hero .wrap{min-height:0;padding-top:var(--s7);padding-bottom:var(--s8)}
 .htxt{display:contents}
 .htt{order:1}.bignum{order:2}.hcap{order:3}.hfig{order:4}.hsub{order:5}.hgo{order:6}
 .hfig{margin-top:var(--s7)}
 .bignum{margin-top:var(--s4)}
 .hsub{margin-top:var(--s7);max-width:none}
 .hz{max-height:none}
 .hz .ml{font-size:25px}.hz .mn{font-size:19px}}

/* ── 口絵 ── */
.opening{background:var(--paper);color:var(--ink);position:relative}
.opening .wrap{padding-top:var(--s7);padding-bottom:var(--s8)}
.ohead{display:grid;grid-template-columns:minmax(260px,auto) minmax(280px,34em);
 gap:var(--s7);align-items:end;padding-bottom:var(--s7)}
.ott{font-family:var(--min);font-weight:400;font-size:var(--f6);line-height:var(--lh2);
 letter-spacing:var(--ls2)}
.sub{font-size:var(--f2);letter-spacing:var(--ls3);color:var(--mute);margin-top:var(--s5)}
.lead{font-family:var(--min);font-size:var(--f3);line-height:var(--lh5);letter-spacing:var(--ls1);
 color:var(--sub);max-width:34em;
 border-top:1px solid var(--line);padding-top:var(--s5)}
.cnt{font-size:var(--f2);letter-spacing:var(--ls3);color:var(--mute);margin-top:var(--s7)}
/* 横に流す帯では、行き止まりまで指を滑らせても親（＝頁全体）を巻き込まない。
   iOS では巻き込むと「前の頁へ戻る」が誤発火して、見ていたものが消える */
#front{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
 overscroll-behavior-inline:contain}
.fz{display:block;color:#fff;width:100%;height:auto}
.swipe{display:none}
@media(max-width:860px){#front .fz{min-width:840px}
 .swipe{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);
  margin-top:var(--s3);text-align:center}}
.fz .lb{fill:var(--acc);font-family:var(--got);font-size:12px;letter-spacing:.08em;text-anchor:end}
/* 図中の名前だけは段から外す。29基が横に並ぶので12pxだと隣とぶつかる */
.fz .nmz{fill:var(--mute);font-family:var(--got);font-size:11px;letter-spacing:.04em;text-anchor:middle;
 font-variant-numeric:tabular-nums}
.fz .gnd{stroke:var(--line);stroke-width:1;fill:none}
.fz .grid{stroke:var(--line2);stroke-width:1;fill:none}
.fz .gl{fill:var(--mute);font-family:var(--got);font-size:11px;letter-spacing:.08em;text-anchor:start}
/* 口絵の線は currentColor。塔ごとの群に種別の色を当てる */
.fz{color:var(--ink)}
.fz .t{stroke:var(--sub)}
.fz .n{stroke:currentColor}
.fz g.tw[data-cat]{color:var(--catc,var(--ink))}
.fz g.tw.u{color:var(--mute)}
.fz .hit{fill:transparent;cursor:pointer}
.fz .u{opacity:.45}
.fz g.tw{transition:opacity .18s var(--ease)}
.fz:hover g.tw{opacity:.22}
.fz g.tw:hover{opacity:1}
.fz g.tw:hover .nmz{fill:var(--acc)}
.omiss{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);color:var(--sub);
 margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);max-width:60em}
.omiss b{font-weight:400;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.fz g.tw{transition:none}}

/* ── 一列の頁 ──
   図版・高さ・系譜は、脇に棚を置くと幅の三割を失う。二十九枚の図が
   二百三十七ピクセルまで縮み、系譜の並びは画面の中で切れていた。
   さがすは索引へ、種別は図版へ移して、節はどれも同じ幅を使う */
.col{min-width:0}
.col .lineage{padding-left:var(--s6);padding-right:var(--s6)}

/* ── さがす：索引の中に置く ──
   名前で引くのと、番号順に辿るのは同じ用事。離して置かない */
.find{margin-top:var(--s6);max-width:520px}
.fl{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);
 margin-bottom:var(--s2)}
#q{width:100%;font-family:var(--got);font-size:var(--f3);letter-spacing:var(--ls1);color:var(--ink);
 background:var(--gray);border:1px solid transparent;padding:var(--s3) var(--s4);outline:none;
 -webkit-appearance:none;appearance:none;
 transition:background .18s var(--ease),border-color .18s var(--ease)}
#q:focus{background:var(--paper);border-color:var(--ink)}
#q::placeholder{color:var(--mute)}
.qr:not(:empty){margin-top:var(--s3);border-top:1px solid var(--line)}
.qr button{display:grid;grid-template-columns:26px 1fr auto;gap:var(--s3);align-items:baseline;
 width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:var(--s3) 2px;
 cursor:pointer;font:inherit;color:inherit;text-align:left}
.qr button:hover{background:var(--gray)}
.qr button:hover .nm2{color:var(--acc)}
.qr .n{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums}
.qr .nm2{font-family:var(--min);font-size:var(--f3);line-height:var(--lh3);letter-spacing:var(--ls1);
 word-break:keep-all;overflow-wrap:break-word;min-width:0}
.qr .h{font-size:var(--f2);color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.qr .zero{font-size:var(--f2);color:var(--mute);padding:var(--s3) 2px}

/* ── 種別：絞る相手の真上に置く ──
   頁の脇に常設すると、開いた瞬間から絞り込みの棚が見える。図鑑はそうしない */
.filt{display:flex;align-items:baseline;gap:var(--s3) var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
.filt .fl{margin-bottom:0;flex:0 0 auto}
.cats{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2)}
/* 絞り込みはピル。選択中はピンクで塗る（押せるもの・選ばれているものの色）。
   測りの赤をここに使わない */
.cats button{display:flex;align-items:baseline;gap:var(--s2);
 background:var(--paper);border:1px solid var(--line);border-radius:999px;
 padding:6px var(--s4);cursor:pointer;
 font-family:var(--got);font-size:var(--f2);letter-spacing:var(--ls1);color:var(--sub);
 transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.cats button:hover{color:var(--ui);border-color:var(--ui)}
.cats button.on{background:var(--ui);border-color:var(--ui);color:#fff}
.cats .c{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums}
.cats button.on .c{color:rgba(255,255,255,.85)}
.last{display:block;margin-top:var(--s3)}
.last a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line)}
.last a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.fbar{display:none;justify-content:space-between;align-items:baseline;gap:var(--s4);
 margin-top:var(--s5);font-size:var(--f2);letter-spacing:var(--ls1);color:var(--sub)}
.fbar.on{display:flex}
.fbar em{font-style:normal;color:var(--ink)}
.fbar button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--got);
 font-size:var(--f1);color:var(--acc);border-bottom:1px solid var(--acc)}
@media(max-width:860px){.col .lineage{padding-left:var(--s5);padding-right:var(--s5)}}

/* ── 見出し ── */
.hd{display:flex;align-items:baseline;gap:var(--s5)}
/* 頁の題は h1。節の題は h2。見た目は同じ段に載せるが、文書の骨は分ける。
   頁を分けたので、頁ごとに h1 が一つ要る */
.hd h1,.hd h2{font-family:var(--min);font-weight:400;font-size:var(--f6);line-height:var(--lh2);
 letter-spacing:var(--ls2)}
.note{font-size:var(--f3);line-height:var(--lh4);letter-spacing:var(--ls1);
 color:var(--sub);margin-top:var(--s4);max-width:32em}
/* 説明の中で、そこだけ読ませたい一文 */
.note b{font-weight:400;color:var(--ink)}
section.blk{padding:var(--s9) 0}
.rule{border-top:1px solid var(--ink);margin-top:var(--s6)}

/* ── 図版 ── */
/* button は中身が箱より低いと、ブラウザが勝手に上下中央へ寄せる。
   行の中に説明が三行のものが混じると、その行だけ図と札が下へずれた。上端で揃える */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s5);padding:var(--s7) 0 0;align-items:start}
.pl{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;
 text-align:left;font:inherit;color:inherit}
.box{height:400px;display:flex;align-items:flex-end;justify-content:center}
.pl .fg{color:var(--ink);transition:color .18s var(--ease);
 max-width:100%;height:auto;min-width:0}
.pl:hover .fg{color:var(--acc)}
.cap{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s2);align-items:baseline;
 border-top:1px solid var(--ink);padding-top:var(--s2);margin-top:var(--s3);min-height:52px}
.cap .no{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);font-variant-numeric:tabular-nums}
.cap .nm{font-family:var(--min);font-size:var(--f3);line-height:var(--lh3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.cap .hm{grid-column:2;text-align:right;font-size:var(--f2);color:var(--sub);
 font-variant-numeric:tabular-nums;white-space:nowrap}
/* 狭い画面では二段組をやめる。番号のぶんだけ名前の幅が削られて
   「シビックセンタ／ー」のように長音符が行頭に落ちるのを防ぐ */
@media(max-width:640px){.cap{display:block;min-height:0}
 .cap .no{margin-right:var(--s2)}
 .cap .nm{display:inline}
 .cap .hm{display:block;margin-top:var(--s1);font-size:var(--f1)}}
.pl.closed .fg{color:var(--mute)}
.pl.closed .nm,.pl.closed .hm{color:var(--mute)}
/* 閉じているものを灰にするだけでは、色でしか伝わらない。字でも出す */
/* 灰に落とすだけでは色でしか伝わらない。「高さ」の表と同じ言葉で、字でも出す */
.cap .hm i{font-style:normal;color:var(--acc);margin-right:var(--s2);
 font-size:var(--f1);letter-spacing:var(--ls3)}
.foot{font-size:var(--f1);line-height:var(--lh5);color:var(--mute);margin-top:var(--s8);
 border-top:1px solid var(--line);padding-top:var(--s4)}

/* ── 序 ── */
.intro{border-bottom:1px solid var(--line)}
.ilead{font-family:var(--min);font-size:var(--f5);line-height:var(--lh4);letter-spacing:var(--ls1);
 color:var(--ink);margin-top:var(--s5);max-width:24em}
/* 三つの見出しを二桁に流すと、三つめの右が空いたまま残る。桁を三つにする */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7);
 border-top:1px solid var(--ink);padding-top:var(--s6)}
.cols h3{font-family:var(--min);font-weight:400;font-size:var(--f3);line-height:var(--lh2);
 letter-spacing:var(--ls2)}
.cols p{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);
 color:var(--sub);margin-top:var(--s3);max-width:30em}
@media(max-width:1080px){.cols{grid-template-columns:1fr 1fr;gap:var(--s7)}}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:var(--s6)}}

/* ── 更新 ── */
/* 灰の面に本文が貼りついていた。面を左右へ二十四だけ広げ、その分を内側の余白にする。
   本文の行頭は他の節とそろったまま、面だけが外へ出る */
section.upd{background:var(--gray);padding-left:var(--s5);padding-right:var(--s5);
 margin-left:calc(var(--s5) * -1);margin-right:calc(var(--s5) * -1)}
.chg{margin-top:var(--s6)}
.cg{margin-top:var(--s7)}
.cg:first-child{margin-top:0}
.cg h3{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub);font-weight:400;
 font-variant-numeric:tabular-nums;padding-bottom:var(--s3);border-bottom:1px solid var(--ink);
 max-width:var(--cgw)}
.cg ul{list-style:none}
/* 一行の幅。日付の罫と本文の罫をそろえたいが、字の大きさが違うので em では合わない。
   本文十四ピクセルの四十四文字ぶんを、両方で同じ値として持つ */
.cg{--cgw:616px}
.cg li{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);
 color:var(--ink);padding:var(--s4) 0;border-bottom:1px solid var(--line);
 max-width:var(--cgw);min-width:0}
.cg li b{font-weight:400;color:var(--acc)}
/* あとで取り消した記述に添える註。記録は消さずに、消したことを書き足す */
.cg li .rev{color:var(--mute)}
/* 直した記録は消さない。ただし全部を開いたままだと、この節だけで頁の四割を占める。
   新しい八件を出し、それより前は畳んでおく */
.more{margin-top:var(--s5)}
.more summary{list-style:none;cursor:pointer;display:inline-block;
 font-size:var(--f2);letter-spacing:var(--ls1);color:var(--sub);
 border:1px solid var(--line);border-radius:999px;padding:6px var(--s4);
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--ui);border-color:var(--ui)}
.more summary::after{content:"　＋";color:var(--mute)}
.more[open] summary::after{content:"　−"}
.more[open] summary{margin-bottom:var(--s5)}
.more .c{color:var(--mute);margin-left:var(--s2)}

/* ── フッター ── */
.ft{background:var(--black);color:#8a8a92;padding:var(--s8) 0 var(--s7)}
/* 黒地の上では同じ赤が沈む。小さな赤い文字が三・五：一しかなく、読める明るさに届いていなかった。
   黒地の面だけ、暗い設定のときに使う明るいほうの赤に差し替える。線と文字はいつも同じ赤にする */
/* 脚だけが濃い面。そこでは赤を明るいほうへ差し替える */
.ft{--acc:#ff7a5c}
.fcols{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:start;
 padding-bottom:var(--s6);border-bottom:1px solid #2e2e34}
.fname{font-family:var(--min);font-size:var(--f4);letter-spacing:var(--ls2);color:#fff}
.fcols p{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);margin-top:var(--s3);
 max-width:30em}
.fnav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.fnav a{font-size:var(--f2);letter-spacing:var(--ls1);color:#8a8a92;text-decoration:none;
 border-bottom:1px solid transparent;padding-bottom:var(--s1);
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.fnav a:hover{color:#fff;border-bottom-color:var(--acc)}
.fend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);margin-top:var(--s5);
 font-size:var(--f1);line-height:var(--lh4);color:#86868e}
/* 脚の線。既定の青い下線を出さない */
.fend a{color:#86868e;text-decoration:none;border-bottom:1px solid #3a3a40;
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.fend a:hover{color:#fff;border-bottom-color:var(--acc)}
@media(max-width:860px){.fcols{grid-template-columns:1fr;gap:var(--s6)}}

/* ── 前後送り ── */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--s8);
 background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pnav .pn{display:block;background:var(--paper);border:0;padding:var(--s5);cursor:pointer;
 font:inherit;color:inherit;text-align:left;transition:background .18s var(--ease)}
.pnav .pn.next{text-align:right}
.pnav .pn:hover{background:var(--gray)}
.pnav .pn:hover .nm{color:var(--acc)}
.pnav .d{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute)}
.pnav .nm{display:block;font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;
 margin-top:var(--s2);transition:color .18s var(--ease);min-width:0}
.pnav .none{background:var(--paper)}
@media(max-width:640px){.pnav{grid-template-columns:1fr}.pnav .pn.next{text-align:left}}

/* ── 系譜 ── */
.lineage{background:var(--gray)}
#s-lineage{background:var(--paper)}
.lin{padding-top:var(--s8)}
.lin:first-child{padding-top:var(--s7)}
.lin h3{font-family:var(--min);font-weight:400;font-size:var(--f5);line-height:var(--lh2);
 letter-spacing:var(--ls2)}
/* 見出しの中で割ってはいけない塊。年号が行をまたぐのを防ぐ */
.nb{display:inline-block}
.lin .plate{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);margin-right:var(--s3);
 white-space:nowrap}
.lin p{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);color:var(--sub);
 margin-top:var(--s3);max-width:36em}
/* 出典へ出る線。既定の青い下線を出さない */
.lin p a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line);
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.lin p a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.row{display:flex;align-items:flex-end;gap:var(--s5);margin-top:var(--s6);
 overflow-x:auto;padding-bottom:var(--s3);border-bottom:1px solid var(--line);
 overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}
.row::-webkit-scrollbar{height:3px}
.row::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.lin .mor{display:none;margin-left:auto;font-size:var(--f1);letter-spacing:var(--ls3);
 color:var(--mute);white-space:nowrap}
.lin.wide .mor{display:block}
@media(max-width:860px){#front::-webkit-scrollbar{height:3px}
 #front::-webkit-scrollbar-thumb{background:#3a3a40}
 .row{gap:var(--s5)}}
.sm{flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;text-align:center;
 font:inherit;color:inherit;scroll-snap-align:start}
.sm .fg{color:var(--ink);transition:color .18s var(--ease)}
.sm:hover .fg{color:var(--acc)}
.sm .l{display:block;font-family:var(--min);font-size:var(--f2);line-height:var(--lh3);
 color:var(--sub);margin-top:var(--s3);max-width:12em;min-height:2.8em;
 word-break:keep-all;overflow-wrap:break-word}
.sm .y{display:block;font-size:var(--f1);color:var(--mute);margin-top:var(--s1);
 font-variant-numeric:tabular-nums}
.sm.closed .fg,.sm.closed .l{color:var(--mute)}

/* ── 索引 ── */
.idx{list-style:none;margin-top:var(--s6);border-top:1px solid var(--ink)}
.idx li button{display:grid;grid-template-columns:38px 1fr 216px 112px 70px;gap:var(--s3);
 align-items:baseline;width:100%;padding:var(--s3) var(--s1);background:none;border:0;
 border-bottom:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;
 transition:background .18s var(--ease)}
.idx li button:hover{background:var(--gray)}
.idx .n{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums}
.idx .nm{font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.idx .pl2,.idx .ct{font-size:var(--f2);color:var(--sub)}
.idx .km{font-style:normal;color:var(--mute);margin-left:var(--s2);font-variant-numeric:tabular-nums;white-space:nowrap}
.idx .h{font-size:var(--f2);text-align:right;font-variant-numeric:tabular-nums}
.idx button.closed .nm,.idx button.closed .h{color:var(--mute)}
.idx button.closed .ct{color:var(--acc)}

/* ── 詳細 ── */
.dpage .wrap{max-width:980px}
.dbar{position:sticky;top:var(--navh);background:var(--paper);border-bottom:1px solid var(--line);
 padding:var(--s3) 0;z-index:2}
.dbar .wrap{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.dbar a{color:var(--sub);text-decoration:none;transition:color .18s var(--ease)}
.dbar a:hover{color:var(--acc)}
.dbar button{background:none;border:0;font:inherit;font-size:var(--f2);color:var(--sub);cursor:pointer}
.dbar button:hover{color:var(--ink)}
.dtop{display:grid;grid-template-columns:280px 1fr;gap:var(--s7);align-items:end;
 padding:var(--s8) 0 var(--s7)}
/* 格子の桁は既定で中身より縮まない。名前が長い基で桁ごと外へはみ出したので、縮めるようにする */
.dtop>*{min-width:0}
.figbox{display:flex;align-items:flex-end;justify-content:center;height:400px}
.badge{display:inline-block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub);
 border:1px solid var(--line);padding:var(--s1) var(--s3)}
.badge.cl{color:var(--acc);border-color:var(--acc)}
.dname{font-family:var(--min);font-weight:400;font-size:var(--f7);line-height:var(--lh2);
 letter-spacing:var(--ls0);margin-top:var(--s4);
 word-break:keep-all;overflow-wrap:break-word;}
.dwhere{font-size:var(--f2);color:var(--sub);margin-top:var(--s3)}
.dnum{margin-top:var(--s6);display:flex;align-items:baseline;gap:var(--s2)}
.dnum .v{font-family:var(--min);font-size:var(--fn);line-height:1;color:var(--acc);
 font-variant-numeric:tabular-nums}
.dnum .u{font-size:var(--f3);color:var(--acc)}
.dnum .v.unk2{font-size:var(--f6)}
.dend{height:var(--s9)}
.dnum .l{font-size:var(--f1);color:var(--sub);margin-left:var(--s3);white-space:nowrap}
table.spec{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
table.spec th,table.spec td{text-align:left;font-weight:400;font-size:var(--f2);
 padding:var(--s3) var(--s1);border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:22%;min-width:96px;max-width:170px;color:var(--sub);font-size:var(--f1);letter-spacing:var(--ls3)}
table.spec a{color:var(--ink);word-break:break-all}
/* 狭い画面ではラベルと値を横に並べない。ラベルを全幅の行にして、値をその下に置く */
@media(max-width:560px){
 table.spec,table.spec tbody,table.spec tr{display:block}
 table.spec th,table.spec td{display:block;width:auto;max-width:none;border-bottom:0;
  padding:0 var(--s1)}
 table.spec th{padding-top:var(--s4)}
 table.spec td{padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
 .dnum{flex-wrap:wrap}
 .dnum .l{flex-basis:100%;margin-left:0;margin-top:var(--s2)}}
.empty{border:1px solid var(--line);padding:var(--s5);margin-top:var(--s4);
 font-size:var(--f2);line-height:var(--lh5);color:var(--mute)}
.rel{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.rel button{background:none;border:1px solid var(--line);border-radius:999px;
 padding:var(--s2) var(--s4);font:inherit;
 font-size:var(--f2);cursor:pointer;font-family:var(--min);letter-spacing:var(--ls1);
 word-break:keep-all;overflow-wrap:break-word;
 transition:border-color .18s var(--ease),color .18s var(--ease)}
.rel button:hover{border-color:var(--ui);color:var(--ui)}
.rel .n{font-size:var(--f1);color:var(--mute);margin-right:var(--s2);font-variant-numeric:tabular-nums}
.crumb{display:flex;align-items:center;gap:var(--s3);font-size:var(--f1);color:var(--mute);
 flex-wrap:wrap}
.crumb b{font-weight:400;color:var(--ink);font-family:var(--min);letter-spacing:var(--ls1)}
.crumb i{font-style:normal;color:var(--line)}
.crumb button{background:none;border:0;font:inherit;font-size:var(--f1);color:var(--sub);
 cursor:pointer;padding:0;transition:color .18s var(--ease)}
.crumb button:hover{color:var(--acc)}

/* ── 高さの並びの中で ── */
.spine{margin-top:var(--s5);border-top:1px solid var(--ink)}
.spine button{display:grid;grid-template-columns:52px 1fr 132px 96px;gap:var(--s4);align-items:center;
 width:100%;padding:var(--s3) var(--s1);background:none;border:0;border-bottom:1px solid var(--line);
 cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .18s var(--ease)}
.spine button:hover{background:var(--gray)}
.spine .r{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums;
 letter-spacing:var(--ls3)}
.spine .nm{font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.spine .v{text-align:right;font-size:var(--f2);font-variant-numeric:tabular-nums}
.spine .g{font-size:var(--f1);color:var(--mute);text-align:right}
.spine .here{background:var(--gray);cursor:default}
.spine .here .nm{color:var(--acc)}
.spine .here .r{color:var(--acc)}
/* ── 風に当たれる塔 ── */
.airl{border-top:1px solid var(--ink)}
.kg{margin-top:var(--s4)}
.kg h4{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);font-weight:400;
 margin-bottom:var(--s2)}
.catgo{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.catgo i{display:block;font-style:normal;font-size:var(--f1);color:var(--acc);margin-top:2px;
 letter-spacing:var(--ls1)}
.catgo:hover i{border-bottom:1px solid var(--acc)}
.kbd{display:none}
@media(hover:hover) and (pointer:fine){.kbd{display:block;margin-top:var(--s4);
 font-size:var(--f1);letter-spacing:var(--ls1);color:var(--mute);text-align:center}}
/* ── 読みもの：目次のように一列で並べる。図版と同じ絵を小さく添える ── */
.rdg{border-top:1px solid var(--ink);max-width:880px}
.rdg button{display:grid;grid-template-columns:88px minmax(0,1fr);
 gap:0 var(--s6);align-items:start;width:100%;padding:var(--s5) var(--s2) var(--s5) 0;
 background:none;border:0;border-bottom:1px solid var(--line);
 cursor:pointer;text-align:left;font:inherit;color:inherit;
 transition:background .18s var(--ease)}
.rdg button:hover{background:var(--gray)}
.rdg .fig{display:block;line-height:0;grid-row:span 3}
.rdg .fig svg{max-width:100%;height:auto;min-width:0}
.rdg .who{display:block;font-size:var(--f1);letter-spacing:var(--ls2);color:var(--mute);
 word-break:keep-all;overflow-wrap:break-word;min-width:0}
.rdg .who .n{margin-right:var(--s2);font-variant-numeric:tabular-nums}
.rdg .ttl{display:block;margin-top:var(--s3);max-width:26em;font-family:var(--min);
 font-size:var(--f5);line-height:var(--lh2);letter-spacing:var(--ls1);color:var(--ink);
 text-wrap:balance;min-width:0}
.rdg .ld{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 margin-top:var(--s3);font-size:var(--f2);line-height:var(--lh4);color:var(--sub);min-width:0;
 max-width:44em}
@media(max-width:860px){.rdg button{grid-template-columns:60px minmax(0,1fr);
  gap:0 var(--s4);padding:var(--s4) 0}
 /* 見出しが「三三三メート／ルの」のように語の途中で割れない大きさに落とす */
 .rdg .ttl{font-size:var(--f3);margin-top:var(--s2)}}
.airl button{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:baseline;
 width:100%;padding:var(--s4) var(--s1);background:none;border:0;border-bottom:1px solid var(--line);
 cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .18s var(--ease)}
.airl button:hover{background:var(--gray)}
.airl .n{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums}
.airl .nm{font-family:var(--min);font-size:var(--f4);letter-spacing:var(--ls1);line-height:var(--lh2);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.airl .o{font-size:var(--f2);color:var(--sub);line-height:var(--lh3)}
@media(max-width:860px){.airl button{grid-template-columns:28px 1fr;gap:var(--s2) var(--s3)}
 .airl .o{grid-column:2}}
/* ── 見えるもの ── */
.vw{margin-top:var(--s4);border-top:1px solid var(--ink)}
.vw>div{display:grid;grid-template-columns:88px 1fr;gap:var(--s4);
 padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}
.vw .b{font-size:var(--f1);letter-spacing:var(--ls2);color:var(--sub);padding-top:4px}
.vw .t{font-family:var(--min);font-size:var(--f3);line-height:var(--lh3);letter-spacing:var(--ls1)}
.vs{font-family:var(--min);font-size:var(--f3);line-height:var(--lh4);letter-spacing:var(--ls1);
 margin-top:var(--s4)}
.vsp{margin-top:var(--s5)}
.vsrc{font-size:var(--f1);color:var(--mute);line-height:var(--lh3);margin-top:var(--s4);
 word-break:break-all}
.vsrc a{color:var(--mute)}
@media(max-width:860px){.vw>div{grid-template-columns:64px 1fr;gap:var(--s3)}}
.nearl{margin-top:var(--s4);border-top:1px solid var(--ink)}
.nearl button{display:grid;grid-template-columns:72px 78px 1fr 84px;gap:var(--s4);align-items:center;
 width:100%;padding:var(--s3) var(--s1);background:none;border:0;border-bottom:1px solid var(--line);
 cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .18s var(--ease)}
.nearl button:hover{background:var(--gray)}
/* 赤はこの図鑑では「登れる高さ」に予約してある。方角には使わない */
.nearl .b{font-size:var(--f1);color:var(--ink);letter-spacing:var(--ls2)}
.nearl .d{font-size:var(--f2);color:var(--sub);font-variant-numeric:tabular-nums;text-align:right}
.nearl .nm{font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.nearl .v{text-align:right;font-size:var(--f2);font-variant-numeric:tabular-nums;color:var(--sub)}
.nearl .cl .nm,.nearl .cl .v{color:var(--mute)}
.cm{font-style:normal;font-size:var(--f1);color:var(--mute);border:1px solid var(--line);
 padding:1px 5px;margin-left:var(--s2);vertical-align:2px}
@media(max-width:860px){.nearl button{grid-template-columns:60px 70px 1fr;gap:var(--s3)}
 .nearl .v{display:none}}
.two{display:inline-block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--acc);
 border:1px solid var(--acc);padding:1px 5px;margin-left:var(--s2);vertical-align:2px}
@media(max-width:860px){.spine button{grid-template-columns:44px 1fr 88px;gap:var(--s3)}
 .spine .g{display:none}}
.sec{padding:var(--s7) 0 0}
.sec h3{font-family:var(--min);font-weight:400;font-size:var(--f5);line-height:var(--lh2);
 letter-spacing:var(--ls2)}

/* ── 常設ヘッダー ──
   高さ48px、リンク14px、半透明＋ぼかしは apple.com のグローバルヘッダー実測に合わせた
   （実測値：高さ44/48px、rgba(250,250,252,.8)、backdrop-filter:saturate(180%) blur(20px)） */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
 transition:background .3s var(--ease),border-color .3s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
 height:var(--navh)}
.nav .bn{font-family:var(--got);font-weight:600;font-size:var(--f3);letter-spacing:var(--ls2);color:var(--ink);
 text-decoration:none;white-space:nowrap;transition:color .3s var(--ease)}
.nav ul{list-style:none;display:flex;gap:var(--s1)}
/* ナビはピル（flypeach.com の錠剤型）。現在地はピンクで塗る。下線はやめた */
.nav a{font-size:var(--f2);letter-spacing:var(--ls1);color:var(--sub);
 text-decoration:none;padding:6px 13px;border-radius:999px;
 transition:color .18s var(--ease),background .18s var(--ease);position:relative}
/* 携帯では一項目が十二×二十ピクセルしかない。指では狙えない。
   見た目を動かしたくないので、透明な当たり判定だけを重ねて四十四ピクセルにする */
.nav a::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.nav a:hover{color:var(--ink);background:var(--gray)}
.nav a.cur{color:#fff;background:var(--ui)}
.nav.solid{background:rgba(248,243,233,.92);border-bottom-color:var(--line)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 .nav.solid{background:rgba(248,243,233,.8);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}}
.nav.solid .bn{color:var(--ink)}
.nav.solid a{color:var(--sub)}
.nav.solid a:hover{color:var(--ink)}
.nav.solid a.cur{color:#fff;background:var(--ui)}
/* ── 暗いほうのヘッダー ──
   明るいほうの .nav.solid より後ろに置く。@media は詳細度を上げないので、
   前に置くと同じ詳細度で後ろの白い指定に負ける。
   頁を分けてから、扉以外は最初からこの面が出るようになった */
@media (prefers-color-scheme:dark){
 .nav.solid{background:rgba(33,29,24,.92);border-bottom-color:var(--line)}
 @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav.solid{background:rgba(33,29,24,.72)}}
}
section.blk{scroll-margin-top:var(--navh)}

/* ── 高さ順 ── */
.rank{list-style:none}
.rank li button{display:grid;grid-template-columns:28px 300px minmax(120px,1fr) 176px 84px 104px;
 gap:var(--s3);align-items:center;
 width:100%;padding:var(--s3) var(--s1);background:none;border:0;border-bottom:1px solid var(--line);
 cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .18s var(--ease)}
.rank li button:hover{background:var(--gray)}
.rank .r{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums}
.rank .nm{font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);line-height:var(--lh3);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.rank .bar{position:relative;height:11px}
.rank .tot{position:absolute;top:5px;height:1px;left:0;background:var(--line)}
.rank .tot i{position:absolute;right:0;top:-3px;width:1px;height:7px;background:var(--line)}
.rank .obs{position:absolute;top:3px;height:5px;left:0;background:var(--acc)}
.rank .val{text-align:right;font-size:var(--f2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank .val em{font-style:normal;color:var(--mute);font-size:var(--f1);margin-left:var(--s2)}
.rank .pl2,.rank .ct{font-size:var(--f1);color:var(--sub);white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.rank button.closed .ct{color:var(--acc)}
.rank button.nonum .val{color:var(--mute)}
.rank button.closed .nm{color:var(--mute)}
.rank button.closed .obs{background:var(--mute)}
/* ── 高さの帯 ──
   順位を通しで並べるだけだと、どこに壁があるのか見えない。
   切りのよい高さで仕切ると、一五〇〜二〇〇メートルに一基も無いことが出てくる。
   無い帯を飛ばさずに「一基もない」と書くのは、埋まっていないことも図鑑の情報だから */
.rank .band{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
 padding:var(--s6) var(--s1) var(--s2);border-bottom:1px solid var(--ink)}
.rank li.band:first-child{padding-top:var(--s2)}
.rank .bt{font-family:var(--min);font-size:var(--f4);letter-spacing:var(--ls2);color:var(--ink)}
.rank .bn{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);white-space:nowrap}
/* 一基も無い帯は、線だけが残る。そこが空いていることが見えるように薄く落とす */
.rank .band:has(+.band) .bt,.rank .band:last-child .bt{color:var(--mute)}
@media(max-width:560px){.rank .bt{font-size:var(--f3)}}

/* apple.com の比較表は、機種名の行を position:sticky で貼り付けている。二十九行を下まで
   見ていく間、赤い線が何を指しているのかを画面から消さないために、同じことをする */
.legend{display:flex;gap:var(--s5);margin-top:var(--s5);font-size:var(--f1);color:var(--sub);
 align-items:center;flex-wrap:wrap;
 position:sticky;top:var(--navh);z-index:2;background:var(--gray);
 padding:var(--s3) 0;border-bottom:1px solid var(--ink)}
.legend span{display:flex;align-items:center;gap:var(--s2)}
.legend i{display:block;width:26px;height:5px;background:var(--acc)}
.legend i.t{height:1px;background:var(--line)}
.legend i.cl{background:var(--mute)}

@media(max-width:1080px){.rank li button{grid-template-columns:32px 210px minmax(90px,1fr) 118px}
 .rank .pl2,.rank .ct{display:none}
 /* 種別は落としてよいが、閉じていることは落とさない。名前の下に回す */
 .rank button.closed .ct{display:block;grid-column:2;margin-top:var(--s1)}}
@media(max-width:1180px){.wrap{padding:0 var(--s6)}}
@media(max-width:980px){.dtop{grid-template-columns:1fr;gap:var(--s6);align-items:start}
 .figbox{height:280px;justify-content:flex-start}
 .idx li button{grid-template-columns:36px 1fr 90px;gap:var(--s3)}
 .idx .pl2,.idx .ct{display:none}}
@media(max-width:860px){.ohead{grid-template-columns:1fr;gap:var(--s5);align-items:start;
  padding-bottom:var(--s6)}
 .opening .wrap{padding-top:var(--s8);padding-bottom:var(--s7)}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s5)}
 .box{height:260px}
 section.blk{padding:var(--s8) 0}
 /* 節が増えても折り返さない。入りきらなければ横へ流す */
 .nav ul{gap:0;flex:1 1 auto;min-width:0;justify-content:flex-end;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
 .nav ul::-webkit-scrollbar{display:none}
 .nav li{flex:0 0 auto}
 .nav .bn{font-size:var(--f2);letter-spacing:var(--ls1);flex:0 0 auto}
 .nav a{font-size:var(--f1);letter-spacing:0;padding-left:var(--s1);padding-right:var(--s1)}
 .nav .wrap{gap:var(--s3);padding-left:var(--s5);padding-right:var(--s5)}
 .rank li button{grid-template-columns:26px 1fr 104px;gap:var(--s3)}
 /* 横棒そのものを描かない。描いていないものの凡例も出さない。
    表の頭を示す線だけ、凡例の下線の代わりに一覧側へ戻す */
 .rank .bar,.rank .pl2,.rank .ct{display:none}
 .legend{display:none}
 .rank{margin-top:var(--s6);border-top:1px solid var(--ink)}
 .rank button.closed .ct{display:block;grid-column:2;margin-top:var(--s1)}}

/* ── 五百六十ピクセル以下 ──
   名前の欄に七、八文字しか残らず、「スカイガーデ／ン」「電波を送／るための塔」のように
   語の途中で割れていた。横に並べるのをやめて、名前に一行まるごと渡す */
@media(max-width:560px){
 .rank li button{grid-template-columns:26px minmax(0,1fr);gap:var(--s1) var(--s3);
  align-items:baseline;padding:var(--s4) var(--s1)}
 .rank .val{grid-column:2;text-align:right}
 .rank button.closed .ct{margin-top:0}
 .idx li button{grid-template-columns:32px minmax(0,1fr);gap:var(--s1) var(--s3);
  align-items:baseline}
 .idx .h{grid-column:2}
 /* 種別は落としてよいが、閉じていることは落とさない */
 .idx button.closed .ct{display:block;grid-column:2;color:var(--acc);font-size:var(--f1)}
 .lin .hd{flex-wrap:wrap;gap:var(--s2) var(--s3)}
 .lin .mor{margin-left:0;flex-basis:100%;text-align:right}}

/* ── 状態の一行 ── */
.dstate{font-family:var(--min);font-size:var(--f3);line-height:var(--lh5);letter-spacing:var(--ls1);
 color:var(--ink);margin-top:var(--s4);max-width:30em;
 border-left:2px solid var(--line);padding-left:var(--s4)}
.dstate u{text-decoration:none;color:var(--mute)}
.dstate b{font-weight:400;color:var(--acc)}

/* ── 収録範囲の宣言 ── */
.scope{margin-top:var(--s6);border-top:1px solid var(--ink)}
.scope dl{display:grid;grid-template-columns:auto 1fr}
.scope dt{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub);
 padding:var(--s3) var(--s6) var(--s3) var(--s1);border-bottom:1px solid var(--line);
 white-space:nowrap}
.scope dd{padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}
.scope .num{font-size:var(--f5);letter-spacing:var(--ls0);font-variant-numeric:tabular-nums}
.scope .unit{font-size:var(--f1);color:var(--sub);margin-left:var(--s1)}
.scope .holes{margin-top:var(--s2);font-size:var(--f1);line-height:var(--lh5);color:var(--sub)}
.scope .hole{background:none;border:0;padding:0;cursor:pointer;font:inherit;
 font-size:var(--f2);color:var(--sub);letter-spacing:var(--ls1);
 border-bottom:1px solid var(--line);transition:color .18s var(--ease),border-color .18s var(--ease)}
.scope .hole:hover{color:var(--acc);border-color:var(--acc)}
.scope .sep{color:var(--mute);margin:0 var(--s1)}
/* 区切りの「/」だけが次の行の頭に落ちるのを防ぐ。名前と一組にして折らない。
   ただし名前そのものは中で折り返せないと狭い画面ではみ出すので、内側で戻す */
.scope .hw{white-space:nowrap}
.scope .hw .hole{white-space:normal}
/* まだこの図鑑に無い塔。頁が無いので押せない。押せるものと同じ形にしない */
.scope .off{font-size:var(--f2);color:var(--mute);letter-spacing:var(--ls1)}
.scope p{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);color:var(--sub);
 padding:var(--s4) var(--s1) 0;max-width:36em}
@media(max-width:860px){.scope dl{grid-template-columns:1fr}
 .scope dt{padding:var(--s3) var(--s1) 0;border-bottom:0}
 .scope dd{padding:var(--s1) var(--s1) var(--s3)}}

/* ── 相対の一文 ── */
.relh{font-family:var(--min);font-size:var(--f3);line-height:var(--lh5);letter-spacing:var(--ls1);
 margin-top:var(--s3);max-width:34em}
.relh b{font-weight:400;color:var(--acc)}
.relh u{text-decoration:none;color:var(--sub)}

/* ── 本文 ──
   読ませる列だけ幅を絞って字を大きくする。apple.com の Newsroom が
   本文列653px・本文19pxで、写真なしでもスカスカに見せない作りにしていた */
.art{padding-top:var(--s2)}
.art p,.art h4{max-width:34em}
.around{max-width:50em}
.unk,.srcs{max-width:40em}
.artlead{font-family:var(--min);font-size:var(--f5);line-height:var(--lh4);letter-spacing:var(--ls1);
 border-top:1px solid var(--ink);padding-top:var(--s5);max-width:26em}
.art h4{font-family:var(--min);font-weight:400;font-size:var(--f5);line-height:var(--lh2);
 letter-spacing:var(--ls2);margin-top:var(--s7);padding-bottom:var(--s2);
 border-bottom:1px solid var(--line)}
.art p{font-family:var(--min);font-size:var(--f4);line-height:var(--lh5);letter-spacing:var(--ls1);
 margin-top:var(--s4)}
.art .em{color:var(--acc)}
.around{width:100%;border-collapse:collapse;margin-top:var(--s5);border-top:1px solid var(--ink)}
.around th{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub);font-weight:400;
 text-align:right;padding:var(--s2) var(--s1);border-bottom:1px solid var(--ink)}
.around th:first-child{text-align:left}
.around td{font-size:var(--f2);padding:var(--s3) var(--s1);border-bottom:1px solid var(--line2);
 font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.around td:first-child{text-align:left;font-family:var(--min);font-size:var(--f3);
 letter-spacing:var(--ls1);white-space:normal}
.around td .y{font-size:var(--f1);color:var(--mute);margin-left:var(--s2)}
.around tr.self td{color:var(--acc)}
.around .zero{color:var(--mute)}
.unk{border:1px solid var(--line);padding:var(--s5);margin-top:var(--s6)}
.unk h5{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub);font-weight:400}
.unk li{list-style:none;font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);
 color:var(--sub);margin-top:var(--s2);padding-left:1.4em;text-indent:-1.4em}
.unk li::before{content:"─\3000";color:var(--mute)}
.srcs{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);
 font-size:var(--f1);line-height:var(--lh5);color:var(--mute)}
.srcs a{color:var(--mute)}
.srcs a:hover{color:var(--sub)}
.stamp{margin-top:var(--s3);font-size:var(--f1);letter-spacing:var(--ls1);color:var(--mute)}
.spec .note{display:block;font-size:var(--f1);color:var(--sub);margin-top:var(--s1);
 line-height:var(--lh4);max-width:38em}
/* 読ませる文はモバイルで16px未満にしない（和文サイト設計） */
@media(max-width:860px){
 .cols p,.cg li,.lin p,.scope p,.unk li,.fcols p{font-size:var(--f3)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{
 animation-duration:.01ms!important;transition-duration:.01ms!important}
/* 上の一括指定は visibility にも時間を与えてしまう。ほんの一瞬でも時間があると、
   開いた直後の詳細はまだ「隠れている」扱いになり、「図鑑に戻る」へ焦点を移せない。
   動きを止めても、キーボードで辿れることは止めない */
}


/* ══ 頁を分けたことで要るもの ══
   出どころ：NN/g のアイトラッキング実測（閲覧時間の74%は最初の2画面、81%が3画面）と、
   個人運営の図鑑型サイト8件の観察（トップは導入に徹し、絞り込みは一覧側に置く）。
   一枚の長い頁をやめ、扉・図版・高さ・系譜・資料・各塔の六種類に割った */

/* 扉以外の頁は、上に固定ヘッダーのぶんの席を空ける */
.page.top{padding-top:var(--navh)}
.blk.first{padding-top:var(--s8)}

/* ── 頁の標題 ── */
.pagehd{padding:var(--s9) 0 0}
.pagehd h1{font-family:var(--min);font-weight:400;font-size:var(--fd);line-height:var(--lh2);
 letter-spacing:var(--ls2)}
.pagehd .lead{font-family:var(--min);font-size:var(--f4);line-height:1.9;letter-spacing:var(--ls1);
 color:var(--ink);margin-top:var(--s5);max-width:30em;border-top:0;padding-top:0}
@media(max-width:860px){.pagehd{padding-top:var(--s8)}}

/* ── 入口：扉の頁から、四つの頁へ送り出す ──
   実例調査の8サイト中ほぼ全てで、トップは導入に徹し、絞り込みUIを置いていなかった。
   ここも同じにする。数は data.js から数えて入れる。書き写さない */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);
 margin-top:var(--s6);border-top:1px solid var(--ink);padding-top:var(--s6)}
.door{display:block;text-decoration:none;color:inherit;min-width:0;
 border-top:1px solid var(--line);padding-top:var(--s4);
 transition:border-color .18s var(--ease)}
.door:hover{border-top-color:var(--acc)}
.door .k{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute)}
.door .t{display:block;font-family:var(--min);font-size:var(--f4);line-height:var(--lh2);
 letter-spacing:var(--ls2);margin-top:var(--s3);text-wrap:balance;
 transition:color .18s var(--ease)}
.door:hover .t{color:var(--acc)}
/* 説明文を消して、図に言わせる。字を四枚並べるより、
   その頁がやっている描き方を見せるほうが早いし、真似できない */
.dfig{display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--s3);
 height:112px;margin-bottom:var(--s4);color:var(--ink)}
.dfig svg{display:block;height:auto}
.door:hover .dfig{color:var(--acc)}
@media(max-width:980px){.doors{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media(max-width:560px){.doors{grid-template-columns:1fr 1fr}}

/* ── 頁の終わりに、次の頁へ送る一行 ──
   長い頁を分けた以上、行き止まりを作らない */
.next{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--s9);
 background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next a{display:block;background:var(--paper);padding:var(--s5);text-decoration:none;color:inherit;
 transition:background .18s var(--ease)}
.next a:hover{background:var(--gray)}
.next a:hover .t{color:var(--acc)}
.next a.r{text-align:right}
.next .k{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute)}
.next .t{display:block;font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);
 margin-top:var(--s2);transition:color .18s var(--ease)}
@media(max-width:640px){.next{grid-template-columns:1fr}.next a.r{text-align:left}}

/* ── 見あたらない塔 ── */
/* 見あたらない頁。行き止まりにせず、四つの入口へ送り返す */
.lost{padding:var(--s10) 0 var(--s9)}
.lost h1,.lost h2{font-family:var(--min);font-weight:400;font-size:var(--f6);line-height:var(--lh2);
 letter-spacing:var(--ls2);max-width:24em}
.lost p{font-size:var(--f3);line-height:var(--lh4);letter-spacing:var(--ls1);
 margin-top:var(--s5);max-width:34em}
/* 赤にするのは本文中の線だけ。入口の札まで赤くしない */
.lost p a{color:var(--acc)}
.lost .doors{border-top:1px solid var(--ink)}


/* ── 地方ごとの埋まり具合 ──
   都県では区切らない、という決めは動かさない。地方はそれより粗い括りとして使う。
   一基も無い地方を落とすと「全部埋まっている」ように見えてしまうので、
   空のまま枠だけ残す。行っていない場所が見えることが、この図鑑では情報になる */
.sub2{font-family:var(--min);font-weight:400;font-size:var(--f5);line-height:var(--lh2);
 letter-spacing:var(--ls2);margin-top:var(--s9)}
/* 格子だと、関東の十八基に引きずられて他の地方の下が大きく空く。
   段組みにして、高さの違うものを詰めて流す */
.regions{columns:3;column-gap:var(--s7);
 margin-top:var(--s6);border-top:1px solid var(--ink);padding-top:var(--s5)}
.rg{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
 margin-bottom:var(--s6)}
.rg h4{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
 font-family:var(--min);font-weight:400;font-size:var(--f3);letter-spacing:var(--ls2);
 padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.rg h4 span{font-family:var(--got);font-size:var(--f1);letter-spacing:var(--ls3);
 color:var(--mute);white-space:nowrap}
.rl{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s2)}
.rl button{background:none;border:0;padding:var(--s2) 0;cursor:pointer;text-align:left;
 font-family:var(--min);font-size:var(--f2);line-height:var(--lh3);letter-spacing:var(--ls1);
 color:var(--sub);word-break:keep-all;overflow-wrap:break-word;
 transition:color .18s var(--ease)}
.rl button:hover{color:var(--acc)}
.rl button.cl{color:var(--mute)}
/* 空の地方。枠は残すが、面としては沈める */
.rg.none h4{border-bottom-color:var(--line2)}
.rg.none h4,.rg.none h4 span{color:var(--mute)}
@media(max-width:860px){.regions{columns:2;column-gap:var(--s6)}
 .rl button{font-size:var(--f3)}}
@media(max-width:560px){.regions{columns:1}}


/* ── 訪問記への線 ──
   実際に行った塔にだけ生える。data.js の TOWERS に visit を足すと出る。
   ここだけは面で押せるようにしてある。写真のある頁へ送るための入口なので、
   図と数字だけが並ぶこの頁の中では、いちばん強く出てよい */
.visit .vgo{display:block;text-decoration:none;color:inherit;
 border:1px solid var(--line);padding:var(--s5);margin-top:var(--s4);max-width:34em;
 transition:border-color .18s var(--ease),background .18s var(--ease)}
.visit .vgo:hover{border-color:var(--ink);background:var(--gray)}
.visit .d{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);
 font-variant-numeric:tabular-nums}
.visit .t{display:block;font-family:var(--min);font-size:var(--f4);line-height:var(--lh2);
 letter-spacing:var(--ls1);margin-top:var(--s3)}
.visit .go{display:block;font-size:var(--f2);letter-spacing:var(--ls1);color:var(--acc);
 margin-top:var(--s4)}


/* ══ 見出しはゴシック、記事の本文は明朝 ══
   出どころ：2026-08-27 の判断。展望はワクワクする場所なので、
   見出しは明朝の重さをやめてゴシックに寄せる。ただし読みものの本文だけは
   明朝を残す。長い文章は明朝のほうが読める。
   塔の名前も明朝のまま。生成りの紙に載る固有名詞は、そのほうが締まる */
.hd h1,.hd h2,.ott,.lin h3,.sec h3,.cols h3,.sub2,.rg h4,.lost h1,.lost h2,
.dname,.rank .bt,.door .t,.rdg .ttl,.fname,.art h4,.ilead,.hcap{
 font-family:var(--got);font-weight:600;letter-spacing:-.01em}
.hd h1,.hd h2,.ott{font-size:clamp(26px,2.8vw,34px)}
.ilead{font-size:var(--f5);line-height:var(--lh2)}
.rdg .ttl{font-weight:600;letter-spacing:-.005em}

/* ══ 扉：数字の落差そのものを見せる ══
   和文の長い一文は大きくすると必ずどこかで割れる。数字は割れない。
   三三三と二五〇の差＝行けない八三メートルが、この図鑑の主題 */
.bignum{margin-top:var(--s5);line-height:.86;font-family:var(--got);
 font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bignum .top{display:block;font-size:clamp(34px,4vw,54px);font-weight:400;color:var(--mute)}
.bignum .gap{display:block;font-size:13px;letter-spacing:.1em;color:var(--mute);
 font-weight:400;margin:var(--s3) 0;line-height:1.4}
.bignum .big{display:block;font-size:clamp(96px,13vw,176px);font-weight:600;color:var(--acc)}
.bignum .u{font-size:.34em;font-weight:400;margin-left:.08em;letter-spacing:0}
.hcap{font-size:clamp(22px,2.4vw,32px);line-height:1.4;color:var(--ink);margin-top:var(--s5)}
.hgrid{align-items:center}
@media(max-width:980px){.bignum .big{font-size:clamp(80px,22vw,128px)}}

/* ══ パステル ══
   面で塗るのは「区切りの見出し」だけ。表の行は紙のまま残す。
   赤い線（登れる高さ）を沈ませないための線引き。
   高さの帯は、高いほど暖かく低いほど冷たい順。並びそのものが色になる */
.rank .band{padding:var(--s5) var(--s4) var(--s4);border-bottom:0;
 background:var(--bandc,#ede4d2);margin-top:var(--s6)}
.rank li.band:first-child{margin-top:0}
.rank .bt{font-size:var(--f4);color:#2b2620}
.rank .bn{color:#6b6157}
.rg h4{background:var(--rgc,#ede4d2);padding:var(--s3) var(--s4);
 border-bottom:0;margin-bottom:var(--s2);color:#2b2620}
.rg h4 span{color:#6b6157}
.rg.none h4{background:#efe9dd}
.rg.none h4,.rg.none h4 span{color:#8f857a}
.rl{padding-left:var(--s4)}
/* 入口の四枚。行き先を色で覚えられるようにする */
.door{border-top:0;padding:var(--s4) var(--s4) var(--s5);background:var(--doorc,#f0e8d8);
 transition:background .18s var(--ease)}
.door:hover{background:var(--doorh,#e9dfc9)}
.doors{border-top:0;padding-top:0}
@media (prefers-color-scheme:dark){
 /* 暗い設定では、淡い色は文字を潰す。面をやめて左の細い線だけ残す */
 .rank .band,.rg h4,.door{background:var(--gray)}
 .rank .band{border-left:4px solid var(--bandc,#8f857a)}
 .rg h4{border-left:4px solid var(--rgc,#8f857a)}
 .door{border-left:4px solid var(--doorc,#8f857a)}
 .rank .bt,.rg h4{color:var(--ink)} .rank .bn,.rg h4 span{color:var(--sub)}
 .door:hover{background:var(--line2)}
}


/* ══ カード配置 ══
   出どころ：Apple のタイル配置。白い地の上に、大きな角丸の面を並べる。
   影は極薄の一枚だけ（flypeach.com 実測の rgba(0,0,0,.05) 相当。墨と同じ暖色で温度を揃える）。
   これより濃くしない。濃い影は AI 生成サイトの指紋になる。
   角丸を全要素に機械的に付けるのは、調べた AI 生成サイトの指紋そのものだったので、
   丸めるのは「節＝一つの話」の階層だけにする。表の行も札も角のまま */
.page .wrap,.hero .wrap,.opening .wrap,.ft .wrap{padding-left:var(--s4);padding-right:var(--s4)}
.hero,.opening{margin:0 auto;max-width:1180px;border-radius:var(--r);
 background:var(--paper);overflow:hidden;box-shadow:var(--shadow)}
.hero{margin-top:calc(var(--navh) + var(--s3));padding-top:var(--s7)}
.opening{margin-top:var(--s3)}
.hero .wrap{min-height:calc(100svh - var(--navh) - 200px);padding-top:var(--s5)}
.page{padding-top:0}
.page.top{padding-top:calc(var(--navh) + var(--s3))}
section.blk{background:var(--paper);border-radius:var(--r);
 padding:var(--s8) var(--s7);margin-bottom:var(--s3);box-shadow:var(--shadow)}
section.blk.first{padding-top:var(--s8);margin-top:0}
.col .lineage{padding-left:var(--s7);padding-right:var(--s7)}
/* 「高さ」と「更新」は別の面。同じ白の上でも、話の種類が違うことを色で出す */
.lineage,section.upd{background:var(--gray)}
section.upd{padding-left:var(--s7);padding-right:var(--s7);margin-left:0;margin-right:0}
/* 脚も面のひとつ。黒く落とさず、地の白に沈める */
.ft{background:var(--paper);color:var(--sub);border-radius:var(--r);
 max-width:1180px;margin:var(--s3) auto var(--s5);--acc:#e04e2f;box-shadow:var(--shadow)}
.ft .fname{color:var(--ink)}
.fnav a{color:var(--sub)} .fnav a:hover{color:var(--ink)}
.fend{color:var(--mute)}
.fend a{color:var(--mute);border-bottom-color:var(--line)}
.fend a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.fcols{border-bottom-color:var(--line)}
/* ヘッダーは白い地の上に浮く。ここだけは半透明とぼかしを使う（浮いているものだから） */
.nav.solid{background:rgba(255,255,255,.86);border-bottom-color:transparent}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 .nav.solid{background:rgba(255,255,255,.72)}}
.nav{background:rgba(255,255,255,.86)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 .nav{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px)}}
/* 面の中の区切り。角丸は内側では小さく、あるいは付けない */
.rank .band{border-radius:var(--rs)}
.rg h4{border-radius:var(--rs)}
.door{border-radius:var(--rs)}
@media(max-width:860px){
 .page .wrap,.hero .wrap,.opening .wrap,.ft .wrap,.mapsec .wrap{
  padding-left:var(--s3);padding-right:var(--s3)}
 section.blk,.col .lineage,section.upd{padding-left:var(--s5);padding-right:var(--s5)}
 .hero,.opening,section.blk,.ft,.mapsec{border-radius:var(--rs)}
}
@media (prefers-color-scheme:dark){
 .nav,.nav.solid{background:rgba(20,17,16,.86)}
 @supports (backdrop-filter:blur(1px)){
  .nav,.nav.solid{background:rgba(20,17,16,.72)}}
 .ft{background:var(--paper)}
}


/* ── 塔の頁も面のひとつにする ──
   ここだけ白地に本文が直接載っていて、他の頁と揃っていなかった */
.dpage{max-width:1180px;margin:0 auto}
.dpage .wrap{max-width:1180px}
.dpage .dbar{position:static;background:transparent;border-bottom:0;
 padding:0 0 var(--s3)}
.dpage #dbody{background:var(--paper);border-radius:var(--r);
 padding:var(--s7) var(--s7) var(--s8);margin-bottom:var(--s3);box-shadow:var(--shadow)}
.dpage .dend{height:0}
@media(max-width:860px){
 .dpage #dbody{border-radius:var(--rs);padding-left:var(--s5);padding-right:var(--s5)}}


/* ══ 塔の色 ══
   二十九枚すべてを同じ墨で描いていた。図鑑の主役は絵なので、そこに色を入れる。
   ただし配るのは種別ごと。装飾ではなく分類の色にする。
   赤（--acc）は「登れる高さ」に予約したままなので、種別の色は赤を避けて選んだ。
   線は細いので、パステルそのままだと紙に負ける。中間色まで落として彩度で押す */
:root{
 --c-denpa:#2c6c9e;   /* 電波塔 */
 --c-kanko:#3a8763;   /* 観光塔 */
 --c-biru:#6f61ab;    /* ビル展望フロア */
 --c-sancho:#93712c;  /* 山頂 */
 --c-other:#2b8391;   /* その他 */
}
@media (prefers-color-scheme:dark){:root{
 --c-denpa:#7db4dd; --c-kanko:#7fc9a3; --c-biru:#b4a6e0;
 --c-sancho:#d4b06a; --c-other:#6fc7d4;
}}
[data-cat="電波塔"]{--catc:var(--c-denpa)}
[data-cat="観光塔"]{--catc:var(--c-kanko)}
[data-cat="ビル展望フロア"]{--catc:var(--c-biru)}
[data-cat="山頂"]{--catc:var(--c-sancho)}
[data-cat="その他"]{--catc:var(--c-other)}
/* 絵は種別の色で描く。色が無いところは墨のまま */
.pl .fg,.sm .fg,.rdg .fig svg,.figbox .fg,.dfig svg{color:var(--catc,var(--ink))}
.pl:hover .fg,.sm:hover .fg{color:var(--acc)}
/* 閉じているものは色を抜く。休止中であることは色より強い情報 */
.pl.closed .fg,.sm.closed .fg{color:var(--mute)}
/* 種別で絞る札にも同じ色を置く。押す先の色が先に分かる */
.cats button::before{content:'';display:inline-block;width:10px;height:10px;
 background:var(--catc,var(--mute));margin-right:var(--s2);vertical-align:1px}


/* ── 東京タワーの図の線 ──
   ここは紙の面。空色の扉だったころの指定は、扉が地図に移ったので落とした（2026-08-27）。
   図の線の濃淡だけ残す。面の色と字の色は下の「三三三と二五〇」の節でまとめて指定する */
.hero .hz .thin{stroke:currentColor;opacity:.55}
.hero .hz .hair{stroke:currentColor;opacity:.3}
/* 送りの下線は押せるもの。ピンクにする（赤は登れる高さに予約） */
.hero .hgo:hover{border-bottom-color:var(--ui)}


/* ── 色の凡例。色を使った図のすぐ下に置く ── */
.clg{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s3)}
.clg span{display:flex;align-items:center;gap:var(--s2);
 font-size:var(--f1);letter-spacing:var(--ls1);color:var(--sub);white-space:nowrap}
.clg i{display:block;width:12px;height:12px;background:var(--catc,var(--mute))}


/* ══ スカイラインは三画面目に降りた（2026-08-27） ══
   扉は地図に譲った。理由は収録数が今後も増えること。
   「二十九基ぜんぶ」を扉の主役に据えると、基数が変わるたび扉の意味が動く。
   地図は「どこがまだ空いているか」を見せるので、増えても意味が壊れない。
   スカイラインは物量を一望させる手として強いが、主役ではなく収蔵品の一覧に置く */
.opening{margin-top:var(--s3);background:var(--paper)}
.opening .ohead{grid-template-columns:minmax(0,1fr) minmax(0,28em);align-items:end;
 padding-bottom:var(--s6)}
/* 扉から降りたぶん、見出しは一段落とす。上の地図と大きさで張り合わせない。
   「ぜんぶ、同／じ物差しで。」と語の途中で割れない大きさに収める */
.opening .ott{font-size:clamp(26px,2.9vw,36px);line-height:1.3;letter-spacing:-.02em;
 color:var(--ink);text-wrap:balance}
.opening .htt{margin-bottom:var(--s3)}
.opening .lead{color:var(--sub);border-top-color:var(--line)}
.opening .sub{color:var(--mute)}
.opening .omiss{color:var(--sub);border-top-color:var(--line)}
.opening .clg span{color:var(--sub)}
.opening .fz .grid{stroke:var(--line2)}
.opening .fz .gnd{stroke:var(--line)}
.opening .fz .gl,.opening .fz .nmz{fill:var(--mute)}
.opening .swipe{color:var(--mute)}
/* 「三三三と二五〇」は紙の面のまま。地図の次に置く */
.hero{margin-top:var(--s3);background:var(--paper);padding-top:var(--s7)}
/* 扉から送られてくる先。固定ヘッダーのぶんだけ手前で止める */
.hero,.opening{scroll-margin-top:calc(var(--navh) + var(--s3))}
.hero .wrap{min-height:0;padding-top:var(--s5);padding-bottom:var(--s7)}
.hero .hz{color:var(--c-denpa)}
.hero .htt,.hero .hsub,.hero .bignum .top,.hero .bignum .gap{color:var(--sub)}
.hero .bignum .top{color:var(--mute)}
.hero .hgo{color:var(--ink);border-bottom-color:var(--line)}
.hero .hz .lnt,.hero .hz .gnd{stroke:var(--line)}
.hero .hz .g{fill:var(--mute)}
@media(max-width:860px){
 .opening .ohead{grid-template-columns:1fr;align-items:start}
 .opening .ott{font-size:clamp(26px,6.6vw,36px)}
}
@media (prefers-color-scheme:dark){
 .opening,.hero{background:var(--paper)}
}


/* ══ 扉＝地図（2026-08-27 ここへ移した） ══
   出どころ：コレクション型サイトのファーストビュー調査（2026-08-27）で
   効いていた型のひとつが「地図＋色分け」。ダム・城の個人サイトで繰り返し使われている。
   スカイラインと迷ったが、地図を採った。決め手は基数が増え続けること。
   「ぜんぶで◯基」を扉に据えると増えるたび扉の意味が動くが、
   地図は「まだ空いている場所」を見せるので、増えても壊れない。むしろ埋まっていく。
   扉の面だけ淡い空色。塔は空へ伸びるもの。下の面から紙に戻す */
.mapsec{margin:calc(var(--navh) + var(--s3)) auto 0;max-width:1180px;border-radius:var(--r);
 background:#e9f0f4;overflow:hidden;box-shadow:var(--shadow)}
/* 一画面ぶんの高さを持たせる。ただし上限を置く。
   縦に長い画面（縦向きのタブレット）で、青い面だけが延々と伸びるのを防ぐ */
.mapsec .wrap{padding-top:var(--s8);padding-bottom:var(--s8);
 min-height:min(760px, calc(100svh - var(--navh) - 140px));
 display:flex;flex-direction:column;justify-content:center}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);
 gap:var(--s8);align-items:center}
.mtxt .sub{margin-top:var(--s5);color:#6d8395}
.mapsec .ott{font-size:clamp(32px,4.4vw,58px);line-height:1.24;letter-spacing:-.02em;
 color:var(--ink)}
.mapsec .htt{margin-bottom:var(--s3);color:#5c7183}
.mapsec .lead{font-family:var(--min);font-size:var(--f4);line-height:1.9;
 letter-spacing:var(--ls1);color:#4f6373;max-width:26em;margin-top:var(--s5);
 border-top:0;padding-top:0}
/* 赤は「登れる高さ」に予約してある。ここは場所の話なので墨で押す */
.mapsec .lead b{font-weight:400;color:var(--ink)}
.mapsec .hgo{display:inline-block;margin-top:var(--s6);color:var(--ink);
 text-decoration:none;border-bottom:1px solid #c3d3dd;padding-bottom:var(--s2);
 font-size:var(--f2);letter-spacing:var(--ls1);
 transition:border-color .18s var(--ease)}
.mapsec .hgo:hover{border-bottom-color:var(--ui)}
.mfig{min-width:0}
/* 地図は動かせる。釦を地図の隅に重ねるので、大きさを決めるのはこの枠のほう。
   ここで幅を持たないと、釦が地図から離れて桁の右端へ飛ぶ */
#jmap{position:relative;width:100%;max-width:560px;margin:0 auto;min-width:0}
/* touch-action:pan-y ＝ 縦に払えば頁が動き、横に払えば地図が動く。
   地図に指を閉じ込めない。二本指のときだけJS側で寄せ引きを受け取る */
.jm{display:block;width:100%;height:auto;
 touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
.jm:active{cursor:grabbing}
/* SVGの中の要素は hidden 属性だけでは消えない（UAの [hidden] はHTML向け）。
   ここで効かせておかないと、隠したはずの名前や現在地が出たままになる */
.jm [hidden]{display:none}
/* 寄ったときだけ出る塔の名前。地の上に置くので、白い縁で抜く。
   縁の太さと字送りは、地図の座標ではなく画面の画素で決める。
   そうしないと、寄るほど縁が太り字間が開いて、字が読めなくなる */
.jm .pnm{fill:var(--ink);font-family:var(--maru);font-weight:700;letter-spacing:0;
 paint-order:stroke;stroke:#fff;stroke-width:3;stroke-linejoin:round;
 vector-effect:non-scaling-stroke;
 pointer-events:none;dominant-baseline:middle}
/* 現在地。塔の色と混ざらないよう、押せるものの色（ピンク）を使う */
.jm .medot{fill:var(--ui);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.jm .mehalo{fill:var(--ui);opacity:.18}

/* ── 地図の釦 ──
   指で押せる大きさ（四十四ピクセル）を確保する。携帯では地図の上に重なるので、
   右下＝親指の届くところに置く */
.mctl{position:absolute;right:6px;bottom:6px;display:flex;flex-direction:column;gap:6px;z-index:2}
.mz{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
 background:var(--paper);border:1px solid var(--line);border-radius:999px;
 color:var(--ink);font-family:var(--maru);font-weight:700;font-size:var(--f4);
 cursor:pointer;padding:0;line-height:1;
 transition:border-color .18s var(--ease),color .18s var(--ease)}
.mz:hover{border-color:var(--ui);color:var(--ui)}
.mz.mhome{width:auto;padding:0 var(--s4);font-size:var(--f2)}
.mz.busy{opacity:.5;pointer-events:none}
/* 地方へ飛ぶ札。＋だけだと日本海の上に寄ってしまうので、行き先を先に見せる */
.mjump{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s5)}
.jp{display:flex;align-items:baseline;gap:6px;
 background:var(--paper);border:1px solid var(--line);border-radius:999px;
 padding:6px var(--s4);cursor:pointer;
 font-family:var(--got);font-size:var(--f2);letter-spacing:var(--ls1);color:var(--sub);
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.jp:hover{color:var(--ui);border-color:var(--ui)}
.jp b{font-family:var(--maru);font-weight:700;font-size:var(--f1);color:var(--ink);
 font-variant-numeric:tabular-nums}
.jp:hover b{color:var(--ui)}
.mmsg{margin-top:var(--s4);text-align:center;font-size:var(--f2);
 letter-spacing:var(--ls1);color:#4f6373;min-height:1.5em}
.mmsg.warn{color:var(--acc)}
@media (prefers-color-scheme:dark){
 .mz,.jp{background:#232e35;border-color:#3a4a54}
 .mmsg{color:#a8bcc8}
 .jm .pnm{stroke:#1b2429}
}
/* 色を使った図のすぐ下に凡例を置く。凡例の無い色分けは、ただの飾りになる。
   ピル型にして種別ごとの数も出す。数字が並ぶと図鑑の量が伝わる */
.mlg{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s6)}
.lgp{display:flex;align-items:center;gap:var(--s2);
 background:var(--paper);border-radius:999px;padding:5px var(--s4) 5px var(--s3);
 font-size:var(--f1);letter-spacing:var(--ls1);color:var(--sub);white-space:nowrap}
.lgp i{display:block;width:10px;height:10px;border-radius:50%;
 background:var(--catc,var(--mute))}
.lgp b{font-family:var(--maru);font-weight:700;color:var(--ink);
 font-variant-numeric:tabular-nums}
.lgp.cl i{background:var(--mute)}
.lgp.cl{color:var(--mute)}
@media (prefers-color-scheme:dark){.lgp{background:#232e35}}
/* 海岸線。空色の面の上に、生成りの陸を置く */
.jm .ln{fill:#fbf2e6;stroke:#c9b79b;stroke-width:1.4;
 vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* 点は白い縁を持たせて立たせる。縁が無いと、関東で団子になって数が読めない。
   扉の主役はこの点なので、小さくしない */
.jm .dot{fill:var(--catc,var(--mute));stroke:#fff;stroke-width:2;
 vector-effect:non-scaling-stroke;transition:fill .18s var(--ease),stroke-width .18s var(--ease)}
.jm .hit{fill:transparent;cursor:pointer}
.jm .pin.cl .dot{fill:var(--mute)}
/* 触れたときはピンク（押せるものの色）。赤は登れる高さに予約してある。
   半径はJS側が図の大きさから出しているので、ここでは太らせて示す */
.jm .pin:hover .dot{fill:var(--ui);stroke-width:5}
@media(max-width:980px){
 .mgrid{grid-template-columns:1fr;gap:var(--s6)}
 .mapsec .ott{font-size:clamp(28px,7.4vw,40px)}
 .mapsec .ott br{display:none}
 #jmap{max-width:460px}
 /* 縦に積むと一画面に収まらない。扉の高さの縛りを外して自然に流す */
 .mapsec .wrap{min-height:0;display:block}
}
@media (prefers-color-scheme:dark){
 .mapsec{background:#1b2429}
 .mapsec .htt{color:#8ea6b6}
 .mapsec .lead{color:#a8bcc8}
 .mapsec .sub{color:#8ea6b6}
 .mlg .clg span{color:#a8bcc8}
 .mapsec .hgo{border-bottom-color:#3a4a54}
 /* 空色の面の上では、地の茶が濁る。海と陸を同じ寒色でそろえる */
 .mapsec .jm .ln{fill:#2b3840;stroke:#4a5c68}
 .mapsec .jm .dot{stroke:#1b2429}
}
@media(prefers-reduced-motion:reduce){.jm .dot{transition:none}}

@media (prefers-color-scheme:dark){.jm .ln{fill:#2b2620;stroke:#413a31}}


/* ── 押せるものの色 ──
   Peach はピンクを全面には塗らず、ボタン・リンク・現在地に絞って使っていた。
   面積は全体の一割程度。ここも同じ配り方にする。
   「登れる高さ」の赤とは役割が違うので、混ぜない */
.nav a.cur{color:#fff;background:var(--ui)}
.next a:hover .t{color:var(--ui)}
.door:hover .t{color:var(--ui)}
.rl button:hover{color:var(--ui)}
.slist button:hover,.cats button:hover{color:var(--ui)}
.sb .more,.scope .hole:hover{color:var(--ui)}
.lin p a:hover{color:var(--ui);border-bottom-color:var(--ui)}
.fend a:hover{color:var(--ui);border-bottom-color:var(--ui)}
.crumb a{color:var(--sub)} .crumb a:hover{color:var(--ui)}
.lost p a{color:var(--ui)}
.qr button:hover .nm2{color:var(--ui)}
.idx li button:hover .nm{color:var(--ui)}
.hgo:hover{border-bottom-color:var(--ui)}
.rdg button:hover .ttl{color:var(--ui)}
.catgo:hover i{border-bottom-color:var(--ui)}
/* 暗い設定ではピンクが明るくなる（#ff85a8）。その上の白字は読めないので墨に返す */
@media (prefers-color-scheme:dark){
 .nav a.cur,.nav.solid a.cur,.cats button.on{color:#241c16}
 .cats button.on .c{color:rgba(36,28,22,.72)}
}
/* 地図と海岸線も暖色へ */
.jm .ln{fill:#f7ece1;stroke:#e2c3a6}
@media (prefers-color-scheme:dark){.jm .ln{fill:#2e241c;stroke:#4a3a2e}}


/* ══ 書体 ══
   出どころ：flypeach.com の公式CSS実測。欧文 Montserrat ＋ 和文を明示指定、
   見出しは 600/700、字送りはほぼ 0。角ゴのままだと「かわいい」は出ないので、
   和文の見出しだけ丸ゴシックにした。丸ゴで長い本文は読ませない（本文は明朝と角ゴのまま） */
.hd h1,.hd h2,.ott,.lin h3,.sec h3,.cols h3,.sub2,.rg h4,.lost h1,.lost h2,
.dname,.rank .bt,.door .t,.rdg .ttl,.fname,.art h4,.ilead,.hcap,.nav .bn{
 font-family:var(--maru);font-weight:700;letter-spacing:0}
/* 数字は全部このサイトの主役。丸ゴの数字で通す */
.bignum,.dnum .v,.dnum .u,.scope .num,.rank .val,.idx .h,.cap .hm,
.rank .r,.idx .n,.qr .h{font-family:var(--maru);font-weight:700}
.scope .num,.dnum .v{font-weight:700;letter-spacing:-.02em}
/* 丸ゴは角ゴより字面が大きい。見出しは少し詰めて、大きさで押す */
.hd h1,.hd h2,.ott{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.01em}
/* 扉と口絵の見出しの大きさは、それぞれの節で指定してある（上の「扉＝地図」と
   「スカイラインは三画面目」）。ここに書くと、@media は詳細度を上げないので
   携帯向けの指定を黙って上書きしてしまう。書かない */
.hcap{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.01em}
.dname{letter-spacing:-.02em}
.nav .bn{font-weight:700;letter-spacing:.01em}
/* 塔の名前も丸ゴで通す（2026-08-27 田中の指定。明朝との対比はやめた）。
   見出しの700に対して、一覧の行に並ぶ名前は500。行まで太らせると表が黒く沈む */
.cap .nm,.qr .nm2,.pnav .nm,.sm .l,.idx .nm,.spine .nm,.airl .nm,.nearl .nm,
.rank .nm,.rel button,.crumb b,.next .t{
 font-family:var(--maru);font-weight:500;letter-spacing:0}
.visit .t{font-family:var(--maru);font-weight:700;letter-spacing:0}

/* ── ロゴと管理人（2026-08-27 屋号「旅とてっぺん」決定） ──
   ロゴはピンクのワードマーク。Peach がピンク単色のワードマークだけで
   通しているのに合わせ、マークは山と旗の一筆だけにする */
.nav .bn{display:flex;align-items:center;gap:8px;color:var(--ui)}
.nav.solid .bn{color:var(--ui)}
.bmk{display:block;flex:0 0 auto}
.ft .fname{color:var(--ui)}
/* 管理人てっぺん。名乗りの順序はここでも守る：鳥が主で、旅はついで */
.fwho{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.fwho .fav{flex:0 0 auto}
.fcols .fwho p{margin-top:0;font-size:var(--f2);line-height:var(--lh4);max-width:30em}
.fwho b{font-family:var(--maru);font-weight:700;color:var(--ui)}

/* まだ輪郭を描いていないものの断り書き。図版の頁の先頭に置く */
.undnote{margin-top:var(--s3)}
.undnote b{font-weight:400;color:var(--acc)}

/* 脚の問い合わせ先。押せるものなのでピンクにする */
.fend a[href^="mailto:"]{color:var(--ui);border-bottom:1px solid var(--line)}
.fend a[href^="mailto:"]:hover{border-bottom-color:var(--ui)}

/* 脚の名乗り。ここがこのサイトの一行なので、頭だけ色を持たせる */
.fcols>div>p b{font-weight:400;color:var(--ink)}

/* ══ 高さくらべ（2026-08-27 口絵を作り替えた） ══
   六十か所を全部並べると足元の数字が重なって読めない。
   十に絞って、順位・のぼれる高さ・名前を足元に出す。全部は高さの頁にある */
.kz .rk{fill:var(--mute);font-family:var(--maru);font-weight:700;font-size:15px;
 text-anchor:middle;letter-spacing:0}
.kz .obm{fill:var(--acc);font-family:var(--maru);font-weight:700;font-size:22px;
 text-anchor:middle;letter-spacing:-.01em}
.kz .obm .u{font-size:13px}
.kz .nmz{fill:var(--sub);font-family:var(--maru);font-weight:500;font-size:13px;
 text-anchor:middle;letter-spacing:0}
/* 閉じているものは、色を抜いて灰にする。休止は種別より強い情報 */
.kz .tw.u .nmz,.kz .tw.u .obm{fill:var(--mute)}
.kz .tw{cursor:pointer}
.kz .tw:hover .nmz{fill:var(--ui)}
.zero{font-size:var(--f3);color:var(--mute);padding:var(--s7) 0;text-align:center}

/* 参考の高さ。塔の数字は大きくなりがちなので、身近な物差しを一つ添える。
   同じ図に入れると縮尺が壊れるので、図の外に一行で置く */
.fuji{display:flex;align-items:stretch;gap:var(--s4);margin-top:var(--s6);
 border-top:1px solid var(--line);padding-top:var(--s5)}
/* グラデーションは使わない決まりなので、平らな塗りの細い柱にする */
.fjb{flex:0 0 6px;display:flex;align-items:stretch}
.fjb i{display:block;width:6px;border-radius:3px;background:var(--c-sancho)}
.fjt{font-size:var(--f2);line-height:var(--lh4);letter-spacing:var(--ls1);color:var(--sub);
 max-width:44em}
.fjt b{display:block;font-family:var(--maru);font-weight:700;color:var(--ink);
 font-size:var(--f4);letter-spacing:0;margin-bottom:var(--s1)}
@media(max-width:640px){.fuji{gap:var(--s3)}}

/* 種類（タワー・ビル・山）の札には色の四角を出さない。
   ひとつの種類に複数の色がまとまっているので、色を一つ出すと嘘になる */
#kcats button::before{display:none}

/* ── どこまで届くか ──
   公式の発表ではなく、こちらが計算した値。だから数字は大きく出すが、
   前置きと計算式を必ず添える。測った数字と計算した数字を混ぜない */
.hzbig{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.hzbig .v{font-family:var(--maru);font-weight:700;font-size:clamp(40px,6vw,64px);
 line-height:1;color:var(--acc);letter-spacing:-.02em}
.hzbig .u{font-family:var(--maru);font-weight:700;font-size:var(--f5);color:var(--acc)}
.hzbig .l{font-size:var(--f2);color:var(--sub);letter-spacing:var(--ls1);margin-left:var(--s3)}
.vsp u{text-decoration:none;color:var(--mute);display:block;font-size:var(--f1);margin-top:var(--s1)}

/* 件数の一行。目的別の頁は、まず「何か所あるか」を出す */
.scount{font-size:var(--f3);letter-spacing:var(--ls1);color:var(--sub);margin-top:var(--s5)}
.scount b{font-family:var(--maru);font-weight:700;font-size:var(--f5);color:var(--ink);
 font-variant-numeric:tabular-nums;margin-right:var(--s2)}
.more2{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s5)}
.more2 h4{font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute);font-weight:400;
 margin-bottom:var(--s3)}
.tada .rank .obs{background:var(--acc)}

/* 推定した高さの印。公表された数字と、こちらが計算した数字を、見た目で必ず分ける。
   ここを混ぜると、このサイトがいちばん大事にしている「測った数字だけ」が崩れる */
.est{font-style:normal;font-size:var(--f1);color:var(--mute);
 border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:var(--s2);
 white-space:nowrap;vertical-align:1px}
.rank .est,.idx .est{font-size:10px;padding:0 5px}
/* 図の中の「約」。数字より一段小さくして、数字そのものの読みを邪魔しない */
.kz .obm .ap{font-size:13px}
/* 詳細ページの主数値の「約」。推定であることを、いちばん大きい数字の隣で言う */
.ap2{font-family:var(--maru);font-weight:700;font-size:var(--f5);color:var(--acc);
 align-self:flex-start;margin-right:2px}
.dnum .l .est{display:inline-block;margin-left:var(--s2)}

/* ── 高さへの挑戦 ── */
.threetop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.threetop>div{background:var(--gray);border-radius:var(--rs);padding:var(--s5)}
.threetop .k{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--mute)}
.threetop .v{display:block;font-family:var(--maru);font-weight:700;
 font-size:clamp(30px,4vw,46px);line-height:1.1;color:var(--acc);letter-spacing:-.02em;margin-top:var(--s2)}
.threetop .v i{font-style:normal;font-size:var(--f4);margin-left:2px}
.threetop .n{display:block;font-size:var(--f2);color:var(--sub);margin-top:var(--s2);
 word-break:keep-all;overflow-wrap:break-word}
@media(max-width:640px){.threetop{grid-template-columns:1fr}}
.csec{margin-top:var(--s8)}
.csec h3{font-family:var(--maru);font-weight:700;font-size:var(--f5);letter-spacing:0;
 padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.csec h3 .c{font-size:var(--f2);color:var(--mute);margin-left:var(--s3)}
.ckind{font-size:var(--f2);line-height:var(--lh4);color:var(--sub);margin-top:var(--s3)}
.ckind b{font-weight:400;color:var(--acc)}
.crank li .row{display:grid;grid-template-columns:38px minmax(0,1.4fr) minmax(0,1fr) auto 84px 110px;
 gap:var(--s3);align-items:center;padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}
.crank .val em{display:block;font-style:normal;color:var(--mute);font-size:var(--f1)}
.crank .row.closed .nm,.crank .row.closed .val{color:var(--mute)}
.crank .row.closed .obs{background:var(--mute)}
@media(max-width:860px){
 .crank li .row{grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s1) var(--s3)}
 .crank .bar{display:none}
 .crank .pl2,.crank .ct{grid-column:2;font-size:var(--f1);color:var(--mute)}
}


/* ── のぼった記録・日が沈む時刻・計算上見える場所（2026-09-02） ──
   出どころ：愛好家サイトの調査（スタンプラリー・山リスト・攻城記録）と、夜景系サイトの必須項目。
   押せるものはピル、選択中は --ui。測りの赤は使わない。記録の印も --ui（押して付けたもの、の色） */
.climb{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap}
.cbtn{font-family:var(--got);font-size:var(--f2);letter-spacing:var(--ls1);color:var(--ui);
 background:var(--paper);border:1px solid var(--ui);border-radius:999px;padding:8px var(--s4) 8px var(--s3);
 cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);transition:background .18s var(--ease),color .18s var(--ease)}
.cbtn i{width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;display:inline-block;position:relative}
.cbtn.on{background:var(--ui);color:#fff}
.cbtn.on i{background:#fff;border-color:#fff}
.cbtn.on i::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid var(--ui);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.cbtn:hover{background:var(--gray)} .cbtn.on:hover{background:var(--ui);opacity:.92}
.cnote{font-size:var(--f1);color:var(--sub);letter-spacing:var(--ls1)}
.cnote b{font-family:var(--maru);font-weight:700;font-size:var(--f3);color:var(--ink);margin:0 2px;font-variant-numeric:tabular-nums}
.cnote a{color:var(--ui)}
/* 一覧の中の印。名前の前に小さな丸。行を塗らない（表は紙のまま） */
.rank button.mine .nm::before,.grid .pl.mine .nm::before,.idx button.mine .n::after{
 content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ui);
 margin-right:6px;vertical-align:2px}
.grid .pl.mine .box{outline:2px solid var(--ui);outline-offset:-2px;border-radius:2px}

/* 記録の頁 */
.mempty{font-size:var(--f2);line-height:var(--lh4);color:var(--sub);margin-top:var(--s4);
 border-left:2px solid var(--ui);padding-left:var(--s4)}
.mnums{display:flex;gap:var(--s5) var(--s8);flex-wrap:wrap;margin-top:var(--s5)}
.mnums>div{display:flex;align-items:baseline;gap:var(--s1);flex-wrap:wrap}
.mnums .v{font-family:var(--maru);font-weight:700;font-size:clamp(36px,5vw,56px);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mnums .v.s{font-size:var(--f6)}
.mnums .u{font-family:var(--maru);font-weight:700;font-size:var(--f4);color:var(--ink)}
.mnums .l{flex-basis:100%;font-size:var(--f1);color:var(--sub);letter-spacing:var(--ls2);margin-top:var(--s1)}
.mbar{height:6px;background:var(--line2);margin-top:var(--s5);position:relative;overflow:hidden}
.mbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ui);transition:width .6s var(--ease)}
.mpct{font-size:var(--f2);color:var(--sub);margin-top:var(--s2);line-height:var(--lh3)}
.mpct b{font-family:var(--maru);font-weight:700;color:var(--ink);font-size:var(--f3)}
.mlist{margin-top:var(--s5);border-top:1px solid var(--ink)}
.mlist button{display:grid;grid-template-columns:96px 1fr 96px;gap:var(--s4);align-items:center;width:100%;
 text-align:left;background:none;border:0;border-bottom:1px solid var(--line2);padding:var(--s3) 0;cursor:pointer;color:var(--ink);font-family:inherit}
.mlist button:hover{background:var(--gray)}
.mlist .d{font-size:var(--f1);color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:var(--ls1)}
.mlist .nm{font-family:var(--min);font-size:var(--f3);letter-spacing:var(--ls1);word-break:keep-all;overflow-wrap:break-word;min-width:0}
.mlist .v{text-align:right;font-size:var(--f2);color:var(--sub);font-variant-numeric:tabular-nums}
@media(max-width:560px){.mlist button{grid-template-columns:80px 1fr 72px;gap:var(--s3)}}
.mfed{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.mfed h4{font-family:var(--maru);font-weight:700;font-size:var(--f3);letter-spacing:0;color:var(--ink)}
.mfed h4 b{color:var(--ui);font-size:var(--f5)}
.mfed p{font-size:var(--f2);color:var(--sub);line-height:var(--lh3);margin-top:var(--s2)}
.mfrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.mfrow button,.mfrow .off{font-family:var(--got);font-size:var(--f1);letter-spacing:var(--ls1);
 border:1px solid var(--line);border-radius:999px;padding:5px var(--s3);background:var(--paper);color:var(--ink);cursor:pointer}
.mfrow button.on{background:var(--ui);border-color:var(--ui);color:#fff}
.mfrow .off{color:var(--mute);border-style:dashed;cursor:default}
.mact{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.mact button{font-family:var(--got);font-size:var(--f2);letter-spacing:var(--ls1);border-radius:999px;padding:8px var(--s4);cursor:pointer}
.mshare{background:var(--ui);border:1px solid var(--ui);color:#fff}
.mclear{background:none;border:1px solid var(--line);color:var(--sub)}
.mclear:hover{border-color:var(--ink);color:var(--ink)}
.mnote{font-size:var(--f1);color:var(--mute);line-height:var(--lh3);margin-top:var(--s4)}

/* 日が沈む時刻。数字は丸ゴ、色は墨（測りの赤は登れる高さに予約） */
.sunrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4) var(--s6);margin-top:var(--s5);
 border-top:1px solid var(--ink);padding-top:var(--s4)}
.sunrow .k{display:block;font-size:var(--f1);letter-spacing:var(--ls3);color:var(--sub)}
.sunrow .v{display:block;font-family:var(--maru);font-weight:700;font-size:clamp(32px,4vw,44px);line-height:1.1;color:var(--ink);
 font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.sunrow .l{display:block;font-size:var(--f1);color:var(--sub);line-height:var(--lh3);margin-top:var(--s1)}
.sunyr{font-size:var(--f2);color:var(--sub);line-height:var(--lh3);margin-top:var(--s4)}
.sunyr b{color:var(--ink);font-variant-numeric:tabular-nums}

/* 計算上見える場所。近い塔の一覧と同じ型 */
.vish{font-family:var(--maru);font-weight:700;font-size:var(--f3);letter-spacing:0;margin-top:var(--s6);color:var(--ink)}
.vish b{color:var(--ink);font-size:var(--f5)}
.vmore{font-size:var(--f2);color:var(--sub);margin-top:var(--s3)}