@charset "utf-8";

/*
 * 読み器(PagedSVG を画面で読む。src/reader → reader.js)と、紙の本の注文の帯(converter.js の .cv-order)の見た目。
 *
 * 2026-10-22 に converter.css から分けた。Java の新しい頁(読み器・PDF変換)はこれを直に読み、
 * PHP の頁は converter.css の頭の @import で読む。使う色や角の丸みの変数(--accent・--r-full など)は、
 * PHP の頁では static/style.css、新しい頁では static/tool.css が決める。
 */

/* ---- 画面の中で読む(PagedSVG) ---- */

/* iframeが入るはずだった場所に、そのまま収まる大きさにする。
   地は読書の研究に沿ってやや暖色へ寄せた暗色。 */
.rd {
	position: relative;
	display: flex;
	flex-direction: column;
	height: min(76vh, 1100px);
	min-height: 380px;
	background-color: #2A2622;
	outline: none;
	overflow: hidden;
}
.rd:fullscreen { height: 100%; min-height: 0; }
.rd-strip {
	/* offsetLeft の基準になるので position を持たせる */
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	/* 吸着は「近ければ」にする。必ず吸着(mandatory)だと、組み上がる途中で
	   頁が足されるたびにブラウザが吸着し直し、スクロールの最中に最寄りの
	   頁へ引き戻された(利用者の「変換中にスクロールすると頁が飛ぶ」) */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rd-strip::-webkit-scrollbar { display: none; }
/* 右綴じは右から左へ並べる。direction で並べれば、置いた直後の位置が
   最初の頁(右端)になり、スクリプトが動かす前に最後の頁を見せない。 */
.rd-rtl .rd-strip { direction: rtl; }
/* 全画面の印。窓の右上。全画面(広げた状態)では同じ場所が「戻る」になる。
   読み器そのものは消さない——消すと画面の中の表示まで消え、次に全画面に
   できなかった */
.rd-fs {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .74);
	color: #F2EDE6;
	cursor: pointer;
	transition: opacity .25s ease;
}
.rd-fs:hover { background-color: rgba(60, 56, 50, .9); }
.rd-fs svg { display: block; width: 18px; height: 18px; margin: auto; }
.rd-quiet .rd-fs { opacity: 0; pointer-events: none; }
/* リンクを踏んで移った先から、元の文書へ戻る釦。全画面の印と対になる位置 */
.rd-back {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 12px;
	height: 36px;
	padding: 0 14px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .74);
	color: #F2EDE6;
	font-size: 13px;
	cursor: pointer;
	transition: opacity .25s ease;
}
.rd-back:hover { background-color: rgba(60, 56, 50, .9); }
.rd-quiet .rd-back { opacity: 0; pointer-events: none; }
/* マウスで引きずってめくる。引きずっている間は吸着と文字の選択を切る */
@media (hover: hover) { .rd-strip { cursor: grab; } }
.rd-drag .rd-strip { scroll-snap-type: none; cursor: grabbing; }
/* 組み上がるのを待っている間(頁が足されていく間)は吸着しない */
.rd-pending .rd-strip { scroll-snap-type: none; }
.rd-drag .rd-text, .rd-drag .rd-page { user-select: none; -webkit-user-select: none; }
/* 横組みは頁を縦に積んで縦スクロール。縦組み(右綴じ)だけが横に並ぶ。 */
.rd-vert .rd-strip {
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-x: auto;
	overscroll-behavior-y: contain;
	scroll-snap-type: y proximity;
}
/* 頁の上で指を広げても、ブラウザは画面ごと拡大しない。読み器が受けて
   頁を大きくする(zoom.ts)。払う(めくる・動かす)のはブラウザのまま */
.rd-strip { touch-action: pan-x pan-y; }
/* 拡大している間。頁は枠より大きいので縦横に動かせるようにし、吸着は切る。
   **真ん中に寄せるのは auto の余白で。** align-items: center のままだと、
   枠からはみ出た頁の上(左)側が、動かしても届かない所へ出てしまう */
