/* ビジネスパートナー株式会社 — 共通スタイル v2 */
:root{
  --navy:#0A1E3F;
  --navy2:#10305F;
  --blue:#1D5BBF;
  --sky:#7FAAF2;
  --pale:#EAF0FA;
  --g1:#F3F4F6;
  --g2:#D7DADF;
  --g3:#8A93A1;
  --txt:#1B2433;
  --mut:#4F5A6B;
  --y:#EED325;
  --max:1200px;
  --gut:clamp(20px,5vw,64px);
  --jp:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --mi:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --en:'Newsreader','Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--jp);font-size:16px;line-height:1.95;color:var(--txt);background:#fff;line-break:strict;word-break:auto-phrase;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;line-height:1.45}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}
.en{font-family:var(--en)}
.mi{font-family:var(--mi)}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;transition:min-height .3s}
.site-header.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);color:var(--txt);box-shadow:0 1px 0 rgba(10,30,63,.12)}
.site-header.scrolled .wrap{min-height:64px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand-mark{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.05em}
.brand-mark b{color:#C3CAD6;font-weight:700}
.brand-mark i{color:var(--sky);font-style:normal}
.scrolled .brand-mark b{color:var(--g3)}
.scrolled .brand-mark i{color:var(--blue)}
.brand-name{font-weight:700;font-size:15px;line-height:1.3;letter-spacing:.04em}
.brand-name small{display:block;font-family:var(--en);font-style:italic;font-weight:400;font-size:12px;letter-spacing:.08em;opacity:.8}
.nav{display:flex;align-items:center;gap:4px 30px}
.nav a{font-family:var(--en);font-size:17px;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;position:relative}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:currentColor;transition:right .3s}
.nav a:not(.nav-cta):hover::after,.nav a[aria-current="page"]::after{right:0}
.nav .nav-cta{font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.08em;padding:0 24px;border:1px solid currentColor;transition:background .2s,color .2s}
.nav .nav-cta:hover{background:#fff;color:var(--navy)}
.scrolled .nav .nav-cta:hover{background:var(--navy);color:#fff}
.menu-btn{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;padding:0;position:relative;color:inherit}
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .25s,opacity .25s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:29px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:block;z-index:3}
  .nav{position:fixed;inset:0;background:var(--navy);color:#fff;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px var(--gut) 40px;display:none;z-index:2}
  .nav.open{display:flex}
  .nav a{font-size:34px;min-height:60px;letter-spacing:.02em}
  .nav .nav-cta{font-size:16px;margin-top:20px;min-height:56px;border-color:#fff}
  .site-header.menu-open{background:transparent;color:#fff;box-shadow:none;backdrop-filter:none}
  .site-header.menu-open .brand-mark b{color:#C3CAD6}
  .site-header.menu-open .brand-mark i{color:var(--sky)}
  .brand{position:relative;z-index:3}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 34px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.08em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,gap .25s}
.btn.arrow::after{content:"";width:22px;height:1px;background:currentColor;position:relative;transition:width .25s}
.btn.arrow:hover{gap:20px}
.btn-y{background:var(--y);color:var(--navy)}
.btn-y:hover{background:#fff}
.btn-b{background:var(--blue);color:#fff}
.btn-b:hover{background:var(--navy)}
.btn-o{border-color:currentColor;color:inherit;background:transparent}
.btn-o:hover{background:#fff;color:var(--navy);border-color:#fff}
.light .btn-o:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- type & section scaffolding ---------- */
.section{padding:clamp(72px,11vw,140px) 0;position:relative}
.dark{background:var(--navy);color:#fff}
.mid{background:var(--navy2);color:#fff}
.gray{background:var(--g1)}
.pale{background:var(--pale)}
.sec-label{display:flex;align-items:center;gap:18px;font-family:var(--en);font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding-top:18px;border-top:1px solid var(--g2);margin-bottom:clamp(36px,5vw,64px)}
.sec-label b{font-weight:500;font-style:italic;color:var(--blue);letter-spacing:.04em}
.dark .sec-label,.mid .sec-label{border-top-color:rgba(255,255,255,.22)}
.dark .sec-label b,.mid .sec-label b{color:var(--y)}
.h2{font-family:var(--mi);font-weight:800;font-size:clamp(28px,4.8vw,52px);line-height:1.5;letter-spacing:.02em}
.lead{font-size:clamp(16px,.9vw + 13px,19px);line-height:2.05;color:var(--mut)}
.dark .lead,.mid .lead{color:#C9D5EA}
.ul{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--y) 90%,transparent) 64% 90%,transparent 90%);padding:0 .06em}
.dark .ul{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--y) 85%,transparent) 64% 90%,transparent 90%);color:#fff}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,7vw,110px);align-items:start}
.sticky{position:sticky;top:110px}
@media (max-width:900px){.split{grid-template-columns:1fr}.sticky{position:static}}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 520px at 85% 8%,rgba(47,107,196,.45),transparent 70%),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.hero .wrap{padding-top:clamp(140px,18vw,200px);padding-bottom:0}
.hero-eyebrow{font-family:var(--en);font-style:italic;font-size:clamp(17px,2vw,22px);letter-spacing:.06em;color:var(--sky);display:flex;align-items:center;gap:16px}
.hero-eyebrow::before{content:"";width:48px;height:1px;background:var(--sky)}
.hero h1{font-family:var(--mi);font-weight:700;font-size:clamp(40px,8.6vw,132px);line-height:1.22;letter-spacing:.015em;margin:28px 0 clamp(28px,4vw,48px)}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.09em;background:var(--y);transform-origin:left;animation:grow 1.1s .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lead{max-width:600px;color:#D5E0F2;font-size:clamp(16px,1vw + 12px,20px)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,4vw,48px)}
.thread{display:block;width:100%;height:auto;margin-top:clamp(40px,6vw,72px);overflow:visible}
.thread path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 4s .4s cubic-bezier(.5,0,.2,1) forwards}
.thread circle{opacity:0;animation:fade .6s 4.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.2)}
.facts div{padding:26px clamp(14px,2.4vw,32px) 30px 0}
.facts div+div{padding-left:clamp(14px,2.4vw,32px);border-left:1px solid rgba(255,255,255,.2)}
.facts small{display:block;font-family:var(--en);font-style:italic;font-size:15px;letter-spacing:.06em;color:var(--sky)}
.facts b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(26px,3.6vw,44px);line-height:1.2;margin:4px 0}
.facts span{font-size:13px;color:#B7C5DD;line-height:1.7;display:block}
@media (max-width:640px){.facts{grid-template-columns:1fr}.facts div,.facts div+div{padding:18px 0;border-left:0;border-top:1px solid rgba(255,255,255,.2)}.facts div:first-child{border-top:0}}

/* ---------- sub page hero ---------- */
.phero{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(700px 400px at 90% 0,rgba(47,107,196,.4),transparent 70%),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.phero .wrap{padding-top:clamp(130px,16vw,190px);padding-bottom:clamp(56px,8vw,104px)}
.phero .crumb{font-family:var(--en);font-style:italic;font-size:16px;letter-spacing:.04em;color:var(--sky)}
.phero .crumb a{text-decoration:none}.phero .crumb a:hover{text-decoration:underline}
.phero h1{font-family:var(--en);font-weight:400;font-size:clamp(52px,10vw,148px);line-height:1;letter-spacing:-.02em;margin:22px 0 24px}
.phero p.t{font-family:var(--mi);font-weight:700;font-size:clamp(19px,2.6vw,30px);line-height:1.7;max-width:820px;color:#E7EEFA}

/* ---------- perspective framework ---------- */
.fw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,6vw,72px)}
.fw>div{position:relative;padding:28px clamp(18px,2.6vw,36px) 40px 0;border-top:3px solid var(--navy)}
.fw>div+div{padding-left:clamp(18px,2.6vw,36px);border-left:1px solid var(--g2)}
.fw>div:last-child{border-top-color:var(--blue)}
.fw .k{font-family:var(--en);font-style:italic;font-size:16px;color:var(--blue);letter-spacing:.04em}
.fw h3{font-family:var(--mi);font-weight:800;font-size:clamp(19px,2vw,24px);margin:6px 0 16px;line-height:1.55}
.fw ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fw li{padding:12px 0;border-top:1px solid var(--g2);font-weight:700}
.fw li:first-child{border-top:0;padding-top:0}
.fw p{font-size:15px;color:var(--mut);line-height:1.95}
.fw .arr{position:absolute;right:-17px;top:-19px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:18px;z-index:2}
.fw>div:last-child .arr{display:none}
@media (max-width:900px){.fw{grid-template-columns:1fr}.fw>div,.fw>div+div{padding:26px 0 36px;border-left:0}.fw .arr{right:auto;left:0;top:auto;bottom:-17px;transform:rotate(90deg)}}

/* ---------- Why / How diagram ---------- */
.axis{position:relative;border:1px solid rgba(255,255,255,.22)}
.axis .lane{padding:clamp(24px,4vw,44px)}
.axis .lane.how{background:rgba(255,255,255,.04)}
.axis .lane.why{background:linear-gradient(180deg,var(--blue),#17458F)}
.axis .water{display:flex;align-items:center;gap:14px;padding:8px clamp(24px,4vw,44px);font-family:var(--en);font-style:italic;font-size:14px;letter-spacing:.1em;color:var(--sky);background:var(--navy);border-block:1px dashed rgba(255,255,255,.35)}
.axis .water::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.axis .w{font-family:var(--en);font-weight:400;line-height:.95;letter-spacing:-.02em}
.axis .how .w{font-size:clamp(44px,6vw,72px);color:#9AA9C4}
.axis .why .w{font-size:clamp(72px,12vw,150px);font-style:italic}
.axis .q{font-family:var(--mi);font-weight:700;font-size:clamp(17px,2vw,22px);margin-top:12px}
.axis .how .q{color:#B7C5DD}
.axis .s{font-size:14px;margin-top:6px;color:#C9D5EA}
.axis .start{display:inline-block;margin-top:18px;background:var(--y);color:var(--navy);font-weight:700;font-size:13px;letter-spacing:.1em;padding:5px 16px}
.qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,60px)}
.qs p{font-family:var(--mi);font-weight:700;font-size:clamp(19px,2.3vw,26px);line-height:1.7;border-top:1px solid rgba(255,255,255,.3);padding-top:18px}
@media (max-width:700px){.qs{grid-template-columns:1fr}}

/* ---------- approach rows ---------- */
.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--g2)}
.rows li{display:grid;grid-template-columns:clamp(60px,8vw,110px) minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,3vw,48px);padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--g2);align-items:start;transition:background .3s}
.rows .n{font-family:var(--en);font-style:italic;font-size:clamp(36px,5vw,64px);line-height:1;color:var(--blue)}
.rows h3{font-family:var(--mi);font-weight:800;font-size:clamp(21px,2.5vw,30px);line-height:1.5}
.rows .e{font-family:var(--en);font-style:italic;font-size:15px;letter-spacing:.06em;color:var(--g3);margin-top:6px}
.rows p{font-size:15.5px;color:var(--mut);line-height:2}
@media (max-width:760px){.rows li{grid-template-columns:1fr;gap:10px}}
.merge{display:flex;align-items:center;gap:clamp(14px,3vw,32px);margin-top:clamp(28px,4vw,44px);background:var(--navy);color:#fff;padding:clamp(22px,3vw,32px) clamp(22px,4vw,48px)}
.merge i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),var(--y))}
.merge span{font-family:var(--mi);font-weight:800;font-size:clamp(21px,3.2vw,34px);letter-spacing:.08em;white-space:nowrap}
.merge small{font-family:var(--en);font-style:italic;font-size:15px;color:var(--sky);white-space:nowrap}
@media (max-width:640px){.merge small{display:none}}

/* ---------- service split ---------- */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.svc>article{padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);display:flex;flex-direction:column;gap:22px}
.svc .bpo{background:var(--navy);color:#fff}
.svc .dsn{background:var(--blue);color:#fff}
.svc .big{font-family:var(--en);font-weight:400;font-size:clamp(56px,9vw,112px);line-height:.95;letter-spacing:-.02em}
.svc .role{font-family:var(--en);font-style:italic;font-size:17px;letter-spacing:.04em;color:var(--y)}
.svc .dsn .role{color:#fff;opacity:.9}
.svc h3{font-family:var(--mi);font-weight:800;font-size:clamp(21px,2.4vw,28px);line-height:1.6}
.svc p{color:#D5E0F2;font-size:15.5px;line-height:2}
.svc ol{list-style:none;margin:6px 0 0;padding:0}
.svc ol li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.25);font-weight:700}
.svc ol li b{font-family:var(--en);font-style:italic;font-weight:400;font-size:18px;color:var(--y)}
.svc .dsn ol li b{color:#fff;opacity:.8}
.svc .more{margin-top:auto;padding-top:16px}
@media (max-width:900px){.svc{grid-template-columns:1fr}}

/* ---------- outline venn ---------- */
.venn{display:flex;justify-content:center;isolation:isolate}
.venn .c{width:min(36vw,300px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;mix-blend-mode:multiply}
.venn .a{background:color-mix(in srgb,var(--blue) 16%,transparent);margin-right:calc(min(36vw,300px)*-.16)}
.venn .b{background:color-mix(in srgb,var(--y) 42%,transparent);margin-left:calc(min(36vw,300px)*-.16)}
.venn b{font-family:var(--mi);font-weight:800;font-size:clamp(24px,4.4vw,40px)}
.venn span{font-weight:700;font-size:clamp(12px,1.8vw,14px);color:var(--mut)}
@media (max-width:900px){.venn .c{width:min(42vw,260px)}.venn .a{margin-right:calc(min(42vw,260px)*-.16)}.venn .b{margin-left:calc(min(42vw,260px)*-.16)}}

/* ---------- steps (service page) ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-bottom:1px solid var(--g2)}
.steps li{counter-increment:s;display:grid;grid-template-columns:clamp(54px,7vw,90px) minmax(0,1fr);gap:clamp(12px,2vw,28px);padding:clamp(24px,3.4vw,38px) 0;border-top:1px solid var(--g2)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--en);font-style:italic;font-size:clamp(30px,4vw,48px);line-height:1;color:var(--blue)}
.steps h4{font-family:var(--mi);font-weight:800;font-size:clamp(19px,2.2vw,24px);margin-bottom:6px}
.steps p{font-size:15.5px;color:var(--mut);line-height:2}
.dark .steps,.dark .steps li{border-color:rgba(255,255,255,.25)}
.dark .steps li::before{color:var(--y)}
.dark .steps p{color:#C9D5EA}

/* ---------- table / offices ---------- */
.dl{margin:0;border-top:2px solid var(--navy)}
.dl .row{display:grid;grid-template-columns:clamp(120px,18vw,220px) minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--g2)}
.dl dt{font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--blue)}
.dl dd{margin:0}
@media (max-width:640px){.dl .row{grid-template-columns:1fr;gap:4px}}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--g2);padding:6px 16px;font-size:14px;font-weight:700;background:#fff}
.office{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.office>div{padding:28px clamp(16px,2.4vw,32px) 36px 0}
.office>div+div{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--g2)}
.office h3{font-family:var(--en);font-weight:400;font-size:clamp(36px,5vw,56px);line-height:1}
.office small{display:block;font-weight:700;color:var(--blue);margin:6px 0 14px;letter-spacing:.14em;font-size:13px}
.office p{font-size:14.5px;color:var(--mut);line-height:1.9}
@media (max-width:760px){.office{grid-template-columns:1fr}.office>div,.office>div+div{padding:24px 0;border-left:0;border-top:1px solid var(--g2)}.office>div:first-child{border-top:0}}
.ph{background:#FFF6BF;border:1px dashed #A38B00;padding:2px 10px;font-size:.92em}

/* ---------- next link ---------- */
.next{display:block;text-decoration:none;background:var(--g1);padding:clamp(40px,6vw,80px) 0;transition:background .3s}
.next:hover{background:var(--pale)}
.next .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.next small{font-family:var(--en);font-style:italic;font-size:16px;color:var(--blue)}
.next b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(40px,7vw,92px);line-height:1.05;letter-spacing:-.01em}
.next .ar{flex:none;width:clamp(52px,7vw,84px);height:clamp(52px,7vw,84px);border:1px solid var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:clamp(22px,3vw,34px);transition:background .3s,color .3s}
.next:hover .ar{background:var(--navy);color:#fff}

/* ---------- CTA / footer ---------- */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 420px at 12% 100%,rgba(47,107,196,.5),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.cta .h2{font-size:clamp(28px,5.2vw,60px);max-width:900px}
.cta .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,4vw,52px)}
.site-footer{background:#07152D;color:#B7C5DD;padding:64px 0 28px;font-size:14px}
.site-footer .top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px}
.site-footer address{font-style:normal;line-height:2}
.site-footer strong{color:#fff;font-size:17px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 28px;align-content:flex-start}
.site-footer nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;font-family:var(--en);font-size:18px}
.site-footer nav a:hover{color:#fff;text-decoration:underline}
.site-footer .copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#8190A8}
@media (max-width:760px){.site-footer .top{grid-template-columns:1fr}}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .thread path{animation:none;stroke-dashoffset:0}.thread circle{animation:none;opacity:1}
  .hero h1 em::after{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
}

.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.split.even{grid-template-columns:1fr}}
.fw .mi,.h2,.qs p,.phero p.t{text-wrap:balance}

