@charset "UTF-8";
/* =============================================================
   apo-service 共通CSS（正本）
   DNA: digital-ai-hojokin.jp /assets/css/base.css からトークンを移植
        （docs/DESIGN-GUIDE.md §2「新サイトはデザインDNAをクローンする」）
   ルール: ページ内<style>禁止／インラインstyle禁止／絵文字禁止(Lucide SVG)
           カードのtop-border・left-borderアクセント禁止（均一1pxボーダー）
   ============================================================= */

:root {
  --accent-primary: #00abeb;
  --accent-primary-rgb: 0,171,235;
  --accent-secondary: #059669;
  --accent-warning: #d97706;
  --accent-danger: #dc2626;
  --accent-hover: #0090cc;

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-surface: #f1f5f9;
  --bg-hover: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-radius: 8px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);

  --font-sans: 'LINE Seed JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;

  --container: 1140px;
  --transition: .2s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-surface: #334155;
    --bg-hover: #475569;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--bg-primary);
}
img, svg { max-width: 100%; }
a { color: var(--accent-primary); }
a:hover { color: var(--accent-hover); }

/* ---------- レイアウト ---------- */
html { scroll-behavior: smooth; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section-alt { background: var(--bg-secondary); }
.section-title { font-size: 26px; line-height: 1.5; margin: 0 0 8px; letter-spacing: .01em; }
.section-lead { color: var(--text-secondary); margin: 0 0 32px; }
.text-center { text-align: center; }
.stack > * + * { margin-top: 12px; }

/* ---------- ヘッダー / フッター ---------- */
.site-header {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  position: sticky; top: 0; z-index: 20;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.site-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-primary); text-decoration: none; font-size: 17px; }
.site-brand__mark { color: var(--accent-primary); display: inline-flex; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--accent-primary); }
.site-footer { border-top: 1px solid var(--border-color); padding: 40px 0 28px; color: var(--text-muted); font-size: 13px; background: var(--bg-secondary); }
.site-footer p { margin: 0 0 4px; }
/* 🔴 列数を5で書いていたが実際は4列。コラム列に1frしか回らず、
   記事タイトルが26字で切れて読めなかった（2026-08-11）。
   ブランド説明とコラム見出しは長いので広く取る。 */
.footer-grid { display: grid; grid-template-columns: 1.9fr 1fr 1fr 2.1fr; gap: 32px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col--brand { max-width: 420px; }
.footer-brand { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.footer-head { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .04em;
  margin-bottom: 10px; text-transform: none; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 0 0 7px; line-height: 1.6; }
.footer-list a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-list a:hover { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.footer-list--plain li { color: var(--text-muted); }
.footer-note { font-size: 12px; color: var(--text-muted); }
.footer-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-color);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: baseline; }
.footer-bottom p { margin: 0; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-col--brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--border-radius); border: 1px solid var(--border-color);
  background: var(--bg-primary); color: var(--text-primary);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: var(--transition);
}
.btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-primary { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-inverse); }
.btn-danger { border-color: var(--accent-danger); color: var(--accent-danger); background: var(--bg-primary); }
.btn-danger:hover { background: var(--accent-danger); color: var(--text-inverse); }
.btn-quiet { border-color: var(--border-color); color: var(--text-secondary); background: transparent; }
.btn-sm { padding: 7px 13px; font-size: 14px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- カード（均一1pxボーダー・帯アクセント禁止） ---------- */
.card { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); padding: 20px; }
.card-flat { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); padding: 20px; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.card-title .icon { color: var(--accent-primary); }
.card-body { color: var(--text-secondary); font-size: 15px; }
.card-body p { margin: 0 0 8px; }
.card-body p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- アイコン ---------- */
.icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; }
.icon-lg { width: 28px; height: 28px; }
.icon-accent { color: var(--accent-primary); }
.icon-success { color: var(--accent-secondary); }
.icon-danger { color: var(--accent-danger); }
.icon-muted { color: var(--text-muted); }

/* ---------- バッジ / アラート ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--border-color); color: var(--text-secondary);
  background: var(--bg-primary); white-space: nowrap; }
.badge-success { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.badge-danger { color: var(--accent-danger); border-color: var(--accent-danger); }
.badge-warning { color: var(--accent-warning); border-color: var(--accent-warning); }
.badge-primary { color: var(--accent-primary); border-color: var(--accent-primary); }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--border-radius);
  border: 1px solid var(--border-color); background: var(--bg-secondary); font-size: 15px; margin-bottom: 20px; }
.alert-success { border-color: var(--accent-secondary); color: var(--accent-secondary); }
.alert-danger { border-color: var(--accent-danger); color: var(--accent-danger); }
.alert-info { border-color: var(--accent-primary); color: var(--text-secondary); }

/* ---------- 統計 ---------- */
.stat { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); padding: 16px; }
.stat__k { color: var(--text-muted); font-size: 13px; }
.stat__v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat__u { font-size: 13px; color: var(--text-muted); margin-left: 3px; font-weight: 400; }

/* ---------- テーブル ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.table thead th { color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--bg-secondary); }
.table tbody tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- フォーム ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; }
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--border-color); border-radius: var(--border-radius);
  background: var(--bg-primary); color: var(--text-primary);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.select { max-width: 320px; }
.fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 18px; margin: 0 0 22px; background: var(--bg-secondary); }
.fieldset__legend { font-size: 13px; color: var(--text-muted); padding: 0 6px; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-inline { display: inline-block; }

/* ---------- LP ---------- */
.hero { padding: 40px 0 34px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
/* 🔴 背景なしだとヒーローの背景(#F8FAFC)と同化して読めない。白地＋輪郭で浮かせる。
   アイコンは既定20pxで文字(13px)より大きく、上下の中心がずれて見えるので16pxに落とす。 */
.hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--accent-primary); margin-bottom: 14px;
  background: #fff; border: 1px solid rgba(0, 100, 255, .22); border-radius: 999px;
  padding: 7px 15px; line-height: 1; }
.hero__eyebrow .icon { width: 16px; height: 16px; }
.hero__eyebrow .icon svg { display: block; }
.hero__title { font-size: 38px; line-height: 1.4; margin: 0 0 18px; letter-spacing: .01em; }
.hero__title span { color: var(--accent-primary); }
.hero__lead { font-size: 17px; color: var(--text-secondary); margin: 0 0 26px; max-width: 40em; }
.hero__note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }

