/* XII-KnotPlus1 プロモーションサイト
 *
 * 後日、既存の自社サイトへ統合する前提（原典 フェーズ5-A）。
 * そのため:
 *   - すべての規則を #xiiknot の下に閉じ込め、外側へ影響させない
 *   - 変数名も --xk- を付けて衝突を避ける
 *   - 外部の読み込みを一切しない（フォント・スクリプト・画像とも）
 *   - JavaScript を使わない
 */
#xiiknot {
  --xk-bg:#f6f7f9; --xk-panel:#fff; --xk-line:#dde2e8; --xk-ink:#161a1f;
  --xk-muted:#59636e; --xk-brand:#0f2f4a; --xk-accent:#1a6ca6; --xk-on:#fff;
  --xk-ok:#1c7a52; --xk-warn:#96590c; --xk-r:12px;
  background:var(--xk-bg); color:var(--xk-ink);
  font:16px/1.85 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme: dark) {
  #xiiknot { --xk-bg:#11151a; --xk-panel:#191e25; --xk-line:#2b333c; --xk-ink:#e6eaf0;
    --xk-muted:#98a2ad; --xk-brand:#8fbfe4; --xk-accent:#69a8d6; --xk-on:#0b0f14;
    --xk-ok:#54c58c; --xk-warn:#dda254; }
}
#xiiknot *{box-sizing:border-box}
#xiiknot .wrap{max-width:1020px;margin:0 auto;padding:0 18px}

#xiiknot .hero{background:var(--xk-brand);color:#fff;padding:52px 0 44px}
@media (prefers-color-scheme: dark){#xiiknot .hero{background:#0a1219}}
#xiiknot .hero .eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.18em;opacity:.75}
#xiiknot .hero h1{margin:0 0 18px;font-size:38px;line-height:1.25;letter-spacing:.01em}
#xiiknot .hero .yomi{display:block;font-size:14px;font-weight:400;opacity:.75;
  letter-spacing:.1em;margin-top:6px}
#xiiknot .tagline{margin:0 0 26px;font-size:17px;line-height:1.9;opacity:.96}
#xiiknot .hero-nums{display:flex;gap:26px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.22);padding-top:20px}
#xiiknot .hero-nums div{display:flex;align-items:baseline;gap:7px}
#xiiknot .hero-nums b{font-size:30px;line-height:1}
#xiiknot .hero-nums span{font-size:13px;opacity:.8}

#xiiknot main{padding:26px 0 56px}
#xiiknot .card{background:var(--xk-panel);border:1px solid var(--xk-line);
  border-radius:var(--xk-r);padding:24px;margin-bottom:20px}
#xiiknot .card h2{margin:0 0 10px;font-size:21px;letter-spacing:.01em}
#xiiknot .lead{margin:0 0 18px;color:var(--xk-muted);font-size:15px}
#xiiknot .basis{margin:18px 0 0;font-size:14px;color:var(--xk-muted);
  background:var(--xk-bg);border-radius:8px;padding:13px 15px}
#xiiknot .warn{margin:18px 0 0;font-size:14px;padding:14px 16px;border-radius:8px;
  border:1px solid var(--xk-warn);
  background:color-mix(in srgb,var(--xk-warn) 12%,transparent)}
#xiiknot .small{font-size:12.5px}

/* 面倒なこと */
#xiiknot .pains{display:grid;gap:16px}
#xiiknot .pains>div{border-inline-start:3px solid var(--xk-line);padding-inline-start:14px}
#xiiknot .pains .p-t{margin:0 0 4px;font-weight:700;font-size:15.5px}
#xiiknot .pains p:last-child{margin:0;font-size:14.5px;color:var(--xk-muted)}

/* 2層 */
#xiiknot .layers{border:2px solid var(--xk-accent)}
#xiiknot .layer-grid{display:grid;gap:14px;align-items:stretch}
#xiiknot .layer{background:var(--xk-bg);border-radius:10px;padding:18px}
#xiiknot .layer .l-no{margin:0;font-size:11.5px;letter-spacing:.16em;color:var(--xk-muted)}
#xiiknot .layer .l-t{margin:4px 0 10px;font-size:19px;line-height:1.5}
#xiiknot .layer .l-d{margin:0 0 12px;font-size:14.5px;color:var(--xk-muted)}
#xiiknot .layer .l-m{margin:0;font-size:13px;font-weight:700;color:var(--xk-accent);
  border-top:1px solid var(--xk-line);padding-top:10px}
#xiiknot .arrow{display:grid;place-items:center;font-size:26px;color:var(--xk-accent);
  transform:rotate(90deg)}

/* 時系列 */
#xiiknot .tl{list-style:none;margin:0;padding:0}
#xiiknot .tl li{display:grid;grid-template-columns:58px 1fr;gap:4px 12px;
  padding:11px 0;border-top:1px solid var(--xk-line);font-size:15px}
#xiiknot .tl li:first-child{border-top:none}
#xiiknot .tl .t{color:var(--xk-muted);font-size:13px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
#xiiknot .tl .a{grid-column:2;font-size:11.5px;color:var(--xk-muted);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
#xiiknot .tl li.hold{background:color-mix(in srgb,var(--xk-warn) 11%,transparent);
  border-radius:8px;padding-inline:10px}
