/* ============================================================
 * AucKit 共通の型 (base.css) — 2026-11-06
 *
 * 揃える 10 項目をここに集約する。ページ内 <style> と style= は原則使わない。
 *  1. 青は 1 色 (--blue) + 押下・ホバー用 1 段 (--blue-press)
 *  2. ボタン 3 種: .c-btn--primary / .c-btn--secondary / .c-link  高さ 44 / 角丸 8
 *  3. 見出し: 長い LP は h2 36。読みものは h1 36 / h2 26 / h3 19 / h4 16。太さ 700・黒 1 色
 *  4. 本文 3 サイズ: 16 / 14 / 12
 *  5. 角丸 4 / 8 / 16、影 2 段
 *  6. 幅 760 (読みもの) / 1080 (一般) / 1200 (ツール)
 *  7. CTA ボックスは .c-cta 1 部品
 *  8. ツールページの帯は .c-band--tool (1〜2 行)
 *  9. 絵文字なし。アイコンは .c-ico (線画 1 系統, stroke 1.75)
 * 10. CSS はこのファイルに集約
 *
 * 部品名は c- 接頭辞。旧 style.css の .btn / .sect と衝突させないため。
 * ============================================================ */

:root {
  /* 色 */
  --blue: #0067e0;
  --blue-press: #0052b4;
  --blue-tint: #e8f0fb;      /* 帯・薄い面 (2026-10-03 決定色) */
  --blue-line: #d3e1f6;
  --warm: #fbbf24;           /* 差し色 (暖色 1 色)。申し込みボタンと、ここぞの強調だけに使う。上の文字は --ink */
  --warm-press: #f59e0b;
  --ink: #191919;            /* 黒は 1 色 */
  --ink-2: #525252;          /* 補足文 */
  --ink-3: #6b6b6b;          /* 注記 */
  --line: #dde3ea;           /* 冷たい灰の罫線 */
  --surface: #ffffff;
  --surface-alt: #f5f9fe;    /* 区画の切り替え (ごく薄い青。ネクストエンジンの下層と同じ考え方) */
  --surface-dark: #0f172a;   /* 暗い区画 (濃紺) */
  --ok: #0a7c40;

  /* 文字 */
  --fs-body: 16px;
  --fs-sub: 14px;
  --fs-note: 12px;
  --fs-lp-h1: 40px;
  --fs-hero: 52px;
  --fs-lp-h2: 40px;          /* トップの区画見出し */
  --fs-h1: 40px;             /* 下層ページの帯の見出し */
  --fs-h2: 32px;             /* 下層ページの区画見出し */
  --fs-h3: 24px;             /* 区画の中の小見出し (左右交互の説明など) */
  --fs-lead: 18px;           /* 区画見出しの下の一言 */
  --fs-h4: 16px;
  --fw-head: 700;

  /* 余白 (8 の倍数) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* 角丸・影 */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;
  --sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --sh-2: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);

  /* 幅 */
  --w-read: 760px;
  --w-main: 1080px;
  --w-tool: 1200px;
  --gutter: 32px;
}
@media (max-width: 640px) {
  :root {
    --fs-lp-h1: 26px;
    --fs-hero: 25px;
    --fs-lp-h2: 26px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-lead: 16px;
    --gutter: 16px;
  }
}

