:root{
  --lime:#b8ff62;
  --green:#39f5a5;
  --ink:#000307;
  --panel:#071019;
  --panel2:#102433;
  --blue:#246bff;
  --cyan:#21d9ff;
  --white:#efffff;
  --gray:#8ea8b2;
}
@property --edge-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
/* メニューから飛んだ時、見出しが固定ヘッダーの下に潜らないための余白 */
section[id]{scroll-margin-top:84px}
body{background:var(--ink);color:var(--white);font-family:'Noto Sans JP',sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ============ loader（線1本＋%のみ） ============ */
#loader{position:fixed;inset:0;background:var(--ink);z-index:900;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity .6s ease}
#loader.done{opacity:0;pointer-events:none}
#loadbar{width:min(420px,60vw);height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
#loadbar i{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--blue),var(--cyan))}
#loadpct{font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.3em;color:var(--gray)}

/* ============ AIノードカーソル（V7演出を青緑で復元） ============ */
#cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;z-index:800;pointer-events:none;opacity:0;transform:translate(-50%,-50%);background:radial-gradient(circle,#e7ffff 0%,var(--cyan) 34%,var(--green) 58%,transparent 73%);box-shadow:0 0 13px 2px rgba(33,217,255,.78),0 0 34px 6px rgba(57,245,165,.25);transition:width .18s,height .18s,opacity .2s,box-shadow .18s;will-change:left,top,width,height}
.cursor-ready #cursor{opacity:1}
#cursor.hov{width:25px;height:25px;box-shadow:0 0 18px 3px rgba(33,217,255,.82),0 0 46px 8px rgba(57,245,165,.28)}
#cursor.click{width:20px;height:20px;background:radial-gradient(circle,#f4ffff 0%,var(--green) 42%,var(--blue) 67%,transparent 75%)}
#trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:799;pointer-events:none;mix-blend-mode:screen}
@media (hover:hover) and (pointer:fine){.cursor-ready body,.cursor-ready a,.cursor-ready button,.cursor-ready #service .helix-stage,.cursor-ready .pzone{cursor:none}}
@media (hover:none),(pointer:coarse){#cursor,#trail{display:none}}

/* ============ V26神経粒子フィールド（TOPからフッターまで同じ粒子） ============ */
#gpCanvas{position:fixed;inset:0;display:block;width:100vw;height:100vh;height:100lvh;background:#000;z-index:1;pointer-events:none}
#gpFallback{position:fixed;inset:0;z-index:1;display:grid;place-items:center;opacity:0;pointer-events:none;background:#000;transition:opacity .3s}
#gpFallback.visible{opacity:1}
#gpFallback img{width:min(58vw,520px);filter:drop-shadow(0 0 20px rgba(33,217,255,.22))}
#fieldShade{position:fixed;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none;will-change:opacity}
section,footer{position:relative;z-index:2}

/* ============ header ============ */
header{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;justify-content:space-between;align-items:center;padding:20px 4vw;mix-blend-mode:normal;transition:background .4s}
header.scrolled{background:rgba(5,7,13,.93)}
header .logo img{height:30px;display:block}
nav{display:flex;gap:32px;font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.18em;font-weight:700}
nav a{position:relative;padding:4px 0}
nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .35s}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a.cta{border:1px solid var(--blue);padding:8px 18px;border-radius:99px;transition:background .3s,color .3s}
nav a.cta:hover{background:var(--blue)}
@media(max-width:820px){header>nav{display:none}}

/* ---- スマホのメニュー（820px以下。セクションが12個あるので目次が要る） ---- */
.mnav-btn{display:none;position:relative;width:42px;height:42px;border:1px solid rgba(92,231,225,.3);border-radius:50%;background:rgba(4,10,16,.6);cursor:pointer;padding:0}
.mnav-btn i{position:absolute;left:50%;width:16px;height:1.5px;background:var(--white);border-radius:2px;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s}
.mnav-btn i:nth-child(1){top:18px;transform:translateX(-50%)}
.mnav-btn i:nth-child(2){top:23px;transform:translateX(-50%)}
.mnav-btn[aria-expanded="true"]{border-color:var(--green)}
.mnav-btn[aria-expanded="true"] i:nth-child(1){transform:translateX(-50%) translateY(2.5px) rotate(45deg)}
.mnav-btn[aria-expanded="true"] i:nth-child(2){transform:translateX(-50%) translateY(-2.5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:590;display:flex;flex-direction:column;justify-content:center;
  padding:96px 7vw 40px;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 80% at 50% 0%,rgba(7,27,35,.995),rgba(2,5,10,.998) 60%);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
.mnav.on{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s linear 0s}
.mnav a{position:relative;display:flex;align-items:baseline;gap:14px;padding:17px 2px;
  border-top:1px solid rgba(92,231,225,.13);
  font-family:'Archivo',sans-serif;font-size:17px;font-weight:700;letter-spacing:.13em;color:var(--white);
  opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}
.mnav a:last-child{border-bottom:1px solid rgba(92,231,225,.13)}
.mnav.on a{opacity:1;transform:none}
.mnav a span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.22em;color:var(--cyan);flex:0 0 auto}
.mnav a em{margin-left:auto;font-style:normal;font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--gray)}
.mnav a.cta{margin-top:26px;border:1px solid var(--blue);border-radius:99px;justify-content:center;padding:16px 20px;color:var(--white)}
.mnav a.cta em{margin-left:12px}
@media(max-width:820px){.mnav-btn{display:block}}
@media(prefers-reduced-motion:reduce){.mnav,.mnav a,.mnav-btn i{transition:none}}

/* ============ HERO（V26 GP粒子形成 → 全体フィールド） ============ */
#hero{position:relative;height:190vh;z-index:3}
#hero .stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:transparent}
/* veilは1画面分しかないため、下端をぼかさないとheroが抜ける時に水平の境界線が出る（2026-08-28修正） */
#hero .veil{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 50% 50%,transparent 44%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.76) 100%),
  linear-gradient(180deg,rgba(0,14,22,.05),transparent 25%,transparent 72%,rgba(0,8,16,.22));z-index:2;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
#hero .hero-copy{position:absolute;left:clamp(24px,4vw,64px);bottom:max(34px,6vh);z-index:4;width:min(660px,76vw);pointer-events:none;
  opacity:0;translate:0 18px;transition:opacity 2.6s cubic-bezier(.25,.6,.25,1),translate 2.6s cubic-bezier(.25,.6,.25,1)}
