*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#007fcc;            /* serve brand blue */
  --blue-deep:#0066a8;
  --blue-bright:#1fa0ec;
  --blue-soft:#b6ddf3;
  --blue-pale:#e6f4fc;
  --pink:#7fd3e8;            /* re-purposed: light aqua accent */
  --pink-deep:#2bb6d6;       /* teal accent */
  --pink-soft:#cdeef6;
  --pink-pale:#eaf8fc;
  --ink:#1f2a37;             /* near-black like logotype */
  --ink-soft:#5b6775;
  --gray:#8a96a3;
  --line:#e3ebf2;
  --bg:#ffffff;
  --bg-soft:#f4fafe;
  --nav-h:84px;
  --f-en:'Poppins',sans-serif;
  --f-jp:'Zen Kaku Gothic New',sans-serif;
  --swirl:url("data:image/png;base64,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");
}

html{scroll-behavior:smooth}
body{
  font-family:var(--f-jp);
  color:var(--ink);
  background:var(--bg);
  line-height:2;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.03em;
  position:relative;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

.wrap{width:min(1140px,90vw);margin-inline:auto;position:relative;z-index:2}

/* ===== big english heading style ===== */
.en-h{font-family:var(--f-en);font-weight:800;font-size:clamp(2.4rem,6vw,4.5rem);color:var(--ink);letter-spacing:.01em;line-height:1}
.mini-label{display:flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:700;color:var(--gray);margin-bottom:1rem}
.mini-label::before{content:"";width:18px;height:1px;background:var(--gray)}

/* ===== decorative background system =====
   Philosophy: few elements, regular sizes, one consistent motion rule.
   Sizes are standardised:  S 90 · M 150 · L 230 · orbit 560/720.
   Motion: pure vertical scroll-parallax. --d = depth (0 far … 1 near);
   travel is derived from depth so far things move little, near things move more. */
.has-deco{position:relative;overflow:hidden}
.deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.deco>*{position:absolute;pointer-events:none;will-change:transform;
        --scroll:0; --d:.5;
        /* travel range: 30px (far) … 130px (near) */
        transform:translate3d(0, calc(var(--scroll) * (30px + var(--d) * 100px)), 0)}

/* shared sizing helpers */
.s-s{width:90px;height:90px}
.s-m{width:150px;height:150px}
.s-l{width:230px;height:230px}

/* soft filled circle — single calm radial, one palette */
.d-circle{border-radius:50%;background:radial-gradient(circle at 34% 30%,#e3f3fc,#bfe3f6)}
.d-circle.deep{background:radial-gradient(circle at 34% 30%,#cfeaf8,#9fd5ef)}

/* hollow ring — same family, only weight varies */
.d-ring{border-radius:50%;border:2px solid rgba(0,127,204,.18);background:transparent}
.d-ring.thin{border-width:1.5px;border-color:rgba(0,127,204,.13)}

/* big concentric orbit (the one feature element per section); slow spin echoes the logo */
.d-orbit{border-radius:50%;border:1.5px solid rgba(0,127,204,.08);background:transparent;
         animation:spinT var(--od,120s) linear infinite}
.d-orbit.rev{animation-direction:reverse}

/* logo swirl — hero only, very subtle */
.d-swirl{opacity:.045;animation:spinT var(--od,110s) linear infinite}
.d-swirl svg{width:100%;height:100%;display:block}

@keyframes spinT{to{transform:rotate(360deg)}}

/* calm dot layer, used once per section as the quiet ground */
.d-dots{inset:auto;
  background-image:radial-gradient(rgba(0,127,204,.10) 1.3px,transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 30%,transparent 100%)}
.d-dots:not([style*="width"]){inset:-8% -4%}

/* diagonal light streaks motif */
.streaks{width:300px;height:240px;will-change:transform;
  background:
    repeating-linear-gradient(118deg,
      transparent 0 26px,
      rgba(0,127,204,.10) 26px 27px,
      transparent 27px 60px);
  mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 40%,#000,transparent 78%)}

/* scattered ring cluster motif */
.ring-cluster{width:300px;height:280px;will-change:transform}
.ring-cluster::before,.ring-cluster::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(0,127,204,.16)}
.ring-cluster::before{width:120px;height:120px;left:0;top:30px}
.ring-cluster::after{width:64px;height:64px;left:96px;top:0;border-color:rgba(43,182,214,.22)}

/* legacy classes neutralised */
.blob,.swirl,.d-pill,.d-line,.d-plus{display:none}

/* watermark — scroll-driven horizontal slide */
.wm-track{position:absolute;left:0;width:100%;z-index:0;overflow:hidden;pointer-events:none}
.wm-line{display:inline-flex;white-space:nowrap;will-change:transform;--scroll:0;--sp:0px;
         transform:translate3d(calc(var(--scroll) * var(--sp)),0,0)}
.wm-line span{font-family:var(--f-en);font-weight:700;font-size:clamp(5rem,14vw,13rem);line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(0,127,204,.11);padding-right:.5em;letter-spacing:.02em}

/* ===== custom cursor (Serve swirl) ===== */
@media (hover:hover) and (pointer:fine){ .cursor-on, .cursor-on *{cursor:none} }
.cur-mark{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:10000;pointer-events:none;
  transition:width .35s cubic-bezier(.22,.61,.36,1),height .35s cubic-bezier(.22,.61,.36,1),margin .35s cubic-bezier(.22,.61,.36,1),opacity .35s}
.cur-mark::before{content:"";position:absolute;inset:0;
  background:var(--swirl) center/contain no-repeat;
  animation:curspin 5s linear infinite}
.cur-ring{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:9999;pointer-events:none;
  border-radius:50%;border:1.4px solid rgba(0,127,204,.45);
  transition:width .4s cubic-bezier(.22,.61,.36,1),height .4s cubic-bezier(.22,.61,.36,1),margin .4s cubic-bezier(.22,.61,.36,1),opacity .4s,border-color .4s}
@keyframes curspin{to{transform:rotate(360deg)}}
.cursor-hot .cur-mark{width:30px;height:30px;margin:-15px 0 0 -15px}
.cursor-hot .cur-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:rgba(0,127,204,.7)}
.cursor-down .cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px}

/* ===== buttons (pill with circle arrow) ===== */
.btn{display:inline-flex;align-items:center;gap:1em;font-family:var(--f-en);font-weight:600;font-size:.84rem;letter-spacing:.08em;padding:.55em .65em .55em 2em;border-radius:999px;color:#fff;background:var(--blue);transition:.6s cubic-bezier(.22,.61,.36,1);box-shadow:0 12px 26px -12px rgba(43,164,224,.7)}
.btn .arw{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--blue);font-size:.9rem;transition:.6s cubic-bezier(.22,.61,.36,1)}
.btn:hover{background:var(--blue-deep);transform:translateY(-3px)}
.btn:hover .arw{transform:translateX(3px)}
.btn.pink{background:var(--pink-deep);box-shadow:0 12px 26px -12px rgba(239,123,168,.7)}
.btn.pink .arw{color:var(--pink-deep)}
.btn.pink:hover{background:#e85e96}
.btn.outline{background:transparent;border:1.5px solid var(--blue);color:var(--blue);box-shadow:none;padding-left:2em}
.btn.outline .arw{background:var(--blue);color:#fff}
.btn.outline:hover{background:var(--blue);color:#fff}
.btn.outline:hover .arw{background:#fff;color:var(--blue)}

.view-more{display:inline-flex;align-items:center;gap:1em;font-family:var(--f-en);font-weight:600;font-size:.8rem;letter-spacing:.14em;color:var(--ink)}
.view-more .arw{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--blue);display:grid;place-items:center;color:var(--blue);transition:.6s cubic-bezier(.22,.61,.36,1)}
.view-more:hover .arw{background:var(--blue);color:#fff;transform:translateX(3px)}

/* reveal */
/* soft fade-up reveal */
.reveal{opacity:0;transform:translateY(36px);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}
/* gentle floating loop for accent imagery */
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-soft{animation:softFloat 7s ease-in-out infinite}

/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,3vw,2.6rem);transition:.6s cubic-bezier(.22,.61,.36,1);background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}
header.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);height:68px;box-shadow:0 6px 28px -20px rgba(58,70,84,.5)}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--f-en);font-weight:800;font-size:1.5rem;color:var(--ink)}
.logo .mark{height:32px;width:auto;flex:none;object-fit:contain;display:block}
.logo small{display:block;font-size:.5rem;font-weight:500;letter-spacing:.04em;color:var(--gray);margin-top:2px}
.gnav{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.6rem);flex-wrap:nowrap}
.gnav ul{display:flex;gap:clamp(.8rem,1.8vw,1.7rem)}
.gnav .nav-item{display:flex;flex-direction:column;align-items:center;line-height:1.2;position:relative}
.gnav .nav-item .en{font-family:var(--f-en);font-weight:600;font-size:.84rem}
.gnav .nav-item .jp{font-size:.6rem;color:var(--gray)}
.gnav .nav-item::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--blue);transition:.55s cubic-bezier(.22,.61,.36,1)}
.gnav .nav-item:hover{color:var(--blue)}
.gnav .nav-item:hover::after{width:100%}
.nav-ctas{display:flex;gap:.6rem;align-items:center}
.nav-pill{display:inline-flex;align-items:center;align-self:center;gap:.5em;height:auto;line-height:1;white-space:nowrap;font-family:var(--f-en);font-weight:700;font-size:.76rem;letter-spacing:.06em;color:#fff;padding:.72em 1.45em;border-radius:999px;box-shadow:0 10px 22px -10px rgba(0,127,204,.6);transition:.45s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}
.nav-pill::before{content:"";width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--pill-ic) center/contain no-repeat;mask:var(--pill-ic) center/contain no-repeat}
.nav-pill.contact{background:linear-gradient(120deg,var(--pink-deep),var(--pink));
  --pill-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M2 4h20v16H2z M2 5l10 7L22 5'/></svg>")}
.nav-pill::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,.61,.36,1)}
.nav-pill:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,127,204,.7)}
.nav-pill:hover::after{left:130%}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.5s cubic-bezier(.22,.61,.36,1);border-radius:2px}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden;background:#fff}
.hero .blob1{width:680px;height:620px;background:var(--pink-soft);top:-120px;left:-160px;opacity:.7}
.hero .blob2{width:520px;height:480px;background:var(--blue-soft);top:34%;left:18%;opacity:.55}
.hero .blob3{width:760px;height:700px;background:var(--pink-pale);bottom:-220px;right:-180px;opacity:.8}
.hero-photo{position:absolute;top:0;right:0;width:46%;height:62%;border-bottom-left-radius:200px;overflow:hidden;z-index:1}
.hero-photo .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2.2s ease,transform 9s ease;transform:scale(1.08)}
.hero-photo .slide.active{opacity:1;transform:scale(1)}
.hero-wm{position:absolute;left:-3vw;top:42%;z-index:0}
.hero-inner{position:relative;z-index:3;width:min(1140px,90vw);margin-inline:auto}
/* eyebrow with pulsing dot */
.hero-eyebrow{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;font-weight:700;color:var(--blue);letter-spacing:.06em;margin-bottom:1.4rem;
  opacity:0;transform:translateY(12px);animation:heroIn .9s cubic-bezier(.22,.61,.36,1) .15s forwards}
