@import url("oremen-scene.css");
/* 俺メン 購入後6ページ 帝愛ノワール上書き層（2026-09-16〜）
   読み込み順: 各ページのインライン<style> → oremen-reading.css → 本ファイル。
   HTML構造・本文・IDは変えず、CSSだけで白基調→黒×古紙×赤一点へ反転する。
   トークン・書体・角丸ゼロ・粒子ノイズは oremen-noir.css（公開LP）と同じ。本文だけ Noto Sans JP 400。 */

/* ---------- 1. トークン（ノワール値＋旧トークンの再定義） ---------- */
:root{
  --bg:#141516;--bg2:#1c1e1f;--bg3:#232527;
  --paper:#e8e2d6;--paper-2:#bdb5a6;--dim:#8b857a;
  --red:#b3261e;--red-2:#8f1d17;
  --line:#3a3c3e;--line-2:#2a2c2e;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --en:"Bebas Neue","Shippori Mincho","Oswald",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --p:0;
  /* 旧（白基調）トークンをノワールへ差し替え。インラインCSSの参照先をまとめて反転する */
  --ground:var(--bg);--surface:var(--bg2);--surface-2:var(--bg3);--sunken:var(--bg3);
  --ink:var(--paper);--muted:var(--paper-2);--faint:var(--dim);
  --accent:var(--paper);--accent-2:var(--paper);--accent-soft:var(--bg3);
  --good:var(--paper-2);--good-soft:var(--bg3);
  --warn:var(--red);--warn-soft:var(--bg3);
  --slate:var(--paper-2);--slate-soft:var(--bg3);
  --shadow:none;--shadow-hover:none;
}

/* ---------- 2. 地・本文・共通 ---------- */
.reader-page{margin:0;background:var(--bg);color:var(--paper);
  font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.reader-page ::selection{background:var(--paper);color:var(--bg)}
/* .grain は oremen-scene.css（@import）に集約 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
.reader-page a{color:var(--paper);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.reader-page a:hover{color:var(--red)}
.reader-page a.card,.reader-page .card,.reader-page .route-grid>a,.reader-page .region-route a,.reader-page .quick-route a,.reader-page .toc a,
.reader-page .name-index a,.reader-page .back,.reader-page .totop,.reader-page .skip-link{text-decoration:none}
.reader-page a.card:hover{color:inherit}
.reader-page p{color:var(--paper)}
.reader-page .muted,.reader-page p.muted{color:var(--paper-2)}
.reader-page strong,.reader-page b{color:var(--paper)}
.reader-page em{font-style:normal;font-weight:700;background:none;border-bottom:1px solid var(--paper-2);padding:0}
.reader-page h1,.reader-page h2,.reader-page h3,.reader-page h4,.reader-page h5{font-family:var(--serif);color:var(--paper);letter-spacing:.02em}
.reader-page h1{font-weight:800}
.reader-page h2{font-weight:800}
.reader-page h3{font-weight:700}
.reader-page h1 .em,.reader-page .ptitle .em{background:none;color:var(--paper);-webkit-text-fill-color:currentColor}
.reader-page .skip-link{background:var(--paper);color:var(--bg);border:1px solid var(--bg)}
.reader-page a:focus-visible,.reader-page summary:focus-visible,.reader-page button:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.reader-page .en{font-family:var(--en);letter-spacing:.08em}

/* 英数ラベル・数字は Bebas Neue */
.reader-page .kicker,.reader-page .chtag,.reader-page .tag,.reader-page .mono,.reader-page h2 .n,.reader-page h2 .num,
.reader-page .tno,.reader-page .count b,.reader-page .card::before,.reader-page .toc a::before,.reader-page ol.steps li::before,
.reader-page .region-route b,.reader-page .quick-route b,.reader-page .mini-flow li::before,.reader-page .clock .big,
.reader-page .name-index a span,.reader-page footer{font-family:var(--en);font-weight:400;letter-spacing:.1em}
.reader-page .kicker,.reader-page .chtag,.reader-page .tag{font-size:13px;letter-spacing:.24em;color:var(--paper-2);text-transform:uppercase;word-break:normal;overflow-wrap:normal}

/* 面（カード・表・box）: --bg2 に 1px 罫線、角丸ゼロ、影なし */
.reader-page .mast,.reader-page .toc,.reader-page section.ch,.reader-page .ch,.reader-page .card,.reader-page .tcard,
.reader-page .legend,.reader-page .abbr,.reader-page .name-index,.reader-page .box,.reader-page .clock,.reader-page .back,
.reader-page .route-grid>a,.reader-page .region-route,.reader-page .region-route a,.reader-page .quick-route a,
.reader-page .mini-flow li,.reader-page .gloss div,.reader-page .cmp .col,.reader-page .danger-list .d,
.reader-page .tno,.reader-page .chip,.reader-page .status,.reader-page .meta span,.reader-page .count,.reader-page .reach,
.reader-page .reach-k,.reader-page .tshop .area,.reader-page .tsummary,.reader-page .name-index a,.reader-page .totop,
.reader-page .mark,.reader-page .card .go,.reader-hub .note,.reader-page .toc a,.reader-page ol.steps li::before,.reader-page h2 .n{border-radius:0;box-shadow:none}
.reader-page .mast{background:var(--bg);border:1px solid var(--paper-2);overflow:visible}
.reader-page .mast::before{display:none}
.reader-page .toc,.reader-page section.ch,.reader-page .ch,.reader-page .card,.reader-page .tcard,.reader-page .legend,.reader-page .abbr,.reader-page .name-index{background:var(--bg2);border:1px solid var(--line)}

/* details summary: lp の details.noir summary と同じ（右端に赤い＋／－） */
.reader-page details summary{cursor:pointer;padding:16px 4px;font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.8;
  color:var(--paper-2);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px}
.reader-page details summary::-webkit-details-marker{display:none}
.reader-page details summary::after{content:"＋";font-family:var(--en);font-size:18px;color:var(--red);flex:none;letter-spacing:0}
.reader-page details[open] summary::after{content:"－"}
.reader-page details summary:hover{color:var(--paper)}
.reader-page .reader-detail{border-top:1px solid var(--line)}
.reader-page .chapter-takeaway{font-family:var(--serif);color:var(--paper)!important}

/* 表 */
.reader-page table{border-collapse:collapse;font-family:var(--sans)}
.reader-page th,.reader-page td{border:1px solid var(--line);color:var(--paper);font-family:var(--sans)}
.reader-page th{background:var(--bg3);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--paper-2)}
.reader-page td:last-child,.reader-page .scan-table td:last-child{font-family:var(--sans);color:var(--paper);font-weight:700}

