/* 色は :root のトークンで持ち、OS のダークモードで切り替える(027) */
:root {
  --bg:#ffffff; --bg-soft:#f4f6fa; --bg-card:#ffffff; --fg:#14181f; --muted:#5b6472;
  --line:#e3e7ee; --accent:#2563eb; --accent-fg:#ffffff; --accent-soft:#e8efff;
  --ink:#1e2b37; --ink-fg:#e9eef5; --ok:#0f8a5f; --shadow:0 12px 32px rgba(20,24,31,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f141a; --bg-soft:#151c24; --bg-card:#18212b; --fg:#e8edf3; --muted:#9aa6b4;
    --line:#2a3542; --accent:#6ea0ff; --accent-fg:#0b1220; --accent-soft:#1b2a44;
    --ink:#0a0f14; --ink-fg:#e9eef5; --ok:#4cc79a; --shadow:0 12px 32px rgba(0,0,0,.45);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.75;
       font-family:system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
       -webkit-text-size-adjust:100%; overflow-wrap:anywhere; }
a { color:var(--accent); }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--accent); color:var(--accent-fg); padding:8px 14px; border-radius:6px; z-index:10; }
.skip:focus { left:8px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ヘッダ(固定のナビ) */
.site-header { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent);
               backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--fg); text-decoration:none; white-space:nowrap; }
.brand img { width:26px; height:26px; }
.site-nav { margin-left:auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.site-nav ul { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.site-nav a { display:block; padding:6px 10px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:.92rem; white-space:nowrap; }
.site-nav a:hover { color:var(--fg); background:var(--bg-soft); }
.site-nav a.nav-cta { background:var(--accent); color:var(--accent-fg); font-weight:600; }

/* ボタン */
.btn { display:inline-block; padding:12px 24px; border-radius:8px; font-weight:600; text-decoration:none; border:1px solid var(--accent); }
.btn-primary { background:var(--accent); color:var(--accent-fg); }
.btn-ghost { background:transparent; color:var(--accent); }
.actions { display:flex; flex-wrap:wrap; gap:12px; }

/* 節 */
section { padding:88px 0; }
section.soft { background:var(--bg-soft); }
.eyebrow { color:var(--accent); font-weight:700; font-size:.85rem; letter-spacing:.08em; margin:0 0 8px; }
h1, h2, h3 { line-height:1.4; word-break:auto-phrase; }
.nb { display:inline-block; }
h2 { font-size:clamp(1.5rem, 3.2vw, 2rem); margin:0 0 16px; }
h3 { font-size:1.1rem; margin:0 0 8px; }
.section-lead { color:var(--muted); max-width:720px; margin:0 0 40px; }
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card { background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:24px; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }
.tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px;
       background:var(--accent-soft); color:var(--accent); vertical-align:middle; margin-left:6px; }

/* ヒーロー */
.hero { padding:72px 0 88px; }
.hero .wrap { display:grid; gap:48px; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); align-items:center; }
.hero h1 { font-size:clamp(1.75rem, 3.4vw, 2.5rem); margin:0 0 20px; letter-spacing:.01em; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lead { color:var(--muted); font-size:1.08rem; margin:0 0 32px; }
.hero .points { list-style:none; padding:0; margin:28px 0 0; color:var(--muted); font-size:.92rem; }
.hero .points li::before { content:"✓"; color:var(--ok); font-weight:700; margin-right:8px; }

/* 画面(ブラウザ枠) */
.frame { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-card); box-shadow:var(--shadow); }
.frame::before { content:""; display:block; height:26px; border-bottom:1px solid var(--line);
                 background:radial-gradient(circle at 16px 13px, #f87171 4px, transparent 5px),
                            radial-gradient(circle at 32px 13px, #fbbf24 4px, transparent 5px),
                            radial-gradient(circle at 48px 13px, #34d399 4px, transparent 5px), var(--bg-soft); }
.frame figcaption { padding:10px 14px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); }

/* 課題 */
.problem .card h3::before { content:"!"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px;
                            border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:.8rem; }

/* 仕組み(3 段) */
.steps { counter-reset:step; display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style:none; padding:0; margin:0; }
.steps li { counter-increment:step; position:relative; padding-top:56px; }
.steps li::before { content:counter(step); position:absolute; top:24px; left:24px; width:28px; height:28px; border-radius:50%;
                    display:grid; place-items:center; background:var(--accent); color:var(--accent-fg); font-weight:700; font-size:.9rem; }

/* 機能(画面と説明の交互) */
.feature { display:grid; gap:40px; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); align-items:center; margin-top:64px; }
.feature.reverse .frame { order:2; }
.feature ul { padding-left:1.2em; color:var(--muted); margin:12px 0 0; }
.feature ul li { margin:6px 0; }
.sources { margin-top:24px; }
.sources .card h3 { font-size:1rem; }

/* 安心 */
.trust .card h3 { display:flex; align-items:center; gap:8px; }
.trust .card h3::before { content:""; width:10px; height:10px; border-radius:2px; background:var(--ok); flex:none; }

/* 料金 */
.plans { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items:stretch; }
.plan { position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:28px 24px; }
.plan.featured { border:2px solid var(--accent); box-shadow:var(--shadow); }
.plan h3 { margin:0 0 4px; }
.plan .price { font-size:1.9rem; font-weight:800; margin:8px 0 0; }
.plan .price small { font-size:.85rem; color:var(--muted); font-weight:400; }
.plan .meta { color:var(--muted); font-size:.88rem; }
.plan ul { margin:16px 0 0; padding-left:1.1em; color:var(--muted); font-size:.92rem; }
.plan ul li { margin:6px 0; }
.badge { position:absolute; top:-12px; right:16px; background:var(--accent); color:var(--accent-fg); font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.offer { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 28px; color:var(--muted); }
.offer strong { color:var(--fg); }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--bg-card); }
table.ptable { width:100%; min-width:640px; border-collapse:collapse; font-size:.93rem; }
table.ptable th, table.ptable td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.ptable tbody tr:last-child td { border-bottom:none; }
table.ptable th { color:var(--muted); font-weight:600; background:var(--bg-soft); }
table.ptable td.num, table.ptable td:first-child { white-space:nowrap; font-weight:700; }
.note { color:var(--muted); font-size:.88rem; margin-top:16px; }
h3.sub { margin-top:56px; font-size:1.25rem; }

/* FAQ */
.faq details { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary { cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0 0 16px; color:var(--muted); }

/* お問い合わせ */
.contact { background:var(--ink); color:var(--ink-fg); text-align:center; }
.contact h2 { color:#fff; }
.contact p { color:#b8c3cf; max-width:640px; margin:0 auto 12px; }

footer { padding:32px 0; text-align:center; color:var(--muted); font-size:.88rem; border-top:1px solid var(--line); }

@media (max-width: 860px) {
  .hero .wrap, .feature { grid-template-columns:minmax(0, 1fr); }
  .feature.reverse .frame { order:0; }
  section { padding:64px 0; }
  .hero { padding:48px 0 64px; }
}
@media (max-width: 560px) {
  .site-header .wrap { height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:6px; gap:4px; }
  .site-nav { margin-left:0; width:100%; }
  .site-nav ul { flex-wrap:nowrap; gap:0; justify-content:space-between; }
  .site-nav a { padding:4px 6px; font-size:.84rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }