@charset "UTF-8";

/* =====================
  Animation
===================== */
@keyframes circle {
  0% {
    stroke-dashoffset: var(--circumference);
  }

  1% {
    stroke-dashoffset: var(--circumference);
  }

  79% {
    stroke-dashoffset: 0;
  }

  80% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

@keyframes circle-end {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

/* =====================
  animation
===================== */
@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

  100% {
    opacity: 1;
    translate: 0 0%;
  }
}

@keyframes hover {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

/* =====================
  contents
===================== */
.main {
  /* =====================
    wrapper
  ===================== */
  .wrapper[data-id='1'] {
    position: relative;
    overflow: clip;

    &::before {
      position: absolute;
      inset-block-start: 194px;
      inset-inline-start: -240px;
      z-index: 3;
      inline-size: 971px;
      aspect-ratio: 971 / 931;
      pointer-events: none;
      content: '';
      background-image: url('../img/top/mv/illust.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media (width <= 768px) {
      &::before {
        inset-block-start: 96.4vw;
        inset-inline-start: 0;
        inline-size: calc((100 / 390) * 293.66 * 1vw);
        block-size: calc((100 / 390) * 374 * 1vw);
        background-image: url('../img/top/mv/illust_sp.webp');
      }
    }
  }

  /* =====================
    mv
  ===================== */
  .mv {
    --_block-size: 864px;

    position: relative;
    block-size: 100vh;
    min-block-size: var(--_block-size);
    overflow: clip;
    color: white;

    @media (width <= 768px) {
      --_block-size: calc((100 / 390) * 794 * 1vw);
    }

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * var(--_block-size) * 1vw);
    }

    &::before {
      position: absolute;
      inset: auto 0 0;
      z-index: 2;
      display: block flow;
      block-size: 300px;
      pointer-events: none;
      content: '';
      background: linear-gradient(180deg, rgb(34 81 137 / 0%) 0%, #22548d 97.33%);
    }

    @media (width <= 768px) {
      &::before {
        block-size: calc((100 / 390) * 300 * 1vw);
        background: linear-gradient(180deg, rgb(34 81 137 / 0%) 0%, #224b7f 97.33%);
      }
    }

    /* ==== slider ==== */
    .container {
      position: relative;
      block-size: inherit;
      min-block-size: inherit;
      pointer-events: none;

      /* ==== picture ==== */
      .picture {
        position: relative;
        z-index: 1;
        display: block;
        block-size: inherit;
        min-block-size: inherit;
        pointer-events: none;
        user-select: none;

        & img {
          display: block;
          inline-size: 100%;
          block-size: inherit;
          min-block-size: inherit;
          object-fit: cover;
          object-position: center bottom;
        }
      }
    }

    /* ==== ページネーション ==== */
    .pagination {
      position: absolute;
      inset-block-end: 20px;
      inset-inline-end: 20px;
      z-index: 7;
      inline-size: 140px;
      aspect-ratio: 1 / 1;

      @media not all and (width >= 768px) {
        inset-block-end: 17.7vw;
        inset-inline-end: calc((100 / 390) * 16.02 * 1vw);
        display: grid;
        inline-size: calc((100 / 390) * 87.97 * 1vw);
      }

      /* ==== 円 ==== */
      .circle {
        --radius: 49;
        --circumference: calc(var(--radius) * 2 * pi * 1px);

        display: block;
        width: 140px;
        aspect-ratio: 1 / 1;
        pointer-events: none;
        rotate: 0 0 1 90deg;

        @media (width <= 768px) {
          width: calc((100 / 390) * 87.97 * 1vw);
        }

        & circle {
          fill: none;
          stroke: white;
          stroke-width: 1px;

          &:not(.dummy) {
            stroke-dasharray: var(--circumference);
            stroke-dashoffset: var(--circumference);
            will-change: stroke-dashoffset;
          }

          &.dummy {
            stroke-opacity: 0.3;
          }
        }

        &.animation circle {
          /* Swiper delay 2000 + speed 2000 なので 4000ms で設定 */
          animation: circle 4000ms ease 0ms infinite normal forwards running;
        }

        &.animation-end circle {
          animation-name: circle-end;
          animation-duration: 1000ms; /* slideChange setTimeoutの秒数と一致 */
        }
      }

      /* ==== prev, next ==== */
      :where(.prev, .next) {
        --_top: 50%;

        position: absolute;
        display: grid;
        place-content: center;
        color: white;
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity 0.2s ease-in;

        @media not all and (width >= 768px) {
          inline-size: calc((100 / 750) * 13 * 1vw);
          block-size: calc((100 / 750) * 22 * 1vw);
        }
      }

      .prev {
        inset: var(--_top) auto auto 28%;
      }

      .next {
        inset: var(--_top) 28% auto auto;
        scale: -1 1;
      }
    }

    /* ==== catch ==== */
    .inner {
      position: absolute;
      inset: 0;
      z-index: 3;
      box-sizing: unset;
      max-inline-size: 1360px;
      padding-block-start: 215px;
      padding-inline: 20px;
      margin-inline: auto;

      @media (width <= 768px) {
        padding-block-start: 0;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .text {
        position: relative;
        display: block flex;
        align-items: flex-end;
        inline-size: 792px;
        block-size: 100%;

        @media (width <= 768px) {
          inline-size: 100%;
        }
      }

      /* catch */
      .catch {
        position: absolute;
        inset-block-end: 170px;
        inset-inline-start: 437px;

        @media (width <= 768px) {
          inset-block-end: 20.7vw;
          inset-inline-start: 51.1vw;
          inline-size: calc((100 / 390) * 46.65 * 1vw);
          block-size: calc((100 / 390) * 188.8 * 1vw);
        }
      }

      & [lang='en'] {
        font-family: var(--oswald);
        font-size: 190px;
        font-weight: 600;
        line-height: 0.9;
        word-break: break-all;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 86 * 1vw);
        }
      }
    }

    /* ==== show up ==== */
    .show-up-text {
      & span.char {
        display: inline-block;
        overflow: clip;
        white-space: nowrap;
        opacity: 0;
        translate: 0 100%;
        animation: show-up-text 350ms cubic-bezier(0, 0.6, 0.4, 1) 2500ms 1 alternate forwards running;
      }
    }
  }

  /* =====================
    company
  ===================== */
  .company {
    padding-block: 273px 329px;
    color: white;
    background-image: url('../img/top/company/bg.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    @media (width >= 1900px) {
      background-image: url('../img/top/company/bg_l.webp');
    }

    @media (width <= 768px) {
      padding-block: 32.6vw 29.8vw;
      background-image: url('../img/top/company/bg_sp.webp');
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      grid-template-columns: 363px auto;
      gap: 98px 123px;
      align-items: center;
      max-inline-size: 961px;
      margin-inline: auto;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 84.9 * 1vw);
        align-items: flex-start;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== .lead ==== */
    .lead {
      grid-area: 1 / 1 / 3 / 2;
      padding-inline-start: 24px;
      font-family: var(--yumin);
      font-size: 52px;
      font-weight: 600;
      line-height: 1.8;

      @media (width > 768px) {
        translate: 0 -7px;
      }

      @media (width <= 768px) {
        padding-inline-start: 0;
        margin-block: calc((1em - 1lh) / 2);
        font-size: calc((100 / 390) * 32 * 1vw);
        font-weight: 600;
      }
    }

    /* ==== .body ==== */
    .body {
      grid-area: 1 / 2 / 2 / 3;
      padding-inline-end: 19px;
      font-weight: 400;

      @media (width <= 768px) {
        padding-inline-end: 0;
      }

      & p {
        margin-block: calc((1em - 1lh) / 2);
        line-height: 2.55;
        word-break: break-all;
      }

      & p + p {
        margin-block-start: 55px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }
    }

    /* ==== anchor ==== */
    .anchor {
      grid-area: 2 / 2 / 3 / 3;
      padding-block: 10px;

      @media (width <= 768px) {
        padding-block: 0;
        margin-inline: auto;
        translate: 0 -2vw;
      }
    }
  }

  /* =====================
    service
  ===================== */
  .service {
    --_negative: 173px;

    position: relative;
    padding-block-start: 138px;

    @media (width <= 768px) {
      --_negative: 0;

      padding-block-start: 18.6vw;
    }

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      inline-size: 544px;
      block-size: 318px;
      pointer-events: none;
      content: '';
      background-image: url('../img/top/service/illust.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media (width <= 768px) {
      &::before {
        width: calc((100 / 390) * 294 * 1vw);
        height: calc((100 / 390) * 171 * 1vw);
        background-image: url('../img/top/service/illust_sp.webp');
      }
    }

    .inner {
      display: block grid;
      grid-template-columns: 1fr 470px;
      gap: 0 50px;
      max-inline-size: 1280px;
      padding-inline-end: 80px;
      margin-inline: auto;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        padding-inline-end: 0;
      }
    }

    /* ==== head ==== */
    .head {
      position: relative;
      z-index: 2;
      grid-area: 1 / 1 / 2 / 3;
      inline-size: fit-content;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      & span[lang='en'] {
        display: block flow;
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--oswald);
        font-size: 150px;
        font-weight: 600;
        line-height: 0.9;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 70 * 1vw);
        }

        & span {
          display: block flow;
        }
      }

      & h2 {
        position: absolute;
        inset-block-start: 71px;
        inset-inline-end: 86px;
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--yumin);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.8;

        @media (width <= 768px) {
          inset-block-start: 3.2vw;
          inset-inline-end: 34.3vw;
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        & span {
          display: block flow;
        }
      }

      /* ==== description ==== */
      .description {
        margin-block: 60px calc((1em - 1lh) / 2);
        font-weight: 400;

        @media (width <= 768px) {
          padding-inline-end: 0;
          margin-block: 9.9vw calc((1em - 1lh) / 2);
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

    /* ==== picture ==== */
    .picture {
      position: relative;
      z-index: 1;
      display: block flow;
      grid-area: 2 / 1 / 3 / 2;
      block-size: 520px;
      margin-block-start: calc(var(--_negative) * -1);
      margin-inline: calc(50% - 50vw) 0;

      @media (width <= 768px) {
        block-size: calc((100 / 390) * 260 * 1vw);
        margin-block-start: -11vw;
      }

      &::before {
        position: absolute;
        inset: 0 0 auto;
        z-index: 2;
        display: block flow;
        inline-size: 100%;
        block-size: 289px;
        content: '';
        background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 73%) 57.21%, rgb(255 255 255 / 27%) 77.88%, rgb(255 255 255 / 0%) 100%);
      }

      @media (width <= 768px) {
        &::before {
          block-size: calc((100 / 390) * 148.073 * 1vw);
          background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 27%) 73.29%, rgb(255 255 255 / 0%) 100%);
        }
      }

      & img {
        z-index: 1;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;

        &.hover {
          animation: hover 800ms var(--easeOutBounce) 0ms 1 normal none running;
        }
      }
    }

    /* ==== list ==== */
    .list {
      position: relative;
      z-index: 2;
      grid-area: 2 / 2 / 3 / 3;
      margin-block-start: calc(var(--_negative) * -1);
      margin-inline-start: 40px;
      font-family: var(--yumin);
      font-size: 22px;
      font-weight: 600;
      line-height: 1.3;
      counter-reset: number;

      @media (width <= 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: calc((100 / 390) * 40 * 1vw);
        margin-inline-start: 0;
        font-size: calc((100 / 390) * 16 * 1vw);
      }

      & li {
        @media (width <= 768px) {
          &:nth-child(4) {
            border-block-end: 1px solid #d0d0d0;
          }
        }

        & a {
          display: block grid;
          grid-template-columns: auto 1fr auto;
          gap: 0 30px;
          align-items: center;
          padding-block: 31px;
          border-block-start: 1px solid #d0d0d0;
          border-block-end: 1px solid transparent;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 10.2 * 1vw);
            padding-block: 6.5vw;
          }

          &::before {
            font-family: var(--oswald);
            font-size: 16px;
            color: var(--primary);
            content: '0' counter(number);
            counter-increment: number;
            translate: 0 -2px;
          }

          @media (width <= 768px) {
            &::before {
              font-size: calc((100 / 390) * 14 * 1vw);
              translate: 0 calc((100 / 390) * 1 * -1 * 1vw);
            }
          }

          &::after {
            display: block flow;
            inline-size: 23px;
            aspect-ratio: 23 / 7;
            content: '';
            background-color: var(--primary);
            mask-image: var(--icon-arrow);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            translate: 0 -3px;
          }

          @media (width <= 768px) {
            &::after {
              inline-size: calc((100 / 390) * 23 * 1vw);
              translate: 0 calc((100 / 390) * 0 * -1 * 1vw);
            }
          }

          @media (any-hover: hover) {
            &:hover {
              color: var(--primary);
            }
          }
        }
      }

      & li:last-child a {
        border-block-end: 1px solid #d0d0d0;
      }
    }
  }

  /* =====================
    works
  ===================== */
  .works {
    padding-block: 118px 21px;
    overflow: clip;

    @media (width <= 768px) {
      padding-block: 18.3vw 11.5vw;
    }

    /* ==== hgroup ==== */
    & hgroup {
      position: relative;
      z-index: 2;
      display: block grid;
      gap: 12px;

      @media (width <= 768px) {
        gap: 2.8vw;
      }

      & [lang='en'] {
        display: block flow;
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--oswald);
        font-size: 90px;
        font-weight: 600;
        line-height: 1;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 60 * 1vw);
        }
      }

      .title {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--yumin);
        font-weight: 600;
        line-height: 1;
        color: var(--primary);
        letter-spacing: 1.6px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          letter-spacing: calc((100 / 390) * 1.6 * 1vw);
        }
      }
    }

    /* ==== .img ==== */
    .img {
      --_gap: 40px;

      @media (width <= 768px) {
        --_gap: calc((100 / 390) * 20 * 1vw);
      }

      position: relative;
      z-index: 1;
      display: block flex;
      gap: var(--_gap);
      width: 100vw;
      margin-inline: calc(50% - 50vw);
      pointer-events: none;
      translate: 0 -50px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 36 * 1vw);
        translate: 0 0;
      }

      & ul {
        display: block flex;
        flex-shrink: 0;
        gap: var(--_gap);
        animation: marquee 180s linear 0s infinite normal none running;

        & li {
          inline-size: 330px;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 300 * 1vw);
          }
        }
      }
    }

    /* ==== anchor ==== */
    .anchor {
      position: relative;
      z-index: 2;
      display: block grid;
      grid-template-columns: 719px auto;
      align-items: center;
      justify-content: space-between;
      padding-block: 40px;
      padding-inline: 40px 45px;
      background: white;
      translate: 0 -120px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 4.5vw;
        padding-block: 7.3vw;
        padding-inline: 0;
        font-size: calc((100 / 390) * 16 * 1vw);
        translate: 0 0;
      }
    }
  }

  /* =====================
    recruit
  ===================== */
  .recruit {
    padding-block: 140px;
    color: white;
    background-image: url('../img/top/recruit/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width >= 1900px) {
      background-image: url('../img/top/recruit/bg_l.webp');
    }

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 100 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      background-image: url('../img/top/recruit/bg_sp.webp');
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      gap: 50px 0;
      max-inline-size: 558px;
      padding-block: 28px 38px;
      padding-inline: 80px;
      margin-inline: auto;
      background: rgb(10 87 145 / 80%);

      @media (width <= 768px) {
        gap: calc((100 / 390) * 39 * 1vw) 0;
        max-inline-size: 100%;
        padding-block: 8.3vw 7.8vw;
        padding-inline: calc((100 / 390) * 32 * 1vw);
      }
    }

    /* ==== hgroup ==== */
    & hgroup {
      display: block grid;
      gap: 7px;
      text-align: center;

      @media (width <= 768px) {
        gap: 1vw;
      }

      & [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--oswald);
        font-size: 90px;
        font-weight: 600;
        line-height: 1;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 60 * 1vw);
        }
      }

      .title {
        font-family: var(--yumin);
        font-weight: 600;
        line-height: 1.8;
        letter-spacing: 1.6px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          letter-spacing: calc((100 / 390) * 1.6 * 1vw);
        }
      }
    }

    /* ==== description ==== */
    .description {
      text-align: center;
    }

    /* ==== u-anchor ==== */
    .u-anchor {
      margin-inline: auto;
    }
  }

  /* =====================
    others
  ===================== */
  .others {
    padding-block: 137px 136px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 86 * 1vw) calc((100 / 390) * 83 * 1vw);
    }

    .inner {
      display: block flex;
      gap: 40px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 390) * 50 * 1vw);
      }

      & .article {
        position: relative;
        display: block grid;
        gap: 17px;
        width: 100%;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 16 * 1vw);
        }

        @media (any-hover: hover) {
          &:hover {
            & h2 {
              color: var(--primary);

              &::before {
                background-color: var(--primary);
              }

              &::after {
                background: white;
                box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 100%, transparent);
              }
            }

            & img {
              opacity: 0.8;
            }
          }
        }

        & img {
          inline-size: 540px;
          margin-block: calc((1em - 1lh) / 2);
          transition: opacity 250ms ease 0s;

          @media (width > 768px) {
            block-size: 372px;
          }

          @media (width <= 768px) {
            inline-size: 100%;
            block-size: calc((100 / 390) * 251 * 1vw);
            object-fit: cover;
          }
        }

        & h2 {
          gap: 20px;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 22px;
          transition: color 250ms ease 0s;
          will-change: color;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 18 * 1vw);
            padding-block: 0;
            font-size: calc((100 / 390) * 18 * 1vw);

            &::before {
              inset-inline-end: 1.4vw;
              inline-size: calc((100 / 390) * 13.8 * 1vw);
            }

            &::after {
              inline-size: calc((100 / 390) * 24 * 1vw);
              box-shadow: 0 0 0 calc((100 / 390) * 3 * 1vw) color-mix(in srgb, var(--primary) 50%, transparent);
            }
          }
        }

        & .description {
          margin-block: 6px calc((1em - 1lh) / 2);
          font-weight: 400;
          line-height: 1.8;
          transition: color 250ms ease 0s;
          will-change: color;
        }

        & a {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
        }
      }
    }
  }

  /* =====================
    animation
  ===================== */
  .mv {
    .inner {
      .catch {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(10%);
        transition: transform 600ms var(--slideInBezier) 1000ms, opacity 600ms var(--slideInBezier) 1000ms, filter 600ms var(--slideInBezier) 1000ms;

        &.on {
          opacity: 1;
          filter: blur(0);
          transform: translateY(0);
        }
      }
    }
  }

  .company {
    .lead,
    .body {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
      transition: all 600ms var(--slideInBezier) 500ms;

      &.on {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }
  }

  .service {
    & hgroup,
    & p,
    .picture,
    .list {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
      transition: all 600ms var(--slideInBezier) 500ms;

      &.on {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }
  }

  .works {
    & hgroup,
    & p,
    .img,
    .list {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
      transition: all 600ms var(--slideInBezier) 500ms;

      &.on {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }
  }

  .recruit {
    & hgroup,
    & p,
    .img,
    .list {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
      transition: all 600ms var(--slideInBezier) 500ms;

      &.on {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }
  }

  .others {
    .article {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
      transition: all 600ms var(--slideInBezier) 500ms;

      &.on {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }
  }
}