/* パソコン操作のお手本アニメーション */
.demo-btn{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:6px 14px;border-radius:999px;border:1.5px solid #4fc285;background:rgba(79,194,133,.12);color:#2f9a62;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.bt-narr .demo-btn{color:#a8f0c6;background:rgba(79,194,133,.16)}
.demo-btn.on{background:#4fc285;color:#fff}
.demo-box{margin-top:10px}
.dm{border-radius:14px;background:#f4f6fa;border:1px solid #d6dde8;padding:10px;color:#1d2b3a;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
.dm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dm-tabs{display:flex;background:#e2e8f1;border-radius:999px;padding:3px}
.dm-tabs button{border:0;background:none;padding:4px 14px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:800;color:#4a5b73;cursor:pointer}
.dm-tabs button.on{background:#fff;color:#1d3a6e;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.dm-again{border:0;background:none;font-family:inherit;font-size:13px;font-weight:700;color:#2357b5;cursor:pointer}
.dm-stage{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#7aa7d8,#b7a3d6 60%,#e7b6c4);font-size:clamp(9px,2.2vw,12.5px)}
.dm-scene{position:absolute;inset:0}
.dm-cap{display:flex;gap:8px;align-items:baseline;margin:10px 2px 2px;font-size:15px;font-weight:700;line-height:1.6;min-height:3.2em}
.dm-cap b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2357b5;color:#fff;font-size:12px}
/* マウスとクリック */
.dm-cur{position:absolute;width:22px;height:22px;z-index:20;transition:left .8s cubic-bezier(.4,.1,.2,1),top .8s cubic-bezier(.4,.1,.2,1);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));pointer-events:none}
.dm-click{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #ffd84a;opacity:0;z-index:19;pointer-events:none}
.dm-click.go{animation:dmClick .45s ease-out}
.dm-click.right{border-color:#ff7a7a}
@keyframes dmClick{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.dm-key{position:absolute;right:6%;bottom:8%;padding:6px 14px;border-radius:8px;background:#fff;border:2px solid #333;box-shadow:0 3px 0 #333;font-weight:900;opacity:0;z-index:21}
.dm-key.go{animation:dmKey 1.2s ease-out}
@keyframes dmKey{0%{opacity:0;transform:translateY(6px)}15%,70%{opacity:1;transform:none}100%{opacity:0}}
/* ウィンドウ */
.dm-mb{position:absolute;left:0;right:0;top:0;height:7%;display:flex;align-items:center;gap:1.2em;padding:0 1em;background:rgba(255,255,255,.75);backdrop-filter:blur(4px);font-weight:600}
.dm-mb .apple{width:1em;height:1.1em;background:#111;border-radius:45% 45% 50% 50%;display:inline-block}
.dm-mb span{padding:.1em .4em;border-radius:4px}
.dm-win{position:absolute;left:5%;top:12%;width:90%;height:80%;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column}
.dm-win.win{border-radius:6px}
.dm-tb{display:flex;align-items:center;gap:.5em;height:2.4em;padding:0 .8em;background:#ececec;border-bottom:1px solid #ddd;flex:none}
.dm-tb.mac i{width:.9em;height:.9em;border-radius:50%;background:#ff5f57}.dm-tb.mac i:nth-child(2){background:#febc2e}.dm-tb.mac i:nth-child(3){background:#28c840}
.dm-tb.mac b{margin:0 auto;padding-right:3em;font-weight:700}
.dm-tb.win{background:#f3f3f3}.dm-tb.win b{margin-right:auto;font-weight:600}.dm-tb.win span{width:2.2em;text-align:center;color:#555}
.dm-body{flex:1;display:flex;min-height:0}
.dm-side{list-style:none;margin:0;padding:.6em .4em;width:30%;background:#f1f3f6;border-right:1px solid #e3e6ea}
.dm-win.win .dm-side{background:#fafafa}
.dm-side li{padding:.35em .7em;border-radius:5px;margin-bottom:.15em;white-space:nowrap}
.dm-side li::before{content:none!important}
.dm-side li.on{background:#d4e3fb;color:#123d8a;font-weight:700}
.dm-main{flex:1;position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.6em;padding:1em}
.dm-empty{position:absolute;right:12%;bottom:18%;width:1px;height:1px}
.dm-file{display:flex;flex-direction:column;align-items:center;gap:.3em;width:6.4em;padding:.4em;border-radius:6px;text-align:center;transition:background .2s}
.dm-file i{display:block;width:2.8em;height:2.8em}
.dm-file i svg{width:100%;height:100%}
.dm-file span{font-size:.9em;line-height:1.3;word-break:break-all}
.dm-file.edit span{background:#fff;outline:2px solid #2f7cf6;border-radius:3px;padding:0 .2em;min-width:4em}
.dm-file.big{width:8em}.dm-file.big i{width:4em;height:4em}
.dm-mark{background:rgba(255,216,74,.45)!important;box-shadow:0 0 0 2px #f2c230 inset;border-radius:6px}
.dm-side li.dm-mark{background:#ffe680!important}
.dm-menu{position:absolute;z-index:15;min-width:10em;background:#fff;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding:.3em;font-size:1em}
.dm-menu div{padding:.35em .8em;border-radius:4px;white-space:nowrap}
.dm-menu div.hov{background:#e6eefc}
.dm-pop{position:absolute;inset:0;display:grid;place-items:center;z-index:12}
.dm-about{background:#fff;border-radius:12px;padding:1.4em 2.4em;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:.3em}
.dm-about .mac-logo{width:3em;height:3.3em;margin:0 auto .3em;background:#555;border-radius:45% 45% 50% 50%}
.dm-about b{font-size:1.3em}
.dm-desk{position:absolute;inset:0}
.dm-task{position:absolute;left:0;right:0;bottom:0;height:9%;display:flex;justify-content:center;align-items:center;gap:1.2em;background:rgba(240,240,245,.85)}
.dm-task .start{font-size:1.5em;color:#0a64d8;font-weight:900}
.dm-pop:has(.dm-startm){place-items:end center;padding-bottom:10%}
.dm-startm{display:flex;gap:1em;padding:1em 1.4em;background:rgba(250,250,252,.97);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.dm-startm .ap{display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:1.4em;padding:.3em .5em;border-radius:6px}
.dm-startm .ap span{font-size:.55em}
.dm-settings{width:86%;height:76%;display:flex;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}
.dm-settings ul{list-style:none;margin:0;padding:.8em .4em;width:34%;background:#f5f6f8}
.dm-settings li{padding:.4em .7em;border-radius:5px}.dm-settings li::before{content:none!important}
.dm-settings li.on{background:#dfe8f7;font-weight:700}
.dm-settings .pane{flex:1;padding:.8em;display:flex;flex-direction:column;gap:.4em}
.dm-settings .pane>div{padding:.5em .8em;background:#f5f6f8;border-radius:6px}
.dm-settings .ver{background:#fff!important;display:flex;flex-direction:column;gap:.3em}.dm-settings .ver b{font-size:1.4em}
.dm-dmg{flex:1;display:flex;align-items:center;justify-content:space-around;padding:1em}
.dm-dmg .arrow{font-size:2.4em;color:#9aa}
.dm-file.dragging{opacity:.35}
.dm-ghost{position:absolute;z-index:18;transform:translate(-50%,-50%);transition:left 1s ease,top 1s ease;opacity:.85;pointer-events:none}
.dm-toast{position:absolute;bottom:10%;background:#1d2b3a;color:#fff;padding:.6em 1.2em;border-radius:8px}
.dm-setup{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em}
.dm-setup .bar{width:70%;height:.7em;background:#e4e8ee;border-radius:99px;overflow:hidden}
.dm-setup .bar i{display:block;height:100%;width:0;background:#2f7cf6;transition:width 1.4s ease}
.dm-setup.run .bar i{width:100%}
.dm-setup button{border:0;background:#2f7cf6;color:#fff;border-radius:6px;padding:.5em 1.6em;font-family:inherit;font-size:1em;font-weight:700}
.dm-win.txt{left:30%;top:22%;width:58%;height:62%}
.dm-text{padding:1em 1.2em;line-height:1.9;font-size:1.05em}
@media (prefers-reduced-motion:reduce){.dm-cur{transition:none}}
.dm-mb{gap:.6em;white-space:nowrap;overflow:hidden}.dm-mb span{white-space:nowrap}
/* ===== 第2章以降の場面 ===== */
/* Chrome */
.dm-win.cr{left:3%;top:5%;width:94%;height:90%;border-radius:8px}
.cr-tabs{display:flex;align-items:flex-end;gap:2px;padding:.4em .5em 0;background:#dfe3ea;flex:none}
.cr-tab{display:flex;align-items:center;gap:.6em;max-width:40%;padding:.4em .8em;border-radius:8px 8px 0 0;background:#cdd3dc;font-size:.95em;white-space:nowrap;overflow:hidden}
.cr-tab span{overflow:hidden;text-overflow:ellipsis}
.cr-tab i{font-style:normal;color:#666;font-size:.85em}
.cr-tab.on{background:#fff}
.cr-plus{padding:.3em .6em;color:#555}
.cr-bar{display:flex;align-items:center;gap:.6em;padding:.4em .6em;background:#fff;border-bottom:1px solid #e3e6ea;flex:none}
.cr-nav{color:#888;font-size:.9em;white-space:nowrap}
.cr-addr{flex:1;display:flex;align-items:center;gap:.4em;min-width:0;padding:.35em .8em;border-radius:99px;background:#eef1f5;white-space:nowrap;overflow:hidden}
.cr-addr span{overflow:hidden;text-overflow:ellipsis}
.cr-addr i{font-style:normal;font-size:.8em}
.cr-addr.selall span{background:#b6d3ff}
.cr-icons{display:flex;align-items:center;gap:.5em}
.cr-ic{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%}
.cr-ic svg{width:1.4em;height:1.4em}
.cr-ic.prof{background:#7b5cd6;color:#fff;font-weight:800;font-size:.85em}
.cr-ic.new{animation:dmPop .5s}
@keyframes dmPop{0%{transform:scale(.2)}70%{transform:scale(1.2)}100%{transform:none}}
.cr-body{flex:1;display:flex;min-height:0;position:relative}
.cr-page{flex:1;padding:1em 1.4em}
.cr-page .pg b{display:block;font-size:1.2em;margin-bottom:.6em}
.cr-page .pg p{height:.7em;margin:.5em 0;border-radius:4px;background:#e6eaf0;width:90%}
.cr-page .pg p.s{width:60%}
.cr-side{width:38%;border-left:1px solid #e3e6ea;background:#faf8f5;padding:.8em;display:flex;flex-direction:column;gap:.5em;animation:dmSlide .5s}
.cr-side .in{margin-top:auto;padding:.5em .7em;border:1px solid #ddd;border-radius:8px;color:#999;background:#fff}
@keyframes dmSlide{from{transform:translateX(40%);opacity:0}to{transform:none;opacity:1}}
.dm-pop:has(.cr-pop){place-items:start end;padding:12% 3% 0 0}
.cr-pop{background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:.9em 1.1em;min-width:13em;display:flex;flex-direction:column;gap:.4em}
.prof-pop{align-items:center;text-align:center}
.prof-pop .av{width:2.4em;height:2.4em;border-radius:50%;background:#7b5cd6;color:#fff;display:grid;place-items:center;font-weight:800}
.prof-pop .ok{color:#2f9a62;font-weight:800}.prof-pop .ng{color:#b23a2e}
.ext-pop .row{display:flex;align-items:center;gap:.6em;padding:.3em .2em}
.ext-pop .row i{width:1.4em;height:1.4em}.ext-pop .row i svg{width:100%;height:100%}
.ext-pop .row span{flex:1}.ext-pop .row em{font-style:normal}
/* Codex */
.dm-win.cx{flex-direction:row;left:4%;top:8%;width:92%;height:84%}
.cx-side{width:28%;background:#f4f4f4;padding:.8em;display:flex;flex-direction:column;gap:.6em;border-right:1px solid #e5e5e5}
.cx-side span{padding:.3em .5em;border-radius:6px}
.cx-main{flex:1;display:flex;flex-direction:column;padding:.8em;min-width:0}
.cx-log{color:#888;margin-bottom:auto}
.cx-in{display:flex;align-items:center;gap:.3em;padding:.6em .8em;border:1.5px solid #ccc;border-radius:12px;min-height:2.6em}
.cx-in .caret{width:1px;height:1.1em;background:#333;animation:dmBlink 1s steps(1) infinite}
@keyframes dmBlink{50%{opacity:0}}
.chip{font-style:normal;background:#e3edff;color:#1d4fb8;border-radius:6px;padding:.1em .5em;font-weight:700}
.dm-pop:has(.cx-cand){place-items:end center;padding-bottom:22%}
.cx-cand{background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:.4em;min-width:12em}
.cx-cand div{padding:.4em .7em;border-radius:6px}
.cx-set{display:flex;gap:.4em;flex-wrap:wrap;margin-bottom:.8em}
.cx-set span{padding:.3em .7em;border-radius:6px;background:#f1f1f1}.cx-set span.on{background:#dfe8f7;font-weight:700}
.cx-row{display:flex;justify-content:space-between;align-items:center;padding:.6em .8em;border:1px solid #e5e5e5;border-radius:8px}
.cx-row .btn{padding:.2em .7em;border:1px solid #999;border-radius:6px}
/* テキストエディタ */
.dm-win.ed{top:12%}
.ed-menu{display:flex;gap:1em;padding:.3em .8em;border-bottom:1px solid #eee;font-size:.95em}
.ed-body{flex:1}
.ed-find{display:flex;align-items:center;gap:.5em;padding:.4em .8em;background:#f3f5f8;border-bottom:1px solid #e3e6ea}
.ed-find .inp{min-width:6em;padding:.1em .5em;border:1.5px solid #2f7cf6;border-radius:4px;background:#fff}
.ed-find em{font-style:normal;color:#666}
.found{background:#ffe066}
.dm-save{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:1em 1.4em;display:flex;flex-direction:column;gap:.6em;min-width:60%}
.dm-save label{display:flex;gap:.5em;align-items:center}
.dm-save .inp,.gs-dlg .inp{flex:1;padding:.2em .5em;border:1.5px solid #2f7cf6;border-radius:4px;min-height:1.6em}
.dm-save button{align-self:flex-end;border:0;background:#2f7cf6;color:#fff;border-radius:6px;padding:.4em 1.4em;font-family:inherit;font-size:1em;font-weight:700}
/* スクリーンショット・写真 */
.shotwin .shot-body{flex:1;padding:1.2em;display:flex;flex-direction:column;gap:.8em}
.shot-done{align-self:flex-start;padding:.6em 1em;border-radius:8px;background:#e7f6ec;color:#1f7a45;font-weight:800;font-size:1.2em}
.shot-done.boxed{outline:2px dashed #2f7cf6;outline-offset:6px}
.dm-win.dim{filter:brightness(.6)}
.dm-pop:has(.shot-thumb){place-items:end end;padding:0 4% 6% 0}
.shot-thumb{background:#fff;border-radius:8px;padding:.6em 1em;box-shadow:0 6px 18px rgba(0,0,0,.3);font-weight:700}
.ph-edit{margin-left:auto;font-style:normal;padding:.15em .7em;border-radius:6px;background:#fff;border:1px solid #ccc}
.ph-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em;background:#222}
.ph-img{width:46%;aspect-ratio:16/10;transition:aspect-ratio .6s,width .6s}.ph-img svg{width:100%;height:100%}
.ph-img.square{width:30%;aspect-ratio:1;outline:2px solid #ffd84a}
.ph-tools{display:flex;gap:.6em;color:#fff}.ph-tools span{padding:.2em .7em;border-radius:6px;background:#444}
/* スプレッドシート */
.dm-win.gs{left:3%;top:5%;width:94%;height:90%;border-radius:8px}
.gs-top{display:flex;align-items:center;gap:.6em;padding:.5em .8em;flex:none}
.gs-logo{width:1.3em;height:1.6em;border-radius:3px;background:#1fa463;flex:none}
.gs-title{padding:.1em .3em;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-title.editing{outline:2px solid #2f7cf6}
.gs-share{margin-left:auto;padding:.3em .9em;border-radius:99px;background:#c2e7ff;font-weight:700;white-space:nowrap}
.gs-menu{display:flex;gap:1em;padding:0 .9em .4em;font-size:.95em;flex:none}
.gs-fx{display:flex;gap:.6em;align-items:center;padding:.2em .8em;border-top:1px solid #e3e6ea;border-bottom:1px solid #e3e6ea;font-size:.9em;min-height:1.8em;flex:none;white-space:nowrap;overflow:hidden}
.gs-fx b{color:#888;font-style:italic}
.gs-grid{flex:1;overflow:hidden;position:relative}
.gs-grid table{border-collapse:collapse;width:100%;table-layout:fixed}
.gs-grid th,.gs-grid td{border:1px solid #e1e4e8;height:1.9em;padding:0 .4em;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-grid th{background:#f6f7f9;color:#666;font-weight:500;text-align:center}
.gs-grid th.corner{width:2.4em}
.gs-grid tr th:first-child{width:2.4em}
.gs-grid td.gh{font-weight:700}
.gs-grid td.sel{background:#e7f0fe;outline:2px solid #2f7cf6;outline-offset:-2px}
.gs-grid td.hit{background:#ffe9a6}
.gs-grid td.handle{box-shadow:inset -6px -6px 0 -3px #2f7cf6}
.gs-grid.frozen tr:nth-child(2) td,.gs-grid.frozen tr:nth-child(2) th{border-bottom:4px solid #b8c0cc}
.gs-grid tr.hide{display:none}
.gs-grid .pill{display:inline-block;padding:0 .6em;border-radius:99px;background:#d7f0dd;color:#1f6a3d;font-weight:700}
.gs-grid .fbtn{font-style:normal;margin-left:.3em;padding:0 .3em;border-radius:3px;background:#e7f0fe;color:#2f5fc8}
.gs-tabs{display:flex;gap:.3em;padding:.3em .6em;background:#f1f3f6;border-top:1px solid #e1e4e8;flex:none}
.gs-tabs span{padding:.25em .8em;border-radius:6px 6px 0 0;white-space:nowrap}
.gs-tabs span.on{background:#e3edff;color:#1d4fb8;font-weight:700}
.gs-tabs span.editing{outline:2px solid #2f7cf6;background:#fff}
.gs-tabs .add{color:#666}
.gs-home{padding:1em 1.4em}.gs-home p{margin:0 0 .6em}
.gs-blank{display:inline-flex;flex-direction:column;align-items:center;gap:.3em}
.gs-blank span{display:grid;place-items:center;width:4.4em;height:5.4em;border:1px solid #ddd;border-radius:6px;font-size:1.4em;color:#1fa463;background:#fff}
.gs-dlg{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:1em 1.3em;display:flex;flex-direction:column;gap:.6em;min-width:62%}
.gs-dlg .tabs{display:flex;gap:1em;border-bottom:1px solid #eee}.gs-dlg .tabs span{padding:.3em 0}.gs-dlg .tabs .on{border-bottom:2px solid #2f7cf6;color:#2f7cf6;font-weight:700}
.gs-dlg .drop{border:2px dashed #ccd;border-radius:8px;padding:1em;text-align:center;color:#777}
.gs-dlg .opt{padding:.35em .7em;border:1px solid #ccc;border-radius:6px}
.btn{display:inline-block;padding:.35em 1em;border-radius:6px;border:1px solid #ccc;font-weight:700;text-align:center}
.btn.blue{background:#2f7cf6;color:#fff;border-color:#2f7cf6;align-self:flex-end}
.gs-panel{position:absolute;right:0;top:4.6em;bottom:2em;width:40%;background:#fff;border-left:1px solid #e1e4e8;box-shadow:-4px 0 12px rgba(0,0,0,.1);padding:.8em;display:flex;flex-direction:column;gap:.5em;animation:dmSlide .4s;z-index:4}
.gs-panel .val{min-height:1.6em;padding:.1em .5em;border:1px solid #ccc;border-radius:4px}
.gs-panel .opt{padding:.3em .6em;border:1px solid #ccc;border-radius:6px}
.gs-fl{background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:.8em 1em;display:flex;flex-direction:column;gap:.4em;min-width:11em}
.pg.dl{text-align:center;padding-top:1.4em}.dl-btns{display:flex;justify-content:center;gap:1em;margin-top:1em}.dl-btns .btn{background:#111;color:#fff;border-color:#111;padding:.5em 1.2em}
.gs-panel{top:3.4em;bottom:2.2em;gap:.3em;padding:.6em .7em;font-size:.92em;overflow:hidden}
.gs-panel .val{min-height:1.3em}
.gs-panel .btn.blue{padding:.2em .9em}
/* ===== CrowdWorks（イメージ） ===== */
.cr-page.cw{position:relative;padding:0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.cw-head{display:flex;align-items:center;gap:1em;padding:.5em 1em;border-bottom:1px solid #e3e6ea;background:#fff;flex:none;white-space:nowrap}
.cw-logo{color:#0a7bd8;font-weight:900;margin-right:auto}
.cw-head span{padding:.15em .5em;border-radius:5px}
.cw-main{flex:1;padding:.8em 1em;overflow:hidden}
.cw-note{position:absolute;right:.6em;bottom:.4em;font-size:.78em;color:#9aa;background:rgba(255,255,255,.85);padding:0 .4em;border-radius:4px}
.cw-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;height:100%}
.cw-top b{font-size:1.6em;color:#0a7bd8}
.cw-p{margin:0;color:#556}
.cw-btn{display:inline-block;padding:.4em 1.2em;border-radius:6px;background:#0a7bd8;color:#fff;font-weight:800;text-align:center}
.cw-btn.s{padding:.25em .7em;font-size:.9em;background:#fff;color:#0a7bd8;border:1px solid #0a7bd8}
.cw-form{display:flex;flex-direction:column;gap:.5em}
.cw-h{font-size:1.1em}
.cw-row{display:flex;align-items:center;gap:.6em}
.cw-l{flex:none;width:7.5em;font-size:.9em;color:#556}
.cw-img{width:2.6em;height:2.6em;border-radius:8px;border:1px dashed #bbc;display:grid;place-items:center;font-size:.75em;color:#99a;overflow:hidden}
.cw-img svg{width:100%;height:100%}
.cw-in{flex:1;min-height:1.7em;padding:.2em .5em;border:1px solid #cdd3dc;border-radius:5px;background:#fff;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-in.big{min-height:3em;white-space:normal}
.cw-form .cw-btn{align-self:flex-end}
.cw-pub{display:flex;flex-direction:column;gap:.7em}
.cw-pub-h{display:flex;gap:.8em;align-items:center}
.cw-av{width:3.2em;height:3.2em;border-radius:50%;overflow:hidden;flex:none}.cw-av svg{width:100%;height:100%}
.cw-pub-h b{display:block;font-size:1.15em}.cw-pub-h small{color:#556}
.cw-pub-b{padding:.6em .8em;border-radius:8px;background:#f5f7fa;line-height:1.7}
.selall{background:#b6d3ff!important}
.side-log{flex:1;overflow:hidden}
.ai{margin:0;padding:.5em .6em;border-radius:8px;background:#fff;border:1px solid #e3e0da;font-size:.9em;line-height:1.6}
.cr-side .in{min-height:2.2em;line-height:1.5;color:#333;font-size:.88em}
.cr-side mark,.cx-in mark{background:#ffe066;border-radius:3px}
.cx-log .ai{margin-top:.4em}
.dm-win.txt.draft{left:42%;top:30%;width:54%;height:56%;z-index:5}
.dm-win.txt.draft .dm-text{font-size:.92em;line-height:1.7}
.cw-pick .pick-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;padding:1em}
.pick{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.5em .3em;border-radius:8px;border:1.5px solid #e3e6ea;text-align:center;font-size:.85em;transition:opacity .3s}
.pick i{font-style:normal;font-size:2em;width:1.6em;height:1.6em;display:grid;place-items:center}.pick i svg{width:100%;height:100%}
.pick em{font-style:normal;font-weight:800;font-size:.85em;padding:0 .5em;border-radius:99px}
.pick em.ok{background:#d7f0dd;color:#1f6a3d}.pick em.ng{background:#fde2df;color:#a8352a}
.pick.x{opacity:.35;text-decoration:line-through}
.pick.on{border-color:#2f9a62;box-shadow:0 0 0 3px rgba(47,154,98,.25)}
.imgchk{flex:1;display:flex;align-items:center;justify-content:center;gap:2.4em}
.imgchk .big{width:7em;height:7em;border-radius:6px;overflow:hidden;position:relative}.imgchk .big svg{width:100%;height:100%}
.imgchk .big.edges{outline:3px dashed #e05a4a;outline-offset:-3px}
.imgchk .sm{display:flex;flex-direction:column;align-items:center;gap:.3em}
.imgchk .sm i{width:1.8em;height:1.8em;border-radius:50%;overflow:hidden}.imgchk .sm i svg{width:100%;height:100%}
.imgchk .sm.pulse i{animation:dmPop .6s}
.pickf .pf-list{display:flex;flex-direction:column;gap:.3em}
.pickf .pf-list span{display:flex;align-items:center;gap:.5em;padding:.3em .5em;border-radius:6px}
.pickf .pf-list span svg{width:1.6em;height:1.4em}.pickf .pf-list em{font-style:normal}
.pickf .pf-list span.on{background:#d4e3fb}
.cw-note{position:static;display:block;flex:none;text-align:right;padding:.15em .6em;background:#fafbfc;border-top:1px solid #eef0f3;border-radius:0}
/* ===== 質を上げる：枠の幅に合わせて拡大縮小、PCでは広がりすぎない ===== */
.dm{max-width:760px;margin-left:auto;margin-right:auto;container-type:inline-size}
.dm-stage{font-size:clamp(9px,1.8cqi,14.5px);aspect-ratio:16/10.5}
.dm-cur{width:clamp(18px,3.2cqi,28px);height:clamp(18px,3.2cqi,28px)}
.dm-cap{font-size:clamp(14px,2.2cqi,17px)}
/* 画像の候補：カードは縦に伸ばさず、絵を大きく */
.cw-pick .pick-grid{align-items:start;align-content:center}
.pick{padding:.7em .5em .8em;gap:.45em;background:#fff}
.pick i{width:5.2em;height:5.2em;font-size:1em;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.pick span{font-size:.95em;line-height:1.45;min-height:2.9em}
.pick.x i{filter:grayscale(1)}
.pick.x::after{content:"✕";position:absolute;font-size:3.4em;color:#d9483b;font-weight:900;opacity:.85;transform:translateY(.25em)}
.pick{position:relative}
/* ===== QUEST 6・8・9 ===== */
/* メモ */
.dm-win.memo{left:8%;top:8%;width:84%;height:84%}
.memo-body{flex:1;padding:1em 1.3em;display:flex;flex-direction:column;gap:.35em;font-size:1.05em;line-height:1.6}
.ml{min-height:1.6em;border-radius:4px;padding:0 .3em}
.ml.hd2{font-weight:800;color:#5a4300}
.ml.done{color:#55606f}
.ml.cur::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;background:#222;vertical-align:-.15em;animation:dmBlink 1s steps(1) infinite}
.memo-mini{margin:0 1em 1em;padding:.5em .8em;border-radius:8px;background:#fffdf3;border:1px dashed #d9c78e;min-height:1.8em}
/* AIチャット */
.dm-win.chatw{left:6%;top:6%;width:88%;height:88%}
.ch-log{flex:1;padding:.9em 1em;display:flex;flex-direction:column;gap:.6em;overflow:hidden;background:#fafafa}
.ch-in{display:flex;align-items:flex-end;gap:.4em;margin:.6em;padding:.55em .7em;border:1.5px solid #cfd5de;border-radius:14px;min-height:2.4em;background:#fff}
.ch-in [data-k="intext"]{flex:1;line-height:1.55;font-size:.95em}
.ch-in .send{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#1d2b3a;color:#fff;font-weight:900}
.ch-in mark,.cr-side mark{background:#ffe066;border-radius:3px;padding:0 .15em}
.bub{max-width:86%;padding:.55em .8em;border-radius:12px;line-height:1.6;font-size:.95em}
.bub.me{align-self:flex-end;background:#e3edff}
.bub.ai{align-self:flex-start;background:#fff;border:1px solid #e3e0da}
.cr-side.wide{width:44%;font-size:.95em}
.cr-side .in{border:1.5px solid #cfd5de}
.cr-side .side-log{display:flex;flex-direction:column;gap:.5em}
/* 表 */
.dm-win.tbw{left:4%;top:8%;width:92%;height:84%}
.tb-wrap{flex:1;padding:.8em;overflow:hidden}
.tb{width:100%;border-collapse:collapse;font-size:.95em}
.tb th,.tb td{border:1px solid #dfe3e8;padding:.4em .5em;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12em}
.tb th{background:#f3f5f8;font-weight:700}
.tb a{color:#2357b5;text-decoration:underline}.tb a.visited{color:#7a4bb5}
.tb b.ok,.q9 b.ok{color:#1f6a3d}.tb b.ng{color:#a8352a}
.mini{border-collapse:collapse;font-size:.92em}.mini th,.mini td{border:1px solid #e3e6ea;padding:.2em .4em}
/* 募集文の判定 */
.dm-win.judge{left:4%;top:6%;width:92%;height:88%}
.jg{flex:1;display:flex;gap:1em;padding:1em}
.post{flex:1.3;padding:.8em 1em;border-radius:10px;background:#f7f9fc;border:1px solid #e1e6ee;line-height:1.75}
.post b{display:block;margin-bottom:.3em}
.post .hit{background:#ffd7d2;border-radius:3px;box-shadow:0 0 0 2px #f2a39a}
.jl{flex:1;display:flex;flex-direction:column;gap:.35em}
.jl div{padding:.35em .6em;border-radius:8px;background:#f1f3f6}
.jl div.ng{background:#fde2df;color:#a8352a;font-weight:800}
.jl div.q{background:#fff1d6;color:#8a5a00;font-weight:800}
.jl .res{margin-top:auto;background:#1d2b3a!important;color:#fff;font-weight:900;text-align:center;min-height:1.6em}
.chk{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:1em 2em;font-size:1.1em}
.chk div{display:flex;gap:.7em;align-items:center;padding:.5em .8em;border-radius:10px;background:#f4f6fa}
.chk div.on{background:#e3f6ea}
.chk .cb,.cap-box .cb{display:grid;place-items:center;width:1.3em;height:1.3em;border:2px solid #9aa6b5;border-radius:4px;background:#fff;color:#2f9a62;font-weight:900}
/* 計算 */
.dm-win.calc{left:14%;top:8%;width:72%;height:84%}
.calc-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5em;padding:1em 2em;font-size:1.2em}
.cl{display:flex;justify-content:space-between;align-items:baseline;padding:.45em .8em;border-radius:10px;background:#f6f8fb}
.cl b{font-size:1.25em;font-variant-numeric:tabular-nums}
.cl.op b{color:#a8352a}
.cl.eq{background:#fff6d8;border:1.5px solid #e6cf7a}
/* 見比べ */
.dm-win.cmp{left:4%;top:6%;width:92%;height:88%}
.cmp-body{flex:1;display:flex;gap:1em;padding:1em}
.cmp-body .col{flex:1;display:flex;flex-direction:column;gap:.35em}
.cmp-body .col b{margin-bottom:.2em}
.cmp-body .col div{padding:.4em .6em;border-radius:8px;background:#f4f6fa;transition:background .3s}
.cmp-body .col div.same{background:#e3f6ea}
.cmp-body .col div.diff{background:#fde2df;font-weight:800}
/* そのほか */
.pick-grid.four{grid-template-columns:repeat(4,1fr)}
.pick.work i.wk{display:grid;place-items:center;font-size:2.2em;background:#f3f6fb;box-shadow:none}
.pick.work.on{border-color:#2f9a62;box-shadow:0 0 0 3px rgba(47,154,98,.25)}
.cap-box{margin-top:1em;padding:1em;border:1px solid #d6dbe2;border-radius:6px;background:#f9f9f9;display:inline-block}
.cap-box label{display:flex;gap:.6em;align-items:center}
.hist{display:flex;justify-content:space-between;padding:.6em .8em;margin-top:.5em;border:1px solid #e3e6ea;border-radius:8px}
.hist em{font-style:normal;color:#1f6a3d;font-weight:800}
.del{text-decoration:line-through;color:#b23a2e;opacity:.6}
.fee{margin-top:.8em;padding:.6em .8em;border-radius:8px;background:#fff6d8;font-weight:800}
.fee small{font-weight:400;color:#7a6a3a}

/* CrowdWorks：プロフィールを更新するボタンは、画面のいちばん下の真ん中 */
.cw-foot{display:flex;justify-content:center;margin-top:.4em;padding-top:.6em;border-top:1px solid #eef0f3}
.cw-btn.big{padding:.6em 2.4em;font-size:1.05em;border-radius:8px}
.cw-box{display:flex;flex-direction:column;gap:.35em;padding:.5em .7em;border-radius:8px;border:1px solid #e3e6ea}
.cw-box>b{font-size:.85em}
.cw-box.priv{background:#f6f7f9}.cw-box.priv>b{color:#6b7280}
.cw-box.pub{background:#eef6ff}.cw-box.pub>b{color:#1d4fb8}

.cw-main.terms p{margin:.3em 0;color:#556;line-height:1.6}
.cw-main.terms p[data-k="age"]{color:#1d2b3a;background:#f8f9fb;border-radius:6px;padding:.3em .5em}
.pick-grid.abc{grid-template-columns:repeat(3,1fr)}
.pick-grid.abc .wk{display:grid;place-items:center;font-size:2em;font-weight:900;color:#1d3a6e;background:#eef3fb;box-shadow:none}
.stopbtn{align-self:flex-start;padding:.3em .9em;border-radius:6px;background:#fde2df;color:#a8352a;font-weight:800}
.cw-top .row2{display:flex;gap:.8em}
.cw-login{display:flex;flex-direction:column;gap:.5em;max-width:60%;margin:0 auto}
.cw-login small{color:#2357b5;text-decoration:underline}
.kyc{padding:1em;border:2px dashed #c9d2de;border-radius:8px;text-align:center;color:#556}
.cw-main{scroll-behavior:auto}
.dm-pop:has(.dm-toast){place-items:start center;padding-top:16%}.dm-toast{position:static!important}

/* ゴールのお手本 */
.gt-list{display:flex;flex-direction:column;gap:.45em}
.gt-job{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.5em .7em;border:1px solid #e3e6ea;border-radius:8px;background:#fff}
.gt-job b{font-size:.95em}.gt-job span{font-size:.85em;color:#556;white-space:nowrap}
.gt-job.applied{border-color:#2f9a62;background:#eef8f2}
.cr-ic.gt-ai svg{width:1.4em;height:1.4em}
.gt-side[hidden]{display:none}
.gt-t td.ok{color:#1f6a3d;font-weight:800}.gt-t td.ng{color:#a8352a;font-weight:800}

.gt-side{width:52%!important}
.gt-side .side-log{overflow:auto}
.gt-prop{font-size:.92em;line-height:1.6;background:#fffbea!important;border-color:#ecd98a!important}

.st-pg{padding:1em 1.2em}
.st-top{display:flex;align-items:center;gap:.8em}
.st-top i{width:3.2em;height:3.2em}.st-top i svg{width:100%;height:100%}
.st-top b{display:block;font-size:1.2em}.st-top small{display:block;color:#556;font-size:.85em}
.st-add{margin-left:auto;padding:.5em 1.1em;border-radius:6px;background:#1a73e8;color:#fff;font-weight:800;white-space:nowrap}
.st-add.done{background:#e6f4ea;color:#137333}
.st-p{margin:.9em 0 0;color:#3c4043}
/* ChatGPTのデスクトップアプリのログイン画面 */
.al-pg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em;padding:2.2em 1em;min-height:12em}
.al-pg>b{font-size:1.2em}
.al-btn{padding:.6em 1.4em;border-radius:999px;background:#111;color:#fff;font-weight:800}
.al-api{color:#888;text-decoration:underline}
.al-api.x{text-decoration:line-through;opacity:.45}
.al-in{width:80%;padding:.6em .8em;border:1.5px solid #cfd5de;border-radius:10px;color:#999}
.gt-list.rd .gt-job{flex-direction:column;align-items:flex-start;gap:.15em}
.gt-list.rd .gt-job b{font-size:.9em}
/* スマホ：縮めて見せるときは、舞台を少し縦長にして中身が切れないようにし、外側の余白を詰める */
@media (max-width:640px){
  .dm{padding:8px}
  .dm-stage{aspect-ratio:16/12}
  .dm-cap{font-size:15px}
}
.cw-page.selall .cw-job,.cw-page.selall .cw-head{background:#b9d4ff}
.cw-job .cw-row span:last-child{font-size:.92em;color:#333}

/* ===== 追加のお手本（demo5.js） ===== */
.d5-pg{position:relative;padding:0;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff}
.d5-blank{margin:auto;color:#aab;font-size:.95em}
.cr-addr.edit{outline:2px solid #4c8bf5;background:#fff}
.d5-login{margin:auto;display:flex;flex-direction:column;align-items:center;gap:.55em;padding:1em}
.d5-login>b{font-size:1.4em;margin-bottom:.3em}
.d5-login.s{margin:0;align-items:flex-start;font-size:.92em}
.d5-btn{display:inline-block;padding:.45em 1.2em;border-radius:8px;border:1.5px solid #cfd5de;background:#fff;font-weight:700;font-size:.92em;color:#223}
.d5-btn.g{min-width:12em;text-align:center}
.d5-btn.p{background:#1d2b3a;border-color:#1d2b3a;color:#fff}
.d5-or{font-size:.8em;color:#99a}
.d5-acc{display:flex;flex-direction:column;gap:.5em;min-width:13em}
.d5-acc span{padding:.5em .7em;border:1px solid #dde;border-radius:8px}
.d5-acc small,.d5-who small{display:block;color:#889;font-size:.8em}
.d5-app{flex:1;display:flex;min-height:0}
.d5-nav{width:30%;background:#f4f2ee;padding:.8em .7em;display:flex;flex-direction:column;gap:.55em;font-size:.88em}
.d5-nav .dim,.d5-ccs .dim{color:#99a}
.d5-me{margin-top:auto;padding:.45em .5em;border-radius:8px;background:#fff;border:1px solid #e3e0da;font-weight:700}
.d5-main{flex:1;padding:1em;display:flex;flex-direction:column;gap:.8em;min-width:0}
.d5-hi{margin:auto 0 0;font-size:1.05em;font-weight:700;color:#334}
.d5-box{padding:.6em .8em;border:1.5px solid #cfd5de;border-radius:12px;color:#99a}
.d5-set{display:flex;flex-direction:column;gap:.45em}
.d5-set>b{font-size:1.1em}
.d5-row{display:flex;justify-content:space-between;gap:1em;padding:.5em .7em;border:1px solid #e6e8ee;border-radius:8px;background:#fff;font-size:.92em}
.d5-row>span:first-child{color:#778;flex:none}
.d5-plan{font-weight:800;color:#b25b00}
.d5-price{padding:1em;display:flex;flex-direction:column;gap:.8em}
.d5-pt{font-size:1.15em}
.d5-cards{display:flex;gap:.8em}
.d5-card{flex:1;padding:.8em;border:1.5px solid #dde;border-radius:12px;display:flex;flex-direction:column;gap:.4em}
.d5-card.on{border-color:#1d2b3a;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.d5-card small{color:#778}
.d5-pay{display:flex;flex-direction:column;gap:.6em;min-width:15em}
.d5-blank2{min-width:6em;color:#99a}
.d5-who{padding:.5em .6em;border:1px solid #dde;border-radius:8px;background:#fff;font-weight:700}
.d5-cwm{padding:.8em 1em;display:flex;flex-direction:column;gap:.5em}
.d5-h{font-size:1.05em}
.d5-job{padding:.55em .7em;border:1px solid #e3e6ea;border-radius:8px;background:#fff;font-weight:700;font-size:.9em}
.d5-job small{display:block;font-weight:400;color:#889;font-size:.85em}
.d5-job.new{border-color:#0a7bd8;background:#f0f7ff}
.d5-badge{display:inline-grid;place-items:center;margin-left:.3em;min-width:1.3em;height:1.3em;border-radius:999px;background:#e5484d;color:#fff;font-style:normal;font-size:.75em}
.d5-th{background:#fafafa;border-radius:8px}
.d5-sendb{width:auto;border-radius:8px;padding:0 .8em}
.d5-cc{left:5%;top:6%;width:90%;height:88%}
.d5-ccb{flex:1;display:flex;min-height:0}
.d5-ccs{width:28%;background:#f4f2ee;padding:.8em .6em;display:flex;flex-direction:column;gap:.6em;font-size:.85em}
.d5-new{padding:.45em .6em;border-radius:8px;background:#fff;border:1.5px solid #d6d1c6;font-weight:800}
.d5-ccm{flex:1;display:flex;flex-direction:column;min-width:0}
.d5-ccm .d5-hi{margin:auto;color:#99a;font-weight:400}
.d5-paste{background:#fff4c2;border-radius:4px;padding:0 .2em}
.d5-tb{border-collapse:collapse;font-size:.85em}
.d5-tb th,.d5-tb td{border:1px solid #dde;padding:.2em .5em}
.d5-perm .d5-btn{margin:.4em .4em 0 0;padding:.25em .8em}
.d5-site{left:8%;top:12%;width:84%;height:76%}
.d5-sb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;color:#778}
.d5-green{padding:.6em 2em;border-radius:999px;background:#06c755;color:#fff;font-weight:800}
.d5-line{left:18%;top:5%;width:64%;height:90%}
.d5-lh{padding:.6em .8em;background:#06c755;color:#fff;font-weight:800}
.d5-line .ch-log{background:#8cabd9}
.d5-lsend{background:#06c755}
.d5-hide{display:none}
.dm-win.d5-ws{left:5%;top:4%;width:90%;height:27%}
.d5-wsb{padding:.6em .8em;display:flex;align-items:center;gap:.8em;font-size:.88em}
.d5-wsb .d5-row{flex:1}
.dm-win.chatw.d5-half{left:5%;top:35%;width:90%;height:61%}
.d5-ng{background:#ffe0e0;border-radius:4px}
.d5-ng.d5-del{text-decoration:line-through;opacity:.4}
.d5-tb2 tr.d5-hl td{background:#e7f6ea}
.d5-sum{padding:.6em 1em;font-weight:800;color:#1d6b35}