.promise { display: flex; gap: 12px; align-items: flex-start; }
.promise__body h3 { font-size: 16px; margin: 0 0 4px; }
.promise__body p { margin: 0; color: var(--text-secondary); font-size: 15px; }

.price-box { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; text-align: center; background: var(--bg-primary); }
.price-box__amount { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.price-box__amount small { font-size: 17px; font-weight: 600; color: var(--text-secondary); }
.price-box__unit { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.price-list { list-style: none; margin: 0; padding: 0; text-align: left; max-width: 30em; margin-inline: auto; }
.price-list li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border-color); font-size: 15px; }
.price-list li:last-child { border-bottom: 0; }

.flow { list-style: none; counter-reset: flow; margin: 0; padding: 0; }
.flow > li { counter-increment: flow; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.flow > li:last-child { border-bottom: 0; }
.flow__no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-color);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--accent-primary); }
.flow__no::before { content: counter(flow); }
.flow__body h3 { font-size: 16px; margin: 0 0 3px; }
.flow__body p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.flow__who { font-size: 12px; color: var(--text-muted); margin-left: 6px; }

/* 🔴 質問ごとに枠線で囲むと「カードの一覧」に見えて、読み物として読みにくい。
   枠は外し、区切り線だけの素直なリストにする（2026-08-12 齊木さん指摘）。 */
.faq { border-top: 1px solid var(--border-color); }
.faq details { border-bottom: 1px solid var(--border-color); }
.faq summary { cursor: pointer; padding: 16px 4px; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; gap: 6px; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-primary); }
.faq__q { color: var(--accent-primary); font-weight: 800; font-size: 16px; line-height: 1.5; flex: 0 0 auto; }
.faq__mark { color: var(--text-muted); font-weight: 800; font-size: 16px; line-height: 1.6; }
/* 開閉のしるし（右端の下向き矢印）。開いているときは上を向く */
.faq__chevron { margin-left: auto; flex: 0 0 auto; width: 10px; height: 10px; align-self: center;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.faq details[open] .faq__chevron { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent-primary); }
/* 🔴 flex にすると中の <p> が横並びの列になってしまう。
   A. は絶対配置で左に置き、本文は通常フローのまま縦に流す。 */
.faq__a { position: relative; padding: 0 4px 18px 26px; color: var(--text-secondary); font-size: 15px; }
.faq__mark { position: absolute; left: 4px; top: 0; }
.faq__a p:first-of-type { margin-top: 0; }
.faq__a p { margin: 0 0 8px; }
.faq__a p:last-child { margin-bottom: 0; }

.cta { padding: 52px 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
.cta__title { font-size: 24px; margin: 0 0 10px; }
.cta__lead { color: var(--text-secondary); margin: 0 0 22px; }

.honest { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); padding: 20px; }
.honest ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.honest li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; color: var(--text-secondary); font-size: 15px; }

/* ---------- 説明書ページ ---------- */
.guide-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; }
.guide-toc { position: sticky; top: 126px; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; background: var(--bg-secondary); }
.guide-toc h2 { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; font-weight: 600; }
.guide-toc ol { margin: 0; padding-left: 1.2em; font-size: 14px; }
.guide-toc li { margin-bottom: 6px; }
.guide-toc a { color: var(--text-secondary); text-decoration: none; }
.guide-toc a:hover { color: var(--accent-primary); }
.guide-body h2 { font-size: 21px; margin: 44px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); scroll-margin-top: 82px; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { font-size: 16px; margin: 24px 0 6px; }
.guide-body p { color: var(--text-secondary); margin: 0 0 12px; }
.guide-body ul, .guide-body ol { color: var(--text-secondary); margin: 0 0 12px; padding-left: 1.4em; }
.guide-body li { margin-bottom: 5px; }
.kbd { font-family: var(--font-mono); font-size: 13px; background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 1px 6px; color: var(--text-primary); }

/* ---------- 予約ページ ----------
   ファーストビューに枠まで収める。日付は横並びタブ、時間はその日の分だけ表示。
   タブ切替はCSSのみ（JS不使用）: ラジオ + display:contents + order で
   「タブの行」と「時間の面」を視覚的に分ける。                                   */
.booked { border: 1px solid var(--accent-secondary); border-radius: var(--radius-md); background: var(--bg-secondary); padding: 16px 18px; margin-bottom: 18px; }
.booked__label { color: var(--text-muted); font-size: 13px; }
.booked__when { font-size: 20px; font-weight: 700; margin: 2px 0 6px; }
.booked__meta { color: var(--text-secondary); font-size: 14px; margin: 0 0 3px; }

.picker { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dayblock { display: contents; }
.dayblock__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dayblock__tab {
  order: 1; cursor: pointer; user-select: none;
  padding: 7px 13px; border: 1px solid var(--border-color); border-radius: var(--border-radius);
  background: var(--bg-primary); color: var(--text-secondary);
  font-size: 14px; line-height: 1.3; text-align: center; white-space: nowrap; transition: var(--transition);
}
.dayblock__tab:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.dayblock__tab span { display: block; font-size: 11px; color: var(--text-muted); }
.dayblock__radio:checked + .dayblock__tab {
  border-color: var(--accent-primary); background: var(--accent-primary); color: var(--text-inverse); font-weight: 600;
}
.dayblock__radio:checked + .dayblock__tab span { color: var(--text-inverse); }
.dayblock__radio:focus-visible + .dayblock__tab { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.dayblock__times { order: 2; width: 100%; display: none; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.dayblock__radio:checked ~ .dayblock__times { display: flex; }
.dayblock__times .btn { font-variant-numeric: tabular-nums; min-width: 74px; }

.slot-note { color: var(--text-muted); font-size: 14px; }
.optional { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); }
.optional > summary { cursor: pointer; padding: 11px 16px; font-size: 14px; color: var(--text-secondary);
  list-style: none; display: flex; gap: 7px; align-items: center; }
.optional > summary::-webkit-details-marker { display: none; }
.optional > summary:hover { color: var(--accent-primary); }
.optional__body { padding: 0 16px 14px; }
.page-compact { padding: 24px 0 48px; }
.page-compact .page-title { font-size: 21px; margin-bottom: 3px; }
.page-compact .page-lead { margin-bottom: 16px; font-size: 15px; }
.page-compact .section-title { font-size: 16px; margin: 0 0 10px; }

/* ---------- オウンドメディア（記事） ----------
   AIOの核=結論ボックス。h1直後に必ず置き、AIが引用しやすい形で答えを先に言い切る。
   ※DESIGN-GUIDE §1-8「カードの左帯/上帯アクセント禁止」に抵触しないよう、
     結論ボックスは帯ではなく淡色背景＋均一1pxボーダーで区別する。                      */
.article-summary-box {
  background: rgba(var(--accent-primary-rgb), .08);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 0 0 28px;
}
.article-summary-box__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--accent-primary); margin-bottom: 6px;
}
.article-summary-box__label .icon { width: 16px; height: 16px; }
.article-summary-box__text { margin: 0; font-size: 15px; line-height: 1.9; color: var(--text-primary); }

