/* ============================================================
   KABUKI tcg.css（トレカ事業ページ専用）
   Figma: node 168:769（PC）/ 203:1838（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   塗り色は get_metadata に含まれないため、背景の白/黒の割り当ては
   構成上の判断（各テンプレートパーツのコメント・完了報告を参照）。
   淡いグレーのセクション背景・カード背景は tokens.css に無いため、
   --color-gray から color-mix() で導出する（front.css と同じ手法）。
   ============================================================ */

/* ================================================
   p-tcg__hero
   Figma: node 168:769 内 168:929 / 168:930 / photo-mask（168:772）
   ================================================ */
.p-tcg__hero {
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-tcg__hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* 2026-07-31 田中さんSP指摘: SPは下側の余白を詰め、画像を背景下端に寄せる。 */
  padding-block: 40px 0;
  text-align: center;
}

@media (min-width: 768px) {
  .p-tcg__hero-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-block: 64px;
  }
}

.p-tcg__hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: DOM順を
   TCG→トレカ事業に変更。company/hero.php の .p-company__hero-heading-block
   と同じ構造・スケールを踏襲（Figma範囲外のため、他ページと同じ統一値を採用）。 */
.p-tcg__hero-heading-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.p-tcg__hero-eyebrow {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一
     （旧実装はブレークポイント共通18pxだった）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: inherit;
}

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

.p-tcg__hero-title {
  /* 2026-08-03 SOTA決定: 全ページ共通の英語見出しサイズ（SP=fs-32 / PC=fs-48*2）に統一
     （旧実装はSP側がfs-32*1.5=48pxの近似値だった）。 */
  font-size: var(--fs-32);
  color: inherit;
}

@media (min-width: 768px) {
  .p-tcg__hero-title {
    font-size: calc(var(--fs-48) * 2);
  }
}

.p-tcg__hero-lead {
  /* 2026-07-31: 旧 .p-tcg__hero-heading（h1）を改名。新設の見出しブロックに
     h1を譲り、既存キャッチコピーはリード文（p）として据え置き。スタイルは
     旧実装のまま変更なし。 */
  /* 2026-07-30 get_design_context（node 203:2348）実測: SP は 24px（旧: 32px、
     PC実測48pxがSPに漏れていた）。改行なし1行表示（hero.php側で<br>を撤去）。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: inherit;
}

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

.p-tcg__hero-sub {
  /* 2026-07-30 get_design_context（node 203:2350）実測: SP は 14px（旧: 18px、
     PC実測（node 168:930）の18pxがSPに漏れていた）。PCは768pxからの上書きで
     18pxに戻す。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: inherit;
}

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

.p-tcg__hero-image {
  width: 220px;
  height: auto;
}

@media (min-width: 768px) {
  .p-tcg__hero-image {
    width: 320px;
    flex-shrink: 0;
  }
}

/* ================================================
   p-tcg__connect（「2つのサービスが、お店を中心につながる」概念図）
   Figma: node 168:769 内 192:1338 / Group 63
   実画像 connect-diagram.png/-sp.png に差し替え済み（2026-07-24）。
   旧・CSS製3ノード＋接続バー（.p-tcg__connect-bar / .p-tcg__connect-node*）は
   未使用になったため撤去した。
   ================================================ */
.p-tcg__connect {
  background-color: var(--color-white);
  padding-block: 40px;
}

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

.p-tcg__connect-title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-align: center;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .p-tcg__connect-title {
    font-size: var(--fs-32);
    margin-bottom: 48px;
  }

  /* 2026-07-30 get_screenshot（node 192:1338）実測: PC では見出し全体が1行に収まっており、
     改行はない。旧実装は常に<br>で強制2行にしていたため、見出し〜概念図間の余白が
     1行分（約45px）余分に見えていた（SOTA指摘の「空白が大きすぎる」の原因）。
     PC でのみ<br>を無効化し、Figma実測の1行表示に合わせる。 */
  .p-tcg__connect-title-break {
    display: none;
  }
}

