/* ========= Exam Pages – Clean Centered UI ========= */
* { box-sizing: border-box }
:root{
  --ink:#0f172a;           /* 本文色 */
  --muted:#64748b;         /* 補助テキスト */
  --bg:#f7f9fc;            /* ページ背景 */
  --card:#ffffff;          /* カード背景 */
  --border:#e5e7eb;        /* 枠線 */
  --border-strong:#d8dde6; /* 少し強めの枠線 */
  --link:#2563eb;          /* リンク */
  --accent:#eef2ff;        /* アクセント背景 */
  --accent-strong:#dbeafe; /* アクセント濃いめ */
  --shadow:0 6px 20px rgba(15,23,42,.06);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --wrap:760px;            /* 読みやすい横幅 */
}

html,body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background: var(--bg);
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:28px 15px;
}

/* -------- Page header -------- */
.header,
.header h1{ text-align:center }
.header h1{
  margin:.2rem 0 .4rem;
  font-size:1.7rem;
  letter-spacing:.02em;
  color:#00b1c7;
  line-height:1.5;
}
.breadcrumbs{
  color:var(--muted);
  font-size:.93rem;
  margin:.1rem 0 1rem;
}

/* -------- Cards -------- */
.card{
  background:#DFEFED;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:18px 10px;
  margin:14px 0;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.card > header{
  text-align:center;
  margin-bottom:.35rem;
  padding-left:5px;
}
.q-num{ font-weight:700 }

/* -------- Text & links -------- */
.link{ color:var(--link); text-decoration:none }
.link:hover{ text-decoration:underline }
.note{ color:var(--muted); font-size:.95rem }

/* -------- Chips / tags -------- */
.chip{
  display:inline-flex;
  border:1px solid var(--accent-strong);
  background:var(--accent);
  color:#1e3a8a;
  border-radius:999px;
  padding:.15rem .65rem;
  font-size:.82rem;
}

/* -------- Question body -------- */
.q-stem{
  padding:12px 5px;
  margin:.55rem 0 .5rem;
  line-height:1.5;
  font-size:17px;
}

/* -------- Choices (1.2.3.4) -------- */
.q-choices{
  list-style:decimal inside;
  padding-left:0;
  margin:.5rem 0 0;
}
.q-choices li{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.48rem .7rem;
  margin:.38rem 0;
}

/* -------- Answer & details -------- */
.q-ans{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:.7rem .85rem;
  margin-top:.7rem;
}

.reveal{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:.65rem .85rem;
  margin-top:.8rem;
}
.reveal summary{
  display:inline-block;
  cursor:pointer;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.35rem .7rem;
  transition:background .15s ease,border-color .15s ease;
}
.reveal[open] summary{ background:var(--accent) }

/* -------- Sponsor block -------- */
.sponsor{
  margin:18px 0 6px;
  padding:14px;
  border:1px dashed var(--accent-strong);
  background:#f8fbff;
  border-radius:var(--radius-md);
  display: none;
}
.sponsor-head{
  font-size:.85rem;
  color:#475569;
  margin-bottom:6px;
  display:flex; align-items:center; gap:.5rem;
}
.badge-ad{
  font-size:.72rem;
  background:#eef;
  border:1px solid #cde;
  border-radius:999px;
  padding:.1rem .5rem;
}
.s-card{
  display:flex;
  gap:12px;
  text-decoration:none;
  color:inherit;
  align-items:center;
}
.s-card img{
  max-width:40%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.s-copy strong{ display:block; font-size:1rem; margin-bottom:4px }
.s-cta{
  border:1px solid #b6c3d6;
  background:#fff;
  border-radius:8px;
  padding:.4rem .8rem;
  display:inline-block;
}

/* -------- Footer -------- */
.footer{
  margin:2rem 0 .5rem;
  color:var(--muted);
  font-size:.92rem;
  text-align:center;
}

/* -------- Grid (list containers) -------- */
/* 基本は常に1カラム（＝資格ページはそのまま1列） */
.grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
/* スポンサー段抜き */
@media (min-width:980px){
  .sponsor{ grid-column:1 / -1 }
}

/* ===== ページ別の見出しサイズ ===== */
/* 資格一覧（/exam/index.html → .grid.grid-licenses） */
.grid.grid-licenses .card h2,
.grid.grid-licenses .card h2 a{
  font-size:1.20rem;   /* ←ここを好みで */
  line-height:1.35;
}

/* 年別（/exam/<lic>/index.html → .grid.grid-2years） */
.grid.grid-2years .card h2,
.grid.grid-2years .card h2 a{
  font-size:1.10rem;   /* ←ここを好みで */
  line-height:1.35;
}

/* ===== 年別ページだけ常時2カラム（スマホも2カラム） ===== */
.grid.grid-2years{
  grid-template-columns:repeat(2, minmax(150px, 1fr)); /* 超狭幅対策に最小幅を確保 */
  gap:16px;
  align-items:stretch;
}
/* 必要なら、極小端末だけ1列に戻す（任意） */
/*
@media (max-width:360px){
  .grid.grid-2years{ grid-template-columns:1fr; }
}
*/

/* -------- Focus ring for accessibility -------- */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--accent-strong);
  outline-offset:2px;
}

