:root {
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --extrabold: 800;
}

.header_area{
  background-image: url("../img/front_fv_img.jpg");
}


/*===========
  全体
=========== */

.page_recruit {
  width: 100%;
}

.page_title {
  font-family: var(--NotoSans);
  color: #2F4086;
  font-weight: var(--bold);
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  width: fit-content;
  margin: 7rem auto 0;
}

.wrapper {
  margin-top: 10rem;
}

/*===========
  .tab_list
=========== */
.tab_list {
  display: flex;
  width: 100%;
}

.tab_content {
  width: 25%;
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--medium);
  color: #76A4CE;
  text-align: center;
  padding: 1.5rem 0;
  cursor: pointer;
}

/* タブ切り替えによって活性化 */
.active {
  background-color: #76A4CE;
  font-weight: var(--bold);
  color: #FFFFFF;
}

.tab_header {
  border: 0.2rem solid #76A4CE;
  border-right: none;
  border-bottom: none;
  border-radius: 1rem 1rem 0 0;
}

.tab_footer {
  border: 0.2rem solid #76A4CE;
  border-right: none;
  border-top: none;
  border-radius: 0 0 1rem 1rem;
}

.tab_header:last-of-type,
.tab_footer:last-of-type {
  border-right: 0.2rem solid #76A4CE;
}

/*===================
  .recruit_content
=================== */
.recruit_content {
  display: none;
  width: 100%;
  border: 0.2rem solid #76A4CE;
  border-left: 0.1rem solid #707070;
  border-right: 0.1rem solid #707070;
  padding: 8.5rem 10rem 14.5rem;
}

.recruit_content>section:last-child {
  margin-bottom: 0;
}


/* タブ切り替えによって活性化 */
.active_panel {
  display: block;
}

/*===================
  .job_info_section
=================== */
.job_info_section {
  width: 100%;
  margin-bottom: 7.3rem;
}

.job_info {
  font-family: var(--NotoSans);
  color: #000000;
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
}

/*======================
  .product_info_section
====================== */
.product_info_section {
  width: 100%;
  margin-bottom: 7.3rem;
}

.section_title {
  width: fit-content;
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
  color: #76A4CE;
}

.product_info_section .section_title {
  margin-bottom: 2rem;
}

.product_info {
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: var(--regular);
  color: #000000;
  line-height: calc(33 / 15);
}

/*======================
  .work_flow_section
====================== */
.work_flow_section {
  width: 100%;
  margin-bottom: 11.7rem;
}

.work_flow_section .section_title {
  margin-bottom: 2.5rem;
}

.work_flow {
  width: 94.5rem;
  margin-left: 3.5rem;
  padding: 2rem 3.5rem 2rem 7rem;
  background-color: #EAEFFB;
  counter-increment: count;
  position: relative;
}

