@charset "UTF-8";
/* Layout: 方眼紙の上に組んだスマホ1カラム（最大480px）。白の方眼セクションと黒の方眼セクションを交互に。PCは中央カラム＋左右に固定パネル */
:root{
  color-scheme: light;
  --ink:#1c1917;
  --ink-2:#2a2623;
  --paper:#ffffff;
  --card:#f4f4f2;
  --gray:#e8e8e8;
  --mute:#6b6661;
  --line:rgba(28,25,23,.09);
  --line-dark:rgba(255,255,255,.07);
  --orange:#fb8619;
  --orange-2:#fb4a19;
  --grad:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 100%);
  --lime:#c6f23a;
  --violet:#7b3fe4;
  --red:#e8322a;
  --green:#22a24a;
  --f-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:"Inter","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --col:480px;
  --grid:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--gray);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:40px 40px;color:var(--ink);font-family:var(--f-sans);font-weight:500;font-size:15px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3,p{margin:0}
.grid-w{background-color:var(--paper);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:var(--grid) var(--grid)}
.grid-d{background-color:var(--ink);color:var(--paper);background-image:linear-gradient(to right,var(--line-dark) 1px,transparent 1px),linear-gradient(to bottom,var(--line-dark) 1px,transparent 1px);background-size:30px 30px}

/* ---------- PC shell ---------- */
.side{display:none}
.lp{position:relative;max-width:var(--col);margin:0 auto;background:var(--paper);overflow:hidden}
@media (min-width:1024px){
  .shell{display:grid;grid-template-columns:1fr var(--col) 1fr;min-height:100vh}
  .lp{border-inline:2px solid var(--ink);box-shadow:0 10px 40px rgba(28,25,23,.18)}
  .side{display:flex;position:sticky;top:0;height:100vh;flex-direction:column;justify-content:center;padding:40px clamp(24px,3.4vw,60px)}
  .side--l{align-items:flex-end;text-align:right;gap:20px}
  .side--r{align-items:flex-start;gap:14px}
}
.side__logo{background:var(--ink);border-radius:16px;padding:14px 22px;border:2px solid var(--orange)}
.side__catch{font-family:var(--f-serif);font-weight:900;font-size:clamp(18px,1.6vw,24px);line-height:1.5}
.side__catch b{font-family:var(--f-sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.side__chars{display:flex;align-items:flex-end;gap:0}
.side__chars .char{width:clamp(54px,5vw,78px)}
.side__chars .char:nth-child(odd){animation:bob 2.6s ease-in-out infinite;will-change:transform}
.side__chars .char:nth-child(even){animation:bob 2.6s ease-in-out -1.3s infinite;will-change:transform}
.side .btns{width:min(320px,100%)}
.index__ttl{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:28px;line-height:1}
.index{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:idx}
.index a{display:flex;gap:12px;align-items:baseline;text-decoration:none;font-weight:700;font-size:14.5px;padding:5px 0;color:var(--mute);transition:color .25s,transform .25s}
.index a::before{counter-increment:idx;content:counter(idx,decimal-leading-zero);font-family:var(--f-mono);font-size:11px}
.index a:hover,.index a.is-current{color:var(--ink);transform:translateX(6px)}
.index a.is-current::before{color:var(--orange-2)}

/* ---------- shared ---------- */
.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.sec{padding-block:72px}
.logo{display:inline-flex;align-items:baseline;gap:.22em;font-family:var(--f-en);font-style:italic;font-weight:900;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.logo span:last-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.logo--w{color:var(--paper)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-en);font-style:italic;font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--orange-2)}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:2px;background:currentColor}
.h2{margin-top:10px;font-family:var(--f-serif);font-weight:900;font-size:clamp(27px,7.8vw,34px);line-height:1.42;text-align:center;text-wrap:balance;letter-spacing:.02em}
.h2 .sans{font-family:var(--f-sans)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marker{background:linear-gradient(to bottom,transparent 62%,var(--lime) 62%,var(--lime) 94%,transparent 94%);padding-inline:2px}

/* black label bars (参考LPの「数億円VALUEを出し続ける」帯) */
.bars{display:grid;justify-items:center;gap:8px}
.bars--l{justify-items:start}
.bar{display:inline-block;background:var(--ink);color:var(--paper);font-weight:900;line-height:1.35;padding:5px 12px 6px;letter-spacing:.02em}
.bar b{color:var(--orange)}
.bar i{font-style:normal;color:var(--lime)}
.js .bars.rv .bar{clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.js .bars.rv.is-in .bar{clip-path:inset(0 0 0 0)}
.bars.rv .bar:nth-child(2){transition-delay:.15s}.bars.rv .bar:nth-child(3){transition-delay:.3s}.bars.rv .bar:nth-child(4){transition-delay:.45s}

/* buttons */
.btns{display:grid;gap:12px}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;padding:10px 22px;border-radius:999px;text-decoration:none;font-weight:900;font-size:18px;line-height:1.3;letter-spacing:.03em;overflow:hidden;isolation:isolate;transition:transform .18s,box-shadow .18s}
.btn small{display:block;font-weight:700;font-size:11.5px;letter-spacing:.08em;opacity:.95}
.btn__txt{text-align:center}
.btn--dl{background:var(--grad);color:var(--paper);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--orange-2),0 8px 18px rgba(251,74,25,.35)}
.btn--tel{background:var(--ink);color:var(--paper);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--ink),0 8px 18px rgba(28,25,23,.25)}
.btn::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:26%;background:rgba(255,255,255,.4);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;z-index:-1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn__arrow{position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.btn__arrow svg{width:10px;height:10px}
.btn--dl .btn__arrow{color:var(--orange-2)}
.btn--tel .btn__arrow{color:var(--ink)}
.btn__ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--orange);animation:ring 2.4s ease-in-out infinite;will-change:transform}
.btn__ico svg{width:15px;height:15px}