#hero .hero-copy.ready{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){#hero .hero-copy{transition:none}}
#hero .kicker{margin:0 0 12px;color:var(--green);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;text-transform:uppercase}
#hero h1{font-family:'Bricolage Grotesque','Noto Sans JP',sans-serif;font-size:clamp(28px,4.2vw,64px);font-weight:330;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
#hero .hero-detail{max-width:52em;margin-top:18px;color:rgba(222,247,250,.58);font-size:clamp(10px,.9vw,13px);line-height:1.9;letter-spacing:.035em}
#hero .hero-fact{margin-top:14px;color:rgba(222,247,250,.4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(8.5px,.72vw,10.5px);letter-spacing:.16em}
/* 見出しは1文字ずつ、本文は1行ずつ、粒子と一緒に散らすので個別に動かす */
#hero h1 span,#hero .hero-line{display:inline-block;will-change:transform,opacity}
#closing.inview .cl span{will-change:transform}
#hero .hero-line{display:block}
#hero .readout{position:absolute;right:clamp(22px,4vw,60px);bottom:max(34px,6vh);z-index:4;color:rgba(190,235,242,.4);font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;pointer-events:none}
#hero .scroll-cue{position:absolute;right:clamp(22px,4vw,60px);top:50%;z-index:4;display:flex;align-items:center;gap:12px;color:rgba(190,235,242,.42);font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;writing-mode:vertical-rl;pointer-events:none}
#hero .scroll-cue::after{content:'';width:1px;height:64px;background:linear-gradient(var(--green),var(--cyan),transparent);animation:signalPulse 1.8s ease-in-out infinite}
@keyframes signalPulse{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:760px){
  #hero{height:175vh}
  #hero .hero-copy{width:min(88vw,520px)}
  #hero .hero-detail{margin-top:14px;font-size:10.6px;line-height:1.95;letter-spacing:.01em}
  #hero .hero-fact{margin-top:11px;font-size:7.8px;letter-spacing:.06em;line-height:1.7}
  #hero .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){#hero{height:100svh}#hero .scroll-cue,#hero .readout{display:none}}

/* marquee（流れる帯）は撤去済み（2026-08-28） */

/* ============ 共通セクション ============ */
section{position:relative}
.wrap{max-width:1160px;margin:0 auto;padding:0 5vw}
.sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:64px;flex-wrap:wrap}
.sec-head .en{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(48px,6.2vw,96px);font-weight:800;letter-spacing:-.015em;line-height:.95}
/* 見出しは全セクションで同じ位置・同じ大きさに揃える。
   .wrap は中央寄せ＋左右5vwのため内側が212pxから始まるので、
   広い画面では余白ぶん引き戻してSERVICEと同じ5vwの線に合わせる。 */
#values .sec-head,#about .sec-head,#greeting .sec-head,#voice .sec-head{
  margin-left:min(0px,calc((1160px - 100vw) / 2));
  margin-right:min(0px,calc((1160px - 100vw) / 2))}
.sec-head .jp{font-family:ui-monospace,monospace;font-size:12px;color:var(--cyan);letter-spacing:.3em}
.sec-head .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(57,245,165,.7),rgba(33,217,255,.38),transparent);transform:scaleX(0);transform-origin:left}
#values p,#about .grid p,#greeting .q p,#intro .statement p,.scard p,#recruit .step p,.vcard p,#voice .lead{text-wrap:pretty}
.tw-balance{text-wrap:balance!important}
.rev{overflow:hidden}
.rev i{display:block;font-style:normal;transform:translateY(115%)}

