@import url(./common.css);

main {
  background-color: #3f6096;
  margin-top: -70px;
  padding-left: 30px;
  padding-right: 30px;
}
/* お問い合わせ */
main article h1 {
  font-family: "Shippori Mincho B1", serif;
  font-size: 70px;
  color: #fff;
  padding-top: 150px;
  padding-bottom: 80px;
}

/* お問い合わせの枠線ボーダー */
main article div.box {
  border: 2px solid #04183d;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 60px;
  padding-right: 60px;
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}

/* お名前～お問い合わせのflexBox */
main article div.box {
  display: flex;
  column-gap: 30px;
}

/* flexBoxの大きさ、位置 */
main article div {
  flex: 1;
  text-align: left;
  font-size: 16px;
  color: #fff;
}

/* お名前～お問い合わせ文字列の下余白 */
main article div legend {
  padding-bottom: 15px;
}
/* Pタグ入力ボックスの下余白 */
main article div p {
  padding-bottom: 30px;
}

/* こめ印の左余白:4px */
main legend span {
  padding-left: 4px;
}

/* Pタグ入力ボックスの設定 */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main textarea {
  width: 100%;
  padding: 8px;
  /* 文字設定:親と同じを少し変える */
  font: inherit;
  font-size: 16px;
  font-weight: normal;
  /* 入力時の太線アウトライン:なし */
  outline: none;
}

/* 高さ:12em、行の高さ:1.5、リサイズ:垂直 */
main textarea {
  height: 16em;
  line-height: 1.5;
  resize: vertical;
}

/* *は必須項目です。の設定 */
main article aside {
  max-width: 1110px;
  margin-left: auto;
  margin-right: auto;
}
main article aside p {
  font-size: 16px;
  color: #fff;
  font-weight: normal;
  text-align: right;
  padding-top: 10px;
  padding-bottom: 20px;
}
main article aside.hhissukoumoku {
  padding-bottom: 0;
}

/* ボタンの文字設定、内側上下余白、内側左右余白、文字間隔:8px、背景色 */
main form button {
  font: inherit;
  color: #fffdf8;
  padding: 17px 54px 16px 62px;
  /* 字間隔:8px中央揃えの時は注意 */
  letter-spacing: 8px;
  background-color: #04183d;
  border-radius: 50px;
}
main form button:hover {
  transition: 0.5s;
  opacity: 0.7;
}

/* 個人情報保護方針の設定 */
main article section {
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 35px 20px 35px;
  margin-top: 50px;
  margin-bottom: 67px;
  background-color: #04183d;
  font-size: 18px;
  color: #fffdf8;
  text-align: left;
  line-height: 1.5;
}
main article section h2 {
  text-align: center;
  padding-bottom: 8px;
}

footer div {
  background-color: #3f6096;
  margin-top: -70px;
}

/* レスポンシブ */

/* FlexBoxの解除 */
@media screen and (max-width: 767px) {
  main article div.box {
    display: block;
  }
  /* スマホの余白変更 */
  main article div.box {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 575px) {
  /* お問い合わせ */
  main article h1 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 50px;
    color: #fff;
    padding-top: 150px;
    padding-bottom: 80px;
  }
  /* ボタンの文字設定、内側上下余白、内側左右余白、文字間隔:8px、背景色 */
  main form button {
    font-size: 16px;
    padding: 10px 44px 10px 52px;
  }
  /* 個人情報保護方針の設定 */
  main article section {
    font-size: 15px;
  }
}