/* ---------- 器 ---------- */
/* 型を使うページでは、グローバルナビとフッターも一般幅 (1080) にそろえる */
@media (min-width: 641px) {
  .nav .wrap, footer .wrap { max-width: calc(var(--w-main) + var(--gutter) * 2); padding-left: var(--gutter); padding-right: var(--gutter); }
}
.c-wrap { max-width: calc(var(--w-main) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.c-wrap--read { max-width: calc(var(--w-read) + var(--gutter) * 2); }
.c-wrap--tool { max-width: calc(var(--w-tool) + var(--gutter) * 2); }

/* ---------- 文字 ---------- */
.c-page { color: var(--ink); font-size: var(--fs-body); line-height: 1.8; }
.c-page :where(h1, h2, h3, h4) { color: var(--ink); font-weight: var(--fw-head); letter-spacing: 0; }
.c-sub { font-size: var(--fs-sub); color: var(--ink-2); line-height: 1.75; }
.c-note { font-size: var(--fs-note); color: var(--ink-3); line-height: 1.7; }
.c-nb { display: inline-block; }          /* 語の途中で折らない */
@media (min-width: 641px) { .c-nb-pc { display: inline-block; } }  /* PC だけ塊で折る (長い文。スマホでは普通に折り返す) */
.c-num { font-feature-settings: "tnum"; }

/* 読みもの */
.c-prose h1 { font-size: var(--fs-h1); line-height: 1.4; margin: 0 0 var(--sp-3); }
.c-prose h2 { font-size: var(--fs-h2); line-height: 1.5; margin: var(--sp-6) 0 var(--sp-2); }
.c-prose h3 { font-size: var(--fs-h3); line-height: 1.55; margin: var(--sp-5) 0 var(--sp-1); }
.c-prose h4 { font-size: var(--fs-h4); line-height: 1.6; margin: var(--sp-4) 0 var(--sp-1); }
.c-prose p { margin: 0 0 var(--sp-3); }

/* ---------- ボタン (3 種) ---------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--r-m); border: 1px solid transparent;
  font-size: var(--fs-sub); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.c-btn:hover { text-decoration: none; }
.c-btn:focus-visible, .c-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.c-btn--primary { background: var(--blue); color: #fff; }
.c-btn--primary:hover, .c-btn--primary:active { background: var(--blue-press); color: #fff; }
.c-btn--secondary { background: #fff; color: var(--ink); border-color: var(--line); }
/* 申し込み (Chromeに追加) だけは差し色。ページの中で一番目立つボタンにする */
.c-btn--cta { background: var(--warm); color: var(--ink); }
.c-btn--cta:hover, .c-btn--cta:active { background: var(--warm-press); color: var(--ink); }
.c-btn--lg { min-height: 56px; padding: 0 32px; font-size: var(--fs-body); border-radius: var(--r-m); }
.c-btn--secondary:hover { border-color: var(--blue); color: var(--blue); }
.c-btn .c-ico { width: 18px; height: 18px; }
.c-link { color: var(--blue); font-weight: 700; font-size: var(--fs-sub); text-decoration: none; }
.c-link:hover { color: var(--blue-press); text-decoration: underline; }
.c-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* 暗い区画の上 */
.c-dark .c-btn--primary { background: #fff; color: var(--ink); }
.c-dark .c-btn--primary:hover { background: var(--blue-tint); }

/* ---------- アイコン (線画 1 系統) ---------- */
.c-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- セクションの型 ----------
 * 小さな英字ラベル → h2 → 1〜2 行のリード → 中身
 * 背景は白と冷灰を交互 (.c-sect--alt)。カードは白。 */
.c-sect { padding: 120px 0; background: var(--surface); }
.c-sect--alt { background: var(--surface-alt); }
.c-sect--tint { background: var(--blue-tint); }
.c-dark { background: var(--surface-dark); color: #fff; }
.c-dark .c-sect__title, .c-dark h3 { color: #fff; }
.c-dark .c-sect__lead, .c-dark .c-sub { color: #b9c2d0; }
.c-sect__head { max-width: var(--w-read); margin: 0 auto var(--sp-6); text-align: center; }
.c-sect__head--left { margin-left: 0; text-align: left; }
.c-sect__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.c-sect__label {
  font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 var(--sp-1);
}
.c-dark .c-sect__label { color: #8fb8f2; }
.c-sect__title { font-size: var(--fs-h2); line-height: 1.45; margin: 0 0 var(--sp-2); }
.c-page--lp .c-sect__title { font-size: var(--fs-lp-h2); line-height: 1.4; }
.c-sect__lead { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-2); margin: 0; }
@media (max-width: 640px) {
  .c-sect { padding: var(--sp-6) 0; }
  .c-sect__head { margin-bottom: var(--sp-4); }
  .c-sect__head { text-align: left; }
}

/* ---------- カード ---------- */
.c-grid { display: grid; gap: var(--sp-3); }
.c-grid--2 { grid-template-columns: repeat(2, 1fr); }
.c-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .c-grid--3, .c-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .c-grid--2, .c-grid--3, .c-grid--4 { grid-template-columns: 1fr; } }
.c-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 40px var(--sp-4); box-shadow: var(--sh-1);
}
.c-card--center { text-align: center; }
.c-card--center .c-card__ico { margin-left: auto; margin-right: auto; }
.c-card h3 { font-size: var(--fs-h3); line-height: 1.5; margin: 0 0 var(--sp-1); }
.c-card p { font-size: var(--fs-sub); color: var(--ink-2); line-height: 1.8; margin: 0; }
.c-card__ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-tint); color: var(--blue);
  margin: 0 0 var(--sp-2);
}
.c-card__foot { margin-top: var(--sp-2); }
.c-dark .c-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.c-dark .c-card p { color: #b9c2d0; }

/* チェックリスト */
.c-checks { list-style: none; margin: 0; padding: 0; }
.c-checks li { position: relative; padding-left: 28px; margin: 0 0 10px; font-size: var(--fs-sub); line-height: 1.75; }
.c-checks li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

/* バッジ (訴求に必要な所だけ) */
.c-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-s);
  font-size: var(--fs-note); font-weight: 700; background: var(--blue-tint); color: var(--blue);
}
.c-badge--ink { background: var(--surface-alt); color: var(--ink-2); }

/* ---------- ヒーロー ----------
 * 青 1 色の地に白い文字。中央ぞろえ: ラベル → 見出し → リード → AI に相談 → 申し込み → 実画面。
 * 下端は白い曲線で切り、実画面は曲線をまたいで白地へはみ出させる。 */
.c-hero { --hero-tail: 230px; position: relative; background: var(--blue); color: #fff; padding: 88px 0 72px; overflow: hidden; text-align: center; }
.c-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hero-tail); background: #fff; }
.c-hero__curve { position: absolute; left: 0; right: 0; bottom: calc(var(--hero-tail) - 1px); width: 100%; height: 72px; display: block; fill: #fff; }
.c-hero > .c-wrap { position: relative; z-index: 1; }
.c-hero__body { max-width: 820px; margin: 0 auto; }
.c-hero__eyebrow { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 16px; background: rgba(255,255,255,.14); font-size: var(--fs-sub); font-weight: 700; color: #fff; margin: 0 0 var(--sp-3); }
.c-page .c-hero h1 { color: #fff; font-size: var(--fs-hero); line-height: 1.3; letter-spacing: .01em; margin: 0 0 var(--sp-3); }
.c-hero__mark { background: linear-gradient(transparent 68%, var(--warm) 68%, var(--warm) 92%, transparent 92%); padding: 0 .05em; }
.c-hero__lead { font-size: 17px; color: rgba(255,255,255,.88); margin: 0 0 var(--sp-3); }
.c-hero__fine { margin: var(--sp-2) 0 0; color: rgba(255,255,255,.8); }
.c-hero__fine a { color: #fff; }
.c-hero__for { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.c-hero__for li { position: relative; padding-left: 22px; font-size: var(--fs-sub); font-weight: 700; color: #fff; }
.c-hero__for li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--warm); border-bottom: 2px solid var(--warm); transform: rotate(-45deg); }
.c-hero .c-btn-row { justify-content: center; margin-top: var(--sp-4); }
.c-hero .c-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.c-hero .c-btn--secondary:hover { border-color: #fff; color: #fff; }
.c-hero__visual { position: relative; max-width: 842px; margin: var(--sp-6) auto 0; text-align: left; color: var(--ink); }
.c-shot { width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 30px 70px rgba(15,23,42,.28), 0 4px 12px rgba(15,23,42,.10); overflow: hidden; }
.c-shot__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f1f4f8; border-bottom: 1px solid var(--line); }
.c-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe3; }
.c-shot__url { margin-left: 12px; height: 20px; line-height: 20px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 11px; color: var(--ink-3); font-style: normal; }
.c-shot__view { height: 400px; overflow: hidden; }
.c-shot__view img { display: block; width: 840px; height: auto; }
.c-hero__float { position: absolute; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-2); overflow: hidden; }
.c-hero__float--l { left: -150px; bottom: 40px; width: 440px; }
.c-hero__float--r { right: -120px; top: 120px; width: 300px; }
.c-hero__float-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-note); font-weight: 700; color: var(--ink); }
.c-hero__float img { display: block; width: 100%; height: auto; }
.c-hero__float--r img { width: 270px; margin: 12px auto; }

/* AI に相談 (キービジュアルの入力欄) */
.c-ask { max-width: 680px; margin: 0 auto; text-align: left; }
.c-ask__label { display: table; margin: 0 auto 12px; padding: 6px 16px; border-radius: 999px; background: #fff; color: var(--blue); font-size: var(--fs-sub); font-weight: 700; position: relative; }
.c-ask__label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.c-ask__box { position: relative; background: #fff; border-radius: var(--r-l); box-shadow: 0 12px 32px rgba(15,23,42,.18); }
.c-ask textarea, .c-askdlg textarea {
  display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); padding: 18px 72px 18px 20px; min-height: 96px;
}
.c-ask textarea::placeholder, .c-askdlg textarea::placeholder { color: #8a94a3; }
.c-ask__box:focus-within { box-shadow: 0 0 0 3px var(--warm), 0 12px 32px rgba(15,23,42,.18); }
.c-ask__send { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.c-ask__send:hover { background: var(--blue-press); }
.c-ask__send .c-ico { width: 20px; height: 20px; }
.c-ask__examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.c-ask__examples button { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: var(--fs-note); cursor: pointer; }
.c-ask__examples button:hover { background: rgba(255,255,255,.2); }
.c-ask__note { margin: 10px 0 0; text-align: center; font-size: var(--fs-note); color: rgba(255,255,255,.75); }

/* 相談画面 (dialog) */
.c-askdlg { margin: auto; width: min(760px, 100vw - 32px); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: var(--r-l); box-shadow: 0 40px 100px rgba(15,23,42,.35); color: var(--ink); }
.c-askdlg::backdrop { background: rgba(15,23,42,.55); }
.c-askdlg__inner { display: flex; flex-direction: column; max-height: min(86vh, 900px); }
.c-askdlg__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--line); }
.c-askdlg__title { font-weight: 700; }
.c-askdlg__close { width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--r-m); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.c-askdlg__close:hover { background: var(--surface-alt); }
.c-askdlg__log { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.c-askmsg { max-width: 88%; font-size: var(--fs-sub); line-height: 1.85; }
.c-askmsg p { margin: 0 0 8px; } .c-askmsg p:last-child { margin: 0; }
.c-askmsg ul { margin: 0 0 8px; padding-left: 1.2em; }
.c-askmsg__link { white-space: nowrap; font-weight: 700; margin-left: 4px; }
.c-askmsg--user { align-self: flex-end; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 16px 16px 4px 16px; }
.c-askmsg--ai { align-self: flex-start; background: var(--surface-alt); padding: 14px 18px; border-radius: 16px 16px 16px 4px; }
.c-askmsg__wait::after { content: "…"; animation: c-askdots 1s steps(3) infinite; }
@keyframes c-askdots { 0% { content: "."; } 50% { content: ".."; } 100% { content: "..."; } }
.c-askdlg__form { position: relative; margin: 0 16px; border: 1px solid var(--line); border-radius: var(--r-l); }
.c-askdlg__form textarea { min-height: 64px; padding: 14px 64px 14px 16px; }
.c-askdlg__form .c-ask__send { right: 10px; bottom: 10px; width: 40px; height: 40px; }
.c-askdlg__note { margin: 8px 16px 14px; font-size: var(--fs-note); color: var(--ink-3); }

@media (max-width: 1180px) {
  .c-hero__float--l { left: -24px; bottom: -24px; }
  .c-hero__float--r { right: -24px; }
}
@media (max-width: 640px) {
  .c-hero { padding-top: var(--sp-5); text-align: left; --hero-tail: 150px; }
  .c-hero__curve { height: 36px; }
  .c-hero__body { text-align: left; }
  .c-hero__for { justify-content: flex-start; flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
  .c-ask__label { margin-left: 0; }
  .c-ask__label::after { left: 28px; }
  .c-ask__examples { justify-content: flex-start; }
  .c-ask__note { text-align: left; }
  .c-hero .c-btn-row { justify-content: flex-start; }
  .c-hero .c-btn-row .c-btn { width: 100%; }
  .c-hero__visual { margin-top: var(--sp-5); padding-bottom: 32px; }
  .c-shot__view { height: 280px; }
  .c-shot__view img { width: 640px; }
  .c-hero__float--l { left: 0; bottom: 0; width: 88%; }
  .c-hero__float--r { display: none; }
  .c-card, .c-tier__col, .c-steps li, .c-product { padding: var(--sp-3); }
  .c-askdlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .c-askdlg__inner { max-height: 100dvh; height: 100dvh; }
}

/* 数字の帯 */
.c-stats { background: #fff; border-bottom: 1px solid var(--line); }
.c-stats__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.c-stats__item { padding: var(--sp-4) var(--sp-3); border-left: 1px solid var(--line); }
.c-stats__item:first-child { border-left: 0; padding-left: 0; }
.c-stats__num { display: block; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--ink); font-feature-settings: "tnum"; }
.c-stats__num small { font-size: var(--fs-sub); font-weight: 700; margin-left: 2px; }
.c-stats__label { display: block; font-size: var(--fs-note); color: var(--ink-3); margin-top: 4px; }
@media (max-width: 640px) {
  .c-stats__list { grid-template-columns: repeat(2, 1fr); }
  .c-stats__item { padding: var(--sp-3) var(--sp-2); }
  .c-stats__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .c-stats__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .c-stats__num { font-size: 26px; }
}

/* ページ内ナビ (長い LP 用。グローバルナビの下に残る) */
.c-pagenav { position: sticky; top: var(--pagenav-top, 61px); z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.c-pagenav ol { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.c-pagenav ol::-webkit-scrollbar { display: none; }
.c-pagenav a { display: block; padding: 14px 0; font-size: var(--fs-sub); color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; }
.c-pagenav a:hover, .c-pagenav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--blue); }
@media (max-width: 640px) { .c-pagenav ol { gap: var(--sp-3); } }

/* ---------- 円の中の数字 (.c-dot) ----------
 * 円に数字を入れるときは必ずこの部品を使う。grid / flex の中央寄せだけでは、
 * 日本語フォントの上下の余白が非対称なため数字が 1〜1.5px 上にずれる (2026-11-06 計測)。
 *  - 数字は欧文フォント (Arial / Helvetica) で描く
 *  - text-box で字面を「数字の高さ (cap) 〜 ベースライン」に切り詰め、余白を上下に均等に振る
 *  - text-box 非対応のブラウザでも、line-height = 円の高さ + 欧文フォントでほぼ中央になる
 * 確認は scripts の dots 計測 (画素で上下左右のずれを測る) で行う。 */
.c-dot {
  --dot: 28px;
  display: inline-block; flex: none; box-sizing: border-box;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums; text-align: center;
  line-height: var(--dot);
}
@supports (text-box: trim-both cap alphabetic) {
  .c-dot { line-height: 1; text-box: trim-both cap alphabetic; padding-top: calc((var(--dot) - 0.716em) / 2); }
}
.c-dot--s { --dot: 22px; font-size: var(--fs-note); }

/* 実画面 + 番号付きの説明 */
.c-anno { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-5); align-items: start; }
.c-anno__fig { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); background: #fff; }
.c-anno__fig img { display: block; width: 100%; height: auto; }
.c-anno__pin { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(0, 103, 224, .2); }
.c-anno__list { list-style: none; margin: 0; padding: 0; }
.c-anno__list li { position: relative; padding: 0 0 var(--sp-3) 44px; margin: 0 0 var(--sp-3); border-bottom: 1px solid var(--line); }
.c-anno__list li:last-child { border-bottom: 0; margin-bottom: 0; }
.c-anno__list li > .c-dot { position: absolute; left: 0; top: 0; }
.c-anno__list h3 { font-size: var(--fs-h3); line-height: 1.5; margin: 0 0 4px; }
.c-anno__list p { font-size: var(--fs-sub); color: var(--ink-2); margin: 0; }
.c-dark .c-anno__list li { border-bottom-color: rgba(255,255,255,.14); }
.c-dark .c-anno__list h3 { color: #fff; }
.c-dark .c-anno__list p { color: #b9c2d0; }
.c-dark .c-anno__fig { border-color: rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.c-dark .c-anno__pin { box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
@media (max-width: 900px) { .c-anno { grid-template-columns: 1fr; gap: var(--sp-4); } }
@media (max-width: 640px) { .c-anno__pin { --dot: 22px; font-size: var(--fs-note); } }

/* 2 段 (無料 / 有料) */
.c-tier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.c-tier__col { border-radius: var(--r-l); padding: var(--sp-4); background: #fff; border: 1px solid var(--line); }
.c-tier__col--pro { border: 2px solid var(--blue); box-shadow: var(--sh-2); }
.c-tier__col h3 { font-size: var(--fs-h3); margin: var(--sp-1) 0 var(--sp-2); }
.c-tier__price { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0 0 var(--sp-2); }
.c-tier__price small { font-size: var(--fs-sub); color: var(--ink-2); font-weight: 400; margin-left: 4px; }
@media (max-width: 760px) { .c-tier { grid-template-columns: 1fr; } }

/* 3 ステップ */
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); counter-reset: step; }
.c-steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); }
.c-steps li::before { content: "STEP " counter(step); display: block; font-size: var(--fs-note); font-weight: 700; letter-spacing: .1em; color: var(--blue); margin: 0 0 var(--sp-1); }
.c-steps h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
.c-steps p { font-size: var(--fs-sub); color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .c-steps { grid-template-columns: 1fr; } }

/* FAQ */
.c-faq { max-width: var(--w-read); margin: 0 auto; border-top: 1px solid var(--line); }
.c-faq details { border-bottom: 1px solid var(--line); }
.c-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--sp-3) 40px var(--sp-3) 0; font-weight: 700; font-size: var(--fs-body); line-height: 1.6;
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s;
}
.c-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.c-faq__a { padding: 0 0 var(--sp-3); font-size: var(--fs-sub); color: var(--ink-2); line-height: 1.85; }

/* 別製品の枠 */
.c-product { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4); }
.c-product__mark { width: 56px; height: 56px; border-radius: var(--r-m); background: var(--surface-alt); color: var(--ink); display: grid; place-items: center; }
.c-product h3 { font-size: var(--fs-h3); margin: 0 0 4px; }
.c-product p { margin: 0; }
@media (max-width: 760px) { .c-product { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---------- CTA ボックス (1 部品。文言と行き先だけ差し替える) ---------- */
.c-cta { background: var(--surface-dark); color: #fff; border-radius: var(--r-l); padding: var(--sp-6) var(--sp-5); text-align: center; }
.c-cta__title { font-size: var(--fs-lp-h2); line-height: 1.4; margin: 0 0 var(--sp-2); color: #fff; font-weight: var(--fw-head); }
.c-cta__lead { color: #b9c2d0; margin: 0 0 var(--sp-4); }
.c-cta .c-btn-row { justify-content: center; }
.c-cta .c-btn--primary { background: #fff; color: var(--ink); }
.c-cta .c-btn--primary:hover { background: var(--blue-tint); }
.c-cta .c-btn--cta { background: var(--warm); color: var(--ink); }
.c-cta .c-btn--cta:hover { background: var(--warm-press); }
.c-cta .c-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.c-cta .c-btn--secondary:hover { border-color: #fff; color: #fff; }
.c-cta--compact { padding: var(--sp-4); text-align: left; display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.c-cta--compact .c-cta__title { font-size: var(--fs-h3); margin: 0 0 4px; }
.c-cta--compact .c-cta__lead { margin: 0; font-size: var(--fs-sub); }
@media (max-width: 640px) {
  .c-cta { padding: var(--sp-5) var(--sp-3); text-align: left; }
  .c-cta .c-btn-row { justify-content: flex-start; }
  .c-cta .c-btn { width: 100%; }
}

/* ---------- 帯 (下層ページのタイトル) ----------
 * 薄い青の地に、中央ぞろえの見出し (40px) と短い青の線、一言のリード。ツールは 1〜2 行に詰める。 */
.c-band { background: var(--blue-tint); border-bottom: 1px solid var(--blue-line); padding: 64px 0 56px; text-align: center; }
.c-band__eyebrow { font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; color: var(--blue); margin: 0 0 var(--sp-1); }
.c-band h1 { font-size: var(--fs-h1); line-height: 1.35; margin: 0; color: var(--ink); font-weight: 700; }
.c-band h1::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--blue); margin: 20px auto 0; }
.c-band p { max-width: var(--w-read); margin: 20px auto 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.8; }
.c-band--tool { padding: 28px 0 24px; }
.c-band--tool h1 { font-size: var(--fs-h3); }
.c-band--tool h1::after { display: none; }
.c-band--tool p { margin-top: 6px; font-size: var(--fs-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .c-band { padding: 40px 0 36px; text-align: left; }
  .c-band h1::after { margin-left: 0; }
  .c-band p { margin-left: 0; }
}

/* ---------- 余白・寄せの小道具 (style= の代わり) ---------- */
.c-mt-3 { margin-top: var(--sp-3); }
.c-mt-4 { margin-top: var(--sp-4); }
.c-center { text-align: center; }
.c-gap-3 { gap: var(--sp-3); }

/* 型を使うページでは、ナビの「入手」も申し込みの差し色にそろえる (style.css の !important を上書き) */
html body .nav .nav__cta, html body .nav .nav__cta.btn--primary { background: var(--warm) !important; border-color: var(--warm) !important; color: var(--ink) !important; font-weight: 700; }
html body .nav .nav__cta:hover { background: var(--warm-press) !important; border-color: var(--warm-press) !important; }

/* ---------- 左右交互の説明 (ネクストエンジンの機能ページと同じ組み方) ---------- */
.c-zig { display: grid; gap: 72px; }
.c-zig__row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.c-zig__row:nth-child(even) .c-zig__fig { order: -1; }
.c-zig__row h3 { font-size: var(--fs-h3); line-height: 1.5; margin: 0 0 var(--sp-2); }
.c-zig__row p { margin: 0; color: var(--ink-2); line-height: 1.9; }
.c-zig__fig { margin: 0; border-radius: var(--r-l); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.c-zig__fig img, .c-zig__fig svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .c-zig { gap: 48px; } .c-zig__row { grid-template-columns: 1fr; gap: 24px; } .c-zig__row:nth-child(even) .c-zig__fig { order: 0; } }

/* ---------- 機能名の札 (一覧の小さなリンク) ---------- */
.c-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.c-chips a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 12px; text-align: center; background: #fff; border: 1px solid var(--blue-line); border-radius: var(--r-m); color: var(--blue); font-size: var(--fs-sub); font-weight: 700; line-height: 1.4; text-decoration: none; box-shadow: 2px 2px 0 var(--blue-line); transition: transform .15s, box-shadow .15s; }
.c-chips a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--blue); }

/* ---------- スクロールで現れる (ネクストエンジンと同じ: 下から 24px、0.6 秒) ----------
 * .c-reveal を付けた要素が画面に入ると .is-in が付く (assets/base.js)。並んだカードは --d で少しずつ遅らせる。
 * 動きを減らす設定の人には最初から表示する。 */
.c-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0s); }
.c-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .c-reveal { opacity: 1; transform: none; transition: none; } }
html:not(.js) .c-reveal { opacity: 1; transform: none; }
/* 並んだカードは少しずつ遅らせて現れる */
.c-grid > .c-reveal:nth-child(4n+2), .c-steps > .c-reveal:nth-child(2) { --d: .08s; }
.c-grid > .c-reveal:nth-child(4n+3), .c-steps > .c-reveal:nth-child(3) { --d: .16s; }
.c-grid > .c-reveal:nth-child(4n+4) { --d: .24s; }

/* ---------- 機能の詳細ページ (ネクストエンジンの機能ページの組み方) ----------
 * 帯: 分類 → 機能名 → ひとこと (_shared/features-catch.php)
 * 本文: 要約 → 画面のイメージ → できること → 画面はこう変わります → あわせて使いたい機能 → 申し込み。各区画の見出しは中央 32px。 */
.c-band__catch { margin: 20px auto 0; font-size: var(--fs-lead); font-weight: 700; color: var(--ink); line-height: 1.6; }
.c-detail .c-wrap { max-width: calc(960px + var(--gutter) * 2); }
.c-detail { padding-top: 64px; }
.c-detail__summary { text-align: center; max-width: var(--w-read); margin: 0 auto; }
.c-detail__summary p { margin: 12px 0 0; font-size: var(--fs-lead); line-height: 1.9; color: var(--ink-2); }
.c-detail .detail-section { margin: 88px 0 0; }
.c-detail .detail-section > h2 { text-align: center; font-size: var(--fs-h2); line-height: 1.45; margin: 0 0 32px; }
.c-detail .detail-section > h2::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--blue); margin: 16px auto 0; }
.c-detail .detail-prose { max-width: var(--w-read); margin-left: auto; margin-right: auto; }
.c-detail .detail-prose p { font-size: var(--fs-body); line-height: 1.95; color: var(--ink); margin: 0 0 1em; }
.c-detail__thumb { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border-radius: var(--r-l); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.c-detail__note { text-align: center; font-size: var(--fs-sub); color: var(--ink-3); margin: -16px 0 24px; }
.c-detail .detail-bullets { max-width: var(--w-read); margin: 0 auto; }
.c-detail .detail-related__intro { text-align: center; color: var(--ink-2); }
.c-detail .detail-related__more { text-align: center; }
.c-detail .detail-cta { margin-top: 96px; }
@media (max-width: 640px) {
  .c-band__catch { margin-left: 0; font-size: 16px; }
  .c-detail__summary { text-align: left; }
  .c-detail .detail-section { margin-top: 64px; }
  .c-detail .detail-section > h2 { text-align: left; font-size: 22px; }
  .c-detail .detail-section > h2::after { margin-left: 0; }
  .c-detail .detail-related__intro, .c-detail .detail-related__more { text-align: left; }
}
html body .c-detail .detail-section > h2 { padding-left: 0; font-weight: 700; letter-spacing: 0; }
html body .c-detail .detail-section > h2::before { display: none; }
html body .c-detail .detail-section { margin: 88px 0 0; }
@media (max-width: 640px) { html body .c-detail .detail-section { margin-top: 64px; } }

/* ---------- 機能カード (画像つき。機能一覧・あわせて使える機能) ---------- */
.c-fcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s, border-color .2s; }
.c-fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--blue-line); text-decoration: none; }
.c-fcard__thumb { display: block; aspect-ratio: 320 / 170; background: var(--surface-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.c-fcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-fcard__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.c-fcard__name { font-size: 18px; font-weight: 700; line-height: 1.5; }
.c-fcard__catch { font-size: var(--fs-sub); line-height: 1.8; color: var(--ink-2); flex: 1; }
.c-fcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.c-dark .c-fcard { border-color: transparent; }
.c-dark .c-fcard__name { color: var(--ink); }
.c-dark .c-fcard__catch { color: var(--ink-2); }
.c-pagenav { margin: 0; }

/* ---------- リンクになったカード / カードの中の箇条書き / よくある質問の答えの中身 ---------- */
.c-card--link { display: block; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.c-card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--blue-line); text-decoration: none; }
.c-card--link h2, .c-card--link h3, .c-card__title { font-size: 20px; line-height: 1.5; margin: 0 0 var(--sp-1); }
.c-card__ico svg { width: 24px; height: 24px; }
.c-card__list { list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--line); }
.c-card__list li { position: relative; padding-left: 16px; font-size: var(--fs-sub); color: var(--ink-2); line-height: 1.7; margin: 0 0 6px; }
.c-card__list li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-line); }
.c-card--link .c-card__foot { display: inline-block; margin-top: var(--sp-2); }
.c-prose-sm p { margin: 0 0 .8em; } .c-prose-sm p:last-child { margin: 0; }
.c-prose-sm ul, .c-prose-sm ol { margin: 0 0 .8em; padding-left: 1.3em; }
.c-prose-sm li { margin: 0 0 .3em; }
.c-prose-sm code { font-size: .92em; background: var(--surface-alt); padding: 1px 6px; border-radius: var(--r-s); }
.c-prose-sm a { font-weight: 700; }
.c-band__eyebrow { text-transform: uppercase; }

