@charset "UTF-8";

/* =====================
  animation
===================== */
@keyframes marquee {
  100% {
    translate: -100%;
  }
}

@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

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

/* =====================
  mv
===================== */
.mv {
  position: relative;
  min-inline-size: 1300px;
  height: calc(100svh - var(--header-height));
  min-height: 770px;
  padding-block-end: 250px;
  overflow: clip;

  @media not all and (width >=768px) {
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    padding-block-end: 0;
  }

  @media not all and (width >=768px) {
    min-inline-size: 100%;
  }

  #swiper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    inline-size: 100%;
    block-size: 460px;
    height: inherit;
    pointer-events: none;

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

  .swiper-wrapper {
    .swiper-slide {
      position: relative;
      height: inherit;

      & img {
        display: block;
        inline-size: 100%;
        block-size: 460px;
        object-fit: cover;
        object-position: center bottom;

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

  .inner {
    position: relative;
    z-index: 1;
    max-inline-size: 1121px;
    padding-block-start: 367px;

    @media not all and (width >=768px) {
      max-inline-size: 100%;
      padding-block-start: 72.2vw;
    }

    margin-inline: auto;

    & hgroup {
      display: grid;
      gap: 22px;

      @media not all and (width >=768px) {
        gap: 4.4vw;
        width: 59vw;
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      & h1 {
        overflow: hidden;
        font-size: 34px;
        font-weight: 700;
        line-height: 1;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 46 * 1vw);
          line-height: 1.4;
        }

        & span {
          display: inline-block;
          overflow: clip;
          white-space: nowrap;
          opacity: 0;
          translate: 0 100%;
        }

        &.on {
          span {
            animation: show-up-text 350ms cubic-bezier(0, 0.6, 0.4, 1) 0ms 1 alternate forwards running;

            @media not all and (width >=768px) {
              animation: show-up-text 1200ms cubic-bezier(0, 0.6, 0.4, 1) 0ms 1 alternate forwards running;
            }
          }
        }
      }

      [lang='en'] {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.6;
        color: #888;
        letter-spacing: unset;

        @media not all and (width >=768px) {
          width: 100%;
          font-size: calc((100 / 750) * 18 * 1vw);
        }
      }
    }

    &::after {
      position: absolute;
      right: -89px;
      bottom: 5px;
      z-index: -1;
      inline-size: 515px;
      block-size: 144px;
      content: '';
      background-image: url('../img/top/mv/il.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media not all and (width >=768px) {
      &::after {
        display: none;
      }
    }
  }

  .text {
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 32px;
    inline-size: 100vw;
    block-size: 250px;
    margin-inline: calc(50% - 50vw);
    pointer-events: none;

    @media not all and (width >=768px) {
      top: 133.8vw;
      bottom: unset;
      gap: calc((100 / 750) * 20 * 1vw);
      block-size: calc((100 / 750) * 155 * 1vw);
    }

    &::before,
    &::after {
      display: block;
      flex-shrink: 0;
      inline-size: 4536px;
      block-size: 250px;
      content: '';
      background-image: url('../img/top/mv/text.webp');
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 4536px 250px;
      animation: marquee 150s linear infinite;
    }

    @media not all and (width >=768px) {
      &::before,
      &::after {
        inline-size: calc((100 / 750) * 2851 * 1vw);
        block-size: calc((100 / 750) * 155 * 1vw);
        background-size: calc((100 / 750) * 2851 * 1vw) calc((100 / 750) * 155 * 1vw);
      }
    }
  }
}

/* =====================
  company
===================== */
.company {
  position: relative;
  padding-block: 271px 130px;
  overflow: hidden;
  background-image: url('../img/top/company/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 200 * 1vw) calc((100 / 750) * 124 * 1vw);
  }

  .decoration {
    position: absolute;
  }

  .decoration[data-id='1'] {
    top: 131px;
    right: -30px;

    @media not all and (width >=768px) {
      top: 10.2vw;
      right: -5.3vw;
      inline-size: calc((100 / 750) * 460 * 1vw);
    }
  }

  .decoration[data-id='2'] {
    bottom: 186px;
    left: -33px;

    @media not all and (width >=768px) {
      bottom: 42.2vw;
      left: -8.1vw;
      inline-size: calc((100 / 750) * 460 * 1vw);
    }
  }

  .u-inner {
    /* キャッチ */
    --_width: 630px;

    @media not all and (width >=768px) {
      --_width: calc((100 / 750) * 630 * 1vw);

      padding-block-start: calc((100 / 750) * 91 * 1vw); /* padding-inline-start: 5.6vw; */
    }

    position: relative;

    .unit[data-id='1'] {
      display: grid;
      grid-template: auto auto / auto auto;
      grid-template-rows: auto auto;
      grid-template-columns: auto auto;
      column-gap: 16px;
      align-items: baseline;
      justify-content: flex-start;
      margin-block-end: 15px;
      font-size: 120px;
      font-weight: 600;

      @media not all and (width >=768px) {
        column-gap: 1.8vw;
        padding-inline-start: 5.6vw;
        margin-block-end: calc((100 / 750) * 15 * 1vw);
        font-size: calc((100 / 750) * 94 * 1vw);
      }

      .item {
        line-height: 1;
      }

      .item[data-id='1'] {
        grid-column: 1 / 2;
        color: var(--blue);
        letter-spacing: unset;
      }

      .item[data-id='2'] {
        grid-column: 2 / 2;
        font-size: 80px;
        color: #d6d6d6;

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

      .item[data-id='3'] {
        grid-row: 2 / 2;
        grid-column: 1 / 4;
      }
    }

    .unit[data-id='2'] {
      inline-size: var(--_width);
      margin-block-end: 27px;
      margin-inline: auto 0;
      font-size: 30px;
      font-weight: bold;

      @media not all and (width >=768px) {
        padding-inline-start: 17.2vw;
        margin-block: 4.4vw calc((100 / 750) * 27 * 1vw);
        margin-inline: auto;
        font-size: calc((100 / 750) * 40 * 1vw);
        line-height: 1.6;
      }
    }

    .unit[data-id='3'] {
      inline-size: var(--_width);
      margin-block: calc((1em - 1lh) / 2);
      margin-block-end: 38px;
      margin-inline: auto 0;
      font-size: 16px;
      line-height: 2.12;

      @media not all and (width >=768px) {
        padding-inline: 18.2vw 0;
        margin-block: 2vw 34.4vw;
        margin-inline: auto;
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.8;
      }
    }

    .u-anchor {
      inline-size: 277px;
      margin-inline: auto 0;

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

/* =====================
  works
===================== */
.works {
  padding-block: 121px 133px;
  padding-inline: 90px;
  overflow: hidden;
  background-image: url('../img/top/works/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 120 * 1vw) calc((100 / 750) * 129 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
    background-image: url('../img/top/works/bg_sp.webp');
  }

  .inner {
    display: grid;
    grid-template: auto auto 1fr auto / 277px auto;
    grid-template-areas:
      'hgroup slider'
      'p slider'
      'anchor slider'
      'controller controller';
    column-gap: 78px;
    align-items: flex-start;

    @media not all and (width >=768px) {
      grid-template: auto auto 1fr auto / 1fr;
      grid-template-areas:
        'hgroup'
        'p'
        'slider'
        'controller'
        'anchor';
      column-gap: 0;
    }
  }

  hgroup {
    grid-area: hgroup;
    gap: 5px;
    margin-block-end: 41px;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 5 * 1vw);
      margin-block-end: calc((100 / 750) * 42 * 1vw);
    }
  }

  .slider {
    grid-area: slider;
    margin-block-start: 9px;
    clip-path: inset(0 -50vw 0 0);

    @media not all and (width >=768px) {
      margin-block-start: 0;

      & img {
        inline-size: 100%;
        height: inherit;
        object-fit: cover;
      }
    }
  }

  p {
    grid-area: p;
    margin-block-end: 48px;

    @media not all and (width >=768px) {
      margin-block-end: calc((100 / 750) * 45 * 1vw);
      font-size: calc((100 / 750) * 26 * 1vw);
      line-height: 1.76;
    }
  }

  .u-anchor {
    grid-area: anchor;

    @media not all and (width >=768px) {
      inline-size: calc((100 / 750) * 410 * 1vw);
      margin-block-start: 8.4vw;
      margin-inline: auto;
    }
  }

  .controller {
    display: grid;
    grid-area: controller;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    justify-content: center;
    inline-size: 1120px;
    margin-block-start: 59px;
    margin-inline: auto;

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

    .pagination {
      inset: unset;
      display: grid;
      grid-auto-flow: column;

      span {
        display: block;
        width: initial;
        height: 3px;
        margin: unset;
        background: #dcdcdc;
        border-radius: unset;
        opacity: 1;

        @media not all and (width >=768px) {
          height: calc((100 / 750) * 5 * 1vw);
        }
      }

      span.swiper-pagination-bullet-active {
        background: #888;
      }
    }

    button:is(.prev, .next) {
      inline-size: 60px;
      aspect-ratio: 1 / 1;
      background-image: url('../img/common/arrow-circle.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

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

    button.next {
      transform: rotate(180deg);
    }
  }
}

/* =====================
  recruit
===================== */
.recruit {
  padding-block: 97px 95px;
  margin-block-end: 131px;
  background-image: url('../img/top/recruit/bg.webp');
  background-repeat: no-repeat;
  background-position: 68.2% center;
  background-size: cover;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 119 * 1vw) calc((100 / 750) * 129 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
    margin-block-end: 0;
    background-image: url('../img/top/recruit/bg_sp.webp');
    background-position: center 0;

    & hgroup {
      color: white;

      & h2 {
        color: white;
      }
    }
  }

  .box {
    display: grid;
    max-inline-size: 430px;
    padding-block: 54px 61px;
    padding-inline: 60px;
    margin-inline: auto 0;
    background: white;
    border-radius: 8px;

    @media not all and (width >=768px) {
      max-inline-size: 100%;
      padding-block: 0;
      padding-inline: 0;
      background: transparent;
    }

    .u-title {
      margin-block-end: 41px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 431 * 1vw);
      }
    }

    p {
      margin-block-end: 48px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 48 * 1vw);
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.76;
        color: white;
      }
    }

    @media not all and (width >=768px) {
      .u-anchor {
        inline-size: calc((100 / 750) * 407 * 1vw);
        margin-inline: auto;
        color: var(--blue);
        background: white;
        border-color: white;

        &::before {
          background-image: url('../img/common/arrow-on.svg');
        }
      }
    }
  }
}

/* =====================
    aside
  ===================== */
.aside {
  --_padding: 60px;

  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: 50px;
  min-block-size: 420px;

  @media not all and (width >=768px) {
    --_padding: calc((100 / 750) * 40 * 1vw);

    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-flow: row;
    gap: 12vw;
    min-block-size: unset;
    padding-top: 17.2vw;
  }

  .wrap {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    inline-size: 100%;
    overflow: hidden;

    @media not all and (width >=768px) {
      grid-template-rows: auto;
      grid-row: auto;
      gap: 6.7vw;
      place-content: flex-end;
      min-block-size: calc((100 / 750) * 600 * 1vw);
    }

    & hgroup {
      gap: 4px;
      align-self: flex-end;
      translate: 0 10px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 4 * 1vw);
        align-self: flex-start;
        translate: 0 0;
      }

      & [lang='en'] {
        display: grid;
        grid-auto-flow: column;
        gap: 20px;
        align-items: baseline;
        justify-content: flex-start;

        @media not all and (width >=768px) {
          gap: calc((100 / 750) * 20 * 1vw);
        }
      }

      & [lang='en']::after {
        display: block;
        inline-size: 40px;
        aspect-ratio: 1 / 1;
        content: '';
        background-image: url('../img/common/arrow.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        & [lang='en']::after {
          inline-size: calc((100 / 750) * 56 * 1vw);
        }
      }
    }

    p {
      padding-block: 17px 0;
      margin-block: calc((1em - 1lh) / 2);
      text-align: left;
      background: white;

      @media not all and (width >=768px) {
        align-self: flex-start;
        padding-block: 4vw 0;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.69;
      }
    }

    picture {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      object-fit: cover;
      translate: -50% -50%;
    }

    a {
      position: absolute;
      top: 0;
      left: 0;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .wrap:nth-child(2n-1) {
    padding-inline-start: var(--_padding);

    & hgroup {
      padding-inline: 0 var(--_padding);
    }

    p {
      padding-inline: 30px 0;

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 50 * 1vw);
      }
    }
  }

  .wrap:nth-child(2n) {
    padding-inline-end: var(--_padding);

    & hgroup {
      padding-inline: 39px 0;

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

    p {
      padding-inline: 0 30px;

      @media not all and (width >=768px) {
        padding-block-end: 5.6vw;
        padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 60 * 1vw);
      }
    }
  }
}

