/* 過去問と解説のページ。
   屋敷(styles.css)とは別のCSS。屋敷は写真と仕掛けで重いが、
   このページは「読むだけ」なので軽いままにしておく。
   色は屋敷と同じ和の色を使い、文字の大きさと行間は読みやすさを優先する。 */

:root {
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "BIZ UDPGothic", "Meiryo", sans-serif;
  --kami: #f6efdd;          /* 生成りの紙 */
  --kami-fuchi: #ebe0c6;    /* 紙の縁・帯 */
  --sumi: #211812;          /* 墨(本文) */
  --sumi-usu: #5b4a3b;      /* 薄墨(そえ書き)。これより薄くしない */
  --bengara: #76392c;       /* 弁柄(リンク・見出しの罫) */
  --bengara-koi: #5a2a20;
  --keisen: #d3c3a1;        /* 罫線 */
  --ki: #4a2b19;            /* 木(ヘッダー) */
  --aka: #b3241c;          /* 用語の赤。黄マーカーの上でも紙の上でも5.3:1以上 */
  --marker: #ffe680;       /* 用語の黄マーカー */
  --marker-koi: #ffd84d;   /* 同・触れたとき */
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--kami);
  color: var(--sumi);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--ki);
  color: var(--kami);
}

.skip-link:focus { left: 8px; top: 8px; }

/* ---- 見出し(表紙) ---- */

.hon-atama {
  padding: 24px 16px 32px;
  border-bottom: 2px solid var(--bengara);
  background: var(--kami-fuchi);
}

.hon-atama__naka { max-width: 720px; margin: 0 auto; }

/* 表紙は「左に書名・右に案内」の2段組。狭い画面では案内が下へ回る */
.hon-atama__dan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 16px 0 0;
}

.hon-atama__hidari { min-width: 0; }

.hon-atama__annai {
  flex: 1 1 280px;
  max-width: 34ch;
  margin: 0;
  color: var(--aka);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.modoru {
  display: inline-block;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--bengara);
  border-radius: 8px;
  background: var(--kami);
  color: var(--bengara-koi);
  font-size: 16px;
  text-decoration: underline;
}

