/* ============================================================
   まるっとAI サービスサイト — FV v3「まるっとワールド」
   ポップ×ゲーム会社HP風。彩度高めの青世界＋丸ゴ極太タイポ、
   ロボくん主役、業務カードがクエストのように片づく。
   ============================================================ */
:root{
  --blue:#2f63f7;
  --blue-hi:#5ea0ff;
  --blue-deep:#17318f;
  --outline:#1b2a6b;
  --ink:#15152b;
  --bg:#f5f8ff;
  --accent:#FED942;
  --accent-d:#F5C400;
  --white:#ffffff;
  --line:rgba(21,21,43,.08);
  --rounded:'M PLUS Rounded 1c','Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'DM Sans','Noto Sans JP',sans-serif;
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  word-break:auto-phrase;line-break:strict;
  font-feature-settings:"halt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- カーソル ---------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button{cursor:none}
}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:70;pointer-events:none;border-radius:50%}
.cursor-dot{width:9px;height:9px;background:var(--accent);box-shadow:0 0 0 2px rgba(23,49,143,.5)}
.cursor-ring{width:40px;height:40px;border:2.5px solid rgba(255,255,255,.85);transition:width .25s,height .25s,background .25s,transform .08s}
.cursor-ring.is-hover{width:62px;height:62px;background:rgba(254,217,66,.25)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- ローダー ---------- */
.loader{position:fixed;inset:0;z-index:80;background:var(--blue);display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s}
.loader.is-done{opacity:0;visibility:hidden}
.loader-robo svg{animation:loaderHop .8s cubic-bezier(.36,0,.66,-0.3) infinite alternate}
.lr-head{fill:#fff}
.lr-eye{fill:var(--blue);animation:blink 2.2s infinite}
@keyframes loaderHop{from{transform:translateY(0)}to{transform:translateY(-26px)}}

/* ---------- FV ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;
  background:linear-gradient(180deg,#4b8dff 0%,#2f63f7 58%,#2246d8 100%)}
#webgl,#fx{position:absolute;inset:0;width:100%;height:100%}
#fx{z-index:8;pointer-events:none}
.halftone{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.3px,transparent 1.3px);
  background-size:26px 26px}

.site-nav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,50px);opacity:0;transform:translateY(-14px);transition:opacity .6s cubic-bezier(.2,1.5,.4,1) 3.35s,transform .6s cubic-bezier(.2,1.5,.4,1) 3.35s}
.hero.is-on .site-nav{opacity:1;transform:none}
.nav-logo{width:140px;background:#fff;border-radius:14px;padding:10px 15px;
  border:3px solid var(--outline);box-shadow:0 5px 0 var(--outline)}
.nav-cta{font-family:var(--rounded);font-size:14px;font-weight:800;background:#fff;color:var(--blue-deep);
  padding:12px 24px;border-radius:9999px;border:3px solid var(--outline);box-shadow:0 5px 0 var(--outline);
  transition:transform .15s,box-shadow .15s}
.nav-cta:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--outline)}

/* --- 雲 --- */
.clouds{position:absolute;inset:0;z-index:2;pointer-events:none}
.cloud{position:absolute;opacity:.16;filter:blur(1px)}
.cloud.c1{width:280px;left:6%;top:16%;animation:cloudDrift 46s linear infinite}
.cloud.c2{width:180px;right:12%;top:9%;animation:cloudDrift 60s linear infinite reverse}
.cloud.c3{width:340px;right:-4%;top:38%;opacity:.10;animation:cloudDrift 74s linear infinite}
@keyframes cloudDrift{from{transform:translateX(-40px)}50%{transform:translateX(50px)}to{transform:translateX(-40px)}}

/* --- 白い丘ステージ --- */
.hill{position:absolute;left:0;right:0;bottom:0;height:24svh;z-index:4;pointer-events:none;
  transform:translateY(102%);transition:transform .75s cubic-bezier(.2,1.45,.4,1) .12s}
.hero.is-on .hill{transform:none}
.hill svg{position:absolute;inset:0;width:100%;height:100%}

/* --- 業務カード(クエスト) --- */
.quest-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.quest{position:absolute;display:flex;align-items:center;gap:9px;
  font-family:var(--rounded);font-weight:800;font-size:14px;color:var(--ink);
  background:#fff;border:3px solid var(--outline);border-radius:16px;
  padding:11px 16px;box-shadow:0 5px 0 var(--outline);
  opacity:0;transform:scale(.3)}
.quest svg{width:22px;height:22px;flex:0 0 22px}
.quest.in{animation:questIn .72s cubic-bezier(.24,1.5,.4,1) both}
.quest .stamp{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg) scale(0);
  font-family:var(--rounded);font-weight:900;font-size:19px;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#ff7ab8,#f7549d);border:3px solid var(--outline);border-radius:12px;
  padding:5px 13px;box-shadow:0 4px 0 var(--outline)}
.quest.cleared{animation:questClear .55s ease .5s both}
.quest.cleared .stamp{animation:stampIn .32s cubic-bezier(.2,2.4,.4,1) both}
@keyframes questIn{0%{opacity:0;transform:translateY(-70vh) rotate(calc(var(--rot,6deg) - 22deg)) scale(.85)}
  55%{opacity:1;transform:translateY(3%) rotate(calc(var(--rot,6deg) + 5deg)) scale(1.04)}
  100%{opacity:1;transform:translateY(0) rotate(var(--rot,6deg)) scale(1)}}
@keyframes stampIn{from{transform:translate(-50%,-50%) rotate(-24deg) scale(0)}
  to{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
@keyframes questClear{
  0%{opacity:1;transform:scale(1) rotate(var(--rot,6deg))}
  35%{transform:scale(1.12) rotate(var(--rot,6deg))}
  100%{opacity:0;transform:scale(.15) rotate(24deg) translateY(-30px)}}

/* --- 中央コピー --- */
.hero-inner{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:100svh;padding:0 clamp(18px,4vw,60px);margin:0 auto}
.fv-eyebrow{opacity:0;transform:translateY(16px) rotate(-2deg);transition:opacity .5s ease 1.45s,transform .5s cubic-bezier(.2,1.6,.4,1) 1.45s}
.hero.is-on .fv-eyebrow{opacity:1;transform:rotate(-2deg)}
.fv-eyebrow span{display:inline-block;font-family:var(--rounded);font-weight:800;font-size:clamp(13px,1.2vw,16px);
  color:var(--blue-deep);background:#fff;border:3px solid var(--outline);border-radius:9999px;
  padding:8px 20px;box-shadow:0 4px 0 var(--outline)}

.fv-title{margin:22px 0 6px;font-family:var(--rounded);font-weight:900;line-height:1.2;
  color:#fff;letter-spacing:.02em;display:flex;flex-direction:column;align-items:center;
  font-size:clamp(24px,2.9vw,42px);
  -webkit-text-stroke:0;
  text-shadow:none}
.fv-t-line{display:block;white-space:nowrap;transform:rotate(-1.2deg)}
.fv-title .ch{display:inline-block;opacity:0;transform:translateY(.65em) scale(.2) rotate(10deg)}
.hero.is-on .fv-title .ch{animation:chPop .6s var(--d,0s) cubic-bezier(.2,1.9,.35,1) both}
@keyframes chPop{from{opacity:0;transform:translateY(.65em) scale(.2) rotate(14deg)}
  60%{opacity:1;transform:translateY(-.06em) scale(1.12) rotate(calc(var(--chrot,0deg) * 1.5))}
  to{opacity:1;transform:translateY(0) scale(1) rotate(var(--chrot,0deg))}}
.fv-title .ch{paint-order:stroke fill;-webkit-text-stroke:clamp(6px,0.7vw,11px) var(--outline);
  text-shadow:0 clamp(4px,0.5vw,7px) 0 var(--outline)}
.fv-logo{display:block;width:clamp(340px,44vw,640px);margin:clamp(14px,2vw,26px) 0;
  opacity:0;transform:scale(2.1) rotate(7deg)}
.fv-logo img{width:100%;
  filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff)
         drop-shadow(0 9px 0 rgba(27,42,107,.95))}
.hero.is-on .fv-logo{animation:logoSlam .5s cubic-bezier(.25,1.35,.45,1) 2.05s both}
@keyframes logoSlam{from{opacity:0;transform:scale(2.1) rotate(7deg)}
  70%{opacity:1;transform:scale(.94) rotate(-2.4deg)}
  to{opacity:1;transform:scale(1) rotate(-1.6deg)}}
.fv-title em{font-style:normal;color:var(--accent);position:relative;display:inline-block}
.fv-title em::after{content:'';position:absolute;left:4%;right:4%;bottom:-.06em;height:.14em;
  background:var(--accent);border-radius:9999px;border:3px solid var(--outline);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,1.4,.4,1) 1.7s}
.hero.is-on .fv-title em::after{transform:scaleX(1)}
.fv-dot{color:#fff}

.fv-sub{font-size:clamp(13.5px,1.25vw,17px);line-height:2;color:rgba(255,255,255,.94);font-weight:700;max-width:640px;
  text-shadow:0 2px 0 rgba(23,49,143,.55);margin-top:14px;
  opacity:0;transform:translateY(16px);transition:opacity .6s ease 2.95s,transform .6s ease 2.95s}
.hero.is-on .fv-sub{opacity:1;transform:none}

.fv-cta{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;opacity:0;transform:translateY(18px) scale(.85);
  transition:opacity .55s ease 3.15s,transform .55s cubic-bezier(.2,1.8,.4,1) 3.15s}
.hero.is-on .fv-cta{opacity:1;transform:none}
.cta-pill{display:inline-flex;align-items:center;gap:14px;font-family:var(--rounded);
  background:linear-gradient(180deg,#ffe36b,var(--accent));color:var(--blue-deep);font-weight:900;
  font-size:clamp(16px,1.4vw,20px);padding:20px 42px;border-radius:9999px;
  border:4px solid var(--outline);box-shadow:0 7px 0 var(--outline);
  transition:transform .15s,box-shadow .15s;animation:ctaWiggle 5s ease-in-out 3s infinite}
.cta-pill:hover{transform:translateY(4px);box-shadow:0 3px 0 var(--outline);animation:none}
.cta-pill{position:relative;overflow:hidden}
.cta-pill::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-30%;width:34px;
  background:rgba(255,255,255,.65);transform:skewX(-24deg);filter:blur(2px);
  animation:ctaShine 4.2s ease-in-out 2.4s infinite}
@keyframes ctaShine{0%{left:-30%}22%{left:120%}100%{left:120%}}
.cta-pill .arrow{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--blue-deep);color:#fff;font-weight:900;font-size:15px}
.cta-ghost{font-family:var(--rounded);font-size:clamp(14px,1.2vw,16.5px);font-weight:800;color:#fff;
  padding:17px 30px;border-radius:9999px;border:3px solid rgba(255,255,255,.75);
  transition:background .25s,transform .15s}
.cta-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
@keyframes ctaWiggle{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-2.5deg)}95%{transform:rotate(2deg)}98%{transform:rotate(-1deg)}}

