/* ============================================================
   KABUKI ai-marketing.css（AI-Driven デジタルマーケティングページ専用）
   Figma 確定版: node 658:4797（KABUKI_AI-Driven_PC, file iD8aOsIVM3ceKGpTXKvpkh）
   色・フォント値は必ず tokens.css の var() を参照する。
   tokens.css に無い局所色（Figma実測）はこのファイルの :root に追加する。
   2026-07-29 get_design_context によるnode単位の全面突合で多数のフィデリティ差分を修正。
   ============================================================ */

:root {
  /* 出典: Figma 変数「Backgrounds/Secondary」（get_variable_defs 実測、tokens.css未収録）。
     課題カードの背景に使用。--color-bg-section（#F7FBF9）とは別の値なので混同しないこと。
     #F2F2F7 は単独用途のため tokens.css への昇格は見送り（2026-07-29、SOTA判断）。 */
  --ai-marketing-bg-secondary: #F2F2F7;

  /* 出典: get_design_context node 282:2711（資産化バッジ、SP）実測。border色 #D9D9D9 は
     tokens.css の --color-gray(#E5E5E5) / --color-border-mid(#B3B3B3) いずれとも異なる単独値
     （2026-07-30追加、SP検収）。 */
  --ai-marketing-badge-border: #D9D9D9;
}

/* 出典: Figma 実測（get_design_context, node 658:4864/658:4909 ほか）。
   このページの主要セクションは l-container(max-width:1200px) いっぱいではなく、
   900px 幅のコンテンツ列を中央寄せしている（課題カード/サービス構造/①/②/比較表で一貫して確認）。
   ヒーローは対象外（テキスト+画像の左右分割レイアウトのため）。 */
@media (min-width: 768px) {
  .p-ai-marketing__problems .l-container,
  .p-ai-marketing__structure .l-container,
  .p-ai-marketing__service-detail .l-container,
  .p-ai-marketing__comparison .l-container {
    max-width: calc(900px + var(--space-container-pc) * 2);
  }
}

/* ================================================
   p-ai-marketing__hero
   Figma PC: hero-wrapper（237:1302, y=93〜348）/ SP: 282:2160
   ================================================ */
.p-ai-marketing__hero {
  /* 出典: get_design_context node 282:2160(SP)/237:1302(PC) 実測。両ブレークポイントとも
     var(--color-bg-section)（#F7FBF9）。旧実装の var(--color-white) は誤り（2026-07-30 修正）。 */
  background-color: var(--color-bg-section);
}

/* 2026-07-31追加: ページ上部のページ名見出しブロック（英語見出し + 日本語ラベル）。
   会社概要/採用ページの hero-heading-block と同じ「大見出し+小ラベル」縦積みパターン
   （SOTA決定、Figma上に対応ノードなし＝サイト内の他 hero と一貫性を取るための追加実装）。
   padding-top で hero セクション上端の間隔を確保し、直後の hero-inner 側の
   上パディングはこのブロックとのgap分まで縮小する（二重の余白を避けるため）。
   2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: hero-title（h1）を
   英語見出し・hero-label（p）を日本語ラベルに入れ替え（旧実装は逆で、日本語h1が
   大・英語ラベルが小という他ページと逆転した大小関係だった）。 */
.p-ai-marketing__hero-heading-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 32px;
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-heading-block {
    padding-top: 64px;
  }
}

.p-ai-marketing__hero-title {
  /* 2026-08-03 SOTA決定: 英語見出し（大）。他ページ共通のSP=fs-32に揃えるが、
     「AI-Driven Digital Marketing」は英字が長いため折り返しを許容し、PCのみ
     他ページ(fs-48*2=96px)より小さいfs-48(48px)に調整（1行に収めない）。 */
  font-size: var(--fs-32);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-title {
    font-size: var(--fs-48);
  }
}

.p-ai-marketing__hero-label {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-label {
    font-size: var(--fs-18);
  }
}

