/*
  FUNABASHI ハートビートイベント ― コンテンツエリア用スタイル

  スコープ：カスタム定義はすべて .fb-heartbeat 配下にネストし、運営会社の
  ヘッダー／フッター／サイドバーへ影響が漏れないようにしている。

  前提：Bootstrap 5.2.3 は運営会社のラッピングテンプレートで読み込み済み。
  .container / .row / ユーティリティ等は HTML 側で自由に使用可。

  ブレイクポイント：768px / 1280px（blog.f-keiba.com の /renewal2022/css/style.css
  の house style に合わせたもの）。
*/

/* ---- box-sizing とアセット既定値（サイト側で既に設定済みでも重複は安全） ---- */
.fb-heartbeat,
.fb-heartbeat *,
.fb-heartbeat *::before,
.fb-heartbeat *::after {
  box-sizing: border-box;
}

.fb-heartbeat img {
  max-width: 100%;
  height: auto;
  display: block;
}

.fb-heartbeat a {
  color: inherit;
}

/* レスポンシブ改行用ユーティリティ
   ・<br class="br-pc"> は PC 時のみ有効（SP／タブレットでは display:none に切替）
   ・<br class="br-sp"> は SP 時のみ有効（default は非表示、SP で inline に切替）
   ・<br class="br-no-tablet"> はタブレット範囲（768〜991.9px）でのみ非表示
     （PC と SP では通常通り改行する。スタック時に幅に余裕があり PC 用改行が不自然な箇所向け） */
.fb-heartbeat .br-sp {
  display: none;
}

