.orbit {
    position: absolute;
    inset: 0;
    transform-origin: 69.93% 41.63%;
    z-index: 2;
}

.satellite {
    position: absolute;
    left: 69.93%;
    top: 41.63%;
    width: 40px;
    height: 40px;
}

.satellite img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* サイズ + 逆回転 */
.sat-1 {
    width: 8.3333vw;
    height: 8.3333vw;
    animation: cancel-1 10s linear infinite;
}

.orbit-1 {
    animation: orbit-1 10s linear infinite;
}

.sat-2 {
    width: 8.3333vw;
    height: 8.3333vw;
    animation: cancel-2 13s linear infinite reverse;
}

.orbit-2 {
    animation: orbit-1 13s linear infinite reverse;
}

.sat-3 {
    width: 8.3333vw;
    height: 8.3333vw;
    animation: cancel-3 8s linear infinite;
}

.orbit-3 {
    animation: orbit-1 8s linear infinite;
}

.sat-4 {
    width: 9.375vw;
    height: 9.375vw;
    animation: cancel-4 13s linear infinite reverse;
}

.orbit-4 {
    animation: orbit-1 12s linear infinite reverse;
}

.sat-5 {
    width: 6.25vw;
    height: 6.25vw;
    animation: cancel-5 15s linear infinite;
}

.orbit-5 {
    animation: orbit-1 15s linear infinite;
}

.sat-6 {
    width: 6.25vw;
    height: 6.25vw;
    animation: cancel-6 14s linear infinite reverse;
}

.orbit-6 {
    animation: orbit-1 14s linear infinite reverse;
}

.sat-7 {
    width: 7.291vw;
    height: 7.291vw;
    animation: cancel-7 13s linear infinite;
}

.orbit-7 {
    animation: orbit-1 13s linear infinite;
}

.sat-8 {
    width: 9.375vw;
    height: 9.375vw;
    animation: cancel-8 12s linear infinite reverse;
}

.orbit-8 {
    animation: orbit-1 12s linear infinite reverse;
}

.sat-9 {
    width: 7.291vw;
    height: 7.291vw;
    animation: cancel-9 11s linear infinite;
}

.orbit-9 {
    animation: orbit-1 11s linear infinite;
}

.sat-10 {
    width: 9.375vw;
    height: 9.375vw;
    animation: cancel-10 12s linear infinite reverse;
}

.orbit-10 {
    animation: orbit-1 12s linear infinite reverse;
}

.sat-11 {
    width: 9.375vw;
    height: 9.375vw;
    animation: cancel-11 11s linear infinite;
}

.orbit-11 {
    animation: orbit-1 11s linear infinite;
}

.sat-12 {
    width: 16.666vw;
    height: 16.666vw;
    animation: cancel-12 10s linear infinite reverse;
}

.orbit-12 {
    animation: orbit-1 10s linear infinite reverse;
}

.sat-13 {
    width: 10.416vw;
    height: 10.416vw;
    animation: cancel-13 8s linear infinite;
}

.orbit-13 {
    animation: orbit-1 8s linear infinite;
}

@keyframes orbit-1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes cancel-1 {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateX(12vw) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(0deg) translateX(12vw) rotate(-360deg);
    }
}

@keyframes cancel-2 {
    from {
        transform: translate(-50%, -50%) rotate(25deg) translateX(13.23vw) rotate(-25deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(25deg) translateX(13.23vw) rotate(-385deg);
    }
}

@keyframes cancel-3 {
    from {
        transform: translate(-50%, -50%) rotate(60deg) translateX(16.04vw) rotate(-60deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(60deg) translateX(16.04vw) rotate(-420deg);
    }
}

@keyframes cancel-4 {
    from {
        transform: translate(-50%, -50%) rotate(95deg) translateX(21.51vw) rotate(-95deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(95deg) translateX(21.51vw) rotate(-455deg);
    }
}

@keyframes cancel-5 {
    from {
        transform: translate(-50%, -50%) rotate(140deg) translateX(24.43vw) rotate(-140deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(140deg) translateX(24.43vw) rotate(-500deg);
    }
}

@keyframes cancel-6 {
    from {
        transform: translate(-50%, -50%) rotate(180deg) translateX(28.07vw) rotate(-180deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(180deg) translateX(28.07vw) rotate(-540deg);
    }
}

@keyframes cancel-7 {
    from {
        transform: translate(-50%, -50%) rotate(210deg) translateX(31.4vw) rotate(-210deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(210deg) translateX(31.4vw) rotate(-570deg);
    }
}

@keyframes cancel-8 {
    from {
        transform: translate(-50%, -50%) rotate(245deg) translateX(34.01vw) rotate(-245deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(245deg) translateX(34.01vw) rotate(-605deg);
    }
}

@keyframes cancel-9 {
    from {
        transform: translate(-50%, -50%) rotate(280deg) translateX(33.49vw) rotate(-280deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(280deg) translateX(33.49vw) rotate(-640deg);
    }
}

@keyframes cancel-10 {
    from {
        transform: translate(-50%, -50%) rotate(310deg) translateX(43.9vw) rotate(-310deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(310deg) translateX(43.9vw) rotate(-670deg);
    }
}

@keyframes cancel-11 {
    from {
        transform: translate(-50%, -50%) rotate(40deg) translateX(43.44vw) rotate(-40deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(40deg) translateX(43.44vw) rotate(-400deg);
    }
}

@keyframes cancel-12 {
    from {
        transform: translate(-50%, -50%) rotate(120deg) translateX(59.22vw) rotate(-120deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(120deg) translateX(59.22vw) rotate(-480deg);
    }
}

@keyframes cancel-13 {
    from {
        transform: translate(-50%, -50%) rotate(330deg) translateX(61.72vw) rotate(-330deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(330deg) translateX(61.72vw) rotate(-690deg);
    }
}

@media screen and (max-width: 834px)    {
    .key    {
        aspect-ratio: 192 / 397;
        overflow-x: hidden;
    }
    
    .key:after {
        width: 200vw;
    }
    
    .orbit {
        width: 200vw;
    }
    
    .satellite  {
        zoom: 200%;
    }
    
    .sat-1,
    .sat-2,
    .sat-3  {
        zoom: 300%;
    }

    .sat-4,
    .sat-5,
    .sat-6  {
        zoom: 250%;
    }
}