/* =============================================================
   GENBA EDITORIAL v1 — ハブF「DKL — データセンター建設研究室」
   意匠正本: 既存ハブ（SGL/SJL/KJL/HRP）のstyle.cssを継承。1ハブ1色・多色禁止。
   紙 #F6F4EF / インク #1A1C20 / サブ #565B63 / 罫 #DBD5C9
   アクセント（ハブF・深縹〔ふかはなだ〕）#1F5C5C
   見出し: Shippori Mincho / 本文: Noto Sans JP系
   角丸は最大4px・影なし・グラデーションなし（hairline罫で区切る）
   ============================================================= */

/* ---------- 1. トークン ---------- */
:root{
  --paper:#F6F4EF;
  --card:#FCFBF7;
  --txt:#1A1C20;
  --ink:#1A1C20;
  --dim:#565B63;
  --sub:#565B63;
  --line:#DBD5C9;
  --acc:#1F5C5C;
  --acc-soft:rgba(31,92,92,.06);
  --serif:'Shippori Mincho',"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* ---------- 2. ベース ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--txt);
  font-family:var(--sans);
  font-size:16px;line-height:1.95;
  border-top:3px solid var(--acc);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 72px}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
strong{color:var(--txt)}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- 3. サイト頭 ---------- */
header.site{padding:22px 0 14px;border-bottom:1px solid var(--txt);margin-bottom:12px}
header.site a{text-decoration:none}
.sitecode{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.05em;line-height:1.4}
.sitecode a{color:var(--txt)}
.sitenav{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:8px}
.sitenav a{color:var(--dim);font-size:12px;letter-spacing:.1em;padding:4px 0}
.sitenav a:hover{color:var(--acc)}
header.site .tag{display:block;color:var(--dim);font-size:12px;line-height:1.7;margin-top:6px}

/* ---------- 4. 見出し・記事体裁 ---------- */
h1{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.55;
  letter-spacing:.02em;margin:14px 0 12px;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.6;
  letter-spacing:.02em;margin:48px 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--line);text-wrap:balance}
h3{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.7;margin:32px 0 10px}
p{margin:16px 0}
ul,ol{margin:16px 0 16px 26px}
li{margin:8px 0}

.kicker{font-size:11px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--acc);margin:26px 0 0;font-weight:500}

.doc-data{font-size:12px;letter-spacing:.06em;color:var(--dim);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 0;margin:14px 0 22px}

@media (max-width:480px){
  h1{font-size:23px}
  h2{font-size:18.5px}
  .wrap{padding:0 16px 56px}
}

/* ---------- 5. 索引 ---------- */
.index-list{list-style:none;margin:0 0 8px;border-top:1px solid var(--line)}
.index-list li{margin:0;padding:14px 0 15px;border-bottom:1px solid var(--line)}
.index-list a{text-decoration:none;display:block}
.index-list a:hover .idx-title{color:var(--acc);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.idx-code{display:inline-block;font-size:11.5px;letter-spacing:.14em;color:var(--acc);
  min-width:6.2em;font-weight:500}
.idx-title{font-family:var(--serif);font-weight:600;font-size:16.5px;
  line-height:1.7;color:var(--txt)}
.idx-meta{display:block;color:var(--dim);font-size:13px;line-height:1.8;
  margin-top:4px;padding-left:0}

.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;border-bottom:none;padding-bottom:0}
.sec-head .sec-no{font-family:var(--serif);font-size:15px;color:var(--acc);letter-spacing:.08em}
.sec-head a{color:var(--txt);text-decoration:none}
.sec-head a:hover{color:var(--acc)}
.sec-head .sec-tag{color:var(--dim);font-size:12.5px;font-weight:400;font-family:var(--sans);letter-spacing:.02em}

.rel-list{list-style:none;margin:0;border-top:1px solid var(--line)}
.rel-list li{margin:0;padding:11px 0 12px;border-bottom:1px solid var(--line)}
.rel-list a{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--txt);text-decoration:none}
.rel-list a:hover{color:var(--acc);text-decoration:underline}
.rel-list .idx-meta{margin-top:2px}

.card{border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin:14px 0;background:transparent}
.card a{color:var(--txt);text-decoration:none;font-weight:600;font-family:var(--serif)}
.card a:hover{color:var(--acc);text-decoration:underline}
.card .meta{margin:6px 0 0}

/* ---------- 6. 汎用テキスト ---------- */
.meta{color:var(--dim);font-size:13px;line-height:1.8}
.small{font-size:12.5px;color:var(--dim)}
.divider{border:none;border-top:1px solid var(--line);margin:44px 0 36px}
.crumb{color:var(--dim);font-size:12px;letter-spacing:.04em;margin:2px 0 4px}
.crumb a{color:var(--dim);text-decoration:none;display:inline-block;padding:5px 0}
.crumb a:hover{color:var(--acc)}
.pr-note{margin:0 0 20px;letter-spacing:.02em}