/* ---------- 無料ツール: 帯は 1〜2 行、説明はツールの下 ---------- */
.c-band--tool p { max-width: var(--w-main); }
@media (max-width: 640px) { .c-band--tool { text-align: left; } .c-band--tool p { margin-left: 0; } }
.c-tool-about__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.c-tool-about__body p { margin: 0 0 1em; line-height: 1.9; color: var(--ink); }
.c-tool-about__list { margin-top: var(--sp-2); }
.c-band .c-band__eyebrow { color: var(--blue); margin: 0 0 var(--sp-1); font-size: var(--fs-note); max-width: none; }
/* 機能の詳細ページは 1 段組み (横の欄は持たない) */
.detail-flow { display: block; }

/* ============================================================
 * AucKit の飾り (2026-11-06)
 * ヤフオクの出品一覧の行を線だけで描いた絵 (assets/motif-rows*.svg) を、帯・キービジュアル・申し込みの箱の
 * 端に薄く置く。AucKit が「一覧を見やすくする道具」であることを、飾りでも言う。
 * 帯の下端は白い曲線 (assets/motif-curve.svg) で切る。
 * 飾りはスクロールに合わせて少しずれる (base.js が --sy にスクロール量を入れる)。
 * ============================================================ */
.c-band:not(.c-band--tool), html body .page-head { position: relative; overflow: hidden; padding-bottom: 96px; }
.c-band:not(.c-band--tool)::before, html body .page-head::before {
  content: ""; position: absolute; inset: -40px -60px 0; pointer-events: none;
  background:
    url("/assets/motif-rows.svg") right max(-60px, calc(50% - 760px)) top 28px / 300px auto no-repeat,
    url("/assets/motif-rows.svg") left max(-90px, calc(50% - 800px)) bottom 40px / 240px auto no-repeat;
  opacity: .75;
  transform: translate3d(0, calc(var(--sy, 0) * .18px), 0);
}
.c-band:not(.c-band--tool)::after, html body .page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; pointer-events: none;
  background: url("/assets/motif-curve.svg") bottom / 100% 100% no-repeat;
}
.c-band > .c-wrap, html body .page-head > * { position: relative; z-index: 1; }
html body .page-head { border-bottom: 0; }
.c-band:not(.c-band--tool) { border-bottom: 0; }
@media (max-width: 900px) {
  .c-band:not(.c-band--tool)::before, html body .page-head::before {
    background: url("/assets/motif-rows.svg") right -120px top 12px / 220px auto no-repeat; opacity: .5;
  }
}
@media (max-width: 640px) {
  .c-band:not(.c-band--tool), html body .page-head { padding-bottom: 64px; }
  .c-band:not(.c-band--tool)::after, html body .page-head::after { height: 28px; }
}