/* genesis（帯の下の中継ぎ）は撤去。キャプションはintro冒頭へ移設 */
#intro .signal-cap{font-family:ui-monospace,monospace;font-size:clamp(8.5px,.78vw,10px);letter-spacing:.26em;color:var(--gray);margin-bottom:44px;white-space:nowrap;overflow:hidden;text-overflow:clip}
#intro .signal-cap b{color:var(--cyan);font-weight:500}
@media(max-width:860px){#intro .signal-cap{white-space:normal;line-height:2;letter-spacing:.2em;margin-bottom:34px}}


/* ============ values（このサイトが伝える2つの考え方） ============ */
#values{padding:96px 0 118px}
#values .vitem{padding:74px 0 14px;text-align:center}
#values .vitem:last-child{padding-bottom:78px}
#values .vno{font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--cyan);margin-bottom:22px}
#values h3{font-size:clamp(23px,3vw,42px);font-weight:900;line-height:1.55}
#values .vbody{max-width:min(760px,100%);margin:38px auto 0}
#values p{font-size:clamp(13px,1.02vw,15.5px);line-height:2.3;color:var(--gray)}
#values p+p{margin-top:24px}
#values p b{font-weight:700}
@media(max-width:900px){#values{padding:70px 0 82px}#values .vitem{padding:46px 0 10px}#values .vitem:last-child{padding-bottom:48px}#values .vbody{margin-top:28px}
  /* 幅が足りない状態で改行を強制すると「長い行＋数文字」になるので、文中の改行は解除して流す */
  #values .vbody p br,#intro .statement p br{display:none}
  /* スマホは1段落が数行なので、最終行だけ短くなるより行の長さを揃えたほうが収まる */
  #values .vbody p,#intro .statement p,.vcard p,#voice .lead,#about .grid p,#greeting .q p{text-wrap:balance}}

/* ============ closing（締めの一行） ============ */
#closing{padding:150px 0 140px;text-align:center}
#closing .cl{font-size:clamp(26px,4.6vw,60px);font-weight:900;line-height:1.5}
#closing .cl span{display:inline-block;transition:color .28s ease,text-shadow .28s ease}
#closing .clsub{margin-top:26px;color:var(--gray);font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.32em}
@media(max-width:860px){#closing{padding:104px 0 96px}}

/* ============ network（同じ神経粒子の全国フィールド） ============ */
#network{height:60vh;position:relative}
#network .ncap{position:sticky;top:80vh;text-align:center;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.34em;color:var(--gray)}
#network .ncap b{color:var(--lime);font-weight:500}

/* ============ intro ============ */
#intro{padding:70px 0 80px;text-align:center}
#intro h2{font-size:clamp(18px,2.6vw,34px);font-weight:700;line-height:2;margin-bottom:42px}
#intro p{font-size:clamp(14px,1.25vw,17px);line-height:2.4;color:var(--gray)}
#intro p+p{margin-top:2.4em}
#intro p b{color:var(--white);font-weight:700}
/* .wrap の左右5vwが内側を削り、見出しが2行に割れていた。余白ぶんを足して本文幅760pxを確保する */
#intro .statement{max-width:calc(760px + 10vw)}

/* ============ about ============ */
#about{padding:130px 0;overflow:hidden}
#about .bgword{position:absolute;right:-2vw;top:24px;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(80px,13vw,190px);color:rgba(33,217,255,.055);letter-spacing:.02em;pointer-events:none;white-space:nowrap}
#about .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(46px,6vw,96px);align-items:center}
#about .stagezone{position:relative;min-width:0;perspective:1000px}
#about .about-image{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:#02090d;clip-path:polygon(0 0,100% 0,100% 84%,88% 100%,0 100%);box-shadow:0 42px 110px rgba(0,0,0,.62)}
#about .about-image::before{content:'';position:absolute;inset:0;z-index:2;border:1px solid rgba(110,242,231,.18);clip-path:inherit;pointer-events:none}
#about .about-image::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(0,0,0,.1),transparent 42%,rgba(33,217,255,.045)),linear-gradient(180deg,transparent 66%,rgba(0,4,8,.44));pointer-events:none}
#about .about-image img{width:104%;height:104%;margin:-2%;display:block;object-fit:cover;filter:saturate(1.02) contrast(1.04) brightness(1.03);transform:scale(1.025);will-change:transform}
#about .about-image figcaption{position:absolute;left:22px;bottom:18px;z-index:3;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.28em;color:rgba(227,249,255,.68);white-space:nowrap}
#about .stage-index{position:absolute;right:-13px;top:-25px;z-index:4;font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.28em;color:var(--green);writing-mode:vertical-rl}
#about .en-lead{font-family:'Archivo',sans-serif;color:var(--cyan);letter-spacing:.2em;font-size:13px;margin-bottom:22px;font-weight:700}
#about h3{font-size:clamp(20px,2.1vw,28px);line-height:1.9;font-weight:700;margin-bottom:26px}
#about p{color:var(--gray);line-height:2.25;font-size:15px}
#about .nums{display:flex;gap:48px;margin-top:44px}
#about .nums .n{font-family:'Archivo',sans-serif;min-width:0}
#about .nums .v{display:flex;align-items:baseline;white-space:nowrap;font-size:clamp(30px,3vw,44px);font-weight:900;color:var(--green);text-shadow:0 0 18px rgba(57,245,165,.16)}
#about .nums .v span,#about .nums .v em{display:inline-block;white-space:nowrap;flex:0 0 auto}
#about .nums .v span{font-variant-numeric:tabular-nums;text-align:center}
#about .nums .v em{font-style:normal;color:var(--cyan);font-size:.55em;margin-left:2px;text-shadow:0 0 14px rgba(33,217,255,.12)}
#about .nums .v em b{font-weight:inherit;color:var(--green);text-shadow:0 0 14px rgba(57,245,165,.14)}
#about .nums .l{font-size:11px;color:var(--gray);letter-spacing:.16em;margin-top:6px}
@media(max-width:860px){#about .grid{grid-template-columns:1fr}#about .stagezone{margin-top:16px}#about .about-image{aspect-ratio:1.18/1}
  #about .nums{gap:24px}#about .nums .l{font-size:10px;letter-spacing:.04em;white-space:nowrap}
  #about .grid p{font-size:13.8px;line-height:2.15}}

/* ============ voice ============ */
#voice{padding:130px 0}
#voice .vgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
#voice .lead{color:var(--gray);line-height:2.3;font-size:15px;margin-bottom:44px}
#voice .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pzone{position:relative;min-height:460px;isolation:isolate;overflow:hidden;cursor:crosshair}
.pzone::before{content:'';position:absolute;inset:8%;z-index:0;background:radial-gradient(circle,rgba(33,217,255,.07),rgba(57,245,165,.025) 38%,transparent 70%);filter:blur(22px);pointer-events:none}
.pzone canvas.local-three{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important;display:block;filter:drop-shadow(0 0 16px rgba(33,217,255,.16))}
.pzone canvas.local-three-particle-people{filter:drop-shadow(0 0 12px rgba(33,217,255,.16)) drop-shadow(0 0 24px rgba(57,245,165,.08))}
@media(hover:none),(pointer:coarse){
  .pzone canvas.local-three,.pzone canvas.local-three-particle-people{filter:none}
  .pzone::before{filter:none;opacity:.55}
}
.pzone .object-label{position:absolute;left:14px;top:14px;z-index:2;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.24em;color:rgba(57,245,165,.62);writing-mode:vertical-rl;pointer-events:none}
.pzone .ptag{position:absolute;left:50%;bottom:0;z-index:2;transform:translateX(-50%);font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.3em;color:var(--gray);white-space:nowrap;pointer-events:none}
.pzone.three-fallback::after{content:'';position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;border:1px solid rgba(33,217,255,.2);border-radius:50%;translate:-50% -50%;box-shadow:0 0 40px rgba(57,245,165,.08)}
@media(max-width:900px){#voice .vgrid{grid-template-columns:1fr}#voice .cards{grid-template-columns:1fr}#voice .lead{font-size:13.8px;margin-bottom:34px}.pzone{min-height:340px}.pzone .object-label{left:8px}}
.vcard{background:linear-gradient(135deg,rgba(6,17,22,.93),rgba(3,9,18,.9));border:1px solid rgba(118,228,230,.11);border-radius:2px;padding:30px 26px;position:relative;transform-style:preserve-3d;transition:border-color .3s,background .3s;will-change:transform}
.vcard:hover{border-color:rgba(57,245,165,.46);background:linear-gradient(135deg,rgba(8,28,28,.78),rgba(3,12,24,.54))}
.vcard .tag{display:inline-block;font-size:10px;letter-spacing:.2em;color:var(--green);border-bottom:1px solid rgba(57,245,165,.5);padding:4px 0;margin-bottom:18px;font-family:'Archivo',sans-serif}
.vcard h4{font-size:17px;font-weight:700;margin-bottom:4px}
.vcard .meta{font-size:12px;color:var(--gray);margin-bottom:16px;line-height:1.8}
.vcard p{font-size:13.5px;line-height:2.05;color:#c2ccd8}
.vcard .qmark{position:absolute;right:20px;top:14px;font-family:'Archivo',sans-serif;font-size:44px;font-weight:900;color:rgba(33,217,255,.12)}

/* ============ service / scroll-driven double helix ============ */
#service{position:relative;padding:0;isolation:isolate;background:transparent}
#service .service-pin{position:relative;height:100vh;height:100lvh;overflow:hidden}
#service .service-frame{position:relative;width:100%;max-width:1680px;height:100%;margin:0 auto;overflow:hidden}
#service .service-copy{position:absolute;z-index:2400;top:clamp(96px,10vh,116px);left:clamp(24px,5vw,82px);right:clamp(24px,5vw,82px);pointer-events:none}
#service .sec-head{margin:0;align-items:flex-end}

#service .service-note{display:flex;align-items:center;gap:12px;margin-top:17px;color:rgba(206,238,243,.48);font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.25em}
#service .service-note::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--green),var(--cyan))}
#service .service-lead{margin-top:20px;max-width:46em;font-size:clamp(12px,.98vw,15px);line-height:2.05;color:var(--gray)}
#service .service-lead b{color:var(--white);font-weight:700}
@media(max-width:900px){#service .service-lead{display:none}}
.scard .sitems{margin-top:7px;font-size:clamp(9px,.7vw,10.5px);line-height:1.5;color:#7f95a3;letter-spacing:.01em}
.scard .snote{margin-top:6px;padding-top:6px;border-top:1px solid rgba(92,231,225,.14);font-size:clamp(8.5px,.64vw,10px);line-height:1.42;color:#6d8290}
.scard .no.base{font-size:15px;letter-spacing:.16em;bottom:18px;color:rgba(255,255,255,.1)}
#service .helix-stage{position:absolute;inset:0;z-index:2;perspective:clamp(900px,105vw,1600px);perspective-origin:50% 61%;transform-style:preserve-3d;cursor:grab;touch-action:pan-y;user-select:none}
#service .helix-stage.is-dragging{cursor:grabbing}
#service .helix-axis{display:none}
#service .helix-axis::before,#service .helix-axis::after{content:'';position:absolute;left:50%;width:clamp(220px,34vw,520px);aspect-ratio:1;border:1px solid rgba(33,217,255,.1);border-radius:50%;transform:translate(-50%,-50%) rotateX(72deg)}
#service .helix-axis::before{top:29%}
#service .helix-axis::after{top:72%;border-color:rgba(57,245,165,.09)}
#service .cards{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.scard{--mx:50%;--my:50%;position:absolute;left:50%;top:55%;display:flex;flex-direction:column;width:clamp(270px,24vw,390px);height:clamp(340px,46svh,450px);padding:0;overflow:visible;transform-style:preserve-3d;background:linear-gradient(145deg,rgba(6,20,28,.97),rgba(1,7,14,.96));border:1px solid rgba(92,231,225,.13);border-radius:18px;box-shadow:0 26px 58px rgba(0,0,0,.55),inset 0 0 22px rgba(33,217,255,.06);transition:border-color .28s,box-shadow .28s}
.scard::before{content:'';position:absolute;inset:0;z-index:5;background:radial-gradient(440px 280px at var(--mx) var(--my),rgba(57,245,165,.22),rgba(33,217,255,.1) 30%,transparent 67%);opacity:0;transition:opacity .24s;pointer-events:none}
/* .scard::after の霧（blur+mix-blend-mode+常時アニメ）は描画が重いため撤去 2026-08-28 */
.scard.is-hot,.scard:focus-visible{animation:none;border-color:rgba(105,255,231,.32);box-shadow:0 30px 66px rgba(0,0,0,.58),0 0 26px rgba(33,217,255,.16);outline:none}
@media(hover:none),(pointer:coarse){
  /* カーソルが無い端末では追従グローは出番が無い。影も1枚に減らして合成を軽くする */
  .scard::before{display:none}
  .scard{box-shadow:0 14px 28px rgba(0,0,0,.5)}
  .scard.is-hot,.scard:focus-visible{box-shadow:0 14px 28px rgba(0,0,0,.5),0 0 18px rgba(33,217,255,.16)}
  .scard.is-hot .svisual img{filter:none}
}
.scard.is-hot::before,.scard:focus-visible::before{opacity:.5}
.scard .svisual{position:relative;z-index:1;flex:0 0 30%;margin:0;overflow:hidden;background:#02080d;border-radius:17px 17px 0 0}
.scard .svisual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(1,6,11,.58)),linear-gradient(115deg,rgba(2,7,12,.08),transparent 48%,rgba(33,217,255,.07));pointer-events:none}
.scard .svisual img{width:104%;height:104%;margin:-2%;display:block;object-fit:cover;transform:scale(1.025);transition:filter .7s}
.scard.is-hot .svisual img{filter:saturate(1.18) contrast(1.08) brightness(1.18)}
.scard .sbody{position:relative;z-index:2;flex:1;min-height:0;overflow:hidden;padding:clamp(13px,1.2vw,18px) clamp(18px,1.8vw,26px) 12px;background:linear-gradient(145deg,rgba(7,19,26,.76),rgba(2,9,16,.88));border-radius:0 0 17px 17px}
.scard .cat{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.24em;color:var(--cyan);margin-bottom:5px;font-weight:700}
.scard h4{max-width:92%;font-size:clamp(16px,1.32vw,19.5px);font-weight:900;line-height:1.28;margin-bottom:7px}
.scard .who{font-size:10px;color:var(--gray);letter-spacing:.12em;margin-bottom:12px}
.scard p{font-size:clamp(11px,.84vw,12.5px);line-height:1.52;color:#b9c3cf}
.scard .no{position:absolute;right:20px;bottom:11px;font-family:'Archivo',sans-serif;font-weight:900;font-size:36px;color:rgba(255,255,255,.055)}
.scard .no{display:none}   /* 薄い連番は非表示（要素は残し、戻せるようにする） */
.scard svg{position:absolute;right:24px;top:24px;width:31px;height:31px;stroke:var(--blue);fill:none;stroke-width:1.4;opacity:.85}
#service .service-gesture{position:absolute;z-index:2400;right:clamp(22px,4vw,62px);bottom:clamp(24px,4vh,48px);display:flex;align-items:center;gap:14px;color:rgba(194,229,235,.48);font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;pointer-events:none}
#service .service-gesture i{position:relative;width:42px;height:42px;border:1px solid rgba(75,229,222,.22);border-radius:50%}
#service.inview .scard{will-change:transform,opacity}
#service .service-gesture i::before{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--cyan);animation:orbitCue 2.1s ease-in-out infinite}
@keyframes orbitCue{0%{transform:translate(-18px,-50%)}50%{transform:translate(14px,-50%)}100%{transform:translate(-18px,-50%)}}
@media(max-width:760px){
  #service .service-copy{top:104px;left:20px;right:20px}
  #service .sec-head{gap:12px}.service-copy .sec-head .jp{display:none}
  #service .service-note{font-size:7px;letter-spacing:.18em}
  #service .helix-axis{top:55%;height:56vh}
  .scard{top:62%;width:min(78vw,350px);height:clamp(400px,64svh,520px);border-radius:15px}
  .scard .svisual{flex-basis:31%}.scard .sbody{padding:20px 22px 25px}
  .scard h4{font-size:16px}.scard p{font-size:11px;line-height:1.72}
  #service .service-gesture{right:20px;bottom:20px}.service-gesture span{display:none}
}
@media(prefers-reduced-motion:reduce){
  #service{padding:110px 0}.service-pin{height:auto!important;overflow:visible!important}.service-frame{height:auto!important;overflow:visible!important}
  #service .service-copy{position:relative;top:auto;left:auto;right:auto;padding:0 5vw;margin-bottom:44px}
  #service .helix-stage{position:relative;inset:auto;perspective:none;cursor:auto;padding:0 5vw}
  #service .helix-axis,#service .service-gesture{display:none}#service .cards{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;pointer-events:auto}
  .scard{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:520px;opacity:1!important;transform:none!important;pointer-events:auto!important}.scard::after{animation:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){#service .cards{grid-template-columns:1fr}}

/* ── スマホの事業カード ───────────────────────────────────────────
   螺旋はカード高520pxに対し縦間隔112pxしかなく、必ず重なって読めなかった。
   スマホでは横スクロールのスナップ式にして、1枚ずつ中央で止まるようにする。
   ブラウザ標準のスナップなのでJSが毎フレーム動かず、その分軽い。 */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  #service{padding:104px 0 96px}
  #service .service-pin{height:auto!important;overflow:visible!important}
  #service .service-frame{height:auto!important;overflow:visible!important}
  #service .service-copy{position:relative;top:auto!important;left:auto;right:auto;padding:0 20px;margin-bottom:30px}
  #service .helix-stage{position:relative;inset:auto;perspective:none;cursor:auto;padding:0;touch-action:auto}
  #service .helix-axis,#service .service-gesture,#service .service-note{display:none}

  #service .cards{
    position:relative;inset:auto;transform-style:flat;pointer-events:auto;
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-padding:0 9vw;
    padding:6px 9vw 18px;              /* 左右の余白＝1枚目と最後が中央で止まるため */
    scrollbar-width:none;
  }
  #service .cards::-webkit-scrollbar{display:none}

  #service .scard{
    position:relative;left:auto;top:auto;
    flex:0 0 82vw;width:82vw;height:auto;min-height:474px;
    scroll-snap-align:center;scroll-snap-stop:always;   /* 1枚ずつ確実に止める */
    transform:none!important;opacity:1!important;pointer-events:auto!important;
    z-index:auto!important;transform-style:flat;will-change:auto;
  }

  /* 何枚目を見ているかの目印 */
  #service .sdots{display:flex;justify-content:center;gap:7px;margin-top:16px;padding:0 20px}
  #service .sdots b{width:6px;height:6px;border-radius:50%;background:rgba(150,205,215,.26);transition:background .25s,width .25s;display:block}
  #service .sdots b.on{width:20px;border-radius:3px;background:var(--cyan)}
}

/* ============ greeting ============ */
#greeting{padding:140px 0}
/* ============ company（会社概要・スクロールで1項目ずつ流れる3D） ============ */
/* 罠1: 外側はrelativeのみ・pinは高さ100svhの .copin */
#company{position:relative}
#company .copin{height:100lvh;overflow:hidden;position:relative;display:flex;flex-direction:column}
#company .sec-head{position:absolute;left:5vw;top:clamp(96px,11svh,120px);right:5vw;z-index:6;margin-bottom:0}

#company .cogrid{flex:1;display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(20px,3vw,52px);align-items:center;
  width:100%;max-width:1160px;margin:0 auto;padding:19svh 5vw 12svh}

/* 左：3Dの構造体（大きく見せる） */
#company .costage{position:relative;height:100%;min-height:clamp(340px,60svh,620px);isolation:isolate}
#company .costage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
#company .conode{position:absolute;z-index:3;white-space:nowrap;display:flex;align-items:center;gap:10px;
  padding:9px 17px 9px 13px;border-radius:99px;border:1px solid rgba(92,231,225,.2);background:rgba(0,4,9,.72);
  color:rgba(185,195,207,.75);font-size:clamp(11px,.92vw,13.5px);font-weight:700;letter-spacing:.06em;
  pointer-events:none;transition:color .45s,border-color .45s,background .45s,box-shadow .45s,opacity .45s}
#company .conode i{width:7px;height:7px;border-radius:50%;background:rgba(33,217,255,.45);flex:0 0 auto;transition:background .45s,box-shadow .45s}
#company .conode.on{color:var(--white);border-color:var(--green);background:rgba(2,14,12,.88);box-shadow:0 0 30px rgba(57,245,165,.26)}
#company .conode.on i{background:var(--green);box-shadow:0 0 12px rgba(57,245,165,1)}

/* 右：スクロールで入れ替わる中身 */
#company .copanel{position:relative;border-left:1px solid rgba(255,255,255,.09);padding-left:clamp(20px,2.6vw,40px)}
#company .copanel .cokey{display:none}
#company .copanel .cotitle{margin-top:12px;font-size:clamp(12px,1vw,14px);font-weight:700;letter-spacing:.16em;color:var(--green)}
#company .copanel .coval{margin-top:14px;font-size:clamp(17px,1.9vw,27px);font-weight:900;line-height:1.7}
#company .copanel .coval .covlist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 26px;margin-top:2px;font-size:.66em;line-height:1.75}
#company .copanel .coval .covlist li{position:relative;padding-left:15px;white-space:nowrap}
#company .copanel .coval .covlist li::before{content:'';position:absolute;left:0;top:.95em;width:7px;height:1.5px;background:var(--cyan)}
@media(max-width:900px){#company .copanel .coval .covlist{grid-template-columns:1fr;gap:5px}}
#company .copanel .cosub{margin-top:16px;color:#a9b6c2;font-size:clamp(11.5px,.92vw,13px);line-height:2}
#company .colist{margin-top:18px;display:grid;gap:0}
#company .colist .coitem{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
#company .colist .coitem b{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.14em;color:var(--white)}
#company .colist .coitem span{font-size:10.5px;line-height:1.75;color:#a9b6c2}

/* 下部の進捗バーは撤去済み（2026-08-28） */
@media(max-width:900px){
  #company .sec-head,#recruit .sec-head{top:104px}
  /* 見出し（top:104px）の下から始め、上に寄せる。中央寄せだと3Dの構造体が見出しへ食い込む */
  #company .cogrid{grid-template-columns:1fr;gap:10px;padding:200px 5vw 5svh;align-content:start}
  #company .costage{min-height:0;height:min(36svh,300px)}
  /* 狭い画面では項目名を円周に並べると、点灯が下がったり上がったりして順番が読めない。
     ラベルは出さず、下のパネルで「何番目の・何の項目か」を示す。 */
  #company .conode{display:none}
  #company .copanel .cokey{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;letter-spacing:.26em;color:var(--cyan);margin-bottom:2px}
  #company .copanel{border-left:0;border-top:1px solid rgba(255,255,255,.09);padding-left:0;padding-top:18px}
  #company .copanel .coval{font-size:clamp(17px,5vw,22px)}
  /* 狭い画面は住所が画面を超えるので都市名のチップに切り替える（住所はフッターに全文あり） */
  #company .colist{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
  #company .colist .coitem{display:inline-flex;padding:6px 12px;border:1px solid rgba(92,231,225,.28);border-radius:99px;background:rgba(0,4,9,.5)}
  #company .colist .coitem span{display:none}
  #company .colist .coitem b{font-size:10px;letter-spacing:.12em}
  #company .conode{font-size:10px;padding:7px 12px 7px 9px}
}
/* ===== RECRUIT: 横に進むキャリア年表（罠1対策で外側はrelativeのみ・pinは .trackPin） ===== */
#recruit{position:relative}
#recruit .trackPin{height:100lvh;overflow:hidden;position:relative}
#recruit .sec-head{position:absolute;left:5vw;top:clamp(96px,11svh,120px);right:5vw;z-index:6;margin-bottom:0}

#recruit .lane{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;z-index:2}
/* will-change は常時つけるとGPUがレイヤーを抱えたままになる。表示中だけに限定する */
#recruit.inview .lane{will-change:transform}
/* 全ステップ共通の固定高さ＝基準線を1本に揃える（中央揃えだと文章量で上端がズレる） */
#recruit .step{position:relative;flex:0 0 auto;
  width:clamp(300px,32vw,440px);
  height:clamp(430px,64svh,580px);
  margin-right:clamp(40px,6vw,96px);
  padding-top:52px;margin-top:9svh}
#recruit .step:first-child{margin-left:5vw}
#recruit .step > *{position:relative;z-index:2}
#recruit .step .ph{position:absolute;left:0;right:0;top:52px;height:clamp(210px,30svh,290px);z-index:0;overflow:hidden;border-radius:3px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 58%,transparent 100%)}
#recruit .step .ph img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:contrast(1.04) brightness(1.28) saturate(.95)}
#recruit .step .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,3,7,.24),rgba(0,3,7,.02) 46%,rgba(0,3,7,.56))}
#recruit .step .no{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(76px,9vw,132px);line-height:.9;color:rgba(255,255,255,.14);letter-spacing:-.02em;text-shadow:0 6px 30px rgba(0,3,7,.75)}
#recruit .step .cat{margin-top:-16px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.28em;color:var(--green)}
#recruit .step h4{margin-top:20px;font-size:clamp(19px,1.7vw,25px);font-weight:900;line-height:1.7;text-shadow:0 2px 18px rgba(0,3,7,.9)}
#recruit .step p{margin-top:18px;font-size:clamp(12.5px,1vw,14px);line-height:2.1;color:#c2ccd6;text-shadow:0 1px 14px rgba(0,3,7,.95)}
#recruit .step .meta{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
#recruit .step .meta span{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.18em;color:var(--gray);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:6px 13px;background:rgba(0,3,7,.5)}
#recruit .step::before{content:'';position:absolute;left:0;right:calc(-1 * clamp(40px,6vw,96px));top:0;height:1px;background:linear-gradient(90deg,rgba(33,217,255,.42),rgba(33,217,255,.1));z-index:3}
#recruit .step::after{content:'';position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px rgba(33,217,255,.85);z-index:3}
#recruit .step.final{width:clamp(320px,36vw,520px);margin-right:5vw}
#recruit .step.final::before{right:0}
#recruit .step.final .kicker{font-family:ui-monospace,monospace;font-size:10px;line-height:1.5;letter-spacing:.3em;color:var(--green);margin-top:-16px}
#recruit .step.final h3{margin-top:20px;font-size:clamp(22px,2.4vw,34px);font-weight:900;line-height:1.75;text-shadow:0 2px 18px rgba(0,3,7,.9)}
#recruit .step.final .lead{margin-top:20px;color:#c2ccd6;font-size:clamp(12.5px,1vw,14px);line-height:2.1;text-shadow:0 1px 14px rgba(0,3,7,.95)}
#recruit .recruit-link{margin-top:32px;display:inline-flex;align-items:center;gap:14px;padding:17px 36px;border:1px solid var(--blue);border-radius:99px;font-weight:700;letter-spacing:.14em;background:rgba(0,3,7,.5);transition:background .3s}
#recruit .recruit-link span{font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.27em;color:var(--cyan)}
#recruit .recruit-link:hover{background:var(--blue)}
/* 採用の進捗バーは撤去済み（2026-08-28） */
@media(max-width:760px){
  /* 中央揃えだとカードが見出しRECRUITへ食い込み、上下に黒帯が出る。
     見出しの下（186px）から始め、pin（100lvh）の下端まで使う */
  #recruit .lane{align-items:flex-start}
  #recruit .step{width:78vw;height:calc(100lvh - 202px);min-height:400px;margin-right:34px;margin-top:186px}
  #recruit .step.final{width:82vw}
  #recruit .step .ph{height:clamp(160px,24svh,220px)}
}
#greeting .ggrid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center}
#greeting .quotes{display:flex;flex-direction:column;gap:52px}
@media(max-width:900px){#greeting .ggrid{grid-template-columns:1fr}}
#greeting .q .h{font-size:14px;color:var(--cyan);letter-spacing:.2em;margin-bottom:18px;font-family:'Archivo',sans-serif;font-weight:700}
#greeting .q p{font-size:clamp(13.5px,1.18vw,16px);line-height:2.3;color:#d5dde6}
#greeting .sign{text-align:right;margin-top:10px;font-size:15px;letter-spacing:.14em}
#greeting .sign b{font-size:19px;margin-left:14px}

/* ============ footer ============ */
/* ============ contact（お問い合わせ・1枚のカード＋種別プルダウン） ============ */
#contact{padding:clamp(110px,13vw,170px) 0 clamp(120px,14vw,180px);position:relative}
#contact .sec-head{margin-left:min(0px,calc((1160px - 100vw) / 2));margin-right:min(0px,calc((1160px - 100vw) / 2))}
#contact .clead{max-width:58em;color:#c2ccd6;font-size:clamp(13px,1.05vw,15px);line-height:2.15;margin-bottom:clamp(40px,4.4vw,58px)}

/* 1枚のカード */
#contact .ccard{--mx:50%;--my:0%;position:relative;border-radius:20px;
  padding:clamp(30px,3.4vw,52px) clamp(26px,3.2vw,54px) clamp(30px,3.4vw,48px);
  background:linear-gradient(155deg,rgba(5,18,25,.92),rgba(1,7,14,.88));border:1px solid rgba(92,231,225,.16);
  box-shadow:0 30px 76px rgba(0,0,0,.54),inset 0 0 26px rgba(33,217,255,.05)}
#contact .ccard::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;transition:opacity .35s;border-radius:20px;overflow:hidden;
  background:radial-gradient(520px 320px at var(--mx) var(--my),rgba(57,245,165,.14),rgba(33,217,255,.07) 34%,transparent 68%)}
#contact .ccard:hover::before{opacity:1}
#contact .ccard > *{position:relative;z-index:1}
#contact .cgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:start}
#contact .cq{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.28em;color:var(--green)}
#contact .cask{margin-top:14px;font-size:clamp(17px,1.7vw,24px);font-weight:900;line-height:1.75}
#contact .cwhy{margin-top:16px;color:#a9b6c2;font-size:clamp(11.5px,.92vw,13px);line-height:2}

/* 種別プルダウン */
#contact .csel{position:relative;z-index:5}
#contact .csel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(0,3,7,.72);
  color:rgba(239,255,255,.55);font-family:'Noto Sans JP',sans-serif;font-size:clamp(13px,1.05vw,15px);font-weight:700;
  letter-spacing:.02em;text-align:left;cursor:pointer;transition:border-color .3s,color .3s,box-shadow .3s}
#contact .csel-btn:hover,#contact .csel.open .csel-btn{border-color:rgba(33,217,255,.7);box-shadow:0 0 24px rgba(33,217,255,.14)}
#contact .csel-btn.picked{color:var(--white)}
#contact .csel-btn .arw{flex:0 0 auto;width:10px;height:10px;border-right:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#contact .csel.open .csel-btn .arw{transform:rotate(-135deg) translate(-3px,-3px)}
#contact .csel-list{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;list-style:none;overflow:hidden;
  border:1px solid rgba(33,217,255,.3);border-radius:12px;background:rgba(1,8,14,.985);
  box-shadow:0 26px 60px rgba(0,0,0,.62);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s,transform .38s cubic-bezier(.16,1,.3,1),visibility .3s}
#contact .csel.open .csel-list{opacity:1;visibility:visible;transform:translateY(0)}
#contact .csel-list li{position:relative;padding:16px 22px 16px 44px;font-size:clamp(12.5px,1vw,14px);color:#c2ccd6;cursor:pointer;
  transition:background .25s,color .25s}
#contact .csel-list li+li{border-top:1px solid rgba(255,255,255,.06)}
#contact .csel-list li::before{content:'';position:absolute;left:22px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--cyan);opacity:0;transform:scale(.4);transition:opacity .28s,transform .28s}
#contact .csel-list li:hover,#contact .csel-list li.hl{background:rgba(33,217,255,.12);color:var(--white)}
#contact .csel-list li:hover::before,#contact .csel-list li.hl::before{opacity:1;transform:scale(1)}
#contact .csel-list li[aria-selected="true"]::before{opacity:1;transform:scale(1);background:var(--green);box-shadow:0 0 10px rgba(57,245,165,.9)}

/* 選択後に立ち上がる案内とボタン */
#contact .cres{margin-top:26px;min-height:52px}
#contact .cres p{color:#a9b6c2;font-size:clamp(11.5px,.92vw,13px);line-height:2}
#contact .cgo{margin-top:26px;display:inline-flex;align-items:center;gap:14px;padding:17px 34px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,3,7,.5);color:rgba(239,255,255,.32);
  font-size:clamp(13px,1.1vw,15px);font-weight:900;letter-spacing:.04em;pointer-events:none;
  transition:color .45s,border-color .45s,background .45s,box-shadow .45s}
#contact .cgo i{font-style:normal;transition:transform .4s}
#contact .cgo.on{color:var(--white);border-color:var(--cyan);background:rgba(33,217,255,.1);box-shadow:0 0 30px rgba(33,217,255,.18);pointer-events:auto}
#contact .cgo.on:hover{background:rgba(33,217,255,.2)}
#contact .cgo.on:hover i{transform:translate(5px,-5px)}
/* 入力欄（プルダウンと同じ質感で揃える） */
#contact .cfield{margin-top:16px}
#contact .cfield label{display:block;font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.22em;color:var(--cyan);margin-bottom:9px}
#contact .cfield label em{font-style:normal;color:var(--green);margin-left:6px}
#contact .cin,#contact .cta-area{width:100%;padding:15px 18px;border:1px solid rgba(255,255,255,.2);border-radius:12px;
  background:rgba(0,3,7,.72);color:var(--white);font-family:'Noto Sans JP',sans-serif;font-size:clamp(12.5px,1vw,14px);
  transition:border-color .3s,box-shadow .3s}
