/* ══════════════════════════════════════════
   Keepdata — Top page  /  A案：墨フラット × 朱1点
   ・グラデーション不使用（文字・背景・ボタンすべて単色）
   ・格子＝面グリッド + カラムルールの2層
   ══════════════════════════════════════════ */
:root{
  --ink:#14161A;          /* 地（図面グレー） */
  --ink-1:#171A1E;
  --ink-2:#191C21;        /* 面 */
  --ink-3:#1D2126;        /* カード */
  --hair:#2A2D32;                 /* 罫線（実線） */
  --hair-2:rgba(255,255,255,.055);/* 格子 */
  --hair-3:rgba(255,255,255,.03);
  --hair-4:#3A3D42;               /* 明るい罫 */
  --fg:#F0EDE8;
  --fg-2:#A8A5A0;        /* 本文 7.38:1（AAA） */
  --fg-3:#8A8E94;        /* 注記・ラベル 5.50:1（AA） */
  --red:#E2543B;          /* 差し色（朱） */
  --red-2:#FF8A6B;       /* 墨地の上のリンク 7.85:1 */
  --red-btn:#C93D26;     /* 塗りボタン地色（白文字 5.03:1） */
  --red-on-paper:#BE4029;/* 明るい面の文字・リンク 4.62:1 */
  --red-dim:rgba(226,84,59,.13);
  --on-accent:#ffffff;
  --paper:#F0EFEC;
  --paper-ink:#14161A;
  --paper-2:#585651;
  --paper-hair:#DEDCD7;
  --gut:32px;
  --maxw:1200px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--ink);color:var(--fg);overflow-x:hidden;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",Meiryo,-apple-system,sans-serif;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
  line-height:1.85;letter-spacing:.002em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── 格子（2層） ───────────────────── */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none}
.mesh .sq{                    /* 面グリッド */
  position:absolute;inset:0;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 85%);
}
.mesh .cols{                  /* カラムルール（Linear/Vercel系の縦罫） */
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),100% - var(--gut)*2);
  background-image:repeating-linear-gradient(90deg,var(--hair-2) 0 1px,transparent 1px calc(100%/6));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 70%,transparent 100%);
}
.mesh .edge{                  /* コンテナ両端の実線 */
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),100% - var(--gut)*2);
  border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 70%,transparent 100%);
}
main,header,footer{position:relative;z-index:1}

/* ── レイアウト部品 ───────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.rule{height:1px;background:var(--hair);width:100%}
section{padding:clamp(64px,6.6vw,100px) 0;position:relative}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper h2,.paper h3{color:var(--paper-ink)}

.kicker{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--red);text-transform:uppercase;
}
.kicker::before{content:"";width:5px;height:5px;background:var(--red);border-radius:1px}
.paper .kicker{color:#BE4029}
.paper .kicker::before{background:#BE4029}

h2.sec{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.34;letter-spacing:-.012em;margin:18px 0 0}
.lede{margin-top:18px;color:var(--fg-2);font-size:15.5px;max-width:58ch}
.paper .lede{color:var(--paper-2)}

.btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;padding:14px 26px;border-radius:2px;transition:.2s}
.btn-p{background:var(--red-btn);color:var(--on-accent)}
.btn-p:hover{background:#c8462f}
.btn-g{border:1px solid var(--hair-4);color:var(--fg)}
.btn-g:hover{border-color:#5A5D62}
.paper .btn-p{background:var(--paper-ink);color:#fff}
.paper .btn-p:hover{background:#2a2a33}
.paper .btn-g{border-color:#D5D0CA;color:var(--paper-ink)}
.paper .btn-g:hover{border-color:#A9A29A}
.arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* ── ヘッダー ───────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:70;border-bottom:1px solid transparent;transition:.25s}
header.on{background:rgba(20,22,26,.88);backdrop-filter:blur(20px) saturate(1.2);border-bottom-color:var(--hair)}
.hbar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hbar img{height:24px}
/* ヒーロー本文の社名（初見の人が「どこの会社か」を最初に読み取れるように） */
.hero .who{display:inline-block;margin-top:10px;font-size:14px;color:var(--fg-3);letter-spacing:.01em}
/* 広い画面ではロゴが小さく見えるため引き上げる（1440pxで幅8%→11%） */
@media(min-width:1000px){.hbar img{height:31px}}
@media(min-width:1400px){.hbar img{height:34px}}
nav{display:flex;align-items:center;gap:28px;font-size:13.5px;font-weight:600}
nav a.lnk{color:var(--fg-2);transition:.18s;white-space:nowrap}
nav a.lnk:hover{color:var(--fg)}
nav .cta{background:var(--red-btn);color:var(--on-accent);padding:9px 18px;border-radius:2px;font-weight:700}
nav .cta:hover{background:#c8462f}
@media(max-width:1040px){nav .lnk{display:none}}

.tbl .ofc{display:grid;gap:7px}
.tbl .ofc span{display:block}

/* 和文の折り返し：文節で折る＋最終行に1文字だけ残さない */
body,p,li,td,th,dd,figcaption,summary,.lede,.sub-lead,.cap,.acap,.quote,.nbox,.faq .a{
  word-break:auto-phrase;text-wrap:pretty}
h1,h2,h3,h4,h5,.sec{text-wrap:balance}

/* グリッド項目が min-content 未満に縮まない問題（min-width:auto が既定）への対策 */
.split>*,.two>*,.duo>*,.quad>*,.g3>*,.cases>*,.pw>*,.hgrid>*,.msg>*,.certs>*,.plogos>*{min-width:0}
.split svg,.panel svg{max-width:100%;height:auto}

/* ── モバイルメニュー ─────────────────────────── */
.burger{display:none;width:42px;height:42px;border:1px solid var(--hair);border-radius:2px;
  background:transparent;cursor:pointer;padding:0;place-items:center;flex:0 0 auto}
.burger span{display:block;width:17px;height:1.5px;background:var(--fg);margin:3.5px auto;transition:.24s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mnav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);z-index:80;
  background:var(--ink-1);border-left:1px solid var(--hair);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;padding:22px 24px 32px;overflow-y:auto;visibility:hidden}
