/* Socialeggs-Gateway 共通スタイル(公開モード)
   色・文字サイズはデジタル庁デザインシステム準拠の値。勝手に変えない。
   ・余白は8の倍数
   ・押せるものは44px以上
   ・#767676 は白背景専用。色付き背景(#F2F2F2 / #E8F1FE)の上の補足文字は #595959 */
:root {
  --blue: #0017C1;
  --blue-dark: #00118F;
  --blue-pale: #E8F1FE;
  --text: #1A1A1A;
  --text-sub: #767676;
  --text-sub-dark: #595959;
  --line: #D9D9D9;
  --line-strong: #949494;
  --bg-gray: #F2F2F2;
  /* 図書室(木と紙の色) */
  --wall: #E9B77C;
  --wood: #9C6430;
  --wood-dark: #6B3E1B;
  --wood-deep: #4E2C12;
  --shelf-back: #8A5426;
  --floor: #D89A5C;
  --cream: #FBF4E6;
  --paper: #F6F1E7;
  --marker: #FBDF6B;        /* 用語に敷く蛍光ペンの線 */
  --marker-strong: #F7CE33; /* 同・押せると分かるようにした濃いほう */
  --lib-ink: #3A2A1A;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "IPAPGothic", "IPAGothic", serif;
  /* 猫の影絵(レールのつまみと、タイマーのからくりの人形で使う) */
  --cat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M52 61 L50.5 46 C49.5 40 48 37 48 33.5 C48 31 48.5 30 49.5 29.5 C52 28.8 55 26.8 56.6 24.4 C57.6 22.4 56.4 19.6 54.4 17.6 C54 15 54.6 9 56 4.4 C56.2 3.4 55.4 2.8 54.6 3.6 C51.6 6.4 49 9 47.6 10.6 C45.6 10 43.6 9.8 41.8 10.2 C40 8.6 36.6 5.4 34 3.4 C33.2 2.8 32.2 3.4 32.4 4.4 C33.4 8.6 33.8 12.4 33.6 14.6 C30.6 17.6 29.6 22 31 27.4 C24.6 31.4 20 40 20 48.6 C20 52 20.6 55.4 21.8 58.2 C17 59.6 10.6 55.6 9.2 47.6 C8.4 43.4 9.6 40.4 11.4 39.6 C12.8 39 13.6 40.2 13.4 41.6 C13 45.4 14.6 49.6 18 52 C20.6 53.8 23.4 54.6 25.6 55.4 C26.6 57.6 28.2 59.8 30 61 Z' fill='%2317100A' stroke='%23FFFFFF' stroke-width='1.5' stroke-linejoin='round' opacity='.96'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text);
  background: #FFFFFF;
}

.skip-link {
  position: fixed;
  z-index: 2147483647;
  left: 16px;
  top: 12px;
  padding: 10px 16px;
  border: 3px solid #F0C46A;
  border-radius: 4px;
  background: #FFFDF7;
  color: #3A2110;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

a { color: var(--blue); text-decoration: underline; }
a:hover { color: var(--blue-dark); }

img { max-width: 100%; height: auto; }

ruby rt { font-size: 0.5em; }

/* ---- ヘッダー・フッター(図書室の看板と土台) ---- */
.site-header {
  background: var(--wood-deep);
  border-bottom: 6px solid var(--wood-dark);
}
.site-header-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.site-brand {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #F6E7CB;
  text-decoration: none;
}
.site-brand:hover { color: #FFFFFF; text-decoration: underline; }
.site-tag { font-size: 15px; color: #E0BE8A; letter-spacing: .12em; }

.site-footer {
  margin-top: 64px;
  background: #3A2412;
}
.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  font-size: 14px;
  color: #DCC6A6;
}
.site-footer-inner p { margin: 0 0 8px; }
.page-library .site-footer { margin-top: 0; }

/* ---- 本文の枠 ---- */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 16px 0 8px;
}
h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin: 48px 0 16px;
}
@media (max-width: 480px) {
  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
}

.breadcrumb { font-size: 14px; color: var(--text-sub); margin: 0 0 8px -8px; }
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

/* ※ ここには昔のトップページ(本棚の部屋になる前の、箇条書きだった版)の
   飾りが残っていた。書き出されるHTMLにも各JSにも一度も出てこないことを
   確かめたうえで、2026-08-14に消した。
   消したもの: .site-subtitle .site-desc .daikoumoku .dai-num .dai-desc
   .junbichu-badge .year-list .year-label .subject-list .naming-sec .profile-sec
   (下の .profile-row .profile-icon .profile-name は、いまも管理人の額で使っている) */