/* ---- デザイントークン（諏訪さんの Figma ＋ 公式サイト /event/styles.css のパレットから） ---- */
.fb-heartbeat {
  --fb-green-dark: #004C2A;  /* Figma 確定値（ピルのテキスト・影） */
  --fb-green-page: #17C05B;  /* Figma 確定値（コンテンツエリア全体の背景色） */
  --fb-green: #2e8b2e;       /* 仮 */
  --fb-green-light: #a2d02c; /* 仮 */
  --fb-yellow: #fff44d;      /* 仮 */
  --fb-yellow-soft: #fffbc8; /* 仮 */
  --fb-orange: #FF6B00;      /* Figma 確定値（ピルのアイコン円） */
  --fb-text: #222;
  --fb-muted: #666;

  /* コンテンツエリアの最大幅は 992px（Suwa デザインに準拠）。
     本番の .main-article は 1440+ で ~1016px まで取れるが、ここで 992px にキャップする。 */
  max-width: 992px;
  margin-inline: auto;
  /* 背景：諏訪さん提供の 10×20px タイル SVG（緑 #17C05B ＋ ドット #34CD72）をリピート。
     SVG なのでどの解像度でも綺麗に描画される。画像読み込み失敗時のフォールバックとして
     --fb-green-page を下に敷く。 */
  background: url('https://www.f-keiba.com/images/heartbeatevent/20260501/20260501_bg_pattern.svg') repeat var(--fb-green-page);

  color: var(--fb-text);
  line-height: 1.6;
  /* 上は 0：KV 画像をコンテンツエリア最上端にぴったり付けるため。
     下は 60px：最後のイベントセクションが端に当たらないよう余白を確保。 */
  padding-block: 0 60px;
  /* KV 以外の要素は左右 64px のインナー余白を持つ。KV バナーは後述の margin-inline: -64px で
     この余白を打ち消し、コンテンツエリアの端まで伸ばす。SP 時は狭くなるので SP メディアクエリで上書き。 */
  padding-inline: 64px;
  /* 公式サイトは "Noto Sans Japanese"（旧称）で読み込んでいる。Google Fonts では "Noto Sans JP"（現行）。
     両方書いておくことで、ローカル（Google Fonts）でも本番（公式サイト側）でも同じフォントが当たる。 */
  font-family: 'Noto Sans JP', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ================================================================
   KV（ヒーローバナー）
   ― mv.webp（PC）／ mv_sp.webp（SP）を <picture> で切り替え
   ― 見出し・日付テキストは画像に焼き込まれているため HTML 側は空
   ================================================================ */
.fb-heartbeat__kv {
  margin-bottom: 40px;
  /* 親の padding-inline: 64px を打ち消し、コンテンツエリアの端まで広げる */
  margin-inline: -64px;
  line-height: 0; /* <img> の下にできる余計な余白を消す */
}

.fb-heartbeat__kv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================================================
   カテゴリピル（アンカーナビ）
   ================================================================ */
.fb-heartbeat__pills {
  margin-bottom: 60px;
}

.fb-heartbeat__pills ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/*
  anchor_btn（Figma spec 準拠）
  - サイズ：208×48px（中身は text 22px left / circle 172px left / top 12px）
  - 影：0 2px 0 #004C2A（ボーダーではなく下側に落ちる green shadow）
  - 角丸：72px（ほぼ完全にピル形状）
  - テキスト：Noto Sans JP 700 / 14px / 16px / #004C2A
  - アイコン円：24×24 / #FF6B00 / radius 50% / 白い ▼
*/
.fb-heartbeat__pills a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 44px 0 22px; /* right: 24px icon + 12px right offset + 8px breathing room */
  background: #FFFFFF;
  box-shadow: 0 2px 0 #004C2A;
  border-radius: 72px;
  color: #004C2A;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}

/* 右端のオレンジ円 ＋ 白い下向き矢印（SVG）
   円は CSS、矢印は ../images/icons/arrow-down.svg を背景画像として配置。 */
.fb-heartbeat__pills a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: var(--fb-orange);
  background-image: url('https://www.f-keiba.com/images/heartbeatevent/20260501/20260501_arrow-down.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  border-radius: 50%;
}

/* ホバー時は少し沈み込ませる（影と位置で押下感） */
.fb-heartbeat__pills a:hover,
.fb-heartbeat__pills a:focus-visible {
  transform: translateY(1px);
  box-shadow: 0 0 0 #004C2A;
}

/* ================================================================
   Event セクション枠 ＋ リボン
   ================================================================ */
.fb-heartbeat .event-section {
  position: relative;
  border-radius: 18px;
  padding: 30px;
  padding-top: 40px;
  margin-bottom: 60px;
}

/* 最後のイベントは親 .fb-heartbeat の padding-block 下側で間隔が確保されるため margin-bottom は不要 */
.fb-heartbeat .event-section:last-of-type {
  margin-bottom: 0;
}

/*
  セクション背景は奇数・偶数で色違い（Figma 確定値）。
  ・Event 1, 3, 5, 7 → 黄色 #FCF23C
  ・Event 2, 4, 6, 8 → 緑 #CAFA9F
  .event-section は KV の後に並ぶため、.event-section:nth-of-type(even) が
  Event 1（2番目の section）から始まる。nth-of-type のカウントは type=section 全体で行われるため、
  KV を含めた順番に基づく。
*/
.fb-heartbeat .event-section:nth-of-type(even) {
  background: #FCF23C;
}

.fb-heartbeat .event-section:nth-of-type(odd) {
  background: #CAFA9F;
}

/*
  Event N リボン（Figma 準拠：キャロッタ ＋ 吹き出し）
  - コンテナサイズ：140×54（吹き出しのしっぽ含む）
  - キャラクター：carrotta.svg, 33×47, 左 2.62 / 上 0.1
  - 吹き出し：event-ribbon-bubble.svg, 140×54, 左 0 / 上 0
  - テキスト "Event N"：左 40.25 / 上 21 付近に配置（吹き出し本体の中心やや下寄り）
  - 位置：event-section の上端から少し上に浮いて見えるように top: -30px
*/
.fb-heartbeat .event-section__ribbon {
  position: absolute;
  top: -30px;
  left: -16px;
  display: inline-flex;
  align-items: baseline;    /* EVENT(12px) と 01(22px) を同じベースラインで揃える */
  justify-content: center;  /* 水平：キャラクター領域を除いた余白内で中央 */
  width: 140px;
  height: 54px;
  padding: 10px 23px 14px 40px; /* 下の余白でベースラインを吹き出し本体の中央付近に引き上げる */
  background: url('https://www.f-keiba.com/images/heartbeatevent/20260501/20260501_event-ribbon-bubble.svg') 0 0 / 140px 54px no-repeat;
  color: #FFFFFF;
  /* Inter 700 / 12px（諏訪さんから暫定指定、2026-04-21）。後日他フォントに切り替わる可能性あり。 */
  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  text-decoration: none;
}

/* キャラクター（キャロッタ）は ::before 擬似要素として配置。
   background-image だとリボン矩形でクリップされるが、擬似要素なら親の外にはみ出せる。 */
.fb-heartbeat .event-section__ribbon::before {
  content: "";
  position: absolute;
  left: 2.62px;
  top: -9px; /* 頭を吹き出しの上に出す */
  width: 33px;
  height: 47px;
  background: url('https://www.f-keiba.com/images/heartbeatevent/20260501/20260501_carrotta.svg') no-repeat center / 33px 47px;
}

/* 番号部分（01〜08）は EVENT より大きく：Inter 700 / 22px（諏訪さん指定 2026-04-21） */
.fb-heartbeat .event-section__ribbon-num {
  font-size: 22px;
  line-height: 1;
  margin-left: 4px; /* EVENT とのあいだに少し余白 */
}

/*
  セクション見出し（スポーツ系イベント など）
  Figma spec：Noto Sans JP 700 / 36px / line-height 44px / letter-spacing 0 / center
  直下に 17px の白い帯を ::after で敷く。タイトルは fit-content でテキスト幅に
  シュリンクし、margin-inline: auto で中央寄せ。白帯はタイトル幅いっぱいに広がる。
*/
.fb-heartbeat .event-section__title {
  width: fit-content;
  margin: 0 auto 28px;
  color: var(--fb-green-dark);
  font-family: 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  /* 改行が入った場合にも各行を中央揃えにする */
  text-align: center;
  /* 白帯を text-decoration で描画：text がラップすると自動的に各行へ白帯が付く。
     以前の ::after + margin-top: -10px 相当の見た目を
     text-decoration-thickness（帯の太さ）＋ text-underline-offset（ベースラインからのずれ） で再現。 */
  text-decoration: underline;
  text-decoration-color: #FFFFFF;
  text-decoration-thickness: 17px;
  text-underline-offset: -2px;
  text-decoration-skip-ink: none; /* 日本語の下線が途切れないように */
}

/* ================================================================
   イベントカード
   ================================================================ */
/*
  カード全体は 2 列 × 2 行の Grid：
    行1：figure（左）| body（右）
    行2：cta（右寄せ、右カラムに配置）
  これで CTA が body から分離され、画像＋テキスト列の下に単独で並ぶ。
  .event-card--reverse を付けると左右が逆転（画像右・本文左）。ページ全体を通して
  左→右→左→右… と交互に並べたい場合、偶数番目のカードに付与する。
*/
.fb-heartbeat .event-card {
  display: grid;
  /* 画像カラムは Figma PC spec に合わせて固定 380px。本文カラムは 1fr で残りを占める。 */
  grid-template-columns: 380px 1fr;
  /* CTA 行は 2 カラムぶん span（"cta cta"）させて、カード全幅で右寄せできるようにする。
     reverse 時も同様に span させれば、本文カラムに縛られずカード右端に揃う。 */
  grid-template-areas:
    "figure body"
    "cta    cta";
  column-gap: 32px;
  row-gap: 34px;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* 偶数番目のカード：画像と本文の左右を入れ替え。CTA はカード右端に維持。 */
.fb-heartbeat .event-card--reverse {
  grid-template-columns: 1fr 380px;
  grid-template-areas:
    "body figure"
    "cta  cta";
}

.fb-heartbeat .event-card:last-child {
  margin-bottom: 0;
}

/* Event 8：CTA ボタン無しのため、空の "cta" 行と row-gap を除去し 1 行レイアウトに変更。padding-bottom も通常の 32px に戻す。
   また Figma spec では Event 8 の画像サイズが 268×166（他セクションは 380×235）なので、画像カラムを 268px に縮小。 */
.fb-heartbeat #event-8 .event-card {
  grid-template-columns: 268px 1fr;
  grid-template-areas: "figure body";
  row-gap: 0;
  padding-bottom: 32px;
}

.fb-heartbeat #event-8 .event-card--reverse {
  grid-template-columns: 1fr 268px;
  grid-template-areas: "body figure";
}