/* キービジュアル: 白い線の一覧を左右に */
.c-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--hero-tail)); pointer-events: none;
  background:
    url("/assets/motif-rows-white.svg") left max(-80px, calc(50% - 820px)) top 72px / 320px auto no-repeat,
    url("/assets/motif-rows-white.svg") right max(-80px, calc(50% - 820px)) top 300px / 280px auto no-repeat;
  opacity: .5;
  transform: translate3d(0, calc(var(--sy, 0) * .22px), 0);
}
@media (max-width: 1180px) { .c-hero::before { opacity: .25; } }
@media (max-width: 640px) { .c-hero::before { display: none; } }

/* 申し込みの箱: 右下に白い線の一覧 */
.c-cta, html body .detail-cta, html body .tools-extension-cta { position: relative; overflow: hidden; }
.c-cta::after, html body .detail-cta::after {
  content: ""; position: absolute; right: -60px; bottom: -70px; width: 300px; height: 220px; pointer-events: none;
  background: url("/assets/motif-rows-white.svg") center / contain no-repeat; opacity: .35;
}
.c-cta > *, html body .detail-cta > * { position: relative; z-index: 1; }
.c-cta--compact::after { width: 200px; height: 150px; bottom: -60px; }
@media (prefers-reduced-motion: reduce) {
  .c-band::before, html body .page-head::before, .c-hero::before { transform: none; }
}
/* 旧 style.css が .page-head の ::before / ::after を !important で消しているので、ここで戻す */
html body .page-head::before, html body .page-head::after { display: block !important; animation: none !important; }
html body .page-head::before, html body .page-head::after { filter: none; border-radius: 0; width: auto; z-index: 0; }
html body .page-head::before { height: auto; }
html body .page-head::after { top: auto; }