.rd-zoomed .rd-strip,
.rd-zoomed.rd-vert .rd-strip {
	align-items: flex-start;
	overflow: auto;
	overscroll-behavior: contain;
	scroll-snap-type: none;
}
.rd-zoomed .rd-page { margin-top: auto; margin-bottom: auto; }
.rd-zoomed.rd-vert .rd-page { margin: 0 auto; }
.rd-page {
	flex: 0 0 auto;
	scroll-snap-align: center;
	background-color: #FFFFFF;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
	overflow: hidden;
}
.rd-page svg { display: block; width: 100%; height: 100%; }
/* 頁の前の絵(開いたカバー)が届くまでの場所取り(読み器の waitFront) */
.rd-front-wait {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F2F2F2;
}
.rd-front-msg {
	padding: 0 1em;
	color: #555555;
	font-size: .95em;
	text-align: center;
}
/* 頁は画像(SVG を blob で渡したもの)。ブラウザが一度描いて持つ */
.rd-page img.rd-img {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}
.rd-note {
	margin: auto;
	color: var(--ink-faint);
	font-size: 14px;
}

/* 操作部。読んでいる間は消える。 */
.rd-bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background-color: rgba(20, 18, 16, .74);
	transition: opacity .25s ease;
}
.rd-quiet .rd-bar { opacity: 0; pointer-events: none; }
.rd-bar button {
	flex: 0 0 auto;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.rd-bar button:hover { background-color: rgba(255, 255, 255, .22); }
.rd-count {
	flex: 0 0 auto;
	min-width: 5.5em;
	color: #D8D0C6;
	font-size: 12px;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.rd-seek {
	flex: 1 1 auto;
	min-width: 60px;
	accent-color: var(--accent);
}
/* 右綴じでは頁は右から左へ進む。つまみも同じ向きに動かす。 */
.rd-rtl .rd-seek { direction: rtl; }
/* 横組み(頁を縦に積む)では、つまみも縦に。右端に立て、上が最初の頁。
   帯の中の横のつまみだと、上下に動く頁と向きが合わない(利用者の指摘) */
/* 物理の right/top/bottom で置く。論理の inset-* はこの要素自身の
   writing-mode(縦)で解釈されて、横に寝てしまう */
.rd-vert .rd-seek {
	position: absolute;
	right: 6px;
	top: 56px;
	bottom: 62px;
	width: auto;
	height: auto;
	min-width: 0;
	writing-mode: vertical-lr;
	direction: ltr;
}
.rd-vert .rd-bar { justify-content: center; }
.rd-quiet .rd-seek { opacity: 0; pointer-events: none; }
.rd-seek { transition: opacity .25s ease; }
/* 表示の設定。メニューの「表示」から開く板。

   **窓の上端に札を出しっぱなしにするのをやめた**(2026-09-12)。札は窓を
   基準に置かれるので、紙のどこに載るかが頁の収まり方で変わり、本文の上に
   載ることがあった。板は開いている間だけで、そのとき人は読んでいない。
   休んでいるときに占めるのは操作帯の中の釦ひとつぶん。

   開く向きは上。操作帯のすぐ上に出すので、押した指から近い。 */
.rd-panel {
	position: absolute;
	inset-inline-start: 12px;
	bottom: 62px;
	display: grid;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .92);
	color: #D8D0C6;
	font-size: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	transition: opacity .25s ease;
}
.rd-panel[hidden] { display: none; }
.rd-quiet .rd-panel { opacity: 0; pointer-events: none; }
.rd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.rd-row[hidden] { display: none; }
.rd-row-label { white-space: nowrap; }
.rd-size {
	height: 28px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 13px;
	cursor: pointer;
}
.rd-size:hover { background-color: rgba(255, 255, 255, .22); }
.rd-size option { color: #10201A; background-color: #FFFFFF; }

/* 広げた状態。「閉じる」で画面の中の表示へ戻れる。
   **画面の幅で切ってはいけない。** 以前はこの指定が
   `@media (max-width: 640px)` の中だけにあり、PC では広げた印だけ
   付いて見た目が何も変わらなかった。 */
.rd.rd-expanded, body.tool .rd.rd-expanded {
	position: fixed;
	inset: 0;
	height: auto;
	min-height: 0;
	z-index: 90;
}

/* 広げる釦は狭い画面(携帯)だけに出す。
   携帯は窓が道具の並びに挟まれて頁が小さいので、広げる意味がある。
   PC は窓がそのまま大きく、ブラウザの全画面も使わなくなったので、
   この釦の出番がない(利用者「PCでも全画面アイコンが表示されて
   しまっています。これはスマホだけにしよう」)。
   広げたまま窓が広くなったときだけは、戻る手だてとして残す。 */
@media (min-width: 641px) {
	.rd:not(.rd-expanded) .rd-fs { display: none; }
}

/* 狭い画面では読み器を画面いっぱいにする。道具の並びに挟まれた
   窓では、頁が親指の爪ほどにしかならず読めない。 */
@media (max-width: 640px) {
	/* 携帯の頁送りは指で払う。前後の釦は場所を取るだけで、そのぶん
	   **閉じる釦が帯から押し出されて読書から戻れなくなっていた**。
	   残すのは、つまみ・頁数・閉じるの3つ。 */
	.rd-nav { display: none; }
	.rd-bar {
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	}
	.rd-bar button { min-width: 44px; height: 44px; }
	.rd-count { min-inline-size: 0; font-size: 12px; }
	.rd-seek { min-width: 40px; }
	.rd-vert .rd-seek { min-width: 0; bottom: calc(72px + env(safe-area-inset-bottom)); }
	.rd-menu,
	.rd-tocbox { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.rd-panel { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.rd-fs { inset-block-start: calc(8px + env(safe-area-inset-top)); width: 44px; height: 44px; }
	.rd-vert .rd-seek { top: calc(60px + env(safe-area-inset-top)); }
	.rd-size { height: 36px; }
}

/* 選んで写せる文字の層。頁のJSONの文字を透明で重ねる。
   **SVGの字は選ばせない**——中身は私用領域の符号なので、写しても
   意味を成さないうえ、縦組みでは選択の枠が半文字ずれる。 */
.rd-page { position: relative; }
.rd-page svg {
	user-select: none;
	-webkit-user-select: none;
}
.rd-text {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	/* リンクと図版の層と同じ理由で物理の座標。綴じ方の `rtl` を持ち込むと、
	   横に組んだ塊(柱など)が右から左へ並び、塊の中の位置が合わなくなる */
	direction: ltr;
	transform-origin: 0 0;
	line-height: 1;
	color: transparent;
	font-family: serif;
	/* 下の字が透けるように、選択の色は薄く敷く */
	-webkit-text-fill-color: transparent;
}
/* 塊(行)1 つにつき span 1 つ。**直の子だけを置く。**
   当たりの字は内側の span でくるむので、子孫まで絶対配置にすると
   印が塊の左上へ集まってしまう。 */
.rd-text > span {
	position: absolute;
	white-space: pre;
	transform-origin: 0 0;
	line-height: 1;
}
.rd-text ::selection { background-color: rgba(70, 130, 240, .32); }
.rd-text ::-moz-selection { background-color: rgba(70, 130, 240, .32); }

/* 踏めるリンクの層。頁 JSON の links の字箱に <a> を重ねる。

   **文字の層より上に置く。** 下に置くと選択用の透明な字が押さえてしまい
   踏めない。代わりにリンクの字だけは選んで写せなくなるが、踏めることを
   採る(リンクは版面のごく一部で、PDFの読み器も同じ順に重ねている)。
   重なりは **DOM の順**で決める(buildWords が文字の層の後ろへ押し出す)。
   z-index は使えない——付けると重なりの群が閉じ、下の頁の画像と色を
   混ぜられなくなって、青が字ではなく箱として乗る。
   引きずってめくっている間は素通りさせる(リンクが引きずりを飲まない)。 */
.rd-links {
	position: absolute;
	/* **物理の座標で置く。** 右綴じでは読み器が direction: rtl を敷くので、
	   inset-inline-start は右端になり、層ごと頁の外へずれる(実測) */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	direction: ltr;
	/* **transform は掛けない。** 掛けると重なりの群が閉じて、下の頁の画像と
	   色を混ぜられなくなる(青が字ではなく箱として乗る)。倍率は箱ごとに
	   px で入れる(reader.js の placeLinks) */
	/* **層そのものは押さえない。** 頁いっぱいの箱なので、押さえると下の
	   図版の釦と選ぶための字まで塞いでいた(リンクのある頁は図版を押しても
	   開かず、字も選べなかった)。押せるのはリンクの箱だけにする */
	pointer-events: none;
}
.rd-link { pointer-events: auto; }
.rd-drag .rd-link { pointer-events: none; }
.rd-link {
	position: absolute;
	display: block;
	box-sizing: border-box;
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
}
/* 字を青くする。版面の字は画像なので色は変えられないが、青を敷いて
   lighten で混ぜると、白い地はそのまま(白のほうが明るい)、黒い字だけが
   青くなる。 */
.rd-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #1A5FB4;
	mix-blend-mode: lighten;
	pointer-events: none;
}
/* 下線。横組みは字の下、縦組みは字の左(縦組みで下線が引かれる側)。
   混色の外なので、白い地の上でも青い線としてそのまま見える。 */
.rd-link-h { border-bottom: 1px solid #1A5FB4; }
.rd-link-v { border-left: 1px solid #1A5FB4; }
@media (hover: hover) {
	.rd-link:hover { background-color: rgba(26, 95, 180, .16); }
}
.rd-link:focus-visible { outline: 2px solid rgba(26, 95, 180, .8); }

/* ---------------- 本文の検索 ----------------
   頁は画像なのでブラウザの検索が届かない。頁 JSON の文字から探し、
   当たりの塊に薄く色を敷く(reader.js の markHits)。 */
/* メニューの釦(操作帯の右)。目次・検索・表示をここから開く */
.rd-menu-btn {
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	cursor: pointer;
}
.rd-menu-btn:hover { background-color: rgba(255, 255, 255, .22); }
.rd-menu-btn svg { display: block; width: 18px; height: 18px; margin: auto; }
.rd-menu-btn[aria-expanded="true"] { background-color: rgba(255, 255, 255, .3); }

/* メニュー。操作帯の右端の上に開く。項目を選ぶと畳まれて、その板が開く */
.rd-menu {
	position: absolute;
	z-index: 4;
	inset-inline-end: 12px;
	bottom: 62px;
	display: grid;
	min-width: 10em;
	padding: 6px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.rd-menu[hidden] { display: none; }
.rd-quiet .rd-menu { opacity: 0; pointer-events: none; }
.rd-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: none;
	border-radius: 9px;
	background: none;
	color: #F2EDE6;
	font: inherit;
	font-size: 14px;
	text-align: start;
	cursor: pointer;
}
.rd-menu-item[hidden] { display: none; }
.rd-menu-item:hover,
.rd-menu-item:focus-visible { background-color: rgba(255, 255, 255, .12); outline: none; }
.rd-menu-item svg { flex: none; width: 18px; height: 18px; }

/* 目次の板。題は折り返して全部見せ、読んでいる所に印を付ける。
   長い本は板の中で送る(窓の高さの6割まで)。 */
.rd-tocbox {
	position: absolute;
	z-index: 3;
	inset-inline-end: 12px;
	bottom: 62px;
	width: min(24em, calc(100% - 24px));
	max-height: 60%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	transition: opacity .25s ease;
}
.rd-tocbox[hidden] { display: none; }
.rd-quiet .rd-tocbox { opacity: 0; pointer-events: none; }
.rd-toclist { margin: 0; padding: 0; list-style: none; }
.rd-toclink {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	padding: 7px 10px 7px calc(10px + var(--depth, 0) * 1em);
	border: none;
	border-radius: 8px;
	background: none;
	color: #D8D0C6;
	font: inherit;
	font-size: 13px;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
}
.rd-toclink:hover,
.rd-toclink:focus-visible { background-color: rgba(255, 255, 255, .1); outline: none; }
.rd-tocname { flex: 1 1 auto; }
.rd-tocpage {
	flex: none;
	color: #A89F94;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.rd-here > .rd-toclink { background-color: rgba(255, 255, 255, .14); color: #F2EDE6; }

/* 検索の板。操作帯と同じ場所に開く(利用者の希望で流れの中に置いたまま)。

   **操作帯より上に重ねる。** 操作帯は `position: absolute` で浮いていて、
   板は流れの中の要素なので、何もしないと操作帯が板の上に描かれる。
   板の中の打ち込む欄にも操作帯の地(黒 74%)とつまみが被さり、欄そのものが
   半透明に見えていた——欄に地の色を入れても直らなかったのはこのため
   (利用者「テキストフィールドが半透明になる」)。読むのをやめてしばらく
   すると操作帯が消える(`.rd-quiet`)ので、そのときだけ欄がはっきり見えた
   (利用者「カーソルを外してしばらくすると透明でなくなる」)。

   板を位置付きにして層を上げ、地も不透明にする。検索している間は操作帯を
   隠すことになるが、頁を送る釦は板の中にある。 */
.rd-find {
	position: relative;
	z-index: 3;
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background-color: #141210;
	border-block-start: 1px solid rgba(255, 255, 255, .12);
}
/* **`display` を書いた要素には hidden 属性が効かない。**
   板は `display: flex` なので、`panel.hidden` を立てても消えなかった。
   操作帯が上に被さっていた間は、隠れているのと見分けがつかなかったが、
   板を上の層へ移したとたん、最初から開きっぱなしで×でも閉じない板に
   なった(利用者「最初からテキスト検索が出ていて、×で閉じられません」)。
   他の板(.rd-panel .rd-menu .rd-tocbox .rd-row)には元からこの一行がある。 */
.rd-find[hidden] { display: none; }
/* 打ち込む欄。**背景は不透明にする。**
   半透明(白 8%)にしていたら、下の操作帯のつまみや頁が透けて、
   欄そのものが薄く見えていた(利用者「テキストフィールドが半透明になる」)。
   字を打つ場所は、下が何であってもはっきり見えていなければならない。 */
.rd-find-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: var(--r-sm, 4px);
	background-color: #2B2720;
	color: #F5F1EA;
	font: inherit;
	font-size: 14px;
}
.rd-find-input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .6);
	background-color: #332E26;
}
.rd-find-input::placeholder { color: rgba(242, 237, 230, .5); }
.rd-find-stat {
	flex: none;
	min-inline-size: 4.5em;
	text-align: center;
	color: rgba(242, 237, 230, .8);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.rd-find-nav,
.rd-find-close {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.rd-find-nav:hover,
.rd-find-close:hover { background-color: rgba(255, 255, 255, .24); }
.rd-find-nav:disabled { opacity: .4; cursor: default; }

/* 当たりの塊。**字は透明のまま**なので、敷いた色だけが見える。
   下の頁の字と混ざるよう、濃さは控えめにする */
/* 検索で当たった字に敷く印。塊の中の位置は reader.js が頁の座標で入れる。
   絶対配置なので、組みの流れには入らない(字の並びを乱さない)。 */
.rd-text .rd-hit {
	position: absolute;
	background-color: rgba(255, 214, 0, .38);
	border-radius: 2px;
}
/* いま送っている当たり。‹ › で移っている一つだけ色を変える。
   全部同じ色だと、どれを見せられているのか分からない。 */
.rd-text .rd-hit-now {
	background-color: rgba(150, 226, 60, .55);
}

/* ---------------- 図版のポップアップ ----------------
   頁は画像なので、中の図版はそれ以上大きくならない。透明な釦を重ね、
   押したら図版だけを画面いっぱいに出す(reader.js の figs)。

   **文字の層より上、リンクの層より下に置く**(DOM の順。figs.ts と text.ts)。
   文字の層は頁いっぱいの箱なので、下に置くと図版の釦を塞ぐ(字のある頁では
   図版を押しても開かなかった)。図版の上の字は選べなくなるが、図版は画像。 */
.rd-figs {
	position: absolute;
	/* リンクの層と同じ理由で物理の座標。層に transform は掛けない */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	direction: ltr;
	/* 層そのものは押さえない。図版の無い所は下の字へ通す */
	pointer-events: none;
}
.rd-fig { pointer-events: auto; }
/* 図版の釦。図版そのものの上に透明に重ねる。

   **サイト共通の `button` の見た目を断つ。** style.css の裸の `button` は
   角を 999px 丸め、指を載せると地を薄い灰色(`--surface-muted`)にする。
   `.rd-fig` は地を透明にしていたが、丸みは消し忘れていたうえ、
   `button:hover` のほうが `.rd-fig` より細かい規則なので、指を載せた
   ときだけ灰色が戻っていた——図版の上に灰色の角丸矩形が出る、の正体
   (利用者「カーソルを載せると灰色の角丸矩形が出てしまいます」)。
   hover の並びまで含めて断ち切る。 */
.rd-fig,
.rd-fig:hover,
.rd-fig:focus {
	box-sizing: border-box;
	padding: 0;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
}
.rd-fig {
	position: absolute;
	display: block;
	cursor: zoom-in;
}
/* 指を載せたときの合図。**図版の上に色を被せない。**
   何かを敷けば、その下の図版はその分だけ見えなくなる。
   代わりに縁だけを内側になぞる。図版そのものは何も遮らない。 */
@media (hover: hover) {
	.rd-fig:hover {
		outline: 2px solid rgba(26, 95, 180, .6);
		outline-offset: -2px;
	}
}
.rd-fig:focus-visible { outline: 2px solid rgba(26, 95, 180, .9); }

/* ---------------- 音声・動画 ----------------
   Copper の頁 JSON の media(19137〜)に釦を重ねる(reader.js の media)。
   **いちばん上の層**(DOM の順。media.ts と text.ts)。図版・リンクと同じく
   物理の座標で、層に transform は掛けない。音声は読み器に一つの Audio で鳴らす。

   頁の画像には本が描いた印(スピーカーなど)や動画のポスターが出ているので、
   釦は透明にして縁の合図だけを出す。何も描かれない既定の再生部(横長の箱)にだけ
   再生の印を出す。 */
.rd-media-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	direction: ltr;
	pointer-events: none;
}
.rd-media,
.rd-media:hover,
.rd-media:focus {
	box-sizing: border-box;
	padding: 0;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
}
.rd-media {
	position: absolute;
	display: block;
	pointer-events: auto;
	cursor: pointer;
}
@media (hover: hover) {
	.rd-media:hover {
		outline: 2px solid rgba(26, 95, 180, .6);
		outline-offset: 1px;
	}
}
.rd-media:focus-visible { outline: 2px solid rgba(26, 95, 180, .9); outline-offset: 1px; }
/* 鳴っている間は縁を出したままにする(もう一度押せば止まる) */
.rd-media.rd-media-playing {
	outline: 2px solid rgba(26, 95, 180, .9);
	outline-offset: 1px;
	border-radius: 2px;
}
/* 既定の再生部。頁には何も描かれないので、地と再生の印を出す */
.rd-media.rd-media-bar,
.rd-media.rd-media-bar:hover {
	background-color: rgba(26, 95, 180, .08);
	border-radius: 4px;
}
.rd-media.rd-media-bar::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	margin-top: -7px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent rgba(26, 95, 180, .9);
}
.rd-media.rd-media-bar.rd-media-playing::before {
	width: 4px;
	height: 14px;
	border-width: 0 4px;
	border-color: rgba(26, 95, 180, .9);
}
/* 動画の釦。ポスターの上に再生の印を出す。ポスターの無い動画は地も敷く */
.rd-media.rd-media-v::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -14px 0 0 -10px;
	border-style: solid;
	border-width: 14px 0 14px 24px;
	border-color: transparent transparent transparent rgba(255, 255, 255, .92);
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6));
}
.rd-media.rd-media-blank,
.rd-media.rd-media-blank:hover {
	background-color: rgba(0, 0, 0, .75);
}
/* 鳴っている音声の操作部。読み器の右上、全画面の印(.rd-fs、36px)の左。
   頁をめくっても止められるように頁の外に置き、操作帯が隠れる間(.rd-quiet)も出しておく */
