:root{
  /* 紙×インクのモノクロ・ライト（Co-Star本家の白基調に忠実な解釈。タイポ・ヘアライン・✳の様式は不変） */
  --bg:#faf9f6; --ink:#171612; --muted:#6e6c64; --hair:rgba(23,22,18,.16); --ph:#edebe4;
  /* CV導線専用アクセント（サイト内で唯一の彩色＝孤立効果。乱用禁止） */
  --acc:#d9a63c; --accInk:#171612;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --jpser:"Shippori Mincho",serif;
}
/* 石はフルカラー（色で判別するためスウォッチ/写真はモノクロにしない） */
::selection{background:var(--ink); color:var(--bg)}
a{-webkit-tap-highlight-color:rgba(0,0,0,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--jp); font-size:17px; line-height:1.8; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}

/* top bar */
.top{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; background:var(--bg); border-bottom:1px solid var(--hair)}
.top__brand{display:inline-flex; align-items:center; gap:.34em; font-family:var(--serif); font-size:1.72rem; text-decoration:none; color:var(--ink); line-height:1; letter-spacing:.01em}
.brand-mark{width:1.32em; height:1.32em; flex:none; display:block; color:var(--ink)}
.top__nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; max-width:72%}
.top__nav a{font-family:var(--jp); font-size:.74rem; letter-spacing:.04em; color:var(--ink); white-space:nowrap;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:var(--muted)}
.top__nav a small{font-family:var(--mono); text-transform:uppercase; font-size:.54rem; letter-spacing:.08em; color:var(--muted); margin-left:4px}
.top__nav a:hover,.top__nav a:active{text-decoration-color:var(--ink)}

.wrap{max-width:1000px; margin:0 auto; padding:0 28px}

/* masthead */
.mast{padding:48px 0 10px}
.mast__kick{font-family:var(--mono); text-transform:uppercase; font-size:.73rem; letter-spacing:.2em; color:var(--muted); margin:0}
.mast__big{font-family:var(--serif); font-weight:400; font-size:clamp(3.4rem,12vw,8rem); line-height:.92; letter-spacing:.005em; margin:.1em 0 .18em}
.mast__big small{font-size:.34em; color:var(--muted); letter-spacing:.04em}
.mast__big.jp{font-family:var(--jpser); font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.18; letter-spacing:.02em}

/* 神社リスト（写真なし・編集的） */
.slist{list-style:none; margin:24px 0 0; padding:0}
.slist li{border-bottom:1px solid var(--hair)}
.slist li:first-child{border-top:1px solid var(--hair)}
.slist a{display:flex; gap:16px; align-items:flex-start; padding:18px 4px; text-decoration:none; transition:background .12s}
.slist a:hover{background:rgba(0,0,0,.04)}
.slist__thumb{width:104px; height:78px; object-fit:cover; flex:0 0 auto; background:var(--ph)}
.slist__body{min-width:0; flex:1}
.slist__h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.slist__n{font-family:var(--jpser); font-weight:600; font-size:1.22rem}
.slist a:hover .slist__n{text-decoration:underline; text-underline-offset:3px}
.slist__m{font-family:var(--mono); font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.slist__r{font-family:var(--jp); font-size:.9rem; color:var(--muted); line-height:1.7; margin-top:6px; max-width:54em}

/* 神社ヒーロー写真（詳細ページ） */
.shrine-hero{margin:0}
.shrine-hero img{width:100%; max-width:720px; aspect-ratio:16/10; object-fit:cover; background:var(--ph); display:block; border:1px solid var(--hair)}
.shrine-hero figcaption{margin-top:9px}

@media(max-width:780px){ .slist__thumb{width:80px; height:60px} }
.mast__sub{font-family:var(--jpser); font-size:1.18rem; margin:0}
.mast__sub span{font-family:var(--jp); color:var(--muted)}

/* fact rows */
.facts{margin-top:22px; border-top:1px solid var(--hair)}
.frow{display:flex; gap:22px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--hair)}
.frow__l{font-family:var(--mono); text-transform:uppercase; font-size:.71rem; letter-spacing:.13em; color:var(--muted); width:150px; flex:0 0 auto}
.frow__v{font-family:var(--jpser); font-size:1.16rem}
.frow__v a{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--muted)}
.frow__v a:hover{text-decoration-color:var(--ink)}
.frow__v em{font-style:normal; font-family:var(--jp); font-size:.82rem; color:var(--muted); margin-left:12px}