#xiiknot .tl li.ok{background:color-mix(in srgb,var(--xk-ok) 11%,transparent);
  border-radius:8px;padding-inline:10px}

/* 受け取り方 */
#xiiknot .routes{display:grid;gap:14px}
#xiiknot .routes>div{background:var(--xk-bg);border-radius:8px;padding:14px}
#xiiknot .routes .r-t{margin:0 0 5px;font-weight:700;color:var(--xk-accent)}
#xiiknot .routes p:last-child{margin:0;font-size:14px;color:var(--xk-muted)}

/* 業種 */
#xiiknot .inds{display:grid;gap:12px}
#xiiknot .ind{border:1px solid var(--xk-line);border-radius:9px;padding:13px}
#xiiknot .ind-n{margin:0;font-weight:700;font-size:16px}
#xiiknot .ind-c{margin:1px 0 7px;font-size:12px;color:var(--xk-accent);font-weight:700}
#xiiknot .ind-e{margin:0;font-size:13.5px;color:var(--xk-muted)}
#xiiknot .ind-s{margin:7px 0 0;font-size:12px;color:var(--xk-muted);
  border-top:1px solid var(--xk-line);padding-top:6px}

/* 2列 */
#xiiknot .two{display:grid;gap:14px}
#xiiknot .two>div{background:var(--xk-bg);border-radius:8px;padding:15px}
#xiiknot .two .k{margin:0 0 7px;font-weight:700;font-size:14px}
#xiiknot .two ul{margin:0;padding-inline-start:19px;font-size:14.5px}
#xiiknot .two li{margin-bottom:5px}
#xiiknot .quote{margin:0;font-size:15px;padding-inline-start:12px;
  border-inline-start:3px solid var(--xk-accent)}

/* 実測表 */
#xiiknot .measured table{width:100%;border-collapse:collapse;font-size:14.5px}
#xiiknot .measured th{text-align:start;font-weight:600;color:var(--xk-muted);
  padding:11px 12px 11px 0;border-bottom:1px solid var(--xk-line);
  white-space:nowrap;vertical-align:top;width:34%}
#xiiknot .measured td{padding:11px 0;border-bottom:1px solid var(--xk-line)}

/* ネットワークの説明 */
#xiiknot .net-cmp{display:grid;gap:14px}
#xiiknot .net-cmp>div{border-radius:9px;padding:15px}
#xiiknot .net-cmp .bad{background:color-mix(in srgb,var(--xk-warn) 10%,transparent);
  border:1px solid var(--xk-warn)}
#xiiknot .net-cmp .good{background:color-mix(in srgb,var(--xk-ok) 10%,transparent);
  border:1px solid var(--xk-ok)}
#xiiknot .net-cmp .c-t{margin:0 0 6px;font-size:12px;letter-spacing:.1em;
  color:var(--xk-muted)}
#xiiknot .net-cmp .c-f{margin:0 0 10px;font-size:14px;font-weight:700;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
#xiiknot .net-cmp ul{margin:0;padding-inline-start:19px;font-size:14px}
#xiiknot .net-cmp li{margin-bottom:5px}
#xiiknot .net-h{margin:20px 0 8px;font-weight:700;font-size:15px}
#xiiknot .net-t{width:100%;border-collapse:collapse;font-size:14.5px}
#xiiknot .net-t th{text-align:start;font-weight:600;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--xk-line);vertical-align:top;width:46%}
#xiiknot .net-t td{padding:11px 0;border-bottom:1px solid var(--xk-line)}
#xiiknot .net-t td.ok{color:var(--xk-ok);font-weight:700}

#xiiknot .cta{border:2px solid var(--xk-accent)}
#xiiknot .foot{border-top:1px solid var(--xk-line);padding:24px 0;
  color:var(--xk-muted);font-size:14px}
#xiiknot .foot p{margin:0 0 5px}

/* 折りたたみ機のカバー画面（約350px） */
@media (max-width:400px){
  #xiiknot .hero h1{font-size:29px}
  #xiiknot .tagline{font-size:15.5px}
  #xiiknot .hero-nums{gap:16px}
  #xiiknot .hero-nums b{font-size:25px}
  #xiiknot .card{padding:16px}
  #xiiknot .tl li{grid-template-columns:1fr}
  #xiiknot .tl .t{grid-column:1}
  #xiiknot .tl .a{grid-column:1}
  #xiiknot .measured th{width:auto;display:block;border:none;padding:9px 0 0}
  #xiiknot .measured td{display:block;padding:0 0 11px}
  #xiiknot .net-t th{width:auto;display:block;border:none;padding:9px 0 0}
  #xiiknot .net-t td{display:block;padding:0 0 11px}
}
@media (min-width:660px){
  #xiiknot .pains,#xiiknot .routes,#xiiknot .two,
  #xiiknot .net-cmp{grid-template-columns:1fr 1fr}
  #xiiknot .inds{grid-template-columns:repeat(2,1fr)}
  #xiiknot .layer-grid{grid-template-columns:1fr 52px 1fr}
  #xiiknot .arrow{transform:none}
}
@media (min-width:920px){
  #xiiknot .inds{grid-template-columns:repeat(3,1fr)}
  #xiiknot .routes{grid-template-columns:repeat(4,1fr)}
}