body 
{
    margin:0;
     
}




@-webkit-keyframes mymove
{
    0%  { left:151px; top:100px;}
    3%  { left:16px; top:3px;}
     
       
        9%  { left:66px; top:-12px;}
        
        13%  { left:112px; top:3px;}
       
        18%  { left:120px; top:-12px;}
        

     
    
    21%  { left:132px; top:3px;}
    25%  { left:21px; top:34px;}
        28%  { left:52px; top:34px;}
        31%  { left:69px; top:20px;}
        32%  { left:92px; top:34px;}
        35%  { left:115px; top:20px;}
        38%  { left:132px; top:34px;}
        41%  { left:135px; top:20px;}
       
    
    
    44%  { left:178px; top:34px;}
    48%  { left:155px; top:100px;}
    50%  { left:20px; top:40px;}
        52%  { left:52px; top:66px;}
        54%  { left:66px; top:40px;}
        57%  { left:89px; top:60px;}
        60%  { left:112px; top:66px;}
        62%  { left:128px; top:40px;}
        65%  { left:140px; top:66px;}
        68%  { left:151px; top:46px;}
    
        71%  { left:192px; top:66px;}  
    75%  { left:20px; top:89px;}
        78%  { left:42px; top:80px;}
        81%  { left:56px; top:89px;}
        84%  { left:69px; top:80px;}
        87%  { left:80px; top:89px;}
        90%  { left:95px; top:80px;}
        93%  { left:115px; top:83px;}
        96%  { left:125px; top:80px;}
    
    
    100%  { left:151px; top:91px;}
    }


@keyframes mymove 
{
    
    0%  { left:151px; top:100px;}
    3%  { left:16px; top:3px;}
     
       
        9%  { left:66px; top:-12px;}
        
        13%  { left:112px; top:3px;}
       
        18%  { left:120px; top:-12px;}
        

     
    
    21%  { left:132px; top:3px;}
    25%  { left:21px; top:34px;}
        28%  { left:52px; top:34px;}
        31%  { left:69px; top:20px;}
        32%  { left:92px; top:34px;}
        35%  { left:115px; top:20px;}
        38%  { left:132px; top:34px;}
        41%  { left:135px; top:20px;}
       
    
    
    44%  { left:178px; top:34px;}
    48%  { left:155px; top:100px;}
    50%  { left:20px; top:40px;}
        52%  { left:52px; top:66px;}
        54%  { left:66px; top:40px;}
        57%  { left:89px; top:60px;}
        60%  { left:112px; top:66px;}
        62%  { left:128px; top:40px;}
        65%  { left:140px; top:66px;}
        68%  { left:151px; top:46px;}
    
        71%  { left:192px; top:66px;}  
    75%  { left:20px; top:89px;}
        78%  { left:42px; top:80px;}
        81%  { left:56px; top:89px;}
        84%  { left:69px; top:80px;}
        87%  { left:80px; top:89px;}
        90%  { left:95px; top:80px;}
        93%  { left:115px; top:83px;}
        96%  { left:125px; top:80px;}
    
    
    100%  { left:151px; top:91px;}
}

  
  #pen {
  
     position:absolute;   
     
   
     top:100px;
    left:155px;
    z-index:5;
    
     -webkit-animation:kokubankey 5s linear, mymove 7s linear 5s;
      -ms-animation:kokubankey 5s linear, mymove 7s linear 5s 1;
      -moz-animation:kokubankey 5s linear, mymove 7s linear 5s;
}
  
  #ink 
  {
      position:absolute;   
     
   
     top:132px;
    left:151px;
    z-index:5;
    
     -webkit-animation:kokubankey 5s linear;
     -ms-animation:kokubankey 5s linear;
     -moz-animation:kokubankey 5s linear;
}
      
  
    
 #anime
 {
      margin:6.6px;
 }
 
 
 
 #mama
 {
     position:absolute;
     left: 177px;
    top: 123px;
    z-index:4;
    margin-right: 2px;
  -webkit-animation-name: mamakey;
    -ms-animation-name: mamakey;
    -moz-animation-name:mamakey;
    
    -webkit-animation-duration: 5s;
     -ms-animation-duration: 5s;
     -moz-animation-duration:5s;
   
}
 @-webkit-keyframes mamakey { 0%{ left:6px; -webkit-animation-timing-function: ease-in-out;} 40%{left:100px;  }
                            60% {left:100px; -webkit-animation-timing-function: ease-in-out; }  100%{left:177px;  }}
  @keyframes mamakey { 0%{ left:6px; -webkit-animation-timing-function: ease-in-out;} 40%{left:100px;  }
                            60% {left:100px; -webkit-animation-timing-function: ease-in-out; }  100%{left:177px;  }}

#papa
{
     position:absolute;
    z-index:4;
    top: 119px;
    left: 245px;
    -webkit-animation-name: papakey;
     -ms-animation-name: papakey;
     -moz-animation-name:papakey;

    -webkit-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -moz-animation-duration:5s;

}


@-webkit-keyframes papakey { 0%{ left:262px; -webkit-animation-timing-function: ease-in-out;} 40%{left:164px;  }
                            60% {left:164px; -webkit-animation-timing-function: ease-in-out; }  100%{left:245px;  }}
@keyframes papakey  { 0%{ left:262px; -webkit-animation-timing-function: ease-in-out;} 40%{left:164px;  }
                            60% {left:164px; -webkit-animation-timing-function: ease-in-out; }  100%{left:245px;  }}

#baby
{
   position:absolute;
    z-index:6;
    top: 158px;
    left: 225px;
     -webkit-animation-name: babykey;
     -ms-animation-name: babykey;
     -moz-animation-name:babykey;

    -webkit-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -moz-animation-duration:5s;

}
 
@-webkit-keyframes babykey { 0%{ opacity: 0;left:147px;-webkit-animation-timing-function: ease-in-out;} 40%{ opacity:0; left:147px;  }
                            60% { opacity:1.0; left:147px; -webkit-animation-timing-function: ease-in-out;}  100%{left:225px; }}
@keyframes babykey { 0%{ opacity: 0;left:147px;-webkit-animation-timing-function: ease-in-out;} 40%{ opacity:0; left:147px;  }
                            60% { opacity:1.0; left:147px; -webkit-animation-timing-function: ease-in-out;}  100%{left:225px; }}
 
 
 
 
 #kokuban
 {
    float:left;
      -webkit-animation-name: kokubankey;
       -ms-animation-name: kokubankey;
       -moz-animation-name:kokubankey;

    -webkit-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -moz-animation-duration:5s;

 }
  @-webkit-keyframes  kokubankey { 0%{ opacity: 0;} 80%{ opacity:0;   }
                            98% { opacity:1.0; }  100%{ opacity: 1.0 }}
  @keyframes kokubankey { 0%{ opacity: 0;} 80%{ opacity:0;   }
                            98% { opacity:1.0; }  100%{ opacity: 1.0 }}
 
 .clearfix:after
 {
     content:".";
     display:block;
     clear:both;
     height:0;
     visibility:hidden;
  }
    

 
  #linemask1
  {
       position:  absolute;
       width:0px;
        height:20px;
        background-color:White;
        top:21px;
        left:131px;
        z-index:3;
         -webkit-animation:line1 2s linear 4s 1;
        -ms-animation:line1 2s linear 4s 1;
        -moz-animation:line1 2s linear 4s 1; 
        
  }
  @-webkit-keyframes line1 { 0%{ width:116px; left:13px;}  60%{ width:116px; left:13px;} 100% { width:0px; left:131px;} }
   @keyframes line1 { 0%{ width:116px; left:13px;}  60%{ width:116px; left:13px;} 100% { width:0px; left:131px;} }
  
  
  #linemask2
  {
       
       position: absolute;
       width:0px;
        height:20px;
        background-color:  White;
        top:54px;
        left:178px;
        z-index:3;
    -webkit-animation:line2 4s linear 4s 1;
       -ms-animation:line2 4s linear 4s 1;
       -moz-animation:line2 4s linear 4s 1;
}
@-webkit-keyframes line2 { 0%{ width:153px; left:14px;} 66% { width:153px; left:14px;} 100% { width:0px; left:178px; -webkit-animation-timing-function: ease-in;} }
 @keyframes line2 { 0%{ width:153px; left:14px;} 66% { width:153px; left:14px;} 100% { width:0px; left:178px; -webkit-animation-timing-function: ease-in;} }

#linemask3
  {
       position: absolute;
       width:0px;
        height:20px;
        background-color:White;
        top:84px;
        left:192px;
        z-index:3;
        -webkit-animation:line3 6s linear 4s 1;
         -ms-animation:line3 6s linear 4s 1;
         -moz-animation:line3 6s linear 4s 1;
}

@-webkit-keyframes line3 { 0%{ width:172px; left:14px;} 75% { width:172px; left:14px;} 100% { width:0px; left:191px;} }
 @keyframes line3 { 0%{ width:172px; left:14px;} 75% { width:172px; left:14px;} 100% { width:0px; left:191px;} }
#linemask4
  {
       position:  absolute;
       width:0px;
        height:18px;
        background-color:White;
        top:113px;
        left:151px;
        z-index:3;
         -webkit-animation:line4 8s linear 4s 1 ;
         -ms-animation:line4 8s linear 4s 1 ;
         -moz-animation:line4 8s linear 4s 1 ;
}

@-webkit-keyframes line4 { 0%{ width:137px; left:14px;} 80% { width:137px; left:14px;} 100% { width:0px; left:151px; -webkit-animation-timimg-function:ease-out;} }
@keyframes line4 { 0%{ width:137px; left:14px;} 80% { width:137px; left:14px;} 100% { width:0px; left:151px; -webkit-animation-timimg-function:ease-out;} }