.profile-row { display: flex; gap: 16px; align-items: flex-start; }
.profile-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}
.profile-name { font-weight: 700; margin: 0 0 8px; }

/* ---- 一覧ページ ---- */
.index-list { list-style: none; margin: 24px 0; padding: 0; }
.index-list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}
.index-list a {
  display: block;
  padding: 16px;
  min-height: 44px;
}

/* ---- 科目ページ ---- */
.page-note {
  font-size: 14px;
  color: var(--text-sub);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0 24px;
}

.toc {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 48px;
}
.toc-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  margin-right: 16px;
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin: 0 8px 8px 0;
}

.toi { margin: 0 0 64px; }

.mondai {
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 24px;
}
.toi-no {
  margin: 0 0 16px;
  font-size: 20px;
  border-left: 4px solid var(--blue);
  padding-left: 16px;
  line-height: 1.5;
}
.lead { margin: 0 0 16px; }
.jirei {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  background: var(--bg-gray);
}
.jirei-label { margin: 0 0 8px; font-weight: 700; font-size: 16px; }
.jirei p { margin: 0; }

.sentakushi { list-style: none; margin: 0; padding: 0; }
.sentakushi li {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.s-num { font-weight: 700; min-width: 1.2em; text-align: right; }

.chu { font-size: 16px; color: var(--text-sub); margin: 16px 0 0; }
.chu-label { margin: 0; }
.chu-list { list-style: none; margin: 0; padding: 0 0 0 16px; }
.chu-list li { display: flex; gap: 8px; margin: 8px 0 0; }
.chu-num { min-width: 1.2em; text-align: right; }

/* 正答・解説は「押すと開く」かたまりにする(答えが最初から見えないように)。
   summaryとdetailsで1つの角丸カードに見せるため、背景はdetails側に置く。 */
.kaisetsu-details {
  background: var(--blue-pale);
  border-radius: 8px;
  margin: 16px 0 0;
}
.kaisetsu-summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}
.kaisetsu-summary:hover { text-decoration: underline; }
.kaisetsu-summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.kaisetsu { padding: 0 24px 24px; }
.seito { margin: 0 0 16px; }
.seito-label {
  display: inline-block;
  background: var(--blue);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 8px;
  margin-right: 16px;
  vertical-align: 2px;
}
.seito strong { font-size: 22px; }

.hokaisei {
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
}
.hokaisei-label { font-weight: 700; margin: 0 0 8px; }
.hokaisei p { margin: 0 0 8px; }

.kaisetsu > p { margin: 0 0 16px; }
.junbichu-note { color: var(--text-sub-dark); margin: 0; }

