/*================================================
【下層ページ固有CSS】
「.sub-page--form」の「--sample」は各ディレクトリ名へ置換すること
/*================================================*/

/*--------------------------------
.sub-page-hero 背景指定、位置調整用
--------------------------------*/
.sub-page--form .sub-page-hero::before {
  top: 652px;
  min-width: 2400px;
  height: 1085px;
  background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_01.webp) no-repeat top center / 100% 100%;
}

@media screen and (max-width: 768px) {
  .sub-page--form .sub-page-hero::before {
    top: 388px;
    min-width: 100%;
    height: 422px;
    background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_01_sp.webp) no-repeat top center / 100% 100%;
  }
}

.sub-page--form .sub-page-hero::after {
  top: 652px;
  min-width: 2400px;
  height: 1085px;
  background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_01_v2.webp) no-repeat top center / 100% 100%;
}

@media screen and (max-width: 768px) {
  .sub-page--form .sub-page-hero::after {
    top: 388px;
    min-width: 100%;
    height: 422px;
    background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_01_v2_sp.webp) no-repeat top center / 100% 100%;
  }
}

/*--------------------------------
.sub-page-hero あしらい、位置調整用
--------------------------------*/
.sub-page--form .sub-page-hero__deco {
  top: -184px;
  left: min(80%, 1113px);
  width: clamp(240px, 19.9vw, 287px);
}

@media screen and (max-width: 768px) {
  .sub-page--form .sub-page-hero__deco {
    top: -102px;
    right: -0.5px;
    left: auto;
    width: 146px;
  }
}


/*--------------------------------
.sub-page-hero --bg-btm 背景指定、位置調整用
※後続セクションが無い場合に使用する
--------------------------------*/
.sub-page--form .sub-page-hero.--bg-btm::after {
  max-height: 1000px;
  min-width: 2400px;
  aspect-ratio: 1512 / 860;
  padding-top: 7px;
  background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_02.webp) center top / 100% 100% no-repeat;
}

@media screen and (max-width: 768px) {
  .sub-page--form .sub-page-hero.--bg-btm::after {
    min-width: 100%;
    max-height: 320px;
    aspect-ratio: auto;
    padding-top: 0;
    background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_02_sp.webp) center top / 100% 100% no-repeat;
  }
}


/*--------------------------------
.cmn-section --sec-bg-01 背景指定、位置調整用
--------------------------------*/
.sub-page--form .cmn-section.--sec-bg-01::before {
  top: 420px;
  min-width: 2400px;
  height: 860px;
  background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_02.webp) no-repeat top center / 100% 100%;
}

@media screen and (max-width: 768px) {
  .sub-page--form .cmn-section.--sec-bg-01::before {
    top: 200px;
    min-width: 100%;
    height: 320px;
    background: url(/recruit/common/img/recruit_cmn_sub-pages_bg_02_sp.webp) no-repeat top center / 100% 100%;
  }
}

/*202604ここから追記*/

.sub-page-hero__content {
    margin-bottom: unset;
}

.from-area .form-status {
  margin :auto;
}

.form-status-area .form-status-img {
  margin: auto;
  width: 50%;
  text-align: center;
  padding: 5rem;
}

.from-area .cmn-card.form-table-wrap {
  margin: auto;
  width: 100%;
  max-width: 860px;
  font-size: 1.8rem;
}

.from-area .cmn-card.form-table-wrap table {
  width: 100%;
}

.from-area .form-btn-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding: 5rem 0;
}

.from-area .form-btn-area .cmn-btn {
  margin: 1rem 2rem;
  cursor: pointer;
  font-weight: 700;
}

.from-area .form-btn-area .cmn-btn.--bg-white {
  padding: unset;
  font-size: 1.6rem;
}


.from-area .form-btn-area.is-error .cmn-btn {
  padding: unset;
  background-color: #dbdbdb;
  cursor: default;
}
.from-area .form-btn-area.is-error .cmn-btn .text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -4rem;
  color: #666;
}

