@charset "UTF-8";
/* =========================================================
   スリーピース合同会社 — Design System
   Concept: 経営・技術・人。価値は3つの「継ぎ目」に宿る。
   ========================================================= */

/* ---- Tokens ---- */
:root{
  --ink:#123650;        /* logo navy (primary) */
  --ink-deep:#0E2A3D;   /* darker navy anchor  */
  --paper:#FBFBF9;      /* warm off-white base */
  --mist:#EAEEF2;       /* cool light panel    */
  --line:#D9DFE6;       /* hairline            */
  --accent:#1F6FEB;     /* the "seam" — navy activated */
  --accent-soft:#E7F0FE;
  --muted:#57697A;      /* secondary text      */
  --white:#FFFFFF;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --radius:14px;

  --f-disp:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --f-body:"Noto Sans JP",system-ui,sans-serif;
  --f-lat:"Archivo","Zen Kaku Gothic New",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Archivo",ui-monospace,monospace;

  --step-eyebrow:.72rem;
  --step-lead:clamp(1rem,1.4vw,1.15rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,140px)}
.section--tight{padding-block:clamp(56px,7vw,96px)}

/* ---- Eyebrow (Latin utility label) — encodes the trinity ---- */
.eyebrow{
  font-family:var(--f-lat);
  font-size:var(--step-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.2rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;background:var(--accent);display:inline-block;
}
.eyebrow--ondark{color:#7FB0FF}
.eyebrow--ondark::before{background:#7FB0FF}

/* ---- Headings ---- */
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.35;margin:0;letter-spacing:.01em}
.h-sec{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:.02em}
.h-sec .accentword{color:var(--accent)}
.lead{font-size:var(--step-lead);color:var(--muted);max-width:44ch;margin:1.4rem 0 0}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,249,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-disp);font-weight:700}
.brand img{width:34px;height:auto}
.brand b{font-size:1.02rem;letter-spacing:.04em;color:var(--ink)}
.brand small{display:block;font-family:var(--f-lat);font-weight:600;font-size:.58rem;letter-spacing:.18em;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);list-style:none;margin:0;padding:0}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--ink);position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .28s ease}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.nav-links a.nav-cta{
  font-family:var(--f-body);font-weight:700;font-size:.88rem;
  background:var(--ink);color:var(--white);
  padding:11px 22px;border-radius:999px;transition:transform .2s ease,background .2s ease;
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{background:var(--accent);color:var(--white);transform:translateY(-1px)}
.nav-toggle{display:none;border:0;background:none;cursor:pointer;padding:8px;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}

/* =========================================================
   HERO — the thesis
   ========================================================= */
.hero{position:relative;padding-block:clamp(72px,11vw,150px);overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero-eyebrow{margin-bottom:1.6rem}
.hero h1{
  font-family:var(--f-disp);font-weight:900;
  font-size:clamp(2.15rem,6vw,4.4rem);
  line-height:1.28;letter-spacing:.01em;color:var(--ink);
}
.hero h1 .soft{color:var(--muted);font-weight:700}
.hero h1 .seam{color:var(--accent);position:relative;white-space:nowrap}
.hero p.hero-lead{
  font-size:clamp(1rem,1.7vw,1.24rem);color:var(--muted);
  max-width:52ch;margin:2rem 0 2.6rem;line-height:2;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn{
  font-family:var(--f-body);font-weight:700;font-size:.96rem;
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 30px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(4px)}

/* Hero signature: three tracks converging into one seam-node */
.hero-figure{
  margin-top:clamp(48px,7vw,88px);
  position:relative;
}
.trinity{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);overflow:hidden;
  position:relative;
}
.trinity-cell{
  padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,34px) clamp(46px,5vw,64px);
  position:relative;
}
.trinity-cell + .trinity-cell{border-left:1px solid var(--line)}
.trinity-cell .jp{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink)}
.trinity-cell .en{font-family:var(--f-lat);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.trinity-cell .desc{font-size:.9rem;color:var(--muted);margin-top:1rem;line-height:1.8}
/* the seam: a connective bar that ties the three into one */
.trinity::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--ink) 0 33.33%,var(--accent) 33.33% 66.66%,var(--ink) 66.66% 100%);
  opacity:.9;
}
.seam-note{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin-top:22px;font-size:.86rem;color:var(--muted);
}
.seam-note b{color:var(--accent);font-weight:700}
.seam-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}

/* faint brand mark watermark in hero */
.hero-mark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(46vw,560px);opacity:.05;z-index:1;pointer-events:none;
}

