/* ============================================================
   資格試験ナビ — 共有スタイルシート
   Target: 20-35歳・スキルアップ志向・モバイルファースト
   Design: Study Navy × Amber Accent (EdTech confidence)
   ============================================================ */

/* === Variables === */
:root {
  --clr-primary:       #1e3a8a;
  --clr-primary-dark:  #1e3070;
  --clr-primary-light: #e0e8f9;
  --clr-accent:        #c2872a;
  --clr-accent-dark:   #a86e1a;
  --clr-success:       #047857;
  --clr-bg:            #f2f1ee;
  --clr-surface:       #ffffff;
  --clr-text:          #18181b;
  --clr-text-muted:    #52525b;
  --clr-border:        #dddbd6;
  --font:              "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", system-ui, sans-serif;
  --radius-sm:         5px;
  --radius-md:         10px;
  --radius-lg:         18px;
  --shadow-sm:         0 1px 4px rgba(0,0,0,.07);
  --shadow-md:         0 6px 24px rgba(0,0,0,.09);
  --container:         1100px;
  --header-h:          64px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--clr-bg); color: var(--clr-text); line-height: 1.7; }
a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* === Layout === */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0; }

/* === Header === */
.site-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  position: sticky; top: 0; z-index: 100;
}
.site-header .inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h); max-width: var(--container);
  margin: 0 auto; padding: 0 24px;
}
.site-logo {
  font-size: 1.3rem; font-weight: 800;
  color: var(--clr-primary); letter-spacing: -.5px;
}
.site-logo span { color: var(--clr-accent); }
.site-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.site-nav a { color: var(--clr-text-muted); font-size: .85rem; font-weight: 500; transition: color .15s; }
.site-nav a:hover { color: var(--clr-primary); text-decoration: none; }
.nav-cta {
  background: var(--clr-primary); color: white !important;
  padding: 7px 18px; border-radius: var(--radius-sm);
  font-weight: 600 !important; font-size: .82rem !important;
  letter-spacing: .01em;
}
.nav-cta:hover { background: var(--clr-primary-dark); }

/* === Mobile nav (hamburger + drawer) === */
.nav-burger {
  display: none; margin-left: auto; width: 40px; height: 40px;
  border: none; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  padding: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--clr-primary); transition: transform .25s, opacity .2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 998;
}
.mnav-overlay.open { opacity: 1; visibility: visible; }
.mnav-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 78%; max-width: 320px;
  background: #fff; box-shadow: -4px 0 24px rgba(15,23,42,.18);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 999; display: flex; flex-direction: column;
  padding: 72px 22px 28px; gap: 4px; overflow-y: auto;
}
.mnav-drawer.open { transform: translateX(0); }
.mnav-drawer a {
  color: var(--clr-text); font-size: .95rem; font-weight: 500;
  padding: 13px 8px; border-bottom: 1px solid var(--clr-border);
  text-decoration: none;
}
.mnav-drawer a:hover { color: var(--clr-primary); }
.mnav-drawer a.mnav-auth {
  margin-top: 14px; border: none; border-radius: var(--radius-sm);
  text-align: center; font-weight: 700; background: var(--clr-primary); color: #fff;
}
.mnav-drawer a.mnav-auth:hover { background: var(--clr-primary-dark); color: #fff; }
.mnav-drawer a.mnav-auth + a.mnav-auth { margin-top: 8px; }

/* === Hero === */
.hero {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
  padding: 56px 24px 48px;
}
.hero-inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 56px;
  align-items: center;
}
.hero-text { text-align: left; }
.hero-vis { position: relative; }
.hero-vis img {
  width: 100%; height: 320px; object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
  display: block;
}
.hero-eyebrow {
  display: block;
  font-size: .72rem; color: var(--clr-text-muted);
  font-weight: 500; margin-bottom: 14px;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800;
  line-height: 1.25; margin-bottom: 14px; color: var(--clr-text);
  letter-spacing: -.03em;
}
.hero h1 em { color: var(--clr-primary); font-style: normal; }
.hero p.lead {
  font-size: .9rem; color: var(--clr-text-muted);
  line-height: 1.85; margin-bottom: 28px; opacity: 1; max-width: 440px;
}

.trust-badges { display: none; }
.trust-badge { display: none; }

.search-box { max-width: 460px; margin: 0 0 20px; position: relative; }
.search-box input {
  width: 100%; padding: 13px 104px 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-border);
  font-size: .9rem; font-family: var(--font);
  color: var(--clr-text); background: var(--clr-surface);
  transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus {
  outline: none; border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1);
}
.search-box input::placeholder { color: #a1a1aa; }
.search-box button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: var(--clr-primary); border: none; border-radius: 4px;
  padding: 8px 16px; color: white; font-weight: 700; cursor: pointer;
  font-family: var(--font); font-size: .82rem; letter-spacing: .02em;
  transition: background .15s;
}
.search-box button:hover { background: var(--clr-primary-dark); }

.popular-tags { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.tag {
  background: transparent; border: 1px solid var(--clr-border);
  color: var(--clr-text-muted); padding: 5px 14px; border-radius: var(--radius-sm);
  font-size: .78rem; cursor: pointer; transition: all .15s;
  user-select: none; font-weight: 500;
}
.tag:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-light); }
.tag.active { background: var(--clr-primary); border-color: var(--clr-primary); color: white; font-weight: 600; }

/* === Section headers === */
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.section-head p  { color: var(--clr-text-muted); font-size: .875rem; }
.section-actions { margin-left: auto; }

/* === Category grid === */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.category-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); padding: 16px 18px; text-align: left;
  cursor: pointer; transition: all .15s; color: var(--clr-text); display: block;
}
.category-card:hover { border-color: var(--clr-primary); box-shadow: var(--shadow-sm); text-decoration: none; background: var(--clr-primary-light); }
.category-card .icon { display: none; }
.category-card .name { font-weight: 700; font-size: .875rem; color: var(--clr-text); }
.category-card .hint { color: var(--clr-text-muted); font-size: .72rem; margin-top: 5px; line-height: 1.5; }

