/* =========================================================================
   AAAOS 記事LP 汎用ベースCSS（base.css）
   - ニュートラル配色 + アクセント1色（--accent を案件ごとに上書き）
   - 別案件で流用可能。読みやすさ・精読率重視のシンプル設計。
   - 画像は <figure class="lp-figure"> でレスポンシブ表示（alt 必須）。
   使い方: <link rel="stylesheet" href="path/to/base.css"> の後に
           <style>:root{--accent:#0e7490;}</style> でアクセント色だけ差し替え。
   ========================================================================= */

:root{
  --ink:#23282d;          /* 本文 */
  --muted:#6b7280;        /* 補足 */
  --line:#e5e7eb;         /* 罫線 */
  --bg:#f7f8fa;           /* 余白背景 */
  --card:#f3f5f7;         /* カード/囲み */
  --accent:#0e7490;       /* 案件カラー＝見出し・要点・図解（案件ごとに上書き） */
  --accent-ink:#0b5563;   /* アクセント濃いめ（見出し線等） */
  --cta:#e8702a;          /* CTAボタン＝オレンジ（本文ティールの補色で視線を集める） */
  --cta-ink:#c25618;      /* CTA影/hover */
  --cta-soft:#fff7e8;     /* CTAエリア背景＝薄いオレンジ（本文と差をつけ視線誘導） */
  --mark:#fff3a3;         /* 蛍光マーカー＝強調（黄色で統一・1セクション1〜2箇所まで） */
  --maxw:720px;           /* 本文最大幅 */
  --radius:10px;
}
/* 色設計の役割: 本文=白 / 見出し・要点・図解=案件カラー(--accent=ティール等) /
   CTAだけ補色のオレンジ(--cta)＋薄オレンジ箱(--cta-soft)で視線誘導 / 強調=黄マーカー(mark/1〜2箇所/section) /
   不安解消・チェック=薄い背景(--card)。案件で変えるのは --accent（CTAオレンジは原則共通）。
   禁止: グラデ多用・点滅・赤文字だらけ・CTA連打・絵文字大量・ランキング形式・派手装飾。 */

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.85; margin:0; font-size:17px;
}
.lp-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px 80px; background:#fff; }

/* ---- 見出し ---- */
.lp-hero{ padding:36px 20px 4px; }
h1{ font-size:1.5rem; line-height:1.5; margin:0; border-left:6px solid var(--accent); padding-left:14px; }
h2{ font-size:1.2rem; margin:42px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--accent); }
.offer-head{ font-size:1.35rem; line-height:1.5; margin:0 0 4px; border-left:6px solid var(--accent); padding-left:14px; }

/* ---- 本文要素 ---- */
p{ margin:14px 0; }
ul{ padding-left:1.4em; } li{ margin:7px 0; }
strong{ color:var(--accent-ink); }
mark{ background:var(--mark); padding:0 3px; }
small{ color:var(--muted); font-size:.82rem; }
a{ color:var(--accent-ink); }
.aside{ color:var(--muted); font-size:.92rem; }
.divider{ margin:48px 0; border:none; border-top:1px solid var(--line); }

/* ---- 比較表（HTMLのまま：レスポンシブ・編集容易） ---- */
table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:.93rem; }
th,td{ border:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:top; }
th{ background:var(--card); }

/* ---- 画像（figure）: ラスター画像をレスポンシブ表示。alt 必須 ---- */
/* トップ画像（アイキャッチ・必須）は最上部・余白上ゼロ */
.lp-figure{ margin:22px 0; }
.lp-figure--hero{ margin:0 0 18px; }
.lp-figure picture{ display:block; }
.lp-figure img{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); }
.lp-figure figcaption{ margin-top:6px; font-size:.85rem; color:var(--muted); text-align:center; }
/* 画像未配置（生成前）でも崩れないプレースホルダ。img の onerror で .img-missing 付与 */
.lp-figure.img-missing{ border:1px dashed var(--line); border-radius:var(--radius); padding:26px 16px; background:var(--card); text-align:center; }
.lp-figure.img-missing img{ display:none; }
.lp-figure.img-missing::before{ content:"［画像をここに：images/ に生成画像を追加してください］"; display:block; color:var(--muted); font-size:.85rem; margin-bottom:4px; }
/* インラインSVG図解（Codex生成）もレスポンシブに */
.lp-figure svg{ width:100%; height:auto; display:block; }

