/* 採用フォームページ共通スタイル */

/* 採用フォームページ画像ヘッダー高さ */
.form-header {
  min-height: 600px;
}

/* 採用フォームページ見出し設定 */
.form-header h2 {
  height: 100px;
  margin-bottom: 200px;
}

/* フォームレイアウト */
form {
  font-size: 18px;
  margin: auto;
  margin-bottom: 120px;
  padding: 100px 50px 200px;
  background-color: #E9E9E9;
  max-width: 1200px;
}

/* 必須項目コンテナ */
.required-container {
  margin-bottom: 100px;
}

/* 必須項目のテキストを赤く */
.required {
  color: #FF0000;
}

/* 各入力項目列の縦方向マージンと横方向の中央配置 */
.form {
  margin: 24px auto;
  display: flex;
  justify-content: center;
}

/* 入力項目ラベル */
form label {
  font-weight: bold;
  width: 126px;
  display: inline-block;
  line-height: 36px;
  text-align: right;
}

/* 必須項目印のレイアウト */
span.required {
  margin-left: 24px;
  margin-right: 4px;
  font-weight: bold;
}

/* 入力要素 */
input {
  border: 1px #707070 solid;
  border-radius: 6px;
  height: 36px;
  vertical-align: middle;
}

/* テキスト、電話番号、Eメール入力 */
input[type="text"],
[type="tel"],
[type="email"] {
  width: 480px;
  margin-right: 176px;
}

/* 任意入力項目ラベルの右マージン */
#mailformpro .input-container label {
  margin-right: 50px;
}

/* 番号入力の幅と右マージン */
#mailformpro input[type="number"] {
  margin-right: 555px;
  width: 100px
}

/* セレクトボックス */
select {
  height: 46px;
  width: 139px;
  border-radius: 6px;
  appearance: none;
  background-image: url("../image/select.png");
  background-position: right -1px center;
  background-repeat: no-repeat;
  background-size: 46px 46px;
  margin-right: 250px;
}

.birth {
  margin-right: 520px;
}

#mailformpro #zip-mark {
  width: auto;
  margin: auto 8px;
}

.address {
  margin-right: 180px;
}

/* 郵便番号入力ラベル */
form label[for="zipcode"] {
  width: auto;
  margin-right: 0;
}

/* 郵便番号入力フォーム */
#zipcode {
  width: 162px;
  margin-right: 32px;
}

/* 住所入力フォーム */
input[name="住所"] {
  margin-left: 180px;
}

/* ラジオボタングループラッパー */
.radio-wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.gender {
  margin-right: 455px;
}

.occupation {
  margin-right: 300px;
}

.employment {
  margin-right: 230px;
}

.private-cooporate {
  margin-right: 460px;
}

.private-cooporate .required {
  margin-right: 15px;
}

#mailformpro .private-cooporate .radio-container label {
  margin: 16px;
}

.radio-container {
  display: flex;
}

.radio-container label {
  font-weight: normal;
  width: auto;
}

.checkbox-wrapper {
  display: flex;
  justify-content: center;
  margin-right: 300px;
  margin-left: -10px;
}

/* チェックボックスコンテナ */
.checkbox-container {
  display: inline-block;
  width: 440px;
  text-align: left;
  margin-left: 4px;
  margin-top: -10px;
  margin-right: -75px;
}

.checkbox-container label {
  font-weight: normal;
}

/* チェックボックスの幅とマージン */
input[type="checkbox"],
[type="radio"] {
  width: 27px;
  margin: 12px auto;
}

/* 入力の右側ラベルを左寄せに */
.label-right {
  text-align: left;
  margin-left: 18px;
}

/* 個人事業主経験年数ラベル */
label.independence {
  width: auto;
}

/* 個人事業主経験年数右マージン */
input.independence {
  margin-right: 210px
}

.textarea-wrapper {
  display: flex;
  justify-content: center;
}

/* テキストエリアのラベルを上寄せに */
.textarea-wrapper label {
  vertical-align: top;
}

/* テキストエリアの右マージンとボーダー丸め、リサイズ禁止 */
.textarea-wrapper textarea {
  border-radius: 6px;
  resize: none;
  margin-right: 175px;
}

/* サブミットボタン */
form button {
  margin: 60px auto;
  padding: 8px 45px;
  font-size: 20px;
  color: #FFFFFF;
  background-color: #004DA0;
  border: none;
}

form button:hover {
  color: #707070;
}

.career-etc {
  display: flex;
  width: 498px;
}

.career-etc .etc {
  white-space: nowrap;
}

.career-etc label {
  width: auto;
}

.career-etc textarea {
  resize: none;
}

div.mfp_err {
  margin-left: 340px;
}