.p-ai-marketing__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 田中さんSP指摘（2026-07-31反映）: 下パディングを詰め、画像を背景下端に揃える。
     上パディングは見出しブロック追加に伴い、そこからのgapとして24pxに縮小。 */
  padding-block: 24px 0;
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* 見出しブロックが上に64px確保しているため、ここでの上パディングは無くし、
       下パディングのみ従来どおり64pxを維持（Figma実測値、PC非破壊）。 */
    padding-block: 0 64px;
  }
}

.p-ai-marketing__hero-lead {
  /* 出典: get_design_context node 282:2161(SP) 実測 = 24px（PCは658:4797系実測の48pxのまま）。
     従来はSPにもPC寄りの32pxが適用されていたバグ（2026-07-30修正）。
     2026-07-31: 旧h1（p-ai-marketing__hero-heading）をリード文としてクラス名変更（タグはpに変更）。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-lead {
    font-size: var(--fs-48);
  }
}

.p-ai-marketing__hero-image {
  /* 出典: 実素材が縦長(340x440)→横長(PC 1004x510 / SP 482x256)に意匠変更されたため、
     幅指定を横長比率に合わせて再調整（報告の「要確認」参照）。 */
  width: 100%;
  max-width: 482px;
  height: auto;
  align-self: center;
}

@media (min-width: 768px) {
  .p-ai-marketing__hero-image {
    width: 420px;
    max-width: none;
    flex-shrink: 0;
  }
}

/* ================================================
   セクション共通見出し
   ================================================ */
.p-ai-marketing__section-title {
  /* 出典: get_design_context node 662:5142/471:2937(SP) 実測 = 20px（PCは658:xxxx実測の32pxのまま）。
     従来はSPにもPC寄りの24pxが適用されていたバグ（2026-07-30修正）。 */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__section-title {
    font-size: var(--fs-32);
  }
}

.p-ai-marketing__section-title--center {
  text-align: center;
}

.p-ai-marketing__section-head {
  /* 出典: get_screenshot node 658:4797 実測。「このような課題を解決します」(センター揃え)とは異なり、
     「KABUKIのサービス構造」はカード左端に揃う左揃え（従来の中央揃えから修正、2026-07-30）。 */
  text-align: left;
  margin-bottom: 32px;
}

.p-ai-marketing__section-head-sub {
  /* 出典: get_design_context node 282:2693(SP) 実測 = 20px Bold #0D0D0D。
     PCは 658:4818 実測 = 32px Bold #0D0D0D（従来の18px から修正）。
     確定版 Figma に「KABUKI Service」(en見出し) と「受託の現場で資産が生まれ、御社に渡る」(sub2) の
     テキストノードは存在しないため撤去した（2026-07-29 get_design_context/get_metadata で確認）。
     従来はSPにもPC値32pxが無条件適用されていたバグ（2026-07-30修正）。
     田中さんSP指摘（2026-07-31反映）: SPはセンター揃えに変更（親 .section-head の text-align:left を
     ここで上書き）。PCは非破壊のため左揃えに戻す。 */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-align: center;
}

@media (min-width: 768px) {
  .p-ai-marketing__section-head-sub {
    font-size: var(--fs-32);
    text-align: left;
  }
}

/* ================================================
   p-ai-marketing__problems（このような課題を解決します）
   Figma PC: 237:1311（見出し）+ 4カード（265:1438/1439/1443/1444, 2x2グリッド）
   ================================================ */
.p-ai-marketing__problems {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-ai-marketing__problems {
    padding-block: 56px;
  }
}