.article-head { margin-bottom: 8px; }
.article-title { font-size: 30px; line-height: 1.45; margin: 0 0 10px; letter-spacing: .01em; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  color: var(--text-muted); font-size: 13px; margin: 0 0 24px; }
.article-body { font-size: 16px; line-height: 2; }
.article-body h2 { font-size: 22px; margin: 44px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color); scroll-margin-top: 82px; line-height: 1.5; }
.article-body h3 { font-size: 17px; margin: 30px 0 8px; }
.article-body p { margin: 0 0 16px; color: var(--text-secondary); }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 1.5em; color: var(--text-secondary); }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text-primary); }
.article-body .table-wrap { margin: 0 0 22px; }
.article-toc { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-secondary); padding: 16px 20px; margin: 0 0 32px; }
.article-toc__title { font-size: 13px; color: var(--text-muted); font-weight: 600; margin: 0 0 8px; }
.article-toc ol { margin: 0; padding-left: 1.3em; font-size: 15px; }
.article-toc li { margin-bottom: 6px; }
.article-toc a { color: var(--text-secondary); text-decoration: none; }
.article-toc a:hover { color: var(--accent-primary); }
.article-faq { margin-top: 44px; }
.article-sources { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border-color);
  font-size: 14px; color: var(--text-muted); }
.article-sources ul { margin: 8px 0 0; padding-left: 1.3em; }
.article-cta { border: 1px solid var(--accent-primary); border-radius: var(--radius-lg);
  padding: 26px; margin-top: 44px; background: var(--bg-secondary); }
.article-cta h2 { font-size: 20px; margin: 0 0 8px; border: 0; padding: 0; }
.article-cta p { color: var(--text-secondary); margin: 0 0 16px; }

.post-list { display: grid; gap: 14px; }
.post-card { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 18px 20px; background: var(--bg-primary); transition: var(--transition); }
.post-card:hover { border-color: var(--accent-primary); }
.post-card__cat { font-size: 12px; color: var(--accent-primary); font-weight: 600; }
.post-card__title { font-size: 17px; margin: 4px 0 6px; line-height: 1.6; }
.post-card__title a { color: var(--text-primary); text-decoration: none; }
.post-card__title a:hover { color: var(--accent-primary); }
.post-card__desc { color: var(--text-secondary); font-size: 14px; margin: 0 0 8px; }
.post-card__date { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.breadcrumb { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; display: flex;
  flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-primary); }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--text-muted); }

@media (max-width: 640px) {
  .article-title { font-size: 23px; }
  .article-body { font-size: 15px; }
  .article-body h2 { font-size: 19px; }
}

/* ---------- 汎用テキスト ---------- */
/* 文面プレビュー（デモ画面で送信文をそのまま見せる） */
.pre-wrap { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 13px;
  line-height: 1.75; color: var(--text-secondary); }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.small { font-size: 14px; }
.mono { font-family: var(--font-mono); word-break: break-all; }
.mt-lg { margin-top: 34px; }
.mb-lg { margin-bottom: 34px; }
.page { padding: 40px 0 72px; }
.page-title { font-size: 24px; margin: 0 0 6px; }
.page-lead { color: var(--text-secondary); margin: 0 0 28px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; }
}
@media (max-width: 640px) {
  .hero { padding: 44px 0 38px; }
  .hero__title { font-size: 27px; }
  .section { padding: 40px 0; }
  .section-title { font-size: 21px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 13px; }
  .price-box__amount { font-size: 34px; }
}

/* ==========================================================================
   LP 2026-08-11 改稿分
   solarlist.jp（自社サイト）の情報構造に寄せる:
   ①ヒーローは「入力→出力」を一文で言い切り、実画面を横に置く
   ②これまで／このサービス の2カラム比較
   ③4ステップ
   デザインDNA（色・角丸・影・余白）は既存トークンのまま。
   ========================================================================== */

/* --- ヒーロー: 文言 + 実画面の2カラム --- */
.hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 1fr; gap: 44px; } }

/* --- 画面キャプチャの額縁 --- */
.shot { margin: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-primary); box-shadow: var(--shadow-md); overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; }
.shot__cap { font-size: 12px; color: var(--text-muted); padding: 8px 12px;
  border-top: 1px solid var(--border-color); background: var(--bg-secondary); }

/* --- これまで／このサービス --- */
.ba { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 820px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba__col { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 22px 24px; background: var(--bg-primary); }
.ba__col--after { border-color: rgba(var(--accent-primary-rgb), .38);
  background: rgba(var(--accent-primary-rgb), .04); }
.ba__head { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--text-secondary); }
.ba__col--after .ba__head { color: var(--accent-primary); }
.ba ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ba li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.75; }

