:root {
    --animwidth: 60px;
}

.bg-img .heroimg.anim01 {
    animation: outeranim01 4s 2s forwards;
    background-color: #fff;
    padding: 2rem;
}

@keyframes outeranim01 {
    0%{
        top: -50%;
        left: 50%;
    }

    100%{
        top: 50%;
        left: 50%;
    }
}


.bg-img .heroimg.anim01 span {
    animation: spananim01 4s 2s forwards;
    -webkit-mask-image: url(../img/icon.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-image: url(../img/icon.svg);
}

@keyframes spananim01 {
    0%{
        top: -50%;
        left: 50%;
    }

    100%{
        top: 50%;
        left: 50%;
    }
}

.bg-img .heroimg.anim01 span::before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    left: 50%;
    top: 50%;
    border-radius: 100vw;
    animation: subanim01 3s forwards infinite linear;
    background-position: center;
    background-size: cover;
    background-image: conic-gradient(#ff0000 0deg, #ff00ff 60deg,#0000ff 120deg,#00ffff 180deg,#00ff00 240deg,#ffff00 300deg,#ff0000 360deg);
    z-index: -3;
    padding: 1rem;
}

@keyframes subanim01 {
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

.bg-img .heroimg.anim01::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100%);
    height: calc(100%);
    background-image: url(../img/animation/outer_light.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%,-50%);
    animation: afteranim01 1s forwards infinite linear;
}

@keyframes afteranim01 {
    0%{
        transform: translate(-50%,-50%) rotate(15deg);
    }

    49.99%{
        transform: translate(-50%,-50%) rotate(15deg);
    }

    50%{
        transform: translate(-50%,-50%) rotate(0deg);
    }

    99.99%{
        transform: translate(-50%,-50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%,-50%) rotate(15deg);
    }
}

.heroimg.anim01 img {
    animation: anim01 1s 2s forwards;
    visibility: hidden;
}

@keyframes anim01 {
    0%{
        
    }

    100% {
    }
}

.bg-img .heroimg.anim01 + .bg-svg::before {
    content: "";
    background-image: url(../img/svg/AOTOMEI_cong.svg);
    background-repeat: no-repeat;
    display: block;
    width: calc(100% - 4rem);
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: svganim01 2s 5s forwards;
}

@keyframes svganim01 {
    0%{
        opacity: 0;
    }

    2%{
        opacity: .7;
    }

    4%{
        opacity: 0;
    }

    6%{
        opacity: .7;
    }

    8%{
        opacity: 0;
    }

    10%{
        opacity: .7;
    }

    12%{
        opacity: 0;
    }

    14%{
        opacity: .7;
    }

    16%{
        opacity: 0;
    }

    18%{
        opacity: .7;
    }

    20%{
        opacity: 0;
    }

    22%{
        opacity: .7;
    }

    100% {
        opacity: 0;
    }
}

.bg-img .heroimg.anim02 {
    animation: outeranim02 8s 2s forwards ease-out;
    left: -50%;
}

@keyframes outeranim02 {
    0%{
        left: -50%;
        top: 50%;
    }

    10%{
        left: .25rem;
    }

    20%{
        left: .25rem;
    }

    30%{
        left: -50%;
        top: 50%;
    }

    30.5%{
        left: -50%;
        top: -50%;
    }

    31%{
        left: 50%;
        top: -50%;
    }

    40%{
        top: 10%;
    }

    50%{
        top: 10%;
    }

    60%{
        left: 50%;
        top: -50%;
        right: auto;
    }

    80%{
        left: 50%;
        top: -50%;
    }
    
    100% {
        left: 50%;
    }
}

.heroimg.anim02 img {
    animation: anim02 8s 2s forwards;
}

@keyframes anim02 {
    0%{
        transform: rotate(0);
    }

    10%{
        transform: rotate(45deg);
    }

    20%{
        transform: rotate(45deg);
    }

    30%{
        transform: rotate(0);
    }

    31%{
        transform: rotate(180deg);
    }

    60%{
        transform: rotate(180deg);
    }
    
    61%{
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0);
    }
}

.bg-img .heroimg.anim03 {
    animation: outeranim03 1s 2s forwards ease-in;
    left: 50%;
    top: -100%;
}

@keyframes outeranim03 {
    50%{
        top: -100%;
    }

    100% {
        top: 50%
    }
}

.bg-img .heroimg.anim03::before {
    content: "";
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    bottom: 0;
    right: -25%;
    transform: translateX(0) scale(1,1);
    animation: subanim03 1s 3s forwards;
    background-position: center;
    background-size: cover;
}

@keyframes subanim03 {
    0%{
        background-image: none;
    }

    50% {
        background-image: url(../img/animation/anim01.gif);
    }
}