.p-ai-marketing__problem-grid {
  /* 出典: get_design_context node 662:5142(SP) 実測 = カード間gap 10px（従来16pxから修正、2026-07-30） */
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 10px;
  /* 「課題」ピル（.p-ai-marketing__tag）は top:-29px でカード上端の外に出るため、
     行間には飛び出し分 29px + 視覚的な隙間 8px = 37px が要る。20px のままだと
     2行目のピルが1行目カードの下端に 9px 食い込んでいた（2026-08-06 SOTA 指摘で修正）。
     Figma 実測の gap（SP 10px / PC 20px）は列方向にのみ適用する。 */
  row-gap: 37px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .p-ai-marketing__problem-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    margin-top: 32px;
  }
}

.p-ai-marketing__problem-card {
  /* 出典: get_design_context node 658:4833(PC)/290:2980(SP) 実測。border無し、
     bg=Backgrounds/Secondary(#F2F2F7)、radius=8px（従来12px+白bg+グレー枠から修正）。
     内側gap=5pxはPC/SP共通確認済み（従来12pxから修正）。padding はSPで13px/15pxに縮小
     （従来はPC値24pxがSPにも無条件適用されていたバグ、2026-07-30修正）。 */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 13px;
  border-radius: 8px;
  background-color: var(--ai-marketing-bg-secondary);
}

@media (min-width: 768px) {
  .p-ai-marketing__problem-card {
    padding: 24px;
  }
}

.p-ai-marketing__tag {
  /* 出典: get_design_context node 658:4833 実測。黒地・白文字のピル（従来の赤文字・淡赤背景から修正）。
     カード上端中央に、境界線をまたいで浮かぶ配置（左右対称の余白から算出）。
     田中さんSP指摘（2026-07-31反映）: ピルとグレーボックスの間隔が詰まりすぎていたため
     top を -10px → -29px に変更し、約8pxの隙間になるよう調整。 */
  position: absolute;
  top: -29px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 12px;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: var(--radius-pill);
}

.p-ai-marketing__problem-quote {
  /* 出典: get_design_context node 290:2983(SP) 実測 = 14px Bold・中央揃え（PCは265:1438実測の
     18px）。text-align:centerはPC/SP双方のノードで確認済みのため無条件適用（従来は左揃え相当だった） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__problem-quote {
    font-size: var(--fs-18);
  }
}

.p-ai-marketing__problem-body {
  /* 出典: get_design_context node 290:2984(SP) 実測 = 12px、文字色は黒（PCは265:1436実測でも
     text-black、14px）。SPは--color-gray-textの淡グレーではなく黒が正（2026-07-30修正）。
     PC側の色は今回未検証のため既存のグレーを維持（PC非破壊のためmedia queryで明示的に復元）。 */
  font-size: var(--fs-12);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__problem-body {
    font-size: var(--fs-14);
    color: var(--color-gray-text);
  }
}

/* ================================================
   p-ai-marketing__structure（KABUKIのサービス構造 + フロー図 + CTAボタン）
   Figma PC: 261:1393（見出し）+ 264:1401/1402（2カード）+ 262:1400/261:1399（資産化コネクタ）
   + 261:1398（キャプション）+ Frame 63/64（471:2422/471:2703, ボタン2つ）
   ================================================ */
.p-ai-marketing__structure {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-ai-marketing__structure {
    padding-block: 56px;
  }
}

.p-ai-marketing__flow {
  /* 出典: get_metadata（SP, 286:2729/282:2710の座標差）実測 = カード間gap 20px（従来40pxから修正、
     2026-07-30）。2枚のカードは高さが等しいため、資産化バッジの中央絶対配置（top/left:50%）は
     gap値に関わらず引き続き成立する。 */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .p-ai-marketing__flow {
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
  }

  /* 出典: get_screenshot node 658:4827/658:4828 実測。カード左下・右下から下に伸びて
     内側へ折れる装飾コネクタ線（グレー1px）。キャプションへ視線を導く「⌐」型の折れ線で、
     SP には存在しない（PCのみ）。実装未着手だった既知の要確認事項（2026-07-30 追加）。 */
  .p-ai-marketing__flow::before,
  .p-ai-marketing__flow::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 48px;
    height: 28px;
    border-bottom: 1px solid var(--color-border-mid);
  }

  .p-ai-marketing__flow::before {
    left: 0;
    border-left: 1px solid var(--color-border-mid);
  }

  .p-ai-marketing__flow::after {
    right: 0;
    border-right: 1px solid var(--color-border-mid);
  }
}