.fb-heartbeat .event-card__figure {
  grid-area: figure;
  /* デフォルトの align-self: stretch だと figure が grid セル高さいっぱいに引き伸ばされ、
     画像（height: auto）の下に背景色だけの空白が出てしまうため、自然な高さに収める。 */
  align-self: start;
  margin: 0;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}

.fb-heartbeat .event-card__figure:empty {
  /* 画像未配置時のプレースホルダー：元のカード比率（380:235）でスペースを確保 */
  aspect-ratio: 380 / 235;
}

.fb-heartbeat .event-card__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.fb-heartbeat .event-card__body {
  grid-area: body;
  min-width: 0;
}

/*
  カードタイトル（Figma spec）
  Noto Sans JP 700 / 18px / line-height 140% / #004C2A
  タイトルと説明文のあいだは 12px、説明文とメタのあいだは 20px（Frame 15 / 58 の gap を反映）
*/
.fb-heartbeat .event-card__title {
  margin: 0 0 12px;
  color: var(--fb-green-dark);
  font-family: 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

/*
  カード説明文（Figma spec）
  Noto Sans JP 400 / 16px / line-height 140% / #222222
*/
.fb-heartbeat .event-card__description {
  margin: 0 0 20px;
  color: #222222;
  font-family: 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

/*
  メタ情報（実施日・実施場所など）
  各行は「固定幅の緑ピル（dt）＋ 上に2pxのラインを持つ値（dd）」という構成。
  グリッドで 80px（ピル幅）｜1fr（値エリア）に分けて、行間は 6px。
*/
.fb-heartbeat .event-card__meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 8px;
  row-gap: 6px;
  margin: 0;
  padding: 0;
  align-items: center; /* dt(24px) と dd(18px 行) を縦中央で揃える */
}

/*
  ピル型ラベル（実施日、実施場所 など）
  80×24 / padding 5px 16px / 背景 #007A43 / radius 3px
  テキスト Inter 700 / 12px / letter-spacing 0.16em / 白
  word-break: keep-all で日本語の文字間自動改行を禁止。4文字熟語（実施場所・賞品交換など）は
  1行で収める。長いラベル（例：スクラッチ配布）は HTML 側で <br> を入れて明示的に改行させる。
*/
.fb-heartbeat .event-card__meta dt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  min-height: 24px;
  padding: 5px 16px;
  margin: 0;
  background: #007A43;
  border-radius: 3px;
  color: #FFFFFF;
  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.16em;
  text-align: center;
  word-break: keep-all;
}

