:root{
  --ink:#1c1c1e; --ink-soft:#46494b; --mute:#8b8f96; --line:#e4e3ee;
  --blue:#96b8ff; --violet:#9e91ef; --pink:#e496ff; --rose:#ffc4e6; --pale:#f4f2fd;
  --en:"Josefin Sans",sans-serif; --jp:"Noto Sans JP","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--jp);color:var(--ink);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(28,28,30,.08)}
.logo{font-family:var(--en);font-weight:700;font-size:28px;letter-spacing:.04em;padding-top:4px}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav a.link{position:relative}
.nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--blue),var(--pink));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a.link:hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:13px 26px;font-size:14px;font-weight:700;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));opacity:0;transition:opacity .4s;z-index:-1}
.btn:hover::before{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 7vw 90px;overflow:hidden}
.blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.b1{width:46vw;height:46vw;right:-6vw;top:-10vw;background:radial-gradient(circle,var(--pink) 0%,rgba(228,150,255,0) 68%);animation:f1 14s ease-in-out infinite}
.b2{width:40vw;height:40vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,var(--blue) 0%,rgba(150,184,255,0) 68%);animation:f2 17s ease-in-out infinite}
.b3{width:30vw;height:30vw;right:22vw;top:14vw;background:radial-gradient(circle,var(--rose) 0%,rgba(255,196,230,0) 70%);animation:f3 20s ease-in-out infinite}
.blobs-in{position:absolute;inset:0;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@keyframes f1{50%{transform:translate(-9vw,7vw) scale(1.12)}}
@keyframes f2{50%{transform:translate(-12vw,-8vw) scale(.9)}}
@keyframes f3{50%{transform:translate(10vw,6vw) scale(1.25)}}
.hero > *:not(.blobs){position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:18px;font-weight:700;letter-spacing:.12em;font-size:clamp(14px,1.4vw,19px);margin-bottom:18px}
.eyebrow i{display:block;height:1px;width:min(34vw,400px);background:var(--ink);transform-origin:left;animation:grow 1.2s 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.h1{font-family:var(--en);font-weight:700;line-height:1.02;letter-spacing:.01em;font-size:clamp(46px,9.6vw,150px)}
.h1 .ln{display:block;overflow:hidden;padding-top:.12em}
.h1 .wd{display:inline-block;white-space:nowrap;overflow:hidden;padding-top:.12em;margin-top:-.12em;vertical-align:top}
.h1 .ch{display:inline-block;transform:translateY(110%) rotate(6deg);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*38ms + 1.55s)}

@keyframes up{to{transform:none}}
.tag{display:inline-block;margin-top:34px;padding:10px 30px;background:rgba(255,255,255,.75);font-weight:700;letter-spacing:.42em;font-size:clamp(14px,1.5vw,19px);animation:fade 1s 2.5s both}
.lead{max-width:600px;margin-top:26px;font-family:var(--en);font-size:15px;line-height:2;letter-spacing:.08em;color:var(--mute);animation:fade 1s 2.7s both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.scroll{position:absolute!important;left:7vw;bottom:28px;font-family:var(--en);font-size:12px;letter-spacing:.3em;display:flex;align-items:center;gap:12px;color:var(--ink-soft)}
.scroll i{display:block;width:60px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:slide 2s infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- marquee ---------- */
.mq{border-block:1px solid var(--line);overflow:hidden;padding:20px 0;background:#fff}
.mq-in{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq span{font-family:var(--en);font-weight:600;font-size:clamp(20px,2.6vw,34px);letter-spacing:.06em;padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.mq span::after{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink))}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(240px,.8fr) 1.4fr;gap:6vw;padding:150px 9vw;background:linear-gradient(120deg,#cfe6fb 0%,#d9d3f3 55%,#f1cfe4 100%)}
.sec-en{font-family:var(--en);font-weight:700;font-size:clamp(44px,6vw,84px);line-height:1}
.sec-jp{margin-top:12px;font-weight:700;letter-spacing:.3em;color:var(--ink-soft);font-size:15px}
.about-l{position:sticky;top:140px;align-self:start}
.about h3{font-size:clamp(20px,2.3vw,31px);letter-spacing:.12em;line-height:1.6;margin-bottom:34px}
.about p{font-size:clamp(14px,1.15vw,16px);line-height:2.1;letter-spacing:.1em;margin-bottom:26px}
.rv .w{opacity:.14;transition:opacity .5s}
.rv .w.on{opacity:1}

/* ---------- works ---------- */
.works{position:relative;padding:130px 0 120px;background:#fff;overflow:hidden}
.works::before{content:"";position:absolute;left:50%;top:38%;width:90vw;height:60vw;max-height:760px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 30% 50%,rgba(150,184,255,.45),transparent 60%),radial-gradient(ellipse at 72% 50%,rgba(228,150,255,.4),transparent 60%);filter:blur(50px);pointer-events:none}
.works-hd{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:0 9vw;margin-bottom:50px}
.hint{font-family:var(--en);font-size:13px;letter-spacing:.24em;color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.hint b{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);font-weight:400;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.stage{position:relative;height:calc(var(--cw)*.5625 + 110px);perspective:1300px;perspective-origin:50% 46%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.drag{cursor:grabbing}
.ring{position:absolute;left:50%;top:50px;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.card{position:absolute;left:calc(var(--cw)/-2);top:0;width:var(--cw);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#eee;
  box-shadow:0 30px 60px -24px rgba(70,60,140,.45);backface-visibility:hidden;will-change:transform,filter}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.card::after{content:"";position:absolute;inset:0;background:#fff;opacity:var(--dim,0);transition:opacity .2s;pointer-events:none}
.card.act{box-shadow:0 40px 80px -26px rgba(110,90,220,.6)}
.cap{position:relative;max-width:820px;margin:26px auto 0;padding:0 24px;text-align:center;min-height:190px}
.cap-in{transition:opacity .3s,transform .3s}
.cap-in.out{opacity:0;transform:translateY(10px)}
.num{font-family:var(--en);font-size:14px;letter-spacing:.2em;color:var(--violet);font-weight:700}
.cl{margin-top:10px;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft)}
.ttl{margin-top:6px;font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:.08em;line-height:1.5}
.tags{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tags span{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--pale);color:#5b50b8;font-weight:500}
.desc{margin-top:16px;font-size:14px;line-height:2;color:var(--ink-soft);letter-spacing:.05em;text-align:left}
.ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px}
.ctl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-size:18px;cursor:pointer;transition:.3s;color:var(--ink)}
.ctl button:hover{background:var(--ink);color:#fff}
.bar{width:min(240px,36vw);height:2px;background:var(--line);position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:12.5%;background:linear-gradient(90deg,var(--blue),var(--pink));transition:transform .4s}

/* ---------- voice ---------- */
.voice{position:relative;padding:130px 0 140px;background:linear-gradient(180deg,#fff 0%,var(--pale) 22%,var(--pale) 78%,#fff 100%);overflow:hidden}
.voice-hd{padding:0 9vw;margin-bottom:56px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.vrow{display:flex;gap:24px;width:max-content;padding:12px 0;animation:mq 70s linear infinite}
.vrow.rev{animation-direction:reverse;animation-duration:58s}
.voice:hover .vrow{animation-play-state:paused}
.vc{width:440px;flex:none;background:#fff;border-radius:14px;padding:30px 32px 26px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 22px 44px -28px rgba(70,60,140,.4);border:1px solid rgba(158,145,239,.16);transition:transform .4s,box-shadow .4s}
.vc:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(110,90,220,.55)}
.vc .res{align-self:flex-start;font-size:13px;font-weight:700;line-height:1.6;letter-spacing:.04em;color:#5b50b8;background:var(--pale);border-radius:8px;padding:7px 12px}
.vc .q{position:relative;font-size:19px;font-weight:700;line-height:1.75;letter-spacing:.05em;flex:1;padding-top:40px}
.vc .q::before{content:"\201C";position:absolute;left:-4px;top:4px;font-family:var(--en);font-size:76px;line-height:1;color:var(--violet);opacity:.45}
.vc .who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;letter-spacing:.06em}
.vc .who i{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--blue),var(--pink))}
.vc .who b{display:block;font-size:14px}
.vc .who span{color:var(--mute)}

/* ---------- values（もっと知る） ---------- */
.more{margin-top:14px}
.more button{display:inline-flex;align-items:center;gap:14px;font:700 15px/1 var(--jp);letter-spacing:.1em;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--ink);border-radius:999px;padding:16px 18px 16px 28px;cursor:pointer;transition:background .3s,color .3s}
.more button:hover{background:var(--ink);color:#fff}
.more button i{position:relative;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.more button i::before,.more button i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:#fff;transform:translate(-50%,-50%)}
.more button i::after{transform:translate(-50%,-50%) rotate(90deg)}
.more button[aria-expanded="true"] i{transform:rotate(135deg)}
.values{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1)}
.values.open{grid-template-rows:1fr}
.values-in{overflow:hidden;min-height:0}
.vbox{position:relative;margin-top:10px;background:#fff;border-radius:14px;padding:64px 5vw 60px;overflow:hidden}
.vbox::before{content:"";position:absolute;left:50%;top:55%;width:70%;height:90%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,196,230,.6),rgba(228,150,255,.22) 45%,transparent 70%);filter:blur(30px);pointer-events:none}
.vbox > *{position:relative}
.vbox-hd{text-align:center;margin-bottom:50px}
.vbox-hd .sec-en{font-size:clamp(36px,4.4vw,60px);margin:0;letter-spacing:.01em;line-height:1}
.vbox-hd .sec-jp{margin:12px 0 0;line-height:1.5;font-size:15px;letter-spacing:.2em}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:54px 6vw}
.val{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n)*110ms + .25s)}
.values.open .val{opacity:1;transform:none}
.val h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;font-size:clamp(18px,1.9vw,25px);letter-spacing:.06em;margin-bottom:16px}
.val h4 b{font-family:var(--en);font-weight:700;letter-spacing:.04em}
.val p{font-size:15px;line-height:2.1;letter-spacing:.06em;color:var(--ink-soft);margin:0}

/* ---------- message ---------- */
.msg{position:relative;display:grid;grid-template-columns:minmax(260px,.75fr) 1.25fr;gap:7vw;align-items:center;padding:140px 9vw;background:#fff;overflow:hidden}
.msg-ph{position:relative}
.msg-ph::before{content:"";position:absolute;inset:-12% -18% -12% -22%;background:radial-gradient(ellipse at 40% 40%,rgba(150,184,255,.6),transparent 62%),radial-gradient(ellipse at 70% 75%,rgba(228,150,255,.5),transparent 60%);filter:blur(40px)}
.msg-ph figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.msg-ph.in figure{opacity:1;transform:none}
.msg-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.msg-quote{margin:34px 0 30px;font-size:clamp(21px,2.5vw,33px);font-weight:700;line-height:1.65;letter-spacing:.08em;text-wrap:balance}
.msg-quote em{font-style:normal;background:linear-gradient(transparent 62%,rgba(228,150,255,.45) 62%)}
.msg-body p{font-size:clamp(14px,1.15vw,16px);line-height:2.1;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:20px}
.sign{margin-top:36px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px}
.sign small{font-size:13px;letter-spacing:.1em;color:var(--mute);width:100%}
.sign b{font-family:"Yuji Syuku","Klee One",serif;font-weight:400;font-size:40px;line-height:1.2;letter-spacing:.16em;transform:rotate(-1deg);transform-origin:left bottom;display:inline-block}
.sign span{font-family:var(--en);font-size:15px;letter-spacing:.18em;color:var(--violet)}
.fx{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n,0)*120ms)}
.fx.in{opacity:1;transform:none}

/* ---------- service ---------- */
.service{position:relative;padding:140px 9vw 130px;background:#fff;overflow:hidden}
.service-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:56px}
.service-hd .note2{max-width:440px;font-size:14px;line-height:2;letter-spacing:.08em;color:var(--ink-soft)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;perspective:1400px}
.sv{position:relative;border-radius:14px;padding:46px 44px 40px;min-height:470px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--pale);border:1px solid rgba(158,145,239,.2);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform}
.sv:hover{box-shadow:0 40px 70px -34px rgba(110,90,220,.55);transition:transform .12s linear,box-shadow .5s}
.sv::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;left:var(--gx,80%);top:var(--gy,10%);transform:translate(-50%,-50%);filter:blur(50px);opacity:.75;transition:left .25s,top .25s}
.sv.lp::before{background:radial-gradient(circle,var(--blue),rgba(150,184,255,0) 65%)}
.sv.ad::before{background:radial-gradient(circle,var(--pink),rgba(228,150,255,0) 65%)}
.sv .ghost{position:absolute;z-index:-1;right:-8px;bottom:-34px;font-family:var(--en);font-weight:700;font-size:210px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.95);letter-spacing:.02em;pointer-events:none}
.sv .en{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.24em;color:#5b50b8}
.sv h3{margin-top:10px;font-size:clamp(30px,3.4vw,46px);letter-spacing:.1em;line-height:1.2}
.sv .catch{margin-top:26px;font-size:clamp(16px,1.5vw,20px);font-weight:700;line-height:1.8;letter-spacing:.06em;text-wrap:balance}
.sv .tx{margin-top:14px;font-size:14px;line-height:2.05;letter-spacing:.06em;color:var(--ink-soft);max-width:34em}
.sv ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sv li{font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--ink);letter-spacing:.04em}
.sv .go{margin-top:auto;padding-top:30px;display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:14px;letter-spacing:.1em;align-self:flex-start}
.sv .go i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;transition:transform .35s}
.sv .go:hover i{transform:translateX(6px)}
.s-foot{margin-top:40px;text-align:center;font-size:15px;line-height:2;letter-spacing:.1em;font-weight:500}

