@charset "UTF-8";

.main {
  width: 100%;
  max-width: 90%;
  margin: 0 50px 0 50px;
}


.title h2 {
  margin: 0 0 20px 20px;
}

.title h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background-color: black;
  margin-top: 20px;
}

/* 問い合わせ文言 */
.info {
  width: 100%;
  max-width: 90%;
  /* text-align: center; */
  margin: 30px 0 20px 30px;
  padding: 20px;
}

.info p {
  margin-top: 20px;
}


/* 問い合わせ */
.info2 {
  font-size: 20px;
}


.formbox {
  display: flex;
  flex-wrap: wrap;
}

.infobox {
  background-color: rgb(221, 219, 219);
  border: 1px solid #aaaaaa;
  margin-top: 30px;
  padding: 30px;
}

.infobox dt {
  width: 200px;
}

.infobox dd {
  width: calc(100% - 200px);
  margin-bottom: 30px;
}

.infobox input {
  height: 30px;
}


.infobox select {
  width: 173px;
  height: 40px;
}



/* 内容入力エリア */

.textarea {
  width: 100%;
  display: block;
}

.infotext {
  width: 100%;
  max-width: 450px;
  height: 100px;
}

/* 送信ボタンエリア */

.btntext {
  display: block;
}

.btntext input {
  font-family: serif;
  margin-top: 20px;
  background-color: cadetblue;
  display: inline-block;
  min-width: 180px;
  margin-bottom: 30px;
  border-radius: 24px;
  font-size: 14px;
  line-height: 48px;
  height: 52px;
}


.btn:hover {
  background-color: aquamarine;
}


@media (max-width: 430px) {

  .main {
    width: 420px;
    max-width: 95%;
    margin: 0;
  }

  .info {
    width: 420px;
    max-width: 95%;
    margin: 0;
  }

  .info2 {
    font-size: 15px;
  }

  .infobox dt {
    font-size: 12px;
  }

  .infobox dt,
  .infobox dd {
    width: 100px;
  }

  .infotext,
  .btn {
    width: 280px;
  }

  .footer ul {
    font-size: 12px;
  }

}