/* =========================================================
   Skills Harmony — 案B2 "Midnight Meishi"
   案A's dark, video-led treatment carrying 案B's identity:
   the business card's navy, used as light on a black ground.
   Same markup as 案A / 案B — only this stylesheet differs.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* a navy-tinted black, so the ground and the card colour are related */
  --ink:#060A16;
  --ink-2:#0B1224;
  --ink-3:#0E1730;

  /* the business card navy, and the luminous version of it that can be
     read against black — navy itself disappears on a dark ground */
  --navy:#1C2B5E;
  --navy-solid:#16224A;
  --accent:#7B9BF0;
  --accent-2:#A9C0FF;

  --text:#EDF1FA;
  --muted:#8B96AE;
  --muted-2:#6E7995;

  --line:rgba(139,163,232,.16);
  --line-2:rgba(139,163,232,.32);

  --font:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --header-h:78px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.66;font-weight:400;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading,body.menu-open{overflow:hidden}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* =========================================================
   preloader
   ========================================================= */
.loader{position:fixed;inset:0;z-index:2000;background:var(--ink);display:grid;place-items:center;transition:transform 1s var(--ease) .15s}
.loader.is-done{transform:translateY(-101%)}
.loader__inner{width:min(420px,72vw);text-align:center}
.loader__mark{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-bottom:22px}
.loader__mark span{display:block;color:var(--accent)}
.loader__bar{height:3px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s linear}
.loader__num{margin-top:12px;font-size:12px;letter-spacing:.18em;color:var(--muted);font-variant-numeric:tabular-nums}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:1200;transition:width .1s linear}

/* =========================================================
   buttons
   ========================================================= */
.btn{
  --bg:transparent;--fg:var(--text);--bd:var(--line-2);
  --hbg:var(--text);--hfg:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .35s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hbg);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--hfg);border-color:transparent}
