/* Top page (front-page.php) */
body{margin:0}
/* Layout: 1枚の製図シート。座標グリッド付きの図枠の中に各セクションを「Sheet」として並べ、フッターが表題欄になる */
:root{
  --paper:#ffffff;
  --ink:#0a0a0b;
  --mute:#6a6c70;
  --line:rgba(10,10,11,.14);
  --faint:rgba(10,10,11,.05);
  --inv-ink:#ffffff;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --w:1240px;color-scheme:only light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased;padding-inline:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.wrap{max-width:var(--w);margin-inline:auto}

/* ---------- header ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{display:flex;align-items:baseline;gap:10px;font-weight:900;font-size:20px;letter-spacing:.01em}
.logo small{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--mute);letter-spacing:.14em}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:center}
nav a.nl{position:relative;padding-block:4px}
nav a.nl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
nav a.nl:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);padding:10px 18px;font-weight:700;font-size:14px;transition:background .2s,color .2s}
.btn.fill{background:var(--ink);color:var(--inv-ink)}
.btn:hover{background:var(--ink);color:var(--inv-ink)}
.btn.fill:hover{background:transparent;color:var(--ink)}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- sheet frame (drawing border with coordinates) ---------- */
.sheet{position:relative;border-inline:1px solid var(--line);max-width:var(--w);margin-inline:auto}
.ruler{display:grid;grid-template-columns:repeat(8,1fr);border-bottom:1px solid var(--line);color:var(--mute)}
.ruler span{font-family:var(--mono);font-size:10px;text-align:center;padding-block:4px;border-left:1px solid var(--line)}
.ruler span:first-child{border-left:0}
section{position:relative;border-bottom:1px solid var(--line)}
.sec-body{padding:clamp(40px,7vw,96px) clamp(16px,3vw,40px)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.hero-copy{padding:clamp(40px,6vw,88px) clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:28px;border-right:1px solid var(--line);min-width:0}
.eyebrow{display:flex;gap:14px;align-items:center;color:var(--mute)}
.eyebrow i{width:40px;height:1px;background:var(--ink);display:block}
h1{font-weight:900;font-size:clamp(32px,4.8vw,72px);line-height:1.12;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1 .ln{display:block;overflow:hidden}
h1 .ln b{display:block;white-space:nowrap;font-weight:900;animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
h1 .ln:nth-child(2) b{animation-delay:.12s}
@keyframes rise{from{transform:translateY(40%)}to{transform:none}}
.lead{max-width:34em;color:var(--mute);font-size:16px;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* interactive figure */
.fig{position:relative;min-width:0;display:flex;flex-direction:column}
.biz .board{min-height:460px}
.fig-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);gap:12px}
.run{font-family:var(--mono);font-size:12px;letter-spacing:.08em;border:1px solid var(--ink);background:var(--ink);color:var(--inv-ink);padding:7px 14px;cursor:pointer}
.run:hover{background:transparent;color:var(--ink)}
.board{position:relative;flex:1;min-height:440px;overflow:hidden;cursor:crosshair;
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);background-size:24px 24px}
.board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board path{fill:none;stroke:var(--ink);stroke-width:1;transition:stroke-dashoffset .9s ease}
.chip{position:absolute;transform:translateY(-50%) rotate(var(--r,0deg));white-space:nowrap;border:1px solid var(--line);background:var(--paper);padding:5px 9px;font-size:12px;line-height:1.3;transition:left 1s cubic-bezier(.6,0,.2,1),top 1s cubic-bezier(.6,0,.2,1),transform 1s cubic-bezier(.6,0,.2,1),border-color .4s;transition-delay:var(--d,0s)}
.chip .id{display:block;font-family:var(--mono);font-size:9.5px;color:var(--mute);letter-spacing:.06em}
.board.on .chip{--r:0deg;border-color:var(--ink)}
.chip.root{background:var(--ink);color:var(--inv-ink);border-color:var(--ink);font-weight:700}
.chip.root .id{color:inherit;opacity:.7}
.chip.asm{font-weight:700}
.chip:hover{z-index:3;border-color:var(--ink)}
.xy{position:absolute;right:12px;bottom:10px;color:var(--mute);pointer-events:none}
.cross-x,.cross-y{position:absolute;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
.cross-x{height:1px;left:0;right:0}.cross-y{width:1px;top:0;bottom:0}
.board:hover .cross-x,.board:hover .cross-y{opacity:.18}
.fig-cap{padding:10px 18px;border-top:1px solid var(--line);color:var(--mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{border-right:0;border-bottom:1px solid var(--line)}.chip{font-size:10.5px;padding:4px 6px}.chip .id{font-size:8.5px}}

/* ---------- vision ---------- */
.vision{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.h2{font-weight:900;font-size:clamp(30px,4vw,52px);line-height:1.25;margin:0;text-wrap:balance}
.prose p{margin:0 0 1.2em;max-width:36em}
.prose p:last-child{margin:0}
.fn{color:var(--mute);font-size:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:28px;max-width:36em}
@media (max-width:820px){.vision{grid-template-columns:minmax(0,1fr)}}

/* ---------- products ---------- */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.prod{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.prod:last-child{border-right:0}
.prod .shot{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--faint);max-width:100%}
.prod .shot img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:filter .6s,transform .8s cubic-bezier(.2,.7,.1,1)}
.prod:hover .shot img{filter:none;transform:scale(1.03)}
.prod .tx{padding:28px clamp(16px,3vw,40px) 36px;display:flex;flex-direction:column;gap:14px;flex:1}
.prod h3{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:900;line-height:1.35}
.prod p{margin:0;color:var(--mute)}
.prod .more{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;font-weight:700}
.prod .more .ar{transition:transform .25s}
.prod:hover .more .ar{transform:translateX(6px)}
@media (max-width:820px){.products{grid-template-columns:minmax(0,1fr)}.prod{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.val{position:relative;padding:32px 24px 36px;border-right:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;gap:12px;overflow:hidden;min-width:0;cursor:default}
.val:last-child{border-right:0}
.val::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s cubic-bezier(.6,0,.2,1);z-index:0}
.val>*{position:relative;z-index:1;transition:color .35s}
.val:hover::before,.val:focus-within::before{transform:none}
.val:hover>*,.val:focus-within>*{color:var(--inv-ink)}
.val .en{font-weight:900;font-size:clamp(26px,2.6vw,36px);line-height:1}
.val .jp{font-weight:700}
.val .do{color:var(--mute);font-size:14px;margin-top:auto}
@media (max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}.val:nth-child(2){border-right:0}.val:nth-child(-n+2){border-bottom:1px solid var(--line)}.val{min-height:240px}}

/* ---------- news ---------- */
.news{list-style:none;margin:0;padding:0}
.news li{border-bottom:1px solid var(--line)}
.news a{display:grid;grid-template-columns:120px 110px minmax(0,1fr) 24px;gap:20px;align-items:baseline;padding:20px clamp(16px,3vw,40px);position:relative;isolation:isolate}
.news a::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease;z-index:-1}
.news a:hover::before,.news a:focus-visible::before{transform:none}
.news a:hover,.news a:focus-visible{color:var(--inv-ink)}
.news a:hover .d,.news a:hover .tag{color:inherit}
.news .d{font-family:var(--mono);font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.news .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.news .t{font-weight:500}
.news .ar{transition:transform .25s}
.news a:hover .ar{transform:translateX(4px)}
@media (max-width:700px){.news a{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px}.news .d,.news .tag{grid-column:1}.news .t{grid-column:1}.news .ar{grid-column:2;grid-row:1/4;align-self:center}}

/* ---------- people / recruit ---------- */
.people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.people figure{margin:0;border-right:1px solid var(--line);position:relative;overflow:hidden;min-width:0}
.people figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.people figure:hover img{transform:scale(1.04)}
.people figcaption{position:absolute;left:12px;bottom:10px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.join{padding:clamp(32px,4vw,56px) clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:22px;justify-content:center;min-width:0}
@media (max-width:820px){.people{grid-template-columns:minmax(0,1fr)}.people figure{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- about + title block ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.about-l{border-right:1px solid var(--line);min-width:0}
dl.spec{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr)}
dl.spec dt,dl.spec dd{margin:0;padding:12px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--line);line-height:1.7}
dl.spec dt{color:var(--mute);font-size:12px;border-right:1px solid var(--line);white-space:nowrap;min-width:96px}
dl.spec dd{font-weight:500;font-size:14px}
dl.spec dt:last-of-type,dl.spec dd:last-of-type{border-bottom:0}
.cert{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cert a{display:block;background:#fff;padding:3px 5px;border:1px solid var(--line)}
.cert img{width:110px;height:auto}
.cert .m{font-size:12px;font-weight:400}
.map{display:flex;flex-direction:column;min-width:0}
.map-stage{position:relative;flex:1;min-height:300px;overflow:hidden}
.map-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 57%}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.pin b{background:var(--ink);color:var(--inv-ink);padding:4px 8px;font-size:10px;white-space:nowrap;font-weight:500}
.pin i{order:2;width:1px;height:18px;background:var(--ink)}
.pin::after{content:"";order:3;width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(10,10,11,.15);animation:ping 2s ease-out infinite;margin-bottom:-5px}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(10,10,11,.35)}100%{box-shadow:0 0 0 18px rgba(10,10,11,0)}}
.osm{position:absolute;right:6px;bottom:4px;font-size:9px;background:rgba(255,255,255,.8);color:#333;padding:1px 4px;letter-spacing:0;text-transform:none}
.map-link{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;gap:16px;align-items:baseline;padding:14px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font-weight:700;transition:background .25s,color .25s}
.map-link:hover{background:var(--ink);color:var(--inv-ink)}
.map-link:hover .m{color:inherit}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}.about-l{border-right:0;border-bottom:1px solid var(--line)}.map-stage{min-height:260px}}

footer .tb{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
footer .tb>div{padding:12px 16px;border-right:1px solid var(--line);min-width:0}
footer .tb>div:last-child{border-right:0}
footer .tb .k{color:var(--mute);display:block;margin-bottom:4px}
footer .tb .v{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
footer .tb .big{font-weight:900;font-size:clamp(28px,4vw,44px);line-height:1}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:18px 16px 28px;color:var(--mute);font-size:13px}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a:hover{color:var(--ink)}
@media (max-width:820px){footer .tb{grid-template-columns:repeat(2,minmax(0,1fr))}footer .tb>div:first-child{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}footer .tb>div{border-bottom:1px solid var(--line)}}


/* hero photo */
.hero-ph{margin:0;position:relative;overflow:hidden;min-width:0;min-height:420px}
.hero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 2.4s cubic-bezier(.2,.7,.1,1) both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:none}}
.hero-ph figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:10px 16px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.45))}
/* business */
.biz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-bottom:1px solid var(--line)}
.biz-tx{padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:20px;min-width:0}
.biz-tx p{margin:0;max-width:34em}
.svc{display:grid;grid-template-columns:140px minmax(0,1fr) auto 24px;gap:20px;align-items:baseline;padding:22px clamp(16px,3vw,40px);position:relative;isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.2,1);z-index:-1}
.svc:hover::before,.svc:focus-visible::before{transform:none}
.svc:hover,.svc:focus-visible{color:var(--inv-ink)}
.svc .mono{color:inherit;opacity:.7}.svc .t{font-weight:900;font-size:clamp(18px,2vw,24px)}
.svc .ar{transition:transform .25s}.svc:hover .ar{transform:translateX(6px)}
@media (max-width:900px){.hero-ph{min-height:300px}.biz{grid-template-columns:minmax(0,1fr)}.biz-tx{border-right:0;border-bottom:1px solid var(--line)}.svc{grid-template-columns:minmax(0,1fr) 20px}.svc .u,.svc>.mono:first-child{display:none}}


