/* ロゴアニメーション */
@charset "UTF-8";
.stage{
    position:absolute; bottom:50%; left:50%; transform:translate(-50%,50%);
    width:50vw; aspect-ratio:50/23; background:transparent;

    #base{
        width:100%; position:relative; z-index: 10;
        img{
            width:100%;
        }
    }

    .giragira{
        width:100%; height:100%; position: absolute; top:0; left:0; z-index: 100;
        animation: meimetsu 1s ease-in-out infinite normal;

        &.add{
            animation-delay: .35s;
        }
        &.add-2{
            animation-delay: .48s;
        }
    }
    .gira{
        position:absolute; z-index: 20; width:auto; height:auto; min-height: 0px; line-height: 1px; 
        animation: gira 1.2s ease-in-out infinite alternate;


        &::before{
            content:''; display:block; width:100%; height:100%; min-height: 0; line-height: 0;
            position:absolute; top:50%; left:50%; border-radius: 50%; z-index: -1;
            transform:translate(-50%,-50%);
            animation: blur 1.2s ease-in-out infinite alternate;
            animation-delay: .1s;
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efe8b8+32,fcfae5+100&1+0,0+82 */
            background: radial-gradient(ellipse at center,  rgba(239,232,184,1) 0%,rgba(239,232,184,0.61) 32%,rgba(249,245,217,0) 82%,rgba(252,250,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }

        &#gira-1{
            top:42%; left:1.8%;
            width:4%;
        }
        &#gira-2{
            top:21%; left:30%;
            width:1.8%;
        }
        &#gira-3{
            top:30%; left:66.5%;
            width:2%;
        }
        &#gira-4{
            top:60%; left:68.5%;
            width:3%;
        }
        &#gira-5{
            top:80%; left:35%;
            width:2.4%;
        }


        &#gira-6{
            top:21%; right:7%;
            width:3.5%;
        }
        &#gira-7{
            top:57%; right:20%;
            width:1.8%;
        }
        &#gira-8{
            top:46%; left:46%;
            width:2%;
        }
        &#gira-9{
            top:77%; right:14%;
            width:2.7%;
        }
        &#gira-10{
            top:80%; right:42%;
            width:2.1%;
        }

        &#gira-11{
            bottom:18.5%; left:12%;
            width:3%;
        }
        &#gira-12{
            bottom:8%; left:21%;
            width:1.8%;
        }
        
        &#gira-13{
            top:87%; right:27%;
            width:2.1%;
        }
        &#gira-14{
            top:60%; left:33%;
            width:2.1%;
        }
        &#gira-15{
            top:70%; left:33%;
            width:2.1%;
        }
    }
}

.lever{
    position:absolute; bottom:46.5%; width:11%; aspect-ratio: 1 / 2;
    transform-origin:50% 90%; transform:translateX(-50%) rotate(15deg);
    animation: lever-basic 1s ease-in-out infinite alternate;

    img{ width:100%; }

    &#l-1{
        left:12%;
    }
    &#l-2{
        left:32%;
        animation-delay: .3s;
    }
    &#l-3{
        left:50%;
        animation-delay: .6s;
    }
    &#l-4{
        left:70%;
        animation-delay: .9s;
    }
}

.is_sp .stage{
    bottom:15%; left:50%; transform:translate(-50%,0); width:90%;
}

.is_sp.yoko-mode .stage{
    width:60%;
}


@keyframes lever-basic{
    0%{ transform:translateX(-50%) rotate(15deg); }
    30%{ transform:translateX(-50%) rotate(15deg); }
    70%{  transform:translateX(-50%) rotate(-15deg);  }
    100%{  transform:translateX(-50%) rotate(-15deg);  }
}

@keyframes meimetsu{
    0%{
        opacity: .2;
    }
    50%{
        opacity: .7;
    }
    100%{
        opacity: .2;
    }
}
@keyframes gira{
    0%{ 
        transform:scale(1,1);
        }
    50%{
        transform:translate(4%,4%) scale(1.5,1.5);
    }
    100%{
        transform:scale(1,1);
    }
}
@keyframes blur{
    0%{
        transform:translate(-50%,-50%) scale(.3,.3) ;
        opacity: .2;
    }
    50%{
        transform:translate(-55%,-55%) scale(.6,.6);
        opacity: .75;
    }
    100%{
        transform:translate(-50%,-50%) scale(.3,.3);
        opacity: .2;
    }
}
/* ロゴアニメーション */