/* --- ロボくん --- */
.robo{position:absolute;z-index:9;right:clamp(3vw,7vw,9vw);bottom:7svh;width:clamp(210px,24vw,345px);opacity:0}
.robo-all{animation:roboBob 2.6s ease-in-out infinite;transform-origin:120px 210px}
@keyframes roboBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.robo-shadow{fill:rgba(13,28,90,.35);animation:shadowPulse 2.6s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.86)}}
.robo-shadow{transform-origin:120px 216px}
.robo-eye{fill:var(--blue);}
.robo-eyes{animation:blink 3.4s infinite;transform-origin:120px 105px}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.1)}}
.robo-mouth{stroke:var(--blue);stroke-width:5;stroke-linecap:round}
.robo-cheek{fill:#ff9ec4;opacity:.5}
.robo-ant{fill:var(--accent);stroke:var(--outline);stroke-width:3;animation:antGlow 2.4s ease-in-out infinite}
@keyframes antGlow{0%,100%{fill:var(--accent)}50%{fill:#fff2b3}}
.robo-arm{transform-origin:center;transform-box:fill-box;animation:armSway 2.6s ease-in-out infinite}
.arm-l{transform-origin:64px 139px;animation-delay:.2s}
.arm-r{transform-origin:196px 139px}
@keyframes armSway{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-10deg)}}
.robo.yay .robo-arm{animation:armYay .55s ease-in-out}
@keyframes armYay{0%,100%{transform:rotate(0)}40%{transform:rotate(-60deg)}}
.robo-spark{fill:#fff;opacity:.95;animation:sparkTwinkle 1.8s ease-in-out infinite}
.robo-spark.s2{animation-delay:.7s}
@keyframes sparkTwinkle{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.robo-spark{transform-origin:center;transform-box:fill-box}

/* --- HUD --- */
.hud{position:absolute;z-index:12;right:clamp(20px,4vw,50px);top:96px;text-align:center;
  font-family:var(--rounded);color:#fff;
  background:rgba(23,49,143,.55);border:3px solid rgba(255,255,255,.85);border-radius:18px;
  padding:10px 20px 12px;backdrop-filter:blur(4px);perspective:400px;
  opacity:0;transform:rotateX(-86deg);transform-origin:top center;
  transition:opacity .45s ease 3.5s,transform .6s cubic-bezier(.2,1.5,.4,1) 3.5s}
.hero.is-on .hud{opacity:1;transform:rotateX(0)}
.hud-label{font-size:11px;font-weight:800;letter-spacing:.16em;opacity:.9}
.hud-count{font-weight:900;font-size:30px;line-height:1.1}
.hud-count small{font-size:13px;margin-left:2px}
.hud.bump{animation:hudBump .3s cubic-bezier(.2,2,.4,1)}
@keyframes hudBump{50%{transform:scale(1.14)}}

.fv-hint{position:absolute;z-index:12;left:clamp(22px,6vw,92px);bottom:9svh;
  font-family:var(--rounded);font-weight:800;font-size:12.5px;color:var(--blue-deep);
  opacity:0;transition:opacity .6s ease 4.1s}
.hero.is-on .fv-hint{opacity:.95}

/* --- ティッカー --- */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:13;overflow:hidden;
  background:var(--blue-deep);border-top:3px solid var(--outline);padding:11px 0;
  transform:translateY(100%);transition:transform .55s cubic-bezier(.2,1.4,.4,1) 3.6s}
.hero.is-on .ticker{transform:none}
.ticker-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:tick 26s linear infinite}
.ticker-track span{font-family:var(--rounded);font-weight:800;font-size:13.5px;color:#fff;letter-spacing:.08em;padding:0 18px}
.ticker-track i{font-style:normal;color:var(--accent)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 仮の次セクション ---------- */
.section{padding:130px 0}
.section--light{background:#fff;border-top:1px solid var(--line)}
.container{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--blue);margin-bottom:18px}
.section-title{font-size:clamp(26px,3.4vw,44px);font-weight:900;line-height:1.4}

/* ---------- リビール ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal.in{opacity:1;transform:none}
.revealall .reveal{opacity:1!important;transform:none!important;transition:none!important}
.revealall .fv-title .ch,.revealall .fv-logo,.revealall .robo,.revealall .quest.in{animation-duration:0s!important;animation-delay:0s!important}
.revealall .hill,.revealall .fv-title em::after,.revealall .site-nav,.revealall .fv-sub,.revealall .fv-cta,.revealall .hud,.revealall .ticker,.revealall .fv-hint,.revealall .fv-eyebrow{transition-duration:0s!important;transition-delay:0s!important}

/* ---------- SP ---------- */
@media (max-width:734px){
  .hero-inner{justify-content:center;padding-top:84px;padding-bottom:15svh}
  .fv-title{font-size:clamp(17px,4.6vw,21px)}
    .fv-title .ch{-webkit-text-stroke:4px var(--outline);text-shadow:0 3px 0 var(--outline)}
  .fv-logo{width:min(78vw,340px)}
  .fv-cta{gap:10px}
  .cta-ghost{padding:13px 22px}
  .robo{right:14px;transform:translateY(120px) scale(.4);bottom:3svh;width:112px}
  .fv-logo img{filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 5px 0 rgba(27,42,107,.85))}
  .hero.is-on .robo{animation:roboInSP .7s cubic-bezier(.2,1.7,.4,1) .55s both}
    .hud{top:84px;right:14px;padding:6px 13px 8px;border-width:2px}
  .hud-count{font-size:20px}
  .hud-label{font-size:9.5px}
  .fv-hint{display:none}
  .hill{height:15svh}
  .cloud.c3{display:none}
  .nav-logo{width:112px;border-width:2.5px;box-shadow:0 4px 0 var(--outline)}
  .nav-cta{font-size:12.5px;padding:10px 16px;border-width:2.5px;box-shadow:0 4px 0 var(--outline)}
  .quest{font-size:11.5px;padding:7px 10px;border-width:2.5px;box-shadow:0 3px 0 var(--outline)}
  .quest svg{width:18px;height:18px;flex:0 0 18px}
}
@keyframes roboInSP{from{opacity:0;transform:translateY(120px) scale(.4)}
  to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fv-title .ch,.fv-eyebrow,.fv-sub,.fv-cta,.site-nav,.badge,.robo,.hud,.ticker,.fv-hint{
    transition:none!important;animation-duration:0s!important;animation-delay:0s!important;opacity:1!important;transform:none!important}
  .loader{display:none}
  .ticker-track{animation:none}
}

/* ============================================================
   ステージ(スクロール没入パート・LP準拠) — 正典版
   ============================================================ */
.stage{position:relative;height:2400svh;background:var(--blue)}
.stage-view{position:sticky;top:0;height:100svh;overflow:hidden}
#stageBg{position:absolute;inset:0;width:100%;height:100%}
.stage-view .halftone{z-index:1}

/* --- ガイド会話バー --- */
.guide-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:3svh;z-index:20;
  display:flex;align-items:flex-end;gap:6px;width:min(900px,94vw);pointer-events:none}
.s-robo{position:relative;width:clamp(120px,11vw,158px);flex:0 0 auto}
.s-bubble{position:relative;width:fit-content;max-width:min(620px,60vw);min-height:64px;display:flex;align-items:center;
  margin:0 0 30px 10px;
  font-family:var(--rounded);font-weight:800;font-size:clamp(14px,1.3vw,17.5px);line-height:1.75;color:var(--ink);text-align:left;
  background:#fff;border:3px solid var(--outline);border-radius:20px;
  padding:15px 24px;box-shadow:0 5px 0 var(--outline);transform-origin:bottom left;opacity:0}
.s-bubble::before{content:'';position:absolute;left:-16px;bottom:14px;
  border:11px solid transparent;border-right:14px solid var(--outline);border-left:0}
.s-bubble::after{content:'';position:absolute;left:-10px;bottom:17px;
  border:8px solid transparent;border-right:11px solid #fff;border-left:0}

/* --- シーン共通 --- */
.scene{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:7svh clamp(18px,4vw,60px) 21svh;text-align:center;pointer-events:none}
.scene .fv-cta{pointer-events:auto;opacity:1!important;transform:none!important;transition:none!important}
.sc-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--rounded);font-weight:800;font-size:12.5px;letter-spacing:.18em;color:#fff;
  background:rgba(23,49,143,.5);border:2.5px solid rgba(255,255,255,.8);border-radius:9999px;padding:7px 18px;margin-bottom:8px}
