/* 画面の枠・A4 の紙は漢字プリントと同じ物を使う。ここには年表だけの所を書く */
@import url("../kanji/app.css");

.ans { color: var(--red); font-weight: 400; }
.bl { display: inline-block; border-bottom: .35mm solid #222; height: 1.1em; vertical-align: bottom; margin: 0 .2em; }
.bl.y { min-width: 14mm; } .bl.w { min-width: 36mm; }
.srcnote { font-size: 2.9mm; color: #666; margin: auto 0 0; padding-top: 2mm; text-align: right; }
.bank { margin: 2mm 0 0; padding: 1.6mm 3mm; border: .35mm solid #333; border-radius: 2mm; font-size: 4.2mm; line-height: 2; }
.bank b { font-size: 3.4mm; border: .3mm solid #333; border-radius: 1mm; padding: 0 1.5mm; margin-right: 3mm; }
/* よみがなが長くても、名前の字の間をあけない */
ruby { ruby-align: center; }
.sheet ruby rt { font-size: .5em; }
/* 年表 */
.nt { width: 100%; border-collapse: collapse; margin-top: 3mm; font-size: 4.2mm; }
.nt th { font-size: 3.4mm; font-weight: 400; color: #555; border-bottom: .4mm solid #333; padding: 1mm; text-align: left; }
.nt td { border-bottom: .2mm dashed #bbb; padding: 0 1.5mm; height: 10mm; vertical-align: middle; }
.nt tr.new td { border-top: .4mm solid #555; }
.nt .ce { width: 20mm; } .nt .cy { width: 22mm; white-space: nowrap; font-family: "Yu Gothic UI", sans-serif; font-size: 4mm; } .nt .cw { width: 44mm; font-size: 3.9mm; }
.era { display: inline-block; border: .3mm solid #333; border-radius: 1.2mm; padding: 0 1.4mm; font-size: 3.6mm; font-weight: 700; white-space: nowrap; }
/* ならべかえ */
.sets { list-style: none; margin: 3mm 0 0; padding: 0; display: flex; flex-direction: column; gap: 3.5mm; }
.sets .set { display: flex; gap: 2mm; border: .3mm solid #999; border-radius: 2mm; padding: 2mm 3mm; }
.sets .set > .no { font-size: 3.6mm; width: 8mm; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.sets ol { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 1mm; }
.sets ol li { display: flex; align-items: center; gap: 3mm; font-size: 4.4mm; min-height: 8.4mm; }
.sets .box { width: 8mm; height: 8mm; border: .35mm solid #222; display: grid; place-items: center; flex: none; font-size: 5mm; }
.sets small.ans { margin-left: auto; font-size: 3.6mm; font-family: "Yu Gothic UI", sans-serif; }
/* 人物 */
.cards { list-style: none; margin: 3mm 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4mm 4mm; }
.cards li { border: .35mm solid #333; border-radius: 2mm; padding: 1.6mm 2.6mm; min-height: 32mm; background: linear-gradient(var(--ec) 0 0) top / 100% 2.2mm no-repeat; padding-top: 3.4mm; }
.cards .ce { float: right; font-size: 3.2mm; border: .25mm solid #333; border-radius: 1mm; padding: 0 1.2mm; background: var(--ec); }
.cards b { font-size: 5.4mm; } .cards small { display: block; font-size: 3.2mm; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.cards p { margin: 1mm 0 0; font-size: 3.7mm; line-height: 1.5; }
.jm { list-style: none; margin: 4mm 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; }
.jm li { display: flex; align-items: center; gap: 2mm; min-height: 14mm; border-bottom: .2mm dashed #ccc; font-size: 5mm; }
.jm .no { font-size: 3.4mm; width: 7mm; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.jm .pa { margin-left: auto; font-size: 5mm; white-space: pre; }
.jin .mr { list-style: none; margin: 5mm 0 0; padding: 3mm 4mm; border: .4mm solid #333; border-radius: 2mm; display: flex; flex-direction: column; gap: 2mm; font-size: 4.1mm; }
.jin .mr .lt { display: inline-block; width: 7mm; font-weight: 700; }
.jn { list-style: none; margin: 3mm 0 0; padding: 0; flex: 1; display: grid; grid-auto-rows: minmax(13mm, auto); align-content: start; }
.jn li { display: flex; align-items: center; gap: 2.5mm; border-bottom: .2mm dashed #ccc; font-size: 4.1mm; }
.jn .no { font-size: 3.4mm; width: 8mm; flex: none; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.jn .dd { flex: 1; line-height: 1.45; } .jn .dd small { font-size: 3.2mm; color: #555; margin-left: 1mm; }
.jn .cy { width: 16mm; flex: none; font-family: "Yu Gothic UI", sans-serif; font-size: 3.8mm; }
.jn .ln { width: 38mm; flex: none; border-bottom: .3mm solid #333; height: 8mm; display: flex; align-items: flex-end; font-size: 4.6mm; }
.jdi .jn .ln { width: 26mm; } .jn .jd { font-size: 3.8mm; }
/* 年表ビュー（画面だけ） */
body.viewing .preview { overflow: visible; }
.tview { width: 100%; max-width: 100%; font-family: var(--kyokasho); color: #2a2350; }
.ruler { position: relative; height: 64px; border: 3px solid #2a2350; border-radius: 12px; background: #fff; margin: 4px 0 26px; }
.ruler .bd { position: absolute; top: 0; bottom: 0; border-right: 2px solid #2a2350; display: grid; place-items: center; overflow: hidden; }
.ruler .bd i { font-style: normal; font-weight: 800; font-size: clamp(11px, 1.3vw, 18px); writing-mode: horizontal-tb; white-space: nowrap; }
.ruler .bd.thin i { writing-mode: vertical-rl; font-size: 11px; letter-spacing: -.05em; }
.ruler .tk { position: absolute; top: 100%; transform: translateX(-50%); font-size: 12px; color: #5d5780; margin-top: 2px; }
.vnote { font-size: 13px; color: #5d5780; margin: 0 0 10px; }
.vcols { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
.vc { flex: 0 0 min(320px, 80vw); scroll-snap-align: start; background: #fff; border: 3px solid #2a2350; border-radius: 18px; box-shadow: 4px 4px 0 #2a2350; overflow: hidden; }
.vc h2 { margin: 0; padding: 8px 14px; background: var(--ec); border-bottom: 3px solid #2a2350; font-size: 26px; }
.vc h2 small { font-size: 15px; margin-left: 4px; }
.vc ol { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.vc li { font-size: 18px; line-height: 1.45; padding-bottom: 6px; border-bottom: 2px dashed #e4dfd2; }
.vc li b { display: block; font-family: "Segoe UI", Arial, sans-serif; font-size: 20px; color: #e04a2c; }
.vp { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px 12px 12px; }
.vp span { border: 2px solid #2a2350; border-radius: 999px; padding: 0 10px; font-size: 16px; background: #fff8e7; }
.vp rt { font-size: 10px; }
@media screen and (max-width: 860px) { body.viewing #sheets { zoom: 1; } }