/* ═══════════════════════════════════════════════════════════════
   INTEPRAL — 共通スタイル（v15：色面・写真・密度を入れた版）
   ───────────────────────────────────────────────────────────────
   面の使い分け（同じ面を3連続させない）
     Soft White  … 情報整理・事例・料金
     Deep Navy   … Position / AI / 人間の判断
     Ultramarine … Hero / Decision / Contact
     Photography … Global / Founder / Case
   密度の高い画面（Product UI・Landscape）と、巨大見出しの画面を交互に置く。
   🚩 本文は常に表示。JSが動かなくても全部読める。
   ═══════════════════════════════════════════════════════════════ */

/* ── 文字サイズの基準（2026-08-31 髙橋さん指示「全体的に文字が小さい」）──
   個々の font-size を触ると数百箇所になり事故る。ルートを 110% にして
   rem 指定を一律で1.1倍にする。clamp の中の vw は変わらないため、
   小さい下限値（英字ラベルの .62rem など）が確実に持ち上がる。 */
html{font-size:110%}

:root{
  --principle:#5546A8;
  --violet-d:#3E3184;      /* ウルトラマリン面の下地 */
  --violet-l:#6D5FC4;
  --ink:#18233B;
  --paper:#F6F5F0;
  --peri:#B7B9DC;
  --ice:#C9DCE8;
  --deep:#0F1626;
  --deepest:#080C14;
  --ink-2:#5A6379;
  --ink-3:#828AA0;
  --line:rgba(24,35,59,.16);
  --line-2:rgba(24,35,59,.08);
  --line-d:rgba(255,255,255,.16);
  --line-d2:rgba(255,255,255,.08);
  --white:#FFFFFF;

  --grot:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --min:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;

  --f1:.75rem; --f2:.8125rem; --f3:.9375rem; --f4:1.0625rem;
  --f5:clamp(1.1875rem,1.5vw,1.375rem);
  --f6:clamp(1.5rem,2.6vw,2rem);
  --f7:clamp(2rem,4.4vw,3.25rem);
  --f8:clamp(2.75rem,7.5vw,5.75rem);

  --sp:clamp(96px,11vw,168px);
  --sp-s:clamp(48px,6vw,80px);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --e:cubic-bezier(.16,1,.3,1);
  --max:1320px; --gut:clamp(20px,4.5vw,56px); --hh:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hh)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--jp);font-size:var(--f4);line-height:1.9;
  letter-spacing:.015em;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--principle);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--peri);outline-offset:3px}
strong{font-weight:600}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sp);position:relative}
.sec.tight{padding-block:var(--sp-s)}

/* ── 面 ── */
.s-white{background:var(--paper)}
.s-paper{background:var(--white)}
.s-navy{background:var(--deep);color:#EEF0F4}
.s-navy h1,.s-navy h2,.s-navy h3{color:var(--white)}
.s-deepest{background:var(--deepest);color:#EEF0F4}
.s-deepest h2,.s-deepest h3{color:var(--white)}
.s-violet{background:var(--violet-d);color:#F2F0FF}
.s-violet h1,.s-violet h2,.s-violet h3{color:var(--white)}

/* グリッド地（テック装飾ではなく、方眼としての下地） */
.grid-bg{position:relative;overflow:hidden}
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 120% 80% at 70% 30%,#000 30%,transparent 78%);
}
.grid-bg.light::before{
  background-image:linear-gradient(rgba(24,35,59,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(24,35,59,.055) 1px,transparent 1px);
}

.eyebrow{
  font-family:var(--grot);font-size:var(--f1);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--principle);
  display:block;margin-bottom:var(--s3);
}
.s-navy .eyebrow,.s-deepest .eyebrow,.s-violet .eyebrow,.on-photo .eyebrow{color:var(--peri)}
h1{font-size:var(--f7);font-weight:600;line-height:1.36;letter-spacing:.005em;text-wrap:balance}
h2{font-size:var(--f7);font-weight:600;line-height:1.42;letter-spacing:.005em;text-wrap:balance;max-width:20em}
h2.huge{font-size:var(--f8);line-height:1.28;max-width:14em}
h3{font-size:var(--f6);font-weight:600;line-height:1.5}
h4{font-size:var(--f5);font-weight:600;line-height:1.6}
.lede{margin-top:var(--s4);font-size:var(--f5);line-height:1.9;max-width:38em;color:var(--ink-2)}
.s-navy .lede,.s-deepest .lede{color:#B7BECD}
.s-violet .lede{color:#D8D3F5}
.sec-head{margin-bottom:var(--sp-s)}
.body-copy{max-width:38em}
.body-copy p+p{margin-top:var(--s3)}

/* ══════════ HEADER ══════════ */
.top{
  position:sticky;top:0;z-index:80;height:var(--hh);
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line-2);
}
.top .wrap{height:100%;display:flex;align-items:center;gap:var(--s4)}
.brand{font-family:var(--grot);font-weight:600;font-stretch:104%;font-size:1.05rem;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.brand .bar{color:var(--peri);font-weight:400;margin:0 .06em}
.brand .p{color:var(--principle)}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:var(--gut);top:.5rem}

/* ══════════ ボタン ══════════ */
.btn{display:inline-flex;align-items:center;gap:.7em;padding:1em 1.8em;font-size:var(--f3);font-weight:600;letter-spacing:.02em}
.btn.solid{background:var(--white);color:var(--violet-d)}
.btn.solid:hover{background:var(--peri);text-decoration:none}
.btn.ghost{border:1px solid rgba(255,255,255,.4);color:#F2F0FF}
.btn.ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08);text-decoration:none}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.dark:hover{background:var(--principle);text-decoration:none}
.btn.violet{background:var(--principle);color:var(--white)}
.btn.violet:hover{background:var(--violet-d);text-decoration:none}
.btn.line{border:1px solid var(--line);color:var(--ink)}
.btn.line:hover{border-color:var(--principle);color:var(--principle);text-decoration:none}

.crumb{padding-top:var(--s4);font-family:var(--grot);font-size:var(--f1);letter-spacing:.12em;color:var(--ink-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--principle)}
.crumb span{margin:0 .6em;opacity:.5}
.s-navy .crumb,.s-navy .crumb a,.s-violet .crumb,.s-violet .crumb a{color:rgba(255,255,255,.6)}

/* ══════════ HERO（ウルトラマリンの大きな色面） ══════════ */
.hero{
  background:var(--violet-d);
  color:#F2F0FF;padding-block:clamp(64px,8vw,104px) clamp(56px,7vw,96px);
  position:relative;overflow:hidden;
}
.hero .wrap{position:relative;z-index:2}
.hero .grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,4vw,68px);align-items:center}
@media (max-width:1080px){.hero .grid{grid-template-columns:1fr;gap:var(--s5)}}
.logotype{font-family:var(--grot);font-weight:500;font-size:clamp(1.375rem,2.8vw,2rem);letter-spacing:.1em;color:#F2F0FF;display:flex;align-items:baseline}
.logotype .bar{color:var(--peri);font-weight:200;margin:0 .1em}
.swap{position:relative;display:inline-block}
.swap .gh{visibility:hidden}
.swap .g,.swap .p{position:absolute;inset:0;text-align:center}
.swap .g{color:#F2F0FF;animation:gOut .85s var(--e) 1s both}
.swap .p{color:var(--white);animation:pIn .85s var(--e) 1s both}
@keyframes gOut{to{opacity:0;transform:translateY(-.4em)}}
@keyframes pIn{from{opacity:0;transform:translateY(.4em)}}
.hero h1{margin-top:clamp(24px,3vw,38px);font-size:var(--f8);line-height:1.3;color:var(--white);max-width:12em}
.hero .def{margin-top:clamp(24px,3vw,36px);font-size:var(--f5);line-height:1.85;color:#E4E0FA;max-width:26em}
.hero .aux{margin-top:var(--s3);font-size:var(--f3);line-height:1.9;color:#B9B2E4;max-width:32em}
.hero .cta-row{margin-top:clamp(30px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.caps{margin-top:clamp(40px,4.6vw,60px);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:.5em clamp(16px,2.2vw,32px);
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.16em;color:#A99FDC}

/* Hero に重ねる UI レイヤー */
.stack{position:relative}
.stack .flow{position:relative;z-index:2}
.peek-bar{display:flex;gap:var(--s2);align-items:center;padding:.6em .9em;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.12em;color:#8E98B4}
.peek-bar .st{margin-left:auto;color:var(--peri);border:1px solid rgba(183,185,220,.5);padding:.15em .6em}
.peek-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);padding:.55em .9em;border-bottom:1px solid rgba(255,255,255,.07);font-size:var(--f2);color:#C6CCDA}
.peek-row b{color:var(--white);font-weight:600}
.peek-row .t{font-family:var(--grot);font-size:var(--f1);color:#7A85A3;white-space:nowrap}
.peek-ai{padding:.75em .9em;font-size:var(--f2);line-height:1.75;color:#C6CCDA;border-left:2px solid var(--peri);margin:.7em .9em 1em}

/* ══════════ System Flow ══════════ */
.flow{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);backdrop-filter:blur(2px)}
.flow-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:.85em 1.15em;
  border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:#B9B2E4}
.flow-bar .live{display:inline-flex;align-items:center;gap:.55em}
.flow-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--peri);display:block}
.flow-body{padding:clamp(14px,1.8vw,20px)}
.node{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:0 var(--s2);align-items:center;padding:.62em .55em;border:1px solid transparent}
.node+.node{margin-top:2px}
.node .idx{font-family:var(--grot);font-size:var(--f1);color:#9990CE;font-variant-numeric:tabular-nums}
.node .nm{font-size:var(--f3);color:#DEDAF6}
.node .nm b{color:var(--white);font-weight:600}
.node .tp{font-family:var(--grot);font-size:var(--f1);letter-spacing:.1em;color:#9990CE;white-space:nowrap}
.node.on{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14)}
.node.on .tp{color:var(--white)}
.link{height:14px;margin-left:1.25rem;border-left:1px solid rgba(255,255,255,.24)}
.flow-note{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);font-size:var(--f2);line-height:1.85;color:#B9B2E4}
.flow-note b{color:var(--white);font-weight:600}

/* 下層ページのヘッダー */
.page-head{padding-block:clamp(28px,4vw,44px) clamp(56px,7vw,92px)}
.page-head h1{margin-top:var(--s4);max-width:17em}
.page-head .sub{margin-top:var(--s4);font-size:var(--f5);line-height:1.9;max-width:36em}

/* ══════════ Editorial List ══════════ */
.plist{border-top:1px solid var(--line)}
.plist li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:var(--s3);align-items:baseline;
  padding-block:clamp(20px,2.6vw,28px);border-bottom:1px solid var(--line-2)}
.plist .n{font-family:var(--grot);font-size:var(--f2);color:var(--principle);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.plist .t{font-size:var(--f6);font-weight:400;line-height:1.55;max-width:24em}
@media (max-width:640px){.plist li{grid-template-columns:2.6rem minmax(0,1fr);gap:var(--s2)}.plist .t{font-size:var(--f5)}}
.pclose{margin-top:var(--sp-s);font-size:var(--f7);line-height:1.45;max-width:16em;text-wrap:balance;font-weight:600}
.pclose b{color:var(--principle)}

/* ══════════ 写真の面 ══════════ */
.photo-band{position:relative;min-height:min(78vh,640px);display:grid;align-items:center;overflow:hidden;color:var(--white)}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,22,38,.92) 0%,rgba(15,22,38,.74) 45%,rgba(62,49,132,.55) 100%)}
.photo-band.violet::after{background:linear-gradient(110deg,rgba(62,49,132,.94) 0%,rgba(62,49,132,.72) 50%,rgba(15,22,38,.6) 100%)}
.photo-band .wrap{position:relative;z-index:2;padding-block:var(--sp)}
.photo-band h2{color:var(--white)}
.photo-band .lede{color:#D9DEE9}
.photo-band .eyebrow{color:var(--peri)}
.photo-cap{position:absolute;right:var(--gut);bottom:var(--s4);z-index:2;
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.18em;color:rgba(255,255,255,.62)}

.photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
@media (max-width:760px){.photo-duo{grid-template-columns:1fr}}
.photo-duo figure{position:relative;margin:0;min-height:clamp(260px,38vw,440px);overflow:hidden}
.photo-duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-duo figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,38,.15),rgba(15,22,38,.78))}
.photo-duo figcaption{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);z-index:2;color:var(--white)}
.photo-duo .pc-en{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.18em;color:var(--peri);margin-bottom:.4em}
.photo-duo .pc-ja{font-size:var(--f5);font-weight:600;line-height:1.5}

/* ══════════ Position レイヤー図 ══════════ */
.layers{margin-top:var(--sp-s);display:grid;gap:2px}
.layer{border:1px solid var(--line-d);padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);background:rgba(255,255,255,.03)}
.layer.mid{border-color:var(--peri);border-width:2px;background:rgba(183,185,220,.12)}
.layer .lh{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s2)}
.layer .lt{font-family:var(--grot);font-size:var(--f1);letter-spacing:.18em;color:#8E98B4}
.layer.mid .lt{color:var(--peri)}
.layer .ls{font-size:var(--f3);color:#B7BECD}
.layer .tags{display:flex;flex-wrap:wrap;gap:.45em}
.layer .tags span{font-size:var(--f2);padding:.4em .85em;border:1px solid var(--line-d);color:#B7BECD}
.layer.mid .tags span.hot{background:var(--peri);color:var(--deep);border-color:var(--peri);font-weight:600}
.arrow{height:22px;display:grid;place-items:center;color:#6C7893;font-size:var(--f2)}

/* ══════════ タブ ══════════ */
.tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line)}
.tabs button{flex:1 1 auto;padding:.95em 1.1em;font-size:var(--f3);color:var(--ink-2);border-right:1px solid var(--line);text-align:left;min-width:9rem}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--principle);color:var(--white)}
.tab-body{border:1px solid var(--line);border-top:0;padding:clamp(20px,2.6vw,32px)}
.s-navy .tabs,.s-deepest .tabs{border-color:var(--line-d)}
.s-navy .tabs button,.s-deepest .tabs button{border-color:var(--line-d);color:#B7BECD}
.s-navy .tabs button[aria-selected="true"],.s-deepest .tabs button[aria-selected="true"]{background:var(--peri);color:var(--deep)}
.s-navy .tab-body,.s-deepest .tab-body{border-color:var(--line-d)}
.chips{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:.45em}
.chips span{font-size:var(--f2);padding:.42em .9em;border:1px solid var(--line);color:var(--ink-3)}
.chips span.on{background:var(--principle);border-color:var(--principle);color:var(--white)}
.s-navy .chips span{border-color:var(--line-d);color:#7F8AA1}
.s-navy .chips span.on{background:var(--peri);border-color:var(--peri);color:var(--deep)}

/* ══════════ System Landscape ══════════ */
@media (max-width:860px){.land{grid-template-columns:1fr}}
.land-list{border-right:1px solid var(--line);background:#EFEEE9}
@media (max-width:860px){.land-list{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}}
.land-list button{display:block;width:100%;text-align:left;padding:1em 1.15em;border-bottom:1px solid var(--line-2);font-size:var(--f3);color:var(--ink-2)}
.land-list button .en{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--ink-3);margin-bottom:.15em}
.land-list button[aria-selected="true"]{background:var(--principle);color:var(--white)}
.land-list button[aria-selected="true"] .en{color:var(--peri)}
.land-body{padding:clamp(24px,3vw,40px)}
.land-body h3{margin-bottom:var(--s2)}
.land-body>p{color:var(--ink-2);line-height:1.9;max-width:38em}
.land-meta{margin-top:var(--s4);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--s4)}
.land-meta .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--principle);display:block;margin-bottom:.6em}
.land-meta li{padding-block:.22em;font-size:var(--f3)}

