/* いしの こよみ（/ishi/）── 366 頁で共有する
   土台（色・字・ナビ・罫・フッタ）は本体の頁（/shishu/ /about/）と同じ値をそのまま写している。
   本体の頁は 1 頁ずつ <style> を抱えているが、ここは 367 頁あるので外に出した。
   頁は tools/ishi_koyomi/build_pages.py が書き出す。読み込みには ?v=（中身の指紋）が付く */

:root{
  --washi:#F4EFE6; --sumi:#2B2620; --soft:#635C51; --hair:#D9D0C0;
  --brass:#8A6D1F; --moss:#6B7A4B;
  --serif:"Shippori Mincho","Noto Serif JP",serif;
  --gutter:max(16px,6vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
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}
img{display:block;max-width:100%;height:auto}

/* 和紙の繊維 */
#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}

/* ── ナビ（本体と同じ） ── */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:50;
 display:flex;justify-content:space-between;align-items:center;
 padding:2.4vmin 4.2vmin;border-bottom:1px solid transparent}
nav#nav.solid{background:rgba(244,239,230,.92);border-bottom-color:var(--hair);
 -webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px)}
nav#nav .mark{font-size:1.06rem;letter-spacing:.24em;font-weight:500;line-height:1.12}
nav#nav .mark span{display:block;font-size:.52em;font-weight:400;letter-spacing:.24em;
 color:var(--soft);margin-top:.42em;text-indent:.24em}
