.stage {
  perspective: 1200px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.stage-newcar {
  height: 400px;
}

.stage-usedcar {
  height: 550px;
}

.card-stack {
  position: relative;
}

.card-stack-newcar {
  width: 315px;
  height: 337px;
  margin-top: 50px;
  margin-left: 30px;
}

.card-stack-usedcar {
  width: 320px;
  height: 520px;
}

.stage-rentcar {
  /* rent カード実高 約308px + 右下オフセット(最大+16/+17)と影のぶんの余白 */
  height: 340px;
}

.card-stack-rentcar {
  width: 315px;
  height: 308px;
}

/* クローンカードはマウスイベントを通過させる */
.card-clone {
  pointer-events: none;
}

/* カードの共通スタイル */
.card {
  cursor: grab;
  user-select: none;
  /* カード自体（リンクカードの <a> を含む）のネイティブ D&D を無効化。
     これが無いとリンクをドラッグした時に「禁止マーク（no-drop）」が出て掴めない。
     カスタムのスワイプ処理は mousedown/mousemove ベースなので影響しない。 */
  -webkit-user-drag: none;
  touch-action: none;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:active {
  cursor: grabbing;
}

/* カード内の画像はドラッグ＆ドロップの対象にしない。掴むと画像だけがゴーストで動こうと
   するのを防ぎ、常にカード全体を掴めるようにする（画像は装飾なので操作はカードへ通す）。 */
.card img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ===== Mobile/Tablet版 カード基本スタイル（1200px未満） ===== */
@media screen and (max-width: 1199px) {
  .card {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 基本のカードスタッキング効果 */
  .card:nth-child(3) {
    transform: translateY(16px) translateX(16px) translateZ(-200px);
    z-index: 8;
  }

  .card:nth-child(2) {
    transform: translateY(8px) translateX(8px) translateZ(-100px);
    z-index: 9;
  }

  .card:nth-child(1) {
    transform: translateY(0) translateX(0) translateZ(0);
    z-index: 10;
  }
}

/* スワイプアウトアニメーション（右へ） */
@keyframes swipeOutRight {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(500px) rotate(30deg);
    opacity: 0;
  }
}

/* スワイプアウトアニメーション（左へ） */
@keyframes swipeOutLeft {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(-500px) rotate(-30deg);
    opacity: 0;
  }
}

.card.swiping {
  transition: none;
}

.card.swipe-right {
  animation: swipeOutRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card.swipe-left {
  animation: swipeOutLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* カード復帰アニメーション */
@keyframes returnCard {
  0% {
    transform: translateY(0) translateX(var(--offset-x)) rotate(var(--rotate));
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

.card.returning {
  animation: returnCard 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===== 新車スライドショー（New Car） - 左上オフセット版 ===== */

.card-stack-newcar .card {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== Mobile/Tablet版（1200px未満） ===== */
@media screen and (max-width: 1199px) {
  /* 左上へずらしたスタッキング効果（回転なし） */
  .card-stack-newcar .card:nth-child(3) {
    transform: translateY(-30px) translateX(-30px) translateZ(-200px);
    z-index: 8;
  }

  .card-stack-newcar .card:nth-child(2) {
    transform: translateY(-15px) translateX(-15px) translateZ(-100px);
    z-index: 9;
  }

  .card-stack-newcar .card:nth-child(1) {
    transform: translateY(0) translateX(0) translateZ(0);
    z-index: 10;
  }

  /* カード4以降は非表示（見える枚数を3枚に制限）*/
  .card-stack-newcar .card:nth-child(n + 4) {
    display: none;
  }
}

/* ===== PC版カルーセル表示（1200px以上） ===== */
@media screen and (min-width: 1200px) {
  .card-stack {
    position: relative;
  }

  .card-stack-newcar {
    position: relative;
    width: max-content;
    height: 337px;
    margin-top: 0;
    margin-left: 0;
    display: flex;
    gap: 25px;
    padding: 0;
    overflow-x: visible;
  }

  .card-stack-newcar .card {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    width: 315px;
    height: 337px;
    z-index: 1;
    cursor: grab;
    display: block;
  }

  /* ホバーで少しだけ拡大（隣に重なるので z-index を上げて前面に）。transition:all 0.3s 済み。 */
  .card-stack-newcar .card:hover {
    transform: scale(1.04);
    z-index: 2;
  }

  /* PC版グラデーション効果 */
  .stage-newcar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 194px;
    background: linear-gradient(
      to right,
      rgba(20, 25, 35, 1) 0%,
      rgba(20, 25, 35, 1) 50%,
      rgba(20, 25, 35, 0.6) 80%,
      transparent 100%
    );
    z-index: 10;
    pointer-events: none;
  }

  .stage-newcar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 194px;
    background: linear-gradient(
      to left,
      rgba(20, 25, 35, 1) 0%,
      rgba(20, 25, 35, 1) 50%,
      rgba(20, 25, 35, 0.6) 80%,
      transparent 100%
    );
    z-index: 10;
    pointer-events: none;
  }
}

/* 新車カード出現アニメーション（左上から右下へ移動） */
@keyframes cardAppearNewCar {
  0% {
    transform: translateY(-15px) translateX(-15px) translateZ(-100px);
  }
  100% {
    transform: translateY(0) translateX(0) translateZ(0);
  }
}

.card.card-appear-newcar {
  animation: cardAppearNewCar 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 新車カード出現アニメーション2（カード2が左上から移動） */
@keyframes cardAppearNewCar2 {
  0% {
    transform: translateY(-30px) translateX(-30px) translateZ(-200px);
  }
  100% {
    transform: translateY(-15px) translateX(-15px) translateZ(-100px);
  }
}

.card.card-appear-newcar-2 {
  animation: cardAppearNewCar2 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

/* 新車カード出現アニメーション3（カード3が左上から移動） */
@keyframes cardAppearNewCar3 {
  0% {
    transform: translateY(-45px) translateX(-45px) translateZ(-300px);
  }
  100% {
    transform: translateY(-30px) translateX(-30px) translateZ(-200px);
  }
}

.card.card-appear-newcar-3 {
  animation: cardAppearNewCar3 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

/* 新車版スワイプアウトアニメーション（右へ） */
@keyframes swipeOutRightNewCar {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(500px) rotate(30deg);
    opacity: 0;
  }
}

/* 新車版スワイプアウトアニメーション（左へ） */
@keyframes swipeOutLeftNewCar {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(-500px) rotate(-30deg);
    opacity: 0;
  }
}

.card-stack-newcar .card.swipe-right {
  animation: swipeOutRightNewCar 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.card-stack-newcar .card.swipe-left {
  animation: swipeOutLeftNewCar 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.card-stack-newcar .card.returning {
  animation: returnCard 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===== レンタカー貸出車種（Rent Car） - 右下オフセット版 =====
   SP は基本 .card スタッキング（右下 8/8・16/16。Figma の 0/0・8/8・16/17 とほぼ一致）を
   そのまま流用するため、SP 用の nth-child オフセット上書きは持たない。表示は先頭3枚に制限。 */

.card-stack-rentcar .card {
  /* カード幅を 315px に固定。中の写真は 295px なので左右に 10px ずつ白余白が出る。
     未指定だと SP で content 幅（写真295px）に縮み、外周の白余白が消える。 */
  width: 315px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== Mobile/Tablet版（1200px未満） ===== */
@media screen and (max-width: 1199px) {
  /* 4枚目以降は非表示（見える枚数を3枚に制限） */
  .card-stack-rentcar .card:nth-child(n + 4) {
    display: none;
  }
}

/* ===== PC版カルーセル表示（1200px以上） ===== */
@media screen and (min-width: 1200px) {
  /* カルーセルは JS が centerOffset で中央寄せするため、ステージは左詰め＋はみ出し隠し。
     高さは PC カード実高に合わせ、下に余白が出ないようにする。 */
  .stage-rentcar {
    height: 308px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .card-stack-rentcar {
    position: relative;
    width: max-content;
    height: auto;
    margin-top: 0;
    margin-left: 0;
    display: flex;
    gap: 25px;
    padding: 0;
    overflow-x: visible;
  }

  .card-stack-rentcar .card {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    width: 315px;
    z-index: 1;
    cursor: grab;
    display: block;
  }

  .card-stack-rentcar .card:hover {
    transform: scale(1.04);
    z-index: 2;
  }

  /* PC版グラデーション効果（両脇をページ地色 #141923 に溶かす） */
  .stage-rentcar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 194px;
    background: linear-gradient(
      to right,
      rgba(20, 25, 35, 1) 0%,
      rgba(20, 25, 35, 1) 50%,
      rgba(20, 25, 35, 0.6) 80%,
      transparent 100%
    );
    z-index: 10;
    pointer-events: none;
  }

  .stage-rentcar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 194px;
    background: linear-gradient(
      to left,
      rgba(20, 25, 35, 1) 0%,
      rgba(20, 25, 35, 1) 50%,
      rgba(20, 25, 35, 0.6) 80%,
      transparent 100%
    );
    z-index: 10;
    pointer-events: none;
  }
}

/* ===== 中古車スライドショー（Used Car） - ランダム傾き版 ===== */

.card-stack-usedcar .card {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ランダム傾きのスタッキング効果 */
.card-stack-usedcar .card:nth-child(3) {
  transform: translateY(8px) translateX(8px) translateZ(-200px) rotate(4.1deg);
  z-index: 8;
}

.card-stack-usedcar .card:nth-child(2) {
  transform: translateY(4px) translateX(4px) translateZ(-100px) rotate(-2.7deg);
  z-index: 9;
}

.card-stack-usedcar .card:nth-child(1) {
  transform: translateY(0) translateX(0) translateZ(0) rotate(3.2deg);
  z-index: 10;
}

/* PC（1200px以上・カード横並び）のみ：ホバーでカード・写真とも傾きを 0 に戻してまっすぐ向く。
   .card は transition:all 0.3s 済み。写真フレームのみここで transition を足す。
   写真フレームの straighten はトップ／中古車ページ共通（どちらも -5deg のまま）。 */
@media screen and (min-width: 1200px) {
  .card-stack-usedcar .top_usedcar-card__photo-frame {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .card-stack-usedcar .card:hover .top_usedcar-card__photo-frame {
    transform: rotate(0deg);
  }

  /* カード本体の傾き戻しはトップページ限定。translateZ のスタッキングを保持しつつ rotate だけ 0 に。
     /usedcar は PC でカードが transform:none（平ら）なので、translateZ を再付与しないよう除外する。 */
  .top_usedcar-section .card-stack-usedcar .card:nth-child(1):hover {
    transform: translateY(0) translateX(0) translateZ(0) rotate(0deg);
  }

  .top_usedcar-section .card-stack-usedcar .card:nth-child(2):hover {
    transform: translateY(4px) translateX(4px) translateZ(-100px) rotate(0deg);
  }

  .top_usedcar-section .card-stack-usedcar .card:nth-child(3):hover {
    transform: translateY(8px) translateX(8px) translateZ(-200px) rotate(0deg);
  }
}

/* 中古車版スワイプアウトアニメーション（右へ） */
@keyframes swipeOutRightUsedCar {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(500px) rotate(75deg);
    opacity: 0;
  }
}

/* 中古車版スワイプアウトアニメーション（左へ） */
@keyframes swipeOutLeftUsedCar {
  0% {
    transform: translateY(var(--start-y)) translateX(var(--start-x))
      rotate(var(--start-rotate));
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px) translateX(-500px) rotate(-75deg);
    opacity: 0;
  }
}

.card-stack-usedcar .card.swipe-right {
  animation: swipeOutRightUsedCar 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.card-stack-usedcar .card.swipe-left {
  animation: swipeOutLeftUsedCar 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.card-stack-usedcar .card.returning {
  animation: returnCard 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* カード上昇アニメーション（下のカードが上のカードの位置へ移動） */
@keyframes cardMoveUp {
  0% {
    transform: var(--from-transform);
  }
  100% {
    transform: var(--to-transform);
  }
}

.card.card-move-up {
  animation: cardMoveUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 中古車カード出現アニメーション */
@keyframes cardAppearUsedCar {
  0% {
    transform: translateY(8px) translateX(8px) translateZ(-200px);
  }
  100% {
    transform: translateY(0) translateX(0) translateZ(0);
  }
}

.card.card-appear-usedcar {
  animation: cardAppearUsedCar 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}