/* =====================================================
   v3 — イエロー基調
   ===================================================== */
:root{--navy:#1F2430;--navy2:#2A3040;--blue:#1D5BBF;--sky:#1D5BBF;--pale:#FFF7C2;--g1:#F4F4F2;--g2:#DAD8CC;--txt:#1F2430;--mut:#4A4F5C;--y:#EED325;--y2:#F6E96B}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dark :focus-visible,.svc .bpo :focus-visible,.site-footer :focus-visible{outline-color:var(--y)}
.btn-d{background:var(--navy);color:#fff}
.btn-d:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-y{background:var(--y);color:var(--navy)}
.btn-y:hover{background:#fff}
.hero .btn-o:hover,.phero .btn-o:hover,.cta .btn-o:hover,.svc .dsn .btn-o:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc .bpo .btn-o:hover,.dark .btn-o:hover{background:var(--y);color:var(--navy);border-color:var(--y)}

/* header */
.site-header{color:var(--navy)}
.brand-mark b{color:var(--mut)}.brand-mark i{color:var(--blue)}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 3px 0 var(--y)}
.scrolled .brand-mark b{color:#6B7686}
.nav .nav-cta:hover{background:var(--navy);color:#fff}
.scrolled .nav .nav-cta{background:var(--y);border-color:var(--y);color:var(--navy)}
.scrolled .nav .nav-cta:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:900px){
  .nav{background:var(--navy);color:#fff}
  .nav .nav-cta{border-color:var(--y);background:var(--y);color:var(--navy)}
  .site-header.menu-open{color:#fff}
  .site-header.menu-open .brand-mark b{color:#C9CCD4}
  .site-header.menu-open .brand-mark i{color:var(--y)}
}

/* hero */
.hero{background:var(--y);color:var(--navy)}
.hero::before{background:radial-gradient(900px 520px at 88% 0,color-mix(in srgb,var(--pale) 75%,transparent),transparent 70%),linear-gradient(90deg,color-mix(in srgb,var(--navy) 7%,transparent) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.hero-eyebrow{color:var(--navy)}
.hero-eyebrow::before{background:var(--navy)}
.hero h1 em{color:var(--y);background:var(--navy);padding:0 .14em;margin-left:.04em}
.hero h1 em::after{display:none}
.hero .lead{color:var(--navy2)}
.facts{border-top-color:color-mix(in srgb,var(--navy) 30%,transparent)}
.facts div+div{border-left-color:color-mix(in srgb,var(--navy) 30%,transparent)}
.facts small{color:var(--navy);opacity:.75}
.facts span{color:#3A4050}
@media (max-width:640px){.facts div,.facts div+div{border-top-color:color-mix(in srgb,var(--navy) 30%,transparent)}}

/* sub page hero */
.phero{background:var(--y);color:var(--navy)}
.phero::before{background:radial-gradient(700px 400px at 92% 0,color-mix(in srgb,var(--pale) 75%,transparent),transparent 70%),linear-gradient(90deg,color-mix(in srgb,var(--navy) 7%,transparent) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.phero .crumb{color:var(--navy)}
.phero p.t{color:var(--navy)}
.phero h1{font-size:clamp(44px,8.4vw,120px)}

/* dark sections (charcoal) */
.dark .lead,.mid .lead{color:#D9DBE0}
.dark .sec-label b{color:var(--y)}
.dark .steps p{color:#D9DBE0}

/* framework / numbers */
.fw>div:last-child{border-top-color:var(--y)}
.fw .k{color:var(--blue)}
.rows .n{color:var(--navy);width:fit-content;background:linear-gradient(transparent 62%,var(--y) 62% 92%,transparent 92%);padding:0 .08em}
.steps li::before{color:var(--navy);width:fit-content;height:fit-content;background:linear-gradient(transparent 62%,var(--y) 62% 92%,transparent 92%)}
.dark .steps li::before{color:var(--y);background:none}

/* Why / How */
.axis .lane.why{background:var(--y);color:var(--navy)}
.axis .why .q{color:var(--navy)}
.axis .why .s{color:var(--navy2)}
.axis .water{color:var(--y);background:var(--navy);border-block-color:color-mix(in srgb,var(--y) 60%,transparent)}
.axis .water::after{background:color-mix(in srgb,var(--y) 35%,transparent)}
.axis .start{background:var(--navy);color:var(--y)}
.axis{border-color:rgba(255,255,255,.25)}
.axis .how .w{color:#A9AEBA}.axis .how .q{color:#C9CCD4}

/* services */
.svc .dsn{background:var(--y);color:var(--navy)}
.svc .dsn p{color:var(--navy2)}
.svc .dsn .role{color:var(--navy);opacity:1}
.svc .dsn ol li{border-top-color:color-mix(in srgb,var(--navy) 30%,transparent)}
.svc .dsn ol li b{color:var(--navy);opacity:.7}
.svc .bpo p{color:#D9DBE0}

/* venn */
.venn .a{background:color-mix(in srgb,var(--navy) 14%,transparent)}
.venn .b{background:color-mix(in srgb,var(--y) 90%,transparent)}
.venn .c{border-color:var(--navy)}

/* merge */
.merge small{color:var(--y)}

/* CTA */
.cta{background:var(--y);color:var(--navy)}
.cta::before{background:radial-gradient(800px 420px at 12% 100%,color-mix(in srgb,var(--pale) 70%,transparent),transparent 70%),linear-gradient(90deg,color-mix(in srgb,var(--navy) 7%,transparent) 1px,transparent 1px) 0 0/calc(100%/6) 100%}
.cta .sec-label{border-top-color:color-mix(in srgb,var(--navy) 35%,transparent)}
.cta .sec-label b{color:var(--navy)}
.cta .lead{color:var(--navy2)}

/* next / footer */
.next:hover{background:var(--pale)}
.next .ar{border-color:var(--navy)}
.site-footer{background:color-mix(in srgb,var(--navy) 78%,#000);color:#C9CCD4;border-top:4px solid var(--y)}
.site-footer .copy{color:#8E94A3;border-top-color:rgba(255,255,255,.14)}
.ph{background:var(--pale)}
.rows h3{text-wrap:balance}


/* ===== 静的HTML版の追加分 ===== */
/* ページ上部タイトル: 少し小さく + 読み込み時のさりげない表示 */
.phero h1{font-size:clamp(36px,6.4vw,88px)}
.phero p.t{font-size:clamp(17px,2.1vw,26px)}
.next b{font-size:clamp(28px,4.6vw,60px)}
@keyframes pheroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pheroLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.phero .crumb,.phero h1,.phero p.t{animation:pheroIn 1s cubic-bezier(.2,.7,.2,1) both}
.phero .crumb{animation-delay:.08s}
.phero h1{animation-delay:.22s}
.phero p.t{animation-delay:.42s}
.phero .wrap::after{content:"";display:block;height:1px;width:min(120px,30%);margin-top:clamp(28px,4vw,44px);background:var(--navy);opacity:.55;transform-origin:left;animation:pheroLine 1.1s .7s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.phero .crumb,.phero h1,.phero p.t,.phero .wrap::after{animation:none}}
/* トップのヒーロー: 一文字ずつ表示 + 他の要素はふわっと */
.hero h1:not(.is-split){opacity:0;animation:heroFail 0s 1.6s forwards}
@keyframes heroFail{to{opacity:1}}
.hero h1 .ch{display:inline-block;animation:chIn .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes chIn{from{opacity:0;transform:translateY(.3em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1.is-split em{background:linear-gradient(var(--navy),var(--navy)) 0 0/0% 100% no-repeat;animation:emBox .8s var(--emd,.6s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes emBox{to{background-size:100% 100%}}
.hero .hero-eyebrow,.hero .lead,.hero .cta-row,.hero .facts{animation:pheroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-eyebrow{animation-delay:.05s}
.hero .lead{animation-delay:1.45s}
.hero .cta-row{animation-delay:1.7s}
.hero .facts{animation-delay:1.95s}
@media (prefers-reduced-motion:reduce){.hero h1:not(.is-split){opacity:1;animation:none}.hero h1 .ch,.hero h1.is-split em,.hero .hero-eyebrow,.hero .lead,.hero .cta-row,.hero .facts{animation:none}.hero h1.is-split em{background:var(--navy)}}
/* ロゴ画像(管理画面で設定した場合) */
.brand-logo{display:block;height:var(--logo-h,36px);width:auto;max-width:min(260px,60vw);object-fit:contain}
.brand .logo-color{display:none}
.site-header.scrolled .brand .logo-top{display:none}
.site-header.scrolled .brand .logo-color{display:block}
@media (max-width:900px){.site-header.menu-open .brand:has(.brand-logo){background:#fff;padding:6px 10px}.site-header.menu-open .brand .logo-top{display:none}.site-header.menu-open .brand .logo-color{display:block}}
/* ブランドメッセージ */
.msg-sec{position:relative;overflow:hidden;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(28px,4vw,56px)}
.msg-sec>.wrap{position:relative;z-index:1}
.msg{max-width:640px}
.msg p{margin:0 0 1.5em;font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500;font-size:clamp(15.5px,1.45vw,18px);line-height:2.05;letter-spacing:.05em;color:var(--navy);text-wrap:pretty}
.msg p:last-child{margin:2.6em 0 0;font-weight:800;font-size:clamp(17px,1.7vw,21px);line-height:2}
.msg-ill{position:absolute;top:0;bottom:0;right:0;width:min(700px,62vw);pointer-events:none;z-index:0}
.msg-ill svg{display:block;width:100%;height:100%}
.msg-ill .l{fill:none;stroke:var(--navy);stroke-opacity:.2;stroke-width:1.4;vector-effect:non-scaling-stroke}
.msg-ill .l *{vector-effect:non-scaling-stroke}
.msg-ill .cw{fill:#fff}
.msg-ill .y{fill:var(--y);fill-opacity:.5}
.msg-ill .y2{fill:var(--y)}
.msg-ill .t{fill:none;stroke:var(--navy);stroke-opacity:.26;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.no-illust .msg-ill{display:none}
@media (max-width:700px){.msg-ill{right:-14vw;width:110vw;opacity:.6}}
.cphil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(36px,5vw,60px)}
.cphil article{border-top:2px solid var(--navy);padding-top:26px}
.cphil .chips{display:flex;gap:8px;margin-bottom:22px}
.cphil .chips i{display:block;width:44px;height:44px;border-radius:50%}
.cphil .en{font-family:var(--en);font-style:italic;font-size:15px;letter-spacing:.14em;color:var(--mut)}
.cphil h3{margin:6px 0 22px;font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.5}
.cphil p{margin:0 0 1.2em;font-size:15.5px;line-height:2;letter-spacing:.02em;color:var(--navy)}
.cphil p.em{font-weight:700;margin-bottom:0;padding-top:1em;border-top:1px solid var(--g2)}
@media (max-width:800px){.cphil{grid-template-columns:1fr}}
.bar3{display:flex;height:10px;margin-top:34px;max-width:260px}
.bar3 i{display:block;flex:1}
.bal p{margin:0 0 1.5em;font-size:16px;line-height:2.05;letter-spacing:.03em;color:#fff}
.bal p.key{font-weight:700;color:#fff;padding:1em 0;border-block:1px solid color-mix(in srgb,#fff 25%,transparent)}
.bal .c-blue{color:color-mix(in srgb,var(--blue) 62%,#fff)}
.bal .c-gray{color:var(--gray)}
.bal .c-y{color:var(--y)}
.bal p:last-child{margin-bottom:0}
html.js .sticky{position:relative;top:auto;will-change:transform}
@media (max-width:900px){html.js .sticky{position:static}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf{max-width:640px}
.cf-note{font-size:14px;color:var(--mut);margin-top:20px;line-height:1.9}
.bpf{display:grid;gap:26px}
.bpf label{display:block;font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--navy);margin-bottom:8px}
.bpf .req,.bpf .opt{display:inline-block;margin-left:10px;padding:1px 8px;font-size:11px;letter-spacing:.08em;font-weight:700;vertical-align:1px}
.bpf .req{background:var(--y);color:var(--navy)}
.bpf .opt{border:1px solid var(--g2);color:var(--mut)}
.bpf input[type=text],.bpf input[type=email],.bpf input[type=tel],.bpf select,.bpf textarea{width:100%;margin:0;padding:14px 16px;font:inherit;font-weight:400;font-size:16px;letter-spacing:.02em;line-height:1.7;color:var(--navy);background:#fff;border:1px solid var(--g2);border-radius:0;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.bpf select{background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.bpf textarea{min-height:200px;resize:vertical}
.bpf input:focus,.bpf select:focus,.bpf textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px var(--y)}
.bpf .consent label{display:flex;gap:12px;align-items:flex-start;font-weight:500;letter-spacing:.02em;font-size:15px;margin:0}
.bpf .consent input{width:20px;height:20px;margin:4px 0 0;flex:none;accent-color:var(--navy)}
.bpf .pp-link{display:inline-block;margin:8px 0 0 32px;font-size:13px;color:var(--mut);text-underline-offset:3px}
.bpf .send{appearance:none;-webkit-appearance:none;min-height:56px;padding:0 44px;font:inherit;font-weight:700;font-size:15px;letter-spacing:.14em;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:0;cursor:pointer;transition:background .25s,color .25s}
.bpf .send:hover{background:var(--y);color:var(--navy)}
.bpf .send:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.bpf .send[disabled]{opacity:.55;cursor:wait}
.bpf .bad{border-color:#B3261E!important}
.bpf-msg{padding:16px 20px;font-size:14px;line-height:1.8;border:1px solid var(--navy);border-left-width:6px;background:var(--pale)}
.bpf-msg.err{border-color:#B3261E;background:#FFF1EF}
.pp p{margin:0 0 1em;font-size:15.5px;line-height:2;letter-spacing:.02em;color:var(--navy);text-wrap:pretty}
.pp p.pp-h{margin:2.6em 0 .9em;padding-top:18px;border-top:1px solid var(--g2);font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:800;font-size:clamp(18px,2vw,22px);line-height:1.6}
.pp p.pp-h:first-of-type{margin-top:0}
.pp p.pp-li,.pp p.pp-li2{position:relative;margin-bottom:.5em;padding-left:1.5em}
.pp p.pp-li::before{content:"";position:absolute;left:.35em;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.pp p.pp-li2{margin-left:1.5em}
.pp p.pp-li2::before{content:"";position:absolute;left:.15em;top:1.15em;width:10px;height:1px;background:var(--navy)}