/* AIKATA トップ：「定額制のWEBマーケティング支援とは」（2026-10-22）
   検索語「定額制 WEBマーケティング支援」の説明と、スポット依頼との比べ表。見出しの型は value.css と同じ */

html body.aikata .fx {
  --fx-ink: #1b1e2b;
  --fx-sub: #3d4455;
  --fx-muted: #55607a;
  --fx-blue: #0f64ae;
  --fx-line: #e2e6ec;
  padding: clamp(64px, 8vw, 120px) 0;
  background: #fff;
  color: var(--fx-ink);
}
html body.aikata .fx-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
html body.aikata .fx-eyebrow { grid-column: 1 / -1; margin: 0; font: 700 15px/1.6 'Barlow', sans-serif; letter-spacing: .12em; color: var(--fx-blue); }
html body.aikata .fx-title { margin: 0; font: 700 clamp(26px, 2.8vw, 40px)/1.5 'Noto Sans JP', sans-serif; letter-spacing: .04em; color: var(--fx-ink); text-align: left; }
html body.aikata .fx-title span { display: inline-block; }
html body.aikata .fx-lead { margin: 0; font-size: 16px; line-height: 2; letter-spacing: .04em; color: var(--fx-sub); }

/* 比べ表：AIKATA の列だけ青で囲む */
html body.aikata .fx-table { overflow-x: auto; border-radius: 24px; border: 1px solid var(--fx-line); }
html body.aikata .fx-table:focus-visible { outline: 3px solid var(--fx-blue); outline-offset: 3px; }
html body.aikata .fx-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.75; }
html body.aikata .fx-table th, html body.aikata .fx-table td { padding: 18px 22px; border-bottom: 1px solid var(--fx-line); text-align: left; vertical-align: top; }
html body.aikata .fx-table tbody tr:last-child > * { border-bottom: 0; }
html body.aikata .fx-table thead th { padding-top: 22px; padding-bottom: 22px; font-size: 16px; font-weight: 700; color: var(--fx-sub); background: #f4f6f9; }
html body.aikata .fx-table thead th.is-us { background: var(--fx-blue); color: #fff; }
html body.aikata .fx-table thead th small { display: block; font: 800 13px/1.4 'Barlow', sans-serif; letter-spacing: .1em; opacity: .85; }
html body.aikata .fx-table tbody th { width: 18%; font-weight: 700; color: var(--fx-ink); white-space: nowrap; }
html body.aikata .fx-table td { width: 36%; color: var(--fx-muted); }
html body.aikata .fx-table td.is-us { width: 46%; background: #eef5fc; color: var(--fx-ink); font-weight: 700; }

/* 定額制のよいところ */
html body.aikata .fx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
html body.aikata .fx-points li { margin: 0; padding-top: 18px; border-top: 2px solid var(--fx-ink); }
html body.aikata .fx-points b { display: block; margin-bottom: 6px; font: 700 18px/1.6 'Noto Sans JP', sans-serif; letter-spacing: .04em; color: var(--fx-ink); }
html body.aikata .fx-points span { font-size: 15px; line-height: 1.9; color: var(--fx-sub); }
html body.aikata .fx-more { margin: clamp(28px, 3vw, 40px) 0 0; }
html body.aikata .fx-more a { display: inline-flex; align-items: center; gap: 12px; color: var(--fx-blue); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
html body.aikata .fx-more a span { transition: transform .4s cubic-bezier(.43, .05, .17, 1); }
html body.aikata .fx-more a:hover span { transform: translateX(4px); }

@media (max-width: 900px) {
  html body.aikata .fx-head { grid-template-columns: minmax(0, 1fr); }
  html body.aikata .fx-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html body.aikata .fx-title { font-size: clamp(23px, 6.4vw, 28px); }
  /* 比べ表は、項目ごとのカードに組み替える（横にスクロールしないと AIKATA の列が見えないため） */
  html body.aikata .fx-table { overflow: visible; border: 0; border-radius: 0; }
  html body.aikata .fx-table table, html body.aikata .fx-table tbody, html body.aikata .fx-table tr,
  html body.aikata .fx-table th, html body.aikata .fx-table td { display: block; width: auto; min-width: 0; }
  html body.aikata .fx-table tbody th, html body.aikata .fx-table td, html body.aikata .fx-table td.is-us { width: auto; }
  html body.aikata .fx-table thead { display: none; }
  html body.aikata .fx-table tbody { display: grid; gap: 12px; }
  html body.aikata .fx-table tr { overflow: hidden; border: 1px solid var(--fx-line); border-radius: 16px; }
  html body.aikata .fx-table tbody th { padding: 12px 16px; background: #f4f6f9; border-bottom: 1px solid var(--fx-line); font-size: 15px; }
  html body.aikata .fx-table td { padding: 12px 16px; border-bottom: 0; font-size: 14px; }
  html body.aikata .fx-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--fx-muted); }
  html body.aikata .fx-table td.is-us::before { color: var(--fx-blue); }
  html body.aikata .fx-table tbody tr:last-child > * { border-bottom: 0; }
  html body.aikata .fx-table tbody th { border-bottom: 1px solid var(--fx-line) !important; }
}