@charset "utf-8";

/*丸がボタンに変形*/

.btntransform{
  position: relative;
  margin:10px;
  display: inline-block;
  padding:0 0 0 15px;
  line-height: 50px;
    color: #333;
    text-decoration: none;
    outline: none;

}


.btntransform::before{
  content:'';
  position:absolute;
  left:0;
  z-index: -1;
  width:50px;
  height:50px;
  background:#ccc;
  border-radius:25px;
  transition:.3s ease-out;
}


.btntransform:hover::before{
  width:150px;
}

/* 矢印の形状 */
.btntransform::after{
  position: absolute;
    content: '';
    top: 1.4em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}














.btn2transform{
  position: relative;
  margin:10px;
  display: inline-block;
  padding:0 0 0 15px;
  line-height: 50px;
    color: #333;
    text-decoration: none;
    outline: none;
}
a:link{
	text-decoration:none;
}


.btn2transform::before{
  content:'';
  position:absolute;
  left:0;
  z-index: -1;
  width:50px;
  height:50px;
  background:#ccc;
  border-radius:25px;
  transition:.3s ease-out;
}


.btn2transform:hover::before{
  width:320px;
}

/* 矢印の形状 */
.btn2transform::after{
    position: absolute;
    content: '';
    top: 1.8em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}