/* -------- Print (簡易) -------- */
@media print{
  .wrap{ max-width:100%; padding:0 }
  .card{ box-shadow:none }
  .sponsor, .s-cta{ display:none !important }
}

/* CTAボタン行 */
.cta-row{ margin-top:.7rem; display:inline-flex; gap:.5rem; flex-wrap:wrap }
.btn{
  display:inline-block;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border-strong);
  border-radius:10px;
  padding:.5rem .9rem;
  text-decoration:none;
}
.btn:hover{ background:#008E9F; text-decoration:none }
.btn-primary{ background:#00b1c7; border-color:#00b1c7; color:#fff }
.btn-primary:hover{ filter:brightness(0.95) }

/* 一覧の“正解：X”をコンパクト表示 */
.ans-inline{
  margin-top:.55rem;
  padding:.35rem .6rem;
  font-size:17px;
}

/* 横並びメタ行 */
.hmeta{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:.25rem;
}
.hmeta .qnum{ font-weight:700; font-size: 17px; }
.hmeta .year{ color:var(--muted); font-weight: 700; }

/* 見た目のアクセント（任意） */
.chip.subj{ /* 色替えなど必要ならここで */ }
.chip.sec{
  border-color:#fcd34d;
  background:#fffbeb;
  color:#92400e;
}

/* 一覧ページ この問題をアプリで解く（必要に応じて表示/非表示） */
.btn-practice{ display:none; }

/* 広告 一時的に非表示 */
/* .sponsor{ display:none !important; } */

/* 一覧ページ タグの非表示 */
.chip.sec{ display:none !important; }

/* === Site header (logo + nav) — compact === */
.site-header{ background:#fff; border-bottom:1px solid var(--border-strong); }
.site-header .inner{
  max-width:var(--wrap); margin:0 auto; padding:25px 15px;
  display:flex; align-items:center; gap:12px;
}
.site-header .brand{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.site-header .brand img{ height:32px; width:auto; display:block; }
.site-header .brand span{ font-weight:600; letter-spacing:.02em; }
.site-header .site-nav{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; display: none !important; }
.site-header .site-nav a{ color:var(--ink); text-decoration:none; padding:6px 10px; border-radius:8px; }
.site-header .site-nav a:hover{ background:#f3f4f6; }

/* === Responsive ≤600px (mobile) === */
@media (max-width:600px){
  .wrap{ padding:20px 12px; }
  .header h1{ font-size:1.4rem; }
  .card{ padding:14px 12px; margin:12px 0; margin-bottom:0; }
  .q-stem, .q-choices li{ font-size:16px; }
  .q-choices li{ padding:.52rem .7rem; }

  /* Header layout on small screens */
  .site-header .inner{ flex-wrap:wrap; gap:8px; }
  .site-header .brand{ width:100%; justify-content:center; }
  .site-header .site-nav{ width:100%; justify-content:center; gap:8px; }
  .site-header .site-nav a{ padding:8px 10px; }
}

/* === Touch targets (better tap) === */
@media (pointer:coarse){
  .btn, .q-choices li, .site-header .site-nav a{ min-height:44px; }
}

/* question images */
.q-figure{ margin:.5rem 0; text-align:center }
.q-figure img{
  max-width:100%;
  height:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}
.q-figure.thumb img{ max-height:220px; object-fit:contain }

/* === fixed footer (year list) === */
html { scroll-behavior: smooth; }
.fx-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#111827; color:#fff; border-top:1px solid #e5e7eb;
}
.fx-footer .inner{
  max-width:960px; margin:0 auto; padding:10px 16px;
  display:flex; gap:8px; align-items:center;
}
.fx-footer .spacer{ flex:1 }
.fx-footer a{
  display:inline-block; padding:.5rem .4rem; border-radius:10px;
  text-decoration:none; border:1px solid #334155; background:#1f2937; color:#fff;
}
.fx-footer a:hover{ filter:brightness(1.08) }
.fx-footer a.primary{ background:#2563eb; display: none; border-color:#2563eb }
@media (max-width:640px){ .fx-footer .inner{ justify-content:space-between } }

/* 最下部がフッターに隠れるのを回避 */
.wrap{ padding-bottom:90px; }

/* === 解答・解説ブロックの見出し（.q-ans h2） ===================== */
/* タイトめに：小さめサイズ＆下余白少なめ */
article .q-ans h2,
article .q-ans h2 a {
  margin: .1rem 0 .25rem;
  font-size: 1.30rem;  /* ←好みで 0.95〜1.10 に調整 */
  line-height: 1.35;
  font-weight: 700;    /* 見出しらしく太字（お好みで） */
}

/* 2つ目以降の見出しの前だけ少し間を空けたい場合（任意） */
article .q-ans h2:not(:first-of-type) {
  margin-top: .6rem;
}

/* 見出し直下の段落/リストの頭を軽く詰める（任意） */
article .q-ans h2 + * {
  margin-top: .8rem;
  font-size: 17px;
}

/* 一覧・詳細どちらにも「午前／午後」色を当てられます */
.chip.period{border-color:#bbf7d0;background:#ecfdf5;color:#065f46}