.p-tcg__connect-diagram {
  display: block;
  margin-inline: auto;
}

.p-tcg__connect-diagram-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================================
   p-tcg__section（白/黒 各セクション共通ラッパー）
   ================================================ */
.p-tcg__section {
  padding-block: 40px;
}

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

.p-tcg__section--white {
  background-color: var(--color-white);
  color: var(--color-black);
}

.p-tcg__section--black {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ================================================
   p-tcg__poke（ポケカジラ セクション）
   Figma: node 168:769 内 227:3349
   2026-07-30 get_screenshot（node 227:3349）+ ピクセルサンプル実測: セクション背景は
   純白ではなく #F7FBF9（Message セクションと同じ --color-bg-section）。
   .p-tcg__section--white（純白）をこのセクションに限り上書きする。
   ================================================ */
.p-tcg__poke {
  background-color: var(--color-bg-section);
  /* 2026-07-31: TOPの「サービス詳細」ボタンから #pokecazilla へアンカー遷移するため、
     追跡型ヘッダー（.c-site-header, position:sticky）に隠れないよう確保。 */
  scroll-margin-top: 100px;
}

/* 2026-07-30 get_metadata（node 227:3349 内 Frame 209: Frame208 x=0/Frame135 x=339）実測:
   PC ではタイトル＋ロゴ＝左カラム／サブ見出し＋本文＋注記＝右カラムの2カラム構成で、
   いずれも左揃え。旧実装は「タイトル+ロゴ」を横並び中央寄せ、
   「サブ見出し+本文」を別ブロックとして下に中央寄せで積んでおり、構造・揃えとも
   確定版と異なっていた（SOTA指摘の既知候補）。 */
.p-tcg__poke-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.p-tcg__poke-head-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.p-tcg__poke-head-right {
  /* 2026-07-30 get_design_context（node 203:2750 ほか）実測: SP でも
     items-start（左揃え）。旧実装は中央寄せだった（要修正）。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
}

@media (min-width: 768px) {
  .p-tcg__poke-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /* 2026-07-30 get_metadata実測: Frame208(284px)〜Frame135(x=339) のカラム間隔55px。 */
    gap: 55px;
  }

  .p-tcg__poke-head-left {
    align-items: flex-start;
    flex-shrink: 0;
  }

  .p-tcg__poke-head-right {
    max-width: 561px;
  }
}

.p-tcg__poke-title {
  /* Montserrat / lh-en は markup 側の .u-font-en 併用で付与（2026-07-29追加、
     font-weightはu-font-enと重複するが安全のため明示）。 */
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-tcg__poke-title.u-font-en {
    /* 2026-07-29 get_design_context（node 227:3353）実測: Montserrat Bold 48px。 */
    font-size: var(--fs-48);
  }
}

.p-tcg__poke-logo {
  width: 160px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .p-tcg__poke-logo {
    width: 200px;
  }
}

.p-tcg__poke-subtitle {
  /* 2026-07-30 get_design_context（node 203:2752）実測: SP は 18px（旧: 22px、
     PC実測32pxとは別に、SP独自の中間値が必要だった）。 */
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-tcg__poke-subtitle {
    /* 2026-07-29 get_design_context（node 227:3357）実測: 32px（旧: 24px）。 */
    font-size: var(--fs-32);
  }
}

.p-tcg__poke-text {
  /* 2026-07-30 get_design_context（node 203:2753）実測: SP は 14px（旧: 16px、
     PC実測16pxがSPに漏れていた）。PCは768pxからの上書きで16pxに戻す。 */
  font-size: var(--fs-14);
  /* line-height: 実測（node 227:3358）は 1.8。2026-07-29: tokens.css に --lh-body(1.8)
     追加のため反映。 */
  line-height: var(--lh-body);
  /* 2026-07-29 get_design_context（node 227:3358）実測: 黒文字（旧: gray-text）。 */
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-tcg__poke-text {
    font-size: var(--fs-16);
  }
}

