@charset "UTF-8";
/* =====================
  MV
===================== */
.mv {
  position: relative;
  min-height: calc((100 / 750) * 1160 * 1vw);
  margin-top: calc((100 / 750) * 120 * 1vw);
  overflow: hidden;
  &::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: 100% calc((100 / 750) * 582 * 1vw);
    background-position: bottom right;
    background-image: url('../../img/recruit/mv_bg_2x.png');
    width: 100%;
    min-height: calc((100 / 750) * 582 * 1vw);
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
  .content {
    margin-inline: auto;
    padding-inline: calc((100 / 750) * 35 * 1vw);
    margin-top: calc((100 / 750) * 34 * 1vw);
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .h1-catch {
            margin-top: calc((100 / 750) * 29 * 1vw);
            padding-left: calc((100 / 750) * 40 * 1vw);
            & > h1 {
              font-size: calc((100 / 750) * 39 * 1vw);
              font-weight: bold;
              line-height: 1.5;
              & > span {
                display: block;
                font-family: var(--lexend);
                font-size: calc((100 / 750) * 39 * 1vw);
                font-weight: 500;
                line-height: 1;
                color: #24845b;
                margin-bottom: calc((100 / 750) * 12 * 1vw);
              }
            }
            & > span {
              display: block;
              font-family: var(--lexend);
              font-weight: 500;
              line-height: 1.3;
              color: rgba(27, 27, 30, 0.34);
              margin-top: calc((100 / 750) * 18 * 1vw);
            }
          }
        }
      }
    }
    &::before {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/recruit/mv_moji_2x.png');
      width: calc((100 / 750) * 429 * 1vw);
      height: calc((100 / 750) * 125 * 1vw);
      position: absolute;
      bottom: calc((100 / 750) * 24 * 1vw);
      left: calc((100 / 750) * 45 * 1vw);
      pointer-events: none;
    }
    &::after {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/recruit/circle_text_2x.png');
      width: calc((100 / 750) * 140 * 1vw);
      height: calc((100 / 750) * 140 * 1vw);
      position: absolute;
      bottom: calc((100 / 750) * 246 * 1vw);
      right: calc((100 / 750) * 20 * 1vw);
      pointer-events: none;
      z-index: 15;
      animation-name: rotate;
      animation-duration: 60s;
      animation-delay: 0ms;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      rotate: 0 0 1 0deg;
    }
    .scroll {
      position: absolute;
      bottom: calc((100 / 750) * 9 * 1vw);
      right: calc((100 / 750) * 40 * 1vw);
      & > button {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../img/recruit/scroll_btn_2x.png');
        width: calc((100 / 750) * 74 * 1vw);
        height: calc((100 / 750) * 74 * 1vw);
        cursor: pointer;
      }
    }
  }
}
@keyframes rotate {
  0% {
    rotate: 0 0 1 0deg;
  }

  100% {
    rotate: 0 0 1 360deg;
  }
}
/* =====================
  slide-counter
===================== */
.slide-counter {
  position: absolute;
  display: grid;
  grid-auto-flow: row;
  gap: calc((100 / 750) * 20 * 1vw);
  right: calc((100 / 750) * 33 * 1vw);
  bottom: calc((100 / 750) * 50 * 1vw);
  z-index: 1;
  pointer-events: none;
  span {
    display: block;
    font-size: calc((100 / 750) * 24 * 1vw);
    line-height: 1;
    font-family: var(--lexend);
    font-weight: 600;
    color: #bebecb;
    margin-inline: auto;
  }
}
.slide-counter span.current {
  font-size: calc((100 / 750) * 38 * 1vw);
  font-weight: 500;
  color: #2fa371;
  margin-bottom: calc((100 / 750) * 53 * 1vw);
}
.slide-counter span.separator {
  width: 1px;
  height: calc((100 / 750) * 40 * 1vw);
  background: currentColor;
}
.slide-counter span:is(.current, .all)::before {
  content: '0';
}

