/* 本番ページの見た目の正本。承認済みの見本 site/mockup.html の <style> を
   そのまま移したもの (見本専用の .mock-note だけ除く)。
   dist/css/site.css は build_site.py が毎回写す自動生成物なので直接編集しない。 */
  :root {
    color-scheme: light;
    --paper: #fbfaf7;
    --paper-deep: #f3f1ea;
    --ink: #201f1d;
    --ink-soft: #3d3c38;
    --sub: #7a776d;
    --rule: #e5e2d8;
    --rule-dark: #c9c5b6;
    --shu: #a63a28;
    --shu-deep: #872c1d;
    --shu-wash: #f7ece8;
  }
  /* 実サイトは紙白基調で固定する */
  :root[data-theme="dark"], :root[data-theme="light"] {
    --paper: #fbfaf7; --paper-deep: #f3f1ea; --ink: #201f1d; --ink-soft: #3d3c38; --sub: #7a776d;
    --rule: #e5e2d8; --rule-dark: #c9c5b6; --shu: #a63a28; --shu-deep: #872c1d; --shu-wash: #f7ece8;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; background: var(--paper); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS PMincho", serif;
    font-size: 15px; line-height: 2.05; font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
  }
  .sans { font-family: "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; }
  a { color: inherit; }
  img { max-width: 100%; }
  ::selection { background: var(--shu-wash); }

  /* ===== header (2段組: 上=名乗り+CTA / 下=メニュー) ===== */
  header.site { border-bottom: 1px solid var(--rule); background: var(--paper); }
  .head-top {
    max-width: 1080px; margin: 0 auto; padding: 18px 30px 14px;
    display: flex; align-items: center; gap: 24px;
  }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
  .brand .seal { width: 12px; height: 12px; background: var(--shu); flex: none; }
  .brand .name { font-size: 17.5px; letter-spacing: .12em; font-weight: 600; }
  .brand .role { font-size: 10.5px; letter-spacing: .2em; color: var(--sub); margin-left: 14px; }
  .head-cta {
    margin-left: auto; text-decoration: none; border: 1px solid var(--shu); color: var(--shu);
    font-size: 12.5px; letter-spacing: .22em; padding: 10px 20px 10px 24px; white-space: nowrap;
  }
  .head-cta:hover { background: var(--shu); color: #fff; }
  .head-nav { border-top: 1px solid var(--rule); }
  nav.global {
    max-width: 1080px; margin: 0 auto; padding: 0 30px;
    display: flex; gap: 30px; font-size: 13px; letter-spacing: .08em; overflow-x: auto;
  }
  nav.global a {
    text-decoration: none; padding: 11px 0 10px; white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  nav.global a:hover { border-bottom-color: var(--shu); color: var(--shu-deep); }
  @media (max-width: 760px) {
    .head-top { padding: 14px 22px 12px; }
    .brand .role { display: none; }
    nav.global { padding: 0 22px; gap: 22px; font-size: 12.5px; }
  }

  /* ===== hero ===== */
  .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
  .hero .enso {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(166,58,40,.10); width: 640px; height: 640px;
    right: -80px; top: -180px;
  }
  .hero .enso.two { border-color: rgba(32,31,29,.05); right: -110px; top: -150px; }
  .hero-in {
    max-width: 1080px; margin: 0 auto; padding: 58px 30px 54px; position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 54px; align-items: start;
  }
  .hero-right { display: flex; gap: 30px; align-items: flex-start; }
  .vsub {
    writing-mode: vertical-rl; text-orientation: mixed; margin: 8px 0 0;
    font-size: 11.5px; letter-spacing: .34em; color: var(--sub);
    border-left: 1px solid var(--rule-dark); padding-left: 16px;
    height: fit-content;
  }
  .hero h1 {
    margin: 0; font-weight: 600;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: clamp(29px, 3.7vw, 42px); line-height: 1.94; letter-spacing: .16em;
    height: clamp(330px, 41vw, 420px);
  }
  .hero h1 em { font-style: normal; color: var(--shu); text-emphasis: filled sesame var(--shu); }
  .hero h1 .q { text-orientation: upright; }
  .hero-left { padding-top: 4px; }
  .hero-lead { max-width: 470px; margin: 0 0 30px; font-size: 15px; line-height: 2.3; color: var(--ink-soft); }
  .cta-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .btn {
    display: inline-flex; align-items: center; gap: 16px; text-decoration: none;
    font-size: 13.5px; letter-spacing: .18em; padding: 15px 34px; border: 1px solid var(--ink);
  }
  .btn .arw { font-family: sans-serif; font-size: 12px; }
  .btn-shu { background: var(--shu); border-color: var(--shu); color: #fff; }
  .btn-shu:hover { background: var(--shu-deep); border-color: var(--shu-deep); }
  .btn-line { color: var(--ink); }
  .btn-line:hover { border-color: var(--shu); color: var(--shu-deep); }
  .hero-note { margin: 14px 0 0; font-size: 12px; color: var(--sub); letter-spacing: .06em; }
  .hero-person { display: flex; align-items: center; gap: 15px; margin-top: 30px; }
  .hero-person img { width: 68px; height: 68px; object-fit: cover; object-position: top; border: 1px solid var(--rule-dark); }
  .hero-person .who { font-size: 12px; color: var(--sub); letter-spacing: .1em; line-height: 1.8; margin: 0; }
  .hero-person .who b { display: block; font-size: 15px; color: var(--ink); letter-spacing: .24em; }
  @media (max-width: 860px) {
    .hero-in { grid-template-columns: 1fr; gap: 34px; padding: 42px 22px 44px; }
    .hero-right { order: -1; }
    .vsub { display: none; }
    .hero h1 {
      writing-mode: horizontal-tb; height: auto;
      font-size: clamp(26px, 6.6vw, 34px); line-height: 1.85; letter-spacing: .1em;
    }
  }

  /* ===== trust rule row ===== */
  .trust { border-bottom: 1px solid var(--rule); background: var(--paper); }
  .trust-in {
    max-width: 1080px; margin: 0 auto; padding: 0 30px;
    display: grid; grid-template-columns: repeat(3, 1fr);
  }
  .trust-in div {
    padding: 15px 18px; font-size: 12.5px; letter-spacing: .1em; text-align: center;
    color: var(--ink-soft); white-space: nowrap;
  }
  .trust-in div + div { border-left: 1px solid var(--rule); }
  .trust-in b { color: var(--ink); }
  @media (max-width: 860px) {
    .trust-in { grid-template-columns: 1fr; }
    .trust-in div + div { border-left: none; border-top: 1px solid var(--rule); }
    .trust-in div { padding: 11px 10px; }
  }

  /* ===== section shell (rail + content) ===== */
  section.sec { border-bottom: 1px solid var(--rule); }
  section.sec.wash { background: var(--paper-deep); }
  .sec-in {
    max-width: 1080px; margin: 0 auto; padding: 58px 30px 64px;
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 44px;
  }
  .rail { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .rail .no { font-size: 11px; letter-spacing: .26em; color: var(--shu); }
  .rail .vlabel {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 13px; letter-spacing: .36em; color: var(--ink-soft);
  }
  /* 下層ページでは本文の先頭見出しが h1 になる (build_site.py の
     promote_main_heading)。見た目は h2 のときと同じにする */
  .content h1, .content h2 {
    margin: 0 0 20px; font-size: clamp(22px, 2.7vw, 28px); font-weight: 600;
    line-height: 1.8; letter-spacing: .1em; text-wrap: balance;
  }
  .content .desc { margin: 0 0 30px; max-width: 640px; color: var(--ink-soft); }
  @media (max-width: 860px) {
    .sec-in { grid-template-columns: 1fr; gap: 22px; padding: 44px 22px 48px; }
    .rail { flex-direction: row; align-items: center; gap: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
    .rail .vlabel { writing-mode: horizontal-tb; letter-spacing: .3em; }
  }

  /* ===== voices ===== */
  .voice-list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; max-width: 860px; }
  .voice {
    list-style: none; position: relative; padding: 15px 4px 15px 46px;
    font-size: 16px; line-height: 2; letter-spacing: .05em;
    border-bottom: 1px dashed var(--rule-dark);
  }
  .voice::before {
    content: "「"; position: absolute; left: 0; top: 4px;
    font-size: 34px; color: var(--shu); opacity: .5; line-height: 1;
  }
  .voice small { display: block; font-size: 11.5px; color: var(--sub); letter-spacing: .12em; margin-top: 2px; }
  .voice-close { max-width: 760px; margin: 30px 0 0; color: var(--ink-soft); }
  .voice-close b { color: var(--ink); }
  @media (max-width: 800px) { .voice-list { grid-template-columns: 1fr; } }

  /* ===== promises (漢数字の約束) ===== */
  .promise { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; }
  .promise li {
    list-style: none; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px;
    padding: 26px 0 24px; border-top: 1px solid var(--rule);
  }
  .pnum { font-size: 27px; line-height: 1.4; letter-spacing: .1em; position: relative; padding-left: 4px; }
  .pnum::after { content: ""; position: absolute; left: 6px; top: 48px; width: 24px; height: 2px; background: var(--shu); }
  .promise h3 { margin: 2px 0 10px; font-size: 17.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.8; }
  .promise p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.95; }
  @media (max-width: 860px) {
    .promise { grid-template-columns: 1fr; }
    .promise li { padding: 22px 0 20px; }
  }

  /* ===== 税理士の先生へ ===== */
  .zeirishi { max-width: 760px; }
  .zeirishi .big {
    font-size: clamp(18px, 2.2vw, 22px); line-height: 2.1; letter-spacing: .1em; font-weight: 600;
    margin: 0 0 22px; padding: 20px 28px; border-left: 3px solid var(--shu); background: var(--paper);
  }
  section.sec.wash .zeirishi .big { background: #fff; }
  .zeirishi p { color: var(--ink-soft); margin: 0 0 14px; max-width: 700px; }

  /* ===== sim (計算書様式) ===== */
  .sim-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 46px; align-items: start; }
  .invoice { background: #fff; border: 1px solid var(--rule-dark); position: relative; padding: 6px; }
  .invoice-in { border: 1px solid var(--rule); padding: 24px 26px 20px; }
  .stamp {
    position: absolute; top: 18px; right: 18px; transform: rotate(-7deg);
    border: 2px solid var(--shu); color: var(--shu); opacity: .75;
    font-size: 11px; letter-spacing: .3em; padding: 4px 6px 4px 9px; line-height: 1.4;
  }
  .invoice h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: .18em; font-weight: 600; }
  .invoice .sub-t { font-size: 11px; color: var(--sub); letter-spacing: .14em; margin: 0 0 16px; }
  .irow {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 11px 2px; border-bottom: 1px dashed var(--rule-dark); font-size: 14px;
  }
  .irow .lab { color: var(--sub); font-size: 12px; letter-spacing: .12em; }
  .irow .val { letter-spacing: .06em; }
  .ires { padding: 18px 2px 4px; }
  .ires .lab { font-size: 11.5px; letter-spacing: .14em; color: var(--shu-deep); }
  .ires .num {
    font-size: 34px; letter-spacing: .04em; line-height: 1.6; font-variant-numeric: tabular-nums;
    border-bottom: 3px solid var(--shu); display: inline-block; padding: 2px 6px 0 2px;
  }
  .ires .num small { font-size: 15px; margin-left: 2px; }
  .ires .note { font-size: 11px; color: var(--sub); line-height: 1.9; margin: 10px 0 0; }
  .sim-copy h3 { margin: 2px 0 16px; font-size: 19.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.9; }
  .sim-copy p { color: var(--ink-soft); margin: 0 0 16px; max-width: 560px; font-size: 14px; }
  .sim-copy ul { margin: 0 0 26px; padding: 0; max-width: 560px; }
  .sim-copy li {
    list-style: none; font-size: 13px; color: var(--ink-soft);
    padding: 8px 0 8px 24px; border-bottom: 1px solid var(--rule); position: relative;
  }
  .sim-copy li::before { content: "※"; position: absolute; left: 2px; color: var(--shu); }
  @media (max-width: 960px) { .sim-grid { grid-template-columns: 1fr; } }

  /* ===== flow (横組みの道すじ) ===== */
  .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); max-width: 900px; }
  .fstep { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 22px 18px; position: relative; }
  .fstep.shu { background: var(--shu-wash); }
  .fstep .t-no { font-size: 10.5px; letter-spacing: .22em; color: var(--sub); }
  .fstep.shu .t-no { color: var(--shu-deep); }
  .fstep h3 { margin: 4px 0 6px; font-size: 15.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.7; }
  .fstep h3 .tag {
    font-size: 10px; color: var(--shu); border: 1px solid var(--shu);
    padding: 1px 8px; margin-left: 10px; letter-spacing: .18em; vertical-align: 2px; white-space: nowrap;
  }
  .fstep p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
  .fl-note { margin: 22px 0 0; font-size: 12.5px; color: var(--sub); max-width: 860px; }
  @media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }

  /* ===== column ===== */
  .col-list { border-top: 1px solid var(--rule); max-width: 800px; }
  .col-item {
    display: grid; grid-template-columns: 100px 64px minmax(0, 1fr) 26px; gap: 18px; align-items: baseline;
    padding: 16px 4px; border-bottom: 1px solid var(--rule); text-decoration: none;
  }
  .col-item:hover .t { color: var(--shu-deep); }
  .col-item .date { font-size: 11.5px; color: var(--sub); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
  .col-item .cat { font-size: 11px; letter-spacing: .14em; color: var(--shu-deep); }
  .col-item .t { font-size: 14.5px; letter-spacing: .05em; line-height: 1.8; }
  .col-item .arw { color: var(--shu); font-family: sans-serif; font-size: 13px; text-align: right; }
  @media (max-width: 700px) {
    .col-item { grid-template-columns: 86px 56px minmax(0, 1fr); }
    .col-item .arw { display: none; }
  }

  /* ===== faq ===== */
  .faq { max-width: 860px; }
  .faq-item { border-bottom: 1px solid var(--rule); padding: 18px 4px; }
  .faq-item .q { display: flex; gap: 16px; font-size: 15.5px; letter-spacing: .06em; line-height: 1.9; margin: 0; }
  .faq-item .q::before { content: "問"; color: var(--shu); flex: none; font-size: 13.5px; margin-top: 3px; }
  .faq-item .a { display: flex; gap: 16px; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.95; }
  .faq-item .a::before { content: "答"; color: var(--sub); flex: none; font-size: 12.5px; margin-top: 3px; }

  /* ===== profile ===== */
  .prof { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .prof .ph { position: relative; }
  .prof img { display: block; width: 100%; aspect-ratio: 4 / 4.9; object-fit: cover; border: 1px solid var(--rule-dark); }
  .prof .ph::after {
    content: ""; position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--shu);
  }
  .prof h1, .prof h3 { margin: 0; font-size: 25px; letter-spacing: .28em; font-weight: 600; }
  .prof .yomi { font-size: 10.5px; color: var(--sub); letter-spacing: .32em; margin: 2px 0 10px; }
  .prof .lic { font-size: 12.5px; letter-spacing: .08em; color: var(--shu-deep); margin: 0 0 16px; }
  .prof p.bio { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; max-width: 640px; line-height: 2; }
  @media (max-width: 800px) { .prof { grid-template-columns: 1fr; } .prof .ph { max-width: 210px; } }

  /* ===== office ===== */
  table.office { width: 100%; border-collapse: collapse; max-width: 680px; border-top: 1px solid var(--rule); }
  table.office th, table.office td { text-align: left; padding: 12px 6px; border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 400; }
  table.office th { width: 30%; color: var(--sub); letter-spacing: .14em; font-size: 12.5px; }

  /* ===== contact ===== */
  .contact-lead { max-width: 680px; margin: 0 0 28px; color: var(--ink-soft); }
  .ways { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-dark); background: #fff; max-width: 860px; }
  .way { padding: 22px 24px; }
  .way + .way { border-left: 1px solid var(--rule); }
  .way .k { font-size: 10.5px; letter-spacing: .28em; color: var(--shu-deep); }
  .way b { display: block; font-size: 16.5px; letter-spacing: .06em; margin: 6px 0 2px; }
  .way span { font-size: 11.5px; color: var(--sub); line-height: 1.8; display: block; }
  .contact-fine { margin: 16px 0 0; font-size: 12px; color: var(--sub); }
  @media (max-width: 760px) {
    .ways { grid-template-columns: 1fr; }
    .way + .way { border-left: none; border-top: 1px solid var(--rule); }
  }

  /* ===== footer ===== */
  footer.site { background: var(--ink); color: #ccc9c0; }
  .foot-in {
    max-width: 1080px; margin: 0 auto; padding: 44px 30px 40px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: stretch;
  }
  .foot-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
  .foot-brand .seal { width: 11px; height: 11px; background: var(--shu); }
  .foot-brand .name { font-size: 16.5px; letter-spacing: .16em; }
  footer.site .meta { margin: 14px 0 0; font-size: 12px; line-height: 2.2; letter-spacing: .08em; }
  footer.site .links { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 12px; }
  footer.site .links a { text-decoration: none; color: #a5a29a; }
  footer.site .links a:hover { color: #fff; }
  .foot-v {
    writing-mode: vertical-rl; font-size: 12px; letter-spacing: .5em; color: #7c7a73;
    border-left: 1px solid #3a3934; padding-left: 20px;
  }
  .copy { border-top: 1px solid #35342f; padding: 16px 30px; text-align: center; font-size: 11px; letter-spacing: .18em; color: #8b887f; }
  @media (max-width: 700px) { .foot-in { grid-template-columns: 1fr; } .foot-v { display: none; } }

  /* =======================================================================
     ここから下は見本 (mockup.html) に無い部品の見た目。
     見本はトップページの 1 枚もののため、フォーム・記事・下層ページの
     部品には定義が無い。色・線・字送りは見本の変数をそのまま使う。
     ======================================================================= */

  /* ===== お問い合わせフォーム ===== */
  .form-panel { margin: 34px 0 0; background: #fff; border: 1px solid var(--rule-dark); padding: 26px 28px 24px; max-width: 860px; }
  .form-title { margin: 0 0 16px; font-size: 16px; letter-spacing: .18em; font-weight: 600; }
  .frow { margin: 0 0 16px; }
  .frow label { display: block; font-size: 12.5px; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 6px; }
  .frow .req { font-size: 10.5px; letter-spacing: .16em; color: var(--shu); border: 1px solid var(--shu); padding: 1px 7px; margin-left: 8px; }
  .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"],
  .cform input[type="number"], .cform select, .cform textarea,
  .invoice input[type="number"], .invoice select {
    width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
    border: 1px solid var(--rule-dark); padding: 10px 12px; line-height: 1.7;
  }
  .cform textarea { min-height: 150px; resize: vertical; }
  .cform input:focus, .cform select:focus, .cform textarea:focus,
  .invoice input:focus, .invoice select:focus { outline: 2px solid var(--shu); outline-offset: 1px; }
  .radios { display: flex; gap: 22px; }
  .radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); margin: 0; }
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .consent { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; }
  .consent label { margin: 0; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
  .submitrow { margin: 20px 0 0; }
  .cform button { font-family: inherit; cursor: pointer; }
  .confirm-lead { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
  .confirmlist { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; margin: 0 0 18px; border-top: 1px solid var(--rule); }
  .confirmlist dt { font-size: 12px; letter-spacing: .1em; color: var(--sub); padding: 11px 4px; border-bottom: 1px solid var(--rule); }
  .confirmlist dd { margin: 0; font-size: 14px; padding: 11px 4px; border-bottom: 1px solid var(--rule); word-break: break-all; }
  .confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .sent-note { display: none; margin: 14px 0 0; font-size: 13px; }
  .sent-note.error { color: var(--shu-deep); }
  .form-note { margin: 16px 0 0; font-size: 11.5px; color: var(--sub); }
  @media (max-width: 700px) {
    .form-panel { padding: 20px 18px 18px; }
    .confirmlist { grid-template-columns: 1fr; }
    .confirmlist dt { border-bottom: none; padding-bottom: 0; }
  }

  /* ===== 無料相談の帯 (下層ページの末尾) ===== */
  /* 互い違いの薄い背景 (section.sec.wash) より後に効かせるため詳細度をそろえる */
  section.sec.cta-band { background: var(--shu-wash); }
  .cta-title { margin: 0 0 14px; font-size: clamp(19px, 2.3vw, 23px); font-weight: 600; letter-spacing: .1em; line-height: 1.9; }

  /* ===== お知らせ・コラム ===== */
  .col-more { margin: 20px 0 0; font-size: 13px; }
  .col-more a { text-decoration: none; }
  .col-more a:hover { color: var(--shu-deep); }
  .col-more .arw { color: var(--shu); font-family: sans-serif; margin-left: 8px; }
  .news-empty { color: var(--sub); font-size: 13.5px; margin: 0; }

  /* ===== 記事 ===== */
  .article-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0 0 24px; font-size: 11.5px; letter-spacing: .12em; color: var(--sub); }
  .article-meta .cat { color: var(--shu-deep); }
  .article-body { max-width: 720px; }
  .article-body h2 { margin: 40px 0 14px; font-size: 19px; font-weight: 600; letter-spacing: .08em; line-height: 1.9; border-bottom: 1px solid var(--rule-dark); padding-bottom: 8px; }
  .article-body h3 { margin: 28px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: .06em; line-height: 1.9; }
  .article-body p { margin: 0 0 18px; color: var(--ink-soft); }
  .article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 1.4em; color: var(--ink-soft); }
  .article-body li { margin: 0 0 6px; }
  .article-body .note { font-size: 12.5px; color: var(--sub); }
  .keypoint { background: var(--paper-deep); border-left: 3px solid var(--shu); padding: 18px 22px; margin: 0 0 26px; }
  .keypoint-title { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .18em; color: var(--shu-deep); }
  .keypoint ul { margin: 0; padding-left: 1.3em; }
  .toc { border: 1px solid var(--rule); padding: 16px 22px; margin: 0 0 30px; max-width: 720px; }
  .toc-title { margin: 0 0 6px; font-size: 12px; letter-spacing: .2em; color: var(--sub); }
  .toc ol { margin: 0; padding-left: 1.4em; font-size: 13.5px; }
  .toc a { text-decoration: none; }
  .toc a:hover { color: var(--shu-deep); }
  .sources { border-top: 1px solid var(--rule); margin: 30px 0 0; padding: 16px 0 0; }
  .sources-title { margin: 0 0 6px; font-size: 12px; letter-spacing: .18em; color: var(--sub); }
  .sources ul { margin: 0; padding-left: 1.3em; font-size: 12.5px; }
  .related { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; font-size: 13.5px; }
  .related a { text-decoration: none; border-bottom: 1px solid var(--rule-dark); padding: 6px 0; }
  .related a:hover { color: var(--shu-deep); }
  .article-table { margin: 0 0 24px; overflow-x: auto; }
  .article-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .article-table th, .article-table td { border: 1px solid var(--rule-dark); padding: 9px 10px; text-align: left; font-weight: 400; }
  .article-table th { background: var(--paper-deep); font-size: 12.5px; letter-spacing: .08em; }
  .article-table figcaption { font-size: 12px; color: var(--sub); margin: 0 0 6px; }
  .article-figure { margin: 0 0 24px; }
  .article-figure figcaption { font-size: 12px; color: var(--sub); margin: 6px 0 0; }
  .article-author { margin: 30px 0 0; font-size: 12.5px; color: var(--sub); }
  .article-disclaimer { margin: 12px 0 0; font-size: 11.5px; color: var(--sub); line-height: 1.9; }
  .article-back { margin: 26px 0 0; font-size: 13px; }
  .article-back a { text-decoration: none; }
  .article-back a:hover { color: var(--shu-deep); }
  .preview-note { background: var(--ink); color: #fff; font-size: 12px; letter-spacing: .1em; padding: 9px 20px; }

  /* ===== プライバシーポリシー ===== */
  .pp-body { max-width: 760px; }
  .pp-body h3 { margin: 26px 0 8px; font-size: 15px; font-weight: 600; letter-spacing: .08em; }
  .pp-body h3:first-child { margin-top: 0; }
  .pp-body p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

  /* ===== 試算の入力 (invoice の中) ===== */
  .invoice .frow { margin: 0 0 14px; }
  .invoice .frow label { font-size: 11.5px; letter-spacing: .12em; color: var(--sub); }
  .field-note { display: block; margin: 5px 0 0; font-size: 11px; color: var(--sub); line-height: 1.7; }