.case-tag{font-size:11.5px;letter-spacing:.04em;background:var(--accent);color:var(--blue-deep);
  border-radius:9999px;padding:3px 12px;margin-right:-6px}
.sc-title{font-family:var(--rounded);font-weight:900;font-size:clamp(26px,3.7vw,48px);color:#fff;line-height:1.32;
  paint-order:stroke fill;-webkit-text-stroke:8px var(--outline);text-shadow:0 5px 0 var(--outline)}
.sc-title--big{font-size:clamp(32px,5.4vw,70px)}
.sc-text{font-size:clamp(14px,1.35vw,18px);font-weight:700;line-height:2;color:rgba(255,255,255,.95)}
.sp-br{display:none}
@media (max-width:734px){.sp-br{display:block}}

/* --- 幕1: 悩み --- */
.worry-row{display:flex;gap:clamp(12px,2vw,26px);margin-top:26px;align-items:stretch}
.w-card{position:relative;width:min(370px,30vw);background:#fff;border:3px solid var(--outline);border-radius:22px;
  box-shadow:0 6px 0 var(--outline);padding:24px 24px 16px;text-align:left}
.w-card .w-num{font-family:'DM Sans',sans-serif;font-weight:900;font-size:17px;color:#fff;background:var(--blue);
  border:2.5px solid var(--outline);border-radius:9999px;padding:3px 13px}
.w-card p{margin-top:14px;font-weight:800;font-family:var(--rounded);font-size:clamp(15px,1.4vw,20px);line-height:1.85;color:var(--ink)}
.w-card b{color:var(--blue)}
.w-card img{width:58%;margin:10px auto 0}

/* --- 幕2: サービス9種 --- */
.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  margin-top:18px;width:min(1180px,92vw)}
.sv-card{display:flex;gap:12px;align-items:flex-start;background:#fff;border:3px solid var(--outline);border-radius:18px;
  box-shadow:0 5px 0 var(--outline);padding:15px 16px;text-align:left}
