/* ============================================================
   日本承継成長研究所 ── 基本スタイル
   配色は提案資料（PowerPoint）と同じ 藍・土・金茶。
   出所：03_サービスページ/承継サイト/index.html（2026-08-28 版）から抽出
   ============================================================ */

/* ============================================================
   承継のその先へ ── 承継を迎える経営者ご本人へ
   配色は提案資料（PowerPoint）と同じ 藍・土・金茶。
   ============================================================ */
:root {
  --ground:#FFFFFF; --panel:#FFFFFF; --panel-gray:#F7F8FA; --panel-tsu:#F3F0EA; --panel-ai:#EDF2F7;
  --ink:#1F2430; --body:#414C59; --muted:#6F7885; --line:#DDE1E6; --line-soft:#EAEDF1;
  --ai:#1B3A5C; --ai-mid:#2E6096; --ai-soft:#8FB4D6;
  --kincha:#9C7C3E; --tsuchi:#6B5A44; --warn:#9C4A34;
  --slab:#14202E; --slab-ink:#F2F5F8; --slab-body:#B9C6D3; --slab-line:#1E3247; --slab-gold:#C9A961;
  --shadow:none;
  --radius:2px;
  --shell:1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0F1720; --panel:#16202B; --panel-gray:#131C25; --panel-tsu:#1F1B15; --panel-ai:#14202D;
    --ink:#ECF0F4; --body:#B2BCC7; --muted:#87919D; --line:#2A3542; --line-soft:#212B36;
    --ai:#9BBEDD; --ai-mid:#7BA5CD; --ai-soft:#3C566F;
    --kincha:#C9A961; --tsuchi:#C0A886; --warn:#C97B63;
    --slab:#0C1420; --slab-ink:#F2F5F8; --slab-body:#B9C6D3; --slab-line:#22303F; --slab-gold:#C9A961;
    --shadow:none;
  }
}
:root[data-theme="dark"] {
  --ground:#0F1720; --panel:#16202B; --panel-gray:#131C25; --panel-tsu:#1F1B15; --panel-ai:#14202D;
  --ink:#ECF0F4; --body:#B2BCC7; --muted:#87919D; --line:#2A3542; --line-soft:#212B36;
  --ai:#9BBEDD; --ai-mid:#7BA5CD; --ai-soft:#3C566F;
  --kincha:#C9A961; --tsuchi:#C0A886; --warn:#C97B63;
  --slab:#0C1420; --slab-ink:#F2F5F8; --slab-body:#B9C6D3; --slab-line:#22303F; --slab-gold:#C9A961;
  --shadow:none;
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--ground); color:var(--body);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  color:var(--ink); font-weight:700; line-height:1.5; margin:0; text-wrap:balance;
}
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
a { color:var(--ai-mid); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline:2px solid var(--kincha); outline-offset:3px; border-radius:2px;
}
img { max-width:100%; display:block; }

.shell { width:min(100% - 2.5rem, var(--shell)); margin-inline:auto; }
.narrow { max-width:38rem; }
section { padding-block:clamp(3.5rem, 7vw, 6.5rem); }
.eyebrow {
  font-size:.7rem; letter-spacing:.3em; color:var(--kincha); font-weight:700; margin-bottom:1.2rem;
}
.h2 { font-size:clamp(1.6rem, 3.4vw, 2.5rem); }
.lead { font-size:clamp(1rem, 1.4vw, 1.075rem); color:var(--body); margin-top:1.1rem; max-width:44rem; }
.src { font-size:.74rem; line-height:1.75; color:var(--muted); margin-top:1rem; }
.tnum { font-variant-numeric:tabular-nums; }

