/* 俺メン『俺の授業料』購入者コンテンツ 共通ナビ・目次部品（2026-09-24 作り直し）
   目的: どのページからでも「どこに何があるか」「今どこにいるか」が分かること。
   ・p-gnav   … 全ページ共通の固定タブ（目次/ガイド/歩き方/東京/大阪/名古屋/特典）
   ・p-board / p-path … トップの目次ボードと「読む順」
   ・p-chidx / p-chbar / p-chpanel / p-chnext … ガイド2本の章インデックス・現在地バー・章一覧・次の章へ
   ・p-lindex / p-irow / p-filter / p-abbr … リスト3本の一覧表・絞り込み・略語シート
   既存の oremen-reading*.css の後に読み込む。クラスは p- 接頭辞で既存と衝突させない。JSが無くても p-chbar/p-filter/p-abbr 以外は全部機能する */
:root{--p-bg:#141516;--p-bg2:#1c1e1f;--p-bg3:#232527;--p-paper:#e8e2d6;--p-paper2:#bdb5a6;--p-dim:#8b857a;--p-red:#b3261e;--p-redt:#e5533f;--p-line:#3a3c3e;
  --p-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;--p-en:"Bebas Neue","Oswald",sans-serif;--p-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif}
html{scroll-padding-top:64px}
html:has(.p-chidx){scroll-padding-top:110px}

/* ---------- 共通タブ ---------- */
.p-gnav{position:sticky;top:0;z-index:60;background:rgba(16,17,18,.96);border-bottom:1px solid var(--p-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-gnav .p-gnav-in{display:flex;gap:2px;max-width:760px;margin:0 auto;padding:0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.p-gnav .p-gnav-in::-webkit-scrollbar{display:none}
.p-gnav .p-tab{flex:none;position:relative;display:flex;align-items:center;height:46px;padding:0 8px;color:var(--p-paper2);font-family:var(--p-sans);font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.p-gnav .p-tab:hover{color:var(--p-paper)}
.p-gnav .p-tab[aria-current="page"]{color:var(--p-paper)}
.p-gnav .p-tab[aria-current="page"]::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:3px;background:var(--p-redt)}
.p-gnav .p-tab.p-bonus{color:var(--p-redt)}
.reader-page .back{display:none}

/* ---------- トップ: 目次ボード ---------- */
.p-board{margin-top:26px}
.p-board .p-h{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-family:var(--p-serif);font-weight:800;font-size:22px;line-height:1.4;color:var(--p-paper)}
.p-board .p-h span{font-family:var(--p-en);font-weight:400;font-size:15px;letter-spacing:.24em;color:var(--p-redt)}
.p-board .p-sub{margin:0 0 14px;font-size:14px;color:var(--p-paper2)}
.p-board ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--p-line)}
.p-board li{border-bottom:1px solid var(--p-line)}
.p-board .p-brow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:1px 12px;padding:11px 4px;color:var(--p-paper);text-decoration:none}
.p-board .p-brow:hover{background:var(--p-bg2)}
.p-board .p-no{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--p-line);font-family:var(--p-en);font-size:23px;line-height:1;color:var(--p-paper)}
.p-board .p-t{font-family:var(--p-serif);font-weight:800;font-size:16.5px;line-height:1.35;min-width:0}
.p-board .p-m{grid-column:3;grid-row:1;font-family:var(--p-sans);font-size:12px;font-weight:700;color:var(--p-dim);white-space:nowrap}
.p-board .p-w{grid-column:2/4;font-size:12.5px;line-height:1.45;color:var(--p-paper2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-board .p-w b{color:var(--p-paper);font-weight:700}
.p-board .p-ar{grid-column:3;grid-row:1/3;width:9px;height:9px;border-top:2px solid var(--p-paper2);border-right:2px solid var(--p-paper2);transform:rotate(45deg)}
.p-board .p-sec{margin:18px 0 6px;font-family:var(--p-en);font-size:13px;letter-spacing:.26em;color:var(--p-dim)}
.p-board .p-isbonus .p-no{border-color:var(--p-redt);color:var(--p-redt);font-size:13px;letter-spacing:.06em}
.p-path{margin-top:22px;padding:16px 16px 14px;border:1px solid var(--p-line);border-left:3px solid var(--p-red);background:var(--p-bg2)}
.p-path .p-k{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--p-paper2)}
.p-path ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.p-path .p-step{display:grid;grid-template-columns:26px 1fr 10px;align-items:center;gap:10px;padding:10px 12px;background:var(--p-bg);border:1px solid var(--p-line);color:var(--p-paper);text-decoration:none;font-size:15px;font-weight:700;line-height:1.45}
.p-path .p-step i{font-style:normal;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--p-paper);color:var(--p-bg);font-family:var(--p-en);font-size:17px}
.p-path .p-step small{display:block;font-size:12.5px;font-weight:400;color:var(--p-paper2)}
.p-path .p-step::after{content:"";width:8px;height:8px;border-top:2px solid var(--p-paper2);border-right:2px solid var(--p-paper2);transform:rotate(45deg)}