/* ══════════ Product UI（Interface Study） ══════════ */
.study-tag{display:inline-block;margin-bottom:var(--s3);font-family:var(--grot);font-size:var(--f1);
  letter-spacing:.16em;border:1px solid var(--peri);color:var(--peri);padding:.42em .9em}
.app{margin-top:var(--sp-s);border:1px solid rgba(255,255,255,.2);background:#0C1220;overflow:hidden}
.app-chrome{display:flex;align-items:center;gap:var(--s3);padding:.7em 1em;background:#0A0F1B;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.1em;color:#7A85A3}
.app-chrome .dots{display:flex;gap:5px}
.app-chrome .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.app-chrome .path{color:#9FA9C2}
.app-chrome .who{margin-left:auto;display:flex;align-items:center;gap:.6em}
.app-chrome .who b{width:22px;height:22px;border-radius:50%;background:var(--principle);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600}
.app-grid{display:grid;grid-template-columns:11.5rem minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:1000px){.app-grid{grid-template-columns:1fr}}
.app-nav{border-right:1px solid rgba(255,255,255,.09);padding:var(--s3) 0;background:#0A0F1B}
@media (max-width:1000px){.app-nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.09);padding:0}}
.app-nav a{display:flex;align-items:center;gap:.6em;padding:.6em 1.1em;font-size:var(--f2);color:#8E98B4;white-space:nowrap}
.app-nav a:hover{text-decoration:none;color:#fff}
.app-nav a.on{color:var(--white);background:rgba(85,70,168,.34);border-left:2px solid var(--peri)}
@media (max-width:1000px){.app-nav a.on{border-left:0;border-bottom:2px solid var(--peri)}}
.app-nav .sec-k{padding:.9em 1.1em .35em;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:#5B677F}
@media (max-width:1000px){.app-nav .sec-k{display:none}}
.app-main{border-right:1px solid rgba(255,255,255,.09);min-width:0}
@media (max-width:1000px){.app-main{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}}
.app-head{display:flex;align-items:center;gap:var(--s2);padding:.9em 1.1em;border-bottom:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
.app-head .ttl{font-size:var(--f4);color:var(--white);font-weight:600}
.app-head .id{font-family:var(--grot);font-size:var(--f1);color:#7A85A3;letter-spacing:.1em}
.badge{font-family:var(--grot);font-size:var(--f1);letter-spacing:.09em;padding:.28em .7em;border:1px solid;display:inline-block}
.badge.req{color:var(--peri);border-color:rgba(183,185,220,.55);background:rgba(183,185,220,.12)}
.badge.wait{color:#E6C36B;border-color:rgba(230,195,107,.5);background:rgba(230,195,107,.1)}
.badge.ok{color:#7FC9A6;border-color:rgba(127,201,166,.5);background:rgba(127,201,166,.1)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--f2)}
.tbl th,.tbl td{text-align:left;padding:.62em 1.1em;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap}
.tbl th{font-family:var(--grot);font-size:var(--f1);letter-spacing:.1em;color:#5B677F;font-weight:600;background:rgba(255,255,255,.02)}
.tbl td{color:#C6CCDA}
.tbl tr.sel td{background:rgba(85,70,168,.22);color:var(--white)}
.tbl .obj{color:var(--peri)}
.tbl-scroll{overflow-x:auto}
.rel{padding:.9em 1.1em;border-bottom:1px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;gap:.5em;align-items:center;
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.09em;color:#7A85A3}
.rel span{padding:.24em .6em;border:1px solid rgba(255,255,255,.16);color:#C6CCDA}
.rel .ar{color:#5B677F}
.app-side{min-width:0}
.app-side .blk{padding:var(--s3) 1.1em;border-bottom:1px solid rgba(255,255,255,.07)}
.app-side .k{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:#5B677F;margin-bottom:.6em}
.app-side .ai{font-size:var(--f2);line-height:1.8;color:#D3D8E4;border-left:2px solid var(--peri);padding-left:var(--s2)}
.app-side .dec li{display:flex;gap:.6em;padding-block:.32em;font-size:var(--f2);color:#C6CCDA}
.app-side .dec li::before{content:"";width:.5em;height:1px;background:var(--peri);margin-top:.85em;flex:0 0 auto}
.log li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:.7em;padding-block:.32em;font-size:var(--f1);color:#8E98B4}
.log .t{font-family:var(--grot);color:#5B677F;font-variant-numeric:tabular-nums}
.log b{color:#C6CCDA;font-weight:400}
.app-foot{padding:.8em 1.1em;font-size:var(--f2);color:#8E98B4;background:#0A0F1B}
.app-foot b{color:var(--peri)}

/* 拡大表示（実物感） */
.zoom{margin-top:var(--s4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s4);align-items:center}
@media (max-width:860px){.zoom{grid-template-columns:1fr}}
.zoom-card{border:1px solid rgba(255,255,255,.22);background:#101A33;padding:var(--s3)}
.zoom-card .k{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:#7A85A3;margin-bottom:.7em}
.zoom-card .big{font-size:var(--f5);color:var(--white);line-height:1.6;font-weight:600}
.zoom-card .sub{margin-top:.5em;font-size:var(--f2);color:#8E98B4}
.zoom-note{font-size:var(--f3);line-height:1.9;color:#B7BECD}

/* ══════════ Decide ══════════ */
.decide{margin-top:var(--sp-s);border-top:1px solid rgba(255,255,255,.24)}
.decide li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) minmax(0,1.5fr);gap:var(--s2) var(--s4);
  align-items:baseline;padding-block:clamp(18px,2.2vw,24px);border-bottom:1px solid rgba(255,255,255,.14)}
@media (max-width:820px){.decide li{grid-template-columns:1fr;gap:.2em}}
.decide .en{font-family:var(--grot);font-size:var(--f3);font-weight:600;letter-spacing:.12em;color:#C6BFEE}
.decide .ja{font-size:var(--f4);font-weight:600;color:var(--white)}
.decide .ds{font-size:var(--f3);color:#C3BCE8;line-height:1.85}
.decide li.none{background:rgba(255,255,255,.08)}
.decide li.none .en,.decide li.none .ja{color:var(--white)}

/* ══════════ Timeline ══════════ */
.tl{margin-top:var(--sp-s);overflow-x:auto;padding-bottom:var(--s2)}
.tl-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15.5rem,1fr);min-width:min(100%,62rem)}
.tl-step{position:relative;padding:var(--s5) var(--s4) var(--s4) 0}
.tl-step::before{content:"";position:absolute;left:0;right:0;top:calc(var(--s5) - 21px);height:1px;background:var(--line)}
.tl-step::after{content:"";position:absolute;left:0;top:calc(var(--s5) - 26px);width:11px;height:11px;background:var(--principle);border-radius:50%}
.tl-step.acc::after{background:var(--principle)}
.tl-step .no{font-family:var(--grot);font-size:var(--f1);letter-spacing:.16em;color:var(--principle)}
.tl-step h3{margin:.3em 0 .55em}
.tl-step p{font-size:var(--f3);line-height:1.85;color:var(--ink-2);max-width:19em}
.tl-out{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.tl-out .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:.5em}
.tl-out li{font-size:var(--f2);color:var(--ink);padding-block:.2em}
.tl-close{margin-top:var(--sp-s);font-size:var(--f7);font-weight:600;line-height:1.45;max-width:16em;text-wrap:balance}

/* ══════════ Cases ══════════ */
.case{padding-block:var(--sp-s);border-top:1px solid var(--line)}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case-head{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--s3) var(--s4)}
@media (max-width:760px){.case-head{grid-template-columns:1fr;gap:var(--s2)}}
.case-no{font-family:var(--grot);font-size:var(--f1);letter-spacing:.16em;color:var(--principle)}
.case-no span{display:block;color:var(--ink-3);margin-top:.3em}
.case h3{max-width:20em}
.case .role{margin-top:.5em;font-size:var(--f3);color:var(--ink-2)}
.chain{margin-top:var(--s5);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));border-top:1px solid var(--line-2)}
.chain>div{padding:var(--s3) var(--s3) var(--s3) 0;border-right:1px solid var(--line-2)}
.chain>div:last-child{border-right:0}
@media (max-width:760px){.chain>div{border-right:0;border-bottom:1px solid var(--line-2);padding-right:0}}
.chain .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.13em;color:var(--principle);display:block;margin-bottom:.5em}
.chain p{font-size:var(--f3);line-height:1.8}
.scope{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-2)}
.scope .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:.7em}
.scope .row{display:flex;flex-wrap:wrap;gap:.4em}
.scope .row span{font-family:var(--grot);font-size:var(--f2);letter-spacing:.06em;padding:.4em .85em;border:1px solid var(--line);color:var(--ink-3)}
.scope .row span.on{background:var(--principle);border-color:var(--principle);color:var(--white)}
.case-note{margin-top:var(--sp-s);font-size:var(--f3);color:var(--ink-2);line-height:1.9;max-width:44em}
.case-link{margin-top:var(--s4)}

/* ══════════ 汎用 ══════════ */
.cols{margin-top:var(--sp-s);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--s5) var(--s4)}
.cols .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.15em;color:var(--ink-3);display:block;margin-bottom:.8em}
.cols li{padding-block:.28em;font-size:var(--f3);border-bottom:1px solid var(--line-2)}
.s-navy .cols .k,.s-deepest .cols .k{color:var(--peri)}
.s-navy .cols li,.s-deepest .cols li{border-color:var(--line-d2);color:#DDE1E9}
.steps-row{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:.4em}
.steps-row span{font-family:var(--grot);font-size:var(--f2);letter-spacing:.08em;padding:.42em .9em;border:1px solid var(--line);color:var(--ink-2)}
.s-navy .steps-row span,.s-deepest .steps-row span{border-color:var(--line-d);color:#B7BECD}

/* ══════════ AI / Human ══════════ */
.split{margin-top:var(--sp-s);display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-d)}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.split>div{padding:clamp(22px,2.8vw,34px)}
.split .machine{border-right:1px solid var(--line-d);background:rgba(255,255,255,.03)}
@media (max-width:760px){.split .machine{border-right:0;border-bottom:1px solid var(--line-d)}}
.split .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.15em;display:block;margin-bottom:var(--s3)}
.split .machine .k{color:#8E98B4}
.split .human{background:var(--principle)}
.split .human .k{color:#E4E0FA}
.split li{padding-block:.34em;font-size:var(--f4);border-bottom:1px solid var(--line-d2);color:#D3D8E4}
.split li:last-child{border-bottom:0}
.split .human li{font-weight:600;color:var(--white);border-color:rgba(255,255,255,.2)}

/* ══════════ Principles ══════════ */
.pr-mark{font-family:var(--grot);font-size:clamp(1.75rem,4vw,3rem);letter-spacing:.1em;color:var(--white);display:flex;align-items:baseline}
.pr-mark .bar{color:var(--peri);font-weight:200;margin:0 .1em}
.pr-mark .p{color:var(--peri)}
.pr-line{margin-top:var(--s4);font-family:var(--min);font-size:var(--f6);letter-spacing:.05em;color:#DDE1E9}
.pr-list{margin-top:var(--sp-s);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0;border-top:1px solid var(--line-d)}
.pr-list li{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line-d2);font-family:var(--grot);font-size:var(--f5);color:var(--white)}
.pr-list li em{font-style:normal;color:var(--peri)}

/* ══════════ Founder ══════════ */
.founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,64px);align-items:start}
@media (max-width:860px){.founder{grid-template-columns:1fr}}
.founder .pic{position:relative}
.founder .pic img{aspect-ratio:4/5;object-fit:cover;width:100%}
.founder .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(62,49,132,.28),rgba(15,22,38,.5))}
.founder .cap{position:absolute;left:var(--s3);bottom:var(--s3);z-index:2;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:rgba(255,255,255,.85)}
.f-msg{font-family:var(--min);font-size:var(--f6);line-height:1.85;letter-spacing:.04em;max-width:20em}
.f-body{margin-top:var(--s5);max-width:38em}
.f-body p+p{margin-top:var(--s3)}
.f-tl{margin-top:var(--s5);border-top:1px solid var(--line)}
.f-tl li{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:var(--s3);padding-block:.85em;border-bottom:1px solid var(--line-2);line-height:1.8}
@media (max-width:640px){.f-tl li{grid-template-columns:1fr;gap:.1em}}
.f-tl .y{font-family:var(--grot);font-size:var(--f2);color:var(--principle);font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* ══════════ Pricing ══════════ */
.price{margin-top:var(--sp-s);border-top:1px solid var(--line)}
.price>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s4);align-items:baseline;
  padding-block:clamp(22px,2.8vw,32px);border-bottom:1px solid var(--line-2)}
@media (max-width:640px){.price>div{grid-template-columns:1fr}}
.price .pn{font-family:var(--grot);font-size:var(--f2);letter-spacing:.15em;color:var(--principle);display:block;margin-bottom:.45em}
.price .pt{font-size:var(--f5);font-weight:600}
.price .pd{margin-top:.5em;font-size:var(--f3);color:var(--ink-2);line-height:1.85;max-width:34em}
.price .pv{font-family:var(--grot);font-size:var(--f6);font-weight:600;color:var(--principle);white-space:nowrap;font-variant-numeric:tabular-nums}
.driver{margin-top:var(--sp-s);background:var(--ink);color:#DDE1E9;padding:clamp(24px,3vw,40px)}
.driver .k{font-family:var(--grot);font-size:var(--f1);letter-spacing:.16em;color:var(--peri);display:block;margin-bottom:var(--s3)}
.driver ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:.5em var(--s4)}
.driver li{font-size:var(--f3);padding-block:.24em;border-bottom:1px solid rgba(255,255,255,.12)}
.driver p{margin-top:var(--s4);font-size:var(--f3);line-height:1.9;max-width:42em;color:#B7BECD}

/* ══════════ FAQ ══════════ */
.faq{margin-top:var(--sp-s);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{display:flex;gap:var(--s2);align-items:baseline;padding-block:clamp(18px,2.2vw,24px);cursor:pointer;list-style:none;font-size:var(--f5);font-weight:600;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--grot);font-weight:400;color:var(--principle);width:1em;flex:0 0 auto}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--principle)}
.faq .a{padding:0 0 clamp(20px,2.4vw,28px) calc(1em + var(--s2));max-width:44em;color:var(--ink-2);line-height:1.9}
.faq .a p+p{margin-top:var(--s2)}

/* ══════════ Contact ══════════ */
.c-points{margin-top:var(--sp-s);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:0;border-top:1px solid rgba(255,255,255,.28)}
.c-points li{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:var(--f4);color:#E4E0FA}
.c-points .k{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--white);margin-bottom:.5em}
.c-cta{margin-top:var(--sp-s);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.c-cta .mail{color:#D8D3F5;font-size:var(--f3)}
.c-cta .mail a{color:var(--white);text-decoration:underline;text-underline-offset:.2em}
.corp{margin-top:var(--sp);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);gap:0 var(--s4);max-width:48em}
@media (max-width:640px){.corp{grid-template-columns:1fr}}
.corp dt{padding-block:.8em;border-top:1px solid rgba(255,255,255,.14);font-family:var(--grot);font-size:var(--f1);letter-spacing:.1em;color:#B9B2E4}
.corp dd{padding-block:.8em;border-top:1px solid rgba(255,255,255,.14);margin:0;color:#EEEBFF;line-height:1.8;font-size:var(--f3)}
@media (max-width:640px){.corp dt{padding-bottom:0}.corp dd{padding-top:.1em;border-top:0}}
.corp a{color:var(--white);text-decoration:underline;text-underline-offset:.2em}

/* ══════════ 次への導線 ══════════ */
.next{border-top:1px solid var(--line)}
.next a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--line-2);color:var(--ink)}
.next a:hover{text-decoration:none;color:var(--principle)}
.next .k{display:block;font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--ink-3);margin-bottom:.4em}
.next .t{font-size:var(--f5);font-weight:600}
.next .ar{font-family:var(--grot);color:var(--ink-3)}

footer{background:var(--deepest);color:#7F8AA1;padding-block:var(--s5);border-top:1px solid var(--line-d2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline}
footer .fm{font-family:var(--grot);font-size:var(--f2);letter-spacing:.14em;color:#98A2B6}
footer .fm .bar{color:var(--peri);font-weight:200}
footer .fm .p{color:var(--peri)}
footer a{color:#98A2B6;font-family:var(--grot);font-size:var(--f2);letter-spacing:.1em}
footer a:hover{color:var(--peri)}
footer small{font-family:var(--grot);font-size:var(--f1);letter-spacing:.08em;margin-left:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .swap .g{animation:none;opacity:0}
  .swap .p{animation:none;opacity:1;transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION（2026-08-25 指示：ナビ自体が情報設計を伝えるUI）
   ・英語ラベルにカーソル／フォーカスが入ると、日本語の説明が下から現れる
   ・英語は少し上へ、日本語はウルトラマリンバイオレット
   ・縦線をアクセントに、0.28秒の静かな動き
   ・スマホはhoverが無いため、タップでサブメニューを開く
   ・ヘッダーの高さは変えない（日本語はヘッダーの下に浮かせる）
   ═══════════════════════════════════════════════════════════════ */
.nav{margin-left:auto;display:flex;align-items:stretch;gap:clamp(10px,1.6vw,26px);height:100%}
.nav .item{position:relative;display:flex;align-items:center}
.nav .item>a,.nav .item>button{
  position:relative;display:block;padding:.2em .1em;
  font-family:var(--grot);font-size:var(--f2);letter-spacing:.13em;
  color:var(--ink-2);text-transform:uppercase;white-space:nowrap;
  transition:transform .28s var(--e),color .28s var(--e);
}
.nav .item>a:hover,.nav .item>button:hover{color:var(--ink);text-decoration:none}
.nav .item>a[aria-current="page"]{color:var(--ink)}
.nav .item>a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.45em;height:2px;background:var(--principle)}

/* 下から現れる日本語ラベル */
.nav .drop{
  position:absolute;top:100%;left:-.9em;
  padding:.55em .8em .6em;background:var(--white);
  border-left:2px solid var(--principle);
    opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .28s var(--e),transform .28s var(--e);
  white-space:nowrap;z-index:90;
}
.nav .drop .ja{display:block;font-family:var(--jp);font-size:var(--f3);letter-spacing:.02em;color:var(--principle);line-height:1.9}
.nav .drop a.ja{color:var(--principle)}
.nav .drop a.ja:hover{color:var(--violet-d);text-decoration:underline;text-underline-offset:.2em}
.nav .drop .ja+.ja{margin-top:.15em}
.nav .item:hover>a,.nav .item:hover>button,
.nav .item:focus-within>a,.nav .item:focus-within>button{transform:translateY(-3px);color:var(--ink)}
.nav .item:hover .drop,.nav .item:focus-within .drop{opacity:1;transform:translateY(0);pointer-events:auto}
.nav .cta{
  align-self:center;font-family:var(--jp);font-size:var(--f3);letter-spacing:.02em;
  color:var(--white);background:var(--principle);padding:.72em 1.35em;text-transform:none;
}
.nav .cta:hover{background:var(--violet-d);text-decoration:none;transform:none}

/* 狭い画面：タップでサブメニュー */
.burger{display:none;font-size:1.25rem;line-height:1;margin-left:auto;padding:.35em .2em}
@media (max-width:1120px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;top:var(--hh);left:0;right:0;height:auto;
    flex-direction:column;align-items:stretch;gap:0;background:var(--white);
    border-bottom:1px solid var(--line);padding:var(--s2) var(--gut) var(--s4);
max-height:calc(100dvh - var(--hh));overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav .item{display:block;border-bottom:1px solid var(--line-2)}
  .nav .item>a,.nav .item>button{display:block;width:100%;text-align:left;padding:1em 0;transform:none!important}
  .nav .item>button::after{content:"＋";float:right;color:var(--principle);font-family:var(--jp)}
  .nav .item.open>button::after{content:"−"}
  .nav .drop{
    position:static;opacity:1;transform:none;pointer-events:auto;white-space:normal;
    box-shadow:none;background:transparent;border-left:2px solid var(--principle);
    margin:0 0 1em .2em;padding:.3em 0 .3em .9em;display:none;
  }
  .nav .item.open .drop{display:block}
  .nav .item.static .drop{display:block;margin-top:-.6em}
  .nav .cta{margin-top:var(--s3);text-align:center;display:block}
}

/* ═══════════════════════════════════════════════════════════════
   お問い合わせフォーム（/contact/）
   濃紺の面に白いカードを載せる。入力欄だけは明るくして書きやすさを優先。
   🚩 JSが動かなくても通常のPOSTで送信できる（action属性を残す）
   ═══════════════════════════════════════════════════════════════ */
.form-card{background:var(--white);color:var(--ink);max-width:860px;padding:clamp(26px,3.6vw,52px);margin-top:var(--s4)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
/* 🚩 display指定があると hidden 属性が効かないので明示的に打ち消す（送信後にフォームを隠す） */
.form[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:.55em;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:var(--f2);font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:.7em;color:var(--ink)}
.fld .req{font-family:var(--grot);font-size:var(--f1);font-weight:600;letter-spacing:.08em;background:var(--principle);color:var(--white);padding:.2em .6em}
.fld .opt{font-family:var(--grot);font-size:var(--f1);letter-spacing:.08em;border:1px solid var(--line);color:var(--ink-3);padding:.15em .6em}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:var(--f3);line-height:1.7;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:.85em 1em;width:100%;
  transition:border-color .22s var(--e),background .22s var(--e);
}
.fld textarea{min-height:184px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--principle);background:var(--white)}
.fld input:user-invalid,.fld textarea:user-invalid,.fld select:user-invalid{border-color:#B3392F}
.fld .hint{font-size:var(--f2);color:var(--ink-2);line-height:1.7;margin-top:-.15em}
.selwrap{position:relative}
.selwrap select{appearance:none;padding-right:3em}
.selwrap::after{content:"";position:absolute;right:1.15em;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.formnote{font-size:var(--f2);color:var(--ink-2);line-height:1.85;border-top:1px solid var(--line-2);padding-top:var(--s3)}
.form-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.form-alt{font-size:var(--f2);color:var(--ink-2);line-height:1.8;margin-top:var(--s3);border-top:1px solid var(--line-2);padding-top:var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:var(--f3);line-height:1.8;padding:1em 1.2em;border-left:3px solid var(--principle);background:var(--paper)}
.form-msg.err{border-left-color:#B3392F}
.form-msg[hidden]{display:none}
.form button[type="submit"][disabled]{opacity:.5;cursor:progress}
@media (max-width:720px){
  .form{grid-template-columns:1fr;gap:var(--s3)}
}

/* ═══════════════════════════════════════════════════════════════
   HOME v2（2026-08-25）：19セクション→5ブロック化にあたって追加した最小限のクラス
   既存トークン（--ink/--deep/--violet-d/--peri/--grot/--jp/--min）を再利用するだけで、
   新しい色・フォントは足していない。
   ═══════════════════════════════════════════════════════════════ */
.hero.deep{background:var(--deep)}
.hero.deep::after{content:none}
.hero.deep h1{font-family:var(--min);font-weight:600;max-width:15em}
.hero .tagline{margin-top:var(--s3);font-family:var(--grot);font-size:var(--f2);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--peri)}
.caps.jp{font-family:var(--jp);letter-spacing:.03em;text-transform:none;color:#C7CBE0;font-size:var(--f3)}

/* Capabilities：全幅の帯4本（カードにしない） */
.capband{display:block;color:inherit}
.capband:hover,.capband:focus-visible{text-decoration:none}
.cb-in{padding-block:clamp(28px,4.4vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:.2em var(--s3)}
.cb-en{font-family:var(--grot);font-size:clamp(1.375rem,3.4vw,2.25rem);font-weight:600;letter-spacing:.03em}
.cb-ja{font-family:var(--jp);font-size:var(--f4);font-weight:600;margin-left:.2em}
.cb-d{flex:1 1 100%;margin-top:.5em;font-size:var(--f3);line-height:1.85;max-width:38em}
.cb-ar{margin-left:auto;font-family:var(--grot);font-size:1.4rem;transition:transform .25s var(--e)}
.capband:hover .cb-ar,.capband:focus-visible .cb-ar{transform:translateX(6px)}
.band-1{background:var(--deep);color:#EEF0F4;border-top:1px solid rgba(255,255,255,.12)}
.band-1:hover,.band-1:focus-visible{background:#141E36}
.band-2{background:var(--violet-d);color:#F2F0FF}
.band-2:hover,.band-2:focus-visible{background:#453689}
.band-2 .cb-d{color:#D8D3F5}
.band-3{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-3:hover,.band-3:focus-visible{background:#ECEAE3}
.band-3 .cb-d{color:var(--ink-2)}
.band-4{background:var(--deepest);color:#EEF0F4}
.band-4:hover,.band-4:focus-visible{background:#0E1524}

/* Featured Work：3行、ヘアライン区切り（カード化しない） */
.fw-list{margin-top:var(--sp-s);border-top:1px solid var(--line)}
.fw-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:start;
  padding-block:clamp(24px,3vw,34px);border-bottom:1px solid var(--line-2);color:var(--ink)}
.fw-row:hover,.fw-row:focus-visible{text-decoration:none;color:var(--principle)}
.fw-no{font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--principle)}
.fw-no small{display:block;margin-top:.35em;font-size:var(--f1);color:var(--ink-3);font-weight:400;letter-spacing:.12em}
.fw-pts{display:grid;gap:.4em}
.fw-pts li{font-size:var(--f3);line-height:1.8;color:var(--ink-2)}
.fw-pts b{color:var(--ink);font-weight:600;margin-right:.5em}
.fw-ar{font-family:var(--grot);color:var(--ink-3);align-self:center}
@media (max-width:680px){.fw-row{grid-template-columns:1fr;gap:.5em}.fw-ar{display:none}}

/* ═══════════════════════════════════════════════════════════════
   図版・写真の配置（2026-08-25追記）：既存クラスは変更せず、新規クラスのみ追加
   ・plate = /assets/plates/ のSVG（意匠のみ。alt=""+aria-hidden で装飾扱い）
   ・photo = /assets/photos/ の写真。.photo-grade で低彩度に（画像ファイル自体は無加工）
   ═══════════════════════════════════════════════════════════════ */
.photo-grade{filter:saturate(.58) contrast(.93)}

/* Hero（index.html）：1320px以上、右の空きにだけ図版を1点。見出しには重ねない */
.hero-plate{display:none}
@media (min-width:1320px){
  .hero-plate{display:block;position:absolute;right:0;top:6%;width:min(27vw,380px);opacity:.85;pointer-events:none;z-index:1}
  .hero-plate img{width:100%;height:auto;display:block}
}

/* About teaser（index.html）：短文の右に図版を1点。狭い画面では非表示 */
.teaser-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,18rem);gap:var(--s5);align-items:center}
.teaser-plate img{width:100%;height:auto;display:block;opacity:.9}
@media (max-width:820px){.teaser-grid{grid-template-columns:1fr}.teaser-plate{display:none}}

/* Capabilities直後の全幅写真バンド（index.html） */
.photo-strip img{width:100%;height:clamp(280px,32vw,460px);object-fit:cover;display:block}
.photo-strip-cap{padding:.7em var(--gut);font-family:var(--grot);font-size:var(--f1);letter-spacing:.14em;color:var(--ink-3);background:var(--paper);border-bottom:1px solid var(--line)}

/* セクション見出し脇に静かに添える図版（system-studies／approach／services／pricing／contact） */
.plate-quiet{max-width:20rem;margin:0 0 var(--s5) auto}
.plate-quiet img{width:100%;height:auto;display:block}
@media (max-width:680px){.plate-quiet{display:none}}

/* ═══════════════════════════════════════════════════════════════
   2026-08-25 改修
   ・Capabilities：説明文の行数差で帯の高さが変わるのを止める
   ・CTA：ボタンを大きくし、下に事実の帯を敷いて強くする
   ・ナビ：ホバー／フォーカスで英語→日本語にボックスが回る
   ・ドロップダウンをヘッダーに接続（隙間で閉じるのを防ぐ）
   ═══════════════════════════════════════════════════════════════ */

@media (min-width:821px){
  .cb-d{min-height:calc(1.85em * 2)}
}

.btn-lg{padding:1.15em 2.5em;font-size:var(--f4);letter-spacing:.04em}
.btn-ar{margin-left:.15em;font-family:var(--grot);transition:transform .25s var(--e)}
.btn:hover .btn-ar,.btn:focus-visible .btn-ar{transform:translateX(6px)}
.cta-facts{
  margin-top:var(--s4);display:flex;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.30);max-width:46rem;
}
.cta-facts>div{
  flex:1 1 auto;padding:.85em clamp(18px,2vw,32px) .9em 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.cta-facts>div+div{
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:clamp(18px,2vw,32px);
}
.cta-facts dt{
  font-family:var(--grot);font-size:var(--f1);letter-spacing:.16em;
  text-transform:uppercase;color:#BDB8E4;
}
.cta-facts dd{margin:.35em 0 0;font-size:var(--f3);color:#F2F0FF}
.cta-facts a{color:#F2F0FF;text-decoration:underline;text-underline-offset:.22em}
@media (max-width:560px){
  .cta-facts>div{flex:1 1 100%}
  .cta-facts>div+div{border-left:0;padding-left:0}
}

/* ナビ：英語と日本語を立方体の2面として持ち、回して入れ替える */
.nav .item:hover>a,.nav .item:hover>button,
.nav .item:focus-within>a,.nav .item:focus-within>button{transform:none}
.nav .flip{position:relative;display:inline-block;perspective:560px;line-height:1.25}
.nav .flip>span{
  display:block;backface-visibility:hidden;transform-origin:50% 50% -.62em;
  transition:transform .38s var(--e),opacity .38s var(--e);
}
.nav .f-en{position:relative;transform:rotateX(0deg)}
.nav .f-ja{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:var(--jp);letter-spacing:.14em;
  transform:rotateX(90deg);opacity:0;
}
.nav .item:hover .f-en,.nav .item:focus-within .f-en{transform:rotateX(-90deg);opacity:0}
.nav .item:hover .f-ja,.nav .item:focus-within .f-ja{transform:rotateX(0deg);opacity:1}

/* 隙間で閉じないための当て板（サブピクセルのずれ対策） */
.nav .drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav .drop .ja{padding:.42em 0;line-height:1.6}
.nav .drop .ja+.ja{margin-top:0;border-top:1px solid var(--line-2)}

@media (max-width:1120px){
  .nav .flip{perspective:none}
  .nav .f-ja{display:none}
  .nav .drop::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav .f-en,.nav .f-ja{transition:none}
  .nav .item:hover .f-en,.nav .item:focus-within .f-en{transform:none;opacity:1}
  .nav .item:hover .f-ja,.nav .item:focus-within .f-ja{opacity:0}
}

/* Capabilities：矢印を流れから外して縦中央に固定する。
   flex-wrap の折り返し位置が帯ごとに変わり、矢印が3行目に落ちて高さが揃わなかったため。 */
@media (min-width:821px){
  .cb-in{position:relative;padding-right:4rem}
  .cb-ar{position:absolute;right:0;top:50%;margin-left:0;transform:translateY(-50%)}
  .capband:hover .cb-ar,.capband:focus-visible .cb-ar{transform:translateY(-50%) translateX(6px)}
}

/* Capabilities：4本の枠線を揃える（ヘアラインの有無で1〜2pxずれていたため） */
.band-2{border-top:1px solid rgba(255,255,255,.12)}
.band-3{border-bottom:0}
.band-4{border-top:1px solid rgba(255,255,255,.10)}

/* ナビのフリップ：日本語面はウルトラマリンにし、英語・日本語とも中央で揃える */
.nav .flip{text-align:center}
.nav .f-en{display:block}
.nav .f-ja{
  left:0;right:0;text-align:center;
  color:var(--principle);       /* オフ白の地でコントラスト6.80:1（AA） */
}
.nav .item:hover .f-ja,.nav .item:focus-within .f-ja{color:var(--principle)}

/* ═══ CTA下段を1本の帯にまとめる ═══
   ボタンと事実の表が別々に浮き、罫線も高さも揃っていなかったため、
   上下1本のヘアラインで囲んだ帯の中に「行動｜条件」を並べる。 */
.c-cta{
  margin-top:var(--s4);
  display:grid;grid-template-columns:auto 1fr;align-items:stretch;gap:0;
  border-top:1px solid rgba(255,255,255,.32);
  border-bottom:1px solid rgba(255,255,255,.16);
  max-width:62rem;
  flex-wrap:nowrap;
}
.c-cta .btn.btn-lg{
  align-self:stretch;display:inline-flex;align-items:center;justify-content:space-between;
  gap:1.6em;padding:1.1em 2.1em;min-width:14rem;
}
.cta-facts{
  margin:0;border-top:0;max-width:none;display:flex;
  border-left:1px solid rgba(255,255,255,.20);
}
.cta-facts>div{
  border-bottom:0;display:flex;flex-direction:column;justify-content:center;
  padding:1.05em clamp(16px,1.8vw,28px);
}
.cta-facts>div+div{padding-left:clamp(16px,1.8vw,28px)}
.cta-facts dd{margin-top:.3em}

@media (max-width:760px){
  .c-cta{grid-template-columns:1fr}
  .c-cta .btn.btn-lg{min-width:0}
  .cta-facts{border-left:0;border-top:1px solid rgba(255,255,255,.20);flex-wrap:wrap}
  .cta-facts>div{flex:1 1 100%;padding-inline:0}
  .cta-facts>div+div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12)}
}



/* AIリンクの表示切替：公開直後はAIが会社を知らないため既定は off。
   サイトがインデックスされたら data-ai を "on" にするだけで出る。 */


/* 動きを止めた／JS無効のときの静止ヒーロー：ロゴを最終形（INTE|P|RAL）で出す。
   G→Pの入れ替えはJSで動く作りなので、そのままだと G のまま固まり、
   社名でない「INTEGRAL」を表示してしまう。 */
.reduced .hero .swap .g,
.no-js   .hero .swap .g{opacity:0}
.reduced .hero .swap .p,
.no-js   .hero .swap .p{opacity:1}


/* ═══ 問い合わせドック（2026-08-25 改稿：Z案／状態ランプ／塗りCTA／AI4社） ═══ */


/* CTAは塗る（輪郭だけだと弱い） */


/* AIに聞かせる4社。2×2の格子・角丸なし・影なし */


/* ドックの出現をトランジション依存から外す。
   トランジションは進行が絞られる環境（非表示タブ・省電力）で止まり、
   「見えないのにクリックできる要素」が残る。CSSアニメーションは絞られても
   走るため、fill-mode:both で最終状態に必ず到達させる。
   さらに既定を opacity:1 にして、動きが一切効かない環境でも見えるようにする。 */


/* opacity は一切動かさない。動きが止まった環境でも「透明で固まる」ことがないように、
   動かすのは12pxのずれだけにする。最悪でも12px下に見えているだけで済む。 */


/* ═══════════════════════════════════════════════════════════════════
   問い合わせドック：D3（濃紺）＋ A1（面のオーロラ）
   2026-08-25 髙橋さん決定。以前のオフ白版の指定はここで上書きする。
   ・オーロラの色はブランド3色のみ（ウルトラマリン／ペリウィンクル／アイスブルー）
   ・動かすのは transform だけ。opacity は動かさない（止まっても必ず見える）
   ・周期は 2.17 / 2.83 / 2.50 秒（等速26/34/30秒の12倍速・髙橋さん指定）
   ═══════════════════════════════════════════════════════════════════ */


/* 面のオーロラ */

/* mix-blend-mode:screen は上部を白飛びさせて見出しを潰すので使わない。
   明るい色は薄く、暗いウルトラマリンを主役にする。 */


/* 文字の下の暗幕。オーロラの上でも本文が読める */


/* 上段 */
/* サイトのヘッダーが .top を使っているため、ドック内は .dhead にする（衝突回避） */


/* 見出し */


/* CTA：ラベルと矢印をひとまとめに中央へ。板に見せない */


/* 条件 */


/* AIに聞かせる4社。CTAの半分の高さに落として副に回す */


/* 動きを減らす設定では、オーロラもランプも止める（本文と配色はそのまま） */


/* 濃紺のドックの文字色を明示する。古いオフ白版の指定（color:var(--ink)）が
   残っていると、濃紺の地に濃紺の文字になって見出しが消える。 */

/* ═══════════════════════════════════════════════════════════════════════════
   問い合わせドック（右下・全15ページ常駐）  ★ここが唯一の定義
   2026-08-25 統合。以前は3世代（オフ白版 → Z案 → D3版）が重なっており、
   ①古い color:var(--ink) を継承して見出しが濃紺の地に濃紺で消える
   ②内側の .top がサイトのヘッダー .top（z-index:80・紙色）と衝突して白い箱になる
   という事故を2件起こしたため、1つにまとめて上書き合戦を解消した。
   触るときはこのブロックだけを直す。別の場所に追記しないこと。

   設計：
   ・D3（濃紺の面）＋A1（面のオーロラ）。髙橋さん決定 2026-08-25
   ・オーロラの色はブランド3色のみ。周期2.17/2.83/2.50秒（等速の12倍速・指定）
   ・動かすのは transform だけ。opacity は動かさない
     → 進行が絞られる環境で「見えないのにクリックできる要素」を作らないため
   ・内側の要素名は .dhead など、サイト共通クラスと衝突しない名前を使う
   ═══════════════════════════════════════════════════════════════════════════ */

.dock{
  position:fixed;right:16px;bottom:16px;z-index:70;
  width:min(318px,calc(100vw - 32px));
  background:var(--deep);border:1px solid rgba(183,185,220,.3);
  color:var(--paper);padding:0;overflow:hidden;isolation:isolate;
  opacity:1;transform:none;pointer-events:auto;transition:none;
}
.dock[hidden]{display:none}
.dock:not([hidden]){animation:dock-in .42s var(--e) both}
@keyframes dock-in{from{transform:translateY(12px)}to{transform:none}}
.dock .in{position:relative;z-index:3;padding:15px 16px 16px;color:var(--paper)}

/* ── オーロラ（面） ───────────────────────────────────── */
/* 光量と振幅：暗幕(.50)で約半分に減衰し、blurで拡散するため、
   ここが弱いと「動いていても見えない」状態になる。実測して知覚できる値にした。
   輪郭を出すため blur は 26px → 18px。 */
.dock .aur{position:absolute;inset:-45%;z-index:1;pointer-events:none;filter:blur(18px)}
.dock .aur span{position:absolute;display:block;border-radius:50%;will-change:transform}
.dock .aur span:nth-child(1){width:72%;height:60%;left:-14%;top:10%;
  background:radial-gradient(circle,rgba(85,70,168,.92),transparent 68%);
  animation:dock-a1 2.17s ease-in-out infinite}
.dock .aur span:nth-child(2){width:62%;height:54%;right:-16%;top:34%;
  background:radial-gradient(circle,rgba(109,95,196,.62),transparent 68%);
  animation:dock-a2 2.83s ease-in-out infinite}
.dock .aur span:nth-child(3){width:54%;height:48%;left:6%;bottom:-14%;
  background:radial-gradient(circle,rgba(183,185,220,.30),transparent 68%);
  animation:dock-a3 2.50s ease-in-out infinite}
/* 振幅を大きく取る。translate 16% では知覚下限を割っていた */
@keyframes dock-a1{0%,100%{transform:translate3d(-6%,-4%,0) scale(.92)}
  50%{transform:translate3d(38%,26%,0) scale(1.34)}}
@keyframes dock-a2{0%,100%{transform:translate3d(6%,8%,0) scale(1.28)}
  50%{transform:translate3d(-32%,-26%,0) scale(.9)}}
@keyframes dock-a3{0%,100%{transform:translate3d(-4%,6%,0) scale(.94)}
  50%{transform:translate3d(28%,-30%,0) scale(1.36)}}

/* オーロラの上でも本文が読めるように敷く暗幕。実測：見出し10.45／補足5.97（AA以上） */
.dock .veil{position:absolute;inset:0;z-index:2;background:rgba(15,22,38,.50);pointer-events:none}

/* ── 上段（.top はヘッダーと衝突するので .dhead） ─────────── */
.dock .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dock .dhead .st{
  display:flex;align-items:center;gap:.55em;margin:0;text-transform:none;
  font-family:var(--grot);font-size:.58rem;font-weight:700;letter-spacing:.18em;color:#B0A8E8;
}
.dock .dhead .st i{width:5px;height:5px;background:currentColor;display:block;
  animation:dock-lamp 2.4s ease-in-out infinite}
@keyframes dock-lamp{0%,100%{opacity:.28}50%{opacity:1}}
.dock .x{all:unset;cursor:pointer;font-family:var(--grot);font-size:.56rem;font-weight:700;
  letter-spacing:.16em;color:rgba(183,185,220,.72)}
.dock .x:hover,.dock .x:focus-visible{color:var(--paper)}

/* ── 見出しと補足 ────────────────────────────────────── */
.dock .t{font-family:var(--min);font-weight:400;font-size:1.12rem;line-height:1.5;
  letter-spacing:-.01em;margin:13px 0 0;max-width:none;color:var(--paper)}
.dock .sub{margin:5px 0 0;font-size:.75rem;line-height:1.7;max-width:none;color:var(--peri)}

/* ── CTA：ラベルと矢印をひとまとめに中央へ（板に見せない） ──── */
.dock .go{
  display:flex;align-items:center;justify-content:center;gap:.75em;
  margin-top:13px;height:48px;padding:0;border:0;text-decoration:none;
  background:var(--principle);color:var(--paper);
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  transition:background .26s var(--e);
}
.dock .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .26s var(--e)}
.dock .go:hover,.dock .go:focus-visible{background:var(--violet-l)}
.dock .go:hover svg{transform:translateX(4px)}

/* ── 条件（実測値のみ） ─────────────────────────────── */
.dock .fx{margin:8px 0 0;font-family:var(--grot);font-size:.64rem;letter-spacing:.06em;
  display:flex;gap:.5em;flex-wrap:wrap;max-width:none;color:var(--peri)}
.dock .fx b{font-weight:400}
.dock .fx s{text-decoration:none;color:rgba(183,185,220,.4)}

/* ── AIに聞かせる4社（CTAの半分の高さ＝副に回す） ──────────── */
.dock .aihd{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(183,185,220,.18);
  font-size:.7rem;max-width:none;color:var(--peri)}
.dock .ai{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px;font-size:inherit}
.dock .ai a{
  display:flex;align-items:center;gap:.45em;height:30px;padding:0 8px;
  border:1px solid rgba(183,185,220,.3);text-decoration:none;
  font-family:var(--grot);font-size:.68rem;font-weight:600;
  color:var(--paper);background:rgba(10,14,23,.42);
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.dock .ai a svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock .ai a:hover,.dock .ai a:focus-visible{
  border-color:#B0A8E8;color:#B0A8E8;background:rgba(85,70,168,.24)}

@media (max-width:400px){
  .dock{left:10px;right:10px;bottom:10px;width:auto}
  .dock .ai{grid-template-columns:1fr}
}
/* 動きを減らす設定：オーロラとランプを止める（配色と本文はそのまま） */
@media (prefers-reduced-motion:reduce){
  .dock:not([hidden]){animation:none}
  .dock .aur span,.dock .dhead .st i{animation:none}
}

/* ナビの影を削除（サイト全体で影を使わない方針に統一）。
   ドロップダウンの境界は 1px のヘアラインと不透明な地で担保する。 */
.nav .drop{box-shadow:none}
@media (max-width:1120px){ .nav{box-shadow:none} }

/* ═══ プライバシーポリシー等の長文ページ（2026-08-25） ═══
   本文は読ませることが目的なので、計測幅を絞って行間を広く取る。
   表は横スクロール（.tbl-scroll）に載せる。 */
.doc{max-width:52rem}
.doc .pp-intro{font-size:var(--f4);line-height:1.95;color:var(--ink-2)}
.doc h2{
  margin-top:clamp(40px,4.6vw,64px);padding-top:.7em;
  border-top:1px solid var(--line);
  font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700;letter-spacing:-.01em;
}
.doc h3{margin-top:1.8em;font-size:.98rem;font-weight:700}
.doc p{margin-top:1em;line-height:1.95;max-width:44em}
.doc ul{margin-top:1em;padding-left:1.3em;line-height:1.95;max-width:44em}
.doc ul li+li{margin-top:.35em}
.doc a{color:var(--principle);text-decoration:underline;text-underline-offset:.22em}
.doc a:hover{color:var(--violet-d)}

/* 定義リスト（事業者情報・請求先） */
.doc .pp-dl{margin-top:1.2em;border-top:1px solid var(--line)}
.doc .pp-dl>div{
  display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1em;
  padding:.75em 0;border-bottom:1px solid var(--line-2);align-items:baseline;
}
.doc .pp-dl dt{font-size:.82rem;color:var(--ink-2)}
.doc .pp-dl dd{margin:0;font-size:.94rem;line-height:1.8}
@media (max-width:560px){
  .doc .pp-dl>div{grid-template-columns:1fr;gap:.2em}
}

/* 補足の帯 */
.doc .pp-note{
  margin-top:1.2em;padding:.9em 1.1em;
  border-left:2px solid var(--principle);background:rgba(85,70,168,.05);
  font-size:.9rem;line-height:1.9;max-width:none;
}

/* 外部送信先の表 */
.doc .pp-table{width:100%;min-width:44rem;border-collapse:collapse;margin-top:1.2em;font-size:.84rem}
.doc .pp-table th,.doc .pp-table td{
  padding:.75em .85em;border-bottom:1px solid var(--line-2);
  text-align:left;vertical-align:top;line-height:1.75;
}
.doc .pp-table thead th{
  border-bottom:1px solid var(--ink);font-family:var(--grot);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;
}
.doc .pp-table td small{display:block;color:var(--ink-3);font-size:.76rem;margin-top:.2em}
.doc .pp-table td:first-child{font-weight:600;white-space:nowrap}

.doc .pp-date{
  margin-top:clamp(40px,4.6vw,64px);padding-top:1em;border-top:1px solid var(--line);
  font-family:var(--grot);font-size:.72rem;letter-spacing:.1em;color:var(--ink-2);
}

/* 長文ページ（プライバシーポリシー等）では、ドックが本文の表に被る。
   本文を読ませることが目的なので、ドックを小さくして下に逃がす。
   消さないのは、読んでいる途中で相談したくなる人がいるため。 */
body.longread .dock{width:min(268px,calc(100vw - 32px))}
body.longread .dock .aihd,
body.longread .dock .ai{display:none}          /* AI4社は長文ページでは畳む */
body.longread .dock .t{font-size:1rem}
body.longread .dock .in{padding:13px 14px 14px}
@media (max-width:1180px){
  /* 表の横スクロールとドックが重なるので、この幅からは畳む */
  body.longread .dock .sub,body.longread .dock .fx{display:none}
}

/* 国外送信の明示と同意チェック（個人情報保護法28条の対応・2026-08-25） */
.formnote.xfer{
  margin-top:.9em;padding:.85em 1em;
  border-left:2px solid var(--principle);background:rgba(85,70,168,.05);
  font-size:.82rem;line-height:1.85;
}
.formnote.xfer a{color:var(--principle);text-decoration:underline;text-underline-offset:.2em}
.consent{
  margin-top:1.1em;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.7em;align-items:start;
}
.consent input[type=checkbox]{
  width:18px;height:18px;margin:.2em 0 0;flex:0 0 auto;
  accent-color:var(--principle);cursor:pointer;
}
.consent label{
  font-size:.88rem;line-height:1.7;cursor:pointer;
  display:flex;flex-wrap:wrap;gap:.5em;align-items:baseline;
}
.consent input:focus-visible{outline:2px solid var(--principle);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════════
   単色化・幅の統一（2026-08-26 髙橋さん指示「配色・幅・選択状態だけ」）
   ─────────────────────────────────────────────────────────────────────────
   ・地は1色（#F6F5F0）。濃紺・紫・黒の「面」をやめ、罫線と余白で区切る
   ・中身の幅を1種類にし、トップ（top.css）と文字の始まる位置を揃える
   ・選択した状態はコーポレートカラー
   ・見出しの下に差し色の罫
   🚩 既存の指定は消さずにここで上書きする。
      正規表現でCSSを削ると隣の規則まで食う（8/25に site.css を一度壊している）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 幅：トップと文字の始まる位置を一致させる ──────────────────────
   1292 − 56×2 = 1180px。top.css の width:min(1180px,92vw) と同じ。
   実測（1440px）：どちらも左端130px・幅1180px。 */
:root{ --max:1292px; --gut:clamp(16px,4vw,56px); }

/* ── 面をやめる ─────────────────────────────────────────────── */
.s-navy,.s-deepest,.s-violet{
  background:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);
}
.s-navy h1,.s-navy h2,.s-navy h3,
.s-deepest h1,.s-deepest h2,.s-deepest h3,
.s-violet h1,.s-violet h2,.s-violet h3{color:var(--ink)}

/* 面の中を前提にしていた文字色を全部戻す。
   🚩 1つ忘れると「紙の上に紙色の字」で消える。下の監査で全ページ実測する。 */
.s-navy .eyebrow,.s-deepest .eyebrow,.s-violet .eyebrow{color:var(--principle)}
.s-navy .lede,.s-deepest .lede,.s-violet .lede{color:var(--ink-2)}
.s-navy .crumb,.s-navy .crumb a,
.s-deepest .crumb,.s-deepest .crumb a,
.s-violet .crumb,.s-violet .crumb a{color:var(--ink-2)}
.s-navy .crumb a:hover,.s-violet .crumb a:hover{color:var(--principle)}
.s-navy .cols .k,.s-deepest .cols .k,.s-violet .cols .k{color:var(--principle)}
.s-navy .cols li,.s-deepest .cols li,.s-violet .cols li{
  border-color:var(--line-2);color:var(--ink-2);
}
.s-navy .steps-row span,.s-deepest .steps-row span,.s-violet .steps-row span{
  border-color:var(--line);color:var(--ink-2);
}
.s-navy .layer,.s-deepest .layer,.s-violet .layer,
.layer{border:1px solid var(--line);background:rgba(24,35,59,.03)}
.layer .tags span{border:1px solid var(--line);color:var(--ink-2)}
.pr-line{color:var(--ink)}
.driver{background:rgba(24,35,59,.04);color:var(--ink-2);border-left:2px solid var(--principle)}

/* 面の上の「白い箱」も地に合わせる（面が無くなったので浮いて見える） */
.s-navy .sec.s-white,.s-violet .sec.s-white,.s-deepest .sec.s-white{background:transparent}

/* ── 選択した状態はコーポレートカラー ───────────────────────────
   面が塗られるもの＝面を紫にして文字を紙色に。
   文字リンク＝文字を紫に。すでに紫のもの＝深い紫に。 */
a:hover{text-decoration:none}
.crumb a:hover,.faq summary:hover,.next a:hover{color:var(--principle);text-decoration:none}
.btn.solid{background:var(--principle);color:var(--paper)}
.btn.solid:hover{background:var(--violet-d);color:var(--paper)}
.btn.dark:hover,.btn.violet:hover{background:var(--violet-d)}
.btn.line:hover{background:var(--principle);color:var(--paper);border-color:var(--principle)}
.nav .item>a:hover,.nav .item>button:hover,
.nav .item:hover>a,.nav .item:hover>button,
.nav .item:focus-within>a,.nav .item:focus-within>button{color:var(--principle)}
.nav .item:hover .f-ja,.nav .item:focus-within .f-ja{color:var(--principle)}

/* ── タッチ端末では日本語ラベルを前面に固定する ──────────────
   このナビは英語を表示し、ホバーで日本語へ3D反転する設計。
   🚩 タッチ端末にはホバーが無いため反転が一度も起きず、日本語が
      永久に見えない（実測：.f-ja は opacity:0 のまま）。日本語で探す人が
      多い狭い画面ほど影響が大きいので、hover:none では役割を入れ替える。 */
@media (hover:none){
  .nav .f-en{position:absolute;left:0;top:0;transform:rotateX(90deg);opacity:0}
  .nav .f-ja{position:relative;transform:none;opacity:1}
}

.nav .drop a.ja:hover,.nav .drop a.ja:focus-visible{
  background:var(--principle);color:var(--paper);text-decoration:none;
}
.nav .cta:hover{background:var(--violet-d)}
.fw-row:hover,.fw-row:focus-visible{background:var(--principle);color:var(--paper)}
.doc a:hover{color:var(--violet-d)}

/* ── 見出しの下に差し色の罫（トップと同じ）───────────────────── */
section > .wrap > h2::after,
section > .wrap > .sec-head h2::after{
  content:"";display:block;
  width:clamp(88px,10vw,150px);height:3px;border-radius:2px;
  margin-top:clamp(18px,2.2vw,30px);
  background:linear-gradient(90deg,var(--peri),var(--principle));
}

/* ── スマホではドックを出さない（フッターのリンクを覆うため）───── */
@media (max-width:620px){ .dock{display:none} }
/* フッターと重なる間は引っ込める（site.js が duck を付ける）
   🚩 .dock:not([hidden]) の animation が fill:both で transform:none を
      保持するため、animation:none で打ち消さないと効かない。 */

/* ═══════════════════════════════════════════════════════════════════════════
   単色化の修正（2026-08-26）
   前のブロックで .s-navy / .s-deepest を一律で明るくしたが、実測で問題が出た。
   これらの節の中には「システム画面の再現」（.flow / .node / .app-chrome など）が
   入っており、それらは面が濃いことで成立している部品だった。
   一律に明るくすると、画面の再現が紙の上の白文字になって消える。

   方針：
   ・装飾の面（.s-violet と、画面の再現を含まない .s-navy / .s-deepest）→ 明るくする
   ・画面の再現を含む節 → 濃いまま残す（画面は濃くて当然。紙の上の「画面」に見える）
   ・中の文字色は節ごとの変数で切り替える。個別に上書きし続けると必ず取り漏らす
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 濃いまま（既定）──────────────────────────────────────── */
.s-navy,.s-deepest,.s-violet{
  --c-head:var(--white);
  --c-body:#EEF0F4;
  --c-sub:#B7BECD;
  --c-eyebrow:var(--peri);
  --c-line:var(--line-d);
  --c-line2:var(--line-d2);
  --c-mark:var(--peri);
}
.s-navy{background:var(--deep);color:var(--c-body);border-top:0}
.s-deepest{background:var(--deepest);color:var(--c-body);border-top:0}

/* ── 明るくする対象 ───────────────────────────────────────
   画面の再現を含まない節だけ。:has() で機械的に見分ける。 */
.s-violet,
.s-navy:not(:has(.flow,.node,.app-chrome,.layer,.decide,.zoom-card,.tbl,.rel,.log,.peek-bar,.split)),
.s-deepest:not(:has(.flow,.node,.app-chrome,.layer,.decide,.zoom-card,.tbl,.rel,.log,.peek-bar,.split)){
  background:var(--paper);color:var(--ink);border-top:1px solid var(--line);
  --c-head:var(--ink);
  --c-body:var(--ink);
  --c-sub:var(--ink-2);
  --c-eyebrow:var(--principle);
  --c-line:var(--line);
  --c-line2:var(--line-2);
  --c-mark:var(--principle);
}

/* ── 中の文字は変数を通す（取り漏らしを防ぐ）──────────────── */
.s-navy h1,.s-navy h2,.s-navy h3,
.s-deepest h1,.s-deepest h2,.s-deepest h3,
.s-violet h1,.s-violet h2,.s-violet h3{color:var(--c-head)}
.s-navy .eyebrow,.s-deepest .eyebrow,.s-violet .eyebrow{color:var(--c-eyebrow)}
.s-navy .lede,.s-deepest .lede,.s-violet .lede{color:var(--c-sub)}
.s-navy .crumb,.s-navy .crumb a,
.s-deepest .crumb,.s-deepest .crumb a,
.s-violet .crumb,.s-violet .crumb a{color:var(--c-sub)}
.s-navy .cols .k,.s-deepest .cols .k,.s-violet .cols .k{color:var(--c-eyebrow)}
.s-navy .cols li,.s-deepest .cols li,.s-violet .cols li{border-color:var(--c-line2);color:var(--c-sub)}
.s-navy .steps-row span,.s-deepest .steps-row span,.s-violet .steps-row span{
  border-color:var(--c-line);color:var(--c-sub)}

/* 明るくなった節の中に残る「濃い面向け」の部品 */
.s-navy .pr-mark,.s-violet .pr-mark,.s-deepest .pr-mark{color:var(--c-head)}
.s-navy .pr-mark .bar,.s-navy .pr-mark .p,
.s-violet .pr-mark .bar,.s-violet .pr-mark .p,
.s-deepest .pr-mark .bar,.s-deepest .pr-mark .p{color:var(--c-mark)}
.s-navy .pr-line,.s-violet .pr-line,.s-deepest .pr-line{color:var(--c-body)}
.s-navy .pr-list li,.s-violet .pr-list li,.s-deepest .pr-list li{border-color:var(--c-line2)}
.s-navy .pr-list li em,.s-violet .pr-list li em,.s-deepest .pr-list li em{color:var(--c-mark)}
.s-navy .price .t,.s-violet .price .t,.s-deepest .price .t,
.s-navy .price strong,.s-violet .price strong,.s-deepest .price strong{color:var(--c-head)}
.s-navy .price .n,.s-violet .price .n,.s-deepest .price .n{color:var(--c-mark)}
.s-navy .c-points li,.s-violet .c-points li,.s-deepest .c-points li{
  border-color:var(--c-line);color:var(--c-body)}
.s-navy .c-points .k,.s-violet .c-points .k,.s-deepest .c-points .k{color:var(--c-head)}
.s-navy .c-cta .mail,.s-violet .c-cta .mail,.s-deepest .c-cta .mail{color:var(--c-sub)}
.s-navy .c-cta .mail a,.s-violet .c-cta .mail a,.s-deepest .c-cta .mail a{color:var(--c-head)}
.s-navy .corp dt,.s-violet .corp dt,.s-deepest .corp dt,
.s-navy .corp dd,.s-violet .corp dd,.s-deepest .corp dd{
  border-color:var(--c-line);color:var(--c-body)}
.s-navy .corp a,.s-violet .corp a,.s-deepest .corp a{color:var(--c-head)}
.s-navy .cta-facts dt,.s-violet .cta-facts dt,.s-deepest .cta-facts dt{color:var(--c-sub)}
.s-navy .cta-facts dd,.s-violet .cta-facts dd,.s-deepest .cta-facts dd,
.s-navy .cta-facts a,.s-violet .cta-facts a,.s-deepest .cta-facts a{color:var(--c-body)}
.s-navy .live,.s-violet .live,.s-deepest .live{color:var(--c-sub)}

/* CTAボタン：紫地の上では白ボタンだったが、紙地では紫ボタンにする */
.s-violet .btn.solid,
.s-navy:not(:has(.flow,.node,.app-chrome,.layer,.decide,.zoom-card,.tbl,.rel,.log,.peek-bar,.split)) .btn.solid{
  background:var(--principle);color:var(--paper);
}
.s-violet .btn.solid:hover{background:var(--violet-d);color:var(--paper)}

/* ── 補助文字をAAに通す（実測3.16→4.54）────────────────────
   #828AA0 は紙の上で 3.16 しかなく、小さい字のAA（4.5）を割っていた。
   色相を保ったまま明度を81%にして 4.54 にする。--ink-2 との差は保つ。 */
:root{ --ink-3:#656C7D; }   /* 薄い塗り rgb(239,238,233) の上でも4.5を超える値 */

/* ── 面の中の「塗り」も変数にする ─────────────────────────── */
:root{
  /* 節の外で使われたときの既定（地は明るいので明るい側） */
  --c-head:var(--ink); --c-body:var(--ink); --c-sub:var(--ink-2);
  --c-eyebrow:var(--principle); --c-mark:var(--principle);
  --c-line:var(--line); --c-line2:var(--line-2);
  --c-fill:rgba(24,35,59,.03); --c-fill2:rgba(85,70,168,.08);
}
.s-navy,.s-deepest,.s-violet{
  --c-fill:rgba(255,255,255,.03); --c-fill2:rgba(183,185,220,.12);
}
.s-violet,
.s-navy:not(:has(.flow,.node,.app-chrome,.layer,.decide,.zoom-card,.tbl,.rel,.log,.peek-bar,.split)),
.s-deepest:not(:has(.flow,.node,.app-chrome,.layer,.decide,.zoom-card,.tbl,.rel,.log,.peek-bar,.split)){
  --c-fill:rgba(24,35,59,.03); --c-fill2:rgba(85,70,168,.08);
}
/* ロゴの縦棒は、新しいトップと同じ紫にする（ペリウィンクルは紙の上で1.75しかない） */
.brand .bar,.logotype .bar,footer .fm .bar{color:var(--principle);opacity:.55}


/* ── 新しいフッター（top.css から移植・2026-08-26）────────────────
   旧フッター（footer{background:var(--deepest)} の濃い面）を打ち消して置き換える。
   ロゴの縦棒は濃い地の上で2.64しかなかったが、地が紙色になるので解決する。 */
footer{background:var(--paper);color:var(--ink);padding:0;border-top:1px solid var(--line)}
   ═══════════════════════════════════════════════════════════════ */
footer{border-top:1px solid var(--line);padding:0}
footer .fmain{background:rgba(24,35,59,.04);padding:clamp(38px,5vw,72px) 0}
footer .fcols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,40px);
}
footer .fcol{display:flex;flex-direction:column;align-items:flex-start}
footer .fh{
  font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:.9em;
  padding-bottom:.7em;border-bottom:1px solid var(--line);align-self:stretch;
}
footer .fcol a{
  font-size:.8rem;line-height:1.6;color:var(--ink-2);
  padding:.42em .5em;margin-inline:-.5em;
  transition:background .16s ease,color .16s ease;
}
footer .fcol a:hover,footer .fcol a:focus-visible{background:var(--principle);color:var(--paper)}

footer .fbase{padding:clamp(30px,4vw,56px) 0 clamp(24px,3vw,40px)}
footer .fsign{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em 2em}
footer .fmark{
  font-family:var(--grot);font-weight:700;font-size:clamp(1rem,2vw,1.32rem);
  letter-spacing:.14em;color:var(--ink);line-height:1;
}
footer .fmark .bar{
  display:inline-block;width:2px;height:.72em;background:var(--principle);
  margin:0 .16em;transform:none;
}
footer .fcreed{font-family:var(--min);font-size:.84rem;color:var(--ink-2);letter-spacing:.03em}

footer .fbot{
  margin-top:clamp(24px,3vw,40px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.8em 2em;
}
footer .fcopy{font-family:var(--grot);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3)}
footer .futil{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center}
footer .futil a{font-size:.76rem;color:var(--ink-2);padding:.3em .8em}
footer .futil a + a{border-left:1px solid var(--line)}
footer .futil a:hover,footer .futil a:focus-visible{color:var(--principle)}
@media (max-width:620px){
  footer .futil{margin-left:0}
  footer .futil a{padding-inline:0}
  footer .futil a + a{border-left:0;margin-left:1.2em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   写真帯の修正（2026-08-26・単色化とは別の既存バグ）
   `.photo-band>img` は WebP対応で <picture> を挟んだ時点で当たらなくなっていた。
   結果、写真が帯を覆わず自然サイズで表示され、帯の高さが1946pxまで膨らんでいた
   （実測：帯1440×1946 / 画像1200×1500 static / object-fit:fill）。
   <picture> を絶対配置の器にし、中の img を覆わせる。
   ═══════════════════════════════════════════════════════════════════════════ */
.photo-band>picture{position:absolute;inset:0;display:block;z-index:0}
.photo-band>picture>img,.photo-band>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* ── 明るくなった節に残っていた濃い面向けの色 ─────────────── */
.pr-mark{color:var(--c-head)}
.pr-mark .bar,.pr-mark .p{color:var(--c-mark)}
.pr-line{color:var(--c-body)}
.pr-list{border-top-color:var(--c-line)}
.pr-list li{border-bottom-color:var(--c-line2);color:var(--c-head)}
.pr-list li em{color:var(--c-mark)}
.split .human li{color:var(--c-head);border-color:var(--c-line)}
.split .human .k,.split .machine .k{color:var(--c-sub)}
.c-points li{border-bottom-color:var(--c-line);color:var(--c-body)}
.c-points .k{color:var(--c-head)}
.c-cta .mail{color:var(--c-sub)}
.c-cta .mail a{color:var(--c-head)}
.corp dt,.corp dd{border-top-color:var(--c-line);color:var(--c-body)}
.corp a{color:var(--c-head)}
.cta-facts dd,.cta-facts a{color:var(--c-body)}
.hero .def{color:var(--c-body)}
.decide .en{color:var(--c-mark)}
.decide .ja{color:var(--c-head)}
.zoom-card .big{color:var(--c-head)}
.zoom-card .sub,.zoom-note{color:var(--c-sub)}
.layer .lt{color:var(--c-sub)}
.layer .ls{color:var(--c-body)}
.layer.mid .lt{color:var(--c-mark)}

/* ── 画面の再現の中の小さすぎるコントラストを上げる ──────────
   実測：ラベルが濃い地の上で3.0しかなかった（AAは4.5）。
   画面の再現は濃いまま残す方針なので、文字側を明るくして通す。 */
.s-navy .node span,.s-deepest .node span,
.s-navy .app-chrome span,.s-deepest .app-chrome span{color:#9AA6BE}
.s-navy .sec-k,.s-deepest .sec-k,
.s-navy .arrow,.s-deepest .arrow,
.s-navy .ar,.s-deepest .ar{color:#9AA6BE}
.tbl th{color:#9AA6BE}

/* ── 画面の再現の中の細かいラベル（実測3.0〜3.36 → AAに通す）──────
   .layer .tags span ／ .app-side .blk .k ／ .log .t が濃い地の上で
   4.5を割っていた。画面の再現は濃いまま残す方針なので文字側を明るくする。
   #9AA6BE は #0F1626 の上で 6.0 前後。 */
.layer .tags span{color:#9AA6BE}
.app-side .blk .k,.app .blk .k,.app-side .log .t,.app .log .t{color:#9AA6BE}
.app-side .log li,.app .log li{color:#C3CBD9}

/* ── .split の中は「器ごとに地が違う」ので節の変数に任せない ──────
   .split .human は紫の塗りを持つ（background:var(--principle)）。
   節の変数（--c-head）に任せると、明るい節では濃紺の字が紫の上に載って
   コントラスト2.11になる（実測）。紫の上は紙色に固定する。
   .split .machine は薄い塗りなので節に追従させる。 */
.split{border-color:var(--c-line)}
.split .machine{border-right-color:var(--c-line);background:var(--c-fill)}
.split li{border-bottom-color:var(--c-line2);color:var(--c-body)}
.split .machine .k{color:var(--c-sub)}
.split .human{background:var(--principle)}
.split .human .k{color:rgba(246,245,240,.86)}
.split .human li{color:var(--paper);border-color:rgba(246,245,240,.28);font-weight:600}
@media (max-width:760px){ .split .machine{border-bottom-color:var(--c-line)} }

/* ── 画面の再現の中の器（rgb(55,61,74)）の上でもAAに通す ──────
   #9AA6BE は濃紺の上では6.0だが、少し明るい器の上では4.44で0.06足りない（実測）。 */
.layer .tags span,
.s-navy .node span,.s-deepest .node span,
.s-navy .app-chrome span,.s-deepest .app-chrome span{color:#A8B4CB}
.node .idx,.node .nm,.node .tp{color:#A8B4CB}

/* ── 「準備中」バッジ（サービス名の後ろに小さく付ける）───────── */
.soon{
  display:inline-block;margin-left:.7em;padding:.18em .6em;
  font-family:var(--jp);font-style:normal;font-size:.62em;font-weight:600;
  letter-spacing:.06em;line-height:1.5;vertical-align:middle;
  color:var(--principle);border:1px solid currentColor;border-radius:2px;
}
.s-navy .soon,.s-violet .soon,.s-deepest .soon{color:inherit;opacity:.72}

/* ── ドック内のAIロゴも塗りに切り替える（2026-08-31）──────────
   ドックは濃紺の面。ロゴの原色（黒・橙・4色）はここでは沈む／浮くので、
   紙色に寄せて統一する。Googleの4色だけは形が崩れないよう白に置き換える。 */
.dock .ai a svg.lg{width:13px;height:13px;stroke:none;fill:currentColor;color:rgba(246,245,240,.82)}
.dock .ai a svg.lg-google path{fill:currentColor}
.dock .ai a:hover svg.lg,.dock .ai a:focus-visible svg.lg{color:var(--paper)}

/* ── 相場の表（/pricing/#market）─────────────────────────────
   🚩 .pp-table のスタイルは `.doc .pp-table` に限定されているため、
      .doc の外に置いたこの表には当たらない。ここで独立に定義する。 */
#market .pp-table{
  width:100%;border-collapse:collapse;margin-top:clamp(20px,2.4vw,32px);
  font-size:.92rem;
}
#market .pp-table th,#market .pp-table td{
  padding:.85em .9em;border-bottom:1px solid var(--line-2);
  text-align:left;vertical-align:top;line-height:1.75;
}
#market .pp-table thead th{
  border-bottom:1px solid var(--ink);font-family:var(--grot);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;
}
#market .pp-table td:first-child{font-weight:600}
#market .pp-table td:nth-child(2),#market .pp-table td:nth-child(3){
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  #market .pp-table{font-size:.84rem}
  #market .pp-table th,#market .pp-table td{padding:.7em .5em}
}