.sv-ic{flex:0 0 44px;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#eaf1ff,#dbe7ff);border:2.5px solid var(--outline);color:var(--blue)}
.sv-ic svg{width:24px;height:24px}
.sv-no{font-family:'DM Sans',sans-serif;font-weight:900;font-size:12px;color:var(--blue)}
.sv-bd{min-width:0}
.sv-t{font-family:var(--rounded);font-weight:900;font-size:clamp(13.5px,1.2vw,17px);color:var(--ink);margin:2px 0 5px}
.sv-s{font-weight:700;font-size:clamp(10.5px,0.9vw,12px);color:var(--gray);line-height:1.65}

/* --- 幕3: 事例 --- */
.case-row{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.6vw,40px);margin-top:14px;width:min(1280px,94vw)}
.case-cols{flex:0 0 clamp(340px,30vw,430px);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.case-panel{border-radius:20px;padding:18px 22px 14px;text-align:left;
  border:3px solid var(--outline);box-shadow:0 5px 0 var(--outline)}
.case-before{background:#e9edf7}
.case-before .case-label{background:#767f93}
.case-after{background:#fff}
.case-after .case-label{background:var(--blue)}
.case-label{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:900;font-size:12px;letter-spacing:.14em;
  color:#fff;border-radius:9999px;padding:3px 13px;border:2.5px solid var(--outline)}
.case-panel p{margin-top:9px;font-family:var(--rounded);font-weight:800;font-size:clamp(13px,1.1vw,15.5px);line-height:1.7;color:var(--ink)}
.case-panel p b{color:var(--blue-deep);background:linear-gradient(transparent 62%,rgba(254,217,66,.85) 62%)}
.case-before p b{color:#c2452f;background:none}
.case-kpi{display:flex;align-items:baseline;gap:8px;margin-top:9px!important;border-top:2px dashed rgba(21,21,43,.16);padding-top:7px}
.case-kpi em{font-style:normal;font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(32px,3vw,42px);color:var(--blue);line-height:1}
.case-kpi small{font-family:var(--rounded);font-weight:900;font-size:16px;color:var(--blue)}
.case-kpi span{font-size:11.5px;font-weight:700;color:var(--gray);margin-left:auto;text-align:right;line-height:1.5}
.case-arrow{align-self:center;font-size:22px;color:#fff;text-shadow:0 2px 0 var(--outline);transform:rotate(90deg);margin:-2px 0;line-height:1}

/* モック: ブラウザ風フレーム(自然なアスペクト・下だけカット) */
.mock-stage{position:relative;margin-top:0;width:min(760px,50vw);max-height:56svh;overflow:hidden;
  border-radius:18px;border:4px solid var(--outline);box-shadow:0 9px 0 var(--outline);background:#fff;padding-top:34px}
.mock-stage::before{content:'';position:absolute;top:0;left:0;right:0;height:34px;background:#e8edfa;
  border-bottom:2.5px solid var(--outline)}
.mock-stage::after{content:'';position:absolute;top:11px;left:16px;width:12px;height:12px;border-radius:50%;
  background:#ff8f8f;box-shadow:20px 0 0 #ffd66b,40px 0 0 #7ee2a8;border:none}
.mock-stage img{width:100%;height:auto;display:block}
.case-shot-cap{position:absolute;right:12px;bottom:12px;font-family:var(--rounded);font-weight:800;font-size:12.5px;color:#fff;
  background:rgba(23,49,143,.85);border:2px solid rgba(255,255,255,.75);border-radius:9999px;padding:6px 16px;z-index:2}

/* --- 幕4: 理由(2トーンカード) --- */
.r-row{display:flex;gap:clamp(16px,2.4vw,34px);margin-top:32px;align-items:stretch}
.r-card{position:relative;width:min(350px,29vw);background:#fff;border:3.5px solid var(--outline);border-radius:24px;
  box-shadow:0 8px 0 var(--outline);overflow:hidden;text-align:center;padding-bottom:24px}
.r-card:nth-child(1){transform:rotate(-1.2deg)}
.r-card:nth-child(2){transform:translateY(-10px)}
.r-card:nth-child(3){transform:rotate(1.2deg)}
.r-no{position:absolute;top:12px;left:12px;z-index:2;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-weight:900;font-size:15px;color:var(--blue-deep);
  background:var(--accent);border:3px solid var(--outline);border-radius:50%}
.r-top{position:relative;height:128px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#5ea0ff,#2f63f7);border-bottom:3.5px solid var(--outline)}
.r-top::before{content:'';position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.95) 1.2px,transparent 1.2px);background-size:16px 16px}
.r-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;
  background:#fff;border:3px solid var(--outline);color:var(--blue);box-shadow:0 5px 0 rgba(27,42,107,.55)}
.r-ic svg{width:44px;height:44px}
.r-t{font-family:var(--rounded);font-weight:900;font-size:clamp(18px,1.7vw,23px);color:var(--ink);margin:20px 14px 8px}
.r-s{font-weight:700;font-size:clamp(12.5px,1.1vw,15px);color:var(--gray);line-height:1.95;padding:0 18px}

/* --- 幕5: 流れ(ステッパー) --- */
.f-steps{position:relative;display:flex;gap:clamp(10px,1.5vw,22px);margin-top:40px;align-items:stretch;justify-content:center}
.f-steps::before{content:'';position:absolute;left:4%;right:4%;top:50%;height:4px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 14px,transparent 14px 26px);z-index:-1}
.f-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--rounded);color:var(--ink);width:clamp(150px,14.5vw,210px);
  background:#fff;border:3px solid var(--outline);border-radius:20px;padding:24px 14px 16px;box-shadow:0 6px 0 var(--outline)}
.f-step b{position:absolute;top:-14px;left:-12px;width:36px;height:36px;font-size:16px;font-weight:900;color:var(--blue-deep);
  background:var(--accent);display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--outline)}
.f-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;
  background:linear-gradient(180deg,#eaf1ff,#dbe7ff);border:2.5px solid var(--outline);color:var(--blue)}
.f-ic svg{width:28px;height:28px}
.f-step span{font-weight:900;font-size:clamp(13px,1.2vw,16.5px);white-space:nowrap}
.f-step small{font-weight:700;font-size:clamp(10px,0.9vw,12px);color:var(--gray);line-height:1.6}
.f-arrow{display:none}

/* --- 幕6: ラスト --- */
.sc-final{justify-content:center}
.f-logo{width:clamp(240px,28vw,410px);margin-bottom:14px;
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 7px 0 rgba(27,42,107,.95))}
.sc-final .fv-cta{margin-top:24px}
.final-badges{display:flex;gap:10px;margin-top:22px}
.final-badges .hint-chip{background:#fff;color:var(--blue-deep);border:2.5px solid var(--outline);box-shadow:0 4px 0 var(--outline);
  font-size:13px;padding:9px 18px}

/* --- SP --- */
@media (max-width:734px){
  .guide-bar{bottom:2svh;width:96vw;gap:2px}
  .s-robo{width:96px}
  .s-bubble{min-height:60px;font-size:12.5px;padding:10px 14px;margin-bottom:8px}
  .scene{padding:6svh 16px 19svh;justify-content:flex-start;padding-top:9svh}
  .worry-row{flex-direction:column;gap:10px;margin-top:14px}
  .w-card{width:min(430px,88vw);display:flex;align-items:center;gap:8px;padding:12px 16px}
  .w-card img{width:74px;margin:0 0 0 auto}
  .w-card p{margin-top:0}
  .w-card .w-num{position:absolute;top:-10px;left:-8px;font-size:12px}
  .sv-grid{grid-template-columns:1fr;width:92vw;gap:8px;margin-top:12px}
  .sv-card{padding:11px 12px;gap:8px}
  .sv-ic{flex:0 0 32px;width:32px;height:32px;border-radius:10px}
  .sv-ic svg{width:18px;height:18px}
  .sv-no{font-size:10.5px}
  .sv-t{font-size:14px;line-height:1.6;margin:1px 0 0}
  .sv-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px}
  .sv-ic svg{width:17px;height:17px}
  .sv-s{display:none}
  .case-row{flex-direction:column;gap:8px;margin-top:10px;width:90vw}
  .case-cols{flex:0 0 auto;width:100%}
  .case-panel{max-width:none;padding:12px 15px 10px}
  .case-arrow{display:none}
  .mock-stage{width:90vw;max-height:26svh;padding-top:26px}
  .mock-stage::before{height:26px}
  .mock-stage::after{top:8px;left:12px;width:9px;height:9px;box-shadow:15px 0 0 #ffd66b,30px 0 0 #7ee2a8}
  .case-shot-cap{bottom:8px;font-size:11px;padding:4px 12px}
  .case-kpi em{font-size:28px}
  .r-row{flex-direction:column;gap:12px;margin-top:14px}
  .r-card{width:88vw;display:flex;align-items:center;gap:0;text-align:left;padding-bottom:0;transform:none!important}
  .r-top{height:auto;width:86px;align-self:stretch;border-bottom:none;border-right:3px solid var(--outline);flex:0 0 86px}
  .r-ic{width:52px;height:52px}
  .r-ic svg{width:27px;height:27px}
  .r-no{top:-10px;left:-8px;width:28px;height:28px;font-size:12px}
  .r-t{margin:12px 14px 4px;font-size:16px}
  .r-s{font-size:11.5px;padding:0 14px 12px}
  .r-s br{display:none}
  .f-steps{flex-wrap:wrap;gap:12px 8px;margin-top:22px;width:94vw}
  .f-steps::before{display:none}
  .f-step{flex-direction:row;width:88vw;padding:10px 12px 10px 16px;gap:10px;justify-content:flex-start}
  .f-ic{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
  .f-ic svg{width:19px;height:19px}
  .f-step b{width:26px;height:26px;font-size:12px;top:-10px;left:-8px}
  .f-step small{margin-left:auto;text-align:right}
  .final-badges{flex-wrap:wrap;justify-content:center}
}

/* --- 中扉(事例紹介へ) --- */
.intro-tags{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.intro-tag{font-family:var(--rounded);font-weight:900;font-size:clamp(14px,1.3vw,18px);color:var(--blue-deep);
  background:#fff;border:3px solid var(--outline);border-radius:9999px;padding:12px 26px;box-shadow:0 5px 0 var(--outline)}
@media (max-width:734px){.intro-tag{font-size:12.5px;padding:8px 16px}}

/* --- SYSTEM: エージェント並走 --- */
.sys-row{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,2vw,30px);margin-top:20px;width:min(1100px,94vw)}
.sys-panel{flex:1;max-width:480px;border-radius:22px;padding:20px 22px;text-align:left;
  border:3px solid var(--outline);box-shadow:0 6px 0 var(--outline)}
.sys-before{background:#e9edf7}
.sys-after{background:#fff}
.sys-before .case-label{background:#767f93}
.sys-after .case-label{background:var(--blue)}
.sys-line{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:2.5px solid var(--outline);border-radius:13px;padding:11px 16px;margin-top:10px}
.sys-before .sys-line{background:#f7f9fe}
.sys-line span{font-family:var(--rounded);font-weight:900;font-size:clamp(13px,1.15vw,16px);color:var(--ink)}
.sys-line em{font-style:normal;font-weight:800;font-size:clamp(11.5px,1vw,13.5px);color:var(--gray)}
.sys-line.is-agent{background:linear-gradient(90deg,#eef4ff,#fff)}
.sys-line.is-agent span{color:var(--blue-deep)}
.sys-line.is-agent em{color:var(--blue)}
.sys-dn{display:block;text-align:center;color:#9aa3bd;font-size:11px;font-style:normal;margin-top:6px}
.sys-total{margin-top:14px;font-family:var(--rounded);font-weight:900;font-size:clamp(15px,1.4vw,19px);
  border-radius:13px;padding:12px 16px;text-align:center;border:2.5px solid var(--outline)}
.sys-total.is-slow{background:#d7dbe8;color:#4c5470}
.sys-total.is-fast{background:linear-gradient(180deg,#ffe36b,var(--accent));color:var(--blue-deep)}

/* --- PLAN: 料金 --- */
.pl-row{display:flex;gap:clamp(14px,2vw,28px);margin-top:26px;align-items:stretch}
.pl-card{position:relative;width:min(300px,26vw);background:#fff;border:3.5px solid var(--outline);border-radius:24px;
  box-shadow:0 7px 0 var(--outline);padding:26px 22px 22px;text-align:center}
.pl-card.is-main{transform:translateY(-10px);border-color:var(--blue-deep);box-shadow:0 9px 0 var(--blue-deep)}
.pl-tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);
  font-family:var(--rounded);font-weight:900;font-size:13px;color:var(--blue-deep);
  background:var(--accent);border:3px solid var(--outline);border-radius:9999px;padding:5px 18px}
.pl-name{font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(19px,1.8vw,25px);color:var(--blue)}
.pl-hours{display:inline-block;margin-top:10px;font-family:var(--rounded);font-weight:800;font-size:clamp(12.5px,1.1vw,15px);
  color:var(--ink);background:#eef2fc;border:2.5px solid var(--outline);border-radius:9999px;padding:6px 18px}
.pl-price{margin-top:14px;font-family:var(--rounded);font-weight:900;font-size:clamp(17px,1.6vw,22px);color:var(--ink)}
.pl-price em{font-style:normal;font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(44px,4.4vw,64px);color:var(--blue);line-height:1}
.pl-note{margin-top:22px;font-weight:700;font-size:clamp(11.5px,1.05vw,13.5px);color:rgba(255,255,255,.92)}
.pl-perks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin-top:14px}
.pl-zero{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--rounded);font-weight:900;
  font-size:clamp(14px,1.3vw,18px);color:var(--blue-deep);
  background:linear-gradient(180deg,#ffe36b,var(--accent));border:3px solid var(--outline);border-radius:9999px;
  padding:9px 24px;box-shadow:0 5px 0 var(--outline);transform:rotate(-2deg)}
.pl-zero em{font-style:normal;font-family:'DM Sans',sans-serif;font-weight:900;font-size:1.7em;line-height:1}
.pl-perk{font-family:var(--rounded);font-weight:800;font-size:clamp(12px,1.05vw,14px);color:#fff;
  border:2.5px solid rgba(255,255,255,.85);border-radius:9999px;padding:9px 18px;background:rgba(23,49,143,.4)}

/* --- OUTPUT: 成果イメージ --- */
.o-row{display:flex;gap:clamp(14px,2vw,28px);margin-top:26px;align-items:stretch}
.o-card{width:min(320px,27vw);background:#fff;border:3px solid var(--outline);border-radius:22px;
  box-shadow:0 6px 0 var(--outline);padding:24px 20px;text-align:center}
.o-label{font-family:var(--rounded);font-weight:800;font-size:clamp(12.5px,1.1vw,15px);color:#fff;
  background:var(--blue);border:2.5px solid var(--outline);border-radius:9999px;padding:6px 16px;display:inline-block}
.o-big{margin-top:16px;font-family:var(--rounded);font-weight:900;font-size:clamp(19px,1.9vw,26px);color:var(--ink)}
.o-big em{font-style:normal;font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(40px,4vw,58px);color:var(--blue);line-height:1;padding:0 3px}
.o-sub{margin-top:12px;font-weight:700;font-size:clamp(11.5px,1vw,13.5px);color:var(--gray);line-height:1.9}

@media (max-width:734px){
  .sys-row{flex-direction:column;width:90vw;gap:10px;margin-top:10px}
  .sys-panel{max-width:none;padding:13px 15px}
  .pl-row{flex-direction:column;gap:14px;margin-top:16px}
  .pl-card{width:82vw;padding:16px 18px}
  .pl-card.is-main{transform:none}
  .o-row{flex-direction:column;gap:10px;margin-top:14px}
  .o-card{width:86vw;padding:14px 16px}
}

/* --- 実態パート: ポップの文法(輪郭線/ハードシャドウ/ステッカー)×白基調 --- */
.solid{position:relative;z-index:10;color:var(--ink);border-radius:44px 44px 0 0;margin-top:-44px;word-break:auto-phrase;
  background:#f6f8fd;
  background-image:radial-gradient(rgba(23,49,143,.05) 1.4px,transparent 1.4px);
  background-size:26px 26px}
.sd-sec{max-width:1080px;margin:0 auto;padding:clamp(72px,8.5vw,118px) 24px 0}
.sd-sec:last-of-type{padding-bottom:clamp(72px,8.5vw,118px)}
.sd-eyebrow{display:inline-flex;align-items:center;font-family:'DM Sans',sans-serif;font-weight:900;font-size:12px;
  letter-spacing:.2em;color:var(--blue-deep);background:#fff;border:2px solid var(--outline);border-radius:9999px;
  padding:7px 18px;box-shadow:0 3px 0 var(--outline)}
.sd-title{margin-top:20px;font-family:var(--rounded);font-weight:900;font-size:clamp(25px,3.2vw,40px);color:var(--ink);line-height:1.45}
.sd-bar{display:block;width:54px;height:10px;margin-top:16px;background:linear-gradient(180deg,#ffe36b,var(--accent));
  border:2px solid var(--outline);border-radius:9999px}
.sd-about{margin-top:24px;max-width:640px}
.sd-about p{font-size:clamp(14px,1.25vw,16px);font-weight:500;line-height:2.15;color:#3a4157}
.sd-about p+p{margin-top:14px}

/* ABOUT右: ロボくんのミニジオラマ(FVの世界観を持ち込む) */
.sd-2col{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.sd-scene{position:relative;height:clamp(300px,27vw,390px);border:3px solid var(--outline);border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#6fb2ff 0%,#2f63f7 92%);box-shadow:0 8px 0 var(--outline)}
.sd-scene-halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.15) 1.6px,transparent 1.6px);background-size:20px 20px}
.sd-hill{position:absolute;left:-2%;bottom:-1px;width:104%;height:27%}
.sd-robo{position:absolute;left:50%;bottom:2%;width:clamp(200px,19vw,252px);margin-left:calc(clamp(200px,19vw,252px) / -2);
  animation:sdBob 3.4s ease-in-out infinite}
.sd-cloud{position:absolute}
.sd-cloud.a{top:7%;left:36%;width:110px}
.sd-cloud.b{top:34%;right:20%;width:66px}
.sd-spark{position:absolute}
.sd-spark.s1{top:24%;left:24%;width:26px;animation:sdTwinkle 2.6s ease-in-out infinite}
.sd-spark.s2{top:14%;right:30%;width:16px;animation:sdTwinkle 3.2s ease-in-out .8s infinite}
@keyframes sdTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes sdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.sd-chip{position:absolute;display:flex;flex-direction:column;gap:1px;align-items:center;background:#fff;
  border:2.5px solid var(--outline);border-radius:14px;padding:9px 17px;box-shadow:0 4px 0 var(--outline)}
.sd-chip small{font-family:var(--rounded);font-weight:800;font-size:10.5px;color:var(--gray)}
.sd-chip b{font-family:var(--rounded);font-weight:900;font-size:15.5px;color:var(--blue);white-space:nowrap}
.sd-chip{animation:sdChipBob 4.2s ease-in-out infinite}
@keyframes sdChipBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.sd-chip.c1{top:9%;left:7%;transform:rotate(-4deg)}
.sd-chip.c2{top:20%;right:6%;transform:rotate(3deg);animation-delay:1.1s}
.sd-chip.c3{bottom:17%;left:8%;transform:rotate(3deg);animation-delay:2.1s}
.sd-chip.c4{bottom:29%;right:7%;transform:rotate(-3deg);animation-delay:3.2s}

/* TEAM: 輪郭線カード＋ナンバリング */
.sd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.sd-card{position:relative;background:#fff;border:2.5px solid var(--outline);border-radius:22px;
  padding:28px 26px 26px;box-shadow:0 6px 0 var(--outline)}
.sd-no{position:absolute;top:20px;right:24px;font-family:'DM Sans',sans-serif;font-weight:900;font-size:36px;
  color:#eaf1ff;-webkit-text-stroke:1.5px #c4d5f7;line-height:1}
.sd-ic{display:inline-flex;width:50px;height:50px;border-radius:15px;
  background:linear-gradient(180deg,#ffe36b,var(--accent));border:2.5px solid var(--outline);color:var(--blue-deep);
  align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 3px 0 var(--outline)}
.sd-ic svg{width:52%;height:52%}
.sd-card-tag{display:inline-block;font-family:var(--rounded);font-weight:800;font-size:12.5px;color:var(--gray);
  background:#f1f5fd;border-radius:9999px;padding:5px 14px}
.sd-card-tag b{color:var(--blue)}
.sd-card-t{margin-top:14px;font-family:var(--rounded);font-weight:900;font-size:clamp(15.5px,1.35vw,18px);color:var(--ink);line-height:1.6}
.sd-card-s{margin-top:10px;font-size:13.5px;font-weight:500;line-height:2;color:#5a6178}

/* FAQ: 輪郭線アコーディオン＋黄プラス */
.faq-list{margin-top:26px;max-width:840px}
.faq-item{background:#fff;border:2.5px solid var(--outline);border-radius:16px;margin-top:14px;overflow:hidden;
  box-shadow:0 4px 0 var(--outline)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--rounded);font-weight:800;font-size:clamp(13.5px,1.2vw,15.5px);color:var(--ink);line-height:1.6}
.faq-q span{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffe36b,var(--accent));color:var(--blue-deep);border:2px solid var(--outline);
  border-radius:50%;font-weight:900;transition:transform .3s}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.faq-item.open .faq-a{max-height:260px}
.faq-a p{padding:0 22px 20px;font-size:14px;font-weight:500;line-height:2.05;color:#5a6178}

/* COMPANY */
.sd-tablecard{margin-top:30px;width:min(760px,100%);background:#fff;border:2.5px solid var(--outline);border-radius:20px;
  padding:10px 30px;box-shadow:0 6px 0 var(--outline)}
.sd-table{width:100%;border-collapse:collapse}
.sd-table tr:last-child th,.sd-table tr:last-child td{border-bottom:none}
.sd-table th,.sd-table td{border-bottom:1.5px solid #e3e9f8;padding:18px 8px;font-size:14.5px;text-align:left;line-height:1.8}
.sd-table th{width:150px;font-family:var(--rounded);font-weight:800;color:var(--gray)}
.sd-table td{font-weight:500;color:#3a4157}
.sd-table a{color:var(--blue);font-weight:700;text-decoration:none}
.sd-table a:hover{text-decoration:underline}

/* 最終CTA帯 */
.sd-cta{padding-bottom:clamp(72px,8.5vw,118px)}
.sd-band{position:relative;overflow:hidden;border:3px solid var(--outline);border-radius:28px;
  background:linear-gradient(120deg,var(--blue-deep) 0%,#2c2b8f 55%,#3a2fae 100%);box-shadow:0 8px 0 var(--outline)}
.sd-band-deco{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% -20%, rgba(47,99,247,.55), transparent 44%),
    radial-gradient(circle at -6% 120%, rgba(47,99,247,.4), transparent 40%),
    radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.4px);
  background-size:auto,auto,20px 20px}
.sd-band-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:clamp(34px,4.5vw,56px) clamp(28px,4.5vw,64px)}
.sd-band-t{font-family:var(--rounded);font-weight:900;font-size:clamp(21px,2.6vw,32px);color:#fff;line-height:1.5}
.sd-band-s{margin-top:10px;font-size:clamp(12.5px,1.1vw,14.5px);font-weight:500;color:rgba(255,255,255,.82);line-height:1.9}
.sd-band-btn{flex:0 0 auto;font-size:clamp(14px,1.2vw,16.5px);padding:16px 38px}

/* FOOTER */
.sd-foot{border-top:1.5px solid #e3e9f8;padding:44px 24px 40px;text-align:center;background:#fff}
.sd-foot-logo{display:block;height:34px;width:auto;margin:0 auto}
.nw{white-space:nowrap}
.sd-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:22px}
.sd-foot-nav a{font-size:13px;font-weight:700;color:#5a6178;text-decoration:none}
.sd-foot-nav a:hover{color:var(--blue)}
.sd-copy{margin-top:20px;font-family:'DM Sans',sans-serif;font-size:12px;color:#9aa3bd}
@media (max-width:900px){
  .sd-2col{grid-template-columns:1fr;gap:30px}
  .sd-band-in{flex-direction:column;text-align:center}
}
@media (max-width:734px){
  .sd-cards{grid-template-columns:1fr;gap:14px}
  .sd-table th{width:104px}
  .sd-tablecard{padding:4px 18px}
  .sd-scene{height:300px}
}

/* --- グローバルヘッダー: 下スクロールで退避・上スクロールで復帰 --- */
.g-head{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  width:min(1240px,96vw);padding:9px 12px 9px 22px;
  background:#fff;border:3px solid var(--outline);border-radius:9999px;
  box-shadow:0 5px 0 var(--outline);
  transition:transform .38s cubic-bezier(.4,0,.2,1)}
.g-head.is-hidden{transform:translate(-50%,calc(-100% - 20px))}
.g-logo{display:flex;align-items:center;flex:0 0 auto}
.g-logo img{height:clamp(34px,3vw,42px);width:auto;display:block}
.g-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin-left:auto}
.g-links a{font-family:var(--rounded);font-weight:800;font-size:clamp(12.5px,1.05vw,14.5px);color:var(--ink);
  text-decoration:none;padding:6px 4px;border-radius:8px;transition:color .18s}
.g-links a:hover{color:var(--blue)}
.g-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--rounded);font-weight:900;font-size:clamp(12.5px,1.05vw,14.5px);color:var(--blue-deep);
  background:linear-gradient(180deg,#ffe36b,var(--accent));border:2.5px solid var(--outline);border-radius:9999px;
  padding:9px 20px;text-decoration:none;box-shadow:0 4px 0 var(--outline);
  transition:transform .18s,box-shadow .18s}
.g-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--outline)}
.g-cta .arrow{font-family:'DM Sans',sans-serif;font-weight:900}
@media (max-width:900px){.g-links{display:none}.g-head{width:94vw;padding:8px 10px 8px 16px}.g-cta{margin-left:auto}}

/* --- SYSTEM 増強: アイブロウ/オーケストレーター/価値ステートメント --- */
.sc-eyebrow{font-family:var(--rounded);font-weight:800;font-size:clamp(12.5px,1.15vw,15.5px);color:var(--accent);
  letter-spacing:.06em;text-shadow:0 2px 0 rgba(23,49,143,.55)}
#scSystem .sc-title{font-size:clamp(21px,2.6vw,34px)}
#scSystem .sys-row{margin-top:10px}
#scSystem .sys-panel{padding:13px 16px}
#scSystem .sys-line{margin-top:6px;padding:6px 12px}
#scSystem .sys-before{display:flex;flex-direction:column;justify-content:space-evenly;align-items:stretch}
#scSystem .sys-total{margin-top:9px;padding:8px 12px;font-size:clamp(13px,1.15vw,15.5px)}
.sys-orch{display:flex;flex-direction:column;gap:0;margin-top:8px;padding:6px 12px;border-radius:12px;text-align:center;
  background:linear-gradient(120deg,var(--blue) 0%,#5b46e0 100%);border:2.5px solid var(--outline);box-shadow:0 3px 0 var(--outline)}
.sys-orch b{font-family:var(--rounded);font-weight:900;font-size:clamp(13px,1.1vw,15px);color:#fff}
.sys-orch span{font-weight:700;font-size:clamp(10px,.85vw,11.5px);color:rgba(255,255,255,.85);letter-spacing:.04em}
.sys-links{display:flex;justify-content:space-around;height:9px;margin:2px 34px -3px}
.sys-links i{width:0;border-left:3px dotted rgba(47,99,247,.55)}
.sys-total b{color:inherit}
.sys-note{margin-top:8px;padding:5px 10px;border:2px dashed rgba(47,99,247,.45);border-radius:11px;
  font-weight:700;font-size:clamp(10px,.9vw,11.5px);color:var(--blue-deep);line-height:1.65;background:#f4f8ff}
.sys-value{margin-top:10px;width:min(860px,86vw);font-family:var(--rounded);font-weight:800;font-size:clamp(12.5px,1.2vw,16px);
  color:#fff;line-height:1.75;background:linear-gradient(120deg,var(--blue-deep),#3a2fae);border:3px solid var(--outline);
  border-radius:9999px;padding:9px 26px;box-shadow:0 5px 0 var(--outline)}
.sys-value b{color:var(--accent)}

/* --- PLAN 増強: アイコン/対応領域チップ --- */
#scPlan .sc-title{font-size:clamp(23px,2.9vw,38px)}
#scPlan .pl-row{margin-top:12px}
#scPlan .pl-card{padding:14px 20px 16px}
#scPlan .pl-price{margin-top:8px}
#scPlan .pl-price em{font-size:clamp(36px,3.2vw,46px)}
.pl-ic{display:inline-flex;width:clamp(34px,3vw,42px);height:clamp(34px,3vw,42px);border-radius:50%;
  background:#eef4ff;border:2.5px solid var(--outline);align-items:center;justify-content:center;color:var(--blue);
  margin-bottom:6px;box-shadow:0 3px 0 var(--outline)}
.pl-ic svg{width:58%;height:58%}
.pl-card.is-main .pl-ic{background:var(--accent);color:var(--blue-deep)}
.pl-doms{margin-top:14px;width:min(1080px,94vw)}
.pl-dom-label{font-family:var(--rounded);font-weight:900;font-size:clamp(13px,1.2vw,16px);color:#fff;
  text-shadow:0 2px 0 rgba(23,49,143,.55);letter-spacing:.08em}
.pl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 9px;margin-top:8px}
.pl-chip{font-family:var(--rounded);font-weight:800;font-size:clamp(11px,1vw,13.5px);color:var(--blue-deep);
  background:#fff;border:2.5px solid var(--outline);border-radius:9999px;padding:6px 15px;box-shadow:0 3px 0 var(--outline)}

/* --- OUTPUT 増強: アイコン/脚注スタット --- */
.o-ic{display:inline-flex;width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px);border-radius:50%;
  background:#eef4ff;border:2.5px solid var(--outline);align-items:center;justify-content:center;color:var(--blue);
  margin-bottom:10px;box-shadow:0 3px 0 var(--outline)}
.o-ic svg{width:56%;height:56%}
#scOutput .o-row{margin-top:18px}
.o-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;padding-top:11px;
  border-top:2px dashed rgba(21,21,43,.16);font-family:var(--rounded);font-weight:800;
  font-size:clamp(11px,1vw,13px);color:var(--blue-deep)}
.o-foot svg{width:16px;height:16px;flex:0 0 auto;color:var(--blue)}

@media (max-width:734px){
  #scSystem .sc-title{font-size:clamp(19px,5vw,24px)}
  .sys-orch{margin-top:6px;padding:6px 10px}
  .sys-links{margin:2px 20px -3px;height:9px}
  .sys-value{border-radius:22px;padding:10px 18px;margin-top:10px}
  .sys-note{margin-top:6px}
  .pl-doms{margin-top:10px}
  .pl-chips{gap:6px}
  .pl-chip{padding:5px 11px}
  .pl-ic,.o-ic{width:30px;height:30px;margin-bottom:4px}
  .o-foot{margin-top:8px;padding-top:7px}
  #scPlan .pl-card{padding:12px 16px 14px}
  #scPlan .pl-price em{font-size:32px}
}


/* ============================================================
   SP最適化パス(≤734px): シーンを1画面に収める圧縮レイアウト
   ============================================================ */
@media (max-width:734px){
  /* ステージ: シーンあたりのスクロール距離を1スワイプ相当に短縮 */
  .stage{height:1800svh}

  /* シーン共通: 余白とガイドバーを圧縮して可視領域を広げる */
  .scene{padding-top:5svh;padding-bottom:15svh;gap:8px}
  .s-robo{width:94px}
  .s-bubble{font-size:12px;line-height:1.6;padding:10px 14px;margin:0 0 16px 6px;min-height:0}
  .guide-bar{bottom:2svh}
  .sc-chip{font-size:11px;padding:6px 14px;margin-bottom:4px}

  /* SYSTEM: 2パネル+価値バンドを縦積みで収める */
  .sc-eyebrow{font-size:11px}
  #scSystem .sc-title{font-size:clamp(16.5px,4.4vw,21px)}
  #scSystem .sys-row{gap:8px;margin-top:4px}
  #scSystem .sys-panel{padding:9px 12px}
  #scSystem .sys-line{margin-top:5px;padding:5px 10px}
  #scSystem .sys-line span{font-size:11.5px}
  #scSystem .sys-line em{font-size:10px}
  #scSystem .sys-dn{display:none}
  #scSystem .sys-total{margin-top:6px;padding:6px 10px;font-size:11.5px}
  .sys-orch{margin-top:5px;padding:5px 10px}
  .sys-orch b{font-size:11.5px}
  .sys-orch span{font-size:9px}
  .sys-links{display:none}
  .sys-note{display:none}
  .sys-value{display:none}
  #scSystem .case-arrow{display:none}
  .sys-panel .case-label{font-size:10px;padding:4px 10px}

  /* PLAN: カードを横並び行に圧縮 */
  #scPlan .sc-title{font-size:clamp(20px,5.4vw,26px)}
  #scPlan .pl-row{gap:8px;margin-top:8px;width:92vw}
  #scPlan .pl-card{width:100%;padding:9px 14px;display:flex;align-items:center;gap:10px;text-align:left;border-radius:16px}
  #scPlan .pl-ic{width:26px;height:26px;margin:0;border-radius:9px;box-shadow:0 2px 0 var(--outline)}
  #scPlan .pl-name{font-size:15px;min-width:86px}
  #scPlan .pl-hours{margin:0;font-size:10px;padding:3px 8px}
  #scPlan .pl-price{margin:0 0 0 auto;font-size:12px;white-space:nowrap}
  #scPlan .pl-price em{font-size:24px}
  #scPlan .pl-tag{top:50%;transform:translateY(-50%) rotate(0);left:auto;right:96px;font-size:9.5px;padding:3px 9px}
  .pl-doms{margin-top:8px}
  .pl-dom-label{font-size:10.5px}
  .pl-chips{gap:5px;margin-top:6px}
  .pl-chip{font-size:9.5px;padding:4px 9px;border-width:2px;box-shadow:0 2px 0 var(--outline)}
  .pl-perks{gap:7px;margin-top:8px}
  .pl-zero{font-size:12.5px;padding:6px 15px;border-width:2.5px;box-shadow:0 3px 0 var(--outline)}
  .pl-perk{font-size:10px;padding:5px 11px;border-width:2px}

  /* OUTPUT: カードを圧縮 */
  #scOutput .sc-title{font-size:clamp(20px,5.4vw,26px)}
  #scOutput .sc-text{font-size:11.5px;line-height:1.7}
  #scOutput .o-row{gap:8px;margin-top:8px}
  #scOutput .o-card{width:92vw;padding:10px 14px;border-radius:16px}
  #scOutput .o-ic{display:none}
  #scOutput .o-label{font-size:10.5px;padding:4px 12px}
  #scOutput .o-big{margin-top:6px;font-size:15px}
  #scOutput .o-big em{font-size:26px}
  #scOutput .o-sub{margin-top:4px;font-size:10.5px;line-height:1.65}
  #scOutput .o-sub br{display:none}
  #scOutput .o-foot{margin-top:6px;padding-top:6px;font-size:9.5px}
  #scOutput .pl-note{margin-top:8px;font-size:10px}

  /* WORRY/CASE/REASON/FLOWの微調整 */
  .sc-title{line-height:1.4}
  /* PC用の強制改行はSPでは解除(auto-phraseに任せる) */
  .w-card p br,.case-panel p br,.scene .sc-text br{display:none}
  .w-card p{font-size:13.5px;line-height:1.95}
  .sc-case .sc-title{font-size:clamp(19px,5.2vw,24px)}
  .case-row{gap:10px;margin-top:4px}
  .case-cols{gap:8px}
  .case-panel{padding:12px 14px}
  .case-panel p{font-size:12.5px;line-height:1.85}
  .case-kpi{margin-top:7px!important;padding-top:6px}
  .case-kpi em{font-size:22px}
  .case-kpi small{font-size:12px}
  .case-kpi span{font-size:10px}
  .case-shot-cap{font-size:9.5px;padding:5px 12px}
  .mock-stage{margin-top:2px}
}


/* ============================================================
   フォールバック: アニメ不可環境(GSAP不通/reduced-motion/JS死)
   — 全幕重なり事故を防ぎ、通常の縦読みページとして成立させる
   ============================================================ */
/* JSあり通常モード: タイムライン構築までシーンはCSSで非表示(FOUC/重なり防止) */
html.js:not(.static-mode) .scene{opacity:0;visibility:hidden}

/* 静的モード: ステージを通常フローに展開 */
html.static-mode .stage{height:auto}
html.static-mode .stage-view{position:static;height:auto;overflow:visible}
html.static-mode #stageBg,html.static-mode .guide-bar{display:none}
html.static-mode .scene{position:relative;inset:auto;opacity:1!important;visibility:visible!important;
  transform:none!important;min-height:0;padding:72px 20px;pointer-events:auto}
html.static-mode:not(.sp-live) .scene *{opacity:1!important;visibility:visible!important;transform:none!important}
html.static-mode .fv-logo{opacity:1;transform:none}
html.static-mode .robo{opacity:1}
html.static-mode .hud,html.static-mode .ticker{display:none}
html.static-mode .fv-eyebrow,html.static-mode .fv-sub,html.static-mode .fv-cta{opacity:1;transform:none}
/* 静的モード: シーンごとに世界の色を引き継ぐ(WebGLなしの色の旅) */
html.static-mode .stage{background:none}
html.static-mode #scWorry{background:linear-gradient(180deg,#4b8dff,#2f63f7)}
html.static-mode #scServices{background:linear-gradient(180deg,#2f63f7,#0d7fa6)}
html.static-mode #scCasesIntro{background:linear-gradient(180deg,#0d7fa6,#6a4bd8)}
html.static-mode #scC1,html.static-mode #scC2,html.static-mode #scC3,html.static-mode #scC6,
html.static-mode #scC5,html.static-mode #scC4,html.static-mode #scC7,html.static-mode #scC8{background:linear-gradient(180deg,#8d6bf0,#5636c8)}
html.static-mode #scC1{background:linear-gradient(180deg,#6a4bd8,#5636c8)}
html.static-mode #scSystem{background:linear-gradient(180deg,#5636c8,#c24a72)}
html.static-mode #scPlan,html.static-mode #scOutput{background:linear-gradient(180deg,#e0705f,#b83d75)}
html.static-mode #scReasons{background:linear-gradient(180deg,#b83d75,#2649d8)}
html.static-mode #scFlow{background:linear-gradient(180deg,#2649d8,#2f63f7)}
html.static-mode #scFinal{background:linear-gradient(180deg,#5a71f0,#2246d8)}
html.static-mode .scene{padding:64px 20px}
html.static-mode .stage-view > .halftone{display:none}


/* SPライブ演出: リビール(translateプロパティ=rotate等のtransformと共存) */
html.sp-live .ani{opacity:0;translate:0 26px;transition:opacity .55s ease,translate .55s cubic-bezier(.2,.85,.3,1)}
html.sp-live .ani.rv{opacity:1;translate:0 0}
@media (hover:none){
  .cta-pill:active,.g-cta:active,.cta-ghost:active{transform:translateY(3px)}
  .sv-card:active,.w-card:active,.o-card:active,.r-card:active,.pl-card:active{transform:scale(.985)}
  .card:active{transform:translateY(-1px) scale(.99)}
}


/* SYSTEM: 1人が複数エージェントを同時に操るハブ図解 */
.hub{display:grid;grid-template-columns:auto 46px 1fr;align-items:center;margin-top:10px}
.hub-person{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  background:linear-gradient(120deg,var(--blue) 0%,#5b46e0 100%);border:2.5px solid var(--outline);
  border-radius:16px;padding:12px 14px;box-shadow:0 4px 0 var(--outline);max-width:150px}
.hub-face{display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffe36b,var(--accent));border:2.5px solid var(--outline);color:var(--blue-deep)}
.hub-face svg{width:60%;height:60%}
.hub-person b{font-family:var(--rounded);font-weight:900;font-size:clamp(12px,1.05vw,14px);color:#fff;line-height:1.4}
.hub-role{font-weight:700;font-size:clamp(9.5px,.8vw,11px);color:rgba(255,255,255,.88);line-height:1.6}
.hub-lines{width:46px;height:168px;overflow:visible}
.hub-lines .hl{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-dasharray:6 6;animation:hubFlow 1s linear infinite}
@keyframes hubFlow{to{stroke-dashoffset:-24}}
.hub-agents{display:flex;flex-direction:column;gap:8px;min-width:0}
.hub-agents .sys-line{margin-top:0}
@media (max-width:734px){
  .hub{grid-template-columns:auto 24px 1fr;margin-top:6px}
  .hub-person{padding:8px 9px;border-radius:12px;max-width:104px}
  .hub-face{width:28px;height:28px}
  .hub-person b{font-size:10px}
  .hub-role{font-size:8.5px}
  .hub-lines{width:24px;height:132px}
  .hub-agents{gap:5px}
  .hub-agents .sys-line span{font-size:10.5px}
  .hub-agents .sys-line em{font-size:9px}
}