.dot-pulse{width:9px;height:9px;border-radius:50%;background:var(--blue);position:relative;flex:none}
.dot-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:dotPulse 2s ease-out infinite}
@keyframes dotPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
/* headline */
.hero-h1{font-size:clamp(2rem,5.4vw,3.9rem);font-weight:900;line-height:1.5;letter-spacing:.04em;color:var(--ink)}
.hero-h1 .line{display:block;position:relative}
.hero-h1 .ch{display:inline-block;opacity:0;transform:translateY(40%) rotate(6deg);
  animation:chIn .7s cubic-bezier(.22,1.2,.4,1) forwards}
.hero-h1 .ch.b{color:var(--blue)}
@keyframes chIn{to{opacity:1;transform:none}}
/* hand-drawn brush stroke under テクノロジー */
.hero-h1 .brush{position:absolute;left:0;bottom:-.08em;width:7.4em;height:.5em;overflow:visible}
.hero-h1 .brush path{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round;opacity:.32;
  stroke-dasharray:340;stroke-dashoffset:340;animation:brushDraw 1s cubic-bezier(.22,.61,.36,1) 1.1s forwards}
@keyframes brushDraw{to{stroke-dashoffset:0}}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero p.lead{margin-top:1.8rem;font-size:.92rem;color:var(--ink-soft);max-width:30em;line-height:2.1;
  opacity:0;transform:translateY(12px);animation:heroIn .9s cubic-bezier(.22,.61,.36,1) 1.3s forwards}