/* ---------- ガイド: 章インデックス ---------- */
.p-chidx{margin:22px 0 8px}
.p-chidx .p-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font-size:13px;color:var(--p-paper2)}
.p-chidx .p-h b{font-family:var(--p-serif);font-weight:800;font-size:17px;color:var(--p-paper);margin-right:8px}
.p-chidx ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.p-chidx .p-ci{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;background:var(--p-bg2);border:1px solid var(--p-line);color:var(--p-paper);text-decoration:none;font-size:14px;font-weight:700;line-height:1.35}
.p-chidx .p-ci b{flex:none;font-family:var(--p-en);font-weight:400;font-size:22px;color:var(--p-paper2);line-height:1}
.p-chidx .p-ci:hover{border-color:var(--p-paper2)}
.p-chidx .p-ci.p-must::after{content:"まずここ";position:absolute;top:-8px;right:6px;padding:2px 6px;background:var(--p-paper);color:var(--p-bg);font-size:10.5px;font-weight:900;letter-spacing:.04em;line-height:1.4}
.p-chidx .p-ci.p-danger{border-color:rgba(229,83,63,.6)}
.p-chidx .p-ci.p-danger b{color:var(--p-redt)}
.p-chidx .p-ci.p-danger::after{background:var(--p-redt);color:#fff}
.p-chnext{display:grid;grid-template-columns:1fr 10px;align-items:center;gap:2px 12px;margin:22px 0 0;padding:13px 16px;border:1px solid var(--p-line);background:var(--p-bg);color:var(--p-paper);text-decoration:none}
.reader-page .p-chnext{text-decoration:none}
.p-chnext small{font-size:12px;letter-spacing:.14em;color:var(--p-dim)}
.p-chnext span{grid-column:1;font-weight:700;font-size:15px;line-height:1.45}
.p-chnext span b{font-family:var(--p-en);font-weight:400;font-size:19px;color:var(--p-redt);margin-right:8px}
.p-chnext::after{content:"";grid-column:2;grid-row:1/3;width:8px;height:8px;border-top:2px solid var(--p-paper2);border-right:2px solid var(--p-paper2);transform:rotate(135deg)}
/* 現在地バー（JS） */
.p-chbar{position:fixed;top:47px;left:0;right:0;z-index:55;display:none;background:rgba(20,21,22,.97);border-bottom:1px solid var(--p-line)}
/* ↑ sticky（流れの中）だと出現時に本文が44px押し下がり、着地した章が1つ前と判定される＋見た目もガクッとずれるので fixed */
.p-chbar.on{display:block}
.p-chbar button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;max-width:760px;margin:0 auto;padding:9px 16px 10px;background:none;border:0;color:var(--p-paper);font:inherit;text-align:left;cursor:pointer}
.p-chbar .p-n{font-family:var(--p-en);font-size:20px;line-height:1;color:var(--p-redt)}
.p-chbar .p-n small{font-size:14px;color:var(--p-dim);margin-left:2px}
.p-chbar .p-tt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700}
.p-chbar .p-all{font-size:12.5px;font-weight:700;color:var(--p-paper2);display:flex;align-items:center;gap:6px}
.p-chbar .p-all::after{content:"";width:7px;height:7px;border-right:2px solid var(--p-paper2);border-bottom:2px solid var(--p-paper2);transform:rotate(45deg);margin-top:-4px}
.p-chbar.open .p-all::after{transform:rotate(-135deg);margin-top:3px}
.p-chbar .p-prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--p-redt);width:0;transition:width .2s}
.p-chpanel{display:none;max-width:760px;margin:0 auto;padding:4px 12px 12px;max-height:60vh;overflow:auto}
.p-chbar.open .p-chpanel{display:block}
.p-chpanel a{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 6px;border-top:1px solid var(--p-line);color:var(--p-paper2);text-decoration:none;font-size:14px;line-height:1.5}
.p-chpanel a b{font-family:var(--p-en);font-weight:400;font-size:18px;color:var(--p-dim)}
.p-chpanel a.cur{color:var(--p-paper);font-weight:700}
.p-chpanel a.cur b{color:var(--p-redt)}

