@charset "UTF-8";

/* =====================
  H2-Title_top
===================== */
.h2-title_top {
  display: grid;
  gap: calc((100 / 750) * 9 * 1vw);
  height: fit-content;
  & p[lang='en'] {
    font-family: var(--mont);
    font-size: calc((100 / 750) * 80 * 1vw);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: calc((100 / 750) * 1.6 * 1vw);
    position: relative;
    display: flex;
    align-items: center;
    gap: calc((100 / 750) * 8 * 1vw);
  }
  & h2 {
    position: relative;
    font-size: calc((100 / 750) * 28 * 1vw);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: calc((100 / 750) * 1.68 * 1vw);
    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;
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: calc((100 / 750) * 592 * 1vw);
    background-image: url('../../img/top/mv_bg_2x.png');
    background-size: cover;
    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_2x.png');
    width: calc((100 / 750) * 140 * 1vw);
    height: calc((100 / 750) * 140 * 1vw);
    position: absolute;
    top: calc((100 / 750) * 200 * 1vw);
    right: calc((100 / 750) * 48 * 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;
  }
  .content {
    position: relative;
    z-index: 3;
    min-height: calc((100 / 750) * 1262 * 1vw);
    margin-inline: auto;
    padding-inline: calc((100 / 750) * 40 * 1vw);
    padding-top: calc((100 / 750) * 250 * 1vw);
    margin-top: calc((100 / 750) * 120 * 1vw);
    .ja-catch {
      position: relative;
      font-size: calc((100 / 750) * 44 * 1vw);
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: calc((100 / 750) * 3.52 * 1vw);
      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: calc((100 / 750) * 36 * 1vw);
  right: calc((100 / 750) * 137 * 1vw);
  top: calc((100 / 750) * 133 * 1vw);
  z-index: 1;
  pointer-events: none;
  span {
    display: block;
    font-size: calc((100 / 750) * 24 * 1vw);
    line-height: 1;
    font-family: var(--mont);
    font-weight: 600;
    color: #a7a7af;
    margin-inline: auto;
  }
}
.slide-counter span.current {
  font-size: calc((100 / 750) * 40 * 1vw);
  font-weight: 500;
  color: #feba02;
  margin-bottom: calc((100 / 750) * 42 * 1vw);
}
.slide-counter span.separator {
  width: 1px;
  height: calc((100 / 750) * 56 * 1vw);
  background: currentColor;
}
.slide-counter span:is(.current, .all)::before {
  content: '0';
}
/* =====================
  BNR
===================== */
.bnr_wrap {
  display: grid;
  gap: calc((100 / 750) * 16 * 1vw);
  position: absolute;
  bottom: 0;
  right: calc((100 / 750) * 40 * 1vw);
  z-index: 8;
  .bnr_unit {
    position: relative;
    width: calc((100 / 750) * 640 * 1vw);
    height: calc((100 / 750) * 160 * 1vw);
    border-radius: calc((100 / 750) * 16 * 1vw);
    background-color: #fff;
    box-shadow: 0 0 calc((100 / 750) * 10 * 1vw) 0 rgba(3, 21, 47, 0.14);
    & > a {
      position: relative;
      display: flex;
      align-items: center;
      gap: calc((100 / 750) * 16 * 1vw);
      padding: calc((100 / 750) * 24 * 1vw);
      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_2x.png');
        width: calc((100 / 750) * 64 * 1vw);
        height: calc((100 / 750) * 64 * 1vw);
      }
    }
    &[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_2x.png');
          width: calc((100 / 750) * 182 * 1vw);
          height: calc((100 / 750) * 243 * 1vw);
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .bnr_content {
          & > picture {
            & > img {
              width: calc((100 / 750) * 284 * 1vw);
            }
          }
          & > p {
            font-size: calc((100 / 750) * 22 * 1vw);
            font-weight: 600;
            line-height: 1.6;
            color: #074d94;
            margin-top: calc((100 / 750) * 8 * 1vw);
          }
        }
      }
    }
    &[data-id='2'] {
      & > a {
        .bnr_content {
          position: relative;
          padding-bottom: calc((100 / 750) * 11 * 1vw);
          & > picture {
            & > img {
              width: calc((100 / 750) * 348 * 1vw);
            }
          }
          & > p {
            font-size: calc((100 / 750) * 22 * 1vw);
            font-weight: 600;
            line-height: 1.6;
            color: #0099d9;
            margin-top: calc((100 / 750) * 8 * 1vw);
          }
          &::after {
            content: '';
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../../img/top/bnr_sdgs_line_2x.png');
            width: calc((100 / 750) * 504 * 1vw);
            height: calc((100 / 750) * 5 * 1vw);
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
}

/* =====================
  scroll
===================== */
.scroll_down {
  position: absolute;
  bottom: calc((100 / 750) * 80 * 1vw);
  right: 50%;
  animation: arrowmove 1s ease-in-out infinite;
  z-index: 9;
  .text {
    display: block;
    margin-left: calc((100 / 750) * -28 * 1vw);
    text-shadow: 0 0 8px rgba(3, 21, 47, 0.6);
    font-family: var(--mont);
    font-size: calc((100 / 750) * 20 * 1vw);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .arrow {
    position: absolute;
    width: calc((100 / 750) * 18 * 1vw);
    height: calc((100 / 750) * 6 * 1vw);
    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(calc((100 / 750) * 10 * 1vw));
  }
  67% {
    opacity: 1;
    transform: translateY(calc((100 / 750) * 15 * 1vw));
  }
  100% {
    opacity: 0;
    transform: translateY(calc((100 / 750) * 25 * 1vw)) scale3d(0.5, 0.5, 0.5);
  }
}
/* =====================
  会社案内
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 177 * 1vw);
  padding-bottom: calc((100 / 750) * 204 * 1vw);
  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_2x.png');
      width: calc((100 / 750) * 439 * 1vw);
      height: calc((100 / 750) * 865 * 1vw);
      position: absolute;
      pointer-events: none;
    }
    &::before {
      top: calc((100 / 750) * 75 * 1vw);
      left: 0;
    }
    &::after {
      top: calc((100 / 750) * 75 * 1vw);
      right: 0;
      scale: -1 1;
    }
  }
  .inner {
    position: relative;
  }
  .company_wrap {
    position: relative;
    z-index: 3;
    & h2 {
      position: relative;
      font-size: calc((100 / 750) * 48 * 1vw);
      font-weight: 600;
      letter-spacing: calc((100 / 750) * 1.44 * 1vw);
      text-align: center;
      color: #074d94;
      &::before {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../img/top/about_text.png');
        width: calc((100 / 750) * 570 * 1vw);
        height: calc((100 / 750) * 150 * 1vw);
        position: absolute;
        top: calc((100 / 750) * -173 * 1vw);
        left: 50%;
        transform: translateX(-50%);
      }
    }
    & p {
      font-weight: 600;
      line-height: 2.3;
      letter-spacing: calc((100 / 750) * 0.84 * 1vw);
      text-align: center;
      margin-top: calc((100 / 750) * 32 * 1vw);
    }
    .hover-link-btn {
      margin-top: calc((100 / 750) * 77 * 1vw);
      margin-inline: auto;
    }
  }
  .service_wrap {
    margin-top: calc((100 / 750) * 135 * 1vw);
    .h2-title_top {
      padding-bottom: calc((100 / 750) * 46 * 1vw);
      border-bottom: 1px solid #1b1b1e;
    }
    & ul {
      & li {
        display: flex;
        flex-direction: column-reverse;
        gap: calc((100 / 750) * 40 * 1vw);
        margin-inline: calc((100 / 750) * 20 * 1vw);
        padding-block: calc((100 / 750) * 62 * 1vw) calc((100 / 750) * 67 * 1vw);
        border-bottom: 1px solid #7a8399;

        & > picture {
          & > img {
            width: calc((100 / 750) * 630 * 1vw);
          }
        }
        .service_unit {
          & hgroup {
            & p {
              font-family: var(--mont);
              font-size: calc((100 / 750) * 64 * 1vw);
              font-weight: 500;
              line-height: 1.2;
              letter-spacing: calc((100 / 750) * 1.28 * 1vw);
              margin-top: 0;
              text-transform: uppercase;
            }
            & h3 {
              font-size: calc((100 / 750) * 28 * 1vw);
              font-weight: 600;
              line-height: 2;
              letter-spacing: calc((100 / 750) * 0.84 * 1vw);
              margin-top: calc((100 / 750) * 4 * 1vw);
            }
          }
          & p {
            margin-top: calc((100 / 750) * 23 * 1vw);
            line-height: 2;
          }
          .hover-link-btn {
            margin-top: calc((100 / 750) * 82 * 1vw);
          }
        }
        & > 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: calc((100 / 750) * 89 * 1vw);
  padding-bottom: calc((100 / 750) * 108 * 1vw);
  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_2x.png');
      width: calc((100 / 750) * 529 * 1vw);
      height: calc((100 / 750) * 484 * 1vw);
      position: absolute;
      pointer-events: none;
      top: calc((100 / 750) * -137 * 1vw);
      right: 0;
    }
  }
  .recruit_wrap {
    display: flex;
    flex-direction: column;
    gap: calc((100 / 750) * 40 * 1vw);
    margin-top: calc((100 / 750) * 45 * 1vw);
    border-top: 1px solid #1b1b1e;
    padding-top: calc((100 / 750) * 80 * 1vw);
    padding-inline: calc((100 / 750) * 20 * 1vw);
    & h3 {
      font-size: calc((100 / 750) * 48 * 1vw);
      font-weight: 600;
      letter-spacing: calc((100 / 750) * 1.44 * 1vw);
    }
    & p {
      line-height: 2;
      margin-top: calc((100 / 750) * 24 * 1vw);
    }
    .hover-link-btn {
      margin-top: calc((100 / 750) * 81 * 1vw);
      margin-inline: auto;
    }
    & picture {
      display: block;
      flex-shrink: 0;
      & img {
        width: calc((100 / 750) * 630 * 1vw);
        border-radius: calc((100 / 750) * 24 * 1vw);
      }
    }
  }
  .sdgs-bnr_block {
    margin-top: calc((100 / 750) * 155 * 1vw);
  }
}

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