@charset "UTF-8";

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

  position: relative;
  inline-size: var(--inner-width);
  block-size: var(--_block-size);
  margin-block-start: 16px;
  margin-inline: auto;
  overflow: clip;

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

    margin-block-start: calc((100 / 390) * 8 * 1vw);
  }

  /* ==== .u-hero ==== */
  .swiper-slide {
    @media (width > 768px) {
      block-size: 832px;
    }

    picture {
      overflow: clip;
    }
  }

  /* ==== inner ==== */
  .inner {
    position: relative;
    z-index: 2;
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: max-content;
    block-size: inherit;
    min-block-size: inherit;
    padding-block-start: 541px;
    padding-inline: 49px;
    color: white;

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

    >* {
      position: relative;
      z-index: 2;
    }

    /* ==== ( text ) ==== */
    h1 {
      align-self: flex-start;
      inline-size: fit-content;
      padding-block: 5px;
      padding-inline: 15px;
      font-size: 14px;
      background: rgb(168 168 168 / 80%);
      border-radius: calc(infinity * 1px);

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

    /* ==== text z text ==== */
    .catch {
      position: relative;
      margin-block-start: 22px;

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

      p {
        display: block grid;
        gap: 24px;
        font-size: 64px;
        line-height: 1;
        letter-spacing: 1.92px;
        text-shadow: 0 4px 4px rgb(0 0 0 / 25%);

        @media (width <=768px) {
          gap: 4.5vw;
          font-size: calc((100 / 390) * 38 * 1vw);
          letter-spacing: calc((100 / 390) * 1.14 * 1vw);
          text-shadow: none;
        }

        span+span {
          padding-inline-start: 190px;
          font-feature-settings: 'palt' on;

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

      [lang='en'] {
        position: absolute;
        inset-block-start: 96px;
        inset-inline-start: 0;
        font-size: 17px;
        line-height: 1.6;

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

  /* ==== banner ==== */
  .banner {
    position: absolute;
    inset-block-start: 689px;
    inset-inline-end: 48px;
    display: block flex;
    padding-block: 24.3px;
    padding-inline: 33px 26px;
    color: var(--color-text-primary);
    background: var(--gray_bg, #f1f1f1);
    border-radius: 8px;

    @media (width <=768px) {
      inset: unset;
      inset-block-start: 165.5vw;
      inset-inline: 0;
      justify-content: center;
      inline-size: calc((100 / 390) * 326 * 1vw);
      padding-block: 5.2vw;
      padding-inline: calc((100 / 390) * 24 * 1vw);
      margin-inline: auto;
      font-size: calc((100 / 390) * 15 * 1vw);
      border-radius: calc((100 / 390) * 8 * 1vw);
    }

    &::after {
      position: absolute;
      inset-block-start: 33px;
      inset-inline-end: 30px;
      inline-size: 14px;
      aspect-ratio: 14 / 12;
      content: '';
      background-color: var(--lightblue);
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;

      @media (width <=768px) {
        inset-block-start: 10.5vw;
        inset-inline-end: 5.5vw;
        inline-size: calc((100 / 390) * 14.3 * 1vw);
      }
    }

    a {
      position: absolute;
      inset-block: 0;
      inset-inline: 0;
    }

    p {
      display: block flex;
      gap: 11px;
      inline-size: fit-content;
      padding-inline-end: 23px;
      margin-inline-end: 41px;
      font-weight: 400;
      border-inline-end: 1px solid var(--lightblue);

      @media (width <=768px) {
        gap: calc((100 / 390) * 16.4 * 1vw);
        padding-inline-end: 9vw;
        margin-inline-end: 8.9vw;
        border-inline-end: 1px solid var(--gray200);
      }

      &::before {
        flex-shrink: 0;
        inline-size: 21px;
        aspect-ratio: 21 / 30;
        content: '';
        background-color: var(--lightblue);
        mask-image: var(--icon-award);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;

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

/* =====================
  news
===================== */
.news {
  max-inline-size: var(--inner-width);
  padding-block: 32px;
  padding-inline-start: 24px;
  margin-inline: auto;
  border-block-end: 1px solid var(--gray_border);

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

  /* ==== contents ==== */
  .contents {
    position: relative;
    display: block grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    gap: 79px;
    align-items: center;
    justify-content: flex-start;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    /* lang="en" */
    [lang='en'] {
      font-size: 40px;
      line-height: 1.8;
      color: var(--lightblue, #3a86c5);

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

    a {
      position: relative;
      display: block flex;
      gap: 20px;
      align-items: center;
      inline-size: 100%;
      block-size: 100%;
      padding-inline-end: 80px;

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

      &::after {
        position: absolute;
        inset-block: auto;
        inset-inline-end: 24px;
        z-index: 1;
        display: block grid;
        align-items: center;
        inline-size: 48px;
        aspect-ratio: 1 / 1;
        content: '';
        background:
          url('../img/_common/icon/arrow-white.svg') no-repeat center / 13.41px 12px,
          var(--lightblue);
        border-radius: calc(infinity * 1px);
        transition: all 250ms ease 0s;

        @media (width <=768px) {
          inset-block-start: -14.2vw;
          inset-inline-end: -0.2vw;
          inline-size: calc((100 / 390) * 40 * 1vw);
          background:
            url('../img/_common/icon/arrow-white.svg') no-repeat center / calc((100 / 390) * 12.42 * 1vw) calc((100 / 390) * 10 * 1vw),
            var(--lightblue);
        }
      }

      @media (any-hover: hover) {
        &:hover {
          &::after {
            transform: translateX(25%);
          }
        }
      }
    }

    /* ==== time ==== */
    time {
      font-family: var(--title);
      font-size: 16px;
      color: var(--gray300, #717171);

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

    /* ==== title ==== */
    .title {
      font-weight: 400;

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

/* =====================
  company
===================== */
.company {
  inline-size: var(--inner-width);
  padding-block: 56px 104px;
  margin-inline: auto;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 1212fr 788fr;
    gap: 16px;

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

  /* ==== img ==== */
  .img {
    position: relative;
    order: 2;
    min-block-size: 595px;
    overflow: clip;

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

    img {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      z-index: -1;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      object-fit: cover;
      object-position: center 67%;
      translate: -50% -50%;

      @media (width <=768px) {
        object-position: center -64.7vw;
      }
    }
  }

  /* ==== text ==== */
  .text {
    display: block grid;
    gap: 56px;
    align-content: start;
    order: 1;
    padding-block: 63px;
    padding-inline: 40px;

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

  /* ==== catch ==== */
  .catch {
    font-size: 32px;
    font-weight: 500;

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

  /* ==== body ==== */
  .body {
    margin-block-start: -16px;

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

  /* ==== u-anchor ==== */
  .u-anchor {
    @media (width <=768px) {
      margin-block-start: 0.8vw;
    }
  }
}

/* =====================
  product
===================== */
.product {
  inline-size: var(--inner-width);
  padding-block: 55px 104px;
  margin-inline: auto;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-content: flex-start;
    padding-inline: 24px;

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-block-start: 40px;

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

  /* ==== u-product ==== */
  .u-product {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    margin-block-start: 32px;

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

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 39px;
    margin-inline: auto 0;

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

/* =====================
  recruit
===================== */
.recruit {
  inline-size: var(--inner-width);
  padding-block: 55px 104px;
  margin-inline: auto;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 55px;
    align-content: flex-start;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 9.6vw;
    }

    .u-hgroup {
      padding-inline: 24px;

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

  /* ==== contents ==== */
  .contents {
    display: block grid;
    grid-template-columns: 742fr 788fr;
    gap: 16px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-1);
    }

    .text {
      display: block grid;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      gap: 40px;
      align-content: flex-start;
      order: 1;
      padding-block: 64px;
      padding-inline: 40px;

      @media (width <=768px) {
        gap: 6.2vw;
        order: 2;
        padding-block: 9.8vw 12.2vw;
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }
    }

    /* ==== catch ==== */
    .catch {
      font-size: 32px;
      font-weight: 500;

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

    /* ==== img ==== */
    .img {
      position: relative;
      grid-row: 1 / 3;
      grid-column: 2 / 3;
      order: 2;

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

      img {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        z-index: -1;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
        object-fit: cover;
        object-position: center 67%;
        translate: -50% -50%;
      }
    }

    .u-anchor {
      margin-block-start: 17px;

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

    /* ==== links ==== */
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 3px 33px;
      align-content: flex-start;
      order: 3;
      padding-block: 66px;
      padding-inline: 40px;
      color: white;
      background: var(--lightblue);

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        order: 3;
        padding-block: var(--nudge-6) 11.9vw;
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }

      li {
        overflow: clip;

        @media (width > 768px) {
          box-shadow:
            -1px 0 0 1px var(--lightblue),
            1px 0 0 1px var(--lightblue),
            0 1px 0 1px white,
            0 -1px 0 1px white;
        }

        @media (width <=768px) {
          border-block-start: 1px solid white;
          border-block-end: 1px solid transparent;

          &:last-child {
            border-block-end: 1px solid white;
          }
        }

        transition: all 250ms ease 0s;

        @media (any-hover: hover) {
          &:hover {
            background: white;
            box-shadow:
              -1px 0 0 1px white,
              1px 0 0 1px white,
              0 1px 0 1px white,
              0 -1px 0 1px white;

            a::after {
              background: url('../img/_common/icon/arrow-blue.svg') no-repeat center / 12px 10px;
              border: 1px solid var(--lightblue);
              translate: 25% 0;
            }
          }
        }

        a {
          position: relative;
          display: block grid;
          grid-template-columns: 1fr auto;
          padding-block: 13.6px;
          padding-inline: 16px;
          font-weight: 500;

          @media (width > 768px) {
            border-block-end: 1px solid transparent;
          }

          @media (width <=768px) {
            padding-block: 3.8vw;
            padding-inline: var(--nudge-2);
          }

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

          &::after {
            inline-size: 32px;
            aspect-ratio: 1 / 1;
            color: white;
            content: '';
            background: url('../img/_common/icon/arrow-white.svg') no-repeat center / 12px 10px;
            border: 1px solid currentcolor;
            border-radius: calc(infinity * 1px);
            transition: all 250ms ease 0s;

            @media (width <=768px) {
              inline-size: calc((100 / 390) * 30 * 1vw);
              background: url('../img/_common/icon/arrow-white.svg') no-repeat center / calc((100 / 390) * 11.42 * 1vw) calc((100 / 390) * 9 * 1vw);
              translate: 0.3vw 0;
            }
          }
        }
      }
    }
  }
}

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

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

[data-parallax='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);
  }
}