@charset "UTF-8";

/* =====================
  keyframes
===================== */
:root {
  --scroll-block-size: 33px;
}

@media (width <= 768px) {
  :root {
    --scroll-block-size: calc((100 / 390) * 33 * 1vw);
  }
}

@keyframes scroll {
  0% {
    block-size: var(--scroll-block-size);
  }

  99.9% {
    inset-block-start: 100%;
    block-size: 100%;
  }

  100% {
    inset-block-start: 0;
    block-size: var(--scroll-block-size);
  }
}

/* =====================
  animation
===================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

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

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

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

    min-block-size: calc((100 / 390) * var(--_block-size) * 1vw);
  }

  /* ==== slider ==== */
  .container {
    position: relative;
    block-size: inherit;
    min-block-size: inherit;
    padding-inline-start: 5.6%;
    pointer-events: none;

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

    /* ==== 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: left bottom;
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    position: absolute;
    inset-block-start: 506px;
    inset-inline-start: calc(24px + 5.6%);
    z-index: 2;
    display: block;
    pointer-events: none;

    @media (width <= 768px) {
      inset-block-start: 106.5vw;
      inset-inline-start: 16.5vw;
    }

    /* ==== inner ==== */
    .inner {
      position: relative;
    }

    /* ==== catch-en ==== */
    .catch-en {
      display: flow block;
      translate: 4px 0;

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

    /* ==== body ==== */
    .body {
      display: block grid;
      gap: 19px;
      margin-block-start: 15px;

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

      & .unit {
        position: relative;
        display: block flow;
        inline-size: fit-content;
        padding-block-end: 2px;
        padding-inline: 16px;
        overflow: clip;
        font-size: 48px;
        font-weight: 500;

        @media (width <= 768px) {
          padding-block: 1.5vw 2vw;
          padding-inline: 2vw;
          font-size: calc((100 / 390) * 28 * 1vw);
        }

        &::before {
          position: absolute;
          inset-block: 0;
          inset-inline-start: 0;
          z-index: -1;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          content: '';
          background: white;
          border-radius: 8px;
          transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
        }

        @media (width <= 768px) {
          &::before {
            border-radius: calc((100 / 390) * 8 * 1vw);
          }
        }

        &:first-child {
          color: var(--text-primary);
        }

        &:last-child {
          padding-inline: 28px 16px;
          color: var(--primary);
          translate: 213px 0;

          @media (width <= 768px) {
            padding-inline: 3.6vw 2.3vw;
            translate: 7.9vw 0;
          }
        }

        & span {
          position: relative;
          z-index: 2;
          display: inline flex;
          inline-size: 100%;
          overflow: hidden;
          white-space: nowrap;
          transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
        }
      }
    }
  }

  /* ==== text ==== */
  .text {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 34px;
    display: block grid;
    place-content: center;
    translate: 0 -5.7%;

    @media (width <= 768px) {
      inset-inline-start: 5.1vw;
      translate: 0 -15.7vw;
    }
  }

  /* ==== scroll ==== */
  .scroll {
    position: absolute;
    inset-block-start: 645px;
    inset-inline-start: 34px;
    display: block grid;
    gap: 9px;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    @media (width <= 768px) {
      inset-block-start: 126vw;
      inset-inline-start: 5vw;
      gap: calc((100 / 390) * 9 * 1vw);
    }

    &::before {
      display: block flow;
      inline-size: 11px;
      block-size: 35px;
      content: '';
      background-image: url('../img/top/mv/scroll.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 11 * 1vw);
        block-size: calc((100 / 390) * 38 * 1vw);
      }
    }

    & span {
      position: relative;
      display: block flow;
      inline-size: 1px;
      block-size: 97.22px;
      margin-inline: auto;
      overflow: hidden;
      background: #979797;

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

      &::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        display: block flow;
        inline-size: 1px;
        block-size: var(--scroll-block-size);
        content: '';
        background: var(--primary);
        animation: scroll 3000ms ease-in-out 0ms infinite normal none running;
      }
    }
  }
}

