:root{--bg:#f5f7fb;--card:#fff;--ink:#1f2933;--muted:#7b8794;--line:#d9e2ec;--accent:#2563eb;--ray:#e11d48;--incident:#d97706;--refract:#2563eb;--reflect:#9333ea;--virtual:#0d9488;--choice:#475569;--object:#1f2933;--image:#c2410c;--focus:#16a34a;--screen:#64748b;--stick:#8d6e63;--water-line:#3b82f6;--r1:#e11d48;--r2:#16a34a;--r3:#2563eb;--ok:#15803d;--ng:#dc2626;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;line-height:1.7;overflow-x:hidden}button,select,input{font:inherit}header.site{background:var(--card);border-bottom:1px solid var(--line);z-index:5;padding:10px 16px 0;position:sticky;top:0}header.site h1{align-items:baseline;gap:8px;margin:0 0 6px;font-size:1.25rem;display:flex}header.site h1 small{color:var(--muted);font-size:.85rem;font-weight:400}.logo{color:var(--ray)}.tabs{scrollbar-width:none;gap:2px;display:flex;overflow-x:auto}.tabs a{color:var(--muted);white-space:nowrap;border-bottom:3px solid #0000;padding:8px 12px;font-weight:600;text-decoration:none}.tabs a[aria-selected=true]{color:var(--accent);border-color:var(--accent)}.tabs .num{background:var(--line);width:1.4em;height:1.4em;color:var(--ink);border-radius:50%;place-items:center;margin-right:4px;font-size:.75rem;display:inline-grid}.tabs a[aria-selected=true] .num{background:var(--accent);color:#fff}main{max-width:1240px;margin:0 auto;padding:16px}footer.site{max-width:1240px;color:var(--muted);margin:0 auto;padding:8px 16px 32px;font-size:.8rem}.lab{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:start;gap:16px;display:grid}.lab>*{min-width:0}.stage{background:var(--card);border:1px solid var(--line);touch-action:none;border-radius:12px;position:sticky;top:96px;overflow:hidden}.stage-col{position:sticky;top:96px}.stage-col .stage{position:static}.cards:empty{display:none}.cards{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:12px}.card-row{flex-wrap:wrap;gap:10px;display:flex}.card-row figure{text-align:center;flex:120px;max-width:180px;margin:0;font-size:.85rem;font-weight:600}.card-row .candle-card{border-radius:8px}.choice .choice-svg{flex:none;width:90px}.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}.panel h2{margin:0 0 8px;font-size:1.15rem}.panel h3{margin:12px 0 4px;font-size:1rem}.hint{color:var(--muted);margin:0 0 10px;font-size:.88rem}.diagram{-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.small-diagram{max-width:440px;margin:0 auto}.field-row{flex-wrap:wrap;align-items:end;gap:8px;margin-bottom:10px;display:flex}.field-row label{color:var(--muted);font-size:.85rem;display:grid}select{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;min-width:92px;padding:6px 8px}.slider{grid-template-columns:1fr auto;margin:10px 0;font-weight:600;display:grid}.slider input{width:100%;accent-color:var(--accent);grid-column:1/-1;height:28px}.slider output{color:var(--accent);font-variant-numeric:tabular-nums}.check{cursor:pointer;align-items:center;gap:6px;margin:6px 0;display:flex}.check input{width:18px;height:18px}button{cursor:pointer;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;padding:6px 12px}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.link{color:var(--accent);background:0 0;border:none;padding:4px 0;text-decoration:underline}.presets{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.presets button{font-size:.85rem}.seg{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.seg button.active{background:var(--accent);border-color:var(--accent);color:#fff}.explain{border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}.big{font-size:1.02rem}.tip{background:#fff8e1;border-left:4px solid #f59e0b;border-radius:4px;padding:6px 10px;font-size:.9rem}.note{background:var(--bg);border-radius:8px;margin-top:10px;padding:6px 12px}.note summary{cursor:pointer;font-weight:600}.note ul,.note ol,.steps ol{margin:6px 0;padding-left:1.3em}.dot{border-radius:50%;width:10px;height:10px;margin-right:4px;display:inline-block}.dot.r1{background:var(--r1)}.dot.r2{background:var(--r2)}.dot.r3{background:var(--r3)}table.mini{border-collapse:collapse;width:100%;margin-top:8px;font-size:.88rem}table.mini th,table.mini td{border:1px solid var(--line);text-align:left;padding:3px 8px}table.mini th{background:var(--bg)}table.mini tr.now{background:#dbeafe;font-weight:700}.m-air{fill:#fbfdff}.m-water{fill:#cfe6ff}.m-glass{fill:#d5f0e9}.cup{fill:#e8d8c3;stroke:#8d6e63;stroke-width:2px}.lens{fill:#cdeafe;stroke:#2b6cb0;stroke-width:2px}.medium-label{fill:var(--muted);font-size:18px;font-weight:700}.label{font-size:15px;font-weight:700}.small{font-size:13px}.muted{fill:var(--muted)}text .ng,tspan.ng{fill:var(--ng);font-weight:700}.grab{cursor:grab}.problem-wrap{max-width:860px;margin:0 auto}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.toolbar .seg{flex:100%;margin:0}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px}.tag{background:var(--bg);color:var(--muted);border-radius:99px;margin:0;padding:0 10px;font-size:.8rem;display:inline-block}.question{font-size:1.05rem}.problem-figure{max-width:640px;margin:8px auto}.answers{gap:10px;margin:12px 0;display:grid}.answers label{gap:4px;display:grid}.answers input{border:1px solid var(--line);border-radius:8px;width:7em;padding:6px 8px;font-size:1.1rem}.answers button{justify-self:start}.choices{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:12px 0;display:grid}.choices.compact{grid-template-columns:repeat(4,1fr)}.choices.compact .choice{justify-content:center}.choice{text-align:left;align-items:center;gap:8px;min-height:48px;padding:10px 12px;display:flex}.choice b{font-size:1.15rem}.choice.correct{border-color:var(--ok);background:#dcfce7}.choice.wrong{border-color:var(--ng);background:#fee2e2}.ok{color:var(--ok);font-weight:700}.ng{color:var(--ng);font-weight:700}.solution-box{border-top:2px solid var(--line);margin-top:12px}.solution{padding-left:1.3em}.solution li{margin-bottom:8px}.print-area{display:none}@media (width<=860px){.lab{grid-template-columns:minmax(0,1fr)}.stage,.stage-col{position:static}main{padding:12px}header.site h1{font-size:1.05rem}.diagram .small{font-size:18px}.diagram .label{font-size:20px}.diagram .medium-label{font-size:24px}}@media print{body{background:#fff}body.printing header.site,body.printing footer.site,body.printing .view>:not(.print-area){display:none!important}body.printing .print-area{display:block}.no-print{display:none!important}.sheet{page-break-after:always}.sheet:last-child{page-break-after:auto}.sheet h2{margin:0 0 4px}.ws-name{text-align:right;margin:0 0 12px}.ws-q{break-inside:avoid;border-bottom:1px solid #ccc;padding:6px 0 10px}.ws-q .diagram{max-width:380px;margin:4px auto}.ws-q .diagram.lens-diagram{max-width:560px}.ws-choices{padding-left:1em;list-style:none}.qnum{margin-right:6px;font-weight:700}.ws-line{margin:4px 0}.answer-list li{margin:4px 0;list-style:none}.m-air{fill:#fff}}.q-figs{flex-wrap:wrap;align-items:flex-start;gap:12px;display:flex}.q-main{flex:3 320px;min-width:0}.q-side{flex-direction:column;flex:110px;gap:8px;max-width:150px;display:flex}.q-figs figure{text-align:center;margin:0;font-size:.85rem;font-weight:600}@media print{.ws-cards{flex-wrap:wrap;gap:12px;display:flex}.ws-cards li{align-items:center;gap:4px;display:flex}.ws-cards .candle-card{width:90px}.q-side{max-width:110px}}