/* カテゴリ一覧ページ（pachinko/・slot/・kyoshitsu/・column/）の共通スタイル。記事ページの article-style.css とは併用しない */
:root{
  --bg:#f5f7fa;--panel:#ffffff;
  --border:#e2e8f0;--border2:#cbd5e1;
  --accent:#1a56db;--text:#1e293b;
  --muted:#64748b;--muted2:#94a3b8;
  --header-bg:#0f2057;
  --tag-blue-bg:#eff6ff;--tag-blue:#1d4ed8;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --shadow-hover:0 8px 24px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans JP',sans-serif;min-height:100vh;font-size:14px}
.header{background:var(--header-bg)}
.header-inner{max-width:1040px;margin:0 auto;padding:28px 24px}
.breadcrumb{font-size:11px;margin-bottom:14px}
.breadcrumb a{color:rgba(255,255,255,0.5);text-decoration:none}
.breadcrumb a:hover{color:rgba(255,255,255,0.8)}
.breadcrumb span{color:rgba(255,255,255,0.3);margin:0 6px}
.header-label{display:inline-block;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.8);font-size:10px;letter-spacing:2px;padding:3px 10px;border-radius:20px;margin-bottom:12px}
h1.page-title{font-family:'Noto Serif JP',serif;font-size:24px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:14px}
.lead{font-size:13px;color:rgba(255,255,255,0.78);line-height:1.9;max-width:720px}
.main{max-width:1040px;margin:0 auto;padding:32px 20px 80px}
h2{font-size:16px;font-weight:700;color:var(--text);letter-spacing:0.5px;display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--border2)}
.about-box{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px 22px;box-shadow:var(--shadow)}
.about-box p{font-size:12.5px;color:var(--muted);line-height:1.9;margin-bottom:10px}
.about-box p:last-child{margin-bottom:0}
.related-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.related-cat-link{font-size:11px;color:var(--accent);text-decoration:none;background:var(--tag-blue-bg);padding:6px 12px;border-radius:6px}
.related-cat-link:hover{text-decoration:underline}
/* ===== 学習ロードマップ（教科書・目次型） ===== */
/* ロードマップは pachinko・slot・kyoshitsu で使用（column にはロードマップがない） */
.roadmap{margin-top:6px;margin-bottom:40px}
.roadmap-chapter{margin-bottom:26px}
.roadmap-chapter:last-child{margin-bottom:0}
.chapter-tab-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--border2);padding-bottom:9px;margin-bottom:10px}
.chapter-num{font-family:'Noto Serif JP',serif;font-size:12px;font-weight:700;color:#fff;background:var(--header-bg);padding:5px 14px 5px 10px;letter-spacing:1px;flex-shrink:0;clip-path:polygon(0 0,100% 0,90% 100%,0% 100%)}
.chapter-title-text{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.5}
.chapter-branches{list-style:none;margin:0 0 0 6px;padding-left:18px;border-left:2px solid var(--border)}
.chapter-branches li::before{content:"";position:absolute;left:-2px;top:16px;width:14px;height:2px;background:var(--border)}
.chapter-branches a{color:var(--muted);text-decoration:none}
.chapter-branches a:hover{color:var(--accent);text-decoration:underline}
.chapter-branches li a.branch-name{color:var(--accent);font-size:13.5px;font-weight:600}
.chapter-branches li a.branch-name:hover{text-decoration:underline}
.chapter-branches .branch-name{flex:1;min-width:0}
.chapter-branches .branch-name.is-pending{color:var(--muted2)}
.branch-status{font-size:9.5px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:0.5px;white-space:nowrap;flex-shrink:0}
.branch-status.pending{background:#eef1f5;color:var(--muted2)}
.roadmap-note{font-size:11px;color:var(--muted2);line-height:1.8;margin-top:18px;padding-top:14px;border-top:1px dashed var(--border2)}
.footer{background:var(--header-bg);padding:24px 20px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:10px;flex-wrap:wrap}
.footer-link{font-size:11px;color:rgba(255,255,255,0.5);text-decoration:none;letter-spacing:0.5px}
.footer-link:hover{color:rgba(255,255,255,0.8)}
.footer-copy{font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:0.5px}