.hero .cta-row{margin-top:2.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  opacity:0;transform:translateY(12px);animation:heroIn .9s cubic-bezier(.22,.61,.36,1) 1.5s forwards}
.btn-text{display:inline-flex;align-items:center;gap:.6em;font-size:.86rem;font-weight:700;color:var(--ink)}
.btn-text .arw2{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blue);display:grid;place-items:center;color:var(--blue);font-size:.8rem;transition:.5s cubic-bezier(.22,.61,.36,1)}
.btn-text:hover .arw2{background:var(--blue);color:#fff;transform:translateX(3px)}
.scroll-ind{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:4;font-family:var(--f-en);font-size:.62rem;letter-spacing:.3em;color:var(--gray);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.scroll-ind::after{content:"";width:1px;height:50px;background:linear-gradient(var(--gray),transparent);animation:sd 1.8s infinite}
@keyframes sd{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.newsbar{position:absolute;bottom:0;right:0;z-index:4;background:#fff;border-radius:14px 0 0 0;box-shadow:0 -4px 30px -16px rgba(58,70,84,.3);padding:1rem 2rem 1rem 1.4rem;display:flex;align-items:center;gap:1.2rem;font-size:.78rem}
.newsbar .tag{background:var(--blue);color:#fff;font-family:var(--f-en);font-weight:700;letter-spacing:.1em;font-size:.62rem;padding:.35em 1em;border-radius:999px}
.newsbar .date{font-family:var(--f-en);color:var(--gray)}
.copyr{position:absolute;right:14px;top:46%;writing-mode:vertical-rl;font-family:var(--f-en);font-size:.6rem;letter-spacing:.2em;color:var(--gray);z-index:4}

/* ===== watermark band that spans full width ===== */
.wm-band{position:relative;height:clamp(110px,14vw,180px);z-index:0;overflow:hidden;margin:1.5rem 0 -1rem}
.wm-band .wm-track{top:50%;transform:translateY(-50%)}

/* ===== ABOUT ===== */
.about{position:relative;padding:7rem 0 8rem;overflow:hidden}
.about .blob1{width:420px;height:400px;background:var(--blue-soft);top:8%;right:-120px;opacity:.4}
.about .blob2{width:300px;height:280px;background:var(--pink-soft);bottom:6%;left:-100px;opacity:.4}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.about-text .en-h{margin:.4rem 0 1.6rem}
.about-text h3{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:900;line-height:1.6;margin-bottom:1.6rem;letter-spacing:.04em}
.about-text h3 .b{color:var(--blue)}
.about-text p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.2rem}
.about-text .view-more{margin-top:1rem}
.about-imgs{position:relative;height:460px}
.about-imgs figure{position:absolute;overflow:hidden;border-radius:50%;box-shadow:0 30px 60px -30px rgba(0,127,204,.45)}
.about-imgs img{width:100%;height:100%;object-fit:cover;transition:1.2s cubic-bezier(.22,.61,.36,1)}
.about-imgs figure:hover img{transform:scale(1.06)}
.ai1{width:74%;aspect-ratio:1/1;top:0;left:0;z-index:1}
.ai2{width:46%;aspect-ratio:1/1;bottom:2%;right:0;z-index:3;border:6px solid #fff}
.about-imgs .glow-accent{position:absolute;width:150px;height:150px;border-radius:50%;right:8%;top:6%;z-index:0;
  background:radial-gradient(circle at 38% 34%,rgba(0,127,204,.22),rgba(0,127,204,0) 72%);filter:blur(10px);
  animation:floatGlow 15s ease-in-out infinite;--gx:12px;--gy:-16px}
.about-imgs .ring-accent{position:absolute;width:70px;height:70px;border-radius:50%;border:1.5px solid rgba(0,127,204,.25);left:-3%;bottom:14%;z-index:2}

/* ===== SERVICE (editorial grid) ===== */
.service{position:relative;padding:6.5rem 0 8rem;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--blue-pale) 100%)}
.service-layout{display:grid;grid-template-columns:300px 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.service-aside{position:sticky;top:110px}
.service-aside .en-h{margin:.4rem 0 1.4rem}
.service-aside p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.8rem}
.service-aside .count{font-family:var(--f-en);font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--blue);border-top:1px solid var(--line);padding-top:1.2rem}
.svc-list{display:flex;flex-direction:column}
.svc-item{display:grid;grid-template-columns:auto 64px 1fr auto;gap:1.6rem;align-items:center;
  padding:1.9rem 1.2rem;border-top:1px solid var(--line);position:relative;transition:.65s cubic-bezier(.22,.61,.36,1);
  text-decoration:none;color:inherit}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-item::before{content:"";position:absolute;inset:0;background:#fff;border-radius:18px;opacity:0;transform:scale(.98);transition:.6s cubic-bezier(.22,.61,.36,1);box-shadow:0 22px 50px -28px rgba(0,127,204,.4);z-index:-1}
.svc-item:hover{padding-left:1.8rem;padding-right:1.8rem}
.svc-item:hover::before{opacity:1;transform:scale(1)}
.svc-num{font-family:var(--f-en);font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--blue);width:2.4em}
.svc-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  box-shadow:0 14px 28px -12px rgba(0,127,204,.55);transition:.6s cubic-bezier(.22,.61,.36,1)}
.svc-item:hover .svc-ic{transform:rotate(-6deg) scale(1.05)}
.svc-ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.6}
.svc-main h3{font-size:1.18rem;font-weight:900;letter-spacing:.03em;margin-bottom:.35rem}
.svc-main p{font-size:.84rem;color:var(--ink-soft);line-height:1.7;max-width:44ch}
.svc-go{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  color:var(--blue);font-family:var(--f-en);transition:.6s cubic-bezier(.22,.61,.36,1);flex:none}
.svc-item:hover .svc-go{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateX(4px)}

/* hero refined decorations */
/* soft floating glow — the signature "ふわっと" circle (blurred, drifting) */
.glow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 38% 34%,var(--g1,rgba(0,127,204,.16)),var(--g2,rgba(0,127,204,0)) 72%);
  filter:blur(10px);animation:floatGlow var(--gd,16s) ease-in-out infinite}
