@charset "utf-8";
/* ============================================================
   成果報酬型Web集客LP ／ 共通ベース
   ・PCの主要コンテンツは 1000px 内に収める（カンプ遵守の範囲）
   ・1000px を超える分は背景だけを伸ばす
   ・色・角丸・強弱は案別CSS（a.css / b.css / c.css）が上書きする
   ============================================================ */

:root{
  --wrap: 1000px;
  --pad: 24px;
  --gap: 24px;
  --r: 10px;               /* 角丸 */
  --ink: #1f2a37;          /* 本文 */
  --ink-2: #5a6675;        /* 補助 */
  --ink-3: #8a94a1;        /* 注記 */
  --line: #dfe5ec;
  --paper: #ffffff;
  --band: #f4f7fb;
  --brand: #0b72c4;
  --brand-deep: #1e3246;
  --accent: #fad22d;       /* ハイライト（マーカー） */
  --cta: #fad22d;
  --cta-ink: #1e3246;
  --ok: #1f8a5b;
  --ng: #b23b3b;
  --sec-pad: 96px;
  --shadow: 0 2px 10px rgba(16,32,54,.06);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:15px; line-height:1.9; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
ul,ol,dl,dd{ margin:0; padding:0 }
li{ list-style:none }
table{ border-collapse:collapse; width:100% }
button{ font:inherit }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.sec{ padding:var(--sec-pad) 0; position:relative }
.sec + .sec{ border-top:1px solid var(--line) }
.is-quiet{ --sec-pad:64px; background:var(--band) }

/* ── 見出し ─────────────────────────────── */
.eyebrow{
  margin:0 0 14px; font-size:13px; font-weight:700; color:var(--ink-2);
  letter-spacing:.06em; display:flex; align-items:center; gap:10px;
}
.eyebrow b{
  display:inline-block; min-width:2.2em; padding:2px 6px; border-radius:4px;
  background:var(--brand); color:#fff; font-size:12px; text-align:center;
}
.eyebrow-en{ color:var(--brand); font-size:12px; letter-spacing:.16em }

.ttl{
  margin:0 0 22px; font-size:34px; line-height:1.45; font-weight:900;
  letter-spacing:.01em; color:var(--brand-deep);
}
.ttl span{ display:block }
.ttl em{
  font-style:normal; position:relative; z-index:0;
}
.ttl em::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.34em;
  background:var(--accent); z-index:-1; border-radius:2px;
}
h1.ttl{ font-size:42px; margin-bottom:18px }

.lead{ margin:0 0 24px; font-size:16px; color:var(--ink) }
.lead-block p{ margin:0 0 12px }
.lead-block{ margin:0 0 28px; max-width:44em }
.note{ margin:10px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.8 }
.note-box{
  margin:24px 0 0; padding:16px 18px; background:var(--band);
  border-radius:var(--r); font-size:13.5px; color:var(--ink-2); line-height:1.9;
}
.close{
  margin:32px 0 0; font-size:22px; font-weight:900; line-height:1.6;
  color:var(--brand-deep);
}
.close span{ display:block }
.close em{ font-style:normal; position:relative; z-index:0 }
.close em::after{
  content:""; position:absolute; left:-.05em; right:-.05em; bottom:.05em; height:.32em;
  background:var(--accent); z-index:-1;
}
.line-note{
  margin:22px 0 0; padding-left:14px; border-left:3px solid var(--brand);
  font-size:14px; color:var(--ink-2);
}

/* ── ボタン ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:290px; padding:17px 30px; border:0; border-radius:999px; cursor:pointer;
  background:var(--cta); color:var(--cta-ink);
  font-size:17px; font-weight:900; text-decoration:none; letter-spacing:.02em;
  box-shadow:0 3px 0 rgba(0,0,0,.12); transition:transform .12s, box-shadow .12s;
}
.btn::after{ content:"→"; font-weight:700 }
.btn:hover{ transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.12) }

/* ── ロゴ・バッジ ───────────────────────── */
.logo{ margin:0; font-size:20px; font-weight:900; letter-spacing:.04em; color:var(--brand-deep) }
.logo b{ color:var(--brand) }
.badges{ margin:0; display:flex; flex-wrap:wrap; gap:8px }
.badges span{
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:var(--band); color:var(--ink-2); border:1px solid var(--line);
}

