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

.kinds { display: grid; grid-template-columns: 1fr 1fr; }
.field input[type="number"], .field input#in-word, .field input#in-month { border: 1px solid var(--line); border-radius: .5rem; padding: .4rem .6rem; font: inherit; width: 100%; }
.gk { font-family: var(--kyokasho); }
.gk .sh-name.solo { justify-content: flex-end; margin-top: 3mm; }
[contenteditable="true"]:focus { outline: 2px solid #4cb8f5; background: #f2faff; }
@media print { [contenteditable="true"]:focus { outline: none; background: none; } }

/* 時間割 */
.jw { width: 100%; flex: 1; border-collapse: collapse; margin-top: 5mm; table-layout: fixed; }
.jw th, .jw td { border: .45mm solid #222; text-align: center; vertical-align: middle; font-size: 9mm; }
.jw thead th { height: 14mm; font-size: 8mm; background: #f3f3f3; }
.jw th.c0 { width: 14mm; font-size: 8mm; background: #f3f3f3; }
.jw .tm { width: 26mm; font-size: 4.5mm; }
.jw .lunch td { font-size: 4.5mm; height: 9mm; color: #555; }
.jw .lunch th { height: 9mm; }
/* 係表 */
.kt2 { width: 100%; border-collapse: collapse; margin-top: 5mm; table-layout: fixed; }
.kt2 th, .kt2 td { border: .35mm solid #222; height: 19mm; padding: 1mm 2mm; font-size: 5.5mm; vertical-align: middle; }
.kt2 th { height: 10mm; background: #f3f3f3; font-size: 4.5mm; }
.kt2 .kn { width: 50mm; font-weight: 700; font-size: 4.8mm; white-space: nowrap; }
.kt2 .kw { width: 62mm; font-size: 4.2mm; }
/* あいうえお作文 */
.ai { list-style: none; margin: 4mm 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.ai li { flex: 1; display: flex; align-items: center; gap: 4mm; border-bottom: .3mm dashed #aaa; max-height: 60mm; }
.ai .hd { width: 22mm; height: 22mm; border: .6mm solid #222; display: grid; place-items: center; font-size: 16mm; border-radius: 2mm; flex: none; }
.ai .wl { flex: 1; align-self: stretch; background-image: linear-gradient(transparent calc(100% - .3mm), #bbb 0); background-size: 100% 13mm; }
/* 席替え */
.board { margin: 6mm auto 4mm; width: 60%; text-align: center; border: .5mm solid #222; padding: 2mm; font-size: 6mm; letter-spacing: .5em; background: #e9f1ea; }
.seats { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 4mm; flex: 1; align-content: start; margin: 4mm 0; }
.seat { border: .5mm solid #222; border-radius: 2mm; height: 26mm; display: grid; place-items: center; font-size: 12mm; font-family: "Yu Gothic UI", sans-serif; font-weight: 700; }
.seat.none { border-style: dashed; border-color: #bbb; }
.slipgrid { display: grid; grid-template-columns: repeat(5, 1fr); align-content: start; margin-top: 4mm; }
.slip { border: .3mm dashed #888; display: grid; place-items: center; font-size: 12mm; font-family: "Yu Gothic UI", sans-serif; font-weight: 700; height: 25mm; }
/* 音読カード */
.od { width: 100%; border-collapse: collapse; margin-top: 3mm; table-layout: fixed; }
.od th, .od td { border: .35mm solid #222; height: 13.5mm; font-size: 4.5mm; text-align: center; }
.od th { height: 10mm; background: #f3f3f3; }
.od .d { width: 24mm; } .od .t { width: 13mm; } .od .e { width: 36mm; } .od .s { width: 30mm; }
.od .ev span { margin: 0 2mm; font-size: 5mm; color: #555; }
/* 観察カード */
.ks { flex: 1; display: flex; flex-direction: column; gap: 2.5mm; }
.kansatsu.two .ks + .ks { border-top: .4mm dashed #888; padding-top: 6mm; margin-top: 4mm; }
.ks-h { display: flex; gap: 6mm; align-items: baseline; border-bottom: .5mm solid #222; padding-bottom: 2mm; font-size: 4.4mm; }
.ks-h .ttl { font-size: 7mm; font-weight: 700; margin-right: auto; }
.ks-n { font-size: 4.4mm; display: flex; align-items: flex-end; gap: 2mm; }
.ks-n span { display: inline-block; width: 52mm; border-bottom: .3mm solid #333; height: 6mm; }
.ks-pic { flex: 1.3; border: .45mm solid #222; border-radius: 2mm; position: relative; min-height: 60mm; }
.ks-pic small { position: absolute; left: 2mm; top: 1mm; font-size: 3.6mm; color: #777; }
.kansatsu.two .ks-pic { min-height: 40mm; }
.ks-look { display: flex; flex-wrap: wrap; gap: 2mm 6mm; font-size: 4mm; color: #333; }
.ks-lines { display: flex; flex-direction: column; }
.ks-lines span { height: 11mm; border-bottom: .3mm solid #999; }
/* がんばりカード・めあてカード */
.gb-what { display: flex; align-items: flex-end; gap: 3mm; font-size: 5mm; margin: 4mm 0 2mm; }
.gb-what span { flex: 1; border-bottom: .35mm solid #333; height: 9mm; }
.gb-what.big { font-size: 4.6mm; }
.dots { flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4mm; align-content: space-evenly; margin-top: 4mm; }
.dot { aspect-ratio: 1; border: .5mm dashed #888; border-radius: 50%; display: grid; place-items: center; font-family: "Yu Gothic UI", sans-serif; font-size: 5mm; color: #999; }
.dot.goal { border: .8mm solid #222; color: #222; font-family: var(--kyokasho); font-size: 5.5mm; }
.meate .me { flex: 1; display: flex; flex-direction: column; }
.meate .me + .me { border-top: .4mm dashed #888; margin-top: 4mm; padding-top: 4mm; }
.me-t th, .me-t td { height: 10mm; }
.me-t th { width: 18mm; }
/* 提出物チェック表 */
.ts { width: 100%; border-collapse: collapse; margin-top: 3mm; table-layout: fixed; }
.ts th, .ts td { border: .3mm solid #333; height: 6.1mm; text-align: center; font-size: 4mm; }
.ts thead th { height: 14mm; font-size: 3.6mm; background: #f3f3f3; }
.ts .no { width: 13mm; background: #f3f3f3; font-family: "Yu Gothic UI", sans-serif; }
.ts td { cursor: pointer; font-size: 4.6mm; }
@media screen { .ts td:hover { background: #fff7dc; } }
/* 点数のまとめ */
.st { border-collapse: collapse; margin: 4mm 0; width: 100%; }
.st th, .st td { border: .35mm solid #333; text-align: center; height: 11mm; font-size: 5mm; }
.st th { background: #f3f3f3; font-size: 4mm; }
.dist { display: block; margin: 0 auto; }
.dist .sb { fill: #bbb; stroke: #111; stroke-width: .3; }
.dist .sl { font-size: 3px; text-anchor: middle; }
.dist .sc { font-size: 3.4px; text-anchor: middle; font-weight: 700; }
.slist { list-style: none; margin: 2mm 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1mm 2mm; font-size: 4mm; }
.slist li { display: flex; gap: 1.5mm; border-bottom: .2mm dashed #ccc; }
.slist li span { color: #777; font-size: 3.2mm; min-width: 6mm; text-align: right; }
.lb { display: block; font-size: .85rem; margin: .3rem 0; }
.lb textarea { display: block; width: 100%; font: inherit; border: 1px solid var(--line); border-radius: .5rem; padding: .4rem .6rem; margin-top: .2rem; }
/* 学級通信の枠 */
.ts-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1mm double #222; padding-bottom: 2mm; }
.ts-title { font-size: 12mm; font-weight: 700; letter-spacing: .1em; }
.ts-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; font-size: 4.2mm; }
.ts-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5mm; margin-top: 5mm; }
.tsb { border: .5mm solid #222; border-radius: 3mm; padding: 2mm 3mm; display: flex; flex-direction: column; }
.tsb h3 { margin: 0 0 2mm; font-size: 5.5mm; border-bottom: .3mm dashed #888; padding-bottom: 1mm; }
.tsbody { flex: 1; font-size: 4.2mm; line-height: 1.7; }
/* 持ち物リスト */
.mo { list-style: none; margin: 4mm 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 8mm; font-size: 6mm; }
.mo li { display: flex; align-items: center; gap: 3mm; border-bottom: .3mm dashed #aaa; padding: 2mm 0; }
.cb { width: 7mm; height: 7mm; border: .5mm solid #222; border-radius: 1mm; flex: none; }
/* くるくる当番表 */
.wh { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.wheel .wr { fill: #fff; stroke: #111; stroke-width: .5; }
.wheel .wr.dash { fill: none; stroke-dasharray: 2 2; stroke-width: .3; }
.wheel .wl { stroke: #111; stroke-width: .35; }
.wheel .pin { fill: #111; }
.wheel text { text-anchor: middle; font-size: 5px; }
.wheel .wg { font-size: 6px; font-weight: 700; }
/* 座席表 */
.zgrid { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 3mm; margin-top: 4mm; }
.zs { border: .45mm solid #222; border-radius: 2mm; height: 24mm; position: relative; }
.zs small { position: absolute; left: 1.2mm; top: .6mm; font-size: 3mm; color: #777; font-family: "Yu Gothic UI", sans-serif; }
.zs.none { border-style: dashed; border-color: #bbb; }