/*主な共通部分は省略*/

a.btn1-border {
border: 2px solid #000;
text-decoration: none;
  border-radius: 0;
  background: #fff;
  font-size:80%;
}

a.btn1-border:hover {
  color: #fff;
  background: #000;
}

a.btn2-border {
border: 2px solid #000;
text-decoration: none;
  font-size:80%;
  color:#FFF;
  border-radius: 0;
  background: #000;
}

a.btn2-border:hover {
  color: #000;
  background: #fff;
}


.btn0 {display:block;}
.btn0 li{margin-top:10px;margin-bottom:10px;}

 @media screen and (max-width: 767px) {
     .btn0 {
         text-align: center;width:45%;margin: 0 auto;max-width:640px;
     }
    .btn0 li{margin-left:10px;}
 }

.btn1 {
	position: relative;
	width: 90%;
	height: auto;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn1 img {
	position: absolute;
	top: 50%;
	left: 8%;
	-webkit-transform: translate(-40%, -40%);
	transform: translate(-40%, -40%);
	width: 15%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn1:hover img:nth-of-type(2) {
	opacity: 0;
}

.btn2 {
	position: relative;
	width: 90%;
	height: auto;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
}
.btn2 img {
	position: absolute;
	top: 50%;
	left: 8%;
	-webkit-transform: translate(-40%, -40%);
	transform: translate(-40%, -40%);
	width: 15%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.btn2:hover img:nth-of-type(2) {
	opacity: 0;
}