@charset "UTF-8";
/* CSS Document */
.mt10{ margin-top: 10px;}
.mt20{ margin-top: 20px;}
.mt30{ margin-top: 30px;}
.mb10{ margin-bottom: 10px;}
.mb20{ margin-bottom: 20px;}
.mb30{ margin-bottom: 30px;}

a:link, a:visited, a:hover, a:active{color: #021948;text-decoration: none;}

/*リンクボタン*/
.btn_a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 56px;
  outline: none;
  color: #fff;
  background-color: #021948;
  position: relative;
  border: 1px solid #021948;
  transition: color 0.5s ease;
  padding: 0 3rem;
width:clamp(23rem, calc(20rem + 0.625vw), 26rem);
}
.btn_b {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 56px;
  outline: none;
  color: #fff;
  background-color: #B81C21;
  position: relative;
  border: 1px solid #B81C21;
  transition: color 0.5s ease;
  padding: 0 3rem;
width:clamp(23rem, calc(20rem + 0.625vw), 26rem);
}
.btn_a:hover, .btn_b:hover{
  color: #fff;
}
.btn_a:hover::before, .btn_b:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btn_a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #042889;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.btn_b::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #C8080E;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.textBtn {
  position: relative;
}
.textBtn span {
  line-height: 1.5;
}

@media screen and (max-width: 480px) {
.btn_a, .btn_b{width: 100%;}
}
/*スクロール促し*/