.work_flow::before {
  content: "0" counter(count);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
  background-color: #76A4CE;
  border-radius: 50%;
  color: #FFFFFF;
  position: absolute;
  top: 5.4rem;
  left: -3.5rem;
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.work_flow:not(:last-of-type) {
  margin-bottom: 3rem;
}

.work_flow_heading {
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
  color: #000000;
  margin-bottom: 1rem;
}

.work_flow_info {
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
  color: #000000;
}

/*============================
  .application_qualification
============================ */
.application_qualification {
  width: 83rem;
  border: 0.2rem solid #2F4086;
  padding: 3rem;
  margin: 0 auto 18.5rem;
}

.application_qualification .section_title {
  margin: 0 auto 5rem;
}

.list_wrapper {
  width: 77.69rem;
}

.application_qualification_info {
  width: 100%;
  margin-bottom: 4rem;
  font-family: var(--NotoSerif);
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
}

.star_list,
.circle_list {
  width: 100%;
  margin-bottom: 4rem;
  font-family: var(--NotoSerif);
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
}

.star_list li::marker {
  content: "★";
  font-size: 1.5rem;
}

.circle_list li::marker {
  content: "◎";
  font-size: 1.5rem;
}

/*========================
  .recruit_table_section
======================== */
.recruit_table_section {
  width: 98rem;
  margin: 0 auto 21.5rem;
}

.recruit_table {
  width: 100%;
  border-top: 0.1rem solid #707070;
  border-bottom: 0.1rem solid #707070;
}

.table_row {
  display: block;
  width: 100%;
  padding: 1.5rem 0;
}

.table_row:not(:last-of-type) {
  border-bottom: 0.1rem solid #707070;
}

.table_header {
  width: 20rem;
  padding: inherit 1.2rem;
  font-family: var(--NotoSans);
  font-size: 1.8rem;
  font-weight: var(--bold);
  line-height: calc(26 / 18);
  color: #76A4CE;
}

.table_data {
  padding: inherit 1.2rem;
  font-family: var(--NotoSans);
  font-size: 1.6rem;
  font-weight: var(--regular);
  line-height: calc(24 / 16);
  color: #000000;
}

/*=============================
  .flow_after_joining_section
============================= */
.flow_after_joining_section {
  width: 100%;
  margin: 0 auto;
}

.flow_after_joining_section .section_title {
  margin-bottom: 1.5rem;
}

.flow_after_joining_section_info {
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
  color: #000000;
  margin-bottom: 3.5rem;
}

.flow_after_joining {
  width: 94.5rem;
  margin-left: 3.5rem;
  padding: 2rem 3.5rem 2rem 7rem;
  background-color: #EAEFFB;
  counter-increment: count;
  position: relative;
}

.flow_after_joining::before {
  content: "0" counter(count);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
  background-color: #76A4CE;
  border-radius: 50%;
  color: #FFFFFF;
  position: absolute;
  top: 5.4rem;
  left: -3.5rem;
}

.flow_after_joining:not(:last-of-type) {
  margin-bottom: 3rem;
}

.flow_after_joining_heading {
  margin-bottom: 1rem;
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.04em;
  line-height: calc(29 / 20);
  color: #000000;
}

.flow_after_joining_info {
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: var(--regular);
  line-height: calc(33 / 15);
  color: #000000;
}


/* 修正↓ */
.rec_recruit_addition{
  width: 70rem;
  margin: 3rem auto;
  font-size: 1.8rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(33 / 18);
}
/* 修正↑ */

@media screen and (max-width: 699.98px) {
  .page_recruit {
    width: 100%;
  }

  .page_title {
    font-size: 2.7rem;
    letter-spacing: 0.04em;
    width: fit-content;
    margin: 7rem auto 0;
  }

  .wrapper {
    /* width: 100%;
    margin: 8.2rem auto 16rem; */
  }

  .tab_content{
    font-size: 1.6rem;
  }

  /*===================
    .recruit_content
  =================== */
  .recruit_content {
    padding: 6rem 1.2rem 8rem;
  }

  /*===================
    .job_info_section
  =================== */
  .job_info_section {
    margin-bottom: 5rem;
  }

  /*======================
    .product_info_section
  ====================== */
  .product_info_section {
    margin-bottom: 3.7rem;
  }

  /*======================
    .work_flow_section
  ====================== */
  .work_flow_section {
    margin-bottom: 8rem;
  }

  .work_flow_section .section_title {
    margin-bottom: 10.7rem;
  }

  .work_flow {
    width: 100%;
    margin-left: 0;
    padding: 1.5rem 1.3rem;
    counter-increment: count;
    position: relative;
  }

  .work_flow::before {
    top: -4.5rem;
    left: 14rem;
  }

  .work_flow:not(:last-of-type) {
    margin-bottom: 15rem;
  }

  /*============================
    .application_qualification
  ============================ */
  .application_qualification {
    width: 100%;
    padding: 3rem 1.3rem;
    margin: 0 auto 8rem;
  }

  .application_qualification .section_title {
    margin: 0 auto 3rem;
  }

  .list_wrapper {
    width: 100%;
  }

  .star_list,
  .circle_list {
    padding-left: 1.5rem;
  }

  .circle_list {
    margin-bottom: 0;
  }

  /*========================
    .recruit_table_section
  ======================== */
  .recruit_table_section {
    width: 100%;
    margin: 0 auto 6.2rem;
  }

  .table_header {
    width: 12.5rem;
    padding: inherit 1.3rem;
    font-size: 1.6rem;
    line-height: calc(24 / 16);
  }

  .table_data {
    padding: inherit 1.3rem;
    font-size: 1.5rem;
    line-height: calc(21 / 15);
  }

  /*=============================
    .flow_after_joining_section
  ============================= */
  .flow_after_joining_section_info {
    margin-bottom: 11rem;
  }

  .flow_after_joining {
    width: 100%;
    margin-left: 0;
    padding: 1.5rem 1.3rem;
  }

  .flow_after_joining::before {
    top: -8.5rem;
    left: 14rem;
  }

  .flow_after_joining:not(:last-of-type) {
    margin-bottom: 15rem;
  }

  .flow_after_joining_heading {
    margin-bottom: 1.5rem;
  }

  /* 修正↓ */
  .rec_recruit_addition{
    width: 32rem;
    font-size: 1.7rem;
  }
  /* 修正↑ */
}