@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);
  }
}

@keyframes zoom {
  0% {
    scale: 1;
  }

  100% {
    scale: 1.15;
  }
}

/* =====================
  main
===================== */
.main:not(:has(.news)) {
  padding-block-end: 160px;

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

/* =====================
  wrap1
===================== */
.wrap[data-id='1'] {
  position: relative;
  overflow: clip;

  /* deco */
  &::before,
  &::after {
    position: absolute;
    display: block flow;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  &::before {
    inset-block-start: 267px;
    inset-inline-start: -239px;
    inline-size: 943px;
    block-size: 845px;
    background-image: url('../img/top/mv/bg01.png');

    @media (width <= 768px) {
      inset-block-start: 96.6vw;
      inset-inline-start: 0;
      inline-size: calc((100 / 390) * 572 / 2 * 1vw);
      block-size: calc((100 / 390) * 761 / 2 * 1vw);
      background-image: url('../img/top/mv/bg01_sp.png');
    }
  }

  &::after {
    inset-block-end: -161px;
    inset-inline-end: -241px;
    inline-size: 1069px;
    block-size: 845px;
    background-image: url('../img/top/mv/bg02.png');

    @media (width <= 768px) {
      inset-block-end: 0;
      inset-inline-end: 0;
      inline-size: calc((100 / 390) * 780 / 2 * 1vw);
      block-size: calc((100 / 390) * 674 / 2 * 1vw);
      background-image: url('../img/top/mv/bg02_sp.png');
    }
  }
}

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

  position: relative;
  z-index: 2;
  block-size: var(--_block-size);
  min-block-size: var(--_block-size);
  overflow: clip;

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

  /* ==== slider ==== */
  .container {
    position: relative;
    inline-size: 1200px;
    block-size: var(--_block-size);
    min-block-size: inherit;
    margin-inline: auto 0;
    overflow: clip;
    pointer-events: none;

    @media (width > 1441px) {
      inline-size: 75%;
    }

    @media (width <= 768px) {
      inline-size: calc((100 / 390) * 342 * 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: center top;
      }
    }

    .zoom img {
      animation: zoom 15s linear 0ms 1 normal both running;
    }
  }

  /* ==== inner ==== */
  .inner {
    position: absolute;
    inset-block-start: 288px;
    inset-inline: 0;
    z-index: 2;
    display: block grid;
    gap: 18px;
    inline-size: 1360px;
    margin-inline: auto;

    @media (width > 1441px) {
      inline-size: 1360px;
    }

    @media (width <= 768px) {
      inset-block-start: 77.1vw;
      gap: 2.4vw;
      inline-size: 100%;
      padding-inline: calc((100 / 390) * 8 * 1vw);
    }

    h1 {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 150px;
      font-weight: 400;

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

    p[lang='en'] {
      padding-inline-start: 80px;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 40px;
      font-weight: 400;

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

    .catch {
      padding-block-start: 21px;
      padding-inline-start: 80px;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;

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

  /* ==== ページネーション ==== */
  .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: 3.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 only screen and (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;
    }
  }
}

/* =====================
  company
===================== */
.company {
  position: relative;
  z-index: 2;
  min-block-size: 1135px;
  padding-block: 220px;

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

  /* ==== inner ==== */
  .inner {
    inline-size: 940px;
    margin-inline: auto;

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

  /* ==== text ==== */
  .text {
    position: relative;

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

    /* ==== en ==== */
    p[lang='en'] {
      position: relative;
      display: block grid;
      margin-block: calc((1em - 1lh) / 2);
      margin-block-start: 19px;
      font-size: 90px;
      font-weight: 400;

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

      span {
        display: block flow;
        margin-block: calc((1em - 1lh) / 2);

        &:nth-child(2 of span) {
          padding-inline-start: 170px;

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

      /* ==== picture ==== */
      .picture {
        position: absolute;
        inset-block-start: 12px;
        inset-inline-start: auto;

        @media (width <= 768px) {
          inset-block-start: 18.4vw;
          inset-inline-start: unset;
          inset-inline-end: 3.9vw;

          & img {
            inline-size: calc((100 / 390) * 150 * 1vw);
            block-size: calc((100 / 390) * 68 * 1vw);
            object-fit: cover;
          }
        }
      }
    }

    /* ==== catch ==== */
    .catch {
      inline-size: fit-content;
      margin-block-start: -52px;
      margin-inline: auto 9px;
      font-size: 27px;
      font-weight: 500;

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

  /* ==== img ==== */
  .img {
    position: relative;
    max-inline-size: 1440px;
    margin-inline: auto;
    pointer-events: none;

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

    .picture[data-id='1'] {
      position: absolute;
      inset-block-start: -448px;
      inset-inline-end: -250px;

      @media (width <= 768px) {
        inset-block-start: 5vw;
        inset-inline-start: 0;
        inset-inline-end: unset;
        z-index: 2;
        inline-size: calc((100 / 390) * 157 * 1vw);
        block-size: calc((100 / 390) * 93 * 1vw);
      }
    }

    .picture[data-id='2'] {
      position: absolute;
      inset-block-end: -417px;
      inset-inline-start: -250px;

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

    .picture[data-id='3'] {
      position: absolute;
      inset-block-end: -280px;
      inset-inline-end: -170px;

      @media (width <= 768px) {
        inset-block-start: 57.6vw;
        inset-block-end: unset;
        inset-inline-end: 4.3vw;
        z-index: 3;
        inline-size: calc((100 / 390) * 98 * 1vw);
        block-size: calc((100 / 390) * 84 * 1vw);
      }
    }
  }

  /* ==== body ==== */
  .body {
    display: block grid;
    gap: 41px;
    inline-size: 456px;
    margin-block-start: 84px;
    margin-inline: auto 8px;
    isolation: isolate;

    @media (width <= 768px) {
      gap: 10.2vw;
      inline-size: 100%;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: 86.9vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    @media (width <= 768px) {
      margin-inline: auto;
    }
  }
}

/* =====================
  business
===================== */
.business {
  position: relative;
  z-index: 3;
  padding-block: 171px 179px;
  background-image: url('../img/top/business/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width > 768px) {
    background-attachment: fixed;
  }

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

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

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

    h2 {
      font-size: 27px;

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

  /* ==== wrap ==== */
  .wrap {
    display: block flex;
    block-size: 650px;
    margin-block-start: 46px;
    overflow: clip;
    background-image: url('../img/top/business/01.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 8px;

    @media (width <= 768px) {
      flex-direction: column;
      justify-content: center;
      block-size: 100%;
      margin-block-start: 12.8vw;
      background-image: unset;
      border-radius: calc((100 / 390) * 8 * 1vw);
    }

    /* ==== .unit ==== */
    .unit {
      inline-size: 50%;

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

    /* ==== unit data-id='1' ==== */
    .unit[data-id='1'] {
      position: relative;
      z-index: 2;
      display: block flex;
      place-content: center;
      align-items: center;

      @media (width <= 768px) {
        block-size: calc((100 / 390) * 300 * 1vw);
        background-image: url('../img/top/business/01_sp.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      p {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 0;
        inline-size: 660px;
        padding-block: 16px;
        font-size: 27px;
        text-align: center;
        background: rgb(255 255 255 / 90%);
        translate: 0 -50%;

        @media (width <= 768px) {
          inset-block-start: unset;
          inset-block-end: 0;
          inline-size: 100%;
          padding-block: calc((100 / 390) * 13.9 * 1vw) calc((100 / 390) * 14.6 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
          font-weight: 500;
          translate: 0 0;
        }
      }
    }

    .unit[data-id='2'] {
      position: relative;
      color: white;

      &::before {
        position: absolute;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
        content: '';
        background: rgb(0 0 0 / 40%);
        background-blend-mode: multiply;
      }

      &::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: calc(100% - 40px);
        block-size: calc(100% - 40px);
        content: '';
        border: 1px solid rgb(255 255 255 / 90%);
        border-radius: 4px;
        translate: -50% -50%;

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

      .content {
        display: block grid;
        gap: 19px;
        padding-block-start: 109px;
        padding-inline: 90px;
        isolation: isolate;

        @media (width <= 768px) {
          gap: 5.8vw;
          padding-block: 14.8vw 16.8vw;
          padding-inline: 8.2vw;
        }
      }

      p[data-family='serif'] {
        font-size: 28px;
        font-weight: 500;
        line-height: 1.6;

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

      .body {
        padding-block-start: 11px;

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

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

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

/* =====================
  recruit
===================== */
.recruit {
  min-block-size: 1252px;
  padding-block: 437px 0;

  @media (width <= 768px) {
    min-block-size: 0;
    padding-block: 85.6vw;
  }

  /* ==== .inner ==== */
  .inner {
    position: relative;
    max-inline-size: 1440px;
    margin-inline: auto;

    /* ==== picture ==== */
    .picture {
      position: absolute;
      pointer-events: none;
    }

    .picture[data-id='1'] {
      inset-block-start: -256px;
      inset-inline-start: 387px;

      @media (width <= 768px) {
        inset: unset;
        inset-block-start: -56.3vw;
        inset-inline-end: 0;
        z-index: 2;

        img {
          inline-size: calc((100 / 390) * 248 / 2 * 1vw);
          block-size: calc((100 / 390) * 392 / 2 * 1vw);
        }
      }
    }

    .picture[data-id='2'] {
      inset-block-start: 4px;
      inset-inline-start: 0;

      @media (width <= 768px) {
        inset: unset;
        inset-block-start: -31vw;
        inset-inline-start: 0;
        z-index: 2;

        img {
          inline-size: calc((100 / 390) * 390 / 2 * 1vw);
          block-size: calc((100 / 390) * 291 / 2 * 1vw);
        }
      }
    }

    .picture[data-id='3'] {
      inset-block-start: 437px;
      inset-inline-start: 54px;

      @media (width <= 768px) {
        inset: unset;
        inset-block-start: -62.7vw;
        inset-inline-start: 19.2vw;

        img {
          inline-size: calc((100 / 390) * 423 / 2 * 1vw);
          block-size: calc((100 / 390) * 319 / 2 * 1vw);
        }
      }
    }

    .picture[data-id='4'] {
      inset-block-start: -127px;
      inset-inline-end: 0;

      @media (width <= 768px) {
        inset: unset;
        inset-block-end: -62.2vw;
        inset-inline-start: 28.2vw;
        z-index: 2;

        img {
          inline-size: calc((100 / 390) * 281 / 2 * 1vw);
          block-size: calc((100 / 390) * 357 / 2 * 1vw);
        }
      }
    }

    .picture[data-id='5'] {
      inset-block-start: -2px;
      inset-inline-end: 154px;

      @media (width <= 768px) {
        inset: unset;
        inset-block-end: -45.4vw;
        inset-inline-end: 4vw;

        img {
          inline-size: calc((100 / 390) * 300 / 2 * 1vw);
          block-size: calc((100 / 390) * 452 / 2 * 1vw);
        }
      }
    }

    .picture[data-id='6'] {
      inset-block-start: 470px;
      inset-inline-end: 379px;

      @media (width <= 768px) {
        inset: unset;
        inset-block-end: -43.7vw;
        inset-inline-start: 0;
        z-index: 2;

        img {
          inline-size: calc((100 / 390) * 270 / 2 * 1vw);
          block-size: calc((100 / 390) * 270 / 2 * 1vw);
        }
      }
    }
  }

  /* ==== content ==== */
  .content {
    position: relative;
    z-index: 2;
    display: block grid;
    gap: 29px;
    text-align: center;

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

    /* ==== hgroup ==== */
    hgroup {
      display: block grid;
      gap: 8px;
      inline-size: fit-content;
      margin-inline: auto;

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

      [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 150px;
        font-weight: 400;

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

      h2 {
        font-size: 40px;
        font-weight: 500;

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

    /* ==== p ==== */
    p {
      margin-block-start: -8px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: -0.6vw;
        font-size: calc((100 / 390) * 15 * 1vw);
        text-align: left;

        .indent {
          padding-inline-start: 0.8vw;
        }
      }
    }

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

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

/* =====================
  news
===================== */
.news {
  position: relative;
  padding-block: 356px 0;
  overflow: hidden;

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

  &::before {
    position: absolute;
    inset-block-start: 17px;
    inset-inline-start: 50%;
    inline-size: 1880px;
    block-size: 845px;
    pointer-events: none;
    content: '';
    background-image: url('../img/top/news/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    translate: -50% 0;

    @media (width <= 768px) {
      inset-block-start: 23.4vw;
      inline-size: calc((100 / 390) * 780 / 2 * 1vw);
      block-size: calc((100 / 390) * 761 / 2 * 1vw);
      background-image: url('../img/top/news/bg_sp.png');
    }
  }

  /* ==== .u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: auto 1fr;
    gap: 0 165px;
    max-inline-size: 1120px;
    padding-block-start: 9px;
    margin-inline: auto;
    isolation: isolate;

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    align-self: flex-start;
  }

  /* ==== u-news ==== */
  .u-news {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    align-self: flex-start;
    margin-block-start: 65px;

    @media (width > 768px) {
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      min-block-size: 384px;

      li {
        align-self: flex-start;
      }
    }

    @media (width <= 768px) {
      inline-size: 100%;
      margin-block-start: -4.3vw;
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    align-self: flex-start;
    margin-block-start: 108px;

    @media (width <= 768px) {
      align-self: center;
      margin-block-start: 10vw;
    }
  }
}

/* =====================
  js-parallax
===================== */
.mv {
  .js-parallax[data-animation='fade'] {
    opacity: 0;
    filter: blur(1rem);
    transition: all 1000ms var(--slideInBezier) var(--_delay, 0ms);

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

.company {
  .js-parallax[data-animation='fade'] {
    opacity: 0;
    filter: blur(1rem);
    transition: all 1000ms var(--slideInBezier) var(--_delay, 0ms);

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

.recruit {
  .js-parallax {
    [data-animation='fade'] {
      opacity: 0;
      filter: blur(1rem);
      transition: all 1000ms var(--slideInBezier) var(--_delay, 0ms);
    }

    &.on {
      [data-animation='fade'] {
        opacity: 1;
        filter: blur(0);
      }
    }
  }
}

.js-parallax[data-animation='slideUp'] {
  --_transition: transform 1s var(--slideInBezier), opacity 0.4s var(--slideInBezier);

  opacity: 0;
  transform: translateY(1.5rem);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

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