
@page { size: A3 portrait; margin: 0; }
* { box-sizing: border-box; }
html { background: #d7d9dc; }
body { margin: 0; color: #171717; font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; font-size: 11pt; line-height: 1.65; counter-reset: page-number; }
#pages { position: relative; width: 297mm; margin: 12mm 12mm 12mm 76mm; }
.page { width: 297mm; height: 420mm; padding: 22mm 18mm; position: relative; background: white; margin: 0 0 10mm; box-shadow: 0 1mm 4mm #0003; counter-increment: page-number; }
.page-header { position: absolute; top: 9mm; right: 18mm; font-size: 8pt; color: #555; }
.page-footer { position: absolute; bottom: 9mm; right: 18mm; font-size: 9pt; color: #555; }
.page-footer::after { content: 'Page ' counter(page-number); }
.page-content { width: 261mm; height: 376mm; display: flow-root; }
.page-nav-rail { position: absolute; left: -64mm; top: 22mm; bottom: 22mm; width: 55mm; }
.page-nav { position: sticky; top: 12mm; max-height: calc(100vh - 24mm); overflow-y: auto; color: #555; font-size: 9pt; line-height: 1.6; }
.page-nav strong { display: block; margin-bottom: 3mm; font-size: 9pt; font-weight: 600; }
.page-nav a { display: block; padding: 1.5mm 2mm; color: inherit; text-decoration: none; border-left: .5mm solid transparent; overflow-wrap: anywhere; }
.page-nav a:hover, .page-nav a:focus-visible { color: #171717; background: #ffffffa6; border-left-color: #777; }
.page-nav a[aria-current="location"] { color: #171717; background: #ffffffa6; border-left-color: #777; }
.page-nav .level-2 { padding-left: 5mm; }
.page-nav .level-3 { padding-left: 8mm; }
h1, h2, h3 { scroll-margin-top: 12mm; }
h1 { font-size: 23pt; line-height: 1.35; margin: 0 0 8mm; }
h2 { font-size: 19pt; line-height: 1.4; margin: 0 0 5mm; }
h3 { font-size: 14pt; line-height: 1.4; margin: 6mm 0 3mm; }
p { margin: 0 0 4mm; overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 4mm 0 6mm; font-size: 9pt; line-height: 1.5; }
th, td { border: .2mm solid #999; padding: 2mm; vertical-align: top; overflow-wrap: anywhere; }
td[rowspan] { vertical-align: middle; }
th { background: #f0f1f2; font-weight: 600; text-align: left; }
.section-number { text-align: center; vertical-align: middle; white-space: nowrap; }
.explanation-unit { position: relative; margin: 0 0 5mm; display: flow-root; }
.explanation-unit::before { content: ''; position: absolute; left: -7mm; top: 0; bottom: 0; width: 1mm; border-radius: .5mm; background: #efa9c1; }
.explanation-unit[data-tone="blue"]::before { background: #a8c4f3; }
.explanation-unit > :last-child { margin-bottom: 0; }
figure { margin: 3mm 0 4mm; }
.image-explanation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7mm; align-items: start; break-inside: avoid; }
.image-explanation > * { min-width: 0; }
.image-explanation > figure { margin: 0; }
.image-explanation .image-placeholder { height: auto; aspect-ratio: 16 / 9; padding: 3mm; text-align: center; }
.image-explanation .summary { padding: 2mm 3mm; background: #eef3f9; color: #536273; }
.image-explanation ol { margin: 0 0 4mm; padding-left: 7mm; }
.image-explanation li { margin-bottom: 2mm; overflow-wrap: anywhere; }
.image-explanation .note { padding: 3mm; border-left: .7mm solid #a8c4f3; background: #f3f4f6; }
.image-explanation .source { font-size: 8.5pt; color: #555; }
.image-explanation .description > :last-child { margin-bottom: 0; }
.overview-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7mm; align-items: start; break-inside: avoid; }
.overview-detail figure { min-width: 0; margin: 0 0 3mm; }
.overview-detail .image-placeholder { height: 48mm; padding: 3mm; text-align: center; }
figure img { display: block; width: 100%; height: auto; border: .2mm solid #bbb; }
.image-placeholder { width: 100%; height: 43mm; border: .2mm solid #bbb; background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; color: #666; }
.image-placeholder small { font-size: 9pt; }
figcaption { font-size: 8.5pt; line-height: 1.5; padding-top: 2mm; overflow-wrap: anywhere; }
pre { margin: 0 0 4mm; padding: 2mm 3mm; background: #f2f2f2; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 8pt; }
code { font-family: Menlo, monospace; font-size: 8pt; white-space: pre-wrap; overflow-wrap: anywhere; }
* { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
@media print {
 html, body { background: white; }
 #pages { margin: 0; }
 .page { margin: 0; box-shadow: none; break-after: page; }
 .page:last-child { break-after: auto; }
 .page-nav-rail { display: none; }
}

.page-content { display: flow-root; }
.flow-block { display: flow-root; }
.explanation-unit > .flow-block { margin-bottom:5mm; }
.explanation-unit > .flow-block:last-child { margin-bottom:0; }
.explanation-unit > .flow-block > :last-child { margin-bottom:0; }
.flow-block > :first-child { margin-top: 0; }
.flow-block img { display:block; max-width:100%; max-height:230mm; width:auto; height:auto; margin:3mm auto; object-fit:contain; }
.flow-block h4 { font-size:12pt; margin:4mm 0 3mm; }
.flow-block li { overflow-wrap:anywhere; }
.flow-block pre { tab-size:4; }
.flow-block a { color:#31577c; overflow-wrap:anywhere; }
.flow-block table { table-layout:auto; }
.flow-block th, .flow-block td { max-width:90mm; }
.flow-block blockquote { margin:0 0 4mm; padding:2mm 4mm; border-left:.5mm solid #bbb; }
.page-header { max-width:245mm; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-footer::after { content:none; }
.page-nav-rail { top:22mm; bottom:22mm; }
.page-nav .home-link { margin-bottom:4mm; }
.doc-meta { color:#555; font-size:9pt; margin-bottom:7mm; }

@media screen and (max-width:1480px) {
 html { background:#f1f2f3; }
 #pages { width:auto; margin:0; }
 .page { width:auto; height:auto; min-height:0; padding:28px 24px 24px 32px; margin:12px; }
 .page-content { width:auto; height:auto; }
 .page-header { position:static; margin-bottom:16px; max-width:none; white-space:normal; }
 .page-footer { position:static; text-align:right; margin-top:24px; }
 .page-nav-rail { position:static; width:auto; margin:12px; }
 .page-nav { position:static; max-height:none; padding:14px; background:white; }
 .page-nav details { max-height:45vh; overflow:auto; }
 .page-nav summary { cursor:pointer; }
 h1 { font-size:25px; } h2 { font-size:23px; } h3 { font-size:19px; }
 .explanation-unit::before { left:-15px; width:3px; }
 .flow-block { overflow-wrap:anywhere; }
 .flow-block table { display:block; overflow-x:auto; font-size:12px; }
 .flow-block img { max-height:none; }
}
@media print { .page-nav-rail {display:none} .flow-block a {color:inherit} }