.rd-audio {
	position: absolute;
	top: 10px;
	right: 56px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 120px);
	height: 36px;
	padding: 0 6px;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .82);
	color: #F2EDE6;
	font-size: 13px;
	direction: ltr;
}
.rd-audio[hidden] { display: none; }
.rd-audio-btn,
.rd-audio-btn:hover,
.rd-audio-btn:focus {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}
.rd-audio-btn:hover { background-color: rgba(255, 255, 255, .16); }
.rd-audio-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 1px; }
.rd-audio-btn svg { display: block; width: 14px; height: 14px; margin: auto; fill: currentColor; }
.rd-audio-name {
	min-width: 0;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rd-audio-time { flex: none; font-variant-numeric: tabular-nums; opacity: .8; }
.rd-media-video {
	position: absolute;
	pointer-events: auto;
	background: #000;
	object-fit: contain;
}

.rd-fig-view {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(12, 11, 10, .92);
	cursor: zoom-out;
}
.rd-fig-view img {
	/* 寸法は reader.js が入れる(取得元の 3 倍まで引き伸ばす)。
	   ここは入る大きさを超えないための歯止め */
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-color: #FFFFFF;
	box-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}
.rd-fig-close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .16);
	color: #F2EDE6;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.rd-fig-close:hover { background-color: rgba(255, 255, 255, .3); }