.glow.g-soft{--g1:rgba(95,180,255,.15);filter:blur(16px)}
.glow.g-faint{--g1:rgba(0,127,204,.09);filter:blur(22px)}
@keyframes floatGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(var(--gx,16px),var(--gy,-22px),0) scale(1.06)}
}
/* hero outline wordmark — single, placed low-left, sized not to collide */
.hero-wordmark{position:absolute;left:-1.5vw;bottom:6%;z-index:1;
  font-family:var(--f-en);font-weight:800;font-size:clamp(7rem,15vw,13rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.3px rgba(0,127,204,.10);letter-spacing:-.02em;
  pointer-events:none;user-select:none}
/* thin outline ring accent */
.hero-thinring{position:absolute;border-radius:50%;border:1px solid rgba(0,127,204,.18);pointer-events:none}

/* ===== WORKS ===== */
.works{position:relative;padding:6rem 0 8rem;overflow:hidden}
.works .blob1{width:520px;height:480px;background:var(--pink-soft);top:30%;left:-200px;opacity:.45}
.works .blob2{width:480px;height:440px;background:var(--blue-soft);bottom:6%;right:-200px;opacity:.45}
.works-head{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:end;margin-bottom:3rem}
.works-head .en-h{margin-top:.4rem}
.works-head p{font-size:.88rem;color:var(--ink-soft);padding-bottom:.6rem}
.works-track{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.work-card{background:#fff;border-radius:22px;border:2px solid var(--blue-soft);padding:2rem 2rem 2.2rem;transition:.6s cubic-bezier(.22,.61,.36,1);position:relative}
.work-card:nth-child(even){border-color:var(--pink-soft)}
.work-card:hover{transform:translateY(-8px);box-shadow:0 28px 56px -30px rgba(58,70,84,.4)}
.work-card .top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.work-card .wno{font-family:var(--f-en);font-weight:800;font-size:1.05rem;color:var(--blue)}
.work-card:nth-child(even) .wno{color:var(--pink-deep)}
.work-card .wcat{font-size:.66rem;font-weight:700;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.3em 1em}
.work-card h3{font-size:1.16rem;font-weight:900;margin-bottom:1rem;letter-spacing:.03em}
.work-card .field{font-size:.7rem;color:var(--gray);margin-bottom:.6rem}
.work-card .field b{color:var(--ink);font-weight:700}
.work-card p{font-size:.82rem;color:var(--ink-soft);line-height:1.85}

/* ===== FEATURE ===== */
.feature{position:relative;padding:6rem 0 8rem;overflow:hidden;background:var(--bg-soft)}
.feature .blob1{width:420px;height:400px;background:var(--pink-soft);top:12%;right:-140px;opacity:.4}
.feature-top{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:3rem}
.feature-top .en-h{margin:.4rem 0 1.4rem}
.feature-top h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:900;line-height:1.6;margin-bottom:1.4rem;letter-spacing:.04em}
.feature-top h3 .b{color:var(--blue)}
.feature-top p{font-size:.88rem;color:var(--ink-soft);margin-bottom:1rem}
.feature-illust{display:grid;place-items:center}
.feature-illust .mac{width:100%;max-width:380px;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(58,70,84,.4)}
.feat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.feat-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px -28px rgba(58,70,84,.35);transition:.6s cubic-bezier(.22,.61,.36,1)}
.feat-card:hover{transform:translateY(-8px)}
.feat-card .fimg{aspect-ratio:16/10;background-size:cover;background-position:center}
.feat-card .fbody{padding:1.8rem}
.feat-card .fen{font-family:var(--f-en);font-weight:800;font-size:1.25rem;line-height:1.2;color:var(--ink);margin-bottom:.5rem}
.feat-card h4{font-size:1.02rem;font-weight:900;margin-bottom:.8rem;color:var(--blue)}
.feat-card:nth-child(2) h4{color:var(--pink-deep)}
.feat-card p{font-size:.8rem;color:var(--ink-soft);line-height:1.85}

/* ===== COMPANY ===== */
.company{position:relative;padding:6rem 0 8rem;overflow:hidden}
.company .blob1{width:380px;height:360px;background:var(--blue-soft);bottom:10%;left:-120px;opacity:.4}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.company-imgs{position:relative;height:400px}
.company-imgs .cimg1{position:absolute;width:62%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;top:0;left:0;box-shadow:0 24px 50px -28px rgba(58,70,84,.4)}
.company-imgs .cimg2{position:absolute;width:50%;aspect-ratio:4/5;border-radius:30px;overflow:hidden;bottom:0;right:0;z-index:2;box-shadow:0 24px 50px -28px rgba(58,70,84,.4)}
.company-imgs img{width:100%;height:100%;object-fit:cover}
.company-text .en-h{margin:.4rem 0 1.4rem}
.company-text p{font-size:.9rem;color:var(--ink-soft);margin-bottom:1.6rem}
.company-text .btns{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* ===== photostrip ===== */
.photostrip{display:grid;grid-template-columns:repeat(4,1fr);height:clamp(180px,24vw,320px)}
.photostrip div{background-size:cover;background-position:center}

/* ===== RECRUIT ===== */
.recruit{position:relative;padding:6rem 0 7rem;overflow:hidden;background:linear-gradient(180deg,var(--blue-pale),#fff)}
.recruit .blob1{width:520px;height:480px;background:var(--pink-soft);top:0;right:-180px;opacity:.4}
.recruit-wm{position:absolute;left:0;width:100%;bottom:1vw;z-index:0;overflow:hidden}
.recruit-grid{display:grid;grid-template-columns:auto 1fr;gap:4rem;align-items:center}
.recruit-left .en-h{margin-top:.4rem}
.recruit-left .view-more{margin-top:1.6rem}
.recruit-right h3{font-family:var(--f-en);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--blue);line-height:1.1;margin-bottom:1.2rem}
.recruit-right h4{font-size:1.2rem;font-weight:900;margin-bottom:1.2rem;letter-spacing:.04em}
.recruit-right p{font-size:.88rem;color:var(--ink-soft)}

/* ===== CTA ===== */
.cta-sec{position:relative;padding:0 0 0;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1fr 1fr}
.cta-block{padding:clamp(3rem,6vw,5rem);display:flex;align-items:center;gap:1.6rem;color:#fff;transition:.6s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}
.cta-block.contact{background:linear-gradient(120deg,var(--pink),var(--pink-deep))}
.cta-block.entry{background:linear-gradient(120deg,var(--blue),var(--blue-deep))}
.cta-block:hover{filter:brightness(1.04)}
.cta-block .ic{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.cta-block .ic svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.7}
.cta-block .en{font-family:var(--f-en);font-weight:800;font-size:1.6rem;line-height:1}
.cta-block .jp{font-size:.8rem;opacity:.92}
.cta-block .arw{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:.6s cubic-bezier(.22,.61,.36,1)}
.cta-block:hover .arw{background:#fff;color:var(--pink-deep);transform:translateX(4px)}
.cta-block.entry:hover .arw{color:var(--blue-deep)}

/* ===== FOOTER ===== */
footer{background:#2c3440;color:rgba(255,255,255,.72);padding:4rem 0 2rem}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .logo{color:#fff;margin-bottom:1.2rem}
.foot-brand address{font-style:normal;font-size:.82rem;line-height:1.95}
.foot-brand .tel{font-family:var(--f-en);font-size:.82rem;display:block;margin-top:.5rem}
.foot-col h5{font-family:var(--f-en);font-weight:700;letter-spacing:.12em;font-size:.72rem;color:var(--blue);margin-bottom:1rem}
.foot-col ul{display:flex;flex-direction:column;gap:.6rem}
.foot-col a{font-size:.82rem;transition:.5s cubic-bezier(.22,.61,.36,1)}
.foot-col a:hover{color:#fff;padding-left:4px}
.copy{text-align:center;font-family:var(--f-en);font-size:.68rem;letter-spacing:.1em;margin-top:2rem;color:rgba(255,255,255,.4)}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .d-orbit,.d-swirl,.gemini-core,.cur-mark::before,.float-soft,.glow,
  .hero-h1 .ch,.hero-eyebrow,.hero p.lead,.hero .cta-row,.hero-h1 .brush path,.dot-pulse::after{animation:none !important}
  .hero-h1 .ch,.hero-eyebrow,.hero p.lead,.hero .cta-row{opacity:1 !important;transform:none !important}
  .hero-h1 .brush path{stroke-dashoffset:0 !important}
  .reveal{filter:none}
  *{scroll-behavior:auto}
}

/* ===== responsive ===== */
@media(max-width:920px){
  .gnav ul,.nav-ctas{display:none}
  .burger{display:flex}
  .about-grid,.feature-top,.company-grid,.recruit-grid,.cta-grid,.works-head{grid-template-columns:1fr;gap:2.5rem}
  .service-layout{grid-template-columns:1fr;gap:2rem}
  .service-aside{position:static}
  .svc-item{grid-template-columns:auto 52px 1fr;gap:1rem;padding:1.5rem .6rem}
  .svc-go{display:none}
  .works-track,.feat-cards,.foot-top{grid-template-columns:1fr}
  /* hero: photo becomes a clean banner above the text, no overlap */
  .hero{min-height:auto;flex-direction:column;padding-top:calc(var(--nav-h) + 1rem);padding-bottom:3rem}
  .hero-photo{position:relative;top:auto;right:auto;width:100%;height:230px;border-bottom-left-radius:80px;opacity:1;margin-bottom:2rem;order:-1}
  .hero-inner{width:100%;padding-inline:5vw}
  .scroll-ind,.copyr{display:none}
  .newsbar{position:relative;border-radius:14px;margin-top:2rem;flex-wrap:wrap;font-size:.74rem;padding:.9rem 1.2rem}
  .about-imgs,.company-imgs{height:360px}
  .photostrip{grid-template-columns:repeat(2,1fr)}
  .gnav.open{position:fixed;inset:0;background:rgba(255,255,255,.98);flex-direction:column;justify-content:center;gap:2rem;z-index:999}
  .gnav.open ul{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
  .gnav.open .nav-ctas{display:flex}
}
@media(max-width:560px){
  .feat-cards{grid-template-columns:1fr}
  .photostrip{grid-template-columns:1fr 1fr}
  .svc-num{display:none}
  .svc-item{grid-template-columns:52px 1fr}
  .hero-wordmark{font-size:clamp(8rem,30vw,12rem)}
}

/* ===== sub-page hero band ===== */
.page-hero{position:relative;padding:calc(var(--nav-h) + 4.5rem) 0 4rem;overflow:hidden;background:linear-gradient(160deg,var(--blue-pale),#fff)}
.page-hero .deco{z-index:0}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumbs{font-family:var(--f-en);font-size:.72rem;letter-spacing:.12em;color:var(--gray);margin-bottom:1.2rem}
.page-hero .crumbs a{color:var(--gray)}
.page-hero .crumbs a:hover{color:var(--blue)}
.page-hero h1{font-family:var(--f-en);font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);color:var(--ink);line-height:1;letter-spacing:.01em}
.page-hero .jp{display:block;font-family:var(--f-jp);font-weight:900;font-size:clamp(1rem,2.2vw,1.4rem);color:var(--blue);margin-top:1rem;letter-spacing:.06em}
.page-hero p.lede{margin-top:1.4rem;max-width:42em;color:var(--ink-soft);font-size:.94rem}
/* page-hero floating accent image (right side) */
.page-hero{display:block}
.page-hero .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.page-hero-img{width:clamp(180px,22vw,300px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,127,204,.55);border:6px solid #fff;animation:softFloat 7s ease-in-out infinite;flex:none}
.page-hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .page-hero .wrap{grid-template-columns:1fr}
  .page-hero-img{display:none}
}
/* generic section + prose for subpages */
.sec{position:relative;padding:clamp(4rem,8vw,6.5rem) 0;overflow:hidden}
.sec.alt{background:var(--bg-soft)}
.sec .lead-head{margin-bottom:2.8rem}
.sec .lead-head .en{font-family:var(--f-en);font-weight:700;letter-spacing:.18em;color:var(--blue);font-size:.78rem}
.sec .lead-head h2{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:900;letter-spacing:.04em;margin-top:.5rem;line-height:1.5}
.prose{max-width:46em;color:var(--ink-soft);font-size:.95rem;line-height:2.05}
.prose p{margin-bottom:1.2rem}
.prose strong{color:var(--ink)}
/* detail grids reused */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.info-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:2.2rem 1.9rem;transition:.6s cubic-bezier(.22,.61,.36,1)}
.info-card:hover{transform:translateY(-8px);box-shadow:0 28px 56px -30px rgba(0,127,204,.4)}
.info-card .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-bright));margin-bottom:1.3rem;box-shadow:0 12px 24px -10px rgba(0,127,204,.5)}
.info-card .ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.6}
.info-card h3{font-size:1.12rem;font-weight:900;margin-bottom:.7rem;letter-spacing:.02em}
.info-card p{font-size:.86rem;color:var(--ink-soft);line-height:1.85}
/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:.9rem}
.spec th,.spec td{text-align:left;padding:1.1rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:28%;color:var(--blue);font-weight:700;white-space:nowrap}
.spec td{color:var(--ink-soft)}
/* steps */
.steps{counter-reset:st;display:flex;flex-direction:column;gap:1.2rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.8rem}
.step .no{counter-increment:st;width:46px;height:46px;border-radius:50%;background:var(--blue-pale);color:var(--blue);font-family:var(--f-en);font-weight:800;display:grid;place-items:center;flex:none}
.step .no::before{content:counter(st,decimal-leading-zero)}
.step h3{font-size:1.05rem;font-weight:900;margin-bottom:.4rem}
.step p{font-size:.86rem;color:var(--ink-soft)}
@media(max-width:920px){
  .cards-3,.cards-2{grid-template-columns:1fr}
}

/* service detail blocks */
.svc-detail{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5rem)}
.svc-block{display:grid;grid-template-columns:auto auto 1fr 300px;gap:1.6rem 2rem;align-items:center}
.svc-num-lg{font-family:var(--f-en);font-weight:800;font-size:2.4rem;color:var(--blue-soft);line-height:1;align-self:start}
.svc-ic-lg{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-bright));box-shadow:0 16px 32px -14px rgba(0,127,204,.55);flex:none;align-self:start}
.svc-ic-lg svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.5}
.svc-text h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:900;letter-spacing:.03em}
.svc-text .svc-tag{color:var(--blue);font-weight:700;font-size:.92rem;margin:.4rem 0 1rem}
.svc-text p{color:var(--ink-soft);font-size:.92rem;line-height:2;max-width:48em}
.svc-points{list-style:none;margin-top:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.svc-points li{position:relative;padding-left:1.7rem;font-size:.86rem;color:var(--ink)}
.svc-points li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-pale)}
.svc-img{width:300px;aspect-ratio:4/3;border-radius:22px;overflow:hidden;box-shadow:0 26px 54px -30px rgba(0,127,204,.5)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:1.2s cubic-bezier(.22,.61,.36,1)}
.svc-block:hover .svc-img img{transform:scale(1.07)}
/* alternate: even blocks put the image on the left */
.svc-block.flip{grid-template-columns:300px 1fr auto auto}
.svc-block.flip .svc-img{order:-1}
.svc-block.flip .svc-num-lg{order:3}
.svc-block.flip .svc-ic-lg{order:4}
@media(max-width:900px){
  .svc-block,.svc-block.flip{grid-template-columns:auto auto 1fr;gap:1.2rem 1.6rem}
  .svc-img,.svc-block.flip .svc-img{width:100%;order:0;grid-column:1 / -1;max-width:none;aspect-ratio:16/7}
}
@media(max-width:760px){
  .svc-block,.svc-block.flip{grid-template-columns:auto 1fr;gap:1rem 1.2rem}
  .svc-num-lg{grid-row:1;font-size:1.8rem}
  .svc-ic-lg{width:56px;height:56px}
  .svc-text{grid-column:1 / -1}
}

