body{
    background-color: rgb(110, 140, 165);
}
/* 1枚目の画像 */
.ichi{
    display: block;
    margin:0 auto;
}
/* 2枚目の画像 */
.ni{
    display: block;
    margin:0 auto;
}
/* 3枚目の画像 */
.san{
    display: block;
    margin:0 auto;
}
.animation {
    width:100px;
    height:50px;
    text-align:center;
    border:2px solid #3206f8;
    cursor:pointer;
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    display: block;
    margin:0 auto;
  }
  .animation a {
    font-family:arial;
    font-size:12px;
    color:#f6f6f8;
    text-decoration:none;
    line-height:50px;
    transition:all .10s ease;
    z-index:2;
    position:relative;
  }
  .effect {
    width:140px;
    height:50px;
    top:-2px;
    left:-140px;
    background:#4203f0;
    position:absolute;
    transition:all .5s ease;
    z-index:1;
    display: block;
  }
  .animation:hover .effect {
    left:0;
  }
  .animation:hover a {
    color:#ffffff;
  }
  
  