/* 動画の板。16:9 の枠を、板に入る最大の大きさで置く */
.rd-video-view { cursor: default; }
.rd-video {
	width: min(100%, calc((100vh - 48px) * 16 / 9));
	aspect-ratio: 16 / 9;
	max-height: 100%;
	background-color: #000000;
	box-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}
.rd-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------- スライド表示 ----------------
   1頁ずつ画面いっぱいに見せて送る(reader.js の slide。2026-10-22)。窓は「全画面で読む」と同じく
   広げ(rd-expanded)、地を黒に近くして、読むときの道具は隠す。
   **頁の並び(.rd-strip)はそのまま使う。** 頁を同じ升目に重ねて真ん中に置き、見せている頁
   (data-now)だけを出す。送るときに前の頁は data-leaving の間だけ見えて出ていく。
   動きは reader.js が付ける(prefers-reduced-motion なら付けない) */
.rd.rd-slide { background-color: #0B0B0A; }
.rd.rd-slide .rd-strip {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	padding: 0;
	overflow: hidden;
	scroll-snap-type: none;
	/* 指は払って送る(reader.js)。ブラウザに動かさせない・拡大させない */
	touch-action: none;
	cursor: default;
}
.rd.rd-slide .rd-page {
	grid-area: 1 / 1;
	visibility: hidden;
	box-shadow: none;
}
.rd.rd-slide .rd-page[data-now],
.rd.rd-slide .rd-page[data-leaving] { visibility: visible; }
.rd.rd-slide .rd-page[data-leaving] { pointer-events: none; }
/* 頁の中の図版は押しても大きくしない(頁がもう画面いっぱい)。図版の上を押しても送る。
   リンク・音声・動画の釦はそのまま押せる */
.rd.rd-slide .rd-fig { pointer-events: none; }
.rd.rd-slide .rd-bar,
.rd.rd-slide .rd-seek,
.rd.rd-slide .rd-fs,
.rd.rd-slide .rd-back,
.rd.rd-slide .rd-panel,
.rd.rd-slide .rd-menu,
.rd.rd-slide .rd-tocbox,
.rd.rd-slide .rd-find { display: none; }
/* 帯を消している間はカーソルも消す。マウスを動かせば戻る */
.rd.rd-slide:not(.rd-slide-awake),
.rd.rd-slide:not(.rd-slide-awake) * { cursor: none; }
/* 鳴っている音声の操作部は、帯と一緒に出し入れする */
.rd.rd-slide .rd-audio {
	top: calc(12px + env(safe-area-inset-top));
	right: 12px;
	transition: opacity .2s ease;
}
.rd.rd-slide:not(.rd-slide-awake) .rd-audio { opacity: 0; pointer-events: none; }

/* スライドの帯。下の真ん中に小さく。マウスを動かしたときだけ出る(rd-slide-awake) */
.rd-slide-bar { display: none; }
.rd.rd-slide .rd-slide-bar {
	position: absolute;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 24px);
	padding: 6px;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .88);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
	color: #F2EDE6;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	/* 左右の釦は画面の左右(左右半分のクリックと同じ)。右綴じでも並びは返さない */
	direction: ltr;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.rd.rd-slide.rd-slide-awake .rd-slide-bar { opacity: 1; pointer-events: auto; }
