@charset "utf-8";
/* CSS Document */

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 330px;
	height: 145px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/

/*===============================
リセットCSS
===============================*/

*{
	margin:0;
	padding:0;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
}
/* 以下はレイアウト調整用 */
body{
  vertical-align:middle; 
  padding: 50px 0;
  text-align: center;
	background-color: azure;
}
/*===============================
ボタンCSS
===============================*/
.sample_btn {
  display: inline-block;
  width: 250px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #1B85FB;
  box-shadow: 0px 5px 0px #1567C3;
  transition: .3s;
  border-radius:15px;
　margin-top:50px;
}

.sample_btn:hover {
  box-shadow: unset;
  transform: translateY(4px);
}


/*===============================
ボタン2CSS
===============================*/
.sample_btn2 {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #FFFFFF;
  background: linear-gradient(to right, #1B85FB, #FB4D8A);
  background-position: 0% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out;
  border-radius:15px;
  margin-top:50px;
}


.sample_btn2:hover {
  color: #fff;
  background-position: 100% 51%;
}
/*===============================
ボタン3CSS
===============================*/

.sample_btn3 {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #000;
  background-color: #00ff00;
  box-shadow: 0px 5px 0px #32cd32;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius:15px;
  margin-top:50px;
}

.sample_btn3:hover {
  transform: scale(1.1,1.1);
}
/*===============================
ボタン4CSS
===============================*/
.sample_btn4 {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #fff;
  background-color: #000;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius:15px;
  margin-top:50px;
}
.sample_btn4:hover {
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

/*===============================
ボタン5CSS
===============================*/
a.sample_btn5 {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  color: #fff;
  background-color: #4169e1;
　border-radius:15px;
  margin-top:50px;
}
a.sample_btn5:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple 1.5s infinite;
  color: #fff;
}
@keyframes ripple {
  0% {box-shadow: 0 0 0 0 #1B85FB;}
  70% {box-shadow: 0 0 0 10px rgb(27 133 251 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(27 133 251 / 0%);}
}