.p-ai-marketing__flow-card {
  /* 出典: get_design_context node 286:2729(SP) 実測 = 3px黒枠+10px角丸、padding 18/22/30/20、
     row-gap 10px（PCは 658:4799 実測の 4px黒枠+22px角丸+padding24+row-gap15 のまま）。
     従来はPC値がSPにも無条件適用されていたバグ（2026-07-30修正）。
     カード内は grid で「バッジ列 + タイトル/本文列」の2列レイアウト（658:4829と658:5074の座標関係から算出。
     PHPのフラットな3要素構成のままCSSのみで再現、マークアップは変更していない）。 */
  position: relative;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 10px;
  row-gap: 10px;
  padding: 18px 22px 30px 20px;
  border: 3px solid var(--color-black);
  border-radius: 10px;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-card {
    column-gap: 16px;
    row-gap: 15px;
    padding: 24px;
    border-width: 4px;
    border-radius: 22px;
  }
}

/* 「資産化」円（167px, .p-ai-marketing__flow に対し中央絶対配置）が
   カード内の本文へ重ならないよう、PC では円が食い込む側（card1=右 / card2=左）の
   内側パディングを広げ、テキストを円の手前でクリアさせる。
   Figma 658:4822 実測でも円はカード境界を跨ぐが本文は円の手前で折り返している。SOTA指摘 2026-07-29 */
@media (min-width: 768px) {
  .p-ai-marketing__flow-card:first-child {
    padding-right: 70px;
  }

  .p-ai-marketing__flow-card:last-child {
    padding-left: 70px;
  }
}

.p-ai-marketing__flow-number {
  /* 出典: get_design_context node 658:4829 実測。赤塗り+白文字20px（従来の白抜き赤枠+16pxから修正） */
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-red);
  border-radius: 50%;
}

.p-ai-marketing__flow-title {
  /* 出典: get_design_context node 282:2699(SP) 実測 ≈ 15px Bold（tokens.cssに15px相当が無いため
     最も近い --fs-14 を採用、1px差は許容）。PCは 658:4825/658:4821 実測 = 22px Bold のまま
     （従来18pxから修正）。従来はSPにもPC値22pxが無条件適用されていたバグ（2026-07-30修正）。 */
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-title {
    font-size: var(--fs-22);
  }
}

.p-ai-marketing__flow-body {
  /* 出典: get_design_context node 282:2700(SP) 実測 = 12px、全幅（バッジ列の下に回り込まず
     grid-column:1/-1）。PCは grid-column:2 のまま、658:4826/658:4823 実測 = 16px Regular、
     黒文字（従来14px+グレー文字から修正）。従来はSPでも本文がバッジ列2列目に押し込まれ、
     PC値16pxが無条件適用されていたバグ（2026-07-30修正）。 */
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-body {
    grid-column: 2;
    font-size: var(--fs-16);
  }
}

.p-ai-marketing__flow-badge {
  /* 出典: get_design_context node 282:2711(SP) 実測。SPは直径167pxの円ではなく、
     padding駆動の錠剤型バッジ（border 3px #D9D9D9、角丸300px、幅はテキスト+paddingで自動）。
     中央絶対配置（top/left:50%）はカード高さが等しい前提のためバッジのサイズに関わらず成立し、
     2枚のカードの境界をまたぐ位置になる。従来はPC値（167px円）がSPにも無条件適用されていたバグ
     （2026-07-30修正）。
     PCは get_screenshot node 658:4822（白地+薄グレー枠、黒文字）+ get_design_context node 658:4824
     （22px Bold、直径167px）のまま。line-height実測1.25は2026-07-29追加の --lh-tight を適用。 */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 76px;
  border-radius: 300px;
  background-color: var(--color-white);
  border: 3px solid var(--ai-marketing-badge-border);
  color: var(--color-black);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-badge {
    width: 167px;
    height: 167px;
    padding: 0;
    border-radius: 50%;
    border-width: 1px;
    border-color: var(--color-gray);
  }
}