/* ---------- AIヘルプ (お問い合わせページ。assets/help-ask.js) 2026-11-06 ---------- */
.c-helpbot { position: relative; background: #fff; border: 1px solid var(--blue-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, .06); padding: 32px; margin: 0 0 48px; }
.c-helpbot[hidden] { display: none; }
.c-helpbot__head { text-align: center; margin-bottom: 24px; }
.c-helpbot__badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--blue); background: var(--blue-tint); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; }
html body .c-helpbot__title { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--ink); margin: 0; border: 0; padding: 0; }
.c-helpbot__lead { font-size: 15px; line-height: 1.8; color: var(--ink-2); margin: 8px 0 0; }
.c-helpbot__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-helpbot__form { display: flex; gap: 12px; align-items: flex-end; }
.c-helpbot__form textarea { flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.7; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 56px; background: #fff; color: var(--ink); }
.c-helpbot__form textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.c-helpbot__form .c-btn { flex: none; min-height: 56px; }
.c-helpbot__form .c-btn:disabled { opacity: .5; cursor: wait; }
.c-helpbot__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.c-helpbot__examples button { font: inherit; font-size: 13px; color: var(--blue); background: var(--blue-tint); border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.c-helpbot__examples button:hover { background: var(--blue-line); }
.c-helpbot__note { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; }
.c-helpbot__log:empty { display: none; }
.c-helpbot__log { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.c-helpbot__msg { font-size: 15px; line-height: 1.85; color: var(--ink); scroll-margin-top: 96px; }
.c-helpbot__msg p { margin: 0 0 8px; }
.c-helpbot__msg p:last-child { margin-bottom: 0; }
.c-helpbot__msg ul, .c-helpbot__msg ol { margin: 4px 0 8px 1.4em; padding: 0; }
.c-helpbot__msg li { margin: 2px 0; }
.c-helpbot__msg a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.c-helpbot__msg--user { align-self: flex-end; max-width: 80%; background: var(--blue); color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 16px; }
.c-helpbot__msg--ai { align-self: stretch; background: var(--surface-alt); border: 1px solid var(--blue-line); border-radius: 4px 16px 16px 16px; padding: 16px 20px; }
.c-helpbot__wait::after { content: "…"; display: inline-block; animation: c-helpbot-dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; width: 1em; }
@keyframes c-helpbot-dots { from { width: 0; } to { width: 1.2em; } }
.c-helpbot__refs { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--blue-line); }
.c-helpbot__refs-title { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 0 0 8px; }
.c-helpbot__refs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; align-items: start; }
.c-helpbot__refs li { margin: 0; }
html body .c-helpbot__refs a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; transition: border-color .15s; }
html body .c-helpbot__refs a:hover { border-color: var(--blue); }
.c-helpbot__refs img { width: 100%; height: 96px; object-fit: contain; background: var(--surface-alt); border-radius: 4px; margin-bottom: 6px; }
.c-helpbot__ref-kind { font-size: 11px; font-weight: 700; color: var(--blue); }
.c-helpbot__ref-title { font-size: 13px; line-height: 1.5; font-weight: 600; }
.c-helpbot__actions { text-align: center; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.c-helpbot__actions p { margin: 0 0 10px; }
.c-helpbot__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.c-helpbot__more { font-size: 12px; color: var(--ink-3); margin: 10px 0 0 !important; }
@media (max-width: 700px) {
  .c-helpbot { padding: 20px 16px; margin-bottom: 36px; }
  .c-helpbot__head { text-align: left; }
  html body .c-helpbot__title { font-size: 20px; }
  .c-helpbot__form { flex-direction: column; align-items: stretch; }
  .c-helpbot__msg--user { max-width: 90%; }
  .c-helpbot__msg--ai { padding: 14px 16px; }
  .c-helpbot__btns .c-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .c-helpbot__wait::after { animation: none; width: 1.2em; } }

/* カードの小さな英字ラベル・機能名 (トップの強み・主な機能・サポート) 2026-11-06 */
.c-card__en { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--blue); margin: 0 0 10px; }
.c-card--center .c-card__en { text-align: center; }
.c-card--link .c-card__en + h3 { margin-top: 0; }
.c-card--link > .c-link { display: inline-block; margin-top: var(--sp-2); }
.c-fcard__pick { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--warm); border-radius: 999px; padding: 3px 10px; }
.c-fcard__name + .c-fcard__catch { flex: 1; }