/* blocks */
.blk{border-top:1px solid var(--hair); padding:50px 0}
.lbl{display:flex; align-items:center; gap:12px; margin:0 0 26px}
.lbl__en{font-family:var(--mono); font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.15em}
.lbl__star{color:var(--muted)}
.lbl__jp{font-family:var(--jp); font-size:.86rem; color:var(--muted)}
.note{font-family:var(--mono); font-size:.66rem; color:var(--muted); margin:16px 0 0; letter-spacing:.02em}
.empty{font-family:var(--jpser); color:var(--muted)}

/* prose */
.prose{font-family:var(--jp); font-size:1.06rem; line-height:2; max-width:42em; margin:0}
/* lore（神話・言い伝え）：明朝で物語の質感に。モノクロ維持・段落で改段（空白行）して可読性を確保 */
.lore__body{max-width:39em}
.lore__p{font-family:var(--jpser); font-size:1.1rem; line-height:2.0; margin:0; color:#403e37}
.lore__p + .lore__p{margin-top:1.3em}

/* stone hero（石ページ：スウォッチ/写真＋説明 横並び） */
.stone-hero{display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start; margin-top:4px}
.sw{width:100%; aspect-ratio:1/1; background:var(--c,#8b8b86); display:block}
.sw img{width:100%; height:100%; object-fit:cover}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0}
.tag{font-family:var(--mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.1em; color:var(--muted); border:1px solid var(--hair); padding:5px 11px}
.src{font-family:var(--mono); font-size:.62rem; color:var(--muted); margin-top:22px; letter-spacing:.02em}
.stone-hero__l{display:flex; flex-direction:column; gap:8px}
.cr{font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.02em; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(0,0,0,.25); word-break:break-word}
.cr:hover{text-decoration-color:var(--muted)}

/* gift / buy（反転ホバー・366踏襲） */
.gift{display:inline-flex; gap:10px; align-items:center; border:1px solid var(--ink); background:rgba(0,0,0,.03);
  padding:.8em 1.2em; text-decoration:none; margin-top:22px; transition:.15s;
  font-family:var(--mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em}
.gift:hover{background:var(--ink); color:var(--bg)}
.gift:active{transform:translateY(1px)}
.pr{font-family:var(--mono); font-size:.6rem; color:var(--muted); margin-left:10px; letter-spacing:.06em}

/* mono link（Noctiaブリッジ）＝CV導線。唯一の彩色ボタン */
.mlink{display:inline-block; font-family:var(--mono); text-transform:uppercase; font-size:.73rem; letter-spacing:.1em;
  border:1px solid var(--acc); background:var(--acc); color:var(--accInk); font-weight:700;
  padding:.78em 1.2em; text-decoration:none; margin-top:6px; transition:.15s}
.mlink:hover{background:transparent; color:var(--acc)}
.mlink:active{transform:translateY(1px)}
.bridge{margin-top:8px}
.bridge p{font-family:var(--jpser); font-size:1.08rem; margin:0 0 18px; max-width:34em}
.bridge p.bridge__more{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; margin:14px 0 0}
.bridge__more a{color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--muted)}
.bridge__more a:hover{color:var(--ink); text-decoration-color:var(--ink)}

/* card grid（石一覧・誕生石月・星座別） */
.ixgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:22px; margin:30px 0 6px}
.ix{text-decoration:none; color:var(--ink)}
.ix__sw{width:100%; aspect-ratio:4/5; background:var(--c,#8b8b86); display:block}
.ix__sw img{width:100%; height:100%; object-fit:cover}
.ix__d{font-family:var(--jpser); font-weight:600; display:block; margin-top:10px; font-size:1.05rem}
.ix__f{font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.ix:hover .ix__d{text-decoration:underline; text-underline-offset:3px}
/* 花カードの花言葉（明朝・通常ケース） */
.ix__f.fl__kotoba{font-family:var(--jpser); text-transform:none; letter-spacing:0; color:var(--muted); font-size:.82rem; line-height:1.5; margin-top:3px; display:block}
/* glyph card（ホロスコープ：惑星・星座のグリフを枠内中央に） */
.ix__sw.gly{display:flex; align-items:center; justify-content:center; background:var(--ph);
  font-family:var(--serif); font-size:3rem; color:var(--muted); transition:color .15s, background .15s;
  font-variant-emoji:text}
.ix:hover .ix__sw.gly{color:var(--ink)}

/* tile grid（月・星座インデックス：ヘアライン格子・反転ホバー） */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:30px}
.tile{display:flex; flex-direction:column; gap:5px; padding:26px 22px; background:var(--bg); text-decoration:none; transition:.15s}
.tile:hover{background:var(--ink); color:var(--bg)}
.tile__en{font-family:var(--mono); text-transform:uppercase; font-size:.64rem; letter-spacing:.12em; color:var(--muted)}
.tile__m{font-family:var(--serif); font-size:2rem; line-height:1; font-variant-emoji:text}
.tile__n{font-family:var(--mono); font-size:.62rem; color:var(--muted)}
.tile:hover .tile__en,.tile:hover .tile__n{color:var(--bg)}

/* explore */
.ex{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); column-gap:14px}
.ex li{border-bottom:1px solid var(--hair)}
.ex li:nth-child(-n+2){border-top:1px solid var(--hair)}
.ex a{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 14px;
  text-decoration:none; font-family:var(--jpser); font-size:1.08rem; transition:background .12s}
.ex a::after{content:"↗"; font-family:var(--mono); color:var(--muted); font-size:.9rem}
.ex a:hover,.ex a:active{background:rgba(0,0,0,.05)}
.ex a:hover::after{color:var(--ink)}

/* footer */
.foot{max-width:1000px; margin:54px auto 0; border-top:1px solid var(--ink); padding:34px 28px 64px}
.foot__grid{display:flex; gap:50px; align-items:center}
.foot__brand{flex:none; width:262px}
.foot__logo{display:block; width:100%; height:auto; filter:invert(1)} /* ロックアップPNGはオフホワイト前提のため紙地では反転 */
.foot__notes{flex:1; min-width:0}
.foot__notes p{font-family:var(--mono); font-size:.69rem; color:var(--muted); letter-spacing:.03em; margin:.55em 0}
.foot__notes p:first-child{margin-top:0}
@media(max-width:780px){ .foot__grid{flex-direction:column; align-items:stretch; gap:30px} .foot__brand{width:auto} .foot__logo{width:236px; max-width:74%; margin:0 auto} }

.crumb{font-family:var(--mono); text-transform:uppercase; font-size:.68rem; letter-spacing:.1em; color:var(--muted); margin:0 0 8px}
.crumb a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--muted)}

/* hero（トップのファーストビュー：誕生日をひく入口・Co-Star系モノクロ） */
.hero{padding:58px 0 26px; border-bottom:1px solid var(--hair)}
.hero__kick{font-family:var(--mono); text-transform:uppercase; font-size:.72rem; letter-spacing:.2em; color:var(--muted); margin:0}
.hero__h{font-family:var(--jpser); font-weight:600; font-size:clamp(1.9rem,5vw,3.5rem); line-height:1.36; letter-spacing:.02em; margin:.34em 0 0}
.hero__h em{font-style:normal; display:inline-block; margin-top:.06em}
.hero__lead{font-family:var(--jp); font-size:1.02rem; color:var(--muted); max-width:33em; line-height:1.95; margin:18px 0 0}
.hero__form{margin:34px 0 0}
.hero__form label{font-family:var(--mono); text-transform:uppercase; font-size:.66rem; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:12px}
.hero__inputs{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.hero__inputs input{width:2.4em; background:transparent; border:none; border-bottom:1px solid var(--muted); color:var(--ink); font-family:var(--serif); font-size:2.6rem; line-height:1; text-align:center; padding:0 2px 4px}
.hero__inputs input::placeholder{color:rgba(0,0,0,.25)}
.hero__inputs input:focus{outline:none; border-bottom-color:var(--ink)}
.hero__unit{font-family:var(--jpser); font-size:1.1rem; color:var(--muted)}
/* 誕生日セレクタ（ワンタップで選ぶ・Co-Star系モノクロのボックス＋シェブロン） */
.hero__selwrap{position:relative; display:inline-flex}
.hero__selwrap::after{content:"▾"; position:absolute; right:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); font-size:.78rem}
.hero__sel{appearance:none; -webkit-appearance:none; background:rgba(0,0,0,.03); border:1px solid var(--hair); color:var(--ink);
  font-family:var(--jpser); font-size:1.2rem; padding:.55em 2.3em .55em 1em; cursor:pointer; transition:.15s; border-radius:0}
.hero__sel:hover{border-color:var(--muted)}
.hero__sel:focus{outline:none; border-color:var(--ink)}
.hero__sel option{background:var(--bg); color:var(--ink)}
.hero__go{font-family:var(--mono); text-transform:uppercase; font-size:.74rem; letter-spacing:.1em; border:1px solid var(--acc); background:var(--acc); color:var(--accInk); font-weight:700; padding:.72em 1.5em; margin-left:10px; cursor:pointer; transition:.15s; align-self:center}
.hero__go:hover{background:transparent; color:var(--acc)}
.hero__go:active{transform:translateY(1px)}
.hero__peek{margin:28px 0 0; border:1px solid var(--hair); padding:22px 26px 26px; max-width:40em}
.hero__peekh{font-family:var(--jpser); font-weight:600; font-size:1.12rem; margin:0 0 6px}
.hero__facts{margin-top:6px}
.hero__facts .frow:first-child{border-top:none}
.hero__peek .mlink{margin-top:20px; margin-right:14px}
.hero__noctia{display:inline-block; margin-top:20px; font-family:var(--mono); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--muted); text-decoration:underline; text-underline-offset:4px}
.hero__noctia:hover{color:var(--ink)}
.hero__err{font-family:var(--jpser); color:var(--muted); margin:0}
/* 生まれた日の星の地図（事実＋一般辞典キーワード＋図鑑リンク。読み解きはNoctia） */
.hero__starmap{margin:18px 0 0; border-top:1px solid var(--hair)}
.hero__star{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:14px 2px; border-bottom:1px solid var(--hair); text-decoration:none; color:var(--ink); transition:background .12s}
.hero__star:hover{background:rgba(0,0,0,.04)}
.hero__star-p{font-family:var(--mono); text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; color:var(--muted); min-width:5.2em; font-variant-emoji:text}
.hero__star-s{font-family:var(--jpser); font-size:1.18rem; font-variant-emoji:text}
.hero__star-k{font-family:var(--jp); font-size:.82rem; color:var(--muted)}
.hero__star:hover .hero__star-s{text-decoration:underline; text-underline-offset:3px}
.hero__starnote{font-family:var(--jp); font-size:.88rem; line-height:1.85; color:var(--muted); max-width:40em; margin:18px 0 0}
.hero__cta{display:inline-block; margin:20px 0 0; font-size:.8rem; padding:.95em 1.6em; background:rgba(0,0,0,.04)}
.hero__cta:hover{background:var(--ink); color:var(--bg)}
.hero__chips{display:flex; flex-wrap:wrap; gap:8px; margin:32px 0 2px}
.hero__chips a{font-family:var(--mono); text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; color:var(--ink); border:1px solid var(--hair); padding:8px 13px; text-decoration:none; transition:.15s}
.hero__chips a:hover{background:var(--ink); color:var(--bg)}

