@charset "UTF-8";
/* TapComplete 販促サイト 共通スタイル
   配色は販促サイト独自。メインカラーはグリーン(emerald系)。
   SaaS側(店舗管理画面)はブルーのままで、意図的に分けている。
   字送り・余白の考え方だけSaaS側と揃えている。 */

/* =========================================================
   色の使い分け（2026/09/08 制定・すーさん承認）
   迷ったらここを読む。新しい色を足す前に、必ずこの表に当てはめる。
   ---------------------------------------------------------
   【役割ごとに1色だけ。同じ役割に2色を持たせない】

   面（背景の帯）          --cta-band  #0d4f26   ← 緑の面はこれ1色のみ
     使う場所：告知バー／Hero／page-hero／最終CTA
     白文字 9.71:1、淡緑 #eafaef 8.98:1
     **これ以上明るくしてはいけない。** 明るくすると本文が 4.5:1 を割る。
     実測：#188038 で淡緑 4.57:1（ぎりぎり）、#1a8a3c で 4.03:1（不合格）。

   文字・線・アイコン      --accent      #15803d   白地で 5.0:1
     使う場所：リンク／見出し下の横線／英語ラベル(.sec-en)／
               コラムの図解SVG／OG画像／ファビコン
     ※ 面の緑を濃くしても、この色は変えていない。図解とOGとファビコンが
        この色で作られているため、揃えるならこちらが基準になる。

   濃い緑（地に敷く）      --accent-dark #166534   白抜き 7.1:1
     使う場所：カードのアイコンの地／章見出しのアイコンの地／ボタンhover

   薄い緑の面              --band        #eaf5ec   セクションの帯
   さらに薄い面            --accent-soft #f2faf4   帯の上に置く箱

   押す場所（主導線）      --cta         #c2410c   白文字 5.18:1
   その hover              --cta-dark    #9a3412   白文字 7.31:1
     ※ オレンジは「押す場所」以外に使わない。例外は悩みセクションの
        注意記号（丸の中の「！」）だけ。

   強調の黄色              #fde047
     使う場所：**濃い緑の面の上の数字だけ**（最終CTAの h2 em）。
     2026/10/17にh1の黄色を廃止したため、Heroのh1には使わない。
     濃い緑 #0d4f26 の上で 7.36:1。
     **白地では絶対に使わない**（白地で 1.4:1、文字として読めない）。

   プランの色（変更禁止）  Lite #0369A1 ／ Pro #c2410c ／ Premium #7E22CE
     2026/09/06にD型色覚で検証して決めた配色（ΔE 30.0）。見た目の理由で変えない。

   赤                      使わない。
     以前「こんなお悩みはありませんか」のチェック印に #dc2626 を使っていたが、
     サイトのどこにも無い5色目だったため2026/09/08に撤去した。
   ---------------------------------------------------------
   【濃い面に文字を置くときの判断】
     本文（16px前後）      4.5:1 以上が必要
     大きい見出し・図形    3:1 以上が必要
   ---------------------------------------------------------
   【形の約束（色と一緒に守る）】
     塗りつぶし＝押せる／塗りなし＝押せない。
     押せないものに枠線のピルを与えない（ボタンと見分けがつかなくなる）。
     例外：H1上のラベルはコラム記事では実際にリンクのため枠線ピルのまま。
   ---------------------------------------------------------
   【変更してよいか迷ったら】
     ・図解SVG・OG画像・ファビコンは #15803d で作られている。
       面の緑を変えてもこれらは追随しない。まとめて変えるのはロゴを
       正式に作るときとする（2026/09/09 すーさん判断）。
     ・面の緑を変えるときは、その面に乗る全テキストの比を測り直すこと。
   ========================================================= */

:root {
  --ink:        #1f2937; /* gray-800 本文 */
  --ink-strong: #111827; /* gray-900 見出し */
  --sub:        #4b5563; /* gray-600 補助文字。白地で 7.6:1 */
  --line:       #e5e7eb; /* gray-200 罫線 */
  --bg-soft:    #f9fafb; /* gray-50  無彩色の面（フォーム・表の見出し） */

  /* メインカラー：新緑のグリーン。
     以前の emerald 系は青寄りで医療機関の配色に近く見えたため、
     黄寄りの green 系に差し替えている。 */
  --accent:     #15803d; /* green-700 リンク・罫・アイコン。白地で 5.0:1 */
  --accent-mid: #16a34a; /* green-600 ボタン通常時 */
  --accent-dark:#166534; /* green-800 CTA帯・ボタンhover。白文字 7.1:1 */
  --band:       #eaf5ec; /* セクションの帯（グリーン）。白との差が見える濃さにする */
  --band-gray:  #f4f5f7; /* セクションの帯（ライトグレー）。補足・前提・注記の面 */
  --cta-band:   #0d4f26; /* 面（帯）に使う唯一の緑。白文字 9.71:1／淡緑 #eafaef 8.98:1。
                            2026/09/08 変更（旧 #188038 は白文字5.0:1・淡緑4.57:1で、
                            濃い面の上の文字が薄く見える原因だった）。**これ以上明るくしない** */
  --accent-soft:#f2faf4; /* 帯より薄い面。帯の上に置いても沈まない */
  --accent-line:#c3e6cd; /* 淡い罫線 */

  /* CTAのオレンジ。主導線のボタンだけに使う。
     濃い方は白文字で 5.2:1。明るい方は濃いグリーンの帯の上に置くとき用で、
     濃いオレンジだと帯との明度差が 1.4:1 しかなくボタンの形が沈むため分けている。 */
  --cta:        #c2410c; /* 主導線のオレンジ。白文字で 5.18:1。2026/09/06 変更（旧 #ea580c は 3.56:1 で、16pxのボタン文字がWCAG AAに届かなかった） */
  --cta-dark:   #9a3412; /* hover。白文字で 7.31:1 */

  /* プランのブランドカラー。S/M/L は同系色にし、サイズは文字で区別する。
     色だけでは区別できない方がいるため、色・プラン名・バッジ形状の3点で示す。 */
  --plan-lite:    #0369A1; /* ブルー。入門。2026/09/06 変更（旧 #475569 はPremiumのネイビーと色相差9度で見分けられなかった） */
  --plan-pro:     #c2410c; /* オレンジ。主力プラン。2026/09/06 変更（ブランドグリーンと同色で料金表の中で目立たなかった。オレンジはサイトの主導線色で「ここを選ぶ」の意味が一致する） */

  /* 横幅はLPを基準に1本化する。ページごとに幅が変わると落ち着かないため。 */
  --wrap:      68rem;
  --wrap-wide: 68rem;
  --wrap-text: 56rem; /* 長文の行長。これ以上広げると1行が長すぎて読めない */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ---------- レイアウト ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3.5rem 0; }
.section--soft { background: var(--band); }
.section--gray { background: var(--band-gray); }

/* ---------- ヘッダー ---------- */
/* ---------- 告知バー（ヘッダー最上部・全ページ共通） ----------
   通常時は parts/header.html 側の hidden 属性で非表示。
   出すときは hidden を消すだけでよい。CSSは触らない。
   緊急時は class に notice-bar--alert を足す（配色がオレンジに変わる）。
   ヘッダーが sticky のため、このバーも一緒に画面上部へ残る。 */
.notice-bar {
  background: var(--accent-dark);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
/* [hidden] と .notice-bar は詳細度が同じで、後から書いた方が勝つ。
   display を指定していなくても、将来足したときに効かなくなるのを防ぐため明示する。 */
.notice-bar[hidden] { display: none; }
.notice-bar__text {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  font-size: .8125rem;
  line-height: 1.6;
  text-align: center;
}
.notice-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notice-bar--alert { background: var(--cta-dark); }
@media (max-width: 40rem) {
  .notice-bar__text { padding: .5rem .9rem; font-size: .75rem; text-align: left; }
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}
.brand {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-strong);
  text-decoration: none;
}
.brand span { color: var(--accent); }
.gnav { display: flex; gap: 1.5rem; align-items: center; }
.gnav a {
  font-size: .875rem;
  color: var(--ink);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.gnav a:hover { border-bottom-color: var(--line); }
.gnav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.nav-toggle { display: none; }

/* ハンバーガーのアイコン（3本線 ⇔ ✕）。開いているときは✕に変形し、
   ラベルも「メニュー」から「閉じる」に切り替える。 */
.nav-toggle__icon {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: .8125rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease, bottom .18s ease;
}
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background-image: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}
.nav-toggle__text--close { display: none; }

/* ---------- 見出し ---------- */
h1, h2, h3 { color: var(--ink-strong); line-height: 1.5; }
h1 { font-size: 1.75rem; margin: 0 0 1.5rem; }
h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 1rem;
  padding-left: .625rem;
  border-left: 3px solid var(--accent);
}
h3 { font-size: 1.0625rem; margin: 2rem 0 .75rem; }
.page-lead { color: var(--sub); font-size: 1rem; margin: -0.75rem 0 2.5rem; }

/* ---------- 本文 ---------- */
p { margin: 0 0 1.25rem; }
ul, ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
li { margin-bottom: .5rem; }
small { color: var(--sub); font-size: .875rem; }

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }

/* 横にはみ出した表であることを分かるようにする。
   共通スクリプトが .table-scroll を .tscroll で包み、はみ出しているときだけ
   表の上に「→ 横にスクロールできます」の小さなラベルを出し、
   右端にフェードをかける。右端まで送るとフェードだけ消える。
   はみ出していない表には .is-scrollable が付かないので何も出ない。
   ラベルを表の下ではなく上に置いているのは、縦に長い表だと下端が画面の外になり、
   スクロールできることに気づけないため。 */
