section {
  max-width: 300px;
  margin: 0 auto;
}
button.btn_04 {
  /*  display: flex; */
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 50px;
  position: relative;
  background: #5f9ea0;
  border: 1px solid #5f9ea0;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

button.btn_04:hover {
  background: #fff;
  color: #228bc8;
}
button.btn_04:hover:before {
  border-top: 2px solid #5f9ea0;
  border-right: 2px solid #5f9ea0;
}

button.btn_04 {
  /*  display: flex; */
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 50px;
  position: relative;
  background: #5f9ea0;
  border: 1px solid #5f9ea0;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

button.btn_04:hover {
  background: #fff;
  color: #228bc8;
}
button.btn_04:hover:before {
  border-top: 2px solid #5f9ea0;
  border-right: 2px solid #5f9ea0;
}

input.btn_04 {
  /*  display: flex; */
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 50px;
  position: relative;
  background: #5f9ea0;
  border: 1px solid #5f9ea0;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}

input.btn_04:hover {
  background: #fff;
  color: #228bc8;
}
input.btn_04:hover:before {
  border-top: 2px solid #5f9ea0;
  border-right: 2px solid #5f9ea0;
}

.btn_01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  position: relative;
  background: #5f9ea0;
  border: 1px solid #5f9ea0;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.3s;
}

.btn_01:hover {
  background: #fff;
  color: #5f9ea0;
}
.btn_01:hover:before {
  border-top: 2px solid #5f9ea0;
  border-right: 2px solid #5f9ea0;
}

.btn_02 {
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #5f9ea0;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 0 6% 0 4%;
  color: #228bc8;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition-duration: 0.2s;
}
.btn_02:hover {
  background: #5f9ea0;
  color: #fff;
}
.btn_02:hover:before {
  border-color: transparent transparent transparent #fff;
}