/* 箇条書き: 丸ドット→四角 */
.reader-page ul li{color:var(--paper)}
.reader-page ul li::before{background:var(--paper-2);border-radius:0;width:6px;height:6px;top:12px}
.reader-page ol.steps li::before{background:var(--paper);color:var(--bg);border:0;font-size:15px;letter-spacing:0;width:26px;height:26px}
.reader-page .box ul li::before{background:var(--paper-2)}

/* box / cmp / gloss / danger */
.reader-page .box{background:var(--bg3);border:1px solid var(--line);color:var(--paper);font-size:14px}
.reader-page .box .bt{font-family:var(--serif);color:var(--paper)}
.reader-page .box.tip .bt,.reader-page .box.note .bt{color:var(--paper)}
.reader-page .box.warn{border-left:2px solid var(--red)}
.reader-page .box.warn .bt{color:var(--paper);display:block;width:fit-content;background:var(--red);padding:1px 8px;margin-bottom:8px}
.reader-page .cmp .col{background:var(--bg3);border:1px solid var(--line);color:var(--paper)}
.reader-page .cmp .bad{border-left:2px solid var(--red)}
.reader-page .cmp .h{font-family:var(--serif);color:var(--paper)}
.reader-page .cmp .bad .h,.reader-page .cmp .good .h{color:var(--paper)}
.reader-page .gloss div{background:var(--bg3);border:1px solid var(--line);color:var(--paper)}
.reader-page .gloss b{font-family:var(--sans);color:var(--paper);font-weight:700}
.reader-page .danger-list .d{background:var(--bg3);border:1px solid var(--line);border-left:2px solid var(--red)}
.reader-page .danger-list .d .nm{font-family:var(--serif);color:var(--paper)}
.reader-page .danger-list .d .ds{display:inline-block;background:var(--red);color:var(--paper);font-size:12px;letter-spacing:.06em;padding:1px 8px;margin-top:8px}
.reader-page .disc{color:var(--dim);border-top:1px dashed var(--line);font-size:12px}
.reader-page .clock{background:var(--bg3);border:1px solid var(--line)}
.reader-page .clock .big{color:var(--paper);font-size:clamp(28px,6vw,36px);font-weight:400}
.reader-page .clock .cap{color:var(--paper-2)}
.reader-page .mini-flow li{background:var(--bg3);border:1px solid var(--line);color:var(--paper)}
.reader-page .mini-flow li::before{color:var(--paper);font-size:28px;font-weight:400}