/* ── アイコン（スプライト） ─────────────── */
.ic{
  display:inline-block; width:34px; height:34px; flex:0 0 auto;
  background-repeat:no-repeat; vertical-align:middle;
}

/* ── ヒーロー ───────────────────────────── */
.hero{ padding:28px 0 72px; position:relative; overflow:hidden }
.hero-wrap{ position:relative; z-index:1 }
.hero-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:34px }
.hero-main{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:end }
.hero-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 0; max-width:620px }
.hero-points li{
  display:flex; flex-direction:column; padding:12px 16px; border-radius:var(--r);
  background:var(--band); border:1px solid var(--line); min-width:150px;
}
.hero-points b{ font-size:13px; color:var(--ink-2) }
.hero-points span{ font-size:17px; font-weight:900; color:var(--brand-deep) }
.hero-cta{ margin:26px 0 0 }
.hero-art .lead-img{ width:100%; max-width:300px; margin-left:auto }

.hero-fig{ margin:44px 0 0; padding:24px; border-radius:var(--r); background:var(--band) }
.hero-fig-ttl{ margin:0 0 18px; font-size:18px; font-weight:900; color:var(--brand-deep) }
.flow-h{ margin:0 0 10px; display:flex; align-items:baseline; gap:12px; font-size:13px }
.flow-h b{ font-size:14px; color:var(--brand-deep) }
.flow-h span{ color:var(--ink-2) }
.flow-line{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.flow-line .chip::after{ content:"→"; margin-left:10px; color:var(--ink-3); font-weight:700 }
.flow-line .chip:last-child::after{ content:"" }
.chip{
  display:inline-flex; align-items:center; padding:9px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:700;
}
.chip-ours{ border-color:var(--brand); color:var(--brand-deep) }
.flow-turn{ margin:14px 0; text-align:center }
.flow-turn span{
  display:inline-block; width:38px; height:38px; line-height:36px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:900; font-size:16px;
}

/* ── ステップ ───────────────────────────── */
.steps{ display:grid; gap:var(--gap) }
.steps-3{ grid-template-columns:repeat(3,1fr) }
.steps-4{ grid-template-columns:repeat(4,1fr) }
.step{
  position:relative; padding:22px 18px 20px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px;
}
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 9px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:13px; font-weight:900;
  align-self:flex-start;
}
.step b{ font-size:16.5px; font-weight:900; color:var(--brand-deep); line-height:1.5 }
.step-d{ font-size:13.5px; color:var(--ink-2); line-height:1.85 }
.step.is-ours{ border-color:var(--brand); background:var(--band) }
.step-time{ font-size:12.5px; color:var(--ink-2); border-top:1px dashed var(--line); padding-top:8px }
.who{
  align-self:flex-start; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:4px;
}
.who-you{ background:var(--band); color:var(--ink-2); border:1px solid var(--line) }
.who-us{ background:var(--brand); color:#fff }

/* ── 相場・合計 ─────────────────────────── */
.cost{ margin:28px 0 0; display:grid; grid-template-columns:1fr 320px; gap:var(--gap); align-items:start }
.cost-ttl{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--ink-2) }
.kv div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line) }
.kv dt{ font-size:13.5px; color:var(--ink-2) }
.kv dd{ font-size:14px; font-weight:700; white-space:nowrap }
.cost-sum{ padding:22px; border-radius:var(--r); background:var(--band); border:1px solid var(--line) }
.cost-sum-label{ margin:0; font-size:13px; color:var(--ink-2); font-weight:700 }
.cost-sum-num{ margin:4px 0 0; font-size:30px; font-weight:900; color:var(--brand-deep); letter-spacing:.01em }
.cost-sum-chart{ margin-top:12px; color:var(--brand) }
.spark{ width:100%; height:auto; display:block }

