@charset "UTF-8";
/* =====================
  MV
===================== */
.mv {
  position: relative;
  min-height: 722px;
  margin-top: 120px;
  &::before {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    background-image: url('../../img/recruit/mv_bg.png');
    width: 100%;
    height: 737px;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
  .content {
    position: relative;
    width: 1300px;
    margin-inline: auto;
    padding-inline: 80px;
    margin-top: 128px;
    .swiper {
      .swiper-wrapper {
        .swiper-slide {
          .h1-catch {
            margin-top: 36px;
            & > h1 {
              font-size: 26px;
              font-weight: bold;
              line-height: 1;
              display: flex;
              align-items: center;
              gap: 16px;
              & > span {
                display: block;
                font-family: var(--lexend);
                font-size: 26px;
                font-weight: 500;
                line-height: 1;
                color: #24845b;
              }
            }
            & > span {
              display: block;
              font-family: var(--lexend);
              font-weight: 500;
              line-height: 1;
              color: rgba(27, 27, 30, 0.34);
              margin-top: 18px;
            }
          }
        }
      }
    }
    &::before {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/recruit/mv_moji.png');
      width: 144px;
      height: 477px;
      position: absolute;
      top: 5px;
      right: 54px;
      pointer-events: none;
    }
    &::after {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/recruit/circle_text.png');
      width: 140px;
      height: 140px;
      position: absolute;
      bottom: -3px;
      left: 787px;
      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: -64px;
      right: 40px;
      & > button {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../img/recruit/scroll_btn.png');
        width: 64px;
        height: 64px;
        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: column;
  align-items: center;
  gap: 36px;
  right: 154px;
  bottom: 49px;
  z-index: 1;
  pointer-events: none;
  span {
    display: block;
    font-size: 18px;
    line-height: 1;
    font-family: var(--lexend);
    font-weight: 600;
    color: #bebecb;
    margin-inline: auto;
  }
}
.slide-counter span.current {
  font-size: 38px;
  font-weight: 500;
  color: #2fa371;
  margin-right: 42px;
}
.slide-counter span.separator {
  width: 50px;
  height: 1px;
  background: currentColor;
}
.slide-counter span:is(.current, .all)::before {
  content: '0';
}

/* =====================
  アクシス・クリエイトのビジョン
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: 87px;
  padding-bottom: 120px;
  background-color: #ededed;
  .inner {
    .vision-about {
      position: relative;
      display: flex;
      gap: 160px;
      margin-top: 60px;
      & > h3 {
        font-size: 40px;
        font-weight: 500;
        flex-shrink: 0;
      }
      & > p {
        line-height: 2;
        margin-top: 10px;
      }
    }
    .vision_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 71px;
      & > ol {
        counter-reset: number 0;
        width: 522px;
        & > li {
          border-top: 1px solid #9e9e9e;
          & > a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            padding-inline: 24px;
            padding-block: 30px 31px;
            & > hgroup {
              padding-left: 2.6em;
              & > p {
                position: relative;
                font-family: var(--lexend);
                font-size: 18px;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.72px;
                color: #9e9e9e;
                &::before {
                  counter-increment: number 1;
                  content: '0' counter(number);
                  font-family: var(--lexend);
                  font-size: 18px;
                  font-weight: 500;
                  letter-spacing: 0.72px;
                  color: #24845b;
                  position: absolute;
                  top: 50%;
                  left: -2.3em;
                  transform: translateY(-50%);
                }
              }
              & > h3 {
                font-weight: 500;
                line-height: 1;
                margin-top: 8px;
              }
            }
            &::before {
              content: '';
              display: block;
              width: 40px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              top: 50%;
              right: 24px;
              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: 13px;
              aspect-ratio: 1/1;
              position: absolute;
              top: 50%;
              right: 38px;
              transform: translateY(-50%);
            }
          }
          &:last-child {
            border-bottom: 1px solid #9e9e9e;
          }
        }
      }
    }
  }
}

/* =====================
  仕事を知る
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: 90px;
  padding-bottom: 120px;
  .inner {
    .title-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    & > ul {
      counter-reset: number 0;
      display: grid;
      grid-template-columns: repeat(4, 267px);
      gap: 24px;
      margin-top: 53px;
      & > li {
        min-height: 262px;
        border-radius: 20px;
        border: solid 2px #24845b;
        & > a {
          position: relative;
          display: grid;
          grid-template-rows: max-content max-content;
          gap: 31px;
          width: 100%;
          height: 100%;
          padding-block: 30px 20px;
          padding-inline: 20px;
          & > picture {
            display: block;
            text-align: center;
          }
          & > h4 {
            position: relative;
            font-size: 15px;
            font-weight: 500;
            line-height: 1;
            color: #1b1b1e;
            &::before {
              content: '';
              display: block;
              width: 32px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              top: 50%;
              right: 0;
              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: 11px;
              aspect-ratio: 1/1;
              position: absolute;
              top: 50%;
              right: 11px;
              transform: translateY(-50%);
            }
          }
          &::before {
            counter-increment: number 1;
            content: '0' counter(number);
            font-family: var(--lexend);
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.72px;
            color: #24845b;
            position: absolute;
            top: 11px;
            left: 18px;
          }
        }
      }
    }
  }
}

/* =====================
  働く環境を知る
===================== */
.article[data-id='3'] {
  position: relative;
  padding-top: 86px;
  padding-bottom: 129px;
  background-image: linear-gradient(127deg, #24845b 5%, #2fa371 94%);

  .inner {
    & > ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 41px;

      & > li {
        background-color: #fff;
        border-radius: 20px;
        & > a {
          display: block;
          width: 100%;
          height: 100%;
          & > picture {
            display: block;
            text-align: center;
          }
          .environment_unit {
            position: relative;
            background-color: #fff;
            border-radius: 0 0 20px 20px;
            padding-inline: 32px;
            padding-block: 24px 93px;
            & > hgroup {
              & > p {
                font-family: var(--lexend);
                font-size: 18px;
                font-weight: 500;
                line-height: 1.8;
                letter-spacing: 0.72px;
                color: #9e9e9e;
              }
              & > h4 {
                font-weight: 500;
                line-height: 1;
                color: #1b1b1e;
              }
            }
            & > p {
              font-size: 15px;
              line-height: 2;
              margin-top: 16px;
            }
            &::before {
              content: '';
              display: block;
              width: 40px;
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              bottom: 32px;
              left: 32px;
            }
            &::after {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--arrow);
              background-color: #2fa371;
              width: 13px;
              aspect-ratio: 1/1;
              position: absolute;
              bottom: 45px;
              left: 45px;
            }
          }
        }
      }
    }
  }
}
/* =====================
  社員を知る
===================== */
.article[data-id='4'] {
  position: relative;
  padding-top: 90px;
  padding-bottom: 120px;
  overflow: hidden;
  .inner {
    .title-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 36px;
      border-bottom: solid 1px #9e9e9e;
    }
    .recruit-hgroup {
      margin-top: 40px;
    }
  }
  .swiper {
    margin-top: 48px;

    .interview-list {
      .swiper-slide {
        & > a {
          width: 100%;
          display: block grid;
          grid-template-rows: 360px auto 1fr;

          .comment {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            display: block grid;
            align-items: flex-end;
            grid-template-rows: 1fr auto;
            padding-block-end: 31px;
            gap: 12px;

            & > span {
              inline-size: fit-content;
              display: inline-block;
              font-weight: 500;
              line-height: 1;
              color: #fff;
              padding: 12px 14px;
              border-radius: 6px;
              background-color: #2fa371;
            }
          }

          .ini_wrap {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding-bottom: 9px;
            border-bottom: solid 1px #9e9e9e;
            margin-top: 16px;
            .ini {
              font-family: var(--lexend);
              font-size: 48px;
              font-weight: 500;
              line-height: 1;
              color: #24845b;
            }
            .haizoku {
              font-size: 15px;
              color: #9e9e9e;
            }
          }

          .occ {
            font-size: 15px;
            line-height: 1;
            margin-top: 14px;
          }
        }

        &[data-id='1'] {
          .comment {
            background-image: url('../../img/recruit/people/01.png');
          }
        }
        &[data-id='2'] {
          .comment {
            background-image: url('../../img/recruit/people/02.png');
          }
        }
        &[data-id='3'] {
          .comment {
            background-image: url('../../img/recruit/people/03.png');
          }
        }
        &[data-id='4'] {
          .comment {
            background-image: url('../../img/recruit/people/04.png');
          }
        }
        &[data-id='5'] {
          .comment {
            background-image: url('../../img/recruit/people/05.png');
          }
        }
        &[data-id='6'] {
          .comment {
            background-image: url('../../img/recruit/people/06.png');
          }
        }
        &[data-id='7'] {
          .comment {
            background-image: url('../../img/recruit/people/07.png');
          }
        }
        &[data-id='8'] {
          .comment {
            background-image: url('../../img/recruit/people/08.png');
          }
        }
        &[data-id='9'] {
          .comment {
            background-image: url('../../img/recruit/people/09.png');
          }
        }
      }
    }
    .controll-inner {
      padding-inline: 0;
    }
  }
  .controll-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 46px;
    gap: 26px;
    .swiper-button-prev,
    .swiper-button-next {
      width: 64px;
      height: 64px;
      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: 21px;
        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);
      }
    }
  }
}

/* =====================
  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'] ul li:nth-child(1).js-parallax {
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
}
.article[data-id='3'] ul li:nth-child(2).js-parallax {
  transition: all 0.5s ease-in-out 0.3s;
  transform: translateY(0.5em);
}
.article[data-id='3'] ul li:nth-child(3).js-parallax {
  transition: all 0.5s ease-in-out 0.6s;
  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);
}