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

/* =====================
  mv
===================== */
.mv {
  --_height: 692px;

  @media (width <= 768px) {
    --_height: calc((100 / 750) * 1044 * 1vw);
  }

  position: relative;
  display: block grid;
  block-size: var(--_height);
  overflow: clip;

  /* ==== img ==== */
  .img {
    position: absolute;
    inset: 0;
    z-index: 1;
    block-size: var(--_height);
    pointer-events: none;

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

    .picture {
      position: relative;
      display: block flow;
      block-size: inherit;
      pointer-events: none;

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

  /* ==== text ==== */
  .text {
    position: relative;
    z-index: 2;
    display: block grid;
    gap: 20px;
    align-items: flex-start;
    block-size: fit-content;
    padding-block: 450px 0;
    color: white;
    pointer-events: none;

    @media (width <= 768px) {
      gap: calc((100 / 750) * 23 * 1vw);
      padding-block: 73vw;
      padding-inline: calc((100 / 750) * 20 * 1vw);
    }

    & p {
      inline-size: fit-content;
      margin-block: calc((1em - 1lh) / 2);
      line-height: 1;

      @media (width > 768px) {
        background: linear-gradient(90deg, rgb(51 80 143 / 90%) 30.76%, rgb(245 245 245 / 14%) 139.79%);
      }

      @media (width <= 768px) {
        display: block grid;
        gap: 1vw;

        & span {
          display: block grid;
          padding-block: 3.1vw;
          padding-inline: 5.4vw;
          background: linear-gradient(90deg, rgb(51 80 143 / 90%) 30.76%, rgb(245 245 245 / 14%) 139.79%);
        }
      }
    }

    .catch {
      padding-block: 18px;
      padding-inline: 40px;
      font-size: 36px;
      font-weight: 700;

      @media (width <= 768px) {
        display: block grid;
        gap: calc((100 / 750) * 20 * 1vw);
        padding-block: 0;
        padding-inline: 0;
        font-size: calc((100 / 750) * 48 * 1vw);
      }
    }

    & [lang='en'] {
      padding-block: 10px;
      padding-inline: 40px;
      font-family: var(--gloock);
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 1px;
      text-shadow: 0 0 21px rgb(22 35 46 / 50%);

      @media (width <= 768px) {
        display: block grid;
        gap: calc((100 / 750) * 20 * 1vw);
        padding-block: 0;
        padding-inline: 0;
        font-size: calc((100 / 750) * 24 * 1vw);
        letter-spacing: calc((100 / 750) * 1.2 * 1vw);
        text-shadow: 0 0 calc((100 / 750) * 21 * 1vw) rgb(22 35 46 / 50%);

        & span {
          padding-block: 1.6vw;
        }
      }
    }
  }

  /* ==== controller ==== */
  .controller {
    @media (width > 768px) {
      position: absolute;
      inset: 0;
      z-index: 3;
      inline-size: 1300px;
      block-size: var(--_height);
      margin-inline: auto;
      pointer-events: none;
    }
  }

  /* ==== pagination ==== */
  .pagination {
    position: absolute;
    inset-block-start: 589px;
    inset-inline-end: 104px;
    z-index: 3;
    pointer-events: none;

    @media (width <= 768px) {
      inset-block-start: 124.3vw;
      inset-inline-end: 14.5vw;
    }

    .pagination-inner {
      display: block flex;
      gap: 22px;
      align-items: center;

      @media (width <= 768px) {
        gap: calc((100 / 750) * 25 * 1vw);
      }
    }

    & svg {
      position: relative;
      inline-size: 61px;
      aspect-ratio: 1 / 1;

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

    & text {
      font-family: inherit;
      font-size: 23px;
      line-height: 1;
      dominant-baseline: middle;
      text-anchor: middle;
      fill: white;
      transform: translateY(5%);
      transform-origin: center;

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

    & circle {
      fill: none;
      stroke: #fff;
      stroke-width: 1px;
      transform-origin: center;
      rotate: 0 0 1 90deg;

      @media (width <= 768px) {
        stroke-width: 2px;
      }

      &.dummy {
        opacity: 0.5;
      }

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

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

  /* ==== scroll ==== */
  .scroll {
    position: absolute;
    inset-block-start: 548px;
    inset-inline-end: 31px;
    display: block grid;
    gap: 14px;

    @media (width <= 768px) {
      inset-block-start: calc((100 / 750) * 852 * 1vw);
      inset-inline-end: calc((100 / 750) * 22 * 1vw);
      z-index: 2;
      gap: calc((100 / 750) * 22.66 * 1vw);
    }

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

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

    /* ==== item ==== */
    .item {
      display: block grid;
      gap: 9px;
      justify-content: center;

      @media (width <= 768px) {
        gap: calc((100 / 750) * 9 * 1vw);
      }

      & span {
        position: relative;
        display: block flow;
        inline-size: 13px;
        block-size: 19px;
        background-image: url('../img/_common/drop.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: opacity(0.3);
        animation: show-hide 2400ms infinite;
        animation-delay: var(--_delay);

        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 20 * 1vw);
          block-size: calc((100 / 750) * 31 * 1vw);
        }

        &:nth-child(1) {
          opacity: 0.3;
        }

        &:nth-child(2) {
          opacity: 0.5;
        }
      }
    }
  }

  /* ==== wave ==== */
  &::before {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 2;
    display: block flow;
    inline-size: 200%;
    block-size: var(--padding-wave);
    content: '';
    background: var(--bg);
    mask-image: var(--img-wave);
    mask-repeat: repeat-x;
    mask-position: center bottom;
    mask-size: contain;
    animation: loop var(--loop-duration) linear infinite;
  }
}

/* =====================
  news
===================== */
article.news {
  position: relative;
  padding-block: 32px 0;
  overflow: clip;

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

  .u-inner {
    display: block grid;
    grid-auto-flow: column;
    gap: 127px;
    align-items: flex-start;
    justify-content: flex-start;

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

    /* ==== banner ==== */
    .banner {
      position: relative;
      display: block flow;

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

      .picture {
        position: relative;
        z-index: 2;
        display: block flow;
        object-fit: cover;
        transition: opacity 0.3s ease;
      }

      .hover {
        position: absolute;
        inset: 0;
        transition: opacity 0.3s ease;
      }

      @media (any-hover: hover) {
        &:hover {
          .picture {
            opacity: 0;
          }
        }
      }

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

    /* ==== news-list ==== */
    .news-list {
      position: relative;
      padding-block-start: 34px;

      @media (width <= 768px) {
        padding-block-start: 10.2vw;
        padding-inline: calc((100 / 750) * 94 * 1vw) calc((100 / 750) * 87 * 1vw);
      }

      &::after {
        display: block flow;
        inline-size: 359px;
        block-size: 4px;
        margin-block-start: 27px;
        content: '';
        background-color: #999;
        mask-image: var(--img-line-small);
        mask-repeat: no-repeat;
        mask-position: left center;
        mask-size: contain;
      }

      @media (width <= 768px) {
        &::after {
          inline-size: calc((100 / 750) * 568 * 1vw);
          block-size: calc((100 / 750) * 8 * 1vw);
          margin-block-start: calc((100 / 750) * 22.2 * 1vw);
          mask-image: var(--img-line-small-sp);
        }
      }

      /* h2 */
      & h2 {
        display: block grid;
        grid-auto-flow: column;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 5px;
        font-family: var(--lalezar);
        font-size: 32px;
        line-height: 1;
        color: white;
        text-transform: uppercase;

        @media (width <= 768px) {
          gap: 1vw;
          margin-block-end: 0.6vw;
          font-size: calc((100 / 750) * 64 * 1vw);
        }

        &::before {
          inline-size: 14.519px;
          block-size: 19.385px;
          content: '';
          background-image: url('../img/_common/water.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          translate: 0 -2px;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 750) * 30.53 * 1vw);
            block-size: calc((100 / 750) * 40.77 * 1vw);
            translate: 0 -1vw;
          }
        }
      }

      /* list */
      .list {
        position: relative;

        & li {
          position: relative;
          display: block flex;
          gap: 30px;
          margin-block: calc((1em - 1lh) / 2);
          color: var(--primary);

          @media (width <= 768px) {
            gap: 4.9vw;
            font-size: calc((100 / 750) * 26 * 1vw);
          }

          & time {
            font-weight: 500;
          }

          & h3 {
            font-weight: 700;
          }

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

/* =====================
  business
===================== */
article.business {
  padding-block: 159px 104px;
  background: linear-gradient(180deg, #bdeaf1 53.85%, #fff 100%);

  @media (width <= 768px) {
    padding-block: 22vw calc((100 / 750) * 104 * 1vw);
  }

  .u-inner {
    display: block grid;
    grid-template-columns: auto 573px;
    gap: 15px 80px;
    justify-content: space-between;
    max-inline-size: 1085px;
    margin-inline: auto;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .picture {
      grid-area: 1 / 2 / 4 / 3;

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

      @media (width <= 768px) {
        margin-block-end: calc((100 / 750) * 69 * 1vw);
      }
    }

    .u-title {
      grid-area: 1 / 1 / 2 / 2;
    }

    .description {
      grid-area: 2 / 1 / 3 / 2;
      align-self: flex-start;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;

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

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

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

/* =====================
  works
===================== */
article.works {
  padding-block: 75px 98px;
  background: white;

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

  /* ==== u-inner ==== */
  .u-inner {
    max-inline-size: 1200px;
    padding-inline: 10px;

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

    /* ==== head ==== */
    .head {
      margin-block-end: 38px;

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

    /* ==== description ==== */
    .description {
      margin-block: calc((1em - 1lh) / 2) 47px;
      text-align: center;

      @media (width <= 768px) {
        
        
        
        
        
        
        
        
        
        
        
        
        
        inline-size: 64.6vw;
        padding-inline: 2.5vw;
        margin-block: calc((1em - 1lh) / 2) 6.4vw;
        margin-inline: auto 0;
        text-align: right;
        
        
        
        
        
        
        
        
        
        
        
        
        
      }
    }

    /* ==== img ==== */
    .img {
      position: relative;
      display: block;
      padding-block: 70px 50px;
      padding-inline: 70px;
      margin-block-end: 80px;
      margin-inline: auto;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 60 * 1vw) calc((100 / 750) * 80 * 1vw);
        padding-inline: calc((100 / 750) * 60 * 1vw);
        margin-block-end: 8vw;
      }

      &::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block flow;
        inline-size: 182px;
        block-size: 205px;
        pointer-events: none;
        content: '';
        background-image: url('../img/top/works/illust.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        clip-path: inset(0 0 27.6% 0);
        translate: 0 -100%;
      }

      @media (width <= 768px) {
        &::before {
          inset-block-start: 0.2vw;
          inset-inline-start: -2.8vw;
          inline-size: calc((100 / 750) * 182 * 1vw);
          block-size: calc((100 / 750) * 205 * 1vw);
          background-image: url('../img/top/works/illust_sp.webp');
        }
      }

      &::after {
        position: absolute;
        inset: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
        content: '';
        background: #d7faff;
        border-radius: 80px;
      }

      @media (width <= 768px) {
        &::after {
          border-radius: calc((100 / 750) * 80 * 1vw);
        }
      }

      & ul {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        margin-block-end: 60px;

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: calc((100 / 750) * 38 * 1vw);
          margin-block-end: 5.5vw;
        }
      }

      /* ==== u-anchor ==== */
      .u-anchor {
        position: relative;
        z-index: 2;
        margin-inline: auto 0;

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

  /* ==== sub-image ==== */
  .sub-img {
    text-align: center;

    @media (width <= 768px) {
      display: block flex;
      gap: calc((100 / 750) * 48 * 1vw);
      block-size: calc((100 / 750) * 108 * 1vw);
      overflow: clip;

      & picture {
        display: none;
      }

      &::before,
      &::after {
        display: block flow;
        flex-shrink: 0;
        inline-size: calc((100 / 750) * 1056 * 1vw);
        block-size: calc((100 / 750) * 108 * 1vw);
        content: '';
        background-image: url('../img/top/works/list_sp.webp');
        background-repeat: repeat-x;
        background-position: left center;
        background-size: calc((100 / 750) * 1056 * 1vw) calc((100 / 750) * 108 * 1vw);
        animation: marquee 40s linear 0s infinite normal none running;
      }
    }
  }
}

/* =====================
  company
===================== */
article.company {
  padding-block: 104px 91px;
  background: linear-gradient(180deg, #fff 20.31%, #bdeaf1 84.22%);

  @media (width <= 768px) {
    padding-block: calc((100 / 750) * 104 * 1vw) calc((100 / 750) * 48 * 1vw);
  }

  .u-inner {
    display: block grid;
    grid-template-columns: 500px auto;
    gap: 63px 80px;
    justify-content: space-between;
    max-inline-size: 1015px;
    margin-inline: auto;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .picture {
      grid-area: 1 / 1 / 4 / 2;
      padding-block: 20px 0;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 15 * 1vw) 0;
        margin-block-end: calc((100 / 750) * 69 * 1vw);
      }
    }

    .u-title {
      grid-area: 1 / 2 / 2 / 3;
      padding-block: 0;

      @media (width <= 768px) {
        margin-block-end: calc((100 / 750) * 63 * 1vw);
      }
    }

    .description {
      grid-area: 2 / 2 / 3 / 3;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;

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

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

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

/* =====================
  sdgs
===================== */
article.sdgs {
  padding-block-end: 99px;

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

  .u-inner {
    display: block grid;
    grid-template-columns: auto 500px;
    gap: 61px 80px;
    justify-content: space-between;
    max-inline-size: 1015px;
    margin-inline: auto;

    @media (width <= 768px) {
      gap: 0;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

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

    .picture {
      grid-area: 1 / 2 / 4 / 3;
      padding-block: 20px 0;

      @media (width <= 768px) {
        padding-block: 0;
        margin-block-end: calc((100 / 750) * 69 * 1vw);
      }
    }

    .u-title {
      grid-area: 1 / 1 / 2 / 2;

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

    .description {
      grid-area: 2 / 1 / 3 / 2;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;

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

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

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

/* =====================
  recruit
===================== */
article.recruit {
  .anchor {
    display: block flow;
    inline-size: fit-content;
    margin-inline: auto;
  }
}

/* =====================
  animation
===================== */
.mv {
  .text {
    :where(.catch, [lang='en']) {
      clip-path: inset(0 100% 0 0);
      transition: all 1200ms var(--easeOutExpo) var(--_delay);
    }

    &.on {
      :where(.catch, [lang='en']) {
        clip-path: inset(0 0 0 0);
      }
    }
  }
}

article.business {
  .js-parallax {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1200ms var(--slideInBezier) var(--_delay, 0ms);

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

article.works {
  .u-inner {
    .u-title {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 0ms);

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

    .description {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 150ms);

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

    .img {
      &::before {
        transition: all 450ms var(--slideInBezier) var(--_delay, 0ms);
      }

      &.on::before {
        clip-path: inset(0 0 0 0);
      }

      &::after {
        clip-path: inset(0 0 100% 0);
        transition: all 2000ms var(--slideInBezier) var(--_delay, 450ms);
      }

      &.on::after {
        clip-path: inset(0 0 0 0);
      }

      & li {
        opacity: 0;
        filter: blur(1em);
        transform: translateY(10%);
        transition: all 1500ms var(--slideInBezier) var(--_delay, 450ms);
      }

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

  .sub-img {
    opacity: 0;
    transform: translateY(10%);
    transition: all 1200ms var(--slideInBezier) var(--_delay, 0ms);

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

article.company {
  .u-inner {
    .u-title {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 0ms);

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

    .description {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 150ms);

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

    .picture {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 150ms);

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

article.sdgs {
  .u-inner {
    .u-title {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 0ms);

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

    .description {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 150ms);

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

    .picture {
      opacity: 0;
      transform: translateY(10%);
      transition: all 1200ms var(--slideInBezier) var(--_delay, 150ms);

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