/* ---------- 7. 出典 ---------- */
.footnotes{border-top:1px solid var(--line);margin-top:52px;padding-top:4px}
.fn-label{font-family:var(--sans);font-size:11px;letter-spacing:.22em;color:var(--dim);
  font-weight:500;border-bottom:none;margin:14px 0 4px;padding-bottom:0}
.footnotes p,.footnotes li{color:var(--dim);font-size:13px;line-height:1.9}
.footnotes p{margin:8px 0}
.fn-list{margin:8px 0 8px 24px}
.fn-list li{margin:5px 0}
.footnotes a{color:var(--dim)}
.fn-note{font-size:12.5px}
.src{color:var(--dim);font-size:13px;line-height:1.9;border-top:1px solid var(--line);
  padding-top:12px;margin-top:44px}
.src a{color:var(--dim)}

/* ---------- 8. 目次・要点・注意書き ---------- */
.toc{border:1px solid var(--line);border-radius:2px;padding:14px 18px;margin:24px 0;background:transparent}
.toc-title{font-size:11px;font-weight:500;color:var(--dim);letter-spacing:.2em;margin:0}
.toc ol{margin:10px 0 0 22px;font-size:14px}
.toc li{margin:5px 0}
.toc a{color:var(--txt);text-decoration:none;display:inline-block;padding:2px 0}
.toc a:hover{color:var(--acc);text-decoration:underline}

.keypoint{background:var(--acc-soft);border-left:2px solid var(--acc);
  border-radius:0;padding:14px 18px;margin:24px 0}
.keypoint-title{font-size:11px;font-weight:500;color:var(--acc);letter-spacing:.2em;margin:0}
.keypoint ul,.keypoint ol{margin:10px 0 0 22px;font-size:14.5px}
.keypoint li{margin:6px 0}

.note{border:1px solid var(--line);border-radius:2px;background:transparent;
  padding:13px 17px;font-size:13.5px;line-height:1.9;color:var(--dim);margin:28px 0}

/* ---------- 9. 表・図解 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;
  background:var(--card);border:1px solid var(--line);border-radius:0}
th,td{padding:9px 13px;border:1px solid var(--line);text-align:left;vertical-align:top;min-width:6em}
th{background:var(--acc-soft);font-weight:600;white-space:nowrap;font-family:var(--serif)}

.fig{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:20px;margin:28px 0}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{color:var(--dim);font-size:12.5px;line-height:1.7;margin-top:12px}

/* ---------- 10. 参考書リンク枠 ---------- */
.ad-slot{margin:28px 0;border-left:3px solid var(--line);padding:4px 0 4px 14px;text-align:left}
.ad-slot:empty{display:none;border:none;padding:0;margin:0}
.rec-lead{margin:0 0 6px;font-size:15px}
.rec-note{margin:6px 0 0;font-size:12px;color:var(--dim,#666)}

/* ---------- 11. 導線 ---------- */
.cta{display:block;text-align:center;padding:13px 18px;margin:32px 0 4px;
  background:transparent;color:var(--acc);border:1px solid var(--acc);
  border-radius:2px;font-weight:600;font-size:14.5px;letter-spacing:.03em;
  text-decoration:none;font-family:var(--serif)}
.cta:hover{background:var(--acc-soft)}
.cta-note{display:block;text-align:center;color:var(--dim);font-size:12px;margin:6px 0 24px}

/* ---------- 12. フォーム ---------- */
input[type="text"],input[type="email"],input[type="number"],select,textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--txt);font-size:16px;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);outline:none}
button.cta{width:100%;cursor:pointer}

/* ---------- 12b. 簡易計算機（人材コスト試算） ---------- */
.calc-box{border:1px solid var(--line);border-radius:2px;background:var(--card);padding:16px 18px;margin:24px 0}
.calc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0;font-size:14px}
.calc-row label{flex:1 1 220px}
.calc-row input{flex:0 1 110px;text-align:right}
.calc-result{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:15px}
.calc-result .val{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--acc)}

/* ---------- 13. フッター ---------- */
footer{color:var(--dim);font-size:12.5px;border-top:1px solid var(--txt);
  padding-top:16px;margin-top:56px;line-height:1.9}
.foot-id{margin:0 0 4px;letter-spacing:.03em}
footer a{color:var(--dim)}
.foot-nav{display:flex;flex-wrap:wrap;gap:2px 20px;margin:8px 0 0}
.foot-nav a{color:var(--dim);font-size:12.5px;text-decoration:none;
  display:inline-block;padding:6px 0}
.foot-nav a:hover{color:var(--acc);text-decoration:underline}

/* ---------- 14. 印刷 ---------- */
@media print{
  :root{--paper:#fff;--card:#fff;--txt:#000;--dim:#444;--line:#999}
  body{border-top:none}
  .cta,.cta-note,.ad-slot{display:none}
}