@charset "utf-8";
.btn__inner {
  color: #fff;
  display: block;
  width: 450px;
  height: 80px;
  margin: 70px auto;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.btn__inner:hover .btn__deco {
  -webkit-transform: skew(-20deg, 1deg) translateY(2px);
  -moz-transform: skew(-20deg, 1deg) translateY(2px);
  -o-transform: skew(-20deg, 1deg) translateY(2px);
  -ms-transform: skew(-20deg, 1deg) translateY(2px);
  transform: skew(-20deg, 1deg) translateY(2px);
}
.btn__inner:hover .btn__text {
  letter-spacing: 0.15em;
  font-size: 22px;
  background-color: #a8000f;
}
.btn__inner:hover .btn__text-cast {
  letter-spacing: 0.1em;
  font-size: 15px;
}
.btn__inner-cast {
  width: 100px;
  height: 35px;
  margin: 0;
}
.btn__inner-post {
  margin: 0;
}
.btn__deco {
  width: 200px;
  position: absolute;
  top: -55px;
  right: 0;
  z-index: 0;
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  -o-transition: -o-transform 300ms ease;
  -ms-transition: -ms-transform 300ms ease;
  transition: transform 300ms ease;
}
.btn__deco-cast {
  width: 85px;
  top: -23px;
  right: 10px;
}
.btn__text {
  font-size: 20px;
  letter-spacing: 0;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  transition: all 300ms ease;
  background-color: #f00014;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 2px #f00014;
  /* width: 450px; */
  height: 80px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.btn__text-cast {
  font-size: 15px;
  width: 100px;
  height: 35px;
}
@media screen and (max-width: 736px) {
  .btn__inner {
    width: 89.33333333333333vw;
    height: 13.866666666666667vw;
    margin: 14.4vw auto;
  }
  .btn__inner:hover .btn__deco {
    -webkit-transform: skew(0) translateY(0);
    -moz-transform: skew(0) translateY(0);
    -o-transform: skew(0) translateY(0);
    -ms-transform: skew(0) translateY(0);
    transform: skew(0) translateY(0);
  }
  .btn__inner:hover .btn__text {
    letter-spacing: 0;
    font-size: 4.266666666666667vw;
    background-color: #f00014;
  }
  .btn__inner:hover .btn__text-cast {
    letter-spacing: 0;
    font-size: 3.2vw;
  }
  .btn__inner-cast {
    width: 17.333333333333332vw;
    height: 6.4vw;
    margin: 0;
  }
  .btn__inner-post {
    width: 64vw;
    height: 13.866666666666667vw;
    margin: 0;
  }
  .btn__deco {
    width: 40vw;
    top: -10.666666666666666vw;
    right: 0;
  }
  .btn__deco-cast {
    width: 17.333333333333332vw;
    top: -4.8vw;
    right: 0.266666666666667vw;
  }
  .btn__text {
    font-size: 4.266666666666667vw;
    letter-spacing: 0;
    /* width: 89.33333333333333vw; */
    height: 13.866666666666667vw;
  }
  .btn__text-cast {
    font-size: 3.2vw;
    width: 17.333333333333332vw;
    height: 6.4vw;
  }
  .btn__text-post {
    width: 64vw;
    height: 13.866666666666667vw;
  }
}