.content {
  margin: 0 auto;
  padding: 0 5rem;
  max-width: 1200px;
}
@media (max-width: 767px) {
  .content {
    margin: 0 2rem;
    padding: 0;
  }
}
.content p {
  text-align: center;
}
@media (max-width: 767px) {
  .content p {
    text-align: left;
  }
}
.content .btn_area {
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .content .btn_area {
    margin-top: 6.6666666667vw;
  }
}
.content a {
  position: relative;
  font-family: var(--ff-shippri);
  width: 220px;
  display: block;
  border-bottom: 1px solid #999;
  padding: 10px 0;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .content a {
    width: 53.3333333333vw;
    padding: 2.6666666667vw 0;
  }
}
.content a::after {
  content: "";
  background: url("../images/common/arrow_base.webp") center/contain no-repeat;
  background-image: -webkit-image-set(url(../images/common/arrow_base.webp) 1x, url(../images/common/arrow_base@2x.webp) 2x);
  background-image: image-set(url(../images/common/arrow_base.webp) 1x, url(../images/common/arrow_base@2x.webp) 2x);
  width: 15px;
  height: 11px;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
@media (hover: hover) and (min-width: 1000px) {
  .content a::after {
    transition: translate 300ms ease, scale 300ms ease;
  }
  .content a:hover::after {
    translate: 5px -50%;
    scale: 1 -1;
  }
}