body 
{
    margin:0;
    
}




@-webkit-keyframes mymove
{
    0%  { left:230px; top:150px;}
    3%  { left:25px; top:5px;}
     
       
        9%  { left:100px; top:-20px;}
        
        13%  { left:170px; top:5px;}
       
        18%  { left:180px; top:-20px;}
        

     
    
    21%  { left:200px; top:5px;}
    25%  { left:32px; top:52px;}
        28%  { left:80px; top:52px;}
        31%  { left:105px; top:32px;}
        32%  { left:140px; top:52px;}
        35%  { left:175px; top:32px;}
        38%  { left:200px; top:52px;}
        41%  { left:235px; top:32px;}
       
    
    
    44%  { left:270px; top:52px;}
    48%  { left:235px; top:150px;}
    50%  { left:32px; top:60px;}
        52%  { left:80px; top:100px;}
        54%  { left:100px; top:60px;}
        57%  { left:135px; top:90px;}
        60%  { left:170px; top:100px;}
        62%  { left:195px; top:80px;}
        65%  { left:210px; top:100px;}
        68%  { left:230px; top:70px;}
    
        71%  { left:291px; top:100px;}  
    75%  { left:32px; top:138px;}
        78%  { left:65px; top:120px;}
        81%  { left:85px; top:135px;}
        84%  { left:105px; top:120px;}
        87%  { left:120px; top:135px;}
        90%  { left:145px; top:120px;}
        93%  { left:175px; top:130px;}
        96%  { left:190px; top:120px;}
    
    
    100%  { left:229px; top:138px;}
    }
  
@keyframes mymove
{
    0%  { left:230px; top:150px;}
    3%  { left:25px; top:5px;}
     
       
        9%  { left:100px; top:-20px;}
        
        13%  { left:170px; top:5px;}
       
        18%  { left:180px; top:-20px;}
        

     
    
    21%  { left:200px; top:5px;}
    25%  { left:32px; top:52px;}
        28%  { left:80px; top:52px;}
        31%  { left:105px; top:32px;}
        32%  { left:140px; top:52px;}
        35%  { left:175px; top:32px;}
        38%  { left:200px; top:52px;}
        41%  { left:235px; top:32px;}
       
    
    
    44%  { left:270px; top:52px;}
    48%  { left:235px; top:150px;}
    50%  { left:32px; top:60px;}
        52%  { left:80px; top:100px;}
        54%  { left:100px; top:60px;}
        57%  { left:135px; top:90px;}
        60%  { left:170px; top:100px;}
        62%  { left:195px; top:80px;}
        65%  { left:210px; top:100px;}
        68%  { left:230px; top:70px;}
    
        71%  { left:291px; top:100px;}  
    75%  { left:32px; top:138px;}
        78%  { left:65px; top:120px;}
        81%  { left:85px; top:135px;}
        84%  { left:105px; top:120px;}
        87%  { left:120px; top:135px;}
        90%  { left:145px; top:120px;}
        93%  { left:175px; top:130px;}
        96%  { left:190px; top:120px;}
    
    
    100%  { left:229px; top:138px;}
    }
  

  
  #pen {
  
       position:absolute;   
     
   
     top:150px;
    left:235px;
    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;
    height: 60px;
    width: 54px;
}
  
  #ink 
  {
        position:absolute;   
     
   
     top:200px;
    left:230px;
    z-index:5;
   -webkit-animation:kokubankey 5s linear;
      -ms-animation:kokubankey 5s linear;
      -moz-animation:kokubankey 5s linear;
    width: 25px;
}
      
  
    
 #anime
 {
      margin:10px;
 }
 
 
 
 #mama
 {
     position:absolute;
     left: 10px;
    top: 235px;
    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;
    
    width: 139px;
}
 @-webkit-keyframes mamakey { 0%{ left:10px; -webkit-animation-timing-function: ease-in-out;} 40%{left:150px;  }
                            60% {left:150px; }  100%{left:10px;  }}
 @keyframes mamakey { 0%{ left:10px; -ms-animation-timing-function: ease-in-out;} 40%{left:150px;  }
                            60% {left:150px; }  100%{left:10px;  }}                           


#papa
{
      position:absolute;
    z-index:4;
    top:217px;
    left: 144px;
    -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:393px; -webkit-animation-timing-function: ease-in-out;} 40%{left:280px;  }
                            60% {left:280px; }  100%{left:144px;  }}
@keyframes papakey { 0%{ left:393px; -ms-animation-timing-function: ease-in-out;} 40%{left:280px;  }
                            60% {left:280px; }  100%{left:144px;  }}

#baby
{
  position:absolute;
    z-index:6;
    top: 293px;
    left: 104px;
    -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:240px;} 40%{ opacity:0; left:240px;  }
                            60% { opacity:1.0; left:240px;}  100%{left:104px;  }}
 @keyframes babykey { 0%{ opacity: 0;left:240px;} 40%{ opacity:0; left:240px;  }
                            60% { opacity:1.0; left:240px;}  100%{left:104px;  }}

 
 
 
 
 #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;   }
                            81% { opacity:1.0; }  100%{ opacity: 1.0 }}
  @keyframes  kokubankey { 0%{ opacity: 0;} 80%{ opacity:0;   }
                            81% { opacity:1.0; }  100%{ opacity: 1.0 }}
 
 .clearfix:after
 {
     content:".";
     display:block;
     clear:both;
     height:0;
     visibility:hidden;
  }
    

 
  #linemask1
  {
         position:  absolute;
       width:0px;
        height:30px;
        background-color:White;
        top:32px;
        left:199px;
        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:176px; left:21px;}  60%{ width:176px; left:21px;} 100% { width:0px; left:200px;} }
  @keyframes line1 { 0%{ width:176px; left:21px;}  60%{ width:176px; left:21px;} 100% { width:0px; left:200px;} }

  
  
  #linemask2
  {
       
        position: absolute;
       width:0px;
        height:30px;
        background-color:  White;
        top:82px;
        left:270px;
        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:233px; left:21px;} 66% { width:233px; left:21px;} 100% { width:0px; left:270px; -webkit-animation-timing-function: ease-in;} }
@keyframes line2 { 0%{ width:233px; left:21px;} 66% { width:233px; left:21px;} 100% { width:0px; left:270px; -ms-animation-timing-function: ease-in;} }

#linemask3
  {
      position: absolute;
       width:0px;
        height:29px;
        background-color:White;
        top:128px;
        left:291px;
        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:262px; left:21px;} 75% { width:262px; left:21px;} 100% { width:0px; left:290px;} }
@keyframes line3 { 0%{ width:262px; left:21px;} 75% { width:262px; left:21px;} 100% { width:0px; left:290px;} }

#linemask4
  {
        position:  absolute;
       width:0px;
        height:27px;
        background-color:White;
        top:172px;
        left:229px;
        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:208px; left:21px;} 80% { width:208px; left:21px;} 100% { width:0px; left:229px; -webkit-animation-timimg-function:ease-out;} }
@keyframes line4 { 0%{ width:208px; left:21px;} 80% { width:208px; left:21px;} 100% { width:0px; left:229px; -ms-animation-timimg-function:ease-out;} }