/*
  値（Figma spec）
  Inter 700 / 14px / line-height 18px / #004C2A
*/
.fb-heartbeat .event-card__meta dd {
  margin: 0;
  padding: 0;
  color: var(--fb-green-dark);
  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.fb-heartbeat .event-card__venues {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fb-heartbeat .event-card__venues li + li {
  margin-top: 2px;
}

/*
  ※注釈リスト（Figma spec 準拠）
  Noto Sans JP 400 / 12px / line-height 140% / letter-spacing -0.02em / #222222
  ハンギングインデント：※ は 14px 幅の左カラム、テキストは右カラム、ギャップ 4px
*/
.fb-heartbeat .event-card__notes {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #222222;
  margin-top: 20px;
}

.fb-heartbeat .event-card__notes li {
  position: relative;
  padding-left: 18px; /* 14px（※ カラム幅）＋ 4px（ギャップ） */
}

.fb-heartbeat .event-card__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/*
  詳しくはこちらボタン（Figma spec 準拠）
  - サイズ：~178×44 / padding 10px 10px 10px 22px / gap 12px（テキスト⇔アイコン）
  - 影：0 2px 0 #004C2A（ピルと同じ押下感）
  - 角丸：71px
  - テキスト：Inter 700 / 16px / 16px / letter-spacing -0.03em / #FFFFFF
    （Inter は日本語未収録のため、日本語部分は Noto Sans JP にフォールバック）
  - アイコン：24×24 の白円に濃緑 #004C2A の右向き矢印（arrow-right-green.svg）
*/
.fb-heartbeat .event-card__cta {
  grid-area: cta;        /* Grid レイアウトで .event-card の 2 行目・右カラムに配置 */
  justify-self: end;     /* グリッドセル内で右寄せ */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 22px;
  min-height: 44px;
  background: var(--fb-orange);
  box-shadow: 0 2px 0 var(--fb-green-dark);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 71px;
  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans Japanese', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.03em;
  transition: transform .1s ease, box-shadow .1s ease;
}

/* 右端のアイコン：白い丸 ＋ 濃緑の右上向き矢印（SVG、Figma 提供） */
.fb-heartbeat .event-card__cta::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url('https://www.f-keiba.com/images/heartbeatevent/20260501/20260501_arrow-right-green.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
  flex-shrink: 0;
}

/* ホバー時は少し沈み込ませる（ピルと同じ挙動） */
.fb-heartbeat .event-card__cta:hover,
.fb-heartbeat .event-card__cta:focus-visible {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--fb-green-dark);
}

/* ================================================================
   タブレット＋SP（≤991.9px）― カードをスタックレイアウトに切替
   ----------------------------------------------------------------
   992px 以上：.fb-heartbeat は max-width 992px でキャップ、カードは
     380px（または Event 8 は 268px）の画像カラム＋本文 1fr の横並び。
   991.9px 以下：.fb-heartbeat が viewport に合わせて縮み、本文カラムが
     破綻して狭くなるため、ここで縦積みに切り替える。
   SP 専用の padding / font-size 調整は下の ≤767.9px ブロックで行う。
   ================================================================ */
@media screen and (max-width: 991.9px) {
  /* 通常カード（Event 1〜7）：figure → body → cta の縦積み */
  .fb-heartbeat .event-card,
  .fb-heartbeat .event-card--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "figure"
      "body"
      "cta";
    row-gap: 16px;
  }

  /* Event 8：CTA 無しなので figure → body の 2 行。外側の #event-8 ルール
     （268×1fr グリッド、row-gap: 0、padding-bottom: 32）のほうが特異度が高いため、
     ここでも明示的に上書きする。 */
  .fb-heartbeat #event-8 .event-card,
  .fb-heartbeat #event-8 .event-card--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "figure"
      "body";
    row-gap: 16px;
    padding-bottom: 20px;
  }

  /* PC レイアウト前提の <br class="br-pc"> はスタック時は不要なので無効化。
     <br class="br-sp"> は逆にここで有効化（default 非表示 → inline）。 */
  .fb-heartbeat .br-pc {
    display: none;
  }

  .fb-heartbeat .br-sp {
    display: inline;
  }

  /* ピル：4 カラムだと文字数の多いラベル（LINE新規お友達登録キャンペーン、FUNABASHI ホリデーパーク 等）が
     3 行以上に折り返してレイアウトが破綻するため、2 カラムに切替。 */
  .fb-heartbeat__pills ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   タブレット単独（768〜991.9px）
   ----------------------------------------------------------------
   スタック時に PC レイアウト想定の個別の <br> が不自然に折り返す箇所で使用する
   <br class="br-no-tablet"> をここで非表示にする。PC と SP では改行が残る。
   ================================================================ */