/* 章（guide / tokyo-walk） */
.reader-page .back{display:inline-flex;background:transparent;border:1px solid var(--line);color:var(--paper-2);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-decoration:none}
.reader-page .back:hover{color:var(--paper);border-color:var(--paper-2)}
.reader-page .toc h4,.reader-page .legend h4,.reader-page .abbr summary,.reader-page .name-index summary{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--paper)}
.reader-page .toc a{color:var(--paper);text-decoration:none;font-family:var(--sans);font-weight:400}
.reader-page .toc a:hover{background:var(--bg3);color:var(--paper)}
.reader-page .toc a::before{color:var(--paper-2);font-size:15px;min-width:26px}
.reader-page .toc a.danger::before{color:var(--paper);background:var(--red);padding:0 6px;text-align:center}
.reader-page .toc a.danger{color:var(--paper)}
.reader-page section.ch,.reader-page .ch{scroll-margin-top:14px}
.reader-page h2 .num{font-size:1.1em;color:var(--red);letter-spacing:.06em;line-height:1}
.reader-page .reader-guide h1{font-weight:800}
.reader-guide #c7 .chtag[style]{color:var(--paper)!important;display:inline-block;background:var(--red);padding:2px 8px;letter-spacing:.2em}
.reader-page .chapter-body h3{font-family:var(--serif)}

/* mast 内（guide / list） */
.reader-page .mast .lead,.reader-page .lede,.reader-page .mast .lead b,.reader-page .lede b{color:var(--paper)}
.reader-page .mast .lead,.reader-page .lede{color:var(--paper-2)}
.reader-page .intro-detail{margin-top:18px}
.reader-page .titlephrase{white-space:nowrap}

/* 目次ページ（hub） */
.reader-hub .mark{width:64px;height:64px;background:transparent;border:1px solid var(--paper-2)}
.reader-hub .mark img{filter:grayscale(1) contrast(1.2)}
.reader-hub .brand{font-family:var(--serif);font-weight:800;font-size:clamp(30px,6vw,44px);letter-spacing:.06em;color:var(--paper)}
.reader-hub .brand small{font-family:var(--en);font-weight:400;font-size:12px;letter-spacing:.3em;color:var(--dim);margin-top:.5em}
.reader-hub .status{background:transparent;border:1px solid var(--paper-2);color:var(--paper-2);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;padding:6px 12px}
.reader-hub .ptitle{font-family:var(--serif);font-weight:800;letter-spacing:.02em}
.reader-hub .ptitle-sub{color:var(--paper-2);font-weight:400;font-size:14px}
.reader-hub .lede b{color:var(--paper)}
.reader-hub .meta{color:var(--dim)}
.reader-hub .meta span{background:transparent;border:1px solid var(--line);color:var(--paper-2);font-family:var(--sans);font-size:12px;letter-spacing:.08em}
.reader-hub .first-step{color:var(--paper);font-weight:400;border-left:2px solid var(--red);padding-left:12px}
.reader-hub h2{font-family:var(--serif);font-weight:800;gap:14px}
.reader-hub h2 .n{background:transparent;padding:0;font-size:15px;letter-spacing:.24em;color:var(--red)}
.reader-hub .sub{color:var(--paper-2)}
.reader-hub .card{background:var(--bg2);border:1px solid var(--line);transition:border-color .15s}
.reader-hub .card::before{color:var(--paper-2);font-weight:400;font-size:26px}
.reader-hub .card.live{background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--red)}
.reader-hub .card.live::before{color:var(--paper)}
.reader-hub a.card.live:hover{transform:none;border-color:var(--paper-2);border-left-color:var(--red);box-shadow:none}
.reader-hub .card h3{font-family:var(--serif);font-weight:700;color:var(--paper)}
.reader-hub .card p{color:var(--paper-2)}
.reader-hub .card p b{color:var(--paper)}
.reader-hub .chip{font-family:var(--sans);font-size:12px;letter-spacing:.08em;padding:3px 10px}
.reader-hub .chip.ready{color:var(--paper-2);background:transparent;border:1px solid var(--paper-2);box-shadow:none}
.reader-hub .chip.prep{color:var(--dim);background:transparent;border:1px solid var(--dim)}
.reader-hub .card .go{color:var(--paper);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.08em}
.reader-hub .card.live .go{background:transparent;border:1px solid var(--paper-2);padding:6px 14px}
.reader-hub a.card.live:hover .go{border-color:var(--paper)}
.reader-hub .card.soon .go{color:var(--dim);border-color:var(--dim)}
.reader-hub .note{background:var(--bg2);border:1px solid var(--line);border-left:2px solid var(--red)}
.reader-hub .note h4{font-family:var(--serif);color:var(--paper);letter-spacing:.1em}
.reader-hub .note li{color:var(--paper-2)}
.reader-hub .note li b{color:var(--paper)}