.btn:hover::before{transform:translateY(0)}
.btn--accent{--bg:var(--navy);--fg:#fff;--bd:var(--accent);--hbg:var(--accent);--hfg:var(--ink)}
.btn--ghost{--hbg:var(--text);--hfg:var(--ink)}
.btn--dark{--fg:var(--text);--bd:var(--line-2);--hbg:var(--accent);--hfg:var(--ink)}
.btn--sm{padding:11px 22px;font-size:13.5px}
.btn--block{width:100%;padding:18px 30px}

/* =========================================================
   header
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);
  display:flex;align-items:center;gap:22px;padding-inline:var(--pad);
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,height .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{height:64px;background:rgba(6,10,22,.78);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--accent)}
.header.is-hidden{transform:translateY(-100%)}

.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.025em;font-size:17px;flex:0 0 auto}
.brand__glyph{width:26px;height:26px;color:var(--accent);display:block}
.brand__glyph svg{width:100%;height:100%}
.brand__text{white-space:nowrap}
.count{font-variant-numeric:tabular-nums}

.nav{display:flex;gap:4px;margin-inline:auto}
.nav a{position:relative;padding:8px 15px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .3s;display:block}
.nav a span{position:relative;display:block}
.nav a span::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover span::after{transform:scaleX(1);transform-origin:left}

.header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* language switch — square, like the card */
.lang{display:flex;align-items:center;border:1px solid var(--line-2);overflow:hidden;flex:0 0 auto}
.lang a{padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);transition:background .3s,color .3s}
.lang a+a{border-left:1px solid var(--line-2)}
.lang a:hover{color:var(--text)}
.lang a[aria-current="true"]{background:var(--navy);color:#fff}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);position:relative}
.burger i{position:absolute;left:13px;width:18px;height:1.5px;background:var(--accent);transition:transform .4s var(--ease)}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:999;background:var(--ink-2);
  padding:calc(var(--header-h) + 40px) var(--pad) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__nav{display:flex;flex-direction:column;gap:0}
.menu__nav a{
  font-size:clamp(28px,7.4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.15;
  display:flex;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s;
}
.menu__nav a em{font-size:12px;font-weight:700;font-style:normal;color:var(--accent);letter-spacing:.1em}
.menu__nav a:hover{color:var(--accent)}
body.menu-open .menu__nav a{opacity:1;transform:none}
body.menu-open .menu__nav a:nth-child(1){transition-delay:.16s}
body.menu-open .menu__nav a:nth-child(2){transition-delay:.22s}
body.menu-open .menu__nav a:nth-child(3){transition-delay:.28s}
body.menu-open .menu__nav a:nth-child(4){transition-delay:.34s}
body.menu-open .menu__nav a:nth-child(5){transition-delay:.40s}
.menu__lang{font-size:15px;color:var(--muted);margin-bottom:18px}
.menu__lang a{font-weight:600;color:var(--accent)}
.menu__lang i{font-style:normal;color:var(--line-2);margin-inline:6px}
.menu__foot{color:var(--muted);font-size:13.5px;display:flex;gap:28px;flex-wrap:wrap;border-top:3px solid var(--navy);padding-top:20px}

/* =========================================================
   hero — full-bleed video, closed by the card's heavy rule
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--header-h) + 40px) var(--pad) 34px;overflow:hidden;
  border-bottom:4px solid var(--navy);
}
.hero__media{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 70% 10%,#16224A 0%,#060A16 72%)}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s var(--ease-io);
  transform:scale(1.06);animation:kb 24s ease-in-out infinite alternate;
}
.hero__video.is-active{opacity:1}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.14)}}
/* a navy wash rather than a neutral black one — the card colour, as light */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(6,10,22,.96) 2%,rgba(10,18,40,.42) 46%,rgba(6,10,22,.7) 100%),
    linear-gradient(to right,rgba(6,10,22,.82),rgba(22,34,74,.12) 64%);
}
.hero__body{position:relative;z-index:1;max-width:min(1000px,92%);padding-bottom:6vh}
.hero__title{font-size:clamp(44px,8.2vw,116px);line-height:.97;font-weight:700;letter-spacing:-.048em;margin:18px 0 26px}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__lead{max-width:620px;font-size:clamp(16px,1.35vw,19.5px);color:#C3CBDE;line-height:1.62}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow .dot{width:22px;height:2px;background:var(--accent);flex:0 0 auto}

.hero__bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:18px}
.hero__scroll{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__scroll i{display:block;width:1px;height:26px;background:linear-gradient(var(--accent),transparent);animation:scrollLine 1.8s var(--ease-io) infinite}
@keyframes scrollLine{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}}
.hero__dots{display:flex;gap:8px}
.hero__dots button{width:30px;height:3px;background:var(--line-2);transition:background .4s,width .4s var(--ease)}
.hero__dots button.is-active{background:var(--accent);width:52px}

/* =========================================================
   client logos
   ========================================================= */