/* =====================
  アクシス・クリエイトのビジョン
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  background-color: #ededed;
  .inner {
    .vision-about {
      position: relative;
      margin-top: calc((100 / 750) * 73 * 1vw);
      & > h3 {
        font-size: calc((100 / 750) * 52 * 1vw);
        font-weight: 500;
        flex-shrink: 0;
      }
      & > p {
        line-height: 2;
        margin-top: calc((100 / 750) * 39 * 1vw);
      }
    }
    .vision_wrap {
      margin-top: calc((100 / 750) * 80 * 1vw);
      & > picture {
        & > img {
          width: 100%;
        }
      }
      & > ol {
        margin-top: calc((100 / 750) * 72 * 1vw);
        counter-reset: number 0;
        & > li {
          border-top: 1px solid #9e9e9e;
          & > a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            padding-inline: calc((100 / 750) * 24 * 1vw);
            padding-block: calc((100 / 750) * 36 * 1vw);
            & > hgroup {
              padding-left: 2.2em;
              & > p {
                position: relative;
                font-family: var(--lexend);
                font-size: calc((100 / 750) * 30 * 1vw);
                font-weight: 500;
                line-height: 1;
                letter-spacing: calc((100 / 750) * 1.2 * 1vw);
                color: #9e9e9e;
                &::before {
                  counter-increment: number 1;
                  content: '0' counter(number);
                  font-family: var(--lexend);
                  font-size: calc((100 / 750) * 30 * 1vw);
                  font-weight: 500;
                  letter-spacing: calc((100 / 750) * 1.2 * 1vw);
                  color: #24845b;
                  position: absolute;
                  top: 50%;
                  left: -2.1em;
                  transform: translateY(-50%);
                }
              }
              & > h3 {
                font-weight: 500;
                line-height: 1;
                margin-top: calc((100 / 750) * 14 * 1vw);
              }
            }
            &::before {
              content: '';
              display: block;
              width: calc((100 / 750) * 66 * 1vw);
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              top: 50%;
              right: calc((100 / 750) * 24 * 1vw);
              transform: translateY(-50%);
            }
            &::after {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--arrow);
              background-color: #2fa371;
              width: calc((100 / 750) * 20 * 1vw);
              aspect-ratio: 1/1;
              position: absolute;
              top: 50%;
              right: calc((100 / 750) * 48 * 1vw);
              transform: translateY(-50%);
            }
          }
          &:last-child {
            border-bottom: 1px solid #9e9e9e;
          }
        }
      }
    }
  }
}

/* =====================
  仕事を知る
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  .inner {
    .title-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .link-btn {
        margin-top: calc((100 / 750) * 22 * 1vw);
      }
    }
    & > ul {
      counter-reset: number 0;
      display: grid;
      gap: calc((100 / 750) * 40 * 1vw);
      margin-top: calc((100 / 750) * 76 * 1vw);
      & > li {
        border-radius: calc((100 / 750) * 30 * 1vw);
        border: solid calc((100 / 750) * 4 * 1vw) #24845b;
        & > a {
          position: relative;
          display: grid;
          grid-template-columns: max-content max-content;
          gap: calc((100 / 750) * 36 * 1vw);
          width: 100%;
          height: 100%;
          padding-block: calc((100 / 750) * 36 * 1vw);
          padding-inline: calc((100 / 750) * 36 * 1vw);
          & > picture {
            display: block;
            text-align: center;
            & > img {
              width: calc((100 / 750) * 247 * 1vw);
              height: calc((100 / 750) * 215 * 1vw);
              object-fit: contain;
            }
          }
          & > h4 {
            position: relative;
            font-size: calc((100 / 750) * 28 * 1vw);
            font-weight: 500;
            line-height: 1;
            color: #1b1b1e;
            margin-top: calc((100 / 750) * 40 * 1vw);
            &::before {
              content: '';
              display: block;
              width: calc((100 / 750) * 64 * 1vw);
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              bottom: calc((100 / 750) * 44 * 1vw);
              left: 0;
            }
            &::after {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--arrow);
              background-color: #2fa371;
              width: calc((100 / 750) * 28 * 1vw);
              aspect-ratio: 1/1;
              position: absolute;
              bottom: calc((100 / 750) * 64 * 1vw);
              left: calc((100 / 750) * 17 * 1vw);
            }
          }
          &::before {
            counter-increment: number 1;
            content: '0' counter(number);
            font-family: var(--lexend);
            font-size: calc((100 / 750) * 30 * 1vw);
            font-weight: 500;
            letter-spacing: calc((100 / 750) * 1.2 * 1vw);
            color: #24845b;
            position: absolute;
            top: calc((100 / 750) * 21 * 1vw);
            left: calc((100 / 750) * 36 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  働く環境を知る
===================== */
.article[data-id='3'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  background-image: linear-gradient(96deg, #24845b 7.18%, #2fa371 92.34%);
  .inner {
    .h2-title {
      justify-items: start;
      justify-content: start;
    }
    & > ul {
      display: grid;
      gap: calc((100 / 750) * 64 * 1vw);
      margin-top: calc((100 / 750) * 78 * 1vw);
      & > li {
        background-color: #fff;
        border-radius: calc((100 / 750) * 30 * 1vw);
        & > a {
          display: block;
          width: 100%;
          height: 100%;
          & > picture {
            display: block;
            text-align: center;
            & > img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .environment_unit {
            position: relative;
            background-color: #fff;
            border-radius: 0 0 calc((100 / 750) * 30 * 1vw) calc((100 / 750) * 30 * 1vw);
            padding-inline: calc((100 / 750) * 40 * 1vw);
            padding-block: calc((100 / 750) * 31 * 1vw) calc((100 / 750) * 48 * 1vw);
            & > hgroup {
              & > p {
                font-family: var(--lexend);
                font-size: calc((100 / 750) * 30 * 1vw);
                font-weight: 500;
                line-height: 1.8;
                letter-spacing: calc((100 / 750) * 1.2 * 1vw);
                color: #9e9e9e;
              }
              & > h4 {
                font-weight: 500;
                line-height: 1;
                color: #1b1b1e;
                margin-top: calc((100 / 750) * 3 * 1vw);
              }
            }
            & > p {
              font-size: calc((100 / 750) * 28 * 1vw);
              line-height: 2;
              margin-top: calc((100 / 750) * 27 * 1vw);
            }
            &::before {
              content: '';
              display: block;
              width: calc((100 / 750) * 66 * 1vw);
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              top: calc((100 / 750) * 48 * 1vw);
              right: calc((100 / 750) * 40 * 1vw);
            }
            &::after {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--arrow);
              background-color: #2fa371;
              width: calc((100 / 750) * 24 * 1vw);
              aspect-ratio: 1/1;
              position: absolute;
              top: calc((100 / 750) * 70 * 1vw);
              right: calc((100 / 750) * 61 * 1vw);
            }
          }
        }
      }
    }
  }
}
/* =====================
  社員を知る
===================== */
.article[data-id='4'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  overflow: hidden;
  .inner {
    .title-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: calc((100 / 750) * 60 * 1vw);
      border-bottom: solid 1px #9e9e9e;
      .link-btn {
        margin-top: calc((100 / 750) * 24 * 1vw);
      }
    }
    .recruit-hgroup {
      margin-top: calc((100 / 750) * 40 * 1vw);
    }
  }
  .swiper {
    margin-top: calc((100 / 750) * 56 * 1vw);
    /* margin-inline: calc((100 / 750) * 40 * 1vw); */

    .interview-list {
      .swiper-slide {
        width: calc((100 / 750) * 475 * 1vw);
        & > a {
          display: block;
          width: 100%;
          height: 100%;
          .comment {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            width: calc((100 / 750) * 475 * 1vw);
            height: calc((100 / 750) * 475 * 1vw);
            padding-top: calc((100 / 750) * 273 * 1vw);
            & > span {
              display: inline-block;
              font-size: calc((100 / 750) * 26 * 1vw);
              font-weight: 500;
              line-height: 1;
              color: #fff;
              padding: calc((100 / 750) * 21 * 1vw) calc((100 / 750) * 24 * 1vw);
              border-radius: calc((100 / 750) * 10 * 1vw);
              background-color: #2fa371;
              white-space: nowrap;
              & + span {
                margin-top: calc((100 / 750) * 19 * 1vw);
              }
            }
          }
          .ini_wrap {
            display: grid;
            grid-template-columns: max-content auto;
            align-items: flex-end;
            min-height: calc((100 / 750) * 92 * 1vw);
            gap: calc((100 / 750) * 24 * 1vw);
            padding-bottom: calc((100 / 750) * 24 * 1vw);
            border-bottom: solid 1px #9e9e9e;
            margin-top: calc((100 / 750) * 16 * 1vw);
            .ini {
              font-family: var(--lexend);
              font-size: calc((100 / 750) * 60 * 1vw);
              font-weight: 500;
              line-height: 1;
              color: #24845b;
            }
            .haizoku {
              line-height: 1.3;
              font-size: calc((100 / 750) * 26 * 1vw);
              color: #9e9e9e;
            }
          }
          .occ {
            font-size: calc((100 / 750) * 28 * 1vw);
            line-height: 1;
            margin-top: calc((100 / 750) * 14 * 1vw);
          }
        }
        &[data-id='1'] {
          .comment {
            background-image: url('../../img/recruit/people/01_2x.png');
          }
        }
        &[data-id='2'] {
          .comment {
            background-image: url('../../img/recruit/people/02_2x.png');
          }
        }
        &[data-id='3'] {
          .comment {
            background-image: url('../../img/recruit/people/03_2x.png');
          }
        }
        &[data-id='4'] {
          .comment {
            background-image: url('../../img/recruit/people/04_2x.png');
          }
        }
        &[data-id='5'] {
          .comment {
            background-image: url('../../img/recruit/people/05_2x.png');
          }
        }
        &[data-id='6'] {
          .comment {
            background-image: url('../../img/recruit/people/06_2x.png');
          }
        }
        &[data-id='7'] {
          .comment {
            background-image: url('../../img/recruit/people/07_2x.png');
          }
        }
        &[data-id='8'] {
          .comment {
            background-image: url('../../img/recruit/people/08_2x.png');
          }
        }
        &[data-id='9'] {
          .comment {
            background-image: url('../../img/recruit/people/09_2x.png');
          }
        }
      }
    }
  }
  .controll-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: calc((100 / 750) * 68 * 1vw);
    gap: calc((100 / 750) * 34 * 1vw);
    .swiper-button-prev,
    .swiper-button-next {
      width: calc((100 / 750) * 140 * 1vw);
      height: calc((100 / 750) * 140 * 1vw);
      display: block;
      border: 1px solid #9e9e9e;
      border-radius: calc(infinity * 1px);
      cursor: pointer;
      position: relative;
      left: unset;
      margin-top: 0;
      &::after {
        content: '';
        display: block;
        width: calc((100 / 750) * 42 * 1vw);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        mask-image: var(--arrow);
        background-color: #2fa371;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .swiper-button-prev {
      &::after {
        transform: translate(-50%, -50%) scale(-1, 1);
      }
    }
  }
  .controll-inner {
    padding-inline: 0;
  }
}
/* =====================
  animations
===================== */
.js-parallax {
  opacity: 0;
}
/* ==== アクシス・クリエイトのビジョン ==== */
.article[data-id='1'] .js-parallax {
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
}

.article[data-id='1'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}
/* ==== 仕事を知る ==== */
.article[data-id='2'] .js-parallax {
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='2'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}
/* ==== 働く環境を知る ==== */
.article[data-id='3'] .js-parallax {
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='3'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}

/* ==== 社員を知る ==== */
.article[data-id='4'] .js-parallax {
  opacity: 0;
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='4'] .js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}