@charset "utf-8";

/* ---------------------------------------------------------
 * recruit
** --------------------------------------------------------- */

/* -------------------- container -------------------- */
.container {
  max-width: 940px;
  margin-inline: auto;
  padding: 170px 20px 50px;
}

@media (max-width: 959px) {
}
@media (max-width: 519px) {
  .container {
    padding: calc(10000vw / 390) 20px 0;
  }
}



h1,h2.form-title {
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	margin-bottom: 20px;
}

p.read {
  border-bottom: 1px solid #0ABAB5;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

h2 {
  text-align: left;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 40px;
}

.recruit_table {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 60px;
}

.recruit_table .item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.recruit_table .item h3 {
  color: #0ABAB5;
  width: 200px;
  border-bottom: 1px solid #0ABAB5;
  padding-bottom: 16px;
}
.recruit_table .item p {
  width: 600px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 16px;
}
.mailto_btn {
}
.mailto_btn a {
  text-align: center;
  background-color: #0ABAB5;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  width: 300px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
}
@media (max-width: 959px) {
}
@media (max-width: 519px) {
  .recruit_table .item {
    display: block;
    margin-bottom: 16px;
  }
  .recruit_table .item h3 {
    width: 100%;
    padding-bottom: 10px;
    /*border-bottom: 1px solid #0ABAB5;*/
    border-bottom: none;
    font-size: 18px;
    font-weight: bold;
  }
  .recruit_table .item p {
    width: 100%;
    font-size: 14px;
  }
}


span.title {
  font-weight: bold;
}
span.red {
  color: #E20000;
  margin-left: 6px;
}

form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="date"],
form select,
form textarea {
  border: 1px solid #ccc;
  background: #fff;
  width: 100%;
  padding: 20px 10px;
}

.nf-field-label {
	text-align: left !important;
}

form input[type="date"] {
  width: auto;
}

/* select */
select {
  background-image: url('../img/arr_s_b_bl.png') !important;
  background-repeat: no-repeat !important;
  background-position: center right 10px !important;
}

.wpcf7-list-item.first {
  margin: 0;
}
.wpcf7-list-item-label {
  cursor: pointer;
  display: flex;
}

/* デフォルトのボタン */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}

/* チェック前のボタン */
.wpcf7-list-item-label::before {
  background: #fff;
  border: 1px solid #9CA3AF;
  border-radius: 100%;
  content: "";
  height: 1.2em;
  margin-bottom: auto;
  margin-right: .5em;
  margin-top: auto;
  transition: background-color .5s;
  width: 1.2em;
}

/* チェック後のボタン */
input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background-color: #D2D5DA;
  box-shadow: inset 0 0 0 3px #fff;
}


/* submit */
form input[type="submit"] {
  text-align: center;
  background-color: #0ABAB5;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  width: 420px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
}


.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.form-item.large-margin {
  margin-bottom: 32px;
}

.form-item span.title {
  width: calc(30000% / 900);
  padding-right: 20px;
}

.form-item span.wpcf7-form-control-wrap {
  width: calc(60000% / 900);
}

.personal-information {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  margin-top: 40px;
  padding: 12px;
}

.personal-information h4 {
  font-weight: bold;
  margin-bottom: 20px;
}

.personal-information p {
  margin-bottom: 20px;
}

.personal-information ul {}

.personal-information ul li {
    margin-bottom: 20px;
}
@media (max-width: 959px) {
}
@media (max-width: 519px) {
  .form-item {
    display: block;
    /*margin-bottom: 16px;*/
  }

  .form-item.large-margin {
    /*margin-bottom: 32px;*/
  }

  .form-item span.title {
    display: block;
    width: 100%;
    padding-right: 0;
    margin-bottom: 5px;
  }

  .form-item span.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
  }

  /* submit */
  form input[type="submit"] {
    width: 100%;
  }
}