.mnav.open{transform:translateX(0);visibility:visible}
.mnav .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mnav .hd img{height:22px}
.mnav .x{width:38px;height:38px;border:1px solid var(--hair);border-radius:2px;background:transparent;
  color:var(--fg-2);font-size:19px;line-height:1;cursor:pointer}
.mnav h6{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--red);
  font-weight:500;margin:22px 0 12px}
.mnav a{display:block;padding:11px 0;font-size:15px;font-weight:600;color:var(--fg);
  border-bottom:1px solid var(--hair)}
.mnav a.sm{font-size:13.5px;font-weight:500;color:var(--fg-2);padding:9px 0}
.mnav .go{margin-top:26px;display:block;text-align:center;background:var(--red-btn);
  color:var(--on-accent);font-weight:700;padding:13px;border-radius:2px;border-bottom:0}
.mscrim{position:fixed;inset:0;z-index:78;background:rgba(8,9,11,.62);
  opacity:0;pointer-events:none;transition:opacity .3s}
.mscrim.open{opacity:1;pointer-events:auto}
body.mlock{overflow:hidden}

@media(max-width:1040px){
  .burger{display:grid}
  nav .cta{padding:9px 13px;font-size:12.5px}
  nav .cta .full{display:none}
}
@media(max-width:560px){nav .cta{display:none}}
@media(min-width:1041px){.mnav,.mscrim{display:none}}
@media (prefers-reduced-motion: reduce){.mnav,.mscrim,.burger span{transition:none}}

