/* =========================================================
   DeepGrid — トップページ専用
   ========================================================= */

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;padding-block:72px 64px;min-height:min(100svh,880px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.curve{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.curve-path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s .5s cubic-bezier(.6,.1,.2,1) forwards}
.curve-dots circle{fill:#fff;stroke:var(--g1);stroke-width:2.4;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards}
.curve-dots circle:nth-child(1){animation-delay:1.2s}.curve-dots circle:nth-child(2){animation-delay:1.7s}.curve-dots circle:nth-child(3){animation-delay:2.2s}.curve-dots circle:nth-child(4){animation-delay:2.7s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@media (max-width:900px){.curve{display:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-catch{font-weight:900;font-size:clamp(36px,5.4vw,78px);line-height:1.22;letter-spacing:.005em}
.hero-catch .line:nth-child(2)>span{animation-delay:.12s}
.hero-catch .en{font-weight:300;letter-spacing:-.03em}
.hero-sub{font-size:16px;line-height:2;color:var(--fg2);max-width:34em}
/* hero visual: グリッドの核に、AI・営業・人がつながる */
.hero-visual{position:relative;width:100%;max-width:min(560px,100%);aspect-ratio:1;justify-self:end}
.hv-floor{position:absolute;left:-10%;right:-10%;bottom:-6%;height:62%;background-image:linear-gradient(color-mix(in srgb,var(--g1) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--g1) 55%,transparent) 1px,transparent 1px);background-size:36px 36px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 72%)}
@keyframes floor{to{background-position:0 36px,0 0}}
.hv-links{position:absolute;inset:0;width:100%;height:100%}
.hv-links path{stroke:var(--g1);stroke-width:1.6;stroke-dasharray:4 7;opacity:.55;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-22}}
.hv-ring{position:absolute;border-radius:50%;left:50%;top:50%;translate:-50% -50%;border:1px dashed color-mix(in srgb,var(--g1) 40%,transparent)}
.hv-ring.r1{width:76%;aspect-ratio:1}
.hv-ring.r2{width:56%;aspect-ratio:1;border:1px solid color-mix(in srgb,#fff 80%,transparent)}
.hv-ring i{position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--g1)}
.hv-core{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;translate:-50% -50%}
.hv-disc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--g3),var(--g1),var(--g2),#ffd59a,var(--g3));animation:spin 14s linear infinite;box-shadow:0 30px 60px -20px color-mix(in srgb,var(--g1) 70%,transparent)}
.hv-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background-image:linear-gradient(#fff5 1px,transparent 1px),linear-gradient(90deg,#fff5 1px,transparent 1px);background-size:16px 16px}
.hv-glass{position:absolute;inset:22%;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:inset 0 2px 10px #fff}
.hv-mark{width:42%;aspect-ratio:1;border-radius:22%;background:var(--grad);position:relative;overflow:hidden;box-shadow:0 8px 20px -8px var(--g1)}
.hv-mark::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#fff7 1px,transparent 1px),linear-gradient(90deg,#fff7 1px,transparent 1px);background-size:33.4% 33.4%}
.hv-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.95);border:1px solid #fff;box-shadow:var(--shadow);line-height:1.25;animation:bob 6s ease-in-out infinite;white-space:nowrap}
.hv-chip b{display:block;font-family:var(--f-en);font-weight:500;font-size:15px}
.hv-chip small{display:block;font-size:11px;color:var(--mut)}
.c-ai{left:0;top:12%}
.c-sales{right:-4%;top:36%;animation-delay:-2s}
.c-people{left:-2%;top:72%;animation-delay:-4s}
.c-flow{right:2%;bottom:4%;animation-delay:-3s}
.hv-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff}
.hv-ic svg{width:21px;height:21px}
.hv-bars{display:flex;align-items:flex-end;gap:3px;width:38px;height:38px;padding:5px;border-radius:12px;background:var(--tint)}
.hv-bars i{flex:1;border-radius:2px;background:var(--grad);transform-origin:bottom;animation:grow 2.4s ease-in-out infinite}
.hv-bars i:nth-child(1){height:30%}.hv-bars i:nth-child(2){height:45%;animation-delay:.15s}.hv-bars i:nth-child(3){height:55%;animation-delay:.3s}.hv-bars i:nth-child(4){height:75%;animation-delay:.45s}.hv-bars i:nth-child(5){height:100%;animation-delay:.6s}
@keyframes grow{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
.hv-faces{display:flex;padding-left:6px}
.hv-faces i{width:26px;height:26px;margin-left:-8px;border-radius:50%;border:2px solid #fff;background:radial-gradient(circle at 50% 38%,#fff 0 22%,transparent 23%),radial-gradient(ellipse 60% 40% at 50% 100%,#fff 0 70%,transparent 72%),var(--g1)}
.hv-faces i:nth-child(2){background:radial-gradient(circle at 50% 38%,#fff 0 22%,transparent 23%),radial-gradient(ellipse 60% 40% at 50% 100%,#fff 0 70%,transparent 72%),var(--g2)}
.hv-faces i:nth-child(3){background:radial-gradient(circle at 50% 38%,#fff 0 22%,transparent 23%),radial-gradient(ellipse 60% 40% at 50% 100%,#fff 0 70%,transparent 72%),var(--g3)}
.hv-spark{width:64px;height:30px;flex:none}
.hv-spark path{stroke:var(--g1);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110;animation:spark 3.2s ease-in-out infinite}
.hv-spark circle{fill:var(--g2)}
@keyframes spark{0%{stroke-dashoffset:110}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-110}}
@keyframes spin{to{rotate:1turn}}
@keyframes bob{50%{transform:translateY(-8px)}}
.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-family:var(--f-en);font-size:10px;letter-spacing:.3em;color:var(--mut)}
.scroll-cue span{width:1px;height:36px;background:linear-gradient(var(--g1),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:900px){
  .hero{min-height:0;padding-block:48px 64px}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{justify-self:center;max-width:min(380px,100%);margin-top:8px}
  .hv-chip{padding:7px 10px 7px 7px;gap:8px}
  .hv-chip b{font-size:13px}.hv-chip small{font-size:10px}
  .hv-ic,.hv-bars{width:30px;height:30px}
  .hv-faces i{width:22px;height:22px}
  .c-sales{right:0}.c-people{left:0}
  .scroll-cue{display:none}
}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.svc{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:14px;padding:32px 28px;overflow:hidden;min-width:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.svc.wide{grid-column:span 3}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--g2) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.svc:hover{transform:translateY(-8px);box-shadow:0 40px 70px -30px color-mix(in srgb,var(--g1) 55%,transparent)}
.svc:hover::before,.svc:hover::after{opacity:1}
.svc-top{display:flex;justify-content:space-between;align-items:center}
.icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--grad);color:#fff;box-shadow:0 12px 24px -10px var(--g1);transition:transform .45s}
.svc:hover .icon{transform:rotate(-8deg) scale(1.06)}
.icon svg{width:27px;height:27px}
.svc .no{font-family:var(--f-en);font-size:42px;font-weight:200;color:color-mix(in srgb,var(--fg) 18%,transparent);letter-spacing:-.04em}
.svc h3{font-size:20px;line-height:1.45;position:relative}
.svc p{font-size:14px;color:var(--mut);position:relative}
.ticks{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);position:relative}
.ticks li{position:relative;padding-left:18px;color:var(--fg2)}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--grad);transform:scale(.6)}
@media (max-width:1040px){.svc,.svc.wide{grid-column:span 3}}
@media (max-width:700px){.services{grid-template-columns:1fr}.svc,.svc.wide{grid-column:auto}}

/* ---------- philosophy ---------- */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mv-card{position:relative;padding:40px 38px;overflow:hidden}
.mv-card::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,74,28,.16),transparent 70%)}
.mv-card .label{font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--g1)}
.mv-card .label small{font-family:var(--f-jp);letter-spacing:.08em;color:var(--mut);margin-left:10px;font-weight:700}
.mv-card blockquote{margin:14px 0 16px;font-size:clamp(22px,2.4vw,30px);font-weight:900;line-height:1.5}
.mv-card p{color:var(--fg2);position:relative}
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.val{padding:28px 28px 26px;display:flex;flex-direction:column;gap:8px;transition:transform .4s}
.val:hover{transform:translateY(-6px)}
.val .vn{font-family:var(--f-en);font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--g1)}
.val b{font-size:20px;font-weight:700}
.val p{font-size:14px;color:var(--mut)}
@media (max-width:860px){.mv,.values{grid-template-columns:1fr}.mv-card{padding:30px 26px}}

