/* 初期状態 */
#heroimg svg > g{
    opacity:0;
    visibility:hidden;
    transform-box:fill-box;
    transform-origin:center;
}

/* Design & Technology */
#heroimg.start svg > #head{
    animation:headFade 2s ease forwards;
}

/* ON */
#heroimg.start svg > #o{
    animation:pop .45s ease forwards;
    animation-delay:1.55s;
}

#heroimg.start svg > #n{
    animation:pop .45s ease forwards;
    animation-delay:1.75s;
}

/* SPIKE */
#heroimg.start svg > #s{
    animation:fadeUp .5s ease forwards;
    animation-delay:2.05s;
}

#heroimg.start svg > #p{
    animation:fadeUp .5s ease forwards;
    animation-delay:2.20s;
}

#heroimg.start svg > #i{
    animation:fadeUp .5s ease forwards;
    animation-delay:2.35s;
}

#heroimg.start svg > #k{
    animation:fadeUp .5s ease forwards;
    animation-delay:2.50s;
}

#heroimg.start svg > #e{
    animation:fadeUp .5s ease forwards;
    animation-delay:2.65s;
}

@keyframes headFade{
    0%{
        opacity:0;
        visibility:hidden;
    }
    1%{
        visibility:visible;
    }
    100%{
        opacity:1;
        visibility:visible;
    }
}

@keyframes fadeUp{
    0%{
        opacity:0;
        visibility:hidden;
        transform:translateY(20px);
    }
    1%{
        visibility:visible;
    }
    100%{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
}

@keyframes pop{
    0%{
        opacity:0;
        visibility:hidden;
        transform:scale(.2);
    }
    1%{
        visibility:visible;
    }
    70%{
        opacity:1;
        transform:scale(1.15);
    }
    100%{
        opacity:1;
        visibility:visible;
        transform:scale(1);
    }
}