/* 教科書補助の「黒板に映す」画面(templates/hojo_board.html・public/hojo_board.js)。
   1枚の画面は 1920×1080 で組み、画面の大きさに合わせて縮める(どの電子黒板でも同じ見え方にするため)。
   文字の大きさの目安:本文 46px。75型(横約165cm)に映すと、字の高さが約4cmになる */
html, body.hjb-page { margin: 0; height: 100%; background: #20262b; overflow: hidden; }
.hjb { position: fixed; inset: 0; display: flex; flex-direction: column; }
.hjb-fit { flex: 1; position: relative; overflow: hidden; }
.hjb-stage.hj { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; max-width: none; padding: 0; transform-origin: 0 0; background: #fff; }

/* 1枚の画面 */
.hjb-slide { position: absolute; inset: 0; display: none; flex-direction: column; padding: 56px 110px 48px; box-sizing: border-box; font-size: var(--fs, 46px); line-height: 1.75; color: var(--ink, #222); }
.hjb-slide.on { display: flex; }
/* 長いふりがなで漢字の字間が広がらないよう、ふりがなを左右にはみ出させる(hojo.css の .hj-v2 と同じ) */
.hjb-slide rt { margin-inline: -1em; }
.hjb-slide h1 rt, .hjb-slide h2 rt { margin-inline: 0; }
html:not([data-ruby="off"]) .hjb-slide { line-height: 2.05; }
html[data-bfs="l"] .hjb-slide { --fs: 56px; }
.hjb-slide > .hjb-h { flex: none; display: flex; align-items: baseline; gap: 28px; border-bottom: 5px solid var(--green); padding-bottom: 10px; margin-bottom: 30px; }
.hjb-slide > .hjb-h h2 { font-size: 1.4em; line-height: 1.4; margin: 0; padding: 0; border: 0; color: var(--green); }
.hjb-slide > .hjb-h .c { font-size: .55em; color: var(--muted); white-space: nowrap; }
.hjb-slide > .hjb-c { flex: 1; min-height: 0; overflow: hidden; }
.hjb-slide .hjb-c > * { font-size: calc(1em * var(--k, 1)); }
.hjb-slide p { margin: 0 0 .5em; }
.hjb-slide .hj-mapbox { display: none; }

/* 表紙 */
.hjb-slide.k-title { justify-content: center; }
.hjb-slide.k-title .hjb-sub { font-size: .7em; color: var(--muted); margin: 0; }
.hjb-slide.k-title h1 { font-size: 2.1em; line-height: 1.4; color: var(--green); margin: .1em 0 .7em; }
.hjb-slide.k-title .hj-q { border-width: 5px; border-radius: 20px; padding: .6em .9em; }
.hjb-slide .hj-q .lbl, .hjb-slide .hj-ans .lbl { font-size: .6em; padding: .1em .6em; border-radius: 8px; }
.hjb-slide .hj-q p { font-size: 1.15em; margin: .3em 0 0; }

.hjb-points { margin: 0; padding-left: 1.4em; }
.hjb-points li { margin: 0 0 .5em; }

/* 本文の部品を大きな画面用に */
.hjb-slide table { font-size: .82em; line-height: 1.55; }
.hjb-slide th, .hjb-slide td { padding: .25em .5em; }
.hjb-slide .hj-tbl { overflow: visible; }
.hjb-slide .hj-flow { border-left-width: 6px; margin-left: 12px; }
.hjb-slide .hj-flow li { padding: 0 0 .25em 1.1em; }
.hjb-slide .hj-flow li::before { left: -19px; top: .55em; width: 26px; height: 26px; border-width: 6px; }
.hjb-slide .hj-why, .hjb-slide .hj-pair > div { border-radius: 16px; padding: .4em .7em; }
.hjb-slide .hj-tatoe { border-left-width: 10px; padding-left: .6em; }
.hjb-slide .hj-tatoe b { font-size: .7em; }
.hjb-slide .hj-pair { gap: .5em; }
.hjb-slide .boron-h { font-weight: 700; color: #b3261e; }
.hjb-slide .boron-test, .hjb-slide .yori-note { font-size: .7em; color: var(--muted); }
.hjb-slide .boron-src { font-size: .5em; color: var(--muted); }
.hjb-slide.k-boron > .hjb-h { border-color: #c62828; }
.hjb-slide.k-boron > .hjb-h h2 { color: #b3261e; }
.hjb-slide.k-yorimichi > .hjb-h { border-color: var(--yellow, #f2c200); }

/* 画像の画面:絵を大きく、説明は下に */
.hjb-slide.k-fig .hjb-c { display: flex; gap: 40px; justify-content: center; }
.hjb-slide.k-fig figure { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.hjb-slide.k-fig img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 10px; }
.hjb-slide.k-fig figcaption { flex: none; font-size: .62em; line-height: 1.5; margin-top: 14px; max-width: 100%; }
.hjb-slide.k-fig figcaption .t { display: none; }
.hjb-slide.k-fig figcaption .cr { display: block; font-size: .6em; color: var(--muted); }
.hjb-slide.k-fig figcaption .cr a { color: inherit; text-decoration: none; }

/* 人物 */
.hjb-slide .hj-people { display: grid; grid-template-columns: 1fr 1fr; gap: .4em .8em; }
.hjb-slide .hj-person { display: flex; gap: .5em; align-items: flex-start; }
.hjb-slide .hj-person .ph { width: 150px; height: 188px; flex: none; object-fit: cover; border-radius: 10px; font-size: 80px; }
.hjb-slide .hj-person .n { font-weight: 700; color: var(--green); }
.hjb-slide .hj-person .d { font-size: .68em; line-height: 1.6; }

/* 重要なところ */
.hjb-slide .hj-miss { display: grid; gap: .45em; }
.hjb-slide .hj-miss > div { font-size: .75em; line-height: 1.6; border-left: 8px solid var(--green); padding-left: .6em; }
.hjb-slide .hj-miss .o { font-weight: 700; font-size: 1.15em; }

/* たしかめ問題・問いへの答え:答えは「答えを見せる」まで隠す */
.hjb-qq, .hjb-q2 { font-size: 1.15em; font-weight: 700; }
.hjb-hint { font-size: .75em; color: var(--muted); }
.hjb-qa { font-size: 1.3em; font-weight: 700; color: #c0392b; }
.hjb-hide { margin-top: .6em; }
.hjb-slide:not(.shown) .hjb-hide { visibility: hidden; }
.hjb-show { margin-top: .5em; font: inherit; font-size: .8em; font-weight: 700; color: #fff; background: var(--green); border: 0; border-radius: 16px; padding: .3em 1.2em; cursor: pointer; }
.hjb-slide.shown .hjb-show { display: none; }
.hjb-cr { font-size: .5em; line-height: 1.6; }

/* ページ番号(画面の右下) */
.hjb-pg { position: absolute; right: 40px; bottom: 18px; font-size: 26px; color: var(--muted); }

/* 下の操作の帯(16:9の画面の外。映しても授業のじゃまにならないよう暗くする) */
.hjb-bar { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: #20262b; color: #cfd6db; font-size: 15px; }
.hjb-bar button, .hjb-bar a { font: inherit; color: #fff; background: #37414a; border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.hjb-bar button[aria-pressed="true"] { background: var(--green); }
.hjb-bar #hjb-prev, .hjb-bar #hjb-next { font-size: 18px; padding: 10px 22px; }
.hjb-no { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.hjb-sp { flex: 1; }
.hjb-g { display: inline-flex; align-items: center; gap: 4px; }
.hjb-g > span { margin-right: 4px; }
:fullscreen .hjb-bar { opacity: .25; transition: opacity .2s; }
:fullscreen .hjb-bar:hover { opacity: 1; }
@media (max-width: 700px) { .hjb-g { display: none; } }
.hjb-slide.k-title .hjb-c { flex: none; }
.hjb-slide .boron-h::before { font-size: .5em; }
/* 画像の画面:絵を画面の高さいっぱいに(hojo.css の本文用の大きさの制限を外す) */
.hjb-slide.k-fig figure { height: 100%; }
.hjb-slide.k-fig figure img { height: 0; flex: 1 1 auto; max-height: none; max-width: 100%; width: 100%; background: none; }
.hjb-slide.k-fig figcaption { font-size: .7em; }
.hjb-slide.k-fig .hj-fig img { aspect-ratio: auto; object-fit: contain; }
html:not([data-ruby="off"]) .hjb-slide.k-fig figcaption .cap { line-height: 2; }
/* 人物:hojo.css の本文用の小さい字を、映す大きさに */
.hjb-slide .hj-person { border: 0; padding: 0; background: none; }
.hjb-slide .hj-person .n { font-size: 1em; line-height: 1.5; }
.hjb-slide .hj-person .d { font-size: .72em; line-height: 1.75; }
.hjb-slide .hj-person .ph-none { display: flex; align-items: center; justify-content: center; }
.hjb-slide .hj-person .d { color: var(--ink); line-height: 2; }

/* キーワードを隠す(授業の準備)。さわると出る */
.kw-on .hjb-kw:not(.open) { color: transparent !important; background: #fff4c2; border-bottom: 4px solid var(--cta); border-radius: 6px; cursor: pointer; text-decoration: none; }
.kw-on .hjb-kw:not(.open) rt, .kw-on .hjb-kw:not(.open) * { color: transparent !important; border-color: transparent; }
.kw-on .hjb-kw.open { background: #fff4c2; border-radius: 6px; }

/* 授業の準備・小さい画面の案内(画面の上に重ねる) */
.hjb-prep, .hjb-small { position: fixed; inset: 0; z-index: 10; background: rgba(20,26,30,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hjb-prep[hidden], .hjb-small[hidden] { display: none; }
.hjb-prep-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 22px 26px; width: min(760px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; font-size: 16px; line-height: 1.7; }
.hjb-prep-card h2 { margin: 0 0 8px; font-size: 22px; color: var(--green); }
.hjb-prep-card p { margin: 0 0 10px; }
.hjb-prep-card button, .hjb-prep-card a { font: inherit; font-size: 15px; border: 1.5px solid var(--green); background: #fff; color: var(--green); border-radius: 8px; padding: 6px 12px; margin: 0 6px 6px 0; cursor: pointer; text-decoration: none; display: inline-block; }
.hjb-prep-card .go { background: var(--green); color: #fff; font-weight: 700; }
.hjb-prep-list { list-style: none; margin: 6px 0 12px; padding: 0; border-top: 1px solid var(--line); }
.hjb-prep-list li { border-bottom: 1px solid var(--line); padding: 6px 2px; }
.hjb-prep-list label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.hjb-prep-list input, .hjb-prep-kw input { width: 20px; height: 20px; flex: none; }
.hjb-prep-list .t { flex: 1; }
.hjb-prep-list .n { color: var(--muted); font-size: 14px; white-space: nowrap; }
.hjb-prep-list .p-quiz .t, .hjb-prep-list .p-answer .t { color: var(--cta); }
.hjb-prep-kw { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-weight: 700; cursor: pointer; }
.hjb-prep-msg { font-size: 14px; color: var(--muted); word-break: break-all; }

/* 折り返しは、ことばのまとまり(文節)で。Chrome・Edge は auto-phrase で日本語を文節で折り返す */
.hjb-stage { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.hjb-slide h2 { text-wrap: balance; }
/* 黒板をさわって進めるとき、文字が選択されて青くならないように */
.hjb-stage { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* 用語(span にしたもの)は、映す画面では色だけ */
.hjb-slide .term { color: var(--link); border: 0; background: none; padding: 0; font: inherit; }
/* 本文の例の答え(<span class="hj-a">)。隠しているあいだは「答え」の札 */
.ex-on .hj-a:not(.open) { color: transparent !important; background: #e8eef9; border-radius: 6px; cursor: pointer; position: relative; }
.ex-on .hj-a:not(.open) * { color: transparent !important; }
.ex-on .hj-a:not(.open)::before { content: "答え(さわると出る)"; font-size: .6em; color: #3a5a9c; white-space: nowrap; margin-right: .3em; }
.ex-on .hj-a.open { background: #e8eef9; border-radius: 6px; color: #c0392b; }
/* 家系図(本文の SVG)は、画像と同じく1画面に大きく */
.hjb-slide.k-fig .hj-kakei { flex: 1; min-height: 0; margin: 0; border: 0; padding: 0; display: flex; justify-content: center; }
.hjb-slide.k-fig .hj-kakei svg { height: 100%; width: auto; max-width: 100%; }
/* 教科書の範囲をこえる内容(中学ではここが など):むらさきの線と札 */
.hjb-slide.k-hatten > .hjb-h { border-color: #8a4b9c; }
.hjb-slide.k-hatten > .hjb-h h2 { color: #6d3a7c; }
.hjb-slide.k-hatten > .hjb-h::before { content: "教科書の範囲をこえる内容"; font-size: 24px; color: #fff; background: #8a4b9c; border-radius: 6px; padding: 2px 12px; align-self: center; }
.hjb-slide .hj-point { border-width: 4px; border-radius: 16px; padding: .3em .7em; }
.hjb-slide .hj-point::before { font-size: .55em; }
.hjb-slide .hj-more a { font-size: .7em; }
.hjb-slide h3 { font-size: 1.05em; color: var(--green); margin: 0 0 .3em; border-left: 8px solid var(--green); padding-left: .4em; }