/* 事業づくり体験ラボ — 白・アイボリー × シャンパンゴールド、精密なデジタルプロダクトの質感 */
@import url("fonts/serif/font.css");
:root{
  --bg:#fbf8f2;--paper:#fffefb;--ivory:#f5efe2;--line:#e8dec8;--line2:#d8c69c;
  --ink:#26231d;--ink2:#4a4439;--mute:#857b68;
  --gold:#a8843a;--goldT:#82652a;--goldL:#f8f1df;--acc:#a8843a;
  --metal:linear-gradient(120deg,#8f6f30 0%,#c6a35c 24%,#efdcab 44%,#cfae68 60%,#9d7b36 82%,#c4a25c 100%);
  --metalT:linear-gradient(120deg,#6b5020 0%,#a07d36 32%,#cdb06c 50%,#987530 68%,#6b5020 100%);
  --sh:0 1px 2px rgba(70,52,18,.05),0 14px 36px -18px rgba(70,52,18,.22);
  --r:18px;--ff:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --fs:"Noto Serif JP Variable","Hiragino Mincho ProN","Yu Mincho",serif;--fm:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.8 var(--ff);letter-spacing:.01em;overflow-x:hidden;overflow-wrap:anywhere;line-break:strict;
  background:var(--bg);background-image:linear-gradient(rgba(168,132,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(168,132,58,.06) 1px,transparent 1px),radial-gradient(90% 60% at 80% -10%,#fffaf0,rgba(255,250,240,0) 60%);background-size:32px 32px,32px 32px,100% 100%;background-attachment:fixed}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:80;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:10px}

/* ヘッダー */
.head{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,4vw,40px);background:rgba(251,248,242,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand b{display:block;font:600 15px/1.2 var(--fs);letter-spacing:.06em}
.brand small{display:block;font:600 9px/1.4 var(--fm);letter-spacing:.24em;color:var(--gold)}
.mark{width:28px;height:28px;border-radius:8px;background:var(--metal);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);position:relative}
.mark:after{content:"";position:absolute;inset:8px;border:1.5px solid #fffaf0;border-radius:50%}
.head-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none;color:var(--ink2)}
.head-nav a:hover{color:var(--goldT)}

/* 共通 */
.screen{display:none}
.screen.on{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 11px/1.4 var(--fm);letter-spacing:.24em;color:var(--goldT)}
.kicker.center{justify-content:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(168,132,58,.15);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{box-shadow:0 0 0 7px rgba(168,132,58,.04)}}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 24px;border-radius:999px;border:1px solid var(--line2);background:var(--paper);font-weight:700;font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--ink);text-align:center;line-height:1.4;transition:transform .12s,box-shadow .25s,border-color .25s,background .25s,color .25s}
.btn:hover{border-color:var(--gold);box-shadow:var(--sh)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.pri{border:0;color:#fff;background:var(--metal);background-size:200% 100%;text-shadow:0 1px 1px rgba(80,55,10,.35);box-shadow:0 10px 24px -12px rgba(140,104,32,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.pri:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:sheen 4.8s 1s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,64%{background-position:150% 0}100%{background-position:-50% 0}}
.btn.line{background:rgba(255,254,251,.9)}
.btn.line:hover{background:var(--ink);border-color:var(--ink);color:#f5e6c2}
.btn.x{background:#14120e;border-color:#14120e;color:#fff}
.btn.x:hover{background:#000;color:#fff}
.btn.big{min-height:58px;padding:0 32px;font-size:16px}
.btn.sm{min-height:44px;padding:6px 16px;font-size:13px}
.link-btn{min-height:44px;padding:0 6px;border:0;background:none;color:var(--goldT);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2)}
.link-btn:hover{text-decoration-color:var(--gold)}
.note{margin:14px 0 0;font-size:12px;line-height:1.85;color:var(--mute)}
.note.center{text-align:center;max-width:620px;margin:22px auto 0}
.small{font-size:12px;line-height:1.85;color:var(--mute)}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:90;transform:translate(-50%,-20px);max-width:calc(100% - 32px);background:#26231d;color:#fff;border:1px solid var(--gold);border-radius:999px;padding:9px 20px;font-size:13px;opacity:0;pointer-events:none;transition:.25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* はじめの画面 */
.intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;max-width:1180px;margin:0 auto;padding:clamp(36px,8vh,96px) clamp(16px,4vw,40px) 64px}
.intro h1{margin:0 0 18px;font:600 clamp(28px,4.3vw,54px)/1.45 var(--fs);letter-spacing:.03em}
.intro h1 .ln{display:block;white-space:nowrap;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.intro h1 .ln+.ln{animation-delay:.12s}
.gold{background:var(--metalT);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lead{margin:0;font-size:15px;line-height:2;color:var(--ink2);animation:rise .8s .22s both}
.intro-out{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;animation:rise .8s .3s both}
.intro-out li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:12.5px;color:var(--ink2)}
.intro-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;animation:rise .8s .4s both}
.meta{margin:12px 0 0;font-size:13px;color:var(--ink2)}
.intro-visual{position:relative;aspect-ratio:1/0.92;max-width:520px;width:100%;justify-self:center}
.demo-card{position:absolute;left:8%;right:8%;top:10%;padding:22px;border-radius:22px;background:rgba(255,254,251,.94);border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(80,58,18,.45);animation:float 7s ease-in-out infinite}
.demo-card:before{content:"";position:absolute;inset:6px;border:1px solid rgba(216,198,156,.55);border-radius:17px;pointer-events:none}
@keyframes float{50%{transform:translateY(-8px)}}
.demo-top{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.demo-top i{width:8px;height:8px;border-radius:50%;background:#e9dfc8}
.demo-top span{margin-left:auto;font:600 10px var(--fm);letter-spacing:.2em;color:var(--gold)}
.demo-name{height:22px;width:62%;border-radius:6px;background:var(--metal);background-size:200% 100%;animation:grow 3.6s ease-in-out infinite}
.demo-row{height:10px;border-radius:5px;background:#eee5d2;margin-top:12px}
.demo-row.r1{width:88%;animation:grow 3.6s .3s ease-in-out infinite}.demo-row.r2{width:70%;animation:grow 3.6s .5s ease-in-out infinite}
@keyframes grow{0%{transform:scaleX(.2);transform-origin:left;opacity:.3}35%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.3}}
.demo-chips{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}
.demo-chips span{padding:3px 10px;border-radius:999px;border:1px solid var(--line2);font-size:11px;color:var(--goldT);animation:chip 3.6s ease-in-out infinite both}
.demo-chips span:nth-child(2){animation-delay:.25s}.demo-chips span:nth-child(3){animation-delay:.5s}.demo-chips span:nth-child(4){animation-delay:.75s}.demo-chips span:nth-child(5){animation-delay:1s}
@keyframes chip{0%{opacity:0;transform:translateY(6px)}25%,85%{opacity:1;transform:none;background:var(--goldL)}100%{opacity:.2}}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-grid i{height:48px;border-radius:10px;border:1px dashed var(--line2);background:rgba(248,241,223,.5)}
.orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(216,198,156,.6);transform:rotate(-14deg) scaleY(.42);animation:spin 18s linear infinite}
.orbit span{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--metal)}
@keyframes spin{to{transform:rotate(346deg) scaleY(.42)}}

/* 質問とボード */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:start;max-width:1180px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 72px}
.qpanel{min-width:0;padding:26px clamp(18px,3vw,34px) 22px;border-radius:24px;background:rgba(255,254,251,.94);border:1px solid var(--line);box-shadow:var(--sh)}
.qhead{display:flex;align-items:flex-start;gap:12px}
.prog{flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;position:relative}
.prog li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;line-height:1.3;color:var(--mute);text-align:center;min-width:0}
.prog li:not(:last-child):after{content:"";position:absolute;left:calc(50% + 14px);right:calc(-50% + 14px);top:13px;height:1.5px;background:var(--line);transition:background .4s}
.prog li.done:after{background:var(--gold)}
.prog span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);background:var(--paper);font:600 11px/1 var(--fm);transition:all .35s}
.prog li.done span{background:var(--metal);border-color:transparent;color:#fff}
.prog li.now span{background:var(--ink);border-color:var(--ink);color:#f5e6c2;box-shadow:0 0 0 4px rgba(168,132,58,.18)}
.prog li.now{color:var(--ink);font-weight:700}
.prog b{font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qbody{margin-top:22px}
.qbody.in{animation:qin .38s cubic-bezier(.2,.7,.2,1)}
.qbody.in.back{animation-name:qback}
@keyframes qin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes qback{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.qno{margin:0;font:600 11px/1.4 var(--fm);letter-spacing:.2em;color:var(--goldT)}
.qq{margin:6px 0 4px;font:600 clamp(20px,2.4vw,27px)/1.5 var(--fs);letter-spacing:.03em}
.qh{margin:0 0 18px;font-size:13px;color:var(--mute)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 40px 12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--paper);text-align:left;line-height:1.5;box-shadow:0 1px 2px rgba(70,52,18,.04);transition:border-color .2s,box-shadow .25s,transform .12s,background .25s;animation:rise .4s calc(var(--i) * 40ms) both}
.opt:hover{border-color:var(--line2);box-shadow:var(--sh)}
.opt:active{transform:scale(.97)}
.opt .oi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ivory);border:1px solid var(--line);transition:all .25s}
.opt svg{width:22px;height:22px;fill:none;stroke:var(--goldT);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.opt .ot{min-width:0}
.opt b{display:block;font-size:14.5px;font-weight:700}
.opt small{display:block;font-size:12px;color:var(--mute)}
.opt .ock{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1.5px solid var(--line2);transition:all .25s}
.opt.on{border-color:transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--metal) border-box;border:1.5px solid transparent;box-shadow:0 10px 26px -14px rgba(140,104,32,.6)}
.opt.on .oi{background:var(--metal);border-color:transparent}
.opt.on svg{stroke:#fff}
.opt.on .ock{border-color:transparent;background:var(--metal)}
.opt.on .ock:after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ripple{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(230,207,152,.6);pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(30);opacity:0}}
.qfoot{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.qtip{margin:0;font-size:12px;color:var(--mute)}
.memo{display:block}
.memo textarea{display:block;width:100%;min-height:96px;padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:#fff;font-size:16px;line-height:1.7;resize:vertical}
.memo textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(168,132,58,.15)}
.memo small{display:block;text-align:right;font-size:11px;color:var(--mute)}
.qacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}

.board{--fill:0;position:sticky;top:84px;min-width:0}
.board-in{position:relative;overflow:hidden;padding:22px 20px 20px;border-radius:24px;background:linear-gradient(160deg,rgba(255,254,251,.98),rgba(248,241,223,.92));border:1px solid var(--line2);box-shadow:0 30px 60px -36px rgba(80,58,18,.45)}
.board-in:before{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--fill) * 100%);background:var(--metal);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.board.ready .board-in{box-shadow:0 30px 60px -30px rgba(140,104,32,.55),0 0 0 3px rgba(214,187,122,.25)}
.board-k{margin:0;font:600 10px/1.4 var(--fm);letter-spacing:.28em;color:var(--gold)}
.board-name{margin:6px 0 14px;min-height:1.5em;font:700 clamp(19px,2.2vw,24px)/1.45 var(--fs);letter-spacing:.02em}
.board-name .ph{font:500 13px/1.6 var(--ff);color:var(--mute)}
.board-name .nm{background:var(--metalT);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.board-name.pop{animation:namepop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes namepop{from{opacity:.2;transform:translateY(6px) scale(.97);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.board-body{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:16px;align-items:start}
.slots{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.slot{display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 10px;border-radius:14px;border:1px dashed var(--line2);background:rgba(255,254,251,.55);transition:background .35s,border-color .35s}
.slot .si{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ivory)}
.slot svg{width:19px;height:19px;fill:none;stroke:#c2b28f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.slot .sv{min-width:0}
.slot .ls{display:none}
.slot small{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--mute)}
.slot b{display:block;font-size:13px;line-height:1.45;color:#b6ab95;font-weight:600}
.slot.on{border-style:solid;border-color:var(--line);background:#fff}
.slot.on .si{background:var(--metal)}
.slot.on svg{stroke:#fff}
.slot.on b{color:var(--ink)}
.slot.hit{animation:slothit .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes slothit{0%{transform:translateX(-14px);opacity:.3;box-shadow:0 0 0 0 rgba(214,187,122,.7)}60%{box-shadow:0 0 0 6px rgba(214,187,122,0)}100%{transform:none;opacity:1}}

/* 画面イメージ */
.device{position:relative;aspect-ratio:9/17;border-radius:24px;padding:7px;background:linear-gradient(150deg,#2c2820,#4a4234);box-shadow:0 20px 40px -18px rgba(40,30,10,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.device.morph{animation:morph .55s cubic-bezier(.2,.8,.3,1)}
@keyframes morph{0%{transform:rotateY(0)}40%{transform:perspective(600px) rotateY(-16deg) scale(.97)}100%{transform:none}}
.screenx{position:relative;height:100%;overflow:hidden;border-radius:18px;background:#fffefb;display:flex;flex-direction:column;font-size:9px;line-height:1.35}
.dv-bar{padding:12px 9px 7px;border-bottom:1px solid #f0e8d6}
.dv-app{display:block;font:700 10.5px/1.3 var(--ff);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-who{display:block;margin-top:2px;font-size:8.5px;color:var(--acc)}
.dv-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px 9px;min-height:0}
.dv-empty{display:grid;gap:6px;align-content:center;height:100%;text-align:center;color:var(--mute)}
.dv-empty span{height:8px;border-radius:4px;background:#efe7d5}
.dv-empty span:nth-child(2){width:70%;justify-self:center}.dv-empty span:nth-child(3){width:50%;justify-self:center}
.dv-empty p{margin:6px 0 0;font-size:9px}
.dv-search{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:999px;border:1px solid #e9dfc8;color:var(--mute)}
.dv-search svg{width:11px;height:11px;fill:none;stroke:var(--acc);stroke-width:2}
.dv-chips{display:flex;gap:4px}
.dv-chips i{font-style:normal;padding:2px 6px;border-radius:999px;background:var(--goldL);color:var(--acc);font-size:8px}
.dv-row,.dv-post{display:flex;gap:6px;align-items:center;padding:5px;border-radius:8px;border:1px solid #f0e8d6}
.dv-row b{flex:none;width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#efe5cf,var(--acc));opacity:.75}
.dv-post b{flex:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#efe5cf,var(--acc));opacity:.75}
.dv-row span,.dv-post span{flex:1;display:grid;gap:3px}
.dv-row span i,.dv-post span i{display:block;height:4px;border-radius:2px;background:#ece3cf}
.dv-post em{font-style:normal;font-size:8px;color:var(--acc)}
.dv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dv-cal i{aspect-ratio:1;border-radius:4px;background:#f3ecdc}
.dv-cal i.off{background:#faf7f0;outline:1px dashed #eadfc6}
.dv-cal i.sel{background:var(--acc)}
.dv-times{display:flex;gap:4px}
.dv-times i{flex:1;font-style:normal;text-align:center;padding:3px 0;border-radius:6px;border:1px solid #eadfc6;font-size:8px}
.dv-times i.sel{background:var(--acc);border-color:var(--acc);color:#fff}
.dv-bars{display:flex;align-items:flex-end;gap:4px;height:70px;padding:4px;border-radius:8px;background:#faf6ec}
.dv-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(var(--acc),#e8dcbf);animation:bar .7s cubic-bezier(.2,.7,.2,1) both}
.dv-bars i:nth-child(2){animation-delay:.05s}.dv-bars i:nth-child(3){animation-delay:.1s}.dv-bars i:nth-child(4){animation-delay:.15s}.dv-bars i:nth-child(5){animation-delay:.2s}.dv-bars i:nth-child(6){animation-delay:.25s}.dv-bars i:nth-child(7){animation-delay:.3s}
@keyframes bar{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}}
.dv-stat{display:flex;gap:6px}
.dv-stat span{flex:1;padding:4px;border-radius:6px;border:1px solid #f0e8d6;text-align:center;color:var(--mute)}
.dv-stat b{font-size:12px;color:var(--ink)}
.dv-ring{position:relative;width:76px;height:76px;margin:4px auto 0}
.dv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dv-ring circle{fill:none;stroke:#efe7d5;stroke-width:4}
.dv-ring .pr{stroke:var(--acc);stroke-dasharray:100.5;stroke-dashoffset:40;stroke-linecap:round;animation:ring 1s ease both}
@keyframes ring{from{stroke-dashoffset:100.5}}
.dv-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px}
.dv-badges{display:flex;justify-content:center;gap:6px}
.dv-badges i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font-size:10px}
.dv-badges i.off{background:#efe7d5;color:#fff}
.dv-hero{height:54px;border-radius:8px;background:linear-gradient(135deg,#f3e9d2,var(--acc));display:flex;align-items:flex-end;padding:5px}
.dv-hero span{padding:1px 6px;border-radius:999px;background:#fff;color:var(--acc);font-size:8px}
.dv-items{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.dv-items i{height:40px;border-radius:7px;background:#f5eedf;border:1px solid #eee4cd}
.dv-cta{margin-top:auto;padding:6px;border-radius:999px;background:var(--acc);color:#fff;text-align:center;font-weight:700;font-size:8.5px}
.dv-badge{position:absolute;left:8px;right:8px;bottom:8px;display:none}
.screenx .dv-badge{display:flex;align-items:center;gap:4px;justify-content:center;position:static;margin:0 9px 8px;padding:3px 6px;border-radius:999px;background:var(--goldL);color:var(--goldT);font-size:8px}
.dv-badge svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.screenx.big{font-size:10.5px}
.screenx.big .dv-app{font-size:12px}
.screenx.big .dv-cta{font-size:10px;padding:8px}

/* 結果 */
.result{max-width:900px;margin:0 auto;padding:36px clamp(16px,4vw,40px) 72px}
.card{position:relative;overflow:hidden;padding:clamp(24px,4vw,44px) clamp(20px,4vw,48px) 26px;border-radius:26px;background:linear-gradient(170deg,#fffefb,#fbf5e8);border:1px solid var(--line2);box-shadow:0 40px 80px -46px rgba(80,58,18,.5)}
.card:before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,198,156,.55);border-radius:20px;pointer-events:none}
.card:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--metal)}
.card-k{margin:0;font:600 11px/1.4 var(--fm);letter-spacing:.16em;color:var(--goldT)}
.card-name{margin:10px 0 8px;font:700 clamp(25px,4.6vw,40px)/1.4 var(--fs);letter-spacing:.02em;outline:0;background:var(--metalT);-webkit-background-clip:text;background-clip:text;color:transparent}
.card-concept{margin:0;font-size:clamp(15px,1.9vw,17px);line-height:1.95;font-weight:600;color:var(--ink2)}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.cs{position:relative;padding:18px 18px 16px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid var(--line)}
.cs.wide{grid-column:1/-1}
.cs h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px;letter-spacing:.06em;color:var(--goldT)}
.cs h3 i{font:600 10px/1 var(--fm);font-style:normal;padding:4px 6px;border-radius:6px;background:var(--goldL);color:var(--goldT)}
.cs p{margin:0;font-size:14px;line-height:1.95;color:var(--ink2)}
.cs ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cs li{position:relative;padding-left:18px;font-size:14px;line-height:1.85;color:var(--ink2)}
.cs li:before{content:"✦";position:absolute;left:0;top:0;color:var(--gold);font-size:11px;line-height:2.4}
.feat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.cs.step{background:linear-gradient(135deg,#fffaf0,#f8efd9);border-color:var(--line2)}
.cs.step p{color:var(--ink);font-weight:600}
.card-foot{margin-top:20px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.tags li{padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:11.5px;color:var(--ink2)}
.card-foot p{margin:0;font-size:11.5px;color:var(--mute)}
.card.show .card-head,.card.show .cs,.card.show .card-foot{animation:reveal .7s cubic-bezier(.2,.7,.2,1) both}
.card.show .card-head{animation-delay:.05s}
.card.show #rc-user-s{animation-delay:.35s}.card.show #rc-values-s{animation-delay:.6s}.card.show #rc-feat-s{animation-delay:.85s}.card.show #rc-step-s{animation-delay:1.1s}.card.show .card-foot{animation-delay:1.3s}
@keyframes reveal{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.r-edit{margin:18px 0 0;text-align:center}
.r-edit p{margin:0 0 8px;font-size:12.5px;color:var(--mute)}
.r-edit-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chip-btn{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:12.5px;color:var(--ink2);transition:border-color .2s,transform .12s}
.chip-btn:hover{border-color:var(--gold)}
.chip-btn:active{transform:scale(.96)}
.r-sec{margin-top:26px;padding:26px clamp(18px,3vw,32px);border-radius:22px;background:rgba(255,254,251,.94);border:1px solid var(--line);box-shadow:var(--sh)}
.r-sec h3{margin:0 0 8px;font:600 clamp(18px,2.4vw,23px)/1.55 var(--fs)}
.r-sec>p{margin:0;font-size:14px;line-height:1.95;color:var(--ink2)}
.consult{background:linear-gradient(160deg,#fffdf8,#f8efd9);border-color:var(--line2)}
.r-btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.r-btns.col{flex-direction:column;margin-top:0}
.share-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;margin-top:12px;align-items:start}
.r-img{margin:0}
.r-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
.r-img figcaption{font-size:12px;color:var(--mute)}
.sh-prev{white-space:pre-wrap;margin:4px 0 8px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:1.75}
.r-end{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}

.foot{padding:30px clamp(16px,4vw,40px) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,254,251,.8);text-align:center;font-size:13px;color:var(--ink2)}
.foot p{margin:4px 0}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--goldT)}

/* タブレット・スマホ */
@media (max-width:900px){
  .intro{grid-template-columns:1fr;gap:20px;padding-top:28px}
  .intro h1{font-size:clamp(18px,6.1vw,40px)}
  .slot .lf{display:none}
  .slot .ls{display:block}
  .intro-visual{max-width:360px;order:-1;aspect-ratio:1/.62}
  .demo-card{top:4%;left:10%;right:10%;padding:16px}
  .demo-grid{display:none}
  .lab{grid-template-columns:1fr;gap:14px;padding-top:14px}
  .board{position:relative;top:auto;z-index:1;order:-1}
  .board-in{padding:12px 14px}
  .board-name{margin:2px 0 8px;font-size:17px}
  .board-body{grid-template-columns:minmax(0,1fr) 92px;gap:10px}
  .slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .slot{flex-direction:column;justify-content:center;gap:2px;min-height:0;padding:6px 3px;text-align:center}
  .slot .si{width:28px;height:28px}
  .slot small{font-size:8.5px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .slot b{display:none}
  .slot .sv{width:100%}
  .device{aspect-ratio:9/12;border-radius:16px;padding:4px}
  .screenx{border-radius:12px;font-size:7px}
  .dv-bar{padding:6px 6px 4px}
  .dv-app{font-size:8px}.dv-who{font-size:7px}
  .dv-body{padding:5px 6px;gap:4px}
  .dv-row,.dv-post{padding:3px}
  .dv-row b{width:14px;height:14px}.dv-post b{width:12px;height:12px}
  .dv-bars{height:36px}.dv-ring{width:42px;height:42px}.dv-hero{height:30px}.dv-items i{height:22px}
  .dv-chips,.dv-stat,.dv-times,.dv-badges,.dv-empty p,.screenx .dv-badge{display:none}
  .dv-cta{font-size:7px;padding:3px}
  .qpanel{padding:18px 16px 16px;border-radius:20px}
  .prog b{display:none}
  .prog span{width:24px;height:24px}
  .prog li:not(:last-child):after{top:12px}
}
@media (max-width:640px){
  .opts{grid-template-columns:1fr}
  .opt{min-height:58px}
  .card-grid,.feat{grid-template-columns:1fr}
  .share-grid{grid-template-columns:1fr}
  .r-img{max-width:280px;margin:0 auto}
  .r-btns:not(.col){flex-direction:column}
  .r-btns .btn,.intro-cta .btn,.r-end .btn{width:100%}
  .intro-cta{flex-direction:column}
  .head-nav a{font-size:12px}
}
@media (max-width:360px){
  .brand small{display:none}
  .board-body{grid-template-columns:minmax(0,1fr) 78px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}