/* === Filter bar === */
.filter-bar {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.filter-bar .filter-chip {
  background: #fff; border: 1.5px solid #dde1ea;
  color: #64748b; padding: 5px 14px; border-radius: 20px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: all .15s; letter-spacing: .01em;
}
.filter-bar .filter-chip:hover {
  border-color: var(--clr-primary); color: var(--clr-primary);
  background: var(--clr-primary-light);
}
.filter-bar .filter-chip.active {
  background: var(--clr-primary); border-color: var(--clr-primary);
  color: #fff;
}
.result-count {
  color: #94a3b8; font-size: .78rem; margin-left: auto;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* === Card thumbnail image === */
.card-img { margin: -20px -20px 14px; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; height: 140px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.shikaku-card:hover .card-img img { transform: scale(1.04); }
.card-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--clr-primary-light), #e0f2fe); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }

/* === Editorial section === */
.editorial-section { background: var(--clr-bg); padding: 40px 0; border-top: 1px solid var(--clr-border); }
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; }
.editorial-item { background: var(--clr-surface); padding: 22px 24px; border-right: 1px solid var(--clr-border); }
.editorial-item:last-child { border-right: none; }
.editorial-item .e-icon { display: none; }
.editorial-item h3 { font-size: .9rem; font-weight: 700; margin-bottom: 6px; color: var(--clr-text); }
.editorial-item p { font-size: .8rem; color: var(--clr-text-muted); line-height: 1.7; margin: 0; }

/* === Detail page featured image === */
.feat-img { margin-bottom: 28px; border-radius: var(--radius-md); overflow: hidden; height: 240px; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* === 資格 Card === */
.shikaku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 18px;
}
.shikaku-card {
  background: #fff;
  border: 1.5px solid #d1d8e8;
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(30,58,138,.07);
  transition: box-shadow .22s cubic-bezier(.25,.46,.45,.94), transform .22s cubic-bezier(.25,.46,.45,.94), border-color .22s;
  will-change: transform;
}
.shikaku-card:hover {
  box-shadow: 0 10px 36px rgba(30,58,138,.13);
  transform: translateY(-3px);
  border-color: #a5b8da;
}

/* Category badge — colored pill */
.cat-badge {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-size: .69rem; font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: .03em;
}
.shikaku-card h3 {
  font-size: 1.05rem; font-weight: 800;
  margin-bottom: 4px; line-height: 1.35; letter-spacing: -.01em;
  color: var(--clr-text);
}
.shikaku-card .org {
  color: var(--clr-text-muted); font-size: .72rem; margin-bottom: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Stats — clean 2×2 with no inner borders */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.stat-cell {
  background: #f7f8fc;
  border-radius: 8px;
  padding: 9px 12px;
}
.stat-cell .lbl {
  font-size: .65rem; color: #94a3b8;
  margin-bottom: 3px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.stat-cell .val { font-size: .92rem; font-weight: 800; color: var(--clr-text); }

.diff-stars { display: flex; gap: 2px; }
.diff-star { font-size: .78rem; }
.diff-star.on  { color: var(--clr-accent); }
.diff-star.off { color: #d4d4d8; }

/* Footer row */
.card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid #edf0f5;
}
.btn-detail {
  display: inline-flex; align-items: center; gap: 4px;
  flex: 1;                              /* 残り幅を占有 */
  background: var(--clr-primary); color: #fff;
  padding: 7px 15px; border-radius: 8px;
  font-size: .79rem; font-weight: 700;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap; letter-spacing: .01em;
  justify-content: center;
}
.btn-detail::after { content: '→'; font-size: .85em; opacity: .8; }
.btn-detail:hover {
  background: var(--clr-primary-dark); color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(30,58,138,.25);
}
.btn-detail.disabled {
  background: #e2e5ea; color: #9ca3af; cursor: default;
  box-shadow: none; flex: 1;
}
.btn-detail.disabled::after { display: none; }

/* アイコンボタン群（比較 + お気に入り）*/
.card-icon-btns {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
}
.compare-btn {
  background: none; border: none;
  color: var(--clr-text-muted); cursor: pointer;
  font-size: .95rem; padding: 3px 5px; line-height: 1;
  border-radius: 6px;
  transition: color .15s, transform .15s, background .15s;
}
.compare-btn:hover {
  transform: scale(1.2);
  color: var(--clr-primary);
  background: var(--clr-primary-light);
}

/* asof メタ行 */
.card-asof {
  font-size: .64rem;
  color: #c0c8d4;
  text-align: right;
  padding-top: 7px;
  letter-spacing: .02em;
}

/* source-note は card-asof に統合済み。旧ルールを無効化 */
.source-note { display: none; }

/* === CTA Section === */
.cta-box {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-primary);
  border-radius: var(--radius-md);
  padding: 28px 28px; text-align: center;
}
.cta-box h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.cta-box p { color: var(--clr-text-muted); font-size: .875rem; margin-bottom: 18px; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-btn {
  display: inline-block; background: var(--clr-accent); color: white;
  padding: 13px 28px; border-radius: var(--radius-md);
  font-weight: 700; transition: background .15s;
}
.cta-btn:hover { background: var(--clr-accent-dark); color: white; text-decoration: none; }

/* === YMYL notice === */
.ymyl-box {
  background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius-sm);
  padding: 14px 18px; font-size: .8rem; color: #166534; line-height: 1.7;
}

/* === Footer === */
.site-footer { background: #0f172a; color: #94a3b8; padding: 48px 0 24px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.footer-logo-text,
.footer-logo { font-size: 1.1rem; font-weight: 800; color: white; margin-bottom: 10px; }
.footer-logo-text span,
.footer-logo span { color: var(--clr-accent); }
.footer-tagline { font-size: .8rem; line-height: 1.7; color: #94a3b8; }
.footer-desc { font-size: .8rem; line-height: 1.7; }
.footer-disclaimer { color: #475569; font-size: .72rem; margin-top: 12px; line-height: 1.7; }
.footer-col h3 { color: white; font-size: .875rem; font-weight: 700; margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { color: #94a3b8; font-size: .8rem; transition: color .15s; }
.footer-col ul li a:hover { color: white; text-decoration: none; }
/* 記事・ツールページ用：nav > a 直接配置パターン */
.footer-col > a {
  display: block; color: #94a3b8; font-size: .8rem;
  text-decoration: none; margin-bottom: 8px;
  transition: color .15s;
}
.footer-col > a:hover { color: white; }
.footer-bottom {
  border-top: 1px solid #1e293b; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: #475569; flex-wrap: wrap; gap: 8px;
}

/* ============================================================
   Detail page styles (shikaku/*.html)
   ============================================================ */
.breadcrumb { font-size: .78rem; color: var(--clr-text-muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--clr-text-muted); }
.breadcrumb a:hover { color: var(--clr-primary); }
.breadcrumb span { margin: 0 6px; }

/* Hero内パンくず：白背景に映えるよう上書き */
.page-hero .breadcrumb { color: rgba(255,255,255,.75); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero .breadcrumb span { color: rgba(255,255,255,.5); }
.page-hero .breadcrumb > span:last-child { color: rgba(255,255,255,.95); font-weight: 600; }

.page-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: white; padding: 40px 0 32px;
}
.page-hero .eyebrow { font-size: .78rem; opacity: .75; margin-bottom: 6px; }
.page-hero h1 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; margin-bottom: 12px; }
.page-hero .meta-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.meta-chip {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; padding: 4px 14px; font-size: .78rem;
}

.two-col { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.main-col {}
.side-col { position: sticky; top: calc(var(--header-h) + 16px); }
/* 右カラムを行の高さまで伸ばし、口コミカードをスクロール追従(sticky)させる */
.aside-col { align-self: stretch; }
.aside-col .rv-aside-card {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.info-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; border-radius: var(--radius-md); overflow: hidden; }
.info-table th { background: var(--clr-bg); width: 38%; font-weight: 600; font-size: .875rem; text-align: left; padding: 12px 16px; border: 1px solid var(--clr-border); }
.info-table td { background: var(--clr-surface); font-size: .875rem; padding: 12px 16px; border: 1px solid var(--clr-border); }
.info-table a { font-size: .8rem; }

.content-h2 { font-size: 1.1rem; font-weight: 700; border-left: 3px solid var(--clr-primary); padding-left: 12px; margin-bottom: 14px; }

/* === Cost Simulator === */
.simulator {
  background: var(--clr-surface); border: 2px solid var(--clr-primary-light);
  border-radius: var(--radius-md); padding: 24px; margin-bottom: 28px;
}
.sim-title { font-size: 1rem; font-weight: 700; color: var(--clr-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.sim-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sim-row label { min-width: 150px; font-size: .875rem; font-weight: 600; }
.sim-row input[type="number"] {
  flex: 1; padding: 8px 12px; border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: .9rem;
  text-align: right; max-width: 140px;
}
.sim-row input:focus { outline: 2px solid var(--clr-primary); }
.sim-row .fixed-val { font-size: .9rem; font-weight: 700; min-width: 80px; text-align: right; }
.sim-row .unit { font-size: .8rem; color: var(--clr-text-muted); }
.sim-divider { border: none; border-top: 1px dashed var(--clr-border); margin: 14px 0; }
.sim-total {
  background: var(--clr-primary-light); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
}
.sim-total .lbl { font-weight: 700; color: var(--clr-primary-dark); font-size: .9rem; }
.sim-total .total { font-size: 1.6rem; font-weight: 800; color: var(--clr-primary-dark); }
.sim-note { font-size: .72rem; color: var(--clr-text-muted); margin-top: 10px; }

/* === Schedule table === */
.schedule-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: .875rem; }
.schedule-table th { background: #1e3a8a; color: white; padding: 10px 14px; text-align: left; font-weight: 600; }
.schedule-table td { padding: 10px 14px; border-bottom: 1px solid var(--clr-border); }
.schedule-table tr:nth-child(even) td { background: var(--clr-bg); }

/* === Sidebar card === */
.side-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px;
}
.side-card h3 { font-size: .875rem; font-weight: 700; color: var(--clr-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--clr-border); }
.side-stat { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--clr-border); font-size: .82rem; }
.side-stat:last-child { border-bottom: none; }
.side-stat .k { color: var(--clr-text-muted); }
.side-stat .v { font-weight: 700; }
.side-links { list-style: none; }
.side-links li { padding: 6px 0; border-bottom: 1px solid var(--clr-border); }
.side-links li:last-child { border-bottom: none; }
.side-links a { font-size: .82rem; }

/* === Source list === */
.source-box { background: var(--clr-bg); border-radius: var(--radius-sm); padding: 16px 18px; }
.source-box ol { padding-left: 18px; }
.source-box li { font-size: .78rem; margin-bottom: 6px; color: var(--clr-text-muted); }
.source-box a { color: var(--clr-primary); word-break: break-all; }

/* === Responsive === */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .hero { padding: 40px 16px 36px; }
  .hero h1 { font-size: 1.4rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-vis { display: none; }
  .trust-badges { justify-content: flex-start; }
  .editorial-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .rv-inner { padding-right: 20px; }
  .rv-ad-slot { display: none; }
  .side-col { position: static; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .shikaku-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .sim-row { flex-wrap: wrap; gap: 6px; }
  .sim-row label { min-width: unset; width: 100%; }
  .cta-box { padding: 24px 16px; }
  .page-hero { padding: 32px 0 24px; }
}
@media (max-width: 480px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Industry-standard features
   ============================================================ */

/* === Sort & filter bar === */
.tools-bar { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.tools-label { font-size: .72rem; color: #94a3b8; font-weight: 700; white-space: nowrap; letter-spacing: .05em; text-transform: uppercase; }
.tools-sep { width: 1px; height: 18px; background: #e4e7ed; margin: 0 4px; }

/* Sort row */
.sort-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Filter row — chips + count */
.filter-row {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid #edf0f5; padding-top: 7px;
}
.chip-scroll {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; flex: 1;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
  /* right-edge fade to hint scroll */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.chip-scroll::-webkit-scrollbar { display: none; }

/* Sort buttons */
.sort-btn, .adv-filter-btn {
  padding: 4px 12px; border: 1px solid #dde1ea;
  border-radius: 16px; background: #fff;
  font-size: .73rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: var(--font); color: #64748b;
  white-space: nowrap;
}
.sort-btn:hover, .adv-filter-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-light); }
.sort-btn.active, .adv-filter-btn.active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }

/* Filter chips */
.filter-chip {
  padding: 4px 11px; border: 1px solid #dde1ea;
  border-radius: 16px; background: #fff;
  font-size: .73rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: var(--font); color: #64748b;
  white-space: nowrap; flex-shrink: 0;
}
.filter-chip:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-light); }
.filter-chip.active { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }

/* === Fav button on cards === */
.fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; padding: 2px 4px; line-height: 1;
  transition: transform .15s; margin-left: auto;
}
.fav-btn:hover { transform: scale(1.25); }
.fav-badge { display: none; position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.9); border-radius: 50%; width: 30px; height: 30px; align-items: center; justify-content: center; font-size: .9rem; box-shadow: var(--shadow-sm); cursor: pointer; }
.shikaku-card { position: relative; }
.shikaku-card:hover .fav-badge { display: flex; }
.shikaku-card .fav-badge.pinned { display: flex; }

/* === No results state === */
.no-results { text-align: center; padding: 48px 20px; color: var(--clr-text-muted); display: none; }
.no-results .nr-icon { font-size: 2.5rem; margin-bottom: 12px; }
.no-results p { font-size: .875rem; }
.no-results button { margin-top: 12px; padding: 8px 20px; background: var(--clr-primary); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font); font-size: .875rem; }

/* === Recently viewed === */
.recently-section { padding: 28px 0; border-top: 1px solid var(--clr-border); display: none; }
.rv-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rv-chip {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: 20px; padding: 6px 16px;
  font-size: .82rem; color: var(--clr-text);
  text-decoration: none; transition: border-color .15s;
}
.rv-chip:hover { border-color: var(--clr-primary); color: var(--clr-primary); text-decoration: none; }

/* === Reading progress bar === */
#reading-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--clr-accent); z-index: 200;
  width: 0%; transition: width .1s linear;
  pointer-events: none;
}

/* === Pager === */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  padding: 28px 0 8px;
}
.page-btn {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  background: var(--clr-surface); color: var(--clr-text);
  font-size: .875rem; font-family: var(--font); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.page-btn:hover:not(:disabled) { background: var(--clr-primary-light); border-color: var(--clr-primary); }
.page-btn.active { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); font-weight: 700; }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-ellipsis { padding: 0 6px; color: var(--clr-text-muted); line-height: 38px; }

/* ============================================================
   Discover section — 2-column category × purpose navigation
   ============================================================ */
.discover-section {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding: 24px 0 20px;
}
.discover-section .section-head { margin-bottom: 20px; }
.discover-section .section-head h2 { font-size: 1.15rem; }

.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 20px;
  align-items: start;
}
.discover-divider {
  background: var(--clr-border);
  width: 1px;
  align-self: stretch;
  min-height: 200px;
}
.discover-col {}
/* Force 3 columns inside discover regardless of viewport width */
.discover-col .category-grid {
  grid-template-columns: repeat(3, 1fr);
}
.discover-col-title {
  font-size: .72rem; font-weight: 700; color: var(--clr-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
  display: flex; align-items: center; gap: 6px;
}
.discover-footer {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--clr-border);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; font-size: .82rem; color: var(--clr-text-muted);
}
.discover-shindan-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--clr-primary); color: #fff;
  padding: 8px 20px; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 700;
  transition: background .15s; text-decoration: none;
}
.discover-shindan-btn:hover { background: var(--clr-primary-dark); color: #fff; text-decoration: none; }

/* Purpose chips — compact vertical list */
.purpose-chips { display: flex; flex-direction: column; gap: 6px; }
.purpose-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text); font-size: .83rem; font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.purpose-chip:hover {
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  text-decoration: none;
  transform: translateX(3px);
}
.purpose-chip .pc-arrow {
  margin-left: auto; color: #c0c8d6; font-size: .8rem;
  transition: transform .15s, color .15s;
}
.purpose-chip:hover .pc-arrow { transform: translateX(3px); color: var(--clr-primary); }

