/* ==========================================================================
   婚姻届ページ専用：写真の無限レール
   --------------------------------------------------------------------------
   TOPクロスフェードとはクラス・CSS・JavaScriptを共有しません。
   移動は product-memory-rail.js の requestAnimationFrame だけで管理します。
   CSS animation / keyframes は使用しません。
   ========================================================================== */

.product-memory-rail {
  --product-memory-item-width: clamp(360px, 42vw, 560px);
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 58px calc(50% - 50vw) 0;
  overflow: hidden;
  background: #f5f4f0;
  contain: layout paint;
}

.product-memory-rail__track {
  display: flex;
  width: max-content;
  min-width: max-content;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.product-memory-rail__group {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  gap: 0;
}

.product-memory-rail__item {
  flex: 0 0 var(--product-memory-item-width);
  width: var(--product-memory-item-width);
  margin: 0;
  overflow: hidden;
  background: #f5f4f0;
}

.product-memory-rail__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 850 / 530;
  object-fit: cover;
}

/* JSが読み込めない場合も、画像自体は横一列で表示します。 */
.product-memory-rail:not(.is-motion-ready) .product-memory-rail__track {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .product-memory-rail {
    --product-memory-item-width: min(78vw, 340px);
    margin-top: 38px;
  }
}

/* レール直後に白い下余白を作らない既存仕様を、この機能側で所有します。 */
.page-konintodoke-overview .product-summary {
  padding-bottom: 0;
}