#header_chara{ 
    animation: header_chara 6s; 
    animation-iteration-count: infinite; 
    -webkit-animation: header_chara 6s; /* Safari & Chrome */
    -webkit-animation-iteration-count: infinite; 
    animation-fill-mode: none;
    z-index: 1;
}  
@keyframes header_chara { 
  0%   { transform:  translate3d(0,0,0);   }    
  20%   { transform:  translate3d(0.5em,-0.5em,0.5em);    } 
  40%   { transform:  translate3d(0,0,0);   }        
  60%   { transform:  translate3d(-0.5em,-0.5em,-0.5em);   }
  80%   { transform:  translate3d(1.0em,0.5em,0.5em);   }
  100%   { transform:  translate3d(0,0,0);   }
} 
@-webkit-keyframes header_chara { 
  0%   { transform:  translate3d(0,0,0);   }    
  20%   { transform:  translate3d(0.5em,-0.5em,0.5em);    } 
  40%   { transform:  translate3d(0,0,0);   }        
  60%   { transform:  translate3d(-0.5em,-0.5em,-0.5em);   }
  80%   { transform:  translate3d(1.0em,0.5em,0.5em);   }
  100%   { transform:  translate3d(0,0,0);   }
} 
.anime_box{
    position: relative;
    padding:5% 0;
}
#chara_girl_drive{ 
    position: absolute;
    right: 0;
    animation: chara_girl_drive 12s; 
    animation-iteration-count: infinite; 
    -webkit-animation: chara_girl_drive 12s; /* Safari & Chrome */
    -webkit-animation-iteration-count: infinite; 
    animation-fill-mode: none;
    z-index: 1;
}  
@keyframes chara_girl_drive { 
  0%   { transform:  translate3d(0,0,0);   }        
  20%   { transform:  translate3d(-400%,0,-10em);   }
  100%   { transform:  translate3d(-20px,-5em,3em);   }
} 
/*
.chara_box_top{
    position: absolute;
    display: flex;    
    top:1%;
}
.chara_box_bottom{
    position: absolute;
    display: flex;
}
.header_chara{
    animation: wobbling_x 2.0s ease-in-out infinite alternate,
                wobbling_y 2.0s ease-in-out infinite alternate;
}
@keyframes wobbling_x{
    0%{
        margin-right: 2%;
    }
    100%{
        margin-right: 0;
    }    
}
@keyframes wobbling_y{
    0%{
        margin-bottom: 0;
    }    
    100%{
        margin-bottom: 2%;
    }    
}
*/

/*header{
    position: relative;
    text-align: center;
    margin-bottom:10%;
}   
.chara_box_top{
    position: absolute;
    display: flex;    
    top:1%;
}
.chara_box_bottom{
    position: absolute;
    display: flex;
}
#chara_girl,#chara_boy,#chara_haku,#chara_papurika,#chara_peal,#chara_ren,#chara_tomato,#chara_udon{
    animation: wobbling_x 2.0s ease-in-out infinite alternate,
                wobbling_y 2.0s ease-in-out infinite alternate;
}
 #chara_haku,#chara_papurika,#chara_ren,#chara_udon{
    animation: wobbling_x 1.0s ease-in-out infinite alternate,
                wobbling_y 1.0s ease-in-out infinite alternate;
}
#chara_girl{
    top:100%;
    right:0;
}
#chara_haku{
    top:10%;
    right:0
}
#chara_ren{
    top:30%;
    right:10%
}
#chara_tomato{
    top:3%;
    right:10%
}
#chara_boy{
    top:20%;
    left:0;
}
#chara_papurika{
    top:5%;
    left:0;
}
#chara_peal{
    top:10%;
    left:0;
}
#chara_udon{
    top:10%;
    left:0;
}
@keyframes wobbling_x{
    0%{
        margin-right: 2%;
    }
    100%{
        margin-right: 0;
    }    
}
@keyframes wobbling_y{
    0%{
        margin-bottom: 0;
    }    
    100%{
        margin-bottom: 2%;
    }    
}
*/