.p-ai-marketing__flow-caption {
  /* 出典: get_design_context node 286:2728(SP) 実測 = 18px Bold。PCは 658:4820 実測 = 22px Bold
     （従来16pxから修正）。従来はSPにもPC値22pxが無条件適用されていたバグ（2026-07-30修正）。 */
  margin-top: 32px;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-caption {
    font-size: var(--fs-22);
  }
}

.p-ai-marketing__flow-buttons {
  /* 田中さんSP指摘（2026-07-31反映）: SPも横並び（flex-direction:row）に変更（従来はcolumn縦積み）。 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-buttons {
    gap: 20px; /* 出典: get_metadata Frame 675 実測（ボタン間 20px） */
  }
}

.p-ai-marketing__flow-button {
  /* 田中さんSP指摘（2026-07-31反映）: SPは幅170pxに固定して2つ揃える。
     PCは従来どおりコンテンツ幅（auto）に戻し非破壊を維持。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
}

@media (min-width: 768px) {
  .p-ai-marketing__flow-button {
    width: auto;
  }
}

/* ================================================
   p-ai-marketing__service-detail（① / ② 共通）
   Figma PC: ①=271:1445 直下 Frame 243（黒背景・白文字・白カード / 2026-07-24 実装を白背景から黒背景に修正）
   / ②=273:1683（bg-section=274:2092 のグレー背景に乗る）
   ================================================ */
.p-ai-marketing__service-detail {
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-ai-marketing__service-detail {
    padding-block: 64px;
  }
}

.p-ai-marketing__service-detail--partner {
  background-color: var(--color-black);
}

.p-ai-marketing__service-detail--partner .p-ai-marketing__service-detail-title,
.p-ai-marketing__service-detail--partner .p-ai-marketing__service-detail-sub,
.p-ai-marketing__service-detail--partner .p-ai-marketing__service-detail-caption {
  color: var(--color-white);
}

.p-ai-marketing__service-detail--adoption {
  /* 出典: get_design_context node 658:4798（bg-section）実測 = var(--color-bg-section) そのもの。
     従来は --color-gray から color-mix() で導出していたが、確定トークンに直接合わせて修正。 */
  background-color: var(--color-bg-section);
}

.p-ai-marketing__service-detail-head {
  text-align: center;
}

.p-ai-marketing__service-detail-title {
  /* 出典: get_design_context node 290:3014/471:2884(SP) 実測 = 24px（PCは658:xxxx実測の32pxのまま）。
     従来はSPにもPC寄りの22pxが適用されていたバグ（2026-07-30修正）。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__service-detail-title {
    font-size: var(--fs-32);
  }
}

.p-ai-marketing__service-detail-sub {
  /* PCは 658:4868/658:4913 実測 = 22px Regular（従来14px+グレー文字から修正、色は継承の黒 or 白のまま）。
     SPは①②で値が異なるため、個別セレクタで上書き（下記参照）。 */
  margin-top: 8px;
  font-weight: var(--fw-regular);
}

/* 出典: get_design_context node 290:3015(①/SP) 実測 = 16px、node 471:2885(②/SP) 実測 = 18px。
   従来はSPにもPC値22pxが無条件適用されていたバグ（2026-07-30修正）。 */
.p-ai-marketing__service-detail--partner .p-ai-marketing__service-detail-sub {
  font-size: var(--fs-16);
}

.p-ai-marketing__service-detail--adoption .p-ai-marketing__service-detail-sub {
  font-size: var(--fs-18);
}

@media (min-width: 768px) {
  .p-ai-marketing__service-detail--partner .p-ai-marketing__service-detail-sub,
  .p-ai-marketing__service-detail--adoption .p-ai-marketing__service-detail-sub {
    font-size: var(--fs-22);
  }
}

.p-ai-marketing__service-detail-lead {
  /* 出典: get_design_context node 471:2886(SP) 実測 = 14px Regular #0D0D0D。
     PCは 658:4914 実測 = 16px Regular #0D0D0D（従来14px+グレー文字から修正）。
     見出しブロックとの間隔は get_metadata Frame 245 実測で30px（従来20pxから修正）。
     line-height: 本文につき実測1.8を適用（2026-07-29、--lh-body）。
     従来はSPにもPC値16pxが無条件適用されていたバグ（2026-07-30修正）。 */
  max-width: 900px;
  margin: 30px auto 0;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__service-detail-lead {
    font-size: var(--fs-16);
  }
}

.p-ai-marketing__service-detail-caption {
  /* line-height: 本文につき実測1.8を適用（2026-07-29、--lh-body）。 */
  max-width: 728px;
  margin: 32px auto 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--color-black);
}