.from-area .form-btn-area.is-error #submit-error {
  display: block;

}
.from-area .form-btn-area #submit-error {
  display: none;
}

.from-area .form-btn-area #submit-btn {
  font-weight: 700;
  font-size: 1.6rem;
  padding: unset;
}


.from-area .form-btn-area.is-error #submit-btn {
  display: none;
}

.from-area .form-btn-area #submit-btn {
  display: block;
}

.from-area .cmn-card.form-table-wrap table th,
.from-area .cmn-card.form-table-wrap table td {
  padding-block: 2rem;
  width: 33.3333%;
  border-bottom: 1px solid #d1d1d1;
  vertical-align: middle;
}

.from-area .cmn-card.form-table-wrap table th label {
  font-weight: 700;
  color: #1b8c62;
}

.from-area .cmn-card.form-table-wrap tr.row-heigh th {
  vertical-align: top;
}

.from-area .cmn-card.form-table-wrap table td {
  padding-inline: 1rem;
  vertical-align: top;
}

.from-area .cmn-card.form-table-wrap table tr.select-birth td {
  width: 22.3%;
}

.from-area .cmn-card.form-table-wrap input[type="text"],
.from-area .cmn-card.form-table-wrap textarea {
  padding: 1.25rem;
  width: 93%;
  background: #f1f7f2;
  border: 1px solid #d2dfd4;
  border-radius: 8px;
  font-size: 1.6rem;
}

.from-area .cmn-card.form-table-wrap input:-internal-autofill-selected:hover,
.from-area .cmn-card.form-table-wrap input:-internal-autofill-selected:focus,
.from-area .cmn-card.form-table-wrap input:-internal-autofill-selected:active {
    -webkit-box-shadow: 0 0 0px 1000px #f1f7f2 inset !important;
}

.from-area .cmn-card.form-table-wrap textarea {
  height: 9rem;
}

.from-area .cmn-card.form-table-wrap .col-wide input[type="text"] {
  width: 96%;
}

.from-area .cmn-card.form-table-wrap .birth-select-area {
  display: flex;
}

.from-area .cmn-card.form-table-wrap .birth-select-area select {
  width: 80%;
  box-sizing: border-box;
  background: #f1f7f2;
  border: 1px solid #d2dfd4;
  padding: 1.25rem;
  border-radius: 8px;
  font-size: 1.6rem;
  /* color: #87a19a;  */
}

.from-area .cmn-card.form-table-wrap .input-zip {
  display: flex;
  align-items: baseline;
}

.from-area .cmn-card.form-table-wrap .input-zip div{
  margin-right: 1rem;
}

.from-area .cmn-card.form-table-wrap .input-zip div input[type="text"] {
  margin-right: 1rem;
  width: 90%;
}

.from-area .cmn-card.form-table-wrap .select-content {
  width: 30%;
  margin-right: 2em;
}

.from-area .cmn-card.form-table-wrap .select-content .select-content-date {
 display: flex;
 width: 180%;
}

.from-area .cmn-card.form-table-wrap .select-content .select-content-date .select-content-month-day {
 width: 50%;
}

.from-area .cmn-card.form-table-wrap .select-content:last-child {
  margin-right: 0;
}

.from-area .cmn-card.form-table-wrap .select-content .birth-select {
  position: relative;
}

.from-area .cmn-card.form-table-wrap .select-content .birth-select::before {
  content: "";
  position: absolute;
  display: flex;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  margin-right: 5rem;
  border: 2px solid #007d5b;
  border-bottom: none;
  border-left: none;
  transform: rotate(135deg);
}

.from-area .cmn-card.form-table-wrap .col-wide input[type="file"]::file-selector-button {
  font-weight: bold;
  background: #fff;
  border: 1px solid #c3cac8;
  border-radius: 8px;
  padding: 8px 16px;
  text-align: center;
}

.from-area .cmn-card.form-table-wrap .icon_required {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.4rem 0.75em;
  background: #e94343;
  border-radius: 20px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  font-style: normal;
}

.from-area .cmn-card.form-table-wrap .icon_voluntary {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.4rem 0.75em;
  background: #989898;
  border-radius: 20px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  font-style: normal;
}