.strip{background:var(--ink);border-bottom:1px solid var(--line);padding:40px 0 44px;overflow:hidden}
.strip__label{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
/* One continuous white band carrying every mark, rather than a tile per logo.
   The band gives the dark artwork (Amazon, Accenture, IT Business Today…) the
   light ground it needs, and reads as a single ruled strip across the page.
   The edge gradients are white too, so logos dissolve into the band instead of
   being cut off. */
.marquee{
  position:relative;overflow:hidden;
  background:#fff;
  border-block:1px solid rgba(255,255,255,.14);
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7%,120px);z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.marquee__track{display:flex;width:max-content;animation:slide 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center}
.marquee__set li{
  display:grid;place-items:center;
  padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,40px);
}
.marquee__set img{
  height:clamp(24px,2.4vw,32px);width:auto;max-width:none;object-fit:contain;
  opacity:.9;transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.marquee__set li:hover img{opacity:1;transform:scale(1.05)}
@keyframes slide{to{transform:translateX(-50%)}}
/* Each mark links to that company's site. The anchor must fill the cell so the
   whole logo is the target, and it must not pick up the page's link styling. */
.marquee__set a{display:block;line-height:0}
.marquee__set a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Per-logo sizing.

   Every mark is drawn at the same HEIGHT, so how big it looks depends on its
   aspect ratio and on how much of that height the letterforms actually fill.
   Chainstack is 6.5:1 with a tall x-height and ends up dominating the band,
   while a square mark like Xiaomi renders 32px wide next to it. The three
   tiers below even that out. The extra height is pulled back with a negative
   margin each time, so the band itself never grows. */

/* 1. Square marks and stacked lockups — the worst case at the shared height.
      Xiaomi is 1:1; Hotel101 is 0.7:1; BEE's "INCORPORATIONS" line vanishes. */
.marquee__set img[src*="hotel101"],
.marquee__set img[src*="bee.png"],
.marquee__set img[src*="xiaomi"]{
  height:clamp(42px,4vw,54px);
  margin-block:calc((clamp(24px,2.4vw,32px) - clamp(42px,4vw,54px)) / 2);
}

/* 2. Two-line lockup: the symbol sets the height, so the type beside it is
      roughly a third of it and becomes unreadable. */
.marquee__set img[src*="itbusinesstoday"]{
  height:clamp(38px,3.6vw,48px);
  margin-block:calc((clamp(24px,2.4vw,32px) - clamp(38px,3.6vw,48px)) / 2);
}

/* 3. Wordmarks with a small cap-height — legible, but thin beside Chainstack. */
.marquee__set img[src*="laipic"],
.marquee__set img[src*="laborsolutions"]{
  height:clamp(32px,3vw,40px);
  margin-block:calc((clamp(24px,2.4vw,32px) - clamp(32px,3vw,40px)) / 2);
}

/* =========================================================
   section shells — everything stays dark; the navy panel
   replaces 案A's light paper sections
   ========================================================= */
.section{padding:clamp(80px,10vw,150px) 0;position:relative;background:var(--ink)}
.section--paper{background:var(--ink-2);color:var(--text);border-block:1px solid var(--line)}
.section--ink{background:var(--ink)}

.shead{margin-bottom:clamp(44px,6vw,80px)}
.shead--split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.shead__tag{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.shead__tag .dot{width:22px;height:2px;background:var(--accent);flex:0 0 auto}
.shead__title{font-size:clamp(29px,4.5vw,60px);line-height:1.07;font-weight:700;letter-spacing:-.042em;max-width:16ch}
.shead--split .shead__title{max-width:14ch}
.shead__note{max-width:34ch;color:var(--muted);font-size:16px}

/* why / problems — hairline columns under a heavy navy rule */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:4px solid var(--navy)}
.prob{padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px) clamp(28px,3vw,44px) 0;border-right:1px solid var(--line);transition:background .45s var(--ease)}
.prob:last-child{border-right:0}
.prob:not(:first-child){padding-left:clamp(22px,2.4vw,36px)}
.prob:hover{background:rgba(123,155,240,.05)}
.prob__no{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:24px}
.prob h3{font-size:clamp(19px,1.85vw,25px);line-height:1.22;letter-spacing:-.03em;font-weight:700;margin-bottom:14px}
.prob p{color:var(--muted);font-size:15.5px;line-height:1.68}

/* =========================================================
   service cards — video runs by default, not only on hover
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.card{
  position:relative;border:1px solid var(--line);background:var(--ink-2);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.card:hover{border-color:var(--accent);transform:translateY(-6px)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);border-bottom:3px solid var(--navy)}
.card__media video{width:100%;height:100%;object-fit:cover;opacity:.78;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.card:hover .card__media video{opacity:1;transform:scale(1)}
.card__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,22,.72),rgba(6,10,22,.05) 62%);transition:opacity .6s var(--ease)}
.card:hover .card__veil{opacity:.45}
.card__body{position:relative;padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;flex:1}
.card__no{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.card__title{margin:16px 0 14px;font-size:clamp(21px,2vw,28px);line-height:1.14;letter-spacing:-.034em;font-weight:700}
.card__text{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px}
.card__list{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:9px}
.card__list li{position:relative;padding-left:20px;font-size:13.8px;color:var(--muted-2)}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--accent)}

/* =========================================================
   process
   ========================================================= */