/* この解説を確かめた資料(官公庁の資料のみ。数字や新しい制度の裏づけ) */
.q-shutten {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #FBF7EF;
  font-size: 15px;
}
.q-shutten-label { font-weight: 700; margin: 0 0 8px; color: var(--text-sub-dark); }
.q-shutten ul { margin: 0; padding-left: 1.3em; }
.q-shutten li { margin: 0 0 6px; line-height: 1.7; }
.q-shutten li:last-child { margin-bottom: 0; }
.q-shutten a { color: #7A4A12; }

.s-kaisetsu { margin: 16px 0 0; }
.s-kaisetsu dt {
  font-weight: 700;
  border-top: 1px solid #FFFFFF;
  padding-top: 16px;
  margin-top: 16px;
}
.s-kaisetsu dt:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.s-seito { color: var(--blue); margin-left: 8px; }
.s-kaisetsu dd { margin: 8px 0 0 0; }
.s-kaisetsu dd p { margin: 0 0 8px; }
/* 各選択肢の正誤は、文章を読む前にひと目で分かるよう赤太字で示す。 */
.s-kaisetsu .choice-verdict { color: #B51E2E; font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.s-kaisetsu .choice-verdict strong { font-weight: 800; }

.kaisetsu-zu { margin: 16px 0; }
.kaisetsu-zu img { border: 1px solid var(--line); background: #FFFFFF; }
.kaisetsu-zu figcaption { font-size: 14px; color: var(--text-sub-dark); margin-top: 8px; }
.zu-error { color: var(--text-sub-dark); }

.back-to-toc { text-align: right; font-size: 14px; margin: 8px 0 0; }
.back-to-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

.shutten {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding-top: 16px;
}
.shutten h2 { font-size: 20px; margin: 0 0 8px; }
.shutten ul { margin: 0; padding-left: 24px; font-size: 14px; color: var(--text-sub); }
.shutten li { margin: 8px 0; }

/* ---- 用語の説明(解説文の点線の語を押すと開く) ---- */
.term-link {
  font: inherit;
  letter-spacing: inherit;
  color: var(--blue);
  /* 字の下半分だけを塗って、蛍光ペンで線を引いた見た目にする。
     display:inline と box-decoration-break で、行をまたいで折り返しても
     行ごとに線が付く(「介護予防・日常生活支援総合事業」のような長い語のため)。 */
  display: inline;
  background-color: transparent;
  background-image: linear-gradient(transparent 56%, var(--marker) 56%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}
.term-link:hover,
.term-link:focus-visible {
  color: var(--blue-dark);
  background-image: linear-gradient(transparent 56%, var(--marker-strong) 56%);
  text-decoration-style: solid;
}

.term-dialog {
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 24px;
  width: min(calc(100vw - 32px), 480px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.term-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.term-dialog-label { font-size: 14px; color: var(--text-sub); margin: 0 0 8px; }
.term-dialog-word { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.term-dialog-yomi { font-size: 14px; font-weight: 400; color: var(--text-sub); margin-left: 8px; }
.term-dialog-body { font-size: 16px; }
.term-dialog-body p { margin: 0 0 16px; }
.term-dialog-close {
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 8px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
}
.term-dialog-close:hover { background: var(--bg-gray); }

/* ---- 選択した文字をAIで調べる ---- */
.selection-search-guide {
  margin: 12px 0 24px;
  padding: 12px 16px;
  border-left: 4px solid var(--wood);
  background: rgba(251, 244, 230, .72);
  color: #b3241c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.book-head-text .selection-search-guide {
  max-width: 34em;
  margin-bottom: 0;
}

.selection-search {
  position: absolute;
  z-index: 1000;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--wood-dark);
  border-radius: 12px;
  background: #FFFDF7;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(58, 36, 18, .24);
}
.selection-search[hidden] { display: none; }
.selection-search-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;
}
.selection-search-term {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  font: inherit;
  cursor: pointer;
}
.selection-search-term[hidden] { display: none; }
.selection-search-label {
  margin: 0 0 8px;
  color: var(--text-sub-dark);
  font-size: 16px;
}
.selection-search-row { display: flex; gap: 8px; }
.selection-search-button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border: 1px solid var(--wood-dark);
  border-radius: 8px;
  background: var(--paper);
  color: var(--wood-deep);
  font: inherit;
  cursor: pointer;
}
.selection-search-term:hover,
.selection-search-button:hover { background: #F0E1C7; }
.selection-search-term:focus-visible,
.selection-search-button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.selection-search-note {
  margin: 8px 0 0;
  color: var(--text-sub-dark);
  font-size: 14px;
  line-height: 1.5;
}
.selection-search-status {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: var(--blue-dark);
  font-size: 14px;
}

@media (max-width: 480px) {
  .mondai { padding: 16px; }
  .kaisetsu-summary { padding: 14px 16px; }
  .kaisetsu { padding: 0 16px 16px; }
}

/* 読み上げには残し、画面上では1pxに畳む共通の補助文。 */
.yomiage-dake {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* 部屋・港をつなぐ木札の共通形。用途別CSSが位置を上書きする。 */
.scene-path {
  position: absolute;
  z-index: 29;
  right: 3.8%;
  bottom: 3.8%;
  min-width: 260px;
  min-height: 86px;
  padding: 13px 25px 14px;
  border: 2px solid #C1954E;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,231,176,.1), transparent 20% 80%, rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(105,62,27,.98), rgba(46,24,9,.98));
  box-shadow: inset 0 0 0 3px rgba(28,13,4,.42), 0 7px 16px rgba(5,2,0,.58);
  color: #FFF0C9;
  font-family: var(--serif);
  text-align: left;
  text-shadow: 0 2px 3px #100601;
  cursor: pointer;
}
.scene-path:visited { color: #FFF0C9; }
.scene-path span { display: block; color: #D4B574; font-size: 16px; letter-spacing: .14em; }
.scene-path strong { display: block; margin-top: 3px; font-size: 25px; letter-spacing: .05em; }
.scene-path:focus-visible {
  outline: 5px solid #F2CD77;
  outline-offset: 5px;
  box-shadow: 0 0 0 10px rgba(25,12,4,.76), 0 0 30px rgba(255,215,127,.5);
}
@media (hover: hover) {
  .scene-path:hover {
    border-color: #F0CE7E;
    background: linear-gradient(180deg, #8E6030, #513019);
    color: #FFF0C9;
    transform: translateY(-4px);
  }
}