/* Opening background panels */
.move .bg .bg-content {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% / 10);
  z-index: 9999;
}

.move .bg .bg-content:before {
  background: #14162a; /* ← サイト背景色に合わせて変更可能 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Panels position + delay */
.move .bg .bg-content:nth-child(2) { left: 10%; animation-delay: 0.2s; }
.move .bg .bg-content:nth-child(3) { left: 20%; animation-delay: 0.3s; }
.move .bg .bg-content:nth-child(4) { left: 30%; animation-delay: 0.4s; }
.move .bg .bg-content:nth-child(5) { left: 40%; animation-delay: 0.5s; }
.move .bg .bg-content:nth-child(6) { left: 50%; animation-delay: 0.6s; }
.move .bg .bg-content:nth-child(7) { left: 60%; animation-delay: 0.7s; }
.move .bg .bg-content:nth-child(8) { left: 70%; animation-delay: 0.8s; }
.move .bg .bg-content:nth-child(9) { left: 80%; animation-delay: 0.9s; }
.move .bg .bg-content:nth-child(10) { left: 90%; animation-delay: 1s; }

/* Animation */
.move.active .bg .bg-content {
  animation-name: bg-anime;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes bg-anime {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}