/* 366 誕生日ピラー */
.fig366{margin:0}
.fig366 img,.fig366__none{width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--ph); display:block}
.fig366__none{display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; font-family:var(--jpser); color:var(--muted); font-size:.95rem}
.fig366 b{font-family:var(--jpser); font-weight:600; font-size:1.04rem; display:block; margin-top:11px}
.fig366__m{color:var(--muted); font-size:.84rem; line-height:1.5; display:block; margin-top:2px}
.rows366{list-style:none; margin:0; padding:0}
.rows366 li{display:flex; gap:20px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--hair)}
.rows366 li:first-child{border-top:1px solid var(--hair)}
.rows366 .y{font-family:var(--serif); font-size:1.25rem; color:var(--muted); min-width:3em; flex:0 0 auto}
.rows366 b{font-family:var(--jpser); font-weight:600}
.rows366 .t{font-family:var(--jp)}
.rows366 .r{color:var(--muted); font-size:.83rem; margin-left:8px}
/* 有名人のWikipediaリンク＋年齢差表示（?y=経由の発見体験） */
.rows366--fp li{flex-wrap:wrap; row-gap:4px}
.fp-wk{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--muted)}
.fp-wk:hover{text-decoration-color:var(--ink)}
.fp-wk::after{content:"↗"; font-family:var(--mono); font-size:.68em; color:var(--muted); margin-left:3px}
.fp-agediff{font-family:var(--jp); font-size:.78rem; color:var(--muted); margin-left:auto; white-space:nowrap}
.fp-same{font-family:var(--jpser); font-weight:600; font-size:.8rem; color:var(--ink); border:1px solid var(--ink); padding:3px 10px}
.dgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:28px}
.dgrid--z{grid-template-columns:repeat(4,1fr)}
.dcell{display:flex; flex-direction:column; gap:3px; padding:16px 12px; background:var(--bg); text-decoration:none; transition:.15s}
.dcell:hover{background:var(--ink); color:var(--bg)}
.dcell__d{font-family:var(--serif); font-size:1.5rem; line-height:1}
.dcell--wide .dcell__d{font-size:1.05rem; font-family:var(--jpser)}
.dcell__f{font-family:var(--mono); font-size:.6rem; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.dcell:hover .dcell__f{color:var(--bg)}

/* ── 図解（SVG/HTML共通・Co-Star調モノクロ・ヘアライン） ── */
.fig{margin:30px 0 8px}
.fig figcaption{font-family:var(--mono); font-size:.71rem; letter-spacing:.04em; line-height:1.7; color:var(--muted); text-align:center; margin-top:14px; max-width:34em; margin-left:auto; margin-right:auto}
.dia{display:block; width:100%; max-width:360px; height:auto; margin:0 auto; color:var(--ink)}
.dia-hair{stroke:var(--hair); fill:none; stroke-width:1}
.dia-hair2{stroke:var(--hair); fill:none; stroke-width:1; stroke-dasharray:2 4}
.dia text{fill:var(--ink); font-family:var(--mono); text-anchor:middle}
.dia-glyph{font-size:19px}
.dia-planet{font-size:15px; fill:var(--muted)}
.dia-num{font-size:13px; fill:var(--muted); letter-spacing:.08em}
.dia-lab{font-size:11px; letter-spacing:.1em; fill:var(--muted)}
.dia-cap{font-size:11.5px; letter-spacing:.06em; fill:var(--ink)}
.dia-c{font-size:14px; fill:var(--ink); letter-spacing:.04em}
.dia-hi{font-size:18px; fill:var(--ink)}
.dia-ring{stroke:var(--ink); fill:none; stroke-width:1.4}
.dia-fillph{fill:var(--ph); stroke:none}
/* 記号の凡例（ホロスコープ円の glyph 解読表） */
.lgnd{margin:20px auto 6px; max-width:30em}
.lgnd__h{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.lgnd__grp{margin:0 0 16px}
.lgnd__t{display:block; font-family:var(--jp); font-size:.82rem; color:var(--muted); margin:0 0 9px}
.lgnd__row{display:flex; flex-wrap:wrap; gap:7px}
.lgnd__i{font-family:var(--jp); font-size:.82rem; border:1px solid var(--hair); padding:5px 9px; white-space:nowrap; line-height:1.4}
.lgnd__i b{font-family:var(--jpser); font-weight:500; font-size:1.04em; margin-right:6px}
/* 改行制御：keep-all＋本文中の <wbr> でのみ改行（中途半端な分割を防ぐ） */
.kb{word-break:keep-all; overflow-wrap:break-word}
/* 文法チップ方程式 */
.eqn{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:12px; margin:28px 0 8px}
.eqn__chip{border:1px solid var(--hair); padding:14px 16px; min-width:118px; text-align:center; display:flex; flex-direction:column; justify-content:center}
.eqn__chip--res{border-color:var(--ink)}
.eqn__g{font-size:1.5rem; line-height:1}
.eqn__r{font-family:var(--jpser); font-size:1.05rem; margin-top:6px}
.eqn__s{font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-top:5px}
.eqn__op{display:flex; align-items:center; font-family:var(--serif); font-size:1.7rem; color:var(--muted)}
/* 月と太陽のスピード比較 */
.spd{margin:26px 0 8px; display:grid; gap:16px}
.spd__row{display:grid; grid-template-columns:74px 1fr; align-items:center; gap:14px}
.spd__lab{font-family:var(--jpser); font-size:1.02rem; line-height:1.3}
.spd__lab small{display:block; font-family:var(--mono); font-size:.6rem; color:var(--muted); letter-spacing:.04em; margin-top:3px}
.spd__track{display:flex; gap:2px; height:28px}
.spd__cell{flex:1; border:1px solid var(--hair); background:var(--ph)}
.spd__cell--on{background:var(--ink); border-color:var(--ink)}

/* ── 相性ピラー（/match/）：ロジック開示表はfacts/.spd流用。マトリクス・FAQのみ新規 ── */
/* ヘッダは「記号＋星座名テキスト」のセット（記号だけでは分からないユーザーが大半のため） */
.mtx-wrap{overflow-x:auto; margin-top:30px; padding-bottom:6px}
.mtx{display:grid; grid-template-columns:84px repeat(12,minmax(56px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); min-width:820px}
.mtx__cell{background:var(--bg); display:flex; align-items:center; justify-content:center; padding:11px 2px; font-family:var(--mono); font-size:.76rem; text-decoration:none; color:var(--ink); font-variant-emoji:text}
.mtx__h{background:var(--ph); color:var(--muted); flex-direction:column; gap:3px; padding:9px 2px}
.mtx__h b{font-weight:400; font-size:1.02rem; line-height:1}
.mtx__h i{font-style:normal; font-family:var(--jp); font-size:.6rem; letter-spacing:.02em; white-space:nowrap; line-height:1}
.mtx__row-h{flex-direction:row; justify-content:flex-start; gap:7px; padding-left:9px}
a.mtx__cell{background:var(--sc,var(--bg)); transition:.15s}
a.mtx__cell:hover{background:var(--ink); color:var(--bg)}
/* マトリクス凡例（濃淡＝総合スコアの目安・非断定） */
.mtx-lgnd{font-family:var(--mono); font-size:.66rem; color:var(--muted); margin:14px 0 0; letter-spacing:.02em; line-height:2}
.mtx-lgnd__row{display:inline-flex; align-items:center; gap:5px; margin-right:12px}
.mtx-lgnd__sw{display:inline-block; width:16px; height:12px; background:var(--sc,var(--bg)); border:1px solid var(--hair)}

/* スコアの視覚バー（相性個別ページ・ビルド時SVG） */
.sbar{display:block; width:100%; max-width:540px; height:auto; margin:26px 0 8px}
.sbar text{fill:var(--ink)}
.sbar .sb-l{font-family:var(--jpser); font-size:15px}
.sbar .sb-n{font-family:var(--mono); font-size:11px; fill:var(--muted)}
.sbar .sb-seg{fill:var(--ph); stroke:var(--hair); stroke-width:1}
.sbar .sb-seg--on{fill:var(--ink); stroke:var(--ink)}

/* アスペクト角の図解（相性個別ページ・ビルド時SVG） */
.adia{display:block; width:100%; max-width:300px; height:auto; margin:0 auto}
.adia text{font-family:var(--mono); fill:var(--ink); text-anchor:middle}
.adia .ad-glyph{font-size:20px; font-variant-emoji:text}
.adia .ad-name{font-family:var(--jp); font-size:11px; fill:var(--muted)}
.adia .ad-deg{font-family:var(--serif); font-size:27px}
.adia .ad-asp{font-family:var(--jp); font-size:12px; fill:var(--muted)}
.adia .ad-line{stroke:var(--ink); stroke-width:1.2; fill:none}
.adia .ad-arc{stroke:var(--muted); stroke-width:1; fill:none; stroke-dasharray:3 3}
.adia .ad-ring{stroke:var(--hair); stroke-width:1; fill:none}
.adia .ad-dot{fill:var(--ink)}

/* FAQ（Q/A・ヘアライン区切り） */
.faq{margin:0}
.faq__item{border-top:1px solid var(--hair); padding:20px 0}
.faq__item:last-child{border-bottom:1px solid var(--hair)}
.faq__q{font-family:var(--jpser); font-weight:600; font-size:1.05rem; margin:0 0 10px; display:flex; gap:10px}
.faq__q::before{content:"Q"; font-family:var(--mono); color:var(--muted); flex:none}
.faq__a{font-family:var(--jp); font-size:.95rem; line-height:1.9; color:var(--muted); margin:0; display:flex; gap:10px}
.faq__a::before{content:"A"; font-family:var(--mono); color:var(--ink); flex:none}

/* ── 天体カレンダー（/calendar/）：日別テーブル（ヘアライン区切りの行リスト） ── */
.caldays{list-style:none; margin:24px 0 0; padding:0}
.caldays__row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; padding:13px 4px; border-bottom:1px solid var(--hair)}
.caldays__row:first-child{border-top:1px solid var(--hair)}
.caldays__d{font-family:var(--serif); font-size:1.3rem; line-height:1; min-width:2.4em; flex:0 0 auto}
.caldays__d small{font-family:var(--mono); font-size:.6rem; color:var(--muted); margin-left:.4em}
.caldays__moon{font-family:var(--jpser); font-size:1rem; min-width:8em}
.caldays__ing{font-family:var(--mono); font-size:.6rem; color:var(--muted); margin-left:.5em}
.caldays__asp{font-family:var(--jp); font-size:.82rem; color:var(--muted); flex:1 1 auto; min-width:11em}
.caldays__tags{display:flex; flex-wrap:wrap; gap:6px}
a.tag{text-decoration:none; transition:.15s}
a.tag:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
/* 日別テーブルの列ヘッダ行（初心者向けの列名・title属性で補足） */
.caldays__head span{font-family:var(--mono) !important; font-size:.62rem !important; color:var(--muted); letter-spacing:.08em; text-transform:none}
.caldays__head .caldays__d,.caldays__head .caldays__moon,.caldays__head .caldays__asp{font-family:var(--mono); font-size:.62rem}

/* 用語辞典 自動リンク（点線下線）＋括弧書き注釈（muted） */
.tlink{text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:var(--muted); text-decoration-thickness:1px}
.tlink:hover{text-decoration-color:var(--ink)}
.gloss{color:var(--muted)}

/* 「はじめての方へ→星よみ入門」の控えめな入口（新セクション共通・リード/mast直下） */
.guide-in{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; margin:16px 0 0}
.guide-in a{color:var(--muted); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--muted)}
.guide-in a:hover{color:var(--ink); text-decoration-color:var(--ink)}

/* 星よみ入門（/guide/）：アスペクト7種の小型図グリッド・ホイール番号注記 */
.aspgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:20px 14px; margin:28px 0 6px}
.aspg{margin:0; text-align:center}
.aspg .adia--sm{max-width:130px; margin:0 auto}
.aspg figcaption b{display:block; font-family:var(--jpser); font-weight:600; font-size:.95rem; margin-top:8px}
.aspg figcaption small{display:block; font-family:var(--jp); font-size:.76rem; color:var(--muted); margin-top:2px; line-height:1.5}
.wk-markc{fill:var(--bg); stroke:var(--ink); stroke-width:1.2}
.wk-markt{font-family:var(--mono); font-size:12px; fill:var(--ink); text-anchor:middle}
.wheelkey{list-style:none; margin:18px 0 0; padding:0; max-width:42em}
.wheelkey li{font-family:var(--jp); font-size:1rem; line-height:1.9; padding:12px 0; border-bottom:1px solid var(--hair)}
.wheelkey li:first-child{border-top:1px solid var(--hair)}
.wheelkey li > b:first-child{font-family:var(--mono); margin-right:10px}

