/* ============================================================
   MEDIAVOLT — Quiet Voltage / Editorial
   生成り × 墨 × 放電の青
   ============================================================ */
:root{
  --paper:#F6F4EF;
  --surface:#FFFFFF;
  --mist:#E3DFD5;
  --hair:#D8D3C6;
  --ink:#232529;
  --sub:#77797E;
  --volt:#0B7A55;
  --volt-l:#3EA47C;
  --signal:#B3382E;
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --font-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --font-en:"Roboto Condensed","Avenir Next Condensed",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0; padding:0; box-sizing:border-box}
html{background:#F6F4EF}
html{scroll-padding-top:90px}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-jp); font-size:15px; line-height:2.0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--volt); outline-offset:3px; border-radius:4px}
::selection{background:var(--volt); color:var(--paper)}

.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,56px)}
small.gl{font-size:.72em; font-weight:400; color:var(--sub); letter-spacing:0}
.note{font-size:12px; color:var(--sub); line-height:1.8}
.volt{color:var(--volt)}

/* ---------- header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--hair);
}
.head-in{
  max-width:1240px; margin:0 auto; padding:20px clamp(20px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--font-head); font-weight:900; font-size:21px;
  letter-spacing:-.04em; text-transform:lowercase; color:var(--ink);
}
.logo-o{color:var(--volt)}
.on-dark .logo{color:#FFFFFF}
.wm{font-family:var(--font-head); font-weight:900; letter-spacing:-.02em; text-transform:lowercase}
.nav{display:flex; gap:28px; align-items:center; font-size:13px; color:var(--sub)}
.nav a:not(.nav-cta):hover{color:var(--ink)}
.nav-cta{
  background:var(--ink); color:var(--paper) !important; border-radius:99px;
  padding:9px 20px; font-weight:600; font-size:12.5px; letter-spacing:.04em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(35,37,41,.5)}
@media (max-width:840px){ .nav a:not(.nav-cta){display:none} }

/* ---------- mobile menu ---------- */
.menu-btn{
  display:none; width:44px; height:44px; margin-left:6px;
  border:none; background:none; cursor:pointer; position:relative; z-index:70; padding:0;
}
.menu-btn i{
  position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .35s var(--ease), top .35s var(--ease), background .35s;
}
.menu-btn i:nth-child(1){top:18px}
.menu-btn i:nth-child(2){top:26px}
body.menu-open .menu-btn i{background:#F6F4EF}
body.menu-open .menu-btn i:nth-child(1){top:22px; transform:rotate(45deg)}
body.menu-open .menu-btn i:nth-child(2){top:22px; transform:rotate(-45deg)}
@media (max-width:840px){ .menu-btn{display:block} }

.m-nav-overlay{
  position:fixed; inset:0; z-index:60; background:var(--ink);
  display:flex; align-items:center; padding:0 30px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
body.menu-open .m-nav-overlay{opacity:1; pointer-events:auto}
body.menu-open{overflow:hidden}
.m-nav-overlay nav{display:flex; flex-direction:column; width:100%; max-width:420px; margin:0 auto}
.m-nav-overlay a{
  font-family:var(--font-head); font-weight:900; font-size:26px; line-height:1.4;
  color:#F6F4EF; padding:16px 0; border-bottom:1px solid #3A3D44;
  display:flex; align-items:baseline; gap:16px;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.m-nav-overlay a:last-child{border-bottom:none}
body.menu-open .m-nav-overlay a{opacity:1; transform:none}
.m-nav-overlay a:nth-child(1){transition-delay:.06s}
.m-nav-overlay a:nth-child(2){transition-delay:.11s}
.m-nav-overlay a:nth-child(3){transition-delay:.16s}
.m-nav-overlay a:nth-child(4){transition-delay:.21s}
.m-nav-overlay a:nth-child(5){transition-delay:.26s}
.m-nav-overlay a:nth-child(6){transition-delay:.31s}
.m-nav-overlay a:nth-child(7){transition-delay:.36s}
.m-nav-overlay .mn-no{
  font-family:var(--font-en); font-size:12px; font-weight:600;
  color:#3EA47C; letter-spacing:.1em; min-width:26px;
}

/* ---------- KV ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding:120px 0 90px;
}
.hero-meta{
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--font-en); font-size:11.5px; letter-spacing:.16em;
  color:var(--sub); text-transform:uppercase;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:12px 2px; margin-bottom:clamp(36px,6vh,72px);
}
@media (max-width:720px){ .hm-mid{display:none} }
.kv{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(40px,7vw,110px); line-height:1.16; letter-spacing:.005em;
  text-wrap:balance;
}
.kv-dot{color:var(--volt)}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
  margin-top:clamp(36px,6vh,64px);
}
.hero-sub{font-size:15px; color:var(--ink); line-height:2.1; max-width:560px}
.hero-sub small.gl{display:block; margin-top:6px}
.hero-cta{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.tlink{
  font-size:13.5px; font-weight:600; border-bottom:1px solid var(--ink);
  padding-bottom:3px; transition:color .3s, border-color .3s;
}
.tlink:hover{color:var(--volt); border-color:var(--volt)}
.scroll-hint{
  position:absolute; right:clamp(20px,4vw,56px); bottom:28px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; color:var(--sub);
}
.scroll-hint i{display:block; width:44px; height:1px; background:var(--sub); transform-origin:right}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:99px; padding:16px 34px;
  font-size:14px; font-weight:700; letter-spacing:.04em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--ink); color:var(--paper)}
.btn.primary:hover{box-shadow:0 12px 26px -14px rgba(35,37,41,.55)}
.btn.primary .arw{color:var(--volt-l)}
.btn.ghost{border:1.5px solid var(--ink)}
.btn .arw{font-family:var(--font-en); color:var(--volt); display:inline-block; transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* ---------- marquee ---------- */
.mq{
  background:var(--ink); color:var(--paper);
  overflow:hidden; padding:18px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.mq-track{display:flex; width:max-content; will-change:transform}
.mq-set{display:flex; align-items:center; white-space:nowrap}
.mq-set span{
  font-family:var(--font-en); font-size:14px; font-weight:400; letter-spacing:.14em;
  padding:0 18px;
}
.mq-set b{color:var(--volt-l); font-weight:600}
.mq-set i{color:var(--volt-l); font-style:normal; font-size:11px}

/* ---------- mission 76 → 0 ---------- */
.mission{text-align:center}
.mission .label{margin-bottom:26px}
.mi-cap{font-size:13px; color:var(--sub); margin-bottom:6px}
.mi-num{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(110px,19vw,260px); line-height:1;
  color:var(--sub); font-variant-numeric:tabular-nums;
  transition:color .6s var(--ease);
}
.mi-num small{font-size:.4em; font-weight:600}
#sign.done .mi-num{color:var(--volt)}
.mi-bar{max-width:520px; height:3px; background:var(--hair); margin:36px auto 46px; overflow:hidden; border-radius:2px}
.mi-bar i{display:block; height:100%; background:var(--sub); transform-origin:left; transform:scaleX(.76); transition:background .6s}
#sign.done .mi-bar i{background:var(--volt)}
.mi-st{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(22px,3.2vw,36px); line-height:1.7; letter-spacing:.02em;
}
.mi-st .kv-dot{color:var(--volt)}

/* ---------- pictograms ---------- */
.pict{width:50px; height:50px; color:var(--ink); display:block}
.pict .ac{color:var(--volt)}
.fs .pict, .card .pict{margin-bottom:14px}

/* flowにアイコンを載せる場合の微調整 */
.fs h3{font-family:var(--font-head); font-size:15.5px; font-weight:700; margin-bottom:6px}
.fs .fs-tag{
  display:inline-block; font-family:var(--font-en); font-size:10px; font-weight:600;
  letter-spacing:.14em; color:var(--paper); background:var(--volt);
  border-radius:2px; padding:2px 8px; margin-bottom:10px; text-transform:uppercase;
}

/* ---------- 相関図(サービス全体像) ---------- */
.ovmap{border:1px solid var(--hair); background:var(--surface); border-radius:2px; padding:clamp(28px,4.5vw,52px)}
.ov-in{max-width:660px; margin:0 auto}
.ov-row{display:grid; grid-template-columns:1fr 130px 1fr; align-items:center}
.ov-box{
  border:1.5px solid var(--ink); border-radius:2px; background:var(--paper);
  padding:18px 12px; text-align:center;
  font-family:var(--font-head); font-size:15px; font-weight:700; line-height:1.6;
}
.ov-box small{display:block; font-family:var(--font-jp); font-size:11px; font-weight:400; color:var(--sub); margin-top:4px}
.ov-link{text-align:center; font-size:11px; font-weight:700; color:var(--volt); line-height:1.6}
.ov-link .lr{font-family:var(--font-en); font-size:16px; display:block}
.ov-down{text-align:center; color:var(--volt); font-family:var(--font-en); font-size:18px; margin:12px 0}
.ov-down small{display:block; font-family:var(--font-jp); font-size:11px; color:var(--sub)}
.ov-office{border:1.5px solid var(--volt); border-radius:2px; padding:22px 18px; text-align:center}
.ov-office h4{font-family:var(--font-head); font-size:16px; font-weight:700}
.ov-office .of-d{font-size:12px; color:var(--sub); margin-top:4px}
.ov-sup{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.ov-tag{
  font-size:11.5px; font-weight:600; border:1px solid var(--hair); border-radius:99px;
  padding:6px 14px; background:var(--paper);
}
.ov-note{text-align:center; font-size:11.5px; color:var(--sub); margin-top:16px}
@media (max-width:640px){
  .ov-row{grid-template-columns:1fr; gap:6px}
  .ov-link .lr{transform:rotate(90deg)}
}

/* ---------- ピクトグラムのミニカード(業務例など) ---------- */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:860px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
.pcell{border:1px solid var(--hair); border-radius:2px; background:var(--surface); padding:24px 20px}
.pcell h4{font-family:var(--font-head); font-size:14px; font-weight:700; margin:12px 0 6px}
.pcell p{font-size:12px; color:var(--sub); line-height:1.9}
@media (max-width:860px){
  .pcell{text-align:center}
  .pcell .pict{margin-left:auto; margin-right:auto}
}
@media (max-width:760px){
  .grid3 .card:has(.pict){text-align:center}
  .grid3 .card .pict{margin-left:auto; margin-right:auto}
}

/* 小見出し */
.sub-h{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-head); font-size:18px; font-weight:700;
  margin:76px 0 26px;
}
.sub-h::before{content:""; width:22px; height:2px; background:var(--volt); flex-shrink:0}

/* ---------- signature 76/92 ---------- */
.signx{padding:clamp(90px,14vh,160px) 0; overflow:hidden}
.sx-row{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.sx-row.muted .sx-num{color:var(--sub)}
.sx-num{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(110px,21vw,300px); line-height:1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.sx-num small{font-size:.38em; font-weight:600}
.sx-num small.volt{color:var(--volt)}
.sx-cap{font-size:12.5px; color:var(--sub); line-height:1.9; text-align:center}
.sx-cap strong{color:var(--ink); font-weight:700}
.sx-rule{height:1px; background:var(--hair); margin:clamp(28px,5vh,52px) auto; max-width:520px}

/* ---------- editorial grid ---------- */
.sec{padding:clamp(90px,13vh,150px) 0}
.line-top{border-top:1px solid var(--hair)}
.ed-grid{display:grid; grid-template-columns:220px 1fr; gap:40px}
@media (max-width:860px){ .ed-grid{grid-template-columns:1fr; gap:24px} }
.ed-index{
  display:flex; align-items:baseline; gap:14px; align-self:start;
  position:sticky; top:110px;
  font-family:var(--font-en); text-transform:uppercase;
}
@media (max-width:860px){ .ed-index{position:static} }
.idx{font-size:13px; font-weight:600; color:var(--volt); letter-spacing:.1em}
.idx-t{font-size:11.5px; letter-spacing:.22em; color:var(--sub)}
.st{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(30px,4.6vw,58px); line-height:1.3; letter-spacing:.01em;
  margin-bottom:clamp(40px,6vh,64px); text-wrap:balance;
}
.st.big{font-size:clamp(34px,6vw,80px); line-height:1.25}
.body{font-size:15px; color:var(--sub); margin-bottom:40px; line-height:2.2}

/* choice */
.choice{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair)}
@media (max-width:760px){ .choice{grid-template-columns:1fr} }
.opt{
  padding:34px 28px 40px 0; border-right:1px solid var(--hair); padding-left:28px;
}
.opt:first-child{padding-left:0}
.opt:last-child{border-right:none}
@media (max-width:760px){
  .opt{border-right:none; border-bottom:1px solid var(--hair); padding-left:0}
  .opt:last-child{border-bottom:none}
}
.opt-no{
  font-family:var(--font-en); font-size:13px; font-weight:600; letter-spacing:.1em;
  color:var(--sub); margin-bottom:18px;
}
.opt-no.volt{color:var(--volt)}
.opt h3{font-family:var(--font-head); font-size:17px; font-weight:700; margin-bottom:14px}
.opt ul{list-style:none}
.opt li{font-size:13px; color:var(--sub); padding:8px 0; line-height:1.9}
.opt.hl h3{position:relative; display:inline-block}
.opt.hl h3::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--volt);
}
.opt.hl li{color:var(--ink)}

/* how rows */
.rows{border-top:1px solid var(--hair)}
.row{
  display:grid; grid-template-columns:80px 300px 1fr; gap:24px; align-items:baseline;
  padding:34px 0; border-bottom:1px solid var(--hair);
}
@media (max-width:860px){ .row{grid-template-columns:56px 1fr} .row p{grid-column:2} }
.row-no{font-family:var(--font-en); font-size:13px; font-weight:600; color:var(--volt); letter-spacing:.1em}
.row h3{font-family:var(--font-head); font-size:18px; font-weight:700}
.row p{font-size:13.5px; color:var(--sub); line-height:2.0}

/* proof (dark) */
.proof{background:var(--ink); color:var(--paper); padding:clamp(90px,13vh,150px) 0}
.proof-label{
  font-family:var(--font-en); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--volt-l); margin-bottom:clamp(40px,6vh,64px);
}
.proof-row{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
@media (max-width:760px){ .proof{display:none} }
.proof .n{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(72px,8.5vw,130px); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.proof .n small{font-size:.4em; font-weight:600}
.proof .n small.volt{color:var(--volt-l)}
.proof .t{
  font-size:12.5px; color:#A9ABB0; margin-top:14px; line-height:1.8;
  padding-top:14px; border-top:1px solid #3A3D44;
}
.proof-row2{grid-template-columns:1fr 1.6fr; align-items:end}
@media (max-width:760px){ .proof-row2{grid-template-columns:1fr} }
.clients .cl-k{
  font-family:var(--font-en); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#A9ABB0; margin-bottom:26px;
}
.clients .cl-k small{font-size:10px; letter-spacing:.12em}
.cl-logos{
  display:flex; align-items:center; gap:clamp(28px,4vw,56px); flex-wrap:wrap;
  padding-top:14px; border-top:1px solid #3A3D44;
}
.cl-logos img{
  height:24px; width:auto; display:block;
  filter:brightness(0) invert(1); opacity:.82;
}
.cl-logos img[alt*="エスプール"]{height:28px}
.cl-logos img[alt*="アクティアス"]{filter:grayscale(1) brightness(1.45); opacity:.95}

/* faq */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:28px 56px 28px 0;
  font-family:var(--font-head); font-size:clamp(16px,1.8vw,19px); font-weight:700;
  display:flex; align-items:baseline; gap:22px;
  transition:color .3s;
}
.faq summary:hover{color:var(--volt)}
.faq summary::-webkit-details-marker{display:none}
.q-no{font-family:var(--font-en); font-size:13px; font-weight:600; color:var(--volt); letter-spacing:.08em; flex-shrink:0}
.faq .pm{position:absolute; right:8px; top:50%; width:16px; height:16px; transform:translateY(-50%)}
.faq .pm::before,.faq .pm::after{
  content:""; position:absolute; background:var(--volt); border-radius:2px;
  transition:transform .35s var(--ease);
}
.faq .pm::before{left:0; top:7px; width:16px; height:2px}
.faq .pm::after{left:7px; top:0; width:2px; height:16px}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq details p{padding:0 0 30px 50px; font-size:14px; color:var(--sub); max-width:44em}
@media (max-width:640px){ .faq details p{padding-left:0} }

/* final cta */
.final{padding:clamp(100px,15vh,170px) 0}
.fin-count{
  font-family:var(--font-en); font-size:13px; letter-spacing:.18em;
  color:var(--sub); text-transform:uppercase; margin-bottom:26px;
}
.fin-count b{
  font-family:var(--font-en); font-size:26px; font-weight:600;
  color:var(--signal); font-variant-numeric:tabular-nums; margin:0 4px;
}
.odo{display:inline-flex; overflow:hidden; height:1.06em; line-height:1.06; vertical-align:-.12em}
.odo .col{display:block}
.odo .col i{display:block; height:1.06em; font-style:normal}

.cta-list{border-top:1px solid var(--hair); margin-top:clamp(20px,3vh,30px)}
button.cta-row{
  width:100%; background:none; border:none; font-family:var(--font-jp);
  color:inherit; cursor:pointer; text-align:left;
}
button.tlink{background:none; border:none; border-bottom:1px solid var(--ink); cursor:pointer; font-family:var(--font-jp); color:inherit}
.btn{border:none; cursor:pointer; font-family:var(--font-jp); background:none}
.cta-row{
  display:grid; grid-template-columns:70px 1fr auto 60px; gap:20px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--hair);
  transition:padding .35s var(--ease);
}
.cta-row:hover{padding-left:14px}
.cr-no{font-family:var(--font-en); font-size:13px; font-weight:600; color:var(--volt); letter-spacing:.1em}
.cr-t{font-family:var(--font-head); font-size:clamp(18px,2.4vw,26px); font-weight:700; transition:color .3s}
.cta-row:hover .cr-t{color:var(--volt)}
.cr-d{font-size:12.5px; color:var(--sub)}
.cta-row .arw{
  font-family:var(--font-en); font-size:22px; color:var(--volt); justify-self:end;
  display:inline-block; transition:transform .35s var(--ease);
}
.cta-row:hover .arw{transform:translateX(8px)}
@media (max-width:720px){
  .cta-row{grid-template-columns:44px 1fr 40px}
  .cr-d{display:none}
}
.final .note{margin-top:44px}

/* ---------- ipo facts ---------- */
.facts{border-top:1px solid var(--hair)}
.fact{
  display:grid; grid-template-columns:170px 1fr; gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--hair);
}
@media (max-width:640px){ .fact{grid-template-columns:1fr; gap:6px} }
.f-k{
  font-family:var(--font-en); font-size:13px; font-weight:600;
  letter-spacing:.1em; color:var(--volt); text-transform:uppercase;
}
.fact p{font-size:14px; color:var(--ink); line-height:2.0}

/* ---------- calculator ---------- */
.calc{border:1px solid var(--hair); background:var(--surface); border-radius:18px; padding:clamp(28px,4vw,48px)}
.calc-in{display:grid; grid-template-columns:1.4fr 1fr; gap:32px; margin-bottom:36px}
@media (max-width:760px){ .calc-in{grid-template-columns:1fr} }
.ci label{display:block; font-size:13px; font-weight:700; margin-bottom:12px}
.ci-row{display:flex; align-items:center; gap:14px}
.ci input[type="number"]{
  width:110px; padding:12px 14px; font-size:18px; font-weight:600;
  font-family:var(--font-en); text-align:right;
  border:1px solid var(--hair); border-radius:10px; background:var(--paper); color:var(--ink);
}
.ci input[type="number"]:focus{outline:2px solid var(--volt); outline-offset:1px}
.ci .unit{font-size:13px; color:var(--sub)}
.ci input[type="range"]{
  flex:1; min-width:120px; accent-color:var(--volt); height:2px;
}
.calc-out{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
@media (max-width:760px){ .calc-out{grid-template-columns:1fr 1fr} }
.co{padding:24px 18px; border-right:1px solid var(--hair); text-align:center}
.co:last-child{border-right:none}
@media (max-width:760px){
  .co{border-right:none; border-bottom:1px solid var(--hair)}
  .co:nth-child(odd){border-right:1px solid var(--hair)}
  .co:nth-child(3),.co:nth-child(4){border-bottom:none}
}
.co-k{font-size:11.5px; color:var(--sub); margin-bottom:10px; letter-spacing:.04em}
.co-v b{
  font-family:var(--font-en); font-size:clamp(34px,4vw,52px); font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums;
}
.co-v span{font-size:13px; color:var(--sub); margin-left:5px}
.co.alert .co-v b{color:var(--signal)}
.calc-note{font-size:11.5px; color:var(--sub); margin-top:18px; line-height:1.8}
.calc-cta{margin-top:28px}

/* ---------- lead modal ---------- */
.lead-modal{
  margin:auto; border:none; border-radius:20px; padding:0;
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100vh - 48px); overflow-y:auto;
  background:var(--paper); color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(35,37,41,.45);
}
.lead-modal::backdrop{background:rgba(35,37,41,.55); backdrop-filter:blur(4px)}
.lead-form{padding:clamp(28px,5vw,44px); position:relative; font-family:var(--font-jp)}
.lm-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px;
  border:1px solid var(--hair); border-radius:50%; background:var(--surface);
  font-size:17px; color:var(--sub); cursor:pointer;
  transition:color .3s, border-color .3s, transform .3s var(--ease);
}
.lm-close:hover{color:var(--ink); border-color:var(--ink); transform:rotate(90deg)}
.lm-label{
  font-family:var(--font-en); font-size:11px; font-weight:600;
  letter-spacing:.2em; color:var(--volt); text-transform:uppercase; margin-bottom:8px;
}
.lm-title{font-family:var(--font-head); font-size:24px; font-weight:700; margin-bottom:6px}
.lm-desc{font-size:13px; color:var(--sub); margin-bottom:26px}
.lf-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-bottom:26px}
@media (max-width:560px){ .lf-grid{grid-template-columns:1fr} }
.lf label{display:block; font-size:12px; font-weight:700; margin-bottom:7px}
.lf label em{
  font-style:normal; font-size:10px; font-weight:700; color:var(--paper);
  background:var(--volt); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:1px;
}
.lf label .opt-t{font-size:10.5px; font-weight:400; color:var(--sub); margin-left:6px}
.lf input, .lf select{
  width:100%; padding:12px 14px; font-size:14px; font-family:var(--font-jp);
  border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--ink);
}
.lf input:focus, .lf select:focus{outline:2px solid var(--volt); outline-offset:1px}
.lm-submit{width:100%; justify-content:center; font-size:15px}
.lm-submit[disabled]{opacity:.55; pointer-events:none}
.lm-note{font-size:11.5px; color:var(--sub); text-align:center; margin-top:14px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:32px; z-index:100;
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper);
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  padding:15px 26px; border-radius:99px;
  box-shadow:0 18px 40px -18px rgba(35,37,41,.5);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  max-width:calc(100vw - 40px); text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}
