:root {
    --ground:#F2F5F4; --surface:#FFFFFF; --surface-2:#E9EFED; --surface-3:#F7FAF9;
    --line:#D3DCD9; --line-soft:#E4EAE8;
    --ink:#131C19; --ink-2:#394944; --muted:#576963;
    --accent:#0B5A4E; --accent-hi:#0A6B5C; --on-accent:#FFFFFF;
    --wash:#DFEEE9; --wash-line:#AFD3C9; --wash-ink:#0A4A40;
    --hot:#8A5A0F; --hot-wash:#F6EDD8;
    --shadow:0 1px 2px rgba(19,28,25,.06), 0 12px 32px -20px rgba(19,28,25,.28);
    --font-disp:"M PLUS 1p","Hiragino Sans","Noto Sans JP",sans-serif;
    --font-ui:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
    --font-data:"IBM Plex Mono",ui-monospace,monospace;
  }

  * { box-sizing:border-box; }
  body {
    background:var(--ground); color:var(--ink); margin:0;
    font-family:var(--font-ui); font-size:16px; line-height:1.85;
    -webkit-font-smoothing:antialiased;
  }
  .wrap { max-width:60rem; margin:0 auto; padding:0 1.2rem; }
  .narrow { max-width:44rem; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} }

  .nav { background:var(--surface); border-bottom:1px solid var(--line); }
  .nav-in { max-width:60rem; margin:0 auto; padding:.7rem 1.2rem; display:flex; align-items:center; gap:.55rem; }
  .logo-mark {
    width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--on-accent);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--font-disp); font-size:.85rem; font-weight:900;
  }
  .logo-name { font-family:var(--font-disp); font-weight:900; font-size:1.05rem; }
  .draft {
    margin-left:auto; font-family:var(--font-data); font-size:.62rem; font-weight:600;
    letter-spacing:.08em; color:var(--hot); background:var(--hot-wash);
    border:1px solid var(--hot); border-radius:999px; padding:.14rem .55rem;
  }

  /* ---------- hero ---------- */
  .hero { padding:4rem 0 3rem; }
  .hero-kicker {
    font-family:var(--font-data); font-size:.72rem; font-weight:600; letter-spacing:.14em;
    color:var(--accent-hi); margin-bottom:1.1rem;
  }
  h1 {
    font-family:var(--font-disp); font-weight:900;
    font-size:clamp(1.7rem, 5vw, 2.7rem); line-height:1.55;
    margin:0 0 1.1rem; letter-spacing:.01em; text-wrap:balance; max-width:44rem;
  }
  h1 .hero-num {
    font-family:var(--font-data); font-weight:600; color:var(--accent-hi);
    font-size:1.12em; letter-spacing:0; font-variant-numeric:tabular-nums;
  }
  .hero-line2 {
    font-family:var(--font-disp); font-weight:800;
    font-size:clamp(1.05rem, 2.8vw, 1.4rem); color:var(--ink-2); margin:0 0 1.4rem;
    text-wrap:balance;
  }
  .hero-sub { font-size:1rem; color:var(--ink-2); max-width:37rem; margin:0 0 1.8rem; }
  .cta-row { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem; }
  .cta {
    display:inline-block; text-decoration:none; border-radius:10px; padding:.8rem 1.6rem;
    font-family:var(--font-disp); font-weight:800; font-size:.95rem;
  }
  .cta.primary { background:var(--accent); color:var(--on-accent); }
  .cta.ghost { border:1px solid var(--line); color:var(--ink-2); background:var(--surface); }
  .hero-note { font-size:.78rem; color:var(--muted); max-width:40rem; line-height:1.8; }

  /* ---------- proof strip ---------- */
  .proof { background:var(--surface); border-block:1px solid var(--line); }
  .proof-in {
    max-width:60rem; margin:0 auto; padding:1.4rem 1.2rem;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem;
  }
  .pv b { display:block; font-family:var(--font-data); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; }
  .pv span { font-size:.75rem; color:var(--muted); }

  section { padding:3.4rem 0 0; }
  .sec-kicker {
    font-family:var(--font-data); font-size:.68rem; font-weight:600; letter-spacing:.14em;
    color:var(--accent-hi); margin-bottom:.5rem;
  }
  h2 {
    font-family:var(--font-disp); font-weight:900;
    font-size:clamp(1.3rem, 3.4vw, 1.7rem); line-height:1.55; margin:0 0 1rem; text-wrap:balance;
  }
  p { margin:0 0 1rem; }
  .lead { color:var(--ink-2); max-width:38rem; }

  /* steps */
  .steps { display:grid; gap:.8rem; margin-top:1.5rem; counter-reset:st; }
  @media(min-width:760px){ .steps{ grid-template-columns:1fr 1fr 1fr; } }
  .step {
    background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
    padding:1.1rem 1.2rem; box-shadow:var(--shadow);
  }
  .step::before {
    counter-increment:st; content:counter(st);
    display:inline-flex; align-items:center; justify-content:center;
    width:1.5rem; height:1.5rem; border-radius:6px;
    background:var(--wash); color:var(--wash-ink);
    font-family:var(--font-data); font-size:.78rem; font-weight:600;
  }
  .step b { display:block; font-family:var(--font-disp); font-weight:800; font-size:.98rem; margin:.45rem 0 .3rem; }
  .step p { font-size:.86rem; color:var(--ink-2); margin:0; }

  /* sample table */
  .sample {
    margin-top:1.5rem; background:var(--surface); border:1px solid var(--line-soft);
    border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
  }
  .sample-head {
    display:flex; align-items:center; gap:.5rem; padding:.6rem .95rem;
    border-bottom:1px solid var(--line-soft); font-size:.78rem; color:var(--muted);
  }
  .sample-head .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
  .tblw { overflow-x:auto; }
  table { border-collapse:collapse; width:100%; font-size:.82rem; }
  th,td { padding:.55rem .85rem; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line-soft); }
  thead th { font-size:.66rem; font-weight:700; letter-spacing:.04em; color:var(--muted); background:var(--surface-3); }
  tbody tr:last-child td { border-bottom:none; }
  td.tel, td.dt { font-family:var(--font-data); font-size:.76rem; }
  td.fac { font-weight:700; }
  .foot-note { text-align:center; color:var(--muted); font-size:.76rem; }

  /* diff table */
  .difftbl { margin-top:1.5rem; }
  .difftbl td.wrapc, .difftbl th.wrapc { white-space:normal; min-width:9rem; }
  .yes { color:var(--accent-hi); font-weight:700; }
  .no { color:var(--muted); }
  .difftbl thead th.us { background:var(--wash); color:var(--wash-ink); }

  /* features */
  .feats { display:grid; gap:.8rem; margin-top:1.5rem; }
  @media(min-width:760px){ .feats{ grid-template-columns:1fr 1fr; } }
  .feat {
    background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
    padding:1.05rem 1.2rem; box-shadow:var(--shadow);
  }
  .feat b { display:block; font-family:var(--font-disp); font-weight:800; font-size:.98rem; margin-bottom:.3rem; }
  .feat b .ai {
    font-family:var(--font-data); font-size:.6rem; font-weight:600; letter-spacing:.06em;
    color:var(--wash-ink); background:var(--wash); border-radius:4px; padding:.1rem .38rem;
    margin-left:.4rem; vertical-align:.12em;
  }
  .feat p { font-size:.86rem; color:var(--ink-2); margin:0; }

  /* pricing */
  .plans { display:grid; gap:.9rem; margin-top:1.5rem; }
  @media(min-width:760px){ .plans{ grid-template-columns:1fr 1fr; } }
  .plan {
    background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
    padding:1.35rem 1.4rem 1.5rem; box-shadow:var(--shadow);
  }
  .plan.hot { border:2px solid var(--accent); position:relative; }
  .plan.hot::after {
    content:"おすすめ"; position:absolute; top:-0.72rem; left:1.2rem;
    background:var(--accent); color:var(--on-accent);
    font-family:var(--font-disp); font-size:.66rem; font-weight:800;
    border-radius:999px; padding:.12rem .6rem;
  }
  .plan-name { font-family:var(--font-disp); font-weight:800; font-size:1rem; }
  .plan-price { font-family:var(--font-data); font-size:1.7rem; font-weight:600; margin:.3rem 0 .1rem; }
  .plan-price small { font-size:.75rem; color:var(--muted); font-weight:400; }
  .plan-note { font-size:.78rem; color:var(--muted); margin-bottom:.8rem; }
  .plan ul { margin:0; padding:0; list-style:none; display:grid; gap:.35rem; font-size:.87rem; }
  .plan li { padding-left:1.2rem; position:relative; }
  .plan li::before { content:"✓"; position:absolute; left:0; color:var(--accent-hi); font-weight:700; }

  /* faq */
  details {
    background:var(--surface); border:1px solid var(--line-soft); border-radius:10px;
    padding:.85rem 1.1rem; margin-bottom:.6rem; box-shadow:var(--shadow);
  }
  summary { cursor:pointer; font-weight:700; font-size:.93rem; }
  details p { font-size:.87rem; color:var(--ink-2); margin:.6rem 0 0; }

  /* final cta */
  .final { margin-top:3.4rem; background:var(--accent); color:var(--on-accent); }
  .final-in { max-width:44rem; margin:0 auto; padding:3rem 1.2rem; text-align:center; }
  .final h2 { color:var(--on-accent); }
  .final p { opacity:.92; font-size:.95rem; }
  .final .cta { background:var(--surface); color:var(--accent); }
  .final .note { font-size:.74rem; opacity:.75; margin-top:.9rem; }

  footer { max-width:60rem; margin:0 auto; padding:1.6rem 1.2rem 3rem; font-size:.74rem; color:var(--muted); line-height:1.9; }
  footer a { color:var(--accent-hi); }