.rd-slide-bar .rd-slide-nav,
.rd-slide-bar .rd-slide-end {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.rd-slide-bar .rd-slide-nav:hover,
.rd-slide-bar .rd-slide-end:hover { background-color: rgba(255, 255, 255, .24); }
.rd-slide-arrow { font-size: 17px; line-height: 1; }
.rd-slide-count {
	flex: none;
	min-width: 5em;
	padding: 0 4px;
	color: #D8D0C6;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.rd-slide-auto {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline-start: 6px;
	color: #D8D0C6;
}
.rd-slide-auto select {
	height: 32px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 13px;
	cursor: pointer;
}
.rd-slide-auto select:hover { background-color: rgba(255, 255, 255, .22); }
.rd-slide-auto option { color: #10201A; background-color: #FFFFFF; }
.rd-slide-bar :focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 1px; }
/* 狭い画面では、前へ・次へ・自動送りの字を畳んで印と数だけにする(名は aria-label に残る) */
@media (max-width: 480px) {
	.rd-slide-word,
	.rd-slide-auto > span { display: none; }
	.rd-slide-bar .rd-slide-nav { padding: 0 10px; }
}

/* 操作帯の「スライド」の釦。狭い画面(携帯)では印だけ */
.rd-bar .rd-slide-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px 0 10px;
	font-size: 13px;
}
.rd-slide-btn svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 640px) {
	.rd-bar .rd-slide-btn { justify-content: center; padding: 0; }
	.rd-slide-btn .rd-slide-label { display: none; }
}