/* feature page rows */
.feat-list{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.2rem)}
.feat-row{display:grid;grid-template-columns:auto auto 1fr;gap:1.4rem 2.2rem;align-items:start;padding:2.2rem;background:#fff;border:1px solid var(--line);border-radius:24px;transition:.6s cubic-bezier(.22,.61,.36,1)}
.feat-row:hover{transform:translateY(-8px);box-shadow:0 30px 60px -32px rgba(0,127,204,.45)}
.feat-num{font-family:var(--f-en);font-weight:700;font-size:.74rem;letter-spacing:.18em;color:var(--blue);display:flex;flex-direction:column;align-items:center;line-height:1}
.feat-num span{font-size:2.6rem;font-weight:800;color:var(--blue-soft);margin-top:.3rem}
.feat-ic{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-bright));box-shadow:0 16px 32px -14px rgba(0,127,204,.55);flex:none}
.feat-ic svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.5}
.feat-body h3{font-size:clamp(1.2rem,2.6vw,1.55rem);font-weight:900;letter-spacing:.03em}
.feat-body .feat-tag{color:var(--blue);font-weight:700;font-size:.9rem;margin:.4rem 0 1rem}
.feat-body p{color:var(--ink-soft);font-size:.9rem;line-height:2;max-width:50em}
@media(max-width:760px){
  .feat-row{grid-template-columns:auto 1fr;gap:1rem 1.2rem}
  .feat-num{flex-direction:row;gap:.5rem;align-items:baseline}
  .feat-num span{font-size:1.6rem;margin:0}
  .feat-body{grid-column:1 / -1}
}