/* ---- アイコン共通 ----
   Figma の Material Symbols（40dp, #DA0000 = --color-red）実SVGを使用。
   SVG側で既に赤ベタ塗り済みのため、CSSでの着色は不要。 */
.p-ai-marketing__icon {
  display: block;
  width: 40px;
  height: 40px;
  /* adoption-card は align-items:stretch のままアイコンだけ中央寄せするため必要（domain-cardでは無害な冗長指定） */
  margin-inline: auto;
}

/* ---- ① 6領域グリッド ---- */
.p-ai-marketing__domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .p-ai-marketing__domain-grid {
    /* 出典: get_design_context node 658:4864 実測。見出し-グリッド間gap=50px、カード間gap=30px（従来32px/20pxから修正） */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
  }
}

.p-ai-marketing__domain-card {
  /* 出典: get_design_context node 290:3017(SP) 実測。SPはPCと全く異なる横並びレイアウト
     （アイコン+ラベルを縦積みにした左カラム + タイトルの右カラムという2カラム構成、
     白背景・角丸10px・drop-shadow 0 4px 2px、左paddingは0）。
     従来はPC値（角丸15px・flex column中央揃え・padding 29/24）がSPにも無条件適用され、
     さらにラベル/タイトルのフォントサイズもPC値のままだったバグ（2026-07-30修正）。
     PC側は get_design_context node 658:4871 実測（角丸15px+shadow 0 4px 4px、padding 29/24）のまま。 */
  display: grid;
  grid-template-columns: 122px 1fr;
  column-gap: 15px;
  align-items: center;
  padding: 27px 17px 27px 0;
  text-align: left;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .p-ai-marketing__domain-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 29px 24px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
  }
}

.p-ai-marketing__domain-card .p-ai-marketing__icon {
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 768px) {
  .p-ai-marketing__domain-card .p-ai-marketing__icon {
    grid-column: auto;
    grid-row: auto;
  }
}

.p-ai-marketing__domain-label {
  /* 出典: get_design_context node 290:3022(SP) 実測 = 16px Bold（PCは 658:4876 実測 = 20px Bold
     #0D0D0D、従来14px+赤文字から修正）。従来はSPにもPC値20pxが無条件適用されていたバグ
     （2026-07-30修正）。 */
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__domain-label {
    grid-column: auto;
    grid-row: auto;
    margin-top: 5px;
    font-size: var(--fs-20);
  }
}

.p-ai-marketing__domain-title {
  /* 出典: get_design_context node 290:3023(SP) 実測 = 18px Bold（PCは 658:4873 実測 = 22px Bold、
     従来16pxから修正）。従来はSPにもPC値22pxが無条件適用されていたバグ（2026-07-30修正）。 */
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin-top: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__domain-title {
    grid-column: auto;
    grid-row: auto;
    margin-top: 15px;
    font-size: var(--fs-22);
  }
}