@media screen and (min-width: 768px) and (max-width: 991.9px) {
  .fb-heartbeat .br-no-tablet {
    display: none;
  }
}

/* ================================================================
   SP（≤767.9px）― padding / font-size / 余白の SP 向け微調整
   ================================================================ */
@media screen and (max-width: 767.9px) {
  .fb-heartbeat {
    padding-block: 0 6px; /* 上は 0、下は 6px（Figma SP spec） */
    /* SP では .fb-heartbeat の内側 padding は 6px（Figma spec）。
       外側の .container の 12px padding と合わせて green content area = 366px を構成。 */
    padding-inline: 6px;
  }

  .fb-heartbeat__kv {
    /* SP の KV は 366px の content area（.fb-heartbeat 外周）を full-bleed で埋める。
       .fb-heartbeat は 6px の内側 padding を持っているため、negative margin で打ち消して
       img を green content area ちょうど 366px 幅にする（Figma spec）。ただし viewport（390px）
       の端までは伸びず、.container の 12px padding 分の白帯は左右に残る。 */
    margin-inline: -6px;
    /* KV と次セクションの間は Figma SP spec（390px viewport 時）で 24px = 6.15vw。
       viewport が 390 より狭い場合は画像と一緒にスケールダウン、
       390 以上では 24px にキャップして大きくなりすぎないようにする（Bootstrap の .container が
       576+ で max-width で止まる一方、vw は viewport に追随し続けるため比率が崩れるのを防ぐ）。 */
    margin-bottom: min(6.15vw, 24px);
  }

  .fb-heartbeat__pills {
    /* SP では green 端から 9px 離す指定。.fb-heartbeat の padding 6px に +3px して計 9px。 */
    margin-inline: 3px;
    /* SP はピル下の余白も 56px に調整（Figma spec）。 */
    margin-bottom: 56px;
  }

  .fb-heartbeat__pills ul {
    /* Figma SP spec：行間 14px、列間 6px（grid-template-columns は上の ≤991.9 ブロックで 2 カラム済み） */
    row-gap: 14px;
    column-gap: 6px;
  }

  /* Figma SP spec：ピルのテキストは 14px → 13px に縮小。line-height は 16px のまま。 */
  .fb-heartbeat__pills a {
    font-size: 13px;
  }

  /* Figma SP spec：テキストサイズは PC と同一のため、SP 専用の font-size 上書きなし。
     レイアウトと padding/margin のみ SP 向けに調整する。 */

  .fb-heartbeat .event-section {
    padding: 28px 18px 20px;
    /* SP はセクション間の余白も 60px → 48px に詰める（Figma spec）。 */
    margin-bottom: 48px;
  }

  /* SP ではリボンの吹き出しを 140×54 → 120×46 に縮小（Figma spec）。
     SVG を background-size で縮めるだけなので画像ファイルは PC と共用。
     「EVENT」テキストも SP 用に縮小：12px → 10.29px（Figma spec）。
     位置は PC の left: -16px だとはみ出しすぎなので SP は少し右に寄せる。 */
  .fb-heartbeat .event-section__ribbon {
    width: 120px;
    height: 46px;
    background-size: 120px 46px;
    font-size: 10.29px;
    left: -10px;
  }

  /* SP ではキャロッタを 33×47 → 28×40 に縮小（Figma spec）。こちらも SVG を流用。 */
  .fb-heartbeat .event-section__ribbon::before {
    width: 28px;
    height: 40px;
    background-size: 28px 40px;
  }

  /* 番号（01〜08）も SP 用に縮小：22px → 18.86px（Figma spec）。 */
  .fb-heartbeat .event-section__ribbon-num {
    font-size: 18.86px;
  }

  /* セクション見出しも SP 用に縮小：36px → 30px（Figma spec）。
     見出し下の余白（カードとの間）も 28px → 20px に詰める。 */
  .fb-heartbeat .event-section__title {
    font-size: 30px;
    margin-bottom: 20px;
  }

  /* 見出し下の白帯も SP 用に縮小：17px → 13px（Figma spec）。
     text-decoration-thickness で厚みだけ上書き。 */
  .fb-heartbeat .event-section__title {
    text-decoration-thickness: 13px;
  }

  /* カード内側の padding は上下左右 16px、下のみ 20px（Figma spec）。
     カード間の余白も 20px → 18px に詰める（Figma spec）。
     縦積み grid の指定は上の ≤991.9 ブロックで行っているのでここでは触れない。
     画像まわりの余白（padding / row-gap / margin-bottom）は vw で指定し、viewport が
     390 より狭い場合は画像と一緒にスケールダウン、390 以上では Figma spec の px でキャップ。 */
  .fb-heartbeat .event-card,
  .fb-heartbeat .event-card--reverse {
    padding: min(4.1vw, 16px);
    padding-bottom: min(5.13vw, 20px);
    margin-bottom: min(4.6vw, 18px);
    row-gap: min(4.1vw, 16px);
  }

  /* メタの緑バッジ（dt）を SP 用に縮小：80px → 68px（Figma spec）。
     grid-template-columns も合わせて調整し、dd は残り幅を埋める。
     テキストの letter-spacing は PC の 0.16em → SP では 0 に（Figma spec）。 */
  .fb-heartbeat .event-card__meta {
    grid-template-columns: 68px 1fr;
  }

  .fb-heartbeat .event-card__meta dt {
    width: 68px;
    letter-spacing: 0;
  }

  /* スタック grid・br-pc/br-sp・Event 8 の grid 上書きは上の ≤991.9 ブロックで対応済み。
     Event 8 の row-gap / padding-bottom は ≤991.9 で 16/20 固定で指定されているため、
     SP では通常カードに合わせて同じ fluid 値で再上書き（specificity 対策）。 */
  .fb-heartbeat #event-8 .event-card,
  .fb-heartbeat #event-8 .event-card--reverse {
    row-gap: min(4.1vw, 16px);
    padding-bottom: min(5.13vw, 20px);
  }

  /* SP 時の aspect-ratio は PC と同じ 380/235 を維持（画像幅 100% で縦がスケール） */
}