/* ── 比較表 ─────────────────────────────── */
.tablewrap{ margin:28px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.cmp{ min-width:640px; font-size:13.5px }
.cmp th,.cmp td{ padding:13px 14px; border:1px solid var(--line); vertical-align:top; text-align:left }
.cmp thead th{ background:var(--band); font-size:13px; font-weight:900; color:var(--brand-deep); white-space:nowrap }
.cmp tbody th{ background:#fbfcfe; font-weight:700; width:170px; color:var(--ink-2) }
.cmp .mine{ background:rgba(11,114,196,.06) }
.cmp thead .mine{ background:var(--brand); color:#fff }
.cmp tbody td.mine{ font-weight:700; color:var(--brand-deep) }

.price{ min-width:520px; font-size:14px }
.price th,.price td{ padding:13px 16px; border-bottom:1px solid var(--line); text-align:left }
.price thead th{ background:var(--band); font-size:13px; color:var(--ink-2) }
.price tbody th{ font-weight:700 }
.price tbody td{ font-weight:900; color:var(--brand-deep); white-space:nowrap; text-align:right }

/* ── 03 の対比図 ────────────────────────── */
.vs{ margin:8px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.vs-col{ padding:20px; border-radius:var(--r); border:1px solid var(--line); background:#fff }
.vs-label{ margin:0 0 14px; font-size:13px; font-weight:900; color:var(--ink-2); text-align:center }
.vs-art{ min-height:150px; display:flex; align-items:center; justify-content:center }
.vs-mass{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-content:center }
.vs-mass i{ display:block; height:26px; border-radius:3px; background:var(--line) }
.vs-us{ border-color:var(--brand); background:var(--band) }
.vs-one{ position:relative }
.vs-one img{ max-height:190px; width:auto }
.vs-flag{ position:absolute; right:6px; bottom:6px }

/* ── 05 一次情報／デザイン ───────────────── */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.duo-col{ padding:22px; border-radius:var(--r); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow) }
.duo-h{ margin:0 0 8px; display:flex; align-items:center; gap:10px }
.duo-h b{ font-size:18px; font-weight:900; color:var(--brand-deep) }
.duo-sub{ margin:0 0 14px; font-size:13.5px; color:var(--ink-2) }
.checks li{ position:relative; padding-left:1.5em; margin-bottom:8px; font-size:13.5px; line-height:1.85 }
.checks li::before{ content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900 }
.ba{ margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.ba figcaption{ font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:6px }
.ba-box{ height:140px; border-radius:var(--r); border:1px solid var(--line); background:
  repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 14px) }
.ba-after{ border-color:var(--brand); background:
  linear-gradient(180deg,var(--band) 0 34px,transparent 34px),
  repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 18px) }
.ba figure{ margin:0 }

/* ── 06 ─────────────────────────────────── */
.area{ display:grid; grid-template-columns:1fr 250px; gap:var(--gap); align-items:end }
.area-art img{ margin-left:auto; max-width:250px }
.panel{ margin:26px 0 0; padding:22px; border-radius:var(--r); background:var(--band); border:1px solid var(--line) }
.panel-ttl{ margin:0 0 14px; font-size:14px; font-weight:900; color:var(--brand-deep) }
.cond{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.cond li{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); font-size:13.5px; line-height:1.7 }
.gyoshu{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.gyoshu li{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:12px 6px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  font-size:11.5px; line-height:1.5; color:var(--ink-2) }
.gyoshu .ic{ width:42px; height:42px }

/* ── 07 ─────────────────────────────────── */
.funnel{ margin:26px 0 0; padding:24px; border-radius:var(--r); background:var(--band); text-align:center }
.funnel-outs{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap }
.out{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:14px; font-weight:700 }
.funnel-goal{ margin:0; position:relative; padding-top:38px }
.funnel-goal::before{ content:"↓"; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  font-size:20px; color:var(--brand); font-weight:900 }
.funnel-goal b{ font-size:19px; font-weight:900; color:var(--brand-deep) }
.funnel-goal .ic{ margin-right:8px }
.terms{ margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.terms div{ padding:16px 18px; border-radius:var(--r); border:1px dashed var(--line) }
.terms dt{ font-size:14px; font-weight:900; color:var(--brand); margin-bottom:4px }
.terms dd{ font-size:13px; color:var(--ink-2); line-height:1.85 }

/* ── 08 分岐 ────────────────────────────── */
.branch{ display:grid; gap:0 }
.branch-row{ text-align:center; padding:18px 0 }
.branch-row + .branch-row{ position:relative }
.branch-row + .branch-row::before{ content:"↓"; display:block; color:var(--brand); font-weight:900; font-size:20px; margin-bottom:8px }
.branch-h{ margin:0 0 12px; font-size:13px; font-weight:900; color:var(--ink-2) }
.branch-items{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap }
.branch-items .chip{ min-width:210px; justify-content:center; padding:14px 18px; font-size:15px }
.branch-row:last-child .chip{ background:var(--brand); border-color:var(--brand); color:#fff }

/* ── 09 ─────────────────────────────────── */
.points-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.points-3 li{ padding:22px 20px; border-radius:var(--r); background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px }
.pt-n{ font-size:12px; font-weight:900; color:var(--brand); letter-spacing:.08em }
.points-3 b{ font-size:17px; font-weight:900; color:var(--brand-deep); line-height:1.5 }
.points-3 span:last-child{ font-size:13.5px; color:var(--ink-2) }
.valid{ margin:26px 0 0; padding:22px; border-radius:var(--r); border:2px solid var(--brand) }
.valid-ttl{ margin:0 0 14px; font-size:15px; font-weight:900; color:var(--brand-deep) }
.valid-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.valid-grid p{ margin:0 0 10px; font-size:13px; font-weight:900 }
.valid-yes p{ color:var(--ok) } .valid-no p{ color:var(--ng) }
.valid-grid li{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding:5px 0 }
.valid-grid .ic{ width:24px; height:24px }
.pay{ margin:24px 0 0; display:grid; gap:12px }
.pay-row{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--r);
  background:var(--band); border:1px solid var(--line) }
.pay-l{ margin:0; font-size:13px; font-weight:700; color:var(--ink-2); min-width:16em }
.pay-big .ic{ width:56px; height:56px }
.pay-small .ic{ width:26px; height:26px; margin-right:14px }
.pay-ours{ border-color:var(--brand) }

/* ── CTA帯 ──────────────────────────────── */
.band{ padding:56px 0; background:var(--brand-deep); color:#fff; text-align:center; position:relative }
.band-h{ margin:0 0 22px; font-size:26px; font-weight:900; line-height:1.5 }
.band .note{ color:rgba(255,255,255,.72) }

/* ── 10 ─────────────────────────────────── */
.choices{ margin:16px 0 0; display:flex; gap:12px; flex-wrap:wrap }

/* ── 11 ─────────────────────────────────── */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.fit-h{ margin:0 0 14px; font-size:16px; font-weight:900 }
.fit > div{ padding:22px; border-radius:var(--r); border:1px solid var(--line) }
.fit-yes{ background:#fff; border-color:var(--brand); box-shadow:var(--shadow) }
.fit-yes .fit-h{ color:var(--brand-deep) }
.fit-no{ background:var(--band) }
.fit-no .fit-h{ color:var(--ink-2) }
.fit li{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:13.5px; line-height:1.8 }
.fit .ic{ width:24px; height:24px; margin-top:3px }
.fit-no li{ color:var(--ink-2) }

/* ── 12 ─────────────────────────────────── */
.asks li{ counter-increment:ask; position:relative; padding-left:2em; margin-bottom:8px; font-size:14px }
.asks{ counter-reset:ask }
.asks li::before{ content:counter(ask); position:absolute; left:0; top:.2em;
  width:1.5em; height:1.5em; line-height:1.5em; text-align:center; border-radius:50%;
  background:var(--brand); color:#fff; font-size:11px; font-weight:900 }

/* ── 13 ─────────────────────────────────── */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.services li{ padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--r) }
.services b{ display:block; font-size:15.5px; font-weight:900; color:var(--brand-deep); margin-bottom:4px }
.services span{ font-size:13px; color:var(--ink-2) }

/* ── 14 FAQ ─────────────────────────────── */
.faq{ border-top:1px solid var(--line) }
.qa{ border-bottom:1px solid var(--line); padding:20px 4px }
.qa dt,.qa dd{ display:flex; gap:14px; align-items:flex-start }
.qa dt{ font-size:16px; font-weight:900; color:var(--brand-deep); margin-bottom:10px }
.qa dd{ font-size:14px; color:var(--ink-2); line-height:1.95 }
.qa dt span,.qa dd span{
  flex:0 0 auto; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%;
  font-size:12px; font-weight:900; margin-top:2px;
}
.qa dt span{ background:var(--brand); color:#fff }
.qa dd span{ background:var(--band); color:var(--brand); border:1px solid var(--line) }

/* ── 15 フォーム ────────────────────────── */
.form{ margin:8px 0 0; padding:28px; border-radius:var(--r); background:var(--band); border:1px solid var(--line) }
.f-row{ display:grid; grid-template-columns:230px 1fr; gap:16px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line) }
.f-row > label{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.req,.opt{ font-size:10.5px; font-weight:900; padding:2px 7px; border-radius:3px }
.req{ background:var(--ng); color:#fff }
.opt{ background:var(--line); color:var(--ink-2) }
.f-in{ display:grid; gap:10px }
.f-in input[type=text],.f-in input[type=email],.f-in input[type=tel],.f-in input[type=url],
.f-in select,.f-in textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px;
  background:#fff; font:inherit; font-size:15px; color:var(--ink);
}
.f-in :focus-visible{ outline:2px solid var(--brand); outline-offset:1px }
.opts{ display:flex; flex-wrap:wrap; gap:10px 18px }
.opt-l{ display:inline-flex; align-items:center; gap:7px; font-size:14px; cursor:pointer }
.form-cta{ margin:26px 0 0; text-align:center }
.form .note{ text-align:center }
.f-err{ color:var(--ng); font-size:12.5px; font-weight:700 }

/* ── フッター ───────────────────────────── */
.foot{ padding:64px 0 48px; background:var(--band); border-top:1px solid var(--line) }
.foot .logo{ margin-bottom:26px }
.info{ border-top:1px solid var(--line) }
.info div{ display:grid; grid-template-columns:132px 1fr; gap:0 20px;
  border-bottom:1px solid var(--line); padding:13px 2px }
.info dt{ font-size:13px; color:var(--ink-2); font-weight:600 }
.info dd{ font-size:14.5px }
.info a{ color:var(--brand); text-decoration:none; border-bottom:1px solid currentColor }
.notes{ margin:28px 0 0 }
.notes li{ position:relative; padding-left:1.1em; margin-bottom:8px;
  font-size:12.5px; line-height:1.85; color:var(--ink-2) }
.notes li::before{ content:"※"; position:absolute; left:0 }
.copyright{ margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3) }

/* ── 追従CTA（SPのみ） ──────────────────── */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  align-items:center; justify-content:center; gap:14px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line);
  box-shadow:0 -3px 12px rgba(16,32,54,.1);
}
.sticky-t{ margin:0; font-size:11.5px; font-weight:700; color:var(--ink-2) }
.sticky .btn{ min-width:0; flex:1 1 auto; max-width:340px; padding:13px 18px; font-size:15px }

/* ── レスポンシブ ───────────────────────── */
@media (max-width:1000px){
  .ttl{ font-size:30px } h1.ttl{ font-size:34px }
}
@media (max-width:820px){
  :root{ --sec-pad:64px; --gap:16px; --pad:20px }
  .ttl{ font-size:25px } h1.ttl{ font-size:28px }
  .close{ font-size:19px }
  .hero-main{ grid-template-columns:1fr }
  .hero-art{ display:none }
  .steps-3,.steps-4,.points-3,.duo,.ba,.fit,.terms,.valid-grid,.vs,.services,.cond{
    grid-template-columns:1fr }
  .hero-points{ grid-template-columns:1fr 1fr; max-width:none }
  .cost,.split,.area{ grid-template-columns:1fr }
  .gyoshu{ grid-template-columns:repeat(3,1fr) }
  .area-art{ display:none }
  .f-row{ grid-template-columns:1fr; gap:8px }
  .form{ padding:20px }
  .band-h{ font-size:20px }
  .btn{ min-width:0; width:100%; font-size:16px }
  .sticky{ display:flex }
  body{ padding-bottom:72px }
  .pay-row{ flex-direction:column; align-items:flex-start }
  .pay-l{ min-width:0 }
}
@media (max-width:400px){
  .gyoshu{ grid-template-columns:repeat(2,1fr) }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto } .btn{ transition:none }
}

/* ── 04 の並び（表＋棒グラフ） ───────────── */
.split{ margin:26px 0 0; display:grid; grid-template-columns:1fr 340px; gap:var(--gap); align-items:start }
.split .note-box{ margin:0 }
.bars{ padding:20px; border-radius:var(--r); background:var(--band); border:1px solid var(--line) }
.bars-ttl{ margin:0 0 14px; font-size:12.5px; font-weight:700; color:var(--ink-2) }
.bars li{ margin-bottom:12px }
.bar-l{ display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:4px }
.bar-t{ display:block; height:14px; background:#fff; border:1px solid var(--line); border-radius:999px; overflow:hidden }
.bar-t i{ display:block; height:100%; background:var(--brand) }
.bars li:last-child .bar-t i{ background:var(--cta) }

/* ── 見出しブロック（人物つき） ───────────── */
.sec-head{ position:relative }
.sec-head.has-art{ display:grid; grid-template-columns:1fr 210px; gap:var(--gap); align-items:end }
.sec-art img{ margin-left:auto; max-width:210px }
.sec-head .lead{ margin-bottom:0 }
.sec-head + *{ margin-top:28px }

/* ── 03 対比図（作り直し） ───────────────── */
.vs-mass{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:center; width:100% }
.vs-mass i{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:4px;
  background:#f2f4f7; border:1px solid var(--line) }
.vs-mass .ic{ width:26px; height:26px; filter:grayscale(1); opacity:.45 }
.vs-cap{ margin:14px 0 0; font-size:12.5px; color:var(--ink-2); text-align:center }
.vs-one img{ max-height:200px; width:auto }
.vs-flag{ position:absolute; right:10px; bottom:0 }
.vs-flag .ic{ width:40px; height:40px }

/* ── 05 Before / After ──────────────────── */
.ba-box{ height:170px; padding:14px; border-radius:var(--r); border:1px solid var(--line);
  background:#fff; display:flex; flex-direction:column; gap:9px; overflow:hidden }
.ba-h{ display:block; height:12px; width:52%; border-radius:3px; background:var(--line) }
.ba-t{ display:block; height:7px; border-radius:3px; background:#eef1f5 }
.ba-t:nth-of-type(even){ width:88% }
.ba-after{ border-color:var(--brand) }
.ba-after .ba-h{ background:var(--brand); height:16px; width:64% }
.ba-img{ display:block; flex:1 1 auto; min-height:46px; border-radius:5px; background:var(--band);
  border:1px dashed var(--line) }

/* ── 09 支払いのタイミング ───────────────── */
.pay-bar{ flex:1 1 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pay-when{ font-style:normal; font-size:12px; font-weight:700; color:var(--ink-2) }
.pay-big .ic{ width:54px; height:54px }
.pay-small .ic{ width:26px; height:26px }
.pay-note{ margin:2px 0 0; font-size:12.5px; color:var(--ink-2) }

/* ── 街並み帯（素材を敷く） ─────────────── */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px; z-index:0;
  background:var(--city-band) center bottom / cover no-repeat; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%); mask-image:linear-gradient(180deg,transparent,#000 60%);
}
.band{ overflow:hidden }
.band::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.16;
  background:var(--city-pale) center bottom / cover no-repeat;
}
.band .wrap{ position:relative; z-index:1 }
.foot{ position:relative; overflow:hidden }
.foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:90px; opacity:.22;
  background:var(--city-pale) center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent);
}
.foot .wrap{ position:relative; z-index:1 }

@media (max-width:820px){
  .sec-head.has-art{ grid-template-columns:1fr }
  .sec-art{ display:none }
  .vs-mass{ grid-template-columns:repeat(4,1fr) }
}

@media (max-width:820px){
  .split{ grid-template-columns:1fr }
}

@media (max-width:560px){
  .hero-head{ flex-direction:column; align-items:flex-start; gap:10px }
  .hero-points{ grid-template-columns:1fr }
  .badges span{ font-size:11px }
}
/* 追従CTAはヒーローが見えている間は出さない */
.sticky{ transform:translateY(110%); transition:transform .18s ease }
.sticky.is-on{ transform:none }