.process__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:start}
.process__side{position:sticky;top:calc(var(--header-h) + 40px)}
.process__note{color:var(--muted);margin:22px 0 30px;max-width:38ch;font-size:16px}
.steps{position:relative;padding-left:clamp(26px,3vw,48px)}
.steps__rail{position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--line)}
.steps__rail i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent);transition:height .2s linear}
.step{padding:clamp(22px,2.6vw,38px) 0;border-bottom:1px solid var(--line)}
.step:last-of-type{border-bottom:0}
.step__no{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.step h3{font-size:clamp(22px,2.5vw,33px);letter-spacing:-.038em;font-weight:700;margin:10px 0 12px;line-height:1.12}
.step p{color:var(--muted);font-size:15.5px;max-width:52ch}

/* =========================================================
   stats — full-bleed video, navy wash, heavy rules
   ========================================================= */
.stats{position:relative;padding:clamp(84px,10vw,150px) 0;overflow:hidden;background:var(--ink-3);border-block:4px solid var(--navy)}
.stats__media{position:absolute;inset:0;z-index:0}
.stats__media video{width:100%;height:100%;object-fit:cover;opacity:.55}
.stats__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,22,.82),rgba(22,34,74,.72))}
.stats .wrap{position:relative;z-index:1}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px)}
.stats__grid li{border-top:2px solid var(--accent);padding-top:clamp(22px,2.4vw,32px)}

/* The figure itself. Deliberately oversized — this is the one place on the
   page where the numbers should carry the argument on their own.
   NOTE: the label rule below must stay scoped to `li > span`; a bare
   `.stats__grid span` also matches the counter inside <b> and shrinks it. */
.stats__grid b{
  display:flex;align-items:flex-start;gap:.04em;
  font-size:clamp(64px,10vw,148px);line-height:.86;font-weight:700;letter-spacing:-.06em;
  margin-bottom:clamp(16px,1.6vw,24px);font-variant-numeric:tabular-nums;color:#fff;
}
.stats__grid b .count{display:inline-block}
/* the "+" rides high and small, in the accent */
.stats__grid b i{
  font-style:normal;font-size:.34em;line-height:1;font-weight:700;
  color:var(--accent);letter-spacing:0;margin-top:.16em;
}
.stats__grid li > span{
  display:block;color:#B7C1D8;font-size:clamp(14.5px,1.05vw,16px);line-height:1.65;max-width:30ch;
}

/* =========================================================
   about
   ========================================================= */
.about__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,90px);align-items:start}
.about__lead p{color:var(--muted);font-size:16.5px;margin-top:20px;max-width:48ch}
.about__lead .shead__title{margin-bottom:8px}
/* ABOUT 内の小見出し（社名の由来）。段落と同じリズムで置きつつ、
   本文のミュート色ではなく白で立てる。 */