.toast.err{background:var(--signal)}

/* ---------- news ---------- */
.page{padding:170px 0 120px}
.news-list{border-top:1px solid var(--hair); max-width:900px}
.news-row{
  display:grid; grid-template-columns:110px 70px 1fr 40px; gap:22px; align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--hair);
  transition:padding .35s var(--ease);
}
.news-row:hover{padding-left:12px}
.nr-date{font-family:var(--font-en); font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums}
.nr-cat{
  font-family:var(--font-en); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  color:var(--volt); text-transform:uppercase;
}
.nr-title{font-size:14.5px; font-weight:500; line-height:1.8; transition:color .3s}
.news-row:hover .nr-title{color:var(--volt)}
.news-row .arw{
  font-family:var(--font-en); color:var(--volt); justify-self:end;
  display:inline-block; transition:transform .35s var(--ease);
}
.news-row:hover .arw{transform:translateX(6px)}
@media (max-width:640px){
  .news-row{grid-template-columns:90px 1fr 30px}
  .nr-cat{display:none}
}
.news-article .na-title{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(24px,3.6vw,40px); line-height:1.5; letter-spacing:.01em;
  margin-bottom:14px; max-width:840px; text-wrap:balance;
}
.na-date{font-family:var(--font-en); font-size:13px; color:var(--sub); margin-bottom:44px}
.na-body{max-width:680px; border-top:1px solid var(--hair); padding-top:40px}
.na-body p{font-size:14.5px; line-height:2.2; margin-bottom:1.2em}
.na-body a{color:var(--volt); text-decoration:underline; text-underline-offset:3px}
.na-h{
  font-family:var(--font-head); font-size:15.5px; font-weight:700;
  margin:2em 0 .7em;
}
.na-back{display:inline-block; margin-top:40px}
.na-img{margin:0 0 44px; max-width:840px}
.na-img img{width:100%; height:auto; display:block; border:1px solid var(--hair); border-radius:2px}
.na-img figcaption{font-size:11.5px; color:var(--sub); margin-top:10px}