#contact .cta-area{min-height:132px;line-height:1.9;resize:vertical}
#contact .cin::placeholder,#contact .cta-area::placeholder{color:rgba(142,168,178,.5)}
#contact .cin:focus,#contact .cta-area:focus{outline:none;border-color:rgba(33,217,255,.75);box-shadow:0 0 24px rgba(33,217,255,.14)}
#contact .cin.bad,#contact .cta-area.bad{border-color:rgba(255,120,120,.6)}
#contact .ccount{margin-top:8px;text-align:right;font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;color:rgba(142,168,178,.7)}
#contact .cerr{margin-top:12px;font-size:11.5px;color:#ff9a9a;min-height:1.2em}
#contact .cfield label em.opt{color:var(--gray);border-color:rgba(142,168,178,.4)}
#contact .cnote{margin-top:clamp(24px,2.6vw,34px);font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;color:rgba(142,168,178,.6)}
@media(max-width:900px){#contact .cgrid{grid-template-columns:1fr;gap:30px}}

/* 小さな装飾ラベルは一括で非表示（要素は残してあるので戻せる） */
#hero .kicker,#hero .readout,#hero .scroll-cue,
#intro .signal-cap,
#service .service-note,#service .service-gesture,
.pzone .object-label,.pzone .ptag,
#recruit .step .meta,
#network .ncap,
#about .about-image figcaption,#about .stage-index,
#contact .cq{display:none!important}
footer{background:rgba(2,4,10,.93);border-top:1px solid rgba(255,255,255,.07);padding:80px 0 40px}
footer .top{display:grid;grid-template-columns:1.2fr 2fr;gap:60px;margin-bottom:60px}
footer .co img{height:34px;margin-bottom:22px}
footer .co p{font-size:13px;color:var(--gray);line-height:2.1}
footer .offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
footer .of .n{font-size:13px;font-weight:700;color:var(--white);margin-bottom:8px;letter-spacing:.1em}
footer .of p{font-size:11.5px;color:var(--gray);line-height:1.9}
footer .bottom{display:flex;flex-wrap:wrap;row-gap:14px;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.06);padding-top:28px;font-size:11px;color:var(--gray);letter-spacing:.14em}
footer .bottom nav{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:10px}
@media(max-width:860px){footer .top{grid-template-columns:1fr}}