.p-tcg__poke-note {
  /* 2026-07-29 get_design_context（node 227:3359）実測: 10px・色 #777（tokensに一致なし、
     gray-text #8E8E93 で近似のまま据え置き。要確認、完了報告参照）。 */
  font-size: var(--fs-10);
  color: var(--color-gray-text);
}

.p-tcg__poke-button {
  display: flex;
  margin-inline: auto;
  align-items: center;
  gap: 12px;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
  width: fit-content;
}

.p-tcg__poke-button-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.p-tcg__poke-button-icon svg {
  width: 100%;
  height: 100%;
}

/* ================================================
   p-tcg__stat-cards / p-tcg__stat-card
   Figma: node 168:769 内 227:3360（Frame 125, ポケカジラの数値カード）/
   202:1734・202:1785（DUEL SPACE ADs の説明カード）
   アイコンはカンプ位置対応で確認できたもののみ実アイコン（<img>）に差し替え済み
   （2026-07-24）。対応する納品アイコンが無いカード（月間ユーザー/提携ショップ/媒体）は
   引き続き丸型プレースホルダー（<span>, レイヤー名に色指定 DA0000 = --color-red の
   実測値あり）のまま（要確認、完了報告参照）。
   カード地の色: 2026-07-29、Figma get_design_context（node 227:3362 ほか、
   fileKey iD8aOsIVM3ceKGpTXKvpkh）で白背景＋border #E5E5E5（--color-gray）＋
   角丸10pxを実測、旧・color-mixグレー地から変更。これはポケカジラ想定の基底値。
   同日、残り2系統も node 指定で実測して出し分けを確定した:
   ・「広告主の方へ」カード（node 202:1736）: 白背景・境界線なし・
     box-shadow 0px 4px 4px rgba(0,0,0,0.05)・角丸15px
     → .p-tcg__stat-cards--light .p-tcg__stat-card で上書き。
   ・「DUEL SPACE ADs導入後」カード（node 202:1787）: 白背景・境界線 #0D0D0D・
     角丸15px・box-shadowなし
     → .p-tcg__duel-panel .p-tcg__stat-card で上書き（同カードは
     .p-tcg__stat-cards--light も併せ持つため box-shadow: none で明示的に打ち消す）。
   ================================================ */
.p-tcg__stat-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .p-tcg__stat-cards {
    grid-template-columns: repeat(3, 1fr);
    /* 2026-07-29 get_design_context（node 227:3360 / 202:1734）実測: 900px幅3カラムの
       カード間ギャップは30px（旧: 20px）。.p-tcg__duel-panel 内の260px幅カードのみ
       20pxで別途上書き（後述）。 */
    gap: 30px;
  }
}

.p-tcg__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 10px;
  padding: 32px 20px;
}

/* 「広告主の方へ」カード（duelspace.php, パネル外）: 2026-07-29 get_design_context
   （node 202:1736, fileKey iD8aOsIVM3ceKGpTXKvpkh）で実測: 白背景・境界線なし・
   box-shadow 0px 4px 4px rgba(0,0,0,0.05)・角丸15px。基底カード（ポケカジラ想定,
   境界線 #E5E5E5・角丸10px）を上書きする。 */
.p-tcg__stat-cards--light .p-tcg__stat-card {
  background-color: var(--color-white);
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}

.p-tcg__stat-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-red);
  background-color: color-mix(in srgb, var(--color-red) 8%, transparent);
  margin-bottom: 4px;
}

/* 実アイコン（納品 SVG, 赤ベタ塗り済み）差し替え分は丸型プレースホルダーの
   ボーダー・背景を外し、アイコン自体をそのまま表示する。 */
img.p-tcg__stat-icon {
  border: none;
  border-radius: 0;
  background-color: transparent;
  object-fit: contain;
}