/* route / region / quick（hub・list の導線） */
.reader-page .route-grid>a,.reader-page .region-route{background:var(--bg2);border:1px solid var(--line);color:var(--paper);text-decoration:none}
.reader-page .route-grid>a:hover{border-color:var(--paper-2);color:var(--paper)}
.reader-page .route-grid span{color:var(--paper-2);font-size:12px;letter-spacing:.1em}
.reader-page .route-grid strong,.reader-page .next-read strong{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.6;color:var(--paper)}
.reader-page .route-grid small,.reader-page .next-read small{color:var(--paper-2);font-size:13px}
.reader-page .region-route a{background:transparent;border:1px solid var(--line);color:var(--paper);text-decoration:none}
.reader-page .region-route a:hover{border-color:var(--paper-2)}
.reader-page .region-route b{font-weight:400;font-size:40px;line-height:1.3;color:var(--paper)}
.reader-page .quick-route a{background:var(--bg2);border:1px solid var(--line);color:var(--paper);text-decoration:none}
.reader-page .quick-route a:hover{border-color:var(--paper-2)}
.reader-page .quick-route b{font-weight:400;font-size:30px;color:var(--paper-2);line-height:1.4}

/* リスト3本（tokyo30 / osaka10 / nagoya10） */
.reader-list .count{background:transparent;border:1px solid var(--line);color:var(--paper-2);font-family:var(--sans);font-size:13px;letter-spacing:.1em}
.reader-list .count b{font-size:30px;line-height:1;color:var(--paper);letter-spacing:.04em}
.reader-list .order-note{color:var(--paper-2)}
.reader-list .legend .li{color:var(--paper-2);font-size:12px}
.reader-list .legend .li a,.reader-list .abbr .note a{color:var(--paper);font-weight:700}
.reader-list .legend .note,.reader-list .abbr .note{color:var(--paper-2);font-size:12px}
.reader-list .name-index h5{font-family:var(--serif);color:var(--paper-2);letter-spacing:.1em}
.reader-list .name-index a{background:var(--bg3);color:var(--paper);text-decoration:none;font-family:var(--sans);border:1px solid transparent}
.reader-list .name-index a:hover{border-color:var(--paper-2)}
.reader-list .name-index a span{color:var(--paper-2);font-size:14px}
.reader-list .tcard{background:var(--bg2);border:1px solid var(--line);scroll-margin-top:20px}
.reader-list .tno{background:transparent;border:1px solid var(--line);color:var(--paper);font-size:26px;padding:8px 0;min-width:44px;line-height:1}
.reader-list .tname h3{font-family:var(--serif);font-weight:700;color:var(--paper)}
.reader-list .tshop{color:var(--paper-2)}
.reader-list .tshop .area{background:transparent;border:1px solid var(--line);color:var(--paper-2);font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.06em}
/* 到達点チップ3種は色相でなく「塗り／枠／薄枠」で区別 */
.reader-page .chip{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.04em;padding:3px 10px;line-height:1.7}
.reader-page .chip.n-good{background:var(--paper);color:var(--bg);border:1px solid var(--paper)}
.reader-page .chip.n-accent{background:transparent;color:var(--paper);border:1px solid var(--paper)}
.reader-page .chip.n-neutral{background:transparent;color:var(--paper-2);border:1px solid var(--dim)}
.reader-list .reach,.reader-list .reach.n-good,.reader-list .reach.n-accent,.reader-list .reach.n-neutral{background:transparent;border:1px solid var(--line)}
.reader-list .reach-k{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;background:transparent;border:1px solid var(--line);color:var(--paper-2);padding:2px 8px}
.reader-list .reach.n-good .reach-k{background:var(--paper);color:var(--bg);border-color:var(--paper)}
.reader-list .reach.n-accent .reach-k{background:transparent;color:var(--paper);border-color:var(--paper)}
.reader-list .reach.n-neutral .reach-k{background:transparent;color:var(--paper-2);border-color:var(--dim)}
.reader-list .reach-v{font-family:var(--sans);font-weight:700;color:var(--paper)}
.reader-list .tsummary{background:transparent;border-left:2px solid var(--paper-2);font-family:var(--serif);font-weight:700;font-size:16px;color:var(--paper);padding:6px 0 6px 14px}
.reader-list .row{border-top:1px solid var(--line)}
.reader-list .row .k{font-family:var(--sans);color:var(--paper-2);font-size:13px;letter-spacing:.06em}
.reader-list .row .v{color:var(--paper)}
.reader-list .tfoot{border-top:1px dashed var(--line)}
.reader-list .tfoot .prof{font-family:var(--sans);color:var(--paper);text-decoration:underline;text-underline-offset:4px;background:transparent;border-radius:0;padding:0}
.reader-list .tfoot .prof:hover{color:var(--red)}
.reader-list .tfoot .prof .dom{display:inline-block;font-family:var(--sans);font-weight:400;color:var(--dim);font-size:12px}
.reader-list .totop{background:var(--paper);color:var(--bg);border:1px solid var(--paper);font-family:var(--sans);font-weight:700;font-size:13px;text-decoration:none}
.reader-list .totop:hover{background:var(--paper-2);color:var(--bg)}