/* works page grid */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem}
.work-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;color:inherit;transition:.6s cubic-bezier(.22,.61,.36,1)}
.work-card:hover{transform:translateY(-10px);box-shadow:0 34px 64px -34px rgba(0,127,204,.5)}
.work-img{aspect-ratio:16/10;overflow:hidden}
.work-img img{width:100%;height:100%;object-fit:cover;transition:1.2s cubic-bezier(.22,.61,.36,1)}
.work-card:hover .work-img img{transform:scale(1.07)}
.work-info{padding:1.8rem}
.work-meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.work-no{font-family:var(--f-en);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--blue)}
.work-ind{font-size:.72rem;color:var(--gray);background:var(--blue-pale);padding:.25em 1em;border-radius:999px}
.work-info h3{font-size:1.18rem;font-weight:900;letter-spacing:.02em;margin-bottom:.7rem}
.work-info p{font-size:.85rem;color:var(--ink-soft);line-height:1.9}
.work-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.work-tags span{font-size:.7rem;color:var(--blue-deep);border:1px solid var(--blue-soft);padding:.25em .9em;border-radius:999px}
@media(max-width:760px){ .works-grid{grid-template-columns:1fr} }

/* company page */
.msg-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.msg-imgs{position:relative;aspect-ratio:4/5;max-width:420px}
.msg-imgs .m1{position:absolute;inset:0;border-radius:30px 30px 30px 90px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,127,204,.5)}
.msg-imgs .m1 img{width:100%;height:100%;object-fit:cover}
.msg-imgs .glow-accent{position:absolute;width:160px;height:160px;border-radius:50%;right:-6%;top:-6%;z-index:-1;background:radial-gradient(circle at 38% 34%,rgba(0,127,204,.22),rgba(0,127,204,0) 72%);filter:blur(10px);animation:floatGlow 15s ease-in-out infinite;--gx:12px;--gy:-16px}
.msg-text h2{line-height:1.5}
.access-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:stretch}
.access-info{display:flex;flex-direction:column;gap:1.2rem;font-size:.92rem;color:var(--ink-soft);line-height:1.9}
.access-info .addr-line{font-weight:900;font-size:1.1rem;color:var(--ink)}
.access-map{border-radius:20px;overflow:hidden;min-height:300px;box-shadow:0 24px 50px -30px rgba(58,70,84,.4)}
.access-map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
@media(max-width:860px){
  .msg-grid,.access-grid{grid-template-columns:1fr}
  .msg-imgs{margin:0 auto}
}