nav#nav ul{display:flex;gap:2.6rem;list-style:none;font-size:.9rem;letter-spacing:.14em;color:var(--soft)}
nav#nav a{position:relative;padding-bottom:.3rem}
nav#nav 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#nav a:hover::after{right:0}
@media(max-width:900px){nav#nav ul{gap:1.5rem;font-size:.84rem;letter-spacing:.08em}
 nav#nav .mark{font-size:.96rem}}
/* 641〜760px：六つ目（いしの こよみ）を足したら、ロゴと一段に入りきらず各項目が二行に折れた
   （2026-10-24 WebKit 実測・641px と 680px）。この幅だけ字と間を詰める。640px 以下は二段の組みのまま */
@media(min-width:641px) and (max-width:760px){nav#nav ul{gap:1rem;font-size:.78rem;letter-spacing:.04em}}
@media(max-width:640px){
 nav#nav{flex-direction:column;align-items:stretch;padding:2.6vmin 4.6vmin .1rem;gap:0}
 nav#nav .mark{font-size:.98rem;letter-spacing:.2em;text-align:center;line-height:1.16}
 nav#nav .mark span{margin-top:.34em;letter-spacing:.2em;text-indent:.2em}
 nav#nav 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}
 nav#nav a{padding-bottom:.16rem}
 nav#nav a::after{bottom:-.02rem}
}
@media(max-width:400px){nav#nav{padding-left:3.4vmin;padding-right:3.4vmin}
 nav#nav ul{font-size:.65rem}nav#nav .mark{font-size:.9rem}}
@media(max-width:344px){nav#nav{padding-left:2.6vmin;padding-right:2.6vmin}
 nav#nav ul{font-size:.6rem}nav#nav .mark{font-size:.84rem}}

/* ── 罫・見出し・リンク（本体と同じ） ── */
main{position:relative;z-index:1;background:var(--washi)}
.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}
.en{display:flex;align-items:center;gap:1.4rem;font-size:1.5rem;
 letter-spacing:0;color:var(--sumi);font-weight:400;opacity:.45;line-height:1;
 font-family:"Cormorant Garamond",var(--serif)}
.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%}
.en small{font-size:.62em;letter-spacing:.06em;margin-left:.5em}
.lead{font-size:1.03rem;color:var(--soft);max-width:25em;line-height:2.45;letter-spacing:.03em}
.wave,.more a,.mae-ato a,.saki a{
 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:hover,.more a:hover,.mae-ato a:hover,.saki a: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")}
.more{margin-top:2.2rem;font-size:.94rem;letter-spacing:.1em}

/* ふりがな ── 総ルビ。熟語の途中では折らない */
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}
nav rt,footer rt{font-size:.52em;opacity:.5}

/* ── 分かち書き ──
   文節（半角スペースで区切ったひとまとまり）は .w の箱に入れて、中では折らない。
   折れるのは、空白・読点・句点・中黒のあと・かっこの前だけ（build_pages.py が <wbr> を置く）。
   iPhone の Safari は auto-phrase を知らないので、ブラウザの判断に任せない */
.wk{word-break:normal;line-break:strict}
.w{white-space:nowrap}

/* ── 頁の頭 ── */
.kashira{max-width:1060px;margin:0 auto;padding:max(8.5rem,20vh) var(--gutter) 0}
.kashira h1{font-weight:500;font-size:clamp(1.58rem,3.7vw,2.16rem);letter-spacing:.12em;line-height:1.8;margin-top:1.6rem}
.kashira .lead{margin-top:1.8rem}
.kashira .ato{margin-top:1rem;font-size:.9rem;letter-spacing:.1em;color:var(--soft)}

/* ── 絵 ── 紙白の地を、頁の和紙に溶かす。multiply は白どうしでも暗くなり四角が浮いた（WebKit で実測）。
   darken は明るいほう（＝頁の和紙）を残すので、地は頁と同じ色になり、石だけが残る */
.e-waku{margin:0}
.e-waku img.e{width:100%;aspect-ratio:1/1;mix-blend-mode:darken}
.iro-kae{display:inline-block;margin-top:.6rem;padding:.2rem 0 .5rem;
 font:inherit;font-size:.9rem;letter-spacing:.12em;color:var(--soft);
 background:none;border:0;cursor:pointer;
 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}
.iro-kae:hover{color:var(--brass)}
.iro-kae:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.iro-kae[hidden]{display:none}

/* 名前 ── カタカナの長い名前（最長 15 字）を、語の途中で折らずに一行に収める。
   --n（字数）で割って、列の幅に入る大きさまで縮める。大きいほうは上限で止める */
.na-waku{display:block;container-type:inline-size}
.na{font-weight:500;letter-spacing:.06em;line-height:1.5;white-space:nowrap;
 font-size:clamp(1.3rem,3.4vw,2.1rem)}
@supports (width:1cqi){
 .na{font-size:min(clamp(1.3rem,3.4vw,2.1rem), calc(100cqi / (var(--n) * 1.1)))}
}
@supports not (width:1cqi){.na{white-space:normal}}
.yomi{margin-top:.5rem;font-size:1.02rem;letter-spacing:.1em;color:var(--soft)}
.ei{font-family:"Cormorant Garamond",serif;font-size:1.06rem;letter-spacing:.12em;color:var(--soft);line-height:1.6;margin-top:.3rem}
.hizuke{font-size:1.06rem;letter-spacing:.14em;color:var(--soft)}
.hizuke ruby rt{opacity:.55}

/* ── 日の頁 ── */
.hi{max-width:1060px;margin:0 auto;padding:0 var(--gutter)}
.hi-naka{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2.4rem}
@media(min-width:860px){.hi-naka{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4.4rem;align-items:start}}
.hi-naka .e-waku{max-width:560px;width:100%;justify-self:center}
.koto .yomi{margin-top:.6rem}

/* 事実の表 ── 罫は本文と同じ手描きの波線 */
.koto-hyo{margin-top:2rem}
.koto-hyo .gyo{padding:1.1rem 0 1.2rem;
 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}
.koto-hyo .gyo:last-child{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"),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,repeat-x;background-position:0 0,0 100%}
.koto-hyo dt{font-size:.84rem;letter-spacing:.14em;color:var(--soft);line-height:1.9}
.koto-hyo dt .dt-chu{display:block;font-size:.86em;letter-spacing:.06em;opacity:.8}
.koto-hyo dd{margin-top:.3rem;font-size:1rem;letter-spacing:.04em;line-height:2.15}
.koto-hyo dd.mada{color:var(--soft);opacity:.75;font-size:.94rem}
/* 320px の携帯で、いちばん長い文節（17 字・例「（ブリティッシュコロンビアしゅう）」）が列を 1px 越えた（WebKit 実測）。字間を詰めて収める */
@media(max-width:360px){.koto-hyo dd{letter-spacing:.01em}}
@media(min-width:560px){
 .koto-hyo .gyo{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:1.4rem;align-items:baseline}
 .koto-hyo dd{margin-top:0}
}

/* こいしたくの一言（空なら書き出さない） */
.hitokoto{max-width:30em;margin:4.2rem auto 0;text-align:center}
.hitokoto p{font-size:1.06rem;line-height:2.4;letter-spacing:.08em}
.hitokoto .shomei{margin-top:1rem;font-size:.86rem;letter-spacing:.2em;color:var(--soft)}

/* 姓名判断大全へ */
.saki{margin-top:4.4rem;padding:1.8rem 0 0;font-size:.94rem;letter-spacing:.06em;color:var(--soft)}
.saki p{line-height:2.2}
.saki p+p{margin-top:1.2rem}
.saki .more{margin-top:1rem}

/* 参考資料 */
.shiryo{margin-top:3.6rem}
.shiryo h2{font-weight:500;font-size:.94rem;letter-spacing:.16em;color:var(--soft)}
.shiryo ol{list-style:none;margin-top:1rem}
.shiryo li{padding:.7rem 0;font-size:.88rem;line-height:1.9;letter-spacing:.03em}
.shiryo li a{color:var(--sumi);background-repeat:repeat-x;background-position:0 100%;padding-bottom:.25rem;
 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")}
.shiryo li a:hover{color:var(--brass)}
.shiryo .url{display:block;font-size:.8rem;color:var(--soft);opacity:.8;letter-spacing:0;
 word-break:break-all;overflow-wrap:anywhere;line-height:1.7;margin-top:.2rem}

/* 前の日・次の日 */
.mae-ato{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem 2rem;
 margin-top:5rem;padding:2.4rem 0 0;font-size:.92rem;letter-spacing:.08em}
.mae-ato a{display:inline-block;line-height:1.8}
.mae-ato .ichiran{order:3;flex-basis:100%;text-align:center}
.mae-ato .ichiran a{display:inline-block}
@media(min-width:720px){.mae-ato .ichiran{order:0;flex-basis:auto}}
.mae-ato small{display:block;font-size:.8em;color:var(--soft);letter-spacing:.1em}
.mae-ato .tsugi{text-align:right}

/* ── 一覧の頁 ── */
.kyou{max-width:1060px;margin:0 auto;padding:4.2rem var(--gutter) 6rem}
.kyou-dai{font-size:.98rem;letter-spacing:.16em;color:var(--soft)}
.kyou-naka{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;margin-top:1.6rem}
@media(min-width:860px){.kyou-naka{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}}
.kyou-naka .e-waku{display:block;max-width:520px;width:100%;justify-self:center}
.kyou .na{margin-top:.6rem}

.koyomi{max-width:1060px;margin:0 auto;padding:4.6rem var(--gutter) 2rem}
.koyomi > h2{font-weight:500;font-size:clamp(1.34rem,3vw,1.72rem);letter-spacing:.1em;line-height:1.85}
.tsuki-tobi{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.4rem;list-style:none;font-size:.94rem;letter-spacing:.06em}
.tsuki-tobi a{color:var(--soft)}
.tsuki-tobi a:hover{color:var(--brass)}
.tsuki{padding-top:3.4rem;scroll-margin-top:7.5rem}
.tsuki h3{font-weight:500;font-size:1.24rem;letter-spacing:.14em;line-height:1.9}
.ichi{list-style:none;margin-top:1rem;display:grid;gap:0 2rem;
 grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.ichi li{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%}
.ichi a{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:.9rem;align-items:center;padding:.55rem 0 .65rem;
 transition:background-color .5s}
.ichi a:hover{background:rgba(255,255,255,.45)}
.ichi img{width:3.6rem;height:3.6rem;mix-blend-mode:darken}
.ichi .moji{display:block;line-height:1.6}
.ichi .hi-su{display:block;font-family:"Cormorant Garamond",serif;font-size:.96rem;letter-spacing:.08em;color:var(--soft)}
.ichi .na{font-size:1rem;font-weight:400;letter-spacing:.04em;line-height:1.6}
@supports (width:1cqi){.ichi .na{font-size:min(1rem, calc(100cqi / (var(--n) * 1.06)))}}

.back{text-align:center;padding:10vh var(--gutter) 12vh;font-size:.94rem;letter-spacing:.1em}

footer{padding:6vh var(--gutter) 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 .row{display:flex;justify-content:center;gap:1rem 2.2rem;flex-wrap:wrap;margin-bottom:1.9rem}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}