/* CPC 都市伝説蒐集クラブ 下層ページ（標本・魚拓）／ yayumeme.com/cpc/
   生成元: projects/happykeeping/production/cpc-report/build-cpc-pages.mjs（このファイルを yayumeme/cpc/cpc.css に複製）
   2026-09-27: CPCトップ（home.css）と同じ「標本室」の枠に揃えた。
   - CPCの枠（ヘッダー、見出し、表、写真、名簿、ログ、魚拓タグ）は暗い標本室。
   - 魚拓の中身（ブログ、D:ch、100億ブログ）は元サイトの見た目のまま。明るい「写し」として置く。 */

@font-face{font-family:"KuroHana Mincho";src:url("/assets/fonts/KuroHanaMincho-ExtraBold.ttf") format("truetype");font-display:swap}

:root{
 color-scheme:dark;
 --bg:#060606;
 --panel:#0e0d0b;
 --panel-2:#141210;
 --bone:#ebe6da;
 --bone-dim:#bdb7a9;
 --faint:#8d887c;
 --line:rgba(235,230,218,.13);
 --line-2:rgba(235,230,218,.26);
 --red:#b8111d;
 --red-hot:#ff3441;
 --formalin:#abc27f;
 --font-title:"KuroHana Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
 --font-ui:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
 --font-code:"BIZ UDGothic",Consolas,"Courier New",monospace;
 --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--bone);background:var(--bg);font:15px/1.85 var(--font-ui);font-weight:500;-webkit-font-smoothing:antialiased}