/* =========================================================
   PROBLEM / CONCEPT band
   ========================================================= */
.concept{background:var(--mist)}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.concept-copy p{color:var(--muted);font-size:1.02rem;line-height:2.05;margin:1.2rem 0 0}
.concept-copy strong{color:var(--ink);font-weight:700}
.concept-visual{
  aspect-ratio:1/1;max-width:420px;margin-inline:auto;width:100%;
  display:grid;place-items:center;position:relative;
}
.concept-visual img{width:76%;opacity:.92}
.concept-visual::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,var(--accent-soft),transparent 62%);
}

/* =========================================================
   SERVICES — 5 事業 under 3 pillars
   ========================================================= */
.pillar{margin-top:clamp(40px,5vw,64px)}
.pillar:first-of-type{margin-top:clamp(28px,3vw,40px)}
.pillar-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.pillar-head .num{font-family:var(--f-lat);font-weight:700;font-size:.8rem;color:var(--accent);letter-spacing:.12em}
.pillar-head .jp{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink)}
.pillar-head .en{font-family:var(--f-lat);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.svc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1px}
.svc{background:var(--white);padding:clamp(24px,3vw,34px);transition:background .25s ease}
.svc:hover{background:var(--accent-soft)}
.svc h4{font-size:1.08rem;color:var(--ink);margin-bottom:.8rem;display:flex;align-items:center;gap:.6em}
.svc h4 .tag{font-family:var(--f-lat);font-weight:600;font-size:.56rem;letter-spacing:.14em;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:2px 6px;text-transform:uppercase}
.svc p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.85}
.svc--cta{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.svc--cta:hover{background:var(--accent)}
.svc--cta h4{color:#fff}
.svc--cta p{color:#B9CBDD}
.svc--cta .go{margin-top:1rem;font-weight:700;font-size:.9rem;color:#fff;display:inline-flex;align-items:center;gap:.5em}
.svc--cta .go .arw{transition:transform .2s ease}
.svc--cta:hover .go .arw{transform:translateX(4px)}

/* =========================================================
   PROOF — numbers on a dark anchor band
   ========================================================= */
.proof{background:var(--ink-deep);color:#EAF1F8}
.proof .h-sec{color:#fff}
.proof .lead{color:#A9BED2}
.proof-note{font-size:.82rem;color:#7C95AC;margin-top:14px;max-width:60ch}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);margin-top:clamp(36px,5vw,56px);
  border-radius:var(--radius);overflow:hidden;
}
.stat{background:var(--ink-deep);padding:clamp(26px,3vw,40px)}
.stat .num{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.1rem,4vw,3rem);color:#fff;line-height:1.05;letter-spacing:.01em}
.stat .num .u{font-size:.5em;font-weight:700;color:#8FB6E6;margin-left:.15em}
.stat .lab{font-size:.9rem;color:#B9CBDD;margin-top:.7rem;font-weight:500}
.stat .sub{font-size:.78rem;color:#7C95AC;margin-top:.5rem;line-height:1.7}
.stat .num.accent{color:#6FA8FF}

/* =========================================================
   REPRESENTATIVE
   ========================================================= */
.rep-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:center}
.rep-photo{position:relative;max-width:420px}
.rep-photo img{border-radius:var(--radius);width:100%;box-shadow:0 24px 60px -30px rgba(18,54,80,.55)}
.rep-photo::before{
  content:"";position:absolute;left:-16px;top:-16px;width:70px;height:70px;
  border-top:3px solid var(--accent);border-left:3px solid var(--accent);border-radius:6px 0 0 0;
}
.rep-name{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin-top:.4rem}
.rep-name span{font-family:var(--f-lat);font-weight:600;font-size:.62em;color:var(--muted);letter-spacing:.06em;margin-left:.6em}
.rep-role{font-size:.9rem;color:var(--accent);font-weight:700;letter-spacing:.04em}
.rep-body p{color:var(--muted);line-height:2.05;margin:1.1rem 0 0;font-size:.98rem}
.rep-body strong{color:var(--ink)}
.rep-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.6rem}
.chip{font-size:.76rem;font-weight:500;color:var(--ink);background:var(--mist);border:1px solid var(--line);padding:6px 13px;border-radius:999px}

/* =========================================================
   CTA
   ========================================================= */
.cta{background:var(--ink);color:#fff;text-align:center}
.cta .h-sec{color:#fff;max-width:22ch;margin-inline:auto}
.cta p{color:#A9BED2;margin:1.4rem auto 2.4rem;max-width:46ch}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .btn-primary:hover{background:var(--accent);color:#fff}
.cta .mailline{margin-top:22px;font-family:var(--f-lat);font-weight:500;letter-spacing:.06em;color:#8FB6E6;font-size:.92rem}
.cta .mailline a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.foot-brand img{width:44px;margin-bottom:14px}
.foot-brand b{font-family:var(--f-disp);font-weight:900;font-size:1.1rem;display:block;color:var(--ink)}
.foot-brand small{font-family:var(--f-lat);font-weight:600;font-size:.6rem;letter-spacing:.16em;color:var(--muted)}
.foot-brand p{font-size:.82rem;color:var(--muted);margin:14px 0 0;line-height:1.9;max-width:34ch}
.foot-col h5{font-family:var(--f-lat);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:11px}
.foot-col a,.foot-col span{font-size:.88rem;color:var(--ink)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{max-width:var(--maxw);margin:clamp(36px,5vw,56px) auto 0;padding:22px var(--gutter) 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot-bottom small{font-size:.78rem;color:var(--muted)}

/* =========================================================
   Sub-page hero (services/profile/works/contact)
   ========================================================= */
.page-hero{background:var(--mist);padding-block:clamp(64px,8vw,110px)}
.page-hero h1{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.9rem,4.4vw,3rem);color:var(--ink);line-height:1.3}
.page-hero .lead{max-width:56ch}
.breadcrumb{font-family:var(--f-lat);font-size:.72rem;letter-spacing:.1em;color:var(--muted);margin-bottom:1.4rem;text-transform:uppercase}
.breadcrumb a:hover{color:var(--accent)}

/* Services detail page */
.svc-item{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,3vw,48px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.svc-item:first-of-type{border-top:0}
.svc-item .side .no{font-family:var(--f-lat);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.svc-item .side h3{font-size:clamp(1.15rem,2vw,1.45rem);color:var(--ink);margin:.5rem 0}
.svc-item .side .tag{display:inline-block;font-family:var(--f-lat);font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:3px 8px}
.svc-item .body p{margin:0;color:var(--muted);line-height:2.05;font-size:.98rem}
.svc-item .body .doing{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:8px}
.svc-item .body .doing span{font-size:.78rem;color:var(--ink);background:var(--mist);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
@media (max-width:720px){.svc-item{grid-template-columns:1fr;gap:14px}}

/* generic content prose (profile message etc.) */
.prose p{color:var(--muted);line-height:2.1;font-size:1rem;margin:0 0 1.2rem;max-width:64ch}
.prose strong{color:var(--ink)}
.prose h3{font-family:var(--f-disp);font-weight:700;font-size:1.2rem;color:var(--ink);margin:2rem 0 1rem}

/* CTA strip reused on sub-pages */
.cta-strip{background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(32px,5vw,56px);text-align:center;margin-top:clamp(48px,6vw,80px)}
.cta-strip h2{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;margin-bottom:1rem}
.cta-strip p{color:#A9BED2;max-width:44ch;margin:0 auto 2rem}
.cta-strip .btn-primary{background:#fff;color:var(--ink)}
.cta-strip .btn-primary:hover{background:var(--accent);color:#fff}
.info-table{width:100%;border-collapse:collapse;margin-top:8px}
.info-table th,.info-table td{text-align:left;padding:20px 4px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.info-table th{width:200px;font-weight:700;color:var(--ink);font-family:var(--f-disp)}
.info-table td{color:var(--muted)}

/* Works case cards (anonymized) */
.case{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.4vw,44px);background:var(--white);margin-top:24px;position:relative;overflow:hidden}
.case::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.case .ctx{font-family:var(--f-lat);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.case h3{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink);margin:.7rem 0 1.2rem}
.case-row{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.case-row .k{font-weight:700;color:var(--ink);font-size:.86rem}
.case-row .v{color:var(--muted);font-size:.94rem;line-height:1.9}
.case-metric{display:inline-block;font-family:var(--f-disp);font-weight:900;color:var(--accent);font-size:1.05em}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.field{margin-bottom:22px}
.field label{display:block;font-weight:700;font-size:.86rem;color:var(--ink);margin-bottom:8px}
.field label .req{color:var(--accent);font-size:.8em;margin-left:.4em}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;font-family:var(--f-body);font-size:.95rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:10px;transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:140px}
.contact-aside{background:var(--mist);border-radius:var(--radius);padding:clamp(28px,3.4vw,40px)}
.contact-aside h3{font-size:1.15rem;color:var(--ink);margin-bottom:1rem}
.contact-aside .maillink{font-family:var(--f-lat);font-weight:600;color:var(--accent);font-size:1.02rem;word-break:break-all}
.contact-aside dl{margin:1.4rem 0 0}
.contact-aside dt{font-family:var(--f-lat);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem}
.contact-aside dd{margin:.4rem 0 0;color:var(--ink);font-size:.92rem;line-height:1.8}
.form-note{font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.7}

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.nav-cta,.svc,.nav-links a::after{transition:none}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .concept-grid,.rep-grid,.contact-grid{grid-template-columns:1fr}
  .rep-photo{max-width:340px;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .info-table th{width:130px}
  .svc-row{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 0 20px;border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:transform .34s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 20px 40px -24px rgba(18,54,80,.4);
  }
  .nav-links.open{transform:none}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:15px 0;font-size:1rem}
  .nav-links a::after{display:none}
  .nav-links .nav-cta{display:inline-block;margin:12px auto 0}
  .nav-toggle{display:inline-flex}
  .trinity{grid-template-columns:1fr}
  .trinity-cell + .trinity-cell{border-left:0;border-top:1px solid var(--line)}
  .trinity::after{background:linear-gradient(180deg,var(--ink) 0 33.33%,var(--accent) 33.33% 66.66%,var(--ink) 66.66% 100%);width:4px;height:auto;top:0;left:auto;right:0;bottom:0}
  .foot-grid{grid-template-columns:1fr}
  .case-row{grid-template-columns:1fr}
  .case-row .k{color:var(--accent)}
  .svc-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

/* =========================================================
   v2 追加コンポーネント（2026トレンド反映）
   ========================================================= */

/* トップの事業カード：アウトカム重視の一言 */
.svc .gain{display:block;font-family:var(--f-disp);font-weight:700;font-size:1rem;color:var(--ink);margin:.2rem 0 .7rem;line-height:1.5}
.svc .gain .seam-mark{color:var(--accent)}

/* 提供メニュー（できること）リスト */
.menu-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.8rem}
@media (max-width:640px){.menu-list{grid-template-columns:1fr}}
.menu-list li{position:relative;padding-left:1.7em;color:var(--ink);font-size:.94rem;line-height:1.65}
.menu-list li::before{content:"";position:absolute;left:.15em;top:.42em;width:9px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* 活動バンド（登壇・執筆・メディア）*/
.authority-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:clamp(34px,4vw,52px)}
@media (max-width:820px){.authority-grid{grid-template-columns:1fr}}
.auth-col{border-top:2px solid var(--ink);padding-top:20px}
.auth-col .en{font-family:var(--f-lat);font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.auth-col h3{font-family:var(--f-disp);font-weight:900;font-size:1.15rem;color:var(--ink);margin:.35rem 0 1rem}
.auth-col ul{list-style:none;margin:0;padding:0}
.auth-col li{padding:.85rem 0;border-top:1px solid var(--line)}
.auth-col li:first-child{border-top:0}
.auth-col li b{display:block;font-weight:700;color:var(--ink);font-size:.96rem;line-height:1.55}
.auth-col li span{display:block;color:var(--muted);font-size:.82rem;margin-top:.3rem;line-height:1.65}

/* ビジョン（成長の方向を大きく提示）*/
.vision{position:relative;overflow:hidden}
.vision .wrap{position:relative;z-index:2}
.vision .big{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.6rem,4.2vw,3rem);line-height:1.55;color:var(--ink);letter-spacing:.01em;max-width:24ch}
.vision .big em{color:var(--accent);font-style:normal}
.vision p{color:var(--muted);max-width:54ch;margin-top:1.8rem;line-height:2.05;font-size:1.02rem}
.vision .grow-seam{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(46%,520px);height:2px;
  background:linear-gradient(90deg,transparent,var(--accent));opacity:.5}
.vision .grow-seam::after{content:"";position:absolute;right:0;top:-4px;width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}

/* =========================================================
   ダークモード（prefers-color-scheme: dark）
   技術評価者にも洗練を伝えるためのブランドシグナル
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E9EFF5;        /* 文字（明） */
    --ink-deep:#0F2A3E;
    --paper:#0C1922;      /* 背景（暗） */
    --mist:#122431;       /* 明るいパネル → 暗い持ち上げ面 */
    --line:#283C4C;
    --accent:#4F90F7;
    --accent-soft:#16324D;
    --muted:#9EB3C5;
    --white:#152735;      /* カード面 */
    --brand:#123650;      /* 暗色セクション背景に固定使用 */
  }
  .site-header{background:rgba(12,25,34,.85)}
  .nav-links a.nav-cta{background:var(--accent);color:#fff}
  .btn-primary{background:var(--accent);color:#fff}
  .svc--cta,.cta,.cta-strip{background:var(--brand)}
  .cta .btn-primary,.cta-strip .btn-primary{background:#fff;color:var(--brand)}
  .cta .btn-primary:hover,.cta-strip .btn-primary:hover{background:var(--accent);color:#fff}
  .pillar-head{border-bottom-color:var(--accent)}
  .auth-col{border-top-color:var(--accent)}
  input,textarea,select{color:var(--ink)}
  .rep-photo img{box-shadow:0 24px 60px -30px rgba(0,0,0,.75)}
}

/* =========================================================
   v3  AI/DX・戦略先進サイトのトレンド反映
   （aurora / FIGラベル / bento / kinetic / mono labels）
   ========================================================= */

/* --- 等幅フォントによる技術的ラベル --- */
.eyebrow{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em}
.trinity-cell .en,.pillar-head .en,.pillar-head .num,.auth-col .en,.brand small,.contact-aside dt,.breadcrumb,.svc--cta .go,.hero-eyebrow{font-family:var(--f-mono)}

/* --- FIG. 技術仕様書ラベル --- */
.fig{display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-mono);font-weight:500;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fig::before{content:"";width:24px;height:1px;background:var(--accent)}

/* --- HERO: aurora（動くソフトグラデ・軽量CSSのみ）--- */
.hero::before{content:"";position:absolute;inset:-25% -12% auto -12%;height:130%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 16% 22%, rgba(31,111,235,.18), transparent 70%),
    radial-gradient(40% 52% at 84% 10%, rgba(31,111,235,.12), transparent 72%),
    radial-gradient(46% 46% at 62% 82%, rgba(18,54,80,.10), transparent 72%);
  filter:blur(8px);animation:aurora 20s ease-in-out infinite alternate}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,2%,0) scale(1.07)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* --- HERO: キネティック・タイポ（語のローテーション）--- */
.hero-kinetic{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.05rem,2vw,1.45rem);
  color:var(--ink);margin:.2rem 0 1.6rem;letter-spacing:.02em}
.kx-rot{color:var(--accent);display:inline-block;min-width:7.5em;text-align:left}
.kx-rot.swap{animation:kxswap .5s cubic-bezier(.2,.7,.2,1)}
@keyframes kxswap{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kx-rot.swap{animation:none}}

/* --- SERVICES: bento grid 2.0 --- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,5vw,56px)}
.bento-tile{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,32px);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;text-decoration:none}
.bento-tile:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 22px 44px -30px rgba(18,54,80,.55)}
.bento-lead{background:var(--ink);border-color:transparent;display:flex;flex-direction:column;justify-content:space-between}
.bento-lead h3{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.4rem,2.3vw,1.95rem);color:#fff;margin:1.1rem 0 .7rem;line-height:1.42}
.bento-lead p{color:#A9BED2;font-size:.9rem;line-height:1.8;margin:0}
.bento-lead .go{margin-top:1.5rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:#fff}
.bento-lead .fig{color:#8FB6FF}
.bento-lead .fig::before{background:#8FB6FF}
.bento-tile .bt-tag{display:inline-block;font-family:var(--f-mono);font-weight:500;font-size:.58rem;letter-spacing:.1em;
  color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:2px 8px}
.bento-tile h4{font-family:var(--f-disp);font-weight:700;font-size:1.14rem;color:var(--ink);margin:.7rem 0 .45rem}
.bento-tile .bt-gain{font-family:var(--f-disp);font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.5;margin:0 0 .5rem}
.bento-tile p{color:var(--muted);font-size:.88rem;line-height:1.75;margin:0}
@media (max-width:820px){.bento{grid-template-columns:repeat(2,1fr)}.bento-lead{grid-column:1 / -1}}
@media (max-width:520px){.bento{grid-template-columns:1fr}}

/* --- dark refinements --- */
@media (prefers-color-scheme: dark){
  .bento-lead{background:var(--brand)}
  .hero::before{background:
    radial-gradient(42% 55% at 16% 22%, rgba(79,144,247,.22), transparent 70%),
    radial-gradient(40% 52% at 84% 10%, rgba(79,144,247,.14), transparent 72%),
    radial-gradient(46% 46% at 62% 82%, rgba(79,144,247,.10), transparent 72%)}
}

/* =========================================================
   v4  インタラクティブ・トリニティ図（SVG）
   経営・技術・人 → 継ぎ目 → 推進力
   ========================================================= */
.tfig{margin-top:8px;max-width:560px}
.tfig-svg{width:100%;height:auto;display:block;overflow:visible}

/* 継ぎ目（線）*/
.tfig-seams .seam{stroke:var(--line);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke .3s ease,stroke-width .3s ease}
.tfig.drawn .seam{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease,stroke .3s ease,stroke-width .3s ease}
.tfig-seams .seam.is-active{stroke:var(--accent);stroke-width:5}
.tfig-tri{fill:none;stroke:var(--line);stroke-width:1.5;opacity:.45}

/* ハブ（推進力）*/
.hub-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.5;
  transform-box:fill-box;transform-origin:center;animation:hubpulse 3.2s ease-in-out infinite}
.hub-core{fill:var(--ink)}
.hub-label{font-family:var(--f-disp);font-weight:900;font-size:15px;fill:#fff;text-anchor:middle;dominant-baseline:middle}
.hub-en{font-family:var(--f-mono);font-weight:500;font-size:7px;letter-spacing:.18em;fill:#8FB6FF;text-anchor:middle;dominant-baseline:middle}
@keyframes hubpulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:.12}}

/* ノード */
.tnode{cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.tfig.drawn .tnode{opacity:1;transform:none}
.tnode circle{fill:var(--white);stroke:var(--line);stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.tnode:hover circle{stroke:var(--accent)}
.tnode:focus-visible{outline:none}
.tnode:focus-visible circle{stroke:var(--accent);stroke-width:3}
.tnode.is-active circle{fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}
.tn-jp{font-family:var(--f-disp);font-weight:900;font-size:27px;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.tn-en{font-family:var(--f-mono);font-weight:500;font-size:8.5px;letter-spacing:.12em;fill:var(--muted);text-anchor:middle;dominant-baseline:middle}
.tnode.is-active .tn-en{fill:var(--accent)}

/* 説明キャプション（高さ固定でガタつき防止）*/
.tfig-caption{margin-top:20px;font-size:.94rem;color:var(--muted);line-height:1.85;min-height:3.6em;max-width:46ch}
.tfig-caption b{color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .hub-ring{animation:none}
  .tfig .seam{stroke-dashoffset:0}
  .tnode{opacity:1;transform:none}
  .tfig.drawn .seam{transition:stroke .3s ease,stroke-width .3s ease}
}

/* dark：ハブ核を固定ネイビーに（--inkは暗所で明色になるため）*/
@media (prefers-color-scheme: dark){
  .hub-core{fill:var(--brand)}
}

/* =========================================================
   v5  デスクトップ可読性の改善（日本語の行長と改行）
   ・ch単位は半角「0」基準のため、日本語では意図の約半分の文字数で
     折り返してしまう（行が短く不自然）。em（全角≒1em）へ変更。
   ・レスポンシブは不変（モバイルは画面幅が制約になるため影響なし）。
   ========================================================= */

/* 日本語向けの折り返し規則 */
body{ line-break:strict; overflow-wrap:break-word; }
h1,h2,h3,h4,.h-sec,.hero h1,.vision .big,.page-hero h1,.bento-lead h3{ text-wrap:balance; }
p,.lead,.hero p.hero-lead,.tfig-caption{ text-wrap:pretty; }

/* 読みやすい行長（measure）＝ 日本語で約34〜42文字/行 */
.lead{ max-width:40em; }
.hero p.hero-lead{ max-width:42em; }
.page-hero .lead{ max-width:42em; }
.prose p{ max-width:40em; }
.vision .big{ max-width:20em; }
.vision p{ max-width:40em; }
.cta .h-sec{ max-width:18em; }
.cta p{ max-width:34em; }
.cta-strip p{ max-width:34em; }
.foot-brand p{ max-width:26em; }
.proof-note{ max-width:40em; }
.tfig-caption{ max-width:34em; }
.concept-copy p{ max-width:40em; }

/* 自然な文節での改行（対応ブラウザのみ適用・非対応は自動で無視）*/
.lead,.hero p.hero-lead,.vision p,.prose p,.concept-copy p,.svc-item .body p{ word-break:auto-phrase; }