/* ---- ② 6項目グリッド ---- */
.p-ai-marketing__adoption-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .p-ai-marketing__adoption-grid {
    /* 出典: get_metadata Frame 244/245 実測。見出しブロックとの間隔は50px（従来32pxから修正）、カード間gapは20pxで一致確認済み */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 50px;
  }
}

.p-ai-marketing__adoption-card {
  /* 出典: get_design_context node 471:2888(SP) 実測 = padding 20px(縦)/15px(横)。PCは
     658:4916 実測の 26px 24px 30px のまま（1px黒枠・角丸15px、従来枠無し・12px角丸から修正）。
     従来はSPにもPC値のpaddingが無条件適用されていたバグ（2026-07-30修正）。
     本文(body)は左揃えの段落のままなので、domain-cardと異なりカード全体は center 揃えにしない。
     アイコン+ラベルの中央寄せは .icon の margin-inline:auto と .adoption-label の text-align で個別対応。 */
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 15px;
}

@media (min-width: 768px) {
  .p-ai-marketing__adoption-card {
    padding: 26px 24px 30px;
  }
}

.p-ai-marketing__adoption-label {
  /* 出典: get_design_context node 471:2894(SP) 実測 = 16px Bold・中央揃え。PCは 658:4921 実測 =
     20px Bold・中央揃え（従来16px・左揃えから修正）。従来はSPにもPC値20pxが無条件適用されていた
     バグ（2026-07-30修正）。 */
  margin-top: 5px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  text-align: center;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__adoption-label {
    font-size: var(--fs-20);
  }
}

.p-ai-marketing__adoption-body {
  /* 出典: get_design_context node 471:2895(SP) 実測 = 14px Medium #0D0D0D、ラベルとの間隔は
     約12px。PCは 658:4918 実測 = 18px Medium #0D0D0D（従来14px+グレー文字から修正）。
     line-height: 本文につき実測1.8を適用（2026-07-29、--lh-body）。
     従来はSPにもPC値18px/margin-top20pxが無条件適用されていたバグ（2026-07-30修正）。 */
  margin-top: 12px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-ai-marketing__adoption-body {
    margin-top: 20px;
    font-size: var(--fs-18);
  }
}

/* ================================================
   p-ai-marketing__comparison（一般的なAIコンサルとの違い）
   Figma 確定版 node 662:5135（見出し）+ テーブル（658:4954）+ ボタン（658:4952）。
   2026-07-29 get_design_context で全セルの文言・スタイルを実測確認済み。
   ================================================ */
.p-ai-marketing__comparison {
  /* 出典: get_design_context node 658:4798（bg-section）実測 = var(--color-bg-section) */
  background-color: var(--color-bg-section);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-ai-marketing__comparison {
    padding-block: 56px;
  }
}

.p-ai-marketing__comparison-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.p-ai-marketing__comparison-table {
  /* 出典: get_design_context node 658:4954 実測。3列均等幅・角丸10px（従来は自動幅列+12px角丸）。
     SPは get_design_context node 471:2938 実測で393px幅にネイティブに収まる設計のため、
     旧 min-width:480px は撤去（横スクロールを強制していたバグ、2026-07-30修正）。 */
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--color-white);
  border-radius: 10px;
  overflow: hidden;
}

.p-ai-marketing__comparison-table th,
.p-ai-marketing__comparison-table td {
  /* 出典: get_design_context node 471:2939/471:2940(SP) 実測 = 12px。PCは 658:4954 実測 = 16px
     （従来14pxから修正）のまま。罫線は全辺・#B3B3B3（従来は下線のみ--color-gray）。
     2026-07-29: 局所トークン --ai-marketing-table-border を廃止し、tokens.css のグローバル
     --color-border-mid（#B3B3B3）に統合。line-height は本文につき実測1.8を適用（--lh-body）。
     従来はSPにもPC値16pxが無条件適用されていたバグ（2026-07-30修正）。 */
  width: 33.3333%;
  padding: 13.5px;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  text-align: left;
  border: 1px solid var(--color-border-mid);
}