/* contact form */
.contact-form{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(1.8rem,4vw,3rem);box-shadow:0 30px 60px -36px rgba(58,70,84,.35)}
.contact-form .field{margin-bottom:1.5rem}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.contact-form label{display:block;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:.55rem}
.contact-form .req{display:inline-block;font-size:.62rem;font-weight:700;color:#fff;background:var(--pink-deep);padding:.15em .7em;border-radius:999px;margin-left:.5em;vertical-align:middle}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;font:inherit;font-size:.9rem;padding:.85em 1em;border:1.5px solid var(--line);border-radius:12px;background:var(--bg-soft);color:var(--ink);transition:.4s cubic-bezier(.22,.61,.36,1)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px var(--blue-pale)}
.contact-form textarea{resize:vertical}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:1.1em;top:50%;width:.6em;height:.6em;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.contact-form select{appearance:none;-webkit-appearance:none}
.field-submit{text-align:center;margin-top:2rem}
.form-note{font-size:.74rem;color:var(--gray);margin-top:1rem}
@media(max-width:620px){ .contact-form .field-row{grid-template-columns:1fr} }

/* recruit page */
.job-list{display:flex;flex-direction:column;gap:1.2rem}
.job-row{display:grid;grid-template-columns:1fr auto auto;gap:1.5rem 2rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem 2rem;transition:.6s cubic-bezier(.22,.61,.36,1)}
.job-row:hover{transform:translateY(-6px);box-shadow:0 26px 52px -30px rgba(0,127,204,.42)}
.job-main h3{font-size:1.1rem;font-weight:900;margin-bottom:.5rem}
.job-main p{font-size:.84rem;color:var(--ink-soft);line-height:1.8;max-width:40em}
.job-meta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.job-emp{font-size:.72rem;font-weight:700;color:#fff;background:var(--blue);padding:.25em 1em;border-radius:999px;white-space:nowrap}
.job-loc{font-size:.74rem;color:var(--gray);white-space:nowrap}
.job-apply{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-en);font-weight:700;font-size:.82rem;color:var(--blue);white-space:nowrap}
.job-apply span{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--blue);display:grid;place-items:center;transition:.5s cubic-bezier(.22,.61,.36,1)}
.job-row:hover .job-apply span{background:var(--blue);color:#fff;transform:translateX(3px)}
.recruit-banner{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0;background:linear-gradient(160deg,var(--blue-pale),#fff)}
.recruit-banner .rb-en{font-family:var(--f-en);font-weight:700;letter-spacing:.1em;color:var(--blue);font-size:1rem}
.recruit-banner h2{font-size:clamp(1.7rem,4.5vw,2.8rem);font-weight:900;line-height:1.5;margin:1rem 0;letter-spacing:.04em}
.recruit-banner .rb-lead{color:var(--ink-soft);font-size:.92rem;line-height:2}
@media(max-width:820px){
  .job-row{grid-template-columns:1fr;gap:1rem}
  .job-meta{flex-direction:row;gap:.8rem;align-items:center}
}

/* active nav item */
.gnav .nav-item.active{color:var(--blue)}
.gnav .nav-item.active::after{width:100%}

/* shooting-star canvas: ambient overlay, below header & cursor, above content */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:900;pointer-events:none}
@media(prefers-reduced-motion:reduce){#starfield{display:none}}

/* ============ WOW / ワクワク enhancements ============ */
/* richer brand palette accents */
:root{
  --grad-hot:linear-gradient(120deg,#007fcc 0%,#1fa0ec 40%,#2bb6d6 70%,#7fd3e8 100%);
  --grad-warm:linear-gradient(120deg,#1fa0ec,#2bb6d6);
}
/* animated gradient text for big EN headings */
.en-h, .page-hero h1{
  background:var(--grad-hot);
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:hueShift 9s ease-in-out infinite}
@keyframes hueShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* hero headline blue chars: solid brand blue (gradient-clip on transformed inline spans is unreliable) */
.hero-h1 .ch.b{color:var(--blue)}

/* eyebrow pill look */
.hero-eyebrow{background:rgba(0,127,204,.08);padding:.5em 1.1em;border-radius:999px}

/* service icon tiles: gradient + playful tilt on hover */
.svc-ic{background:var(--grad-hot)!important;background-size:200% 200%!important;animation:hueShift 7s ease-in-out infinite}
.svc-item:hover .svc-ic{transform:rotate(-8deg) scale(1.12)}
.svc-item{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .5s}
.svc-item:hover{transform:translateX(10px)}
.svc-item:hover .svc-go{background:var(--blue);color:#fff;transform:translateX(4px) rotate(0)}

/* cards: bouncier lift */
.feat-card,.work-card,.info-card,.cta-block{transition:transform .55s cubic-bezier(.34,1.4,.64,1),box-shadow .55s,background .55s!important}
.feat-card:hover,.work-card:hover{transform:translateY(-12px) scale(1.015)}

/* buttons: gradient + shine sweep */
.btn{position:relative;overflow:hidden;background:var(--grad-hot)!important;background-size:200% 200%!important;animation:hueShift 8s ease-in-out infinite;box-shadow:0 14px 30px -12px rgba(0,127,204,.6)}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,.61,.36,1)}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-3px)}

/* CTA block: vibrant gradient panel */
.cta-block.contact{background:var(--grad-hot);background-size:200% 200%;animation:hueShift 9s ease-in-out infinite;color:#fff}
.cta-block.contact .jp,.cta-block.contact .en{color:#fff}

/* floating mini shapes (decor accents) bob a little */
.d-ring{animation:bobRing 6s ease-in-out infinite}
@keyframes bobRing{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(8deg)}}

/* section EN headings get a small accent bar that grows on reveal */
.mini-label{position:relative;display:inline-block;font-weight:700;color:var(--blue)}

/* photostrip images: subtle zoom + saturate on hover */
.photostrip > div{transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .8s}
.photostrip > div:hover{transform:scale(1.06);filter:saturate(1.2)}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .en-h,.page-hero h1,.svc-ic,.btn,.cta-block.contact,.d-ring{animation:none!important}
}
/* single-column CTA */
.cta-grid.single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
/* homepage full-bleed CTA band: single column should span the full width */
.cta-sec .cta-grid.single{max-width:none;margin:0}

/* contact: chat-first hero card */
.chat-hero{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:var(--grad-hot);background-size:200% 200%;animation:hueShift 9s ease-in-out infinite;
  border-radius:28px;padding:clamp(2rem,5vw,3.4rem);color:#fff;
  box-shadow:0 34px 70px -34px rgba(0,127,204,.6);position:relative;overflow:hidden}
.chat-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.25),transparent 70%)}
.chat-hero-ic{width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.18);display:grid;place-items:center;backdrop-filter:blur(4px);flex:none}
.chat-hero-ic svg{width:48px;height:48px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-hero-body .en{font-family:var(--f-en);font-weight:700;letter-spacing:.18em;font-size:.76rem;opacity:.9}
.chat-hero-body h2{font-size:clamp(1.4rem,3.4vw,2.1rem);font-weight:900;margin:.5rem 0 1rem;line-height:1.5}
.chat-hero-body p{font-size:.92rem;line-height:1.9;opacity:.95}
.chat-hero-body .btn{margin-top:1.6rem;background:#fff!important;color:var(--blue)!important;animation:none}
.chat-hero-body .btn::after{display:none}
.chat-hero-body .chat-note{font-size:.74rem;opacity:.8;margin-top:1rem}
@media(max-width:680px){
  .chat-hero{grid-template-columns:1fr;text-align:center}
  .chat-hero-ic{margin:0 auto}
}

/* ============ VISION PAGE ============ */
.vision-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(135deg,#04122b 0%,#072a52 45%,#0a4d8c 100%);color:#fff;padding:var(--nav-h) 0 4rem}
.vision-hero .v-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.v-orbit{position:absolute;border-radius:50%;border:1px solid rgba(120,200,255,.18);animation:spinT 120s linear infinite}
.v-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(31,160,236,.55),transparent 70%);animation:floatGlow var(--gd,18s) ease-in-out infinite}
.v-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%)}
.vision-hero .wrap{position:relative;z-index:2;text-align:center}
.v-eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-en);font-weight:600;letter-spacing:.28em;
  font-size:.74rem;color:#7fd3e8;border:1px solid rgba(127,211,232,.4);padding:.6em 1.4em;border-radius:999px;
  opacity:0;animation:vUp .9s cubic-bezier(.22,.61,.36,1) .1s forwards}
.v-catch{font-weight:900;letter-spacing:.02em;line-height:1.3;margin:2rem 0 1.5rem;
  font-size:clamp(2.4rem,7vw,5.6rem)}
.v-catch .l{display:block;overflow:hidden}
.v-catch .l > span{display:inline-block;transform:translateY(110%);opacity:0;
  animation:vReveal .9s cubic-bezier(.22,.9,.3,1) forwards}
.v-catch .grad{background:linear-gradient(110deg,#7fd3e8,#1fa0ec 40%,#5ab8ff 70%,#a9e0ff);
  background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:vReveal .9s cubic-bezier(.22,.9,.3,1) forwards, hueShift 7s ease-in-out infinite}
.v-sub{max-width:40em;margin:0 auto;color:rgba(255,255,255,.82);font-size:clamp(.95rem,2vw,1.1rem);line-height:2.1;
  opacity:0;animation:vUp .9s cubic-bezier(.22,.61,.36,1) 1.1s forwards}
.v-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;font-family:var(--f-en);font-size:.6rem;letter-spacing:.3em;color:rgba(255,255,255,.6);writing-mode:vertical-rl}
.v-scroll::after{content:"";display:block;width:1px;height:46px;margin:10px auto 0;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:sd 1.8s infinite}
@keyframes vUp{to{opacity:1;transform:none}}
@keyframes vReveal{to{transform:none;opacity:1}}