/* CAD viewport */
.cad{display:flex;flex-direction:column;min-width:0;border-left:0}
.cad-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.views{display:flex;border:1px solid var(--ink)}
.views button{appearance:none;border:0;border-right:1px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 10px;cursor:pointer;transition:background .2s,color .2s}
.views button:last-child{border-right:0}
.views button[aria-pressed="true"],.views button:hover{background:var(--ink);color:var(--inv-ink)}
.cad-stage{position:relative;flex:1;min-height:420px;cursor:grab;touch-action:none;
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);background-size:20px 20px}
.cad-stage.drag{cursor:grabbing}
.cad-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.props{position:absolute;right:14px;top:14px;margin:0;display:grid;grid-template-columns:auto auto;gap:3px 12px;padding:10px 12px;border:1px solid var(--line);background:var(--paper);font-size:10px;letter-spacing:.06em}
.props dt{color:var(--mute)}.props dd{margin:0;text-align:right}
.hint{position:absolute;left:14px;bottom:10px;color:var(--mute)}
@media (max-width:900px){.cad-stage{min-height:340px}.props{display:none}}

/* link card */
.lcard{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 24px;align-items:center;gap:0 20px;border:1px solid var(--ink);background:var(--paper);transition:background .25s,color .25s;max-width:560px}
.lcard .lth{display:block;aspect-ratio:1200/630;overflow:hidden;border-right:1px solid var(--ink);background:#fff}
.lcard .lth img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.lcard:hover .lth img{transform:scale(1.06)}
.lcard .ltx{display:flex;flex-direction:column;gap:4px;padding-block:12px;min-width:0}
.lcard b{font-weight:700;font-size:15px;line-height:1.45}
.lcard:hover{background:var(--ink);color:var(--inv-ink)}
.lcard:hover .m{color:inherit;opacity:.75}
.lcard b span{display:inline-block}
/* 狭い画面：画像は高さいっぱいに切り抜き、ホバーで右へ動く矢印が枠からはみ出さないよう右に余白を取る */
@media (max-width:480px){.lcard{grid-template-columns:76px minmax(0,1fr) 16px;gap:0 12px;padding-right:14px}.lcard .lth{align-self:stretch;aspect-ratio:auto}.lcard b{font-size:13px}}
.bizp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch}
.bizp .tx{padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line);min-width:0}
.bizp .tx p{margin:0;max-width:34em}
.bizp figure{margin:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,40px);background:#fff;min-width:0}
.bizp figure img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.bizp figure:hover img{transform:scale(1.02)}
@media (max-width:820px){.bizp{grid-template-columns:minmax(0,1fr)}.bizp .tx{border-right:0;border-bottom:1px solid var(--line)}}
.svc-wrap{padding:22px clamp(16px,3vw,40px)}
/* section heading: 黒の太罫で区切り、英字タイトル＋和文ラベル＋寸法線 */
.sec-head{display:grid;grid-template-columns:auto auto minmax(24px,1fr) auto;align-items:end;gap:6px 18px;padding:clamp(28px,4vw,48px) clamp(16px,3vw,40px) 18px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);color:var(--ink)}
.sec-head .no{grid-column:1/-1;color:var(--mute)}
.sec-head .ttl{margin:0;font-weight:900;font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.015em}
.sec-head .jp{font-weight:700;font-size:14px;padding-bottom:5px}
.sec-head .dim{height:1px;background:var(--mute);opacity:.5;position:relative;margin-bottom:13px}
.sec-head .dim::before,.sec-head .dim::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--mute)}
.sec-head .dim::before{left:0}.sec-head .dim::after{right:0}
.sec-head .coord{color:var(--mute);padding-bottom:6px;white-space:nowrap}
.sec-head a.coord{color:var(--ink);border-bottom:1px solid var(--ink)}
.sec-head a.coord:hover{opacity:.6}
@media (max-width:600px){.sec-head{grid-template-columns:auto minmax(0,1fr) auto}.sec-head .dim{display:none}}
/* 本文の見出しはセクション見出しより一段下げる */
.h2{font-weight:700!important;font-size:clamp(22px,2.6vw,34px)!important;line-height:1.45!important}
/* reveal: 静止状態でも全て見える。スクロール時に少しだけ持ち上げる */
.rv{transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.rv.pre{transform:translateY(18px)}
.sample{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--inv-ink);padding:6px 10px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* spacing: セクションごとに独立した枠にし、枠の間に余白を取る */
.sheet{border-inline:0;padding-bottom:clamp(40px,6vw,80px)}
.sheet>.ruler{border:1px solid var(--line);border-bottom:0}
.sheet>.hero{border:1px solid var(--line)}
.sheet>section{border:1px solid var(--line);border-top:0;margin-top:clamp(56px,8vw,120px)}
.sheet>footer{border:1px solid var(--line);margin-top:clamp(56px,8vw,120px)}
.pad:not([style]),.sec-body{padding-block:clamp(48px,7vw,104px)}
.pad[style]{padding-top:clamp(40px,5vw,72px)}
.sec-head{padding-top:clamp(32px,4.4vw,56px);padding-bottom:22px}


/* Fig.1 flow: 集める → 関連づける → 活用する */
.biz{grid-template-columns:minmax(0,1fr)!important}
.biz-tx{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:start}
.biz-tx p{margin:0;max-width:40em}
.flow{border:1px solid var(--line);min-width:0}
.flow-bar{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.flow-bar>.mono:first-child{margin-right:auto}
.steps{display:flex;border:1px solid var(--ink)}
.step{appearance:none;border:0;border-right:1px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:700;padding:6px 14px;cursor:pointer;display:flex;gap:8px;align-items:baseline;transition:background .2s,color .2s}
.step{white-space:nowrap}
@media (max-width:480px){.steps{flex:1 1 100%}.step{flex:1;justify-content:center;gap:4px;padding:6px 6px;font-size:12px}}
@media (max-width:400px){.chip{font-size:9.5px;padding:3px 4px}.chip .id{font-size:7.5px}}
.step:last-child{border-right:0}
.step .mono{font-size:10px;color:var(--mute)}
.step[aria-pressed="true"]{background:var(--ink);color:var(--inv-ink)}
.step[aria-pressed="true"] .mono{color:inherit;opacity:.7}
.flow-grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.05fr) minmax(0,1.9fr) 28px minmax(0,1.15fr);gap:clamp(28px,3.4vw,52px);padding:24px 22px 56px}
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.links path{fill:none;stroke:var(--line);stroke-width:1.2;transition:stroke .4s}
.links marker path{fill:var(--mute);stroke:none}
.links path.act{stroke:var(--ink);stroke-dasharray:5 4;animation:flowdash .9s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-9}}
.col{display:flex;flex-direction:column;gap:12px;min-width:0;position:relative;z-index:1;transition:opacity .45s}
.flow.playing .col{opacity:.28}
.flow.playing .col.on{opacity:1}
.col-h{color:var(--mute);padding-bottom:8px;border-bottom:1px solid var(--ink)}
.col-t{font-size:15px;font-weight:900;line-height:1.45}
.grp{display:flex;flex-direction:column;gap:8px}
.grp-h{font-size:12px;font-weight:700;color:var(--mute)}
.grp+.grp{margin-top:10px}
.nd{border:1px solid var(--ink);background:var(--paper);padding:8px 10px;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.nd>.mono{font-size:9.5px;color:var(--mute);letter-spacing:.08em}
.nd.box b{font-size:12.5px;font-weight:700}
.nd .li{font-size:12px;border-top:1px solid var(--line);padding-top:4px;margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tags span{font-family:var(--mono);font-size:10px;border:1px solid var(--line);padding:2px 6px}
.conv{color:var(--ink);text-align:center;padding-block:4px}
.fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ink)}
.fmt span{font-size:11px;text-align:center;padding:8px 2px;border-right:1px solid var(--line)}
.fmt span:last-child{border-right:0}
.hub{align-self:flex-start;background:var(--ink);color:var(--inv-ink);padding:6px 12px;font-size:10.5px}
.sec-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px}
.sec-tags span:not(.mono){border:1px solid var(--line);padding:2px 8px}
.base{position:absolute;left:22px;bottom:14px;color:var(--mute);background:var(--paper);padding-right:8px;z-index:1}
.c2 .board{flex:1;min-height:380px;border:1px solid var(--line);background:var(--paper)}
@media (max-width:1000px){
  .flow-grid{grid-template-columns:minmax(0,1fr);padding-bottom:24px;row-gap:48px}
  .base{display:none}
  .biz-tx{grid-template-columns:minmax(0,1fr)}
}

