/* ============================================================
   技術コラム 記事本文スタイル — Shigehara Design System v1.0
   使い方: 記事本文のラッパーに class="tc-body" を付けるだけ。
   Gutenbergの素の h2/h3/p/table/ul/ol/figure が自動でこの見た目になる。
   専用クラス: .tc-note（補足）/ .tc-faq（FAQ）/ .tc-cta（問い合わせ誘導）
   ============================================================ */
:root{
  --shg-navy:#003894;
  --shg-gray:#5D5B5A;
  --shg-cream:#FAF094;
  --shg-paper:#F7F5F0;
  --shg-ink:#1A1A1A;
  --shg-line:#DDD6C5;
}

/* ── 記事ヘッダー（任意） ── */
.tc-head{padding-bottom:28px;border-bottom:1px solid var(--shg-line);margin-bottom:40px;}
.tc-head .meta{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.tc-cat{display:inline-flex;background:var(--shg-navy);color:var(--shg-cream);font-size:13px;font-weight:700;letter-spacing:.08em;padding:6px 12px;border-radius:4px;line-height:1;}
.tc-date{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--shg-gray);letter-spacing:.04em;}
.tc-head h1{font-size:32px;font-weight:900;line-height:1.5;margin:0;color:var(--shg-ink);letter-spacing:-.005em;}

/* ── 本文 ── */
.tc-body{font-size:16px;line-height:2.05;color:var(--shg-ink);font-family:"Noto Sans JP",system-ui,sans-serif;}
.tc-body > * + *{margin-top:28px;}
.tc-body > p:first-child{font-size:17px;line-height:2.1;}

/* h2 — 細罫線＋左端だけNavyの短い罫 */
.tc-body h2{
  font-size:27px;font-weight:900;line-height:1.55;color:var(--shg-ink);
  margin:64px 0 0;padding-bottom:16px;position:relative;
  border-bottom:1px solid var(--shg-line);letter-spacing:-.005em;
}
.tc-body h2::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--shg-navy);}
.tc-body h2 + *{margin-top:24px;}

/* h3 — Navyの角チップ */
.tc-body h3{font-size:20px;font-weight:700;line-height:1.6;color:var(--shg-ink);margin:48px 0 0;display:flex;align-items:baseline;gap:12px;}
.tc-body h3::before{content:"";width:10px;height:10px;background:var(--shg-navy);flex-shrink:0;transform:translateY(-1px);}
.tc-body h3 + *{margin-top:16px;}

/* 箇条書き */
.tc-body ul{margin:24px 0 0;padding:0;list-style:none;}
.tc-body ul li{position:relative;padding-left:24px;line-height:1.95;}
.tc-body ul li + li{margin-top:10px;}
.tc-body ul li::before{content:"";position:absolute;left:2px;top:13px;width:8px;height:8px;background:var(--shg-navy);}
.tc-body ol{margin:24px 0 0;padding-left:6px;list-style:none;counter-reset:tc;}
.tc-body ol li{position:relative;padding-left:36px;line-height:1.95;counter-increment:tc;}
.tc-body ol li + li{margin-top:10px;}
.tc-body ol li::before{content:counter(tc,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;color:var(--shg-navy);}

/* 比較表 — ヘッダー行のみNavy */
.tc-body table{width:100%;border-collapse:collapse;margin:32px 0 0;font-size:14.5px;line-height:1.8;}
.tc-body thead th{background:var(--shg-navy);color:#fff;font-weight:700;text-align:left;padding:12px 18px;border:1px solid var(--shg-navy);}
.tc-body tbody th{background:var(--shg-paper);font-weight:700;text-align:left;color:var(--shg-ink);padding:14px 18px;border:1px solid var(--shg-line);width:160px;vertical-align:top;white-space:nowrap;}
.tc-body tbody td{padding:14px 18px;border:1px solid var(--shg-line);vertical-align:top;}
.tc-body table .num{font-family:"JetBrains Mono",monospace;}

/* 図版 */
.tc-body figure{margin:40px 0 0;}
.tc-body figure img{width:100%;display:block;border:1px solid var(--shg-line);}
.tc-body figcaption{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--shg-gray);margin-top:10px;letter-spacing:.03em;}

/* 補足ボックス */
.tc-note{background:var(--shg-paper);border-left:3px solid var(--shg-navy);padding:24px 28px;margin:40px 0 0;}
.tc-note .t{font-size:13px;font-weight:700;color:var(--shg-navy);letter-spacing:.08em;margin:0 0 8px;}
.tc-note p{margin:0;font-size:15px;line-height:2;}

/* FAQ */
.tc-faq{margin:32px 0 0;border-top:1px solid var(--shg-line);}
.tc-faq .qa{border-bottom:1px solid var(--shg-line);padding:24px 4px;}
.tc-faq .q,.tc-faq .a{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;}
.tc-faq .q{font-weight:700;font-size:16px;line-height:1.8;}
.tc-faq .a{margin-top:12px;font-size:15px;line-height:2;color:var(--shg-ink);}
.tc-faq .q::before{content:"Q.";font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--shg-navy);font-size:17px;}
.tc-faq .a::before{content:"A.";font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--shg-gray);font-size:17px;}

/* お問い合わせ誘導（記事末尾） — Creamを使えるのはNavy面のここだけ */
.tc-cta{background:var(--shg-navy);border-radius:6px;padding:44px 48px;margin:72px 0 0;color:#fff;position:relative;overflow:hidden;}
.tc-cta .kick{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--shg-cream);display:flex;align-items:center;gap:10px;}
.tc-cta .kick::before{content:"";width:24px;height:2px;background:var(--shg-cream);}
.tc-cta h2{font-size:24px;font-weight:900;line-height:1.6;margin:16px 0 10px;color:#fff;border:none;padding:0;}
.tc-cta p{margin:0 0 28px;font-size:14.5px;line-height:2;color:rgba(255,255,255,.78);max-width:560px;}
.tc-cta .btns{display:flex;gap:14px;flex-wrap:wrap;}
.tc-cta a{text-decoration:none;font-weight:700;font-size:15px;border-radius:4px;padding:14px 28px;line-height:1;display:inline-flex;}
.tc-cta a.primary{background:#fff;color:var(--shg-navy);}
.tc-cta a.ghost{border:1px solid rgba(255,255,255,.5);color:#fff;}
.tc-cta .arrow{position:absolute;right:48px;bottom:44px;}

/* 記事フッター（任意） */
.tc-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--shg-line);display:flex;justify-content:space-between;align-items:center;}
.tc-foot a{font-size:14px;font-weight:700;color:var(--shg-navy);text-decoration:none;}