@charset "UTF-8";

/* ===================================
   商品スライダー全体
=================================== */
    
/*** スライド拡大設定 */
/* スライド自体は拡大しない */
.product-carousel__slide {
  position: relative;
  z-index: 1;
}

/* カード全体を少し縮小 */
.product-carousel__slide .product-card {
  transform: scale(0.92);
  transform-origin: center center;
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 中央のカードだけ拡大 */
.product-carousel__slide.product-slide-center {
  z-index: 2;
}

.product-carousel__slide.product-slide-center .product-card {
  transform: scale(1.08);
}


/* ===================================
   カルーセル
=================================== */

.product-carousel {
  --slide-width: min(48vw, 900px);
  --slide-gap: 5px;

  position: relative;
  width: 100%;
  margin-top: 90px;
}

.product-carousel__viewport {
  width: 100%;
  /* overflow: hidden; */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.product-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.product-carousel__track {
  display: flex;
  align-items: center;
  will-change: transform;
}

.product-carousel__track.is-animated {
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-carousel__slide {
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);
  padding: 0 calc(var(--slide-gap) / 2);
  box-sizing: border-box;
}


/* ===================================
   商品カード
=================================== */

.product-card {
  --mouse-x: 0deg;
  --mouse-y: 0deg;
  --move-x: 0px;
  --move-y: 0px;

  /* 中央以外は10度 */
  --base-rotate: 10deg;

  /* HTML側で商品ごとに指定 */
  --hover-rotate: 0deg;

  position: relative;
  display: block;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 2048 / 1456;
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
  perspective: 1000px;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* 中央の商品だけ傾きを0度にする */
.product-carousel__slide.product-slide-center .product-card {
  --base-rotate: 0deg;
}


/* ===================================
   背景画像・商品画像
=================================== */

.product-card__background,
.product-card__main {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.product-card__background img,
.product-card__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 追記 */
.product-card__main picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__background img,
.product-card__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ===================================
   背景画像
=================================== */

.product-card__background {
  z-index: 1;
  opacity: 0;
  visibility: hidden;

  transform:
    translate(
      calc(var(--move-x) * -0.25),
      calc(var(--move-y) * -0.25)
    )
    scale(0.96);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {

  /* 中央の商品をホバーした時だけ背景表示＋コマ送り */
  .product-carousel__slide.product-slide-center
  .product-card:hover
  .product-card__background {
    opacity: 1;
    visibility: visible;

    animation:
      productBgWobble 1.1s
      steps(1, end)
      infinite;
  }

  /* 商品画像もコマ送りで揺らす */
  .product-carousel__slide.product-slide-center
  .product-card:hover
  .product-card__main {
    animation:
      productMainWobble 1.1s
      steps(1, end)
      infinite;
  }

}


/* ===================================
   商品画像
=================================== */

.product-card__main {
  z-index: 2;

  transform:
    translate(var(--move-x), var(--move-y))
    rotateX(var(--mouse-y))
    rotateY(var(--mouse-x))
    rotate(var(--base-rotate))
    scale(1);

  transform-origin: center center;
  transform-style: preserve-3d;

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;

  will-change: transform;
}


/* ===================================
   背景画像
=================================== */

.product-card__background {
  z-index: 1;
  opacity: 0;

  transform:
    translate(
      calc(var(--move-x) * -0.25),
      calc(var(--move-y) * -0.25)
    )
    scale(0.96);

  transition:
    opacity 0.3s ease;

  will-change: transform, opacity;
}


/* ===================================
   商品画像
=================================== */

.product-card__main {
  z-index: 2;

  transform:
    translate(var(--move-x), var(--move-y))
    rotateX(var(--mouse-y))
    rotateY(var(--mouse-x))
    rotate(var(--base-rotate))
    scale(1);

  transform-origin: center center;
  transform-style: preserve-3d;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}


/* ===================================
   中央の商品をホバーした時だけ
=================================== */

@media (hover: hover) and (pointer: fine) {

  /* 中央の商品：ホバー時だけ背景表示＋カクカク揺れる */
  .product-carousel__slide.product-slide-center
  .product-card:hover
  .product-card__background {
    opacity: 1;
    visibility: visible;

    animation:
      productBgWobble 2.5s
      step-end
      infinite;
  }

  /* 商品画像もカクカク揺れる */
  .product-carousel__slide.product-slide-center
  .product-card:hover
  .product-card__main {
    animation:
      productMainWobble 2.5s
      step-end
      infinite;
  }

}


/* ===================================
   商品画像
   パラパラ漫画風の揺れ
=================================== */

@keyframes productMainWobble {

  0% {
    transform:
      translate(0px, 0px)
      rotate(-1deg)
      scale(1.04);
  }

  12.5% {
    transform:
      translate(3px, -2px)
      rotate(1.5deg)
      scale(1.045);
  }

  25% {
    transform:
      translate(-2px, 1px)
      rotate(-1.5deg)
      scale(1.04);
  }

  37.5% {
    transform:
      translate(2px, 2px)
      rotate(2deg)
      scale(1.045);
  }

  50% {
    transform:
      translate(-3px, -1px)
      rotate(-1deg)
      scale(1.04);
  }

  62.5% {
    transform:
      translate(1px, -2px)
      rotate(1.5deg)
      scale(1.045);
  }

  75% {
    transform:
      translate(-2px, 2px)
      rotate(-2deg)
      scale(1.04);
  }

  87.5% {
    transform:
      translate(3px, 1px)
      rotate(1deg)
      scale(1.045);
  }

  100% {
    transform:
      translate(0px, 0px)
      rotate(-1deg)
      scale(1.04);
  }

}


/* ===================================
   背景画像
   商品画像とは別方向にカクカク動かす
=================================== */

@keyframes productBgWobble {

  0% {
    transform:
      translate(0px, 0px)
      rotate(1deg)
      scale(1.01);
  }

  12.5% {
    transform:
      translate(-5px, 3px)
      rotate(-1.5deg)
      scale(1.015);
  }

  25% {
    transform:
      translate(4px, -2px)
      rotate(1deg)
      scale(1.01);
  }

  37.5% {
    transform:
      translate(-3px, -3px)
      rotate(-2deg)
      scale(1.015);
  }

  50% {
    transform:
      translate(5px, 2px)
      rotate(1.5deg)
      scale(1.01);
  }

  62.5% {
    transform:
      translate(-4px, 1px)
      rotate(-1deg)
      scale(1.015);
  }

  75% {
    transform:
      translate(3px, -3px)
      rotate(2deg)
      scale(1.01);
  }

  87.5% {
    transform:
      translate(-2px, 2px)
      rotate(-1.5deg)
      scale(1.015);
  }

  100% {
    transform:
      translate(0px, 0px)
      rotate(1deg)
      scale(1.01);
  }

}

/* ===================================
   フォーカス
=================================== */

.product-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}


/* ===================================
   ナビゲーション
=================================== */

.product-carousel__navigation {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 35px;
}

.product-carousel__arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.product-carousel__arrow:hover {
  transform: scale(1.12);
}

.product-carousel__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.product-carousel__arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}


/* ===================================
   ページネーション
=================================== */

.product-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.product-carousel__bullet {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.product-carousel__bullet:hover {
  transform: scale(1.25);
}

.product-carousel__bullet.is-active {
  background: #010000;
}

.product-carousel__bullet:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}


/* ===================================
   タブレット
=================================== */

@media screen and (max-width: 1499px) {

  .product-carousel {
    --slide-width: min(43vw, 580px);
    --slide-gap: 20px;
  }

}

@media screen and (max-width: 1024px) {

  .product-lineup {
    padding: 75px 0 60px;
  }

  .product-carousel {
    --slide-width: min(62vw, 540px);
    --slide-gap: 16px;
  }

}


/* ===================================
   スマートフォン
=================================== */

@media screen and (max-width: 767px) {
  .product-lineup {
    padding: 55px 0 45px;
  }

  #product-lineup-title {
    width: 300px;
    height: 24px;
  }

  .product-carousel {
    /*--slide-width: 70vw;*/
    --slide-gap: 0px;

    margin-top: 30px;
  }

  .product-carousel__navigation {
    gap: 14px;
    margin-top: 22px;
  }

  .product-carousel__arrow {
    width: 30px;
    height: 30px;
  }

  .product-card__background {
    transform:
      translate(
        calc(var(--move-x) * -0.25),
        calc(var(--move-y) * -0.25)
      )
      scale(0.97);
  }
    
  /*** 追記ここから ***/
    .product-carousel {
        padding-top: 30px;
    }
    
    /* 背景画像非表示 */
    .product-card__background {
        display: none;
    }  
    
    /* スライド画像の大きさ調整 */
    
    /*
    .product-lineup {
        overflow-y: auto !important;
    }
    
    .product-card__main img {
        height: auto !important;
    }
    */
    
    .product-carousel {
    --slide-width: 68vw;
    --slide-gap: 0px;

    padding-top: 30px;
    margin-top: 30px;
  }

  /* 左右の商品も見せるため */
  .product-lineup {
    overflow: hidden;
  }

  .product-lineup__inner,
  .product-carousel,
  .product-carousel__viewport {
    overflow: visible;
  }

  .product-carousel {
    --slide-width: 78vw;
    --slide-gap: 40px;
      
  }

  .product-carousel__slide .product-card {
    transform: scale(0.96);
    aspect-ratio: 922 / 1438;
  }

  .product-carousel__slide.product-slide-center .product-card {
    transform: scale(1);
  }

  /*** 追記ここまで ***/

}


/* ===================================
   アニメーション軽減設定
=================================== */

@media (prefers-reduced-motion: reduce) {

  .product-carousel__track.is-animated,
  .product-card__background,
  .product-card__main,
  .product-carousel__arrow,
  .product-carousel__bullet {
    transition-duration: 0.01ms;
  }
}