@charset "UTF-8";

/* =====================
  animation
===================== */
@keyframes circle {
  0% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }

  1% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }

  79% {
    stroke-dashoffset: 0;
  }

  80% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: calc(47 * 2 * pi * 1px);
  }
}

@keyframes marquee {
  100% {
    translate: -100%;
  }
}

@keyframes hover {
  0% {
    opacity: 0.1;
    filter: blur(0.2em);
    transform: translateY(0.25em);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* =====================
  mv
===================== */
.mv {
  --_block-size: calc(100svh + 58px);

  @media only screen and (width <= 768px) {
    --_block-size: calc(100svh + 27.1vw);
  }

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

  /* ==== swiper ==== */
  .swiper {
    position: absolute;
    inset: auto;
    z-index: 1;
    inline-size: 100%;
    block-size: var(--_block-size);

    .swiper-wrapper {
      block-size: inherit;
    }

    .swiper-slide {
      block-size: inherit;

      & picture {
        block-size: inherit;
      }
    }

    & img {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      object-fit: cover;
      translate: -50% -50%;
    }
  }

  /* ==== inner ==== */
  .inner {
    position: relative;
    display: block grid;
    grid-auto-rows: 1fr auto;
    gap: 33px;
    min-block-size: var(--_block-size);
    max-block-size: var(--_max-block-size);
    padding-block-end: 124px;
    padding-inline: 40px;

    @media only screen and (width <= 768px) {
      gap: 3.5vw;
      padding-block-end: 44.6vw;
      padding-inline: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 0 * 1vw);
      line-height: 1.5;
    }

    /* ==== catch ==== */
    .catch {
      z-index: 2;
      align-self: flex-end;
      padding-inline-start: 40px;
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--yumin);
      font-size: 64px;
      font-weight: 600;
      line-height: 1.6;
      color: white;
      text-shadow: 0 0 67px #000;

      @media only screen and (width <= 768px) {
        padding-inline-start: unset;
        font-size: calc((100 / 390) * 37 * 1vw);
        line-height: 1.5;
        text-shadow: 0 0 calc((100 / 390) * 67 * 1vw) #000;
      }
    }

    /* ==== body ==== */
    .body {
      z-index: 2;
      align-self: flex-start;
      padding-inline-start: 40px;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;
      line-height: 1.8;
      color: white;
      translate: 0 1px;

      @media only screen and (width <= 768px) {
        padding-inline-start: unset;
      }

      & span {
        padding-inline-start: 4px;

        @media only screen and (width <= 768px) {
          padding-inline-start: 0;
        }
      }
    }

    /* =====================
      pagination
    ===================== */
    .pagination {
      position: absolute;
      inset-block-start: 492px;
      inset-inline-end: 35px;
      z-index: 20;

      @media only screen and (width <= 768px) {
        inset-block-start: 164vw;
        inset-inline-start: calc((100 / 390) * 16 * 1vw);
        inset-inline-end: unset;
      }

      .pagination-inner {
        display: flex;
        flex-direction: column;
        gap: 14px;

        @media only screen and (width <= 768px) {
          flex-direction: row;
          gap: 5.6vw;
        }
      }

      & svg {
        position: relative;
        inline-size: 88px;
        aspect-ratio: 1 / 1;
        transform: rotate(90deg);

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

        &.animation circle {
          animation: circle 6000ms ease 0ms infinite normal forwards running;
        }
      }

      & circle {
        fill: none;
        stroke: #fff;
        stroke-width: 2px;

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

        &.dummy {
          stroke-opacity: 0.28;

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

        &:not(.dummy) {
          stroke-opacity: 1;
          stroke-dasharray: calc(47 * 2 * pi * 1px);
          stroke-dashoffset: calc(47 * 2 * pi * 1px);
          will-change: stroke-dashoffset;
        }

        &.point {
          opacity: 1;
          fill: white;
          stroke-width: 0;
        }
      }
    }
  }
}

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

  @media only screen and (width <= 768px) {
    background-image: url('../img/top/company/bg_sp.webp');
  }

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 71 * 1vw) calc((100 / 390) * 80 * 1vw);
  }

  /* ==== marquee ==== */
  .marquee {
    position: absolute;
    inset-block-start: 50px;
    inset-inline-start: 10px;
    display: block flex;
    margin-block: calc((1em - 1lh) / 2);
    font-family: var(--outfit);
    font-size: 120px;
    font-weight: 400;
    line-height: 1;
    color: color-mix(in srgb, var(--primary) 8%, transparent);
    white-space: nowrap;
    pointer-events: none;

    @media only screen and (width <= 768px) {
      inset-block-start: 15.8vw;
      font-size: calc((100 / 390) * 80 * 1vw);
    }

    &::before,
    &::after {
      display: block;
      margin-block: calc((1em - 1lh) / 2);
      line-height: 1;
      content: attr(data-text);
      animation: marquee 300s linear infinite;
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 512px 1fr;
    align-items: flex-start;
    justify-content: space-between;
    padding-inline-start: 40px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== head ==== */
  .head {
    position: relative;
    grid-area: 1 / 1 / 2 / 2;
    margin-block-start: 75px;
    font-family: var(--yumin);
    font-size: 22px;
    font-weight: 600;

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

    & span::before,
    & span::after {
      position: absolute;
      inset-block-start: 47%;
      display: block;
      pointer-events: none;
      content: '';
      translate: 0 -50%;
    }

    & span::before {
      inset-inline: -100vw 100%;
      margin-inline-end: 20px;
      border-block-start: 1px solid var(--primary);
    }

    @media only screen and (width <= 768px) {
      & span::before {
        inset-block-start: 50%;
        margin-inline-end: calc((100 / 390) * -6 * 1vw);
        border-block-start: 2px solid var(--primary);
      }
    }

    & span::after {
      inset-inline-start: -20px;
      inline-size: 4.031px;
      aspect-ratio: 1 / 1;
      background-color: var(--primary);
    }

    @media only screen and (width <= 768px) {
      & span::after {
        inset-block-start: 50%;
        inset-inline-start: 1.2vw;
        inline-size: calc((100 / 390) * 4.031 * 1vw);
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-area: 2 / 1 / 3 / 2;
    margin-block: calc((1em - 1lh) / 2);
    margin-block-start: 13px;
    font-family: var(--yumin);
    font-size: 40px;
    font-weight: 600;

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

    & span {
      display: block flow;
      line-height: 2;
    }
  }

  /* ==== body ==== */
  .body {
    display: block flow;
    grid-area: 3 / 1 / 4 / 2;
    margin-block: calc((1em - 1lh) / 2);
    margin-block-start: 38px;

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

  /* ==== anchor ==== */
  .u-anchor {
    grid-area: 4 / 1 / 5 / 2;
    margin-block-start: 54px;

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

  /* ==== img ==== */
  .img {
    position: relative;
    grid-area: 1 / 2 / 6 / 3;
    translate: 254px 0;

    @media only screen and (width <= 768px) {
      inline-size: 100%;
      margin-block-start: calc((100 / 390) * 64 * 1vw);
      translate: unset;
    }

    & img {
      position: relative;
      border-radius: 8px;

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

      &:first-child {
        @media only screen and (width <= 768px) {
          display: block flow;
          inline-size: calc((100 / 390) * 305 * 1vw);
          margin-inline: auto 0;
          translate: -1vw 0;
        }
      }

      &:last-child {
        z-index: 2;
        margin-block-start: -96px;
        translate: -196px 0;

        @media only screen and (width <= 768px) {
          margin-block-start: unset;
          translate: unset;
        }

        @media only screen and (width <= 768px) {
          inline-size: calc((100 / 390) * 236 * 1vw);
          margin-block-start: -5.3vw;
        }
      }
    }
  }
}

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

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

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 84 * 1vw) calc((100 / 390) * 120 * 1vw);
    background-image: url('../img/top/products/bg_sp.webp');
  }

  /* ==== u-inner ==== */
  .u-inner {
    padding-inline: 40px;

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

  /* ==== u-head ==== */
  .u-head {
    .head {
      color: white;
    }
  }

  /* ==== contents ==== */
  .contents {
    display: block grid;
    grid-template-columns: 293px 490px 510px;
    align-items: flex-start;
    margin-block-start: 46px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      margin-block-start: 19.1vw;
    }
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    grid-area: 1 / 2 / 3 / 3;
    inline-size: 490px;
    margin-block-start: 21px;
    margin-inline-start: -52px;

    @media only screen and (width <= 768px) {
      inline-size: 100%;
      margin-block-start: 0;
      margin-inline-start: 0;
    }

    & li {
      border-block-start: 1px solid white;
      border-block-end: 1px solid transparent;
      transition: background 250ms ease 0s;
      will-change: background;

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

      &.active {
        @media (width > 768px) {
          background: color-mix(in srgb, white 8%, transparent);
        }
      }
    }

    & a {
      position: relative;
      display: block grid;
      gap: 13px;
      padding-block: 19px 21px;
      padding-inline: 8px;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 13 * 1vw);
        padding-block: calc((100 / 390) * 19 * 1vw) calc((100 / 390) * 21 * 1vw);
        padding-inline: calc((100 / 390) * 8 * 1vw);
      }

      .title {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 24px;

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

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

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

      &::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 8px;
        inline-size: 21px;
        aspect-ratio: 21 / 20;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-arrow-link);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        translate: 0 -50%;
      }

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

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-area: 2 / 3 / 3 / 4;
    margin-block-start: -18px;
    translate: 26px 0;

    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 64 * 1vw);
      margin-inline: auto;
      translate: unset;
    }
  }

  /* ==== thumb01 ==== */
  .thumb01 {
    grid-area: 1 / 3 / 2 / 4;
    border-radius: 8px;
    translate: 27px 0;
    transition: all 250ms ease 0s;

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

  /* ==== thumb02 ==== */
  .thumb02 {
    display: block;
    grid-area: 1 / 1 / 3 / 2;
    margin-block-start: 321px;
    border-radius: 8px;
    translate: -121px 0;
    transition: all 250ms ease 0s;

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

  :where(.thumb01, .thumb02).hover {
    animation: hover 600ms var(--easeOutBounce) 0ms 1 normal none running;
  }
}

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

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 681px auto;
    gap: 20.3px 64px;
    align-items: flex-start;
    max-inline-size: 1200px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
    }
  }

  /* ==== u-head ==== */
  .u-head {
    grid-area: 1 / 2 / 2 / 3;
    margin-block: 42px calc((1em - 1lh) / 2);

    @media only screen and (width <= 768px) {
      gap: 1.7vw;
      margin-block: 0 calc((1em - 1lh) / 2);
    }
  }

  /* ==== img ==== */
  .img {
    display: block grid;
    grid-area: 1 / 1 / 6 / 2;
    grid-auto-flow: column;
    justify-content: space-between;
    block-size: 662px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 10.79 * 1vw);
      block-size: calc((100 / 390) * 340 * 1vw);
      margin-block-start: 11vw;
    }

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

    .picture[data-id='1'] {
      display: block flow;
      align-self: flex-end;
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-area: 2 / 2 / 3 / 3;
    margin-block-start: 26px;
    font-family: var(--yumin);
    font-size: 28px;
    font-weight: 600;

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

    & span {
      display: block flow;
    }
  }

  /* ==== body ==== */
  .body {
    grid-area: 3 / 2 / 4 / 3;
    margin-block: calc((1em - 1lh) / 2);

    @media only screen and (width <= 768px) {
      line-height: 1.82;
    }
  }

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

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