/* 操作帯にじかに置く釦(2026-10-22。文字の大きさ A−・A＋、縦書き／横書き、目次、PDF で保存)。
   帯の幅で出し分ける。狭い帯ではメニューの中のもの(表示の板・目次・PDF で保存)を使う。
   幅は読み器の箱で測る(設定の引き出しを横に開くと、窓が広くても帯は狭くなる) */
.rd { container-type: inline-size; }
.rd-bar .rd-quick { display: none; }
@container (min-width: 560px) {
	.rd-bar .rd-quick-1 { display: inline-flex; }
}
@container (min-width: 820px) {
	.rd-bar .rd-quick-2 { display: inline-flex; }
	/* 帯に釦があるので、メニューには出さない */
	.rd-menu .rd-menu-pdf { display: none; }
}
.rd-bar .rd-quick[hidden] { display: none; }
.rd-bar .rd-toc-quick,
.rd-bar .rd-pdf-quick {
	align-items: center;
	padding: 0 12px;
	font-size: 13px;
	white-space: nowrap;
}
/* 二つ組の釦(A−・A＋、縦書き・横書き) */
.rd-bar .rd-seg {
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
}
.rd-bar .rd-seg .rd-seg-btn {
	min-width: 0;
	height: 30px;
	padding: 0 10px;
	background-color: transparent;
	font-size: 13px;
	white-space: nowrap;
}
.rd-bar .rd-seg .rd-seg-btn:hover { background-color: rgba(255, 255, 255, .16); }
.rd-bar .rd-seg .rd-seg-btn[aria-pressed="true"] { background-color: #F2EDE6; color: #1E1B16; font-weight: 700; }
.rd-bar .rd-seg .rd-seg-btn:disabled { opacity: .35; cursor: default; background-color: transparent; }
.rd-bar .rd-step .rd-seg-btn { font-size: 14px; }


/* 紙の本の注文の見本(store=1 に order=1、2026-10-20 座間ソフト TECH-20261020-006)。
   読書窓の下に、開いたカバー・本文の色・「この内容で注文する」を出す。
   本文モノクロは Copper がグレーで組んだ頁を見せる(刷るときはグレーの PDF/X-3) */
.cv-order {
	margin: 12px 0 24px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background-color: var(--surface);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.85;
}
.cv-order-head strong { font-size: 15px; }
.cv-order-spec { color: var(--ink-muted); font-size: 13px; margin-left: 8px; }
.cv-order-note,
.cv-order-warn,
.cv-order-covernote { margin: 4px 0; font-size: 13px; line-height: 1.7; color: var(--ink-muted); }
.cv-order-warn { padding: 6px 10px; border-radius: var(--r-sm); background-color: var(--danger-soft); color: var(--danger); }
.cv-order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.cv-order-ink { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-muted); }
.cv-order-ink label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); cursor: pointer; }
.cv-order-go {
	padding: 7pt 16pt;
	border-radius: var(--r-full);
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
}
.cv-order-go { border: 1px solid var(--accent); background-color: var(--accent); color: #FFFFFF; font-weight: 700; }
.cv-order-go:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.cv-order-go[disabled] { opacity: .45; cursor: default; }