/* ============================================================
   水想い MIZUOMOI 商品詳細ページ 共通CSS（product.css）
   ・4ページ共通で読み込む
   ・幅 / 中央寄せ / シャドウ / 背景の表示方法は style.css を流用
   ・このファイルでは「ページ別の背景画像」だけを指定する
   ============================================================ */

/* ------------------------------------------------------------
   ページ別の背景画像
   ・body のクラス（bg-1 / bg-2 …）で切り替える
   ・背景の fixed / cover / center は style.css の body{} が担当
   ・501px以上でのみ背景が見える（TOPと同じ挙動）
   ------------------------------------------------------------ */
@media (min-width: 501px) {
  body.bg-1 { background-image: url('../images/bg-1.webp'); }
  body.bg-2 { background-image: url('../images/bg-2.webp'); }
  body.bg-3 { background-image: url('../images/bg-3.webp'); }
  /* 保存水用の背景があれば有効化
  body.bg-4 { background-image: url('../images/bg-4.webp'); } */
}

/* ------------------------------------------------------------
   LP画像（縦に並べる）
   ・display:block / width:100% は style.css の img{} を流用
   ・画像のつなぎ目に出るサブピクセルの隙間だけ対策
   ------------------------------------------------------------ */
.product-detail .lp-img {
  margin-bottom: -1px;
}