/* =====================
  news
===================== */
.news {
  padding-block: 98px 108px;

  @media not all and (width >= 768px) {
    padding-block: calc((100 / 750) * 119 * 1vw) calc((100 / 750) * 150 * 1vw);
  }

  .u-inner {
    display: grid;
    grid-template: auto 1fr / auto 1fr;
    grid-template-areas:
      'hgroup ul'
      'a ul';
    gap: 0 65px;
    padding-inline: 60px;

    @media not all and (width >= 768px) {
      display: grid;
      grid-template-areas:
        'hgroup a'
        'ul ul';
      grid-template-columns: 1fr auto;
      gap: 0;
      align-items: center;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  .u-inner:has(ul > li:nth-child(-n + 2):last-child) {
    align-items: center;

    ul {
      border-block: 1px solid #e5e5e5;
    }
  }

  .u-inner hgroup {
    grid-area: hgroup;
    margin-block: 84px 59px;

    @media not all and (width >=768px) {
      margin-block: 0;
    }
  }

  .u-inner ul {
    display: grid;
    grid-area: ul;
    grid-auto-columns: minmax(auto, 130px) 1fr;
    justify-content: flex-start;
    font-size: 15px;

    @media not all and (width >=768px) {
      grid-auto-columns: minmax(auto, 1fr);
      font-size: calc((100 / 750) * 24 * 1vw);
    }

    @media not all and (width >= 768px) {
      grid-auto-rows: auto;
      grid-auto-columns: minmax(auto, 1fr);
      grid-auto-flow: row;
      gap: 0;
      justify-content: flex-start;
      margin-block-start: 4.2vw;
    }

    & li {
      position: relative;
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
      gap: 0;
      justify-content: flex-start;
      padding-block: 42px;
      padding-inline: 4px;
      word-break: break-all;
      border-block: 1px solid transparent;

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

      @media not all and (width >=768px) {
        grid-template-rows: 1fr auto;
        grid-template-columns: auto;
        grid-column: auto;
        grid-auto-flow: row;
        gap: 1vw;
        padding-block: 4.4vw 5.9vw;
        padding-inline: 0;
      }
    }

    & li + li {
      border-block-start-color: #e5e5e5;
    }

    & time {
      font-size: 13px;
      color: #888;
      word-break: break-all;

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

    & a::before {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      content: '';
    }
  }

  .u-inner .u-anchor {
    grid-area: a;
    margin-block-start: 53px;

    @media not all and (width >= 768px) {
      margin-block-start: calc((100 / 750) * 89 * 1vw);
      margin-inline: auto;
    }
  }
}

/* =====================
  js-parallax
===================== */
.js-parallax {
  opacity: 0;
  transform: translateY(2em);
  transition: transform 1s ease, opacity 0.4s ease;
}

.js-parallax.on {
  opacity: 1;
  transform: translateY(0);
}