/* ---------- company（別ビュー） ---------- */
.co-hero{position:relative;padding:190px 9vw 70px;overflow:hidden;background:linear-gradient(120deg,#cfe6fb 0%,#d9d3f3 55%,#f1cfe4 100%)}
.co-hero .sec-en{font-size:clamp(50px,8vw,112px)}
.co-hero .back{display:inline-flex;align-items:center;gap:10px;margin-bottom:36px;font-size:13px;font-weight:700;letter-spacing:.14em}
.msg .lbl{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.24em;color:#5b50b8}
.msg h3.ttl2{margin-top:8px;font-size:clamp(24px,2.6vw,34px);letter-spacing:.14em}
.prof{padding:120px 9vw 140px;background:var(--pale)}
.prof-in{max-width:980px;margin:0 auto}
.prof h3{font-family:var(--en);font-size:clamp(34px,4.4vw,58px);line-height:1}
.prof dl{margin-top:44px;border-top:1px solid var(--ink)}
.prof dl div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:26px 6px;border-bottom:1px solid var(--line)}
.prof dt{font-weight:700;letter-spacing:.16em;font-size:14px}
.prof dd{font-size:15px;line-height:2;letter-spacing:.06em;color:var(--ink-soft)}

/* ---------- スマホのメニュー ---------- */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:#fff;position:relative;cursor:pointer;flex:none}
.burger::before,.burger::after{content:"";position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform .35s,top .35s}
.burger::before{top:17px}.burger::after{top:25px}
.burger[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:40;background:linear-gradient(140deg,#e3effc,#e6e0f8 55%,#f6dcec);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px 28px 40px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.mnav.open{opacity:1;visibility:visible}
.mnav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(28,28,30,.12);font-weight:700;font-size:16px;letter-spacing:.12em;transform:translateY(16px);opacity:0;transition:transform .5s,opacity .5s;transition-delay:calc(var(--n)*50ms)}
.mnav.open a{transform:none;opacity:1}
.mnav a b{font-family:var(--en);font-size:30px;letter-spacing:.04em;min-width:190px}

/* ---------- flow（広告の入口から申込みまで） ---------- */
.flow-lead{max-width:900px;margin:0 0 46px}
.flow-lead h3{font-size:clamp(22px,2.9vw,40px);line-height:1.6;letter-spacing:.08em;text-wrap:balance}
.flow-lead h3 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(150,184,255,.55) 62%)}
.flow-lead p{margin-top:16px;font-size:15px;line-height:2;letter-spacing:.08em;color:var(--ink-soft)}
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
.flow::before{content:"";position:absolute;left:4%;right:4%;top:34px;height:2px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.3,.7,.2,1) .2s}
.flow.in::before{transform:scaleX(1)}
.fl{position:relative;text-align:center;padding:0 8px}
.fl .dot{position:relative;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--violet);font-weight:700;font-size:13px;letter-spacing:.1em;color:#5b50b8;
  transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.2,1.4,.3,1),opacity .5s;transition-delay:calc(var(--n)*380ms + .2s)}