.p-tcg__stat-label {
  /* 2026-07-29 get_design_context（227:3371等/202:1741等/202:1792等）実測: 20px
     （旧: 14px）。全3系統・全9枚のカードで共通して20pxを確認。 */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-tcg__stat-cards--light .p-tcg__stat-label {
  color: var(--color-black);
}

.p-tcg__stat-number {
  /* 要確認（完了報告参照）: get_design_context（227:3366/3377/3387）実測では
     このテキストは実際には黒（親フレームが text-black を継承）で、フォントは
     Inter Semi Bold（weight 600）・サイズはカードごとに異なる（262,792=50px、
     30/28=96px、いずれもtokens未定義）。font-family/weight/sizeはtokensに厳密一致
     する値がないため据え置き（Montserrat Bold 48pxのまま）。色のみ黒に修正。 */
  font-family: var(--font-en);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.2;
}

.p-tcg__stat-unit {
  /* 2026-07-29 get_design_context（227:3365/3376/3386）実測: 22px（旧: 18px）。 */
  font-family: var(--font-jp);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  margin-inline-start: 4px;
}

.p-tcg__stat-suffix {
  /* 2026-07-29 get_design_context（node 227:3363「以上」）実測: 22px（旧: 14px）。 */
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-tcg__stat-caption {
  /* 2026-07-29 get_design_context（227:3367/3378/3388）実測: 黒文字（旧: gray-text）。
     サイズ14pxは一致していたため据え置き。 */
  font-size: var(--fs-14);
  color: var(--color-black);
}

.p-tcg__stat-phrase {
  /* 2026-07-29 get_design_context（202:1737等/202:1788等）実測: 24px（旧: 18px）。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

/* 2026-07-31 田中さんSP指摘: 「滞在時間の長い、」「初期費用ゼロで」「掲載実績に応じて」の
   語中改行をSPのみ<br>で固定（旧: スペースのみで自動折返しに依存）。PC（768px以上）では
   .p-tcg__connect-title-break と同じ手法で display:none にして無効化する。 */
@media (min-width: 768px) {
  .p-tcg__stat-phrase-break {
    display: none;
  }
}

/* ================================================
   p-tcg__duel（DUEL SPACE ADs セクション）
   Figma: node 168:769 内 200:1613（背景, 黒帯）
   ================================================ */
.p-tcg__duel {
  /* 2026-07-31: TOPの「サービス詳細」ボタンから #duel-space-ads へアンカー遷移するため、
     追跡型ヘッダー（.c-site-header, position:sticky）に隠れないよう確保。 */
  scroll-margin-top: 100px;
}

.p-tcg__duel-title {
  /* 2026-07-30 get_design_context（node 203:2801）実測: SP は 24px（旧: 32px、
     PC実測48pxとは別の中間値）。中央寄せ自体はSP実測(text-center)と一致。
     ※PC実測（node 202:1728）は中央寄せではなく左揃えだったが、本タスクはSP
     修正に限定するためPC側の揃えは今回は変更しない（要確認、完了報告参照）。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
  margin-bottom: 30px;
}

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

.p-tcg__duel-intro {
  /* 2026-07-30 get_design_context（node 204:2803/202:1729）実測: PC・SPともに
     items-start（左揃え・親コンテナ全幅）。旧実装は max-width:720px の中央寄せ
     ブロックだったが、PC実測でも実コンテナ(900px)いっぱいに広がっており、
     720px幅の中央ブロックという設計ではなかったため撤去した。 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.p-tcg__duel-subtitle {
  /* 2026-07-30 get_design_context（node 204:2810）実測: SP は 18px（旧: 22px）。 */
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-tcg__duel-subtitle {
    /* 2026-07-29 get_design_context（node 202:1730）実測: 32px（旧: 24px）。 */
    font-size: var(--fs-32);
  }
}

.p-tcg__duel-text {
  /* 2026-07-30 get_design_context（node 204:2806）実測: SP は 14px・不透明白・
     左揃え（旧: 16px・80%透過・中央寄せ、いずれもPC値がSPに漏れていた）。
     PC実測（node 202:1729/1731）も左揃え・不透明白・900px全幅だったため、
     text-align・color・max-widthはSP/PC共通で修正し、font-sizeのみ768pxから
     16pxに戻す。 */
  font-size: var(--fs-14);
  /* line-height: 実測（node 202:1731）は 1.8。2026-07-29: tokens.css に --lh-body(1.8)
     追加のため反映。 */
  line-height: var(--lh-body);
  color: var(--color-white);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .p-tcg__duel-text {
    font-size: var(--fs-16);
  }
}

.p-tcg__duel-group-title {
  /* 2026-07-30 get_design_context（node 204:2812「広告主の方へ」ほか）実測:
     SP は 18px・左揃え（旧: 24px・中央寄せ）。PC実測（node 202:1733）も左揃え
     だったため、text-alignはSP/PC共通で左揃えに修正。 */
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: 24px;
}

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

.p-tcg__duel-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 2026-07-30 get_design_context（node 204:2816）実測: gap 10px（旧: 16px）。
     SP実測でも中央寄せではなく左揃え（旧実装はSPのみ中央寄せだった）。 */
  gap: 10px;
  margin-block: 48px 20px;
}

.p-tcg__duel-eyebrow-label {
  /* 2026-07-30 get_design_context（node 204:2814）実測: SP は 18px（旧: 32px、
     PC実測32pxがSPに漏れていた）。PCは768pxからの上書きで32pxに戻す。 */
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-tcg__duel-eyebrow-label {
    /* 2026-07-29 get_design_context（node 202:1759）実測: 32px。 */
    font-size: var(--fs-32);
  }
}

.p-tcg__duel-eyebrow-divider {
  /* 2026-07-30 get_design_context（node 204:2817, Vector 32）実測: SP は幅23px
     （旧: 45px、PC実測45pxがSPに漏れていた）。 */
  width: 23px;
  height: 1px;
  background-color: var(--color-gray-light);
}

@media (min-width: 768px) {
  .p-tcg__duel-eyebrow-divider {
    /* 2026-07-29 get_design_context（node 202:1760, Vector 32）実測: 幅45px。 */
    width: 45px;
  }
}

.p-tcg__duel-eyebrow-phrase {
  /* 2026-07-30 get_design_context（node 204:2815）実測: SP は 14px（旧: 22px、
     PC実測22pxがSPに漏れていた）。不透明白・Boldは両ブレークポイント共通。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-tcg__duel-eyebrow-phrase {
    /* 2026-07-29 get_design_context（node 202:1761）実測: 22px Bold・不透明白。 */
    font-size: var(--fs-22);
  }
}

/* ================================================
   p-tcg__duel-panel（黒帯セクション内の白い角丸パネル）
   カンプ実測: 白背景・黒文字、カード/ピルのボーダーは #0D0D0D（--color-black）。
   「店舗の固定費を、新たな原資に。」見出し 〜 導入後3カードまでを内包する（2026-07-24）。
   ================================================ */
.p-tcg__duel-panel {
  background-color: var(--color-white);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .p-tcg__duel-panel {
    padding: 48px;
  }
}

/* パネル内は黒帯セクションの白文字を反転し、黒/グレー文字に上書きする。
   「店舗の固定費を、新たな原資に。」見出し: 2026-07-29 get_design_context
   （node 202:1764）実測は28pxだが、tokensに一致するサイズが無いため、この
   見出しクラスを共有する「広告主の方へ」（32px, node 202:1733, 一致済み）を
   崩さないよう、サイズは変更せず据え置き（要確認、完了報告参照）。 */
.p-tcg__duel-panel .p-tcg__duel-group-title {
  color: var(--color-black);
  /* 2026-07-30 get_design_context（node 202:1762/1764）実測: 中央寄せではなく左揃え
     （絶対配置で left:40px 固定、text-centerクラスなし）。パネル内のピル見出し
     （.--pill、table+margin-inline:auto で別途中央配置済み）には実質影響しない。 */
  text-align: left;
}

.p-tcg__duel-panel .p-tcg__duel-text {
  /* 2026-07-29 get_design_context（node 202:1763）実測: 黒文字・Medium(500)
     （旧: gray-text・weight未指定=regular）。 */
  color: var(--color-black);
  font-weight: var(--fw-medium);
  /* 2026-07-30 get_design_context（node 202:1763）+ get_screenshot（node 202:1778,
     「同じスペースが」テキスト）実測: いずれも中央寄せではなく左揃え・パネル全幅
     （max-width:720pxの中央ブロックではない）。基底 .p-tcg__duel-text の
     text-align:center・max-width:720px・margin-inline:autoをパネル内に限り上書きする。 */
  text-align: left;
  max-width: none;
  margin-inline: 0;
  /* 2026-07-30 get_design_context（node 204:2856）実測: SP は 14px・line-height 1.6
     （旧: 基底の16px・lh-body(1.8)をそのまま継承しており、PC実測値がSPに漏れて
     いた）。PC実測（node 202:1763）は16px・line-height 1.9だが、1.9はtokensに
     一致する値が無いため、従来どおり --lh-body(1.8) で据え置く（要確認）。 */
  font-size: var(--fs-14);
  line-height: var(--lh-jp);
}

@media (min-width: 768px) {
  .p-tcg__duel-panel .p-tcg__duel-text {
    font-size: var(--fs-16);
    line-height: var(--lh-body);
  }
}

/* 「DUEL SPACE ADs導入後」見出し: 2026-07-29 get_design_context（node 202:1780）で
   再実測したところ、PC側のテキストは「DUEL SPACE ADs導入後」（「導入後」を含む）、
   文字色は赤 #DA0000（--color-red）であることを確認した。旧実装は前回確認時の
   node 658:4110/4111 を根拠に「DUEL SPACE ADs」（導入後なし）・黒文字としていたが、
   本ページ内の実体（node 202:1780, スクリーンショットで赤文字を確認）を優先し
   修正した。背景は白（パネル地のまま、塗りなし）・黒ボーダーは変更なし。
   フォントサイズ実測28pxはtokens未定義のため据え置き（要確認）。
   .p-tcg__duel-panel を前置して .p-tcg__duel-panel .p-tcg__duel-group-title
   （黒に上書き）より詳細度を上げ、赤を優先させる。
   2026-07-30 追記: SP側の実体（node 204:2881）を get_design_context で実測したところ、
   テキストは「導入後」を含まない「DUEL SPACE ADs」のみ・文字色は黒 #0D0D0D だった。
   PCとSPでコピー内容自体が異なる可能性があるため、テキストは既存のPC確定値
   （導入後あり）を維持しつつ、色のみSP実測（黒）を基底にし、768pxからPC実測（赤）
   に切り替える（要確認: テキスト「導入後」の有無はデザイナーに確認要）。 */
.p-tcg__duel-panel .p-tcg__duel-group-title--pill {
  display: table;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-pill);
  padding: 12px 32px;
  margin-inline: auto;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .p-tcg__duel-panel .p-tcg__duel-group-title--pill {
    color: var(--color-red);
  }
}

