.contact-inner {
  width: 90%;
  margin: 3rem auto 10rem;
}

.contact-cont {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6rem;
}

.contact-item {
  width: 60%;
  margin: 0 auto;
  text-align: center;
}

.contact-item p {
  display: inline-block;
  margin: 0 0 0.61rem;
  font-size: min(20px, 2vw);
  text-align: center;
  color: #666;
}

.contact-item p span {
  font-size: 90%;
  color: #fff;
}

.cont-button {
  width: 100%;
}

.cont-button a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  padding: 5% 5%;
  width: 100%;
  text-align: center;
  color: #666;
  font-size: min(18px, 1.8vw);
  text-decoration: none;
  border: #666 solid 2px;
  background-image: url(../img/common/btn_arrow.png);
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s;
}

.cont-button a:hover {
  text-decoration: none;
  color: #000;
  background-color: #666;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .contact-inner {
    width: 100%;
    margin: 2rem auto 6rem;
  }

  .contact-cont {
    display: block;
  }

  .contact-item {
    width: 100%;
    margin: 0 2%;
    text-align: center;
  }

  .contact-item p {
    display: inline-block;
    font-size: min(16px, 4.27vw);
    text-align: center;
    color: #666;
  }

  .cont-button {
    width: 70%;
    margin: 0 auto 3rem;
  }

  .cont-button a {
    font-size: min(16px, 4.1vw);
    border: #666 solid 1px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .contact-item {
    width: 100%;
    margin: 0 2%;
    text-align: center;
  }

  .contact-item p {
    display: inline-block;
    margin: 0 0 2rem;
    font-size: min(18px, 2.22vw);
    text-align: center;
    color: #666;
  }
}