/* top page news teaser */
.news-teaser{max-width:900px}

/* ---------- seminar event strip (CMS枠) ---------- */
.event-strip{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:1240px; margin:0 auto; padding:20px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--hair);
  transition:background .3s;
}
.event-strip:hover{background:var(--surface)}
.ev-tag{
  font-family:var(--font-en); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--paper); background:var(--volt); padding:4px 12px; border-radius:2px;
  text-transform:uppercase; white-space:nowrap;
}
.ev-t{font-size:13.5px; font-weight:600; line-height:1.7}
.event-strip .arw{font-family:var(--font-en); color:var(--volt); margin-left:auto}
.news-strips .event-strip:first-child{border-top:1px solid var(--hair)}
.es-more .ev-t{font-size:12.5px; color:var(--sub); font-weight:600}
.es-more:hover .ev-t{color:var(--volt)}

/* ---------- service page: 定型業務セクション ---------- */
.svc-lead{max-width:720px; font-size:14.5px; line-height:2.3; color:var(--ink)}
.svc-lead p + p{margin-top:1.2em}

/* step flow 観察→型化→自動化→継続運用 */
.flow{
  display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr; align-items:stretch;
  border:1px solid var(--hair); background:var(--surface); border-radius:2px;
  margin:48px 0 0;
}
.flow .fs{padding:26px 20px}
.flow .fa{display:flex; align-items:center; justify-content:center; color:var(--volt); font-family:var(--font-en); font-size:15px}
.fs .fs-no{font-family:var(--font-en); font-size:12px; font-weight:600; color:var(--volt); letter-spacing:.12em; display:block; margin-bottom:8px}
.fs h4{font-family:var(--font-head); font-size:15.5px; font-weight:700; margin-bottom:6px}
.fs p{font-size:12px; color:var(--sub); line-height:1.9}
@media (max-width:760px){
  .flow{grid-template-columns:1fr}
  .flow .fa{padding:2px 0; transform:rotate(90deg)}
  .fs{text-align:center; border-bottom:1px solid var(--hair)}
  .fs:last-child{border-bottom:none}
  .fs .pict{margin-left:auto; margin-right:auto}
}