a{color:var(--bone);text-decoration-color:var(--red)}
a:hover{color:#fff}
img{max-width:100%}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}
.mono{font-family:var(--font-code)}
.sm{font-size:12px;color:var(--faint)}
.skip{position:absolute;left:-999px;top:0;z-index:100;padding:8px 14px;background:var(--red);color:#fff}
.skip:focus{left:8px;top:8px}
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rec{50%{opacity:.2}}

/* ---- ヘッダー（トップと同じ） ---- */
.hd{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;height:58px;padding:0 var(--gut);background:rgba(6,6,6,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.hd-emblem{flex:none;width:34px;height:34px;animation:spin 40s linear infinite}
.hd-brand b{display:block;font:400 15px/1.2 var(--font-title);letter-spacing:.1em;white-space:nowrap}
.hd-brand small{display:block;font:10px/1.3 var(--font-code);letter-spacing:.28em;color:var(--faint)}
.hd-nav{display:flex;gap:4px;font:700 13px/1 var(--font-ui)}
.hd-nav a{padding:10px;color:var(--bone-dim);text-decoration:none;border-bottom:2px solid transparent}
.hd-nav a:hover,.hd-nav a[aria-current]{color:var(--bone);border-bottom-color:var(--red)}
.hd-nav .out{color:var(--faint);font-weight:500}
.fbar{display:flex;gap:10px;align-items:center;justify-content:center;margin:0;padding:6px var(--gut);background:#000;border-bottom:1px solid var(--line);color:var(--formalin);font-size:11.5px;line-height:1.5}
.fbar .mk{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid currentColor;font:700 11px/1 var(--font-code)}

/* ---- パンくず ---- */
.crumbs{max-width:880px;margin:0 auto;padding:18px var(--gut) 0;font:12px/1.6 var(--font-code);color:var(--faint)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin:0 8px;color:var(--faint)}
.crumbs a{color:var(--bone-dim);text-decoration:none}
.crumbs a:hover{color:var(--bone);text-decoration:underline}
.crumbs [aria-current]{color:var(--bone)}

/* ---- 本文の枠 ---- */
.wrap{max-width:880px;margin:0 auto;padding:18px var(--gut) 0}
.wrap>section,.wrap>ul,.wrap>p{position:relative;margin:0 0 16px;padding:22px 24px 22px;background:var(--panel);border:1px solid var(--line)}
.wrap>p.back{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:14px;background:transparent;border:0;border-top:1px solid var(--line);margin-top:28px;font-weight:700;font-size:14px}
.wrap>p.back a{color:var(--bone-dim)}
.wrap>p.back a::before{content:"← ";color:var(--red-hot)}
h1{margin:4px 0 10px;font:400 clamp(28px,4vw,40px)/1.3 var(--font-title);letter-spacing:.04em}
h2{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-2);font:400 24px/1.3 var(--font-title);letter-spacing:.06em;color:var(--bone)}
section h2:first-child{margin-top:0}
h3{margin:18px 0 6px;font-size:16px;font-weight:700}
p{margin:0 0 10px}
.kicker{margin:0;font:11px/1.5 var(--font-code);letter-spacing:.28em;color:var(--red-hot)}
.lead{font-size:15.5px;color:var(--bone)}

/* ---- 表（出典・名簿・魚拓一覧） ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.65}
.tbl th,.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font:11px/1.4 var(--font-code);letter-spacing:.12em;color:var(--faint);border-bottom-color:var(--line-2);font-weight:400}
.tbl td.mono,.tbl td:first-child{font-family:var(--font-code);color:var(--formalin);white-space:nowrap}
.tbl tr:hover td{background:rgba(235,230,218,.03)}
.tbl a{color:var(--bone)}
.tbl tr.gap td{color:var(--faint)}
.tbl tr.now td{background:rgba(184,17,29,.1)}
.tbl tr.you td{color:var(--red-hot);background:rgba(184,17,29,.1)}
.tbl tr.you td:first-child{animation:rec 1.4s steps(2) infinite}
.tbl tr.blank td{height:40px}
.tbl .url{display:block;margin-top:2px;font:11px/1.5 var(--font-code);color:var(--faint);word-break:break-all}
.tbl td:last-child{white-space:nowrap;color:var(--bone-dim)}
#roster .tbl td:nth-child(2){white-space:nowrap}
.tbl th{white-space:nowrap}
.tbl-gy td:nth-child(3),.tbl-gy td:nth-child(4){white-space:nowrap}
.tbl-gy td:last-child{white-space:normal;min-width:7em}

/* ---- リスト・注記 ---- */
.list{margin:0;padding-left:0;list-style:none}
.wrap>ul.list{padding:10px 24px}
.list li{padding:10px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list a{color:var(--bone);font-weight:700}
.list.locked li{display:flex;gap:10px;color:var(--bone-dim)}
.list.locked li::before{content:"";flex:none;width:12px;height:12px;margin-top:7px;background:var(--bone-dim)}
.note{margin:14px 0 0;padding:12px 16px;background:var(--panel-2);border-left:3px solid var(--red);font-size:14px;color:var(--bone)}
.wrap>p.note{margin:0 0 16px}
.status{padding:10px 14px;border:1px solid var(--line-2);background:#000}

/* ---- ボタン ---- */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;background:rgba(0,0,0,.4);border:1px solid var(--line-2);color:var(--bone);font:700 13.5px/1.3 var(--font-ui);text-decoration:none}
.btn:hover{border-color:var(--bone);color:#fff}
.cta .btn:first-child{background:var(--red);border-color:var(--red);color:#fff}
.cta .btn:first-child:hover{background:var(--red-hot);border-color:var(--red-hot)}

/* ---- 標本ページ ---- */
.spec .label{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:16px 0 0;background:var(--line);border:1px solid var(--line)}
.spec .label div{padding:8px 12px;background:var(--bg)}
.spec .label dt{font:10px/1.4 var(--font-code);letter-spacing:.2em;color:var(--faint)}
.spec .label dd{margin:0;font:700 14px/1.5 var(--font-code);color:var(--formalin)}
.spec .label div:last-child dd{color:var(--red-hot)}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.jump a{display:inline-block;padding:4px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--bone-dim);text-decoration:none}
.jump a:hover{color:#fff;border-color:var(--bone)}
.wrap>section[id]{scroll-margin-top:72px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ph{margin:0}
.ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-2);filter:grayscale(1) contrast(1.08)}
.ph figcaption{margin-top:6px;font-size:12px;line-height:1.6;color:var(--bone-dim)}
.ph figcaption b{color:var(--formalin);font:12px/1.5 var(--font-code)}
.log{margin:0 0 10px;padding:14px 16px;background:#030503;border:1px solid rgba(171,194,127,.3);color:var(--formalin);font:13px/1.8 var(--font-code);white-space:pre-wrap}

/* ---- フッター ---- */
.ft{max-width:880px;margin:56px auto 0;padding:22px var(--gut) 44px;border-top:1px solid var(--line);font-size:12px;color:var(--bone-dim);text-align:center}
.ft p{margin:0 0 4px}
.ft a{color:var(--bone-dim)}

/* ================= 魚拓タグ（CPCが付けた札。暗い側） ================= */
.wrap>section.gy{padding:14px 18px 14px;background:#0a0c07;border:1px solid rgba(171,194,127,.35);border-left:4px solid var(--formalin)}
.gy-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(171,194,127,.3)}
.gy-no{font:700 14px/1.4 var(--font-code);letter-spacing:.06em;color:var(--formalin)}
.gy-state{padding:1px 8px;border:1px solid var(--line-2);font-size:11.5px;color:var(--bone-dim)}
.gy-meta{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:0;font-size:13px}
.gy-meta dt{font:11.5px/1.9 var(--font-code);color:var(--faint)}
.gy-meta dd{margin:0;word-break:break-all;color:var(--bone)}
.gy-meta a{color:var(--bone)}
.gy-meta dd.gy-diff{padding:2px 10px;background:rgba(184,17,29,.14);border-left:3px solid var(--red-hot);color:#ffb3b8;font-weight:700}
.gy-note{margin:10px 0 0;font-size:12px;color:var(--faint)}

/* 同じ元ページの魚拓（版）の切り替え。暗い側 */
.wrap>nav.gy-ver{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-8px 0 16px;padding:8px 18px;background:#0a0c07;border:1px solid rgba(171,194,127,.35);border-top:0;border-left:4px solid var(--formalin);font-size:12.5px}
.gy-ver-h{font:11.5px/1.9 var(--font-code);color:var(--faint);margin-right:4px}
.gy-ver a,.gy-ver span[aria-current]{padding:2px 10px;border:1px solid var(--line-2);color:var(--bone-dim);text-decoration:none;font-family:var(--font-code)}
.gy-ver a:hover{color:#fff;border-color:var(--bone)}
.gy-ver span[aria-current]{color:var(--formalin);border-color:var(--formalin)}

/* D:ch の目次は CPC 側の索引なので暗い側 */
.wrap>ul.toc{padding:8px 24px}
.toc li{padding:8px 0}

/* ================= 魚拓の中身（元サイトの見た目。明るい「写し」） ================= */
.paper,.thread,.blog,.sasa,.kuchi{margin:0 0 16px;box-shadow:0 0 0 1px rgba(235,230,218,.3),0 18px 50px rgba(0,0,0,.7)}
.paper a,.thread a,.blog a,.kuchi a{color:#0000ee}
.paper h2,.thread h2,.blog h2,.sasa h2,.kuchi h2{border-bottom:0}

/* 魚拓：ブログ（紙） */
.paper{background:#fff!important;color:#1d2a33;padding:26px 28px 22px!important;font-size:14px;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.paper-h{border-bottom:1px solid #d8d8d8;padding-bottom:8px;margin-bottom:14px}
.paper-site{font-weight:700;font-size:20px;margin:0;letter-spacing:.06em}
.paper-tag{margin:2px 0 0;font-size:11px;color:#777}
.paper-cat{font-size:11px;letter-spacing:.14em;color:#777;margin:0}
.paper-title{font-size:22px;line-height:1.4;margin:6px 0 4px;color:#1d2a33;border:0;padding:0;background:none;font-family:inherit;font-weight:700;letter-spacing:0}
.paper-by{font-size:12px;color:#777;margin:0 0 14px}
.paper h3{font-size:16px;margin:20px 0 6px;color:#1d2a33;border:0;border-left:4px solid #1d2a33;padding-left:10px}
.paper blockquote{margin:8px 0 8px 12px;padding-left:12px;border-left:3px solid #999;font-size:16px;color:#333}
.paper-links{border-top:1px solid #d8d8d8;margin-top:20px;padding-top:10px;font-size:13px}
.paper-links p{margin:0 0 4px;color:#777;font-size:11px;letter-spacing:.14em}
.paper-links ul{margin:0;padding-left:18px}
.paper-f{margin-top:18px;font-size:11px;color:#777;border-top:1px solid #d8d8d8;padding-top:8px}
.paper-review{border-top:6px solid #7cc53f!important}
.paper-note{background:#fbf8ee!important;font-family:"MS PMincho","ＭＳ Ｐ明朝","Yu Mincho","Hiragino Mincho ProN",serif;border-top:6px solid #b59b5a!important}
.paper-ps{margin-top:22px;padding:10px 14px;background:#fffbe6;border:1px dashed #b59b5a}
.paper-ps h3{margin-top:0}

/* 魚拓：D:ch */
.thread{background:#efefef!important;color:#111;padding:12px 14px 6px!important;font-family:"MS PGothic","ＭＳ Ｐゴシック","Hiragino Kaku Gothic ProN",sans-serif;font-size:13px;line-height:1.75;border:0!important}
.th-title{font:700 17px/1.4 "MS PGothic","ＭＳ Ｐゴシック",sans-serif;color:#cc0000;margin:0 0 2px;background:none;border:0;padding:0;letter-spacing:0}
.th-meta{font-size:11px;color:#666;margin:0 0 8px}
.res{border-top:1px solid #ccc;padding:6px 0}
.res-h{font-size:12px;color:#444;display:flex;gap:10px;flex-wrap:wrap}
.res-n{font-weight:700;color:#111}.res-name{color:#008000;font-weight:700}.res-id{font-family:"MS Gothic",monospace}
.res-b{font-size:13.5px;line-height:1.8;padding:2px 0 0 18px}
.res.real .res-b{background:#fff4cf;padding:6px 10px;margin-left:18px;border-left:3px solid #c9912b}
.res.empty{height:26px}

/* 魚拓：100億ブログ */
.blog{background:#fff!important;color:#222;padding:0 0 16px!important;font-size:14px;font-family:"MS PGothic","ＭＳ Ｐゴシック","Hiragino Kaku Gothic ProN",sans-serif;border:0!important}
.blog-h{background:#2a0a3a;color:#fff;padding:14px 18px}
.blog-site{margin:0;font:900 24px/1.2 "MS PGothic",sans-serif;letter-spacing:.02em}
.blog-tag{margin:4px 0 0;font-size:11px;color:#e2c8ff}
.blog-title{font:900 21px/1.4 "MS PGothic",sans-serif;color:#c0006a;margin:12px 18px 4px;border:0;padding:0;background:none;letter-spacing:0}
.blog-meta{margin:0 18px 12px;font-size:11.5px;color:#777}
.blog p,.blog ul,.blog h3{margin-left:18px;margin-right:18px}
.blog h3{color:#c0006a;border:0;border-left:5px solid #ffcc00;padding-left:10px}
.blog-fig{margin:12px 18px}
.blog-fig img{width:100%;display:block;border:3px ridge #999}
.blog-fig figcaption{font-size:11.5px;color:#666;margin-top:4px}
.pv{background:#ffcc00;color:#222;padding:0 6px;font-weight:700}
.yen{background:#eee;color:#666;padding:0 6px}
.ad{margin:8px 18px;border:2px dashed #ff8a00;background:#fff7e6;color:#8a4b00;padding:6px 10px;font-size:12px;text-align:center}
.ad span{display:block;font-size:10px;letter-spacing:.3em;color:#ff8a00}
.blog-ps{border-top:1px dotted #999;padding-top:6px;font-size:13px;color:#444}
.blog-f{margin:16px 18px 0;font-size:11px;color:#777;border-top:1px solid #ddd;padding-top:6px}
.blog-side{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 18px 0;padding-top:10px;border-top:4px solid #2a0a3a;font-size:12px}
.blog-side h4{margin:0 0 4px;font-size:12px;background:#2a0a3a;color:#fff;padding:2px 6px}
.blog-side p{margin:0}
.blog-side ol,.blog-side ul{margin:0;padding-left:18px}

/* 魚拓：ささなみ印刷（小さな印刷会社のサイト） */
.sasa{background:#fff!important;color:#243240;padding:0 0 16px!important;font-size:14.5px;line-height:1.85;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.sasa-h{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:16px 22px 10px;background:#f2f8fc;border-bottom:3px solid #2f7fb5}
.sasa-logo{margin:0;font:700 23px/1.2 "Yu Mincho","Hiragino Mincho ProN",serif;color:#1d5f8c;letter-spacing:.1em}
.sasa-logo small{display:block;margin-top:2px;font:11px/1.5 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#6a7f8f;letter-spacing:.04em}
.sasa-nav{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0;list-style:none;font-size:12.5px;color:#1d5f8c}
.sasa-body{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:26px;padding:18px 22px 0}
.sasa a{color:#1d5f8c}
.sasa p{margin:0 0 10px}
.sasa-blog{margin:0;font-size:12px;font-weight:700;color:#2f7fb5;letter-spacing:.1em}
.sasa-title{margin:2px 0 4px;padding:0;border:0;background:none;font:700 20px/1.5 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:0;color:#243240}
.sasa-meta{margin:0 0 12px!important;font-size:12px;color:#7a8a96}
.sasa h3{margin:20px 0 6px;padding:0 0 2px;border:0;border-bottom:1px dotted #9fc3dc;font-size:15.5px;color:#1d5f8c}
.sasa-fig{margin:8px 0 14px}
.sasa-fig img{display:block;width:100%;height:auto;border:1px solid #cfd8df}
.sasa-fig figcaption{margin-top:4px;font-size:12px;color:#6a7f8f}
.sasa-removed{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#eef1f3;border:1px dashed #b7c2ca;color:#8795a0;font-size:12.5px}
.sasa-fix{margin:18px 0 0!important;padding:8px 12px;background:#f5f7f9;border-left:3px solid #9fb3c2;font-size:12.5px;color:#56687a}
.sasa-side{font-size:12.5px;line-height:1.7}
.sasa-side h4{margin:0 0 6px;padding:3px 8px;background:#2f7fb5;color:#fff;font-size:12px;font-weight:700}
.sasa-side ul{margin:0 0 16px;padding:0;list-style:none}
.sasa-side li{padding:5px 0;border-bottom:1px dotted #c7d6e1}
.sasa-side li small{display:block;color:#7a8a96}
.sasa-f{margin:18px 22px 0;padding-top:8px;border-top:1px solid #d7e2ea;font-size:11px;color:#7a8a96}
.sasa-404{padding:30px 22px 6px;text-align:center}
.sasa-call{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;margin:14px 22px 0!important;padding:12px;background:#eaf4fb;border:1px solid #bcd7ea;font-size:13px;color:#1d5f8c}
.sasa-call .btnlike{display:inline-block;padding:4px 14px;background:#2f7fb5;color:#fff;font-weight:700;border-radius:3px}

/* 魚拓：元社員の口コミ帳 */
.kuchi{background:#f7f5f0!important;color:#2b2b2b;padding:0 0 16px!important;font-size:14px;line-height:1.85;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.kuchi-h{padding:12px 20px;background:#3d4a3e;color:#f0efe8}
.kuchi-logo{margin:0;font-size:18px;font-weight:700;letter-spacing:.06em}
.kuchi-logo small{margin-left:10px;font-size:11px;font-weight:400;letter-spacing:0;color:#cfd3c4}
.kuchi-co,.kuchi-rv{margin:12px 20px 0;padding:12px 16px;background:#fff;border:1px solid #ddd8cc}
.kuchi-co-name{margin:0;padding:0;border:0;background:none;font:700 18px/1.4 "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:0;color:#2b2b2b}
.kuchi-co-meta{margin:2px 0 0;font-size:12px;color:#777}
.kuchi-score{font-size:20px;font-weight:700;color:#b5651d}
.kuchi-rv-meta{margin:0 0 8px;font-size:12px;color:#777}
.kuchi-stars{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0 0 8px;padding:6px 10px;list-style:none;background:#faf8f2;font-size:12.5px;color:#555}
.kuchi-stars b{font-weight:400;color:#c9822b;letter-spacing:.04em}
.kuchi-rv h3{margin:12px 0 2px;padding:0 0 0 8px;border:0;border-left:3px solid #3d4a3e;font-size:13px;color:#3d4a3e}
.kuchi-rv p{margin:0 0 6px}
.kuchi-useful{margin:12px 0 0!important;font-size:12px;color:#777}
.kuchi-useful span{display:inline-block;margin-right:6px;padding:1px 10px;border:1px solid #ccc;border-radius:3px;background:#fafafa}
.kuchi-f{margin:12px 20px 0;font-size:11px;color:#888}

/* 魚拓：コメント欄（写しの中） */
.cmts{margin:22px 0 0;border-top:3px double #bbb;padding-top:8px;font-family:"MS PGothic","ＭＳ Ｐゴシック","Hiragino Kaku Gothic ProN",sans-serif}
.blog .cmts{margin-left:18px;margin-right:18px}
.cmts-h{font-size:14px;margin:0 0 6px;border:0;padding:0;color:#333}
.cm-list{list-style:none;margin:0;padding:0}
.cm{border-bottom:1px dotted #bbb;padding:6px 2px}
.cm-h{margin:0;font-size:11.5px;color:#777;display:flex;gap:12px;flex-wrap:wrap}
.cm-name{font-weight:700;color:#2a6b00}
.cm-b{margin:2px 0 0;font-size:13.5px;line-height:1.7;color:#222}
.cm-owner{background:#f4f7ff}
.cm-owner .cm-name{color:#0033aa}.cm-owner .cm-name::after{content:"（管理人）";font-weight:400;color:#777}
.cm-deleted .cm-b{color:#999;font-style:italic}
.cm-deleted .cm-name::before{content:"――"}
.cm-sys{border-bottom:0;margin-top:8px;padding:6px 10px;background:#eee;color:#666;font-size:12px;text-align:center}
.cmts-closed{font-size:11.5px;color:#888;margin:6px 0 0}

/* ================= レスポンシブ ================= */
@media (max-width:760px){
 .wrap>section,.wrap>ul,.wrap>p{padding:18px 16px}
 .wrap>ul.list,.wrap>ul.toc{padding:6px 16px}
 .spec .label{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gy-meta{grid-template-columns:1fr;gap:0}
 .gy-meta dd{margin-bottom:6px}
 .tbl td:last-child{white-space:normal}
 /* 表は横に流さず、1行ずつのカードに */
 .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
 .tbl tr:first-child{display:none}
 .tbl tr{padding:10px 0;border-bottom:1px solid var(--line)}
 .tbl td{padding:1px 0;border:0}
 .tbl tr.blank{display:none}
 .paper{padding:18px 14px!important}
 .sasa-h,.sasa-body{padding-left:14px;padding-right:14px}
 .sasa-body{grid-template-columns:1fr;gap:10px}
 .sasa-f,.sasa-call{margin-left:14px!important;margin-right:14px!important}
 .kuchi-co,.kuchi-rv,.kuchi-f{margin-left:12px;margin-right:12px}
 .wrap>nav.gy-ver{padding:8px 12px}
 .blog-side{grid-template-columns:1fr;margin-left:12px;margin-right:12px}
 .blog .cmts{margin-left:12px;margin-right:12px}
 .blog p,.blog ul,.blog h3,.blog-title,.blog-meta,.blog-fig,.ad,.blog-f{margin-left:12px;margin-right:12px}
}
@media (max-width:640px){
 .hd{height:52px}
 .hd-brand small{display:none}
 .hd-emblem{width:28px;height:28px}
 .hd-brand b{font-size:13px}
 .hd-nav{gap:0;font-size:12px}
 .hd-nav a{padding:10px 6px}
 .fbar{justify-content:flex-start;font-size:11px}
 .grid{grid-template-columns:1fr 1fr;gap:10px}
}
/* 狭い画面：ナビは折らない。縮むのはブランド名の側（最後は…で切る） */
.hd-nav{flex:none;white-space:nowrap}
.hd-brand>span{min-width:0}
.hd-brand b{overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){
 .hd{gap:8px}
 .hd-brand{gap:8px}
 .hd-brand b{font-size:12px;letter-spacing:.02em}
 .hd-nav{font-size:11.5px}
 .hd-nav a{padding:10px 4px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}