/* ==============================================
▼PC商品一覧：商品画像マウスオーバー自動スライドショー
=============================================== */

/* オーバーレイの絶対配置基準にするため、サムネイルへのリンクを基準枠にする */
.prize_imgbox p a.product-detail-link {
  display: block;
  position: relative;
}

/* スライドショー本体。サムネイル画像の上に重ねて表示する */
.hover-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* height はフォールバック。aリンクはインライン画像のベースライン下余白ぶん
     実画像より背が高いため、JS側が実画像(img.picture)の高さで上書きする */
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: block;
  background: #fff;
  /* 挿入直後の白フラッシュを防ぎ、サムネイルからクロスフェードで切り替えるための初期状態 */
  opacity: 0;
  transition: opacity .15s ease;
}

/* JSが挿入後(1枚目デコード完了後)の次フレームで付与→フェードイン */
.hover-slideshow.is-visible {
  opacity: 1;
}

.hover-slideshow__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .35s ease;
  will-change: transform;
}

.hover-slideshow__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hover-slideshow__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.hover-slideshow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
}

.hover-slideshow__dot.is-active {
  background: rgba(0, 0, 0, .7);
}

/* モーダル開くボタンはスライドオーバーレイ(z-index:1)より手前、
   詳細ページ遷移ローディング(.product-detail-loading, z-index:5)より奥に置く */
.prize_imgbox .modal-btn {
  z-index: 2;
}

/* サイト全体の a:hover img{opacity:.5}(common.css) が商品画像・スライドに効いて
   白っぽくハイライトされるため、商品一覧の画像枠内では打ち消す */
.prize_imgbox a:hover img {
  opacity: 1;
  filter: none;
}

/* ==============================================
▼ホバーエフェクト「リフト＋影」
=============================================== */

/* :hover の判定は動かない .prize_imgbox に持たせ、動かすのは中のリンクブロックだけにする。
   （box自身をtranslateすると、画像下端ホバー時に要素がカーソルから逃げて
     hover解除→復帰を繰り返すジッターが起きるため） */
.prize_imgbox p a.product-detail-link {
  transition: transform .25s ease;
}
.prize_imgbox:hover p a.product-detail-link {
  transform: translateY(-4px);
}

/* 影はaボックス（実画像+ベースライン下余白10px）ではなく実画像に付けて、画像の真下に出す。
   スライドショーのオーバーレイは実画像と同じ矩形に重なるため、スライド中も影はそのまま見える */
