/*
 * FV offer card — exact supplied reference
 *
 * ユーザー提供の1536×1024見本を比率変更せず重ねる。
 * 背景FV画像と旧HTMLカードは削除していないため、このlinkと
 * .fv-reference-cardを外せば直前の状態へ戻せる。
 */

.hero-fv-pc {
  position: relative;
}

.fv-reference-card {
  position: absolute;
  z-index: 3;
  left: 28.39%;
  /* 2026-08-07 修正：55.57%（=y569px）だとサブコピー2行目「シーンに合わせて選べます。」
     （FV画像で y545-575px）の下半分にかぶっていた。文字の下端575pxより下へ下げる。
     57.0% = y584px。カードの高さは 40.1%×1536×2/3 = 411px なので下端は995px。
     覆う必要があるのは 焼き込みピル(y615-650) と 焼き込みカード(y668-980) で、
     どちらも 584-995 の内側に収まるため、下げてもはみ出さない。
     ※この重ねカードは不透明な1枚絵なので、矩形が重なっていれば必ず隠せる。

     2026-08-07 再調整：57.0%だと文字とカードの間が8pxしかなく窮屈だったので、
     下げられる限界まで下げた。限界を決めているのは焼き込みピルの上端 y610px
     （ここを覆えないとピルが二重に見える）。59.0% = y604px で余白は28pxになる。
     ⚠️これ以上は下げられない。カードを下げる以外に余白を稼ぐなら、
     FV画像側のサブコピー（y517-538 と y555-576）を上へ描き直すしかない。

     2026-08-07 その3：FV画像を下へ56px継ぎ足した（1536×1024 → 1536×1080）ので、
     同じ y604px を指すには % を割り直す必要がある。604 / 1080 = 55.93%。
     ⚠️FV画像の高さを変えたら、必ずこの値も計算し直すこと（= 604 ÷ 画像の高さ）。 */
  top: 55.93%;
  display: block;
  width: 40.1%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  line-height: 0;
  border-radius: 1.35cqw;
  box-shadow: 0 1.2cqw 3cqw rgba(89, 56, 42, 0.13);
  pointer-events: none;
}

.fv-reference-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-reference-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* スマホは重ねない（2026-08-05）。
   見本カードは3:2で、スマホ用FVの焼き込みカード（約1.74:1）より縦に長い。
   覆えるだけの幅にすると貝皿にかぶり、かぶらない大きさにすると
   下の焼き込みカードが左右にはみ出す——どちらも成立しないため。
   スマホは元の焼き込みカードをそのまま使う。 */
@media (max-width: 767px) {
  .fv-reference-card {
    display: none;
  }
}

/* ── CTAの下の余白（2026-08-05） ─────────────────
   FVのCTAカードは画像の下端に接しているため、写真側ではなく
   次のセクション（color collection）の上に余白を足して空間をつくる。
   写真を加工しないので、下地がぼやける問題が起きない。 */
.product-lineup {
  padding-top: 132px;
}

@media (max-width: 767px) {
  .product-lineup {
    padding-top: 108px;
  }
}