@charset "utf-8";

.page-wrapper {
  padding: 47px 0 0;
  overflow-x: clip;
}

/* ==============================
   Intro
================================ */
.intro {
  padding: 63px 0 86px;
  background: url(/system_panel/uploads/images/20250917204012159539.jpg) no-repeat center/cover;
  margin-bottom: 80px;
}

.intro .text .catch {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 24px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  margin-bottom: 27px;
}

.intro .text .desc {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  color: #fff;
}

/* ==============================
   Section Heading
================================ */
.sec-heading {
  margin-bottom: 40px;
}

.recruit_recommend,
.recruit_flow {
  margin-bottom: 120px;
}

/* ==============================
   Recruit Recommend
================================ */
.recruit_recommend .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px;
}

.recruit_recommend .list .item {
  position: relative;
}

.recruit_recommend .list .item::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  max-width: 291px;
  width: 84%;
  height: 1px;
  background-color: #000;
}

.recruit_recommend .list .num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 24px;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}

.recruit_recommend .list img {
  margin-bottom: 19px;
}

.recruit_recommend .list .item-ttl {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: #000;
  margin-bottom: 18px;
}

.recruit_recommend .list .desc {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  color: #000;
}

/* ==============================
   Recruit Flow
================================ */
.recruit_flow .flex {
  gap: 54px;
}

.recruit_flow .f-detail {
  flex: 1;
  padding-left: 35px;
}

.recruit_flow .f-detail .item {
  display: grid;
  grid-template-columns: 10% 15% 1fr;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #000;
  position: relative;
}

.recruit_flow .f-detail .item::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 4px;
  width: 18px;
  height: 18px;
  background-color: #000;
  transform: rotate(45deg);
}

.recruit_flow .f-detail .item::after {
  content: "";
  position: absolute;
  left: -26px;
  top: 18px;
  width: 1px;
  height: calc(100% + 24px);
  background-color: #000;
}

.recruit_flow .f-detail .item:last-child::after {
  content: none;
}

.recruit_flow .f-detail .item .time {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  color: #000;
}

.recruit_flow .f-detail .item .ttl {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  color: #000;
  margin-top: 4px;
}

.recruit_flow .f-detail .item .desc {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #000;
  margin-top: 4px;
}

.recruit_flow .img {
  max-width: 334px;
  width: 100%;
}

.recruit_flow .img img {
  width: 100%;
  height: auto;
}

/* ==============================
   Recruitment Requirements
================================ */
.recruitment_requirements {
  background: #f4f4f4;
}

.recruitment_requirements .w1152 {
  padding: 40px 0 120px;
}

.recruitment_requirements .box {
  background-color: #fff;
  padding: 40px 0;
}

.recruitment_requirements .box .main {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 24px;
  text-align: center;
  color: #000;
  position: relative;
  margin-bottom: 40px;
}

.recruitment_requirements .box .main::before,
.recruitment_requirements .box .main::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #000;
  transform: rotate(45deg);
}

.recruitment_requirements .box .main::before {
  margin-right: 1em;
}

.recruitment_requirements .box .main::after {
  margin-left: 1em;
}

.recruitment_requirements .box .info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 958px;
  width: 100%;
  margin: 0 auto 40px;
}

.recruitment_requirements .box .info .item {
  display: grid;
  grid-template-columns: 15% 1fr;
  padding: 0 0 20px 45px;
  border-bottom: 1px solid #000;
}

.recruitment_requirements .box .info .item p {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  color: #000;
}

.recruitment_requirements .box .btn p {
  font-size: 20px;
}

/* ==============================
   Media Queries
================================ */
@media screen and (max-width: 1024px) {
  .recruitment_requirements .box .info {
    width: 90%;
  }

  .recruit_recommend .list {
    gap: 30px;
  }

  .recruit_flow .f-detail .item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
  }

  .recruit_flow .f-detail .item .ttl,
  .recruit_flow .f-detail .item .desc {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .page-wrapper {
    padding: 40rem 0 0;
  }

  .intro {
    padding: 40rem 0;
    width: 100%;
    margin-bottom: 40rem;
    max-width: 100%;
  }

  .intro .text .catch {
    font-size: 20rem;
    line-height: 29rem;
    margin-bottom: 20rem;
  }

  .intro .text .desc {
    font-size: 14rem;
    line-height: 20rem;
    max-width: 350rem;
    width: 100%;
    margin: auto;
  }

  .recruit_recommend,
  .recruit_flow {
    margin-bottom: 80rem;
  }

  .recruit_recommend .list {
    display: flex;
    flex-direction: column;
    gap: 32rem;
  }

  .recruit_recommend .list .num {
    font-size: 21rem;
    margin-bottom: 12rem;
  }

  .recruit_recommend .list .item-ttl {
    font-size: 16rem;
    line-height: 23rem;
  }

  .recruit_recommend .list .desc {
    font-size: 14rem;
    line-height: 20rem;
  }

  .recruit_recommend .list .item::after {
    width: 90%;
    max-width: 291rem;
    top: 18rem;
  }

  .recruit_flow .flex {
    flex-direction: column-reverse;
    gap: 40rem;
    width: 100%;
    margin: auto;
  }

  .recruit_flow .flex .img {
    height: 185rem;
    max-width: 100%;
  }

  .recruit_flow .flex .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .recruit_flow .f-detail .item {
    gap: 10rem 22rem;
  }

  .recruit_flow .f-detail .item::before {
    left: -35rem;
    top: 4rem;
    width: 18rem;
    height: 18rem;
  }

  .recruit_flow .f-detail .item::after {
    left: -26rem;
    top: 18rem;
    width: 1rem;
    height: calc(100% + 20rem);
  }

  .recruit_flow .f-detail .item .time {
    font-size: 18rem;
    line-height: 26rem;
  }

  .recruit_flow .f-detail .item .ttl {
    font-size: 16rem;
  }

  .recruit_flow .f-detail .item .desc {
    font-size: 14rem;
    line-height: 20rem;
  }

  .sec-heading h3 {
    font-size: 16rem;
  }

  .sec-heading img {
    width: 23rem;
    height: auto;
  }

  .recruitment_requirements .w1152 {
    padding-bottom: 80rem;
    max-width: 350rem;
  }

  .recruitment_requirements .box {
    width: 100%;
    margin: auto;
    padding: 32rem 0 40rem;
  }

  .recruitment_requirements .box .main {
    font-size: 16rem;
    margin-bottom: 32rem;
  }

  .recruitment_requirements .box .main::before,
  .recruitment_requirements .box .main::after {
    width: 12rem;
    height: 12rem;
  }

  .recruitment_requirements .box .info {
    max-width: 312rem;
    width: 90%;
    margin: auto auto 32rem;
  }

  .recruitment_requirements .box .info .item {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-left: 0;
    gap: 16rem;
  }

  .recruitment_requirements .box .info .item p {
    font-size: 14rem;
  }

  .recruitment_requirements .box .btn {
    max-width: 295rem;
    margin: auto;
    margin-left: 19rem;
  }

  .recruitment_requirements .box .btn p {
    font-size: 14rem;
  }
}