/* Responsive: stack on mobile */
@media (max-width: 680px) {
  .discover-grid {
    grid-template-columns: 1fr;
    gap: 28px 0;
  }
  .discover-divider { display: none; }
}

/* ============================================================
   Tools strip section
   ============================================================ */
.tools-section {
  background: var(--clr-bg);
  padding: 40px 0 36px;
  border-top: 1px solid var(--clr-border);
}
.tools-section .section-head { margin-bottom: 20px; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.tool-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 20px 18px 16px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tool-card:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.tool-card .tc-icon { font-size: 1.8rem; margin-bottom: 10px; line-height: 1; }
.tool-card .tc-name { font-size: .875rem; font-weight: 700; margin-bottom: 5px; color: var(--clr-text); }
.tool-card .tc-desc { font-size: .73rem; color: var(--clr-text-muted); line-height: 1.55; flex: 1; }
.tool-card .tc-link {
  margin-top: 12px; font-size: .72rem; font-weight: 700;
  color: var(--clr-primary); display: flex; align-items: center; gap: 3px;
}

/* ============================================================
   Sticky filter bar
   ============================================================ */
#filterBar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--clr-bg);
  padding-top: 12px;
  padding-bottom: 10px;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  margin-bottom: 20px;
}

/* ============================================================
   Hero — slim variant (search-first layout)
   ============================================================ */