/* ── ヒーロー ───────────────────── */
.hero{min-height:min(92vh,780px);display:flex;align-items:center;padding-top:96px;padding-bottom:24px}
.hgrid{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:center;width:100%}
h1{font-size:clamp(34px,4.7vw,58px);font-weight:800;line-height:1.19;letter-spacing:-.02em;margin:26px 0 0;word-break:normal;overflow-wrap:anywhere}
.hero .lead{margin-top:24px;font-size:16px;color:var(--fg-2);max-width:43ch;line-height:1.95}
.hero .lead b{color:var(--fg);font-weight:700}
.acts{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

/* 信頼バー（ヒーロー直下） */
.tbar{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#16191D}
.tbar .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.tbar .c{padding:22px 20px 22px 0;border-right:1px solid var(--hair);display:block;position:relative;transition:.2s}
.tbar a.c:hover{background:#1D2126}
.tbar a.c:hover span{color:var(--red-2)}
.tbar .go{position:absolute;right:16px;top:22px;font-style:normal;font-size:11px;color:var(--fg-3);opacity:0;transition:.2s}
.tbar a.c:hover .go{opacity:1;color:var(--red)}
.tbar small{font-size:12px;font-weight:600;color:var(--fg-3);letter-spacing:0}
.mn{font-family:var(--mono);font-style:normal;font-weight:600;letter-spacing:.02em}
.tbar .c:last-child{border-right:0}
.tbar b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--red);font-weight:500;margin-bottom:5px}
.tbar span{font-size:13px;font-weight:700;line-height:1.55;transition:.2s;display:block}
@media(max-width:900px){.tbar .wrap{grid-template-columns:1fr 1fr}.tbar .c{border-bottom:1px solid var(--hair)}.tbar .c:nth-child(2n){border-right:0}}

/* ── 製品UI（HTMLで再現・スクショではない） ── */
.app{border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--ink-2);font-size:12.5px}
.abar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--hair);background:#1D2126}
.abar i{width:8px;height:8px;border-radius:50%;background:#3A3D42;display:block}
.abar .ag{margin-left:auto;font-size:12px;font-weight:600;color:var(--fg-2);border:1px solid var(--hair);border-radius:2px;padding:4px 11px;display:flex;align-items:center;gap:7px}
.abar .ag::before{content:"";width:5px;height:5px;border-radius:50%;background:#4FD08A}
.abody{display:grid;grid-template-columns:146px 1fr;min-height:318px}
.aside{border-right:1px solid var(--hair);padding:14px 11px;background:#16191D}
.aside .bd{display:flex;align-items:center;gap:7px;font-weight:700;font-size:12px;margin-bottom:15px;white-space:nowrap;letter-spacing:0}
.aside .bd svg{width:17px;height:17px;flex:0 0 17px}
.aside .it{font-size:11px;color:var(--fg-3);padding:6px 8px;border-radius:2px;margin-bottom:1px}
.aside .it.on{background:var(--red-dim);color:var(--red-2);font-weight:700}
.amain{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.m{max-width:86%;padding:11px 14px;border-radius:3px;line-height:1.82;font-size:12px}
.m.me{margin-left:auto;background:var(--red-btn);color:var(--on-accent);border-bottom-right-radius:0}
.m.ai{background:var(--ink-3);border:1px solid var(--hair);border-bottom-left-radius:0;color:#E9E6E3}
.m.ai b{color:#fff}
.cite{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--hair)}
.cite s{text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--red-2);border:1px solid #4A3A36;border-radius:2px;padding:2px 7px;background:rgba(226,84,59,.06)}
.dots{display:inline-flex;gap:4px;align-items:center;height:12px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--red-2);animation:bl 1.3s infinite}
.dots i:nth-child(2){animation-delay:.16s}.dots i:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
.afoot{border-top:1px solid var(--hair);padding:11px 20px;display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:12px}
.afoot .bar{flex:1;height:28px;border:1px solid var(--hair);border-radius:2px;display:flex;align-items:center;padding:0 11px}
.acap{margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);text-align:right;letter-spacing:.03em}
@media(prefers-reduced-motion:reduce){.dots i{animation:none}}

/* ── 製品セクション ───────────────── */
.phead{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:52px}
.pname{display:flex;align-items:center;gap:15px;margin-top:16px}
.pname svg{width:48px;height:48px;flex:0 0 48px}
.pname .t{font-size:clamp(27px,3.9vw,46px);font-weight:800;line-height:1.06;letter-spacing:-.022em}
.pname .t sup{font-size:.33em;vertical-align:super}
.pname .y{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--fg-3);margin-top:9px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.duo .cell{background:var(--ink-1);padding:34px 32px 36px;transition:.25s}
.duo .cell:hover{background:var(--ink-3)}
.duo .no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--red)}
.duo h3{font-size:21px;font-weight:800;margin:12px 0 12px;letter-spacing:-.01em}
.duo p{font-size:14px;color:var(--fg-2)}
.duo ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);list-style:none;display:grid;gap:8px}
.duo li{font-size:12.5px;color:var(--fg-2);padding-left:16px;position:relative}
.duo li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--red)}

.quad{display:grid;grid-template-columns:repeat(4,1fr);margin-top:1px;border:1px solid var(--hair);border-top:0;border-radius:0 0 3px 3px;overflow:hidden;background:var(--hair);gap:1px}
.quad.n3{grid-template-columns:repeat(3,1fr)}
.quad .c{background:var(--ink-1);padding:26px 24px 28px}
.quad .n{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.14em}
.quad h4{font-size:15.5px;font-weight:800;margin:11px 0 9px;letter-spacing:-.01em}
.quad p{font-size:13px;color:var(--fg-2);line-height:1.8}

