/* Direction B "Bridge Blueprint": engineering-plan feel, no grid background. */
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2190-2199}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2190-2199}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-vietnamese-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-vietnamese-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{--bg:#f7f9fb;--bg2:#eaf0f6;--fg:#0f2742;--mut:#455a72;--line:rgba(15,39,66,.22);--acc:#0891b2;--accT:#00678a;--onacc:#fff;--frame:clamp(20px,4.4vw,56px);--gut:150px;--sans:"IBM Plex Sans","Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0a1626;--bg2:#12253b;--fg:#e8f0f8;--mut:#a3b8ce;--line:rgba(232,240,248,.24);--acc:#38bdf8;--accT:#5cc8f5;--onacc:#06192b}}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
[lang=ja]{font-size:16px;line-height:1.9}
a{color:var(--accT);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--fg)}
a:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--frame)}
/* nav */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 19px var(--sans);letter-spacing:-.01em;text-decoration:none;color:var(--fg);flex:none;min-height:44px}.logo:hover{color:var(--fg)}
.logo svg{width:26px;height:26px}
nav ul{display:flex;list-style:none;padding:0;border:2px solid var(--fg)}
nav ul li+li{border-left:2px solid var(--fg)}
nav ul a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font:600 15px var(--sans);text-decoration:none;color:var(--fg)}
nav ul a:hover{background:var(--bg2);color:var(--fg)}nav a[aria-current]{background:var(--fg);color:var(--bg)}
/* hero */
.hero{padding:clamp(40px,7vw,84px) 0 0}
.hero .wrap>*{margin-left:var(--gutm,0)}
.eyebrow{display:inline-block;font:600 14px/1 var(--sans);color:var(--onacc);background:var(--accT);padding:7px 10px}
[data-theme]{}
h1,h2{font-weight:600;letter-spacing:-.025em;word-break:keep-all;line-break:strict;overflow-wrap:anywhere;text-wrap:balance}.nw{white-space:nowrap}
h1{font-size:clamp(36px,6.2vw,76px);line-height:1.04;margin:24px 0 0;max-width:18ch}
.gt{color:var(--accT)}
[lang=ja] :is(h1,h2){font-weight:700;letter-spacing:0;overflow-wrap:normal}[lang=ja] h1{font-size:clamp(30px,5.2vw,58px);line-height:1.25;max-width:none}[lang=ja] h2{font-size:clamp(25px,3vw,36px);line-height:1.35}
.hero-row{display:grid;gap:28px 56px;grid-template-columns:1fr;margin-top:32px;align-items:end}
@media (min-width:900px){.hero-row{grid-template-columns:1.2fr 1fr}}
.lead{font-size:clamp(18px,1.9vw,21px);color:var(--mut);max-width:32em}
.cta,.row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border:2px solid var(--fg);background:transparent;font:600 16px/1.3 var(--sans);text-decoration:none;color:var(--fg)}
.btn.p{background:var(--accT);border-color:var(--accT);color:var(--onacc)}
.btn:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
/* bridge span */
.span{margin-top:clamp(36px,6vw,64px)}
.span svg{display:block;width:100%;height:clamp(110px,18vw,230px);overflow:visible}
.span svg *{vector-effect:non-scaling-stroke}
.span .deck{stroke:var(--fg);stroke-width:4}
.span .tw{stroke:var(--fg);stroke-width:3;fill:none}
.span .cab{stroke:var(--acc);stroke-width:2.5;fill:none}
.span .hg{stroke:var(--fg);stroke-opacity:.35;stroke-width:1}
.span .ab{fill:var(--fg)}
.dim{position:relative;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--fg);margin-top:18px;padding-top:10px;font:600 14px var(--sans);color:var(--mut)}
.dim::before,.dim::after{content:"";position:absolute;top:-9px;width:1px;height:17px;background:var(--fg)}.dim::before{left:0}.dim::after{right:0}
.dim b{font-weight:600;color:var(--fg)}
.dim i{flex:1;margin:0 14px;height:1px;background:var(--line)}
/* sections: number gutter */
section{border-top:2px solid var(--fg);padding:clamp(32px,4.5vw,52px) 0 clamp(28px,3.5vw,40px);position:relative;margin-top:clamp(28px,4vw,44px)}
section::before{content:"";position:absolute;left:var(--frame);top:-2px;width:64px;height:8px;background:var(--acc)}
@media (min-width:1240px){section::before{left:calc((100vw - 1240px)/2 + var(--frame))}}
#en,#ja,#vi{counter-reset:s -1}
section{counter-increment:s}
section>.wrap{display:grid;gap:0 clamp(24px,4vw,64px);grid-template-columns:1fr}
section>.wrap::before{content:counter(s,decimal-leading-zero);font:600 clamp(44px,5vw,72px)/1 var(--sans);letter-spacing:-.04em;color:var(--fg);margin-bottom:22px;order:-2}
@media (min-width:860px){
section>.wrap{grid-template-columns:var(--gut) 1fr}
section>.wrap>*{grid-column:2}
section>.wrap::before{grid-column:1;grid-row:1/span 6;margin:0;align-self:start}
.prod{grid-template-columns:var(--gut) 1.1fr .9fr!important;align-items:start}
.prod>*{grid-column:auto!important}
.prod::before{grid-column:1!important;grid-row:1!important}
.prod.rev{grid-template-columns:var(--gut) .9fr 1.1fr!important}
.prod.rev .art{order:-1}
}
.kick{font:600 15px/1.2 var(--sans);color:var(--accT);margin-bottom:18px}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.12;max-width:19ch}
.facts{display:grid;gap:0;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--line)}
.fact{padding:20px 24px 4px 0;margin-right:24px;border-right:1px solid var(--line)}.fact:last-child{border-right:0}
@media (max-width:760px){.fact{border-right:0;border-bottom:1px solid var(--line);padding:18px 0;margin:0}}
.fact b{display:block;font:600 20px/1.25 var(--sans);margin-bottom:8px}[lang=ja] .fact b{font-size:17px;font-weight:700}.fact span{color:var(--mut);font-size:.92em}
.bridge{display:flex;align-items:center;gap:20px;margin-top:30px;color:var(--mut);font-size:.92em}
.bridge svg{flex:none;width:min(200px,46%);height:auto}
.prod{display:grid;gap:0 clamp(24px,4vw,64px)}
.badge,.chip{display:inline-block;font:600 12.5px/1 var(--sans);color:var(--fg);background:var(--bg2);padding:6px 9px;border-left:3px solid var(--acc)}
.badge{margin-bottom:18px}.chip{margin-right:8px;vertical-align:2px}
.prod h2{margin-bottom:22px}
ul.ben{list-style:none;padding:0;display:grid;gap:0;margin:0 0 28px;border-top:1px solid var(--line)}
ul.ben li{padding:14px 0 14px 0;position:relative;color:var(--mut);border-bottom:1px solid var(--line)}
ul.ben li b{color:var(--fg);font-weight:600}
.langs{color:var(--mut);margin:0 0 22px;font-size:.92em}
.art{background:var(--bg2);border:1px solid var(--line);padding:22px;margin-top:28px}
@media (min-width:860px){.art{margin-top:0}}
.art svg{display:block;width:100%;height:auto;color:var(--fg)}
.ac{fill:var(--acc)}.acs{stroke:var(--acc)}.tl{fill:var(--accT)}.bgs{stroke:var(--bg2)}
/* footer */
footer{border-top:2px solid var(--fg);padding:36px 0 32px;margin-top:clamp(28px,4vw,44px)}
.fg{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
footer h3{font:600 15px/1 var(--sans);color:var(--fg);margin-bottom:14px}
footer p{color:var(--mut);font-size:.9em}footer p a{display:inline-block;padding:10px 0}
.mail{font:600 clamp(22px,5vw,30px)/1.2 var(--sans);word-break:break-word}
.fine{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font:400 13px/1.7 var(--sans);color:var(--mut)}
.fine+.fine{margin-top:0;border-top:0;padding-top:6px}
@media (max-width:560px){nav ul a{padding:0 10px;font-size:14px}.logo{font-size:0;gap:0}.cta .btn,.row .btn{flex:1 1 100%}.bridge{flex-direction:column;align-items:flex-start}.bridge svg{width:220px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.bgf{fill:var(--bg)}