/* Watch Slider CSS */
.wp-watch-slider{
  position: relative;
  /* 強制クリップ：Safari含む */
  overflow: hidden;
  /* 新しめのブラウザでは clip を使ってより確実に */
  overflow-x: hidden; /* フォールバック */
  /* Safariでの視覚的オーバーフローを抑制 */
  -webkit-mask-image: radial-gradient(#000,#000);
  isolation: isolate;
  background: linear-gradient(180deg,#f7f8fb,#eef1f6);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(0,0,0,.2);
  min-height: 200px;
}

/* ベルト：独立レイヤ&クリップ安定 */
.wp-watch-slider .belt{
  position:relative;
  height:100%;
  will-change:transform;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ==== ここがポイント：flexを使わない ==== */
/* トラックは横一列を inline-block で流す */
.wp-watch-slider .track{
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
  display:block;            /* flexやめ */
  white-space: nowrap;      /* 横一列 */
  gap:0;                    /* 一応ゼロ */
}
.wp-watch-slider .track.clone{ left:unset; } /* leftはJSでpx指定 */

/* アイテムは inline-block 化して “明示的な”間隔を margin で作る */
.wp-watch-slider .item{
  position:relative;
  display:inline-block;
  vertical-align: top;
  height:100%;
  margin-right: var(--gap, 24px);
}
.wp-watch-slider .item:last-child{ margin-right: 0; }

/* 画像ボックスはそのまま（flex可） */
.wp-watch-slider .item .vbox{
  position:relative;
  height:100%;
  display:flex;
  align-items: stretch;
  width:max-content;
  cursor:zoom-in; /* モバイル時はJSでdefaultに */
}
.wp-watch-slider .item.top    .vbox{ align-items:flex-start; }
.wp-watch-slider .item.bottom .vbox{ align-items:flex-end; }

/* 画像サイズ制御（横は自動、高さで合わせる） */
.wp-watch-slider .item img{
  display:block;
  height:auto; width:auto; max-height:100%;
  object-fit:contain;
  max-width: var(--img-maxw, none); /* JSが設定 */
  image-rendering:auto;
}

/* 上下ゆらぎ */
@keyframes wps-floatY{
  0%  { transform: translateY(0); }
  50% { transform: translateY(var(--amp, 0px)); }
  100%{ transform: translateY(0); }
}
@keyframes wps-floatYInv{
  0%  { transform: translateY(0); }
  50% { transform: translateY(calc(var(--amp, 0px) * -1)); }
  100%{ transform: translateY(0); }
}

/* 横無限スクロール（距離は--shiftでピクセル指定） */
@keyframes wps-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shift, 0px))); }
}

/* iOS / Safari サブピクセル丸めの微補正（任意） */
@supports (-webkit-touch-callout: none) {
  .wp-watch-slider .item {
    margin-right: calc(var(--gap, 24px) - 0.25px);
  }
}

/* 念のため：将来の overflow: clip を使える環境で */
@supports (overflow: clip) {
  .wp-watch-slider{ overflow: clip; }
}