.modoru:hover { background: #fff; }
.modoru:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

.hon-atama .kai {
  margin: 24px 0 0;
  color: var(--sumi-usu);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.hon-atama h1 {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.hon-atama .soe { margin: 8px 0 0; color: var(--sumi-usu); font-size: 16px; }

/* ---- 通し過去問の科目リンク ---- */

.kamoku-nav {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0 16px;
}

.kamoku-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kamoku-nav a {
  display: block;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--keisen);
  border-radius: 8px;
  background: #fff;
  color: var(--bengara-koi);
  font-size: 16px;
  text-align: center;
  text-decoration: underline;
}

.kamoku-nav a:hover { border-color: var(--bengara); }
.kamoku-nav a:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

/* ---- 問題 ---- */

main { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }

.toi {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--keisen);
}

.toi:first-child { border-top: 0; }

.toi h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.toi-lead { margin: 0 0 16px; }

.jirei {
  margin: 0 0 16px;
  padding: 16px;
  border-left: 4px solid var(--keisen);
  background: #fffdf6;
}

.chuuki {
  margin: 0 0 16px;
  padding-left: 1em;
  color: var(--sumi-usu);
  font-size: 16px;
  text-indent: -1em;
}

/* 選択肢。番号は自前で振る(丸数字は環境で崩れるため使わない) */
.sentakushi { margin: 0; padding: 0; list-style: none; counter-reset: sentakushi; }

.sentakushi li {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 12px 12px 48px;
  border: 1px solid var(--keisen);
  border-radius: 8px;
  background: #fff;
  counter-increment: sentakushi;
}

.sentakushi li::before {
  content: counter(sentakushi);
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 26px;
  height: 26px;
  align-content: center;
  justify-content: center;
  border: 1px solid var(--bengara);
  border-radius: 50%;
  color: var(--bengara-koi);
  font-size: 15px;
  line-height: 1;
}

/* ---- 選んで答え合わせをする選択肢（親サイトの模擬テストと同じ考え方） ---- */
.sentakushi--erabu li { margin: 0 0 12px; padding: 0; border: 0; background: none; }
.sentakushi--erabu li::before { display: none; }

.erabu {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--keisen);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

/* 実物のラジオ・チェックは隠し、丸数字そのものを選ぶ的にする */
.erabu-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.erabu-no {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  align-content: center;
  justify-content: center;
  border: 1px solid var(--bengara);
  border-radius: 50%;
  color: var(--bengara-koi);
  font-size: 15px;
  line-height: 1;
}

.erabu:focus-within { outline: 3px solid rgba(118, 57, 44, 0.32); outline-offset: 2px; }
.erabu.is-selected { padding: 11px; border: 2px solid var(--bengara); background: #f5e6c8; font-weight: 700; }
.erabu.is-selected .erabu-no { background: var(--bengara); color: #fff; }
.erabu.is-owari { cursor: default; }
.erabu.is-atari,
.erabu.is-hazure { padding: 11px; }
.erabu.is-atari { border: 2px solid #2d6f51; background: #eaf5ee; }
.erabu.is-hazure { border: 2px solid #9c392d; background: #fceee9; }
.erabu.is-atari .erabu-no { background: #2d6f51; color: #fff; }
.erabu.is-hazure .erabu-no { background: #9c392d; color: #fff; }

.kotae-sousa { margin: 14px 0 0; }

.kotae-check {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--bengara);
  border-radius: 6px;
  background: var(--bengara);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.kotae-check:hover { background: var(--bengara-koi); }
.kotae-check:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }

.kotae-hantei { margin: 12px 0 0; padding: 12px 14px; border-radius: 6px; font-weight: 700; }
.kotae-hantei.is-atari { background: #eaf5ee; color: #215a40; }
.kotae-hantei.is-hazure,
.kotae-hantei.is-tarinai { background: #fceee9; color: #7f3025; }

/* ---- 解説(開くまで答えは見えない) ---- */

.kaisetsu { margin: 16px 0 0; border: 1px solid var(--bengara); border-radius: 12px; background: #fffdf6; }

.kaisetsu > summary {
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 11px;
  color: var(--bengara-koi);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.kaisetsu > summary::-webkit-details-marker { display: none; }

.kaisetsu > summary::before {
  content: "＋ ";
  font-weight: 700;
}

.kaisetsu[open] > summary {
  border-bottom: 1px solid var(--keisen);
  border-radius: 11px 11px 0 0;
  background: var(--kami-fuchi);
}

.kaisetsu[open] > summary::before { content: "− "; }

.kaisetsu > summary:hover { background: var(--kami-fuchi); }
.kaisetsu > summary:focus-visible { outline: 3px solid var(--bengara); outline-offset: -3px; }

.kaisetsu-naka { padding: 16px; }

.seitou {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--bengara);
  background: var(--kami-fuchi);
  font-weight: 700;
}

/* 通し過去問は正答だけを載せ、詳しい解説は分野別の本へつなぐ。 */
.tsushi-kotae {
  margin: 20px 0 0;
  border: 1px solid #899775;
  border-radius: 10px;
  background: #f1f2e7;
}

.tsushi-kotae summary {
  min-height: 44px;
  padding: 12px 16px;
  color: var(--bengara-koi);
  cursor: pointer;
  font-weight: 700;
}

.tsushi-kotae summary:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }

.tsushi-kotae-naka { padding: 0 16px 16px; }

.tsushi-kotae .seitou { margin-bottom: 8px; }

.tsushi-kaisetsu-link {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--bengara-koi);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
}

.tsushi-kaisetsu-link:focus-visible {
  outline: 3px solid var(--bengara);
  outline-offset: 2px;
}

.tsushi-page .hon-atama {
  border-bottom-color: #52695a;
  background: linear-gradient(90deg, #e3e3cf, var(--kami-fuchi));
}

/* ---- 60問まとめての採点(通し過去問だけ) ----
   JavaScriptが動かないと採点できないので、HTMLでは hidden にしておき、
   kakomon-kotae.js が動いたときだけ表示する。 */

.saiten {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 20px 18px 22px;
  border: 2px solid var(--bengara);
  border-radius: 12px;
  background: #fffdf6;
}

.saiten h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

.saiten-annai { margin: 0 0 6px; color: var(--sumi-usu); font-size: 15px; }
.saiten-susumi { margin: 0 0 14px; font-size: 16px; }
.saiten-erabizumi { font-size: 20px; }

.saiten-sousa { margin: 0; }

.saiten-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--bengara);
  border-radius: 6px;
  background: var(--bengara);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
}

.saiten-button:hover { background: var(--bengara-koi); }
.saiten-button:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }

.saiten-kekka { margin: 20px 0 0; }

.saiten-hyou {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.saiten-hyou caption {
  padding-bottom: 6px;
  color: var(--sumi-usu);
  font-size: 15px;
  text-align: left;
}

.saiten-hyou th,
.saiten-hyou td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--keisen);
  text-align: left;
  vertical-align: top;
}

.saiten-hyou thead th {
  border-bottom: 2px solid var(--bengara);
  color: var(--bengara-koi);
  font-size: 15px;
}

.saiten-hyou tbody th { font-weight: 700; }
.saiten-ten { font-size: 22px; }

.saiten-hyou tr.is-todoita .saiten-ten { color: #215a40; }
.saiten-hyou tr.is-todokazu .saiten-ten { color: #7f3025; }
.saiten-todoita { color: #215a40; font-weight: 700; }
.saiten-todokazu { color: #7f3025; font-weight: 700; }

.saiten-matome {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-weight: 700;
}

.saiten-matome.is-todoita { background: #eaf5ee; color: #215a40; }
.saiten-matome.is-todokazu { background: #fceee9; color: #7f3025; }

.saiten-michi { margin: 12px 0 0; font-size: 16px; }

.saiten-machigai { margin: 16px 0 0; }

.saiten-machigai h3 {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--keisen);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}

.saiten-machigai-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.saiten-machigai-list li { display: flex; }

.saiten-machigai-list a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--keisen);
  border-radius: 6px;
  background: var(--kami);
  color: var(--bengara-koi);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.saiten-machigai-list a:hover { border-color: var(--bengara); }
.saiten-machigai-list a:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

/* 未回答の札は、点数に数えられていないことがひと目で分かるよう色を落とす */
.saiten-machigai-list a.is-michi { border-style: dashed; background: transparent; color: var(--sumi-usu); }
.saiten-michi-shirushi { margin-left: 6px; font-size: 13px; font-weight: 400; }

.saiten-shutten { margin: 16px 0 0; color: var(--sumi-usu); font-size: 14px; line-height: 1.6; }

/* 未回答のまま採点された問題の知らせ。正解・不正解とは別の色にする。 */
.kotae-hantei.is-michi { background: var(--kami-fuchi); color: #4a3a24; }


.kaisetsu-naka h3 {
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--keisen);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.kaisetsu-naka p { margin: 0 0 12px; }
.kaisetsu-naka ul { margin: 0 0 12px; padding-left: 1.4em; }
.kaisetsu-naka li { margin: 0 0 4px; }

/* 選択肢ごとの解説 */
.eda { margin: 0; padding: 0; list-style: none; counter-reset: eda; }

.eda > li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 40px;
  counter-increment: eda;
}

.eda > li::before {
  content: counter(eda);
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 26px;
  height: 26px;
  align-content: center;
  justify-content: center;
  border: 1px solid var(--sumi-usu);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}

.eda > li.atari::before {
  border-color: var(--bengara);
  background: var(--bengara);
  color: #fff;
}

/* 選択肢の解説の冒頭の判定。〇✕と「適切／不適切」を赤太字にして、
   答えを見たときに正誤がひと目で分かるようにする。 */
.eda .hantei {
  color: var(--aka);
  font-weight: 700;
}

.hokaisei {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--bengara);
  border-radius: 8px;
  background: #fff;
}

.hokaisei b {
  display: block;
  margin: 0 0 8px;
  color: var(--bengara-koi);
  font-size: 16px;
}

/* ---- 専門用語の説明（解説の中の点線の語を押すと開く） ---- */

.term-annai-wrap {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 16px;
}

.term-annai {
  margin: 0;
  color: var(--sumi-usu);
  font-size: 16px;
}

/* 押せる語の見せ方は、案内の見本(.term-annai b)と揃える */
.term-annai b,
.term-link {
  padding: 0 2px;
  border: 0;
  background: linear-gradient(transparent 58%, var(--marker) 58%);
  color: var(--aka);
  font-weight: 700;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}

.term-link {
  /* 長い用語（「地域密着型介護老人福祉施設入所者生活介護」など）が
     一続きの箱にならず、本文と同じように行をまたげるようにする。
     行をまたいでもマーカーが途切れないよう box-decoration-break を付ける。 */
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: normal;
  /* ボタンの既定は中央揃え。長い用語が折り返したとき2行目が中央に寄るので本文に合わせる */
  text-align: inherit;
  cursor: pointer;
}

.term-link:hover {
  background: linear-gradient(transparent 58%, var(--marker-koi) 58%);
  text-decoration-style: solid;
}
.term-link:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

.term-dialog {
  width: min(calc(100vw - 32px), 480px);
  max-height: min(80vh, 640px);
  padding: 24px;
  overflow-y: auto;
  border: 1px solid var(--bengara);
  border-radius: 12px;
  background: #fffdf6;
  color: var(--sumi);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(33, 24, 18, 0.24);
}

.term-dialog::backdrop { background: rgba(33, 24, 18, 0.5); }

.term-dialog-label {
  margin: 0 0 8px;
  color: var(--sumi-usu);
  font-size: 16px;
}

.term-dialog-word {
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--keisen);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.term-dialog-yomi {
  margin-left: 8px;
  color: var(--sumi-usu);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
}

.term-dialog-naka p { margin: 0 0 16px; }
.term-dialog-naka ul { margin: 0 0 16px; padding-left: 1.4em; }
.term-dialog-naka li { margin: 0 0 4px; }

.term-dialog-close {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--bengara);
  border-radius: 8px;
  background: var(--kami);
  color: var(--bengara-koi);
  font-family: var(--sans);
  font-size: 16px;
  cursor: pointer;
}

.term-dialog-close:hover { background: var(--kami-fuchi); }
.term-dialog-close:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

/* ---- なぞって選んだ言葉を調べる案内 ---- */

.sagasu {
  position: absolute;
  z-index: 20;
  width: min(300px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--bengara);
  border-radius: 12px;
  background: #fffdf6;
  box-shadow: 0 2px 8px rgba(33, 24, 18, 0.24);
}

.sagasu[hidden] { display: none; }

.sagasu-word {
  margin: 0 0 8px;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sagasu-yougo {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--bengara);
  border-radius: 8px;
  background: var(--kami-fuchi);
  color: var(--bengara-koi);
  font-family: var(--sans);
  font-size: 16px;
  cursor: pointer;
}

.sagasu-yougo[hidden] { display: none; }

.sagasu-label {
  margin: 0 0 8px;
  color: var(--sumi-usu);
  font-size: 16px;
}

.sagasu-row { display: flex; gap: 8px; }

.sagasu-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 4px;
  border: 1px solid var(--bengara);
  border-radius: 8px;
  background: var(--kami);
  color: var(--bengara-koi);
  font-family: var(--sans);
  font-size: 16px;
  cursor: pointer;
}

.sagasu-yougo:hover,
.sagasu-btn:hover { background: var(--kami-fuchi); }

.sagasu-yougo:focus-visible,
.sagasu-btn:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

.sagasu-soe {
  margin: 8px 0 0;
  color: var(--sumi-usu);
  font-size: 14px;
  line-height: 1.5;
}

.sagasu-shirase {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: var(--bengara-koi);
  font-size: 14px;
}

/* ---- 一問一答 ---- */

.drill-page { background: var(--kami); }
.drill-main { max-width: 760px; margin: 0 auto; padding: 28px 16px 56px; }

.drill-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--keisen);
  border-radius: 8px;
  background: #fffdf7;
}

.drill-controls label { display: block; margin: 0 0 7px; font-weight: 700; }
.drill-controls select {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 2px solid var(--bengara);
  border-radius: 6px;
  background: #fff;
  color: var(--sumi);
  font: inherit;
}

.drill-next,
.drill-check,
.drill-next-question,
.drill-print,
.drill-reset,
.drill-memo-clear,
.drill-return {
  min-height: 46px;
  padding: 9px 18px;
  border: 1px solid var(--bengara-koi);
  border-radius: 6px;
  background: var(--ki);
  color: var(--kami);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.drill-next:hover,
.drill-check:hover { background: var(--bengara-koi); }

.drill-next:focus-visible,
.drill-check:focus-visible,
.drill-next-question:focus-visible,
.drill-print:focus-visible,
.drill-reset:focus-visible,
.drill-memo-clear:focus-visible,
.drill-return:focus-visible,
.drill-controls select:focus-visible {
  outline: 3px solid var(--bengara);
  outline-offset: 2px;
}

.drill-next-question,
.drill-print,
.drill-reset,
.drill-memo-clear,
.drill-return {
  border-color: var(--bengara);
  background: var(--kami);
  color: var(--bengara-koi);
}

.drill-next-question:hover,
.drill-print:hover,
.drill-reset:hover,
.drill-memo-clear:hover,
.drill-return:hover { background: var(--kami-fuchi); }

.drill-count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--sumi-usu);
  font-size: 15px;
}

.drill-results {
  margin: 0 0 28px;
  padding: 20px;
  border: 2px solid var(--bengara);
  border-radius: 8px;
  background: #fffaf0;
}

.drill-results > h2,
.drill-result-section h3 { margin: 0 0 12px; font-family: var(--serif); }

.drill-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 16px 0;
  border-top: 1px solid var(--keisen);
  border-left: 1px solid var(--keisen);
}

.drill-summary dt,
.drill-summary dd {
  margin: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--keisen);
  border-bottom: 1px solid var(--keisen);
}