/* ── 事例 ───────────────────────── */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair);border-radius:3px;overflow:hidden;margin-top:44px}
.cases .c{background:#fff;padding:26px 30px 30px}
.cases .ci{width:64px;height:40px;display:block;margin-bottom:16px}
.cases .cl{margin-top:16px;font-size:12.5px;font-weight:700;color:#BE4029}
.cases .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#BE4029;font-weight:600}
.cases h4{font-size:17px;font-weight:800;margin:10px 0 9px;letter-spacing:-.01em}
.cases p{font-size:13.5px;color:var(--paper-2)}

/* ── パートナー ───────────────────── */
.two{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.pw{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.pw .r{background:var(--ink-1);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:18px}
.pw .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--red);padding-top:4px;white-space:nowrap}
.pw h4{font-size:16px;font-weight:800;margin-bottom:6px}
.pw p{font-size:13.5px;color:var(--fg-2)}
.plog{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.plog .l{border:1px solid var(--hair);border-radius:2px;padding:18px 20px;background:var(--ink-1)}
.plog .nm{font-size:15px;font-weight:800;letter-spacing:-.01em}
.plog .ds{font-size:11.5px;color:var(--fg-3);margin-top:4px;line-height:1.7}

/* ── プロダクト群 ───────────────── */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair);border-radius:3px;overflow:hidden;margin-top:44px}
.g3 .c{background:#fff;padding:30px 30px 32px;display:flex;flex-direction:column}
.g3 .st{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;padding:4px 9px;border-radius:2px;align-self:flex-start}
.st-now{background:rgba(46,125,91,.12);color:#2E7D5B}
.st-dev{background:rgba(226,84,59,.11);color:#BE4029}
.st-plan{background:rgba(16,16,20,.07);color:var(--paper-2)}
.g3 h3{font-size:19px;font-weight:800;margin:0 0 10px;letter-spacing:-.012em}
.g3 p{font-size:13.5px;color:var(--paper-2);flex:1}
.g3 .more{margin-top:18px;font-size:12.5px;font-weight:700;color:#BE4029}

/* ── 会社 ───────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stats .s{padding:28px 22px 28px 0;border-right:1px solid var(--hair)}
.stats .s:last-child{border-right:0}
.stats .num{font-size:clamp(25px,3.2vw,38px);font-weight:800;line-height:1;letter-spacing:-.03em}
.stats .num em{font-style:normal;font-size:.44em;font-weight:700;letter-spacing:0}
.stats .lbl{font-size:11.5px;color:var(--fg-3);margin-top:10px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font-size:12px;font-weight:600;border:1px solid var(--hair);border-radius:2px;padding:6px 13px;color:var(--fg-2)}
.paper .chips span{color:var(--paper-2);border-color:var(--paper-hair)}

/* ── CTA / フッター ───────────────── */
.cta{border-top:1px solid var(--hair)}
.cta h2{font-size:clamp(25px,3.4vw,40px);font-weight:800;line-height:1.36;letter-spacing:-.015em}
footer{border-top:1px solid var(--hair);padding:64px 0 40px;font-size:13px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--red);font-weight:500;margin-bottom:17px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{color:var(--fg-2)}footer a:hover{color:var(--fg)}
footer img{height:22px;margin-bottom:17px}
.fb{margin-top:48px;padding-top:20px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--fg-3);font-size:11.5px}

/* スクロール表示：既定は「見える」。JSが動いた時だけ隠して演出する
   （JSが失敗しても本文が消えないようにするため。html.js は head 内の1行で付与） */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

@media(max-width:980px){.tbl th{white-space:normal}
  :root{--gut:22px}
  .hgrid,.duo,.quad,.quad.n3,.two,.g3,.cases,.fg,.phead,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}.stats .s:nth-child(2n){border-right:0}
  .abody{grid-template-columns:1fr}.aside{display:none}
  .mesh .cols{background-image:repeating-linear-gradient(90deg,var(--hair-3) 0 1px,transparent 1px 50%)}
}

/* ══════════ 下層ページ用コンポーネント ══════════ */
main.sub{padding-top:68px}
nav a.lnk.on{color:var(--fg)}
nav a.lnk.on::after{content:"";display:block;height:1px;background:var(--red);margin-top:4px}

/* ページヘッダー */
.phero{padding:56px 0 48px;border-bottom:1px solid var(--hair);position:relative}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--fg-3);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--fg-3)}.crumb a:hover{color:var(--red-2)}
.phero h1{font-size:clamp(28px,3.8vw,44px);font-weight:800;line-height:1.28;letter-spacing:-.018em;margin:20px 0 0}
.phero .sub-lead{margin-top:20px;color:var(--fg-2);font-size:15.5px;max-width:60ch;line-height:1.95}
.phero .meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;font-size:12px;color:var(--fg-3)}
.phero .meta b{font-family:var(--mono);color:var(--red);font-weight:500;letter-spacing:.1em;margin-right:7px}

/* ページ内アンカー */
.anav{border-bottom:1px solid var(--hair);position:sticky;top:68px;z-index:40;background:rgba(20,22,26,.92);backdrop-filter:blur(14px)}
.anav .wrap{display:flex;gap:24px;overflow-x:auto;padding-top:14px;padding-bottom:14px;font-size:13px;font-weight:600;scrollbar-width:none}
.anav .wrap::-webkit-scrollbar{display:none}
.anav a{color:var(--fg-2);white-space:nowrap}.anav a:hover{color:var(--red-2)}