/* COSTS図・卓上イラストの2カラム化（PC）/ 縦積み（SP） */
.p-tcg__duel-cols {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .p-tcg__duel-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
  }
}

/* COSTS図と「導入後」見出しの間の区切りシェブロン */
.p-tcg__duel-chevron {
  display: block;
  margin-inline: auto;
  margin-bottom: 32px;
}

/* パネル内カード（「DUEL SPACE ADs導入後」3カード）: 2026-07-29 get_design_context
   （node 202:1787, fileKey iD8aOsIVM3ceKGpTXKvpkh）で実測: 白背景・境界線 #0D0D0D
   （黒）・角丸15px・box-shadowなし。同カードは .p-tcg__stat-cards--light も
   併せ持つため、そちらの box-shadow・border:none を明示的に打ち消す。 */
.p-tcg__duel-panel .p-tcg__stat-card {
  border: 1px solid var(--color-black);
  border-radius: 15px;
  box-shadow: none;
}

@media (min-width: 768px) {
  /* 2026-07-29 get_design_context（node 202:1785）実測: パネル内3カード（260px幅）の
     ギャップは20px。他の3カード列（280px幅, 30px）とは異なる（node差異を確認済み）。 */
  .p-tcg__duel-panel .p-tcg__stat-cards {
    gap: 20px;
  }
}

