@charset "utf-8";


.btn{
  text-align: left
}

.btn a {
  display: inline-block;
  padding: 1rem 4.5rem 1rem 2.5rem;
  padding: 1rem 20rem 1rem 0rem;
  text-decoration: none;
  color: #000;
  position: relative;
  transition: .3s; /* 背景色の変化速度*/
    width: 100%;
}

.btn a::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid #3c96ff;
  border-top: transparent;
  border-left: transparent;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin: auto; /* 上下が中央にセットされる */
  transition: .3s;  /* 三角矢印の変化速度*/
}

.btn a:hover::after {
  right: 1.5rem;  /* 2remとの差分で0.5rem動く*/
}


.imgleft{
	position:relative;
	left:0;
}
.imgleft:hover{
	left:10px;
	transition:0.3s;
}

a img:hover{ 
	opacity:0.5;
	transition:0.3s;
}


.imgbottom:hover{
	opacity:0.5;
	transition:0.3s;
}