.about__sub{margin-top:34px;font-size:18.5px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.quote{background:var(--navy-solid);border-top:4px solid var(--accent);padding:clamp(28px,3.2vw,46px);position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;inset:auto -40% -60% auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(123,155,240,.22),transparent 66%)}
.quote blockquote{position:relative;font-size:clamp(20px,2.2vw,30px);line-height:1.34;letter-spacing:-.028em;font-weight:500}
.quote figcaption{position:relative;display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.quote__avatar{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;background:var(--accent);color:var(--ink);font-weight:800;font-size:14px;letter-spacing:-.02em}
.quote figcaption>span:first-child{display:block;font-size:13.5px;color:#A9B4CD;line-height:1.4}
.quote figcaption b{display:block;color:#fff;font-size:15.5px}
/* 代表者クレジット右端の LinkedIn リンク */
.quote__sns{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
.quote__ln{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .3s,border-color .3s,color .3s}
.quote__ln svg{width:17px;height:17px}
.quote__ln:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(50px,6vw,88px);border-top:4px solid var(--navy)}
.facts>div{padding:26px clamp(18px,2vw,28px) 26px 0;border-right:1px solid var(--line)}
.facts>div:last-child{border-right:0}
.facts>div:not(:first-child){padding-left:clamp(18px,2vw,28px)}
.facts dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.facts dd{font-size:15.5px;font-weight:500;line-height:1.5;color:var(--text)}

/* =========================================================
   team
   ========================================================= */
.team{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,80px);align-items:start;margin-top:clamp(56px,7vw,100px)}
.team__intro p:last-child{color:var(--muted);font-size:16px;max-width:34ch;margin-top:4px}
.team__list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.team__list li{padding-top:26px;border-top:2px solid var(--accent)}
.team__mono{
  display:grid;place-items:center;width:54px;height:54px;margin-bottom:20px;
  background:var(--navy);color:#fff;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
}
.team__list h3{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-bottom:4px;color:var(--text)}
.team__role{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.team__note{color:var(--muted);font-size:15px;line-height:1.7}
@media (max-width:1000px){.team{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){.team__list{grid-template-columns:1fr;gap:30px}}

/* =========================================================
   contact — full-bleed video behind the form
   ========================================================= */
.cta{position:relative;padding:clamp(84px,11vw,155px) 0;overflow:hidden;background:var(--ink);border-top:1px solid var(--line)}
.cta__media{position:absolute;inset:0;z-index:0}
.cta__media video{width:100%;height:100%;object-fit:cover;opacity:.62}
.cta__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,10,22,.95) 28%,rgba(22,34,74,.62))}
.cta .wrap{position:relative;z-index:1}
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(40px,6vw,88px);align-items:start}
.cta__title{font-size:clamp(36px,5.8vw,80px);line-height:.99;font-weight:700;letter-spacing:-.048em;margin-bottom:22px}
.cta__title em{font-style:normal;color:var(--accent)}
.cta__lead p{color:#B3BCD2;max-width:40ch}

.form{display:grid;gap:14px;background:rgba(11,18,36,.72);border:1px solid var(--line);border-top:4px solid var(--navy);padding:clamp(22px,2.6vw,34px);backdrop-filter:blur(12px)}
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:26px 15px 12px;border:1px solid var(--line);
  background:rgba(6,10,22,.55);color:var(--text);font:inherit;font-size:15.5px;resize:vertical;
  transition:border-color .3s,background .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(6,10,22,.78)}
