:root{
  --paper:#F5F1E8;--card:#FFFDF7;--ink:#22302B;--text:#2F3B36;--dim:#7A6F5F;--line:#E3D7BA;--line-soft:#EDE4CF;
  --green:#5AA06A;--green-d:#3F7D51;--sun:#E8B23A;--sun-d:#C99A2A;--sky:#8EC7DD;--pink:#E8A0A8;
  --wood:#B9885A;--wood-d:#8F6A43;--teal:#59BCA8;--teal-d:#075663;--orange:#F7B374;--orange-d:#F4A55A;
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --kaku:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--kaku);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:30px 22px 90px}
header{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
h1{font-family:var(--maru);font-size:clamp(26px,4vw,38px);margin:0 0 10px;color:var(--ink);line-height:1.3}
.sub{max-width:68ch;margin:0;font-size:14.5px;color:var(--dim)}
.ch{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch .no{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
.ch h2{font-family:var(--maru);font-size:19px;margin:0;color:var(--ink)}
.ch .tg{font-size:11px;color:var(--dim);margin-left:auto;display:flex;gap:4px}
.ch .tg i{font-style:normal;padding:1px 8px;border-radius:100px;background:var(--line-soft)}
.scr{width:480px;height:380px;overflow:hidden;position:relative;background:#FFFDF7;border-radius:18px;border:1px solid var(--line);font-family:var(--maru);color:var(--ink)}
.scr *{box-sizing:border-box}
.scr img{display:block;object-fit:contain}
.t{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:14px;padding:6px 4px 5px;box-shadow:0 2px 0 var(--line);min-width:0}
.t img{height:44px;width:100%}
.t b{font-size:10px;font-weight:700;line-height:1.2;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}
.ribbon{display:inline-block;background:var(--orange);color:#fff;font-weight:900;font-size:11px;padding:3px 16px;
 clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%)}
dialog{border:0;border-radius:18px;padding:18px 20px;max-width:640px;width:calc(100% - 40px);box-shadow:0 20px 60px #0004;font-family:var(--kaku)}
dialog h3{margin:0 0 8px;font-family:var(--maru)}
dialog textarea{width:100%;height:280px;font:12.5px/1.6 var(--mono);border:1px solid var(--line);border-radius:10px;padding:10px}
dialog .row{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
dialog button{font:inherit;padding:7px 16px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer}
button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


.scr.wide{width:1000px;height:620px;background:#FBF6E3}
/* 共通部品 */
.hd{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;gap:12px;padding:0 18px;background:#FFFDF7;border-bottom:1px solid var(--line)}
.hd .av{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 2px 6px #0002}
.hd .wm{font-weight:900;font-size:17px}
.hd .ent{margin-left:auto;display:flex;gap:6px;align-items:center}
.hd .ent span{font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--dim)}
.hd .ent span.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}
.tile{background:#fff;border-radius:18px;padding:10px 6px 8px;box-shadow:0 2px 0 var(--line);cursor:pointer;text-align:center;border:0;font:inherit;font-family:var(--maru);transition:transform .16s var(--ease),box-shadow .16s;min-width:0}
.tile img{height:64px;width:100%;object-fit:contain;display:block}
.tile b{display:block;font-size:11.5px;font-weight:700;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:hover{transform:translateY(-2px)}
.tile:active{transform:translateY(2px) scale(.98);box-shadow:none}
.tile.on{box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}
/* なかまパネル */
.nkp{position:absolute;background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 4px 0 var(--line),0 16px 40px #0002;overflow:hidden}
.nkp-bg{position:absolute;inset:0;background:#22302B26;z-index:8}   /* なかまパネルの外側の幕：押すと閉じる。ボタンや引き出しより前 */
.nkp{z-index:9}
.nkp .ttl{position:absolute;left:14px;top:10px;font-size:12px;color:var(--dim);z-index:2;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nkp .cls{position:absolute;right:10px;top:8px;z-index:2;font:inherit;font-family:var(--maru);font-weight:900;border:0;background:var(--line-soft);border-radius:100px;width:28px;height:28px;cursor:pointer}
.nkp svg{position:absolute;inset:0;width:100%;height:100%}
.nkp .c{position:absolute;transform:translate(-50%,-50%)}
.nkp .c .t{width:78px;cursor:pointer}
.nkp .c.far .t{width:60px;opacity:.6}.nkp .c.far .t img{height:30px}.nkp .c.far .t b{font-size:9px}
.nkp .c.center .t{width:100px;box-shadow:0 0 0 3px var(--sun),0 3px 0 var(--sun-d)}
.nkp .c.center .t img{height:62px}
.nkp .el{position:absolute;transform:translate(-50%,-50%);font-size:9px;font-weight:700;background:#fff;border:1px solid var(--sun);color:var(--sun-d);padding:0 6px;border-radius:100px;z-index:1}
.nkp .why{position:absolute;left:14px;bottom:10px;font-size:11px;color:var(--dim)}
.nkp .why label{cursor:pointer;margin-left:10px}
/* A きょうかしょ */
.sA .spine{position:absolute;left:0;top:54px;bottom:0;width:70px;background:#F3EDE0;display:flex;flex-direction:column;gap:6px;padding:12px 8px}
.sA .spine button{font:inherit;font-family:var(--maru);font-weight:900;font-size:15px;height:60px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer;box-shadow:0 2px 0 var(--line);line-height:1.1}
.sA .spine button small{display:block;font-size:9px;font-weight:700}
/* 学年でない名前（ひらがな・地図・外国語_学年共通・漢字）：1行に収まる大きさで、「_」の後ろは小さく下に */
.sA .spine button .txt{display:block;font-size:12.5px;white-space:nowrap;letter-spacing:-.02em}
.sA .spine button{padding:0 2px}
.sA .spine button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}
/* 教科のタブ：1行・同じ高さ。長い名前は「…」、数が多ければ横に流す（2行に折れて上の段にはみ出さない） */
.sA .subj{position:absolute;left:70px;right:190px;top:54px;height:48px;display:flex;gap:6px;align-items:flex-end;padding:0 16px;border-bottom:1px solid var(--line);background:#FFFDF7;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.sA .subj button{font:inherit;font-family:var(--maru);font-weight:900;font-size:13px;height:36px;line-height:20px;padding:8px 16px;border-radius:14px 14px 0 0;border:0;background:var(--line-soft);color:var(--dim);cursor:pointer;flex:none;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.sA .subj button.on{background:var(--green);color:#fff}
.sA .units{position:absolute;left:70px;right:0;top:102px;height:118px;display:flex;gap:10px;padding:12px 16px;overflow-x:auto;background:#F7F1E1}
.sA .uc{flex:none;width:168px;background:#fff;border-radius:16px;padding:8px 10px;box-shadow:0 2px 0 var(--line);cursor:pointer;border:0;font:inherit;font-family:var(--maru);text-align:left}
.sA .uc b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sA .uc .th{display:flex;gap:3px;margin-top:5px}.sA .uc .th img{height:40px;width:44px;object-fit:contain}
.sA .uc i{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--dim);float:right}
.sA .uc.on{box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}
.sA .pics{position:absolute;left:70px;right:0;top:220px;bottom:0;padding:14px 16px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-content:start;overflow:auto}
.sA .pics h4{grid-column:1/-1;margin:0;font-size:13px;display:flex;gap:8px;align-items:baseline}
.sA .pics h4 i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim)}
.sA .empty{grid-column:1/-1;font-size:12px;color:var(--dim);padding:10px}
/* B うちながら */
.sB .left{position:absolute;left:0;top:54px;bottom:0;width:400px;padding:16px;background:#F2F8FB;border-right:1px solid var(--line)}
.sB .in{background:#fff;border:2px solid var(--teal);border-radius:100px;padding:10px 20px;display:flex;align-items:center;gap:8px}
.sB .in input{font:inherit;font-family:var(--maru);font-weight:900;font-size:24px;border:0;outline:0;background:transparent;width:100%}
.sB .in button{font:inherit;border:0;background:var(--line-soft);border-radius:100px;width:30px;height:30px;cursor:pointer;font-weight:900}
.sB .kb{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;direction:rtl;margin-top:14px}
.sB .kb button{font:inherit;font-family:var(--maru);font-weight:900;font-size:17px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .12s var(--ease),box-shadow .12s}
.sB .kb button:active{transform:translateY(3px);box-shadow:none}
.sB .kb button.on{background:var(--sun);border-color:var(--sun-d);box-shadow:0 3px 0 var(--sun-d)}
.sB .kb button.mute{color:#ccc}
.sB .kbhint{margin-top:10px;font-size:11px;color:var(--dim)}
.sB .right{position:absolute;left:400px;right:0;top:54px;bottom:0;padding:14px 16px;overflow:auto}
.sB .grp h4{margin:6px 0 8px;font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:center}
.sB .grp h4 i{font-style:normal;display:inline-block;width:10px;height:10px;border-radius:3px}
.sB .grp .g{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.sB .none{font-size:13px;color:var(--dim);padding:20px 6px}
.sB .pick{background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 2px 0 var(--line);display:flex;gap:14px;align-items:center;margin-bottom:12px}
.sB .pick img{height:80px;width:90px;object-fit:contain}
.sB .pick .tx b{font-size:17px}
.sB .pick .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sB .pick .tags button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 10px;border-radius:100px;border:0;background:#1d6e6614;color:#1d6e66;cursor:pointer}
/* C 行事 */
.sC .tl{position:absolute;left:0;right:0;top:54px;height:190px;background:#FFFDF7;border-bottom:1px solid var(--line)}
.sC .tl .line{position:absolute;left:40px;right:40px;top:110px;height:4px;background:var(--green)}
.sC .tl .ev{position:absolute;top:110px;transform:translate(-50%,-50%);text-align:center;width:110px;cursor:pointer}
.sC .tl .ev .dot{width:14px;height:14px;border-radius:50%;background:var(--green-d);border:3px solid #fff;margin:0 auto}
.sC .tl .ev b{display:block;font-size:12px;margin-top:4px}
.sC .tl .ev small{display:block;font-family:var(--mono);font-size:9px;color:var(--dim)}
.sC .tl .ev .tile{width:84px;margin:0 auto 6px;padding:6px 4px 5px}.sC .tl .ev .tile img{height:44px}.sC .tl .ev .tile b{font-size:9px;margin-top:3px}
.sC .tl .ev.up .tile{margin-top:-104px}.sC .tl .ev.dn{padding-top:14px}
.sC .tl .ev.past{opacity:.5}
.sC .tl .now{position:absolute;top:150px;transform:translateX(-50%);font-size:11px;font-weight:900;background:var(--ink);color:#fff;padding:2px 12px;border-radius:100px}
.sC .tl .ttl{position:absolute;left:18px;top:10px;font-size:12px;color:var(--dim)}
.sC .body{position:absolute;left:0;right:0;top:244px;bottom:0;padding:14px 18px;overflow:auto}
.sC .band{margin-bottom:12px}
.sC .band h4{margin:0 0 8px;font-size:13px;display:flex;gap:8px;align-items:baseline}
.sC .band h4 i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim)}
.sC .band .g{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
/* D なかま主 */
.sD .stage{position:absolute;left:0;right:0;top:54px;bottom:0}
.sD .stage svg{position:absolute;inset:0;width:100%;height:100%}
.sD .stage .c{position:absolute;transform:translate(-50%,-50%)}
.sD .stage .c .tile{width:96px;padding:8px 5px 6px}.sD .stage .c .tile img{height:56px}
.sD .stage .c.far .tile{width:68px;opacity:.6;padding:5px 3px 4px}.sD .stage .c.far .tile img{height:34px}.sD .stage .c.far .tile b{font-size:9px;margin-top:3px}
.sD .stage .c.center .tile{width:130px;box-shadow:0 0 0 4px var(--sun),0 3px 0 var(--sun-d)}.sD .stage .c.center .tile img{height:84px}.sD .stage .c.center .tile b{font-size:14px}
.sD .stage .el{position:absolute;transform:translate(-50%,-50%);font-size:10px;font-weight:700;background:#fff;border:1px solid var(--sun);color:var(--sun-d);padding:1px 8px;border-radius:100px;z-index:1}
.sD .trail{position:absolute;left:18px;top:64px;display:flex;gap:6px;align-items:center;font-size:12px;flex-wrap:wrap;max-width:60%}
.sD .trail button{font:inherit;font-family:var(--maru);font-weight:700;font-size:12px;border:0;background:#fff;border-radius:100px;padding:3px 10px;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.sD .trail .now{font-weight:900}
.sD .trail .sep{color:var(--dim)}
.sD .opts{position:absolute;right:18px;bottom:14px;font-size:12px;color:var(--dim);background:#fff;border-radius:100px;padding:5px 12px;box-shadow:0 2px 0 var(--line)}
.sD .opts label{cursor:pointer}
.sD .side{position:absolute;left:18px;bottom:14px;display:flex;gap:6px}
.sD .side span{font-size:11px;padding:4px 10px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--dim)}

/* 77 つながり */
.sA .ulabel{position:absolute;left:86px;top:106px;font-size:11px;font-weight:900;z-index:1}
.sA .ulabel small{font-weight:700;color:var(--dim);margin-left:6px}
.sA .units{padding-top:24px;height:132px}
.sA .pics{top:234px;background:#fff;margin:0 16px 14px 16px;border-radius:0 0 18px 18px;border:2px solid var(--sun);border-top-width:3px;left:70px;right:0}
.sA .pics h4 .tag{font-size:10px;background:var(--sun);border-radius:100px;padding:1px 9px;margin-right:6px}
.sA .units .ptr{position:absolute;bottom:-2px;width:24px;height:12px;background:var(--sun);clip-path:polygon(50% 0,100% 100%,0 100%);z-index:2}
.sA .uc.on{box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}
/* 78 両立 */
.sB .how{font-size:12px;font-weight:700;color:var(--ink);background:#FFF3D0;border-radius:100px;padding:5px 14px;margin-bottom:8px;display:inline-block}
.sB .kbhint .hidekb{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:2px 10px;cursor:pointer;margin-left:6px}
.sB .left.nokb .in input{font-size:30px}
/* 81 E */
.sE .tl{position:absolute;left:0;right:0;top:54px;height:190px;background:#FFFDF7;border-bottom:1px solid var(--line)}
.sE .tlhead{position:absolute;left:18px;right:18px;top:55px;height:18px;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:10px;pointer-events:none}
.sE .tlhead .ttl{font-size:10px;color:var(--dim)}
.sE .tlhead .tltoggle{pointer-events:auto;font:inherit;font-family:var(--maru);font-weight:700;font-size:10px;padding:0 10px;line-height:18px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--dim);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.sE .tlhead .tltoggle:active{transform:translateY(2px);box-shadow:none}
.sE .tl .line{position:absolute;left:40px;top:108px;height:4px;background:var(--green)}   /* 線を上げて、下の段が枠に収まるように */
.sE .tl .ev{position:absolute;top:108px;text-align:center;width:120px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,calc(-100% + 7px))}   /* 上の段：名前→絵→点。点を線に乗せる */
.sE .tl .ev > b{order:-1;margin:0 0 3px}
.sE .tl .ev .tile{width:84px;margin:0 auto 4px;padding:6px 4px 4px}.sE .tl .ev .tile img{height:30px}.sE .tl .ev .tile b{font-size:9px;margin-top:2px}
.sE .tl .ev .dot{width:14px;height:14px;border-radius:50%;background:var(--green-d);border:3px solid #fff;margin:0 auto}
.sE .tl .ev b{display:block;font-size:11px;margin-top:2px}.sE .tl .ev b small{font-family:var(--mono);font-weight:400;font-size:8px;color:var(--dim);margin-left:4px}
.sE .tl .ev.past{opacity:1}   /* 過ぎた行事も薄くしない：1年でめぐる帯では意味が薄く、押せないように見えてしまう */
.sE .tl .now{position:absolute;top:85px;z-index:4;transform:translateX(-50%);font-size:10px;font-weight:900;background:var(--ink);color:#fff;padding:2px 10px;border-radius:100px}
.sE .stage{position:absolute;left:0;right:0;top:268px;bottom:0}
/* タイムラインをたたんだとき：輪の面を上まで広げる */
.sE.notl .tl{display:none}
.sE.notl .stage{top:56px}   /* たたんだときは取っ手が無いので、上の段のすぐ下から */
.sE.notl .trail{top:64px}
.sE .stage > svg{position:absolute;inset:0;width:100%;height:100%}   /* 輪の線の svg だけ(ボタンの小さな絵 .ic には当てない) */
.sE .stage .c{position:absolute;transform:translate(-50%,-50%)}
.sE .stage .c .tile{width:88px;padding:7px 4px 5px}.sE .stage .c .tile img{height:50px}
.sE .stage .c.far .tile{width:62px;opacity:.6;padding:4px 3px 3px}.sE .stage .c.far .tile img{height:30px}.sE .stage .c.far .tile b{font-size:8.5px;margin-top:2px}
.sE .stage .c.center .tile{width:136px;box-shadow:0 0 0 4px var(--sun),0 3px 0 var(--sun-d)}.sE .stage .c.center .tile img{height:76px}.sE .stage .c.center .tile b{font-size:13px}
.sE .stage .el{position:absolute;transform:translate(-50%,-50%);font-size:9.5px;font-weight:700;background:#fff;border:1px solid var(--sun);color:var(--sun-d);padding:1px 7px;border-radius:100px;z-index:1}
.sE .side{position:absolute;left:18px;bottom:14px;display:flex;gap:6px;z-index:3}
.sE .side button{font:inherit;font-family:var(--maru);font-weight:700;font-size:12px;padding:6px 14px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.scr .drawer{position:absolute;left:18px;bottom:54px;width:360px;max-height:330px;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:0 4px 0 var(--line),0 12px 30px #0002;padding:12px 14px;display:none;overflow:auto;z-index:3}
.scr .drawer.open{display:block}
.scr .drawer .dh{font-weight:900;font-size:13px;margin-bottom:8px}.scr .drawer .dh small{display:block;font-weight:700;font-size:10px;color:var(--dim)}
.scr .drawer input{font:inherit;font-family:var(--maru);font-weight:900;font-size:18px;width:100%;border:2px solid var(--teal);border-radius:100px;padding:6px 14px;outline:0;margin-bottom:8px}
.scr .drawer .kbd{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;direction:rtl;margin-bottom:8px}
.scr .drawer .kbd button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer}
.scr .drawer .kbd button.mute{color:#ccc}
.scr .drawer .e{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:4px 2px;cursor:pointer;border-bottom:1px dotted var(--line)}
.scr .drawer .e img{height:26px;width:28px}.scr .drawer .e i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;color:var(--dim)}
.scr .drawer .gb{margin-bottom:8px}.scr .drawer .gb b{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.scr .drawer .none{font-size:11px;color:var(--dim)}

.appwrap{overflow-x:auto;padding:4px 0 10px}
#app{position:relative;width:1000px;height:620px;margin:0 auto;border-radius:18px;box-shadow:0 2px 0 var(--line),0 14px 34px #0001}
#app .scr.wide{position:absolute;left:0;top:0}
.hd .ent button{font:inherit;font-family:var(--maru);font-size:13px;font-weight:700;padding:6px 14px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--dim);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.hd .ent button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}
.hd .ent button:active{transform:translateY(2px);box-shadow:none}
.hd .ent .gap{width:1px;height:22px;background:var(--line);margin:0 4px;padding:0;border:0;border-radius:0;box-shadow:none;align-self:center}   /* 区切り線。丸いボタンの見た目が当たらないように */
.scr .drawer .dh .more{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;border:1px solid var(--line);background:#FFF3D0;border-radius:100px;padding:2px 10px;cursor:pointer;margin-top:4px}

/* ── 新側だけ ── */
/* 同じ名前で 絵柄ちがいがあるときの札。押せる（2026-09-18 ユーザーの選び A。もとは「2種」とだけ出て 押せなかった）
   置き場は **名前の下**。右上に置くと 左上の コピー・★ と重なった（絵の幅 118px に対して 札だけで 60px 以上。
   ユーザー 2026-09-18「ここのUIについて問題ある　重なっているよね？」＝「べつの絵 +152」が ★ に重なった写真） */
.tile .cnt{display:inline-block;margin-top:5px;max-width:100%;z-index:3;font-family:var(--maru);font-weight:700;font-size:9px;background:var(--sun);color:var(--ink);border:1px solid var(--sun-d);border-radius:8px;padding:0 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px;vertical-align:top}
.tile .cnt:hover{background:var(--sun-d);color:#fff}
.tile .cnt:active{transform:translateY(1px)}
/* 狭い所の札（行事の帯・輪の外側）では 場所が無いので出さない */
.sC .tl .ev .tile .cnt,.sD .stage .c.far .tile .cnt,.sE .tl .tile .cnt,.sE .strip .tile .cnt{display:none}
/* 押したときに出る「べつの絵」の吹き出し */
.cmenu.same .samegrid{display:grid;grid-template-columns:repeat(3,76px);gap:6px;padding:2px;max-height:44vh;overflow:auto}   /* 矢印のように 150枚を超えるものがあるので 高さを止めて 中で送る */
.cmenu.same .acts2 .n{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:auto}
.cmenu.same .samegrid .tile{width:76px;padding:6px 4px 5px;box-shadow:0 1px 0 var(--line)}
.cmenu.same .samegrid .tile img{height:46px}
.cmenu.same .samegrid .tile b{font-size:9px;margin-top:3px}
.cmenu.same .samegrid .tile.on{box-shadow:0 0 0 2px var(--sun)}
.cmenu.same .samenote{font-size:10px;color:var(--dim);font-weight:700;padding:2px 4px 0;border-top:1px dashed var(--line);margin-top:2px}
.tile{position:relative}
/* コピー・ダウンロード：点線の上でも見えるよう、白い下地に黄色のボタン */
.act{display:flex;gap:6px;justify-content:center;margin-top:8px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 2px 0 var(--line)}
.act button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;padding:6px 14px;border:1px solid var(--sun-d);border-radius:999px;background:var(--sun);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--sun-d)}
.act button:active{transform:translateY(2px);box-shadow:none}
.act .done{background:var(--green);color:#fff;border-color:var(--green-d);box-shadow:0 2px 0 var(--green-d)}
/* 同じ名前の絵：内側の輪の先頭の席に普通の大きさで入れ、実線と「おなじ なまえ」の札で区別する */
.tile .same{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-size:9px;font-weight:900;background:var(--sun);color:var(--ink);border:1px solid var(--sun-d);border-radius:100px;padding:1px 8px;white-space:nowrap;line-height:1.4}
.c.same .tile{box-shadow:0 0 0 2px var(--sun),0 2px 0 var(--sun-d)}
.sE .stage .c.far.same .tile,.nkp .c.far.same .t{opacity:1}   /* 外側の輪にあふれた同名の絵は薄くしない */
.loading{padding:60px;text-align:center;color:var(--dim);font-family:var(--maru)}
/* 真ん中の絵の右上「大きく見る」と、画面いっぱいの表示 */
/* ── 案の切り替え（比べるため。動き.js の FLAGS を参照） ── */
body.embed{overflow:hidden}body.embed .wrap{padding:0;max-width:none}body.embed .wrap>header{display:none}body.embed .appwrap{padding:0}body.embed #app{margin:0;border-radius:0;box-shadow:none}
/* 同じ名前が多いとき：カードの札 → 引き出しに格子 */
.c.center .more{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin:6px 0 0;font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;padding:4px 12px;border-radius:999px;background:#fff;border:2px solid var(--sun);color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 var(--line)}
.scr .drawer .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.scr .drawer .grid .tile{padding:5px 3px 4px}.scr .drawer .grid .tile img{height:40px}.scr .drawer .grid .tile b{font-size:9px;margin-top:3px}
.nkp .gback{position:absolute;left:14px;top:34px;z-index:2;font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:3px 10px;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.nkp .grid{position:absolute;left:14px;right:14px;top:66px;bottom:34px;overflow:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-content:start}
.nkp .grid .tile{padding:5px 3px 4px}.nkp .grid .tile img{height:40px}.nkp .grid .tile b{font-size:9px;margin-top:3px}
/* ボタンの置き場：道すじの行 */
.nkp .acts{position:absolute;right:46px;top:6px;z-index:2}.nkp .acts:empty{display:none}
.nkp .acts .act{margin:0;padding:2px}.nkp .acts .act button{font-size:11px;padding:4px 10px}
/* ボタンの置き場：下の帯 */
/* 引き出しの ✕ */
.scr .drawer{padding-right:38px}
.scr .drawer .dcl{position:absolute;right:8px;top:8px;font:inherit;font-family:var(--maru);font-weight:900;border:0;background:var(--line-soft);border-radius:100px;width:26px;height:26px;cursor:pointer}
/* ✕ を丸の真ん中に */
.scr .drawer .dcl,.nkp .cls{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
/* なまえから：結果は絵つきの格子で大きく */
.scr .drawer .res{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.scr .drawer .res:empty{display:none}
.scr .drawer .res .tile{padding:5px 3px 4px}.scr .drawer .res .tile img{height:44px}.scr .drawer .res .tile b{font-size:9.5px;margin-top:3px}
.scr .drawer .res .none{grid-column:1/-1}
/* 名前の文字数：引き出し・格子・真ん中のカードは2行まで（約16〜20文字）。それ以上は「…」。全文は押して真ん中に来たときの下の帯と、マウスを乗せたときの吹き出しで */
.scr .drawer .tile b,.nkp .grid .tile b{white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sE .stage .c.center .tile b{white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 帯が右下にあるあいだ、「線に理由を見せる」は面の右上へ（左上の「ひとつ もどる」と対） */
/* 道すじ：絵つき / ひとつもどる */
/* いま画面：ボタンはカードの右横に縦並び（上下の輪の絵を隠さない） */
.sE .stage .c.center .act{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 8px;flex-direction:column;gap:5px;border-radius:18px;z-index:1}
.sE .stage .c.center .act button{white-space:nowrap}
/* 下の段：点→絵→名前の順にして、名前がタイムラインの枠の下(輪の面)にはみ出さないようにする */
.sE .tl{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sE .tl::-webkit-scrollbar{display:none}   /* バーは出さず、◀ ▶ とホイール・指で送る */
.sE .tl .tlin{position:relative;height:100%}
.sE .tl .ev.lo{top:108px;transform:translate(-50%,-7px)}
.sE .tl .ev.lo .dot{order:-2;margin-bottom:2px}
.sE .tl .ev.lo > b{order:0;margin:0}
.sE .tl .ev.lo .tile{width:72px;margin:0 auto;padding:4px 3px 3px}.sE .tl .ev.lo .tile img{height:28px}
.sE .tl .ev.lo b{font-size:10px;margin-top:0}
/* 行事の名前は1行（長ければ …）。折り返すと下の段の絵に乗る */
.sE .tl .ev > b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
/* 「いま」の印は上に置き、点線で線までおろす（絵の上に乗らない） */
.sE .tl .ev{z-index:2}
.sE .tl .now{top:4px;z-index:1}
.sE .tl .now.dn{top:auto;bottom:4px}   /* 近くに上の段の行事があるときは、印を下側へ */
.sE .tl .now.dn::after{top:auto;bottom:100%;height:54px}
.sE .tl .now::after{content:'';position:absolute;left:50%;top:100%;height:86px;border-left:2px dashed var(--ink);opacity:.5}
.sE .tl .ev.mini{transform:translate(-50%,-7px)}   /* 絵なし：点→名前の順で、点を線の上に置く */
.sE .tl .ev.mini .dot{order:-2}.sE .tl .ev.mini > b{order:0;margin:3px 0 0}

/* かなの板：゛゜・小さい字・ー・ABC・けす の段 */
.kbw .kbx{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 8px;align-items:center}
.kbw .kbx button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.kbw .kbx button:active{transform:translateY(2px);box-shadow:none}
.kbw .kbx .sw{background:#fff;color:var(--teal-d);border-color:var(--teal)}   /* 切り替えのキー：白地に青緑の縁。黄色地だと「今この状態」に見える */
.kbw .kbx .del{background:var(--line-soft)}
.kbw .kbx .del:first-of-type{margin-left:auto}
.kbw .kbd.abc{direction:ltr}
/* なまえ画面：板の見た目は元の .kb のまま。ABC は左から */
.sB .kbw{margin-top:14px}.sB .kbw .kbd{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;direction:rtl}
.sB .kbw .kbd.abc{direction:ltr}
.sB .kbw .kbd button{font:inherit;font-family:var(--maru);font-weight:900;font-size:17px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .12s var(--ease),box-shadow .12s}
.sB .kbw .kbd button:active{transform:translateY(3px);box-shadow:none}
.sB .kbw .kbd button.on{background:var(--sun);border-color:var(--sun-d);box-shadow:0 3px 0 var(--sun-d)}
.sB .kbw .kbd button.mute{color:#ccc}
/* なまえから の引き出し：小さめ */
.scr .drawer .kbx button{height:26px;font-size:11px;padding:0 8px}

/* きょうかしょ：えらんで ダウンロード */
.sA .pics h4 .selmode{margin-left:auto;font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.sA .pics h4 .selmode:active{transform:translateY(2px);box-shadow:none}
.sA .pics .tile.pick{box-shadow:0 0 0 3px var(--green),0 2px 0 var(--green-d);position:relative}
.sA .pics .tile.pick::after{content:'✓';position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.sA .selbar{position:absolute;left:86px;right:32px;bottom:24px;z-index:4;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 8px 6px 18px;box-shadow:0 2px 0 var(--line),0 10px 24px #0002;font-weight:900;font-size:13px}
.sA .selbar .n{margin-right:auto}
.sA .selbar button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.sA .selbar .dl{background:var(--sun);border-color:var(--sun-d);box-shadow:0 2px 0 var(--sun-d)}
.sA .selbar .dl:disabled{opacity:.5;cursor:default}
.sA .selbar button:active{transform:translateY(2px);box-shadow:none}

/* きょうかしょ：なまえから のボタンと引き出し */
.sA .findbtns{position:absolute;right:0;top:54px;width:190px;height:48px;z-index:3;display:flex;gap:6px;align-items:center;justify-content:flex-end;padding-right:16px;background:#FFFDF7;border-bottom:1px solid var(--line)}   /* 教科タブの列の右端の区画(タブの列はここまでで横に流れる) */
.sA .findbtns button,.sB .findbtn{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;padding:4px 12px;white-space:nowrap;line-height:1.5;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.sA .findbtns button:active,.sB .findbtn:active{transform:translateY(2px);box-shadow:none}
/* なまえ画面：右上に もくじから */
.sB .findbtn{position:absolute;right:48px;top:62px;z-index:3}
.sB .drawer{left:auto;right:48px;bottom:auto;top:100px;max-height:470px;z-index:6}
.sA .drawer{left:auto;right:16px;bottom:auto;top:100px;max-height:470px;z-index:6}

/* きょうかしょの絵の格子：1枚ずつ .cell で包む（まとめてダウンロード中は右上に虫めがね） */
.sA .pics .cell{position:relative;min-width:0}
.sA .pics .cell .tile{width:100%}
/* まとめてダウンロード中は「×N」の札を虫めがねの左へ */

/* もくじから：カテゴリー／教科 の切り替え */
.scr .drawer .tabs{display:flex;gap:6px;margin-bottom:8px}
.scr .drawer .tabs button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;padding:5px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer}
.scr .drawer .tabs button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}

/* タイムラインの月の目もり */
.sE .tl .mo{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.sE .tl .mo.alt{background:#F7F1E1}
.sE .tl .mo b{position:absolute;left:0;top:99px;transform:translateX(-50%);font-size:9px;font-weight:900;background:var(--green-d);color:#fff;border-radius:999px;padding:1px 7px;line-height:16px;z-index:1;white-space:nowrap}   /* 月の札は線の上に。行事の点や絵は札の上に描かれる */


/* 内側の輪＝近いなかま：白地に黄色の縁。外側の輪＝少し遠いなかま：白地に細い縁（薄くはしない） */
.sE .stage .c:not(.far):not(.center):not(.same) .tile,.nkp .c:not(.far):not(.center):not(.same) .t{background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 0 var(--line)}   /* うちがわでも「ほかの 種類」でない札は 外側と同じ地味な縁(緑＝ほかの種類、金＝真ん中 だけを色にする。ユーザー 2026-09-14) */   /* 内側は白地に黄色の縁だけ（クリーム地は面の色と同じで見分けにくい） */
.sE .stage .c.far .tile,.nkp .c.far .t{background:#fff;opacity:.92;box-shadow:0 0 0 1px var(--line),0 2px 0 var(--line)}
.sE .stage .c.far .tile b,.nkp .c.far .t b{color:var(--dim)}
.sE .stage .c.same .tile,.nkp .c.same .t{background:#fff;box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}   /* 同じ名前は白地に太い縁で別格 */

/* タイムラインの左右送り */
.sE .tlnav{position:absolute;top:150px;width:30px;height:30px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-weight:900;font-size:13px;cursor:pointer;z-index:6;box-shadow:0 0 0 2px var(--line),0 2px 0 var(--line);display:flex;align-items:center;justify-content:center;padding:0}
.sE .tlnav:active{transform:translateY(2px);box-shadow:0 0 0 2px var(--line)}
.sE .tlnav.l{left:6px}.sE .tlnav.r{right:6px}
.sE.notl .tlnav{display:none}

/* タグの札(.reason)：絵の枠の内側(上端)の小さな札。※ .why はパネルの「タグを見せる」の行なので使わない */
.tile .same.reason{top:3px;bottom:auto;right:auto;height:auto;width:max-content;max-width:none;display:inline-block;background:#fffd;color:#8F6A43;border-color:#B9885A;font-weight:700;font-size:8px;line-height:1.3;padding:0 5px}   /* 理由の札は絵の枠の内側(上端)に。外に出すと側面で隣の絵に触れる */

/* 上の段の道具（ふりがな・行事をたたむ） */
.hd .tools{display:flex;gap:6px;margin-left:14px}
.hd .tools button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.hd .tools button.on{background:var(--teal);border-color:var(--teal-d);color:#fff;box-shadow:0 2px 0 var(--teal-d)}
.hd .tools button:active{transform:translateY(2px);box-shadow:none}
.sE .tlhead{display:none}
/* ひらがなで見る：既定は名前のまま。オンで どこでも読み(ひらがな)に置きかえる */
.pl{display:inline}.rb,.kn{display:none}
body.ruby .pl{display:none}body.ruby .kn{display:inline}
/* カテゴリーの棚：大分類が22あるので背表紙の列はスクロール、ボタンは低め */
.sA .spine{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:30px}.sA .spine::-webkit-scrollbar{width:6px}.sA .spine::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}.sA .spine::-webkit-scrollbar-track{background:transparent}   /* 2026-09-04 下に続くことを示す(ユーザー「スクロールバーあるいは→で下に行けることを示唆」) */
.sA.cat .spine button{height:auto;min-height:40px;padding:5px 2px;flex:none}
.sA.cat .spine button .txt{font-size:11.5px;white-space:normal;line-height:1.15}
.sA.cat .ulabel{display:none}

/* カテゴリーの棚：単元の段は無し。絵の面を上まで広げる */
.sA.cat .units{display:none}
.sA.cat .pics{top:116px}

/* なまえ画面：見かたの切り替え(さくいん／絵)。入口より一段小さい */
.sB .modes{position:absolute;left:416px;top:64px;z-index:3;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--dim)}
.sB .modes small{margin-right:4px;font-weight:700}
.sB .modes span{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--dim);cursor:pointer}
.sB .modes span.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.sB .right{padding-top:40px}

/* 「外を押しても とじる」の案内 */
.nkp .hint{position:absolute;right:48px;top:14px;font-size:10px;color:var(--dim);z-index:2}

/* 真ん中の箱はカードの大きさだけにする(札やボタンは外に浮かせる)。中心合わせがずれない */
.sE .stage .c.center{width:136px}
.nkp .c.center{width:100px}

/* 「おなじ なまえ Nまい」の札：左下(もくじから の並び／パネルの タグを見せる の並び)に */

/* 全名の吹き出し */
.tip{position:absolute;z-index:1000;pointer-events:none;background:var(--ink);color:#fff;font-family:var(--maru);font-weight:700;font-size:12px;line-height:1.4;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px #0003;max-width:420px;overflow:hidden;text-overflow:ellipsis}

/* 最初の画面：自動で選んだ理由 */

/* はじめから */
.hd .wm:hover{text-decoration:underline}

/* 最初の画面：素材を えらぼう。上に目玉3枚、下にゆったりした帯(トップ.json で差し替え可) */
.sE .welcome{position:absolute;left:28px;right:28px;top:12px;bottom:0;color:var(--ink);display:flex;flex-direction:column}   /* 下の帯はスクロールで見る(次の帯の見出しが少し見えるのが続きの印) */

.sE .welcome .wh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sE .welcome .wh img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 3px 8px #0002;flex:none}   /* ふみ の丸い絵だけ。絵の札の画像には当てない */
.sE .welcome b{display:block;font-size:17px;font-weight:900}
.sE .welcome p{margin:1px 0 0;font-size:11px;color:var(--dim);line-height:1.5}
.sE .notice{background:#FFF3D0;border:1px solid var(--sun);border-radius:12px;padding:8px 14px;margin-bottom:14px;font-size:12px}
.sE .notice .ni{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.sE .notice .k{font-weight:900;background:var(--sun);border-radius:100px;padding:0 8px;font-size:10px}
.sE .notice .d{font-family:var(--mono);font-size:10px;color:var(--dim)}
.sE .hero{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
.sE .hero .tile.large{padding:6px 8px 5px;border-radius:18px;border:2px solid var(--sun);box-shadow:0 3px 0 var(--sun-d)}   /* 縁は枠線で内側に(影だと面の端で切れる) */
.sE .hero .tile.large img{height:64px}
.sE .hero .tile.large b{font-size:12.5px;margin-top:4px}
.sE .strip{margin-top:2px;margin-bottom:10px}
.sE .strip h5{margin:0 0 4px;font-size:12px;color:var(--ink);font-weight:900}
.sE .strip .row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 4px}
.sE .strip .row::-webkit-scrollbar{display:none}
.sE .strip .tile{flex:none;width:92px;padding:6px 4px 5px}.sE .strip .tile img{height:42px}.sE .strip .tile b{font-size:10px;margin-top:3px}
.sE.empty .bar,.sE.empty .opts{display:none}
/* 最初の画面の帯：見出しの「もっと見る」 */
.sE .strip h5{display:flex;align-items:center;gap:8px}
.sE .strip h5 .more{font:inherit;font-family:var(--maru);font-weight:700;font-size:10px;padding:1px 8px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--teal-d);cursor:pointer}
.sE .welcome{bottom:8px;padding-bottom:44px}

/* 行事の帯の取っ手(たたむ／ひらく)。帯の下、面の上の細い段 */
.sE .tltoggle{position:absolute;left:0;right:0;top:244px;height:24px;border:0;border-bottom:1px solid var(--line);background:#F3EDE0;color:var(--ink);font:inherit;font-family:var(--maru);font-weight:900;font-size:12.5px;line-height:24px;cursor:pointer;z-index:4;padding:0}
.sE .tltoggle:hover{background:#EDE4CF;color:var(--ink)}
.sE.notl .tltoggle{display:none}
.sE.notl .tlnav{display:none}
/* 上の段：左は Emile と はじめに、右は 入口 ＋ 表示の設定 ＋ アカウント */
.hd .prefs{display:flex;gap:4px;margin-left:10px;padding-left:10px;border-left:1px solid var(--line)}
.hd .prefs button{font:inherit;font-family:var(--maru);font-weight:700;font-size:10.5px;padding:2px 8px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer;box-shadow:0 2px 0 var(--line);white-space:nowrap;line-height:1.7}
.hd .prefs button.on{background:var(--teal);border-color:var(--teal-d);color:#fff;box-shadow:0 2px 0 var(--teal-d)}
.hd .account{border-left:0;padding-left:0;margin-left:6px}

/* 最初の画面では もくじから／なまえから を右上(題の横)に。帯の上に重ねない */
.sE .welcome .wh .side{position:static;margin-left:auto;flex:none}

/* 中心の絵は押せる(棚へ) */
.sE .stage .c.center .tile,.nkp .c.center .t{cursor:pointer}

/* 中心の絵の吹き出し(棚を見る／大きく見る／タグ) */
.cmenu{position:absolute;z-index:1100;background:#fff;border-radius:14px;box-shadow:0 0 0 2px var(--sun),0 10px 24px #0002;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:200px}
.cmenu > button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;text-align:left;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.cmenu > button:hover{background:#FFF3D0}
.cmenu > button small{display:block;font-weight:700;font-size:10px;color:var(--dim);margin-bottom:2px}
.cmenu .tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 2px 0;border-top:1px dashed var(--line);margin-top:2px}
.cmenu .tags span{flex-basis:100%}
.cmenu .tags span{font-size:10px;color:var(--dim);font-weight:700;margin-right:2px}
.cmenu .tags button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:2px 9px;border-radius:100px;border:0;background:#1d6e6614;color:#1d6e66;cursor:pointer}

/* ← もどる(輪から棚やタグへ移ったときだけ出る) */
.hd .tools .backbtn{background:#fff;border-color:var(--sun-d);color:var(--ink)}

/* 最初の画面：題の段は固定、その下だけスクロール(細いバーを出す) */
.sE .welcome .wh{flex:none}
.sE .welcome .wbody{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 12px 4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sE .welcome .wbody::-webkit-scrollbar{width:8px}
.sE .welcome .wbody::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.sE .welcome .wbody::-webkit-scrollbar-track{background:transparent}

/* 帯の一言(コメント)と お知らせの枠 */
.sE .strip .note{margin:0 0 6px;font-size:11.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 12px;display:inline-block;position:relative}
.sE .strip .note::before{content:'';position:absolute;left:18px;top:-6px;width:10px;height:10px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.sE .notice b{display:block;font-size:11px;color:var(--sun-d);margin-bottom:2px}

/* 特集ブロック(題→札→格子→一言) */
.sE .feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px 14px;margin:0 0 12px}
.sE .feat h4{margin:0 0 6px;font-size:16px;font-weight:900;color:var(--ink)}
.sE .feat .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sE .feat .chips button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer}
.sE .feat .chips button:hover{border-color:var(--sun-d);color:var(--ink)}
.sE .feat .note{margin:0 0 8px;font-size:12px;color:var(--ink);background:#FFF7E0;border-radius:10px;padding:5px 12px;display:inline-block}
.sE .feat .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sE .feat .grid .tile{padding:8px 6px 6px}.sE .feat .grid .tile img{height:56px}.sE .feat .grid .tile b{font-size:10.5px;margin-top:4px;white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden}
.sE .feat .more{margin-top:10px;font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--teal-d);cursor:pointer}
.sE .welcome .wbody{padding-top:4px}

/* 新着の NEW の札(左上)。まとめてダウンロードの ✓ と同じ場所なので、選ぶ途中は出さない */
.tile .new{position:absolute;left:4px;top:4px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;background:var(--pink);color:#fff;border-radius:8px;padding:0 6px;line-height:16px}
.sA .pics.sel .tile .new{display:none}

/* コピー／ダウンロードは中心の吹き出しの中に。右下の帯とパネル右下は出さない */
.nkp .acts{display:none}   /* 行事の帯の下の帯(.sE .bar)は 09-14 の掃除で外した */
.cmenu .acts2{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;padding:2px 4px 4px}
.cmenu .acts2 .who{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmenu .acts2 .act{margin:0;padding:0;box-shadow:none}

/* 人気の順位と回数 */
.tile .uses{display:block;margin-top:2px;font-family:var(--mono);font-size:9px;color:var(--sun-d);font-weight:700}

/* みんなの つかいかた(統計) */
.sE .stats{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 16px 12px;margin:0 0 12px}
.sE .stats > b{display:block;font-size:13px;margin-bottom:6px}
.sE .stats > b small{font-weight:700;color:var(--dim);font-size:10px;margin-left:6px}
.sE .stats .srow{display:grid;grid-template-columns:1.1fr 1.3fr 1.1fr 1.3fr;gap:14px;align-items:start}
.sE .stats .total{font-size:12px;color:var(--dim)}
.sE .stats .total i{font-style:normal;font-family:var(--mono);font-size:30px;font-weight:700;color:var(--ink);margin-right:4px;line-height:1.1}
.sE .stats .total small{display:block;margin-top:4px;font-size:10px}
.sE .stats .bars small,.sE .stats .spark small{display:block;font-size:10px;color:var(--dim);margin-bottom:3px}
.sE .stats .sb{display:grid;grid-template-columns:52px 1fr 30px;gap:6px;align-items:center;font-size:10.5px;margin:2px 0}
.sE .stats .sb .sn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sE .stats .sb .sbg{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.sE .stats .sb .sbg span{display:block;height:100%;background:var(--sun);border-radius:4px}
.sE .stats .tagbars .sb .sbg span{background:var(--teal)}
.sE .stats .sb .sc{font-family:var(--mono);font-size:9.5px;color:var(--dim);text-align:right}
.sE .stats .sv{display:flex;gap:4px;align-items:flex-end;height:54px}
.sE .stats .sv .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.sE .stats .sv .col span{display:block;width:100%;background:var(--green);border-radius:3px 3px 0 0;min-height:2px}
.sE .stats .sv .col i{font-style:normal;font-family:var(--mono);font-size:8px;color:var(--dim);margin-top:2px}

/* ロゴ画像(ユーザー支給)は「Emile」の文字入りなので、丸く切らず そのまま。白地は乗算で背景に溶かす。文字の見出しは重複するので出さない */
/* 画像の白い余白(上下11%・左右14%)を切って、見える部分が 上の段で50px・見出しで56px になる大きさに */
.hd .av{width:64px;height:64px;margin:-7px -9px;border-radius:0;object-fit:contain;box-shadow:none;mix-blend-mode:multiply;clip-path:inset(11% 14% 11% 14%)}
.hd .wm{display:none}
.sE .welcome .wh img{width:72px;height:72px;margin:-8px -10px;border-radius:0;object-fit:contain;box-shadow:none;mix-blend-mode:multiply;clip-path:inset(11% 14% 11% 14%)}
/* 2026-09-04 「棚のタブの列の右端の もくじから／なまえから は、近くに似た機能(背表紙・タブ)があるので なし。手法(findbtns＋fdrawer)は動き.js に残す」(ユーザー) */
.sA .findbtns{display:none}
.sA .subj{right:0}
/* たたんだあとの案内。輪の上の真ん中に小さく(取っ手のような帯にはしない) */
.sE .tlhint{position:absolute;right:18px;bottom:14px;z-index:4;font:inherit;font-family:var(--maru);font-weight:700;font-size:10.5px;color:var(--dim);background:transparent;border:0;padding:2px 10px;cursor:pointer;white-space:nowrap}
.sE .tlhint:hover{color:var(--ink);text-decoration:underline}
/* 選んで ダウンロードの帯は 絵の枠(白い箱)の内側に収める(枠の線に かからない) */
.sA .selbar{left:104px;right:34px;bottom:32px}
/* 背表紙の列の上下の ▲▼ */
.sA .spnav{position:absolute;left:0;width:70px;height:22px;z-index:3;border:0;font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;color:var(--dim);cursor:pointer;background:linear-gradient(to top,#F3EDE0 60%,transparent);padding:0;line-height:22px}
.sA .spnav.up{top:54px;background:linear-gradient(to bottom,#F3EDE0 60%,transparent)}
.sA .spnav.dn{bottom:0}
.sA .spnav:hover{color:var(--ink)}
/* なかまパネルの左上も、輪と同じ「← ひとつ もどる」＋いまの名前 */
.nkp .ttl{display:flex;align-items:center;gap:10px;overflow:visible}
.nkp .ttl .back{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:4px 12px;cursor:pointer;box-shadow:0 2px 0 var(--line);color:var(--ink)}
.nkp .ttl .back:disabled{opacity:.4;cursor:default}
.nkp .ttl .now{font-weight:900;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}

/* 迅速コピー：札の左上の小さな印。ふだんは薄く、札に乗せると はっきり。選ぶモードでは出さない(2026-09-09 社長の指摘2) */
.tile .qcp{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 0 var(--line);display:flex;align-items:center;justify-content:center;opacity:.55;cursor:pointer;z-index:3;font-size:12px;font-weight:900;line-height:1;transition:opacity .12s,transform .12s}
.tile:hover .qcp,.tile .qcp:focus{opacity:1}
.tile .qcp:hover{transform:scale(1.15);background:var(--sun);border-color:var(--sun-d)}
.tile .qcp.done,.tile.incart .qcp{opacity:1;background:var(--green);color:#fff;border-color:var(--green-d)}
.nkp .c .tile.incart .qcp{opacity:1}
.tile .new{left:auto;right:4px;top:22px}   /* NEW は右に(左上は コピーの印) */
.sA .pics.sel .tile .qcp{display:none}
.toast{position:absolute;z-index:1001;pointer-events:none;background:var(--ink);color:#fff;font-family:var(--maru);font-weight:700;font-size:11.5px;padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px #0003;white-space:nowrap;transition:opacity .3s}
.toast.out{opacity:0}
/* 小さい札(帯・外側の輪・引き出し・パネル)では印も小さく */
.sE .tl .tile .qcp,.c.far .tile .qcp,.scr .drawer .tile .qcp,.nkp .grid .tile .qcp,.sE .strip .tile .qcp{width:18px;height:18px;left:3px;top:3px}
.sE .tl .tile .qcp svg,.c.far .tile .qcp svg,.scr .drawer .tile .qcp svg,.nkp .grid .tile .qcp svg{width:10px;height:10px}
/* まとめて コピー(選ぶモードの帯) */
.sA .selbar .mcp{background:#fff}

/* お気に入りの星：コピーの印の右どなり。付いていれば いつも金色 */
.tile .favb{position:absolute;left:30px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;color:#C9B27A;border:1px solid var(--line);box-shadow:0 1px 0 var(--line);display:flex;align-items:center;justify-content:center;opacity:.55;cursor:pointer;z-index:3;font-size:13px;line-height:1;transition:opacity .12s,transform .12s}
.tile:hover .favb,.tile .favb:focus{opacity:1}
.tile .favb:hover{transform:scale(1.15)}
.tile.isfav .favb{opacity:1;background:var(--sun);color:#fff;border-color:var(--sun-d)}
.sA .pics.sel .tile .favb{display:none}
.sE .tl .tile .favb,.c.far .tile .favb,.scr .drawer .tile .favb,.nkp .grid .tile .favb,.sE .strip .tile .favb{width:18px;height:18px;left:24px;top:3px;font-size:11px}

/* 案B: 帯の行事の絵の格子(カテゴリーの棚の箱と同じ見た目)。輪は白い板(なかまパネル)に */
.sE.ev .trail,.sE.ev .opts,.sE.ev .bar,.sE.ev .drawer{display:none}
/* 案Bで帯の下は格子だけになったので、帯を広く(190→240px)、絵も大きく(ユーザー 2026-09-09「1年の行事が広く取れるでしょ」) */
.sE .tl{height:240px}
.sE .tl .line{top:134px}
.sE .tl .ev{top:134px;width:140px}
.sE .tl .ev > b{max-width:140px;font-size:12px}
.sE .tl .ev .tile{width:100px;padding:7px 5px 5px}.sE .tl .ev .tile img{height:44px}.sE .tl .ev .tile b{font-size:10px}
.sE .tl .ev.lo{top:134px}
.sE .tl .ev.lo .tile{width:88px}.sE .tl .ev.lo .tile img{height:38px}
.sE .tl .mo b{top:125px}
.sE .tl .now::after{height:112px}
.sE .tl .now.dn::after{height:70px}
.sE .tlnav{top:190px}
.sE .stage{top:318px}
.sE .tltoggle{top:294px}

/* 「1年の行事」は帯が画面いっぱい(ユーザー 2026-09-09)。行事の絵は大きく、線は真ん中。取っ手は出さない */
.sE.ev .tl{height:auto;bottom:0}
.sE.ev .tl .line{top:290px}
.sE.ev .tl .ev{top:290px;width:170px}
.sE.ev .tl .ev > b{max-width:170px;font-size:14px;margin-bottom:6px}
.sE.ev .tl .ev .tile{width:132px;padding:9px 6px 7px}.sE.ev .tl .ev .tile img{height:76px}.sE.ev .tl .ev .tile b{font-size:11.5px;margin-top:4px}
.sE.ev .tl .ev .dot{width:16px;height:16px}
.sE.ev .tl .ev.lo{top:290px}
.sE.ev .tl .ev.lo .tile{width:120px}.sE.ev .tl .ev.lo .tile img{height:68px}
.sE.ev .tl .ev.lo b{font-size:12px}
.sE.ev .tl .mo b{top:281px;font-size:11px;padding:2px 10px;line-height:18px}
.sE.ev .tl .now{font-size:12px;padding:3px 12px}
.sE.ev .tl .now::after{height:268px}
.sE.ev .tl .now.dn::after{height:200px}
.sE.ev .tlnav{top:275px;width:36px;height:36px;font-size:15px}
.sE.ev .tltoggle{display:none !important}
.sE.ev .stage,.sE.ev .side{display:none}
/* 引きの帯：絵の札は 120px、間隔 132px */
.sE.ev .tl .ev{width:150px}
.sE.ev .tl .ev > b{max-width:150px;font-size:13px}
.sE.ev .tl .ev .tile{width:118px;padding:8px 5px 6px}.sE.ev .tl .ev .tile img{height:64px}
.sE.ev .tl .ev.lo .tile{width:110px}.sE.ev .tl .ev.lo .tile img{height:60px}
/* 4段目・3段目(もっと上／もっと下)。線までは点の線でつなぐ */
.sE.ev .tl .ev.r2{top:176px}
.sE.ev .tl .ev.r2::after{content:'';position:absolute;left:50%;top:calc(100% - 7px);height:116px;border-left:2px dotted var(--green);z-index:-1}
.sE.ev .tl .ev.r3{top:404px}
.sE.ev .tl .ev.r3::before{content:'';position:absolute;left:50%;bottom:calc(100% - 7px);height:112px;border-left:2px dotted var(--green);z-index:-1}
.sE .tl .ev{z-index:2}
/* 4段が帯(566px)に収まる寸法：段の高さ ≒128px、線は 280px */
.sE.ev .tl .line{top:280px}
.sE.ev .tl .ev,.sE.ev .tl .ev.lo{top:280px}
.sE.ev .tl .ev > b{font-size:12.5px;margin-bottom:4px}
.sE.ev .tl .ev .tile{width:112px;padding:7px 5px 5px}.sE.ev .tl .ev .tile img{height:56px}.sE.ev .tl .ev .tile b{font-size:10.5px;margin-top:3px}
.sE.ev .tl .ev.lo .tile{width:104px}.sE.ev .tl .ev.lo .tile img{height:52px}
.sE.ev .tl .ev.r2{top:145px}
.sE.ev .tl .ev.r2::after{height:128px}
.sE.ev .tl .ev.r3{top:415px}
.sE.ev .tl .ev.r3::before{height:128px}
.sE.ev .tl .mo b{top:271px}
.sE.ev .tlnav{top:262px}
.sE.ev .tl .now::after{height:258px}
.sE.ev .tl .now.dn::after{height:190px}
.sE.ev .tl .mo b{top:264px}   /* 月の札を線の少し上に(下の段の札と 2px かぶっていた) */
.sE.ev .tl .mo b{top:273px;font-size:10px;line-height:16px;padding:1px 9px}   /* 線の真ん中に乗せる(上下の段の札の間 16px) */

/* 指摘1: 帯の上の段に学年・教科の単元(活動時期どおり)。選ぶ道具は帯の左上、札は帯の中を時間と一緒に流れる */
.sE .ulane-ctl{display:none}
.sE.ev .ulane-ctl{display:flex;position:absolute;left:18px;top:62px;z-index:6;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:3px 6px 3px 12px;box-shadow:0 2px 0 var(--line);font-size:11px;font-weight:700;color:var(--dim)}
.sE .ulane-ctl select{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:1px solid var(--line);border-radius:100px;padding:2px 6px;background:#fff;color:var(--ink)}
.sE .ulane-ctl .off{display:none;font:inherit;font-weight:900;border:0;background:var(--line-soft);border-radius:100px;width:20px;height:20px;cursor:pointer;line-height:1}
.sE .ulane-ctl.on .off{display:inline-block}
.sE .ulane-ctl.on{border-color:var(--teal);box-shadow:0 2px 0 var(--teal)}
.sE .tl .ub{position:absolute;top:40px;height:52px;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:4px 8px;background:#fff;border:1.5px solid var(--teal);border-radius:12px;font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;color:var(--ink);cursor:pointer;overflow:hidden;white-space:nowrap;z-index:3;text-align:left;box-shadow:0 2px 0 #1d6e6633}
.sE .tl .ub.l1{top:98px}
.sE .tl .ub img{height:40px;width:44px;object-fit:contain;flex:none}
.sE .tl .ub .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sE .tl .ub .n{font-family:var(--mono);font-weight:400;font-size:9px;color:var(--dim);flex:none}
.sE .tl .ub.none{border-style:dashed;color:var(--dim);background:#FFFDF7}
.sE .tl .ub:hover{transform:translateY(-2px)}
.sE .tl .ub{top:52px}.sE .tl .ub.l1{top:104px}   /* 選ぶ道具(8〜46px)の下から */
.sE .tl .ub{top:48px;height:46px}.sE .tl .ub.l1{top:98px}.sE .tl .ub img{height:34px;width:38px}   /* 上の段の行事の名前(157px〜)に かからない高さ */

/* 帯の切り替え「行事｜単元」。単元のときだけ学年・教科を出す。単元のときは行事の札を出さない */
.sE .ulane-ctl .m{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:1px solid var(--line);background:#fff;color:var(--dim);border-radius:100px;padding:3px 12px;cursor:pointer}
.sE .ulane-ctl .m.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.sE .ulane-ctl select{display:none}
.sE .ulane-ctl.unit select{display:inline-block}
.sE.ev .ulane-ctl{padding:4px 6px}
.sE.umode .tl .ev{display:none}
.sE.umode .tl .now::after{height:258px}
/* 単元の札(単元モード)：絵＋名前＋時期。4段 */
.sE.umode .tl .ub{top:58px;height:88px;padding:6px 10px;gap:8px;border-radius:14px;font-size:12px}
.sE.umode .tl .ub img{height:64px;width:70px}
.sE.umode .tl .ub .tx{display:flex;flex-direction:column;min-width:0;gap:3px}
.sE.umode .tl .ub .tx .nm{font-size:12.5px}
.sE.umode .tl .ub .tx .when{font-family:var(--mono);font-weight:400;font-size:9.5px;color:var(--dim)}
.sE.umode .tl .ub .nopic{font-size:10px;color:var(--dim);flex:none;width:70px;text-align:center;border:1px dashed var(--line);border-radius:10px;padding:20px 0}
.sE.umode .tl .ub.l1{top:160px}
.sE.umode .tl .ub.l2{top:300px}
.sE.umode .tl .ub.l3{top:402px}
.sE.umode .tl .ub{height:100px}
.sE.umode .tl .ub .tx .nm{white-space:normal;line-height:1.3;max-height:2.6em;overflow:hidden}
.sE.umode .tl .ub.l1{top:172px}
.sE.umode .tl .ub.l2{top:300px}
.sE.umode .tl .ub.l3{top:414px}
.sE.umode .tl .ub .tx .nm{font-size:12px;max-height:3.9em}   /* 長い単元名は3行まで */

/* 指摘5: ボタンの小さな絵(アイコン) */
.ic{width:14px;height:14px;vertical-align:-2px;margin-right:5px;flex:none}
.hd .ent button .ic{width:15px;height:15px;margin-right:6px}
.hd .rubytoggle .ic{margin-right:3px}
.cmenu .tags span .ic{width:12px;height:12px;margin-right:3px}
.nkp .ttl .back .ic{margin-right:4px}
.sE .ulane-ctl .m .ic{width:13px;height:13px;margin-right:4px}
.ic{position:static !important;width:14px !important;height:14px !important}

/* 指摘6 フローティング：小さな画面(380px幅) */
.hd .floatbtn{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:4px 10px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;margin-left:4px}
.hd .floatbtn:hover{background:#FFF3D0}
body.float{margin:0;background:#FBF6E3;overflow:hidden}
body.float #float{position:fixed;inset:0}
.fl{display:flex;flex-direction:column;height:100%;font-family:var(--maru);color:var(--ink)}
.fl .flh{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#FFFDF7;border-bottom:1px solid var(--line)}
.fl .flh .logo{width:28px;height:28px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.fl .flh .q{flex:1;min-width:0;font:inherit;font-family:var(--maru);font-weight:900;font-size:15px;border:2px solid var(--teal);border-radius:100px;padding:6px 12px;outline:0;background:#fff}
.fl .flh .clr{font:inherit;font-weight:900;border:0;background:var(--line-soft);border-radius:100px;width:26px;height:26px;cursor:pointer;flex:none}
.fl .flchips{display:flex;gap:6px;padding:8px 10px 0;flex-wrap:wrap}
.fl .flchips button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 10px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer}
.fl .flchips button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.fl .flttl{display:flex;align-items:center;gap:8px;padding:8px 12px 4px;font-size:12px;font-weight:900}
.fl .flttl .back{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:3px 10px;cursor:pointer}
.fl .flbody{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fl .flgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px}   /* 列の数は窓の幅で決まる(390px で3列、広げるほど増える。3列固定だと広い窓で札が横に伸びた。ユーザー 2026-09-14) */
.fl .flgrid .tile{padding:8px 4px 6px}.fl .flgrid .tile img{height:56px}.fl .flgrid .tile b{font-size:10.5px;margin-top:4px}
.fl .flgrid .tile.on{box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}
.fl .flempty{padding:24px 10px;font-size:12px;color:var(--dim);text-align:center}
.fl .flfoot{padding:6px 12px;font-size:10px;color:var(--dim);border-top:1px solid var(--line);background:#FFFDF7}

/* フローティング(画面の中)：本体をしまい、丸いボタンと小さな画面を四隅のどこかに */
/* 浮かせても本体は消さない(ユーザー 2026-09-09「フローティングをすると消えちゃう 駄目」)。丸いボタンと小さな画面は本体の上に重なる */
.fl .flpick{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 6px;border-bottom:1px dashed var(--line);margin-bottom:4px}
.fl .flpick button{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;padding:3px 9px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer}
.fl .flpick button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.fl .flsub{font-size:11px;font-weight:900;padding:4px 2px 6px}
.fl .flsel{display:flex;gap:6px;padding:4px 0 8px;flex-wrap:wrap}
.fl .flsel select{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;border:1px solid var(--line);border-radius:100px;padding:4px 8px;background:#fff;color:var(--ink);max-width:100%}
.fl .flsel select:disabled{opacity:.45}
.fl .fltags{display:flex;flex-wrap:wrap;gap:4px;padding:0 0 6px}
.fl .fltags button{font:inherit;font-family:var(--maru);font-weight:700;font-size:10.5px;padding:2px 8px;border-radius:100px;border:0;background:#1d6e6614;color:var(--teal-d);cursor:pointer}
.fl .fltags button i{font-style:normal;font-family:var(--mono);font-size:9px;opacity:.7}
.fl .fltags button.on{background:var(--teal);color:#fff}

/* 上の段：ボタンの文字を折り返さない(アイコンを足して詰まった)。余白を少し詰める */
.hd .ent button,.hd .tools button,.hd .prefs button,.hd .account button{white-space:nowrap}
.hd .ent button{padding:6px 11px;font-size:12.5px}
.hd .ent{gap:5px}
.hd .tools{margin-left:8px}
.hd .prefs{margin-left:8px;padding-left:8px}
.hd .account{white-space:nowrap}
.hd .account .uname{font-size:12px}
.sE .feat .empty{margin:6px 0 2px;font-size:12px;color:var(--dim);background:#FFF8E6;border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.hd .ent button{padding:5px 9px;font-size:12px}
.hd .ent button .ic{width:13px;height:13px;margin-right:4px}
.hd .tools button,.hd .prefs button{font-size:11px;padding:4px 9px}
.hd .account .uname{font-size:11.5px}
.hd .account .logout{font-size:10.5px;padding:3px 8px}
.hd{padding:0 14px}

/* コピーかご：続けてコピーした枚数を下に出す */
.basket{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);z-index:1300;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 8px 6px 16px;font-family:var(--maru);font-weight:900;font-size:12px;box-shadow:0 8px 24px #0004;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}
.basket.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.basket .pics{display:flex;gap:3px}
.basket .pics img{width:26px;height:26px;object-fit:contain;background:#fff;border-radius:6px}
.basket .hint{font-weight:700;font-size:10px;opacity:.75;white-space:nowrap}
.basket .clr{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:0;background:#fff;color:var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer}
.basket .bp{position:relative;display:inline-block}
.basket .bp .x{position:absolute;right:-5px;top:-6px;width:15px;height:15px;border-radius:50%;border:0;background:var(--pink);color:#fff;font-size:10px;font-weight:900;line-height:15px;padding:0;cursor:pointer}

/* 上の段の ★ お気に入り と、その下に開く格子 */
.hd .favbtn{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:4px 10px;border-radius:100px;border:1px solid var(--sun-d);background:#FFF3D0;color:var(--ink);cursor:pointer;margin-left:4px;white-space:nowrap}
.hd .favbtn .cnt{font-style:normal;font-family:var(--mono);font-size:10px;background:var(--sun);color:#fff;border-radius:999px;padding:0 6px;margin-left:4px}
.hd .favbtn .cnt:empty{display:none}
.favpanel{position:absolute;right:14px;top:58px;width:560px;max-height:470px;display:none;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 0 0 2px var(--sun),0 14px 34px #0003;z-index:45;overflow:hidden}
.favpanel.open{display:flex}
.favpanel .fph{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);font-size:13px}
.favpanel .fph .note{font-size:10px;color:var(--dim);font-weight:700;margin-right:auto}
.favpanel .fph .cls{font:inherit;font-weight:900;border:0;background:var(--line-soft);border-radius:100px;width:26px;height:26px;cursor:pointer}
.favpanel .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;overflow:auto;scrollbar-width:thin}
.favpanel .grid .tile{padding:8px 4px 6px}.favpanel .grid .tile img{height:52px}.favpanel .grid .tile b{font-size:10.5px;margin-top:4px}
.favpanel .grid .empty{grid-column:1/-1;padding:16px;font-size:12px;color:var(--dim)}
/* 上の段に ★ お気に入り を足したぶん、全体を少し詰める(1000px に収める) */
.hd{padding:0 10px;gap:8px}
.hd .av{width:56px;height:56px;margin:-6px -8px}
.hd .tools{margin-left:2px}
.hd .tools button{padding:4px 8px}
.hd .ent{gap:4px}
.hd .ent button{padding:5px 8px}
.hd .prefs{gap:3px;margin-left:6px;padding-left:6px}
.hd .prefs button,.hd .floatbtn,.hd .favbtn{padding:4px 8px;margin-left:0}
.hd .account{margin-left:4px}
.hd .account .uname{font-size:11px}
.hd .ent button{padding:5px 7px}.hd .prefs{gap:2px}

/* ?fit=1(Chromebook の大きさで見る)：見出しを消し、画面を窓に合わせて縮める */
.fl .flfoot{display:flex;align-items:center;gap:8px}
.fl .flfoot span{flex:1;min-width:0}
.fl .flfoot .slides{flex:none;font-weight:900;color:var(--teal-d);text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:100px;padding:2px 9px}
.ver{position:fixed;left:8px;bottom:4px;font-family:var(--mono);font-size:10px;color:var(--dim);opacity:.6;pointer-events:none;z-index:1400}
/* 真ん中と なかまの縁の色を分ける(ユーザー 2026-09-09「なかまの絵と真ん中の絵のフレームの色を分ける」)：
   真ん中＝太い金、内側の輪(ほかの種類・関連)＝青緑の細い縁、外側＝薄い灰の縁。「ほかの 種類」の札も青緑 */
/* 緑の縁は「ほかの 種類」(.same)だけ。うちがわの輪だからという理由では付けない(ほかの種類が無い絵で うちがわの つながる絵まで緑になり、「緑＝ほかの種類」の説明と食い違った。ユーザー 2026-09-14) */
.sE .stage .c.same .tile,.nkp .c.same .t{box-shadow:0 0 0 2px var(--teal),0 2px 0 var(--teal-d)}
.sE .stage .c.center .tile,.nkp .c.center .t{box-shadow:0 0 0 4px var(--sun),0 4px 0 var(--sun-d)}
.tile .same{background:var(--teal);color:#fff;border-color:var(--teal-d)}
.tile .same.reason{background:#fffd;color:#8F6A43;border-color:#B9885A}
/* 札の中の小さな絵(コピーの印・★)は輪の線の svg とは別。位置を取られない(外側の輪で印が左上に寄っていた。ユーザー 2026-09-11) */
.qcp svg,.favb svg{position:static !important;inset:auto !important;width:12px;height:12px}
.c.far .tile .qcp svg,.sE .tl .tile .qcp svg,.scr .drawer .tile .qcp svg,.nkp .grid .tile .qcp svg{width:10px;height:10px}

/* ===== レスポンシブ(2026-09-11) ===== */
/* 窓いっぱい(fluid)：見出しを消し、枠を窓の大きさに。中の部品は left/right/top/bottom で伸び縮み */
body.fluid{overflow:hidden}
body.fluid .appwrap{padding:0;overflow:hidden;height:100vh}
body.fluid #app{width:100%;height:100vh;max-width:none;margin:0;border-radius:0;box-shadow:none}
body.fluid #app .scr.wide{width:100%;height:100%}
body.fluid.small #app,body.fluid.small .wrap{display:none}
body.fluid #float{position:fixed;inset:0;background:#FBF6E3}
/* 帯：線と段は帯の縦の真ん中(--mid)から測る */
.sE.ev .tl .line{top:var(--mid,280px)}
.sE.ev .tl .ev,.sE.ev .tl .ev.lo{top:var(--mid,280px)}
.sE.ev .tl .ev.r2{top:calc(var(--mid,280px) - 135px)}
.sE.ev .tl .ev.r3{top:calc(var(--mid,280px) + 135px)}
.sE.ev .tl .mo b{top:calc(var(--mid,280px) - 7px)}
.sE.ev .tlnav{top:calc(var(--mid,280px) - 18px)}
.sE.ev .tl .now::after{height:calc(var(--mid,280px) - 26px)}
.sE.ev .tl .now.dn::after{height:calc(var(--mid,280px) - 26px)}
/* 格子は入るだけの列に */
.sA .pics{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sE .feat .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.favpanel{max-width:calc(100% - 28px)}
.favpanel .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
/* 900〜1040px の窓：上の段を詰める */
@media (max-width:1040px){
  .hd .ent button{padding:5px 6px;font-size:11px}
  .hd .tools button,.hd .prefs button,.hd .floatbtn,.hd .favbtn{font-size:10.5px;padding:3px 7px}
  .hd .account .uname{display:none}
  .hd .av{width:48px;height:48px;margin:-4px -6px}
}
/* 別窓の「小さく」：札と足元を隠し、格子を1段ぶんだけ */
.fl .flh .pipmini,.fl .flh .pipbig{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;border:1px solid var(--line);background:#fff;border-radius:100px;padding:4px 10px;cursor:pointer;flex:none}

/* コピーかごの札を作り直し(ユーザー 2026-09-11「くろいのでデカデカとはおかしい。フローティングや小さい状態には工夫がいる」)：
   白地に金の縁の細い帯。1行で、絵は小さく横に流す。狭い窓(別窓・小さな画面)では下に張り付く細い帯 */
.basket{background:#fff;color:var(--ink);border:1.5px solid var(--sun);box-shadow:0 2px 0 var(--sun-d),0 8px 20px #0002;padding:4px 6px 4px 12px;gap:8px;font-size:11.5px;white-space:nowrap;max-width:calc(100vw - 24px);transform:translate(-50%,16px)}
.basket.show{transform:translate(-50%,0)}
.basket .n{flex:none}
.basket .n b{font-size:14px;margin-right:1px}
.basket .n small{font-size:9px;color:var(--pink);margin-left:4px;font-weight:900}
.basket .pics{overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0;padding:3px 4px 1px 2px}
.basket .pics::-webkit-scrollbar{display:none}
.basket .pics img{width:22px;height:22px;border:1px solid var(--line)}
.basket .hint{color:var(--dim);opacity:1;font-size:9.5px}
.basket .clr{background:var(--sun);color:var(--ink);font-size:10.5px;padding:3px 9px}
.basket .bp .x{width:13px;height:13px;font-size:9px;line-height:13px;right:-4px;top:-5px}
/* 別窓・小さな画面(幅 520px 未満)：下に張り付く細い帯。説明の文は出さない */
@media (max-width:520px){
  .basket{left:8px;right:8px;bottom:8px;transform:none;max-width:none;width:auto;border-radius:12px;padding:3px 6px 3px 10px;gap:6px}
  .basket.show{transform:none}
  .basket .hint{display:none}
}
body.float .basket{bottom:34px}
/* 別窓の「小さく」：検索＋絵が横に1段の低い帯。札・題・足元は隠す */
#float.mini .fl .flchips,#float.mini .fl .flttl,#float.mini .fl .flfoot{display:none}
#float.mini .fl .flh{padding:6px 8px}
#float.mini .fl .flbody{overflow-x:auto;overflow-y:hidden;padding:6px 8px 8px;scrollbar-width:thin}
#float.mini .fl .flgrid{display:flex;gap:6px;width:max-content}
#float.mini .fl .flgrid .tile{width:92px;flex:none;padding:6px 3px 4px}
#float.mini .fl .flgrid .tile img{height:44px}
#float.mini .fl .flgrid .tile b{font-size:9.5px;margin-top:2px}
#float.mini .fl .flempty{white-space:nowrap;padding:12px}

/* なかまパネルの札は板の大きさに合わせて大きく(--nk 1.0〜1.5)。外側は もとより一回り大きく */
.nkp .c .t{width:calc(84px * var(--nk,1))}
.nkp .c .t img{height:calc(48px * var(--nk,1))}
.nkp .c .t b{font-size:calc(9.5px * var(--nk,1))}
.nkp .c.far .t{width:calc(72px * var(--nk,1));opacity:.92}
.nkp .c.far .t img{height:calc(40px * var(--nk,1))}
.nkp .c.far .t b{font-size:calc(9px * var(--nk,1))}
.nkp .c.center .t{width:calc(108px * var(--nk,1))}
.nkp .c.center .t img{height:calc(66px * var(--nk,1))}
/* ホバー拡大：札に乗せて少し待つと大きく */
.peek{position:fixed;z-index:1002;pointer-events:auto;background:#fff;border:2px solid var(--sun);border-radius:16px;padding:10px;box-shadow:0 12px 30px #0003}
.peek img{width:200px;height:200px;object-fit:contain;display:block;margin:0 auto}   /* 箱が絵より広いとき(小さな窓の 150px の絵。下の押しの段のほうが広い)に 絵が左に寄っていた(ユーザー 2026-09-14「小さい窓にしたときに左寄り」)→ 絵を箱の真ん中に */
/* なかまパネルではコピーの印と★も板の倍率で大きく(外側は特に。ユーザー 2026-09-11「コピーとお気に入りボタンが小さすぎる とくに2重目」) */
.nkp .c .tile .qcp,.nkp .c .tile .favb{width:calc(26px * var(--nk,1));height:calc(26px * var(--nk,1));font-size:calc(14px * var(--nk,1));opacity:.7}
.nkp .c .tile .favb{left:calc(32px * var(--nk,1))}
.nkp .c .tile .qcp svg{width:calc(13px * var(--nk,1));height:calc(13px * var(--nk,1))}
.nkp .c.far .tile .qcp,.nkp .c.far .tile .favb{width:calc(24px * var(--nk,1));height:calc(24px * var(--nk,1));left:3px;top:3px;font-size:calc(13px * var(--nk,1))}
.nkp .c.far .tile .favb{left:calc(29px * var(--nk,1))}
.nkp .c.far .tile .qcp svg{width:calc(12px * var(--nk,1));height:calc(12px * var(--nk,1))}
.nkp .c .tile.isfav .favb,.nkp .c .tile:hover .qcp,.nkp .c .tile:hover .favb{opacity:1}
.peek .nm{font-family:var(--maru);font-weight:900;font-size:13px;text-align:center;margin-top:6px}
.tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* 真ん中の箱の幅が 100px 固定のままで、中の札(108px×倍率)がはみ出し、線の集まる点と札の中心がずれていた(ユーザー 2026-09-11「中心に来ていない」) */
.nkp .c.center{width:calc(108px * var(--nk,1))}
/* 「大きく見る」の案内(なかまパネルの右下、タグを見せる の並び) */
.nkp .peekhint{position:absolute;right:14px;bottom:12px;z-index:2;font-family:var(--maru);font-weight:900;font-size:12px;color:var(--ink);background:#FFF3D0;border:1px solid var(--sun-d);border-radius:100px;padding:4px 12px;display:flex;align-items:center;gap:6px;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nkp .peekhint .ic{width:14px;height:14px;margin:0;flex:none}
.peek .acts{display:flex;gap:6px;justify-content:center;margin-top:8px}
.peek .acts button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;padding:5px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.peek .acts .pcp{background:var(--sun);border-color:var(--sun-d);box-shadow:0 2px 0 var(--sun-d)}
.peek .acts .pfav.on{background:var(--sun);border-color:var(--sun-d);color:#fff}
.peek .acts .pcp.on{background:var(--green);border-color:var(--green-d);color:#fff;box-shadow:0 2px 0 var(--green-d)}
/* 小さな窓の絵の印(コピー・★)を大きく(ユーザー 2026-09-14「小さい窓のときに小さいので もう少し大きく」) */
.fl .flgrid .tile .qcp,.fl .flgrid .tile .favb{width:28px;height:28px;font-size:16px;opacity:.85;left:4px;top:4px}
.fl .flgrid .tile .favb{left:36px}
.fl .flgrid .tile .qcp svg{width:15px;height:15px}
/* 小さな窓・別窓の ホバー拡大は少し小さめ */
.peek.sm img{width:150px;height:150px}
.peek.sm{padding:8px}
.fl .flh .pipbig{margin-left:4px}
.fl .flh button:disabled{opacity:.4;cursor:default}
.peek img,.peek .nm{cursor:pointer}
/* 小さな窓の なかま の頭：大きな画面の真ん中の吹き出しと同じ(コピー／ダウンロード／一覧で見る／タグ)(ユーザー 2026-09-14) */
.fl .flhead{background:#fff;border-radius:14px;box-shadow:0 0 0 2px var(--sun);padding:8px;margin:2px 2px 10px;display:flex;flex-direction:column;gap:6px}
.fl .flhead .acts2{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;padding:2px 4px 4px;flex-wrap:wrap}
.fl .flhead .acts2 .who{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl .flhead .acts2 .act{margin:0;padding:0;box-shadow:none}
.fl .flhead .shelf{font:inherit;font-family:var(--maru);font-weight:900;font-size:13px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.fl .flhead .shelf small{font-size:10px;color:var(--dim);font-weight:700}
.fl .flhead .shelf .ic{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.fl .flhead .tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 2px 0;border-top:1px dashed var(--line)}
.fl .flhead .tags span{flex-basis:100%;font-size:10px;color:var(--dim);font-weight:700}
.fl .flhead .tags span .ic{width:12px;height:12px;margin-right:3px}
.fl .flhead .tags button{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:2px 9px;border-radius:100px;border:0;background:#1d6e6614;color:#1d6e66;cursor:pointer}
/* 選んだ絵は頭の上に1枚。コピー／ダウンロードは 窓が狭くても折り返さない(ユーザー 2026-09-14「最小化したときに コピーとダウンロードが改行されないでほしい」) */
.fl .flpick{display:flex;justify-content:center;margin:2px 0 8px}
.fl .flpick .tile{width:150px}
.fl .flpick .tile img{height:96px}
.fl .flhead .act{gap:4px;flex:none}
.fl .flhead .act button{white-space:nowrap;font-size:12px;padding:6px 10px}
.fl .flpick .tile.on{background:#fff;box-shadow:0 0 0 3px var(--sun),0 2px 0 var(--sun-d)}
.fl .flpick .tile{border-radius:18px}   /* 小さな窓の 選んだ絵の札が楕円になっていた(ユーザー 2026-09-14「縁がまるくなっているのは直せ」) */
.peek .acts .pmore{background:#fff}
.peek.plain .acts{display:none}   /* 詳しい表示が出ているあいだは 絵と名前だけ */
body.selmode .basket{bottom:96px}   /* 選ぶ帯(まとめて コピー／ダウンロード)と重ならないように上へ */
/* 掃除(2026-09-14): 画面の中の◯(.flbtn/.flpanel)・大きく見る(.big/.zoom)・?fit(body.fit)・行事の帯の下の古い輪(.sE .trail/.opts/.bar/.evpics)の見た目は外した */
/* 吹き出しの「なかまの絵を 見る」(輪への入口。仮の言葉) */
.cmenu .nkgo,.fl .flhead .nkgo{font:inherit;font-family:var(--maru);font-weight:900;font-size:13px;text-align:left;border:1px solid var(--teal-d);background:#1d6e660f;color:var(--teal-d);border-radius:10px;padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.cmenu .nkgo small,.fl .flhead .nkgo small{font-size:10px;color:var(--dim);font-weight:700}
/* 輪の見かた(凡例)。左上の題の下(ユーザー 2026-09-14「ルールが読み取れない」) */
.nkp .legend{position:absolute;left:14px;bottom:32px;z-index:2;max-width:320px;font-size:10.5px;line-height:1.5;color:var(--ink);background:#fffc;border:1px solid var(--line);border-radius:8px;padding:3px 8px;display:flex;flex-direction:column;gap:0;pointer-events:none}
.nkp .legend .sw{display:inline-block;width:18px;height:0;vertical-align:middle;margin-right:6px;border-top:3px solid #59BCA8}
.nkp .legend .sw.dot{border-top:2px dotted #c9b27a}
/* つながる理由(タグ)の札は 札の下の縁に(上に置くと コピー・★・N種 の印に隠れて読めない。ユーザー 2026-09-14) */
.tile .same.reason{top:auto;bottom:-9px;left:50%;transform:translateX(-50%);z-index:3;font-size:9px;padding:1px 7px;background:#fff;box-shadow:0 1px 0 #B9885A}
/* ホバー拡大の押し(コピー・★・くわしく)は 途中で折り返さない。狭い窓では 押しごと次の行へ、文字も少し小さく(ユーザー 2026-09-14「改行されているのは直せ」) */
.peek{max-width:calc(100vw - 16px)}
.peek .acts{flex-wrap:wrap}
.peek .acts button{white-space:nowrap}
.peek.sm .acts button{font-size:11px;padding:5px 9px}
/* みんなの つかいかた ＝ 絵のランキング(ユーザー 2026-09-14) */
.sE .stats .srow2{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sE .stats .rksel{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sE .stats .rksel button,.sE .stats .rksel select{font:inherit;font-family:var(--maru);font-weight:700;font-size:11px;padding:3px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer}
.sE .stats .rksel button.on{background:var(--sun);border-color:var(--sun-d);color:var(--ink)}
.sE .stats .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px}
.sE .stats .grid .tile{padding:8px 6px 6px}.sE .stats .grid .tile img{height:52px}.sE .stats .grid .tile b{font-size:10.5px;margin-top:4px;white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden}
.sE .stats .grid .empty{grid-column:1/-1;font-size:11px;color:var(--dim);margin:6px 0}
/* 狭い窓(別窓・小さい画面)では かごの絵を折り返して全部見せる(横に隠れて 奥の絵の × が押せなかった。ユーザー 2026-09-14「最小画面にしたときに この奥のコピーしたものは もう消せないのか」) */
@media (max-width:520px){
  .basket{flex-wrap:wrap;white-space:normal}
  .basket .pics{flex:1 1 100%;order:3;flex-wrap:wrap;overflow:visible;gap:6px 8px;padding:4px 2px 2px}
  .basket .n{order:1}.basket .clr{order:2;margin-left:auto}
}
/* 登録に入っている人だけに出る「直す」（本体 7588e14） */
.act .fix{border-color:var(--teal);color:var(--teal-d)}

/* スライド：学年教科の中の「イラスト｜スライド」の切り替え（2026-09-15、案1改2。ユーザー「これでよい」） */
.sA .mode{position:absolute;right:16px;top:60px;display:flex;background:#fff;border:1px solid var(--line);border-radius:100px;padding:3px;z-index:4;box-shadow:0 2px 0 var(--line)}
.sA .mode button{font:inherit;font-family:var(--maru);font-weight:900;font-size:12.5px;padding:5px 16px;border-radius:100px;border:0;background:transparent;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.sA .mode button.on{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}
.sA .mode button.on.sl{background:var(--teal-d);color:#fff;box-shadow:0 2px 0 #04424c}
.sA .mode button i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.8}
.sA .mode button .ic{width:12px;height:12px}
.sA.slmode .units{background:#E6F2EF}
.sA .uc.sl{background:#fff;border:1px solid #bfe0d7;position:relative}
.sA .uc.sl b{color:var(--teal-d)}
.sA .uc .no{font-family:var(--mono);font-size:9px;color:var(--dim);margin-right:4px}
.sA .uc.sl .th{height:40px;align-items:center}
.sA .uc.sl .th img{height:32px;width:56px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
.sA .uc.sl .th img.none{display:none}
.sA .uc .sl{position:absolute;left:8px;bottom:6px;font-size:9.5px;font-weight:900;padding:1px 7px;border-radius:100px;background:var(--teal-d);color:#fff}
.sA .uc .sl.prep{background:#fff;color:var(--dim);border:1px solid var(--line)}
.sA .pics h4 .tag.sl{background:var(--teal-d);color:#fff}
.sA .pics .empty.hint{font-size:11px}
/* 時の札（スライド 1本） */
.hcard{background:#fff;border-radius:14px;box-shadow:0 2px 0 var(--line);padding:8px;font:inherit;font-family:var(--maru);text-align:left;position:relative;width:100%}
.hcard .pic{cursor:pointer;border:0;padding:0;width:100%;display:block;font:inherit;transition:transform .16s var(--ease)}.hcard .pic:hover{transform:translateY(-2px)}
.hcard .act{margin-top:6px;padding:3px;gap:4px}.hcard .act button{font-size:11px;padding:4px 8px;flex:1;justify-content:center;display:flex;align-items:center;gap:3px;white-space:nowrap}.hcard .act .see{background:#fff;border-color:var(--line);color:var(--teal-d)}
.sA.slmode .pics{grid-template-columns:repeat(4,1fr)}
/* 選ぶとき（絵の まとめて ダウンロード と同じ）：札に □、押すと ✓。見る・ダウンロードの押しは隠す */
.hcard .chk{display:none;position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:6px;border:2px solid var(--line);background:#fff;z-index:1}
.pics.sel .hcard{cursor:pointer}.pics.sel .hcard .chk{display:block}.pics.sel .hcard .act{display:none}
.pics.sel .hcard.pick{box-shadow:0 0 0 3px var(--green),0 2px 0 var(--green-d)}
.pics.sel .hcard.pick .chk{background:var(--green);border-color:var(--green-d)}
.pics.sel .hcard.pick .chk:after{content:'✓';color:#fff;font-size:14px;font-weight:900;position:absolute;left:4px;top:-3px}   /* 時の札は 絵より横長（1枚目が 16:9、押しが2つ） */
.hcard .no{font-size:12px;font-weight:900;color:var(--teal-d)}
.hcard .aim{font-size:11px;font-weight:700;line-height:1.35;height:2.7em;overflow:hidden;margin-top:2px}
.hcard .pic{position:relative;aspect-ratio:16/9;background:#F3EDE0;border-radius:6px;overflow:hidden;margin-top:4px}
.hcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hcard .pic img.none{display:none}
.hcard .pic .nopic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim)}
.hcard .pic img:not(.none)+.nopic{display:none}
.hcard .meta{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:4px}
/* めくる窓（ホバー拡大と同じ作法：札の上に大きく。中身は全部見せる） */
.fviewer{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1200}
.fviewer .box{background:#FFFDF7;border-radius:18px;box-shadow:0 0 0 2px var(--sun),0 14px 40px #0004;padding:14px 16px 12px;width:860px;max-width:96%;max-height:96%;overflow:auto;font-family:var(--maru)}
.fviewer .ttl{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:900;margin-bottom:8px}
.fviewer .ttl small{font-weight:700;color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fviewer .ttl .x{margin-left:auto;flex:none;font:inherit;border:0;background:var(--line-soft);border-radius:100px;width:30px;height:30px;cursor:pointer;font-weight:900}
.fviewer .stage{display:flex;align-items:center;gap:10px}
.fviewer .big{flex:1;position:relative;aspect-ratio:16/9;background:#fff;border-radius:10px;box-shadow:0 6px 24px #0002;overflow:hidden}
.fviewer .big img{width:100%;height:100%;object-fit:contain;display:block}
.fviewer .big img.none{display:none}
.fviewer .big .nopic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim)}
.fviewer .big img:not(.none)+.nopic{display:none}
.fviewer .nav{font:inherit;font-family:var(--maru);font-weight:900;font-size:20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line);flex:none}
.fviewer .strip{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.fviewer .strip button{flex:none;width:104px;aspect-ratio:16/9;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;overflow:hidden}
.fviewer .strip button img{width:100%;height:100%;object-fit:cover;display:block}
.fviewer .strip button img.none{display:none}
.fviewer .strip button.on{outline:3px solid var(--sun)}
.fviewer .foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;flex-wrap:wrap}
.fviewer .foot .pos{font-family:var(--mono);color:var(--dim);font-size:10.5px}
.fviewer .foot .hours{display:flex;gap:4px;flex-wrap:wrap}
.fviewer .foot .hours button{font:inherit;font-family:var(--maru);font-weight:900;font-size:11px;padding:3px 9px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer}
.fviewer .foot .hours button.on{background:var(--sun);border-color:var(--sun-d)}
.fviewer .foot .act{margin:0 0 0 auto}
.act button.sub{background:#fff;border-color:var(--line);color:var(--teal-d)}

/* なまえの画面：言葉から当たった スライドの単元（2026-09-16） */
.sB .slhits{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sB .slhit{font:inherit;font-family:var(--maru);text-align:left;cursor:pointer;background:#fff;border:1px solid #bfe0d7;
  border-radius:14px;padding:8px 14px;box-shadow:0 2px 0 var(--line);display:flex;flex-direction:column;gap:1px;max-width:100%}
.sB .slhit b{font-size:13px;font-weight:900;color:var(--teal-d)}
.sB .slhit span{font-family:var(--mono);font-size:10px;color:var(--dim)}
.sB .slhit:hover{background:#F2FAF8}
.sB .slhit:active{transform:translateY(2px);box-shadow:none}

/* 小さな窓のスライド（2026-09-16）。窓が狭いので 札は1列、めくる窓は窓いっぱい */
.fl{position:relative}
.fl .flmode{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:100px;padding:3px;margin-bottom:8px}
.fl .flmode button{flex:1;font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;padding:5px 10px;border:0;border-radius:100px;background:transparent;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.fl .flmode button.on{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-d)}
.fl .flmode button.on[data-m="sl"]{background:var(--teal-d);color:#fff;box-shadow:0 2px 0 #04424c}
.fl .flmode .ic{width:12px;height:12px}
.fl .flzip{font:inherit;font-family:var(--maru);font-weight:900;font-size:12px;width:100%;padding:7px 10px;border-radius:12px;border:1px solid var(--sun-d);background:var(--sun);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--sun-d);display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:8px}
.fl .flhours{display:flex;flex-direction:column;gap:8px}
.fl .flhours .hcard{box-shadow:0 2px 0 var(--line);border:1px solid var(--line)}
.fl .flhours .hcard .aim{height:auto;font-size:12px}
.fl .fviewer .box{padding:10px 12px 10px;width:100%}
.fl .fviewer .ttl{font-size:12.5px;gap:6px}
.fl .fviewer .ttl small{display:none}
.fl .fviewer .nav{width:32px;height:32px;font-size:16px}
.fl .fviewer .strip{display:none}
.fl .fviewer .foot{font-size:11px;gap:6px}
.fl .fviewer .foot .act{margin-left:0;width:100%}
.fl .fviewer .foot .act button{flex:1;font-size:11px;padding:5px 8px}

/* 小さな窓：札の上で めくる矢印（2026-09-16） */
.fl .flhours .hcard .pic{position:relative;cursor:default}
.fl .flhours .hcard .pic img{cursor:zoom-in}
.fl .flhours .hcard .pnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font:inherit;font-family:var(--maru);font-weight:900;font-size:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fffe;color:var(--ink);cursor:pointer;box-shadow:0 2px 6px #0002;display:flex;align-items:center;justify-content:center;padding:0}
.fl .flhours .hcard .pnav.l{left:6px}
.fl .flhours .hcard .pnav.r{right:6px}
.fl .flhours .hcard .pnav:active{transform:translateY(-50%) scale(.92)}
.fl .flhours .hcard .pic .pg{position:absolute;right:6px;bottom:6px;z-index:2;font-family:var(--mono);font-size:10px;color:#fff;background:#22302Bcc;border-radius:100px;padding:1px 8px}
.fl .flhours .hcard .pic img.none ~ .pnav,.fl .flhours .hcard .pic img.none ~ .pg{display:none}


/* トライアル：スライドは画面で見るだけ（2026-09-17 の訂正） */
.fviewer .trial,.fl .flsub.trial{font-family:var(--maru);font-weight:900;font-size:11.5px;color:var(--teal-d);background:var(--teal-soft,#E6F2EF);border-radius:100px;padding:4px 12px;margin-left:auto}
.fl .flsub.trial{display:block;margin:0 0 8px;text-align:center}

/* トライアルの断りの一文（2026-09-17、ユーザー「出す」）。版の印の右、画面の下に静かに置く */
.trialnote{position:fixed;left:0;right:0;bottom:0;z-index:1390;text-align:center;font-family:var(--maru);font-size:11px;font-weight:700;
  color:var(--dim);background:#FFFDF7ee;border-top:1px solid var(--line);padding:3px 90px 3px 70px;pointer-events:none}
.fl .flfoot .tn{font-weight:700;color:var(--dim)}