.tscroll { margin: 0 0 1.5rem; }
.tscroll__box { position: relative; }
.tscroll .table-scroll { margin: 0; }
.tscroll .table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tscroll__note {
  display: none;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 .4rem auto;
  padding: .15rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  white-space: nowrap;
}
.tscroll.is-scrollable .tscroll__note { display: block; }
.tscroll__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: linear-gradient(to left, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
}
.tscroll.is-scrollable:not(.is-end) .tscroll__fade { opacity: 1; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td {
  border: 1px solid var(--line);
  padding: .625rem .75rem;
  text-align: left;
  vertical-align: top;
}
th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.center, th.center { text-align: center; }

/* ---------- 注記ボックス ---------- */
.note {
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fff;
  padding: 1.25rem 1.35rem .25rem;
  margin: 0 0 1.5rem;
}
.note p:last-child { margin-bottom: 1rem; }

/* 受付番号（2026/10/18 追加・WBS-0662）
   ⚠️ [hidden] を明示する。このサイトでは display を持つ要素が [hidden] に勝つ例が
      何度も出ているため、隠す指定を書いておく（.ind-jump・.cmp-only と同じ理由）。 */
.inquiry-no[hidden] { display: none; }
.inquiry-no { padding: .875rem 1rem; background: var(--band); border-radius: 8px; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: .75rem 1.75rem;
  border-radius: .375rem;
  background: var(--accent-mid);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.btn:hover { background: var(--accent-dark); color: #fff; }

/* ---------- フッター ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 2.5rem 0 2rem;
  margin-top: 4rem;
  font-size: .875rem;
  color: var(--sub);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.site-footer a { color: var(--sub); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .copyright { margin: 0; }

/* ---------- スマホ ---------- */
@media (max-width: 48rem) {
  body { font-size: 16px; }
  .wrap { padding: 0 1.5rem; }
  h1 { font-size: 1.5rem; }
  .section { padding: 2.5rem 0; }
  .site-header__inner { height: 3.5rem; }
  .gnav {
    /* 告知バーの有無でヘッダーの高さが変わるため、ビューポート基準の固定値は使わない。
       .site-header（position: sticky）を基準に、その真下から開く。 */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: .5rem 1.5rem 1rem;
    display: none;
  }
  .gnav.is-open { display: flex; }
  .gnav a { width: 100%; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .gnav a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: .375rem;
    padding: .375rem .75rem;
    font-size: .8125rem;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__text--open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__text--close { display: inline; }
}

/* ---------- 幅384px未満（iPhone SE / iPhone 8 / Galaxy S 系） ----------
   ロゴ・お問い合わせ・メニューの3つが横に並びきらず、ヘッダーが画面からはみ出す。
   メニューボタンの文字だけを見た目から外して幅を詰める（約59px 縮む）。
   display: none にすると読み上げソフトが読むボタン名まで消えるため、
   文字は残したまま1pxに切り抜いて視覚から外す。アイコンは開くと×に変わる。 */
@media (max-width: 23.9375rem) {
  .nav-toggle { position: relative; gap: 0; padding: .375rem .5rem; }
  .nav-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 幅320px（iPhone SE 第1世代・iPhone 5）はさらに4px足りない。
   ヘッダーの左右の余白だけを詰める。本文の余白は変えない。 */
@media (max-width: 20rem) {
  /* .wrap の余白がファイル後方でも指定されているため、クラス2つで上書きする */
  .site-header .site-header__inner { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- フォーム ---------- */
.form { max-width: 640px; }
.form-field { margin: 0 0 1.5rem; }
.form-field > label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .5rem; color: var(--ink-strong); }
.tag-req, .tag-opt {
  display: inline-block; margin-left: .5rem; padding: .1rem .4rem;
  border-radius: 3px; font-size: .6875rem; font-weight: 700; vertical-align: middle;
}
.tag-req { background: #fee2e2; color: #b91c1c; }
.tag-opt { background: var(--bg-soft); color: var(--sub); border: 1px solid var(--line); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .75rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--ink); font-size: 1rem; font-family: inherit; line-height: 1.6;
}
.form-field textarea { min-height: 10rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-help { display: block; margin-top: .4rem; color: var(--sub); font-size: .8125rem; }
.form-error { display: none; margin-top: .4rem; color: #b91c1c; font-size: .8125rem; font-weight: 700; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #b91c1c; }
.form-field.has-error .form-error { display: block; }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; }
.form-consent input[type="checkbox"] { margin-top: .2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.form-actions { margin-top: 2rem; }
.form-actions .btn { border: 0; cursor: pointer; font-size: 1rem; font-family: inherit; }
.form-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.form-alert {
  display: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  border: 1px solid #fca5a5; border-left: 4px solid #b91c1c;
  background: #fef2f2; color: #7f1d1d; font-size: .875rem; border-radius: 4px;
}
.form-alert.is-shown { display: block; }
/* 提供開始前の暫定表示。お問い合わせAPIのデプロイ後に削除する（2026-09-07 設置） */
.form-notice {
  margin: 0 0 1.25rem; padding: .9rem 1.15rem;
  border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  background: var(--band-gray); color: var(--ink);
  font-size: .9375rem; line-height: 1.7; border-radius: 4px;
}
.form-notice strong { color: var(--accent-dark); }
/* ボット除け。人間には見えない入力欄(読み上げ対象からも外す) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grecaptcha-badge { visibility: hidden; }

/* ---------- 料金ページ ---------- */
/* 2026/09/17：3プラン→2プランの改定にともない3列から2列へ。
   .plan-cards を使っているのは index.html だけ（走査で確認済み）。 */
.plan-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 0 2.5rem;
}
@media (max-width: 720px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-card {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .85rem;
}
.plan-card--pick { border-color: var(--accent); border-width: 2px; padding: calc(1.5rem - 1px) calc(1.35rem - 1px); }
.plan-badge {
  align-self: flex-start; background: var(--accent); color: #fff;
  font-size: .6875rem; font-weight: 700; padding: .15rem .55rem; border-radius: 3px; letter-spacing: .04em;
}
.plan-name { font-size: 1.25rem; font-weight: 700; color: var(--ink-strong); margin: 0; }
.plan-price { margin: 0; line-height: 1.3; }
.plan-price b { font-size: 1.75rem; font-weight: 700; color: var(--ink-strong); }
.plan-price small { display: block; color: var(--sub); font-size: .875rem; margin-top: .2rem; }
.plan-for { margin: 0; font-size: .9375rem; color: var(--sub); border-top: 1px solid var(--line); padding-top: .85rem; }
.plan-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; font-size: .9375rem; }
.plan-points li { padding-left: 1.35rem; position: relative; margin: 0; }
.plan-points li::before { content: ""; position: absolute; left: .15rem; top: .55rem; width: .45rem; height: .25rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* 比較表 */
.cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); }
.cmp th.cmp-feature { text-align: left; white-space: normal; min-width: 15rem; }
.cmp td { text-align: center; white-space: nowrap; }
.cmp .cat th {
  background: var(--ink-strong); color: #fff; text-align: left;
  font-size: .8125rem; letter-spacing: .04em; white-space: nowrap;
}
.cmp .feat-name { display: block; font-weight: 700; color: var(--ink-strong); }
.cmp .feat-note { display: block; color: var(--sub); font-size: .875rem; font-weight: 400; margin-top: .15rem; }
.yes { color: var(--accent); font-weight: 700; }
.no { color: #64748b; }
.num-strong { font-weight: 700; color: var(--ink-strong); }

/* 診断 */
.calc { border: 0; border-radius: 10px; background: var(--band-gray); padding: 1.5rem 1.35rem; margin: 0 0 1.5rem; }
.calc-row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.calc-row label { font-weight: 700; color: var(--ink-strong); }
.calc-row input {
  width: 7rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  font-size: 1.125rem; font-family: inherit; text-align: right; background: #fff; color: var(--ink);
}
.calc-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-out { display: flex; flex-direction: column; gap: .5rem; }
.calc-item {
  display: grid; grid-template-columns: 1.75rem 1fr auto; align-items: baseline; gap: .75rem;
  background: #fff; border: 0; border-left: 3px solid var(--line); border-radius: 7px;
  padding: .7rem .9rem; font-size: .9375rem;
}
.calc-item:first-child { border-left-color: var(--accent); }
.calc-rank { color: var(--sub); font-size: .875rem; }
.calc-item:first-child .calc-rank { color: var(--accent); font-weight: 700; }
.calc-plan { font-weight: 700; color: var(--ink-strong); }
.calc-plan span { font-weight: 400; color: var(--sub); font-size: .875rem; margin-left: .5rem; }
.calc-fee { font-weight: 700; color: var(--ink-strong); white-space: nowrap; }

/* =========================================================
   LP用パーツ（トップページ）
   ここから下はトップページ(index.html)のための追加分。
   規約ページ等の既存レイアウトには影響しない。
   ========================================================= */

.wrap--wide { max-width: var(--wrap-wide); }

/* 長文を読ませる列。外側の箱は他ページと同じ幅のまま、
   本文だけ行長を詰めて読めるようにする。 */
.prose { max-width: var(--wrap-text); margin-left: auto; margin-right: auto; }

/* ---------- ファーストビュー ---------- */
.hero {
  background: var(--cta-band);
  border-bottom: 0;
  color: #fff;
  padding: 3.25rem 0 3.75rem;
}
.hero__inner { display: grid; grid-template-columns: 1.12fr .88fr; gap: 2.5rem; align-items: center; }
.hero__eyebrow {
  display: inline-block; margin: 0 0 1rem; padding: .3rem .7rem;
  background: #fff; border: 1px solid var(--accent-line); border-radius: 999px;
  color: var(--accent-dark); font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.hero h1 {
  font-size: 2rem; line-height: 1.45; margin: 0 0 1.125rem; letter-spacing: -.02em;
}
/* 2026/10/17：h1の黄色（em）を廃止した（すーさん指示）。あわせて h1 から br と
   .nb（折り返し禁止）も外し、text-wrap: balance による自動改行に任せている。
   ⚠️ h1 に em を書き足さないこと。色が付かず、意味のないタグになる。
   最終CTAの h2 em（1885行）と料金表の em は別の指定で、黄色のまま。 */
.hero__lead { font-size: 1.0625rem; color: var(--ink); margin: 0 0 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero__note { margin: 1.25rem 0 0; font-size: .875rem; color: var(--sub); }
.hero__visual { margin: 0; }
.hero__visual svg { display: block; width: 100%; height: auto; }

/* ---------- ボタン ---------- */
.btn--lg { padding: .95rem 2.25rem; font-size: 1.0625rem; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.btn--ghost { background: #fff; color: var(--accent-dark); border: 1px solid var(--accent-line); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* ---------- セクション見出し（LP用・中央寄せ） ---------- */
.sec-head { text-align: center; margin: 0 0 2.25rem; }
.sec-head h2 {
  font-size: 1.5rem; margin: 0 0 .6rem; padding: 0; border: 0; line-height: 1.5;
}
.sec-head p { color: var(--sub); font-size: 1rem; margin: 0; }

/* ---------- 課題チェックリスト ---------- */
.checks { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; display: grid; gap: .75rem; }
.checks li {
  margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: .9rem 0 .9rem 2.5rem; position: relative;
  font-size: 1rem; line-height: 1.7;
}
.checks li::before {
  content: ""; position: absolute; left: .35rem; top: 1.1rem;
  width: .8rem; height: .45rem; border-left: 2.5px solid #dc2626; border-bottom: 2.5px solid #dc2626;
  transform: rotate(-45deg);
}

/* ---------- メリット・機能カード ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 0; border-radius: .625rem;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 8px rgba(17,24,39,.05);
  padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .6rem;
}
.card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--accent-soft);
  border: 0; display: flex; align-items: center; justify-content: center;
  margin-bottom: .25rem;
}
.card__icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--accent-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.0625rem; margin: 0; line-height: 1.55; }
.card p { margin: 0; font-size: .9375rem; color: var(--ink); line-height: 1.8; }
.card .tag-plan {
  align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .03em;
  background: var(--ink-strong); color: #fff; padding: .12rem .5rem; border-radius: 3px;
}

/* 複数のカードのうち1つだけ注意を向けたいときに使う（導入メリットの「コースの登録」）。
   色はCTAと同じオレンジで、他のカードと役割が違うことを示す。 */
.card--mark { box-shadow: 0 0 0 1.5px var(--cta), 0 1px 8px rgba(17,24,39,.05); }
.card--mark .card__icon { background: #fdf0e7; }
.card--mark .card__icon svg { stroke: var(--cta-dark); }
.card__note {
  display: block; align-self: flex-start; margin-top: .1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  background: var(--cta); color: #fff; padding: .15rem .5rem; border-radius: 3px;
}

/* ---------- 機能一覧（コンパクトなグリッド） ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.feature-grid li {
  margin: 0; padding: .7rem 0 .7rem 1.75rem; position: relative;
  font-size: .9375rem; border-bottom: 1px solid var(--line);
}
.feature-grid li::before {
  content: ""; position: absolute; left: .2rem; top: 1.15rem;
  width: .55rem; height: .3rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- 数字で見る効果 ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 0 0 1.25rem; }
.stat {
  background: #fff; border: 0; border-radius: .625rem;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 8px rgba(17,24,39,.05);
  padding: 1.5rem 1.25rem; text-align: center;
}
.stat b { display: block; font-size: 2rem; line-height: 1.2; color: var(--accent-dark); font-weight: 700; }
.stat b small { font-size: .9375rem; color: var(--accent-dark); font-weight: 700; }
.stat span { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--sub); line-height: 1.7; }

/* ---------- 導入の流れ ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.steps li {
  margin: 0; background: #fff; border: 0; border-radius: .625rem;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 8px rgba(17,24,39,.05);
  padding: 1.5rem 1.35rem; position: relative;
}
.steps li::before {
  counter-increment: step; content: "STEP " counter(step);
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-dark); margin-bottom: .5rem;
}
.steps h3 { margin: 0 0 .4rem; font-size: 1rem; }
.steps p { margin: 0; font-size: .9375rem; color: var(--sub); line-height: 1.8; }

/* ---------- 最後のCTA ---------- */
.cta-final {
  background: var(--cta-band); color: #fff; border-radius: .75rem;
  padding: 2.75rem 2rem; text-align: center;
}
.cta-final h2 { color: #fff; font-size: 1.5rem; margin: 0 0 .75rem; padding: 0; border: 0; }
.cta-final p { color: #dcfce7; margin: 0 0 1.75rem; font-size: .9375rem; }
.cta-final .btn { background: #fff; color: var(--cta-band); }
.cta-final .btn:hover { background: var(--accent-soft); color: var(--cta-band); }
.cta-final small { display: block; margin-top: 1.25rem; color: #bbf7d0; }

/* ---------- スマホ ---------- */
@media (max-width: 60rem) {
  .cards, .feature-grid, .stats, .steps { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1 { font-size: 1.875rem; }
}
@media (max-width: 48rem) {
  .hero { padding: 2.5rem 0 2.75rem; }
  .hero h1 { font-size: 1.625rem; }
  .hero__lead { font-size: 1rem; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .cards, .cards--2, .feature-grid, .stats, .steps { grid-template-columns: 1fr; }
  .sec-head h2 { font-size: 1.3125rem; }
  .cta-final { padding: 2rem 1.5rem; border-radius: .625rem; }
}

/* =========================================================
   よくある質問（faq.html）
   ========================================================= */

/* ---------- 目次 ---------- */
.faq-toc {
  border: 0; border-radius: .625rem; background: var(--band-gray);
  padding: 1.5rem 1.75rem 1.25rem; margin: 0 0 2.75rem;
}
.faq-toc__title {
  margin: 0 0 .85rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-dark);
}
.faq-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1.5rem;
  counter-reset: toc;
}
.faq-toc li { margin: 0; }
.faq-toc a {
  display: block; padding: .3rem 0 .3rem 1.6rem; position: relative;
  font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.faq-toc a::before {
  counter-increment: toc; content: counter(toc);
  position: absolute; left: 0; top: .35rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.faq-toc a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- コラム記事の目次（.faq-toc の変種） ----------
   2026/09/28 すーさんの指示で、参考デザイン（RTOC形式）に合わせて作り直した。
   読み手から2件の指摘が出たため。
   ①「改行があると隣のリンクの高さが変わる」
     → 原因は grid。行ごとに高さが揃うため、左が3行に折り返すと右の1行の項目も
        3行ぶんの高さを持っていた。1列にして解消する。
   ②「冒頭にエリアを奪い邪魔」
     → 1列にすると縦は伸びる。項目の区切り線と字下げで一覧性を上げ、
        見出しの階層（h2/h3）が入った段階で親子にまとめて短くする。
   ⚠️ 既定は開いた状態のまま（<details open>）。閉じると目次の意味がなくなる（すーさん指示）。
   ⚠️ 見出しの文言は原稿のまま変えない。主語が抜けると読んで理解できないため（すーさん指示）。
   ⚠️ 2026/09/28：記事12（booking-flow）のリライトで h2 6本・h3 13本の階層が入り、
      下の `li ol`（子の段）が初めて効いた。残り12記事はまだすべて h2 のため
      目次はフラットのまま。次のリライトから順に階層が入る。
   色は既存の変数だけを使う。アクセント＝--accent、面＝--bg-soft、罫＝--line。 */
.faq-toc.faq-toc--article {
  border-top: 3px solid var(--accent);
  border-radius: 0 0 .5rem .5rem;
  background: var(--bg-soft);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
  padding: 1.25rem 1.75rem 1.5rem;
  margin: 0 0 2.5rem;
}

.faq-toc.faq-toc--article > details { margin: 0; }

/* 見出しは中央。右端に開閉のチップを置く。 */
.faq-toc.faq-toc--article summary {
  list-style: none; cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: .35rem 0 .9rem;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-strong);
}
.faq-toc.faq-toc--article summary::-webkit-details-marker { display: none; }
.toc-ttl::before { content: "〜 "; }
.toc-ttl::after  { content: " 〜"; }

.faq-toc.faq-toc--article summary::after {
  content: "閉じる";
  position: absolute; right: 0; top: .2rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  color: var(--sub); background: var(--band-gray);
  border-radius: .25rem; padding: .25rem .55rem;
  transform: none; border: 0;
}
.faq-toc.faq-toc--article > details:not([open]) summary::after { content: "開く"; }
.faq-toc.faq-toc--article summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* 親の段。番号は2桁のゼロ詰めにして、縦の棒で見出しと分ける。 */
.faq-toc.faq-toc--article ol {
  display: block; columns: 1; margin: 0; padding: 0;
  list-style: none; counter-reset: toc;
}
.faq-toc.faq-toc--article > details > ol > li { margin: 0; }
.faq-toc.faq-toc--article > details > ol > li + li { margin-top: .15rem; }

.faq-toc.faq-toc--article a {
  display: block; position: relative;
  /* 機能ページ用のカード型（.faq-toc a）が後ろにあるため、面と枠を打ち消す。
     参考デザインと同じく、項目は線だけで区切る。 */
  background: none; border: 0; border-radius: 0; gap: 0;
  padding: .55rem 0 .55rem 3.5rem;
  font-size: .9688rem; font-weight: 400; line-height: 1.7;
  color: var(--ink); text-decoration: none;
}
.faq-toc.faq-toc--article > details > ol > li + li > a { border-top: 1px solid var(--line); }
.faq-toc.faq-toc--article > details > ol > li > a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .5rem;
  width: 1.75rem; height: auto; border-radius: 0;
  background: none; color: var(--accent);
  font-size: .9375rem; font-weight: 700; line-height: 1.7; text-align: right;
}
/* 番号と見出しのあいだの縦棒 */
.faq-toc.faq-toc--article > details > ol > li > a::after {
  content: ""; position: absolute; left: 2.35rem; top: .75rem;
  width: 2px; height: 1.05rem; background: var(--accent); opacity: .5;
}
.faq-toc.faq-toc--article a:hover { color: var(--accent-dark); text-decoration: underline; }

/* 子の段（h3）。番号は「1.」にして字下げする。h3 が入るまでは出番がない。 */
.faq-toc.faq-toc--article li ol {
  counter-reset: toc2; margin: .1rem 0 .55rem;
}
.faq-toc.faq-toc--article li ol > li > a {
  padding: .3rem 0 .3rem 5.4rem;
  font-size: .9063rem; line-height: 1.65;
}
.faq-toc.faq-toc--article li ol > li > a::before {
  counter-increment: toc2; content: counter(toc2) ".";
  position: absolute; left: 3.5rem; top: .3rem;
  width: 1.4rem; height: auto; border-radius: 0;
  background: none; color: var(--accent);
  font-size: .875rem; font-weight: 700; line-height: 1.65; text-align: right;
}
.faq-toc.faq-toc--article li ol > li > a::after { content: none; }

@media (max-width: 40rem) {
  .faq-toc.faq-toc--article { padding: 1.1rem 1.1rem 1.25rem; }
  .faq-toc.faq-toc--article a { padding-left: 3rem; }
  .faq-toc.faq-toc--article > details > ol > li > a::before { width: 1.5rem; }
  .faq-toc.faq-toc--article > details > ol > li > a::after { left: 2rem; }
  .faq-toc.faq-toc--article li ol > li > a { padding-left: 4.6rem; }
  .faq-toc.faq-toc--article li ol > li > a::before { left: 3rem; }
}

/* ---------- 章 ---------- */
.faq-sec { scroll-margin-top: 5rem; margin: 0 0 2.5rem; }
.faq-sec h2 { margin-top: 0; }

/* ---------- 質問と回答 ---------- */
.qa {
  border: 1px solid var(--line); border-radius: .625rem; background: #fff;
  padding: 1.25rem 1.35rem; margin: 0 0 .85rem;
}
.qa__q, .qa__a { position: relative; padding-left: 2.5rem; }
.qa__q {
  margin: 0 0 .85rem; font-size: 1.0313rem; line-height: 1.6; color: var(--ink-strong);
}
.qa__q::before, .qa__a::before {
  position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: .3125rem;
  font-size: .875rem; font-weight: 700; line-height: 1.75rem; text-align: center;
}
.qa__q::before { content: "Q"; background: var(--accent); color: #fff; }
.qa__a::before { content: "A"; background: var(--bg-soft); color: var(--sub); border: 1px solid var(--line); }
.qa__a { padding-top: .1rem; }
.qa__a > *:last-child { margin-bottom: 0; }
.qa__a p { margin: 0 0 .85rem; font-size: 1rem; }
.qa__a ul, .qa__a ol { margin: 0 0 .85rem; font-size: 1rem; }

@media (max-width: 60rem) {
  .faq-toc ol { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
  .faq-toc { padding: 1.1rem 1.15rem .9rem; margin-bottom: 2rem; }
  .faq-toc ol { grid-template-columns: 1fr; gap: .15rem; }
  .qa { padding: 1.1rem 1.1rem; }
  .qa__q { font-size: 1rem; }
  .qa__q, .qa__a { padding-left: 2.25rem; }
  .qa__q::before, .qa__a::before { width: 1.6rem; height: 1.6rem; line-height: 1.6rem; font-size: .8125rem; }
}

/* =========================================================
   下層ページ共通の見出しエリア
   ========================================================= */
.page-hero {
  background: linear-gradient(180deg, var(--band) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0 2.5rem;
}
.page-hero h1 { font-size: 1.875rem; margin: 0 0 .875rem; line-height: 1.45; }
.page-hero p { margin: 0; color: var(--ink); font-size: 1rem; max-width: var(--wrap-text); }
.page-hero .hero__eyebrow { margin-bottom: .875rem; }

/* 本文とCTAの間に置く区切り */
.mid-cta { text-align: center; margin: 2.5rem 0 0; }

/* セクション末からコラムへ送る導線。
   申込ボタンと視覚的に競合させないため、ボタンではなくテキストリンクにする。 */
/* セクション末からコラムへ送る導線。
   2026/09/06：文字リンクではクリックされないためボタンに変更した。
   申込ボタン（塗りのオレンジ）と役割が違うことが見て分かるよう、
   白地＋緑の枠線にして、色では競合させない。 */
.read-more { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.btn--read {
  background: #fff;
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  padding: .7rem 1.15rem;
  font-size: .9375rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn--read:hover { background: var(--accent-soft); color: var(--accent-dark); }
.btn--read::after { content: "\2192"; margin-left: .5rem; font-weight: 700; }
@media (max-width: 40rem) {
  .read-more { display: grid; gap: .625rem; }
  .btn--read { text-align: left; }
}

@media (max-width: 48rem) {
  .page-hero { padding: 2rem 0 1.875rem; }
  .page-hero h1 { font-size: 1.5rem; }
  .page-hero p { font-size: .9375rem; }
}

/* 料金カードの高さを揃える（バッジのない列に同じ高さの余白を確保する） */
.plan-cards { align-items: start; }
.plan-card::before { content: ""; display: block; height: 1.15rem; }
.plan-card--pick::before { display: none; }

/* =========================================================
   料金ページ：表とカードの幅を揃える
   ========================================================= */

/* 比較表は4つに分かれており、そのままだと表ごとに列幅が変わってしまう。
   列幅を固定して、すべての表で同じ位置に線が来るようにする。 */
.cmp { table-layout: fixed; min-width: 40rem; }
.cmp th.cmp-feature { width: 43%; min-width: 0; }
.cmp thead th:not(.cmp-feature) { width: 19%; }
.cmp td { width: 19%; white-space: normal; }

/* プランカードの幅を完全に揃える。
   1fr は中身が広いと膨らむため、minmax(0,1fr) で頭打ちにする。 */
/* 2026/09/17：2プランへの改定で3列→2列。471行の定義をここで上書きしているため、
   片方だけ直すと効かない。変えるときは両方そろえること。 */
.plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .plan-cards { grid-template-columns: 1fr; } }

/* =========================================================
   フッター（ライトグレー）
   最後のCTAを一番目立たせるため、フッターは色を持たせず沈める。
   上のセクション(--bg-soft)と同化しないよう、一段濃いグレーにして境界線を引く。
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: #f3f4f6;      /* gray-100 */
  color: var(--sub);
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--accent-dark); text-decoration: underline; }
.site-footer nav { gap: .85rem 1.5rem; }
.site-footer .copyright { color: var(--sub); }

/* =========================================================
   対応業種一覧（industries.html）
   ========================================================= */
.ind-group { margin: 0 0 2.25rem; }
.ind-group__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--accent-line); padding-bottom: .6rem; margin-bottom: 1.1rem;
}
.ind-group__head h3 { margin: 0; font-size: 1.125rem; }
.ind-group__unit {
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: .15rem .6rem;
}
.ind-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ind-list li {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .85rem; font-size: .875rem; color: var(--ink);
}
.ind-group > p { margin: 0; font-size: .9375rem; color: var(--sub); }
@media (max-width: 48rem) {
  .ind-group__head h3 { font-size: 1.0625rem; }
  .ind-list li { font-size: .8438rem; padding: .3rem .7rem; }
}

/* =========================================================
   セクションの色分け
   H2ごとの区切りを見せるため、背景を白と淡いグリーンで交互にする。
   3色以上に増やすと落ち着きがなくなるため、2色にとどめる。
   ========================================================= */
.section--soft { background: var(--band); }
.section--gray { background: var(--band-gray); }

/* セクションの境目に細い線を入れる。
   明るい場所のスマホでは淡い背景色が飛ぶため、色だけに頼らない。 */
main > section + section { border-top: 1px solid var(--line); }
main > section.hero + section,
main > section.page-hero + section { border-top: 0; }

/* 見出しの上に短い線を置き、セクションの始まりを分かりやすくする */
.sec-head h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0 auto .9rem;
  background: var(--accent);
  border-radius: 2px;
}

/* =========================================================
   最後のCTA：セクションごと緑で塗る
   カードを白地の上に置く形をやめ、画面幅いっぱいの緑にする。
   ========================================================= */
.section--cta {
  background: var(--cta-band);
  color: #dcfce7;
  border-top: 0;
  padding: 3.5rem 0 3.25rem;
}
.section--cta + * { border-top: 0; }

/* カードの見た目を解除し、緑の面の上に直接置く */
.section--cta .cta-final {
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
}
.section--cta .cta-final h2 {
  color: #fff;
  font-size: 1.625rem;
  margin: 0 0 .85rem;
}
.section--cta .cta-final h2::before {
  content: "";
  display: block;
  width: 2.5rem; height: 3px;
  margin: 0 auto .9rem;
  background: #86efac;
  border-radius: 2px;
}
.section--cta .cta-final p { color: #dcfce7; margin: 0 0 1.75rem; font-size: .9375rem; }
.section--cta .cta-final .btn { background: #fff; color: var(--cta-band); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.section--cta .cta-final .btn:hover { background: var(--accent-soft); color: var(--cta-band); }
.section--cta .cta-final small { display: block; margin-top: 1.1rem; color: #bbf7d0; }

/* 下段のサブ導線。上に細い線を引いて主導線と分ける */
.section--cta .mid-cta {
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  max-width: 34rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
.section--cta .mid-cta .btn--ghost {
  background: transparent;
  color: #f0fdf4;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: none;
}
.section--cta .mid-cta .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.7);
}

@media (max-width: 48rem) {
  .section--cta { padding: 2.75rem 0 2.5rem; }
  .section--cta .cta-final h2 { font-size: 1.375rem; }
  .section--cta .mid-cta { padding-top: 1.6rem; margin-top: 2rem; }
  .section--cta .mid-cta .btn--ghost { flex: 1 1 100%; text-align: center; }
}


/* =========================================================
   主導線のボタン（オレンジ）
   ワンポイントで置き、押してほしいボタンを1画面に1つだけ目立たせる。
   他のボタンはグリーンのままにしないと、ワンポイントにならない。
   ========================================================= */
.btn--cta { background: var(--cta); color: #fff; }
.btn--cta:hover { background: var(--cta-dark); color: #fff; }

/* 濃いグリーンの帯の上では、ボタンに白い縁を付ける。
   オレンジ #c2410c と帯 #188038 の明度差は 1.03:1 しかなく、色だけでは
   ボタンの形が背景に沈む。白と帯は 5.02:1 あるので輪郭が出る。 */
.section--cta .cta-final .btn--cta,
.section--cta .btn--cta {
  background: var(--cta); color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25);
}
.section--cta .cta-final .btn--cta:hover,
.section--cta .btn--cta:hover { background: var(--cta-dark); color: #fff; }

/* =========================================================
   プランのブランドカラー
   色だけでは区別できない方がいるため、
   ①上端の色帯 ②プラン名の色 ③バッジ の3点セットで区別する。
   S/M/L は同じ系統色にし、サイズはプラン名の文字で示す。
   ========================================================= */
.plan-card--lite    { --plan: var(--plan-lite); }
.plan-card--pro     { --plan: var(--plan-pro); }

.plan-card--lite,
.plan-card--pro { border-top: 4px solid var(--plan); }

.plan-card--pick { border-color: var(--plan); border-width: 2px; border-top-width: 4px; }

.plan-badge { background: var(--plan, var(--accent)); }
.plan-name  { color: var(--plan, var(--ink-strong)); }
.plan-points li::before {
  border-left-color: var(--plan, var(--accent));
  border-bottom-color: var(--plan, var(--accent));
}

/* 比較表の見出しにも同じ色を置き、カードと表の対応を分かるようにする */
.cmp-plan--lite    { --plan: var(--plan-lite); }
.cmp-plan--pro     { --plan: var(--plan-pro); }
.cmp thead th.cmp-plan {
  border-top: 3px solid var(--plan);
  color: var(--plan);
}

/* =========================================================
   ヘッダーの申し込みボタン
   申し込みはサイト全体の主導線なので、どのページでも常に見える位置に置く。
   ========================================================= */
.site-header__inner { justify-content: flex-start; }
.gnav { margin-left: auto; }
.site-header__actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.btn--sm { padding: .5rem 1.05rem; font-size: .875rem; }

@media (max-width: 60rem) {
  .gnav { gap: 1.1rem; }
  .site-header__actions .btn--sm { padding: .5rem .9rem; font-size: .8125rem; }
}
@media (max-width: 48rem) {
  .gnav { margin-left: 0; }
  .site-header__actions { margin-left: auto; }
}

/* CTA帯の下段リンク。.section--cta .cta-final p の指定に負けて
   中央寄せが効かなくなるため、p を含めた形で上書きする。 */
.section--cta .cta-final p.mid-cta { margin: 2.5rem auto 0; font-size: .9375rem; }

/* =========================================================
   アイコン
   写真が用意できないぶん、線画のアイコンで見た目の手がかりを増やす。
   意味を持たない飾りなので、読み上げからは外す（aria-hidden）。
   ========================================================= */
.sec-icon, .ind-group__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.125rem; height: 2.125rem; border-radius: .5rem;
  background: var(--accent-soft);
}
.sec-icon svg, .ind-group__icon svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ind-group__icon { background: #fff; }

/* 章見出し（よくある質問） */
.faq-sec h2 {
  display: flex; align-items: center; gap: .75rem;
  border-left: 0; padding: 0 0 .75rem;
  border-bottom: 2px solid var(--accent-line);
  font-size: 1.375rem;
}

/* 業種の見出し */
.ind-group__head { align-items: center; }
.ind-list li { border: 0; box-shadow: 0 1px 2px rgba(17,24,39,.06); }

/* =========================================================
   導入の流れ：番号を丸で見せる
   ========================================================= */
.steps li { padding-top: 3.25rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 1.4rem; left: 1.35rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .9375rem; font-weight: 700; line-height: 1.9rem; text-align: center;
  margin: 0; letter-spacing: 0;
}

/* =========================================================
   面の重なりの調整
   緑の帯の上に淡いグレーの箱を置くと沈むため、白に置き換える。
   ========================================================= */


/* プランカードは枠線をやめ、上端の色帯と影で区切る。
   おすすめのプランだけ、色のついた輪郭で囲う。 */
.plan-card {
  border-left: 0; border-right: 0; border-bottom: 0;
  box-shadow: 0 1px 2px rgba(17,24,39,.06), 0 2px 12px rgba(17,24,39,.06);
}
.plan-card--pick {
  padding: 1.5rem 1.35rem;
  box-shadow: 0 0 0 2px var(--plan), 0 4px 16px rgba(17,24,39,.10);
}

/* 目次は詰めて置く。ここは読ませる場所ではなく、飛ばす場所のため。 */
.faq-toc { padding: 1.25rem 1.5rem 1rem; }

/* =========================================================
   下層ページのヒーロー
   淡いグラデーションだと本文から浮いて見えるため、
   CTA帯と同じ濃いグリーンで塗り、文字を白にする。
   ページの上と下が同じ色で締まる。
   ========================================================= */
.page-hero {
  background: var(--cta-band);
  border-bottom: 0;
  color: #fff;
  padding: 3rem 0 2.75rem;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: #dcfce7; }
.page-hero .hero__eyebrow {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.page-hero a { color: #fff; }

/* ヒーローの直下は必ず白にする。濃い色が続くと圧迫感が出る。 */

/* フッターの上の余白を外す。
   本文が白地で終わる前提の余白だったが、CTA帯を敷いたことで
   帯とフッターの間に白い帯として見えてしまうため。 */
.site-footer { margin-top: 0; }

/* 緑の帯の上に表を置くとセルの下地が緑になるため、表だけ白にする */
.section--soft table,
.section--gray table { background: #fff; }

/* =========================================================
   機能ページのプラン表示
   どのプランで使えるかを、機能ごとに色と文字で示す。
   ========================================================= */
.card .tag-plan--all {
  background: #fff; color: var(--sub);
  box-shadow: inset 0 0 0 1px var(--line);
}
.card .tag-plan--var     { background: var(--plan-lite); }
.card .tag-plan--pro     { background: var(--plan-pro); }

/* トップのヒーローも下層ページと同じ濃いグリーンに揃える。
   文字と副導線のボタンを、濃い面の上で読める色に置き換える。 */
.hero h1 { color: #fff; }
.hero__lead { color: #dcfce7; }
.hero__note { color: #bbf7d0; }
.hero .hero__eyebrow {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.hero .btn--ghost,
.page-hero .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.8);
}

/* プランカードの高さを揃える。
   中身の量が違っても、枠の下端が同じ位置に来るようにする。 */
.plan-cards { align-items: stretch; }

/* =========================================================
   面（カード類）の下地
   白いセクションの上に白いカードを置くと、地との差がなくなって
   かたまりとして読めない。枠線を足す代わりに、
   「白い面の上では下地をグレーに、色の付いた面の上では白に」切り替える。
   ========================================================= */
/* 中は常に白。白いセクションの上だけ、枠線に色をつけて地と分ける。
   色の付いたセクションの上では、白い面だけで分かるので枠線は外す。 */
.card,
.stat,
.steps li {
  background: #fff;
  border: 1px solid var(--accent-line);
}
.section--soft .card,
.section--soft .stat,
.section--soft .steps li,
.section--gray .card,
.section--gray .stat,
.section--gray .steps li { border: 0; }
.calc-item { background: #fff; }

/* =========================================================
   プランカード
   プランごとの列は、どのセクションの上でも中身を白にする。
   比較して読ませる場所なので、下地に色を入れない。
   白い面の上で沈まないよう、コントラストは
   ①上端の太い色帯 ②細い枠線 ③影 の3つでつける。
   ========================================================= */
.plan-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--plan, var(--line));
  box-shadow: 0 2px 14px rgba(17,24,39,.09);
  padding: 1.5rem 1.35rem;
}
.plan-card--pick {
  border: 2px solid var(--plan);
  border-top-width: 5px;
  box-shadow: 0 4px 20px rgba(17,24,39,.14);
  padding: calc(1.5rem - 1px) calc(1.35rem - 1px);
}

/* 濃いグリーンのヒーローの上でも同じ理由で白い縁を付ける（明度差 1.03:1）。 */
.hero .btn--cta { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.22); }

/* 注記・Q&A も同じ扱い。
   枠線は2pxの --accent。2026/09/09 すーさん指示で、薄い --accent-line から変更した。
   薄すぎて枠があることに気づかれず、中身が読まれていなかったため。
   太さ2pxの色付き枠線は .plan-card--pick と同じ、既存のパターン。 */
.note, .qa {
  background: #fff;
  border: 2px solid var(--accent);
}
.section--soft .note, .section--soft .qa,
.section--gray .note, .section--gray .qa { border: 0; }

/* 主導線のボタンは大きく。白文字が濃いオレンジの上で読める大きさにする */
.btn--lg.btn--cta { font-size: 1.1875rem; }
.btn--sm.btn--cta { font-size: 1rem; padding: .5rem 1.15rem; }

/* =========================================================
   目次（機能ページ・よくある質問）
   PCで文字だけが散らばって見えたため、押せる面として並べる。
   行数は変えず、縦には伸ばさない。
   ========================================================= */
.faq-toc { background: transparent; border: 0; padding: 0; margin: 0 0 2.5rem; }
.faq-toc ol { gap: .75rem; }
.faq-toc a {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--accent-line);
  border-radius: .5rem;
  font-size: 1rem; font-weight: 700; color: var(--ink-strong);
}
.faq-toc a::before {
  position: static; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; line-height: 1.6rem; font-size: .8125rem;
}
.faq-toc a:hover {
  background: var(--band); border-color: var(--accent);
  color: var(--accent-dark); text-decoration: none;
}
.section--soft .faq-toc a, .section--gray .faq-toc a { border: 0; }

/* =========================================================
   コラムの記事一覧
   写真を用意できないため、サムネイルは置かず1列のリストにする。
   読む前に中身が分かるよう、タグ・日付・要約まで一覧に出す。
   ========================================================= */
.post-list { list-style: none; margin: 0; padding: 0; }
.post {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 1.5rem; row-gap: .55rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.post:first-child { padding-top: 0; }
.post__body { display: grid; gap: .55rem; }
.post__thumb {
  display: block; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--bg-soft);
}
.post__thumb img { display: block; width: 100%; height: auto; }
@media (max-width: 48rem) {
  .post { grid-template-columns: minmax(0, 1fr); row-gap: .9rem; }
}
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.post__tag {
  background: var(--band); color: var(--accent-dark);
  border-radius: 999px; padding: .2rem .75rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.post__date { font-size: .875rem; color: var(--sub); }
.post h3 { margin: 0; font-size: 1.25rem; line-height: 1.55; }
.post h3 a { color: var(--ink-strong); text-decoration: none; }
.post h3 a:hover { color: var(--accent); text-decoration: underline; }
.post p { margin: 0; font-size: .9375rem; color: var(--ink); }
.post__more { font-size: .9375rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.post__more:hover { text-decoration: underline; }
.post--soon h3 { color: var(--sub); }
.post--soon .post__tag { background: var(--band-gray); color: var(--sub); }

@media (max-width: 60rem) { .faq-toc ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 48rem) {
  .faq-toc ol { grid-template-columns: 1fr; gap: .5rem; }
  .post h3 { font-size: 1.125rem; }
}

/* =========================================================
   改行位置の調整
   見出しとリード文は、行の長さが揃うように折り返す。
   最後の行に1語だけ残るような不自然な改行を防ぐ。
   ========================================================= */
.hero h1,
.page-hero h1,
.sec-head h2,
.cta-final h2 { text-wrap: balance; }

.hero__lead,
.page-hero p,
.sec-head p,
.cta-final p { text-wrap: pretty; }

/* 2026/10/17：h1から br を外して自動改行にしたところ、「まとめ／る、」
   「予約シ／ステム」のように語の途中で割れた。ブラウザは日本語を
   どの文字の間でも改行できると扱うため。文節の切れ目で折り返させる。
   対応していないブラウザは、この指定を無視して従来どおり折り返す（壊れない）。 */
.hero h1,
.page-hero h1 { word-break: auto-phrase; }

/* =========================================================
   コラム記事
   ========================================================= */
.post-crumb { margin: 0 0 .75rem; font-size: .875rem; }
.post-crumb a { color: #dcfce7; text-decoration: none; }
.post-crumb a:hover { color: #fff; text-decoration: underline; }
.post-meta-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 1rem 0 0; font-size: .875rem; color: #dcfce7;
}
.post__tag--onhero { background: rgba(255,255,255,.16); color: #fff; }

/* 本文 */
.post-body > p { line-height: 2; }
/* 2026/09/17：H2と図表の見出しが同じ緑の帯で、しかも図表側が4pxと太かったため、
   見出しが図表の一種に見えていた。帯を持つのはH2だけにし（下の .figure-title /
   .fig figcaption を参照）、H2は帯を太く・文字を大きくする。
   .post-body に限定しているので、トップや料金など他ページのh2は変わらない。 */
.post-body h2 {
  font-size: 1.5rem;
  border-left-width: 6px;
  padding-left: .875rem;
  margin-top: 3.75rem;
  margin-bottom: 1.25rem;
}
.post-body h2:first-of-type { margin-top: 2.5rem; }
/* 2026/09/28：記事にH3が入った（記事12）。本文の太字のリード（p > strong）と
   見分けがつくよう、規定の 1.0625rem より大きくする。帯は付けない。
   帯を持つのはH2だけ、という 09/17 の決めごとは変えない。 */
.post-body h3 { font-size: 1.25rem; margin: 2.75rem 0 .9rem; }

/* 図表 */
.fig { margin: 2rem 0 2.5rem; }
/* 2026/09/17：帯を外した。「図表N：」という語そのものがラベルなので、
   帯がなくても図表だと分かる。帯はH2だけが持つ。 */
.fig figcaption {
  font-size: .9375rem; font-weight: 700; color: var(--sub);
  margin: 0 0 .6rem; padding-left: 0; border-left: 0;
}
.fig-note { margin: 0 0 .75rem; font-size: .875rem; color: var(--sub); }
/* 出典や注記でURLをそのまま載せる箇所。長いURLは途中で折り返す。
   折り返さないと、スマホでページ全体が横スクロールする。 */
.fig-note a { word-break: break-all; }

/* 2026/09/17：プラン名はプランの色で示す（93-95行の定義に合わせる。緑も白黒も使わない）。
   Lite と Pro の列幅を同じにするため、プラン表だけ table-layout を固定にする。 */
.fig th.plan-lite { color: var(--plan-lite); }
.fig th.plan-pro  { color: var(--plan-pro); }
.fig table.plans { table-layout: fixed; }
.fig table.plans th:first-child,
.fig table.plans td:first-child { width: 34%; }
.fig table.plans th:nth-child(n+2),
.fig table.plans td:nth-child(n+2) { width: 33%; }
.fig .table-scroll { margin-bottom: 0; }
.fig .tscroll { margin-bottom: 0; }
.fig th.row-head { text-align: left; white-space: normal; background: var(--bg-soft); }
/* スマホでは、行見出しの列が潰れて1文字ずつ縦に折り返してしまうので、
   最低幅を確保する。表は横に広がるが、横スクロールできることは
   .tscroll のラベルとフェードで分かるようにしてある。 */
@media (max-width: 48rem) {
  .fig th.row-head { min-width: 7.5rem; }
  .fig td, .fig thead th { min-width: 5rem; }
}
/* 2026/10/02：表のヘッダ行と行見出しが同じ色（--bg-soft）で、ヘッダが浮かなかった。
   ヘッダ行だけ一段濃いグレーにする。色はフッターで既に使っている gray-100。 */
.fig thead th { background: #f3f4f6; }

/* 2026/10/02：2列の数値表（項目と値だけ）は、記事幅いっぱいに広げると
   項目名と数値が400px近く離れ、どの数値がどの項目か追えなくなる。
   幅を中身に合わせて中央に置く。狭い画面では従来どおり幅いっぱい。 */
.fig table.kv { width: auto; min-width: min(100%, 26rem); margin-inline: auto; }
/* 合計・結論の行。上に太い罫を引き、面を一段濃くして区切る。 */
.fig tr.total th, .fig tr.total td { border-top: 2px solid #9ca3af; background: #f3f4f6; }

/* =========================================================
   手順の番号リスト（2026/10/02 追加）
   4つ前後の手順を並べるだけのものを表や図にすると、読む手間が増えるだけで
   理解は進まない。番号リストで出し、装飾は枠と番号丸にとどめる。
   図表番号は振らない（図表ではないため）。
   ========================================================= */
.steplist {
  list-style: none; counter-reset: step;
  margin: 1.5rem 0 2rem; padding: .6rem 1.35rem;
  background: #fff; border: 1px solid var(--accent-line); border-radius: 10px;
}
.steplist li {
  counter-increment: step; position: relative;
  padding: .8rem 0 .8rem 3rem; line-height: 1.75;
}
.steplist li + li { border-top: 1px solid var(--line); }
.steplist li::before {
  content: counter(step); position: absolute; left: 0; top: .82rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 48rem) {
  .steplist { padding: .5rem 1rem; }
  .steplist li { padding-left: 2.6rem; }
}
/* 2026/10/02：手順に「結果」が付く場合。手順を太字の行、結果をその下の行に置く。
   図にしても順番を示すだけで、リストと同じ情報しか伝わらないため、図はやめてここへ寄せた。 */
.steplist li b { display: block; font-weight: 700; color: var(--ink-strong); }
.steplist li span { display: block; margin-top: .3rem; color: var(--sub); font-size: .9375rem; }
.steplist li span::before {
  content: "結果"; display: inline-block; margin-right: .5rem;
  padding: .05rem .4rem; border-radius: 3px;
  background: var(--band); color: var(--accent-dark);
  font-size: .75rem; font-weight: 700; vertical-align: .08em;
}
/* 「結果」以外の言葉を出す場合は data-label を付ける。 */
.steplist li span[data-label]::before { content: attr(data-label); }
/* 同じ語が何度も続いて邪魔になる場合は data-label="" で札を出さない。 */
.steplist li span[data-label=""]::before { content: none; }


.chart { background: #fff; border: 1px solid var(--accent-line); border-radius: .5rem; padding: 1rem; }
.chart svg { display: block; width: 100%; height: auto; }

/* =========================================================
   記事のページ送り
   前後の記事がない側は、行ごと出さない。空の箱は置かない。
   ========================================================= */
.pager {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
  margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line);
}
/* 前後の両方があるときだけ左右に並べる（左が前・右が次）。
   片方しかない記事は1列のまま幅100%で出す。
   :has() に対応しない古いブラウザでは従来どおり縦に積まれるだけで、崩れない。 */
@media (min-width: 48.0625rem) {
  .pager:has(.pager__row--prev):has(.pager__row--next) { grid-template-columns: 1fr 1fr; }
  .pager:has(.pager__row--prev):has(.pager__row--next) .pager__row--prev { grid-column: 1; }
  .pager:has(.pager__row--prev):has(.pager__row--next) .pager__row--next { grid-column: 2; }
  .pager:has(.pager__row--prev):has(.pager__row--next) .pager__index { grid-column: 1 / -1; }
}
.pager__row {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.25rem; border-radius: .5rem;
  background: #fff; border: 1px solid var(--accent-line);
  text-decoration: none; transition: background .15s, border-color .15s;
}
.pager__row:hover { background: var(--band); border-color: var(--accent); }
.pager__row--next { flex-direction: row-reverse; text-align: right; }
.pager__arrow {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--band); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
}
.pager__row:hover .pager__arrow { background: var(--accent); color: #fff; }
.pager__body { flex: 1 1 auto; min-width: 0; }
.pager__dir {
  display: block; font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; color: var(--accent);
}
.pager__ttl {
  display: block; font-size: .9375rem; font-weight: 700;
  color: var(--ink-strong); line-height: 1.5;
}
.pager__index {
  justify-self: center; margin-top: .5rem;
  font-size: .9375rem; font-weight: 700; color: var(--accent); text-decoration: none;
}
.pager__index:hover { text-decoration: underline; }

/* ヒーローの「コラム」。コラムトップの見出しラベルと同じ見た目にする */
.hero__eyebrow--link { text-decoration: none; }
.hero__eyebrow--link:hover { background: rgba(255,255,255,.28); }

/* 狭い画面でヘッダーが収まらないため、ロゴ・ボタン・メニューを詰める。
   ロゴ＋申し込みボタン＋メニューで、390px では余白が足りない。 */
@media (max-width: 30rem) {
  .wrap { padding: 0 1.25rem; }
  .brand { font-size: 1.25rem; }
  .site-header__actions { gap: .4rem; }
  .btn--sm.btn--cta { font-size: .9375rem; padding: .45rem .8rem; }
  .nav-toggle { padding: .375rem .6rem; font-size: .8125rem; }
}

/* =========================================================
   コラム記事の文字色
   長く読ませるページなので、本文をサイト標準より一段濃くする。
   （#1f2937 は 14.7:1、#111827 は 17.7:1）
   図表の前提など、補助の文字も薄くしすぎない。
   ========================================================= */
.post-body,
.post-body > p,
.post-body li,
.post-body td,
.post-body th { color: var(--ink-strong); }
.post-body .fig-note { color: var(--ink); }
.post-body .fig-note a { overflow-wrap: anywhere; }
.post-body .note p { color: var(--ink-strong); }

/* --- 図表SVG（記事内の図解）------------------------------------------
   見出しは画像の上、本文と同じ左寄せ。画像は本文幅に合わせて縮小し、
   スマートフォンでも横スクロールさせない。 */
/* 2026/09/17：.fig figcaption と同じ理由で帯を外した。 */
.figure-title {
  margin: 2rem 0 .625rem;
  padding-left: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--sub);
}
.figure-title strong { font-weight: 700; }
.post-body figure:not(.fig) { margin: 0 0 2.5rem; }
.post-body figure:not(.fig) picture { display: block; }
.post-body figure:not(.fig) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--accent-line);
  border-radius: .5rem;
  background: #fff;
}
/* 画面キャプチャ（2026/09/10 WBS-0235）。
   スマホ画面のキャプチャは 780x1688 と縦に長い。本文の幅いっぱいに広げると
   1枚で画面2つ分の高さになり、読み手がスクロールで迷子になる。幅を抑えて中央に置く。 */
.post-body figure.shot--sp img { max-width: 20rem; margin-inline: auto; }

/* 語の途中で折り返さない。カタカナ語は日本語の折り返し規則ではどこでも切れてしまい、
   「オン／ライン」のような読みにくい改行が出るため、見出しでだけ使う（2026/09/11）。 */
.nb { white-space: nowrap; }

/* 規約・表記どうしの案内。運営者情報から法令に基づく表記へ送る。 */
.doc-links { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--sub); }
.doc-links a { font-weight: 700; }

/* 販促ページ内の図解。コラムの図表と違い番号は付けない。 */
.page-fig { margin: 1.75rem 0 0; }
.page-fig picture { display: block; }
.page-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--accent-line);
  border-radius: .5rem;
  background: #fff;
}

/* 記入用の空欄セル */
.fig td.blank { background: var(--bg-soft); min-width: 6rem; }

/* --- 記事内ツール（読者が入力して使うもの。図表とは別物として見せる）---- */
.tool {
  margin: 2rem 0 2.5rem;
  padding: 1.35rem 1.35rem 1.15rem;
  background: #fff;
  border: 2px solid var(--accent-line);
  border-radius: .75rem;
  box-shadow: 0 2px 14px rgba(17,24,39,.06);
}
.tool__badge {
  display: inline-block; margin: 0 0 .6rem; padding: .2rem .7rem;
  font-size: .8125rem; font-weight: 700; line-height: 1.6;
  color: #fff; background: var(--accent); border-radius: 999px;
}
.tool__title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; color: var(--ink-strong); }
.tool__lead { margin: 0 0 1.1rem; font-size: .9375rem; line-height: 1.8; color: var(--ink); }
.tool .table-scroll { margin-bottom: 0; }
.tool .tscroll { margin-bottom: 0; }
.tool th.row-head { text-align: left; white-space: normal; background: var(--bg-soft); }

/* 費用シミュレーター（コラム記事01） */
.calc-field { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.calc-field input {
  width: 6rem; padding: .4rem .55rem; text-align: right;
  font-size: 1rem; font-family: inherit; color: var(--ink-strong);
  background: #fff; border: 1px solid var(--line); border-radius: .375rem;
}
.calc-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.calc-unit { font-size: .875rem; color: var(--sub); }
.calc-out {
  display: inline-block; min-width: 6rem; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-strong);
}
.calc-out--strong { font-weight: 700; font-size: 1.0625rem; color: var(--accent-dark); }
.tool .calc-total th, .tool .calc-total td { background: var(--accent-soft); }
.calc-msg { margin: .9rem 0 0; font-size: .9375rem; line-height: 1.7; color: var(--ink); }
.calc-msg:empty { display: none; }
.calc-actions { margin: .9rem 0 0; }

/* ツールはスマホで横スクロールさせない。表を1項目ずつのカードに積み替える。 */
@media (max-width: 40rem) {
  .tool { padding: 1.1rem 1rem 1rem; }
  .tool .table-scroll { overflow-x: visible; }
  .tool table { display: block; width: 100%; border: 0; }
  .tool thead { display: none; }
  .tool tbody { display: block; }
  .tool tbody tr {
    display: block; margin: 0 0 .6rem; padding: .8rem .9rem;
    background: #fff; border: 1px solid var(--line); border-radius: .5rem;
  }
  .tool tbody tr:last-child { margin-bottom: 0; }
  .tool tbody th.row-head {
    display: block; padding: 0 0 .55rem; border: 0; background: transparent;
    font-size: .9375rem; font-weight: 700;
  }
  .tool tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .3rem 0 0; border: 0; text-align: right;
  }
  .tool tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: .8125rem; font-weight: 400; color: var(--sub); text-align: left;
  }
  .tool .calc-total { border-color: var(--accent-line); background: var(--accent-soft); }
  .tool .calc-total th, .tool .calc-total td { background: transparent; }
  .calc-field input { width: 5.5rem; }
  .calc-out { min-width: 0; }
}

/* LPのメリットカードから、対応するコラム記事へ送る導線。
   .card はもともと縦フレックスなので、margin-top:auto でカード下端に揃う。 */
.card__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .85rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.card__more:hover { text-decoration: underline; }

/* =========================================================
   2026/09/08　デザイン調整（すーさん承認分）
   参考：カラーミーショップ（https://shop-pro.jp）
   HTMLの変更は index.html の8箇所のみ。他ページはCSSだけで反映される。
   ========================================================= */

/* ---------- 1. 面に使う緑を1色に統一する ----------
   これまで告知バー #166534（白文字7.1:1）、Hero・CTA #188038（同5.0:1）と
   濃さが違う緑が上下に並んでいた。さらに #188038 は白文字が5.0:1しかなく、
   リード文の #dcfce7 は4.57:1で基準ぎりぎりだった。これが
   「コントラストが低い・不自然」の原因。面の緑を #0d4f26 に統一する。
   → 白文字 9.71:1、リード文 8.98:1。リンク色 #15803d は白地用なので変更しない。 */
.notice-bar,
.hero,
.page-hero,
.section--cta {
  background-color: var(--cta-band);
  background-image: linear-gradient(158deg, #115c2c 0%, #0d4f26 55%, #093c1d 100%);
}
.hero__lead,
.page-hero p,
.cta-final p,
.hero .hero__eyebrow,
.hero__facts li { color: #eafaef; }
.hero__note { color: #cdeed8; }

/* ---------- 2. Heroの見出しを大きくする ---------- */
/* 2026/09/11 見出しの折り返し対策：2.75remでは1行12字までしか入らず、
   「オン／ライン」のように語の途中で割れて4行になっていた。2.375remで2行に収まる。 */
.hero h1 { font-size: 2.375rem; line-height: 1.35; }

/* ---------- 3. Heroの条件は、チェック印＋文字で置く ----------
   枠線のピルにすると、隣のボタンと見分けがつかなくなる。
   このサイトの約束：塗りつぶし＝押せる／塗りなし＝押せない。 */
.hero__facts {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
}
.hero__facts li { position: relative; padding-left: 1.4rem; font-size: .875rem; }
.hero__facts li::before {
  content: ""; position: absolute; left: .15rem; top: .38rem;
  width: .5rem; height: .8rem;
  border: solid #86efac; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hero__facts b { color: #fff; font-size: .9375rem; margin-left: .15rem; }

/* ---------- 4. ボタンを角丸のピルにして、Heroでは塗りにする ---------- */
.btn { border-radius: 999px; }
.btn--lg { padding: .95rem 2rem; font-size: 1.0625rem; }
.hero .btn--lg { box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 8px 18px -6px rgba(0,0,0,.28); }
.hero .btn--ghost { background: #fff; border-color: #fff; color: var(--accent-dark); }
.hero .btn--ghost:hover { background: #eaf5ee; color: var(--accent-dark); }

/* ---------- 5. セクション見出しに英語ラベル。横線は残す ---------- */
.sec-en {
  display: block;
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent); margin: 0 0 .6rem;
  text-transform: uppercase;
}
.sec-head h2 { font-size: 2rem; letter-spacing: -.02em; }

/* ---------- 6. カードのアイコンを濃い緑地＋白抜きに。影と角丸で持ち上げる ---------- */
.card__icon { background: var(--accent-dark); }
.card__icon svg { stroke: #fff; }
.card, .plan-card, .stat {
  border-radius: .875rem;
  box-shadow: 0 1px 2px rgba(15,61,46,.06), 0 8px 20px -6px rgba(15,61,46,.14);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover, .plan-card:hover {
  box-shadow: 0 4px 8px rgba(15,61,46,.08), 0 18px 34px -8px rgba(15,61,46,.22);
  transform: translateY(-3px);
}

/* ---------- 7.「こんなお悩みはありませんか」を吹き出しにする ----------
   直す理由：チェック印は「達成・OK」の記号で悩みの一覧に合わない／
   赤 #dc2626 はサイトに無い5色目だった／罫線だけの1列は利用規約と同じ見た目。
   使用は index.html と agency.html の2ページのみ。 */
.checks {
  max-width: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.25rem;
}
.checks li {
  position: relative;
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 0; padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(15,61,46,.05), 0 10px 24px -10px rgba(15,61,46,.16);
  font-size: 1rem; line-height: 1.75;
}
.checks li::before {          /* 丸の中に「！」 */
  content: "";
  position: static; flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  margin-top: .1rem;
  border: 0; transform: none; border-radius: 50%;
  background: #fdf0e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23c2410c' stroke='none'/%3E%3C/svg%3E") center/1.35rem no-repeat;
}
.checks li::after {           /* 吹き出しの尻尾 */
  content: "";
  position: absolute; left: 2.4rem; bottom: -.65rem;
  width: 1.2rem; height: 1.2rem;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

/* ---------- 8. 画面が狭いときの調整 ---------- */
@media (max-width: 60rem) {
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 48rem) {
  .hero h1 { font-size: 1.5rem; }
  .sec-head h2 { font-size: 1.5rem; }
  .sec-en { font-size: .75rem; }
  .checks { grid-template-columns: 1fr; gap: 1.75rem; }
  .checks li { padding: 1.15rem 1.25rem; font-size: .9375rem; }
}

/* =========================================================
   2026/09/08　追加調整（すーさん指示）
   ========================================================= */

/* ---------- 1. 章見出しのアイコンのコントラストを上げる ----------
   淡い緑地 #f2faf4 は白い紙の上でほぼ見えず、アイコンの四角が消えていた。
   メリットのカードと同じ「濃い緑地＋白抜き」に揃える（白抜きで 7.1:1）。
   対象：faq.html の .sec-icon、industries.html の .ind-group__icon */
.sec-icon, .ind-group__icon { background: var(--accent-dark); }
.sec-icon svg, .ind-group__icon svg { stroke: #fff; }

/* ---------- 2. 最終CTAの「1,000円」を黄色にする ----------
   濃い緑 #0d4f26 の上で 7.36:1。黄色を使うのはここだけ（2026/10/17以降）。 */
.cta-final h2 em { font-style: normal; color: #fde047; }

/* ---------- 3. 図解とカードの下に余白を足す ----------
   .page-fig は上だけの余白で、次の本文と接していた。
   .cards も下の余白が無く、次の見出しと詰まっていた。 */
.page-fig { margin-bottom: 2rem; }
.cards { margin-bottom: 2rem; }
.cards:last-child { margin-bottom: 0; }

/* カードの中で、コラムへのリンクが本文と接していたので離す */
.card__more { margin-top: .35rem; }

/* =========================================================
   2026/09/08　カードと手順：アイコン（番号）の右に見出しを置く
   これまでアイコンの下に見出しがあり、アイコンの右が空いていた。
   1行目を「アイコン｜見出し」の2列にし、本文は下に全幅で置く。
   ========================================================= */
.card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  row-gap: .6rem;
  align-items: center;
}
.card > * { grid-column: 1 / -1; }                     /* 既定は全幅 */
.card > .card__icon { grid-column: 1; grid-row: 1; }
.card > .card__icon ~ h3 { grid-column: 2; grid-row: 1; }
/* 「ここだけ手間がかかります」のような注記がアイコンと見出しの間に入るカードがあるため、
   隣接（+）ではなく後方（~）で拾う。注記は下の行に全幅で落ちる。 */
/* グリッドでは align-self が縦方向になるため、横位置は justify-self で指定し直す */
.card .tag-plan, .card__note { justify-self: start; }

/* 導入の流れ：番号の丸を絶対配置から外し、見出しの左へ並べる */
.steps li {
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  row-gap: .45rem;
  align-items: center;
}
.steps li::before {
  position: static;
  grid-column: 1; grid-row: 1;
  margin: 0;
}
.steps li h3 { grid-column: 2; grid-row: 1; margin: 0; }
.steps li p { grid-column: 1 / -1; }

/* =========================================================
   2026/09/09　料金の比較表と、対応業種ページの作り直し
   ========================================================= */

/* ---------- 料金の比較表 ----------
   これまで小見出しが表と切り離された小さな黒文字で、7回繰り返されても
   どこまでが1つのまとまりか分からなかった。見出しを表の上端に密着させて
   1つの塊に見せる。`.cmp-cat` は pricing.html の h3 に付けたクラス。
   共通スクリプトが .table-scroll を .tscroll で包むため、両方を受ける。 */
.cmp-cat {
  margin: 2.5rem 0 0;
  padding: .8rem 1.25rem;
  background: var(--accent-dark);
  color: #fff;
  font-size: 1rem;
  letter-spacing: .02em;
  border-radius: .75rem .75rem 0 0;
}
.cmp-cat + .table-scroll,
.cmp-cat + .tscroll {
  margin: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 .75rem .75rem;
  background: #fff;
  overflow: hidden;
}
.cmp thead th {
  position: static;          /* 親が overflow で囲まれており sticky は効かない。誤解を招くため外す */
  background: #fff;
  padding: .85rem .75rem;
  border-bottom: 2px solid var(--line);
}
.cmp thead th.cmp-plan { font-size: 1rem; }
.cmp th.cmp-feature { padding: .8rem 1.25rem; }
.cmp td { padding: .8rem .5rem; }
.cmp tbody tr + tr th,
.cmp tbody tr + tr td { border-top: 1px solid var(--line); }
.cmp tbody tr:hover th,
.cmp tbody tr:hover td { background: #f7faf8; }

/* Pro（おすすめ）の列を薄く塗り、プランカードの強調と一致させる */
.cmp thead th:nth-child(3),
.cmp tbody td:nth-child(3) { background: #fdf5f0; }
.cmp tbody tr:hover td:nth-child(3) { background: #fbeee6; }

/* ○ を大きな緑のチェックに、— を薄く。約60行を目で追う負担を下げる */
.yes { font-size: 0; }
.yes::before { content: "✓"; font-size: 1.125rem; font-weight: 700; color: var(--accent); }
.no { color: #9ca3af; }

/* ---------- 対応業種ページ ----------
   186業種が13グループに全部開いた状態で並び、自分の業種を探すには
   目視スクロールしかなかった。絞り込みを付ける。 */
.ind-find {
  background: #fff;
  border: 1px solid var(--accent-line);
  border-radius: .875rem;
  padding: 1.25rem 1.35rem 1.1rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 1px 2px rgba(15,61,46,.05), 0 8px 20px -8px rgba(15,61,46,.12);
}
.ind-find__label {
  display: block; margin: 0 0 .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-dark);
}
.ind-find__input {
  width: 100%;
  padding: .8rem 1rem .8rem 2.6rem;
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .625rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") .85rem center/1.15rem no-repeat;
}
.ind-find__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.ind-find__count { margin: .65rem 0 0; font-size: .875rem; color: var(--sub); }

/* グループへの飛び先。押せるので枠線のピルでよい */
.ind-jump { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem; padding: 0; }
.ind-jump[hidden] { display: none; }   /* display:flex が [hidden] に勝つため明示する */
.ind-jump a,
.pre-faq__jump a {
  display: inline-block;
  padding: .35rem .8rem;
  font-size: .8125rem;
  text-decoration: none;
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.ind-jump a:hover,
.pre-faq__jump a:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* 業種のタグは押せない。枠線をやめて塗りだけにする（塗り＝押せる、の約束を守る） */
.ind-list li { background: #fff; border: 0; color: var(--ink); border-radius: .5rem; }

.ind-group { scroll-margin-top: 7rem; }
.ind-group[hidden] { display: none; }
.ind-list li[hidden] { display: none; }

/* =========================================================
   2026/09/09　比較表の追加（すーさん指示）
   ・ヘッダ行（機能／Lite／Pro／Premium）は白のまま。
     緑にすると、すぐ上のカテゴリ帯の緑と2段重なり、
     ブランドカラーの見せ場が薄まる。緑は「カテゴリ帯」に集約する。
   ・プランの色分けを強めて、3プランの違いを立てる。
   ========================================================= */

/* プランの色は、ヘッダの「下」の罫線に置く。
   上に置くと「機能」列だけ色が無く、線が途中から始まって
   ヘッダがずれて見えた（2026/09/09 すーさん指摘）。
   下罫にすると「機能」列のグレーと繋がって1本の線になる。 */
.cmp thead th.cmp-plan {
  border-top: 0;
  border-bottom: 4px solid var(--plan);
  font-size: 1.0625rem;
  padding-bottom: .7rem;
}
.cmp thead th.cmp-feature { border-bottom: 4px solid var(--line); }
/* Proの薄いオレンジが何を意味するかを文字で書く。色だけで意味を持たせない。
   文言は「基本のプラン」ではなく「おすすめ」。2026/09/09 すーさん指摘：
   基本の予約管理はLiteでできる。ProとPremiumは機能の追加と制限の緩和であり、
   Proを「基本」と書くとLiteが劣って見える。 */
.cmp thead th.cmp-plan--pro::after {
  content: "おすすめ";
  display: block;
  width: fit-content;
  margin: .35rem auto 0;
  padding: .12rem .5rem;
  background: var(--cta);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 3px;
}

/* カテゴリへの飛び先と、絞り込みの切り替え */
.cmp-tools { margin: 0 0 1.25rem; }
.cmp-nav { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; padding: 0; }
.cmp-nav a {
  display: inline-block;
  padding: .35rem .8rem;
  font-size: .8125rem;
  text-decoration: none;
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.cmp-nav a:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.cmp-only {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: #fff;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: .875rem; font-weight: 700;
  color: var(--accent-dark);
  cursor: pointer;
}
.cmp-only[hidden] { display: none; }   /* display:inline-flex が [hidden] に勝つため明示する */
.cmp-only input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }
.cmp-only__count { font-style: normal; font-weight: 400; font-size: .8125rem; color: var(--sub); }

.cmp-cat { scroll-margin-top: 7.5rem; }
.cmp-cat[hidden] { display: none; }

/* ---------- カードの中の箇条書き ----------
   料金プランの「月額利用料」で使う。素の <ul> の黒丸だと、
   サイトの他の一覧（吹き出し・カード）と揃わず、だらしなく見えた。 */
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.card-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--ink);
}
.card-list li::before {
  content: "";
  position: absolute; left: .1rem; top: .5rem;
  width: .45rem; height: .75rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* セクションの締めの1行。別ページへの案内をボタンにせず、文の中のリンクで置く */
.sec-foot { margin: 1.5rem 0 0; font-size: .9375rem; color: var(--sub); text-align: center; }
.sec-foot a { font-weight: 700; }

/* ---------- 料金の考え方（pricing.html） ----------
   もとは3つのプランの「上」に置いていたが、目立たず読まれない状態だった。
   カードの下へ移し（価格を見たあとの「本当にこれだけか」に答える位置）、
   見た目はサイト共通の .note のまま、枠線の色だけ変えて目を留める。
   2026/09/09 すーさん指示：他で使っていない例外デザインにはしない。
   太さ2pxはプランカードの強調 .plan-card--pick と同じで、既存のパターン。 */


/* ===== 記事を読み終えた人の導線（2026/09/09 すーさん承認） =====
   .reco（あわせて読みたい）を廃止し、2つのブロックに分けた。

   1) .next  緑の面。サービスへの3枚。
      本文の続きに見えないよう、画面幅いっぱいの面で物理的に切る。
      見出しで区切ると記事のh2と同じに見えて読み飛ばされるため。
      枠線で囲わず、白いカード＋影で要素を立てる。
   2) .more  白地。ほかのコラムへ。
      面が変わることで「製品を見る」と「記事を読む」を別の用件として分ける。

   このブロックに更新の必要な数字（業種数・金額）は書かない。
   変わるたびに11記事すべてを直すことになるため、数字はリンク先に持たせる。 */
.next {
  margin: 3.5rem calc(50% - 50vw) 0;
  padding: 2.75rem calc(50vw - 50%) 3rem;
  background: var(--band);
  border-top: 1px solid var(--accent-line);
}
.next__inner { max-width: var(--wrap-text); margin: 0 auto; text-align: center; }
.next .sec-en { display: block; margin-bottom: .4rem; }
.next h2 {
  font-size: 1.625rem; margin: 0 0 .55rem; padding: 0; border: 0;
  color: var(--ink-strong); letter-spacing: -.01em;
}
.next__lead { margin: 0 0 1.9rem; font-size: 1rem; color: var(--ink); }
.next__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; text-align: left; }
.next__card {
  display: block; background: #fff; border: 0; border-radius: .875rem;
  padding: 0 0 1.25rem; overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,61,46,.06), 0 8px 20px -8px rgba(15,61,46,.16);
  transition: box-shadow .18s ease, transform .18s ease;
}
.next__card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(15,61,46,.08), 0 18px 32px -10px rgba(15,61,46,.24); }
/* サービスページのOG画像。白地＋緑のアイコンで、コラムのOG（緑地＋白抜き）と
   背景色が逆になるため、リンク先がサービスかコラムかを色で見分けられる。
   カードが白なので、下側に罫線を1本入れて画像の下端を示す。 */
.next__thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  border-bottom: 1px solid var(--line); margin-bottom: 1.05rem;
}
.next__q { display: block; padding: 0 1.25rem; font-size: .8125rem; color: var(--sub); margin-bottom: .35rem; }
.next__a { display: block; padding: 0 1.25rem; font-size: 1.0625rem; font-weight: 700; color: var(--accent-dark); line-height: 1.5; }
.next__note { display: block; padding: 0 1.25rem; margin-top: .4rem; font-size: .8125rem; color: var(--sub); }

/* サムネイルは画面幅で出し分ける（<picture>）。
   PC   … OG画像。緑地に白抜きでコントラストが強く、目に入る。縦横比は実寸の1200x630。
   スマホ… 記事ごとのアイコンSVG。横並びの小さい枠だとOGの文字が読めずノイズになるため、
           形だけで話題が分かるアイコンに差し替える。1本1〜2KBで通信量も減る。 */
.more { margin: 3rem 0 0; }
.more__title {
  font-size: 1.125rem; margin: 0 0 1.1rem; padding: 0 0 .6rem;
  border: 0; border-bottom: 2px solid var(--accent-line);
  color: var(--sub); font-weight: 700; letter-spacing: .02em;
}
.more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* 2026/09/10 すーさん指示：白地だとリンクだと気づかれないため、面をライトグリーンにする。
   ホバーで白へ反転させ、押せることを示す（通常時と反転させたほうが変化に気づきやすい）。 */
.more__card {
  display: block; height: 100%; text-decoration: none; color: inherit;
  background: var(--band); border: 1px solid var(--accent-line);
  border-radius: .75rem; padding: .7rem .7rem 1rem;
  transition: background .15s ease, border-color .15s ease, box-shadow .18s ease;
}
.more__card:hover { background: #fff; border-color: var(--accent); box-shadow: 0 10px 22px -12px rgba(15,61,46,.28); }
.more__pic { display: block; margin-bottom: .6rem; }
.more__thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  border-radius: .5rem; background: #fff;
  border: 1px solid var(--accent-line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.more__card:hover .more__thumb { border-color: var(--accent); }
.more__tag { display: block; font-size: .75rem; color: var(--sub); margin-bottom: .2rem; }
.more__ttl { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.55; color: var(--ink-strong); }
.more__card:hover .more__ttl { color: var(--accent-dark); text-decoration: underline; }
.more__all { margin: 1.5rem 0 0; text-align: right; font-size: .875rem; }
.more__all a { font-weight: 700; }
.more__all a::after { content: " \2192"; }
@media (max-width: 48rem) {
  .next { padding: 2rem 1.5rem 2.25rem; }
  .next h2 { font-size: 1.3125rem; }
  .next__lead { font-size: .9375rem; }
  .next__cards { grid-template-columns: 1fr; }
  /* スマホは縦1列だと1記事が縦に長くなるので、サムネイル左・文字右に並べる */
  .more__list { grid-template-columns: 1fr; gap: .9rem; }
  .more__card { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: .85rem; align-content: start; }
  .more__pic { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; align-self: start; }
  .more__thumb { aspect-ratio: 16 / 9; }   /* スマホのアイコンSVGは480x270 */
  .more__tag { grid-column: 2; grid-row: 1; margin-bottom: .15rem; }
  .more__ttl { grid-column: 2; grid-row: 2; font-size: .875rem; }
}


/* ===== お問い合わせの前に（contact.html）=====
   2026/09/09 すーさん指摘：緑の枠 + 塗りボタンで置いていたが、
   送信ボタンと塗りボタンが2つ並んで主導線が分からず、見た目もだらしなかった。
   「FAQを見てください」と指示するのをやめ、よくある質問そのものを3つ出して
   直接そこへ飛ばす。塗りボタンは送信だけにする（塗り＝押せる、の約束）。 */
.pre-faq {
  background: var(--band-gray); border: 0; border-radius: .75rem;
  padding: 1.2rem 1.35rem 1.35rem; margin: 0 0 2.25rem;
}
.pre-faq__lead { margin: 0 0 .85rem; font-size: .9375rem; font-weight: 700; color: var(--ink-strong); }
.pre-faq__jump { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.pre-faq__jump li { margin: 0; }
.pre-faq__all { margin: .95rem 0 0; font-size: .8125rem; }
.pre-faq__all a { font-weight: 700; }
.pre-faq__all a::after { content: " \2192"; }

/* ===== 記事途中の関連コラム（2026/09/09 すーさん承認）=====
   記事末の導線まで読まずに離脱する人へ、途中で別のコラムを見せる。
   記事のh2と同じ形にすると読み飛ばされるため、見出しには見せない。
   塗りボタンにもしない（塗り＝主導線、は申し込みと送信のためにとっておく）。
   置き場所は見出しの直前。直後だと見出しと本文が切り離される。 */
.inread { margin: 2.25rem 0; }
.inread a {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem;
  background: var(--band-gray); border-radius: .625rem;
  padding: .85rem 1.1rem; text-decoration: none;
}
.inread a:hover { background: var(--band); }
.inread__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--accent-dark); border-radius: 999px; padding: .2rem .6rem;
  white-space: nowrap;
}
.inread__ttl { font-size: .9375rem; font-weight: 700; color: var(--accent-dark); line-height: 1.6; }
.inread__ttl::after { content: " \2192"; }
.inread a:hover .inread__ttl { text-decoration: underline; }
@media (max-width: 30rem) {
  .inread a { grid-template-columns: 1fr; gap: .4rem; }
  .inread__label { justify-self: start; }
}

/* ===== お問い合わせ種別を選んだときの案内（contact.html・2026/09/09 開発依頼）=====
   種別を選んだ時点で、その場で答えが出るものを出す。
   ページ上部の .pre-faq がグレーの面なので、こちらは淡い緑にして役割を分ける。
   上＝フォームを始める前の人向け、ここ＝種別を選んだ人への文脈つきの答え。 */
.cat-help {
  margin: -.4rem 0 1.6rem;
  padding: .95rem 1.1rem 1rem;
  background: var(--band);
  border-left: 4px solid var(--accent);
  border-radius: 0 .5rem .5rem 0;
}
.cat-help[hidden] { display: none; }
.cat-help__list { list-style: none; margin: 0; padding: 0; }
.cat-help__list li { margin: 0 0 .45rem; padding-left: 1.1rem; position: relative; font-size: .875rem; line-height: 1.7; color: var(--ink-strong); }
.cat-help__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.cat-help__list li:last-child { margin-bottom: 0; }
.cat-help__list a { font-weight: 700; white-space: nowrap; }
.cat-help__list a::after { content: " \2192"; }
.cat-help__foot { margin: .75rem 0 0; font-size: .8125rem; color: var(--sub); }

/* ===== Hero直下のお知らせ（2026/09/10 すーさん承認） =====
   告知バー（notice-bar）の代わりに置く。告知バーは同じ話が2か所に出て
   どちらも読まれなくなるため撤去した。
   直上のHeroが緑なので、この面は白にして「面が切り替わった」と分かるようにする。
   面に使う緑はHeroと最終CTAに集約するルールがあるため、ここで緑を使うのはラベルのピルだけ。
   件数は2件まで。3件以上並べると流し読みの対象になり、告知バーと同じ扱いになる。 */
.news {
  padding: 2.5rem 0 2.75rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.news__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 1.1rem; padding: 0 0 .6rem; border-bottom: 2px solid var(--accent-line);
}
.news__title {
  font-size: 1.125rem; margin: 0; padding: 0; border: 0;
  color: var(--sub); font-weight: 700;
}
.news__all { font-size: .8125rem; font-weight: 700; color: var(--accent); white-space: nowrap; text-decoration: none; }
.news__all::after { content: " \2192"; }
.news__all:hover { text-decoration: underline; }
.news__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.news__link {
  display: block; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: .875rem;
  padding: 1.15rem 1.25rem 1.25rem; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,61,46,.06), 0 8px 20px -8px rgba(15,61,46,.16);
  transition: box-shadow .15s ease, transform .15s ease;
}
.news__link:hover {
  box-shadow: 0 2px 4px rgba(15,61,46,.10), 0 14px 28px -10px rgba(15,61,46,.24);
  transform: translateY(-1px);
}
.news__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.news__label {
  font-size: .6875rem; font-weight: 700; color: #fff; background: var(--accent-dark);
  border-radius: 999px; padding: .2rem .65rem; white-space: nowrap;
}
.news__date { font-size: .75rem; color: var(--sub); }
.news__ttl {
  display: block; font-size: 1.0625rem; font-weight: 700;
  color: var(--accent-dark); line-height: 1.5; margin-bottom: .45rem;
}
.news__sum { display: block; font-size: .875rem; color: var(--ink); line-height: 1.75; }
.news__more { display: inline-block; margin-top: .75rem; font-size: .8125rem; font-weight: 700; color: var(--accent); }
.news__more::after { content: " \2192"; }

/* お知らせ一覧ページ（news.html）。個別ページは作らず、このページへ縦に積む。 */
.news-entry { scroll-margin-top: 5rem; padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.news-entry:first-of-type { padding-top: 0; }
.news-entry:last-of-type { padding-bottom: 0; border-bottom: 0; }
.news-entry__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.news-entry h2 { font-size: 1.375rem; margin: 0 0 .85rem; padding: 0; border: 0; }
.news-entry p { margin: 0 0 .9rem; }
.news-entry p:last-child { margin-bottom: 0; }

@media (max-width: 48rem) {
  .news { padding: 2rem 0 2.25rem; }
  .news__list { grid-template-columns: 1fr; gap: .85rem; }
  .news__ttl { font-size: 1rem; }
  .news-entry h2 { font-size: 1.1875rem; }
}