:root {
    color-scheme: light;
    --paper: #ffffff;
    --paper2: #f7f6f1;
    --ink: #23231d;
    --sub: #6e6a5e;
    --line: #e4e1d6;
    --green: #17523c;
    --green-deep: #0f3d2c;
    --green-pale: #eef2ec;
    --gold: #b49254;
  }
  /* 明るさ固定: 閲覧側がダーク設定でも白基調を維持する */
  :root[data-theme="dark"], :root[data-theme="light"] {
    --paper: #ffffff; --paper2: #f7f6f1; --ink: #23231d; --sub: #6e6a5e;
    --line: #e4e1d6; --green: #17523c; --green-deep: #0f3d2c; --green-pale: #eef2ec; --gold: #b49254;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; background: #fff; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    line-height: 2.0; font-size: 15px;
    -webkit-font-smoothing: antialiased;
  }
  .mincho { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS PMincho", serif; }
  a { color: inherit; }
  img { max-width: 100%; }

  /* ===== header ===== */
  header.site {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    max-width: 1120px; margin: 0 auto; padding: 22px 28px;
  }
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand-mark { width: 42px; height: 42px; flex: none; }
  .brand-text { display: flex; flex-direction: column; line-height: 1.4; }
  .brand .ja { font-size: 18px; font-weight: 600; letter-spacing: .08em; }
  .brand .sub { font-size: 10.5px; color: var(--sub); letter-spacing: .18em; }
  nav.global { margin-left: auto; display: flex; gap: 26px; font-size: 13.5px; letter-spacing: .05em; }
  nav.global a { text-decoration: none; color: var(--ink); padding: 6px 0; position: relative; }
  nav.global a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--green);
    transition: right .25s ease;
  }
  nav.global a:hover::after { right: 0; }
  @media (prefers-reduced-motion: reduce) { nav.global a::after { transition: none; } }
  .head-cta {
    text-decoration: none; background: var(--green); color: #fff; font-size: 13.5px; font-weight: 600;
    letter-spacing: .1em; padding: 12px 26px; border-radius: 2px;
  }
  .head-cta:hover { background: var(--green-deep); }
  /* スマホ幅: メニューの語が途中で折り返される (「サービ/ス」等) のを防ぐ
     [実観察: 2026-08-04 iPhone 実機スクリーンショット]。項目単位で折り返す */
  @media (max-width: 860px) {
    header.site { gap: 12px 0; padding: 18px 22px 16px; }
    nav.global { margin-left: 0; width: 100%; order: 3; flex-wrap: wrap; gap: 2px 20px; font-size: 13px; }
    nav.global a { white-space: nowrap; }
    .head-cta { margin-left: auto; padding: 10px 20px; }
  }

  /* ===== hero ===== */
  .hero { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
  .hero-inner {
    max-width: 1120px; margin: 0 auto; padding: 74px 28px 78px;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 300px); gap: 36px; align-items: center;
  }
  .tate {
    writing-mode: vertical-rl; font-size: 12px; letter-spacing: .42em; color: var(--sub);
    border-left: 1px solid var(--line); padding-left: 18px; height: fit-content; align-self: start;
  }
  .hero h1 {
    margin: 0 0 26px; font-size: clamp(34px, 5vw, 54px); line-height: 1.62;
    font-weight: 600; letter-spacing: .06em; text-wrap: balance;
  }
  .hero h1 small { display: block; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .14em; color: var(--green); margin-bottom: 18px; font-weight: 600; }
  .hero p.lead { color: var(--sub); margin: 0 0 34px; font-size: 14.5px; line-height: 2.2; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
    font-size: 14px; font-weight: 600; letter-spacing: .12em;
    padding: 15px 34px; border-radius: 2px;
  }
  .btn .arw { font-family: sans-serif; }
  .btn-primary { background: var(--green); color: #fff; }
  .btn-primary:hover { background: var(--green-deep); }
  .btn-quiet { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
  .btn-quiet:hover { border-color: var(--green); color: var(--green); }
  .trust {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
    margin: 52px 0 0; padding: 0; background: var(--green-pale);
    border: 1px solid var(--line); border-top: 3px solid var(--green);
  }
  .trust li { list-style: none; padding: 22px 28px 20px; text-align: center; }
  .trust li + li { border-left: 1px solid var(--line); }
  .trust li b { display: block; font-size: 16.5px; letter-spacing: .1em; color: var(--green-deep); margin-bottom: 4px; }
  .trust li span { font-size: 12.5px; color: var(--sub); letter-spacing: .05em; }
  @media (max-width: 760px) { .trust { grid-template-columns: 1fr; } .trust li + li { border-left: none; border-top: 1px solid var(--line); } }
  .hero-photo { justify-self: end; width: 100%; max-width: 300px; }
  .frame { position: relative; }
  .frame .ph {
    aspect-ratio: 4 / 4.6; background: var(--paper2); border: 1px solid var(--line);
    display: grid; place-items: center; text-align: center; color: var(--sub); font-size: 12.5px; line-height: 2;
  }
  .frame img.ph-img {
    display: block; width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center;
    border: 1px solid var(--line);
  }
  .frame::after {
    content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); z-index: -1;
  }
  .hero-caption { margin-top: 24px; font-size: 12px; color: var(--sub); letter-spacing: .06em; text-align: right; }
  .hero-caption b { display: block; font-size: 15px; color: var(--ink); letter-spacing: .22em; }
  /* スマホ幅: 3列の grid のままだと本文列が潰れて 1 文字ずつ縦に折り返される
     [実観察: 2026-08-04 切替当日の iPhone 実機スクリーンショット] ため 1 列に切り替える */
  @media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 30px; padding: 46px 22px 52px; }
    .tate { display: none; }
    .hero-photo { justify-self: start; max-width: 240px; }
    .hero-caption { text-align: left; }
  }

  /* ===== section base ===== */
  section.block { max-width: 1120px; margin: 0 auto; padding: 84px 28px 10px; }
  section.wide { max-width: none; padding: 0; }
  .sec-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 44px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .sec-head .label { font-size: 11.5px; letter-spacing: .3em; color: var(--green); font-weight: 600; white-space: nowrap; }
  .sec-head h2 { margin: 0; font-size: clamp(22px, 2.8vw, 30px); font-weight: 600; letter-spacing: .1em; }
  .sec-lead { margin: -22px 0 40px; color: var(--sub); font-size: 14px; max-width: 44em; }

  /* ===== two doors ===== */
  .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; border: 1px solid var(--line); }
  .door { padding: 44px 42px 40px; }
  .door + .door { border-left: 1px solid var(--line); }
  @media (max-width: 760px) { .door + .door { border-left: none; border-top: 1px solid var(--line); } }
  .door .to { font-size: 11.5px; letter-spacing: .24em; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
  .door h3 { margin: 0 0 16px; font-size: 21px; line-height: 1.7; letter-spacing: .06em; font-weight: 600; }
  .door p { margin: 0 0 22px; color: var(--sub); font-size: 13.8px; line-height: 2.1; }
  .door .more { font-size: 13px; letter-spacing: .1em; color: var(--green); text-decoration: none; font-weight: 600; }
  .door .more:hover { text-decoration: underline; }

  /* ===== sim demo ===== */
  .sim-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); width: fit-content; margin-bottom: 26px; background: var(--paper); }
  .sim-tabs button {
    font: inherit; font-weight: 600; letter-spacing: .04em; cursor: pointer; font-size: 13.5px;
    padding: 12px 24px; border: none; background: transparent; color: var(--sub);
  }
  .sim-tabs button + button { border-left: 1px solid var(--line); }
  .sim-tabs button[aria-selected="true"] { background: var(--green); color: #fff; }
  .sim-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
  .sim-panel { border: 1px solid var(--line); background: var(--paper); }
  .sim-grid { display: grid; grid-template-columns: 340px 1fr; }
  @media (max-width: 860px) { .sim-grid { grid-template-columns: 1fr; } }
  .sim-in { padding: 30px 30px 26px; border-right: 1px solid var(--line); background: var(--paper2); }
  @media (max-width: 860px) { .sim-in { border-right: none; border-bottom: 1px solid var(--line); } }
  .sim-in h3, .sim-out h3 { margin: 0 0 16px; font-size: 13px; letter-spacing: .22em; color: var(--green-deep); font-weight: 600; }
  .sim-out { padding: 30px 34px 30px; }
  .sim-verdict {
    margin-top: 24px; background: var(--green-pale); border-left: 4px solid var(--green);
    padding: 18px 24px;
  }
  .sim-verdict .v-line { font-size: 14px; color: var(--sub); }
  .sim-verdict .v-main { font-size: 21px; font-weight: 700; color: var(--green-deep); letter-spacing: .04em; }
  .sim-note { margin: 18px 0 0; font-size: 12px; color: var(--sub); line-height: 1.9; }
  .sim-shot { margin-top: 22px; border: 1px solid var(--line); background: #fff; }
  .sim-shot img { width: 100%; display: block; }
  .sim-shot-cap { margin: 8px 0 0; font-size: 12px; color: var(--sub); letter-spacing: .04em; }
  .caselist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; }
  .caselist dt { font-size: 12.6px; color: var(--sub); padding: 8px 0; border-bottom: 1px solid var(--line); letter-spacing: .04em; }
  .caselist dd { margin: 0; font-size: 14px; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
  .case-tag { display: inline-block; font-size: 11.5px; letter-spacing: .18em; color: var(--gold); border: 1px solid currentColor; padding: 2px 12px; margin-bottom: 14px; }
  .sim-after { margin-top: 14px; font-size: 12.8px; color: var(--sub); line-height: 2; }
  .sim-after b { color: var(--green-deep); }

  /* ===== services ===== */
  .svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
  @media (max-width: 760px) { .svc-list { grid-template-columns: 1fr; } }
  .svc { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 34px 26px 30px; border-bottom: 1px solid var(--line); }
  .svc:nth-child(odd) { border-right: 1px solid var(--line); }
  @media (max-width: 760px) { .svc:nth-child(odd) { border-right: none; } .svc { grid-template-columns: 1fr; gap: 8px; } }
  .svc .nm { font-size: 13px; letter-spacing: .14em; color: var(--green); font-weight: 600; line-height: 2; }
  .svc h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: .08em; font-weight: 600; }
  .svc p { margin: 0; color: var(--sub); font-size: 13.5px; line-height: 2.05; }

  /* ===== sim band ===== */
  .sim-band { background: var(--green); color: #fff; margin-top: 84px; }
  .sim-inner {
    max-width: 1120px; margin: 0 auto; padding: 56px 28px;
    display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  }
  @media (max-width: 760px) { .sim-inner { grid-template-columns: 1fr; } }
  .sim-inner h3 { margin: 0 0 10px; font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; letter-spacing: .1em; line-height: 1.9; }
  .sim-inner p { margin: 0; font-size: 13.5px; color: #cfe0d6; line-height: 2.1; }
  .btn-white { background: #fff; color: var(--green); }
  .btn-white:hover { background: #eef2ec; }

  /* ===== flow ===== */
  .flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
  @media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }
  .fstep { padding: 30px 22px 26px; border-right: 1px solid var(--line); }
  .fstep:last-child { border-right: none; }
  @media (max-width: 860px) { .fstep { border-right: none; border-bottom: 1px solid var(--line); } .fstep:last-child { border-bottom: none; } }
  .fstep .no { font-size: 12px; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
  .fstep h3 { margin: 8px 0 8px; font-size: 15.5px; letter-spacing: .06em; font-weight: 600; }
  .fstep p { margin: 0; color: var(--sub); font-size: 12.6px; line-height: 1.95; }

  /* ===== price ===== */
  .price-block { background: var(--paper2); margin-top: 84px; padding-bottom: 40px; }
  .price-block section.block { padding-top: 84px; }
  .price-promise {
    background: var(--paper); border: 1px solid var(--green); border-left: 4px solid var(--green);
    padding: 24px 30px; margin: 0 0 30px;
  }
  .price-promise h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: .08em; color: var(--green-deep); }
  .price-promise p { margin: 0; font-size: 13.6px; color: var(--sub); line-height: 2.05; }
  .price-promise b { color: var(--ink); }
  .price-tabs { display: flex; gap: 0; border: 1px solid var(--line); width: fit-content; margin-bottom: 26px; background: var(--paper); }
  .price-tabs button {
    font: inherit; font-weight: 600; letter-spacing: .08em; cursor: pointer; font-size: 13.5px;
    padding: 12px 34px; border: none; background: transparent; color: var(--sub);
  }
  .price-tabs button + button { border-left: 1px solid var(--line); }
  .price-tabs button[aria-selected="true"] { background: var(--green); color: #fff; }
  .price-tabs button:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
  .price-panel { background: var(--paper); border: 1px solid var(--line); padding: 34px; }
  .tablewrap { overflow-x: auto; }
  /* スマホ幅: 表が画面より広く横スクロールできることが伝わらないため案内を出す。
     sticky で案内文字自体はスクロールしても画面に留まる */
  @media (max-width: 860px) {
    .tablewrap::before {
      content: "表は横にスクロールできます →"; display: block; position: sticky; left: 0;
      font-size: 11px; color: var(--sub); letter-spacing: .06em; padding: 0 2px 6px;
    }
  }
  table.price { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
  table.price th, table.price td { padding: 12px 14px; font-size: 13.8px; text-align: center; border: 1px solid var(--line); }
  table.price thead th { background: var(--green-pale); color: var(--green-deep); font-size: 12.8px; letter-spacing: .06em; }
  table.price tbody th { font-weight: 600; font-size: 13.2px; background: var(--paper2); }
  table.price td.em { font-weight: 700; color: var(--green-deep); }
  .notes { margin: 18px 0 0; padding: 0; list-style: none; color: var(--sub); font-size: 12.4px; line-height: 1.95; }
  .notes li { padding-left: 1.2em; text-indent: -1.2em; margin-bottom: 4px; }
  .price-spot { margin-top: 28px; }
  .price-spot h3 { font-size: 15.5px; margin: 0 0 12px; letter-spacing: .1em; }

  /* ===== faq (micro-hojin) ===== */
  .faq-list { display: grid; gap: 14px; }
  .faq-item { border: 1px solid var(--line); background: var(--paper); padding: 24px 28px 22px; }
  .faq-item h3 { margin: 0 0 10px; font-size: 15.5px; letter-spacing: .06em; font-weight: 600; }
  .faq-item h3::before { content: "Q."; color: var(--green); margin-right: 8px; font-weight: 700; }
  .faq-item p { margin: 0; color: var(--sub); font-size: 13.6px; line-height: 2.05; }

  /* ===== news ===== */
  .news-list { border-top: 1px solid var(--line); }
  .news-row {
    display: grid; grid-template-columns: 110px 90px 1fr auto; gap: 20px; align-items: baseline;
    padding: 20px 8px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 14px;
  }
  @media (max-width: 700px) { .news-row { grid-template-columns: 1fr; gap: 4px; } }
  .news-row time { color: var(--sub); font-size: 12.8px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .news-row .cat { font-size: 11.5px; letter-spacing: .12em; color: var(--green); border: 1px solid currentColor; padding: 1px 10px; width: fit-content; }
  .news-row h3 { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.9; }
  .news-row:hover h3 { color: var(--green); }
  .news-row .arw { color: var(--sub); }
  .sample-tag { font-size: 11px; color: var(--sub); }

  /* ===== profile ===== */
  .profile-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: start; }
  @media (max-width: 760px) { .profile-wrap { grid-template-columns: 1fr; } .profile-wrap .frame { max-width: 230px; } }
  .profile-name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
  .profile-name .nm { font-size: 27px; font-weight: 600; letter-spacing: .18em; }
  .profile-name .kana { color: var(--sub); font-size: 12.5px; letter-spacing: .14em; }
  .profile-reg { font-size: 12.3px; color: var(--sub); margin-bottom: 18px; letter-spacing: .04em; }
  .profile p { margin: 0 0 14px; font-size: 14px; line-height: 2.15; }
  .profile .aside { font-size: 12.8px; color: var(--sub); }

  /* ===== office ===== */
  dl.office { display: grid; grid-template-columns: 170px 1fr; max-width: 680px; margin: 0; border-top: 1px solid var(--line); }
  dl.office dt, dl.office dd { margin: 0; padding: 14px 10px; border-bottom: 1px solid var(--line); font-size: 13.8px; }
  dl.office dt { color: var(--sub); letter-spacing: .1em; }

  /* ===== contact (相談方法 + フォームの統合セクション) ===== */
  .contact-block { margin-top: 90px; border-top: 1px solid var(--line); background: var(--paper2); padding-bottom: 74px; }
  .contact-block section.block { padding-top: 84px; }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
  @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
  .form-panel { background: var(--paper); border: 1px solid var(--line); padding: 36px 34px 30px; }
  .form-panel .form-title { margin: 0 0 24px; font-size: 13px; letter-spacing: .22em; color: var(--green-deep); font-weight: 600; }
  .alt-box { border: 1px solid var(--line); background: var(--paper); padding: 24px 28px 22px; font-size: 13.5px; line-height: 2; }
  .alt-box + .alt-box { margin-top: 22px; }
  .alt-box > b { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .22em; color: var(--green-deep); }
  .btn-lw { background: #06C755; color: #fff; margin-top: 12px; padding: 12px 30px; font-size: 13.5px; }
  .btn-lw:hover { filter: brightness(1.06); }
  .alt-box .lw-note { display: block; font-size: 11.5px; color: var(--sub); margin-top: 8px; }
  .alt-box .lw-qr {
    display: block; margin-top: 12px; width: 132px; height: 132px;
    border: 1px solid var(--line); background: #fff; padding: 6px; image-rendering: pixelated;
  }
  .alt-box .tel { margin-top: 10px; font-size: 25px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .alt-box .tel small { display: block; font-size: 11.5px; font-weight: 400; color: var(--sub); letter-spacing: .08em; }
  .alt-box .tel a { color: inherit; text-decoration: none; }
  /* マウス操作の環境 (PC) では電話発信が使えずエラーになるため、クリック自体を無効にする */
  @media (hover: hover) and (pointer: fine) {
    .alt-box .tel a { pointer-events: none; cursor: default; }
  }
  .cform { max-width: 680px; margin: 0; }
  .cform .frow { margin-bottom: 22px; }
  .cform .frow > label { display: block; font-size: 13px; letter-spacing: .06em; margin-bottom: 6px; font-weight: 600; }
  .cform .req { color: #a04b32; font-size: 11px; margin-left: 8px; font-weight: 400; }
  .cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform textarea {
    width: 100%; font: inherit; font-size: 14.5px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink);
  }
  .cform textarea { min-height: 160px; resize: vertical; }
  .cform input:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .cform .radios { display: flex; gap: 28px; font-size: 14px; }
  .cform .radios label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
  .cform .consent { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; margin: 26px 0; }
  .cform .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .cform .submitrow { text-align: center; }
  .cform button.btn { border: none; cursor: pointer; }
  .cform .sent-note { display: none; margin-top: 16px; text-align: center; color: var(--green-deep); font-weight: 600; font-size: 13px; }
  /* 文字を大きめに [user指示: 2026-08-04 修正依頼⑥ 1文に短縮し大きい文字で] */
  .form-note { max-width: 680px; margin: 26px 0 0; font-size: 14px; color: var(--sub); line-height: 1.95; }

  /* ===== 送信内容の確認画面 ===== */
  .confirm-title { margin: 0 0 8px; font-size: 18px; letter-spacing: .08em; }
  .confirm-lead { font-size: 13.5px; color: var(--sub); margin: 0 0 20px; }
  .confirmlist { margin: 0; display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid var(--line); }
  .confirmlist dt { font-size: 12.8px; color: var(--sub); padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .confirmlist dd { margin: 0; font-size: 14px; padding: 12px 8px; border-bottom: 1px solid var(--line); white-space: pre-wrap; }
  .confirm-actions { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
  .consent a, footer.site a { color: var(--green); }

  /* ===== プライバシーポリシー (重ね表示のページ) ===== */
  .pp-overlay { position: fixed; inset: 0; background: rgba(35, 35, 29, .5); display: none; z-index: 200; overflow-y: auto; padding: 48px 18px; }
  .pp-overlay.open { display: block; }
  .pp-card { max-width: 780px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); padding: 44px 48px 40px; position: relative; }
  .pp-card h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: .1em; }
  .pp-card .pp-draft { font-size: 11.5px; color: var(--gold); letter-spacing: .08em; margin: 0 0 20px; }
  .pp-card h3 { font-size: 15px; letter-spacing: .06em; margin: 24px 0 6px; color: var(--green-deep); }
  .pp-card p, .pp-card li { font-size: 13.5px; color: var(--sub); line-height: 2; margin: 0; }
  .pp-card ul { margin: 4px 0 0; padding-left: 1.4em; }
  .pp-close { position: absolute; top: 18px; right: 20px; font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--paper); padding: 6px 16px; cursor: pointer; letter-spacing: .08em; }
  .pp-close:hover { border-color: var(--green); color: var(--green-deep); }

  footer.site { padding: 30px 28px 64px; text-align: center; color: var(--sub); font-size: 12px; letter-spacing: .08em; }

  /* ===== コラム記事・送信エラー (見本には無い・本番だけの部分) ===== */
  .cform .sent-note.error { color: #a04b32; }
  .news-more { margin: 18px 0 0; font-size: 13px; letter-spacing: .1em; text-align: right; }
  .news-more a, .article-back a { color: var(--green); text-decoration: none; font-weight: 600; }
  .news-more a:hover, .article-back a:hover { text-decoration: underline; }
  .news-empty { margin: 0; padding: 20px 8px; color: var(--sub); font-size: 13.8px; border-bottom: 1px solid var(--line); }
  .article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: -22px 0 32px; }
  .article-meta time { color: var(--sub); font-size: 12.8px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .article-meta .cat { font-size: 11.5px; letter-spacing: .12em; color: var(--green); border: 1px solid currentColor; padding: 1px 10px; }
  .article-body { max-width: 44em; }
  .article-body h2 { margin: 40px 0 14px; font-size: 18px; letter-spacing: .06em; font-weight: 600; color: var(--green-deep); border-left: 4px solid var(--green); padding-left: 14px; line-height: 1.9; }
  .article-body p { margin: 0 0 18px; font-size: 14.5px; line-height: 2.15; }
  .article-body ol { margin: 0 0 18px; padding-left: 1.6em; }
  .article-body ol li { margin-bottom: 12px; font-size: 14.5px; line-height: 2.15; }
  .article-body p.note { font-size: 12.4px; color: var(--sub); line-height: 1.95; }
  .article-back { margin: 44px 0 0; font-size: 13px; letter-spacing: .1em; }

  /* ===== コラム記事の拡張記法 (要点箱・リスト・表・図・関連リンク・Q 見出し) ===== */
  .article-body ul { margin: 0 0 18px; padding-left: 1.5em; list-style: disc; }
  .article-body ul li { margin-bottom: 12px; font-size: 14.5px; line-height: 2.15; }
  .article-body h3 { margin: 32px 0 12px; font-size: 16px; letter-spacing: .04em; font-weight: 600; color: var(--green-deep); line-height: 1.9; }
  .keypoint { margin: 0 0 28px; padding: 20px 24px 10px; border: 1px solid var(--line); background: var(--paper2); }
  .keypoint-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; font-weight: 600; color: var(--green-deep); }
  .article-body .keypoint ul { margin: 0; padding-left: 1.3em; }
  .article-body .keypoint li { margin-bottom: 10px; font-size: 14px; line-height: 2.0; }
  .article-table { margin: 0 0 18px; overflow-x: auto; }
  .article-table figcaption { font-size: 12px; color: var(--sub); margin-bottom: 6px; }
  .article-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
  .article-table th, .article-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; line-height: 1.9; }
  .article-table th { background: var(--paper2); font-weight: 600; }
  .article-figure { margin: 0 0 18px; }
  .article-figure img { max-width: 100%; height: auto; border: 1px solid var(--line); }
  .article-figure figcaption { font-size: 12px; color: var(--sub); margin-top: 8px; }
  .related { margin: 0 0 18px; }
  .related a { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; }
  .related a::after { content: " →"; }
  .related a:hover { text-decoration: underline; }
  .toc { margin: 0 0 34px; padding: 18px 24px 10px; border: 1px solid var(--line); background: var(--paper2); }
  .toc-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; color: var(--sub); }
  .toc ol { margin: 0; padding-left: 1.3em; }
  .toc li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.9; }
  .toc a { color: var(--ink); text-decoration: none; }
  .toc a:hover { color: var(--green); }
  .article-author { margin: 36px 0 0; font-size: 13px; color: var(--sub); }
  .article-author a { color: var(--green); }

  /* ===== 記事プレビュー (公開前の下書きを実際の見た目で確かめる非公開ページ) ===== */
  .preview-note {
    padding: 10px 22px; font-size: 12px; letter-spacing: .06em; color: var(--sub);
    background: var(--paper2); border-bottom: 1px solid var(--line);
  }