/* statement band */
.v-statement{position:relative;padding:clamp(5rem,10vw,8rem) 0;text-align:center;overflow:hidden;background:#fff}
.v-statement .big{font-weight:900;font-size:clamp(1.6rem,4.4vw,3rem);line-height:1.7;letter-spacing:.04em;color:var(--ink)}
.v-statement .big .b{color:var(--blue);position:relative;white-space:nowrap}
.v-statement .lead{max-width:40em;margin:2rem auto 0;color:var(--ink-soft);line-height:2.1;font-size:.96rem}

/* value pillars */
.v-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.v-pillar{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:2.6rem 2rem;overflow:hidden;
  transition:transform .55s cubic-bezier(.34,1.4,.64,1),box-shadow .55s}
.v-pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad-hot);background-size:200% 200%;animation:hueShift 7s ease-in-out infinite}
.v-pillar:hover{transform:translateY(-12px);box-shadow:0 36px 70px -36px rgba(0,127,204,.5)}
.v-pillar .pn{font-family:var(--f-en);font-weight:800;font-size:3rem;line-height:1;color:var(--blue-soft)}
.v-pillar h3{font-size:1.2rem;font-weight:900;margin:1rem 0 .8rem;letter-spacing:.03em}
.v-pillar p{font-size:.86rem;color:var(--ink-soft);line-height:1.95}

/* big closing CTA band */
.v-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(5rem,10vw,8rem) 0;
  background:linear-gradient(135deg,#04122b,#0a4d8c);color:#fff}
.v-cta h2{font-weight:900;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.4;letter-spacing:.03em;margin-bottom:1.4rem}
.v-cta p{color:rgba(255,255,255,.82);max-width:36em;margin:0 auto 2.4rem;line-height:2}
.v-cta .btn{background:#fff!important;color:var(--blue)!important;animation:none}
.v-cta .btn::after{display:none}

@media(max-width:820px){ .v-pillars{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  .v-catch .l > span,.v-eyebrow,.v-sub,.v-orbit,.v-glow,.v-pillar::before,.v-catch .grad{animation:none!important;opacity:1!important;transform:none!important}
  .v-catch .grad{-webkit-text-fill-color:transparent}
}

/* homepage VISION banner */
.vision-banner{position:relative;overflow:hidden;padding:clamp(4.5rem,9vw,7rem) 0;text-align:center;
  background:linear-gradient(135deg,#04122b 0%,#08305c 50%,#0a4d8c 100%);color:#fff}
.vision-banner .vb-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vision-banner .wrap{position:relative;z-index:2}
.vision-banner h2{font-weight:900;font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.4;letter-spacing:.03em;margin:.8rem 0 1.2rem}
.vision-banner .grad-on-dark{background:linear-gradient(110deg,#7fd3e8,#5ab8ff 50%,#a9e0ff);
  background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:hueShift 7s ease-in-out infinite}
.vision-banner p{color:rgba(255,255,255,.82);line-height:2;margin-bottom:2rem}
.vision-banner .btn{background:#fff!important;color:var(--blue)!important;animation:none}
.vision-banner .btn::after{display:none}
@media(prefers-reduced-motion:reduce){.vision-banner .grad-on-dark{animation:none}}

/* feature page wide image band */
.feat-band{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 30px 64px -34px rgba(0,127,204,.5)}
.feat-band img{width:100%;height:100%;object-fit:cover}
.feat-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,43,.78),rgba(4,18,43,.15) 60%,transparent)}
.feat-band-cap{position:absolute;left:clamp(1.5rem,4vw,3.4rem);top:50%;transform:translateY(-50%);z-index:2;color:#fff}
.feat-band-cap .en{font-family:var(--f-en);font-weight:700;letter-spacing:.22em;font-size:.74rem;color:#7fd3e8}
.feat-band-cap p{font-size:clamp(1.1rem,2.6vw,1.8rem);font-weight:900;line-height:1.6;margin-top:.6rem}
@media(max-width:680px){.feat-band{aspect-ratio:3/2}}

/* ============ INTERVIEW PAGE ============ */
.iv-list{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,4.5rem)}
.iv-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;
  transition:transform .55s cubic-bezier(.34,1.4,.64,1),box-shadow .55s}
.iv-card:hover{transform:translateY(-10px);box-shadow:0 36px 70px -36px rgba(0,127,204,.45)}
.iv-card.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.iv-img{position:relative;min-height:300px;overflow:hidden}
.iv-card.flip .iv-img{order:2}
.iv-img img{width:100%;height:100%;object-fit:cover;transition:1.2s cubic-bezier(.22,.61,.36,1)}
.iv-card:hover .iv-img img{transform:scale(1.06)}
.iv-img .iv-cat{position:absolute;left:1.2rem;top:1.2rem;z-index:2;background:var(--blue);color:#fff;font-family:var(--f-en);font-weight:700;letter-spacing:.08em;font-size:.66rem;padding:.4em 1.1em;border-radius:999px}
.iv-body{padding:clamp(1.8rem,3.5vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.iv-meta{font-size:.78rem;color:var(--gray);margin-bottom:.8rem}
.iv-meta strong{color:var(--blue);font-weight:700}
.iv-body h3{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:900;line-height:1.55;letter-spacing:.02em;margin-bottom:1rem}
.iv-quote{position:relative;font-size:.9rem;color:var(--ink-soft);line-height:1.95;padding-left:1.2rem;border-left:3px solid var(--blue-soft);margin-bottom:1.4rem}
.iv-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.iv-tags span{font-size:.7rem;color:var(--blue-deep);border:1px solid var(--blue-soft);padding:.25em .9em;border-radius:999px}
/* Q&A block (optional richer layout) */
.iv-qa{display:flex;flex-direction:column;gap:1.6rem;max-width:46em;margin:0 auto}
.iv-q,.iv-a{display:grid;grid-template-columns:auto 1fr;gap:1rem}
.iv-q .badge,.iv-a .badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-en);font-weight:800;flex:none}
.iv-q .badge{background:var(--blue);color:#fff}
.iv-a .badge{background:var(--blue-pale);color:var(--blue)}
.iv-q p{font-weight:700;color:var(--ink);padding-top:.4rem}
.iv-a p{color:var(--ink-soft);line-height:2;padding-top:.4rem}
@media(max-width:760px){
  .iv-card,.iv-card.flip{grid-template-columns:1fr}
  .iv-card.flip .iv-img{order:0}
  .iv-img{min-height:220px;aspect-ratio:16/10}
}