/* flow: packets / meters / narration（参考: システム構成図アニメーション） */
.meters{display:flex;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line)}
.meter{border:1px solid var(--line);padding:3px 10px;border-radius:999px;font-size:10px;color:var(--mute);display:inline-flex;gap:8px;align-items:baseline}
.meter b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.meter.sim{margin-left:auto;border-style:dashed}
.pk{fill:var(--ink)}
.pk-h{fill:var(--ink);opacity:.14}
.nd,.fmt,.hub,.c2 .board,#c-plm{transition:box-shadow .25s,background .25s}
.pulse{box-shadow:0 0 0 3px var(--ink)!important}
.chip.hit{background:var(--ink)!important;color:var(--inv-ink)!important}
.chip.hit .id{color:inherit!important;opacity:.7}
.narr{display:flex;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;min-height:46px;background:var(--faint)}
.narr .pr{color:var(--mute)}
.narr #narr{letter-spacing:.02em}
.caret{display:inline-block;width:7px;height:14px;background:var(--ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* less grid: 線は「セクションの区切り」と「表・リスト」だけに使い、それ以外は余白で分ける */
.sheet>.ruler{display:none}
.sheet>.hero,.sheet>section,.sheet>footer{border:0}
.sheet>section{margin-top:clamp(72px,10vw,150px)}
.sec-head{border-bottom:0;padding-inline:0;padding-bottom:0}
.sec-head .coord{display:none}
.sec-head .dim{margin-bottom:14px}
.pad:not([style]),.sec-body{padding-inline:0;padding-block:clamp(36px,5vw,64px) 0}
.pad[style]{padding-inline:0;padding-top:clamp(28px,4vw,48px)}
.hero{gap:clamp(24px,4vw,56px);padding-top:clamp(24px,4vw,48px);border-bottom:0}
.hero-copy{border:0!important;padding-inline:0}
.biz,.bizp,.about,.people,.panel,.products{gap:clamp(28px,4vw,56px);border:0;padding-top:clamp(36px,5vw,64px)}
.biz-tx,.bizp .tx,.about-l,.panel .tx,.prod,.people figure,.join{border:0!important;padding-inline:0}
.bizp .tx{padding-block:0}
.biz-tx{padding-block:0}
.join{padding-block:0}
/* 図・ビューポートは一つの物として外枠だけ持つ */
.fig,.cad{border:1px solid var(--line)}
.board,.cad-stage{background-image:none}
.cad-stage{background:radial-gradient(circle at 50% 55%,var(--faint),transparent 70%)}
.bizp figure{border:1px solid var(--line)}
.map{border:1px solid var(--line)}
/* values / members: 縦線をやめ、カードの上端だけ罫線 */
.values,.members{gap:clamp(16px,2.4vw,32px);border:0;padding-top:clamp(28px,4vw,48px)}
.val{border:0!important;border-top:2px solid var(--ink)!important;padding-inline:20px}
.mem{border:0!important;border-top:1px solid var(--ink)!important}
.mem summary{padding-inline:0}.mem[open] summary{padding-inline:16px}
.mem .bio{padding-inline:0}
/* culture tabs: 下線タブに */
.tabs{border:0;gap:8px;margin-top:clamp(28px,4vw,48px);grid-template-columns:repeat(3,minmax(0,1fr))}
.tab{border:0!important;border-bottom:2px solid var(--line)!important;padding-inline:0;background:transparent}
.tab[aria-selected="true"]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)!important}
.tab[aria-selected="true"] .mono{color:var(--mute);opacity:1}
.tab:not([aria-selected="true"]):hover{background:transparent;border-bottom-color:var(--mute)!important}
.panel .tx{padding-block:0}
.practice{border-top:0}
.practice li{border-bottom:1px solid var(--line)}
.dei{border:0;padding-inline:0;margin-top:clamp(28px,4vw,48px);background:var(--faint);padding:24px}
/* 一覧（news・リンク行・表）は行罫だけ残す */
.news{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--ink)}
.news a,.row,.svc-wrap{padding-inline:0}
.news a::before,.row::before{inset:0 -12px}
.rows{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--ink)}
.row{border-top:0;border-bottom:1px solid var(--line)}
dl.spec dt{border-right:0;padding-left:0}
dl.spec dd{padding-left:0}
dl.spec dt:last-of-type,dl.spec dd:last-of-type{border-bottom:1px solid var(--line)}
.ints{border:0;gap:clamp(16px,2.4vw,32px);margin-top:clamp(28px,4vw,48px)}
.int{border:0!important}
.int .th{border:1px solid var(--line)}
.int .tx{padding-inline:0}
.deck{border:0;margin-top:clamp(28px,4vw,48px)}
.deck-bar,.deck-foot,.thumbs{padding-inline:0;border:0}
.deck-stage{border-radius:0}
.gal-bar{border:0;padding-inline:0;margin-top:clamp(48px,6vw,80px)}
.gal{background:transparent;gap:12px}
.progress{margin-top:12px}
.people figure{overflow:hidden}
.svc-wrap{padding-block:clamp(28px,4vw,48px) 0}
@media (max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}.members{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tabs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.members{grid-template-columns:minmax(0,1fr)}}
/* global header */
header.gh{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{display:flex;align-items:baseline;gap:10px;font-weight:900;font-size:20px}
.logo small{font-family:var(--mono);font-weight:400;font-size:10px;color:var(--mute);letter-spacing:.14em}
.gnav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.gnav a.nl{position:relative;padding-block:4px;font-size:14px}
.gnav a.nl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.gnav a.nl:hover::after,.gnav a.nl[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.gnav a.nl[aria-current="page"]{font-weight:700}
.gnav .ext{font-family:var(--mono);font-size:10px;color:var(--mute);margin-left:3px}
/* 900px 以下はリンクを畳み、メニューボタンで開閉する（assets/js/nav.js） */
.gnav{display:flex;align-items:stretch;gap:26px}
.gnav .jp,.gnav .gnav-links .ar,.mtog{display:none}
.mtog{position:relative;width:48px;padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.mtog i{position:absolute;left:14px;right:14px;top:calc(50% - 4px);height:1.5px;background:currentColor;transition:transform .25s,top .25s}
.mtog i+i{top:calc(50% + 3px)}
.gh.open .mtog i{top:calc(50% - .75px);transform:rotate(45deg)}
.gh.open .mtog i+i{transform:rotate(-45deg)}
@media (hover:hover){.mtog:hover{background:var(--grad);color:#fff;border-color:transparent}}
@media (max-width:900px){
  .gnav{gap:8px}
  .mtog{display:block}
  .gnav .gnav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:0 16px;background:var(--paper);border-bottom:1px solid var(--line)}
  .gh.open .gnav .gnav-links{display:flex}
  .gnav .gnav-links li+li{border-top:1px solid var(--line)}
  .gnav .gnav-links a.nl{display:flex;align-items:baseline;gap:12px;padding:16px 0;font-size:17px}
  .gnav .gnav-links a.nl::after{content:none}
  .gnav .jp{display:inline;font-size:12px;color:var(--mute)}
  .gnav .gnav-links .ar,.gnav .gnav-links .ext{display:inline-block;margin-left:auto}
  .gnav .gnav-links .ext{font-family:inherit;font-size:inherit;color:inherit}
}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);padding:10px 18px;font-weight:700;font-size:14px;transition:background .2s,color .2s}
.btn.fill{background:var(--ink);color:var(--inv-ink)}
.btn:hover{background:var(--ink);color:var(--inv-ink)}
.btn.fill:hover{background:transparent;color:var(--ink)}
.ar{display:inline-block;transition:transform .25s}
a:hover .ar{transform:translateX(5px)}
.crumb{display:flex;gap:10px;color:var(--mute);padding-top:28px}
.crumb a:hover{color:var(--ink)}

/* footer */
footer.gf{max-width:var(--w);margin:clamp(56px,8vw,120px) auto 0;border:1px solid var(--line)}
.gf .sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.gf .sites a{padding:18px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;transition:background .2s,color .2s}
.gf .sites a:last-child{border-right:0}
.gf .sites a:hover{background:var(--ink);color:var(--inv-ink)}
.gf .sites a:hover .m{color:inherit}
.gf .sites b{font-size:16px;font-weight:900}
.gf .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px;color:var(--mute);font-size:13px}
.gf .foot nav{display:flex;gap:20px;flex-wrap:wrap}
.gf .foot a:hover{color:var(--ink)}
.gf .isms{height:34px;width:auto;background:#fff;padding:2px 4px}
@media (max-width:700px){.gf .sites{grid-template-columns:minmax(0,1fr)}.gf .sites a{border-right:0;border-bottom:1px solid var(--line)}}

footer.gf{border:1px solid var(--line)!important;margin-inline:0}
.gf .foot{padding:16px!important}
/* hover accent: 普段は白黒、ホバー時だけ青のグラデーション */
:root{--g1:#2266d8;--g2:#46aaf0;--grad:linear-gradient(90deg,var(--g1),var(--g2))}
/* 文字：左から塗り替わる */
.page-hero h1,.hero h1 .ln b,.mem summary .nm,.ccard b,.route h3,.lcard b,.gnav a.nl,.int .tx b,.val .en{
  background-image:linear-gradient(90deg,var(--g1) 0%,var(--g2) 50%,currentColor 50%,currentColor 100%);
  background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  transition:background-position .6s cubic-bezier(.6,0,.2,1)}
.page-hero:hover h1,.hero h1:hover .ln b,.mem summary:hover .nm,.route:hover h3,.gnav a.nl:hover,.int:hover .tx b{
  -webkit-text-fill-color:transparent;background-position:0 0}
.hero h1 .ln:nth-child(2) b{transition-delay:.06s}.hero h1 .ln:nth-child(3) b{transition-delay:.12s}
.gnav a.nl::after{background:var(--grad)!important}
/* 面：黒の反転をグラデーションに置き換える */
.btn:hover,.btn.fill:hover,.run:hover,.step:hover,.views button:hover,.gal-bar button:hover,.dnav:hover,.filters button:hover{
  background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
.btn:hover .mono,.step:hover .mono{color:inherit!important}
.row::before,.news a::before,.val::before{background:var(--grad)!important}
.row:hover,.news a:hover,.val:hover>*,.val:focus-within>*{color:#fff!important}
.row:hover .m,.row:hover .mono,.row:hover .u,.row:hover .d,.news a:hover .d,.news a:hover .tag,.news a:hover .sl{color:rgba(255,255,255,.85)!important}
.ccard,.lcard,.map-link{background-image:var(--grad);background-size:0% 100%;background-repeat:no-repeat;transition:background-size .5s cubic-bezier(.6,0,.2,1),color .3s,border-color .3s!important}
.ccard:hover,.lcard:hover,.map-link:hover{background-color:transparent!important;background-size:100% 100%;color:#fff!important;border-color:var(--g1)!important}
.ccard:hover b,.lcard:hover b{-webkit-text-fill-color:#fff}
.ccard:hover .m,.ccard:hover .cd,.ccard:hover .u,.lcard:hover .m,.map-link:hover .m{color:rgba(255,255,255,.85)!important}
.ccard:hover .cf{border-color:rgba(255,255,255,.35)!important}
.lcard:hover .lth{border-color:transparent}
.tab:not([aria-selected="true"]):hover{border-bottom-color:var(--g2)!important}
.mem summary:hover .ph img{transform:scale(1.04)}
.pin b{transition:background .3s}.map:hover .pin b{background:var(--grad)}
@media (prefers-reduced-motion:reduce){.page-hero h1,.hero h1 .ln b{transition:none}}

.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);padding:10px 4px 8px;font-size:11px;line-height:1.35;text-align:center;background:var(--paper);transition:border-color .25s,color .25s,transform .25s}
.app svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.app:hover{border-color:var(--g1);color:var(--g1);transform:translateY(-2px)}
@media (max-width:1180px) and (min-width:1001px){.apps{grid-template-columns:minmax(0,1fr)}.app{flex-direction:row;justify-content:flex-start;padding:8px 10px;text-align:left}}
.srv .app .mono{font-size:10px;letter-spacing:.08em}
@media (max-width:1180px) and (min-width:1001px){.srv{grid-template-columns:repeat(3,minmax(0,1fr))}.srv .app{flex-direction:column;justify-content:center;padding:8px 2px;text-align:center}}
.ndi{display:grid!important;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center}
.ndi svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ndi .ndt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ndi .ndt>.mono{font-size:9.5px;color:var(--mute);letter-spacing:.08em}
.fmt .fc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 2px 8px!important}
.fmt .fc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* 00列と01列の箱の縦位置をそろえる */
.c0 .grp:first-of-type{gap:12px}
.c0 .grp:first-of-type .grp-h,.c1 .col-t{min-height:24px;display:flex;align-items:flex-end;margin:0}
#s-know,#s-dwg,#c-chat,#c-ai{min-height:78px;box-sizing:border-box}
@media (max-width:1000px){.c0 .grp:first-of-type .grp-h,.c1 .col-t{min-height:0}#s-know,#s-dwg,#c-chat,#c-ai{min-height:0}}
.ccard:hover,.lcard:hover,.map-link:hover{background-image:var(--grad)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}

.app>span{font-size:10.5px;word-break:keep-all;overflow-wrap:anywhere}

/* 構造化データの領域（モックアップ準拠） */
.fzone{background:var(--faint);padding:14px 14px 34px;margin-inline:-14px;display:flex;flex-direction:column;gap:12px}
.fzone .fmt{background:var(--paper)}
.fz-cap{font-size:11px;text-align:center;color:var(--ink)}
.flow-grid{padding-bottom:28px!important}
@media (max-width:1000px){.fzone{margin-inline:0}}

/* MCP / API：02と03の間に置くハブ */
.flow-grid>.c3{grid-column:5}
.flow-grid>.hub{position:absolute;z-index:2;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;font-size:11px;font-weight:500;letter-spacing:.1em;line-height:1.25;transition:background .3s,color .3s,border-color .3s,box-shadow .25s,opacity .45s}
.flow-grid>.hub:hover{background:var(--grad);color:#fff;border-color:transparent}
.flow.playing .hub{opacity:.28}.flow.playing .hub.on{opacity:1}
@media (max-width:1000px){.flow-grid>.c3{grid-column:auto}.flow-grid>.hub{position:static;justify-self:center}}

/* 戻りの線のラベル（日々使うほど賢くなる）：線の上に白地で重ねる。スマホは右余白に縦書き */
.flow-grid>.loop{position:absolute;z-index:2;transform:translate(-50%,-50%);background:var(--paper);color:var(--ink);font-size:11px;line-height:1.3;letter-spacing:.08em;padding:2px 10px;white-space:nowrap;transition:opacity .45s}
.flow.playing .loop{opacity:.28}.flow.playing .loop.on{opacity:1}
@media (max-width:1000px){.flow-grid>.loop{writing-mode:vertical-rl;padding:10px 1px}}
#u-apps .app>span{font-size:10px;letter-spacing:0;white-space:normal;word-break:keep-all;overflow-wrap:normal;max-width:100%}
#u-apps .app{padding-inline:2px}

/* 版の積み重ね：最新版を左下、旧版は右上の奥へ・グレーアウト */
.vstack{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.board.ver-on .vstack{transform:scale(.84)}
.vlayer{position:absolute;inset:0;background:var(--paper);transition:border-color .4s}
.board.ver-on .vlayer{border:1px solid var(--ink)}
.vlayer.ghost{pointer-events:none;border:1px solid var(--mute)!important;transform:translate(calc(var(--k,0)*16px),calc(var(--k,0)*-16px));opacity:calc(1 - var(--k,0)*.34);filter:grayscale(1) contrast(.55) brightness(1.08);transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .8s,filter .8s}
.vlayer.ghost .chip{transition:none!important}
.chip .ver{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;border:1px solid currentColor;padding:0 5px;margin-left:6px;vertical-align:1px}
.chip.root.vup .ver{animation:vup .6s ease}
@keyframes vup{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}

/* 各列の最初の矩形の上端をそろえる／01・02の見出しは中央 */
.c0 .grp:first-of-type .grp-h,.c1 .col-t,.c2 .col-t,.c3 .col-sp{min-height:24px;height:24px;display:flex;align-items:center;margin:0;box-sizing:border-box}
.c1 .col-t,.c2 .col-t{justify-content:center;text-align:center;white-space:nowrap}
.c3 .col-sp{display:block}
@media (max-width:1000px){.c0 .grp:first-of-type .grp-h,.c1 .col-t,.c2 .col-t{height:auto;min-height:0}.c3 .col-sp{display:none}}

/* 構造化データに変換：縦の線に粒が流れる。文字は線の上に白地で重ねる */
.c1 .conv{align-self:center;position:relative;z-index:1;background:var(--paper);padding:2px 10px;letter-spacing:.08em}


/* 組立図：図枠・部品表・表題欄 */
.dframe{position:absolute;inset:10px;border:1px solid var(--ink);pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) 25% 0/1px 6px no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 0/1px 6px no-repeat,linear-gradient(var(--ink),var(--ink)) 75% 0/1px 6px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 0 33.3%/6px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 66.6%/6px 1px no-repeat}
.dframe .zt,.dframe .zl{position:absolute;font-family:var(--mono);font-size:8.5px;color:var(--mute)}
.dframe .zt{top:1px}.dframe .zt:nth-child(1){left:12.5%}.dframe .zt:nth-child(2){left:37.5%}.dframe .zt:nth-child(3){left:62.5%}.dframe .zt:nth-child(4){left:87.5%}
.dframe .zl{left:3px}.dframe .zl:nth-child(5){top:16.6%}.dframe .zl:nth-child(6){top:50%}.dframe .zl:nth-child(7){top:83.3%}
.plist{position:absolute;right:10px;top:10px;z-index:2;border-collapse:collapse;background:var(--paper);border:1px solid var(--ink);font-size:9px;letter-spacing:.04em;text-transform:none;width:148px}
.plist th{font-weight:500;color:var(--mute);text-align:left;padding:3px 6px;border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:8px}
.plist td{padding:3px 6px;border-bottom:1px solid var(--line);vertical-align:baseline;transition:color .2s}
.plist tr:last-child td{border-bottom:0}
.plist td:first-child,.plist td:last-child{text-align:center;width:1%}
.plist td:nth-child(2){font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:0;white-space:nowrap}
.plist td a{color:inherit}
.plist small{font-family:var(--mono);font-weight:400;font-size:8.5px;color:var(--mute);margin-left:6px}
/* グラデーションは行全体に1本でかける（セルごとにかけると列ごとに途切れる） */
.plist tbody tr{transition:background .2s}.plist tr.on{background:var(--grad)}.plist tr.on td{color:#fff}.plist tr.on small{color:rgba(255,255,255,.85)}
.tblock{position:absolute;right:10px;bottom:10px;z-index:2;border-collapse:collapse;background:var(--paper);border:1px solid var(--ink);font-size:8.5px;text-transform:none;letter-spacing:.04em;width:220px}
.tblock th,.tblock td{border:1px solid var(--ink);padding:2px 6px;text-align:left;line-height:1.5}
.tblock tr:first-child th,.tblock tr:first-child td{border-top:0}
.tblock tr:last-child th,.tblock tr:last-child td{border-bottom:0}
.tblock tr>*:first-child{border-left:0}.tblock tr>*:last-child{border-right:0}
.tblock th{font-weight:400;color:var(--mute);text-transform:uppercase;font-size:7.5px;letter-spacing:.08em;white-space:nowrap;width:1%}
.tblock td b{font-family:var(--sans);font-size:13px;font-weight:900;letter-spacing:0}
.hint{left:22px!important;bottom:18px!important}
#cadx{font-weight:500}
@media (max-width:900px){.plist{width:132px}.tblock{width:190px}}
.logo{font-size:24px!important;letter-spacing:-.01em}