/* ---------- サイト共通（サービスサイト化 2026-08-24） ---------- */
.nav-links { display:flex; gap:.85rem; margin-left:1rem; flex-wrap:wrap; }
.nav-links a { color:var(--ink-2); text-decoration:none; font-weight:700; font-size:.8rem; }
.nav-links a:hover { color:var(--accent-hi); }
.nav-links a[aria-current="page"] { color:var(--accent-hi); border-bottom:2px solid var(--accent-hi); }
@media(max-width:560px){ .nav-links { gap:.65rem; } .nav-links a { font-size:.72rem; } .draft { display:none; } }

.page-hero { padding:2.8rem 0 0; }
.page-hero h1 { font-size:clamp(1.5rem, 4.2vw, 2.1rem); }
main { display:block; }
.pagebody { padding-bottom:3.6rem; }

td.num, th.num { text-align:right; font-family:var(--font-data); font-size:.78rem; font-variant-numeric:tabular-nums; }
tfoot td { font-weight:700; background:var(--surface-3); border-top:2px solid var(--line); }
.pct { color:var(--accent-hi); font-weight:600; }

.callout {
  margin-top:1.5rem; background:var(--wash); border:1px solid var(--wash-line);
  border-radius:12px; padding:1.05rem 1.2rem; font-size:.9rem; color:var(--wash-ink);
}
.callout b { font-family:var(--font-disp); }
.smallnote { font-size:.76rem; color:var(--muted); line-height:1.9; margin-top:.8rem; }
.inline-cta { margin-top:1.4rem; }