@charset "UTF-8";

/* ----------------------------------
  works - introduce - index
 * ------------------------------- */
#er-introduceIndex {
  position: relative;
  padding-block: 0 225px;
  overflow: hidden;
}

@media screen and (width <= 767px) {
  #er-introduceIndex {
    padding-block: 30px 60px;
  }
}

#er-introduceIndex::before {
  position: absolute;
  bottom: -110px;
  left: 50%;
  display: block;
  width: max(1440px, 100%);
  height: 280px;
  pointer-events: none;
  content: '';
  background: url('/recruitment/assets/images/common/page_bg3-pc.png') no-repeat center bottom / 100% auto;
  translate: -50% 0;
}

@media screen and (width <= 767px) {
  #er-introduceIndex::before {
    content: none;
  }
}

@media (hover) {
  #er-introduceIndex a.er-hov {
    transition: opacity 0.3s;
  }

  #er-introduceIndex a.er-hov[href]:hover {
    opacity: 0.7;
  }
}

/*
 * Parts
 * ------------------------------- */
#er-introduceIndex .er-introduceIndex-inner {
  width: min(100%, 1060px);
  padding-inline: 30px;
  margin-inline: auto;
}

#er-introduceIndex .er-introduceIndex-linkPanel_wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 0 3%;
}

#er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li {
  position: relative;
  width: 22.75%;
}

@media screen and (width > 767px) {
  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li:nth-child(4n + 3) {
    margin-top: calc(70 / 1000 * 100%);
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li:nth-child(4n + 2) {
    margin-top: calc(140 / 1000 * 100%);
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li:nth-child(4n + 1) {
    margin-top: calc(210 / 1000 * 100%);
  }
}

@media screen and (width <= 767px) {
  #er-introduceIndex .er-introduceIndex-inner {
    width: 80%;
    padding-inline: 0;
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper {
    gap: 0 6%;
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li {
    width: 47%;
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_wrapper > li:nth-child(odd) {
    margin-top: calc(45 / 300 * 100%);
  }
}

#er-introduceIndex .er-introduceIndex-linkPanel {
  display: block;
  color: #000;
}

#er-introduceIndex .er-introduceIndex-linkPanel_box {
  padding-block: min(2vw, 20px) 0;
}

#er-introduceIndex .er-introduceIndex-linkPanel_text-1 {
  font-size: min(2.8vw, 28px);
  font-weight: 700;
  line-height: 1.5;
}

#er-introduceIndex .er-introduceIndex-linkPanel_text-1 > span {
  display: block;
  padding-block: 0.2em 0;
  font-size: 60%;
  font-weight: normal;
}

#er-introduceIndex .er-introduceIndex-linkPanel_text-2 {
  margin-block: 0.8em 0;
  font-size: 16px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.8;
}

@media screen and (width <= 767px) {
  #er-introduceIndex .er-introduceIndex-linkPanel_box {
    padding: calc(10 / 375 * 100vw) 0;
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_text-1 {
    font-size: calc(18 / 375 * 100vw);
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_text-1 > span {
    font-size: 75%;
  }

  #er-introduceIndex .er-introduceIndex-linkPanel_text-2 {
    margin-block: 0.5em 0;
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.5;
  }
}