@charset "utf-8";
/*------------------------  animation.css  ------------------------*/

.grape-wrap { position: relative; z-index: 0; }
.grape-wrap .grape { position: absolute; top: 0; left: 0; user-select: none; opacity: 0; will-change: transform, opacity; }



/* 右回り（時計回り） */
@keyframes floatRotateCW {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100%) rotate(360deg); /* 1回転 */
    opacity: 0;
  }
}

/* 左回り（反時計回り） */
@keyframes floatRotateCCW {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100%) rotate(-360deg); /* 逆向きに1回転 */
    opacity: 0;
  }
}


/* --- 8個それぞれのスピード・方向・遅延の設定 --- */

.grape:nth-child(1) {
  transform-origin: 7% 6%;
  animation: floatRotateCW 12s linear infinite 0s;
}

.grape:nth-child(2) {
  transform-origin: 15% 6%;
  animation: floatRotateCCW 7s linear infinite 1.5s;
}

.grape:nth-child(3) {
  transform-origin: 10% 39%;
  animation: floatRotateCW 9s linear infinite 3s;
}

.grape:nth-child(4) {
  transform-origin: 7% 92%;
  animation: floatRotateCCW 11s linear infinite 4.5s;
}

.grape:nth-child(5) {
  transform-origin: 13% 94%;
  animation: floatRotateCW 6s linear infinite 6s;
}

.grape:nth-child(6) {
  transform-origin: 92% 52%;
  animation: floatRotateCCW 10s linear infinite 7.5s;
}

.grape:nth-child(7) {
  transform-origin: 95% 49%;
  animation: floatRotateCW 8s linear infinite 9s;
}

.grape:nth-child(8) {
  transform-origin: 88% 48%;
  animation: floatRotateCCW 14s linear infinite 10.5s;
}


@media screen and (min-width: 801px) {
 .grape:nth-child(9),.grape:nth-child(10),.grape:nth-child(11),.grape:nth-child(12),.grape:nth-child(13) { display: none; }
}

@media screen and (max-width: 800px) {
  .grape:nth-child(3) {
    transform-origin: 10% 20%;
  }
  .grape:nth-child(4) {
    transform-origin: 9% 45%;
  }
  .grape:nth-child(5) {
    transform-origin: 10% 60%;
  }
  .grape:nth-child(6) {
    transform-origin: 70% 7%;
    animation: floatRotateCCW 15s linear infinite 0s;
  }
  .grape:nth-child(7) {
    transform-origin: 90% 9%;
    animation: floatRotateCW 10s linear infinite 1s;
  }
  .grape:nth-child(8) {
    transform-origin: 80% 16%;
    animation: floatRotateCCW 14s linear infinite 2.5s;
  }
  .grape:nth-child(9) {
    transform-origin: 8% 95%; 
    animation: floatRotateCW 12s linear infinite 3.5s;
  }
  .grape:nth-child(10) {
    transform-origin: 82% 58%;
    animation: floatRotateCCW 8.5s linear infinite 3s;
  }
  .grape:nth-child(11) {
    transform-origin: 84% 59%;
    animation: floatRotateCW 12s linear infinite 3.5s;
  }
  .grape:nth-child(12) {
    transform-origin: 84% 98%;
    animation: floatRotateCCW 9s linear infinite 4s;
  }
}