/* ===== mock visuals & animations (画像なしプレビュー) ===== */

/* ④ hero: blueprint site art behind particles */
.siteart{position:absolute;inset:0;width:100%;height:100%;opacity:.30;animation:kb 26s ease-in-out infinite alternate;}
.siteart line,.siteart polyline,.siteart path{stroke:#5ea8ff;stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke;}
.siteart .dash{stroke-dasharray:5 7;opacity:.6;}

/* generic mock-photo texture (placeholder for real photos) */
.mockphoto{background-color:#0c1a38;background-image:radial-gradient(circle at 30% 28%,rgba(56,189,248,.14),transparent 62%),repeating-linear-gradient(90deg,rgba(120,180,255,.055) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(120,180,255,.055) 0 1px,transparent 1px 22px);}
.ftag{position:absolute;left:14px;bottom:14px;z-index:2;font-family:"Space Grotesk";font-size:11.5px;letter-spacing:.04em;color:#b8c4e6;background:rgba(5,8,16,.55);border:1px solid var(--border);padding:5px 11px;border-radius:8px;}
.ficon{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:30px;color:rgba(120,180,255,.5);font-family:"Space Grotesk";}

/* ⑤ shift: checkmarks pop in sequence */
.panel.new ul li{padding-left:28px;}
.panel.new ul li:before{content:"✓";width:18px;height:18px;border-radius:50%;background:#25324e;color:#25324e;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:"Space Grotesk";top:4px;box-shadow:none;transform:scale(.7);opacity:.5;}
.panel.new.in ul li:before{animation:chk .5s cubic-bezier(.3,1.4,.5,1) forwards;}
.panel.new.in ul li:nth-child(1):before{animation-delay:.15s}
.panel.new.in ul li:nth-child(2):before{animation-delay:.30s}
.panel.new.in ul li:nth-child(3):before{animation-delay:.45s}
.panel.new.in ul li:nth-child(4):before{animation-delay:.60s}
.panel.new.in ul li:nth-child(5):before{animation-delay:.75s}
.panel.new.in ul li:nth-child(6):before{animation-delay:.90s}
@keyframes chk{0%{opacity:.5;transform:scale(.7)}60%{transform:scale(1.2)}100%{opacity:1;transform:scale(1);background:var(--cyan);color:#04121f;box-shadow:0 0 10px var(--cyan)}}
.panel.old{position:relative;}
.hand{position:absolute;right:24px;bottom:22px;font-family:"Space Grotesk";font-size:11.5px;color:var(--muted);border:1px dashed rgba(255,255,255,.15);padding:5px 10px;border-radius:8px;}
.hand:after{content:"";position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);animation:tap 1.8s ease-in-out infinite;}
@keyframes tap{50%{transform:rotate(-45deg) translate(3px,3px)}}

/* ② demo cards: scan-line & diff (blueprint mock) */
.demos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;}
.demo{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;height:310px;background:#0a1730;box-shadow:0 20px 50px rgba(0,40,140,.2);}
.demo .draw{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(120,180,255,.09) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(120,180,255,.09) 0 1px,transparent 1px 24px);}
.demo .draw:before{content:"";position:absolute;left:12%;top:16%;width:44%;height:56%;border:1.5px solid rgba(120,180,255,.55);}
.demo .draw:after{content:"";position:absolute;left:58%;top:26%;width:26%;height:44%;border:1.5px solid rgba(120,180,255,.4);}
.rebars{position:absolute;left:16%;top:22%;width:36%;height:44%;background-image:repeating-linear-gradient(90deg,rgba(150,190,255,.5) 0 2px,transparent 2px 16px);}
.mk{position:absolute;width:24px;height:24px;border:2px solid #ff5c7a;color:#ff5c7a;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:"Space Grotesk";z-index:2;}
.mk.m1{left:26%;top:32%}.mk.m2{left:64%;top:54%}
.scan .scanline{position:absolute;left:0;right:0;height:44px;top:-15%;background:linear-gradient(180deg,transparent,rgba(56,189,248,.42),transparent);box-shadow:0 0 34px rgba(56,189,248,.6);animation:scan 3.6s ease-in-out infinite;z-index:3;}
@keyframes scan{0%{top:-15%}100%{top:100%}}
.scan .mk{opacity:.35;animation:mkp 3.6s ease-in-out infinite;}
.scan .mk.m2{animation-delay:.5s}
@keyframes mkp{0%,38%{opacity:.35}52%{opacity:1;box-shadow:0 0 16px #ff5c7a}100%{opacity:.35}}
.diff .hl{position:absolute;left:60%;top:30%;width:18%;height:24%;border:2px solid var(--cyan);border-radius:6px;background:rgba(34,211,238,.12);opacity:0;animation:hlin 3.4s ease-in-out infinite;z-index:2;}
@keyframes hlin{0%,18%{opacity:0;transform:scale(.85)}42%,82%{opacity:1;transform:scale(1)}100%{opacity:0}}
.pin{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;opacity:0;font-family:"Space Grotesk";z-index:3;}
.pin.ok{left:30%;top:60%;background:rgba(52,211,153,.2);border:2px solid #34d399;color:#34d399;animation:pinin 3.4s ease-in-out infinite .3s}
.pin.ng{left:64%;top:34%;background:rgba(255,92,122,.18);border:2px solid #ff5c7a;color:#ff5c7a;animation:pinin 3.4s ease-in-out infinite .6s}
@keyframes pinin{0%,22%{opacity:0;transform:scale(.4)}44%{transform:scale(1.25)}56%,86%{opacity:1;transform:scale(1)}100%{opacity:0}}
.demo .demo-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 13px;background:linear-gradient(180deg,transparent,rgba(5,8,16,.9));font-size:12.5px;color:#cdd6ee;z-index:4;}
.demo .demo-cap b{color:#fff;}
.tag-img{position:absolute;top:12px;right:12px;z-index:4;font-family:"Space Grotesk";font-size:10px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--border);padding:3px 9px;border-radius:6px;background:rgba(5,8,16,.5);}
@media(max-width:760px){.demos{grid-template-columns:1fr}}

/* ③ process bar + line chart + compare tiles */
.workviz{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;margin-top:34px;align-items:center;}
.pbar{display:flex;gap:6px;height:36px;}
.pbar span{flex:1;border-radius:5px;background:rgba(120,140,180,.16);opacity:0;transform:translateY(8px);}
.workviz.in .pbar span{animation:seg .5s ease forwards;}
.workviz.in .pbar span:nth-child(1){animation-delay:.1s}.workviz.in .pbar span:nth-child(2){animation-delay:.2s}.workviz.in .pbar span:nth-child(3){animation-delay:.3s}.workviz.in .pbar span:nth-child(4){animation-delay:.4s}.workviz.in .pbar span:nth-child(5){animation-delay:.5s}.workviz.in .pbar span:nth-child(6){animation-delay:.6s}.workviz.in .pbar span:nth-child(7){animation-delay:.7s}.workviz.in .pbar span:nth-child(8){animation-delay:.8s}
@keyframes seg{to{opacity:1;transform:none}}
.pbar span.hot{background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 18px rgba(0,120,255,.65);}
.pbar-wrap{position:relative;}
.hotlab{display:inline-block;margin-top:16px;font-size:13px;color:#cdd6ee;}
.hotlab b{color:#fff;}
.hotlab .dot{color:var(--cyan);}
.chart-wrap{border:1px solid var(--border);border-radius:14px;padding:18px 18px 14px;background:var(--surface);}
.chart{width:100%;height:120px;display:block;overflow:visible;}
.chart .ln{stroke:var(--sky);stroke-width:2.6;fill:none;stroke-dasharray:520;stroke-dashoffset:520;}
.workviz.in .chart .ln{animation:draw 2.2s ease forwards .2s;}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .ar{fill:url(#cg);opacity:0;}
.workviz.in .chart .ar{animation:fadein 1.2s ease forwards 1.6s;}
@keyframes fadein{to{opacity:.5}}
.chart-cap{font-size:12px;color:var(--muted);margin-top:8px;}
.chart-cap span{color:#5f6a8c;}
@media(max-width:760px){.workviz{grid-template-columns:1fr}}

.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:30px;}
.ctile{border:1px solid var(--border);border-radius:14px;height:180px;position:relative;overflow:hidden;background:#0a1730;opacity:0;}
.cmp.in .ctile.a{animation:slL .7s cubic-bezier(.2,.7,.2,1) forwards;}
.cmp.in .ctile.b{animation:slR .7s cubic-bezier(.2,.7,.2,1) forwards .1s;}
@keyframes slL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes slR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
.ctile .lab{position:absolute;left:0;right:0;bottom:0;padding:11px 14px;background:linear-gradient(180deg,transparent,rgba(5,8,16,.88));font-size:12.5px;color:#dbe3fb;z-index:2;}
.ctile .lab b{color:#fff;}
.ctile.rebar{background-image:repeating-linear-gradient(88deg,rgba(180,200,235,.55) 0 3px,transparent 3px 19px);}
.ctile.rebar:after{content:"";position:absolute;left:0;right:0;top:44%;height:7px;background:rgba(180,200,235,.45);}
.ctile.plan{background-image:repeating-linear-gradient(0deg,rgba(120,180,255,.16) 0 1px,transparent 1px 19px),repeating-linear-gradient(90deg,rgba(120,180,255,.16) 0 1px,transparent 1px 19px);}
.ctile.plan:before{content:"";position:absolute;left:20%;top:22%;width:44%;height:48%;border:1.5px solid rgba(120,180,255,.6);}
.cmp .neq{font-family:"Space Grotesk";font-size:32px;color:var(--sky);font-weight:700;text-align:center;animation:pulse 2.4s ease-in-out infinite;}
@media(max-width:640px){.cmp{grid-template-columns:1fr}.cmp .neq{transform:rotate(90deg)}}

/* ① FDE mock photos + parallax */
.fde-photo{will-change:transform;}
.fde-photo .ficon,.fde-shots .ph .ficon{}
.fde-shots .ph{position:relative;}
[data-par]{transition:transform .1s linear;}

/* ⑥ task thumbnails + CTA art */
.tc .thumb{height:64px;border-radius:10px;margin-bottom:16px;position:relative;overflow:hidden;background-color:#0c1a38;}
.tc .thumb.t1{background-image:repeating-linear-gradient(0deg,rgba(120,180,255,.18) 0 2px,transparent 2px 11px);}
.tc .thumb.t2{background-image:repeating-linear-gradient(0deg,rgba(120,180,255,.14) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(120,180,255,.14) 0 1px,transparent 1px 9px);}
.tc .thumb.t3:before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:rgba(56,189,248,.5);font-family:"Space Grotesk";font-size:26px;font-weight:700;}
.tc .thumb.t4:before{content:"∑";position:absolute;inset:0;display:grid;place-items:center;color:rgba(56,189,248,.5);font-family:"Space Grotesk";font-size:26px;}
.final .ctaart{position:absolute;inset:0;z-index:0;opacity:.16;}
.final .ctaart line,.final .ctaart polyline{stroke:#8fbcff;stroke-width:1;fill:none;vector-effect:non-scaling-stroke;}

/* Context deep-dive: flywheel（複利ループ） */
.flywheel{display:block;width:min(400px,90vw);height:auto;margin:38px auto 6px;overflow:visible;}
.flywheel .fwring{transform-origin:180px 180px;animation:fwspin 20s linear infinite;}
.flywheel circle{fill:none;stroke:rgba(56,189,248,.45);stroke-width:1.5;stroke-dasharray:4 10;}
.flywheel .arw{fill:var(--cyan);}
.flywheel .lbl{fill:#dbe3fb;font-family:"Noto Serif JP",serif;font-size:15px;font-weight:600;}
.flywheel .ctr{fill:#fff;font-family:"Noto Serif JP",serif;font-weight:700;font-size:16px;}
.flywheel .sub{fill:var(--sky);font-size:11.5px;font-weight:600;font-family:"Space Grotesk";}
@keyframes fwspin{to{transform:rotate(360deg)}}
.moat{text-align:center;max-width:720px;margin:26px auto 0;}
.moat .vs{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.moat .vs span{font-size:13px;border:1px solid var(--border);border-radius:999px;padding:7px 16px;background:var(--surface);color:#cdd6ee;}
.moat .vs b{color:var(--cyan);}

/* diagnose form */
.form-wrap{max-width:720px;margin:40px auto 0;text-align:left;}
.frm{display:grid;gap:18px;}
.frm .row{display:grid;gap:8px;}
.frm .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.frm .row2{grid-template-columns:1fr}}
.frm label{font-size:13px;color:#cdd6ee;font-weight:600;}
.frm label .req{color:var(--cyan);margin-left:3px;}
.frm input[type=text],.frm input[type=email],.frm input[type=tel],.frm select,.frm textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:14px;transition:.2s;}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--sky);background:rgba(56,189,248,.06);}
.frm textarea{min-height:92px;resize:vertical;}
.frm .opts{display:flex;flex-wrap:wrap;gap:10px;}
.frm .opts label{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:13px;color:#dbe3fb;border:1px solid var(--border);border-radius:999px;padding:8px 14px;cursor:pointer;background:rgba(255,255,255,.03);}
.frm .opts input{accent-color:var(--blue);}
.frm .submit{justify-self:start;margin-top:4px;}
.frm .hp{position:absolute;left:-9999px;}
.form-note{font-size:12px;color:#8791b3;margin-top:6px;}
.form-done{display:none;text-align:center;border:1px solid rgba(80,140,255,.4);border-radius:16px;padding:44px 30px;background:linear-gradient(155deg,rgba(0,90,255,.14),transparent);}
.form-done h4{font-size:20px;font-weight:900;margin-bottom:10px;color:#fff;}
.form-done p{color:#c7d0ee;font-size:14px;}
.frm select{color:var(--text);}
.frm option{background:#0e1830;color:#e8eefc;}
.logo img{height:26px;width:auto;display:block;}
.vstack{margin-top:44px;display:grid;gap:22px;max-width:900px;margin-left:auto;margin-right:auto;}
.vframe{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#0b1222;box-shadow:0 20px 50px rgba(0,40,140,.25);}
.vframe video{width:100%;display:block;}
.vframe .vcap{padding:14px 20px;font-size:13.5px;color:#cdd6ee;border-top:1px solid var(--border);text-align:left;}
.vframe .vcap b{color:#fff;}
.fde-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.fde-photo{border-radius:20px;overflow:hidden;border:1px solid var(--border);position:relative;min-height:300px;background-color:#0c1a38;background-size:cover;background-position:center;filter:saturate(.85) contrast(1.04);}
.fde-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,16,.1),rgba(5,8,16,.4));}
.fde-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.fde-shots .ph{height:150px;border-radius:14px;border:1px solid var(--border);background-color:#0c1a38;background-size:cover;background-position:center;filter:saturate(.85) contrast(1.04);}
@media(max-width:820px){.fde-grid{grid-template-columns:1fr}}
h1,h2,h3,h4,h5,p,li,.lead,.sub,.vcap,.t,.q{word-break:normal;overflow-wrap:anywhere;line-break:strict;}
body{word-break:normal;line-break:strict;}
h1,h2,h3,h4,h5,.lead,.sub,.fnote,.t,.q,.k,.demo-cap,.vcap,.hotlab,.chart-cap{text-wrap:pretty;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:52px;}
.pair .col{border:1px solid var(--border);border-radius:20px;padding:36px 32px;background:var(--surface);}
.pair .col.b{background:linear-gradient(155deg,rgba(0,90,255,.14),rgba(123,107,255,.06));border-color:rgba(80,140,255,.4);}
.pair .col .rl{font-size:16px;font-weight:900;margin-bottom:18px;color:#fff;line-height:1.5;}
.pair .col .rl span{color:var(--sky);font-weight:700;}
.pair .col ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.pair .col li{font-size:14px;color:#dbe3fb;padding-left:22px;position:relative;line-height:1.7;}
.pair .col li:before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
@media(max-width:760px){.pair{grid-template-columns:1fr}}

/* ===== app tabs (Malme自作アプリのデモ切替) ===== */
.apptabs{margin-top:44px;}
.apptab-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.apptab-nav button{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:999px;padding:10px 18px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.apptab-nav button .lb{font-family:"Space Grotesk";font-size:11px;color:var(--sky);letter-spacing:.08em;}
.apptab-nav button:hover{border-color:var(--sky);color:var(--text);transform:translateY(-2px);}
.apptab-nav button.active{color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));border-color:transparent;box-shadow:0 8px 24px rgba(0,90,255,.35);}
.apptab-nav button.active .lb{color:#cfe0ff;}
.apptab-stage{margin-top:26px;border:1px solid var(--border);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 24px 60px rgba(0,20,60,.35);}
.apptab-video{position:relative;width:100%;aspect-ratio:16/9;background:#0a1120;}
.apptab-video video{width:100%;height:100%;object-fit:contain;display:block;background:#0a1120;}
.apptab-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;padding:20px 26px;border-top:1px solid var(--border);}
.apptab-meta h4{font-size:18px;font-weight:900;}
.apptab-meta .eff{font-family:"Space Grotesk";font-weight:700;color:var(--sky);font-size:15px;}
.apptab-meta p{flex:1 1 100%;font-size:13.5px;color:var(--muted);line-height:1.85;margin:2px 0 0;}
@media(max-width:600px){.apptab-nav button{font-size:12px;padding:8px 13px;}.apptab-meta{padding:16px 18px;}}