/* ホロスコープホイール（/calendar/today/・クライアントSVG）：星座・惑星の日本語名テキスト */
.dia-jp{font-family:var(--jp); font-size:10px; fill:var(--muted); text-anchor:middle}

/* 月星座リボン（月次カレンダーのビルド時SVG・モノクロ・ヘアライン）。
   スマホ幅では横スクロール（min-width維持）＝星座名テキストの可読性を確保 */
.fig--wide{margin:26px 0 8px}
.fig--wide figcaption{max-width:44em}
.ribbon-scroll{overflow-x:auto; padding-bottom:6px}
.ribbon{display:block; width:100%; min-width:760px; height:auto; color:var(--ink)}
.ribbon text{font-family:var(--mono); fill:var(--ink); text-anchor:middle}
.ribbon .rb-glyph{font-size:16px; font-variant-emoji:text}
.ribbon .rb-name{font-family:var(--jp); font-size:11px; fill:var(--muted)}
.ribbon .rb-day{font-size:10px; fill:var(--muted)}
.ribbon .rb-ev{font-family:var(--jp); font-size:10.5px; fill:var(--ink)}
.ribbon .rb-retro{font-family:var(--jp); font-size:11px; fill:var(--muted); text-anchor:start}
.rb-seg{fill:none; stroke:var(--hair); stroke-width:1}
.rb-seg--alt{fill:var(--ph)}
.rb-hair{stroke:var(--hair); stroke-width:1}
.rb-line{stroke:var(--muted); stroke-width:1}
.rb-moon-new{fill:none; stroke:var(--ink); stroke-width:1.2}
.rb-moon-full{fill:var(--ink); stroke:none}

