/* ══════════ 全国さざれ石台帳 ── 共通の紙 ══════════
   本体（koishitaku.com）と同じ紙・同じ墨・同じ罫。
   苔の緑は「現地で確かめた」印にだけ使う。開設時は全編モノクロ。 */

:root{
  --washi:#F4EFE6; --sumi:#2B2620; --soft:#635C51; --hair:#D9D0C0;
  --hair2:#E4DCCC; --brass:#8A6D1F; --moss:#6B7A4B;
  --serif:"Shippori Mincho","Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--washi);color:var(--sumi);
 font-family:var(--serif);font-weight:400;
 font-size:17px;letter-spacing:.045em;line-height:2.25;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 overflow-x:hidden;
 word-break:auto-phrase;line-break:strict;overflow-wrap:normal}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
img{max-width:100%;height:auto}
.bt,.nb{white-space:nowrap}
ruby{ruby-position:over;ruby-align:center;white-space:nowrap}
rt{font-size:.46em;font-weight:400;letter-spacing:.02em;line-height:1.15;color:var(--soft);opacity:.6;text-align:center}

/* 和紙の繊維（本体と同じ重ね方） */
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42;
 mix-blend-mode:multiply;isolation:isolate;
 background-image:url('/assets/washi-1800.jpg');background-size:cover;background-position:center}

/* 手描きの波線（本体と同じ罫） */
.rule{height:8px;max-width:1060px;margin:0 auto;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8'%3E%3Cpath d='M0 4 C 20 3.1, 40 5.0, 60 4 S 100 3.2, 120 4 S 160 5.1, 180 4 S 220 3.3, 240 4' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
 background-repeat:repeat-x;background-position:center}
.wavy-b{border-bottom:8px solid transparent;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8'%3E%3Cpath d='M0 4 C 20 3.1, 40 5.0, 60 4 S 100 3.2, 120 4 S 160 5.1, 180 4 S 220 3.3, 240 4' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
 background-repeat:repeat-x;background-position:0 100%}

/* 下線（波の下線。ホバーで真鍮） */
.wave-link{padding-bottom:.5rem;background-repeat:repeat-x;background-position:0 100%;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5'%3E%3Cpath d='M0 2.5 C 15 1.7, 30 3.3, 45 2.5 S 75 1.8, 90 2.5 S 110 3.2, 120 2.5' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
 transition:color .5s,background-image .5s}
.wave-link:hover{color:var(--brass);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5'%3E%3Cpath d='M0 2.5 C 15 1.7, 30 3.3, 45 2.5 S 75 1.8, 90 2.5 S 110 3.2, 120 2.5' fill='none' stroke='%238A6D1F' stroke-width='1'/%3E%3C/svg%3E")}

/* ── ナビ（本体と同じ組み） ── */
nav.k{position:relative;z-index:50;display:flex;justify-content:space-between;align-items:center;
 padding:2.4vmin 4.2vmin;border-bottom:1px solid var(--hair);background:var(--washi)}
nav.k .mark{font-size:1.06rem;letter-spacing:.24em;font-weight:500;line-height:1.12}
nav.k .mark span{display:block;font-size:.52em;font-weight:400;letter-spacing:.24em;
 color:var(--soft);margin-top:.42em;text-indent:.24em}
nav.k ul{display:flex;gap:2.6rem;list-style:none;font-size:.9rem;letter-spacing:.14em;color:var(--soft)}
nav.k a{position:relative;padding-bottom:.3rem}
nav.k a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
 background:var(--brass);transition:right .5s cubic-bezier(.22,.61,.36,1)}
nav.k a:hover::after{right:0}
nav.k a.now{color:var(--sumi)}
nav.k a.now::after{right:0}
nav.k ul{flex-wrap:wrap;row-gap:.4rem;justify-content:flex-end}
nav.k .mark span{letter-spacing:.3em}
@media(max-width:900px){nav.k ul{gap:1.5rem;font-size:.84rem;letter-spacing:.08em}
 nav.k .mark{font-size:.96rem}}
