/* ===== 色はここで変えられます（--accent が差し色＝マロンの緑。線・∞・ボタン・光の輪・トンネルの差し色はぜんぶここから） ===== */
:root{
  --font:"Raleway","Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Zen Kaku Gothic New",sans-serif;  /* 欧文 Raleway を先に、和文は遊ゴシック */
  --accent:#97C11F;        /* マロンの体の緑（素材から拾った色） */
  --accent-2:#B5D84E;      /* 線の先のほうの少し明るい色 */
  --accent-soft:#D5E8A2;   /* 淡い線（タブレットの見出しの後ろ） */
  --bg:#EEF2FA;
  --ink:#0d0e12;
  --sub:#5d6070;
  --pill:#E2E6EE;
  --dark:#2B2E35;
  --card:#121316;
  --band:#0F1315;
  --g:5vw;                 /* 左右の余白（1920幅で96px） */
  --r:clamp(12px,1vw,20px);
  --flow-w:clamp(12px,1.55vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.loading{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.8;letter-spacing:.01em;word-break:normal;line-break:strict;word-break:auto-phrase;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,li,dd,dt,summary{text-wrap:balance}
img,video,svg,canvas{display:block;max-width:100%}
main{overflow-x:clip}
.tab-sec{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.jp{font-family:var(--font)}
.en{font-family:var(--font);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.in .ln>span,.ln.in>span{transform:none}
html.static .ln>span{transform:none;transition:none}

/* ===== ピル型ボタン ===== */
.pill{display:inline-flex;align-items:center;gap:.8em;height:clamp(40px,2.7vw,56px);padding:0 clamp(16px,1.4vw,28px);border-radius:999px;
  font-family:var(--font);font-size:clamp(12px,.88vw,17px);font-weight:600;letter-spacing:0;
  background:#fff;color:var(--ink);white-space:nowrap;cursor:pointer;transition:transform .4s cubic-bezier(.19,1,.22,1),background .3s,color .3s}
.pill:hover{transform:scale(1.04)}
.pill.dark{background:var(--dark);color:#fff}
.pill.light{background:var(--pill)}
.pill.accent{background:var(--accent);color:#fff}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill .dots{display:inline-flex;gap:3px}.pill .dots i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.big{height:clamp(52px,3.65vw,70px);padding:0 clamp(22px,2vw,40px);font-size:clamp(14px,.9vw,17px);font-weight:500}
.circ{width:clamp(40px,2.7vw,56px);height:clamp(40px,2.7vw,56px);border-radius:50%;background:var(--pill);display:grid;place-items:center;transition:transform .4s cubic-bezier(.19,1,.22,1),background .3s}
.circ i{width:38%;height:2px;background:var(--ink);border-radius:2px;display:block;transition:transform .3s}
.circ:hover{transform:scale(1.06)}
.circ[aria-pressed=true] i{transform:rotate(90deg)}

/* ===== ヘッダー（固定） ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(14px,2.7vw,52px) var(--g) 0;pointer-events:none;height:0;overflow:visible}
.hd>*{pointer-events:auto}
.hd{align-items:flex-start}
.logo{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.28em;font-family:var(--font);line-height:1;
  height:clamp(40px,2.7vw,56px);transition:color .4s;color:var(--ink)}
.lo-w{display:flex;align-items:center;font-weight:700;font-size:clamp(22px,1.75vw,34px);letter-spacing:-.02em;line-height:1}
.lo-inf{width:1.2em;height:.6em;margin:0 .02em;flex:none;overflow:visible;transform:translateY(.09em)}
.lo-inf use{fill:none;stroke:var(--accent);stroke-width:13;stroke-linejoin:round}
.lo-by{font-size:clamp(10px,.66vw,13px);font-weight:600;letter-spacing:.04em;opacity:.7;padding-left:.1em;text-transform:none}
.hd.dark .logo{color:#fff}
.ft-vl .vl-logo{height:clamp(22px,1.6vw,30px);margin:.3em 0 .2em}
.wk-b{margin-top:.6em;font-size:clamp(14px,.95vw,18px);line-height:1.8;color:#333;max-width:40em}
.st-note{margin-top:auto;padding-top:14px;font-size:clamp(12px,.78vw,14px)!important;color:var(--sub)!important}
.reel-cap{position:absolute;left:calc(var(--g) + 2vw);bottom:calc(100vh - 18.1vh - 75.8vh + 2.2vw);z-index:3;color:#fff;font-size:clamp(13px,1.05vw,20px);line-height:1.6;opacity:var(--ps,0);pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.reel-cap span{display:block}.reel-cap .rc1{color:var(--accent-2)}
html.static .reel-cap{--ps:1;bottom:2vw}
.uc-note{margin-top:3vw;font-size:clamp(12px,.85vw,15px);color:var(--sub)}
.vl-logo{height:clamp(22px,1.46vw,28px);width:auto;display:block}
.vl-logo .lk{fill:var(--ink);transition:fill .4s}
.hd.dark .vl-logo .lk{fill:#fff}
.hd-r{display:flex;gap:clamp(8px,1.05vw,20px);align-items:center}
.hd-in{transition:transform .9s cubic-bezier(.19,1,.22,1),opacity .6s,background .4s,color .4s}
html.loading .hd-in,html.pre .hd-in{transform:translateY(-160%);opacity:0}
.hd.dark .circ{background:#E8EBF3}
.hd.dark .pill.dark{background:rgba(43,46,53,.92)}
.hd.dark .pill.light{background:#E8EBF3}
.menu-panel{position:fixed;top:calc(clamp(14px,2.7vw,52px) + clamp(40px,2.7vw,56px) + 12px);right:var(--g);z-index:59;width:min(380px,calc(100vw - 2*var(--g)));
  background:#fff;border-radius:var(--r);padding:22px 26px 26px;box-shadow:0 20px 60px rgba(13,14,18,.14);
  transform:translateY(-10px);opacity:0;pointer-events:none;transition:.35s}
.menu-panel.open{transform:none;opacity:1;pointer-events:auto}
.menu-panel a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid #e3e5ee;font-size:18px}
.menu-panel a span{font-size:11px;color:var(--sub);font-family:var(--font)}
.menu-panel .pill{margin-top:18px;width:100%;justify-content:center;border:0;font-size:14px}

/* ===== 1 読み込み画面 ===== */
#loader{position:fixed;inset:0;z-index:100;pointer-events:none}
html.loading #loader{pointer-events:auto}
#loader svg{position:absolute;inset:0;width:100%;height:100%}
#loader text{font-family:var(--font);font-weight:400;fill:#fff}
html:not(.loading) #loader.done,html.static #loader,html.cap #loader{display:none}

/* ===== 2 ヒーロー ===== */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;padding:0 var(--g)}
.hero-top{height:12.5vw;padding-top:3.05vw;padding-left:23.05vw}
.hero-desc{font-family:var(--font);font-size:2.05vw;line-height:1.3;font-weight:400;letter-spacing:-.01em}
.hero-desc .ln>span{transition-duration:1.2s}
.hero-desc .ln:nth-child(2)>span{transition-delay:.12s}.hero-desc .ln:nth-child(3)>span{transition-delay:.24s}
.card{position:absolute;left:var(--g);right:var(--g);top:12.5vw;bottom:49px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(90% 120% at 70% 45%,#17181d 0%,#111216 60%,#0d0e11 100%)}
.card canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.card .fallback{position:absolute;inset:0;display:none;place-items:center}
.card .fallback img{width:min(30%,240px);height:auto}
.no-gl .card .fallback{display:grid}
.card-lab{position:absolute;left:clamp(16px,1.4vw,26px);bottom:clamp(14px,1.2vw,22px);color:rgba(255,255,255,.82);font-size:clamp(12px,.9vw,16px);display:flex;align-items:center;gap:8px;z-index:2;pointer-events:none;letter-spacing:.02em}
.card-lab .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.plus-row{display:flex;justify-content:space-between;align-items:center;font-size:clamp(11px,.98vw,19px);color:var(--ink)}
.plus-row svg{width:clamp(14px,1.05vw,20px);height:clamp(14px,1.05vw,20px);flex:none;transition:transform .2s linear}
.hero .plus-row{position:absolute;left:var(--g);right:var(--g);bottom:0;height:49px}
.hero .plus-row span{position:absolute;left:50%;transform:translateX(-50%)}
.hero .plus-row svg:nth-of-type(2){margin-right:auto;margin-left:28vw}
.hero .plus-row svg:nth-of-type(3){margin-left:auto;margin-right:28vw}

/* ===== 3〜4 見出し・線・写真・本文 ===== */
.flow{position:relative}
.flow-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.flow-svg path{fill:none;stroke:url(#flowGrad);stroke-width:var(--flow-w);stroke-linecap:round;stroke-linejoin:round}
.concept{position:relative;padding-top:7vw;padding-bottom:6vw}
.say{position:relative;z-index:2;padding-left:calc(var(--g) + 15.4vw);font-size:clamp(13px,1vw,19px);color:var(--sub);margin-bottom:1.2vw}
.mega{position:relative;z-index:2;padding:0 var(--g);font-weight:500;letter-spacing:-.03em;line-height:1.1;font-size:9.6vw}
.mega .ln>span{white-space:nowrap}
.mega .l1{padding-left:15.4vw}
.mega .l2>span{transition-delay:.1s}
.intro{position:relative;display:grid;grid-template-columns:40.25vw 1fr;column-gap:5.7vw;padding:0 var(--g);margin-top:8.6vw;align-items:start}
.intro-media{padding-top:9.4vw}
.photo{position:relative;z-index:3;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--accent)}
.photo img{width:100%;height:100%;object-fit:cover}
.has-morph .photo img{visibility:hidden}
.has-morph .photo{background:transparent}
.intro-body{position:relative;z-index:4;max-width:45vw}
.words{font-size:clamp(15px,1.4vw,27px);line-height:1.62;letter-spacing:-.005em;color:var(--ink)}
.words .w{opacity:.18;transition:opacity .25s}
.words .w.on{opacity:1}
html.static .words .w{opacity:1}
.pill-more{margin-top:3.9vw}
.pill.white{background:#fff;box-shadow:0 2px 14px rgba(13,14,18,.04)}
.pill-more .pill{height:clamp(46px,3.35vw,64px);font-size:clamp(13px,.98vw,19px);font-weight:500;padding:0 clamp(20px,1.8vw,34px)}
details.more summary{list-style:none;cursor:pointer;display:inline-flex}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary .lab-o{display:none}
details.more:not([open]) summary .lab-c{display:none}
.more-body{margin-top:26px;font-size:clamp(14px,.95vw,17px);line-height:2;max-width:640px;background:#fff;border-radius:var(--r);padding:26px 30px}
.more-body p+p,.more-body ul+p,.more-body p+ul{margin-top:1em}
.more-body ul{list-style:none}
.more-body li{padding-left:1.2em;position:relative}
.more-body li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ===== 5 リール ===== */
.reel-sec{position:relative;height:300vh;margin-top:-55vh;z-index:4;pointer-events:none}
.reel-stage{position:sticky;top:0;height:100vh;height:100svh;pointer-events:none}
.reel-stage>*{pointer-events:auto}
.reel-stage .plus-row{position:absolute;left:var(--g);right:var(--g)}
.reel-stage .plus-row.top{top:calc(18.1vh - 30px)}
.reel-stage .plus-row.bot{top:calc(94vh + 14px)}
.reel-card{position:absolute;left:var(--g);right:var(--g);top:18.1vh;height:75.8vh;border-radius:var(--r);overflow:hidden;background:#111;opacity:0}
.reel-card video{width:100%;height:100%;object-fit:cover}
.no-morph .reel-card{opacity:1}
.reel-title{position:absolute;left:0;right:0;top:55.8vh;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;gap:0;
  color:#fff;font-family:var(--font);font-weight:400;font-size:7.3vw;line-height:1;letter-spacing:-.01em;z-index:3;pointer-events:auto}
.reel-title .w{display:block;width:21.5vw;text-align:right;white-space:nowrap}
.reel-title .w:last-child{text-align:left}
.reel-title .play{width:9.4vw;height:6vw;margin:0 3.4vw 0 2.6vw;border-radius:999px;background:#fff;display:grid;place-items:center;transform:scale(var(--ps,0));transition:transform .2s}
.reel-title .play i{width:0;height:0;border-left:1.25vw solid #0d0e12;border-top:.75vw solid transparent;border-bottom:.75vw solid transparent;margin-left:.3vw}
#morph{position:fixed;inset:0;width:100vw;height:100vh;z-index:3;pointer-events:none}

/* ===== 6 できること ===== */
.works{position:relative;z-index:5;padding:10.6vw var(--g) 6vw}
.works-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5.3vw}
.big{font-weight:400;font-size:8vw;letter-spacing:-.05em;line-height:1.05}
.works-desc{font-size:clamp(13px,.9vw,17px);line-height:1.45;max-width:21vw;text-transform:uppercase;padding-bottom:1.3vw;margin-left:auto}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1.9vw;row-gap:10.4vw}
.wk{display:block;cursor:pointer}
div.wk{cursor:default}
.wk-m{border-radius:var(--r);overflow:hidden;aspect-ratio:845/548;background:#ddd;will-change:transform;transform-origin:50% 50%}
.wk-m img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.wk:hover .wk-m img{transform:scale(1)}
.wk-tag{margin-top:1.75vw;font-size:clamp(11px,.88vw,17px);font-weight:500;letter-spacing:0}
.wk-t{display:flex;align-items:center;font-weight:500;font-size:clamp(22px,2.7vw,52px);letter-spacing:-.03em;line-height:1.25;margin-top:.5vw}
.wk-t .ar{width:0;height:.8em;flex:none;overflow:visible;opacity:0;transition:width .5s cubic-bezier(.19,1,.22,1),opacity .4s,margin .5s}
a.wk:hover .wk-t .ar,a.wk:focus-visible .wk-t .ar{width:.9em;opacity:1;margin-right:.65em}
.grid-label{display:flex;align-items:center;gap:10px;margin:10.4vw 0 3vw;font-size:clamp(13px,.95vw,18px);color:var(--sub)}
.grid-label .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.all-works{margin-top:6vw;text-align:center}
.all-works summary{justify-content:center}
.client-list{text-align:left;margin-top:3vw;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 36px;background:#fff;border-radius:var(--r);padding:34px}
.client-list h4{font-size:12px;color:var(--sub);margin:0 0 8px;font-weight:500}
.client-list ul{list-style:none}
.client-list li{font-size:14px;line-height:1.9}
.client-list .note{grid-column:1/-1;font-size:12px;color:var(--sub)}

/* ===== 7 タブレット ===== */
.tab-sec{position:relative;padding:18vw var(--g) 0}
.loop-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.loop-svg path{fill:none;stroke:var(--accent-soft);stroke-width:clamp(12px,1.6vw,30px);stroke-linecap:round}
.big3{position:relative;z-index:1;font-weight:500;font-size:min(7.15vw,calc(66vw / var(--n,8)));letter-spacing:-.03em;line-height:1.14}
.big3 .ln>span{white-space:nowrap}
.big3 .ln:nth-child(2)>span{transition-delay:.08s}.big3 .ln:nth-child(3)>span{transition-delay:.16s}
.tab-grid{position:relative;z-index:2;display:grid;grid-template-columns:45.85vw 1fr;column-gap:7.8vw;margin-top:7.3vw;align-items:start}
.tablet{position:relative;aspect-ratio:880/633;border-radius:2.1vw;background:#16171a;padding:1.65vw;box-shadow:0 30px 70px rgba(13,14,18,.18),inset 0 0 0 2px #2c2d31;transform-origin:50% 50%;will-change:transform;z-index:6}
.tab-screen{width:100%;height:100%;border-radius:1vw;background:#000 url(../media/tab-screen.jpg) center/cover no-repeat}
.sp-screen{position:absolute;left:0;top:0;max-width:none;object-fit:cover;transform-origin:50% 50%;opacity:0;pointer-events:none}
.tab-body{padding-top:4.4vw;max-width:30vw;font-size:clamp(15px,1.4vw,27px);line-height:1.5;letter-spacing:-.005em}
.tab-body p+p{margin-top:1.4em}

/* ===== 8〜10 宇宙・トンネル ===== */
.space-sec{position:relative;height:2400vh}
.space-static{display:none}
#space{position:fixed;inset:0;z-index:9;background:#000;visibility:hidden;overflow:hidden;pointer-events:none}
#space.on{visibility:visible}
#spaceGl{position:absolute;inset:0;width:100%;height:100%}
.halo{position:absolute;left:50%;top:50%;width:134vh;height:134vh;margin:-67vh 0 0 -67vh;border-radius:50%;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,transparent 52%,rgba(60,110,200,.10) 58%,rgba(90,150,255,.20) 62%,rgba(150,210,160,.16) 64.5%,rgba(220,240,140,.24) 66.5%,rgba(151,193,31,.24) 68.5%,rgba(200,60,120,.12) 71%,transparent 75%);
  filter:blur(1.6vh)}
.sp-malon{position:absolute;left:50%;top:0;width:auto;height:100vh;max-width:none;transform-origin:50% 50%;opacity:0}
.spread{position:absolute;inset:0;color:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center;opacity:0;font-weight:500}
.spread .sl{display:flex;justify-content:center;white-space:nowrap;line-height:1.08}
.spread .sl span{display:inline-block;will-change:transform}
.flash{position:absolute;inset:0;background:#fff;opacity:0}
.frame{position:absolute;inset:0;border:0 solid #07080c;border-radius:6px;opacity:0;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(0,0,0,.6)}
.burst{position:absolute;inset:0}
.burst svg{position:absolute;left:50%;top:50%;width:6vw;height:6vw;margin:-3vw 0 0 -3vw;will-change:transform}

/* ===== 11 一緒に、決めましょう ===== */
.cta{position:relative;background:#000;color:#fff;height:150vh;z-index:8}
.cta-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cta-malon{position:absolute;left:50%;top:34vh;height:70vh;width:auto;max-width:none;transform:translateX(-50%);z-index:1}
.stk-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.stk{position:absolute;width:var(--w);height:auto;transform:translate(-50%,-50%) scale(0) rotate(var(--r0));transition:transform .9s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.cta.in .stk{transform:translate(-50%,-50%) scale(1) rotate(var(--r0))}
.stk.sh{width:var(--w);filter:drop-shadow(0 0 0 #fff)}
.cta-plus svg{position:absolute;width:clamp(14px,1.3vw,24px);height:clamp(14px,1.3vw,24px);color:#fff;transform:translate(-50%,-50%);z-index:3}
.cta-say{position:absolute;left:0;right:0;top:18.4vh;text-align:center;font-size:clamp(13px,1vw,19px);z-index:4;letter-spacing:.02em}
.cta-h{position:absolute;left:0;right:0;top:24vh;text-align:center;font-weight:500;font-size:min(8.6vw,calc(86vw / var(--n,7)));line-height:1.14;letter-spacing:-.03em;z-index:4}
.cta-h .ln:nth-child(2)>span{transition-delay:.1s}
.cta-btn{position:absolute;left:50%;top:85.5vh;transform:translate(-50%,0);z-index:5;gap:1.4em}
.cta-btn:hover{transform:translate(-50%,0) scale(1.04)}
.cta-btn .ar{width:1.1em;height:1.1em}
.cta-btn .ar.d{transform:rotate(90deg)}

/* ===== 進め方・よくある質問 ===== */
.info{position:relative;z-index:8;background:var(--bg);padding:9vw var(--g) 7vw}
.info-row{display:grid;grid-template-columns:23vw 1fr;column-gap:3vw;padding:3.5vw 0;border-top:1px solid #d8dbe6}
.mid{font-weight:500;font-size:clamp(28px,3.2vw,60px);letter-spacing:-.04em;line-height:1.15}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.9vw}
.steps li{background:#fff;border-radius:var(--r);padding:26px 26px 30px;min-height:15vw;display:flex;flex-direction:column}
.steps .n{font-size:clamp(36px,3.4vw,64px);font-weight:400;line-height:1;letter-spacing:-.05em;color:var(--accent)}
.steps h3{font-weight:500;font-size:clamp(17px,1.15vw,22px);line-height:1.45;margin:auto 0 10px;padding-top:30px}
.steps h3 small{font-size:.7em;color:var(--sub);font-weight:400}
.steps p{font-size:clamp(13px,.85vw,16px);line-height:1.9;color:#333}
.qa{border-bottom:1px solid #d8dbe6}
.qa:first-child{border-top:1px solid #d8dbe6}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(16px,1.3vw,24px);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;position:relative}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.qa[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa p{padding:0 0 24px;max-width:760px;font-size:clamp(14px,.95vw,17px);line-height:2;color:#333}

/* ===== 12 フッター ===== */
.ft{position:relative;z-index:8;background:#fff;padding:7vw var(--g) 2.2vw}
.ft-grid{display:grid;grid-template-columns:23vw 23vw 1fr;column-gap:0}
.ft-col{font-size:clamp(14px,1.15vw,22px);line-height:1.6}
.ft-col p+p{margin-top:1.3em}
.ft-k{font-size:clamp(11px,.75vw,14px);color:var(--sub);letter-spacing:.04em}
.ft-col a{border-bottom:1px solid transparent}.ft-col a:hover{border-color:currentColor}
.ft-form h2{font-weight:500;font-size:clamp(28px,2.75vw,53px);line-height:1.08;letter-spacing:-.03em}
.ft-input{margin-top:2.4vw;max-width:33.7vw;min-height:clamp(56px,4.3vw,82px);border-radius:14px;background:#EEF0FA;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;color:#9a9dab;font-size:clamp(13px,.95vw,18px)}
.ft-input .ar{width:26px;height:26px;color:var(--ink);flex:none}
.ft-note{margin-top:14px;font-size:13px;color:var(--sub)}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:5vw;font-size:clamp(12px,.95vw,18px)}
.ft-bottom .up{width:clamp(48px,3.75vw,72px);height:clamp(48px,3.75vw,72px);border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.ft-bottom .up svg{width:42%;height:42%;transform:rotate(-90deg)}
.band{position:relative;z-index:8;background:var(--band);color:#fff}
.band summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;padding:4.2vw var(--g) 2vw;row-gap:0}
.band summary::-webkit-details-marker{display:none}
.band-s{grid-column:1/-1;font-size:clamp(11px,.95vw,18px);line-height:1.25;font-weight:500}
.band-t{font-size:clamp(30px,3.35vw,64px);font-weight:500;letter-spacing:-.02em;margin-top:3.6vw;line-height:1.1}
.band-n{align-self:end;display:flex;align-items:center;gap:14px;font-size:clamp(11px,.95vw,18px);padding-bottom:.6vw}
.band-n i{display:block;width:10vw;height:2px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.band-n i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.19,1,.22,1)}
.band summary:hover .band-n i::after{transform:none}
.band-n svg{width:24px;height:24px}
.band[open] .band-n svg{transform:rotate(90deg)}
.band-p{grid-column:1/-1;margin-top:3.8vw;color:#fff}
.band .co{display:grid;grid-template-columns:12em 1fr;padding:0 var(--g) 5vw;font-size:15px;max-width:980px}
.band .co dt,.band .co dd{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.band .co dt{color:rgba(255,255,255,.6)}

/* ===== サービス詳細・リール再生 ===== */
.sheet{position:fixed;inset:0;z-index:90;background:rgba(13,14,18,.4);display:flex;justify-content:flex-end}
.sheet[hidden]{display:none}
.sheet-in{position:relative;width:min(720px,100%);height:100%;overflow:auto;background:#fff;padding:90px 56px 60px;font-size:15px;line-height:2;animation:sheetIn .6s cubic-bezier(.19,1,.22,1)}
@keyframes sheetIn{from{transform:translateX(60px);opacity:0}}
.sheet-x{position:absolute;top:24px;right:24px}
.sheet-x i{transform:rotate(45deg)}.sheet-x i::after{content:"";display:block;width:100%;height:2px;background:var(--ink);transform:rotate(90deg)}
.sheet .num{font-size:12px;color:var(--sub)}
.sheet h3{font-weight:500;font-size:clamp(30px,3vw,46px);letter-spacing:-.03em;line-height:1.25;margin:10px 0 18px}
.sheet h3 small{display:block;font-size:.4em;color:var(--sub);letter-spacing:0}
.sheet .lead{font-size:18px;line-height:1.8;margin-bottom:1.2em}
.sheet p+p{margin-top:1em}
.sheet h4{font-size:13px;font-weight:500;color:var(--sub);margin:1.8em 0 .4em}
.sheet ul{list-style:none}.sheet li{padding-left:1.2em;position:relative}
.sheet li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sheet dl{display:grid;grid-template-columns:8em 1fr;gap:.4em 1em}
.sheet dt{font-weight:500}
#sheetCta{margin-top:34px}
.player{position:fixed;inset:0;z-index:95;background:#000;display:grid;place-items:center}
.player[hidden]{display:none}
.player video{width:100%;height:100%;object-fit:contain}
.player-x{position:absolute;top:24px;right:24px;background:#fff}
.player-x i{transform:rotate(45deg)}.player-x i::after{content:"";display:block;width:100%;height:2px;background:var(--ink);transform:rotate(90deg)}

/* ===== スマホ ===== */
@media (max-width:767px){
  :root{--g:16px;--flow-w:12px}
  body{font-size:15px}
  .hd{padding-top:14px}
  .logo{font-size:20px}
  .hd .pill.dark{display:none}
  .hero{height:auto;min-height:0;padding-bottom:0}
  .hero-top{height:auto;padding:84px 0 18px}
  .hero-desc{font-size:clamp(17px,5vw,22px);line-height:1.4}
  .card{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:62vh;height:62svh}
  .hero .plus-row{position:relative;left:auto;right:auto;height:44px}
  .hero .plus-row svg:nth-of-type(2),.hero .plus-row svg:nth-of-type(3){margin:0}
  .hero .plus-row svg:nth-of-type(2),.hero .plus-row svg:nth-of-type(3){display:none}
  .concept{padding-top:22vw}
  .say{padding-left:var(--g);font-size:13px;margin-bottom:10px}
  .mega{font-size:clamp(40px,13.4vw,60px);letter-spacing:-.04em}
  .mega .l1{padding-left:9vw}
  .intro{grid-template-columns:1fr;row-gap:32px;margin-top:40px}
  .intro-media{padding-top:0;order:2}
  .intro-body{max-width:none}
  .words{font-size:17px;line-height:1.75}
  .pill-more{margin-top:24px}
  .more-body{padding:20px}
  .reel-sec{margin-top:-30vh;height:220vh}
  .reel-stage .plus-row.top{top:calc(30vh - 30px)}
  .reel-card{top:30vh;height:40vh}
  .reel-stage .plus-row.bot{top:calc(70vh + 14px)}
  .reel-title{top:50vh;font-size:11vw}
  .reel-title .w{width:auto;white-space:nowrap}
  .reel-title .play{width:17vw;height:11vw;margin:0 3vw}
  .reel-title .play i{border-left-width:2.6vw;border-top-width:1.6vw;border-bottom-width:1.6vw}
  .works{padding-top:26vw}
  .works-head{display:block;margin-bottom:28px}
  .big{font-size:clamp(44px,15vw,64px)}
  .works-desc{max-width:none;margin-top:14px;padding:0;text-transform:none}
  .grid{grid-template-columns:1fr;row-gap:44px}
  .wk-tag{margin-top:14px}
  .wk-t{font-size:clamp(22px,6.6vw,30px);margin-top:4px}
  .wk-t .ar{width:.9em;opacity:1;margin-right:.5em}
  .grid-label{margin:64px 0 20px}
  .all-works{margin-top:44px}
  .client-list{padding:22px}
  .tab-sec{padding-top:28vw}
  .big3{font-size:clamp(28px,8.3vw,40px);line-height:1.25}
  .tab-grid{grid-template-columns:1fr;row-gap:30px;margin-top:34px}
  .tablet{border-radius:18px;padding:9px}
  .tab-screen{border-radius:10px}
  .tab-body{padding:0;max-width:none;font-size:16px;line-height:1.8}
  .space-sec{height:1500vh}
  .sp-malon{height:62vh}
  .cta{height:130vh}
  .cta-malon{height:50vh;top:42vh}
  .cta-say{top:17vh;padding:0 var(--g);font-size:13px}
  .cta-h{top:22vh;font-size:clamp(40px,13vw,60px)}
  .cta-btn{top:auto;bottom:6vh;width:calc(100% - 2*var(--g));justify-content:center}
  .info{padding-top:16vw}
  .info-row{grid-template-columns:1fr;row-gap:22px;padding:34px 0}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps li{min-height:0}
  .steps h3{padding-top:18px}
  .ft{padding-top:56px}
  .ft-grid{grid-template-columns:1fr;row-gap:36px}
  .ft-input{max-width:none;margin-top:18px}
  .ft-bottom{flex-wrap:wrap;margin-top:44px}
  .ft-bottom span:nth-child(2){display:none}
  .band summary{padding:44px var(--g) 22px}
  .band-t{margin-top:30px}
  .band-n i{width:56px}
  .band-p{margin-top:34px}
  .band .co{grid-template-columns:6.5em 1fr}
  .sheet-in{padding:80px 22px 50px}
  .sheet dl{grid-template-columns:1fr}
}


/* ===== スマホ版（iPhone収録の見本に合わせた配置） ===== */
br.sp{display:none}
.reel-band{display:none}
.ld-txt{display:none}
@keyframes rb{to{transform:translateX(-50%)}}
@keyframes ldb{50%{opacity:.25}}
@media (max-width:767px){
  br.sp{display:inline}
  :root{--flow-w:17px}
  /* ヘッダー：左にロゴ、右に丸い●●ボタンだけ */
  .hd{padding-top:12px}
  .hd #motionBtn{display:none}
  .hd #menuBtn{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .hd #menuBtn>span:first-child{display:none}
  .vl-logo{height:21px}
  .hd::before{content:"";position:fixed;left:0;right:0;top:0;height:64px;background:linear-gradient(var(--bg) 55%,rgba(238,242,250,0));pointer-events:none;opacity:0;transition:opacity .3s;z-index:-1}
  .hd.under::before{opacity:1}
  .hd.dark::before{opacity:0}
  /* 読み込み：中央の形と小さな LOADING */
  #ldCount{display:none}
  .ld-txt{display:block;position:absolute;left:0;right:0;top:calc(50% + 74px);text-align:center;color:#fff;font-size:9px;letter-spacing:.42em;animation:ldb 1s steps(2) infinite}
  /* ヒーロー：説明文3行の下に縦長の角丸カード */
  .hero-top{padding:66px 0 14px}
  .hero-desc{font-size:clamp(17px,5.1vw,21px);line-height:1.25;letter-spacing:-.01em}
  .card{height:68svh;height:68vh;height:68svh}
  /* 見出し：大きく左寄せ・4行 */
  .concept{padding-top:16vw}
  .mega{font-size:clamp(52px,17vw,76px);line-height:1.08;letter-spacing:-.03em}
  .mega .l1{padding-left:0}
  .intro{margin-top:34px;row-gap:26px}
  .words{font-size:15px;line-height:1.75}
  /* リール：縦長カード・中央に再生ボタンだけ・上下に流れる帯 */
  .reel-sec{margin-top:-24vh;height:230vh}
  .reel-stage .plus-row{display:none}
  .reel-card{top:calc(12svh + 34px);height:min(64svh,124vw)}
  .reel-band{display:block;opacity:0;position:absolute;left:0;right:0;overflow:hidden;font-size:12.5px;word-spacing:.15em;font-weight:500;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
  .reel-band.top{top:12svh}
  .reel-band.bot{top:calc(12svh + 34px + min(64svh,124vw) + 12px)}
  .rb-in{display:inline-block;animation:rb 14s linear infinite}
  .rb-in.rev{animation-duration:16s}
  .reel-title{top:calc(12svh + 34px + min(32svh,62vw));font-size:0}
  .reel-title .w{display:none}
  .reel-title .play{width:96px;height:60px;margin:0}
  .reel-title .play i{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
  /* 作品一覧 */
  .works{padding-top:30vw}
  .tab-sec{padding-top:36vw}
  .big3{font-size:min(11.2vw,calc((100vw - 36px) / var(--nsp,7)));line-height:1.16;letter-spacing:-.04em}
  .reel-cap{left:var(--g);right:var(--g);bottom:auto;top:calc(12svh + 34px + min(64svh,124vw) - 12px);transform:translateY(-100%);font-size:13px}
  .big{font-size:clamp(40px,11vw,70px)}
  /* CTA：上に小さい問い・中央に大きい2行・下に白ピル */
  .cta-say{top:25svh}
  .cta-h{top:30svh;font-size:min(11.6vw,calc((100vw - 40px) / var(--nsp,7)))}
  .cta-h .ln>span{white-space:nowrap}
  .cta-malon{height:40svh;top:40svh}
  .cta-btn{width:auto;bottom:7svh;left:50%;transform:translate(-50%,0)}
  .cta-btn:hover{transform:translate(-50%,0)}
  .halo{filter:none;width:118vw;height:118vw;margin:-59vw 0 0 -59vw}
  .stk{will-change:auto}
  .wk-m{will-change:auto}
}

/* ===== 動きを止めた形（重い端末・動きを減らす設定・?static） ===== */
html.static .reel-sec{height:auto;margin-top:6vw;pointer-events:auto}
html.static .reel-stage{position:relative;height:auto;padding:30px 0}
html.static .reel-stage .plus-row{position:relative;top:auto!important;margin:12px 0}
html.static .reel-card{position:relative;top:auto;left:auto;right:auto;height:auto;aspect-ratio:2.5/1;margin:0 var(--g);opacity:1}
html.static .reel-title{top:50%}
html.static .reel-title .play{--ps:1}
html.static #morph,html.static #space{display:none}
html.static .space-sec{height:auto;background:#000;color:#fff}
html.static .space-static{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:14vh var(--g) 0;overflow:hidden;height:100vh}
html.static .space-static img{height:60vh;width:auto;order:2}
html.static .space-static p{font-size:clamp(34px,7vw,120px);line-height:1.15;letter-spacing:-.04em;text-align:center}
html.static .stk{transform:translate(-50%,-50%) scale(1) rotate(var(--r0));transition:none}
html.static .cta{height:100vh}
html.static .tablet{transform:none!important}
html.static .hd-in{transform:none;opacity:1}

/* ===== 締めの文字（問い・補足・大見出しを縦に積む。文章の長さが変わっても重ならない） ===== */
.cta-txt{position:absolute;left:0;right:0;top:15vh;z-index:4;display:flex;flex-direction:column;align-items:center;padding:0 var(--g);pointer-events:none}
.cta-txt .cta-say,.cta-txt .cta-h{position:static;top:auto}
.cta-txt .cta-say{line-height:1.6}
.cta-note{margin-top:.9em;max-width:44em;font-size:clamp(12px,.8vw,15px);line-height:1.75;color:rgba(255,255,255,.66);text-align:center}
.cta-note:empty{display:none}
.cta-txt .cta-h{margin-top:3.2vh;text-shadow:0 2px 30px rgba(0,0,0,.35)}
@media (max-width:767px){
  .cta-txt{top:10.5svh}
  .cta-txt .cta-say{padding:0;font-size:13px}
  .cta-note{font-size:11.5px;line-height:1.7}
  .cta-txt .cta-h{margin-top:2.2svh}
}
@media (max-width:767px){ .cta-plus svg:nth-child(-n+2){display:none} }