.p-contact {
  padding: 90px 0 90px
}

@media screen and (max-width: 768px) {
  .p-contact {
    padding: 0
  }
}

.p-contactForm {
  margin-top: 45px;
  background-color: #f5f3f2;
  padding: 65px 140px 75px
}

@media screen and (max-width: 768px) {
  .p-contactForm {
    padding: 50px 16.5% 75px;
    margin-top: 0
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm {
    padding: 25px 35px 37px
  }
}

@media screen and (max-width: 768px) {
  .p-contact__titles {
    padding: 190px 0 60px;
    background-color: #000;
    width: 100vw;
    margin: 0 calc(50% - 50vw)
  }
}

@media screen and (max-width: 500px) {
  .p-contact__titles {
    padding: 95px 0 30px
  }
}

.p-contactForm__title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center
}

@media screen and (max-width: 768px) {
  .p-contactForm__title {
    display: none
  }
}

.p-contactForm__read {
  text-align: center
}

@media screen and (max-width: 768px) {
  .p-contactForm__read {
    font-size: 25px;
    letter-spacing: -0.04em;
    text-align: left
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__read {
    font-size: 13px
  }
}

.p-contactForm__contents {
  margin-top: 30px
}

@media screen and (max-width: 768px) {
  .p-contactForm__contents {
    margin-top: 60px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__contents {
    margin-top: 30px
  }
}

.p-contactForm__items:nth-child(n+2) {
  margin-top: 30px
}

@media screen and (max-width: 768px) {
  .p-contactForm__items:nth-child(n+2) {
    margin-top: 40px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__items:nth-child(n+2) {
    margin-top: 20px
  }
}

.p-contactForm__item {
  margin-bottom: 5px
}

@media screen and (max-width: 768px) {
  .p-contactForm__item {
    font-size: 24px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__item {
    font-size: 12px
  }
}

.p-contactForm__item span {
  color: #fff;
  padding: 0 5px;
  font-size: 12px;
  background-color: #da4646;
  display: inline-block;
  border-radius: 3px;
  margin-left: 4px;
  line-height: 1.4
}

@media screen and (max-width: 768px) {
  .p-contactForm__item span {
    font-size: 22px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__item span {
    font-size: 11px
  }
}

.p-contactForm__input {
  padding: 15px 30px;
  border: 2px solid #e8e1dd;
  background-color: #fff;
  width: 100%;
  border-radius: 3px
}

@media screen and (max-width: 768px) {
  .p-contactForm__input {
    padding: 18px 20px;
    font-size: 24px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__input {
    padding: 9px 10px;
    font-size: 12px
  }
}

.p-contactForm__textarea {
  background-color: #fff;
  width: 100%;
  border-radius: 3px
}

@media screen and (max-width: 768px) {
  .p-contactForm__textarea {
    padding: 18px 40px;
    font-size: 24px
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__textarea {
    padding: 9px 20px;
    font-size: 12px
  }
}

.p-contactForm__button {
  margin: 30px auto 0;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  display: block;
  width: 380px;
  transition: opacity .3s;
  border-radius: 3px
}

@media screen and (max-width: 768px) {
  .p-contactForm__button {
    font-size: 30px;
    margin-top: 45px;
    max-width: 500px;
    width: 100%
  }
}

@media screen and (max-width: 500px) {
  .p-contactForm__button {
    font-size: 15px;
    margin-top: 22px;
    max-width: 250px;
    padding: 8px 0
  }
}

.p-contactForm__button:hover {
  opacity: .7
}