@media(max-width:640px){
 nav.k{flex-direction:column;align-items:stretch;padding:2.6vmin 4.6vmin .1rem;gap:0}
 nav.k .mark{font-size:.98rem;letter-spacing:.2em;text-align:center;line-height:1.16}
 nav.k ul{width:100%;justify-content:space-between;gap:0;margin-top:.82rem;padding:.66rem 0 .46rem;
  font-size:.7rem;letter-spacing:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6'%3E%3Cpath d='M0 3 C 20 2.3, 40 3.8, 60 3 S 100 2.4, 120 3 S 160 3.9, 180 3 S 220 2.5, 240 3' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 0;background-size:auto 6px}
}

/* ── 台帳の帯 ── */
.obi{position:relative;z-index:2;display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap;
 padding:1.1rem 4.2vmin;border-bottom:1px solid var(--hair)}
.obi .t{font-size:.98rem;letter-spacing:.18em;font-weight:500}
.obi .t a:hover{color:var(--brass)}
.obi ul{display:flex;gap:1.8rem;flex-wrap:wrap;list-style:none;font-size:.84rem;letter-spacing:.1em;color:var(--soft)}
.obi a:hover{color:var(--brass)}
.obi .now{color:var(--sumi);border-bottom:1px solid var(--hair)}
@media(max-width:640px){.obi{gap:.6rem 1.2rem;padding:.9rem 4.6vmin}
 .obi ul{gap:.5rem 1.15rem;font-size:.78rem;letter-spacing:.04em}}

/* ── 本文の枠 ── */
main{position:relative;z-index:1}
.waku{max-width:1180px;margin:0 auto;padding:0 4.2vmin}
section.dan{padding:12vh 0}
@media(max-width:640px){section.dan{padding:8vh 0}}

/* 見出しまわり（本体と同じ） */
.en{display:flex;align-items:center;gap:1.4rem;
 font-family:"Cormorant Garamond",serif;font-size:1.5rem;
 letter-spacing:0;color:var(--sumi);font-weight:400;opacity:.45;line-height:1}
.en::after{content:"";flex:0 0 4.6rem;height:6px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M0 3 C 15 2.3, 30 3.8, 45 3 S 75 2.4, 90 3 S 110 3.7, 120 3' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-size:100% 100%}
h1.dai{font-weight:500;font-size:clamp(1.7rem,4.6vw,2.7rem);letter-spacing:.1em;line-height:1.9;margin:1.6rem 0 0}
h2{font-weight:500;font-size:clamp(1.34rem,3vw,1.72rem);letter-spacing:.1em;margin:1.6rem 0 1.4rem;line-height:1.85}
h3{font-weight:500;font-size:1.1rem;letter-spacing:.08em;margin:2.6rem 0 1rem;line-height:1.85}
.lead{font-size:1.03rem;color:var(--soft);max-width:27em;line-height:2.45;letter-spacing:.03em}
.lead+.lead{margin-top:1.3rem}
p.honbun{font-size:1rem;color:var(--soft);line-height:2.5;max-width:27em}
p.honbun+p.honbun{margin-top:1.3rem}
strong{font-weight:500;color:var(--sumi)}
.chu{font-size:.8rem;letter-spacing:.08em;color:var(--soft);opacity:.8;line-height:2}

/* ── 題字 ── 組んだ文字ではなく、一枚ずつ貼った紙。傾きは貼った手の癖 */
.ji{display:inline-block;transform:rotate(var(--r,0deg))}

/* ── 切替 ── */
.kirikae{display:flex;border:1px solid var(--hair);width:max-content}
.kirikae button{min-height:44px;padding:0 1.9rem;font-size:.9rem;letter-spacing:.14em;color:var(--soft)}
.kirikae button.on{background:var(--sumi);color:var(--washi)}
@media(max-width:640px){.kirikae{width:100%}.kirikae button{flex:1 1 0;padding:0}}

/* 凡例 */
.hanrei{display:flex;align-items:center;gap:.6rem 1.7rem;flex-wrap:wrap;
 font-size:.84rem;letter-spacing:.1em;color:var(--soft)}
.hanrei .kazu{color:var(--sumi)}

/* ── 地図 ── */
.chizu-kumi{display:grid;grid-template-columns:1fr 380px;gap:3.4rem;align-items:start;margin-top:2.4rem}
@media(max-width:900px){.chizu-kumi{grid-template-columns:1fr;gap:1.6rem}}
.chizu svg{width:100%;height:auto;display:block}
.chizu .setsumei{margin-top:.4rem;font-size:.78rem;letter-spacing:.08em;color:var(--soft);opacity:.75}
.chizu .umi{fill:#EFE9DD;stroke:#C9BFAC;stroke-width:1.4;stroke-linejoin:round}
.chizu text{font-family:var(--serif);font-size:13px;letter-spacing:.08em;fill:var(--sumi);
 pointer-events:none;opacity:0;transition:opacity .35s}
.chizu g.ten-g{cursor:pointer}
.chizu g.ten-g:hover text, .chizu g.ten-g.erabi text{opacity:1}
.chizu .ten{fill:transparent;stroke:#8E857A;stroke-width:1.6;transition:r .25s,stroke .25s,fill .25s}
.chizu g.ten-g:hover .ten, .chizu g.ten-g.erabi .ten{stroke:var(--brass);fill:var(--washi)}
.chizu .ten.koke{fill:var(--moss);stroke:var(--moss)}

/* 選んだ石の札 */
.fuda{border-top:1px solid var(--hair);padding-top:1.6rem;min-height:20rem}
.fuda .ken{font-size:.78rem;letter-spacing:.16em;color:var(--soft)}
.fuda .na{margin-top:.7rem;font-size:1.55rem;font-weight:500;letter-spacing:.07em;line-height:1.7}
.fuda .yomi{margin-top:.3rem;font-size:.78rem;letter-spacing:.16em;color:var(--soft)}
.fuda dl{margin-top:1.5rem;display:grid;grid-template-columns:5.4em 1fr;gap:0 1.1rem;
 font-size:.84rem;line-height:2.05;border-top:1px solid var(--hair2)}
.fuda dt{color:var(--soft);padding:.55rem 0;border-bottom:1px solid var(--hair2);font-weight:400}
.fuda dd{padding:.55rem 0;border-bottom:1px solid var(--hair2)}
.fuda .hito{margin-top:1.3rem;font-size:.9rem;color:var(--soft);line-height:2.35}
.fuda .iku{margin-top:1.5rem;font-size:.88rem;letter-spacing:.1em}

/* ── 一覧（台帳の行） ── */
.daicho-hyo{border-top:1px solid var(--hair);margin-top:2.4rem}
.gyo{display:grid;grid-template-columns:2.4em 42px 26px 1fr 12em 9em;gap:0 1.4rem;align-items:center;
 padding:1.25rem .5rem;cursor:pointer;transition:background-color .5s,padding-left .5s}
.gyo:hover{background:rgba(255,255,255,.5);padding-left:1.1rem}
.gyo>*{min-width:0}
.gyo .ban{font-size:.8rem;letter-spacing:.1em;color:var(--soft)}
.gyo .e{width:42px;height:34px}
.gyo .na{font-size:1.08rem;letter-spacing:.06em;line-height:1.8}
.gyo .tokoro{font-size:.76rem;letter-spacing:.1em;color:var(--soft);margin-top:2px}
.gyo .iwa{font-size:.8rem;color:var(--soft);letter-spacing:.04em}
.gyo .jotai{font-size:.76rem;letter-spacing:.1em;color:var(--soft);text-align:right}
.gyo .jotai.koke{color:var(--moss)}
.gyo.aki .na,.gyo.aki .tokoro,.gyo.aki .iwa,.gyo.aki .jotai{color:var(--soft)}
@media(max-width:800px){
 .gyo{grid-template-columns:2.1em 34px 20px 1fr;gap:0 .8rem;align-items:start}
 .gyo .e{width:34px;height:28px;margin-top:4px}
 .gyo .maru{margin-top:7px}
 .gyo .iwa,.gyo .jotai{grid-column:4;text-align:left;margin-top:2px}
}

/* 一覧の写真サムネ（確かめた石は、絵ではなく実物） */
.gyo .e-photo{display:block;width:42px;height:34px;background-size:cover;background-position:center;border:1px solid var(--hair)}
@media(max-width:800px){.gyo .e-photo{width:34px;height:28px;margin-top:4px}}

/* 一石一頁のミニ地図（この石は、ここ） */
.mini-chizu{display:block;width:190px;height:auto;margin-bottom:1.2rem;opacity:.95}
@media(max-width:800px){.mini-chizu{width:150px}}

/* 空けてある席 ── 触れると、点線がそっと実線になる（説明はしない） */
.gyo.aki .maru circle{transition:stroke-dasharray .5s}
.gyo.aki:hover .maru circle{stroke-dasharray:none}

/* ── 由来の型の絵（ちぎり絵風の挿絵。写実にしない） ── */
.moti{display:block}
.moti .kami1{fill:#E2DACA}.moti .kami2{fill:#EFE9DC}.moti .kami3{fill:#DCD3C0}
.moti .fuchi{fill:none;stroke:#C9BFAC;stroke-width:1;stroke-linejoin:round}
.moti .sumi-sen{fill:none;stroke:#8E857A;stroke-width:1;opacity:.6}

/* 型の札（4枚組） */
.kata-kumi{margin-top:3rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.6rem}
@media(max-width:900px){.kata-kumi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.kata-kumi{grid-template-columns:1fr}}
.kata{border-top:1px solid var(--hair);padding-top:1.3rem}
.kata .rab{font-size:.74rem;letter-spacing:.16em;color:var(--soft)}
.kata .na{margin-top:.6rem;font-size:1.06rem;font-weight:500;letter-spacing:.06em;line-height:1.8}
.kata p{margin-top:.8rem;font-size:.82rem;color:var(--soft);line-height:2.2}
.kata .moti{width:84px;height:64px;margin-top:.9rem}

/* ── 三欄（伝承・学術・行政） ── */
.sanran{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
@media(max-width:800px){.sanran{grid-template-columns:1fr}}
.sanran>div{padding:1.7rem 2rem 1.9rem 0;border-bottom:1px solid var(--hair)}
.sanran>div+div{border-left:1px solid var(--hair2);padding-left:2rem}
@media(max-width:800px){.sanran>div+div{border-left:0;padding-left:0}}
.sanran h3{margin:0;font-size:1.18rem;letter-spacing:.08em;display:flex;align-items:center;gap:.75rem}
.ran-e{width:36px;height:27px;flex:none}
.sanran p{margin-top:.8rem;font-size:.88rem;color:var(--soft);line-height:2.3}

/* ── 一石一頁 ── */
.ishi-atama{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;margin-top:1.2rem}
@media(max-width:800px){.ishi-atama{grid-template-columns:1fr;gap:1.4rem}}
.ishi-atama .moti{width:120px;height:92px;margin-top:1.4rem}
.shashin-waku{border:1px dashed var(--hair);min-height:200px;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:.6rem;
 font-size:.78rem;letter-spacing:.14em;color:var(--soft);text-align:center;padding:1.4rem}
.meisai{margin-top:2.2rem;display:grid;grid-template-columns:6.4em 1fr;gap:0 1.3rem;
 font-size:.88rem;line-height:2.1;border-top:1px solid var(--hair);max-width:44em}
.meisai dt{color:var(--soft);padding:.6rem 0;border-bottom:1px solid var(--hair2);font-weight:400}
.meisai dd{padding:.6rem 0;border-bottom:1px solid var(--hair2)}
.shutten{margin-top:2.2rem;font-size:.8rem;color:var(--soft);line-height:2.1}
.shutten ul{list-style:none;margin-top:.4rem}
.mae-ato{margin-top:3.4rem;display:flex;justify-content:space-between;gap:1.5rem;
 font-size:.88rem;letter-spacing:.1em;flex-wrap:wrap}

/* ── 年譜 ── */
.nenpu{margin-top:2.2rem;border-top:1px solid var(--hair);max-width:46em}
.nenpu .toshi-gyo{display:grid;grid-template-columns:6em 1fr;gap:0 1.4rem;padding:.8rem 0;align-items:baseline}
.nenpu .toshi{font-size:.84rem;letter-spacing:.06em;color:var(--sumi);font-weight:500}
.nenpu .koto{font-size:.92rem;color:var(--soft);line-height:2.1}
@media(max-width:640px){.nenpu .toshi-gyo{grid-template-columns:4.6em 1fr;gap:0 .9rem}}

/* ── 歌の紙（ことばのこと。歌はこの頁だけに置く） ── */
.uta-kami{margin:2.4rem 0 0;padding:2.6rem 2.4rem;border:1px solid var(--hair);
 background:rgba(255,255,255,.45);max-width:34em}
.uta-kami .dai{font-size:.78rem;letter-spacing:.18em;color:var(--soft)}
.uta-kami .uta{margin-top:1.2rem;font-size:1.22rem;font-weight:500;letter-spacing:.14em;line-height:2.6}
.uta-kami .yori{margin-top:1rem;font-size:.78rem;letter-spacing:.1em;color:var(--soft)}
@media(max-width:640px){.uta-kami{padding:1.8rem 1.4rem}.uta-kami .uta{font-size:1.08rem;letter-spacing:.1em}}

/* ── 紙の石（工房で作った石。所々の余白に） ── */
.kami-ishi{display:block;user-select:none;-webkit-user-drag:none}

/* ── 転がる石 ── 説明しない。カーソルも変えない */
.koro-ishi{position:absolute;touch-action:none;user-select:none;-webkit-user-drag:none;z-index:3}
.koro-ishi img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ── 墨の雨の帯 ── */
.ame-oya{position:relative}
.ame-oya canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ── ボタン風（真鍮の枠） ── */
.shin-btn{display:inline-block;min-height:44px;line-height:44px;padding:0 2rem;
 border:1px solid var(--brass);color:var(--brass);font-size:.9rem;letter-spacing:.14em;
 transition:background-color .4s,color .4s}
.shin-btn:hover{background:var(--brass);color:var(--washi)}

/* ── フッタ ── */
footer.k{margin-top:6vh;padding:6vh 4.2vmin 8vh;text-align:center;
 font-size:.86rem;letter-spacing:.1em;color:var(--soft);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8'%3E%3Cpath d='M0 4 C 20 3.1, 40 5.0, 60 4 S 100 3.2, 120 4 S 160 5.1, 180 4 S 220 3.3, 240 4' fill='none' stroke='%23D9D0C0' stroke-width='1'/%3E%3C/svg%3E");
 background-repeat:repeat-x;background-position:0 0}
footer.k .shutten-f{margin-top:1rem;font-size:.76rem;opacity:.85;line-height:2.1}
footer.k .gyome{margin-top:1.4rem;display:flex;justify-content:center;gap:1.8rem;flex-wrap:wrap;font-size:.8rem}

/* ══════════ 動き ── 減らす設定の人には、何も起こさない（家訓） ══════════ */
@keyframes jiOki{
  from{opacity:0;transform:translateY(8px) rotate(calc(var(--r,0deg) + 3.5deg))}
  to{opacity:1;transform:rotate(var(--r,0deg))}
}
@keyframes tenOki{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes gyoOki{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes kokeIki{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion: no-preference){
  .ji{animation:jiOki .62s var(--d,0s) cubic-bezier(.22,.61,.36,1) both}
  .chizu .ten{transform-box:fill-box;transform-origin:center;
    animation:tenOki .5s var(--d,0s) cubic-bezier(.22,.61,.36,1) both}
  .chizu .ten.koke{animation:tenOki .5s var(--d,0s) cubic-bezier(.22,.61,.36,1) both,
    kokeIki 8s 3.6s ease-in-out infinite}
  .gyo.oki{animation:gyoOki .45s var(--d,0s) cubic-bezier(.22,.61,.36,1) both}
  .koro-ishi{transition:transform .95s cubic-bezier(.18,.62,.33,1)}
}