.hero {
  padding: 40px 24px 36px;
}
.hero-inner {
  grid-template-columns: 1fr 340px;
  gap: 40px;
}
.hero h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom: 10px;
}
.hero p.lead {
  font-size: .87rem;
  margin-bottom: 20px;
}
.search-box { margin-bottom: 14px; }

/* Scroll hint */
.hero-scroll-hint {
  font-size: .72rem; color: var(--clr-text-muted);
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; opacity: .8;
}
.hero-scroll-hint span { color: var(--clr-primary); font-weight: 600; }

/* === Back to top === */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  background: var(--clr-primary); color: white;
  border: none; border-radius: 50%;
  cursor: pointer; font-size: 1rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.4);
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  z-index: 99; line-height: 1;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--clr-primary-dark); }

/* === Share bar === */
.share-bar {
  max-width: var(--container); margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--clr-border);
}
.share-label, .share-lbl { font-size: .8rem; color: var(--clr-text-muted); font-weight: 600; }
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600; cursor: pointer;
  border: none; font-family: var(--font);
  text-decoration: none; transition: opacity .15s;
}
.share-btn:hover { opacity: .82; text-decoration: none; }
.share-btn.x-btn    { background: #000; color: white; }
.share-btn.line-btn { background: #06c755; color: white; }
.share-btn.copy-btn { background: var(--clr-bg); border: 1px solid var(--clr-border); color: var(--clr-text); }
.share-btn.print-btn{ background: var(--clr-bg); border: 1px solid var(--clr-border); color: var(--clr-text); }
#copy-feedback { font-size: .78rem; color: var(--clr-success); display: none; margin-left: 4px; }

/* === TOC in sidebar === */
.toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-list li { border-bottom: 1px solid var(--clr-border); }
.toc-list li:last-child { border-bottom: none; }
.toc-list a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; font-size: .8rem;
  color: var(--clr-text-muted); transition: color .15s;
}
.toc-list a::before { counter-increment: toc; content: counter(toc); font-size: .7rem; color: var(--clr-primary-light); background: var(--clr-primary); color: white; border-radius: 50%; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toc-list a:hover { color: var(--clr-primary); text-decoration: none; }
.toc-list a.active { color: var(--clr-primary); font-weight: 600; }

/* === Fav button on detail page === */
.detail-fav {
  background: none; border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); padding: 6px 14px;
  font-size: .82rem; cursor: pointer; font-family: var(--font);
  color: var(--clr-text-muted); transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.detail-fav:hover { border-color: #f43f5e; color: #f43f5e; }
.detail-fav.on, .detail-fav.active { border-color: #f43f5e; color: #f43f5e; background: #fff1f2; }

@media (max-width: 768px) {
  .tools-sep { display: none; }
  .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: .9rem; }
  .share-bar { gap: 6px; }
}

/* ============================================================
   Craft Layer — 手作り感を演出する細部
   AI生成テンプレートと差別化するための細工
   ============================================================ */

/* 1. テキスト選択カラー */
::selection {
  background: var(--clr-accent);
  color: #fff;
}

/* 2. スクロールバー */
* {
  scrollbar-width: thin;
  scrollbar-color: #c9a96e #ede9e3;
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #ede9e3; }
::-webkit-scrollbar-thumb { background: #c9a96e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent); }
/* チップスクロールは非表示維持（既存ルール優先） */
.chip-scroll { scrollbar-width: none !important; }

/* 3. フォーカスリング（意図的デザイン） */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.search-box input:focus { outline: none; } /* 検索ボックスは独自スタイル維持 */

/* 4. リンク下線の洗練 */
a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* 5. 日本語組版補正 */
body {
  line-height: 1.88;       /* 英語向け 1.7 → 日本語適正値 */
  letter-spacing: 0.04em;  /* CJK正方形文字に必要なプラストラッキング */
}
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "palt" 1, "kern" 1; /* 約物・カナのプロポーショナル詰め */
  letter-spacing: 0.02em;
  line-height: 1.42;
}
.hero h1 {
  letter-spacing: -0.02em; /* 大見出しのみマイナストラッキングで迫力 */
  line-height: 1.25;
}
/* em は斜体禁止（日本語フォントでは文字が崩れる） */
em { font-style: normal; font-weight: 700; }
/* 現代ブラウザ向け：行頭の約物スペース除去 */
h1, h2, h3 { text-spacing-trim: trim-start; }

/* 6. グレインオーバーレイ（html::before で印刷の body::before と分離） */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 7. カテゴリカード：アイコン表示（個性を復活） */
.category-card .icon {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 7px;
  line-height: 1;
}

/* 8. 掲載基準アイコン表示 */
.editorial-item .e-icon {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 10px;
  line-height: 1;
}
.editorial-item { padding: 24px 26px; }

/* 9. セクション見出しに左アクセントバー */
.section-head h2 {
  position: relative;
  padding-left: 15px;
}
.section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 3px;
  height: .82em;
  background: var(--clr-accent);
  border-radius: 2px;
}

/* 10. discover-col-title に amber dot */
.discover-col-title {
  display: flex;
  align-items: center;
  gap: 7px;
}
.discover-col-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--clr-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* 11. ツールカード：ホバー時トップアクセント */
.tool-card {
  border-top: 3px solid transparent;
  transition: border-color .2s, border-top-color .2s,
              box-shadow .2s cubic-bezier(.25,.46,.45,.94),
              transform .2s cubic-bezier(.25,.46,.45,.94);
}
.tool-card:hover { border-top-color: var(--clr-accent); }

/* 12. purpose-chip に矢印インジケーター */
.purpose-chip::after {
  content: "›";
  margin-left: auto;
  font-size: 1rem;
  color: #c8d0dc;
  transition: transform .18s, color .18s;
  flex-shrink: 0;
}
.purpose-chip:hover::after {
  transform: translateX(4px);
  color: var(--clr-primary);
}

/* 13. ナビリンクのホバー下線アニメーション */
.site-nav a:not(.nav-cta) {
  position: relative;
}
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.25,.46,.45,.94);
}
.site-nav a:not(.nav-cta):hover { text-decoration: none; }
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }

