/* 機能ページの場面（01〜09）。机・方眼の板・立体の道具・2D の住人。約束ごとは .company/design/site-concept.md
   座標：.iso の中は板の平面（x 右奥・y 左手前）。z が高さ。.bb は住人などの 2D（いつもこちらを向く） */

.toc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px auto 0;max-width:820px;position:relative;padding-top:6px}
.toc a{font-family:var(--f-head),var(--f-body);font-stretch:112%;letter-spacing:.1em;font-size:12px;font-weight:600;padding:8px 13px;border:1px solid var(--ink);border-radius:2px;background:#fff;color:var(--ink);transition:transform .2s,background .2s}
.toc a b{font-weight:500;color:var(--muted);margin-right:6px}
.toc a:hover{transform:translateY(-2px);background:var(--marker)}
.toc[data-walker] .walker{top:-68px}

.ft-rows{display:flex;flex-direction:column;gap:34px;margin-top:10px}
.ft-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:36px;align-items:center;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gblue);border-radius:3px;padding:30px 32px;box-shadow:0 14px 30px -24px rgba(17,18,22,.5);scroll-margin-top:90px}
.ft-row.alt .ft-copy{order:2}
@media(max-width:860px){.ft-row{grid-template-columns:1fr;padding:22px 18px;gap:18px}.ft-row.alt .ft-copy{order:0}}
.ft-copy .num{font-family:var(--f-head);font-stretch:125%;letter-spacing:.24em;font-size:11px;color:var(--muted)}
.ft-copy h3{margin:6px 0 4px;font-family:var(--f-body);font-weight:900;font-size:clamp(30px,3.4vw,40px);letter-spacing:.02em;line-height:1.1}
html[lang="en"] .ft-copy h3{font-family:var(--f-head);font-style:italic;font-stretch:80%}
.ft-copy .kind{font-size:14px;color:var(--gblue);font-weight:700;margin:0 0 14px}
.ft-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.ft-copy li{font-size:14px;line-height:1.7;color:var(--ink-soft);padding-left:22px;position:relative}
.ft-copy li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:5px;border-left:2px solid var(--gblue);border-bottom:2px solid var(--gblue);transform:rotate(-45deg)}