/* character + spinning lenses */
.char{position:relative;display:block;line-height:0}
.char img{width:100%;height:auto;display:block;max-width:100%;padding:0;margin:0;border:0}
.lens-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}

/* ---------- HEADER ---------- */
.hd{padding:12px max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));background:var(--gray)}
.hd__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);border:2px solid var(--orange);border-radius:16px;padding:12px 12px 12px 16px}
.hd__bar .logo{font-size:23px}
.hd__cta{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--grad);color:var(--paper);text-decoration:none;font-weight:900;font-size:12.5px;padding:8px 14px;border-radius:99px;letter-spacing:.03em}
.hd__cta svg{width:12px;height:12px}
.tags{overflow:hidden;white-space:nowrap;padding:12px 0;background:var(--gray);border-bottom:1px solid #d3d1cc}
.tags__track{display:inline-flex;gap:8px;animation:marquee 30s linear infinite}
.tags span{flex:none;font-weight:700;font-size:13.5px;padding:3px 14px;border:2px solid var(--ink);border-radius:99px;background:var(--paper)}

/* ---------- FV ---------- */
.fv{padding:22px 12px 34px}
.fv__card{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:30px;padding:26px 16px 0;overflow:hidden}
.fv__card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:var(--grid) var(--grid);-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 90%);mask-image:linear-gradient(to bottom,#000 30%,transparent 90%);pointer-events:none}
.fv__lead{position:relative;font-weight:900;font-size:clamp(14px,4.1vw,17px);letter-spacing:.08em;white-space:nowrap}
.fv__h1{position:relative;margin-top:10px;line-height:1.1;letter-spacing:.01em}
.fv__h1 .ln{display:block;overflow:hidden;padding-block:.06em}
.fv__h1 .ln > span{display:inline-block;animation:rise .8s cubic-bezier(.2,.9,.2,1) both}
.fv__h1 .ln:nth-child(2) > span{animation-delay:.12s}.fv__h1 .ln:nth-child(3) > span{animation-delay:.24s}
.fv__h1 .l1{font-weight:900;font-size:clamp(30px,8.9vw,40px)}
.fv__h1 .l2{font-weight:900;font-size:clamp(54px,16vw,72px);line-height:1.08}
.fv__h1 .l2 .grad{background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 40%,#ffb14a 50%,var(--orange-2) 60%,var(--orange) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 5s linear infinite}
.fv__h1 .l2 .ni{font-size:.62em;margin-left:.04em}
.fv__h1 .l3{font-family:var(--f-serif);font-weight:900;font-size:min(calc((100vw - 74px) / 7.1),54px);white-space:nowrap}
.fv__body{position:relative;display:grid;grid-template-columns:1fr 46%;align-items:end;margin-top:12px;min-height:262px}
.fv__left{position:relative;z-index:2;align-self:stretch;padding-block:26px 22px;display:grid;gap:12px;align-content:space-between}
.term{background:var(--ink);color:#e9e6df;border-radius:10px;padding:8px 10px 10px;font-family:var(--f-mono);font-size:10.5px;line-height:1.7;box-shadow:0 8px 20px rgba(28,25,23,.25);animation:fadeUp .7s .9s both}
.term__dots{display:flex;gap:4px;margin-bottom:5px}
.term__dots i{width:7px;height:7px;border-radius:50%;background:#5a5550}
.term__dots i:first-child{background:var(--orange-2)}.term__dots i:nth-child(2){background:#f5c03a}.term__dots i:nth-child(3){background:var(--green)}
.term .p{color:var(--orange)}
.term .ok{color:var(--lime)}
.typing::after{content:"";display:inline-block;width:6px;height:1.05em;background:var(--lime);vertical-align:-2px;margin-left:2px;animation:caret .8s steps(1) infinite}
.fv__label{display:grid;gap:8px;justify-items:start;animation:fadeUp .7s 1.1s both}
.fv__label .bar{font-size:clamp(15px,4.4vw,20px);white-space:nowrap;padding:5px 10px 6px;width:fit-content;max-width:none}
.fv__stage{position:relative;align-self:end;margin-right:-10px;left:-30px;bottom:10px;z-index:3}
.fv__stage .char{width:100%;animation:slideIn 1s cubic-bezier(.2,.9,.2,1) .35s both,float 3.6s ease-in-out 1.4s infinite;will-change:transform}
.fv__ring{position:absolute;left:50%;top:44%;width:210px;height:210px;margin:-105px 0 0 -105px;border:2px dashed rgba(28,25,23,.25);border-radius:50%;animation:spin 30s linear infinite;will-change:transform}
.fv__ring::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--orange-2)}
.fv__bottom{position:relative;margin:0 -16px;background:var(--ink);padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fv__bottom .logo{font-size:clamp(28px,8.6vw,38px)}
.fv__bottom small{font-family:var(--f-mono);font-size:10px;line-height:1.4;color:#a8a39b;text-align:right}
.fv .btns{margin-top:22px;padding-inline:4px}

/* ---------- tickers ---------- */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink)}
.ticker--alt{background:var(--orange-2)}
.ticker__track{display:inline-flex;animation:marquee 22s linear infinite}
.ticker--alt .ticker__track{animation-direction:reverse}
.ticker span{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:20px;padding:8px 16px;display:inline-flex;align-items:center;gap:16px;letter-spacing:-.01em}
.ticker span::after{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg)}

/* ---------- ABOUT ---------- */
.about{text-align:center}
.about__ttl{margin-top:10px;font-weight:900;font-size:clamp(25px,7.2vw,31px);line-height:1.3}
.about__ttl .logo{font-size:1.08em;margin-right:.08em}
.about .bars{margin-top:24px}
.about .bar{font-size:clamp(21px,6.3vw,27px);padding:6px 14px 7px}
.about .bar b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* member cards (参考LPの #動画編集者 カード) */
.mcar{position:relative;margin-top:36px}
.mcar__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px calc(50% - 112px) 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mcar__track::-webkit-scrollbar{display:none}
.mcard{flex:0 0 224px;scroll-snap-align:center;background:var(--c);border:2px solid var(--ink);border-radius:16px;overflow:hidden;text-align:center;transform:scale(.88);opacity:.55;transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .45s;box-shadow:0 10px 24px rgba(28,25,23,.18);display:flex;flex-direction:column}
.mcard.is-active{transform:scale(1);opacity:1}
.mcard__tag{padding-top:14px;color:var(--paper);font-weight:900;font-size:19px;letter-spacing:.04em}
.mcard .char{width:146px;margin:0 auto -2px}
.mcard.is-active .char{animation:bob 2.2s ease-in-out infinite;will-change:transform}
.mcard__foot{background:var(--paper);border-top:2px solid var(--ink);padding:9px 10px 12px;display:grid;gap:2px;margin-top:auto;margin-bottom:6px}
.mcard__en{font-family:var(--f-en);font-style:italic;font-weight:800;font-size:12px;color:var(--mute);letter-spacing:.04em}
.mcard__job{font-weight:900;font-size:17px;color:var(--c);line-height:1.35}
.dots{display:flex;justify-content:center;gap:8px}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#c9c6bf;cursor:pointer;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:28px;border-radius:99px;background:var(--ink)}

/* ---------- WHY head (dark) ---------- */
.whyhead{text-align:center;padding-block:68px 56px}
.whyhead .h2{color:var(--paper);font-size:clamp(28px,8.2vw,36px)}
.whyhead .h2 .q{font-family:var(--f-sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.five{margin:30px auto 0;max-width:360px;background:var(--paper);color:var(--ink);border-radius:18px;padding:18px 18px 20px;position:relative}
.five::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:24px;background:var(--orange);margin-left:-1px}
.five .logo{font-size:26px}
.five p{margin-top:8px;font-weight:900;font-size:clamp(22px,6.4vw,27px);line-height:1.3}
.five p strong{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:1.9em;line-height:.8;vertical-align:-.08em;padding-inline:.06em}
.five__list{margin-top:14px;display:flex;justify-content:center;gap:6px}
.five__list span{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:13px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);transition:background .3s,color .3s}
.five__list span.is-on{background:var(--ink);color:var(--paper)}

/* ---------- PROMISES ---------- */
.promises{padding-block:20px 48px}
.promises .wrap{width:375px;transform-origin:top left}
.promise{padding-top:20px}
.promise + .promise{border-top:1px dashed #cfccc5;margin-top:20px}
.promise__no{display:flex;align-items:flex-end;justify-content:center;gap:12px;line-height:.8}
.promise__no small{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:19px;letter-spacing:.14em;padding-bottom:9px}
.promise__no b{font-family:var(--f-en);font-style:italic;font-weight:900;font-size:98px;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;line-height:.8}
.promise__flaw{margin:26px auto 0;width:max-content;max-width:100%;text-align:center;font-weight:900;font-size:20px;line-height:1.55;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:18px 22px 14px;position:relative;box-shadow:0 8px 10px rgba(28,25,23,.08)}
.promise__flaw::before{content:"OTAKU'S HABIT";position:absolute;left:50%;top:-11px;transform:translateX(-50%);white-space:nowrap;line-height:20px;font-family:var(--f-en);font-style:italic;font-weight:900;font-size:13px;letter-spacing:1.5px;background:var(--paper);padding:0 10px;color:var(--mute)}
.promise__arrow{display:block;margin:12px auto 10px;width:20px;height:56px;color:var(--ink)}
.promise__arrow line{stroke-dasharray:4 4;animation:dash 1s linear infinite}
.promise__gain{gap:9px}
.gain__so{font-weight:900;font-size:17px;letter-spacing:.1em;color:var(--paper);background:var(--grad);border-radius:99px;padding:2px 18px 3px;margin-bottom:2px}
.promise__gain .bar{font-size:27px;letter-spacing:.02em;padding:7px 14px 8px;white-space:nowrap}
.promise__body{margin-top:12px;font-size:15px;line-height:1.93}

/* koma panels */
.koma{position:relative;margin-top:12px;height:220px;border:2px solid var(--ink);border-radius:14px;background-color:var(--bg,#fff);overflow:hidden}
.koma::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(28,25,23,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(28,25,23,.08) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}
.koma__cap{position:absolute;left:0;top:0;right:0;z-index:3;display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-weight:700;font-size:11px;background:var(--ink);color:#e9e6df;padding:3px 10px;line-height:1.6}
.koma__cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange-2);box-shadow:11px 0 0 #f5c03a,22px 0 0 var(--green);margin-right:26px}
.koma__note{position:absolute;right:8px;bottom:6px;z-index:3;font-size:10px;font-weight:700;color:var(--mute);background:rgba(255,255,255,.88);padding:0 6px;border-radius:4px}
.koma .char{position:absolute;z-index:2}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:10px}

.k1{--bg:#fff1e4}
.k1 .char{width:118px;right:6px;bottom:-34px}
.sheet{position:absolute;left:24px;top:36px;width:211px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:900;z-index:1;border-radius:4px}
.sheet__ttl{font-family:var(--f-mono);font-weight:500;font-size:11px;color:var(--mute);border-bottom:1px dashed #e4e1d6;padding-bottom:3px;width:100%}
.sheet__rows{display:flex;flex-direction:column;gap:2px;width:100%}
.sheet__row{display:flex;align-items:center;gap:8px;height:24px}
.sheet__box{flex:none;width:16px;height:16px;border:2px solid var(--ink);border-radius:3px;display:grid;place-items:center}
.sheet__box svg{width:12px;height:12px;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s ease-out}
.is-in .sheet__row:nth-child(1) svg{transition-delay:.3s}.is-in .sheet__row:nth-child(2) svg{transition-delay:.7s}
.is-in .sheet__row:nth-child(3) svg{transition-delay:1.1s}.is-in .sheet__row:nth-child(4) svg{transition-delay:1.5s}
.is-in .sheet__box svg{stroke-dashoffset:0}
.sheet__done{text-align:center;font-size:17px;font-weight:900;color:var(--orange-2);line-height:22px;width:100%;transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1) 2s}
.is-in .sheet__done{transform:scale(1)}

.k2{--bg:#f1eafe}
.k2 .char{width:112px;left:4px;bottom:-34px}
.lps{position:absolute;right:12px;top:34px;display:flex;gap:8px;align-items:flex-end}
.lpm{width:62px;height:118px;padding:6px 5px;display:grid;align-content:start;gap:4px;background:var(--paper);border:2px solid var(--ink);border-radius:8px}
.lpm i{display:block;height:7px;border-radius:2px;background:#d6d3cc}
.lpm i:first-child{height:26px}
.lpm--copy{opacity:.75}
.lpm--copy span{font-size:9px;font-weight:900;text-align:center;color:var(--mute);line-height:1}
.lpm--ours{width:76px;height:142px;border-width:2px;box-shadow:0 8px 18px rgba(123,63,228,.3);transform:translateY(16px);transition:transform .6s cubic-bezier(.2,1.5,.4,1) .9s}
.is-in .lpm--ours{transform:translateY(0) rotate(3deg)}
.lpm--ours i:first-child{background:var(--violet)}
.lpm--ours i:nth-child(2){background:#f5c03a;height:12px}
.lpm--ours i:nth-child(3){background:var(--lime)}
.lpm--ours i:last-child{background:var(--grad);height:12px;border-radius:99px}
.lpm--ours span{font-size:10px;font-weight:900;text-align:center;line-height:1}
.stamp{position:absolute;right:92px;top:52px;z-index:3;font-family:var(--f-en);font-weight:900;font-size:15px;color:var(--red);border:3px solid var(--red);border-radius:6px;padding:0 8px;background:rgba(255,255,255,.85);transform:rotate(-14deg) scale(2.6);opacity:0;transition:transform .35s cubic-bezier(.5,0,.3,1.4) .45s,opacity .2s .45s}
.is-in .stamp{transform:rotate(-14deg) scale(1);opacity:1}

.k3{--bg:#e6f6ea;height:238px}
.k3 .char{width:104px;right:4px;bottom:-30px}
.dash{position:absolute;left:12px;top:36px;width:68%;padding:8px 10px;z-index:1}
.dash__rows{display:grid;gap:3px}
.dash__row{display:grid;grid-template-columns:5.2em 1fr auto;white-space:nowrap;align-items:baseline;gap:6px;font-size:11.5px;font-weight:900;border-bottom:1.5px dashed #e4e1d6;padding-bottom:2px}
.dash__row b{font-family:var(--f-en);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;text-align:right}
.dash__row s{text-decoration:none;font-family:var(--f-mono);font-weight:500;font-size:10.5px;color:var(--mute)}
.dash__row .up{color:var(--green)}
.spark{width:100%;height:46px;margin-top:4px;overflow:visible}
.spark path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.8s ease-out .2s}
.spark .area{fill:rgba(34,162,74,.22);stroke:none;opacity:0;transition:opacity .8s 1.2s}
.spark circle{fill:var(--orange);stroke:var(--ink);stroke-width:2;opacity:0;transition:opacity .2s 1.2s}
.is-in .spark path{stroke-dashoffset:0}.is-in .spark .area,.is-in .spark circle{opacity:1}

.k4{--bg:#fff7d6}
.k4 .char{width:112px;left:50%;margin-left:-56px;bottom:-40px}
.feed{position:absolute;left:0;right:0;top:44px;display:grid;gap:8px;z-index:1}
.feed__row{display:flex;gap:8px;width:max-content;animation:marquee 16s linear infinite}
.feed__row--rev{animation-direction:reverse;animation-duration:19s}
.feed__chip{flex:none;font-weight:900;font-size:12.5px;padding:3px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:99px;white-space:nowrap}
.feed__chip b{font-family:var(--f-en);font-weight:900;font-size:9.5px;color:var(--paper);background:var(--red);border-radius:4px;padding:0 4px;margin-right:5px}
.alert{position:absolute;right:8px;top:30px;z-index:3;font-family:var(--f-mono);font-weight:700;font-size:10.5px;background:var(--red);color:var(--paper);padding:0 8px;border-radius:4px;animation:blink 1.1s steps(1) infinite}

.k5{--bg:#ffe9e6}
.k5 .char{width:108px;right:4px;bottom:-34px}
.funnel{position:absolute;left:14px;top:40px;width:64%;display:grid;gap:7px;z-index:1}
.funnel__row{display:grid;grid-template-columns:3.4em 1fr;align-items:center;gap:8px;font-size:12px;font-weight:900}
.funnel__bar{height:26px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden}
.funnel__bar i{display:flex;align-items:center;justify-content:flex-end;height:100%;width:0;padding-right:6px;background:var(--c);color:var(--paper);font-family:var(--f-en);font-weight:900;font-style:normal;font-size:12px;transition:width 1s cubic-bezier(.2,.9,.3,1)}
.funnel__row:nth-child(2) i{transition-delay:.35s}.funnel__row:nth-child(3) i{transition-delay:.7s}
.is-in .funnel__bar i{width:var(--v)}
.funnel__goal{justify-self:start;margin-top:2px;white-space:nowrap;font-weight:900;font-size:12.5px;color:var(--paper);background:var(--ink);padding:1px 12px;border-radius:99px;transform:scale(0) rotate(-4deg);transition:transform .45s cubic-bezier(.2,1.6,.4,1) 1.5s}
.is-in .funnel__goal{transform:scale(1) rotate(-4deg)}

/* ---------- MUST (dark) ---------- */
.must{text-align:center;position:relative;overflow:hidden}
.must__lead{font-weight:900;font-size:clamp(17px,5vw,21px)}
.must__lead .en{font-family:var(--f-en);font-weight:900}
.must__big{position:relative;margin-top:6px;white-space:nowrap;font-family:var(--f-serif);font-weight:900;font-size:min(calc((100vw - 48px) / 6.9),60px);line-height:1.25}
.must__big .ch{display:inline-block}
.js .must__big .ch{opacity:0}
.must__big.is-in .ch{animation:shout .55s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i) * 70ms)}
.must__big .hot .ch{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.must__glow{position:absolute;left:50%;top:48%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(251,134,25,.35),transparent 65%);pointer-events:none}
.must__stage{position:relative;height:250px;margin-top:8px}
.must__stage .char{position:absolute;left:50%;bottom:0;width:180px;margin-left:-90px;animation:float 3s ease-in-out infinite;will-change:transform}
.must__logo{margin-top:16px;font-size:clamp(40px,12vw,54px)}
.must .btns{position:relative;margin-top:26px}

/* ---------- VOICE ---------- */
.voice__head{text-align:center}
.vcar{margin-top:30px}
.vcar__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(18px,env(safe-area-inset-left,0px)) 24px;scroll-padding-inline:18px;scrollbar-width:none}
.vcar__track::-webkit-scrollbar{display:none}
.vcard{flex:0 0 84%;max-width:340px;scroll-snap-align:center;background:#f6f6f3;border:2px solid var(--ink);border-radius:12px;padding:14px 14px 18px;display:flex;flex-direction:column;box-shadow:0 10px 24px rgba(28,25,23,.12)}
.vcard__no{font-family:var(--f-en);font-weight:800;font-size:15px}
.vcard__img{margin-top:10px;background:var(--paper);border-radius:6px;overflow:hidden;aspect-ratio:358/214}
.vcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.vcard:hover .vcard__img img{transform:scale(1.04) rotate(-1deg)}
.vcard__co{margin-top:12px;font-size:12.5px;color:var(--mute);letter-spacing:.04em}
.vcard__h{margin-top:4px;font-weight:900;font-size:clamp(19px,5.6vw,22px);line-height:1.38}
.vcard__h span{display:inline-block;background:var(--lime);padding:2px 6px;margin-bottom:4px}
.vcard__body{margin-top:12px;padding-top:12px;border-top:1.5px solid #bdbab0;font-size:13px;line-height:1.95}
.vcar__nav{display:flex;align-items:center;justify-content:center;gap:16px}
.arrow{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,color .2s}
.arrow:hover{background:var(--ink);color:var(--paper)}
.arrow svg{width:16px;height:16px}

/* ---------- SERVICE (dark) ---------- */
.svc{text-align:center}
.svc .h2{color:var(--paper)}
.svc__sub{margin-top:8px;font-weight:700;font-size:14px;color:#bdb8af}
.svc__list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.svc__list li{font-weight:900;font-size:15.5px;padding:7px 14px;border-radius:8px;background:var(--paper);color:var(--ink);transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.svc__list li.etc{background:transparent;color:var(--paper);border:2px dashed #77726b;font-family:var(--f-en);font-style:italic}
.js .svc__list:not(.is-in) li{transform:translateY(14px) scale(.85);opacity:0}
.svc__list.is-in li{transition-delay:calc(var(--i) * 55ms)}

/* ---------- FLOW ---------- */
.flow__body{position:relative;margin-top:34px}
.flow__steps{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flow__rail{position:absolute;left:25px;top:20px;width:3px;background:#dcd9d2;overflow:hidden;height:calc(100% - 100px)}
.flow__rail i{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p,0));background:var(--grad)}
.step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.step__no{position:relative;z-index:1;width:52px;height:52px;border-radius:12px;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--f-en);font-style:italic;font-weight:900;font-size:20px;transition:background .35s,color .35s,transform .45s cubic-bezier(.2,1.6,.4,1)}
.step.is-lit .step__no{background:var(--ink);color:var(--paper)}
.step__card{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:12px 14px 14px}
.step__ttl{font-weight:900;font-size:19px;line-height:1.4}
.step__txt{margin-top:6px;font-size:13.5px;line-height:1.9}
.step__txt b{font-family:var(--f-en);font-weight:900;background:var(--lime);padding-inline:3px}
.step--goal .step__no{background:var(--paper);color:var(--orange-2);border-color:var(--orange-2)}
.step--goal.is-lit .step__no{background:var(--grad);color:var(--paper)}
.step--goal .step__card{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step--goal .step__ttl{color:var(--orange)}

/* ---------- CLOSING ---------- */
.close{padding:0 12px 40px}
.close__card{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:30px;padding:36px 16px 24px;text-align:center;overflow:hidden}
.close__h{position:relative;font-family:var(--f-serif);font-weight:900;font-size:clamp(30px,8.8vw,40px);line-height:1.4}
.close__h .rev{font-family:var(--f-sans);font-size:1.35em;line-height:1}
.close__stage{position:relative;height:280px;margin-top:6px}
.close__stage .fv__ring{top:52%;width:260px;height:260px;margin:-130px 0 0 -130px}
.close__team{position:absolute;inset:auto 0 0;display:flex;justify-content:center;align-items:flex-end}
.close__team .char{width:22%;margin-inline:-2.5%}
.close__team .char--main{width:33%;z-index:2;animation:float 3s ease-in-out infinite;will-change:transform}
.close__team .char:not(.char--main){animation:bob 2.4s ease-in-out infinite;will-change:transform}
.close__team .char:nth-child(3){animation-delay:-.6s}.close__team .char:nth-child(4){animation-delay:-1.2s}
.close .fv__bottom{margin:0 -16px}
.close .btns{margin-top:22px;padding-inline:4px}

/* ---------- FORM ---------- */
.close__form{background:var(--card);padding:32px 0;display:flex;flex-direction:column;gap:32px;align-items:center}
.close__form .content_title{display:none}
.close__form .content_form{width:100%}
.close__form .myForm{display:flex!important;flex-direction:column!important;gap:32px!important;align-items:center!important;padding:0!important;margin:0!important;background:none!important;border:none!important;box-shadow:none!important}
.close__form .input_unit{display:flex!important;flex-direction:column!important;gap:16px!important;width:100%!important;margin:0!important;padding:0!important;border:none!important;background:none!important;box-shadow:none!important}
.close__form .my_column{width:100%!important;float:none!important;padding:0!important;margin:0!important}
.close__form .label_frame{display:flex!important;align-items:center!important;gap:16px!important;margin:0!important;padding:0!important}
.close__form .form_input_label{font-family:var(--f-sans)!important;font-weight:700!important;font-size:20px!important;color:var(--ink)!important;letter-spacing:.04em!important;line-height:1.75!important;background:none!important;padding:0!important;margin:0!important;overflow:visible!important;text-overflow:unset!important;white-space:nowrap!important;display:inline!important}
.close__form .form_input_label.required::after{content:'必須'!important;display:inline-block!important;background:#ff1235!important;color:#fff!important;font-family:var(--f-sans)!important;font-weight:400!important;font-size:15px!important;letter-spacing:.04em!important;padding:5px 12px!important;line-height:1!important;margin-left:12px!important;border-radius:0!important;vertical-align:middle!important;position:relative!important;visibility:visible!important;opacity:1!important;width:auto!important;height:auto!important;min-width:fit-content!important;white-space:nowrap!important;overflow:visible!important;text-overflow:unset!important}
.close__form .my_right input[type="text"]{width:100%!important;height:86px!important;background:#fff!important;border:2px solid #ececec!important;border-radius:8px!important;padding:0 20px!important;font-family:var(--f-sans)!important;font-weight:400!important;font-size:18px!important;color:var(--ink)!important;letter-spacing:.06em!important;box-sizing:border-box!important;box-shadow:none!important}
.close__form .my_right input[type="text"]::placeholder{color:#9a9a9a!important}
.close__form .submit.form_input_submit{width:100%!important;margin:8px 0 0!important;padding:0!important;border:none!important;background:none!important;box-shadow:none!important}
.close__form .submit.form_input_submit input[type="submit"]{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:66px!important;padding:14px 22px!important;border:3px solid var(--paper)!important;border-radius:999px!important;background:var(--grad)!important;color:var(--paper)!important;font-family:var(--f-sans)!important;font-weight:900!important;font-size:18px!important;letter-spacing:.03em!important;cursor:pointer!important;box-shadow:0 0 0 2px var(--orange-2),0 8px 18px rgba(251,74,25,.35)!important;transition:transform .18s,box-shadow .18s!important;position:relative!important;overflow:hidden!important}
.close__form .submit.form_input_submit input[type="submit"]:hover{transform:translateY(-2px)!important}
.close__form .submit.form_input_submit input[type="submit"]:active{transform:translateY(1px)!important}

.foot{background:var(--ink);color:#a8a39b;font-size:15px;text-align:center;padding:22px 16px calc(100px + env(safe-area-inset-bottom,0px))}
.foot .logo{font-size:20px;margin-bottom:6px}
.foot__links{display:flex;justify-content:center;gap:10px;font-size:12px;margin:10px 0 6px}
.foot__links a{color:#d8d4cc;text-decoration:none}
.foot__links a:hover{text-decoration:underline}

/* ---------- floating CTA (mobile) ---------- */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:1fr;gap:8px;transform:translateY(130%);transition:transform .45s cubic-bezier(.2,1,.3,1);pointer-events:none}
.stick.is-on{transform:translateY(0)}
.stick .btn{pointer-events:auto;min-height:58px;font-size:16px;padding:6px 16px}
.stick .btn--tel{padding:0;min-height:58px}
.stick .btn--tel .btn__ico{width:32px;height:32px}
@media (min-width:481px){.stick{left:50%;right:auto;width:var(--col);margin-left:calc(var(--col) / -2)}}
@media (min-width:1024px){.stick{display:none}}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,1,.3,1)}
.js .rv.is-in{opacity:1;transform:none}
.js .bars.rv{opacity:1;transform:none}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sheen{to{background-position:-250% 0}}
@keyframes caret{50%{opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shine{0%,62%{left:-40%}82%,100%{left:130%}}
@keyframes ring{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-16deg)}78%{transform:rotate(14deg)}82%{transform:rotate(-10deg)}86%{transform:rotate(6deg)}}
@keyframes dash{to{stroke-dashoffset:-8}}
@keyframes shout{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes blink{50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .fv__ring{animation:none!important}
  html{scroll-behavior:auto}
}