/* ==================================================================
   本のページ(科目の目次)
   ================================================================== */
body.page-book { background: var(--paper); }
.page-book main { max-width: 760px; }
.page-book .breadcrumb { color: var(--text-sub-dark); }

.book-head { display: flex; gap: 28px; align-items: center; margin: 24px 0 8px; }
.book-cover {
  flex: 0 0 auto;
  width: 128px; height: 184px; border-radius: 4px 10px 10px 4px;
  box-shadow: -6px 10px 18px rgba(60,35,10,.25), inset 10px 0 0 rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  padding: 10px 10px 10px 18px;
}
.book-cover span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 700;
  line-height: 1.35; letter-spacing: .08em; font-size: 17px;
  max-height: 100%;
}
.book-head-text h1 { margin: 0 0 8px; font-family: var(--serif); }
.book-lede { margin: 0; color: var(--text-sub-dark); }

.mokuji h2 { font-family: var(--serif); font-size: 22px; }
.page-book .index-list li { background: #FFFFFF; border-color: #D8CBB2; }
.toc-kai { font-weight: 700; margin-right: 16px; }
.toc-range { color: var(--text-sub-dark); font-size: 15px; }
.mokuji-note { color: var(--text-sub-dark); font-size: 14px; }

@media (max-width: 480px) {
  .book-head { gap: 18px; }
  .book-cover { width: 104px; height: 150px; }
}

/* ==================================================================
   資料のページ(講義資料などの読み物)
   色は青1色。赤や緑は「エラー」「完了」の意味に取ってあるので、
   強調は太字と、うすい青の囲みだけで行う。
   ================================================================== */
body.page-shiryou { background: var(--paper); }
.page-shiryou main { max-width: 760px; }
.page-shiryou .breadcrumb { color: var(--text-sub-dark); }
.page-shiryou .index-list li { background: #FFFFFF; border-color: #D8CBB2; }
.sr-katagaki { margin: 0 0 8px; color: var(--text-sub-dark); font-size: 16px; }
.sr-toc a { padding: 12px 16px; }

.sr-section { margin: 48px 0 0; }
.sr-section h2 {
  font-family: var(--serif); font-size: 24px; line-height: 1.5;
  margin: 0 0 8px; padding: 0 0 8px;
  border-bottom: 2px solid var(--blue);
}
.sr-sub { margin: 0 0 16px; color: var(--text-sub-dark); }
.sr-section p { margin: 16px 0; }

.sr-ul { margin: 16px 0; padding-left: 24px; }
.sr-ul li { margin: 8px 0; }

.sr-dl { margin: 16px 0; }
.sr-dl dt {
  font-weight: 700; margin: 16px 0 0;
  padding-left: 12px; border-left: 4px solid var(--blue);
}
.sr-dl dd { margin: 8px 0 0 16px; }

/* 表(スマホでは横にスクロールできるようにする) */
.sr-table-waku { margin: 16px 0; overflow-x: auto; }
.sr-table { border-collapse: collapse; width: 100%; min-width: 320px; background: #FFFFFF; }
.sr-table caption {
  text-align: left; font-weight: 700; margin: 0 0 8px;
}
.sr-table th, .sr-table td {
  border: 1px solid var(--line); padding: 12px 16px; text-align: left;
  vertical-align: top; line-height: 1.6;
}
.sr-table thead th { background: var(--bg-gray); font-weight: 700; white-space: nowrap; }
.sr-table tbody th { background: #FAF7F1; font-weight: 700; }
/* 列の幅(haba)を書いた表は、その幅どおりに割り付ける
   (自動にまかせると、1列だけ細長くなって読みにくくなることがある) */
.sr-table:has(col) { table-layout: fixed; }

/* 注意やポイントの囲み */
.sr-box {
  margin: 24px 0; padding: 16px 20px;
  background: var(--blue-pale);
  border: 1px solid #B9CFF0; border-radius: 8px;
}
.sr-box-midashi { font-weight: 700; margin: 0 0 8px !important; }
.sr-box p:last-child, .sr-box .sr-ul { margin-bottom: 0; }
.sr-box .sr-ul { margin-top: 8px; }

/* 図・写真。クレジットは写真のすぐ下に小さく置く
   (日本語の短いもの＋英語の正式表記。よそから借りた写真は正式表記を必ず残す) */
.sr-zu { margin: 24px 0; max-width: 100%; }
.sr-zu img {
  display: block; width: 100%; height: auto;
  background: #FFFFFF;
  border: 1px solid #D8CBB2; border-radius: 4px;
}
/* 大きな図(横に長い参考チャートなど)。本文の幅(760px)に収めると字が読めないので、
   画面の幅いっぱいまでせり出させる。押すと元の大きさで別のタブに開く。
   100vw は縦スクロールバーのぶんを含むので、40px 引いて横スクロールを出さない */
.sr-zu-ookii {
  width: min(1240px, calc(100vw - 40px));
  /* .sr-zu の max-width:100% は本文の幅(760px)で止めてしまうので外す */
  max-width: none;
  margin-left: 50%; transform: translateX(-50%);
}
.sr-zu-link { display: block; }
.sr-zu-link:hover img, .sr-zu-link:focus-visible img { border-color: var(--blue); }
.sr-zu-hint { display: block; margin-top: 4px; font-size: 14px; color: var(--text-sub-dark); }
.sr-zu figcaption { margin: 8px 0 0; }
.sr-zu-cap { display: block; font-size: 16px; color: var(--text-sub-dark); line-height: 1.6; }
.sr-zu-credit {
  display: block; margin-top: 4px;
  font-size: 14px; color: var(--text-sub-dark); line-height: 1.5;
}

/* 引用(原文のまま載せる。どこからどこまでが引用かがはっきり分かる形にする) */
.sr-quote { margin: 24px 0; padding: 0; }
.sr-quote blockquote {
  margin: 0; padding: 16px 20px;
  background: #FFFFFF;
  border-left: 4px solid var(--blue);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
}
.sr-quote figcaption {
  margin: 8px 0 0; padding-left: 24px;
  color: var(--text-sub-dark); font-size: 16px;
}

.sr-shutten { margin: 48px 0 0; }
.sr-shutten h2 { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; }
.sr-atogaki {
  margin: 32px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-sub-dark); font-size: 16px;
}
.sr-atogaki p { margin: 0; }

@media (max-width: 480px) {
  .sr-section h2 { font-size: 20px; }
  .sr-table th, .sr-table td { padding: 10px 12px; }
}

/* ==================================================================
   次に読む(ページの終わりの案内)
   読み終わったところが行き止まりにならないように、前後の本へつなぐ
   (2026-08-15にばっふぁさんの判断で追加)。
   ・過去問・資料・スライドの全ページの終わりに出る
   ・並び順は棚の並びそのままなので、本を足せば自動で付いてくる
   ・カーソルを合わせたときは、下地と文字の色を入れ替える
     (青い字のままだと、うすい下地で読みにくいため。案内板と同じ考え方)
   ================================================================== */
.tsugi {
  margin: 48px 0 0; padding-top: 20px;
  border-top: 2px solid var(--line);
}
.tsugi-midashi {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--lib-ink);
}
.tsugi-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
/* 「前の本」が無いときは、「次の本」を右側のままにせず左に詰める */
.tsugi-list > .tsugi-tsugi:only-child { grid-column: 2; }
.tsugi-item {
  display: flex; flex-direction: column; gap: 4px;
  height: 100%; padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #D8CBB2; border-radius: 6px;
  text-decoration: none; color: var(--blue);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tsugi-muki {
  font-size: 13px; letter-spacing: .08em;
  color: var(--text-sub-dark);
  transition: color .25s ease;
}
.tsugi-tsugi .tsugi-item { text-align: right; }
.tsugi-title {
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  line-height: 1.5; text-decoration: underline; text-underline-offset: 3px;
}
.tsugi-item:hover, .tsugi-item:focus-visible {
  background: var(--blue); color: #FFFFFF; border-color: var(--blue-dark);
}
.tsugi-item:hover .tsugi-muki, .tsugi-item:focus-visible .tsugi-muki { color: #FFFFFF; }
.tsugi-hoka { margin: 14px 0 0; font-size: 15px; }

@media (max-width: 560px) {
  .tsugi-list { grid-template-columns: 1fr; }
  .tsugi-list > .tsugi-tsugi:only-child { grid-column: 1; }
  .tsugi-tsugi .tsugi-item { text-align: left; }
}

/* ==================================================================
   スライドのページ(1枚が1枚の画像。縦に読み進める)
   ================================================================== */
body.page-slide { background: var(--paper); }
/* スライドは横長(16:9)なので、本のページ(760px)より広くとる */
.page-slide main { max-width: 1040px; }
.page-slide .breadcrumb { color: var(--text-sub-dark); }
.page-slide .index-list li { background: #FFFFFF; border-color: #D8CBB2; }
.index-slide a { display: flex; gap: 16px; align-items: baseline; }
.index-slide .toc-range { color: var(--lib-ink); font-size: 16px; }

.slide-list { margin: 40px 0 0; }
.slide { margin: 0 0 44px; scroll-margin-top: 16px; }
.slide-midashi {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 12px;
}
.slide-no {
  flex: 0 0 auto;
  font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 700;
  color: #6E5738; border: 1px solid #C9A468; border-radius: 4px;
  padding: 1px 8px; letter-spacing: .06em;
}
/* 画像そのものへのリンク(押すと1枚を大きく開ける) */
.slide-a { display: block; border-radius: 6px; }
.slide-img {
  display: block; width: 100%; height: auto;
  background: #FFFFFF;
  border: 1px solid #D8CBB2; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(60, 35, 10, .16);
}
.slide-a:hover .slide-img { box-shadow: 0 6px 20px rgba(60, 35, 10, .28); }
.slide-atogaki {
  margin: 8px 0 0; padding: 18px 20px;
  background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 8px;
  color: var(--text-sub-dark);
}
.slide-atogaki p { margin: 0; }

/* スライド1枚に添える管理人のひとこと(slides の memo)。
   スライドの絵を作り直さずに、あとから話を書き足せるようにするための欄 */
.slide-memo {
  margin: 12px 0 0; padding: 16px 20px;
  background: var(--blue-pale);
  border: 1px solid #B9CFF0; border-radius: 8px;
  border-left: 5px solid var(--blue);
}
.slide-memo p { margin: 0; line-height: 1.9; }
.slide-memo-midashi { font-weight: 700; margin: 0 0 8px !important; }

@media (max-width: 640px) {
  .slide-midashi { font-size: 16px; gap: 8px; }
  .slide { margin-bottom: 32px; }
}

/* ==================================================================
   蔵書目録のページ（/mokuroku/）
   部屋と同じ中身を、ただの縦の一覧でも出すページ。
   スマートフォン・読み上げ・キーボードで使いやすい形を用意するのが目的
   （2026-08-15。Manusのサイト評価レポートの指摘への対応）。
   見た目は他の読み物ページ（本の目次・資料）とそろえてある。
   ================================================================== */
body.page-mokuroku { background: var(--paper); }
.page-mokuroku main { max-width: 820px; }
.page-mokuroku .breadcrumb { color: var(--text-sub-dark); }

/* 絞り込みの箱。JSが動いたときだけ見せる（mokuroku.js が .mk-ready を付ける）。
   JSが無い環境では箱ごと消え、下の一覧が全部そのまま並ぶ */
.mk-shibori { display: none; }
.mk-shibori.mk-ready {
  display: block;
  margin: 24px 0 32px; padding: 20px;
  background: #FFFFFF;
  border: 1px solid #D8CBB2; border-radius: 8px;
}
.mk-sagasu label { display: block; font-weight: 700; margin-bottom: 8px; }
.mk-sagasu input {
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 8px 14px;
  font-family: inherit; font-size: 17px; color: var(--text);
  background: #FFFFFF;
  border: 2px solid var(--line-strong); border-radius: 6px;
}
.mk-sagasu input:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.mk-kind { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mk-kind-btn {
  min-height: 44px; padding: 6px 16px;
  font-family: inherit; font-size: 15px; cursor: pointer;
  color: var(--blue); background: #FFFFFF;
  border: 1.5px solid var(--blue); border-radius: 22px;
}
.mk-kind-btn:hover { background: var(--blue-pale); }
/* 選ばれているものは下地と文字を入れ替える（このサイト共通の考え方） */
.mk-kind-btn.on { background: var(--blue); color: #FFFFFF; }
.mk-kekka { margin: 14px 0 0; color: var(--text-sub-dark); font-size: 15px; min-height: 1.4em; }

/* 本の一覧 */
.mk-gun { margin: 40px 0 0; }
.mk-gun h2 {
  font-family: var(--serif); font-size: 21px; line-height: 1.5;
  margin: 0 0 12px; padding: 0 0 8px;
  border-bottom: 2px solid var(--blue);
}
.mk-list { list-style: none; margin: 0; padding: 0; }
.mk-list li { margin-bottom: 8px; }
.mk-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  min-height: 44px; padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid #D8CBB2; border-radius: 8px;
  text-decoration: none; color: var(--text);
}
a.mk-row:hover, a.mk-row:focus-visible { border-color: var(--blue); background: var(--blue-pale); }
.mk-title { font-weight: 700; font-size: 17px; }
.mk-setsumei { color: var(--text-sub-dark); font-size: 15px; }
/* 種類の札は右端へ */
.mk-fuda {
  margin-left: auto; flex: 0 0 auto;
  font-size: 13px; padding: 3px 12px; border-radius: 4px;
  color: var(--text-sub-dark); background: var(--bg-gray);
  border: 1px solid var(--line);
}
/* 準備中はリンクにしない（押せると誤解させないため、色も薄くする） */
.mk-junbi { background: #FAF7F1; color: var(--text-sub-dark); }
.mk-junbi .mk-title { font-weight: 400; }
.mk-fuda-junbi { background: #FFFFFF; }
.mk-nashi {
  margin: 32px 0; padding: 20px;
  background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 8px;
  color: var(--text-sub-dark);
}

@media (max-width: 640px) {
  .mk-row { align-items: flex-start; gap: 6px; }
  .mk-fuda { margin-left: 0; }
}

/* ==================================================================
   一問一答（/shakai/ichimon-itto/）
   問題・解説の中身は静的HTML。JSが動くときだけ、1問ずつ見せる。
   ================================================================== */
body.page-drill { background: var(--paper); }
.page-drill main { max-width: 820px; }
.page-drill .breadcrumb { color: var(--text-sub-dark); }
.drill-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px;
  align-items: end; margin: 28px 0 22px; padding: 18px 20px;
  background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 8px;
}
.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;
  font: inherit; color: var(--text); background: #FFFFFF;
  border: 2px solid var(--line-strong); border-radius: 6px;
}
.drill-next {
  min-height: 46px; padding: 9px 18px; cursor: pointer;
  font: inherit; font-weight: 700; color: #FFFFFF; background: var(--blue);
  border: 1px solid var(--blue-dark); border-radius: 6px;
}
.drill-next:hover, .drill-next:focus-visible { background: var(--blue-dark); }
.drill-count { grid-column: 1 / -1; margin: 0; color: var(--text-sub-dark); font-size: 14px; }
.drill-question {
  margin: 0 0 28px; padding: 24px;
  background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 8px;
  box-shadow: 0 3px 12px rgba(60, 35, 10, .08);
}
.drill-question[hidden] { display: none; }
.drill-meta { margin: 0 0 10px; color: var(--text-sub-dark); font-size: 14px; }
.drill-question h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; }
.drill-stem { margin: 0 0 20px; font-size: 18px; line-height: 1.9; font-weight: 700; }
.drill-choices { list-style: none; margin: 0; padding: 0; }
.drill-choices li { margin: 0 0 9px; }
.drill-choice {
  position: relative; display: flex; width: 100%; min-height: 50px; gap: 12px; align-items: flex-start;
  padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; line-height: 1.65;
  color: var(--text); background: #FFFFFF; border: 1px solid #B9AD98; border-radius: 6px;
}
.drill-choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drill-choice:focus-within { outline: 3px solid rgba(0, 23, 193, .28); outline-offset: 2px; }
@media (hover: hover) {
  .drill-choice:not(.is-selected):not(.is-correct):not(.is-wrong):hover { border-color: #767676; background: #F2F2F2; }
}
.drill-choice.is-selected { border: 2px solid #0017C1; padding: 11px 13px; font-weight: 700; background: #E8F1FE; }
.drill-choice.is-disabled { cursor: default; opacity: 1; }
.drill-choice-no {
  flex: 0 0 26px; height: 26px; padding-top: 1px; text-align: center;
  font-weight: 700; color: #FFFFFF; background: #765C3E; border-radius: 50%;
}
.drill-choice.is-selected .drill-choice-no { color: #FFFFFF; background: #0017C1; }
.drill-choice.is-correct, .drill-choice.is-wrong { padding: 11px 13px; }
.drill-choice.is-correct { border: 2px solid #2D7B57; background: #EAF5EE; }
.drill-choice.is-wrong { border: 2px solid #A34232; background: #FCEEEB; }
.drill-choice.is-correct .drill-choice-no { color: #FFFFFF; background: #2D7B57; }
.drill-choice.is-wrong .drill-choice-no { color: #FFFFFF; background: #A34232; }
.drill-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.drill-check {
  min-height: 46px; padding: 9px 18px; cursor: pointer;
  font: inherit; font-weight: 700; color: #FFFFFF; background: var(--blue);
  border: 1px solid var(--blue-dark); border-radius: 6px;
}
.drill-check:hover, .drill-check:focus-visible { background: var(--blue-dark); }
.drill-next-question {
  min-height: 46px; padding: 9px 18px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--blue); background: #FFFFFF; border: 1px solid var(--blue); border-radius: 6px;
}
.drill-next-question:hover, .drill-next-question:focus-visible { background: #EEF4F7; }
.drill-result { margin: 18px 0 0; padding: 12px 14px; font-weight: 700; border-radius: 6px; }
.drill-result.is-correct { color: #215A40; background: #EAF5EE; }
.drill-result.is-wrong { color: #7F3025; background: #FCEEEB; }
.drill-answer { margin: 16px 0 0; border: 1px solid #C8B99F; border-radius: 6px; background: #FBF6EB; }
.drill-answer summary { padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--blue); }
.drill-answer-inner { padding: 0 16px 16px; border-top: 1px solid #D8CBB2; }
.drill-answer-inner p { margin: 14px 0 0; line-height: 1.85; }
.drill-answer-inner .drill-seito { color: #B51E2E; font-size: 18px; font-weight: 800; }
.drill-answer-inner .drill-seito strong { font-weight: 800; }
.drill-answer-inner .drill-option-text { color: var(--text-sub); font-size: 14px; }
.drill-explanation, .drill-learning-point, .drill-reference { margin-top: 20px; }
.drill-answer-inner > div > p { margin-top: 6px; }
.drill-note { margin: 38px 0 0; padding: 20px; background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 8px; }
.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-results { margin: 24px 0; padding: 20px; background: #FFFDF7; border: 2px solid var(--brown); border-radius: 8px; }
.drill-results h2, .drill-results h3 { margin-top: 0; }
.drill-summary { display: grid; grid-template-columns: max-content 1fr; margin: 16px 0; border-top: 1px solid #D8CBB2; border-left: 1px solid #D8CBB2; }
.drill-summary dt, .drill-summary dd { margin: 0; padding: 8px 10px; border-right: 1px solid #D8CBB2; border-bottom: 1px solid #D8CBB2; }
.drill-summary dt { font-weight: 700; background: #F3E6C8; }
.drill-print, .drill-reset { margin: 0 10px 12px 0; }
.drill-history { margin-top: 8px; border-top: 1px solid #D8CBB2; }
.drill-history summary { padding: 13px 2px 2px; cursor: pointer; font-weight: 700; color: var(--blue); }
.drill-history summary:hover, .drill-history summary:focus-visible { color: var(--blue-dark); }
.drill-history-body { padding-bottom: 4px; }
.drill-result-section { margin-top: 22px; }
.drill-wrong-list { padding-left: 22px; }
.drill-wrong-list p { margin: 0 0 6px; }
.drill-return { margin-bottom: 10px; font-size: 14px; }
.drill-print-card { margin: 14px 0; padding: 15px 16px; background: #FFFFFF; border: 1px solid #D8CBB2; border-radius: 6px; }
.drill-print-card h4 { margin: 0 0 10px; font-size: 16px; }
.drill-print-card p { margin: 7px 0; line-height: 1.7; }
.drill-question-memo { margin-top: 18px; padding: 16px; background: #FFFDF7; border: 1px solid #D8CBB2; border-radius: 6px; }
.drill-question-memo h3 { margin: 0 0 10px; font-size: 17px; }
.drill-memo-input { box-sizing: border-box; display: block; width: 100%; min-height: 8.5rem; padding: 10px 12px; font: inherit; line-height: 1.7; color: var(--text); background: #FFFFFF; border: 1px solid #B6A88F; border-radius: 4px; resize: vertical; }
.drill-memo-input:focus { outline: 3px solid rgba(38, 91, 119, .22); outline-offset: 1px; border-color: var(--blue); }
.drill-memo-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.drill-memo-clear { font-size: 14px; }
.drill-memo-next { color: #FFFFFF; background: var(--blue); border-color: var(--blue-dark); }
.drill-memo-next:hover, .drill-memo-next:focus-visible { color: #FFFFFF; background: var(--blue-dark); }
.drill-memo-status { margin: 0; font-size: 13px; color: var(--text-sub-dark); }
.drill-memo-note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-sub-dark); }
.drill-printed-memo { white-space: pre-wrap; }
.drill-print-header, .drill-print-overall, .drill-print-report { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }

  body.page-drill { background: #FFFFFF; color: #000000; font-size: 10.5pt; }
  body.page-drill header, body.page-drill footer, body.page-drill .breadcrumb,
  body.page-drill .book-head, body.page-drill .drill-controls, body.page-drill .drill-list,
  body.page-drill .drill-note, body.page-drill .tsugi, body.page-drill .drill-print,
  body.page-drill .drill-reset, body.page-drill .drill-return,
  body.page-drill noscript { display: none !important; }
  .page-drill main, .drill-results { max-width: none; margin: 0; }
  .drill-results { padding: 0; background: #FFFFFF; border: 0; }
  .drill-results > h2, .drill-history { display: none !important; }
  .drill-print-header, .drill-print-overall, .drill-print-report { display: block; }
  .drill-print-header { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #000000; }
  .drill-print-header p { margin: 3px 0; }
  .drill-print-header h2 { margin: 5px 0 9px; font-size: 18pt; }
  .drill-print-overall { margin: 12px 0 0; }
  .drill-print-overall h2, .drill-print-report h2 { margin: 0 0 7px; font-size: 13pt; }
  .drill-print-overall p { margin: 0; font-weight: 700; }
  .drill-summary { margin: 8px 0 16px; break-inside: avoid; page-break-inside: avoid; }
  .drill-print-report > section { margin: 18px 0; break-inside: avoid; page-break-inside: avoid; }
  .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 #777777; text-align: left; }
  .drill-print-subject-table th { background: #EEEEEE; }
  .drill-print-note { margin: 5px 0 0; font-size: 9pt; }
  #drill-print-weaknesses { margin: 0; padding-left: 20px; }
  .drill-summary dt { background: #EEEEEE; }
  .drill-result-section, .drill-print-card { break-inside: avoid; page-break-inside: avoid; }
  .drill-print-card { margin: 10px 0; padding: 10px; border-color: #777777; }
  .drill-print-card h3 { margin: 0 0 8px; font-size: 11pt; }

  /* 過去問ページを印刷したときは、閉じたままの解説も紙面に出す。 */
  .kaisetsu-details > :not(summary) { display: block !important; }
  .kaisetsu-summary { display: none; }
}

@media (max-width: 640px) {
  .drill-controls { grid-template-columns: 1fr; padding: 16px; }
  .drill-next { width: 100%; }
  .drill-question { padding: 18px 16px; }
  .drill-stem { font-size: 17px; }
}

/* ==================================================================
   図書室の紙・革・真鍮テーマ
   本棚の羊皮紙調の背表紙と同じ「柔らかな紙のむら・革の陰影・控えめな真鍮」を、
   学習ページへも展開する。情報の正誤を示す赤・緑は意味を持つため変えない。
   ================================================================== */
:root {
  --parchment: #F6F0E1;
  --parchment-deep: #E9D9B8;
  --paper-card: linear-gradient(135deg, #FFFDF6 0%, #F8F0DE 55%, #F1E2C4 100%);
  --paper-note: linear-gradient(145deg, #FBF5E6 0%, #F1E1BD 100%);
  --brass: #A97C39;
  --brass-light: #D5B46D;
  --ink-brown: #3D2A18;
  --ink-sub: #695642;
  --wood-button: #6B3E1B;
  --wood-button-dark: #4E2C12;
}

/* 読むページは、白紙ではなく淡い羊皮紙の上に置く。 */
body:not(.page-library) {
  color: var(--ink-brown);
  background:
    radial-gradient(ellipse at 14% 8%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 36%),
    repeating-linear-gradient(0deg, rgba(113,78,35,.026) 0 1px, transparent 1px 6px),
    linear-gradient(115deg, #F8F2E4 0%, var(--parchment) 48%, #EEDDBC 100%);
}
body:not(.page-library) a { color: #6B3E1B; }
body:not(.page-library) a:hover { color: #4E2C12; }
body:not(.page-library) h1,
body:not(.page-library) h2,
body:not(.page-library) h3 { color: var(--ink-brown); }
body:not(.page-library) h1 { font-family: var(--serif); letter-spacing: .04em; }
body:not(.page-library) .breadcrumb,
body:not(.page-library) .book-lede,
body:not(.page-library) .sr-katagaki { color: var(--ink-sub); }

/* サイト名の木札にも、紙と革に通じる柔らかな木目を加える。 */
.site-header {
  background:
    repeating-linear-gradient(90deg, rgba(255,205,125,.05) 0 1px, transparent 1px 10px),
    linear-gradient(102deg, #3E2410 0%, #5C3516 48%, #4A2A12 100%);
  border-bottom-color: #8C5A26;
  box-shadow: inset 0 -1px 0 rgba(255,223,157,.18);
}
.site-footer { background: linear-gradient(100deg, #2E1A0B, #472812 52%, #34200E); }

/* 羊皮紙の本文カード。白いままにせず、淡い紙繊維と真鍮の縁を与える。 */
.index-list li,
.page-note,
.toc,
.mondai,
.hokaisei,
.term-dialog,
.moshi-annai,
.moshi-kekka,
.moshi-seitou-ichiran,
.drill-controls,
.drill-results,
.drill-note,
.drill-print-card,
.drill-question-memo,
.mk-shibori.mk-ready,
.mk-row,
.mk-nashi,
.tsugi-item,
.slide-atogaki {
  background: var(--paper-card);
  border-color: rgba(137,96,43,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.54), 0 3px 9px rgba(66,37,13,.10);
}

.page-note,
.toc,
.moshi-annai,
.drill-question-memo,
.mk-shibori.mk-ready { background: var(--paper-note); }

/* 問題・解説は役割を色ではなく紙面の違いで分け、正誤の赤色はそのまま残す。 */
.toi-no { border-left-color: var(--brass); }
.jirei { background: #F1E3C7; border-color: rgba(137,96,43,.40); }
.kaisetsu-details,
.sr-box,
.slide-memo {
  background: linear-gradient(145deg, #FBF6E8 0%, #F2E2BE 100%);
  border: 1px solid rgba(169,124,57,.48);
  border-left: 5px solid var(--brass);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.seito-label {
  background: var(--wood-button);
  box-shadow: inset 0 1px 0 rgba(255,232,181,.24);
}
.s-seito { color: #7A4A12; }
.q-shutten { background: var(--paper-note); border-color: rgba(137,96,43,.42); }
.q-shutten a { color: #6B3E1B; }
.shutten,
.tsugi { border-top-color: rgba(137,96,43,.46); }

/* 入力欄・選択肢・一覧は紙の上で軽く浮かせ、真鍮を操作のしるしにする。 */
.moshi-erabu,
.mk-sagasu input,
.drill-memo-input {
  background: #FFFDF7;
  border-color: #B59A66;
  box-shadow: inset 0 1px 2px rgba(80,45,12,.08);
}
.moshi-erabu:hover { background: #F4E7CB; }
.moshi-erabu.erabi,
.drill-choice.is-selected {
  background: #F5E5BE;
  border-color: var(--brass);
}
.moshi-erabu input { accent-color: var(--wood-button); }
.moshi-erabu:focus-within,
.mk-sagasu input:focus-visible,
.drill-memo-input:focus,
.drill-choice:focus-within { outline-color: rgba(169,124,57,.52); border-color: var(--brass); }

/* 操作の主ボタンは木、補助ボタンは羊皮紙と真鍮。 */
.moshi-btn,
.drill-check,
.drill-memo-next,
.mk-kind-btn.on {
  color: #FFF8E8;
  background: linear-gradient(135deg, #7A4B20 0%, #593216 58%, #44230E 100%);
  border-color: #4E2C12;
  box-shadow: inset 0 1px 0 rgba(255,232,181,.26), 0 2px 0 rgba(46,25,9,.32);
}
.moshi-btn:hover,
.drill-check:hover,
.drill-check:focus-visible,
.drill-memo-next:hover,
.drill-memo-next:focus-visible,
.mk-kind-btn.on:hover { background: #4E2C12; }
.moshi-btn:focus-visible { outline-color: var(--brass-light); }
.moshi-btn-sub,
.drill-next-question,
.drill-print,
.drill-reset,
.drill-memo-clear,
.mk-kind-btn {
  color: #5C3819;
  background: var(--paper-card);
  border-color: #A97C39;
}
.moshi-btn-sub:hover,
.drill-next-question:hover,
.drill-next-question:focus-visible,
.mk-kind-btn:hover { background: #F0DFB7; }

/* 一問一答の結果と一覧。緑・赤の正誤表示は学習上の意味を保つ。 */
.drill-answer { background: var(--paper-note); border-color: rgba(137,96,43,.48); }
.drill-answer summary,
.drill-history summary { color: #6B3E1B; }
.drill-summary { border-color: #CBB180; }
.drill-summary dt { background: #EEDAA9; }
.drill-summary dt,
.drill-summary dd { border-color: #CBB180; }
.drill-choice { background: #FFFDF7; border-color: #CBB180; }
.drill-choice-no { color: #5C3819; background: #EEDAA9; }
.drill-choice.is-selected .drill-choice-no { color: #FFF8E8; background: var(--wood-button); }

/* 資料・目録・スライドは、既存の構造を変えず紙と真鍮の縁でつなぐ。 */
.page-book .index-list li,
.page-shiryou .index-list li,
.page-slide .index-list li { background: var(--paper-card); border-color: rgba(137,96,43,.46); }
.sr-section h2,
.mk-gun h2 { border-bottom-color: var(--brass); }
.sr-dl dt,
.sr-quote blockquote { border-left-color: var(--brass); }
.sr-table,
.sr-quote blockquote,
.sr-zu img,
.slide-img { background: #FFFDF7; border-color: #CBB180; }
.sr-table thead th { background: #EEDAA9; }
.sr-table tbody th { background: #F6EBCF; }
.sr-zu-link:hover img,
.sr-zu-link:focus-visible img { border-color: var(--brass); }
.mk-row { color: var(--ink-brown); }
a.mk-row:hover,
a.mk-row:focus-visible { border-color: var(--brass); background: #F4E4BE; }
.mk-fuda { color: #654621; background: #F2E0B7; border-color: #C6A35E; }
.mk-kind-btn { color: #6B3E1B; }

/* 取り出した本と各ページの表紙も、背表紙と同じ革の陰影へそろえる。 */
.pulled-book,
.book-cover {
  --cover-base: #795536;
  background:
    linear-gradient(90deg, rgba(47,21,6,.32) 0%, rgba(255,231,174,.18) 16%, rgba(255,248,217,.05) 44%, rgba(29,12,3,.28) 100%),
    repeating-linear-gradient(0deg, rgba(255,247,214,.07) 0 1px, rgba(72,37,12,.03) 1px 5px),
    var(--cover-base);
  background-blend-mode: multiply, soft-light, normal;
  border-left: 1px solid rgba(255,232,180,.30);
  border-right: 1px solid rgba(40,17,4,.28);
}
.book-cover { box-shadow: -6px 10px 18px rgba(60,35,10,.25), inset 10px 0 0 rgba(0,0,0,.18), inset -2px 0 0 rgba(255,232,180,.14); }
.pulled-book span,
.book-cover span { text-shadow: 0 1px 0 rgba(255,246,218,.20), 0 -1px 1px rgba(35,15,4,.24); }
.pull-card { background: var(--paper-card); border: 1px solid rgba(169,124,57,.50); }

/* 青だけで見えていた資料リンク・用語・次に読むを、木と真鍮の案内へ置き換える。 */
.term-link,
.tsugi-item { color: #6B3E1B; }
.term-link:hover { color: #4E2C12; }
.tsugi-item:hover,
.tsugi-item:focus-visible { background: var(--wood-button); color: #FFF8E8; border-color: var(--wood-button-dark); }
.tsugi-item:hover .tsugi-muki,
.tsugi-item:focus-visible .tsugi-muki { color: #F3DDA9; }

/* ==================================================================
   学習ページの外側だけを古い羊皮紙にする。
   問題・解説の文字枠（.mondai / .kaisetsu）は、読みやすい明るい紙面のまま残す。
   ================================================================== */
body.page-book {
  min-height: 100vh;
  background-color: #E8D5A8;
  background-image:
    /* 焦げた破れと虫食い：読み物カードの外側にだけ見せる */
    radial-gradient(ellipse 70px 104px at 0% 8%, rgba(45,16,3,.88) 0 17%, rgba(106,52,15,.58) 19% 31%, transparent 49%),
    radial-gradient(ellipse 38px 30px at 1% 30%, rgba(50,18,3,.82) 0 12%, rgba(133,70,23,.48) 15% 29%, transparent 47%),
    radial-gradient(circle at 2.5% 46%, rgba(43,16,3,.88) 0 3px, rgba(146,76,22,.58) 4px 6px, transparent 7px),
    radial-gradient(circle at 1.2% 72%, rgba(43,16,3,.82) 0 4px, rgba(146,76,22,.54) 5px 7px, transparent 8px),
    radial-gradient(ellipse 82px 112px at 100% 93%, rgba(45,16,3,.88) 0 17%, rgba(106,52,15,.58) 19% 32%, transparent 50%),
    radial-gradient(ellipse 33px 26px at 99% 53%, rgba(43,16,3,.86) 0 12%, rgba(146,76,22,.54) 15% 29%, transparent 47%),
    radial-gradient(circle at 97.8% 28%, rgba(43,16,3,.82) 0 3px, rgba(146,76,22,.56) 4px 6px, transparent 7px),
    radial-gradient(circle at 98.8% 73%, rgba(43,16,3,.82) 0 4px, rgba(146,76,22,.56) 5px 7px, transparent 8px),
    /* 手垢・色むらと紙繊維 */
    radial-gradient(ellipse 340px 220px at 11% 42%, rgba(114,67,24,.18) 0%, transparent 68%),
    radial-gradient(ellipse 360px 240px at 89% 61%, rgba(114,67,24,.17) 0%, transparent 68%),
    repeating-linear-gradient(7deg, rgba(111,72,31,.055) 0 1px, transparent 1px 6px),
    linear-gradient(110deg, #BE935B 0%, #E6CEA0 7%, #F5E6C7 48%, #E1C28C 93%, #B9854B 100%);
  background-attachment: fixed;
  box-shadow: inset 0 0 74px rgba(52,20,4,.46), inset 0 17px 25px -17px rgba(43,15,2,.86), inset 0 -20px 30px -20px rgba(43,15,2,.86);
}
/* 本文カードは今までの明るい紙・高い可読性を明示的に固定する。 */
body.page-book .mondai,
body.page-book .kaisetsu-details {
  background: var(--paper-card);
  color: var(--ink-brown);
}

/* PDF Makerもほかの本と同じ古書風の縦組みを使う。
   欧文は1文字ずつ積まず、背表紙の流れに沿って自然に組む。 */

/* 管理人へのメッセージ：Netlify Forms送信完了ページ */
.page-contact-thanks {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(102, 57, 23, .13) 0 1px, transparent 2px 100%),
    radial-gradient(ellipse at 88% 78%, rgba(102, 57, 23, .11) 0 1px, transparent 2px 100%),
    linear-gradient(118deg, #27160d 0%, #5b3219 48%, #24140d 100%);
}
.page-contact-thanks main {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: center;
  padding: clamp(42px, 8vw, 96px) 20px;
}
.contact-thanks {
  position: relative;
  width: min(680px, 100%);
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(36px, 7vw, 64px) clamp(28px, 7vw, 76px);
  color: #3b2515;
  text-align: center;
  border: 1px solid rgba(102, 64, 32, .52);
  border-radius: 4px 7px 5px 8px;
  box-shadow: 0 18px 36px rgba(15, 7, 2, .48), inset 0 0 55px rgba(120, 70, 22, .16);
  background:
    radial-gradient(ellipse at 12% 13%, rgba(107, 57, 20, .19) 0 1px, transparent 2px 100%),
    radial-gradient(ellipse at 86% 88%, rgba(107, 57, 20, .15) 0 1px, transparent 2px 100%),
    repeating-linear-gradient(4deg, rgba(119, 77, 33, .035) 0 1px, transparent 1px 5px),
    linear-gradient(101deg, #fffdf1, #fff8df 52%, #f7e6c0);
}
.contact-thanks::before,
.contact-thanks::after {
  position: absolute;
  z-index: 0;
  width: 120px;
  height: 120px;
  content: '';
  opacity: .2;
  filter: blur(1px);
  pointer-events: none;
}
.contact-thanks::before {
  top: -54px;
  left: -52px;
  border: 13px solid #77431f;
  border-radius: 50%;
}
.contact-thanks::after {
  right: -54px;
  bottom: -70px;
  border: 16px solid #9a6131;
  border-radius: 48% 52% 57% 43%;
}
.contact-thanks > * { position: relative; z-index: 1; }
.contact-thanks-kicker {
  margin: 0 0 12px;
  color: #76512d;
  font-family: 'Noto Serif JP', serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.contact-thanks h1 {
  margin: 0 0 25px;
  color: #452613;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  line-height: 1.4;
}
.contact-thanks p {
  margin: 0 auto 16px;
  max-width: 33em;
  font-size: 1rem;
  line-height: 2;
}
.contact-thanks-note {
  padding-top: 16px;
  border-top: 1px solid rgba(103, 63, 28, .27);
  color: #72583c;
  font-size: .89rem !important;
}
.contact-thanks-return {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 24px;
  color: #FFFFFF !important;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(19, 8, 2, .82);
  border: 1px solid #3e2411;
  border-radius: 3px;
  box-shadow: 0 3px 0 #2e180b, inset 0 1px 0 rgba(255, 245, 210, .38);
  background: linear-gradient(#80512c, #4c2b16);
}
.contact-thanks-return:hover,
.contact-thanks-return:focus-visible {
  color: #fff;
  outline: 3px solid rgba(251, 222, 145, .8);
  outline-offset: 3px;
  background: linear-gradient(#9a6739, #5f371d);
}
@media (max-width: 560px) {
  .page-contact-thanks main { padding: 36px 14px; }
  .contact-thanks { padding: 38px 24px; }
}

/* ==================================================================
   どの画面幅でも使えるページTop。書斎・本・過去問のどこにいても
   右下の青い栞から、現在のページの先頭へ戻れるようにする。
   ================================================================== */
.mobile-top-button {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 54px;
  padding: 9px 18px;
  border: 2px solid #E8F5FF;
  border-radius: 28px;
  color: #FFFFFF;
  background: linear-gradient(160deg, #3A9BE8 0%, #1870C4 55%, #0C488E 100%);
  box-shadow: 0 5px 13px rgba(8,45,92,.48), inset 0 1px 0 rgba(255,255,255,.55);
  font: 800 18px/1.2 var(--serif);
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s cubic-bezier(.23,1,.32,1);
}
.mobile-top-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(8,45,92,.54), inset 0 1px 0 rgba(255,255,255,.55);
}
.mobile-top-button:active { transform: translateY(1px) scale(.97); }
.mobile-top-button:focus-visible { outline: 3px solid #FFDC70; outline-offset: 3px; }
@media (max-width: 700px) {
  /* 「管理人」と同じ大きさで、少し間を空けて右方向をはっきり示す。 */
  .profile-board h2 { display: flex; align-items: baseline; gap: 18px; flex-wrap: nowrap; white-space: nowrap; }
  .mobile-top-button {
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    min-width: 76px;
    min-height: 50px;
    padding: 8px 15px;
    font-size: 17px;
  }
  /* 模擬テストだけは下部に固定の採点欄があるため、Topボタンをその上へ逃がす。 */
  .page-moshi .mobile-top-button {
    bottom: calc(env(safe-area-inset-bottom) + 96px);
  }
}

/* 現在のページを離れてサイト入口へ戻るための、パンくず内の大きな道しるべ。 */
.breadcrumb .breadcrumb-site-top {
  min-height: 52px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  background: #B42329;
  border-radius: 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 0 1px rgba(70,14,17,.38);
  box-shadow: 0 2px 0 rgba(80,12,15,.34);
}
.breadcrumb .breadcrumb-site-top:hover {
  background: #971D22;
}
.breadcrumb .breadcrumb-site-top:focus-visible {
  outline: 3px solid #FFDC70;
  outline-offset: 3px;
}

/* スマホでは右壁の羊皮紙を、写真の下に浮かぶ小さな旅の案内書へ切り替える。
   横に長い書斎を動かさなくても、景色と説明を同じ画面で読めるようにする。 */
@media (max-width: 700px) {
  .world-landmark-scroll {
    position: fixed;
    z-index: 70;
    top: auto;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 120px);
    left: 12px;
    display: none;
    width: auto;
    height: min(250px, 31dvh);
    max-height: 250px;
  }
  .world-landmark-scroll.is-filled { display: block; }
  .world-scroll-page {
    inset: 12px 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 31px 24px 25px;
  }
  .world-scroll-roll {
    left: -5px;
    width: calc(100% + 10px);
    height: 22px;
  }
  .world-scroll-roll::before,
  .world-scroll-roll::after {
    top: 4px;
    width: 12px;
    height: 12px;
  }
  .world-scroll-kicker {
    margin: 0 0 7px;
    font-size: 13px;
    letter-spacing: .16em;
  }
  .world-scroll-kicker::before { margin-right: 5px; }
  .world-scroll-country {
    margin: 0 0 5px;
    padding: 2px 8px 3px;
    font-size: 13px;
  }
  .world-scroll-name {
    margin: 0 0 6px;
    padding-right: 14px;
    font-size: 24px;
    line-height: 1.22;
  }
  .world-scroll-category {
    margin: 0 0 7px;
    padding: 2px 7px;
    font-size: 12px;
  }
  .world-scroll-description {
    padding-top: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
  }
  .world-scroll-credit {
    position: static;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(107,65,27,.30);
    font-size: 11px;
    line-height: 1.45;
  }
}

/* 窓辺の旧ソファーを、大きな三人掛けビロードソファーへ差し替える。 */
.floor-sofa {
  left: -20px;
  bottom: 58px;
  width: 700px;
  height: 394px;
  object-fit: contain;
  filter: drop-shadow(10px 14px 15px rgba(20, 9, 2, .64)) saturate(.98);
}
/* ==================================================================
   館内の閲覧室

   本棚から開いた先も、白いWebページへ急に切り替えない。教材そのものは
   「机の上に開いた本」として読みやすい明るい紙面を保ち、左右と奥行きは
   大図書館の閲覧室としてつなぐ。問題・解説・採点の中身には触れない。
   ================================================================== */
body.page-book,
body.page-shiryou,
body.page-slide,
body.page-drill,
body.page-moshi {
  min-height: 100vh;
  color: #352315;
  background-color: #8A613C;
  background-image:
    linear-gradient(180deg, rgba(38, 20, 8, .14), rgba(38, 20, 8, .05) 26%, rgba(38, 20, 8, .16)),
    url("../images/library-reading-room.webp");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body.page-book .site-header,
body.page-shiryou .site-header,
body.page-slide .site-header,
body.page-drill .site-header,
body.page-moshi .site-header {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(19, 8, 3, .20), transparent 22% 78%, rgba(19, 8, 3, .24)),
    linear-gradient(180deg, #603416, #321907);
  border-bottom-color: #B78443;
  box-shadow: 0 4px 18px rgba(25, 10, 3, .35), inset 0 1px 0 rgba(255, 225, 164, .18);
}

body.page-book main,
body.page-shiryou main,
body.page-slide main,
body.page-drill main,
body.page-moshi main {
  position: relative;
  width: min(100% - 48px, 1000px);
  max-width: 1000px;
  min-height: 68vh;
  margin: clamp(28px, 5vw, 72px) auto 64px;
  padding: clamp(30px, 5vw, 62px) clamp(22px, 6vw, 76px) clamp(52px, 7vw, 88px);
  border: 1px solid rgba(101, 61, 27, .52);
  border-radius: 3px 6px 5px 4px;
  box-shadow:
    0 24px 48px rgba(30, 12, 3, .36),
    inset 0 0 70px rgba(143, 87, 32, .12),
    inset 0 0 0 7px rgba(255, 247, 221, .26);
  background:
    linear-gradient(90deg, rgba(121, 72, 29, .10), transparent 7% 93%, rgba(121, 72, 29, .10)),
    repeating-linear-gradient(7deg, rgba(105, 61, 21, .025) 0 1px, transparent 1px 7px),
    linear-gradient(104deg, #F3E1BC 0%, #FFFDF3 11%, #FFFDF8 50%, #F5E5C5 100%);
}

body.page-book main::before,
body.page-shiryou main::before,
body.page-slide main::before,
body.page-drill main::before,
body.page-moshi main::before {
  content: "閲覧室　・　SocialEggs Gateway";
  position: absolute;
  top: 10px;
  right: clamp(18px, 4vw, 46px);
  color: rgba(104, 67, 35, .68);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}

body.page-book .breadcrumb,
body.page-shiryou .breadcrumb,
body.page-slide .breadcrumb,
body.page-drill .breadcrumb,
body.page-moshi .breadcrumb {
  margin-left: -8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(127, 83, 38, .28);
}

body.page-book .book-head,
body.page-shiryou .book-head,
body.page-slide .book-head,
body.page-drill .book-head,
body.page-moshi .book-head {
  padding: 18px 0 26px;
  border-bottom: 3px double rgba(127, 83, 38, .36);
}

body.page-book .mokuji,
body.page-shiryou .mokuji,
body.page-slide .mokuji,
body.page-drill .drill-controls {
  margin-top: 34px;
  padding: 22px;
  border: 1px solid rgba(132, 88, 43, .34);
  border-radius: 3px;
  box-shadow: inset 0 0 28px rgba(135, 83, 28, .06);
  background: rgba(255, 252, 239, .58);
}

body.page-book .site-footer,
body.page-shiryou .site-footer,
body.page-slide .site-footer,
body.page-drill .site-footer,
body.page-moshi .site-footer {
  margin-top: 0;
  border-top: 1px solid rgba(235, 194, 123, .28);
  background: linear-gradient(180deg, rgba(52, 26, 10, .94), rgba(29, 13, 5, .98));
}

/* 蔵書目録は、速く探すための一覧でありながら、閲覧室の目録机として置く。 */
body.page-mokuroku {
  min-height: 100vh;
  color: #352315;
  background-color: #8A613C;
  background-image:
    linear-gradient(180deg, rgba(38, 20, 8, .14), rgba(38, 20, 8, .05) 26%, rgba(38, 20, 8, .16)),
    url("../images/library-reading-room.webp");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
body.page-mokuroku .site-header {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(19, 8, 3, .20), transparent 22% 78%, rgba(19, 8, 3, .24)),
    linear-gradient(180deg, #603416, #321907);
  border-bottom-color: #B78443;
  box-shadow: 0 4px 18px rgba(25, 10, 3, .35), inset 0 1px 0 rgba(255, 225, 164, .18);
}
body.page-mokuroku main {
  position: relative;
  width: min(100% - 48px, 1000px);
  max-width: 1000px;
  min-height: 68vh;
  margin: clamp(28px, 5vw, 72px) auto 64px;
  padding: clamp(30px, 5vw, 62px) clamp(22px, 6vw, 76px) clamp(52px, 7vw, 88px);
  border: 1px solid rgba(101, 61, 27, .52);
  border-radius: 3px 6px 5px 4px;
  box-shadow: 0 24px 48px rgba(30, 12, 3, .36), inset 0 0 70px rgba(143, 87, 32, .12), inset 0 0 0 7px rgba(255, 247, 221, .26);
  background:
    linear-gradient(90deg, rgba(121, 72, 29, .10), transparent 7% 93%, rgba(121, 72, 29, .10)),
    repeating-linear-gradient(7deg, rgba(105, 61, 21, .025) 0 1px, transparent 1px 7px),
    linear-gradient(104deg, #F3E1BC 0%, #FFFDF3 11%, #FFFDF8 50%, #F5E5C5 100%);
}
body.page-mokuroku main::before {
  content: "目録机　・　SocialEggs Gateway";
  position: absolute;
  top: 10px;
  right: clamp(18px, 4vw, 46px);
  color: rgba(104, 67, 35, .68);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}
body.page-mokuroku .breadcrumb { margin-left: -8px; padding-bottom: 12px; border-bottom: 1px solid rgba(127, 83, 38, .28); }
.room-return-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.room-return-actions {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.room-return-button {
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #C79A4F;
  border-radius: 2px;
  color: #FFF2C7;
  background:
    linear-gradient(90deg, rgba(255,221,139,.14), transparent 26% 74%, rgba(0,0,0,.16)),
    linear-gradient(180deg, #704522, #321A0A);
  box-shadow: inset 0 1px 0 rgba(255,235,176,.34), inset 0 -2px 0 rgba(27,12,4,.54), 0 3px 7px rgba(46,21,5,.28);
  font: 800 18px/1.15 var(--serif);
  letter-spacing: .03em;
  text-shadow: 0 1px 2px #160803;
  cursor: pointer;
}
.room-return-button span { margin-right: 2px; color: #F6D476; font-size: 24px; line-height: 1; }
@media (hover: hover) {
  .room-return-button:hover {
    color: #FFF9E3;
    border-color: #F1CB77;
    background: linear-gradient(180deg, #9A6936, #4B2912);
  }
}
.room-return-button:focus-visible {
  outline: 3px solid #FFDC70;
  outline-offset: 3px;
}
.room-return-trail { min-width: 0; }
@media (max-width: 560px) {
  .room-return-actions { width: 100%; }
  .room-return-actions > * { flex: 1 1 auto; justify-content: center; }
}
body.page-mokuroku .mk-shibori.mk-ready {
  border-color: rgba(132, 88, 43, .40);
  border-radius: 3px;
  box-shadow: inset 0 0 28px rgba(135, 83, 28, .06);
  background: rgba(255, 252, 239, .68);
}
body.page-mokuroku .mk-sagasu input { border-color: #9B6B37; background: rgba(255, 254, 247, .92); }
body.page-mokuroku .mk-sagasu input:focus-visible { outline-color: #B78443; border-color: #795022; }
body.page-mokuroku .mk-kind-btn { color: #6B3E1B; border-color: #9B6B37; background: rgba(255, 254, 247, .84); }
@media (hover: hover) { body.page-mokuroku .mk-kind-btn:hover { background: #F3E0B7; } }
body.page-mokuroku .mk-kind-btn.on { color: #FFF9EB; background: #6B3E1B; }
body.page-mokuroku .mk-gun h2 { border-bottom-color: #9B6B37; }
body.page-mokuroku .mk-row { border-color: rgba(132, 88, 43, .36); border-radius: 3px; background: rgba(255, 254, 247, .78); }
@media (hover: hover) { body.page-mokuroku a.mk-row:hover { color: #352315; border-color: #795022; background: #F5E2BC; } }
body.page-mokuroku a.mk-row:focus-visible { color: #352315; outline: 3px solid #B78443; outline-offset: 2px; border-color: #795022; background: #F5E2BC; }
body.page-mokuroku .mk-fuda { color: #5B391C; border-color: rgba(132, 88, 43, .42); background: #F3E0B7; }
body.page-mokuroku .site-footer { margin-top: 0; border-top: 1px solid rgba(235, 194, 123, .28); background: linear-gradient(180deg, rgba(52, 26, 10, .94), rgba(29, 13, 5, .98)); }

/* 問い合わせの送信完了も、館外の別画面ではなく閲覧室の応接机で受け取る。 */
body.page-contact-thanks {
  background-color: #8A613C;
  background-image:
    linear-gradient(180deg, rgba(38, 20, 8, .14), rgba(38, 20, 8, .05) 26%, rgba(38, 20, 8, .16)),
    url("../images/library-reading-room.webp");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
body.page-contact-thanks .site-header {
  background:
    linear-gradient(90deg, rgba(19, 8, 3, .20), transparent 22% 78%, rgba(19, 8, 3, .24)),
    linear-gradient(180deg, #603416, #321907);
  border-bottom-color: #B78443;
}
body.page-contact-thanks .contact-thanks { border-radius: 3px 6px 5px 4px; }
body.page-contact-thanks .site-footer { margin-top: 0; border-top: 1px solid rgba(235, 194, 123, .28); background: linear-gradient(180deg, rgba(52, 26, 10, .94), rgba(29, 13, 5, .98)); }

@media (max-width: 700px) {
  body.page-book,
  body.page-shiryou,
  body.page-slide,
  body.page-drill,
  body.page-moshi { background-attachment: scroll; }

  body.page-mokuroku { background-attachment: scroll; }
  body.page-contact-thanks { background-attachment: scroll; }

  body.page-book main,
  body.page-shiryou main,
  body.page-slide main,
  body.page-drill main,
  body.page-moshi main {
    width: min(100% - 20px, 1000px);
    margin: 16px auto 32px;
    padding: 40px 18px 42px;
    box-shadow: 0 12px 26px rgba(30, 12, 3, .28), inset 0 0 0 4px rgba(255, 247, 221, .24);
  }

  body.page-mokuroku main {
    width: min(100% - 20px, 1000px);
    margin: 16px auto 32px;
    padding: 40px 18px 42px;
    box-shadow: 0 12px 26px rgba(30, 12, 3, .28), inset 0 0 0 4px rgba(255, 247, 221, .24);
  }

  body.page-book main::before,
  body.page-shiryou main::before,
  body.page-slide main::before,
  body.page-drill main::before,
  body.page-moshi main::before { top: 11px; right: 18px; font-size: 11px; }
  body.page-mokuroku main::before { top: 11px; right: 18px; font-size: 11px; }
}

/* 閲覧室・目録机・演習室で共通に見える、戻り札とページ栞。
   青や赤の汎用UIを避け、木と真鍮の館内備品として統一する。 */
body:not(.page-library) .breadcrumb .breadcrumb-site-top {
  color: #FFF2C7;
  border: 1px solid #C79A4F;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,221,139,.14), transparent 26% 74%, rgba(0,0,0,.16)),
    linear-gradient(180deg, #86562A, #3D210D);
  box-shadow: inset 0 1px 0 rgba(255,235,176,.38), inset 0 -2px 0 rgba(27,12,4,.54), 0 3px 7px rgba(46,21,5,.28);
  text-shadow: 0 1px 2px #160803;
}
@media (hover: hover) {
  body:not(.page-library) .breadcrumb .breadcrumb-site-top:hover {
    color: #FFF9E3;
    border-color: #F1CB77;
    background: linear-gradient(180deg, #A8723B, #573016);
  }
}