.mfp_element_textarea {
  padding: 8px;
  font-family: Arial;
}

@media screen and (max-width: 768px) {

  input[type="text"],
  [type="tel"],
  [type="email"] {
    width: 440px;
    margin: auto;
  }

  .birth {
    margin-right: 320px;
  }

  .gender {
    margin-right: 260px;
  }

  .address {
    margin-right: -30px;
  }

  input[name="住所"] {
    margin-left: 180px;
  }

  .occupation {
    margin-right: 100px;
  }

  .employment {
    margin-right: 30px;
  }

  .checkbox-wrapper {
    margin-right: 120px;
  }

  .textarea-wrapper textarea {
    margin: auto;
  }

  .private-cooporate.radio-wrapper {
    margin-right: 320px;
  }

  .private-cooporate .radio-container {
    margin-left: 50px;
  }
}

@media screen and (max-width: 415px) {
  .section1 {
    min-height: 419px;
  }

  .form {
    text-align: left;
    flex-direction: column;
    margin: 2px auto;
  }

  .label-container {
    background-color: #ffffff;
    margin: 8px 0;
    border-top: solid 1px #c9c9c9;
    border-bottom: solid 1px #c9c9c9;
  }

  form#mailformpro label {
    text-align: left;
    margin-left: 8px;
    width: auto;
  }

  input[type="text"],
  [type="tel"],
  [type="email"] {
    margin-left: 8px;
  }

  .required-container {
    margin-bottom: 0;
  }

  .birth {
    margin: auto;
    width: 100%;
  }

  .birth .label-container {
    padding-left: 8px;
  }

  #age {
    margin-left: 8px;
  }

  #mailformpro .birth label,
  #mailformpro .gender label,
  #mailformpro .occupation label,
  #mailformpro .employment label {
    margin-left: 0;
  }

  .radio-wrapper {
    flex-direction: column;
    margin-left: 8px;
  }

  .gender {
    margin: auto 0;
    width: 100%;
  }

  .gender .label-container {
    width: 100%;
    text-align: left;
  }

  #mailformpro .gender label {
    margin-left: 8px;
  }

  .gender .radio-container {
    padding-left: 8px;
  }

  .gender input {
    margin: 0;
  }

  .address {
    margin: auto 0;
    justify-content: center;
  }

  #zip-mark {
    width: auto;
  }

  #zipcode {
    margin-left: 0;
  }

  #prefecture {
    margin: 8px;
  }

  .address select {
    margin-top: 16px;
  }

  .occupation,
  .employment {
    width: 100%;
    margin: 0;
  }

  .occupation .label-container,
  .employment .label-container,
  .checkbox-wrapper .label-container {
    width: 100%;
    text-align: left;
  }

  #mailformpro .occupation label,
  #mailformpro .employment label {
    margin-left: 8px;
  }

  .occupation .radio-container,
  .employment .radio-container {
    flex-direction: column;
    padding-left: 8px;
  }

  #mailformpro .occupation input[type="radio"],
  #mailformpro .employment input[type="radio"],
  #mailformpro .checkbox-container input[type="checkbox"] {
    margin: 0;
  }

  .occupation .radio-container div {
    margin-left: -16px;
  }

  .occupation .radio-container div:last-child {
    margin-left: 0;
  }

  .employment .radio-container {
    flex-direction: column;
    width: auto;
  }

  .employment .radio-container div:first-child,
  .employment .radio-container div:last-child {
    margin-left: -36px;
  }

  .employment .radio-container div:nth-child(2) {
    margin-left: 0;
  }

  .checkbox-wrapper {
    flex-direction: column;
    max-width: 100vw;
    margin: 0;
  }

  #mailformpro .checkbox-wrapper label {
    margin-left: 8px;
  }

  .checkbox-container {
    max-width: calc(100vw - 8px);
    margin-left: 8px;
  }

  .career-etc {
    flex-direction: column;
  }

  .textarea-wrapper {
    padding: 0;
    flex-direction: column;
  }

  #mailformpro .textarea-wrapper label {
    margin-left: 8px;
  }

  .private-cooporate {
    width: 100%;
    margin: 0;
  }

  .private-cooporate .label-container {
    width: 100%;
    text-align: left;
  }

  .private-cooporate .radio-container {
    margin-left: 0;
  }

  #mailformpro .private-cooporate input {
    margin: 0;
    margin-left: 8px;
  }
  #mailformpro .private-cooporate .radio-container label {
    margin: 0;
  }

  #mailformpro textarea {
    width: calc(100vw - 40px);
  }

  .career-etc {
    max-width: calc(100vw - 8px);
  }

  .career-etc textarea {
    max-width: calc(100vw - 16px);
  }

  div.mfp_err {
    margin-left: 8px;
  }

}