.field label{position:absolute;left:16px;top:18px;font-size:15px;color:var(--muted-2);pointer-events:none;transition:transform .25s var(--ease),color .25s;transform-origin:left top}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.76);color:var(--accent)}
.field label i{color:var(--accent);font-style:normal}
.field.is-bad input,.field.is-bad textarea{border-color:#FF7A6B}
.form__note{font-size:13.5px;color:var(--muted);min-height:1.2em;margin-top:2px}
.form__note.is-ok{color:#7BE3A8}
.form__note.is-bad{color:#FF9A8C}

/* ---------- Contact Form 7 ----------
   CF7 does not produce the markup above. It renders its own <form> inside
   .form, wraps every control in a <span class="wpcf7-form-control-wrap">, and
   outputs the submit as an <input>. So three things have to be re-stated:
   the grid has to move onto CF7's form, the floating label has to see through
   the wrapper span, and the submit needs the filled look that .btn gives to a
   <button><span>. Without these the fields lose their spacing and the labels
   sit permanently on top of the text. */
.form > form.wpcf7-form{display:grid;gap:14px}
.form > form.wpcf7-form > p{margin:0;display:contents}
.form > form.wpcf7-form > br{display:none}
.field .wpcf7-form-control-wrap{display:block}
.field .wpcf7-form-control-wrap:focus-within + label,
.field .wpcf7-form-control-wrap:has(input:not(:placeholder-shown)) + label,
.field .wpcf7-form-control-wrap:has(textarea:not(:placeholder-shown)) + label{
  transform:translateY(-11px) scale(.76);color:var(--accent)
}
.form input.wpcf7-submit{
  width:100%;padding:18px 30px;border:1px solid transparent;border-radius:999px;
  background:var(--accent);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  letter-spacing:-.005em;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.form input.wpcf7-submit:hover{background:#fff;color:var(--accent)}
.wpcf7-not-valid-tip{color:#FF9A8C;font-size:13px;margin-top:6px}
.wpcf7-response-output{
  margin:2px 0 0 !important;padding:12px 14px !important;
  border-width:1px !important;font-size:13.5px;color:var(--text);
}
.wpcf7-spinner{display:block;margin:0 auto}

/* =========================================================
   footer — the one solid navy block
   ========================================================= */
.footer{background:var(--navy-solid);color:#B7C1D8;padding-top:clamp(56px,7vw,90px);border-top:4px solid var(--accent)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:56px}
.footer__mark{font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff}
/* フッターのSNSリンク（会社ページ）。横並びの行に置く */
.footer__sns-row{display:flex;gap:10px;margin-top:18px}
.footer__sns{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .3s,border-color .3s,color .3s}
.footer__sns svg{width:17px;height:17px}
.footer__sns:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.footer__brand p{color:#9AA6C0;margin-top:16px;font-size:15px}
.footer__nav{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer__nav h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);font-weight:700;margin-bottom:6px}
.footer__nav a{color:#9AA6C0;font-size:14.5px;transition:color .3s,transform .3s var(--ease)}
.footer__nav a:hover{color:#fff;transform:translateX(4px)}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-block:22px 26px;color:#8E9AB6;font-size:13px}
.footer__top:hover{color:#fff}

/* founder portrait — sits at the top of the quote card, bled to its edges */
.quote{padding-top:0}
.quote__portrait{
  position:relative;margin:0 calc(-1 * clamp(28px,3.2vw,46px)) clamp(26px,3vw,38px);
  aspect-ratio:4/3;overflow:hidden;background:var(--ink-3);
  border-bottom:4px solid var(--accent);
}
.quote__portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 15%;
  filter:saturate(.95) contrast(1.02);
}
.quote__portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,34,74,.55),transparent 55%);
}

/* =========================================================
   reveal animations
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.split-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split-word{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
[data-split].is-in .split-word{transform:none}

/* no-video mode (data saver / reduced motion) */
body.no-video .card__media video{opacity:1;transform:none}
body.no-video .hero__video{animation:none}

/* =========================================================
   Japanese typography
   ========================================================= */
html[lang="ja"] body{font-size:16px;line-height:1.9;letter-spacing:.01em;font-feature-settings:"palt" 1}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,
html[lang="ja"] .hero__title,html[lang="ja"] .shead__title,
html[lang="ja"] .card__title,html[lang="ja"] .cta__title{
  word-break:keep-all;line-break:strict;letter-spacing:-.03em;line-height:1.28;
}
html[lang="ja"] .hero__title{font-size:clamp(33px,6.2vw,84px);line-height:1.22}
/* CTAの見出しはフォームと列を分け合う。data-split は空白単位で包むため、
   空白のない日本語は1行が折り返せない1塊になる。最長行（10文字）が
   左カラム（約4.5vw×10文字）に収まるよう、日本語だけ文字を絞る。 */
html[lang="ja"] .cta__title{font-size:clamp(30px,4.2vw,56px);line-height:1.22}
html[lang="ja"] .hero__lead,html[lang="ja"] .shead__note,
html[lang="ja"] .prob p,html[lang="ja"] .card__text,
html[lang="ja"] .step p,html[lang="ja"] .about__lead p{line-height:1.92}
html[lang="ja"] .eyebrow,html[lang="ja"] .shead__tag,
html[lang="ja"] .facts dt,html[lang="ja"] .footer__nav h4{letter-spacing:.14em}
html[lang="ja"] .quote blockquote{line-height:1.62;letter-spacing:-.01em}
html[lang="ja"] .menu__nav a{font-size:clamp(24px,6vw,42px);line-height:1.4}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1080px){
  .probs{grid-template-columns:1fr 1fr}
  .prob{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .prob:not(:first-child){padding-left:0}
  .cards{grid-template-columns:1fr 1fr}
  /* three figures: let them reflow 3 -> 2 -> 1 instead of leaving an orphan */
  .stats__grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .facts>div:not(:first-child){padding-left:0}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .process__grid,.about__grid,.cta__grid{grid-template-columns:1fr}
  .process__side{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .probs,.cards,.facts,.footer__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr;gap:34px}
  .hero{min-height:94svh}
  .hero__cta .btn{flex:1 1 100%}
  .header__actions .btn--sm{display:none}
  .shead__title{max-width:none}
}

/* =========================================================
   motion & data preferences
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .split-word{transform:none}
  .hero__video{animation:none}
  .marquee__track{animation:none}
}