/* =======================================================================
   employ Page Styles
======================================================================= */

/* 初期設定（ナンバリング） */
body {
  counter-reset: number 0;
}

.employ_fit {
  width: fit-content;
}

.employ_box,
.employ_box_center {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.employ_box_between {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
}

/* 中央揃え */
.employ_box_center {
  justify-content: center;
}

.employ_align_end {
  display: flex;
  align-items: end;
}

.employ_inline {
  display: inline-block;
}

/* 見出 */
.employ_headline {
  h2 {
    display: inline-block;
    padding-bottom: 1rem;
  }
}

/* 下線 */
.employ_border-a {
  border-bottom: 1px solid var(--wp--preset--color--custom-purple);
  padding: 0 1.5em;
}

.employ_border-b {
  border-bottom: 1px solid var(--wp--preset--color--custom-blue);
  padding: 0 1.5em;
}

/* リスト */
.employ_list-a::first-letter {
  color: var(--wp--preset--color--custom-purple);
}

.employ_list-b::first-letter {
  color: var(--wp--preset--color--custom-blue);
}

/* スケジュール */
.employ_schedule {
  padding: 2.4rem max(0.7rem, 25px);
  > div {
    margin: 0;
  }
  > div,
  > p {
    padding-top: 1rem;
  }
}

/* =======================================================================
   固定型・拠点型・実践型の違い
======================================================================= */

/* カード */
.employ_card {
  position: relative;
  padding: 1rem 1.4rem 4rem;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;

  background: #fff;

  h3 {
    border-bottom: 1px solid var(--wp--preset--color--custom-blue);
  }

  h4 {
    display: inline-block;
    font-weight: normal;
    padding: 0.2rem 1em;
    width: 4em;
  }
}

.employ_card_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;

  p {
    padding-top: 10px;
  }
}

.employ_card_bottom {
  margin-top: auto;
}

/*ベース*/
.employ_card_toggle {
  display: none;
}

.employ_card_label {
  /*タイトル*/
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1;

  font-weight: normal;
  letter-spacing: 0.1em;

  border-radius: 100vmax;
  margin: 0;
  padding: 0.5rem 2em;

  background: var(--wp--preset--color--custom-blue);
  color: #fff;
  text-align: center;

  pointer-events: none; /* PCの時は挙動させない */
}

.employ_card_label,
.employ_card_content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s;
}

.employ_card_content {
  height: auto; /* PCの時はauto */
  overflow: hidden;
  transform: translateZ(0);

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;

  background: #fff;
}

.employ_card_toggle:checked + .employ_card_label + .employ_card_content {
  /*開閉時*/
  height: auto;
  opacity: 1;
  transition: all 0.3s;
}

.employ_card_toggle:checked + .employ_card_label::before {
  transform: rotate(-45deg) !important;
}

/* =======================================================================
   流れ
======================================================================= *

/* 流れ */
.employ_step_container {
  padding: 1rem 1.4rem 4rem;
}

/* 流れ(枠線内) */
.employ_step_content-a,
.employ_step_content-b {
  padding: 2.4rem max(0.7rem, 25px) 2rem;
  position: relative;
  h2 {
    font-weight: normal;
  }

  > p {
    padding-top: 1rem;
  }
}

.employ_step_content-a::after,
.employ_step_content-a::before,
.employ_step_content-b::after,
.employ_step_content-b::before {
  color: #fff;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.6rem;

  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);

  height: 2rem;
  width: 2rem;
}

.employ_step_content-a::before,
.employ_step_content-b::before {
  border-radius: 50%;
  content: "STEP";
  font-size: 0.6rem;
  top: 0;
}

.employ_step_content-a::before {
  background: var(--wp--preset--color--custom-purple);
}
.employ_step_content-b::before {
  background: var(--wp--preset--color--custom-blue);
}

.employ_step_content-a::after,
.employ_step_content-b::after {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  font-size: 1.2rem;
  font-weight: 600;
  top: 0.5rem;
}

/* 流れ(特記欄) */
.employ_step_item {
  border-radius: 100vmax;
  min-width: 6em;
}

/* 流れ(矢印) */
.employ_step_arrow-a,
.employ_step_arrow-b {
  font-size: 1.8rem;
  padding-bottom: 1.4rem;
}
.employ_step_arrow-a {
  color: var(--wp--preset--color--custom-purple);
}
.employ_step_arrow-b {
  color: var(--wp--preset--color--custom-blue);
}

/* =======================================================================
   Googleマップ
======================================================================= */

.employ_map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比 */
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* =======================================================================
   Media Query
======================================================================= */
@media (min-width: 769px) {
  .employ_menu {
    min-height: 600px;
  }

  .employ_menu,
  .employ_schedule {
    border-radius: 0.4rem;
  }

  .width_30-pc {
    width: 30%;
  }
}

@media (max-width: 768px) {
  /* 画面幅いっぱいに表示させる */
  .employ_group_full {
    padding: 0;
  }
  /* 余白を設定 */
  .employ_group_medium {
    padding: 0 1.4rem;
  }

  /* テキストを左寄せ */
  .employ_text_left-sp {
    text-align: left;
  }

  .employ_inline-sp {
    display: inline-block;
  }

  /* 下線 */
  .employ_border-a,
  .employ_border-b {
    padding: 0;
    width: calc(100% - 2.8rem);
  }

  .employ_card {
    padding: 0 !important;
    margin: 1rem 1.4rem !important;
    background: none;

    h3 {
      border: none;
    }
  }

  .employ_card_content {
    height: 0;
    opacity: 0;
    padding: 0 1rem;
  }

  /*開閉時*/
  .employ_card_toggle:checked + .employ_card_label {
    top: 1.5rem;
  }

  .employ_card_toggle:checked + .employ_card_label + .employ_card_content {
    padding: 3rem 1rem 1rem;
  }

  /*「固定型〜違い」タイトル */
  .employ_card_label {
    border-radius: 0.4rem;
    font-size: 1.4rem;
    padding: 0.6em 0;
    pointer-events: all;
    width: 100%;
  }

  /* 「固定型〜違い」タイトル横の矢印 */
  .employ_card_label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 3px);
    right: 20px;
    transform: rotate(135deg);
  }

  .employ_card_middle {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin: 1.5rem 0 !important;

    h4 {
      margin: 0 !important;
      width: 20%;
    }
    p {
      padding-top: 0;
      margin: 0 !important;
      text-align: left;
      width: 65%;
    }
  }
}