/* ---------- cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.case{overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.case:hover{transform:translateY(-6px);box-shadow:0 36px 64px -32px color-mix(in srgb,var(--g1) 50%,transparent)}
.case-top{padding:26px 28px 22px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,#fff,var(--tint))}
.industry{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--fg);color:#fff;line-height:1.7}
.case h3{font-size:18.5px;line-height:1.5}
.case-body{padding:22px 28px 28px;display:flex;flex-direction:column;gap:18px;flex:1;border-top:1px solid var(--line)}
.case-body h4{font-size:12px;font-weight:700;color:var(--g1);letter-spacing:.08em;margin-bottom:4px}
.case-body p,.case-body li{font-size:13.5px;color:var(--fg2)}
.case-body ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.case-body ul li{position:relative;padding-left:16px}
.case-body ul li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--g2)}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.res{padding:12px 8px;border-radius:14px;background:var(--card2);text-align:center}
.res b{display:block;font-family:var(--f-en);font-size:24px;font-weight:300;letter-spacing:-.03em;line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.res span{display:block;font-size:11px;line-height:1.45;color:var(--mut)}
@media (max-width:1100px){.cases{grid-template-columns:1fr;max-width:720px}}

/* ---------- leader ---------- */
.leader{position:relative;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px;align-items:center;padding:44px;overflow:hidden}
.leader::before{content:"";position:absolute;left:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,74,28,.14),transparent 70%)}
.leader-photo{position:relative;margin:0}
.leader-photo .disc{position:absolute;left:6%;right:6%;top:8%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,var(--g3),var(--g1),var(--g2),#ffd59a,var(--g3));animation:spin 18s linear infinite}
.leader-photo img{position:relative;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.leader-body{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.leader-body .role{font-size:13px;font-weight:700;color:var(--g1);letter-spacing:.06em}
.leader-body h3{font-size:clamp(28px,3vw,38px);font-weight:900;line-height:1.3}
.leader-body h3 small{display:block;font-family:var(--f-en);font-weight:300;font-size:.42em;letter-spacing:.14em;color:var(--mut);margin-top:6px}
.leader-body p{color:var(--fg2)}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 6px}
.chips div{padding:14px 12px;border-radius:14px;background:var(--card2);display:flex;flex-direction:column;line-height:1.35}
.chips b{font-family:var(--f-en);font-weight:400;font-size:24px;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.chips b small{font-family:var(--f-jp);font-size:12px;font-weight:700}
.chips span{font-size:11.5px;color:var(--mut)}
@media (max-width:900px){.leader{grid-template-columns:1fr;padding:28px 22px;gap:20px}.leader-photo{max-width:280px;margin:0 auto}.chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- company ---------- */
.company{padding:12px 36px}
.company dl{margin:0;display:grid;grid-template-columns:160px minmax(0,1fr)}
.company dt,.company dd{padding:20px 0;border-bottom:1px solid var(--line);margin:0}
.company dt{font-size:13px;font-weight:700;color:var(--mut)}
.company dd{font-size:15px;min-width:0}
.company dl>:nth-last-child(-n+2){border-bottom:0}
.company dd a{color:var(--g1);font-weight:700;text-decoration:none}
.company dd a:hover{text-decoration:underline}
.biz{list-style:none;display:flex;flex-direction:column;gap:4px}
.biz li{position:relative;padding-left:18px}
.biz li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--grad);transform:scale(.6)}
@media (max-width:640px){.company{padding:8px 22px}.company dl{grid-template-columns:1fr}.company dt{padding:16px 0 0;border:0}.company dd{padding:4px 0 16px}}

/* ---------- hero layout v2: 文字を中央の主役に、図は背後のサブ ---------- */
.hero{padding-block:96px 120px}
.hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;position:relative}
.hero-copy{align-items:center;max-width:860px;position:relative;z-index:2}
.hero-copy .eyebrow{justify-content:center;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,#fff 70%,transparent);border:1px solid var(--line)}
.hero-catch{font-size:clamp(38px,6.4vw,92px)}
.hero-sub{margin-inline:auto;max-width:36em}
.ctas{justify-content:center}
.hero-visual{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(1180px,135vw);max-width:none;aspect-ratio:auto;height:100%;min-height:640px;justify-self:auto;z-index:0;pointer-events:none}
.hero-visual .hv-floor{left:5%;right:5%;bottom:-18%;height:55%;opacity:.7}
.hero-visual .hv-links{opacity:.55}
.hero-visual .hv-ring.r1{width:min(760px,90vw);opacity:.6}
.hero-visual .hv-ring.r2{width:min(560px,70vw);opacity:.8}
.hero-visual .hv-core{width:min(380px,60vw);opacity:.16}
.hero-visual .hv-disc{animation:none;box-shadow:none}
.hero-visual .hv-glass{display:none}
.hero-visual .c-ai{left:4%;top:16%}
.hero-visual .c-sales{right:4%;left:auto;top:20%}
.hero-visual .c-people{left:7%;top:auto;bottom:16%}
.hero-visual .c-flow{right:7%;bottom:12%}
@media (max-width:1100px){
  .hero-visual .c-ai{left:0;top:4%}.hero-visual .c-sales{right:0;top:7%}
  .hero-visual .c-people{left:0;bottom:2%}.hero-visual .c-flow{right:0;bottom:-1%}
}
@media (max-width:900px){
  .hero{padding-block:64px 96px}
  .hero-visual{width:100%;min-height:0;margin:0}
  .hero-visual .hv-chip{display:none}
  .hero-visual .hv-core{width:80vw;opacity:.12}
}
.hero-catch{font-size:clamp(28px,7.2vw,80px);line-height:1.3}
.hero-catch .line>span{white-space:nowrap}
.hero-visual .hv-chip{text-align:left}
@media (max-width:1100px) and (min-width:901px){.hero-visual{width:100%}.hero-visual .c-ai,.hero-visual .c-people{left:2%}.hero-visual .c-sales,.hero-visual .c-flow{right:2%}}
.hero-sub .ph{display:inline-block}
@media (max-width:600px){.hero-catch{font-size:clamp(30px,8.6vw,80px)}}
/* 見出しの「AI」と「人間力」を同じ強調色に */
.hero-catch .grad{background:linear-gradient(100deg,var(--g3),var(--g1));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-catch .en-b{font-family:var(--f-en);font-weight:600;letter-spacing:-.02em}
.hero-catch .x{font-family:var(--f-en);font-weight:200;margin:0 .12em;color:var(--fg2)}
.hero-catch .en-b{font-size:1.2em;line-height:1;vertical-align:-.04em}