.flow.in .dot{transform:none;opacity:1}
.fl:last-child .dot{background:var(--ink);border-color:var(--ink);color:#fff}
.fl h4{font-size:clamp(16px,1.6vw,21px);letter-spacing:.08em}
.fl p{margin-top:8px;font-size:13px;line-height:1.9;letter-spacing:.05em;color:var(--ink-soft)}
.ops{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;align-items:center;margin:26px 0 70px;padding:24px 30px;border-radius:14px;background:var(--ink);color:#fff}
.ops b{font-size:16px;letter-spacing:.14em;white-space:nowrap}
.ops p{font-size:13.5px;line-height:1.95;letter-spacing:.06em;opacity:.86}
.make{margin-top:70px}
.make h3{font-size:clamp(18px,2vw,26px);letter-spacing:.12em;margin-bottom:8px}
.make > p{font-size:14px;line-height:2;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:26px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mk{padding:22px 24px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:border-color .3s,transform .3s}
.mk:hover{border-color:var(--violet);transform:translateY(-4px)}
.mk h4{font-size:16px;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.mk h4::before{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink))}
.mk p{margin-top:8px;font-size:13px;line-height:1.9;color:var(--ink-soft);letter-spacing:.04em}

/* ---------- result（運用実績） ---------- */
.result{position:relative;padding:130px 9vw;background:var(--ink);color:#fff;overflow:hidden}
.result::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;height:160%;background:radial-gradient(ellipse at 40% 40%,rgba(150,184,255,.38),transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(228,150,255,.34),transparent 60%);filter:blur(60px);pointer-events:none}
.result > *{position:relative}
.result .sec-jp{color:rgba(255,255,255,.75)}
.result .who2{margin-top:40px;font-size:15px;letter-spacing:.14em;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.result .who2 b{padding:8px 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:14px}
.result .who2 small{opacity:.6;font-size:12px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:34px}
.stat .k{font-size:15px;letter-spacing:.16em;opacity:.8}
.stat .v{font-family:var(--en);font-weight:700;line-height:1;font-size:clamp(84px,13vw,200px);letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;margin-top:8px;font-variant-numeric:tabular-nums}
.stat .v small{font-family:var(--jp);font-size:.2em;letter-spacing:.08em}
.stat .v .pre{font-family:var(--jp);font-size:.14em;letter-spacing:.2em;align-self:center;opacity:.8}
.stat .v span.n{background:linear-gradient(90deg,#b9cfff,#e9b6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.result .cap2{margin-top:30px;font-size:15px;line-height:2;letter-spacing:.1em;opacity:.86}

/* ---------- LPの考え方（別ビュー） ---------- */
.lpsec{padding:110px 9vw}
.lpsec.pale{background:var(--pale)}
.lpsec .hd2{max-width:900px;margin-bottom:46px}
.lpsec .hd2 .lbl{font-family:var(--en);font-weight:700;font-size:14px;letter-spacing:.24em;color:#5b50b8}
.lpsec .hd2 h3{margin-top:10px;font-size:clamp(22px,2.8vw,38px);line-height:1.6;letter-spacing:.08em;text-wrap:balance}
.lpsec .hd2 p{margin-top:14px;font-size:15px;line-height:2;letter-spacing:.07em;color:var(--ink-soft)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cm{border-radius:14px;padding:36px 34px;background:#fff;border:1px solid var(--line)}
.cm.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cm h4{font-size:20px;letter-spacing:.1em}
.cm .role{margin-top:12px;font-size:15px;font-weight:700;line-height:1.8;letter-spacing:.06em}
.cm dl{margin-top:20px;font-size:13.5px;line-height:1.95;letter-spacing:.05em}
.cm dt{font-weight:700;margin-top:14px;opacity:.7;font-size:12px;letter-spacing:.16em}
.cm.on dd{opacity:.9}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.th{border-radius:14px;padding:38px 30px;background:#fff;text-align:center;border:1px solid rgba(158,145,239,.2)}
.th i{display:block;width:54px;height:54px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink))}
.th h4{font-size:clamp(17px,1.7vw,22px);line-height:1.6;letter-spacing:.08em}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.bar2 h4{font-size:18px;letter-spacing:.1em;margin-bottom:22px}
.bar2 .plot{display:flex;align-items:flex-end;gap:36px;height:260px;border-bottom:2px solid var(--ink);padding:0 24px}
.bar2 .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar2 .col b{font-family:var(--en);font-size:clamp(22px,2.6vw,36px);margin-bottom:8px;font-variant-numeric:tabular-nums}
.bar2 .col b small{font-size:.5em;margin-left:2px}
.bar2 .col span{width:100%;border-radius:10px 10px 0 0;height:0;transition:height 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.bar2 .col.lo span{background:#bcd0f7}
.bar2 .col.hi span{background:linear-gradient(180deg,var(--pink),var(--violet) 55%,#6f8fe8)}
.bar2.in .col.lo span{height:calc(var(--h)*1%)}
.bar2.in .col.hi span{height:calc(var(--h)*1%)}
.bar2 .ax{display:flex;gap:36px;padding:10px 24px 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-align:center}
.bar2 .ax span{flex:1}
.assume{margin-top:28px;font-size:12.5px;letter-spacing:.06em;color:var(--mute)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.steps li{list-style:none;counter-increment:s;position:relative;padding:22px 12px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;line-height:1.7;letter-spacing:.05em;text-align:center}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--en);font-size:22px;color:var(--violet);margin-bottom:8px}
.steps li:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.two .cm p{margin-top:12px;font-size:14px;line-height:2;letter-spacing:.05em;color:var(--ink-soft)}

/* ---------- 開いた瞬間の演出 ---------- */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;
  background:linear-gradient(120deg,#cfe6fb 0%,#d9d3f3 50%,#f6cfe6 100%);animation:introOut .9s cubic-bezier(.7,0,.2,1) 1.25s forwards}
.intro::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(100%);animation:introWhite .9s cubic-bezier(.7,0,.2,1) 1.05s forwards}
.intro b{position:relative;z-index:1;font-family:var(--en);font-weight:700;font-size:clamp(54px,11vw,150px);letter-spacing:.06em;display:flex;overflow:hidden;padding-top:.12em;animation:introFade .4s 1.05s forwards}
.intro b span{display:inline-block;transform:translateY(115%);animation:up .7s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .1s)}
@keyframes introWhite{to{transform:none}}
@keyframes introFade{to{opacity:0}}
@keyframes introOut{to{transform:translateY(-100%)}}

/* ---------- スクロールの進み具合・カーソルの輪 ---------- */
.prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform:scaleX(var(--p,0));transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));pointer-events:none}
.cur{position:fixed;left:0;top:0;z-index:90;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;display:grid;place-items:center;
  border:1.5px solid rgba(158,145,239,.9);background:rgba(228,150,255,.08);opacity:0;
  font-family:var(--en);font-weight:700;font-size:11px;letter-spacing:.14em;color:#fff;
  transition:width .35s cubic-bezier(.2,.9,.2,1),height .35s cubic-bezier(.2,.9,.2,1),margin .35s cubic-bezier(.2,.9,.2,1),background .3s,border-color .3s,opacity .3s}
.cur.on{opacity:1}
.cur.link{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(228,150,255,.22);border-color:transparent}
.cur.drag{width:92px;height:92px;margin:-46px 0 0 -46px;background:linear-gradient(135deg,rgba(120,150,240,.92),rgba(214,130,240,.92));border-color:transparent}
.cur.drag::after{content:"DRAG"}

/* ---------- くるくる回るスクロールの印 ---------- */
.spin{position:absolute!important;right:6vw;bottom:36px;width:128px;height:128px;display:grid;place-items:center}
.spin svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.spin text{font-family:var(--en);font-weight:600;font-size:11.5px;letter-spacing:.34em;fill:var(--ink)}
.spin i{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

/* ---------- voice: タップで全文 ---------- */
.voice-hd .tap{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.1em}
.voice-hd .tap i{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;animation:tapp 1.8s ease-in-out infinite}
@keyframes tapp{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(158,145,239,.55)}50%{transform:scale(.9);box-shadow:0 0 0 14px rgba(158,145,239,0)}}
.vc{cursor:pointer}
.vc:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.vc .rd{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#5b50b8;white-space:nowrap}
.vc .rd i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;display:grid;place-items:center;font-style:normal;transition:transform .3s}
.vc:hover .rd i{transform:translateX(5px)}
.vm{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(28,28,30,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.vm.open{opacity:1;visibility:visible}
.vm-p{position:relative;width:min(820px,100%);max-height:min(86vh,900px);overflow:auto;background:#fff;border-radius:18px;padding:54px 56px 50px;transform:translateY(40px) scale(.97);transition:transform .5s cubic-bezier(.2,.9,.2,1);overscroll-behavior:contain}
.vm.open .vm-p{transform:none}
.vm-x{position:sticky;top:0;float:right;margin:-26px -28px 0 0;width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-size:20px;cursor:pointer;color:var(--ink);z-index:2}
.vm-x:hover{background:var(--ink);color:#fff}
.vm .res{display:inline-block;font-size:13px;font-weight:700;color:#5b50b8;background:var(--pale);border-radius:8px;padding:7px 12px;letter-spacing:.04em}
.vm h3{margin-top:16px;font-size:clamp(20px,2.4vw,28px);line-height:1.7;letter-spacing:.06em}
.vm .lead2{margin-top:14px;font-size:15px;font-weight:700;line-height:1.9;letter-spacing:.05em;color:var(--ink-soft)}
.vm h4{margin:34px 0 12px;font-size:16px;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.vm h4::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--pink))}
.vm p.b{font-size:14.5px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:12px}
.vm .who3{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;letter-spacing:.08em;text-align:right;font-weight:700}

/* ---------- 代表プロフィール（あいさつとは別） ---------- */
.bio{padding:110px 9vw;background:#fff;border-top:1px solid var(--line)}
.bio-in{max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,.7fr) 1.5fr;gap:6vw}
.bio h3{font-family:var(--en);font-size:clamp(34px,4.4vw,58px);line-height:1}
.bio .nm{margin-top:34px;font-size:13px;letter-spacing:.1em;color:var(--mute)}
.bio .nm b{display:block;margin-top:6px;font-size:24px;letter-spacing:.18em;color:var(--ink)}
.bio .nm span{display:block;margin-top:4px;font-family:var(--en);font-size:14px;letter-spacing:.18em;color:var(--violet)}
.tl{list-style:none;position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue),var(--violet),var(--pink))}
.tl li{position:relative;padding-bottom:34px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-34px;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--violet)}
.tl li:last-child::before{background:var(--ink);border-color:var(--ink)}
.tl h4{font-size:17px;letter-spacing:.1em}
.tl p{margin-top:8px;font-size:14.5px;line-height:2;letter-spacing:.06em;color:var(--ink-soft)}

/* ---------- cta ---------- */
.cta{position:relative;padding:130px 7vw;text-align:center;overflow:hidden;background:var(--ink);color:#fff}
.cta::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,var(--blue),var(--pink),var(--rose),var(--blue));filter:blur(120px);opacity:.5;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta > *{position:relative}
.cta h2{font-family:var(--en);font-size:clamp(38px,7vw,100px);line-height:1.05}
.cta p{margin:22px 0 38px;letter-spacing:.2em;font-weight:500}
.cta .btn{background:#fff;color:var(--ink);padding:18px 40px;font-size:16px}
.cta .btn:hover{color:#fff}
.note{padding:22px;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.08em}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .hd{padding:12px 18px}.logo{font-size:23px}
  .nav a.link{display:none}.btn{padding:11px 18px;font-size:12px}
  .hero{padding:110px 22px 90px}
  .h1{font-size:17vw;line-height:1}.h1 .wd{display:block}.h1 .sp{display:none}
  .blob{filter:blur(46px)}
  .b1{width:90vw;height:90vw;right:-34vw;top:-4vw}.b2{width:80vw;height:80vw;bottom:-10vw;right:-30vw}.b3{width:60vw;height:60vw;right:6vw;top:52vw}
  .tag{letter-spacing:.24em;padding:9px 16px}
  .lead{font-size:12.5px}
  .scroll{left:22px}
  .about{grid-template-columns:1fr;padding:84px 24px;gap:36px}
  .about-l{position:static}
  .works{padding:84px 0 80px}
  .works-hd{padding:0 24px;margin-bottom:24px;flex-direction:column;align-items:flex-start;gap:18px}
  .stage{perspective:900px}
  .cap{min-height:300px}
  .voice{padding:84px 0 90px}
  .voice-hd{padding:0 24px;margin-bottom:28px;flex-direction:column;align-items:flex-start;gap:18px}
  .voice-hd .tap{font-size:13px}
  .hero{padding-bottom:150px}
  .vrow,.vrow.rev{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 24px;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vrow::-webkit-scrollbar{display:none}
  .vc{width:82vw;scroll-snap-align:center;padding:24px 22px 20px}.vc.dup{display:none}
  .vc .q{font-size:17px}
  .more button{font-size:13px;padding:14px 14px 14px 20px}
  .vbox{padding:44px 22px 40px}.vbox-hd{margin-bottom:34px}
  .vgrid{grid-template-columns:1fr;gap:34px}
  .msg{grid-template-columns:1fr;padding:84px 24px;gap:40px}
  .msg-ph{width:72%;margin:0 auto}
  .burger{display:block}
  .nav .btn{display:none}
  .service{padding:84px 24px 80px}.service-hd{margin-bottom:30px}
  .sgrid{grid-template-columns:1fr;gap:18px}
  .sv{padding:34px 26px 30px;min-height:0}.sv .ghost{font-size:130px;bottom:-20px}
  .co-hero{padding:130px 24px 50px}
  .prof{padding:70px 24px 90px}
  .prof dl div{grid-template-columns:1fr;gap:6px;padding:20px 2px}
  .flow{grid-template-columns:1fr;gap:26px}
  .flow::before{left:33px;right:auto;top:20px;bottom:20px;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
  .flow.in::before{transform:scaleY(1)}
  .fl{text-align:left;display:grid;grid-template-columns:68px 1fr;gap:0 18px;padding:0}
  .fl .dot{margin:0;grid-row:1/3}
  .fl h4{align-self:end}
  .ops{grid-template-columns:1fr;padding:22px;margin-bottom:50px}
  .mgrid{grid-template-columns:1fr}
  .result{padding:84px 24px}
  .stats{grid-template-columns:1fr;gap:40px}
  .lpsec{padding:70px 24px}
  .cmp,.three,.bars,.two{grid-template-columns:1fr}
  .bars{gap:50px}
  .steps{grid-template-columns:1fr 1fr}
  .spin{right:16px;bottom:22px;width:96px;height:96px}.spin i{width:36px;height:36px;font-size:15px}
  .scroll{display:none}
  .vm{padding:12px}.vm-p{padding:40px 22px 34px;max-height:88vh}.vm-x{margin:-22px -6px 0 0}
  .vc .rd span{display:none}
  .bio{padding:70px 24px}.bio-in{grid-template-columns:1fr;gap:34px}
  .cta{padding:90px 24px}
}
@media (prefers-reduced-motion:reduce){
  .intro,.cur{display:none}.spin svg,.spin i{animation:none}
  .h1 .ch{animation:none;transform:none}.blob,.mq-in,.vrow,.cta::before{animation:none}
  .rv .w{opacity:1}
  .val,.fx{opacity:1;transform:none;transition:none}.msg-ph figure{opacity:1;transform:none}
}

/* 開いた瞬間のロゴの下に一言（その分だけ少し長く見せる） */
.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vh;animation-delay:1.85s}
.intro::after{animation-delay:1.65s}
.intro b{animation-delay:1.65s}
.intro p{position:relative;z-index:1;font-weight:700;letter-spacing:.34em;font-size:clamp(12px,1.5vw,19px);opacity:0;animation:wkintro 1.6s .5s forwards}
@keyframes wkintro{0%{opacity:0;transform:translateY(12px)}30%,80%{opacity:1;transform:none}100%{opacity:0}}
/* ================= わくわく版：頭の中へ ================= */
.dive{position:relative;height:340vh;background:#fff}
.dv{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dv .blobs{z-index:0}
.dv-head{position:absolute;z-index:1;opacity:0;visibility:hidden;right:6vw;top:50vh;height:70vh;aspect-ratio:400/460;transform-origin:58% 42%;pointer-events:none}
.dv-head svg{width:100%;height:100%;overflow:visible;display:block}
.dv-head .hl{stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dv-head .peek{animation:wkbob 3.4s ease-in-out infinite}
.dv-hero{position:absolute;inset:0;z-index:2}
.dv-in{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden}
.dv-in::before{content:"";position:absolute;inset:0;opacity:var(--bgo,1);background:radial-gradient(ellipse at 50% 56%,rgba(255,255,255,.95) 0,rgba(244,242,253,.7) 42%,rgba(214,205,246,.82) 100%)}
.dv-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(rgba(255,255,255,0),#fff);opacity:var(--wh,0);pointer-events:none}
.dv-ttl{position:absolute;left:0;right:0;top:15vh;padding:0 24px;text-align:center;opacity:0}
.dv-ttl .en{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.3em;color:#5b50b8}
.dv-ttl h2{margin-top:10px;font-size:clamp(24px,3.6vw,48px);letter-spacing:.1em;line-height:1.5;text-wrap:balance}
.dv-ttl h2 span{display:inline-block}
.dv-ttl p.s{margin-top:8px;font-size:15px;letter-spacing:.1em;color:var(--ink-soft)}
.dv-bs{list-style:none;position:absolute;inset:0}
.bb{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.bb span{display:block;white-space:nowrap;background:#fff;border:1.5px solid var(--ink);border-radius:22px 22px 22px 5px;padding:13px 22px;font-weight:700;font-size:clamp(14px,1.35vw,18px);letter-spacing:.06em;
  box-shadow:0 18px 36px -22px rgba(70,60,140,.55);animation:wkbob 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.6s)}
.bb:nth-child(even) span{border-radius:22px 22px 5px 22px}
@keyframes wkbob{50%{transform:translateY(-9px)}}
.dv-fan{position:absolute;inset:0;opacity:0;pointer-events:none}
.fc{position:absolute;left:50%;top:63%;width:min(380px,30vw);aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:4px solid #fff;background:#eee;box-shadow:0 34px 60px -26px rgba(70,50,160,.6);will-change:transform}
.fc img{width:100%;height:100%;object-fit:cover;display:block}
.fc:nth-child(1),.fc:nth-child(5){z-index:1}.fc:nth-child(2),.fc:nth-child(4){z-index:2}.fc:nth-child(3){z-index:3}
.dv-glow{position:absolute;left:50%;top:63%;width:min(70vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff 0,rgba(228,150,255,.75) 28%,rgba(150,184,255,.5) 50%,transparent 68%);filter:blur(18px)}
.dv-ttl h2 em{font-style:normal;background:linear-gradient(90deg,#6f8fe8,#a58cf0 50%,#e07fe0);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 奥行き：光・粒 */
.dv-flash{position:absolute;inset:0;visibility:hidden;z-index:3;opacity:0;pointer-events:none;background:radial-gradient(circle at var(--fx,72%) var(--fy,78%),#fff 0,#fff 34%,rgba(255,255,255,0) 82%)}
.dv-dot{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--pink) 55%,var(--blue));opacity:.75;pointer-events:none;will-change:transform}
.dv-head .ring{fill:none;stroke:rgba(158,145,239,.55);stroke-width:1.4;vector-effect:non-scaling-stroke}
.dv-skip{position:absolute;z-index:5;right:calc(22px + env(safe-area-inset-right,0px));top:92px;font-size:12px;font-weight:700;letter-spacing:.14em;padding:9px 16px;border-radius:999px;border:1px solid var(--ink);background:rgba(255,255,255,.8)}
.dv-skip:hover{background:var(--ink);color:#fff}
.dv-hero .spin,.dv-hero .scroll{display:none}
.dv-cue{position:absolute;z-index:6;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font:700 14px/1 var(--jp);letter-spacing:.12em;color:var(--ink);background:rgba(255,255,255,.86);border:1.5px solid var(--ink);border-radius:999px;padding:8px 20px 8px 8px;cursor:pointer;box-shadow:0 18px 30px -18px rgba(70,60,140,.6)}
.dv-cue:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.dv-cue i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));display:grid;place-items:center;color:#fff;font-style:normal;animation:bob 1.6s ease-in-out infinite}
.dv-cue em{display:flex;gap:5px}
.dv-cue em b{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s}
.dv-cue em b.on{background:var(--violet)}

/* 動きを減らす設定：演出なしで全部を順に見せる */
.dive.static{height:auto}
.static .dv{position:relative;height:auto;overflow:hidden}
.static .dv-hero{position:relative;inset:auto}
.static .dv-head{display:none}
.static .dv-in{position:relative;inset:auto;opacity:1;visibility:visible;padding:90px 24px 100px;display:flex;flex-direction:column;align-items:center;gap:30px}
.static .dv-ttl{position:static;opacity:1;padding:0}
.static .dv-bs{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px}
.static .bb{position:static;opacity:1;transform:none}
.static .bb span,.static .dv-head .peek{animation:none}
.static .dv-flash,.static .dv-dot{display:none}
.static .dv-in{--wh:1}
.static .bb{filter:none!important}
.static .dv-fan{position:static;opacity:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:980px}
.static .fc{position:static;width:min(300px,46%);transform:none}
.static .dv-glow{display:none}
.static .dv-skip,.static .dv-cue{display:none}

/* ================= わくわく版：案内役 ================= */
.msc{display:block;width:100%;height:100%;overflow:visible}
.e-open{transform-box:fill-box;transform-origin:center;animation:wkblink 4.6s infinite}
@keyframes wkblink{0%,92%,100%{transform:none}95%,97%{transform:scaleY(.1)}}
.e-happy,.m-open,.m-happy{display:none}
.talk .m-open{display:block;animation:wktalk .28s steps(1) infinite}
.talk .m-smile{animation:wktalk .28s steps(1) infinite reverse}
@keyframes wktalk{0%{opacity:1}50%{opacity:0}}
.happy .e-open,.happy .m-smile,.happy .m-open{display:none}
.happy .e-happy,.happy .m-happy{display:block}
.guide{position:relative;padding:120px 9vw 130px;background:#fff;overflow:hidden}
.guide::before{content:"";position:absolute;left:8%;top:50%;width:46vw;height:46vw;max-width:640px;max-height:640px;transform:translateY(-50%);background:radial-gradient(circle,rgba(228,150,255,.4),transparent 62%),radial-gradient(circle at 70% 70%,rgba(150,184,255,.4),transparent 60%);filter:blur(50px);pointer-events:none}
.gd{position:relative;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:5vw;align-items:center}
.gd-m{aspect-ratio:1;animation:wkbob 3.4s ease-in-out infinite}
.gd-b{min-width:0}
.gd-n{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;background:var(--ink);color:#fff;border-radius:999px;padding:7px 16px}
.gd-say{position:relative;margin-top:14px;background:#fff;border:1.5px solid var(--ink);border-radius:22px 22px 22px 5px;padding:28px 30px 44px;min-height:156px;cursor:pointer;box-shadow:0 30px 50px -30px rgba(70,60,140,.5)}
.gd-say:focus-visible,.gd-ch button:focus-visible,.mini-b:focus-visible,.mini-menu button:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.gd-say p{font-size:clamp(17px,1.9vw,24px);font-weight:700;line-height:1.8;letter-spacing:.06em}
.gd-nx{position:absolute;right:22px;bottom:14px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#5b50b8;animation:wkbob 1.4s ease-in-out infinite}
.gd-ch{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gd-ch button,.mini-menu button{font:700 15px/1.5 var(--jp);letter-spacing:.08em;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:16px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .3s,color .3s,transform .3s}
.gd-ch button i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));flex:none}
.gd-ch button:hover,.gd-ch button.on,.mini-menu button:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.sv.hl{outline:3px solid var(--violet);outline-offset:6px}

.s-foot{text-wrap:balance}
/* 強み・よくあるご質問 */
.stg{padding:130px 9vw 110px;background:linear-gradient(180deg,#fff 0,#fff 62%,var(--pale) 100%)}
.stg-hd h3{margin-top:34px;font-size:clamp(22px,2.9vw,40px);line-height:1.6;letter-spacing:.08em;text-wrap:balance}
.stg-g{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stg-c{position:relative;border-radius:14px;padding:36px 30px 34px;background:var(--pale);border:1px solid rgba(158,145,239,.2);overflow:hidden;isolation:isolate}
.stg-c::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;filter:blur(40px);opacity:.7;background:radial-gradient(circle,var(--pink),rgba(228,150,255,0) 65%)}
.stg-c:nth-child(2)::before{background:radial-gradient(circle,var(--violet),rgba(158,145,239,0) 65%)}
.stg-c:nth-child(3)::before{background:radial-gradient(circle,var(--blue),rgba(150,184,255,0) 65%)}
.stg-c .en{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.24em;color:#5b50b8}
.stg-c h4{margin-top:10px;font-size:clamp(19px,1.9vw,25px);letter-spacing:.08em;line-height:1.5}
.stg-c h4 + p{margin-top:14px;font-size:14px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft)}
.faq{padding:120px 9vw 130px;background:#fff}
.faq-in{max-width:980px;margin:0 auto}
.faq-l{margin-top:40px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 50px 24px 4px;font-weight:700;font-size:clamp(15px,1.4vw,18px);line-height:1.7;letter-spacing:.06em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:400;font-size:20px;line-height:1;background:linear-gradient(135deg,var(--blue),var(--pink));transition:transform .35s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.faq details p{padding:0 50px 26px 4px;font-size:14.5px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft)}
/* 灰色に見える所をなくす：画像の下地は薄紫、ヘッダーは白を濃く（黒い帯の上でも灰色にならない） */
.card,.fc{background:var(--pale)}
.hd{background:rgba(255,255,255,.92)}
/* 事例：詳しく見る */
.bar i{width:11.111%}
.cap{min-height:260px}
.cap .sv-more{margin:20px auto 0}
.card.act{cursor:pointer}
.wm-img{border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:24px;background:var(--pale)}
.wm-img img{width:100%;height:100%;object-fit:cover;display:block}
.vm .wm-cl{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft)}
.vm .tags{justify-content:flex-start;margin-top:16px}
.vm p.wm-lead{margin-top:18px;font-weight:500;color:var(--ink)}
.vm h5{margin:20px 0 8px;font-size:14.5px;letter-spacing:.08em;color:#5b50b8}
.wm-ul{list-style:none;margin:0 0 12px}
.wm-ul li{position:relative;padding:4px 0 4px 20px;font-size:14.5px;line-height:1.9;letter-spacing:.05em;color:var(--ink-soft)}
.wm-ul li::before{content:"";position:absolute;left:3px;top:15px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink))}
.wm-dl{border-top:1px solid var(--line)}
.wm-dl div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.8;letter-spacing:.04em}
.wm-dl dt{font-weight:700}.wm-dl dd{color:var(--ink-soft)}
.wm-q{margin-top:28px;padding:22px 24px;background:var(--pale);border-radius:12px}
.wm-q small{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;color:#5b50b8}
.wm-q p{margin-top:8px;font-size:16px;font-weight:700;line-height:1.8;letter-spacing:.05em}
.wm-q .sv-more{margin-top:16px}
/* 広告運用：タップで詳しく */
.sv{cursor:pointer}
.sv-more{margin-top:24px;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;font:700 14px/1 var(--jp);letter-spacing:.08em;color:var(--ink);background:rgba(255,255,255,.85);border:1.5px solid var(--ink);border-radius:999px;padding:12px 12px 12px 20px;cursor:pointer;transition:background .3s,color .3s}
.sv-more:hover{background:var(--ink);color:#fff}
.sv-more:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.sv-more i{position:relative;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv-more i::before,.sv-more i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:#fff;transform:translate(-50%,-50%)}
.sv-more i::after{transform:translate(-50%,-50%) rotate(90deg)}
.sv-more[aria-expanded="true"] i{transform:rotate(135deg)}
.sv-dt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1)}
.sv-dt.open{grid-template-rows:1fr}
.sv-dt > div{overflow:hidden;min-height:0}
.sv-g{margin-top:12px;background:rgba(255,255,255,.88);border-radius:12px;padding:16px 18px}
.sv-g:first-child{margin-top:16px}
.sv-g h4{font-size:15px;letter-spacing:.1em;display:flex;align-items:center;gap:9px}
.sv-g h4::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink))}
.sv-g p{margin-top:6px;font-size:13px;line-height:1.9;letter-spacing:.04em;color:var(--ink-soft)}
/* 右下についてくる案内役 */
.mini{position:fixed;z-index:38;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .4s,transform .4s,visibility .4s;pointer-events:none}
.mini.on{opacity:1;visibility:visible;transform:none}
.mini > *{pointer-events:auto}
.mini-b{width:74px;height:74px;border:0;background:none;cursor:pointer;padding:0;animation:wkbob 3.4s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(110,90,220,.35))}
.mini-tip,.mini-menu{background:#fff;border:1.5px solid var(--ink);border-radius:18px 18px 5px 18px;box-shadow:0 24px 44px -24px rgba(70,60,140,.6);max-width:min(300px,calc(100vw - 40px))}
.mini-tip{padding:14px 18px;font-size:14px;font-weight:700;line-height:1.7;letter-spacing:.05em}
.mini-tip a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:#5b50b8;border-bottom:1px solid currentColor}
.mini-menu{padding:14px;display:grid;gap:8px;width:250px}
.mini-menu p{font-size:13px;font-weight:700;letter-spacing:.08em;padding:2px 6px 4px}
.mini-menu button{font-size:14px;padding:12px}
.mini-tip[hidden],.mini-menu[hidden]{display:none}

@media (max-width:820px){
  .dive{height:320vh}
  .dv-head{right:calc(50% - 130px);top:calc(50vh - 140px);top:calc(50svh - 140px);height:300px}
  .dv-hero .lead{display:none}
  .dv-flash{--fx:57%;--fy:48%}
  .dv-hero .eyebrow i{width:16vw}
  .dv-ttl{top:106px}
  .dv-ttl h2{font-size:23px}
  .dv-ttl p.s{font-size:13px}
  .bb span{font-size:13px;padding:8px 14px}
  .fc{width:50vw;top:56%}.dv-glow{top:56%;width:110vw}
  .dv-skip{top:74px;right:14px;padding:7px 12px;font-size:11px}
  .dv-cue{font-size:12.5px;gap:9px;padding-right:14px}
  .dv-hero .spin{display:none}
  .guide{padding:80px 22px 90px}
  .cap{min-height:380px}
  .stg{padding:84px 24px 64px}.stg-g{grid-template-columns:1fr;margin-top:30px}.stg-c{padding:28px 24px}
  .faq{padding:80px 24px 90px}.faq details p{padding-right:10px}
  .gd{grid-template-columns:1fr;gap:10px}
  .gd-m{width:130px;margin:0 auto}
  .gd-say{padding:22px 20px 40px;min-height:170px}
  .gd-ch{grid-template-columns:1fr}
  .mini-b{width:62px;height:62px}
  .static .dv-in{padding:70px 20px 80px}
}
@media (prefers-reduced-motion:reduce){
  .gd-m,.gd-nx,.mini-b,.dv-cue i,.e-open{animation:none}
}

/* ---------- RECORのやり方（#way・別ビュー） ---------- */
.wy-nb{display:inline-block}
.wy{overflow-x:clip;padding:90px 9vw 60px;background:#fff}
.wy-hd h3{font-size:clamp(22px,2.9vw,40px);line-height:1.6;letter-spacing:.08em;text-wrap:balance}
.wy-hd h3 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(228,150,255,.38) 62%)}
.wy-rk{margin-top:44px;display:flex;align-items:flex-end;gap:16px;max-width:680px}
.wy-rk-m{width:92px;flex:none;aspect-ratio:1;animation:wkbob 3.4s ease-in-out infinite}
.wy-rk-b{min-width:0}
.wy-rk-n{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px}
.wy-rk-s{margin-top:10px;background:#fff;border:1.5px solid var(--ink);border-radius:22px 22px 22px 5px;padding:16px 22px;font-weight:700;font-size:clamp(15px,1.5vw,19px);line-height:1.8;letter-spacing:.06em;box-shadow:0 24px 40px -28px rgba(70,60,140,.5)}
.wy-br{display:flex;align-items:center;gap:18px;margin-block:64px 54px;font-weight:700;font-size:clamp(14px,1.3vw,17px);letter-spacing:.24em;color:#5b50b8}
.wy-br::before,.wy-br::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(150,184,255,0),var(--violet))}
.wy-br::after{background:linear-gradient(90deg,var(--violet),rgba(228,150,255,0))}
.wy-br>span{flex:none;background:var(--pale);border-radius:999px;padding:9px 24px;max-width:78%;text-align:center;line-height:1.6}
.wy-cs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,5vw,76px);align-items:center}
.wy-cs.rev .wy-ph{order:2}
.wy-ph{position:relative;min-width:0}
.wy-ph::before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;left:-12%;top:-18%;border-radius:50%;filter:blur(50px);opacity:.6;background:radial-gradient(circle,var(--pink),rgba(228,150,255,0) 66%)}
.wy-cs.rev .wy-ph::before{left:auto;right:-12%;background:radial-gradient(circle,var(--blue),rgba(150,184,255,0) 66%)}
.wy-ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--pale);box-shadow:0 34px 60px -34px rgba(70,60,140,.55)}
.wy-ph figcaption{margin-top:16px;font-size:13px;line-height:1.7;letter-spacing:.06em;color:var(--ink-soft)}
.wy-ph figcaption b{display:block;font-size:15px;color:var(--ink);letter-spacing:.08em}
.wy-steps{position:relative;min-width:0;list-style:none;display:grid;gap:30px;padding-left:34px}
.wy-steps::before{content:"";position:absolute;left:6px;top:10px;bottom:24px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--violet),var(--pink))}
.wy-st{position:relative;min-width:0}
.wy-st::before{content:"";position:absolute;left:-34px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--violet)}
.wy-st.got::before{background:linear-gradient(135deg,var(--blue),var(--pink));border-color:transparent}
.wy-lb{font-size:12px;font-weight:700;letter-spacing:.2em;color:#5b50b8}
.wy-q{margin-top:12px;display:inline-block;background:#fff;border:1.5px solid var(--ink);border-radius:22px 22px 22px 5px;padding:16px 22px;font-weight:700;font-size:clamp(15px,1.45vw,18px);line-height:1.85;letter-spacing:.05em;text-wrap:balance}
.wy-hand{margin-top:8px;font-weight:700;font-size:clamp(23px,2.7vw,36px);line-height:1.55;letter-spacing:.07em}
.wy-hand i{font-style:normal;background:linear-gradient(transparent 70%,rgba(150,184,255,.55) 70%)}
.wy-d{margin-top:12px;font-size:14px;line-height:2;letter-spacing:.05em;color:var(--ink-soft);max-width:34em}
.wy-card{margin-top:12px;position:relative;overflow:hidden;isolation:isolate;background:var(--pale);border:1px solid rgba(158,145,239,.22);border-radius:14px;padding:22px 24px 20px}
.wy-card::before{content:"";position:absolute;z-index:-1;width:200px;height:200px;right:-80px;top:-100px;border-radius:50%;filter:blur(36px);opacity:.7;background:radial-gradient(circle,var(--violet),rgba(158,145,239,0) 65%)}
.wy-card p{text-wrap:balance;font-weight:700;font-size:clamp(16px,1.6vw,20px);line-height:1.8;letter-spacing:.05em}
.wy-card cite{display:block;margin-top:10px;font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--ink-soft)}
.wy-res{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;border-radius:18px;padding:44px clamp(24px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end}
.wy-res::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-220px;border-radius:50%;filter:blur(70px);opacity:.55;background:radial-gradient(circle,var(--pink),rgba(228,150,255,0) 66%)}
.wy-res::after{content:"";position:absolute;z-index:-1;width:380px;height:380px;left:-140px;bottom:-240px;border-radius:50%;filter:blur(70px);opacity:.5;background:radial-gradient(circle,var(--blue),rgba(150,184,255,0) 66%)}
.wy-res h4{font-size:clamp(18px,1.9vw,25px);line-height:1.7;letter-spacing:.08em}
.wy-res h4 small{display:block;margin-top:10px;font-size:13px;font-weight:400;line-height:1.9;color:rgba(255,255,255,.75);letter-spacing:.05em}
.wy-stat .k{font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.wy-stat .v{margin-top:6px;font-family:var(--en);font-weight:700;line-height:1;font-size:clamp(54px,6.4vw,92px);font-variant-numeric:tabular-nums;white-space:nowrap}
.wy-stat .v span{font-family:var(--jp);font-size:.26em;margin-right:6px;letter-spacing:.1em}
.wy-stat .v small{font-family:var(--jp);font-size:.28em;margin-left:6px;letter-spacing:.08em}
.wy-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.wy-end .wy-rk{margin-top:0;text-align:left}
.wy-mc{font-size:14px;font-weight:700;line-height:1.8;letter-spacing:.1em;color:#5b50b8}
.wy-go{margin-top:34px;display:flex}
.wy-go a{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:14px;letter-spacing:.1em}
.wy-go a i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;transition:transform .35s}
.wy-go a:hover i{transform:translateX(5px)}
.wy-go a:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
@media (max-width:820px){
  .wy{padding:56px 24px 40px}
  .wy-rk{margin-top:30px;gap:12px}.wy-rk-m{width:68px}.wy-rk-s{padding:13px 16px}
  .wy-br{margin-block:46px 38px;gap:10px;letter-spacing:.16em}.wy-br>span{padding:8px 16px}
  .wy-cs{grid-template-columns:minmax(0,1fr);gap:26px}
  .wy-cs.rev .wy-ph{order:0}
  .wy-steps{padding-left:28px;gap:26px}.wy-st::before{left:-28px}
  .wy-q{padding:13px 16px}
  .wy-card{padding:18px 18px 16px}
  .wy-res{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:34px 22px;gap:24px 14px}
  .wy-res h4{grid-column:1/-1}
  .wy-go{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){.wy-rk-m{animation:none}}
/* メニューが6つになったので、幅が足りない画面（〜1120px）は三本線のメニューにまとめる */
.nav a{white-space:nowrap}
@media (max-width:1120px){.nav a.link{display:none}.burger{display:block}}

/* ---------- 強み：必ずやる4つ（sx-） ---------- */
.sx{margin-top:54px}
.sx-lead{font-size:clamp(24px,3.5vw,50px);font-weight:700;line-height:1.55;letter-spacing:.08em;text-wrap:balance}
.sx-lead em{font-style:normal;background:linear-gradient(transparent 64%,rgba(228,150,255,.4) 64%)}
.sx-sub{margin-top:18px;max-width:40em;font-size:15px;line-height:2;letter-spacing:.06em;color:var(--ink-soft)}
.sx-g{margin-top:40px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sx-c{position:relative;overflow:hidden;isolation:isolate;min-width:0;border-radius:18px;padding:30px 24px 28px;background:var(--pale);border:1px solid rgba(158,145,239,.2)}
.sx-c::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-90px;top:-100px;border-radius:50%;filter:blur(40px);opacity:.75;background:radial-gradient(circle,var(--pink),rgba(228,150,255,0) 65%)}
.sx-c:nth-child(2)::before{background:radial-gradient(circle,var(--violet),rgba(158,145,239,0) 65%)}
.sx-c:nth-child(3)::before{background:radial-gradient(circle,var(--rose),rgba(255,196,230,0) 65%)}
.sx-c:nth-child(4)::before{background:radial-gradient(circle,var(--blue),rgba(150,184,255,0) 65%)}
.sx-ic{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#96b8ff,#b3a4f6 50%,#e9a3f7);box-shadow:0 16px 26px -14px rgba(120,100,220,.7)}
.sx-ic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-c h4{margin-top:20px;font-size:clamp(20px,1.75vw,26px);line-height:1.5;letter-spacing:.06em}
.sx-c h4 small{display:block;font-size:.62em;letter-spacing:.2em;color:#5b50b8}
.sx-c p{margin-top:12px;font-size:13.5px;line-height:1.9;letter-spacing:.04em;color:var(--ink-soft)}
.sx-also{margin-top:30px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sx-also li{min-width:0;padding:20px 22px;font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--ink-soft)}
.sx-also li + li{border-left:1px solid var(--line)}
.sx-also b{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:.08em;color:var(--ink)}
.sx-also b::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--blue),var(--pink))}
.sx-also strong{font-family:var(--en);font-size:1.5em;color:var(--ink);letter-spacing:.02em}
@media (max-width:1100px){.sx-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .sx{margin-top:36px}.sx-sub{font-size:14px}
  .sx-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
  .sx-c{padding:22px 12px 20px;text-align:center}
  .sx-ic{width:56px;height:56px;margin:0 auto}.sx-ic svg{width:28px;height:28px}
  .sx-c h4{margin-top:14px;font-size:16px;letter-spacing:.04em}.sx-c p{display:none}
  .sx-also{grid-template-columns:minmax(0,1fr)}
  .sx-also li{padding:16px 4px}.sx-also li + li{border-left:0;border-top:1px solid var(--line)}
  #dvT2 h2{font-size:20px;letter-spacing:.04em}
}
/* 頭の中：うしろの列の言葉（小さめ・うすめ）は、手前の言葉の下に重ねる */
.bb{z-index:1}.bb.bk{z-index:0}

/* =========================================================
   本番用に足したもの（わくわく版の色・書体・部品の中で作る）
   ========================================================= */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* フッター */
.ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 34px;padding:34px 40px 40px;border-top:1px solid var(--line)}
.ft .logo{font-size:24px}
.ft-nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;font-weight:500;letter-spacing:.06em}
.ft-nav a{color:var(--ink-soft)}
.ft-nav a:hover{color:var(--ink)}
.ft-c{width:100%;font-size:12px;color:var(--mute);letter-spacing:.08em}

/* トップ：事例のスライダーの下 */
.wk-all{display:flex;justify-content:center;margin-top:34px}
.wm-pg{margin-top:26px}

/* 記事（事例・お客様のお声・お知らせ） */
.co-hero p.sec-en{font-size:clamp(44px,6vw,84px)}
.art{max-width:860px;margin:0 auto;padding:70px 24px 110px}
.art .wm-img{margin-bottom:28px}
.art .wm-cl{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft)}
.art h1{margin-top:12px;font-size:clamp(22px,2.6vw,32px);line-height:1.6;letter-spacing:.06em}
.art .tags{justify-content:flex-start}
.art .res{display:inline-block;font-size:13px;font-weight:700;color:#5b50b8;background:var(--pale);border-radius:8px;padding:7px 12px;letter-spacing:.04em}
.art .lead2{margin-top:14px;font-size:15px;font-weight:700;line-height:1.9;letter-spacing:.05em;color:var(--ink-soft)}
.art p.b{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:12px}
.art p.wm-lead{margin-top:20px;font-weight:500;color:var(--ink)}
.art .ah{margin:44px 0 14px;font-size:18px;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.art .ah::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--pink));flex:none}
.art .ah3{margin:24px 0 8px;font-size:15px;letter-spacing:.08em;color:#5b50b8}
.art ol{margin:0 0 12px 1.4em;font-size:15px;line-height:1.95;letter-spacing:.05em;color:var(--ink-soft)}
.art figure{margin:22px 0;border-radius:12px;overflow:hidden;background:var(--pale)}
.art figure img{display:block;width:100%;height:auto}
.art figcaption{padding:10px 14px;font-size:12px;color:var(--mute);background:#fff}
.art hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.art strong{color:var(--ink);font-weight:700}
.art a:not(.sv-more){text-decoration:underline;text-underline-offset:3px}
.art .tbl{overflow-x:auto;margin:22px 0}
.art table{width:100%;border-collapse:collapse;border-top:1px solid var(--line);font-size:14px;line-height:1.8;letter-spacing:.04em}
.art th,.art td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.art th{width:120px;font-weight:700;white-space:nowrap}
.art td{color:var(--ink-soft)}
.art .who3{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;letter-spacing:.08em;text-align:right;font-weight:700}
.art-bk{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.art-bk .sv-more{margin-top:0}
.art .nd{font-family:var(--en);font-weight:700;letter-spacing:.12em;color:#5b50b8}

/* 事例一覧 */
.wl{padding:70px 7vw 120px}
.wl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;max-width:1240px;margin:0 auto}
.wl-c{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 40px -18px rgba(60,50,140,.35);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.wl-c:hover{transform:translateY(-4px);box-shadow:0 18px 50px -18px rgba(60,50,140,.45)}
.wl-c figure{aspect-ratio:16/9;background:var(--pale);overflow:hidden}
.wl-c img{width:100%;height:100%;object-fit:cover;display:block}
.wl-tx{padding:18px 20px 22px}
.wl-cl{font-size:12px;font-weight:700;letter-spacing:.1em;color:#5b50b8}
.wl-c h2{margin-top:6px;font-size:15px;line-height:1.7;letter-spacing:.05em}
.wl-d{margin-top:8px;font-size:13px;line-height:1.9;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wl-mw{display:flex;justify-content:center;margin:56px 0 0}
.wl-rest{margin-top:40px;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.wl-c.sm{box-shadow:none;border:1px solid var(--line)}
.wl-c.sm h2{font-size:13px}
.wl-c.sm .wl-tx{padding:12px 14px 16px}

/* お知らせ一覧 */
.nl{padding:60px 7vw 120px}
.nl ul{list-style:none;max-width:900px;margin:0 auto;border-top:1px solid var(--ink)}
.nl li a{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;padding:24px 6px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.06em;transition:background .3s}
.nl li a:hover{background:var(--pale)}
.nl time{font-family:var(--en);font-weight:700;letter-spacing:.1em;color:#5b50b8}

/* お問い合わせ */
.ct{padding:70px 7vw 120px;background:var(--pale)}
.ct-in{max-width:760px;margin:0 auto}
.ct-lead{font-size:14px;line-height:2;letter-spacing:.05em;color:var(--ink-soft)}
.ct-f{margin-top:34px;display:grid;gap:22px;background:#fff;border-radius:18px;padding:40px 42px 44px;box-shadow:0 10px 40px -20px rgba(60,50,140,.3)}
.ct-l{display:grid;gap:8px}
.ct-l>span,.ct-r legend{font-size:14px;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.ct-f em,.ct-f small{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.ct-f em{color:#fff;background:linear-gradient(90deg,var(--blue),var(--pink))}
.ct-f small{color:var(--mute);background:var(--pale)}
.ct-l input,.ct-l textarea{width:100%;font:16px/1.7 var(--jp);color:var(--ink);background:#fbfaff;border:1.5px solid #dcd8f2;border-radius:10px;padding:12px 14px;transition:border-color .3s,box-shadow .3s}
.ct-l textarea{resize:vertical;min-height:170px}
.ct-l input:focus,.ct-l textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(158,145,239,.18)}
.ct-l input[aria-invalid="true"],.ct-l textarea[aria-invalid="true"]{border-color:#e0679b}
.ct-r{border:0;display:flex;flex-wrap:wrap;gap:12px}
.ct-r legend{width:100%;margin-bottom:10px}
.ct-r label{cursor:pointer}
.ct-r input{position:absolute;opacity:0}
.ct-r span{display:inline-block;padding:11px 22px;border-radius:999px;border:1.5px solid var(--ink);font-size:14px;font-weight:700;letter-spacing:.06em;transition:background .3s,color .3s}
.ct-r input:checked+span{background:var(--ink);color:#fff}
.ct-r input:focus-visible+span{outline:3px solid var(--violet);outline-offset:3px}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-ag{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.05em;cursor:pointer}
.ct-ag input{width:20px;height:20px;accent-color:var(--violet)}
.ct-ag a{text-decoration:underline;text-underline-offset:3px}
.ct-err{font-size:14px;line-height:1.8;color:#c2416f;background:#fdeef4;border-radius:10px;padding:12px 14px}
.ct-sb{justify-self:center;border:0;cursor:pointer;padding:18px 54px;font-size:16px;font-family:var(--jp)}
.ct-sb[disabled]{opacity:.5;cursor:wait}
.ct-done p{font-size:15px;line-height:2.1;letter-spacing:.06em}

/* プライバシーポリシー */
.pv{padding:70px 7vw 120px}
.pv-in{max-width:860px;margin:0 auto}
.pv h2{margin:40px 0 12px;font-size:17px;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.pv h2::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--pink));flex:none}
.pv p,.pv li{font-size:14.5px;line-height:2.05;letter-spacing:.05em;color:var(--ink-soft)}
.pv ul{margin:6px 0 0 1.4em}
.pv a{text-decoration:underline;text-underline-offset:3px}
.pv-d{margin-top:44px;text-align:right;font-size:13px}

@media (max-width:1000px){
  .wl-grid{grid-template-columns:repeat(2,1fr)}
  .wl-rest{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .ft{padding:28px 20px 34px}
  .art{padding:46px 20px 90px}
  .wl,.nl,.ct,.pv{padding-left:20px;padding-right:20px}
  .wl-grid{grid-template-columns:1fr;gap:26px}
  .wl-rest{grid-template-columns:repeat(2,1fr);gap:14px}
  .nl li a{grid-template-columns:1fr auto;gap:6px 14px}
  .nl li a time{grid-column:1/-1}
  .ct-f{padding:28px 20px 32px}
  .art th{width:auto;white-space:normal}
}