/* footer */
.reader-page footer{border-top:1px solid var(--line);color:var(--dim);font-size:13px;letter-spacing:.14em}

/* ---------- 3. hub 冒頭のスポットライト: 共通 .scene（oremen-scene.css）を使用。hub固有の余白だけ下の @media に残す ---------- */

/* ---------- 4. モバイル ---------- */
@media(max-width:600px){
  .reader-hub .scene{margin:0 -16px 14px}
  .reader-hub .mark{width:56px;height:56px}
  .reader-page .route-grid strong{font-size:19px}
  .reader-page .region-route b{font-size:34px}
  .reader-list .tno{font-size:22px;min-width:38px}
}

/* ---------- 5. 文字サイズ底上げ（2026-09-16 hashimoto「字小さくない？」） ---------- */
.reader-page .chapter-body p,.reader-page .chapter-body li{font-size:16.5px;line-height:1.95}
.reader-page .chapter-body .box{font-size:15.5px}
.reader-page .chapter-takeaway{font-size:19px!important}
.reader-page details summary{font-size:16px}
.reader-page .lead,.reader-page .lede,.reader-page .ptitle-sub{font-size:16.5px}
.reader-page .route-grid span,.reader-page .quick-route a,.reader-page .toc a,.reader-page .card p,.reader-page .note li{font-size:15.5px}
.reader-list .tsummary{font-size:17px}
.reader-list .row .v{font-size:16.5px}.reader-list .row .k{font-size:14px}
.reader-list .reach-v{font-size:16.5px}
.reader-list .legend .note,.reader-list .legend .li,.reader-list .gloss div{font-size:14.5px}
.reader-list .chip{font-size:13px}
.reader-page .scan-table table{font-size:16px}