/* ---------- リスト: 一覧表・絞り込み ---------- */
.p-lindex{margin-top:18px;padding:16px 14px 12px;border:1px solid var(--p-line);background:var(--p-bg2)}
.p-lindex .p-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px}
.p-lindex .p-h b{font-family:var(--p-serif);font-weight:800;font-size:19px;color:var(--p-paper)}
.p-lindex .p-h small{font-size:12.5px;color:var(--p-paper2)}
.p-filter{display:none;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.js-p .p-filter{display:flex}
.p-filter button{padding:7px 11px;background:var(--p-bg);border:1px solid var(--p-line);color:var(--p-paper2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;line-height:1.2}
.p-filter button b{font-family:var(--p-en);font-weight:400;font-size:15px;margin-left:5px;color:var(--p-dim)}
.p-filter button[aria-pressed="true"]{background:var(--p-paper);border-color:var(--p-paper);color:var(--p-bg)}
.p-filter button[aria-pressed="true"] b{color:var(--p-bg)}
.p-lindex ol{list-style:none;margin:6px 0 0;padding:0}
.p-lindex li[hidden]{display:none}
.p-irow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--p-line);color:var(--p-paper);text-decoration:none}
.reader-page .p-irow{text-decoration:none}
.p-irow:hover{background:var(--p-bg3)}
.p-irow .p-no{font-family:var(--p-en);font-size:19px;line-height:1;color:var(--p-dim);text-align:center}
.p-irow .p-nm{min-width:0;font-weight:700;font-size:15px;line-height:1.35}
.p-irow .p-nm small{display:block;font-weight:400;font-size:12px;color:var(--p-paper2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.p-irow .p-rc{display:flex;align-items:baseline;gap:4px;white-space:nowrap;padding:4px 8px;border:1px solid var(--p-line);line-height:1}
.p-irow .p-rc i{font-style:normal;font-size:11px;font-weight:700;color:var(--p-paper2)}
.p-irow .p-rc b{font-family:var(--p-en);font-weight:400;font-size:17px;color:var(--p-paper)}
.p-irow .p-rc.n-free{border-color:var(--p-paper2)}
.p-irow .p-rc.n-paid i{color:var(--p-redt)}
.p-irow .p-rc.n-paid{border-color:rgba(229,83,63,.6)}
.p-irow .p-rc.n-wait b{color:var(--p-paper2)}
.p-lindex .p-cnt{display:none;margin:8px 0 0;font-size:12.5px;color:var(--p-paper2)}
.js-p .p-lindex .p-cnt{display:block}
.p-helps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;align-items:start}
.p-helps>details{margin:0!important;padding:0!important;border:1px solid var(--p-line)!important;background:var(--p-bg)!important;border-radius:0!important;box-shadow:none!important}
.p-helps>details>summary{padding:12px 14px!important;margin:0!important;font-family:var(--p-sans)!important;font-size:14px!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.3!important;white-space:nowrap}
.p-helps>details>:not(summary){margin-left:14px!important;margin-right:14px!important}
.p-helps>details>:last-child:not(summary){margin-bottom:14px!important}
.p-helps>details>h2{display:none}
.p-helps>details[open]{grid-column:1/-1}
.reader-list .tcard[hidden]{display:none}
/* 略語シート（JS） */
.p-abbr-btn{position:fixed;left:14px;bottom:14px;z-index:58;display:none;padding:12px 14px;background:var(--p-bg);border:1px solid var(--p-paper2);color:var(--p-paper);font:700 13px/1 var(--p-sans);letter-spacing:.06em;cursor:pointer}
.js-p .p-abbr-btn{display:block}
@media(min-width:960px){.js-p .p-abbr-btn{display:none}}
.p-abbr-sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:70vh;overflow:auto;padding:16px 16px calc(18px + env(safe-area-inset-bottom));background:#111213;border-top:1px solid var(--p-paper2);box-shadow:0 -18px 40px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.p-abbr-sheet.on{transform:none}
.p-abbr-sheet .p-sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;color:var(--p-paper)}
.p-abbr-sheet .p-sh button{background:none;border:1px solid var(--p-line);color:var(--p-paper2);font:inherit;font-size:13px;padding:6px 10px;cursor:pointer}
.p-abbr-sheet .gloss{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.p-abbr-sheet .gloss div{padding:8px 10px;background:var(--p-bg2);border:1px solid var(--p-line);font-size:13px;color:var(--p-paper)}
.p-abbr-sheet .gloss b{display:inline-block;min-width:44px;margin-right:6px;font-family:var(--p-en);font-weight:400;font-size:16px;letter-spacing:.04em;color:var(--p-paper2)}
@media(prefers-reduced-motion:reduce){.p-abbr-sheet,.p-chbar .p-prog{transition:none}}

/* トップ: 冒頭ブロックを詰めて、目次ボードを1画面目に入れる */
.reader-hub .mast{padding:18px 18px 16px!important}
.reader-hub .mast .mast-top{margin:0 0 10px!important}
.reader-hub .mast .mark{width:30px!important;height:30px!important}
.reader-hub .mast .mark img{width:30px!important;height:30px!important}
.reader-hub .mast .brand{font-size:15px!important}
.reader-hub .mast .ptitle{font-size:clamp(30px,9vw,38px)!important;margin:4px 0 0!important;line-height:1.25!important}
.reader-hub .mast .ptitle-sub{margin:6px 0 0!important;font-size:14px!important;line-height:1.7!important}
.reader-hub .mast .intro-detail{margin-top:8px!important}
.reader-hub .mast .meta{margin-top:10px!important;gap:6px!important}
.reader-hub .mast .meta span{padding:5px 9px!important;font-size:12px!important}
.reader-hub .mast .meta{display:none!important}
.reader-hub .mast .mast-top{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center!important;gap:10px}
.reader-hub .mast .status{margin:0!important;padding:4px 8px!important;font-size:11.5px!important;white-space:nowrap}
.p-board .p-sub{margin-bottom:10px}

/* ---------- 挿絵（予告LPと同じ絵を商品側にも置く。2026-09-25） ---------- */
.p-fig{max-width:520px;margin:34px auto 0;padding:0}
.p-fig .p-fk{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-family:var(--p-serif);font-weight:800;font-size:20px;line-height:1.4;color:var(--p-paper)}
.p-fig .p-fk span{font-family:var(--p-en);font-weight:400;font-size:15px;letter-spacing:.24em;color:var(--p-redt)}
.p-fig img{display:block;width:100%;height:auto;border:1px solid var(--p-line)}
.p-fig .p-fc{margin:10px 0 0;font-size:14px;line-height:1.8;color:var(--p-paper2)}
.p-fig.p-fig-in{margin:14px auto 18px}

/* ---------- 表紙（ガイド2本・リスト3本の頭。2026-09-26）
   画像は文字なし（素材/商品/cover-*.png → product-v2/build-covers.mjs）。見出しはHTMLで重ね、スマホでも読める大きさにする。
   スマホは画面幅いっぱいの縦長（4:5）、PCは本文幅の横長（16:9）。--cx で横の切り抜き位置を画像ごとに寄せる */
.reader-page .mast.p-hascover{padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
.reader-page .mast.p-hascover .intro-detail{margin-top:0}
.p-cover{position:relative;overflow:hidden;margin:-24px 0 16px;aspect-ratio:16/9;background:#0c0d0e;isolation:isolate}
.p-cover picture{position:absolute;inset:0}
.p-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--cx,50%) 50%}
.p-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(20,21,22,.5) 0,rgba(20,21,22,0) 16%,rgba(20,21,22,0) 42%,rgba(20,21,22,.8) 72%,#141516 100%),
  radial-gradient(130% 90% at 50% 36%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}
.p-cover .p-cv{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 18px}
.p-cover .p-ck{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--p-en);font-size:16px;letter-spacing:.24em;line-height:1;color:var(--p-redt)}
.p-cover .p-ck::before{content:"";width:24px;height:2px;background:currentColor}
.p-cover .p-ck span{font-family:var(--p-sans);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--p-paper2)}
.p-cover .p-cl{margin:0;font-family:var(--p-serif);font-weight:800;font-size:clamp(28px,8.2vw,46px);line-height:1.34;letter-spacing:.02em;color:#f4efe6;text-shadow:0 2px 20px rgba(0,0,0,.75)}
.reader-page .p-cover .p-cl em{font-style:normal;font-weight:800;color:var(--p-redt);border:0;padding:0}
.p-cover .p-cl .p-hang{margin-left:-.5em}   /* 行頭の「 の左の空きを詰める（行頭がカッコで字下げして見えるのを防ぐ） */
.p-cover .p-cl .nw{white-space:nowrap}
.reader-page .p-cover h1.p-ct{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:14px 0 0;padding:11px 0 0;border-top:1px solid rgba(232,226,214,.28);font-family:var(--p-sans);font-weight:700;font-size:14.5px;line-height:1.5;letter-spacing:.06em;color:var(--p-paper)}
.reader-page .p-cover h1.p-ct small{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--p-paper2)}
@media(max-width:600px){
  .p-cover{margin:-18px calc(50% - 50vw) 14px;aspect-ratio:4/5;max-height:82vh;min-height:420px}
}
@media(prefers-reduced-motion:no-preference){
  .p-cover img{animation:p-kb 2.6s cubic-bezier(.2,.7,.2,1) both}
  .p-cover .p-cv{animation:p-up .9s .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes p-kb{from{transform:scale(1.08);filter:brightness(.55)}to{transform:none;filter:none}}
@keyframes p-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* トップ目次: 行頭をサムネに（番号はサムネの左下に重ねる） */
.p-board .p-brow{grid-template-columns:48px 1fr auto;padding-top:9px;padding-bottom:9px}
.p-board .p-no.p-th{position:relative;display:block;width:48px;height:48px;overflow:hidden;border:0;padding:0;background:#0c0d0e}
.p-board .p-th img{display:block;width:100%;height:100%;object-fit:cover}
.p-board .p-th b{position:absolute;left:0;bottom:0;padding:3px 4px 2px;background:rgba(12,13,14,.85);font-family:var(--p-en);font-weight:400;font-size:14px;line-height:1;letter-spacing:.04em;color:var(--p-paper)}
.p-board .p-isbonus .p-th b{padding:2px 4px;background:var(--p-redt);color:#fff;font-family:var(--p-sans);font-weight:900;font-size:10.5px;letter-spacing:.04em}