/* パネル最後の要素の下余白は padding 側に委ねる */
.p-tcg__duel-panel > .p-tcg__stat-cards:last-child {
  margin-bottom: 0;
}

.p-tcg__duel-button {
  display: flex;
  margin-inline: auto;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 14px 24px;
  width: fit-content;
}

/* ================================================
   p-tcg__cost-diagram（家賃・人件費・光熱費 COSTS 図）
   Figma: node 168:769 内 Group 76。実画像 cost-diagram.png/-sp.png に差し替え済み
   （2026-07-24）。ラベル・ピル・COSTS 文字は画像内に焼き込み済みのため
   CSS でのテキスト再現は不要になった（旧ルールは撤去）。
   .p-tcg__duel-cols（2カラムラッパ）の左カラムに収まる想定。
   ================================================ */
.p-tcg__cost-diagram {
  display: block;
  margin-inline: auto;
  max-width: 420px;
  width: 100%;
}

.p-tcg__cost-diagram-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================================
   p-tcg__illustration（卓上広告イラスト）
   Figma: node 168:769 内 Group 32「テーブル広告2」。実画像
   illustration-duelspace-table.png/-sp.png に差し替え済み（2026-07-24）。
   .p-tcg__duel-cols（2カラムラッパ）の右カラムに収まる想定。
   ================================================ */