/* ---- 舞台 ---- */
.scene{position:relative;height:320px;border-radius:3px;overflow:hidden;background:radial-gradient(120% 100% at 50% 30%,#f5f3ee,#e8e4dc);perspective:1300px}
@media(max-width:560px){.scene{height:270px}.scene .iso{transform:scale(.8) rotateX(58deg) rotateZ(-36deg)}}
.iso{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-36deg)}
.iso div,.iso span,.iso i{transform-style:preserve-3d}
.plate{position:absolute;left:-170px;top:-125px;width:340px;height:250px;background-color:#fff;
  background-image:linear-gradient(#cad8ea 1.5px,transparent 1.5px),linear-gradient(90deg,#cad8ea 1.5px,transparent 1.5px),linear-gradient(#e8eef6 1px,transparent 1px),linear-gradient(90deg,#e8eef6 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px;box-shadow:0 0 0 1px #ddd8ce}
.plate::before,.plate::after{content:"";position:absolute;background:#ebe8e1}
.plate::before{left:0;right:0;bottom:0;height:10px;transform-origin:50% 100%;transform:rotateX(90deg)}
.plate::after{top:0;bottom:0;right:0;width:10px;transform-origin:100% 50%;transform:rotateY(-90deg);background:#e2ded5}
.shadow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(17,18,22,.2),transparent)}
/* 2D：いつもこちらを向く */
.bb{position:absolute;transform-origin:50% 100%;transform:translateZ(var(--z,1px)) rotateZ(36deg) rotateX(-58deg)}
.dd{width:46px;height:60px;background:url(doodle.svg) no-repeat center/contain}
.tag2d{font-family:var(--f-head),var(--f-body);font-size:11px;font-weight:700;letter-spacing:.06em;background:#fff;border:1px solid var(--ink);border-radius:2px;padding:3px 7px;white-space:nowrap}
.bub{font-family:var(--f-hand);font-size:26px;color:var(--gblue);line-height:1}
/* ノート（開いた本） */
.nb{position:absolute;width:200px;height:130px}
.nb .cover{position:absolute;inset:-5px;background:var(--gblue);border-radius:3px;transform:translateZ(1px)}
.nb .pg{position:absolute;top:0;bottom:0;width:98px;background:#fdfcf8;transform:translateZ(5px);
  background-image:repeating-linear-gradient(#fdfcf8 0 13px,#d7e2f0 13px 14px)}
.nb .pg.l{left:0}.nb .pg.r{right:0}
.nb .ln{position:absolute;height:3px;background:#1d2b44;border-radius:2px;transform:translateZ(6px);opacity:.75}

/* ===== 01 書く：ページがめくれるたびに、型が替わる ===== */
.s1 .nb{left:-100px;top:-65px}
.s1 .tpl{position:absolute;right:0;top:0;bottom:0;width:98px;transform:translateZ(5.5px);background:#fdfcf8}
.s1 .t-ruled{background-image:repeating-linear-gradient(#fdfcf8 0 13px,#d7e2f0 13px 14px)}
.s1 .t-cornell{background-image:linear-gradient(90deg,transparent 30%,#e8a0a2 30%,#e8a0a2 31%,transparent 31%),linear-gradient(transparent 76%,#d7e2f0 76%,#d7e2f0 77%,transparent 77%),repeating-linear-gradient(#fdfcf8 0 13px,#e3eaf4 13px 14px)}
.s1 .t-genko{background-image:linear-gradient(90deg,#d7e2f0 1px,transparent 1px),linear-gradient(#d7e2f0 1px,transparent 1px);background-size:12px 12px;background-color:#fffdf8}
.s1 .t-check{background-image:repeating-linear-gradient(#fdfcf8 0 17px,#d7e2f0 17px 18px)}
.s1 .t-check::before{content:"";position:absolute;left:8px;top:5px;width:9px;height:88px;background:repeating-linear-gradient(#fdfcf8 0 2px,transparent 2px 8px,#fdfcf8 8px 18px),linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px 7.5px,var(--ink) 7.5px 9px);opacity:.7}
.s1 .leaf{position:absolute;right:0;top:0;bottom:0;width:98px;transform-origin:0 50%;animation:s1flip 10s cubic-bezier(.5,0,.3,1) infinite}
.s1 .leaf .fc{position:absolute;inset:0;backface-visibility:hidden}
.s1 .leaf .bk{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);background:#f4f2ec}
.s1 .leaf.a{transform:translateZ(9px);animation-delay:0s}
.s1 .leaf.b{transform:translateZ(8px);animation-delay:2s}
.s1 .leaf.c{transform:translateZ(7px);animation-delay:4s}
@keyframes s1flip{0%,4%{transform:translateZ(var(--lz,8px)) rotateY(0)}14%,86%{transform:translateZ(var(--lz,8px)) rotateY(-178deg)}94%,100%{transform:translateZ(var(--lz,8px)) rotateY(0)}}
.s1 .leaf.a{--lz:9px}.s1 .leaf.b{--lz:8px}.s1 .leaf.c{--lz:7px}
.s1 .pen{position:absolute;left:34px;top:20px;width:6px;height:120px;background:linear-gradient(#e8c9a0 0 14%,#1f2738 14%);transform-origin:50% 0;transform:translateZ(8px) rotateY(24deg) rotateX(-30deg);animation:s1pen 1.4s ease-in-out infinite}
@keyframes s1pen{0%,100%{margin-left:0}50%{margin-left:16px}}
.s1 .who{left:-150px;top:30px;animation:bob 1.8s ease-in-out infinite}

/* ===== 02 取り込む：写真・PDF・音声が落ちてきて、ページに吸い込まれる ===== */
.s2 .nb{left:-100px;top:-65px}
.s2 .drop{position:absolute;left:30px;top:-40px;width:64px;height:46px;background:#fff;border:1px solid #d6d1c6;border-radius:2px;opacity:0;animation:s2drop 9s cubic-bezier(.4,0,.6,1) infinite}
.s2 .drop.photo{background:linear-gradient(#bcd3ee 0 60%,#9fb88f 60%)}
.s2 .drop.pdf::after{content:"PDF";position:absolute;left:6px;top:6px;font:800 12px var(--f-head);color:var(--gblue)}
.s2 .drop.pdf{background:repeating-linear-gradient(#fff 0 22px,#dfe6f0 22px 24px,#fff 24px 28px)}
.s2 .drop.wav{background:repeating-linear-gradient(90deg,#fff 0 5px,var(--gblue) 5px 8px);-webkit-mask:linear-gradient(transparent 20%,#000 20% 80%,transparent 80%);mask:linear-gradient(#000 0 0)}
.s2 .drop.photo{animation-delay:0s}.s2 .drop.pdf{animation-delay:3s;left:10px;top:-20px}.s2 .drop.wav{animation-delay:6s;left:40px;top:-60px}
@keyframes s2drop{0%{opacity:0;transform:translateZ(230px) rotateZ(-20deg)}6%{opacity:1}20%{transform:translateZ(8px) rotateZ(4deg)}24%{transform:translateZ(14px) rotateZ(0)}27%{transform:translateZ(8px) scale(1)}33%{opacity:1;transform:translateZ(7px) scale(.2)}35%,100%{opacity:0;transform:translateZ(7px) scale(0)}}
.s2 .ln{left:112px;width:0;animation:s2line 9s ease infinite}
.s2 .ln.x1{top:20px;animation-delay:.2s}.s2 .ln.x2{top:34px;animation-delay:.5s}.s2 .ln.x3{top:62px;animation-delay:3.2s}.s2 .ln.x4{top:76px;animation-delay:3.5s}.s2 .ln.x5{top:104px;animation-delay:6.2s}
@keyframes s2line{0%,27%{width:0}36%,92%{width:70px}100%{width:0}}
.s2 .who{left:-150px;top:10px;animation:s2who 3s ease-in-out infinite}
@keyframes s2who{0%,55%,100%{transform:translateZ(1px) rotateZ(36deg) rotateX(-58deg)}65%{transform:translateZ(30px) rotateZ(36deg) rotateX(-58deg)}75%{transform:translateZ(1px) rotateZ(36deg) rotateX(-58deg) scale(1.15,.8)}}

/* ===== 03 まとめる：住人が 3 人、1 冊を手分けして書く ===== */
.s3 .nb{left:-100px;top:-65px}
.s3 .ln{left:110px;width:0;animation:s3line 7.5s ease infinite}
.s3 .ln.p1{left:10px;top:18px;animation-delay:0s}.s3 .ln.p2{left:10px;top:32px;animation-delay:.6s}.s3 .ln.p3{left:10px;top:46px;animation-delay:1.2s}
.s3 .ln.q1{top:18px;animation-delay:2s}.s3 .ln.q2{top:32px;animation-delay:2.6s}.s3 .ln.q3{top:74px;animation-delay:4.2s}.s3 .ln.q4{top:88px;animation-delay:4.8s}
@keyframes s3line{0%{width:0}10%,88%{width:72px}100%{width:0}}
.s3 .mk{position:absolute;left:8px;top:26px;height:12px;width:0;background:rgba(255,212,59,.85);transform:translateZ(5.6px);animation:s3mk 7.5s ease infinite 3.2s}
@keyframes s3mk{0%{width:0}8%,85%{width:66px}100%{width:0}}
.s3 .who{animation:bob 1.2s ease-in-out infinite}
.s3 .w1{left:-160px;top:-40px}.s3 .w2{left:-40px;top:80px;animation-delay:.4s}.s3 .w3{left:120px;top:-120px;animation-delay:.8s}
.s3 .lab{--z:74px}
.s3 .l1{left:-162px;top:-40px}.s3 .l2{left:-42px;top:80px}.s3 .l3{left:118px;top:-120px}

/* ===== 04 覚える：線を引いた言葉がカードになり、束に積もる ===== */
.s4 .nb{left:-130px;top:-65px}
.s4 .word{position:absolute;left:118px;top:40px;font-family:var(--f-hand);font-size:17px;color:#1d2b44;transform:translateZ(6px);white-space:nowrap;
  background:linear-gradient(transparent 50%,rgba(255,212,59,.9) 50%) no-repeat 0 0/0% 100%;animation:s4mark 6s ease infinite}
@keyframes s4mark{0%,8%{background-size:0% 100%;opacity:1}22%,34%{background-size:100% 100%;opacity:1}36%,100%{opacity:0}}
.s4 .card{position:absolute;width:70px;height:44px;left:110px;top:30px;animation:s4card 6s cubic-bezier(.45,0,.3,1) infinite}
.s4 .card .fc,.s4 .card .bk{position:absolute;inset:0;background:#fff;border:1px solid #d6d1c6;border-top:4px solid var(--gblue);border-radius:2px;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--f-hand);font-size:13px;color:#1d2b44}
.s4 .card .bk{transform:rotateX(180deg);color:var(--gblue);font-size:11px;background:#f7f9fd}
@keyframes s4card{0%,34%{opacity:0;transform:translateZ(6px)}36%{opacity:1;transform:translateZ(6px)}48%{transform:translateZ(90px) rotateX(0)}60%{transform:translateZ(90px) rotateX(180deg)}72%{transform:translate(120px,40px) translateZ(60px) rotateX(360deg)}82%,96%{opacity:1;transform:translate(120px,40px) translateZ(22px) rotateX(360deg)}100%{opacity:0;transform:translate(120px,40px) translateZ(22px) rotateX(360deg)}}
.s4 .stack{position:absolute;left:230px;top:70px;width:70px;height:44px}
.s4 .stack i{position:absolute;inset:0;background:#fff;border:1px solid #d6d1c6;border-top:4px solid var(--gblue);border-radius:2px}
.s4 .stack i:nth-child(1){transform:translateZ(3px) rotateZ(4deg)}.s4 .stack i:nth-child(2){transform:translateZ(8px) rotateZ(-3deg)}.s4 .stack i:nth-child(3){transform:translateZ(13px) rotateZ(2deg)}
.s4 .who{left:245px;top:74px;--z:14px;animation:s4who 6s ease infinite}
@keyframes s4who{0%,80%{transform:translateZ(14px) rotateZ(36deg) rotateX(-58deg)}84%{transform:translateZ(40px) rotateZ(36deg) rotateX(-58deg)}88%{transform:translateZ(22px) rotateZ(36deg) rotateX(-58deg) scale(1.15,.8)}92%,100%{transform:translateZ(22px) rotateZ(36deg) rotateX(-58deg)}}
.s4 .note{left:210px;top:40px;--z:96px;opacity:0;animation:s4note 6s ease infinite}
@keyframes s4note{0%,82%{opacity:0}86%,96%{opacity:1}100%{opacity:0}}

/* ===== 05 発表する：ペンの線が、立体の間取りに立ち上がる ===== */
.s5 .fplan{position:absolute;left:-110px;top:-80px;width:220px;height:160px;transform:translateZ(1px)}
.s5 .fplan svg{width:100%;height:100%;overflow:visible}
.s5 .fplan path{fill:none;stroke:var(--gblue);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:s5draw 8s ease infinite}
@keyframes s5draw{0%{stroke-dashoffset:900}22%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:900}}
.s5 .wall{position:absolute;height:44px;background:#fff;border:1px solid #cfd8e6;
  background-image:linear-gradient(#e8eef6 1px,transparent 1px),linear-gradient(90deg,#e8eef6 1px,transparent 1px);background-size:11px 11px;
  transform-origin:50% 100%;animation:s5rise 8s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes s5rise{0%,24%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(0);opacity:0}25%{opacity:1}36%,84%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(1);opacity:1}92%,100%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(0);opacity:1}}
.s5 .who{left:0;top:0;animation:s5who 8s ease infinite}
@keyframes s5who{0%,38%{opacity:0;transform:translateZ(160px) rotateZ(36deg) rotateX(-58deg)}40%{opacity:1}48%{transform:translateZ(1px) rotateZ(36deg) rotateX(-58deg) scale(1.2,.75)}54%,84%{opacity:1;transform:translateZ(1px) rotateZ(36deg) rotateX(-58deg)}90%,100%{opacity:0;transform:translateZ(1px) rotateZ(36deg) rotateX(-58deg)}}
.s5 .slide{left:120px;top:-150px;--z:1px}

/* ===== 06 理系・法律：周期表のマスが波のように立ち上がり、住人が上を渡る ===== */
.s6 .tiles{position:absolute;left:-150px;top:-60px;display:grid;grid-template-columns:repeat(7,40px);gap:3px}
.s6 .tiles span{height:40px;background:#fff;border:1px solid #cfd8e6;border-top:3px solid var(--gblue);font:800 15px var(--f-head);color:var(--ink);display:flex;align-items:center;justify-content:center;
  animation:s6wave 4s ease-in-out infinite;animation-delay:calc(var(--c) * .22s)}
@keyframes s6wave{0%,60%,100%{transform:translateZ(1px)}20%{transform:translateZ(26px)}}
.s6 .who{left:-150px;top:-10px;animation:s6walk 4s ease-in-out infinite}
@keyframes s6walk{0%{transform:translate(-10px,0) translateZ(4px) rotateZ(36deg) rotateX(-58deg)}100%{transform:translate(290px,0) translateZ(4px) rotateZ(36deg) rotateX(-58deg)}}
.s6 .law{left:60px;top:90px;--z:1px}.s6 .eq{left:-120px;top:100px;--z:1px}
.s6 .law,.s6 .eq{font-size:15px}

/* ===== 07 つながる：机から机へ、同じノートが開く ===== */
.s7 .plate{left:-190px;top:-80px;width:170px;height:160px}
.s7 .plate.b{left:30px;top:-80px}
.s7 .nb{width:110px;height:72px}
.s7 .nb .pg{width:53px}
.s7 .nb.a{left:-160px;top:-40px}.s7 .nb.b{left:60px;top:-40px}
.s7 .nb.b .ln{width:0;animation:s7fill 5s ease infinite}
.s7 .nb.b .ln.x1{left:62px;top:14px}.s7 .nb.b .ln.x2{left:62px;top:28px;animation-delay:.2s}.s7 .nb.b .ln.x3{left:62px;top:42px;animation-delay:.4s}
.s7 .nb.a .ln{left:62px;width:38px}
@keyframes s7fill{0%,45%{width:0}58%,90%{width:38px}100%{width:0}}
.s7 .wire{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.s7 .wire path{fill:none;stroke:var(--gblue);stroke-width:2;stroke-dasharray:6 7;animation:s7dash 1s linear infinite}
.s7 .wire circle{fill:var(--marker);stroke:var(--ink);stroke-width:1.5;offset-path:path("M 188 196 C 214 96, 318 62, 356 132");animation:s7run 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes s7dash{to{stroke-dashoffset:-13}}
@keyframes s7run{0%,10%{offset-distance:0%;opacity:0}14%{opacity:1}48%{offset-distance:100%;opacity:1}52%,100%{offset-distance:100%;opacity:0}}
.s7 .who{left:-190px;top:40px;animation:bob 1.6s ease-in-out infinite}
.s7 .who2{left:30px;top:40px;animation:s2who 5s ease-in-out infinite}
.s7 .chips{left:-160px;top:-90px;--z:1px;display:flex;gap:4px}

/* ===== 08 みんなで：机を囲み、1 冊を回し読み ===== */
.s8 .nb{left:-70px;top:-45px;width:140px;height:90px;animation:s8turn 8s cubic-bezier(.6,0,.3,1) infinite}
.s8 .nb .pg{width:68px}
@keyframes s8turn{0%,18%{transform:rotateZ(0)}25%,43%{transform:rotateZ(90deg)}50%,68%{transform:rotateZ(180deg)}75%,93%{transform:rotateZ(270deg)}100%{transform:rotateZ(360deg)}}
.s8 .who{animation:bob 1.6s ease-in-out infinite}
.s8 .w1{left:-150px;top:-20px}.s8 .w2{left:-20px;top:90px;animation-delay:.3s}.s8 .w3{left:100px;top:-10px;animation-delay:.6s}.s8 .w4{left:-10px;top:-140px;animation-delay:.9s}
.s8 .bub{--z:70px;opacity:0;animation:s8bub 8s ease infinite}
.s8 .b1{left:-140px;top:-20px;animation-delay:0s}.s8 .b2{left:-8px;top:90px;animation-delay:2s}.s8 .b3{left:112px;top:-10px;animation-delay:4s}.s8 .b4{left:2px;top:-140px;animation-delay:6s}
@keyframes s8bub{0%{opacity:0;margin-top:0}4%,20%{opacity:1;margin-top:-6px}25%,100%{opacity:0}}

/* ===== 09 集中する：方眼の壁が立ち上がり、通知を跳ね返す ===== */
.s9 .nb{left:-45px;top:-30px;width:90px;height:60px}
.s9 .nb .pg{width:43px}
.s9 .who{left:-80px;top:20px;animation:bob 2s ease-in-out infinite}
.s9 .fw{position:absolute;height:54px;background:#fff;border:1px solid #cfd8e6;
  background-image:linear-gradient(#e8eef6 1px,transparent 1px),linear-gradient(90deg,#e8eef6 1px,transparent 1px);background-size:9px 9px;
  transform-origin:50% 100%;animation:s9rise 7s cubic-bezier(.3,1.5,.5,1) infinite;opacity:.94}
@keyframes s9rise{0%,6%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(0);opacity:0}7%{opacity:.94}16%,84%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(1);opacity:.94}92%,100%{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg) scaleY(0);opacity:.94}}
.s9 .ntf{--z:40px;opacity:0;animation:s9ntf 7s ease-in infinite}
.s9 .ntf.n1{left:-240px;top:-40px;--dx:95px;--dy:18px;animation-delay:1.4s}
.s9 .ntf.n2{left:170px;top:-140px;--dx:-80px;--dy:60px;animation-delay:2.6s}
.s9 .ntf.n3{left:40px;top:150px;--dx:-20px;--dy:-80px;animation-delay:3.8s}
@keyframes s9ntf{0%{opacity:0;margin:0}6%{opacity:1}16%{margin-left:var(--dx);margin-top:var(--dy);opacity:1}24%{margin-left:calc(var(--dx) * .2);margin-top:calc(var(--dy) * .2);opacity:.9}32%,100%{margin-left:calc(var(--dx) * -.6);margin-top:calc(var(--dy) * -.6);opacity:0}}

@keyframes bob{0%,100%{transform:translateZ(var(--z,1px)) rotateZ(36deg) rotateX(-58deg)}50%{transform:translateZ(calc(var(--z,1px) + 7px)) rotateZ(36deg) rotateX(-58deg)}}

/* そのほか */
.misc{margin-top:40px;padding:28px 30px;border:1px solid var(--line);border-radius:3px;position:relative}
.misc h3{margin:0 0 14px;font-family:var(--f-body);font-weight:900;font-size:22px}
html[lang="en"] .misc h3{font-family:var(--f-head);font-style:italic;font-stretch:84%}
.misc .chips{display:flex;flex-wrap:wrap;gap:10px}
.misc .chips span{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gblue);border-radius:2px;padding:9px 14px;font-size:13.5px;color:var(--ink-soft);box-shadow:0 10px 18px -16px rgba(17,18,22,.5)}

@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}.s5 .wall{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg)}.s9 .fw{transform:rotateZ(var(--rz,0deg)) rotateX(-90deg)}}
/* 目次の上を住人が歩く余白（説明文に重ならないように） */
.toc{margin-top:78px}
.scene.gl canvas{display:block;width:100%;height:100%}

/* ===================== ひと続きの机の世界（2026-09-25） =====================
   参考：白い模型の世界をカメラが渡る作り（光で章を分ける・すりガラスの説明・下に章のタブ・「＋」の点） */
.world{position:relative;padding-bottom:30vh}
.world-stage{position:sticky;top:64px;height:calc(100vh - 64px);overflow:hidden;background:radial-gradient(120% 90% at 55% 40%,color-mix(in srgb,var(--bg,#f1efea) 88%,#fff),var(--bg,#f1efea));transition:background .4s linear}
.world-canvas{position:absolute;inset:0}
.world-canvas canvas{display:block;width:100%;height:100%}
.w-chapters{margin-top:calc(-100vh + 64px);position:relative;pointer-events:none}
.w-chap{height:100vh;position:relative}
.w-chap > *{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ピント：見ている場所（移動中は車）のまわりだけくっきり、それ以外は強くぼかす（ミニチュアを撮った見え方）。
   輪の中心と大きさは毎コマ JS が --fx --fy --rx --ry に入れる */
.dof{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%);
  -webkit-mask:radial-gradient(ellipse var(--rx,30%) var(--ry,38%) at var(--fx,60%) var(--fy,48%),transparent 0,transparent 55%,rgba(0,0,0,.75) 82%,#000 100%);
  mask:radial-gradient(ellipse var(--rx,30%) var(--ry,38%) at var(--fx,60%) var(--fy,48%),transparent 0,transparent 55%,rgba(0,0,0,.75) 82%,#000 100%)}
/* 最初の見出し（スクロールで消える） */
.w-intro{position:absolute;left:max(24px,calc(50% - 600px));top:34px;max-width:520px;transition:opacity .2s linear;pointer-events:none}
/* 見出しの下地：町の建物の上でも読めるように、白をふわっと敷く */
.w-intro::before{content:"";position:absolute;inset:-50px -90px -40px -70px;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.55) 55%,rgba(255,255,255,0));filter:blur(8px)}
.w-intro h1{margin:0;font-family:var(--f-body);font-weight:900;font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:.02em}
html[lang="en"] .w-intro h1{font-family:var(--f-head);font-style:italic;font-stretch:78%}
.w-intro p{margin:12px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.8}
.w-intro .scroll-hint{display:inline-block;margin-top:16px;font:500 11px var(--f-head);font-stretch:125%;letter-spacing:.3em;color:var(--muted);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(5px)}}
/* すりガラスの説明カード（左下に固定・中身だけ替わる） */
.glass{position:absolute;left:max(24px,calc(50% - 600px));bottom:84px;width:min(400px,calc(100% - 48px));padding:20px 22px 18px;border-radius:6px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 40px -24px rgba(17,18,22,.45);opacity:0;transform:translateY(10px)}
.glass.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.glass .num{font:500 11px var(--f-head);font-stretch:125%;letter-spacing:.24em;color:var(--muted)}
.glass h3{margin:6px 0 2px;font-family:var(--f-body);font-weight:900;font-size:clamp(28px,3vw,36px);letter-spacing:.02em;line-height:1.1}
html[lang="en"] .glass h3{font-family:var(--f-head);font-style:italic;font-stretch:80%}
.glass .kind{margin:0 0 10px;color:var(--gblue);font-weight:700;font-size:13.5px}
.glass ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.glass li{font-size:13px;line-height:1.65;color:var(--ink-soft);padding-left:18px;position:relative}
.glass li::before{content:"";position:absolute;left:1px;top:.6em;width:9px;height:4.5px;border-left:2px solid var(--gblue);border-bottom:2px solid var(--gblue);transform:rotate(-45deg)}
/* 章のタブ（下） */
.w-tabs{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:22px;display:flex;gap:3px;padding:5px;border-radius:6px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
.w-tabs button{flex:0 0 auto;border:0;background:transparent;border-radius:3px;padding:7px 9px;font:600 12px var(--f-head),var(--f-body);letter-spacing:.06em;color:var(--ink-soft);cursor:pointer;display:flex;gap:6px;align-items:baseline;transition:background .25s,color .25s}
.w-tabs button b{font-weight:500;color:var(--muted);font-size:10.5px}
.w-tabs button:hover{background:rgba(255,255,255,.8)}
.w-tabs button.on{background:var(--gblue);color:#fff}
.w-tabs button.on b{color:rgba(255,255,255,.75)}
/* 「＋」の点 */
.hots{position:absolute;inset:0;pointer-events:none}
.hot{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:0;padding:0;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.45),0 6px 14px -4px rgba(17,18,22,.4);cursor:pointer;transition:opacity .3s}
.hot i{font:700 18px/30px var(--f-head);font-style:normal;color:var(--gblue);display:block;transition:transform .25s}
.hot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.7);opacity:0}}
.hot span{position:absolute;left:38px;top:-4px;width:max-content;max-width:260px;padding:8px 11px;border-radius:4px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font:500 12.5px/1.6 var(--f-body);color:var(--ink);text-align:left;box-shadow:0 10px 20px -12px rgba(17,18,22,.5);opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .2s,transform .2s;white-space:normal}
.hot.open span,.hot:hover span{opacity:1;transform:none}
.hot.open i{transform:rotate(45deg)}
/* 町の地図（右下）：蛇行する道と現在地 */
.w-map{position:absolute;right:max(24px,calc(50% - 600px));bottom:84px;width:132px;padding:8px 6px 4px;border-radius:6px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);pointer-events:none}
.w-map svg{display:block;width:100%;height:auto;overflow:visible}
.w-map .rd{fill:none;stroke:#cfd6e0;stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
.w-map .ct{fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:3 3;stroke-linejoin:round}
.w-map .pt{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.w-map .me{fill:var(--gblue);stroke:#fff;stroke-width:2;filter:drop-shadow(0 2px 3px rgba(17,18,22,.35))}
/* 夜の章：文字とカードを夜向けに */
.world-stage.night .w-map{background:rgba(30,34,48,.55);border-color:rgba(255,255,255,.15)}
.world-stage.night .w-map .rd{stroke:#3a4256}.world-stage.night .w-map .pt{stroke:#d7dbe6;fill:#1e2230}
.world-stage.night .w-tabs{background:rgba(30,34,48,.55);border-color:rgba(255,255,255,.15)}
.world-stage.night .w-tabs button{color:#d7dbe6}
.world-stage.night .glass{background:rgba(30,34,48,.55);border-color:rgba(255,255,255,.15)}
.world-stage.night .glass h3{color:#fff}.world-stage.night .glass li{color:#e3e6ee}.world-stage.night .glass .kind{color:#a9c9f2}.world-stage.night .glass .num{color:#aab1c2}
.world-stage.night .w-tabs button b{color:#aab1c2}.world-stage.night .w-intro{color:#fff}
.glass .more,.w-intro .swipe-hint{display:none}
/* スマホ：町を上に、たためる説明カードを下に。箇条書きは「くわしく」で開く。「＋」の点・地図・ぼかしは出さない（ヘッダーが 56px になる幅と合わせる） */
@media(max-width:720px){
  .world-stage{top:56px;height:calc(100vh - 56px);height:calc(100svh - 56px)}
  .w-chapters{margin-top:calc(-100vh + 56px);margin-top:calc(-100svh + 56px)}
  .w-chap{height:100vh;height:100svh;scroll-margin-top:56px}
  .hots,.w-map{display:none}
  .dof{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .w-intro{left:16px;right:16px;top:16px}
  .w-intro h1{font-size:44px}
  .w-intro p{font-size:13.5px;line-height:1.7;margin-top:8px}
  .w-intro .scroll-hint{margin-top:10px}
  .w-intro .swipe-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
  .w-intro::before{inset:-30px -40px -30px -30px}
  .glass{left:10px;right:10px;width:auto;bottom:calc(64px + env(safe-area-inset-bottom));padding:12px 12px 12px 16px;border-radius:10px;max-height:calc(62% - 60px);overflow:auto;overscroll-behavior:contain;
    display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
  .glass > *{grid-column:1}
  .glass .num{font-size:10px;letter-spacing:.2em}
  .glass h3{font-size:24px;margin:2px 0 1px}
  .glass .kind{margin:0;font-size:12.5px}
  .glass ul{display:none;grid-column:1 / -1;margin-top:10px}
  .glass.open ul{display:flex}
  .glass li{font-size:13px}
  .glass .more{display:inline-flex;align-items:center;gap:6px;grid-column:2;grid-row:1 / span 3;align-self:center;border:1px solid rgba(17,18,22,.15);background:rgba(255,255,255,.7);border-radius:999px;padding:7px 12px;font:600 11.5px var(--f-body);color:var(--ink);cursor:pointer;white-space:nowrap}
  .glass .more::after{content:"+";font:700 14px/1 var(--f-head);color:var(--gblue);transition:transform .2s}
  .glass.open .more::after{transform:rotate(45deg)}
  .world-stage.night .glass .more{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
  .w-tabs{bottom:calc(12px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;padding:4px;justify-content:space-between;border-radius:10px}
  .w-tabs button{padding:8px 0;min-width:34px;justify-content:center;border-radius:7px}
  .w-tabs button b{font-size:11.5px;font-weight:600}
  .w-tabs button span{display:none}
  .misc{padding:22px 18px}
}
@media(max-width:360px){.w-tabs button{min-width:30px}.glass h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.hot::after,.w-intro .scroll-hint{animation:none}}
.misc{margin:56px 0 0}

/* スクロールを止めたら、近い章にそっと吸い付く */
html:has(.world){scroll-snap-type:y proximity}
.w-chap{scroll-snap-align:start;scroll-margin-top:64px}