@media (min-width: 768px) {
  .p-ai-marketing__comparison-table th,
  .p-ai-marketing__comparison-table td {
    font-size: var(--fs-16);
  }
}

.p-ai-marketing__comparison-table tbody th,
.p-ai-marketing__comparison-table tbody td {
  /* 出典: get_design_context node 471:2940(SP) 実測 = 縦8px（PCは既存13.5pxのまま、2026-07-30追加） */
  padding-block: 8px;
}

@media (min-width: 768px) {
  .p-ai-marketing__comparison-table tbody th,
  .p-ai-marketing__comparison-table tbody td {
    padding-block: 13.5px;
  }
}

.p-ai-marketing__comparison-table tbody td {
  /* 出典: get_design_context node 658:4956 ほか実測 = 左右20px（行見出しthは13.5px均等のまま） */
  padding-inline: 20px;
}

.p-ai-marketing__comparison-table thead th {
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-ai-marketing__comparison-table thead th.p-ai-marketing__comparison-table-heading--general {
  /* 出典: get_design_context node 658:4955 実測「一般的なAIコンサル」列＝ var(--color-gray) そのもの（従来はcolor-mixで希釈していた）。
     SPは 471:2939 実測で14px（PCは16pxのまま。2026-07-30追加） */
  background-color: var(--color-gray);
  font-size: var(--fs-14);
}

@media (min-width: 768px) {
  .p-ai-marketing__comparison-table thead th.p-ai-marketing__comparison-table-heading--general {
    font-size: var(--fs-16);
  }
}

.p-ai-marketing__comparison-table thead th.p-ai-marketing__comparison-table-heading--kabuki {
  /* 出典: Figma 実測「KABUKI」列＝黒地白文字ヘッダ。フォントサイズは 471:2939(SP) 実測でも
     16pxで、他ヘッダーと異なりSP/PC共通のため個別指定（2026-07-30追加） */
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-16);
}

.p-ai-marketing__comparison-table tbody th {
  font-weight: var(--fw-bold);
  color: var(--color-black);
  white-space: nowrap;
}

.p-ai-marketing__comparison-table tbody td {
  /* 出典: get_design_context node 658:4956 ほか実測 = 黒文字（従来グレー文字から修正）。 */
  color: var(--color-black);
}

/* KABUKI列本文はFigma上SemiBold(600)相当（node 658:4956 ほか実測）。テンプレート側に列を
   区別するクラスが無いため、テーブル構造上「一般的なAIコンサル」td→「KABUKI」td の並びが
   常に固定である点を利用し、:last-child でKABUKI列のみに絞って適用する
   （マークアップ変更なし、2026-07-29追加の --fw-semibold を反映）。 */
.p-ai-marketing__comparison-table tbody td:last-child {
  font-weight: var(--fw-semibold);
}

.p-ai-marketing__comparison-button-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.p-ai-marketing__comparison-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
}

/* ================================================
   p-ai-marketing__trademark-notice
   Figma 上に配置なし（node 414:3921 はフレーム外）。
   spec 03 の指示によりフッター直前に小さく追加。
   ================================================ */
.p-ai-marketing__trademark-notice {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px var(--space-container-sp) 24px;
  font-size: var(--fs-12);
  line-height: var(--lh-jp);
  color: var(--color-gray-text);
  background-color: color-mix(in srgb, var(--color-gray) 35%, var(--color-white));
}

@media (min-width: 768px) {
  .p-ai-marketing__trademark-notice {
    padding-inline: var(--space-container-pc);
  }
}