/* 14. ヒーロー信頼シグナルストリップ */
.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: .72rem;
  color: var(--clr-text-muted);
  letter-spacing: .03em;
  opacity: .8;
}
.hero-trust-strip .strip-sep {
  color: var(--clr-border);
  font-weight: 300;
}

/* 15. HR グラデーションライン */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--clr-border) 25%,
    var(--clr-border) 75%,
    transparent
  );
  margin: 2.5rem 0;
}

/* 16. バックトゥトップ ホバーリフト */
.back-to-top {
  transition: opacity .2s, transform .2s,
              background .15s, box-shadow .2s;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37,99,235,.45);
}
.back-to-top.visible:hover { transform: translateY(-3px); }

/* 17. stat-cell にカードホバー時アクセント */
.stat-cell {
  transition: background .2s;
}
.shikaku-card:hover .stat-cell {
  background: #f0f4fc;
}

/* 18. 縦リズム変奏（単調な 48px 均等を崩す） */
#articles { padding-top: 60px; }
.editorial-section { padding: 52px 0; }

/* 19. フッターリンク underline offset */
.footer-col ul li a {
  text-underline-offset: 3px;
}
.footer-col > a {
  text-underline-offset: 3px;
}

/* ============================================================
   Deep Craft — サイト固有の視覚的個性
   ============================================================ */

/* --- Hero Data Card (Unsplash 汎用写真を置換) --- */
.hero-data-card {
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 22px 20px 18px;
  color: rgba(255,255,255,.95);
  font-family: var(--font);
}
.hdc-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .48;
  margin-bottom: 14px;
}
.hdc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.hdc-stat { text-align: center; }
.hdc-num {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hdc-unit { font-size: .7rem; opacity: .6; }
.hdc-lbl { font-size: .57rem; opacity: .42; margin-top: 4px; line-height: 1.3; }
.hdc-bars-title {
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .38;
  margin-bottom: 10px;
}
.hdc-bars { display: flex; flex-direction: column; gap: 6px; }
.hdc-bar-row { display: flex; align-items: center; gap: 8px; }
.hdc-bar-name {
  width: 78px;
  font-size: .63rem;
  opacity: .68;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdc-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.14);
  border-radius: 2px;
  overflow: hidden;
}
.hdc-bar-fill {
  height: 100%;
  width: var(--w, 0%);
  background: rgba(255,255,255,.78);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: hdc-expand .9s cubic-bezier(.25,.46,.45,.94) forwards;
}
.hdc-bars .hdc-bar-row:nth-child(1) .hdc-bar-fill { animation-delay: .10s; }
.hdc-bars .hdc-bar-row:nth-child(2) .hdc-bar-fill { animation-delay: .22s; }
.hdc-bars .hdc-bar-row:nth-child(3) .hdc-bar-fill { animation-delay: .34s; }
.hdc-bars .hdc-bar-row:nth-child(4) .hdc-bar-fill { animation-delay: .46s; }
.hdc-bars .hdc-bar-row:nth-child(5) .hdc-bar-fill { animation-delay: .58s; }
@keyframes hdc-expand { to { transform: scaleX(1); } }
.hdc-bar-count { font-size: .58rem; opacity: .42; flex-shrink: 0; width: 24px; text-align: right; }
.hdc-source {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .57rem;
  opacity: .3;
  text-align: right;
  letter-spacing: .02em;
}
@media (max-width: 680px) { .hero-data-card { display: none; } }