/* 本文（長文ページ） */
.prose{max-width:76ch}
.prose h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;line-height:1.4;letter-spacing:-.012em;margin:64px 0 18px;padding-top:22px;border-top:1px solid var(--hair)}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:17px;font-weight:800;margin:34px 0 12px;padding-left:13px;border-left:2px solid var(--red)}
.prose h4{font-size:15px;font-weight:800;margin:24px 0 8px;color:var(--red-2)}
.prose p{margin:14px 0;color:var(--fg-2);font-size:15px;line-height:1.98}
.prose strong{color:var(--fg);font-weight:700}
.prose ul,.prose ol{margin:14px 0 14px 20px;color:var(--fg-2);font-size:15px}
.prose li{margin:8px 0;line-height:1.9}
.prose li::marker{color:var(--red)}
.prose a{color:var(--red-2);border-bottom:1px solid rgba(226,84,59,.35)}
.paper .prose p,.paper .prose ul,.paper .prose ol{color:var(--paper-2)}
.paper .prose strong{color:var(--paper-ink)}
.paper .prose h2{border-top-color:var(--paper-hair)}
.paper .prose a{color:var(--red-on-paper);border-bottom-color:rgba(190,64,41,.35)}
.paper .prose h4{color:var(--red-on-paper)}
.paper a{color:var(--red-on-paper)}

/* データテーブル */
.tbl{border:1px solid var(--hair);border-radius:3px;overflow-x:auto;margin:24px 0}
.tbl table{border-collapse:collapse;width:100%;font-size:14px}
.tbl th{background:var(--ink-2);text-align:left;padding:14px 18px;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--fg);border-bottom:1px solid var(--hair);white-space:nowrap;vertical-align:top}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--hair);color:var(--fg-2);vertical-align:top;line-height:1.85}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl th.k{width:180px;background:var(--ink-2)}
.tbl .mn{font-family:var(--mono);font-style:normal;letter-spacing:.02em}

/* 沿革 */
.tl{border-left:1px solid var(--hair);margin:32px 0 0 6px;padding-left:0}
.tl .y{position:relative;padding:0 0 34px 30px}
.tl .y::before{content:"";position:absolute;left:-4.5px;top:9px;width:8px;height:8px;background:var(--red);border-radius:50%}
.tl .yy{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--red-2);letter-spacing:.04em}
.tl .yb{margin-top:8px;display:grid;gap:9px}
.tl .yb div{font-size:14.5px;color:var(--fg-2);line-height:1.85}
.tl .yb b{color:var(--fg);font-weight:700}

/* 実績（社名リスト） */
.clist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-top:22px}
.clist div{background:var(--ink-1);padding:15px 18px;font-size:13.5px;color:var(--fg-2)}
.sector{margin-top:44px}
.sector h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--red-on-paper);font-weight:500;padding-bottom:12px;border-bottom:1px solid var(--hair)}

/* FAQ */
.faq{border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-top:26px}
.faq details{border-bottom:1px solid var(--hair);background:var(--ink-1)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--mono);color:var(--red);font-size:12px;padding-top:3px}
.faq details[open] summary{color:var(--red-2)}
.faq .a{padding:0 22px 20px 52px;font-size:14px;color:var(--fg-2);line-height:1.95}

/* 注記 */
.nbox{border:1px solid var(--hair);border-left:2px solid var(--red);background:var(--ink-1);padding:20px 24px;margin:26px 0;font-size:14px;color:var(--fg-2);line-height:1.95}
.nbox b{color:var(--fg)}

/* ステップ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-top:26px}
.steps .s{background:var(--ink-1);padding:24px 22px 26px}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.14em}
.steps h4{font-size:15px;font-weight:800;margin:11px 0 8px}
.steps p{font-size:13px;color:var(--fg-2);line-height:1.8}

/* 大きめの2カラム（図＋説明） */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:44px}
.split.rev>div:first-child{order:2}
.split.mid{align-items:center}
.panel{border:1px solid var(--hair);border-radius:3px;background:var(--ink-2);padding:28px}

/* 下部CTA */
.ctafoot{border-top:1px solid var(--hair);background:var(--ink-1)}
.ctafoot h2{font-size:clamp(23px,3.1vw,34px);font-weight:800;line-height:1.38;letter-spacing:-.015em}