.from-area .cmn-card.form-table-wrap .error-word {
  margin-top: 1rem;;
  font-size: 1.2rem;
  color: #c70022;
}

.from-area .cmn-btn.cmn-btn--s.search-zip {
  max-width: 180px;
  max-height: 40px;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area {
  font-size: 1.4rem;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area p {
  line-height: 1.6;
  margin-bottom: 1rem;
}
.from-area .cmn-card.form-table-wrap .personal-protection-area .agree-check {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  padding: 0.5rem;
  background: #f1f7f2;
  border-radius: 8px;
  font-size: 1.4rem;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area .agree-check.checked {
  margin-top: 0;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area .agree-check input[type="checkbox"] {
  display: block;
  appearance: auto;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area p a {
  position: relative;
  color:#007d5b;
  text-decoration: underline;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area p a:hover {
  text-decoration: none;
}

.from-area .cmn-card.form-table-wrap .personal-protection-area p a::after {
  content: "";
  position: absolute;
  display: flex;
  top: 50%;
  right: -1.5rem;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border: 2px solid #007d5b;
  border-bottom: none;
  border-left: none;
  transform: rotate(45deg);
}

/*完了メッセージ*/
.from-area .message-area {
  margin: 3rem 0;
  text-align: center;
}
.from-area .message-area .comp-message {
  margin-bottom: 3rem;
  font-size: 4rem;
  font-weight: bold;
  color: #1B8C62;
}

.from-area .message-area .thanks-message {
  font-size: 1.6rem;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;

}

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

  .form-status-area .form-status-img {
    width: 100%;
    padding: 3rem;
  }

  .from-area .cmn-card.form-table-wrap {
    width: 100%;
  }

  .from-area .cmn-card.form-table-wrap table th,
  .from-area .cmn-card.form-table-wrap table td {
    display: block;
    width: 100%;
  }

  .from-area .cmn-card.form-table-wrap table th {
    padding-block: 3rem 0rem;
    border: none;
  }

  .from-area .cmn-card.form-table-wrap table tr.select-birth td {
    width: 100%;
    padding-inline: 0;
  }

  /* .from-area .cmn-card.form-table-wrap .birth-select-area {
      flex-direction: column;
  } */

  .from-area .cmn-card.form-table-wrap .birth-select-area select {
    width: 72%;
  }

  .from-area .cmn-card.form-table-wrap .select-content .birth-select {
    text-align: center;
  }

  .from-area .cmn-card.form-table-wrap .select-content .birth-select::before {
    margin-right: 35%;
    width: 8px;
    height: 8px;
  }

  .from-area .cmn-card.form-table-wrap .select-content {
    margin-right: 1rem;
    width: 35%;
    margin-bottom: 2rem;
  }

  .from-area .cmn-card.form-table-wrap .select-content.year-select {
    width: 45%;
  }

.from-area .cmn-card.form-table-wrap .select-content .select-content-date .select-content-month-day .error-word {
    margin-left: 0;
  }

  .from-area .cmn-card.form-table-wrap .select-content .select-content-date {
    width: 83%;
    margin: auto;
  }

  .from-area .cmn-card.form-table-wrap .select-content .select-content-date .select-content-month-day .birth-select::before  {
    margin-right: 30%;
  }

  .from-area .cmn-btn.cmn-btn--s.search-zip {
    max-width: 140px;
    max-height: 35px;
    margin-left: 1rem;
    font-size: 1.4rem;
  }

  .from-area .form-btn-area {
    flex-direction: column-reverse;
  }
  .from-area .form-btn-area .cmn-btn {
    margin: 1rem auto;
  }

}

/* @media screen and (min-width:600x) and (max-width: 768px) {
  .from-area .cmn-card.form-table-wrap .select-content .birth-select::before {
    margin-right: 12rem;
  }
}

@media screen and (max-width:599x) {
  .from-area .cmn-card.form-table-wrap .select-content .birth-select::before {
        margin-right: 8rem;
    }
} */