.text-small {
  font-size: 0.8em;
}

.col-red {
  color: var(--color-red);
}

.sq-line {
  border: solid 1px var(--color-red);
}

.box-shadow {
  box-shadow: 0px 0px 20px 7px rgba(0, 0, 0, 0.15);
}

.pd-tb {
  padding: 0.8rem 0;
}

.cta_wrap {
  text-align: center;
  border-radius: 10px;
  padding: 1.5rem;
}

.gdr-content .cta_wrap,
.qa-wrap .cta_wrap
{
  margin-bottom: 150px;
}

.bg-wh {
  background-color: var(--color-white);
}

.cta_wrap p {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}

.btn_col {
  display: flex;
  justify-content: center;
}

.btn {
  width: calc((100% - 20px)/2);
  margin-right: 20px;
}

.btn:last-child {
  margin-right: 0px;
}

.tel_number {
  font-size: 2.3rem;
}

.btn.tel {
  background-color: var(--color-gray);
}

.btn.mail {
  background-color: var(--color-red);
  font-size: 1.75rem;
}

.btn a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  height: 96px;
  max-width: 100%;
  padding: 10px 25px;
  color: var(--color-white);
  transition: 0.3s ease-in-out;
}

.btn.mail a span {
  position: relative;
}

.btn.mail a span:before {
  content: "";
  width: 25px;
  height: 18px;
  background-image: url(../../../img/common/head_mail.png);
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  left: -10%;
  top: 10px;
}

.btn.mail a:hover span:before {
  content: "";
  background-image: url(../../../img/common/head_mail_hover.png);
}

.btn.tel a span.tel_number {
  position: relative;
}

.btn.tel a span.tel_number:before {
  content: "";
  width: 28px;
  height: 36px;
  background-repeat: no-repeat;
  background-image: url(../../../img/common/head_tel.png);
  background-size: contain;
  position: absolute;
  left: -12%;
  top: 10px;
}

.btn.tel a:hover span.tel_number:before {
  content: "";
  background-image: url(../../../img/common/head_tel_hover.png);
}


.btn a:hover {
  text-decoration: none;
}

.btn.mail a:hover {
  background: var(--color-white);
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

.btn.tel a:hover {
  background: var(--color-white);
  color: var(--color-gray);
  border: 1px solid var(--color-gray);
}


.btn a span {
  display: block;
}



:root {
  --color-red: #d83c1d;
  --color-white: #ffffff;
  --color-gray: #4d4d4d;
  --color-black: #000000;
}

@media screen and (max-width: 768px) {
  .cta_wrap {
    margin: 0 1rem 2rem 1rem;
    padding: 1rem;
  }

  .btn_col {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    margin: 0 0 20px 0;
  }
.btn a {
  height: 80px;
}

  .tel_number {
    font-size: 1.8rem;
  }

  .btn.mail {
    font-size: 1.2rem;
  }

  .btn.mail a span:before {
    width: 20px;
    top: 5px;
    left: -12%;
  }

  .btn.tel a span.tel_number:before {
    width: 18px;
  }

}