/* 引用（お客様の声） */
.quote{border:1px solid var(--hair);border-radius:3px;background:var(--ink-2);padding:30px 32px;margin-top:26px}
.quote p{font-size:15px;color:var(--fg);line-height:2;margin:0}
.quote .who{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--fg-3)}
.paper .quote{background:#fff;border-color:var(--paper-hair)}
.paper .quote p{color:var(--paper-ink)}
.paper .quote .who{color:var(--paper-2);border-top-color:var(--paper-hair)}

@media(max-width:980px){
  .clist{grid-template-columns:1fr 1fr}
  .clist>*{min-width:0;overflow-wrap:anywhere}
  .steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev>div:first-child{order:0}
  .anav{top:64px}
  .tbl th.k{width:auto}
}


/* ══════════ 追加：証書・パートナーロゴ・図版 ══════════ */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.cert{border:1px solid var(--hair);border-radius:3px;background:var(--ink-2);overflow:hidden}
.cert .img{background:#fff;padding:14px;display:flex;align-items:center;justify-content:center}
.cert .img img{max-height:300px;width:auto;box-shadow:0 6px 24px -12px rgba(0,0,0,.5)}
.cert .cap{padding:18px 20px;border-top:1px solid var(--hair)}
.cert .cap h4{font-size:14.5px;font-weight:800;margin-bottom:8px}
.cert .cap dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;margin-top:10px}
.cert .cap dt{color:var(--fg-3);font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding-top:2px}
.cert .cap dd{color:var(--fg-2)}

.split .plogos{grid-template-columns:1fr;margin-top:0}
.split .quote{margin-top:22px}
.plogos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden;margin-top:26px}
.plogos .l{background:#fff;padding:26px 24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.plogos .l img{max-height:44px;width:auto;max-width:100%;object-fit:contain}
.plogos .l .t{font-size:13px;color:var(--paper-2);line-height:1.8}
.plogos .l .t b{color:var(--paper-ink);display:block;font-size:14.5px;margin-bottom:4px}

/* 節（結び目）の背景モチーフ */
.knot{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.knot svg{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(760px,62%);height:auto;opacity:.5}
section.hasknot{position:relative;overflow:hidden}
section.hasknot > .wrap{position:relative;z-index:1}

/* 資料ダウンロードバー */
.dlbar{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--ink-1)}
.dlbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;flex-wrap:wrap}
.dlbar .t b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.dlbar .t span{display:block;font-size:12.5px;color:var(--fg-3);margin-top:5px}