/* before / after */
.ba{display:grid; grid-template-columns:1fr 56px 1fr; gap:0; align-items:stretch; margin:20px 0 0}
@media (max-width:760px){ .ba{grid-template-columns:1fr} }
.ba-col{border:1px solid var(--hair); background:var(--surface); border-radius:2px; padding:26px 24px}
.ba-col.after{border:1px solid var(--volt)}
.ba-mid{display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-size:20px; color:var(--volt)}
@media (max-width:760px){ .ba-mid{padding:10px 0; transform:rotate(90deg)} }
.ba-tag{
  font-family:var(--font-en); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:18px; color:var(--sub);
}
.ba-col.after .ba-tag{color:var(--volt)}
.ba-box{
  border:1px solid var(--hair); border-radius:2px; padding:10px 14px;
  font-size:12.5px; line-height:1.7; margin-bottom:8px; background:var(--paper);
}
.ba-col.after .ba-box{border-color:#BFD9CE}
.ba-down{font-family:var(--font-en); color:var(--sub); text-align:center; font-size:13px; margin:2px 0 10px}
.ba-col.after .ba-down{color:var(--volt)}
.ba-note{font-size:11.5px; color:var(--sub); margin-top:14px; line-height:1.8}
.ba-note.ok{color:var(--volt); font-weight:600}

/* 比較表 */
.cmp-wrap{overflow-x:auto; margin-top:20px}
.cmp{width:100%; min-width:720px; border-collapse:collapse; font-size:13px}
.cmp th, .cmp td{
  border-top:1px solid var(--hair); padding:18px 16px;
  text-align:left; vertical-align:top; line-height:1.9;
}
.cmp thead th{border-top:none; font-family:var(--font-head); font-size:14px; padding-top:0}
.cmp thead th small{display:block; font-size:10.5px; color:var(--sub); font-weight:400; margin-top:2px}
.cmp .rowh{font-size:11.5px; color:var(--sub); font-weight:700; letter-spacing:.04em; width:110px}
.cmp .mv{border-left:1px solid var(--volt); border-right:1px solid var(--volt)}
.cmp thead .mv{color:var(--volt); border-top:1px solid var(--volt); padding-top:14px}
.cmp tbody tr:last-child .mv{border-bottom:1px solid var(--volt)}
.cmp .mv{font-weight:600}
.cmp .mark{font-family:var(--font-en); font-weight:600; margin-right:6px}
.cmp .mark.no{color:var(--signal)}
.cmp .mark.yes{color:var(--volt)}

/* 強調一行 */
.svc-punch{
  max-width:760px; margin:56px 0 0;
  border-left:2px solid var(--volt); padding:6px 0 6px 26px;
  font-family:var(--font-head); font-size:clamp(16px,2vw,20px); font-weight:700; line-height:2.0;
}

/* footer */
.foot{border-top:1px solid var(--hair); padding:44px 0}
.foot-in{display:flex; align-items:center; gap:30px; flex-wrap:wrap}
.foot .logo{font-size:16px}
.foot-nav{display:flex; gap:22px; font-size:12px; color:var(--sub)}
.foot-nav a:hover{color:var(--ink)}
.foot .copy{margin-left:auto; font-size:11.5px; color:var(--sub)}
@media (max-width:640px){ .foot .copy{margin-left:0} }

/* ---------- motion base (JS adds .js) ---------- */
.js [data-hero],
.js [data-reveal],
.js [data-reveal-group] > *{opacity:0}
.js .lm{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em}
.js .lm .li{display:block}
.js .kv .ch{display:inline-block}
.js [data-split] .lm .li{transform:translateY(110%)}

@media (prefers-reduced-motion: reduce){
  .js [data-hero], .js [data-reveal], .js [data-reveal-group] > *{opacity:1}
  .js [data-split] .lm .li{transform:none}
  .btn:hover,.nav-cta:hover,.cta-row:hover{transform:none; padding-left:0}
}

/* ---------- capture mode(スクリーンショット用) ---------- */
.capture .hero{min-height:auto; padding:150px 0 100px}
.capture .scroll-hint{display:none}