@charset "UTF-8";
.header {
  position: absolute;
  padding-inline: 30px 43px;

  @media (width <= 768px) {
    padding-inline: calc((100 / 750) * 10 * 1vw);
  }
  .not-top-logo {
    display: none;
  }
  .top-logo {
    display: block;
  }
}
.main {
  /* =====================
    Animation
  ===================== */
  .js-parallax {
    opacity: 0;
    transition: all 0.5s ease-in-out 0s;
    transform: translateY(0.5em);
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;

    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/top/catch.png');
      mix-blend-mode: plus-lighter;
      inline-size: 209px;
      block-size: 1155px;
      position: absolute;
      top: 152px;
      right: 35px;
      z-index: 2;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 750) * 209 * 1vw);
        block-size: calc((100 / 750) * 1155 * 1vw);
        top: calc((100 / 750) * 248 * 1vw);
        right: calc((100 / 750) * 22 * 1vw);
      }
    }
    .movie_blk {
      width: 100%;
      height: calc(100vh + 995px);
      position: relative;

      @media (width <= 768px) {
        height: calc(100dvh + calc((100 / 750) * 1904 * 1vw));
      }

      & video {
        width: 100%;
        height: calc(100vh);
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        @media (width <= 768px) {
          height: calc(100dvh);
          bottom: 0;
        }
      }
      &::before {
        content: '';
        display: block flow;
        inline-size: 100%;
        block-size: 464px;
        mix-blend-mode: multiply;
        background-image: linear-gradient(to bottom, rgba(142, 141, 141, 0) 0%, #000 115%);
        position: absolute;
        bottom: 995px;
        left: 0;
        pointer-events: none;
        z-index: 2;
      }
      @media (width <= 768px) {
        &::before {
          block-size: calc((100 / 750) * 659.9 * 1vw);
          bottom: calc((100 / 750) * 1904 * 1vw);
          background-image: linear-gradient(to bottom, rgba(142, 141, 141, 0), #000);
        }
      }
      .mv-catch {
        position: relative;
        height: 100vh;
        display: block grid;
        align-items: end;
        padding-block-start: 130px;

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

        &::before {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/top/mv_town.png');
          inline-size: 640px;
          block-size: 165px;
          mix-blend-mode: plus-lighter;
          position: absolute;
          bottom: 92px;
          right: 0;
          z-index: 3;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            background-image: url('../img/top/mv_town_sp.png');
            inline-size: calc((100 / 750) * 487 * 1vw);
            block-size: calc((100 / 750) * 165 * 1vw);
            bottom: calc((100 / 750) * 199 * 1vw);
          }
        }

        .container {
          inline-size: 1300px;
          margin-inline: auto;
          padding-inline-start: 121px;
          margin-block-end: 190px;
          z-index: 3;

          @media (width <= 768px) {
            inline-size: 100%;
            padding-inline-start: calc((100 / 750) * 40 * 1vw);
            margin-block-end: calc((100 / 750) * 330 * 1vw);
          }
          .text {
            display: flex;
            align-items: center;
            color: #fff;
            font-family: var(--yumin);
            font-size: 56px;
            font-weight: 600;

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

            &.on {
              --x: 0;
            }
            .char {
              overflow: hidden;
              .char-text {
                display: inline-block;
                transform: translateX(var(--x, -101%));
                transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
              }
            }
          }

          .visuallyHidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            margin: -1px !important;
            padding: 0 !important;
            overflow: hidden !important;
            clip: rect(0 0 0 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
          }
        }

        .news_wrap {
          position: absolute;
          inline-size: 910px;
          margin-inline: auto 0;
          background-color: rgba(255, 255, 255, 0.8);
          z-index: 3;
          right: 0;
          bottom: 0;

          @media (width <= 768px) {
            inline-size: 100%;
          }
          & > a {
            padding-inline: 37px;
            display: block grid;
            grid-template-columns: 93px auto max-content;
            align-items: center;

            @media (width <= 768px) {
              padding-block: calc((100 / 750) * 16 * 1vw);
              padding-inline: calc((100 / 750) * 20 * 1vw) calc((100 / 750) * 40 * 1vw);
              grid-template-columns: calc((100 / 750) * 93 * 1vw) auto;
            }
            .news_title {
              padding-block: 16px;
              border-right: 1px solid rgba(22, 79, 132, 0.1);

              & > span {
                display: block flow;
                font-family: var(--oswald);
                font-size: 25px;
                font-weight: 500;
                line-height: 1.36;
                color: var(--primary);

                @media (width <= 768px) {
                  font-size: calc((100 / 750) * 39 * 1vw);
                }
              }
              & > h3 {
                font-size: 12px;
                font-weight: 500;
                color: #888;

                @media (width <= 768px) {
                  font-size: calc((100 / 750) * 20 * 1vw);
                }
              }
            }
            .news_unit {
              padding-block: 16px;
              padding-left: 40px;

              @media (width <= 768px) {
                padding-block: calc((100 / 750) * 16 * 1vw);
                padding-left: calc((100 / 750) * 59 * 1vw);
              }
              .date {
                font-size: 13px;
                font-weight: 500;
                color: #888;

                @media (width <= 768px) {
                  font-size: calc((100 / 750) * 24 * 1vw);
                  line-height: 1;
                }
              }
              .title {
                font-size: 15px;
                font-weight: 500;
                color: #111;

                @media (width <= 768px) {
                  font-size: calc((100 / 750) * 24 * 1vw);
                  line-height: 1.83;
                  margin-block-start: calc((100 / 750) * 24 * 1vw);
                }
              }
            }
            .btn {
              position: relative;
              inline-size: fit-content;
              display: block flex;
              align-items: center;
              font-family: var(--oswald);
              font-size: 18px;
              font-weight: 600;
              color: var(--primary);
              gap: 10px;
              &::before {
                content: '';
                display: block flow;
                inline-size: 18px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                background-color: var(--primary);
              }
              &::after {
                content: '';
                display: block flow;
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: center;
                mask-image: var(--btn-arrow);
                background-color: #fff;
                inline-size: 6px;
                aspect-ratio: 6/8;
                position: absolute;
                top: 50%;
                left: 7px;
                transform: translateY(-50%);
              }

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 28 * 1vw);
                gap: calc((100 / 750) * 12 * 1vw);
                position: absolute;
                top: calc((100 / 750) * 26 * 1vw);
                right: calc((100 / 750) * 46 * 1vw);

                &::before {
                  inline-size: calc((100 / 750) * 28 * 1vw);
                }
                &::after {
                  inline-size: calc((100 / 750) * 8 * 1vw);
                  left: calc((100 / 750) * 12 * 1vw);
                }
              }
            }
          }
        }
      }
      .introduction {
        position: relative;
        height: 995px;
        display: block grid;
        background-size: cover;
        background-position: center;
        background-image: url('../img/top/bg-introduction.webp');

        @media (width <= 768px) {
          height: calc((100 / 750) * 1904 * 1vw);
          background-image: url('../img/top/bg-introduction_sp.webp');
        }

        .u-inner {
          display: block grid;
          grid-auto-rows: max-content max-content max-content;
          align-items: end;
          justify-content: space-between;
          margin-block-start: 134px;

          @media (width <= 768px) {
            display: block flow;
            margin-block-start: calc((100 / 750) * 112 * 1vw);
          }

          &::after {
            content: '';
            background-repeat: repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/top/dot.png');
            inline-size: 100%;
            block-size: 995px;
            mix-blend-mode: multiply;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            pointer-events: none;
            display: none;
          }

          @media (width <= 768px) {
            &::after {
              background-image: url('../img/top/dot_sp.png');
              block-size: calc((100 / 750) * 1904 * 1vw);
            }
          }
          .catch_en {
            grid-column: 1/3;
            grid-row: 1/2;
            position: relative;
            font-family: var(--oswald);
            font-size: 53.2px;
            font-weight: 500;
            letter-spacing: -2.13px;
            line-height: 1;
            color: #fff;
            text-transform: uppercase;
            z-index: 3;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 53.2 * 1vw);
              letter-spacing: calc((100 / 750) * -2.13 * 1vw);
              margin-inline-start: calc((100 / 750) * 18 * 1vw);
            }

            & span {
              display: block flow;
              font-size: 135px;
              font-weight: 500;
              letter-spacing: -5.4px;

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

            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/top/about_img.png');
              inline-size: 460px;
              block-size: 435px;
              position: absolute;
              top: 61px;
              right: 80px;
              z-index: 2;
              pointer-events: none;
            }

            @media (width <= 768px) {
              &::after {
                background-image: url('../img/top/about_img_sp.png');
                inline-size: calc((100 / 750) * 589 * 1vw);
                block-size: calc((100 / 750) * 556 * 1vw);
                position: relative;
                top: unset;
                right: unset;
                margin-inline-start: calc((100 / 750) * 22 * 1vw);
                margin-block-start: calc((100 / 750) * 53 * 1vw);
              }
            }
          }
          .catch_ja {
            grid-column: 1/3;
            grid-row: 2/3;
            position: relative;
            font-family: var(--yumin);
            font-size: 35px;
            font-weight: 600;
            line-height: 1.8;
            color: #fff;
            margin-block-start: 70px;
            padding-inline-start: 78px;
            z-index: 3;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 44 * 1vw);
              margin-block-start: calc((100 / 750) * 39 * 1vw);
              padding-inline-start: calc((100 / 750) * 40 * 1vw);
            }
            & span {
              display: block flow;
            }
            .indent-1 {
              padding-left: 0.7em;
            }
            .indent-2 {
              padding-left: 1.7em;
            }
            .indent-3 {
              padding-left: 2.7em;
            }
          }
          .description {
            grid-column: 1/2;
            grid-row: 3/4;
            position: relative;
            inline-size: 502px;
            margin-inline-start: 252px;
            margin-block-start: 59px;
            font-weight: 500;
            color: #fff;
            z-index: 3;

            @media (width <= 768px) {
              inline-size: 100%;
              margin-inline-start: 0;
              margin-block-start: calc((100 / 750) * 22 * 1vw);
              padding-inline: calc((100 / 750) * 40 * 1vw);
              line-height: 1.77;
            }
          }
          .u-anchor {
            grid-column: 2/3;
            grid-row: 3/4;
            position: relative;
            margin-block-end: 12px;
            z-index: 3;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 46 * 1vw);
              margin-block-end: 0;
              margin-inline: auto;
            }
          }
        }
      }
    }
  }
  /* =====================
    事業内容
  ===================== */
  .business {
    position: relative;
    margin-block-start: 130px;
    min-block-size: 1196px;

    &::before {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/top/business_bg.png');
      inline-size: calc((100% - 320px) / 2 + 320px);
      block-size: 1196px;
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
    }

    @media (width <= 768px) {
      margin-block-start: calc((100 / 750) * 130 * 1vw);
      min-block-size: calc((100 / 750) * 2025 * 1vw);
      padding-block-end: calc((100 / 750) * 130 * 1vw);

      &::before {
        background-image: url('../img/top/business_bg_sp.png');
        inline-size: 100%;
        block-size: calc((100 / 750) * 2025 * 1vw);
        top: unset;
        bottom: 0;
      }
    }
    .inner {
      inline-size: 1300px;
      margin-inline: auto;

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

      .business_wrap {
        padding-block-start: 60px;
        display: block grid;
        grid-template-rows: repeat(4, max-content);

        @media (width <= 768px) {
          padding-block-start: 0;
          display: block flow;
        }

        .u-h2-title {
          grid-column: 1/2;
          grid-row: 1/2;
          margin-inline-start: 90px;

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

        .picture {
          grid-column: 1/2;
          grid-row: 2/3;
          display: block flow;
          margin-block-start: 59px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 56 * 1vw);
            margin-inline-start: calc(50% - 50vw);
            & img {
              inline-size: calc((100 / 750) * 710 * 1vw);
            }
          }
        }

        .wrap {
          inline-size: 530px;
          grid-column: 2/3;
          grid-row: 1/3;
          color: #fff;
          margin-block-start: 63px;

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

          .title {
            font-family: var(--yumin);
            font-size: 30px;
            font-weight: 600;
            line-height: 1.8;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 38 * 1vw);
            }
          }
          .description {
            margin-block-start: 33px;
            padding-inline-end: 30px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 25 * 1vw);
              padding-inline-end: 0;
              line-height: 1.77;
            }
          }

          .btn-list {
            display: block flex;
            gap: 10px;
            margin-block-start: 48px;

            @media (width <= 768px) {
              flex-wrap: wrap;
              gap: calc((100 / 750) * 10 * 1vw);
              margin-block-start: calc((100 / 750) * 48 * 1vw);
            }
            & li {
              inline-size: fit-content;
              border-radius: 50rem;
              border: solid 1px #fff;
              background-color: rgba(0, 0, 0, 0.2);

              .u-hover {
                display: block flow;
                padding-inline: 39px;
                padding-block: 18px;
                font-weight: bold;

                @media (width <= 768px) {
                  padding-inline: calc((100 / 750) * 59 * 1vw);
                  padding-block: calc((100 / 750) * 27 * 1vw);
                  font-size: calc((100 / 750) * 24 * 1vw);
                }
              }
            }
          }
        }
      }
    }
    .u-anchor.sp {
      margin-inline: auto;
      margin-block-start: calc((100 / 750) * 62 * 1vw);
    }
    .works_list {
      position: relative;
      display: flex;
      gap: 10px;
      overflow: hidden;
      margin-block-start: 60px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 130 * 1vw);
        gap: calc((100 / 750) * 20 * 1vw);
      }
      .loop-box {
        display: flex;
        animation: loop-list 200s linear infinite;
        gap: 10px;
        flex-shrink: 0;
        align-items: center;

        @media (width <= 768px) {
          gap: calc((100 / 750) * 20 * 1vw);
        }
        .loop-item {
          width: fit-content;
          display: block;
          flex-shrink: 0;
          & img {
            inline-size: 200px;

            @media (width <= 768px) {
              inline-size: calc((100 / 750) * 400 * 1vw);
            }
          }
        }
      }
    }
    .btn_wrap {
      inline-size: 1060px;
      margin-inline: auto;
      display: block flex;
      justify-content: flex-end;
      gap: 130px;
      margin-block-start: 60px;

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

        .u-anchor {
          margin-inline: auto;
        }
      }
    }
  }
  /* =====================
    採用情報
  ===================== */
  .recruit {
    position: relative;
    padding-block: 130px;
    overflow: hidden;

    &::before {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: 100% 517px;
      background-position: center;
      background-image: url('../img/top/recruit_bg.png');
      inline-size: 100%;
      block-size: 517px;
      position: absolute;
      top: 374px;
      left: 0;
      z-index: -1;
      pointer-events: none;
    }

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

      &::before {
        display: none;
      }
    }

    .picture {
      display: block flow;
      text-align: center;
      margin-block-start: 60px;

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

        & img {
          inline-size: calc((100 / 750) * 630 * 1vw);
        }
      }
    }
    .description {
      margin-block-start: 49px;
      text-align: center;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 49 * 1vw);
        line-height: 1.77;
      }
    }
    .u-anchor {
      margin-block-start: 48px;
      margin-inline: auto;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 45 * 1vw);
      }
    }
    .u-marquee {
      top: 471px;
      z-index: 3;

      @media (width <= 768px) {
        top: calc((100 / 750) * 545 * 1vw);
      }
    }
  }
}
/* 左から右 */
@keyframes loop-list {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}