/* =========================================================
   画像版・追加スタイル（C案のうえに重ねて使う）
   ・ファーストビューの帯に写真を全幅で配置（高さは控えめ）
   ・各カードの「見本バナー」を実写真に差し替え
   読み込みは _lp3_3.css の後ろ（最後）に入れること
   ========================================================= */

/* --- ① ファーストビューの写真帯 --- */
.hero{ padding: 0 22px 40px; }            /* 上の余白を消して写真を最上部へ */
.hero__media{
  margin: 0 -22px 22px;                   /* 左右いっぱいに広げる（はみ出し配置） */
  height: clamp(190px, 30vw, 280px);      /* 高さを抑える（縦を取りすぎない） */
  overflow: hidden;
}
.hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;                       /* 帯に合わせて写真を切り抜き */
  object-position: center 42%;
  display: block;
}
/* PR表記：囲み枠をなくし、写真の下の白い余白の右端に小さく「PR」の文字だけ表示 */
.hero__pr{
  position: static; display: block; text-align: right;
  margin: 10px 0 6px;
  border: 0; background: transparent; padding: 0;   /* 横長の空き枠を消す */
  color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .08em;
}

/* --- ② カードの写真（見本バナーの位置に実写真を入れる） --- */
.card-photo{
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 18px;
}
.card-photo img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}