/* --- 4ステップ --- */
.steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps > li { counter-increment: step; list-style: none;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 20px; background: var(--bg-primary); }
.steps h3 { font-size: 15px; margin: 0 0 6px; display: flex; gap: 9px; align-items: center; }
.steps h3::before { content: counter(step); flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-primary); color: var(--text-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; }
.steps p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.75; }
.steps__who { display: inline-block; font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* --- 数字を並べる（実績・目安） --- */
.figs { display: grid; gap: 16px; }
@media (min-width: 700px) { .figs { grid-template-columns: repeat(3, 1fr); } }
.figs > div { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 20px; background: var(--bg-primary); }
.figs dt { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.figs dd { margin: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.figs .figs__note { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-weight: 400; }

/* 画像とテキストを並べるときに上端を揃える（高さが違うと下が間延びする） */
.grid--top { align-items: start; }

/* ページ見出し。
   🔴 page-compact は container-narrow 前提で作ってあり、下の section(container)と
      左端が揃わず段差になる。下がcontainerのページはこちらを使う。 */
.page-head { padding: 46px 0 6px; }
.page-head .page-title { font-size: 30px; line-height: 1.4; margin: 0 0 10px; }
.page-head .page-lead { font-size: 17px; margin: 0; max-width: 44em; }

/* 🔴 セクション見出しは全体で中央ぞろえにしたが、法律文書だけは左寄せに戻す。
   条文の見出しが中央にあると本文との関係が読めない（2026-08-13 齊木さん指摘）。 */
.legal-doc .section-title, .legal-doc .section-lead { text-align: left; }
/* 表は行の罫線だけ残し、外枠では囲まない */
.legal-doc .table-wrap { border: 0; border-radius: 0; }

/* ---------- 法律文書（利用規約・プライバシー・特商法） ----------
   🔴 条文をカードで1つずつ囲むと、13枚の箱が縦に積み上がって読めなくなる。
      法律文書は「見出し＋本文」の素の組版が正しい（2026-08-11 作り直し）。 */
.legal-doc .section-title { font-size: 17px; margin: 34px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.legal-doc .section-title:first-of-type { margin-top: 8px; }
.legal-block { margin: 0 0 18px; color: var(--text-secondary); font-size: 15px; line-height: 1.95; }
.legal-block p { margin: 0 0 10px; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block ol, .legal-block ul { margin: 8px 0 10px; padding-left: 1.4em; }
.legal-block li { margin-bottom: 6px; }
.legal-block .table-wrap { margin: 4px 0 8px; }
.legal-doc .page-title { margin-bottom: 4px; }

/* ---------- フッター下部（規約リンクと著作権を1行に） ---------- */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
/* 🔴 footer-list a と同じ扱いにする。text-decoration を書かないと
   ブラウザ既定の下線が出て、他のフッターリンクと見た目が揃わない。 */
.footer-legal a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.footer-legal a:hover { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.footer-copy { margin: 0; margin-left: auto; }
@media (max-width: 640px) { .footer-copy { margin-left: 0; } }

/* ── ブランド(ロゴ画像) ───────────────────────────────
   2026-08-12 サイのキャラロゴ導入。ヘッダーはテキスト併記をやめてロゴ画像1枚に
   （ロゴ内に「アポカク」の文字が入っているため二重表記になる）。 */
/* ── ブランド(マーク + キャッチ + ロゴ文字) ──────────────
   digital-ai-hojokin.jp と同じ形。左に大きめのマーク、右に上下2段で
   「アポ獲得代行なら」＋ロゴ文字を置く。
   🔴 マークと文字を1枚の画像にすると、どちらかを大きくできない。必ず別画像で持つ。 */
.site-brand { flex-direction: row; align-items: center; gap: 12px; }
.site-brand__mark { display: block; width: 56px; height: 56px; }
.site-brand__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.site-brand__catch { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .1em; line-height: 1; }
.site-brand__word { display: block; height: 28px; width: auto; }
@media (max-width: 640px) {
  .site-brand__mark { width: 50px; height: 50px; }
  .site-brand__catch { font-size: 11px; }
  .site-brand__word { height: 24px; }
}

/* ── サブヘッダー(2段目のナビ) ───────────────────────── */
.site-subnav { border-top: 1px solid var(--border-color); background: var(--bg-primary); }
/* 🔴 padding は左右とも container と同じ12pxだが、Lucide アイコンは 24x24 の viewBox の
   内側に約2pxの余白を持つ。そのぶん1つ目のアイコンが右にずれて見えるので、左だけ詰めて
   ロゴの左端と視覚的に揃える。 */
.site-subnav__inner { display: flex; align-items: center; gap: 22px; height: 40px; overflow-x: auto; scrollbar-width: none; padding-left: 10px; }
.site-subnav__inner::-webkit-scrollbar { display: none; }
.site-subnav a {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1;
  color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600;
}
.site-subnav a:hover { color: var(--accent-primary); }
/* 今読んでいるセクションを示す。高さが変わると2段目がガタつくので、下線は引かず色と太さだけ変える */
.site-subnav a.is-current { color: var(--accent-primary); font-weight: 700; }
/* 🔴 .icon は既定で 20x20 の箱。中の svg だけ小さくすると箱に余白が残り、
   文字との縦の中心がずれる。箱ごと svg と同じ寸法にすること。 */
.site-subnav .icon { width: 16px; height: 16px; align-items: center; justify-content: center; }
.site-subnav .icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 820px) {
  /* スマホでは横スクロール。端で切れていることが分かるよう左右に余白を残す */
  .site-subnav__inner { gap: 16px; height: 38px; padding-right: 16px; padding-left: 6px; }
  .site-subnav a { font-size: 12.5px; }
}

/* ヘッダーは要素が多いので左右の余白を本文より詰める(2026-08-12) */
.site-header .container { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px) { .site-header .container { padding-left: 8px; padding-right: 8px; } }

/* ── ヘッダーの2行キャッチ(麦の穂で囲む・macclaw.jp と同じ形) ── */
.site-catch { display: flex; align-items: center; gap: 7px; }
.site-catch__wheat { width: 22px; height: 46px; flex-shrink: 0; object-fit: contain; transform: scaleX(-1); }
.site-catch__wheat--flip { transform: scaleX(1); }
.site-catch__text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.site-catch__label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.site-catch__value { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em; }
/* 🔴 狭い画面では消していたが、スマホでこそ見せたい一文なので縮めて残す。
   ロゴ(約155px)とハンバーガー(48px)の残り幅に収まるサイズにしている。 */
@media (max-width: 1080px) {
  .site-catch { gap: 8px; }
  .site-catch__wheat { width: 20px; height: 42px; }
  .site-catch__label { font-size: 10px; letter-spacing: .02em; }
  .site-catch__value { font-size: 13px; }
}
/* 🔴 狭い画面でも麦の穂は残す(ここが効いている飾りなので消さない)。
   幅の計算: 390px端末なら 余白40 + ロゴ155 + ハンバーガー48 = 243、残り147px。
   麦10x2 + gap2x2 + 文字86 = 110px で収まる。 */
@media (max-width: 420px) {
  .site-catch { gap: 7px; }
  .site-catch__wheat { width: 17px; height: 38px; }
  .site-burger { padding-top: 4px; }   /* 草38px - 中身34px */
  .site-catch__label { font-size: 8.5px; }
  .site-catch__value { font-size: 11px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-brand { gap: 8px; }
  .site-brand__mark { width: 42px; height: 42px; }
  .site-brand__word { height: 20px; }
  .site-catch__label { display: none; }
  .site-catch__value { font-size: 11.5px; }
  .site-catch__wheat { width: 15px; height: 34px; }
  .site-catch { gap: 6px; }
  .site-burger { padding-top: 0; }     /* 草34px = 中身34px */
}
/* iPhone SE(320px)級はどう詰めても入らないので、ここだけ麦を落とす */
@media (max-width: 340px) {
  .site-catch__wheat { display: none; }
}

/* ヘッダー右のメニューとCTA。CTAの高さはロゴセット(56px)に合わせる */
.site-header__menu { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.site-header__menu a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-header__menu a:hover { color: var(--accent-primary); }
@media (max-width: 1180px) { .site-header__menu { display: none; } }

.site-header__cta { margin-left: auto; }
.site-header__cta .btn { height: 56px; padding: 0 22px; }
@media (max-width: 820px) { .site-header__cta { display: none; } }
@media (max-width: 1180px) { .site-header__cta { margin-left: auto; } }

/* 🔴 PCではナビをサブヘッダーに集約する。1段目にも同じリンクを出すと二重に見える。
   .site-nav はスマホのハンバーガー用としてだけ残す。 */
@media (min-width: 821px) { .site-nav { display: none; } }
/* フッターもヘッダーと同じ組み（キャッチ＋マーク＋ロゴ文字） */
.footer-brandset { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brandset__mark { width: 46px; height: 46px; display: block; }
.footer-brandset__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.footer-brandset__catch { font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .1em; line-height: 1; }
.footer-brandset__word { display: block; height: 24px; width: auto; }

/* ── 挿絵 ────────────────────────────────────────────
   透過PNG。背景色の上に直接置くので、下に余白だけ持たせる。 */
.illust { display: block; height: auto; }
.illust--hero { width: 100%; max-width: 340px; margin-left: auto; }
.illust--section { width: 100%; max-width: 260px; margin: 0 auto 18px; }
.illust--step { width: 84px; height: auto; margin-bottom: 10px; }
.illust--cta { max-width: 220px; max-height: 150px; margin: 0 auto 16px; }

/* 見出しの上に小さく添える。
   🔴 縦長・横長が混ざるので max-width だけだと縦長カットが巨大に見える。
      高さを揃えることで、どの挿絵も同じ存在感になる。 */
.section-illust { display: flex; justify-content: flex-start; margin-bottom: 2px; }
.section-illust img { width: auto; height: auto; max-width: 150px; max-height: 108px; }
@media (max-width: 640px) { .section-illust img { max-height: 88px; } }
/* セクションによっては中央に置きたい(CTAなど) */
.section-illust--center { justify-content: center; }

/* ヒーローを2カラムにする(挿絵は狭い画面では見出しの下へ) */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.35fr 1fr; gap: 32px; } }
@media (max-width: 899px) { .illust--hero { max-width: 240px; margin: 0 auto; } }

/* ヒーロー右のキャラクター
   🔴 左のテキストより背が高いとヒーロー全体が伸びる。かといって max-height:100% は
      「行の高さ→画像の高さ→行の高さ」で循環して潰れる（実際に消えた）。
      PCでは絶対配置にして行の高さの計算から外し、左カラムぶんの高さに収める。 */
.hero__figure { display: flex; justify-content: center; align-items: center; }
.hero__figure img { width: auto; max-width: 100%; height: auto; }
@media (min-width: 900px) {
  .hero__grid { align-items: stretch; }
  .hero__figure { position: relative; }
  .hero__figure img {
    position: absolute; inset: 0; margin: auto;
    max-width: 100%; max-height: 100%; width: auto; height: auto;
  }
}
@media (max-width: 899px) { .hero__figure img { max-width: 250px; } }

/* ── スマホのハンバーガーメニュー ─────────────────────
   solar-list(css/lp.css)と同じ挙動・見た目に揃えている。
   全画面で開き、背面はスクロールさせない。 */
/* 🔴 ハンバーガーは「線＋MENU文字」で高さ34px。上に余白を足して重心を下げている。
   余白の量は「草(.site-catch__wheat)の高さ - 34px」にすること。両方とも縦中央ぞろえなので、
   外形の高さを草と同じにすれば MENU文字の下端と草の下端が必ず一致する。
   画面幅ごとに草の高さを変えているので、ここも同じブレークポイントで追随させる。 */
.site-burger {
  display: none; width: 48px; padding: 8px 0 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 210;
}
.site-burger__bars { display: flex; flex-direction: column; gap: 5px; }
.site-burger__bars span {
  display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.site-burger__label { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--text-primary); line-height: 1; }
.site-burger[aria-expanded="true"] .site-burger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger[aria-expanded="true"] .site-burger__bars span:nth-child(2) { opacity: 0; }
.site-burger[aria-expanded="true"] .site-burger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .site-burger { display: flex; }
  .site-header__inner { position: relative; }
  /* 開いたメニューはヘッダー下から画面下まで覆う（ハンバーガーは常に押せる位置に残す） */
  .site-nav {
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-primary);
    padding: 12px 24px 40px;
    overflow-y: auto;
    display: none;
  }
  .site-nav--open { display: flex; }
  .site-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 4px; font-size: 19px; font-weight: 700; color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
  }
  .site-nav a::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid var(--accent-primary); border-bottom: 2px solid var(--accent-primary);
    transform: rotate(-45deg);
  }
  body.is-nav-locked { overflow: hidden; }
}

/* ── セクションの見出し・説明文は中央ぞろえ（2026-08-12 齊木さん指示） ── */
.section-title, .section-lead { text-align: center; }
.section-illust { justify-content: center; }

/* 🔴 ヘッダーが sticky で2段(=約132px)あるため、アンカーで飛ぶと見出しがヘッダーの下に隠れる。
   飛び先に余白を持たせる（2026-08-12 サブヘッダーをページ内目次にしたときに必要になった）。 */
section[id], .cta[id] { scroll-margin-top: 122px; }
@media (max-width: 820px) { section[id], .cta[id] { scroll-margin-top: 116px; } }

/* ── スマホ用の固定CTA（右下） ─────────────────────────
   押すとお問い合わせフォームまでスクロールする。PCではヘッダー右にボタンがあるので出さない。 */
.floating-cta {
  display: none;
  position: fixed; right: 14px; bottom: 16px; z-index: 80;
  align-items: center; gap: 6px;
  padding: 13px 20px; border-radius: 999px;
  background: var(--accent-primary); color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.floating-cta .icon { width: 18px; height: 18px; }
.floating-cta .icon svg { width: 100%; height: 100%; }
@media (max-width: 820px) { .floating-cta { display: inline-flex; } }
/* メニューを開いている間は隠す（全画面メニューの上に浮くとうるさい） */
body.is-nav-locked .floating-cta { display: none; }

/* ── ヒーロー先頭のブランド＋売り文句（スマホ専用） ──────────
   2026-08-12 齊木さん指示。スマホでは
   「空アポなし保証」バッジを消し、代わりにロゴセットと売り文句を中央に置く。
   PCはヘッダーに同じロゴが出ているので表示しない。 */
.hero__brand, .hero__pitch { display: none; }

@media (max-width: 820px) {
  /* スマホのヒーローは全部中央ぞろえ */
  .hero__grid > div { text-align: center; }
  .hero__title, .hero__lead, .hero__note { text-align: center; }
  .hero .btn-group { justify-content: center; }

  .hero__eyebrow { display: none; }          /* 空アポなし保証バッジは出さない */

  .hero__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; }
  .hero__brand-mark { width: 64px; height: 64px; display: block; }
  .hero__brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero__brand-catch { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .1em; line-height: 1; }
  .hero__brand-word { display: block; height: 30px; width: auto; }

  .hero__pitch { display: block; margin: 0 0 18px; line-height: 1.5; }
  .hero__pitch-line { display: block; font-size: 19px; font-weight: 800; color: var(--text-primary); }
  .hero__pitch-plus { display: block; font-size: 15px; font-weight: 800; color: var(--accent-primary); margin: 2px 0; }
  .hero__pitch-up { display: block; font-size: 21px; font-weight: 800; color: var(--accent-primary); margin-top: 4px; }
}

/* ── 料金カード（共通パーツ apo_price_card） ─────────────────
   横幅を絞って、カードの中で申し込みまで完結させる。 */
.price-box { max-width: 520px; margin-inline: auto; }
.price-box__foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.btn-block { display: flex; width: 100%; }
.price-box__note { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }

/* ── 締めのCTAカード（共通パーツ apo_cta_card） ───────────────
   全幅の帯ではなくカードにして、フッターの直前に置く。 */
.cta-band { padding: 48px 0 56px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
.cta-card {
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 34px 30px 30px; text-align: center;
}
.cta-card__illust { width: 100%; max-width: 220px; height: auto; margin: 0 auto 14px; display: block; }
.cta-card__title { font-size: 23px; margin: 0 0 10px; }
.cta-card__lead { color: var(--text-secondary); margin: 0 auto 22px; max-width: 34em; }
.cta-card__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cta-card { padding: 26px 18px 22px; }
  .cta-card__actions .btn { width: 100%; }
}

/* トップの申し込みフォーム側の見出し・説明文も中央に（左寄せのままだった） */
.cta__title, .cta__lead { text-align: center; }
.cta__lead { margin-inline: auto; max-width: 40em; }

/* ── プレスリリース一覧（カード全体がリンク） ─────────────── */
.press-list { display: grid; gap: 16px; }
.press-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center;
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 14px; text-decoration: none; color: inherit; transition: var(--transition);
}
.press-card:hover { border-color: var(--accent-primary); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.press-card__thumb { display: block; border-radius: var(--radius-md); overflow: hidden; background: #fff; border: 1px solid var(--border-color); }
.press-card__thumb img { display: block; width: 100%; height: auto; }
.press-card__body { display: flex; flex-direction: column; gap: 6px; }
.press-card__meta { font-size: 13px; color: var(--text-muted); }
.press-card__title { font-size: 17px; font-weight: 700; line-height: 1.6; }
.press-card:hover .press-card__title { color: var(--accent-primary); }
.press-card__lead { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
@media (max-width: 640px) { .press-card { grid-template-columns: 1fr; } }

/* ── 報道用素材のダウンロード ───────────────────────────── */
.press-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.press-kit__item {
  display: block; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 10px; text-decoration: none; color: var(--text-primary); background: var(--bg-primary);
  font-size: 13px; font-weight: 600; text-align: center; transition: var(--transition);
}
.press-kit__item:hover { border-color: var(--accent-primary); }
.press-kit__item img { display: block; width: 100%; height: 84px; object-fit: contain; margin-bottom: 8px; }
.press-kit__item small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* ── コラム一覧（カードのグリッド） ─────────────────────────
   縦積みのリストだと読み飛ばされるため、サムネイル付きのカードにする。
   カード全体がリンク。 */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.article-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.article-card:hover { border-color: var(--accent-primary); box-shadow: 0 8px 20px rgba(0,0,0,.07); transform: translateY(-2px); }
.article-card__thumb { position: relative; display: block; background: var(--bg-secondary); aspect-ratio: 16 / 10; overflow: hidden; }
.article-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.article-card__cat {
  position: absolute; left: 10px; top: 10px;
  background: var(--accent-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.article-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1 1 auto; }
.article-card__title { font-size: 16px; font-weight: 700; line-height: 1.6; }
.article-card:hover .article-card__title { color: var(--accent-primary); }
.article-card__desc {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card__date { margin-top: auto; font-size: 12px; color: var(--text-muted); }

/* ── ボタン（2026-08-13 見直し） ─────────────────────────────
   ・矢印は横棒なしの「>」だけ。小さめに、文字との間隔も詰める
   ・角丸を強めて、キャラクターのまるいテイストに合わせる */
.icon-btn { width: 14px; height: 14px; }
.icon-btn svg { stroke-width: 2.6; }
.btn { border-radius: 999px; gap: 6px; }
.btn-lg { padding: 15px 30px; border-radius: 999px; }
.btn-sm { padding: 8px 16px; border-radius: 999px; }

/* ヘッダーのCTAはロゴセットより低く、詰まって見えないように */
.site-header__cta .btn { height: 44px; padding: 0 20px; font-size: 14px; }

/* 「4点をまとめてダウンロード」など、行内に置くボタンの下余白 */
.legal-block .btn { margin: 2px 0 6px; }

/* ── 料金カード（初期費用0円・月額固定費0円を明示 / 縦を詰める） ──
   「料金」の見出しからカードまでが1画面に収まるよう、余白と行の高さを削っている。 */
.price-box { padding: 22px 24px 24px; }
.price-box__amount { font-size: 40px; }
.price-box__unit { margin-bottom: 12px; }
.price-box__zero { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.price-box__zero span {
  font-size: 13px; color: var(--accent-primary); background: #EAF3FF;
  border-radius: 999px; padding: 6px 14px; font-weight: 600;
}
.price-box__zero strong { font-weight: 700; }
.price-list li { padding: 5px 0; font-size: 14.5px; }
.price-box__foot { margin-top: 16px; padding-top: 16px; }
.price-box__note { margin-top: 8px; }

/* 見出しの区切り線と同じ幅で並べる（カードで囲まない） */
.plain-list { margin-top: 4px; }

.text-center { text-align: center; }

/* ── ページ見出しは中央ぞろえ（法律文書だけは左のまま） ──────────
   2026-08-13 齊木さん指示。実際の画面ページなど、h1・みなし見出し・説明文を中央に。 */
.page-title, .page-lead { text-align: center; }
.legal-doc .page-title, .legal-doc .page-lead { text-align: left; }
.page-head .page-title, .page-head .page-lead { text-align: center; }

/* 🔴 画面キャプチャ(.shot)の直後にカードや注意書きが来ると、枠同士が接して1つの塊に見える。
   キャプチャの下だけ余白を厚くする（2026-08-13 齊木さん指摘）。 */
.shot + .alert, .shot + .card, .shot + .grid, .shot + .plain-list { margin-top: 26px; }
.shot.mb-lg { margin-bottom: 26px; }

/* ── サービス資料（A4横スライドのプレビュー） ───────────────── */
.deck-dl { margin-top: 18px; text-align: center; }
.deck-slides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .deck-slides { grid-template-columns: 1fr; } }
.deck-slide { margin: 0; }
.deck-slide img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0,0,0,.06); background: #fff;
}
.deck-slide figcaption { font-size: 12px; color: var(--text-muted); text-align: center; padding-top: 8px; }

/* ── コラム一覧: 4列に。カテゴリ見出しの下も広げる ─────────── */
.article-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .article-grid { grid-template-columns: 1fr; } }
/* 🔴 カテゴリ見出しの直下が詰まって、前のグリッドとくっついて見える */
.page .section-title { margin-top: 44px; margin-bottom: 20px; }
.page .section-title:first-of-type { margin-top: 8px; }
/* サムネイルの下地は白（キャンバスが白なので、枠との段差を作らない） */
.article-card__thumb { background: #fff; }
.article-card__thumb img { padding: 0; object-fit: cover; }
.press-card__thumb { background: #fff; }

/* プレスの記事タイトルは行間を詰める */
.press-card__title { line-height: 1.45; }

/* ── 右下の追従CTA（全ページ・PCでも出す） ─────────────────── */
.floating-cta { display: inline-flex; right: 20px; bottom: 20px; }
.floating-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.floating-cta { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
@media (max-width: 820px) { .floating-cta { right: 14px; bottom: 16px; } }

/* ── 記事ページ ───────────────────────────────────────────── */
.article-hero { margin: 0 0 22px; }
.article-hero img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
/* 見出し自体に番号がある記事では、目次の自動採番を消す */
.article-toc--plain ol { list-style: none; padding-left: 0; }

/* ── フッター: コラム列の右の余白をなくし、ロゴ列を広げる ──── */
.footer-grid { grid-template-columns: 2.4fr 1fr 1fr 2.2fr; gap: 28px; }
.footer-grid > .footer-col:last-child { padding-right: 0; }

/* ── 画面キャプチャをブラウザ風のフレームに入れる ───────────
   実物の画面だと伝わるよう、上にウィンドウのバーを描く（2026-08-13 齊木さん指示）。
   画像側は加工せず、CSSだけで枠を作る。 */
.shot { border: 0; border-radius: 0; background: none; overflow: visible; }
.shot > img {
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.shot::before {
  content: "";
  display: block; height: 30px;
  background:
    radial-gradient(circle 4px at 16px 15px, #FF5F57 98%, transparent 100%),
    radial-gradient(circle 4px at 34px 15px, #FEBC2E 98%, transparent 100%),
    radial-gradient(circle 4px at 52px 15px, #28C840 98%, transparent 100%),
    linear-gradient(#F1F5F9, #F1F5F9);
  border: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.shot__cap { border: 0; padding: 10px 2px 0; text-align: center; }

/* ── ヘッダー右のボタン群 ─────────────────────────────────── */
.site-header__cta { display: flex; align-items: center; gap: 8px; }
/* 🔴 上の1行は前半（631行目付近）の「820px以下で隠す」を後勝ちで打ち消してしまう。
   狭い画面ではハンバーガーに任せるので、ここで隠し直す（2026-08-14 スマホで横あふれ）。 */
@media (max-width: 820px) { .site-header__cta { display: none; } }
.btn-ghost { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 8px 14px; }
.btn-ghost:hover { color: var(--accent-primary); border-color: var(--accent-primary); background: #fff; }
.btn-ghost .icon { width: 16px; height: 16px; }
@media (max-width: 1080px) { .btn-ghost { display: none; } }

/* ── 見出しの下の説明文も中央に（料金/実際の画面/お問い合わせ） ── */
.page-head .page-lead, .section-lead { text-align: center; }
.legal-doc .section-lead { text-align: left; }

/* 🔴 実際の画面ページは「見出し→説明→キャプチャ」が続くので、
   セクションの上下をゆったり取らないと詰まって見える（2026-08-13 齊木さん指摘）。 */
.screens-section { padding-top: 56px; padding-bottom: 56px; }
.screens-section .section-title { margin-bottom: 12px; }
.screens-section .section-lead { margin-bottom: 34px; }

/* ── フッター: 列の間を詰め、コラム列の右余白をなくす ─────── */
.footer-grid { grid-template-columns: 2.6fr 1fr 1.1fr 2.4fr; gap: 20px; }
@media (min-width: 901px) { .footer-grid > .footer-col:last-child { margin-right: -8px; } }

/* ── 法律文書の末尾にある連絡先ブロック（アイコンなしのカード） ── */
.legal-contact {
  margin: 34px 0 0; padding: 22px 24px;
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: 15px; line-height: 1.95;
}
.legal-contact__title { font-size: 16px; margin: 0 0 10px; color: var(--text-primary); }
.legal-contact p { margin: 0 0 8px; }
.legal-contact p:last-child { margin-bottom: 0; }

/* ── サービス資料のスライダー ──────────────────────────────
   1枚ずつめくる。全画面表示と印刷（全ページ）に対応。 */
.deck { max-width: 1000px; margin: 0 auto; }
.deck__stage { position: relative; background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 18px; }
.deck__slide { display: none; width: 100%; height: auto; border-radius: var(--radius-md);
  border: 1px solid var(--border-color); background: #fff; cursor: pointer; }
.deck__slide.is-current { display: block; }
.deck__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color);
  background: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.deck__nav::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto;
  border-right: 2px solid var(--text-primary); border-bottom: 2px solid var(--text-primary); }
.deck__nav--prev { left: -14px; }
.deck__nav--prev::before { transform: rotate(135deg) translate(-2px, -2px); }
.deck__nav--next { right: -14px; }
.deck__nav--next::before { transform: rotate(-45deg) translate(-2px, -2px); }
.deck__nav:hover { border-color: var(--accent-primary); }
.deck__bar { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; padding-top: 16px; }
.deck__count { font-size: 14px; color: var(--text-muted); }
.deck__count b { color: var(--text-primary); font-size: 16px; }
.deck__dots { display: flex; gap: 7px; }
.deck__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #CBD5E1; }
.deck__dot.is-current { background: var(--accent-primary); }
.deck.is-full { background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; }
.deck.is-full .deck__stage { max-width: min(96vw, 170vh); width: 100%; }
@media (max-width: 720px) { .deck__nav--prev { left: 2px; } .deck__nav--next { right: 2px; } }

/* 印刷時は全ページを縦に並べる（1枚だけ印刷されるのを防ぐ） */
@media print {
  .site-header, .site-subnav, .site-footer, .floating-cta, .deck__bar, .deck__nav, .cta-band, .page-head { display: none !important; }
  .deck__slide { display: block !important; page-break-after: always; border: 0; margin-bottom: 0; }
  .deck__stage { background: none; padding: 0; }
}

/* ── 右下の追従CTA（macclaw のfixed-ctaと同じ作り：イラスト＋文言＋ボタン） ── */
.float-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 214px;
  background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 14px 14px 16px; text-align: center;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.float-cta__close {
  position: absolute; right: 6px; top: 4px; width: 24px; height: 24px;
  border: 0; background: none; color: var(--text-muted); font-size: 19px; line-height: 1; cursor: pointer;
}
.float-cta__close:hover { color: var(--text-primary); }
.float-cta__illust { display: block; width: 118px; height: auto; margin: 0 auto 6px; }
.float-cta__lead { font-size: 14px; font-weight: 700; margin: 0 0 2px; line-height: 1.5; }
.float-cta__lead b { color: var(--accent-primary); }
.float-cta__note { font-size: 11px; color: var(--text-muted); margin: 0 0 10px; }
.float-cta__btn { width: 100%; }
.float-cta.is-hidden, .float-cta.is-dismissed { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
@media (max-width: 820px) {
  .float-cta { right: 12px; bottom: 12px; width: 176px; padding: 10px 10px 12px; }
  .float-cta__illust { width: 88px; }
  .float-cta__lead { font-size: 13px; }
}

/* ── 記事のカテゴリバッジ（一覧のバッジと同じ見た目・押せる） ── */
.article-cat {
  display: inline-flex; align-items: center;
  background: var(--accent-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; text-decoration: none;
}
.article-cat:hover { opacity: .85; }

/* ── ご利用ガイドの目次: 現在地をハイライト ─────────────── */
.guide-toc a.is-current { color: var(--accent-primary); font-weight: 700; }


/* ── 説明文の中央ぞろえを取りこぼさないための最終指定（2026-08-13） ──
   ページによって .page-head の中にあったり直下にあったりするので、まとめて指定する。
   法律文書だけは左寄せのまま。 */
.page-lead, .page-head .page-lead, .page .page-lead { text-align: center; }
.page-lead { margin-inline: auto; max-width: 46em; }
.legal-doc .page-lead { text-align: left; margin-inline: 0; max-width: none; }

/* コラム一覧の記事サムネは枠線を付けて、白背景でも輪郭が分かるようにする */
.article-card__thumb { border-bottom: 1px solid var(--border-color); }

/* 🔴 見込み客向け（予約・配信停止）の簡素フッター。
   販促3列を出さないので、4列前提のグリッドのままだとブランド列が細長く折り返す。 */
.site-footer--minimal .footer-grid { grid-template-columns: 1fr; }
/* 🔴 幅を絞っているのは列そのもの（.footer-col--brand の max-width:420px）。
   中の <p> に max-width を足しても効かない。 */
.site-footer--minimal .footer-col--brand { max-width: 640px; }