.prize_imgbox p a.product-detail-link img.picture {
  transition: box-shadow .25s ease;
}
.prize_imgbox:hover p a.product-detail-link img.picture {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* ==============================================
▼汎用マーカー([data-hover-slideshow])対応
  商品一覧以外のページ(TOPランキング/ランキング/カテゴリLP)の画像枠に付与して使う
=============================================== */

/* オーバーレイの絶対配置基準にする */
[data-hover-slideshow] {
  position: relative;
}

/* リフト＋影（:hover判定は動かない箱に持たせ、動かすのは中身だけ=ジッター回避。
   オーバーレイも一緒に持ち上げて画像とズレないようにする） */
[data-hover-slideshow] > img {
  transition: transform .25s ease, box-shadow .25s ease;
}
/* opacity も含める（このルールは特異度が上で .hover-slideshow の transition を
   上書きするため、opacity を書かないとマーカーページでクロスフェードが効かなくなる） */
[data-hover-slideshow] .hover-slideshow {
  transition: transform .25s ease, opacity .15s ease;
}
[data-hover-slideshow]:hover > img,
[data-hover-slideshow]:hover .hover-slideshow {
  transform: translateY(-4px);
}
[data-hover-slideshow]:hover > img {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* 既存のホバー減光を打ち消す:
   - 全体CSS a:hover img{opacity:.5}（common.css）
   - カテゴリLP .product__box__wrapper:hover .product__box__img{opacity:.75} */
a:hover [data-hover-slideshow] img,
[data-hover-slideshow]:hover img {
  opacity: 1;
  filter: none;
}
main .search .product__box__wrapper:hover .product__box__img[data-hover-slideshow] {
  opacity: 1;
}

/* ==============================================
▼ホバー時にアンカー全体を半透明化する既存ルールの打ち消し
  親要素のopacityはスライドごと半透明に合成され、
  子要素側では打ち消せないため、アンカー自身の:hoverで戻す
=============================================== */

/* TOP: .LC_Page_Index a:hover{opacity:.5}(top.css) 対策。
   汎用形(タイ時も後読みで勝つ)とページスコープ形(特異度で確実に勝つ)の両方を置く */
a[data-hover-slideshow]:hover,
.LC_Page_Index a[data-hover-slideshow]:hover {
  opacity: 1;
  filter: none;
}

/* /ranking/: a:hover{opacity:.6}(asset/css/style.css) 対策。
   カード全体が1つのaで、スライド対象カードは全てマーカーを内包するためリンククラスで打ち消す */
.ranking_list__li__link:hover {
  opacity: 1;
  filter: none;
}

/* ==============================================
▼商品画像の角丸（商品一覧PC/SP・ランキング・カテゴリLP検索結果）
  実画像側の角丸(各ページCSS)に合わせて、ホバー/タップ時に重なる
  スライドオーバーレイ(overflow:hidden+白背景)も同じ半径でクリップする。
  TOPページは角丸対象外のためコンテナ限定で指定する
=============================================== */
.prize_imgbox .hover-slideshow,
.listphoto .hover-slideshow,
.ranking_list__li__item__img .hover-slideshow,
.product__box__img .hover-slideshow {
  border-radius: 10px;
  /* 中の__trackがwill-change:transformで合成レイヤー化すると、親のoverflow:hidden+
     border-radiusの角丸クリップが効かず四角く描画される(Chromium)。
     オーバーレイ自身もレイヤー化することで角丸クリップを効かせる */
  transform: translateZ(0);
}

/* 保険: スライド自体も同半径で丸める。表示中のスライドはオーバーレイと同矩形なので
   角の見た目は一致し、スライド送り中の継ぎ目の丸みは白背景(オーバーレイ)に溶けて目立たない */
.prize_imgbox .hover-slideshow__slide,
.listphoto .hover-slideshow__slide,
.ranking_list__li__item__img .hover-slideshow__slide,
.product__box__img .hover-slideshow__slide {
  border-radius: 10px;
}

/* ==============================================
▼SP: タップハイライトの無効化
  SPサイト全体は body の -webkit-tap-highlight-color: rgba(0,0,0,.5)（sphone/common.css）
  が全リンクに効いており、商品画像リンクのタップで黒半透明の四角が画像矩形に重なって
  「角丸が効いていない・濃いグレー」に見える。スライドショー対象のリンクでは
  ハイライトを消し、タップ演出はPCホバーと同じリフト＋ぼかし影に統一する
=============================================== */
[data-hover-slideshow],
.listphoto a.product-detail-link,
.prize_imgbox a.product-detail-link {
  -webkit-tap-highlight-color: transparent;
}

/* ==============================================
▼SP版商品一覧(sphone list.tpl)対応
=============================================== */

/* モーダル開くボタンをスライドオーバーレイ(z-index:1)より手前に置く
   (PC版 .prize_imgbox .modal-btn と同趣旨。遷移ローディングはz-index:30で最前面のまま) */
.listphoto .modal-btn {
  z-index: 2;
}

/* 元のサムネイルの角丸(products.css: p.listphoto a > img{border-radius:10px})に合わせる */
.listphoto .hover-slideshow {
  border-radius: 10px;
}

/* ==============================================
▼長押し対策（PC/SP共通）
=============================================== */

/* 長押し対策:
   スライド画像がネイティブにドラッグ/選択/(iOS)長押しメニューされると、
   その最中に mouseout で stopActive() がオーバーレイを削除した際に
   ブラウザのポインタ状態が宙ぶらりんになり全画面が無反応になることがある。
   オーバーレイ内では選択・ドラッグ・コールアウトを一律で無効化して防ぐ。 */
.hover-slideshow,
.hover-slideshow__slide {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}