/* ---- 要点ボックス（結論先出し・スキャン用。各h2直後に置く） ---- */
.lp-keypoint{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:12px 16px; margin:16px 0; font-size:.97rem; }
.lp-keypoint::before{ content:"要点"; display:inline-block; font-size:.72rem; font-weight:700; color:#fff; background:var(--accent); border-radius:4px; padding:1px 8px; margin-right:8px; }
.lp-keypoint b,.lp-keypoint strong{ color:var(--accent-ink); }

/* ---- KPI/数字を大きく見せる ---- */
.lp-kpis{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.lp-kpi{ flex:1 1 150px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; }
.lp-kpi .num{ display:block; font-size:1.25rem; font-weight:800; color:var(--accent-ink); line-height:1.3; }
.lp-kpi .lbl{ font-size:.83rem; color:var(--muted); }

/* ---- アイコン横並び ---- */
.lp-icons{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.lp-icons .item{ flex:1 1 150px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; }
.lp-icons .item svg{ width:40px; height:40px; color:var(--accent); display:inline-block; }
.lp-icons .item .t{ display:block; margin-top:6px; font-size:.9rem; font-weight:700; }
.lp-icons .item .d{ display:block; margin-top:2px; font-size:.8rem; color:var(--muted); }

/* ---- カード ---- */
.lp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.lp-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.lp-card h3{ font-size:.98rem; margin:0 0 6px; color:var(--accent-ink); }

/* ---- 見出しアイコン ---- */
.lp-ico{ width:1.05em; height:1.05em; vertical-align:-2px; margin-right:7px; color:var(--accent); }

/* ---- callout（チェックリスト等の囲み） ---- */
.lp-callout{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:18px 0; }
.lp-callout ul{ list-style:none; padding-left:0; margin:0; }
.lp-callout li{ padding-left:1.7em; position:relative; }
.lp-callout li::before{ content:"\2611"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* 吹き出し（1記事に1個まで／読者の本音を一言） */
.lp-bubble{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 16px; margin:14px 0 22px; font-size:.96rem; color:#444; }
.lp-bubble::after{ content:""; position:absolute; left:28px; bottom:-9px; width:16px; height:16px; background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }

/* ---- FAQ ---- */
.faq-q{ font-weight:700; margin:18px 0 4px; }
.faq-a{ margin:0 0 14px; color:#444; }

/* ---- CTA（出口1つ） ---- */
.cta-box{ margin:40px 0 10px; padding:24px 20px; background:var(--cta-soft); border:1px solid #f1cfa0; border-radius:14px; text-align:center; }
.cta-box .cta-lead{ margin:0 0 12px; font-weight:700; color:var(--accent-ink); }
.cta-microtop{ text-align:center; font-weight:700; color:var(--cta-ink); margin:0 0 8px; font-size:.95rem; letter-spacing:.02em; }
.cta-sub{ text-align:center; font-size:.85rem; color:var(--muted); margin:10px 0 0; }
.cta-sub span{ display:inline-block; margin:0 .4em; white-space:nowrap; }
.cta{ text-align:center; margin:6px 0 0; }
.cta a{ display:inline-block; background:var(--cta); color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem; padding:18px 30px; border-radius:10px; box-shadow:0 4px 0 var(--cta-ink); transition:transform .08s ease, box-shadow .12s ease, background .15s ease; }
.cta a:hover{ background:var(--cta-ink); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.cta a:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--cta-ink); }

/* 最終確認ボックス（CTA直前。判断を後押し） */
.lp-final-check{ margin:24px 0 8px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:var(--radius); }
.lp-final-check p{ margin:0 0 8px; }
.lp-final-check ul{ list-style:none; padding-left:0; margin:0; }
.lp-final-check li{ padding-left:1.7em; position:relative; margin:6px 0; }
.lp-final-check li::before{ content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* 選択肢の比較カード（通す/乗り換える/売却 など） */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0; }
.choice-card{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:14px; }
.choice-card h3{ font-size:1rem; margin:0 0 6px; color:var(--accent-ink); }
.choice-card p{ margin:0; font-size:.9rem; color:#444; }

/* チェックリスト強調版（CVに近い診断セクション用） */
.lp-callout.is-highlight{ border:1px solid var(--accent); background:var(--cta-soft); }

/* ---- プロモ開示note ---- */
.note{ margin-top:50px; padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }

/* ---- スマホ ---- */
@media (max-width:480px){
  body{ font-size:16px; }
  .lp-wrap{ padding:0 16px 64px; }
  h1,.offer-head{ font-size:1.25rem; }
}