:root{
  --ink:#151515; --purple:#6B4EFF; --deep:#4B32D1; --lav:#E9E4FF; --lav2:#CFC6FF;
  --paper:#F7F7F5; --grid:#E6E3EE; --gray:#5F5F66;
  --col:min(100vw,480px);
  --en:"Archivo","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.9;font-size:15px;letter-spacing:.02em;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit}
.grid-bg{position:fixed;inset:0;z-index:-1;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
h1,h2,h3,.lead,.bridge{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
h1,h2,h3{word-break:auto-phrase;text-wrap:balance}
.sp{display:inline}
@media (min-width:430px){.sp{display:none}}

/* 縦の本体（PCでは中央の柱） */
.col{width:var(--col);margin:0 auto;background:rgba(247,247,245,.86);position:relative}
@media (min-width:600px){.col{border-left:2px solid var(--ink);border-right:2px solid var(--ink)}}

/* ロゴ */
.logo{display:inline-flex;align-items:center;padding:6px 14px;border-radius:12px;background:var(--ink);color:#fff;font-weight:900;font-size:24px;letter-spacing:.02em;text-decoration:none;line-height:1.3;box-shadow:4px 4px 0 var(--purple)}
.logo em{font-style:normal;color:#A592FF}
.logo.sm{font-size:16px;padding:5px 12px;border-radius:10px;box-shadow:3px 3px 0 var(--purple)}

/* ヘッダー */
.head{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(247,247,245,.92);backdrop-filter:blur(6px);border-bottom:2px solid var(--ink)}
.head-btn{font-weight:900;font-size:13px;text-decoration:none;color:#fff;background:var(--purple);border:2px solid var(--ink);border-radius:999px;padding:6px 16px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.head-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* 流れるハッシュタグ */
.tags{overflow:hidden;border-bottom:2px solid var(--ink);background:#fff;padding:10px 0}
.tags-track{display:flex;gap:10px;width:max-content;animation:marquee 28s linear infinite}
.tags span{font-weight:700;font-size:12.5px;white-space:nowrap;border:2px solid var(--ink);border-radius:999px;padding:3px 12px;background:#fff}
.tags span:nth-child(3n+2){background:var(--lav)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* セクション共通：余白をたっぷり */
.sec{padding:88px 24px;position:relative}
.sec + .sec{border-top:2px dashed #D9D6E3}
.en{font-family:var(--en);font-style:italic;font-weight:900;color:var(--purple);font-size:15px;letter-spacing:.14em;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.en::before{content:"";width:28px;height:3px;background:var(--purple);border-radius:2px}
.label{font-weight:700;font-size:14px;color:var(--gray);margin-bottom:18px}
.h2{font-weight:900;font-size:clamp(26px,7.2vw,32px);line-height:1.5;letter-spacing:.01em;margin-bottom:24px}
.pop{color:var(--purple);text-shadow:3px 3px 0 var(--lav2);font-weight:900}
.lead{font-size:15.5px;line-height:2;color:#2a2a2e;margin-bottom:40px}
.note{font-size:12.5px;line-height:1.9;color:var(--gray);margin-top:24px}
.bridge{font-weight:900;font-size:19px;line-height:1.7;color:var(--purple);text-align:center;margin-top:48px}
.bridge.ink{color:var(--ink)}

/* ボタン：紫のピル＋ずらした影＋光が走る */
.btn{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:var(--purple);
  border:3px solid var(--ink);border-radius:999px;padding:14px 56px 14px 28px;font-weight:900;font-size:17px;line-height:1.4;
  box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn small{font-size:11.5px;font-weight:700;opacity:.92}
.btn i{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#fff;color:var(--purple);display:grid;place-items:center;font-style:normal;font-size:16px;transition:transform .2s}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn:hover i{transform:translate(4px,-50%)}
.btn.big{margin-top:40px;font-size:18px;padding:18px 60px 18px 28px}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}

/* ===== FV ===== */
.fv{padding-top:44px;padding-bottom:64px}
.fv-label{font-weight:700;font-size:14px;margin-bottom:12px;color:var(--gray)}
.fv-h{font-weight:900;font-size:clamp(34px,10vw,46px);line-height:1.5;letter-spacing:-.01em}
.fv-h .line{display:block}
.fv-h .ch{line-height:1.12}
.fv-h .line + .line{margin-top:.24em}
.fv-h .pop{font-size:1.16em;line-height:1;text-shadow:4px 4px 0 var(--lav2)}
.fv-cond{display:inline-block;margin-top:14px;font-weight:700;font-size:13.5px;border:2px solid var(--ink);border-radius:8px;padding:2px 10px;background:#fff}
.bars{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bar{background:var(--ink);color:#fff;font-weight:900;font-size:15px;padding:6px 14px;line-height:1.5;box-shadow:4px 4px 0 var(--purple)}
.bar b{color:#A592FF}

.fv-stage{position:relative;margin-top:40px;height:clamp(300px,86vw,400px)}
.editor{position:absolute;left:0;top:28px;width:74%;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;transform:rotate(-2deg)}
.editor-top{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--ink)}
.editor-top i{width:9px;height:9px;border-radius:50%;background:#555}
.editor-top i:first-child{background:var(--purple)}
.editor-top span{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#aaa;letter-spacing:0}
.editor-view{position:relative;aspect-ratio:16/10;background:var(--lav);overflow:hidden}
.editor-shacho{position:absolute;left:50%;bottom:-6%;width:62%;transform:translateX(-50%)}
.telop{position:absolute;left:6%;right:6%;bottom:8%;background:rgba(21,21,21,.86);color:#fff;font-weight:900;font-size:clamp(11px,3.2vw,14px);line-height:1.5;padding:4px 8px;border-radius:4px;min-height:1.9em;letter-spacing:0}
.type::after{content:"";display:inline-block;width:2px;height:1em;background:#A592FF;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tracks{position:relative;padding:8px 10px 10px;display:grid;gap:5px;background:#fff;border-top:2px solid var(--ink)}
.track{display:flex;gap:4px;height:10px}
.track b{flex:1;border-radius:3px;background:var(--lav2);border:1.5px solid var(--ink)}
.track.t1 b:nth-child(2n){background:var(--purple)}
.track.t2 b{background:#ddd}
.track.t2 b:nth-child(2){flex:2;background:var(--lav)}
.playhead{position:absolute;top:4px;bottom:4px;left:10px;width:2px;background:var(--purple);box-shadow:0 0 0 1px #fff;animation:play 6s linear infinite}
@keyframes play{to{left:calc(100% - 12px)}}
.fv-ari{position:absolute;right:-4px;bottom:0;width:44%;filter:drop-shadow(4px 5px 0 rgba(21,21,21,.18))}
.fv-bot{position:absolute;right:30%;top:-6px;width:19%}
.fv .btn.big{margin-top:28px}
.fv .note{margin-top:16px}

/* ゆらゆら */
.float{animation:float 3.2s ease-in-out infinite}
.float-slow{animation:float2 4.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes float2{50%{transform:translateY(-6px)}}

/* ===== PROBLEM ===== */
.pains{display:grid;gap:28px}
.pain{position:relative;display:grid;grid-template-columns:44% 1fr;align-items:center;gap:14px;background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:16px 18px 16px 10px;box-shadow:5px 5px 0 var(--ink)}
.pain:nth-child(1){transform:rotate(-1.2deg)}
.pain:nth-child(3){transform:rotate(1.2deg)}
.pain img{width:100%}
.pain p{font-size:14.5px;line-height:1.8}
.pain p b{display:block;font-size:17px;font-weight:900;margin-top:2px}
.num{position:absolute;left:-8px;top:-14px;font-family:var(--en);font-style:italic;font-weight:900;font-size:14px;color:#fff;background:var(--ink);border-radius:8px;padding:2px 10px;box-shadow:3px 3px 0 var(--purple)}
.down{width:22px;height:22px;margin:22px auto 0;border-right:4px solid var(--purple);border-bottom:4px solid var(--purple);transform:rotate(45deg);animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{50%{translate:0 8px}}

/* ===== WHAT WE DO ===== */
.panel{position:relative;margin:8px 0 48px;background:var(--lav);border:2.5px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:34px 16px 10px}
.panel img{width:86%;margin:0 auto}
.chip{position:absolute;left:-6px;top:-16px;background:var(--ink);color:#fff;font-weight:900;font-size:13.5px;padding:5px 14px;box-shadow:3px 3px 0 var(--purple);transform:rotate(-2deg)}
.points{display:grid;gap:0}
.points li{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:start;padding:26px 0;border-top:2px solid var(--ink)}
.points li:last-child{border-bottom:2px solid var(--ink)}
.big-num{font-family:var(--en);font-style:italic;font-weight:900;font-size:46px;line-height:1;background:linear-gradient(135deg,#9C87FF,var(--purple) 55%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 2px 0 var(--lav2))}
.points h3{font-size:18px;font-weight:900;line-height:1.55;margin-bottom:8px}
.points p{font-size:14px;line-height:1.85;color:#333}

/* ===== WHY ===== */
.reason-ari{width:54%;margin:0 auto -18px;position:relative;z-index:2}
.carousel{position:relative;margin:0 -24px}
.cards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 24px 18px;scrollbar-width:none;outline:none}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 76%;scroll-snap-align:center;position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:26px 22px 30px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.card.alt{background:var(--purple);color:#fff}
.card-tag{display:inline-block;font-weight:900;font-size:12.5px;border:2px solid currentColor;border-radius:999px;padding:1px 10px;margin-bottom:14px}
.card h3{font-size:19px;font-weight:900;line-height:1.55;margin-bottom:10px}
.card p:not(.card-tag){font-size:14px;line-height:1.85}
.card::after{content:attr(data-no);position:absolute;right:12px;bottom:-14px;font-family:var(--en);font-style:italic;font-weight:900;font-size:76px;line-height:1;color:var(--lav);pointer-events:none}
.card.alt::after{color:rgba(255,255,255,.18)}
.card > *{position:relative;z-index:1}
.dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.dots i{width:8px;height:8px;border-radius:999px;background:#C9C6D3;transition:width .3s,background .3s}
.dots i.on{width:28px;background:var(--ink)}

/* ===== FLOW ===== */
.flow-wrap{position:relative;margin-top:16px}
.flow-line{position:absolute;left:23px;top:24px;bottom:24px;width:4px;background:#DCD8E8;border-radius:4px}
.flow-line i{display:block;width:100%;height:var(--p,0%);background:var(--purple);border-radius:4px;transition:height .2s linear}
.flow{display:grid;gap:22px}
.flow li{position:relative;display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:start}
.step{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;border:3px solid var(--ink);font-family:var(--en);font-style:italic;font-weight:900;font-size:20px;box-shadow:3px 3px 0 var(--ink);position:relative;z-index:1}
.flow li > div{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:16px 18px;box-shadow:4px 4px 0 var(--ink)}
.flow h3{font-size:17px;font-weight:900;line-height:1.5;margin-bottom:4px}
.flow p{font-size:14px;line-height:1.85;color:#333}

/* ===== SCOPE ===== */
.scope-ari{width:48%;margin:0 0 -10px auto;position:relative;z-index:2}
.scope{display:grid;gap:20px}
.scope-box{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.scope-box h3{font-size:16px;font-weight:900;padding:10px 18px;line-height:1.5}
.scope-box.in-price h3{background:var(--purple);color:#fff}
.scope-box.prepare h3{background:var(--lav)}
.scope-box.no h3{background:var(--ink);color:#fff}
.scope-box ul{padding:14px 18px 16px;display:grid;gap:6px}
.scope-box li{position:relative;padding-left:28px;font-weight:700;font-size:15px;line-height:1.7}
.check li::before{content:"";position:absolute;left:4px;top:5px;width:8px;height:14px;border-right:3.5px solid var(--purple);border-bottom:3.5px solid var(--purple);transform:rotate(40deg)}
.dash li::before{content:"";position:absolute;left:2px;top:12px;width:14px;height:3px;background:var(--ink)}
.mini{font-size:12.5px;color:var(--deep);font-weight:700;padding:0 18px 16px;line-height:1.7}

/* ===== FAQ ===== */
.faq{display:grid;gap:18px}
.qa{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.qa-q{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:44px auto 1fr 16px;gap:10px;align-items:center;padding:14px 16px;font-weight:900;font-size:15px;line-height:1.6}
.qa-q:focus-visible{outline:3px solid var(--purple);outline-offset:-3px}
.qt{word-break:auto-phrase;text-wrap:balance}
.qa-q i{width:11px;height:11px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.qa-q[aria-expanded="true"] i{transform:rotate(225deg) translate(-2px,-2px)}
.face{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--lav);object-fit:cover}
.q,.a{font-family:var(--en);font-style:italic;font-weight:900;font-size:22px;color:var(--purple);line-height:1}
.ans{display:grid;grid-template-columns:1fr 44px;gap:12px;align-items:start;padding:14px 16px 18px;background:var(--lav);border-top:2px dashed var(--lav2)}
.ans[hidden]{display:none}
.ans p{font-size:14.5px;line-height:1.9}
.ans .a{margin-right:8px;font-size:20px}
.ans.opening{animation:open .35s ease}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}

/* ===== PRICE（黒地） ===== */
.sec.dark{background:var(--ink);color:#fff;border-top:none}
.sec.dark .label,.sec.dark .lead{color:#CFCFD6}
.sec.dark .pop{text-shadow:3px 3px 0 var(--deep);color:#A592FF}
.sec.dark .en{color:#A592FF}
.sec.dark .en::before{background:#A592FF}
.sec.dark .note{color:#A9A9B2}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prices li{background:#fff;color:var(--ink);border:2.5px solid #fff;border-radius:16px;padding:14px 12px 12px;box-shadow:5px 5px 0 var(--purple);text-align:center}
.prices span{display:block;font-size:12.5px;font-weight:700;color:var(--gray)}
.prices p{line-height:1.1;margin-top:6px}
.prices b{font-family:var(--en);font-weight:900;font-style:normal;font-size:clamp(26px,7.6vw,32px);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.prices small{font-size:13px;font-weight:900;margin-left:2px}
.init{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;background:var(--lav);color:var(--ink);border-radius:16px;padding:16px 18px;box-shadow:5px 5px 0 var(--purple)}
.init span{font-weight:900;font-size:15px;grid-row:span 2}
.init p{line-height:1.1}
.init b{font-family:var(--en);font-weight:900;font-size:30px}
.init small{font-size:13px;font-weight:900;margin-left:2px}
.init em{font-style:normal;font-size:13px;font-weight:700;color:var(--deep)}
.options{margin-top:28px;border-top:1px solid #444;padding-top:18px;font-size:13.5px;line-height:1.8;color:#DADAE0}
.options dt{font-weight:900;color:#fff;margin-bottom:6px}
.options dd{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.options dd b{font-weight:700;color:#fff}
.end-stage{position:relative;height:0}
.end-ari{position:absolute;right:-10px;top:-6px;width:40%;pointer-events:none;opacity:.98}
.sec.dark .btn.big{margin-top:200px;box-shadow:6px 6px 0 var(--deep);border-color:#fff}
@media (min-width:430px){.sec.dark .btn.big{margin-top:220px}}

.foot{text-align:center;padding:40px 16px 120px;font-size:13px;color:var(--gray);line-height:2}
.foot .logo{margin-bottom:8px}

/* ===== スクロールで出す（JSが有効なときだけ） ===== */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
.js .pain[data-reveal]:nth-child(1){transform:translateY(22px) rotate(-1.2deg)}
.js .pain[data-reveal]:nth-child(3){transform:translateY(22px) rotate(1.2deg)}
.js [data-reveal].in{opacity:1;transform:none}
.js .pain.in:nth-child(1){transform:rotate(-1.2deg)}
.js .pain.in:nth-child(3){transform:rotate(1.2deg)}
.js .step{transform:scale(.4);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.js .flow li.in .step{transform:none}

/* FVの登場 */
.js .fv-h .ch{display:inline-block;opacity:0;transform:translateY(.4em) scale(.9);animation:chIn .45s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i) * 35ms + .1s)}
@keyframes chIn{to{opacity:1;transform:none}}
.js .bar{clip-path:inset(0 100% 0 0);animation:wipe .5s cubic-bezier(.6,0,.2,1) forwards}
.js .bar:nth-child(1){animation-delay:.9s}
.js .bar:nth-child(2){animation-delay:1.1s}
@keyframes wipe{to{clip-path:inset(0 -10px 0 0)}}
.js .editor{animation:popIn .6s cubic-bezier(.2,1.3,.4,1) .4s both}
.js .fv-ari{animation:slideUp .7s cubic-bezier(.2,1.3,.4,1) .7s both,float2 4.4s ease-in-out 1.6s infinite}
@keyframes popIn{from{opacity:0;transform:rotate(-6deg) scale(.85)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ===== PCのサイドパネル ===== */
.side{display:none}
@media (min-width:1100px){
  .side{display:block;position:fixed;top:50%;transform:translateY(-50%);width:calc((100vw - var(--col))/2 - 96px);max-width:320px}
  .side-left{right:calc(50% + var(--col)/2 + 56px);text-align:right}
  .side-left .logo{margin-bottom:22px}
  .side-copy{font-weight:900;font-size:28px;line-height:1.45;margin-bottom:6px}
  .side-copy b{color:var(--purple);text-shadow:3px 3px 0 var(--lav2)}
  .side-crew{position:relative;height:150px;margin:6px 0 18px}
  .side-crew img{position:absolute;bottom:0}
  .side-crew .c1{right:150px;height:126px}
  .side-crew .c2{right:44px;height:150px}
  .side-crew .c3{right:0;top:0;height:54px;bottom:auto}
  .side-left .btn{width:100%}
  .side-note{font-size:11px;margin-top:12px;color:var(--gray)}
  .side-right{left:calc(50% + var(--col)/2 + 64px)}
  .index-title{font-family:var(--en);font-style:italic;font-weight:900;font-size:32px;letter-spacing:.02em;margin-bottom:12px}
  .index a{display:flex;gap:12px;align-items:baseline;padding:7px 0;color:#777;text-decoration:none;font-weight:700;font-size:15px;transition:color .2s,transform .2s}
  .index a span{font-size:11px;font-family:ui-monospace,Menlo,monospace;color:#aaa;width:18px}
  .index a:hover{color:var(--ink);transform:translateX(3px)}
  .index a.on{color:var(--ink)}
  .index a.on span{color:var(--purple)}
  .index a.on::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--purple);box-shadow:2px 2px 0 var(--ink);align-self:center}
  .float-cta{display:none !important}
}

/* スマホの追従ボタン */
.float-cta{position:fixed;left:50%;bottom:14px;z-index:40;width:min(calc(100vw - 32px),440px);transform:translate(-50%,160%);
  display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;background:var(--purple);border:3px solid var(--ink);border-radius:999px;
  padding:13px 16px;font-weight:900;font-size:16px;box-shadow:5px 5px 0 var(--ink);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.float-cta i{font-style:normal}
.float-cta.show{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js [data-reveal],.js .bar,.js .fv-h .ch,.js .editor,.js .fv-ari,.js .step{opacity:1 !important;clip-path:none !important}
  .js [data-reveal]{transform:none}
  .js .step{transform:none}
}

/* 日本語の改行を文節で（対応ブラウザ） */
p,li,dd,h3,.qt,.bar{word-break:auto-phrase;line-break:strict}
.pain p b{font-size:16px}

/* 制作チーム（実績） */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stats li{background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:18px 12px 16px;box-shadow:5px 5px 0 var(--purple);text-align:center}
.stats span{display:block;font-size:13px;font-weight:700;color:var(--gray)}
.stats p{line-height:1.1;margin-top:8px}
.stats b{font-family:var(--en);font-weight:900;font-size:clamp(32px,9vw,40px);color:var(--purple);font-variant-numeric:tabular-nums}
.stats small{font-size:13px;font-weight:900;margin-left:2px}

/* 範囲の追加分 */
.plus li::before{content:"＋";position:absolute;left:2px;top:0;font-weight:900;color:var(--ink)}
.scope-box.no h3{background:var(--ink);color:#fff}
.scope-box.honest{border-style:dashed;box-shadow:5px 5px 0 var(--lav2);background:#FCFBFF}
.scope-box.honest h3{background:transparent;color:var(--purple);padding-bottom:0}
.honest-body{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:8px 18px 18px}
.ratio{line-height:1;color:var(--purple)}
.ratio b{font-family:var(--en);font-weight:900;font-size:58px}
.ratio small{font-size:16px;font-weight:900}
.honest-body p:not(.ratio){font-size:14px;line-height:1.85}
.honest-body p b{color:var(--purple)}
.stats li.wide{grid-column:1 / -1}
/* 悩みの絵は4枚とも同じ枠の大きさに */
.pain img{width:100%;aspect-ratio:.85;object-fit:contain;object-position:center bottom}

/* 向いていない動画（大きく） */
.ng{position:relative;background:var(--ink);color:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:26px 22px 24px;box-shadow:6px 6px 0 var(--purple);overflow:hidden}
.ng::after{content:"NG";position:absolute;right:-6px;bottom:-22px;font-family:var(--en);font-style:italic;font-weight:900;font-size:110px;line-height:1;color:rgba(255,255,255,.07);pointer-events:none}
.ng-label{display:inline-block;font-weight:900;font-size:13px;background:#fff;color:var(--ink);border-radius:999px;padding:2px 12px;margin-bottom:14px}
.ng-big{font-weight:900;font-size:clamp(25px,7vw,30px);line-height:1.45;word-break:keep-all}
.ng-big b{color:#A592FF;text-shadow:3px 3px 0 var(--deep)}
.ng-sub{margin-top:12px;font-size:13.5px;line-height:1.85;color:#D6D6DC}
.note.small{font-size:11.5px;margin-top:10px;line-height:1.8}

.ng-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ng-tags li{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;line-height:1.4;background:#fff;color:var(--ink);border-radius:10px;padding:7px 14px 7px 10px;box-shadow:3px 3px 0 var(--purple)}
.ng-tags li::before{content:"";width:16px;height:16px;flex:none;background:
  linear-gradient(45deg,transparent 42%,var(--purple) 42%,var(--purple) 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--purple) 42%,var(--purple) 58%,transparent 58%)}

/* 料金下のキャラ：文字と重ならないよう普通の流れに置く */
.end-stage{height:auto;display:flex;justify-content:center;margin-top:32px}
.end-ari{position:static;width:min(56%,240px)}

@media (min-width:430px){.sec.dark .btn.big{margin-top:16px}}
.sec.dark .btn.big{margin-top:16px}

/* できること：3ステップの流れ（カード＋矢印） */
.points.flowish{gap:34px}
.points.flowish li{position:relative;border:2.5px solid var(--ink);border-radius:18px;background:#fff;box-shadow:5px 5px 0 var(--ink);padding:20px 18px;grid-template-columns:64px 1fr;align-items:center}
.points.flowish li:last-child{border-bottom:2.5px solid var(--ink);background:var(--lav)}
.points.flowish li + li::before{content:"";position:absolute;left:50%;top:-30px;width:0;height:0;margin-left:-12px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:14px solid var(--purple)}
.points.flowish .big-num{font-size:40px}
.points.flowish h3{margin-bottom:6px}

/* 半年契約の内製化支援 */
.perk{margin-top:28px;border:2.5px solid #A592FF;border-radius:18px;padding:18px 20px;background:rgba(107,78,255,.14);box-shadow:5px 5px 0 var(--deep)}
.perk-label{display:inline-block;font-weight:900;font-size:12.5px;background:#A592FF;color:var(--ink);border-radius:999px;padding:2px 12px;margin-bottom:10px}
.perk-text{font-size:15px;line-height:1.85;color:#fff;font-weight:700}
.perk-text b{color:#C9BDFF;font-size:18px;font-weight:900}