.mv {
  .catch {
    opacity: 0;
    transform: translateY(0.75em);
    transition: var(--_transition);
  }

  .body {
    opacity: 0;
    transform: translateY(0.75em);
    transition: var(--_transition);
    transition-delay: 200ms, 400ms;
  }

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

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

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

  .catch {
    opacity: 0;
    transform: translateY(0.75em);
    transition: var(--_transition);
  }

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

  .img {
    & img {
      opacity: 0;
      transform: translateY(0.75em);
      transition: var(--_transition);
      transition-delay: var(--_delay);
    }
  }

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

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

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

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

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

  .catch {
    opacity: 0;
    transform: translateY(0.75em);
    transition: var(--_transition);
  }

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

  .img {
    & img {
      opacity: 0;
      transform: translateY(0.75em);
      transition: var(--_transition);
      transition-delay: var(--_delay);
    }
  }

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

    .u-head {
      opacity: 1;
      transform: translateY(0);
    }

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

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

/* =====================
  lang="en"
===================== */
html[lang='en'] {
  .mv {
    .inner {
      @media only screen and (width <= 768px) {
        padding-block-start: calc((100 / 390) * 323 * 1vw);
      }
    }

    .catch {
      line-height: 1.5;

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

      @media only screen and (width <= 768px) {
        padding-inline: calc((100 / 390) * 8 * 1vw) 0;
        font-size: calc((100 / 390) * 32 * 1vw);
        font-weight: 600;
        line-height: 1.5;
        word-break: normal;
      }
    }

    .body {
      @media (width > 768px) {
        translate: 11px -6px;
      }

      @media only screen and (width <= 768px) {
        padding-block-start: 0.2vw;
        padding-inline: calc((100 / 390) * 8 * 1vw);
        font-size: calc((100 / 390) * 14 * 1vw);
        word-break: normal;

        & span {
          padding-inline-start: 1vw;
        }
      }
    }
  }

  .company {
    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 34 * 1vw) calc((100 / 390) * 80 * 1vw);
    }

    .head {
      @media (width > 768px) {
        margin-block-start: 12px;
      }
    }

    .catch {
      @media (width > 768px) {
        margin-block-start: 23px;
      }

      & span {
        @media only screen and (width <= 768px) {
          display: inline;
        }
      }

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

    .catch span {
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 40 * 1vw);
        line-height: 1.45;
        word-break: normal;
      }
    }

    .body {
      margin-block-start: 47px;
      word-break: normal;

      @media only screen and (width <= 768px) {
        margin-block-start: 8.5vw;
      }
    }
  }

  .products {
    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 94 * 1vw) calc((100 / 390) * 120 * 1vw);
    }

    .list {
      & a {
        padding-block: 33.5px;

        @media only screen and (width <= 768px) {
          padding-block: calc((100 / 390) * 33 * 1vw);
          padding-inline-end: 17.1vw;
          font-weight: 350;
          line-height: 1.4;
        }
      }

      & li:last-child a {
        @media only screen and (width <= 768px) {
          padding-block: calc((100 / 390) * 16.3 * 1vw);
        }
      }
    }
  }
}