.bg-img .heroimg.anim03::after {
    content: "";
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    bottom: 0;
    left: -25%;
    transform: translateX(0) scale(-1,1);
    animation: aftersubanim03 1s 3s forwards;
    background-position: center;
    background-size: cover;
}

@keyframes aftersubanim03 {
    0%{
        background-image: none;
    }

    50% {
        background-image: url(../img/animation/anim01.gif);
    }
}

.heroimg.anim03 img {
    animation: anim03 1s 3s forwards;
    transform-origin: bottom;
    display: inline-block;
}

@keyframes anim03 {
    0%{
        transform: scale(1, 1);
    }

    10%{
        transform: scale(1, .5);
    }

    12%{
        top: 6px;
    }

    14%{
        top: 0;
    }

    16%{
        top: 6px;
    }

    18%{
        top: 0;
    }

    20%{
        top: 6px;
    }

    22%{
        top: 0;
    }

    24%{
        top: 6px;
    }

    26%{
        top: 0;
    }

    28%{
        top: 6px;
    }

    30%{
        top: 0;
    }

    32%{
        top: 6px;
    }

    34%{
        top: 0;
    }

    36%{
        top: 6px;
    }

    38%{
        top: 0;
    }

    40%{
        top: 6px;
    }

    42%{
        top: 0;
    }

    44%{
        top: 6px;
    }

    46%{
        top: 0;
    }

    70%{
        top: 0;
        transform: scale(1, .5);
    }

    100% {
        transform: scale(1, 1);
    }
}

.bg-img .heroimg.anim04 {
    animation: outeranim04 2s 2s forwards;
}

@keyframes outeranim04 {
    0%{
        left: -50%;
    }

    60% {
        left: 70%;
    }

    70% {
        left: 70%;
    }

    100% {
        left: 50%;
    }
}

.bg-img .heroimg.anim04::before {
    content: "";
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    bottom: 0;
    left: -25%;
    transform: translateX(200%) scale(1,1);
    animation: subanim04 2s 2s forwards;
    background-position: center;
    background-size: cover;
}

@keyframes subanim04 {
    0%{
        background-image: none;
    }

    100% {
        background-image: url(../img/animation/anim01.gif);
    }
}

.heroimg.anim04 img {
    animation: anim04 2s 2s forwards;
}

@keyframes anim04 {
    0%{
        transform: rotate(-1turn);
    }

    30%{
        transform: rotate(15deg);
    }

    70%{
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(0);
    }
}

.bg-img .heroimg.anim05 {
    animation: outeranim05 1s 2s forwards;
}

@keyframes outeranim05 {
    0%{
        left: -50%;
    }

    100% {
        left: 50%;
    }
}

.heroimg.anim05 img {
    animation: anim05 1s 2s forwards;
}

@keyframes anim05 {
    0%{
        transform: rotate(-1turn);
    }

    100% {
        transform: rotate(0);
    }
}

.movingAnim {
    position: absolute;
    background-color: black;
    border-radius: 100vw;
    top: 0;
    width: 10px;
    height: 2px;
    transform: none;
    opacity: 0;
}


.move0 {
    animation: anim0 .5s forwards;
    transform: rotate(90deg);
}

@keyframes anim0 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(0,calc(-1*var(--animwidth))) rotate(90deg);
    }
}

.move1 {
    animation: anim1 .5s forwards;
    transform: rotate(-45deg);
}

@keyframes anim1 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(.7*var(--animwidth)),calc(-.7*var(--animwidth))) rotate(-45deg);
    }
}

.move2 {
    animation: anim2 .5s forwards;
}

@keyframes anim2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(1*var(--animwidth)),0) rotate(0);
    }
}

.move3 {
    animation: anim3 .5s forwards;
    transform: rotate(45deg);
}

@keyframes anim3 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(.7*var(--animwidth)),calc(.7*var(--animwidth))) rotate(45deg);
    }
}

.move4 {
    animation: anim4 .5s forwards;
    transform: rotate(90deg);
}

@keyframes anim4 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(0,calc(1*var(--animwidth))) rotate(90deg);
    }
}

.move5 {
    animation: anim5 .5s forwards;
    transform: rotate(-45deg);
}

@keyframes anim5 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(-.7*var(--animwidth)),calc(.7*var(--animwidth))) rotate(-45deg);
    }
}

.move6 {
    animation: anim6 .5s forwards;
}

@keyframes anim6 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(-1*var(--animwidth)),0) rotate(0);
    }
}

.move7 {
    animation: anim7 .5s forwards;
    transform: rotate(45deg);
}

@keyframes anim7 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(-.7*var(--animwidth)),calc(-.7*var(--animwidth))) rotate(45deg);
    }
}