/* ---- 下書きバー ---- */
.draft {
  background:var(--slab); color:var(--slab-gold);
  font-size:.78rem; letter-spacing:.06em; padding:.55rem 1.25rem; text-align:center;
}
.draft b { color:#fff; margin-right:.6rem; }

/* ---- ヘッダー ---- */
header.bar {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);
}
.bar .shell { display:flex; align-items:center; gap:1.5rem; height:60px; }
.brand {
  font-family:"Zen Old Mincho",serif; font-weight:700; color:var(--ink);
  text-decoration:none; font-size:1.02rem; letter-spacing:.06em; display:flex; align-items:center; gap:.55rem;
}
.brand span { width:7px; height:7px; border-radius:50%; background:var(--kincha); flex:none; }
.bar nav { margin-left:auto; display:flex; align-items:center; gap:1.4rem; }
.bar nav a { color:var(--body); text-decoration:none; font-size:.84rem; }
.bar nav a:hover { color:var(--ai-mid); }
.bar .cta { color:#fff; background:var(--ai); padding:.5rem 1.1rem; border-radius:2px; font-weight:700; }
:root[data-theme="dark"] .bar .cta { color:var(--slab); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar .cta { color:var(--slab); } }
@media (max-width:820px) { .bar nav a:not(.cta) { display:none; } }

/* ---- ヒーロー ---- */
.hero {
  background:var(--slab);
  color:var(--slab-body); padding-block:clamp(4rem, 9vw, 7.5rem);
  border-bottom:1px solid var(--slab-line);
}
.hero .kick { color:var(--slab-gold); font-size:.78rem; letter-spacing:.24em; margin-bottom:1.6rem; }
.hero h1 {
  color:var(--slab-ink);
  font-size:clamp(2.1rem, 6.2vw, 4.05rem); line-height:1.42; letter-spacing:.01em;
}
.hero h1 em { font-style:normal; color:#A8C6E4; }
.hero .sub { margin-top:1.8rem; font-size:clamp(.98rem,1.5vw,1.12rem); color:#CBD7E3; max-width:36rem; }
.hero .rule { width:3.5rem; height:1px; background:var(--slab-gold); margin:2.4rem 0 .6rem; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.btn {
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.9rem 1.7rem; border-radius:2px; font-weight:700; font-size:.92rem;
  transition:opacity .18s ease, background .18s ease;
}
.btn.primary { background:#F2F5F8; color:var(--slab); }  /* 金のCTAは競合と同じ手なので使わない */
.btn.solid { background:var(--ai); color:var(--ground); }
.btn.ghost { border:1px solid #47617C; color:#DCE6F0; }
.btn:hover { opacity:.86; }
.hero .facts { display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:3rem; }
.hero .facts div { border-left:1px solid var(--slab-line); padding-left:1rem; }
.hero .facts b { display:block; font-family:"Zen Old Mincho",serif; color:var(--slab-ink); font-size:1.28rem; }
.hero .facts span { font-size:.78rem; color:#93A6B8; }


/* ---- カード共通 ---- */
.grid { display:grid; gap:1.1rem; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .g3, .g4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .g2, .g3, .g4 { grid-template-columns:1fr; } }

.card {
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow);
}
.card.tsu { background:var(--panel-tsu); border-color:transparent; }
.card.ai  { background:var(--panel-ai);  border-color:transparent; }
.card h3 { font-size:1.06rem; margin-bottom:.6rem; }
.card p { font-size:.92rem; line-height:1.85; }
.card .who { font-size:.72rem; letter-spacing:.16em; color:var(--kincha); margin-bottom:.9rem; }

/* 声のカード */
.voice q { display:block; font-family:"Zen Old Mincho",serif; font-weight:700;
  color:var(--ink); font-size:1.12rem; line-height:1.7; quotes:"「" "」"; margin-bottom:1rem; }
.voice p { color:var(--body); }

/* 数字タイル */
.stat .n {
  font-family:"Zen Old Mincho",serif; font-weight:700; color:var(--ai);
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:.01em; line-height:1.3; margin-bottom:.5rem;
}

/* 引用スラブ */
.slab {
  background:var(--slab); color:var(--slab-body); border-radius:var(--radius);
  padding:1.7rem 1.9rem;
}
.slab strong { display:block; font-family:"Zen Old Mincho",serif; color:var(--slab-ink);
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.65; margin-bottom:.5rem; }
.slab p { font-size:.92rem; }
.slab.gold { background:#2A2113; }
.slab.gold strong { color:#F0DFB4; }
.slab.gold p { color:#D8C9A2; }

/* ---- 10の問い ---- */
.check { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.check li { border-bottom:1px solid var(--line-soft); }
.check li:last-child { border-bottom:0; }
.check label {
  display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.3rem; cursor:pointer;
  font-size:.93rem; line-height:1.8; color:var(--ink); transition:background .15s ease;
}
.check label:hover { background:var(--panel-ai); }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check .box {
  flex:none; width:24px; height:24px; border-radius:2px; border:1.5px solid var(--line);
  background:var(--ground); margin-top:.25rem; position:relative; transition:all .18s ease;
}
.check .box::after {
  content:""; position:absolute; inset:0; margin:auto; width:7px; height:12px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px);
  opacity:0; transition:opacity .15s ease;
}
.check input:checked + .box { background:var(--ai); border-color:var(--ai); }
.check input:checked + .box::after { opacity:1; }
:root[data-theme="dark"] .check input:checked + .box::after { border-color:var(--slab); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check input:checked + .box::after { border-color:var(--slab); } }
.check input:focus-visible + .box { outline:2px solid var(--kincha); outline-offset:3px; }
.check .no { font-variant-numeric:tabular-nums; color:var(--muted); font-size:.8rem; flex:none; width:1.4rem; margin-top:.3rem; }

.gcheck { grid-template-columns:1fr 20rem; align-items:start; }
@media (max-width:900px) { .gcheck { grid-template-columns:1fr; } }
.gauge { background:var(--panel-ai); border-radius:var(--radius); padding:1.6rem 1.7rem; position:sticky; top:76px; }
.gauge .cnt { font-family:"Zen Old Mincho",serif; font-size:2.6rem; color:var(--ai); line-height:1; }
.gauge .cnt small { font-size:1rem; color:var(--muted); margin-left:.3rem; }
.gauge .track { height:6px; border-radius:2px; background:color-mix(in srgb, var(--ai) 16%, transparent); margin:1.1rem 0 1.2rem; overflow:hidden; }
.gauge .fill { height:100%; width:0; background:var(--ai); border-radius:2px; transition:width .45s cubic-bezier(.22,1,.36,1); }
.gauge .msg { font-size:.9rem; line-height:1.85; color:var(--body); }
.gauge .msg b { color:var(--ink); font-family:"Zen Old Mincho",serif; display:block; margin-bottom:.35rem; font-size:1.02rem; }
@media (max-width:900px) { .gauge { position:static; } }

/* ---- データ ---- */
.bars { display:flex; flex-direction:column; gap:1.15rem; }
.barrow .lab { display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; margin-bottom:.4rem; gap:1rem; }
.barrow .lab b { color:var(--ink); font-weight:500; }
.barrow .lab i { font-style:normal; font-family:"Zen Old Mincho",serif; font-weight:700; color:var(--ai); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.barrow .track { height:30px; border-radius:2px; background:color-mix(in srgb, var(--ink) 7%, transparent); overflow:hidden; }
.barrow .fill { height:100%; border-radius:2px; background:var(--ai-mid); width:0; transition:width .9s cubic-bezier(.22,1,.36,1); }
.barrow.dim .fill { background:color-mix(in srgb, var(--muted) 62%, transparent); }
.barrow.dim .lab i { color:var(--muted); }
.barrow.warm .fill { background:#B07A5A; }
.barrow.warm .lab i { color:#B07A5A; }

.split { display:flex; height:44px; border-radius:2px; overflow:hidden; }
.split div { display:grid; place-items:center; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
.splitrow + .splitrow { margin-top:1.5rem; }
.splitrow .cap { display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-bottom:.45rem; }
.splitrow .cap b { color:var(--ink); font-family:"Zen Old Mincho",serif; }
.legend { display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-bottom:.9rem; }
.legend span { display:flex; align-items:center; gap:.4rem; }
.legend i { width:12px; height:12px; border-radius:2px; display:block; }

.curve { width:100%; height:auto; }

/* ---- 4ヶ月 ---- */
.track4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:900px) { .track4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .track4 { grid-template-columns:1fr; } }
.mo { background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.5rem 1.35rem; border-top:3px solid var(--line); }
.mo.first { border-top-color:var(--kincha); background:var(--panel-tsu); border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent; }
.mo .k { font-size:.72rem; letter-spacing:.14em; color:var(--muted); }
.mo h3 { font-size:1.45rem; margin:.35rem 0 .7rem; }
.mo p { font-size:.88rem; line-height:1.85; }
.mo:nth-child(1) h3 { color:var(--kincha); }
.mo:nth-child(2) h3 { color:var(--tsuchi); }
.mo:nth-child(3) h3 { color:var(--ai-mid); }
.mo:nth-child(4) h3 { color:var(--ai); }

/* ---- before / after ---- */
.ba { display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem 1rem; align-items:center; }
.ba .now, .ba .then { padding:.9rem 1.15rem; border-radius:10px; font-size:.92rem; }
.ba .now { background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--muted); }
.ba .then { background:var(--panel-ai); color:var(--ai); font-weight:700; }
.ba .ar { color:var(--kincha); font-size:.85rem; }
@media (max-width:720px) {
  .ba { grid-template-columns:1fr; gap:.25rem; }
  .ba .ar { transform:rotate(90deg); justify-self:center; }
  .ba .then { margin-bottom:.9rem; }
}

/* ---- 人 ---- */
.person { display:flex; gap:1.3rem; align-items:flex-start; }
.person img { width:92px; height:114px; border-radius:2px; object-fit:cover; flex:none; border:1px solid var(--line); }
.person .role { font-size:.74rem; letter-spacing:.12em; color:var(--kincha); }
.person h3 { font-size:1.5rem; margin:.15rem 0 .3rem; }
.person .sub { font-size:.82rem; color:var(--muted); }
.badge { display:inline-block; line-height:1.7; margin:1.1rem 0 .9rem; padding:.55rem 1rem; border-radius:2px; background:var(--ai); color:#fff; font-family:"Zen Old Mincho",serif; font-weight:700; font-size:.92rem; }
:root[data-theme="dark"] .badge { color:var(--slab); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge { color:var(--slab); } }
.badge.tsu { background:var(--tsuchi); }
.facts li { font-size:.85rem; padding-left:1rem; position:relative; color:var(--ink); }
.facts li::before { content:""; position:absolute; left:0; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--kincha); }

/* ---- ステップ ---- */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:.85rem; }
@media (max-width:900px) { .steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }
.step { background:var(--panel); border:1px solid var(--line-soft); border-radius:2px; padding:1.25rem 1.1rem; }
.step.gold { background:var(--panel-tsu); border-color:color-mix(in srgb, var(--kincha) 34%, transparent); }
.step.blue { background:var(--panel-ai); border-color:color-mix(in srgb, var(--ai) 26%, transparent); }
.step .n { width:28px; height:28px; border-radius:2px; background:var(--ai); color:#fff; display:grid; place-items:center; font-size:.82rem; font-weight:700; margin-bottom:.8rem; }
:root[data-theme="dark"] .step .n { color:var(--slab); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step .n { color:var(--slab); } }
.step.gold .n { background:var(--kincha); }
.step h4 { font-size:.98rem; margin-bottom:.45rem; }
.step p { font-size:.82rem; line-height:1.8; }

/* ---- 価格 ---- */
.stages { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:820px) { .stages { grid-template-columns:1fr; } }
.stage .k { font-size:.72rem; letter-spacing:.14em; color:var(--slab-gold); margin-bottom:.6rem; }
.stage .t { font-size:.85rem; font-weight:700; color:var(--slab-body); }
.stage .amount { font-family:"Zen Old Mincho",serif; font-size:clamp(1.9rem,4.2vw,2.5rem); color:var(--slab-ink); line-height:1.35; }
.stage .amount small { font-size:.85rem; color:var(--slab-body); margin-left:.4rem; }
.stage p:last-child { font-size:.85rem; line-height:1.85; margin-top:.5rem; }
.stage.total { background:var(--panel-tsu); border-color:transparent; }
.stage.total .k { color:var(--kincha); }
.stage.total .t { color:var(--muted); }
.stage.total .amount { color:var(--tsuchi); }
.stage.total .amount small { color:var(--muted); }

/* ---- FAQ ---- */
details { border-bottom:1px solid var(--line-soft); }
summary { cursor:pointer; padding:1.15rem 2rem 1.15rem 0; font-family:"Zen Old Mincho",serif; font-weight:700;
  color:var(--ink); font-size:1rem; list-style:none; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+" / ""; position:absolute; right:.2rem; top:1rem; color:var(--kincha); font-size:1.2rem; transition:transform .2s ease; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 1.3rem; font-size:.92rem; color:var(--body); max-width:48rem; }

/* ---- 締め ---- */
.close { background:var(--slab); color:var(--slab-body); }
.close h2 { color:var(--slab-ink); }
.close .q { border-top:1px solid var(--slab-line); padding-top:1.2rem; }
.close .q b { display:block; font-family:"Zen Old Mincho",serif; color:var(--slab-ink); font-size:1.08rem; margin-bottom:.4rem; }
.close .q p { font-size:.88rem; }
footer { background:var(--slab); color:#8398AC; border-top:1px solid var(--slab-line); padding:2.2rem 0 3rem; font-size:.8rem; }
footer a { color:#A8C6E4; }

/* ---- 出現 ---- */
/* JS が動くときだけ、出現アニメーションを効かせる（JS 無効でも本文は必ず見える） */
html.js .rise { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
html.js .rise.on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  html.js .rise { opacity:1; transform:none; transition:none; }
  .btn:hover { transform:none; }
  .gauge .fill, .barrow .fill { transition:none; }
}