/* ==== text ==== */
.middle-text {
  overflow: hidden;

  .inner {
    --_gap: 55.67px;

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

    position: relative;
    z-index: 2;
    display: block flex;
    gap: var(--_gap);
    width: 100vw;
    padding-block: 35.31px 84.5px;
    margin-inline: calc(50% - 50vw);
    pointer-events: none;

    @media (width <= 768px) {
      padding-block: 9vw 21.5vw;
      translate: 0 0;
    }

    & img {
      display: block flow;
      flex-shrink: 0;
      max-inline-size: unset;
      animation: marquee 180s linear 0s infinite normal none running;

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

/* =====================
  works
===================== */
.works {
  padding-block: 0 190px;
  overflow: hidden;
  color: white;
  text-align: center;
  background-image: url('../img/_common/bg.webp'), linear-gradient(180deg, #fff 1.28%, rgb(246 247 250 / 0%) 13.04%), linear-gradient(140deg, #6e6ef8 -4.42%, #1818a8 95.8%);
  background-size: cover, auto;

  @media (width <= 768px) {
    padding-block: 0 32.3vw;
    background-image: url('../img/_common/bg_sp.webp'), linear-gradient(180deg, #fff 1.28%, rgb(246 247 250 / 0%) 13.04%), linear-gradient(140deg, #6e6ef8 -4.42%, #1818a8 95.8%);
    background-size: auto, auto;
  }

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

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

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

    @media (width <= 768px) {
      translate: 0 0;
    }

    & picture {
      display: block flow;
      flex-shrink: 0;
      max-inline-size: unset;
      animation: marquee 180s linear 0s infinite normal none running;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 47px;
    justify-content: center;
    margin-block-start: 68px;

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

    /* ==== picture ==== */
    .picture {
      display: block flow;
      margin-block-end: 11px;
      margin-inline: auto;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 167.8 * 1vw);
        margin-block-end: calc((100 / 390) * 54 * 1vw);
      }
    }

    /* ==== lead ==== */
    .lead {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 32px;

      @media (width <= 768px) {
        margin-block-end: 7.7vw;
        font-size: calc((100 / 390) * 30 * 1vw);
      }
    }

    /* ==== body ==== */
    .body {
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 350;
      line-height: 2.5;

      @media (width <= 768px) {
        margin-block-end: 10vw;

        /* font-size: calc((100 / 390) * 16 * 1vw); */
        text-align: left;
      }
    }

    /* ==== anchor ==== */
    .u-anchor {
      margin-block-start: 4px;
      margin-inline: auto;

      @media (width <= 768px) {
        margin-block-start: 0;
      }
    }
  }
}

/* =====================
  company
===================== */
.company {
  padding-block: 128px 96px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 1fr 555px;
    gap: 54px 135px;
    align-items: flex-start;
    justify-content: space-between;
    padding-block-start: 54px;
    padding-inline: 0;
    border-block-start: 1px solid var(--text-primary);

    @media (width <= 768px) {
      display: block flow;
    }
  }

  /* ==== u-head ==== */
  .u-head {
    grid-area: 1 / 1 / 2 / 2;
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    grid-area: 2 / 1 / 3 / 2;
    padding-block-start: 18px;
    padding-inline-start: 20px;
    counter-reset: number;

    @media (width <= 768px) {
      padding-block-start: 14.3vw;
      padding-inline-start: 0;
    }

    & li {
      display: block grid;
      border-top: 1px solid #979797;
      border-bottom: 1px solid transparent;
      transition: all 250ms ease 0s;

      &:last-child {
        border-bottom-color: #979797;
      }

      @media (any-hover: hover) {
        &:hover {
          background: #ececec;
        }
      }

      & a {
        position: relative;
        display: block grid;
        gap: 0;
        padding-block: 24px 28.7px;
        padding-inline: 8px;

        @media (width <= 768px) {
          gap: 0;
          padding-block: 5.4vw 5.9vw;
          padding-inline: 2.1vw;
        }

        /* number */
        &::before {
          display: block flow;
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--title);
          font-size: 20px;
          font-weight: 500;
          line-height: 1;
          color: var(--primary);
          content: '0' counter(number);
          counter-increment: number;
        }

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

        /* arrow */
        &::after {
          position: absolute;
          inset-block: auto;
          inset-block-start: 50%;
          inset-inline-end: 6px;
          display: block flow;
          inline-size: 28px;
          aspect-ratio: 1 / 1;
          pointer-events: none;
          content: '';
          background-color: var(--primary);
          mask-image: var(--icon-arrow-thin);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          translate: 0 -50%;
          transition: all 250ms ease 0s;
        }

        @media (any-hover: hover) {
          &:hover {
            &::after {
              inset-inline-end: 3px;
            }
          }
        }

        @media (width <= 768px) {
          &::after {
            inset-inline-end: calc((100 / 390) * 8 * 1vw);
            inline-size: calc((100 / 390) * 28 * 1vw);
          }
        }
      }

      /* en */
      & span[lang='en'] {
        font-family: var(--title);
        font-size: 32px;
        font-weight: 400;
        color: var(--text-primary);

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

      /* title */
      .title {
        margin-block: calc((1em - 1lh) / 2);
        color: #979797;

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

  /* ==== img ==== */
  .img {
    grid-area: 2 / 2 / 3 / 3;
    inline-size: 535px;
    block-size: 628px;
    object-fit: cover;
    border-radius: 8px;
    translate: 0 0;

    @media (width <= 768px) {
      display: none;
    }
  }

  /* ==== anchor ==== */
  .u-anchor {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    margin-inline: auto 0;

    @media (width <= 768px) {
      margin-block-start: 16vw;
      margin-inline: auto;
    }
  }
}

/* =====================
  business
===================== */
.business {
  padding-block: 128px;
  margin-inline-end: 80px;
  overflow: hidden;
  color: white;
  background-image: url('../img/_common/bg.webp'), linear-gradient(123deg, #6e6ef8 8.09%, #1818a8 100.43%);
  background-size: cover, auto;
  border-radius: 0 40px 40px 0;

  @media (width <= 768px) {
    padding-block: 0 19.7vw;
    margin-inline-end: calc((100 / 390) * 14 * 1vw);
    background-image: url('../img/_common/bg_sp.webp'), linear-gradient(123deg, #6e6ef8 8.09%, #1818a8 100.43%);
    background-size: auto, auto;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: auto 318px;
    gap: 0 88px;
    align-items: center;

    @media (width <= 768px) {
      display: block flow;
    }
  }

  /* ==== u-head ==== */
  .u-head {
    grid-area: 1 / 2 / 2 / 3;
    align-self: flex-end;
    padding-block-start: 100px;

    @media (width <= 768px) {
      padding-block-start: 16vw;
      padding-inline-start: 6.1vw;
    }

    .title,
    & span[lang='en'] {
      color: white;
    }
  }

  /* ==== body ==== */
  .body {
    grid-area: 2 / 2 / 3 / 3;
    padding-block-start: 40px;
    padding-inline-end: 15px;
    font-size: 15px;
    line-height: 2;
    color: #c4c4c4;

    @media (width <= 768px) {
      padding-block-start: 10.3vw;
      padding-inline: 5.1vw 1vw;
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  /* ==== anchor ==== */
  .u-anchor {
    grid-area: 3 / 2 / 4 / 3;
    margin-block-start: 45px;

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

  /* ==== slider ==== */
  .slider {
    grid-area: 1 / 1 / 5 / 2;
    inline-size: 100%;
    direction: rtl;

    @media (width > 768px) {
      clip-path: inset(0 0 0 -50vw);
    }

    @media (width <= 768px) {
      margin-block-start: 12.2vw;
      clip-path: inset(-1vw 0 0 -50vw);
    }

    & :where(h3, [lang='en']) {
      display: block flow;
      text-align: left;
    }

    .swiper-wrapper {
      align-items: flex-end;
      color: #c4c4c4;
    }

    .swiper-slide {
      position: relative;
      display: block grid;
      gap: 16.5px;
      translate: 0 -5px;
      transition: opacity 250ms ease 0s;

      @media (width <= 768px) {
        gap: 0;
        translate: 0 0;
      }

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.8;
        }
      }
    }

    .swiper-slide img {
      margin-block: calc((1em - 1lh) / 2);
      line-height: 1;

      @media (width <= 768px) {
        block-size: calc((100 / 390) * 385 * 1vw);
        object-fit: cover;
        border-radius: 8px;
      }
    }

    .swiper-slide h3 {
      margin-block: calc((1em - 1lh) / 2);
      margin-block-end: 3px;
      font-size: 15px;
      line-height: 1;
      letter-spacing: 0.45px;

      @media (width <= 768px) {
        margin-block: 3.8vw calc((100 / 390) * 0 * 1vw);
        font-size: calc((100 / 390) * 15 * 1vw);
        letter-spacing: calc((100 / 390) * 0.45 * 1vw);
      }
    }

    .swiper-slide span[lang='en'] {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 14px;
      letter-spacing: 0.42px;

      @media (width <= 768px) {
        display: block flow;
        margin-block: calc((100 / 390) * 11.3 * 1vw) 0;
        font-size: calc((100 / 390) * 14 * 1vw);
        letter-spacing: calc((100 / 390) * 0.42 * 1vw);
      }
    }

    .swiper-slide a::before {
      position: absolute;
      inset: 0;
      z-index: 2;
      inline-size: 100%;
      block-size: 100%;
      content: '';
    }

    .swiper-slide.swiper-slide-active-end {
      @media (width > 768px) {
        width: 370px !important;
        translate: unset;

        & h3 {
          font-size: 18px;
          letter-spacing: 0.54px;
        }

        & span[lang='en'] {
          font-size: 16px;
          letter-spacing: 0.08px;
        }
      }
    }

    /* ==== controller ==== */
    .swiper-controller {
      display: block flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      inline-size: fit-content;
      margin-block-start: 32px;
      direction: ltr;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 8 * 1vw);
        margin-block-start: 9.1vw;
        margin-inline-end: 1.6vw;
      }

      & button {
        position: relative;
        display: block grid;
        inline-size: 70px;
        padding-block: 7px;
        padding-inline: 7px;
        background: white;
        border-radius: 4px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 70 * 1vw);
          padding-block: calc((100 / 390) * 7 * 1vw);
          padding-inline: calc((100 / 390) * 7 * 1vw);
          border-radius: calc((100 / 390) * 4 * 1vw);
        }

        &.prev {
          place-content: center flex-start;
        }

        &.next {
          place-content: center flex-end;
        }

        &::before {
          inline-size: 21px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/_common/circle-arrow.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

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

        &.next::before {
          scale: -1 1;
        }
      }
    }
  }
}

/* =====================
  recruit
===================== */
.recruit {
  padding-block: 128px 0;
  overflow: hidden;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-auto-flow: column;
    gap: 48px;
    align-items: flex-start;
    justify-content: space-between;
    padding-block-start: 54px;
    border-block-start: 1px solid var(--text-primary);

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

    /* ==== body ==== */
    .body {
      padding-block-start: 9px;
      font-weight: 350;

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

    /* ==== u-anchor ==== */
    .u-anchor {
      margin-block-start: 7px;

      @media (width <= 768px) {
        margin-block-start: 12vw;
      }
    }
  }

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

    display: block flex;
    gap: var(--_gap);
    padding-block: 71px;
    pointer-events: none;

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

      padding-block: 20.4vw 1vw;
    }

    & picture {
      display: block flow;
      flex-shrink: 0;
      align-self: flex-start;
      max-inline-size: 1553px;
      animation: marquee 180s linear 0s infinite normal none running;

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

/* =====================
  news
===================== */
.news {
  padding-block: 57px 142px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    gap: 52px 130px;
    align-items: flex-start;
    justify-content: space-between;
    padding-block-start: 54px;
    padding-inline: 8px 0;
    border-block-start: 1px solid var(--text-primary);

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

    /* ==== u-head ==== */
    .u-head {
      grid-area: 1 / 1 / 2 / 2;

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

    /* ==== list ==== */
    .list {
      display: block grid;
      grid-area: 1 / 2 / 3 / 3;
      grid-auto-columns: minmax(auto, 130px) 1fr;
      justify-content: flex-start;
      padding-block-start: 9px;

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

      & li {
        position: relative;
        display: block grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        grid-auto-flow: column;
        gap: 12px;
        align-items: center;
        justify-content: flex-start;
        padding-block: 31px;
        padding-inline: 13px;
        word-break: break-all;
        border-top: 1px solid #b3b5ba;
        border-bottom: 1px solid transparent;
        transition: all 250ms ease 0s;

        @media (width <= 768px) {
          grid-template-rows: 1fr auto;
          grid-template-columns: auto;
          grid-column: auto;
          grid-auto-flow: row;
          gap: 12px;
          padding-block: 31px;
          padding-block: 3.4vw 4.6vw;
          padding-inline: 13px;
          padding-inline: 2vw 12vw;
        }

        &:last-child {
          border-bottom-color: #b3b5ba;
        }

        @media (any-hover: hover) {
          &:hover {
            background: #ececec;

            &::after {
              translate: 10% 0;
            }
          }
        }

        /* ==== arrow ==== */
        &::after {
          position: absolute;
          inset-block: auto;
          inset-inline-end: 13px;
          inline-size: 28px;
          aspect-ratio: 1 / 1;
          pointer-events: none;
          content: '';
          background-color: var(--primary);
          mask-image: var(--icon-arrow-thin);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          transition: all 250ms ease 0s;
        }

        @media (width <= 768px) {
          &::after {
            inset-inline-end: calc((100 / 390) * 7 * 1vw);
            inline-size: calc((100 / 390) * 22 * 1vw);
          }
        }

        /* ==== time ==== */
        & time {
          font-weight: 500;
          color: var(--primary);

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

        /* ==== a ==== */
        & a {
          color: var(--text-primary);

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

          &::before {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: block;
            inline-size: 100%;
            block-size: 100%;
            content: '';
          }
        }
      }
    }

    /* ==== u-anchor ==== */
    .u-anchor {
      grid-area: 2 / 1 / 3 / 2;
      align-self: flex-start;

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

/* =====================
  animation
==================== */
:root {
  --_transition: transform 1s ease, opacity 0.4s ease;
}

.mv {
  .catch .body .unit:first-child span {
    inline-size: 0;
    transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
    transition-delay: 0.3s;
  }

  .catch .body .unit:first-child::before {
    inline-size: 0;
    transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  &.on {
    .catch .body .unit:first-child span {
      inline-size: 100%;
    }

    .catch .body .unit:first-child::before {
      inline-size: 100%;
    }
  }

  .catch .body .unit:last-child span {
    inline-size: 0;
    transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
    transition-delay: 0.3s;
  }

  .catch .body .unit:last-child::before {
    inline-size: 0;
    transition: inline-size 900ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  &.on {
    .catch .body .unit:last-child span {
      inline-size: 100%;
    }

    .catch .body .unit:last-child::before {
      inline-size: 100%;
    }
  }
}

.works {
  .picture {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

  .lead {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

  .body {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

.company {
  .u-head {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

  .list li {
    opacity: 0;
    transform: translateY(1em);
    transition: transform 1s ease var(--_delay), opacity 0.4s ease var(--_delay);

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

  .img {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

.business {
  .u-head {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

  .body {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

.recruit {
  .u-head {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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

  .body {
    opacity: 0;
    transform: translateY(1em);
    transition: var(--_transition);

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