.drill-summary dt { background: var(--kami-fuchi); font-weight: 700; }
.drill-print, .drill-reset { margin: 0 8px 10px 0; }
.drill-print:disabled { cursor: default; opacity: 0.55; }
.drill-history { margin-top: 8px; border-top: 1px solid var(--keisen); }
.drill-history summary { min-height: 44px; padding: 12px 2px 2px; color: var(--bengara-koi); font-weight: 700; cursor: pointer; }
.drill-result-section { margin-top: 22px; }
.drill-wrong-list { padding-left: 24px; }
.drill-wrong-list p { margin: 0 0 8px; }

.drill-question {
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--keisen);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 3px 12px rgba(60, 35, 10, 0.09);
}

.drill-question[hidden] { display: none; }
.drill-meta { margin: 0 0 10px; color: var(--sumi-usu); font-size: 15px; }
.drill-question h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; }
.drill-stem { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.9; }
.drill-jirei { margin: 0 0 16px; padding: 14px 16px; border-left: 4px solid var(--bengara); background: var(--kami-fuchi); }
.drill-jirei p { margin: 0; white-space: pre-line; }

.drill-choices { margin: 0; padding: 0; list-style: none; }
.drill-choices li { margin: 0 0 9px; }
.drill-choice {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--keisen);
  border-radius: 6px;
  background: #fff;
  color: var(--sumi);
  line-height: 1.65;
  cursor: pointer;
}