/* --- カテゴリカード カラーアクセント --- */
.category-grid .category-card:nth-child(1) { --cat-c: #c2872a; } /* 不動産  amber   */
.category-grid .category-card:nth-child(2) { --cat-c: #059669; } /* 金融    emerald */
.category-grid .category-card:nth-child(3) { --cat-c: #7c3aed; } /* 会計    violet  */
.category-grid .category-card:nth-child(4) { --cat-c: #dc2626; } /* 法律    red     */
.category-grid .category-card:nth-child(5) { --cat-c: #2563eb; } /* IT      blue    */
.category-grid .category-card:nth-child(6) { --cat-c: #0891b2; } /* 医療    cyan    */
.category-card { border-top: 3px solid var(--cat-c, var(--clr-primary)); }

/* --- 資格カードバッジ カテゴリ別カラー --- */
.cat-badge[data-cat="IT"]        { background: #eff6ff; color: #1e40af; }
.cat-badge[data-cat="会計"]      { background: #f5f3ff; color: #6d28d9; }
.cat-badge[data-cat="金融"]      { background: #ecfdf5; color: #065f46; }
.cat-badge[data-cat="不動産"]    { background: #fff7ed; color: #92400e; }
.cat-badge[data-cat="法律"]      { background: #fef2f2; color: #991b1b; }
.cat-badge[data-cat="医療"]      { background: #ecfeff; color: #155e75; }
.cat-badge[data-cat="語学"]      { background: #fdf4ff; color: #86198f; }
.cat-badge[data-cat="電気"]      { background: #fefce8; color: #854d0e; }
.cat-badge[data-cat="ビジネス"]  { background: #f0fdf4; color: #166534; }
.cat-badge[data-cat="建設"]      { background: #fff7ed; color: #9a3412; }
.cat-badge[data-cat="危険物"]    { background: #fef2f2; color: #7f1d1d; }

/* --- 記事カード (inline スタイル脱却) --- */
.article-card {
  background: #fff;
  border: 1.5px solid #d1d8e8;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(30,58,138,.07);
  transition: box-shadow .22s cubic-bezier(.25,.46,.45,.94),
              transform .22s cubic-bezier(.25,.46,.45,.94),
              border-color .22s;
}
.article-card:hover {
  box-shadow: 0 10px 36px rgba(30,58,138,.13);
  transform: translateY(-3px);
  border-color: #a5b8da;
  text-decoration: none;
}
.article-card-thumb {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.article-card-body { padding: 18px 16px; }
.article-card-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.article-card-title {
  font-size: .925rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6px;
}
.article-card-desc { font-size: .75rem; color: #64748b; }

/* Card variants */
.article-card--shukkatsu  .article-card-thumb { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.article-card--shukkatsu  .article-card-tag   { background: #eff6ff; color: #1d4ed8; }
.article-card--mezurashii .article-card-thumb { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
.article-card--mezurashii .article-card-tag   { background: #f0fdf4; color: #16a34a; }

/* "一覧を見る" card */
.article-card--more {
  border-style: dashed;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 700;
  color: #64748b;
}
.article-card--more:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  transform: none;
  box-shadow: none;
}
.article-card--more::before { content: "📖"; font-size: 1.5rem; }
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

/* ============================================================
   口コミ・合格体験談
   ============================================================ */
.reviews-section {
  background: var(--clr-bg);
  padding: 56px 0 48px;
  border-top: 1px solid var(--clr-border);
  scroll-margin-top: 72px;
}
.rv-inner { padding-right: 332px; position: relative; }
/* 広告スロット（右の空きスペース） */
.rv-ad-slot { position: absolute; top: 0; right: 0; width: 300px; }
.rv-ad-slot .ad-inner {
  position: sticky; top: 88px;
  width: 300px; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 8px;
  color: #94a3b8; font-size: .8rem; letter-spacing: .08em;
}

/* ヒーロー内 評価teaser（クリックで口コミ欄へ） */
.hero-rv-teaser {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  line-height: 1;
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.hero-rv-teaser:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-1px);
}
.rv-teaser-stars {
  color: var(--clr-accent);
  letter-spacing: 1px;
  font-size: 1rem;
}
.rv-teaser-stars.rv-teaser-empty { color: rgba(255, 255, 255, .5); }
.rv-teaser-num {
  font-weight: 700;
  font-size: 1.05rem;
}
.rv-teaser-count { opacity: .9; }
.rv-teaser-go {
  margin-left: 4px;
  font-weight: 700;
  color: var(--clr-accent);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero-rv-teaser { font-size: .82rem; flex-wrap: wrap; gap: 6px; }
}

/* 右カラム コンパクト口コミカード */
/* 口コミカードを枠付きで明確に区切る（ネイビー見出しバー） */
.rv-aside-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}
.rv-aside-card .aside-h3,
.rv-aside-card > h3 {
  margin: 0;
  padding: 12px 16px;
  background: var(--clr-primary);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rv-aside-card .aside-h3::before,
.rv-aside-card > h3::before { content: "💬"; }
#rvAsideBody { padding: 16px; }
.rv-aside-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--clr-border);
}
.rv-aside-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--clr-primary);
  line-height: 1;
}
.rv-aside-stars { color: var(--clr-accent); letter-spacing: 1px; font-size: .85rem; }
.rv-aside-stars-lg { font-size: 1rem; }
.rv-aside-total { font-size: .8rem; color: var(--clr-text-muted); margin-left: auto; }
.rv-aside-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--clr-border);
}
.rv-aside-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.rv-aside-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.rv-aside-badge.rv-pass { background: #dcfce7; color: #15803d; }
.rv-aside-badge.rv-fail { background: #fee2e2; color: #b91c1c; }
.rv-aside-badge.rv-studying { background: #dbeafe; color: #1d4ed8; }
.rv-aside-comment {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--clr-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-aside-empty {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--clr-text-muted);
  margin-bottom: 12px;
}
.rv-aside-cta {
  display: block;
  margin-top: 14px;
  padding: 9px 12px;
  text-align: center;
  background: var(--clr-primary);
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.rv-aside-cta:hover { background: var(--clr-primary-dark); }

/* サマリー：スコアパネル＋合否分布バー */
.rv-summary {
  display: flex; align-items: stretch; gap: 0;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 28px;
}
.rv-score {
  flex: 0 0 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px 16px; text-align: center;
  background: linear-gradient(160deg, var(--clr-primary), var(--clr-primary-dark));
  color: #fff;
}
.rv-score-num   { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.rv-score-stars { color: var(--clr-accent); font-size: 1.05rem; letter-spacing: 2px; }
.rv-score-total { font-size: .76rem; opacity: .82; margin-top: 2px; }
.rv-breakdown {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 11px; padding: 20px 24px;
}
.rv-bd-row   { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.rv-bd-label { flex: 0 0 76px; font-weight: 600; color: var(--clr-text); }
.rv-bd-bar   { flex: 1; height: 7px; background: #eceae6; border-radius: 20px; overflow: hidden; }
.rv-bd-bar i { display: block; height: 100%; border-radius: 20px; transition: width .4s ease; }
.rv-bd-pass  .rv-bd-bar i { background: #22c55e; }
.rv-bd-fail  .rv-bd-bar i { background: #ef4444; }
.rv-bd-study .rv-bd-bar i { background: #3b82f6; }
.rv-bd-count { flex: 0 0 22px; text-align: right; font-weight: 700; color: var(--clr-text); }
.rv-empty {
  color: var(--clr-text-muted); font-size: .9rem; text-align: center;
  background: var(--clr-surface); border: 1px dashed var(--clr-border);
  border-radius: var(--radius-md); padding: 28px 20px;
}
.rv-error { color: #dc2626; font-size: .9rem; padding: 12px 0; }

/* カード：イニシャルアバター＋ホバー浮き */
.rv-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 14px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.rv-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #cfcdc7; }
.rv-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rv-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-primary-light); color: var(--clr-primary);
  font-weight: 800; font-size: 1.05rem; text-transform: uppercase;
}
.rv-card-id    { flex: 1; min-width: 0; }
.rv-card-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-card-line2 { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.rv-badge {
  font-size: .72rem; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; white-space: nowrap;
}
.rv-pass    { background: #dcfce7; color: #166534; }
.rv-fail    { background: #fee2e2; color: #991b1b; }
.rv-studying{ background: #eff6ff; color: #1e40af; }
.rv-stars   { color: var(--clr-accent); font-size: .9rem; letter-spacing: 1px; }
.rv-nickname{ font-weight: 700; font-size: .9rem; color: var(--clr-text); }
.rv-date    { font-size: .76rem; color: var(--clr-text-muted); }
.rv-meta    {
  font-size: .78rem; color: var(--clr-text-muted);
  background: var(--clr-bg); border-radius: var(--radius-sm);
  padding: 5px 10px; margin-bottom: 10px; display: inline-block;
}
.rv-comment { font-size: .92rem; line-height: 1.8; color: var(--clr-text); white-space: pre-wrap; }
.rv-del-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: .95rem; color: var(--clr-text-muted); padding: 4px 7px;
  border-radius: var(--radius-sm); transition: color .15s, background .15s;
}
.rv-del-btn:hover { color: #dc2626; background: #fee2e2; }

/* ログイン促進・投稿済み */
.rv-login-prompt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--clr-primary-light); border: 1px solid #c7d4f0;
  border-radius: var(--radius-md); padding: 18px 22px;
  font-size: .9rem; color: var(--clr-text); margin-top: 24px;
}
.rv-login-prompt a {
  color: #fff; background: var(--clr-primary); font-weight: 700;
  padding: 7px 18px; border-radius: var(--radius-sm); transition: background .15s;
}
.rv-login-prompt a:hover { background: var(--clr-primary-dark); text-decoration: none; }
.rv-posted-badge {
  display: flex; align-items: center; gap: 8px;
  background: #dcfce7; border: 1px solid #bbf7d0;
  border-radius: var(--radius-md); padding: 16px 20px;
  font-size: .9rem; font-weight: 600; color: #166534; margin-top: 24px;
}

/* 投稿フォーム：カード化 */
.rv-form {
  margin-top: 28px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px;
}
.rv-form-title {
  font-size: 1.05rem; font-weight: 800; color: var(--clr-text);
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 2px solid var(--clr-primary-light);
}
.rv-form-row { margin-bottom: 18px; }
.rv-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 700; color: var(--clr-text);
  margin-bottom: 7px;
}
.rv-req { font-size: .68rem; background: #fee2e2; color: #991b1b; padding: 2px 7px; border-radius: 4px; font-weight: 700; }
.rv-charcount { font-size: .74rem; color: var(--clr-text-muted); margin-left: auto; font-weight: 500; }
.rv-input, .rv-select, .rv-textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: .9rem; font-family: inherit; color: var(--clr-text);
  background: var(--clr-surface); transition: border-color .18s, box-shadow .18s; outline: none;
}
.rv-input:focus, .rv-select:focus, .rv-textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,.1);
}
.rv-textarea { resize: vertical; min-height: 96px; line-height: 1.7; }
.rv-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-radio-group label {
  font-size: .85rem; display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: 8px 14px; transition: border-color .15s, background .15s;
}
.rv-radio-group label:hover { border-color: var(--clr-primary); }
.rv-radio-group input { accent-color: var(--clr-primary); }

/* 星ボタン */
.rv-star-input { display: flex; gap: 4px; }
.rv-star-btn {
  background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 1.9rem; color: #d4d2cd; transition: color .12s, transform .12s; padding: 0 2px;
}
.rv-star-btn:hover { transform: scale(1.12); }
.rv-star-btn.active, .rv-star-btn:hover { color: var(--clr-accent); }

.rv-form-error {
  background: #fee2e2; color: #991b1b; border-radius: var(--radius-sm);
  padding: 11px 15px; font-size: .85rem; margin-bottom: 14px;
}
.rv-submit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; background: var(--clr-primary); color: #fff;
  border: none; border-radius: var(--radius-sm); padding: 13px 32px;
  font-size: .95rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .15s, transform .1s;
}
.rv-submit-btn:hover { background: var(--clr-primary-dark); }
.rv-submit-btn:active { transform: translateY(1px); }
.rv-submit-btn:disabled { background: #94a3b8; cursor: not-allowed; }

@media (max-width: 560px) {
  .rv-summary { flex-direction: column; }
  .rv-score { flex-basis: auto; flex-direction: row; gap: 12px; padding: 16px; }
  .rv-score-num { font-size: 2rem; }
  .rv-form-row--half { grid-template-columns: 1fr; }
  .rv-form { padding: 20px 18px 22px; }
}

/* ============================================================
   @media print — 資格詳細ページ 印刷レイアウト
   目的: A4縦・白黒対応の「参考カード」として使える出力
   ============================================================ */
@media print {
  /* --- ページ設定 --- */
  @page {
    size: A4 portrait;
    margin: 14mm 16mm 16mm;
  }

  /* --- グレインオーバーレイ非表示 --- */
  html::before { display: none; }

  /* --- 非表示要素 --- */
  .site-header,
  .site-footer,
  .share-bar,
  #reading-progress,
  .breadcrumb,
  .eyebrow,
  .simulator,
  .cta-box,
  .side-card:not(.side-card--print),
  .back-to-top,
  .reading-progress,
  .page-hero .eyebrow,
  .page-hero .breadcrumb,
  a[href^="https://twitter"],
  a[href^="https://social-plugins"],
  .nav-cta,
  .article-nav,
  .discover-section,
  .tools-bar,
  .pagination { display: none !important; }

  /* --- ベースリセット --- */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.55; font-family: "游ゴシック Medium","Yu Gothic Medium",sans-serif; }
  a { color: #000; text-decoration: none; }

  /* --- コンテナ幅をフルに --- */
  .container { max-width: none !important; width: 100% !important; padding: 0 !important; }
  main { padding-top: 8pt !important; padding-bottom: 0 !important; }
  .two-col { padding: 0 !important; }
  .main-col { padding: 0 !important; }

  /* --- 印刷ヘッダー（自動追加） --- */
  body::before {
    content: "資格コンパス — 受験費用・難易度・合格率データベース（shikaku-compass.jp）";
    display: block;
    font-size: 7.5pt;
    color: #555;
    border-bottom: 1pt solid #bbb;
    padding-bottom: 4pt;
    margin-bottom: 10pt;
  }

  /* --- ページヒーロー簡略化 --- */
  .page-hero {
    background: #1e3a8a !important;
    color: #fff !important;
    padding: 10pt 14pt !important;
    margin-bottom: 10pt;
    border-radius: 4pt;
    break-inside: avoid;
  }
  .page-hero h1 { font-size: 15pt; color: #fff !important; margin-bottom: 6pt; }
  .page-hero .meta-chips { display: flex; flex-wrap: wrap; gap: 6pt; }
  .meta-chip {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border: 1pt solid rgba(255,255,255,.4);
    padding: 2pt 8pt;
    border-radius: 20pt;
    font-size: 8.5pt;
    font-weight: 700;
  }

  /* --- レイアウトをシングルカラムに（サイドバーは非表示） --- */
  .two-col { display: block !important; }
  .main-col { width: 100% !important; }
  .side-col { display: none !important; }

  /* --- テーブル --- */
  .info-table,
  .schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    margin-bottom: 10pt;
    break-inside: avoid;
  }
  .info-table th,
  .info-table td,
  .schedule-table th,
  .schedule-table td {
    border: 0.5pt solid #bbb;
    padding: 4pt 7pt;
    vertical-align: top;
  }
  .info-table th,
  .schedule-table th {
    background: #e8edf5 !important;
    font-weight: 700;
    width: 28%;
    color: #1e3a8a;
  }
  .schedule-table thead th { background: #1e3a8a !important; color: #fff !important; }

  /* --- 見出し --- */
  .content-h2 {
    font-size: 11pt;
    color: #1e3a8a;
    border-left: 3pt solid #1e3a8a;
    padding-left: 7pt;
    margin: 10pt 0 5pt;
    break-after: avoid;
  }

  /* --- YMYLボックス --- */
  .ymyl-box {
    background: #fffbeb !important;
    border: 0.5pt solid #d97706;
    border-radius: 4pt;
    padding: 6pt 10pt;
    font-size: 8.5pt;
    margin-bottom: 10pt;
    color: #92400e;
  }

  /* --- 出典リスト --- */
  .source-box {
    font-size: 8pt;
    color: #444;
    background: #f8f8f8 !important;
    border: 0.5pt solid #ccc;
    border-radius: 4pt;
    padding: 8pt 10pt;
    break-inside: avoid;
  }
  .source-box ol { padding-left: 16pt; }
  .source-box li { margin-bottom: 3pt; }
  .source-box a::after { content: " （" attr(href) "）"; font-size: 7pt; color: #666; }

  /* --- キャリアセクション --- */
  .content-h2 + div { font-size: 9pt; }

  /* ============================================================
     detail.html（動的詳細ページ）＆共通要素の対応
     印刷の目的＝「受験準備の手元カード」。
     操作系・販促・他者の口コミは落とし、事実情報だけ残す。
     ============================================================ */
  /* 操作・ナビ・販促・他者口コミを非表示 */
  .sticky-apply-bar, #stickyApplyBar,
  .nav-burger, .mnav-drawer, .mnav-overlay,
  .hero-apply-btn, .hero-rv-teaser, .detail-fav,
  #simHeading, #simSection, .sim-wrap,
  #scheduleWidget,
  #certReviewsSection, #bookReviewsSection,
  .reviews-section, #rvSection,
  .review-modal, #addBookModal,
  .write-review-toggle, .review-form-box,
  .apply-cta, #kyufuSection,
  .aside-col,
  .no-print { display: none !important; }

  /* 概要テーブル（detail.html は .detail-table） */
  .detail-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-bottom: 10pt; break-inside: avoid; }
  .detail-table th, .detail-table td { border: 0.5pt solid #bbb; padding: 4pt 7pt; vertical-align: top; }
  .detail-table th { background: #e8edf5 !important; font-weight: 700; width: 28%; color: #1e3a8a; }
  /* 公式出典URLを紙面に明記（後で参照できるように・YMYL） */
  .detail-table a[href^="http"]::after,
  .ymyl-compact a[href^="http"]::after { content: " （" attr(href) "）"; font-size: 7pt; color: #666; word-break: break-all; }

  /* 見出し（detail.html は .sec-heading） */
  .sec-heading { font-size: 11pt; color: #1e3a8a; border-left: 3pt solid #1e3a8a; padding-left: 7pt; margin: 10pt 0 5pt; break-after: avoid; }

  /* YMYL注意（detail.html は .ymyl-compact）＝安全情報は必ず印刷 */
  .ymyl-compact { background: #f0fdf4 !important; border: 0.5pt solid #16a34a; border-radius: 4pt; padding: 6pt 10pt; font-size: 8.5pt; color: #166534 !important; margin-bottom: 10pt; break-inside: avoid; }

  /* キーステータス／クイックチェック／受験の流れ／申込準備＝残す（事実情報） */
  .key-stats { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 6pt; margin: 6pt 0 10pt; break-inside: avoid; }
  .ks-card { border: 0.5pt solid #bbb !important; border-top: 2pt solid #1e3a8a !important; padding: 6pt 4pt; }
  .ks-card .ks-val { font-size: 12pt; color: #1e3a8a !important; }
  .quick-check { border: 0.5pt solid #bbb; padding: 6pt 10pt; gap: 8pt; margin-bottom: 10pt; break-inside: avoid; }
  .steps { display: flex !important; break-inside: avoid; margin: 4pt 0 10pt; }
  .step { border: 0.5pt solid #bbb; font-size: 8pt; }
  .step::after { display: none !important; }
  #studySection, #applyCheckSection, .apply-checklist { break-inside: avoid; }
  .apply-checklist { border: 0.5pt solid #bbb; padding: 8pt 10pt; }
  .acl-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5pt; }
  .acl-item { border: 0.5pt solid #ccc; padding: 5pt 7pt; font-size: 8pt; break-inside: avoid; }
  .big-num, .study-bar .big-num { color: #1e3a8a !important; }

  /* --- 印刷フッター --- */
  body::after {
    content: "※ 受験料・合格率は公式一次出典に基づきます。制度変更の可能性があるため、受験前に必ず各試験実施機関の公式サイトでご確認ください。　shikaku-compass.jp";
    display: block;
    font-size: 7pt;
    color: #666;
    border-top: 0.5pt solid #bbb;
    padding-top: 4pt;
    margin-top: 14pt;
  }

  /* --- ページ区切り制御 --- */
  h2, h3 { break-after: avoid; }
  table, .ymyl-box, .source-box { break-inside: avoid; }
  .main-col > * + * { margin-top: 0; }
}