@charset "UTF-8";

/* =====================
  H2-Title_top
===================== */
.h2-title_top {
  display: grid;
  gap: 9px;
  height: fit-content;
  & p[lang='en'] {
    font-family: var(--mont);
    font-size: 64px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 1.28px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  & h2 {
    position: relative;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 1.2px;
    color: #5c5c63;
  }
}

/* =====================
  MV
===================== */
/* ==== 背景スライダー ==== */
.mv-content {
  overflow: hidden;
  .mv-slider {
    position: absolute;
    width: 100%;
    height: inherit;
    min-height: 648px;
    top: 120px;
    left: 40px;
    border-radius: 30px;
    .mv-swiper-container {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      min-height: 648px;
      .swiper-slide {
        background-repeat: no-repeat;
        background-position: center;
        object-fit: cover;
        width: calc(957 / 1300 * 100%);
        min-height: 648px;
        border-radius: 30px;
        background-size: cover;
        overflow: hidden;
        position: relative;
      }
    }
  }
}
.mv-content .mv-slider img {
  animation-name: slide;
  animation-duration: 15s;
  animation-delay: 0ms;
  animation-timing-function: linear; /* ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier()/steps(1, jump-end) */
  animation-iteration-count: 1; /* {num}/infinite */
  animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
  animation-fill-mode: both; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
  animation-play-state: running; /* running/paused */
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2%);
  }
}
.mv {
  position: relative;
  min-height: 879px;
  &::before {
    content: '';
    display: block;
    width: 843px;
    height: 777px;
    background-image: url('../../img/top/mv_bg.png');
    background-size: contain;
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  &::after {
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../../img/top/circle.png');
    width: 124px;
    height: 124px;
    position: absolute;
    top: 178px;
    right: 205px;
    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;
  }
  .content {
    position: relative;
    z-index: 3;
    width: 1300px;
    margin-inline: auto;
    padding-inline: 40px;
    padding-top: 250px;
    margin-top: 120px;
    .ja-catch {
      position: relative;
      font-size: 40px;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 3.2px;
      text-align: center;
      color: #fff;
    }
  }
}
@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;
  align-items: center;
  gap: 36px;
  right: 288px;
  top: 104px;
  z-index: 1;
  pointer-events: none;
  span {
    display: block;
    font-size: 18px;
    line-height: 1;
    font-family: var(--mont);
    font-weight: 600;
    color: #a7a7af;
    margin-inline: auto;
  }
}
.slide-counter span.current {
  font-size: 38px;
  font-weight: 500;
  color: #feba02;
  margin-bottom: 42px;
}
.slide-counter span.separator {
  width: 1px;
  height: 50px;
  background: currentColor;
}
.slide-counter span:is(.current, .all)::before {
  content: '0';
}
/* =====================
  BNR
===================== */
.bnr_wrap {
  display: grid;
  gap: 16px;
  position: absolute;
  bottom: 0;
  right: 40px;
  z-index: 8;
  .bnr_unit {
    position: relative;
    width: 420px;
    height: 107px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(3, 21, 47, 0.14);
    & > a {
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      width: 100%;
      height: 100%;
      &::before {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../img/top/bnr_arrow.png');
        width: 44px;
        height: 45px;
      }
    }
    &[data-id='1'] {
      & > a {
        &::after {
          content: '';
          display: block;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../../img/top/nmr_rec.png');
          width: 116px;
          height: 168px;
          position: absolute;
          right: 8px;
          bottom: 0;
        }
        .bnr_content {
          & > p {
            font-size: 13px;
            font-weight: 600;
            line-height: 1.6;
            color: #074d94;
            margin-top: 8px;
          }
        }
      }
    }
    &[data-id='2'] {
      & > a {
        .bnr_content {
          position: relative;
          padding-bottom: 11px;
          & > p {
            font-size: 13px;
            font-weight: 600;
            line-height: 1.6;
            color: #0099d9;
            margin-top: 8px;
          }
          &::after {
            content: '';
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../../img/top/bnr_sdgs_line.png');
            width: 274px;
            height: 3px;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
}

/* =====================
  scroll
===================== */
.scroll_down {
  position: absolute;
  bottom: 80px;
  right: 50%;
  animation: arrowmove 1s ease-in-out infinite;
  z-index: 9;
  .text {
    display: block;
    margin-left: -17px;
    text-shadow: 0 0 8px rgba(3, 21, 47, 0.6);
    font-family: var(--mont);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .arrow {
    position: absolute;
    width: 12px;
    height: 4px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
  }
  .arrow:before,
  .arrow:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
  }
  .arrow:before {
    left: 0;
    transform: skew(0deg, 30deg);
  }
  .arrow:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
  }
}
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(10px);
  }
  67% {
    opacity: 1;
    transform: translateY(15px);
  }
  100% {
    opacity: 0;
    transform: translateY(25px) scale3d(0.5, 0.5, 0.5);
  }
}
/* =====================
  会社案内
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: 113px;
  padding-bottom: 188px;
  background-color: #eaf2fa;
  &::before {
    background-color: #eaf2fa;
  }
  .deco {
    position: relative;
    &::before,
    &::after {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/top/company_bg.png');
      width: 416px;
      height: 552px;
      position: absolute;
      pointer-events: none;
    }
    &::before {
      top: -20px;
      left: 0;
    }
    &::after {
      top: -20px;
      right: 0;
      scale: -1 1;
    }
  }
  .inner {
    position: relative;
  }
  .company_wrap {
    position: relative;
    z-index: 3;
    & h2 {
      position: relative;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 0.96px;
      text-align: center;
      color: #074d94;
      &::before {
        content: attr(data-text);
        display: block;
        font-family: var(--mont);
        line-height: 1.1;
        font-size: 80px;
        font-weight: 500;
        text-align: center;
        color: #d9e6f2;
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
      }
    }
    & p {
      font-weight: 600;
      line-height: 2.3;
      letter-spacing: 0.48px;
      text-align: center;
      margin-top: 32px;
    }
    .hover-link-btn {
      margin-top: 56px;
      margin-inline: auto;
    }
  }
  .service_wrap {
    margin-top: 132px;
    .h2-title_top {
      padding-bottom: 46px;
      border-bottom: 1px solid #1b1b1e;
    }
    & ul {
      & li {
        margin-inline: 40px;
        padding-block: 61px;
        display: flex;
        align-items: center;
        gap: 80px;
        border-bottom: 1px solid #7a8399;
        .service_unit {
          & hgroup {
            & p {
              font-family: var(--mont);
              font-size: 40px;
              font-weight: 500;
              line-height: 1.2;
              letter-spacing: 0.8px;
              margin-top: 0;
              text-transform: uppercase;
            }
            & h3 {
              font-size: 16px;
              font-weight: 600;
              line-height: 2;
              letter-spacing: 0.48px;
              margin-top: 8px;
            }
          }
          & p {
            margin-top: 32px;
            line-height: 2;
          }
          .hover-link-btn {
            margin-top: 56px;
          }
        }
        & > picture {
          display: block;
          flex-shrink: 0;
          & img {
            border-radius: 16px;
          }
        }
        &:last-child {
          border-bottom: 1px solid #7a8399;
        }
      }
    }
  }
  .hover-link-btn::before {
    background-color: #eaf2fa;
    pointer-events: none;
  }
}

/* =====================
  採用情報
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: 72px;
  padding-bottom: 140px;
  counter-reset: number 0;
  &::before {
    background-color: #fff;
  }
  &::after {
    background-color: #fff;
  }
  .deco {
    position: relative;
    &::before {
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../img/top/recruit_bg.png');
      width: 442px;
      height: 405px;
      position: absolute;
      pointer-events: none;
      top: -119px;
      right: 0;
    }
  }
  .recruit_wrap {
    margin-top: 47px;
    border-top: 1px solid #1b1b1e;
    padding-top: 80px;
    padding-inline: 40px;
    display: flex;
    align-items: center;
    gap: 80px;
    & h3 {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 0.96px;
    }
    & p {
      line-height: 2;
      margin-top: 24px;
    }
    .hover-link-btn {
      margin-top: 56px;
    }
    & picture {
      display: block;
      flex-shrink: 0;
      & img {
        border-radius: 24px;
      }
    }
  }
  .sdgs-bnr_block {
    margin-top: 135px;
  }
}

/* =====================
  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);
}