/* 講師の顔写真 */
.g3 .c svg.fc{width:84px;height:84px;margin-bottom:16px;display:block}
.g3 .c img.fc{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:16px;filter:saturate(.9)}
/* パネル内の図版画像 */
.panel img.pimg{width:100%;height:auto;display:block;border:1px solid var(--hair);border-radius:2px;background:#fff;margin-bottom:20px}

/* 代表メッセージ（顔写真つき） */
.msg{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;margin-top:44px}
.msg .prose{margin-top:0}
.ph{margin:0}
.ph img{width:100%;height:auto;display:block;border:1px solid var(--hair);border-radius:3px;filter:saturate(.9)}
.ph figcaption{margin-top:12px;font-size:11.5px;color:var(--fg-3);letter-spacing:.02em}
@media(max-width:860px){.msg{grid-template-columns:1fr;gap:28px}.ph{max-width:230px}}

/* お知らせ一覧（.pw を明るい面でも使う／行をリンクにする） */
.paper .pw{background:var(--paper-hair);border-color:var(--paper-hair)}
.paper .pw .r{background:#fff}
.paper .pw h4{color:var(--paper-ink)}
.paper .pw p{color:var(--paper-2)}
.paper .pw .n{color:#BE4029}
.pw a.r{transition:background .2s}
.pw a.r:hover{background:var(--ink-3)}
.paper .pw a.r:hover{background:#F7F5F2}
.pw .n br + *,.pw .n{line-height:1.7}
.news-cat{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;border:1px solid currentColor;border-radius:2px;padding:2px 7px;margin-top:6px}

/* 図版パネル（キャプション付き） */
.cst{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  border:1px solid var(--hair);border-radius:2px;padding:5px 12px;color:var(--fg-2)}
.paper .cst{border-color:var(--paper-hair);color:var(--paper-2)}

.fig{border:1px solid var(--hair);border-radius:3px;background:var(--ink-2);padding:26px 26px 20px;margin-top:26px}
.fig svg{width:100%;height:auto;display:block}
.fig .sc{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:720px){
  .fig .sc>svg{min-width:660px}
  .fig .sc::after{content:"→ 横にスクロールできます";display:block;margin-top:10px;
    font-size:12px;color:var(--fg-3);font-family:var(--mono);letter-spacing:.06em}
  .paper .fig .sc::after{color:var(--paper-2)}
}
.fig .cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px;color:var(--fg-3);line-height:1.8}
.paper .fig{background:#fff;border-color:var(--paper-hair)}
.paper .fig .cap{color:var(--paper-2);border-top-color:var(--paper-hair)}

@media(max-width:980px){.certs,.plogos{grid-template-columns:1fr}.knot svg{display:none}}



/* ── 製品ページ ヒーロー：ブランドマークの動くアート（hf-） ───────── */
.phero.hf{padding-bottom:0;overflow:hidden}
.hf-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center}
.hf-art{position:relative}
.hf-art svg{width:100%;height:auto;display:block;overflow:visible}

/* 曲線の下地 */
.hf-base{stroke:#E2543B;opacity:.18;fill:none}

/* 曲線を光が走る（短い破線が長い経路を移動する） */
.hf-run{stroke:#E2543B;fill:none;stroke-linecap:round;
  stroke-dasharray:26 400;animation:hfRun 4.6s cubic-bezier(.5,0,.5,1) infinite}
.hf-run-2{animation-delay:-1.55s}
.hf-run-3{animation-delay:-3.1s}
.hf-cap{margin-top:18px;font-size:13.5px;line-height:1.75;color:var(--fg-3);max-width:34em}
@keyframes hfRun{0%{stroke-dashoffset:426}100%{stroke-dashoffset:0}}

/* 出口側へ抜ける光 */
.hf-out{stroke:#E2543B;fill:none;stroke-linecap:round;
  stroke-dasharray:18 200;animation:hfOut 4.6s cubic-bezier(.5,0,.5,1) infinite}
.hf-out-2{animation-delay:-1.55s}
.hf-out-3{animation-delay:-3.1s}
@keyframes hfOut{0%,32%{stroke-dashoffset:218;opacity:0}
  40%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* 出口のドットが順に灯る */
.hf-dot{animation:hfDot 4.6s ease-in-out infinite}
.hf-dot-2{animation-delay:-1.55s}
.hf-dot-3{animation-delay:-3.1s}
@keyframes hfDot{0%,38%,100%{opacity:.28;r:3}54%{opacity:1;r:4.4}}

/* 左の散らばり（暗黙知）が瞬く */
.hf-scatter circle{animation:hfTwinkle 9s ease-in-out infinite}
.hf-scatter circle:nth-child(3n){animation-delay:-3s}
.hf-scatter circle:nth-child(3n+1){animation-delay:-6s}
@keyframes hfTwinkle{0%,100%{opacity:.1}50%{opacity:.4}}

.hf-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;fill:#8A8E94}

@media(max-width:980px){
  .hf-grid{grid-template-columns:1fr;gap:30px}
  .phero.hf{padding-bottom:40px}
  .hf-art{max-width:460px}
}
@media (prefers-reduced-motion: reduce){
  .hf-run,.hf-out,.hf-dot,.hf-scatter circle{animation:none}
  .hf-run,.hf-out{stroke-dasharray:none;opacity:.75}
  .hf-dot{opacity:1}
  .hf-scatter circle{opacity:.28}
}

/* ── AI.Doc.STOR 図版のアニメーション ── */

/* Ingest：4段が順に灯り、接続線が右へ流れる（1周6秒） */
.st-ig{animation:stIg 6s ease-in-out infinite}
.st-ig1{animation-delay:0s}
.st-ig2{animation-delay:.5s}
.st-ig3{animation-delay:1s}
.st-ig4{animation-delay:1.5s}
@keyframes stIg{0%,6%{stroke:#6E6C68}13%,40%{stroke:#E2543B}48%,100%{stroke:#6E6C68}}

.st-ig-flow{stroke-dasharray:4 6;animation:stIgFlow 6s linear infinite}
.st-ig-flow2{animation-delay:-4.5s}
.st-ig-flow3{animation-delay:-3s}
.st-ig-flow4{animation-delay:-1.5s}
@keyframes stIgFlow{to{stroke-dashoffset:-60}}

/* AI検索：画面の再現（明るい面・架空データ） */
.st-ui{border:1px solid var(--paper-hair);border-radius:3px;overflow:hidden;background:#fff}
.st-ui-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--paper-hair);background:#F7F5F2}
.st-ui-dot{width:8px;height:8px;border-radius:50%;background:#D3D0CB;display:block}
.st-ui-tag{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#BE4029;border:1px solid var(--paper-hair);border-radius:2px;padding:3px 10px}
.st-ui-body{padding:18px 20px 20px}
.st-ui-q{border:1px solid var(--paper-hair);border-radius:2px;padding:11px 14px;display:flex;align-items:center}
.st-ui-qi{font-size:13px;color:var(--paper-ink);font-weight:600}
.st-ui-steps{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.st-ui-step{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;border:1px solid var(--paper-hair);border-radius:2px;padding:4px 9px;color:#6E6C68;animation:stUiStep 8s ease-in-out infinite}
.st-ui-s1{animation-delay:0s}
.st-ui-s2{animation-delay:.6s}
.st-ui-s3{animation-delay:1.2s}
.st-ui-s4{animation-delay:1.8s}
@keyframes stUiStep{0%,4%{color:#6E6C68;border-color:#DEDCD7}9%,72%{color:#BE4029;border-color:#E9B7AB}80%,100%{color:#6E6C68;border-color:#DEDCD7}}

.st-ui-ans{margin-top:16px;padding:14px 16px;border:1px solid var(--paper-hair);border-left:2px solid var(--red);border-radius:2px;font-size:13px;line-height:1.9;color:var(--paper-ink);animation:stUiIn 8s ease-in-out infinite}
.st-ui-al{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#BE4029;margin-bottom:6px}
.st-ui-res{margin-top:12px;display:grid;gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair);border-radius:2px;overflow:hidden;animation:stUiIn 8s ease-in-out infinite}
@keyframes stUiIn{0%,30%{opacity:0}34%,84%{opacity:1}92%,100%{opacity:0}}

.st-ui-r{background:#fff;padding:11px 14px;display:grid;grid-template-columns:1fr auto 92px;align-items:center;gap:14px}
.st-ui-h{background:#FAF9F7;padding:8px 14px}
.st-ui-rn{font-size:12.5px;color:var(--paper-ink);font-weight:600}
.st-ui-rd{font-family:var(--mono);font-size:11.5px;color:var(--paper-2)}
.st-ui-rel{display:block;height:3px;background:#EAE7E2;border-radius:2px;overflow:hidden}
.st-ui-relf{display:block;height:100%;background:var(--red);border-radius:2px}
.st-ui-f1{width:95%;animation:stUiF1 8s ease-in-out infinite}
.st-ui-f2{width:88%;animation:stUiF2 8s ease-in-out infinite}
.st-ui-f3{width:72%;animation:stUiF3 8s ease-in-out infinite}
@keyframes stUiF1{0%,34%{width:0}42%,100%{width:95%}}
@keyframes stUiF2{0%,36%{width:0}44%,100%{width:88%}}
@keyframes stUiF3{0%,38%{width:0}46%,100%{width:72%}}

/* スキルマップ：円がゆっくり上下し、同じ人の領域へ線が引かれる */
.st-sm-b{transform-box:fill-box;transform-origin:center;animation:stSmB 8s ease-in-out infinite}
.st-sm-b1{animation-delay:0s}
.st-sm-b2{animation-delay:-2.6s}
.st-sm-b3{animation-delay:-5.2s}
@keyframes stSmB{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

.st-sm-link{stroke-dasharray:200;animation:stSmLink 8s ease-in-out infinite}
.st-sm-l2{animation-delay:-.35s}
@keyframes stSmLink{0%,10%{stroke-dashoffset:200;opacity:.2}30%,80%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:200;opacity:.2}}

.fig:hover .st-sm-b,.fig:hover .st-sm-link{animation-play-state:paused}

@media(max-width:820px){
  .st-ui-r{grid-template-columns:1fr auto;gap:8px}
  .st-ui-rel{grid-column:1/-1;width:100%}
  .st-ui-h .st-ui-rd:last-child{display:none}
}
@media (prefers-reduced-motion: reduce){
  .st-ig,.st-ig-flow,.st-ui-step,.st-ui-ans,.st-ui-res,
  .st-ui-f1,.st-ui-f2,.st-ui-f3,.st-sm-b,.st-sm-link{animation:none}
  .st-ig{stroke:#E2543B}
  .st-ig-flow{stroke-dasharray:none}
  .st-ui-step{color:#BE4029;border-color:#E9B7AB}
  .st-ui-ans,.st-ui-res{opacity:1}
  .st-sm-link{stroke-dashoffset:0;opacity:1}
}
/* ── /AI.Doc.STOR 図版のアニメーション ── */
@media(max-width:560px){.clist{grid-template-columns:1fr}}
/* 狭い画面では .pw の「PROGRAM 01」等のラベルを上に回して本文の幅を確保する */
@media(max-width:520px){
  .pw .r{grid-template-columns:1fr;gap:8px;padding:20px 18px}
  .pw .n{padding-top:0;white-space:normal}
}
@media(max-width:400px){
  .tbar .c{min-width:0}
  .tbar .c span{overflow-wrap:anywhere}
  .tbar .go{flex:0 0 auto}
}