/*====================================================================================

[TABLE OF CONTENT]

1. FOUNDATION.
   1.1. BASE.
   1.2. UI DATE PICKER.
2. COMPONENT.
   2.1. TABLE FORM.
   2.2. HEADING FORM.
   2.3. FORM FIELD.
   2.4. FORM CHECK.
   2.5. FORM SUBMIT.

====================================================================================*/
/*====================================================================================
1. FOUNDATION.
====================================================================================*/
/*------------------------------------------------------------------------------------
1.1. BASE.
------------------------------------------------------------------------------------*/
/*---------- INPUT ----------*/
.c-input input {
  width: 100%;
  border: 1px solid #545557;
  background-color: #ffffff;
}
.c-input input::placeholder {
  color: #2d2d2d;
}

@media only screen and (max-width: 767px) {
  .c-input input {
    height: 4.5rem;
    padding-inline: 1rem;
  }
  .c-input input::placeholder {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-input input {
    height: 5rem;
    padding-inline: 1.5rem;
  }
  .c-input input::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- NUMBER ----------*/
.c-number input[type=number] {
  -moz-appearance: textfield;
}
.c-number input[type=number]::-webkit-outer-spin-button,
.c-number input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/*---------- SELECT ----------*/
.c-select {
  position: relative;
  display: inline-block;
  width: 100%;
}
.c-select select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  border: 1px solid #545557;
  background-image: none;
  background-color: #ffffff;
}
.c-select select::-ms-expand {
  display: none;
}
.c-select:after {
  position: absolute;
  content: "";
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  transform: translateY(-50%);
  background: url("./../images/recruit/arrow-down-blue.png") no-repeat center center/100% auto;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .c-select {
    height: 4.5rem;
  }
  .c-select:after {
    inset-inline-end: 1rem;
    width: 1.4rem;
    height: 0.8rem;
  }
  .c-select select {
    height: 4.5rem;
    padding-inline-start: 1rem;
    padding-inline-end: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-select {
    height: 5rem;
  }
  .c-select::after {
    width: 1.9rem;
    height: 1.1rem;
  }
  .c-select select {
    height: 5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 3rem;
  }
}
/*---------- TEXTAREA ----------*/
.c-textarea textarea {
  resize: none;
  width: 100%;
  height: 100%;
  border: 1px solid #545557;
  background-color: #ffffff;
}
.c-textarea textarea::placeholder {
  color: #2d2d2d;
}

@media only screen and (max-width: 767px) {
  .c-textarea textarea {
    padding: 0.5rem 1rem;
  }
  .c-textarea textarea::placeholder {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-textarea textarea {
    padding: 1rem 1.5rem;
  }
  .c-textarea textarea::placeholder {
    font-size: 1.6rem;
  }
}
/*---------- RADIO, CHECKBOX ----------*/
input[type=radio],
input[type=checkbox] {
  cursor: pointer;
}

/*---------- RADIO ----------*/
.c-rdo input[type=radio] {
  margin-right: 0.3em;
  transform: scale(1.2);
}
.c-rdo label {
  cursor: pointer;
}
.c-rdo__list {
  display: flex;
}
.c-rdo__item,
.c-rdo .wpcf7-list-item {
  margin-left: 5rem;
}
.c-rdo__item:first-child, .c-rdo__item.first,
.c-rdo .wpcf7-list-item:first-child,
.c-rdo .wpcf7-list-item.first {
  margin-left: 0;
}
.c-rdo__item span,
.c-rdo .wpcf7-list-item span {
  line-height: 1.5;
}

@media only screen and (max-width: 767px) {
  .c-rdo__item,
  .c-rdo .wpcf7-list-item {
    margin-left: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-rdo__item,
  .c-rdo .wpcf7-list-item {
    margin-left: 5rem;
  }
}
/*---------- CHECKBOX ----------*/
.c-chk input[type=checkbox] {
  transform: scale(1.5);
}

/*------------------------------------------------------------------------------------
1.2. UI DATE PICKER.
------------------------------------------------------------------------------------*/
.ui-datepicker {
  z-index: 2 !important;
  width: 20em !important;
}
.ui-datepicker.hide-calendar .ui-datepicker-calendar {
  display: none;
}
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
}
.ui-datepicker .ui-state-default {
  background-color: #ffffff;
}
.ui-datepicker .ui-state-default.ui-state-active {
  color: #ffffff;
  border-color: #254577;
  background-color: #254577;
}
.ui-datepicker .ui-state-default.ui-state-highlight {
  color: #ffffff;
  border-color: #d83357;
  background-color: #d83357;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  top: 0.8rem;
  border: 1px solid #2d2d2d;
  background-color: #ffffff;
}
.ui-datepicker select {
  height: 3.5rem;
  background-color: #ffffff;
}
.ui-datepicker select.ui-datepicker-year {
  width: 41%;
  margin-right: 4%;
}
.ui-datepicker select.ui-datepicker-month {
  width: 41%;
  margin-left: 4%;
}

/*====================================================================================
2. COMPONENT.
====================================================================================*/
/*------------------------------------------------------------------------------------
2.1. TABLE FORM.
------------------------------------------------------------------------------------*/
.c-tbl-form__line {
  border-block-end: 1px solid #a8b5c9;
}
.c-tbl-form__line:first-child {
  border-block-start: 1px solid #a8b5c9;
}

@media only screen and (max-width: 767px) {
  .c-tbl-form__line {
    padding-block: 1rem;
  }
  .c-tbl-form__line--col .c-tbl-form__dl:not(:last-child) {
    margin-bottom: 1rem;
  }
  .c-tbl-form__dd {
    padding-top: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-tbl-form__line--col {
    display: flex;
    justify-content: space-between;
  }
  .c-tbl-form__line--col .c-tbl-form__dl {
    flex-wrap: wrap;
    width: calc(50% - 4rem);
  }
  .c-tbl-form__line--col .c-tbl-form__dt, .c-tbl-form__line--col .c-tbl-form__dd {
    width: 100%;
  }
  .c-tbl-form__line--col .c-tbl-form__dt {
    padding: 3rem 1rem 1rem 1rem;
  }
  .c-tbl-form__line--col .c-tbl-form__dd {
    padding: 0 1rem 3rem 1rem;
  }
  .c-tbl-form__dl {
    display: flex;
  }
  .c-tbl-form__dt {
    padding: 3rem 0 3rem 1rem;
  }
  .c-tbl-form__dt .c-heading-form {
    width: 27rem;
  }
  .c-tbl-form__dd {
    flex: 1;
    min-width: 1px;
    padding: 3rem 1rem 3rem 4rem;
    font-size: 1.6rem;
  }
}
/*------------------------------------------------------------------------------------
2.2. HEADING FORM.
------------------------------------------------------------------------------------*/
.c-heading-form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-heading-form__title {
  flex: 1;
  min-width: 1px;
  font-weight: 700;
}
.c-heading-form__label {
  padding-block: 0.8rem;
  color: #ffffff;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}
.c-heading-form__label.is-hissu {
  color: #d83357;
  background-color: #fef4f6;
}
.c-heading-form__label.is-ninni {
  color: #254577;
  background-color: #dfe3eb;
}

@media only screen and (max-width: 767px) {
  .c-heading-form__title {
    font-size: 1.4rem;
  }
  .c-heading-form__label {
    width: 4.5rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-heading-form__title {
    font-size: 1.6rem;
  }
  .c-heading-form__label {
    width: 5rem;
    font-size: 1.5rem;
  }
}
/*------------------------------------------------------------------------------------
2.3. FORM FIELD.
------------------------------------------------------------------------------------*/
/*---------- FORM TEXTAREA ----------*/
@media only screen and (max-width: 767px) {
  .c-textarea textarea {
    height: 15rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-textarea textarea {
    height: 20rem;
  }
}
/*------------------------------------------------------------------------------------
2.4. FORM CHECK.
------------------------------------------------------------------------------------*/
.c-form-check {
  text-align: center;
}
.c-form-check__checkbox input[type=checkbox] {
  margin-inline-end: 0.5rem;
  transform: scale(1.4);
}
.c-form-check__note {
  margin-block-start: 0.5rem;
}

@media only screen and (max-width: 767px) {
  .c-form-check {
    margin-block-start: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-form-check {
    margin-block-start: 5rem;
  }
  .c-form-check__body {
    font-size: 1.6rem;
  }
}
/*------------------------------------------------------------------------------------
2.5. FORM SUBMIT.
------------------------------------------------------------------------------------*/
.wpcf7-spinner {
  display: none !important;
}

/*---------- BUTTON ----------*/
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #254577;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.3s ease;
}
.c-btn:hover {
  opacity: 1;
}
.c-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  border: 1px solid #2d2d2d;
  background-color: #2d2d2d;
}
.c-btn:disabled:hover {
  border: 1px solid #2d2d2d;
  background-color: #2d2d2d;
}

@media only screen and (max-width: 767px) {
  .c-btn {
    width: 25rem;
    height: 5rem;
    border-radius: 0.7rem;
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn {
    width: 27.5rem;
    height: 7rem;
    border-radius: 1rem;
    font-size: 1.6rem;
  }
  .c-btn:disabled:hover {
    color: #ffffff;
    background: url("./../images/recruit/arrow-right-white.png") no-repeat right 2.5rem center/1.1rem auto, #2d2d2d;
  }
}
/*---------- BUTTON BLUE ----------*/
.c-btn--blue {
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .c-btn--blue {
    background: url("./../images/recruit/arrow-right-white.png") no-repeat right 1rem center/0.8rem auto, #254577;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--blue {
    background: url("./../images/recruit/arrow-right-white.png") no-repeat right 2.5rem center/1.1rem auto, #254577;
  }
  .c-btn--blue:hover {
    color: #254577;
    background: url("./../images/recruit/arrow-right-blue.png") no-repeat right 2.5rem center/1.1rem auto, #ffffff;
  }
}
/*---------- BUTTON WHITE ----------*/
.c-btn--white {
  color: #254577;
}

@media only screen and (max-width: 767px) {
  .c-btn--white {
    background: url("./../images/recruit/arrow-left-blue.png") no-repeat left 1rem center/0.8rem auto, #ffffff;
  }
}
@media only screen and (min-width: 768px) {
  .c-btn--white {
    background: url("./../images/recruit/arrow-left-blue.png") no-repeat left 2.5rem center/1.1rem auto, #ffffff;
  }
  .c-btn--white:hover {
    color: #ffffff;
    background: url("./../images/recruit/arrow-left-white.png") no-repeat left 2.5rem center/1.1rem auto, #254577;
  }
}
/*---------- FORM SUBMIT ----------*/
@media only screen and (max-width: 767px) {
  .c-form-submit__btn {
    width: 100%;
    text-align: center;
    margin-block-start: 2rem;
  }
  .c-form-submit__btn:not(:last-child) {
    margin-block-end: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-form-submit {
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin-block-start: 3.5rem;
  }
}