@media(max-width:780px){
  .dgrid{grid-template-columns:repeat(5,1fr)}
  .dgrid--z{grid-template-columns:repeat(2,1fr)}
  .ixgrid{grid-template-columns:repeat(2,1fr); gap:18px}
  .ex{grid-template-columns:1fr}
  .ex li:nth-child(2){border-top:none}
  .frow{flex-direction:column; gap:3px}
  .frow__l{width:auto}
  /* モバイルのグローバルメニュー：ブランドの下にチップを折り返し（横溢れ解消＋タップできると分かる枠） */
  .top{flex-wrap:wrap; align-items:center; gap:12px; padding:13px 16px; position:static}
  .top__brand{font-size:1.5rem}
  .top__nav{width:100%; max-width:none; flex-wrap:wrap; justify-content:flex-start; gap:7px}
  .top__nav a{text-decoration:none; border:1px solid var(--hair); background:rgba(0,0,0,.03);
    padding:8px 12px; font-size:.72rem; letter-spacing:.04em; line-height:1}
  .top__nav a small{display:none} /* モバイルは日本語のみ（チップの横幅節約） */
  .top__nav a:hover,.top__nav a:active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  .stone-hero{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  /* 図解：文法方程式はモバイルで縦積み（operatorの不揃い折返しを解消） */
  .eqn{flex-direction:column; align-items:center; gap:9px}
  .eqn__chip{width:212px; min-width:0; box-sizing:border-box; padding:13px 14px}
  .eqn__op{font-size:1.35rem; line-height:1}
  /* 縦積みの式：等号は90°回して縦向き（‖）にする＝横並びの「＝」が寝て見える不自然さを解消 */
  .eqn__op--eq{transform:rotate(90deg); font-weight:700; letter-spacing:-.04em}
  /* 長い英語ラベルが2行に折れるときは上揃えで整える */
  .lbl{align-items:flex-start}
  /* 年齢差表示はモバイルで名前の下に折り返す */
  .fp-agediff{margin-left:0; width:100%}
}