.p-tcg__illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-inline: auto;
  max-width: 350px;
  width: 100%;
}

.p-tcg__illustration-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.p-tcg__illustration-caption {
  font-size: var(--fs-12);
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
  text-align: center;
}

/* ================================================
   p-tcg__message（Message / メッセージ）
   Figma: node 168:769 内 227:3336（Massage_Area, 背景 209:3130）
   2026-07-29: get_design_context（node 209:3130, fileKey iD8aOsIVM3ceKGpTXKvpkh）
   で実測: bg-[var(--kabuki/gray,#f7fbf9)]。テンプレート側の共通クラス
   .p-tcg__section--white（純白）を、このセクションに限り上書きする
   （同クラスを共有する pokecazilla セクションの白背景には影響させない）。
   ================================================ */
.p-tcg__message {
  background-color: var(--color-bg-section);
}

.p-tcg__message-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin-bottom: 24px;
}

.p-tcg__message-head-en {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-tcg__message-head-en {
    font-size: var(--fs-48);
  }
}

.p-tcg__message-head-sub {
  /* 2026-07-30 get_design_context（node 227:3311）実測: SP は 16px（旧: 22px、
     PC実測22pxがSPに漏れていた）。PCは768pxからの上書きで22pxに戻す。 */
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-tcg__message-head-sub {
    /* 2026-07-29 get_design_context（node 227:3341）実測: 22px Regular。 */
    font-size: var(--fs-22);
  }
}

.p-tcg__message-text {
  /* 2026-07-30 get_design_context（node 203:2456）実測: SP は 12px（旧: 16px）。
     line-height実測は1.9だが、tokensに一致する値が無いため --lh-body(1.8) で
     据え置く（要確認）。PCは768pxからの上書きで16pxに戻す。 */
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  /* 2026-07-29 get_design_context（node 227:3342）実測: 黒文字・Medium(500)
     （旧: gray-text・weight未指定=regular）。 */
  color: var(--color-black);
  font-weight: var(--fw-medium);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-tcg__message-text {
    font-size: var(--fs-16);
  }
}

.p-tcg__message-text + .p-tcg__message-text {
  margin-top: 20px;
}