.drill-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drill-choice:focus-within { outline: 3px solid rgba(118, 57, 44, 0.32); outline-offset: 2px; }
.drill-choice-no {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kami-fuchi);
  color: var(--bengara-koi);
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.drill-choice.is-selected { padding: 11px 13px; border: 2px solid var(--bengara); background: #f5e6c8; font-weight: 700; }
.drill-choice.is-selected .drill-choice-no { background: var(--bengara); color: #fff; }
.drill-choice.is-disabled { cursor: default; }
.drill-choice.is-correct,
.drill-choice.is-wrong { padding: 11px 13px; }
.drill-choice.is-correct { border: 2px solid #2d6f51; background: #eaf5ee; }
.drill-choice.is-wrong { border: 2px solid #9c392d; background: #fceee9; }
.drill-choice.is-correct .drill-choice-no { background: #2d6f51; color: #fff; }
.drill-choice.is-wrong .drill-choice-no { background: #9c392d; color: #fff; }

.drill-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.drill-result { margin: 18px 0 0; padding: 12px 14px; border-radius: 6px; font-weight: 700; }
.drill-result.is-correct { background: #eaf5ee; color: #215a40; }
.drill-result.is-wrong { background: #fceee9; color: #7f3025; }
.drill-answer { margin: 16px 0 0; border: 1px solid var(--keisen); border-radius: 6px; background: var(--kami); }
.drill-answer[hidden] { display: none; }
.drill-answer summary { min-height: 44px; padding: 12px 14px; color: var(--bengara-koi); font-weight: 700; cursor: pointer; }
.drill-answer-inner { padding: 0 16px 16px; border-top: 1px solid var(--keisen); }
.drill-answer-inner p,
.drill-answer-inner li { line-height: 1.85; }
.drill-seito { color: var(--aka); font-size: 19px; font-weight: 800; }
.drill-explanation h3,
.drill-choice-explanations h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 18px; }
.drill-explanation p { margin: 8px 0; }
/* 選択肢ごとの解説は過去問ページと同じ丸数字の一覧(.eda)と赤太字の判定(.hantei)を使う */
.drill-choice-explanations .eda { margin: 8px 0 0; }
.drill-reference { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--keisen); }
.drill-reference a { color: var(--bengara-koi); }
.drill-learning-point { margin-top: 18px; padding: 12px 14px; border-left: 4px solid var(--bengara); background: #fff8e8; line-height: 1.8; }

.drill-question-memo { margin-top: 18px; padding: 16px; border: 1px solid var(--keisen); border-radius: 6px; background: #fffaf0; }
.drill-question-memo h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 18px; }
.drill-memo-input { display: block; width: 100%; min-height: 8rem; padding: 10px 12px; border: 1px solid var(--keisen); border-radius: 4px; background: #fff; color: var(--sumi); font: inherit; line-height: 1.7; resize: vertical; }
.drill-memo-input:focus { border-color: var(--bengara); outline: 3px solid rgba(118, 57, 44, 0.22); outline-offset: 1px; }
.drill-memo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 9px; }
.drill-memo-status { margin: 0; color: var(--sumi-usu); font-size: 14px; }
.drill-memo-note { margin: 10px 0 0; color: var(--sumi-usu); font-size: 14px; line-height: 1.6; }
.drill-print-card { margin: 14px 0; padding: 15px 16px; border: 1px solid var(--keisen); border-radius: 6px; background: #fff; }
.drill-print-card h3 { margin: 0 0 10px; font-size: 17px; }
.drill-print-card p { margin: 7px 0; line-height: 1.7; }
.drill-printed-memo { white-space: pre-wrap; }
.drill-note, .drill-noscript { margin: 38px 0 0; padding: 20px; border: 1px solid var(--keisen); border-radius: 8px; background: #fffdf7; }
.drill-note h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 20px; }
.drill-note p { margin: 12px 0 0; line-height: 1.85; }
.drill-print-header, .drill-print-overall, .drill-print-report { display: none; }

@media (hover: hover) {
  .drill-choice:not(.is-selected):not(.is-correct):not(.is-wrong):hover { border-color: var(--bengara); background: #fffaf0; }
}

@media (max-width: 560px) {
  .drill-main { padding-right: 12px; padding-left: 12px; }
  .drill-controls { grid-template-columns: 1fr; padding: 16px; }
  .drill-next { width: 100%; }
  .drill-question { padding: 18px 14px; }
  .drill-stem { font-size: 17px; }
  .drill-summary { grid-template-columns: 1fr 1fr; }
}

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body.drill-page { background: #fff; color: #000; font-size: 10.5pt; }
  .drill-page > header,
  .drill-page > footer,
  .drill-controls,
  .drill-list,
  .drill-note,
  .drill-print,
  .drill-reset,
  .drill-return,
  .drill-page .term-annai,
  .drill-page .term-dialog,
  .drill-page .sagasu,
  .drill-page noscript,
  .kotae-sousa { display: none !important; }
  .drill-main, .drill-results { max-width: none; margin: 0; padding: 0; }
  .drill-results { border: 0; background: #fff; }
  .drill-results > h2, .drill-history { display: none !important; }
  .drill-print-header, .drill-print-overall, .drill-print-report { display: block; }
  .drill-print-header { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #000; }
  .drill-print-header p { margin: 3px 0; }
  .drill-print-header h2 { margin: 5px 0 9px; font-size: 18pt; }
  .drill-print-subject-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .drill-print-subject-table th, .drill-print-subject-table td { padding: 5px 6px; border: 1px solid #777; text-align: left; }
  .drill-print-subject-table th { background: #eee; }
  .drill-print-report > section, .drill-print-card { break-inside: avoid; }
}

/* ---- 足もと ---- */

.hon-ashi {
  padding: 32px 16px 48px;
  border-top: 2px solid var(--bengara);
  background: var(--kami-fuchi);
}

.hon-ashi__naka { max-width: 720px; margin: 0 auto; }

.hon-ashi h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.tonari { margin: 0 0 32px; padding: 0; list-style: none; }
.tonari li { margin: 0 0 8px; }

.tonari a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--bengara-koi);
  font-size: 17px;
  text-decoration: underline;
}

.tonari a:focus-visible { outline: 3px solid var(--bengara); outline-offset: 2px; }

.hon-ashi p { margin: 0 0 8px; color: var(--sumi-usu); font-size: 16px; }
.hon-ashi .kotowari { padding-top: 8px; border-top: 1px solid var(--keisen); }

ruby rt { font-size: 0.5em; }

@media (max-width: 480px) {
  .hon-atama h1 { font-size: 26px; }
  .toi h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- 通し模試 ---- */

.page-moshi { padding-bottom: 76px; }
.moshi-annai, .moshi-kekka {
  max-width: 720px;
  margin: 28px auto;
  padding: 22px 24px;
  border: 1px solid var(--keisen);
  border-radius: 7px;
  background: #fffdf7;
  box-shadow: 0 7px 20px rgba(55, 38, 23, .08);
}
.moshi-annai h2, .moshi-kekka h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; }
.moshi-annai h2 + ul { margin-top: 0; }
.moshi-annai ul { margin: 0 0 18px; padding-left: 1.4em; line-height: 1.8; }
.moshi-annai li + li { margin-top: 5px; }
.moshi-resume {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--bengara);
  background: var(--kami-fuchi);
}
.moshi-resume button, .moshi-btn, .moshi-btn-sub {
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid var(--bengara-koi);
  border-radius: 4px;
  background: var(--bengara-koi);
  color: #fffdf8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.moshi-resume button { margin-left: 10px; }
.moshi-btn-sub { background: transparent; color: var(--bengara-koi); }
.moshi-progress {
  position: fixed;
  z-index: 10;
  right: 16px;
  bottom: 86px;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--keisen);
  border-radius: 5px;
  background: rgba(255, 253, 247, .95);
  color: var(--sumi-usu);
  box-shadow: 0 4px 14px rgba(55, 38, 23, .14);
  font-size: 13px;
}
.moshi-progress b { color: var(--bengara-koi); font-size: 16px; }
.moshi-kamoku {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 11px 17px;
  border-left: 5px solid var(--bengara);
  background: var(--kami-fuchi);
  font-family: var(--serif);
  font-size: 22px;
}
.moshi-toi .moshi-hantei { margin-left: 10px; font-size: 15px; }
.hantei-maru { color: #226347; }
.hantei-batsu, .hantei-nashi { color: var(--bengara-koi); }
.moshi-erabu { transition: border-color .15s ease, background .15s ease; }
.moshi-erabu.erabi { border-color: var(--bengara); background: #fff5e5; }
.moshi-tadashii { border-left: 5px solid #3e7b55; }
.moshi-machigai { border-left: 5px solid var(--bengara); }
.moshi-seitou {
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--keisen);
  background: var(--kami-fuchi);
}
.moshi-kaisetsu { margin-left: 14px; color: var(--bengara-koi); font-weight: 700; }
.moshi-kekka h3 { margin: 26px 0 9px; font-family: var(--serif); font-size: 19px; }
.moshi-kekka table { width: 100%; border-collapse: collapse; }
.moshi-kekka th, .moshi-kekka td { padding: 9px 8px; border: 1px solid var(--keisen); text-align: left; vertical-align: middle; }
.moshi-kekka th { background: var(--kami-fuchi); }
.moshi-kekka .bunya-abunai { background: #fff1e8; }
.bunya-ok { color: #226347; font-weight: 700; }
.bunya-ng { color: var(--bengara-koi); font-weight: 700; }
.kmk-bar { display: block; min-width: 3px; height: 10px; border-radius: 5px; background: #4e7353; transition: width .25s ease; }
.kmk-yowai .kmk-bar { background: var(--bengara); }
.moshi-kekka li { margin: 8px 0; line-height: 1.7; }
.moshi-bar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 16px;
  border-top: 1px solid var(--keisen);
  background: rgba(43, 30, 19, .96);
  color: #fffdf8;
}
.moshi-bar[hidden], .moshi-progress[hidden] { display: none; }

@media (max-width: 560px) {
  .moshi-annai, .moshi-kekka { margin: 18px 12px; padding: 18px 14px; }
  .moshi-kamoku { margin: 34px 12px 0; font-size: 20px; }
  .moshi-progress { right: 10px; bottom: 130px; }
  .moshi-bar { flex-wrap: wrap; gap: 7px 10px; min-height: 70px; font-size: 14px; }
  .moshi-bar .moshi-btn, .moshi-bar .moshi-btn-sub { min-height: 36px; }
  .moshi-kekka { overflow-x: auto; }
  .moshi-kekka table { min-width: 500px; font-size: 14px; }
}