@charset "UTF-8";

.main {
  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;
    width: 100%;
    min-block-size: 768px;
    overflow: hidden;
    background-color: #eaf2f6;

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

    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      inline-size: 1440px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      min-height: 768px;
      z-index: 3;

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

      .mv-swiper-container {
        position: absolute;
        top: 0;
        right: -101px;
        inline-size: 961.98px;
        min-height: inherit;

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

        .swiper-slide {
          position: relative;

          & picture {
            display: block flow;
            & img {
              inline-size: 961.98px;
              block-size: 100%;
              min-height: 762px;

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

    /* ==== Content ==== */

    .inner {
      position: relative;
      inline-size: 1440px;
      padding-inline: 40px;
      margin-inline: auto;
      padding-block-start: 192px;
      z-index: 10;

      @media (width <= 768px) {
        inline-size: 100%;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        min-height: calc((100 / 390) * 791 * 1vw);
        padding-block-start: calc((100 / 390) * 417 * 1vw);
      }

      &::before {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/mv_deco.png');
        inline-size: 617px;
        block-size: 407px;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
      }

      @media (width <= 768px) {
        &::before {
          background-image: url('../img/top/mv_deco_2x.png');
          inline-size: calc((100 / 390) * 310 * 1vw);
          block-size: calc((100 / 390) * 477 * 1vw);
        }
      }

      .catch {
        position: relative;
        display: block flex;
        z-index: 12;

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

        &::before {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/top/catch_deco.png');
          inline-size: 147px;
          block-size: 170px;
          margin-block-start: 64px;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            background-image: url('../img/top/catch_deco_2x.png');
            inline-size: calc((100 / 390) * 81 * 1vw);
            block-size: calc((100 / 390) * 94 * 1vw);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            margin-block-start: 0;
          }
        }

        /* =====================
        英字　キャッチ
        ===================== */
        .en-catch {
          position: relative;
          display: block flow;
          font-family: var(--title);
          background-image: linear-gradient(113deg, #22327e 35%, #5d69a1 55%, #0f1b53 81%);
          font-size: 96px;
          font-weight: 500;
          line-height: 1.12;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 56 * 1vw);
            inline-size: fit-content;
            margin-inline-start: calc((100 / 390) * 14 * 1vw);
          }

          &[data-id='1'] {
            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/top/and.png');
              inline-size: 106px;
              block-size: 108px;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -68px;
              pointer-events: none;
            }

            @media (width <= 768px) {
              &::after {
                background-image: url('../img/top/and_2x.png');
                inline-size: calc((100 / 390) * 70 * 1vw);
                block-size: calc((100 / 390) * 71 * 1vw);
                position: absolute;
                left: 54%;
                transform: translateX(-50%);
                bottom: calc((100 / 390) * -44 * 1vw);
              }
            }
          }
        }

        /* =====================
        日本語　キャッチ
        ===================== */
        .ja-catch {
          position: relative;
          inline-size: fit-content;
          background-image: linear-gradient(97deg, #22327e 34%, #5d69a1 54%, #0f1b53 79%);
          font-family: var(--shippori);
          font-size: 20px;
          line-height: 1.3;
          text-align: left;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-block-start: 25px;
          margin-inline-start: 80px;

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

      /* =====================
        Scroll
      ===================== */
      /* スクロールダウンの位置 */
      .scroll {
        position: absolute;
        right: 41px;
        bottom: 5px;
        z-index: 12;

        @media (width <= 768px) {
          right: calc((100 / 390) * 16 * 1vw);
          bottom: calc((100 / 390) * 248 * 1vw);
        }

        /* 線のアニメーション部分 */
        &::before {
          animation: scroll 3s cubic-bezier(1, 0, 0, 1) infinite;
          background-image: linear-gradient(182deg, #22327e 65%, #5d69a1 46%, #0f1b53 21%);
          top: 46px;
          content: '';
          height: 40px;
          left: 50%;
          margin: auto;
          position: absolute;
          width: 1px;
          z-index: 2;
        }
        /* 線の背景色 */
        &::after {
          background-color: transparent;
          top: 46px;
          content: '';
          height: 40px;
          left: 50%;
          margin: auto;
          position: absolute;
          width: 1px;
        }
        & > span {
          position: relative;

          &::after {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/top/scroll.svg');
            inline-size: 12px;
            block-size: 34px;
          }

          @media (width <= 768px) {
            &::after {
              inline-size: calc((100 / 390) * 12 * 1vw);
              block-size: calc((100 / 390) * 34 * 1vw);
            }
          }
        }

        @media (width <= 768px) {
          &::before {
            top: calc((100 / 390) * 43 * 1vw);
            height: calc((100 / 390) * 32 * 1vw);
            width: calc((100 / 390) * 1 * 1vw);
          }
          &::after {
            top: calc((100 / 390) * 43 * 1vw);
            height: calc((100 / 390) * 32 * 1vw);
            width: calc((100 / 390) * 1 * 1vw);
          }
        }
      }

      /* =====================
        news
      ===================== */
      .news {
        inline-size: 561px;
        border-radius: 8px;
        z-index: 12;
        min-block-size: 103px;
        background-image: linear-gradient(140deg, #22327e 35%, #5d69a1 54%, #0f1b53 80%);
        color: #fff;
        margin-block-start: 159px;
        margin-inline-start: 40px;

        @media (width <= 768px) {
          inline-size: 100%;
          left: 0;
          bottom: calc((100 / 390) * 16 * 1vw);
          min-block-size: calc((100 / 390) * 119 * 1vw);
          margin-block-start: calc((100 / 390) * 44 * 1vw);
          margin-inline-start: 0;
        }

        .u-hover {
          block-size: inherit;
          display: block grid;
          padding-inline: 24px;
          padding-block: 17px;
          row-gap: 9px;

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

          & > h2.title {
            position: relative;
            font-family: var(--title);
            font-size: 20px;
            color: #fff;

            @media (width <= 768px) {
              justify-content: start;
              font-size: calc((100 / 390) * 18 * 1vw);
            }
          }
          .wrap {
            position: relative;
            display: block flex;
            align-items: baseline;
            gap: 20px;

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

            .date {
              font-family: var(--title);
              font-size: 14px;
              line-height: 1;

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

            .news-title {
              font-size: 15px;
              line-height: 1;

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

  /* =====================
    company
  ===================== */
  .company {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 120px;
    background-color: #eaf2f6;

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

    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: 100% 1465px;
      background-position: center top;
      background-image: url('../img/top/mv_bg.png');
      inline-size: 100%;
      min-block-size: 1465px;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        background-image: url('../img/top/mv_bg_2x.png');
        inline-size: 100%;
        min-block-size: calc((100 / 390) * 1626 * 1vw);
      }
    }

    .u-inner {
      position: relative;
      display: block flex;
      gap: 170px;

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

      &::before {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/company_deco.png');
        inline-size: 230px;
        block-size: 183px;
        mix-blend-mode: plus-lighter;
        position: absolute;
        right: 40px;
        top: -4px;
        z-index: 3;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::before {
          background-image: url('../img/top/company_deco_2x.png');
          inline-size: calc((100 / 390) * 129 * 1vw);
          block-size: calc((100 / 390) * 103 * 1vw);
          right: calc((100 / 390) * 32 * 1vw);
          top: calc((100 / 390) * 305 * 1vw);
        }
      }

      &::after {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/company_02.png');
        inline-size: 220px;
        block-size: 180px;
        position: absolute;
        bottom: -182px;
        right: -26px;
        z-index: 5;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::after {
          background-image: url('../img/top/company_02_2x.png');
          inline-size: calc((100 / 390) * 149 * 1vw);
          block-size: calc((100 / 390) * 122.5 * 1vw);
          position: absolute;
          bottom: calc((100 / 390) * -140 * 1vw);
          right: calc((100 / 390) * 16 * 1vw);
        }
      }

      .img {
        position: relative;
        display: block flow;
        flex-shrink: 0;
        z-index: 3;

        @media (width <= 768px) {
          text-align: center;
          & img {
            inline-size: calc((100 / 390) * 327.22 * 1vw);
          }
        }
      }

      .wrap {
        position: relative;
        z-index: 3;
        margin-block-start: 62px;

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

        .catch {
          position: relative;
          background-image: linear-gradient(96deg, #22327e 34%, #5d69a1 54%, #0f1b53 79%);
          font-family: var(--shippori);
          font-size: 24px;
          line-height: 1.3;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

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

        .description {
          line-height: 1.9;
          margin-block-start: 47px;

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

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

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

  /* =====================
    business
  ===================== */
  .business {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 131px;

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

    .u-inner {
      position: relative;

      .wrap {
        position: relative;
        display: block flex;
        justify-content: space-between;

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

        .description {
          line-height: 1.9;
          margin-block-start: 31px;

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

      .list {
        margin-block-start: 64px;
        display: block flex;
        justify-content: space-between;
        counter-reset: number;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 39 * 1vw);
          flex-direction: column;
          justify-content: center;
          row-gap: calc((100 / 390) * 49 * 1vw);
        }

        .unit {
          position: relative;
          display: block flex;
          align-items: center;
          justify-content: space-between;
          margin-block-start: 20px;
          padding-inline: 0 10px;

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

          .title {
            position: relative;
            background-image: linear-gradient(103deg, #22327e 35%, #5d69a1 54%, #0f1b53 80%);
            font-family: var(--shippori);
            font-size: 22px;
            line-height: 1;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block flex;
            gap: 16px;

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

            &::before {
              counter-increment: number;
              content: '0' counter(number);
              background-image: linear-gradient(130deg, #22327e 35%, #5d69a1 56%, #0f1b53 84%);
              font-family: var(--title);
              font-size: 28px;
              font-weight: 500;
              line-height: 1;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }

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

          .arrow {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/_common/icon_ellipse_b.svg');
            inline-size: 78px;
            block-size: 63px;
            display: block grid;
            place-content: center;

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

            &::after {
              content: '';
              display: block flow;
              inline-size: 19px;
              aspect-ratio: 19 / 14;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--icon-arrow);
              background: #fff;
            }

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

  /* =====================
    works
  ===================== */
  .works {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 120px;
    background-color: #eaf2f6;
    overflow: hidden;
    z-index: 1;

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

    .works-list {
      position: relative;
      margin-block-start: 63px;
      overflow: hidden;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 48 * 1vw);
      }
      .swiper-wrapper {
        .swiper-slide {
          inline-size: 400px !important;
          block-size: 488px !important;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 264 * 1vw) !important;
            block-size: calc((100 / 390) * 320 * 1vw) !important;
          }
          .picture {
            & img {
              inline-size: 400px !important;
              block-size: 488px !important;

              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 264 * 1vw) !important;
                block-size: calc((100 / 390) * 320 * 1vw) !important;
              }
            }
          }
        }
      }
    }
    .works-controller {
      position: absolute;
      top: 48%;
      left: 50px;
      inline-size: calc(100% - 100px);
      z-index: 5;

      @media (width <= 768px) {
        left: 50%;
        transform: translateX(-50%);
        inline-size: calc(100% - calc((100 / 390) * 48 * 1vw));
      }

      .controll-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      & :where(.works-prev, .works-next) {
        position: relative;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/_common/icon_ellipse_b.svg');
        inline-size: 77px;
        block-size: 63px;
        display: block grid;
        place-content: center;

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

        &::after {
          content: '';
          inline-size: 19px;
          aspect-ratio: 19 / 14;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background-color: #fff;
        }

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

      .works-prev {
        rotate: 0 0 1 180deg;
      }

      .works-next {
        rotate: 0 0 1 0deg;
      }
    }

    .u-inner {
      .wrap {
        display: block flex;
        justify-content: space-between;
        margin-block-start: 55px;

        @media (width <= 768px) {
          flex-direction: column;
          align-items: center;
          gap: calc((100 / 390) * 38 * 1vw);
          margin-block-start: calc((100 / 390) * 39 * 1vw);
        }

        .description {
          line-height: 1.9;
        }
      }
    }
  }

  /* =====================
    recruit
  ===================== */
  .recruit {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 956px;
    background-position: center;
    background-image: url('../img/top/recruit_bg.png');
    padding-block-start: 104px;
    padding-block-end: 190px;

    @media (width <= 768px) {
      background-size: cover;
      background-image: url('../img/top/recruit_bg_2x.png');
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 87 * 1vw);
    }

    .u-inner {
      position: relative;

      &::before {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/recruit_01.png');
        inline-size: 733px;
        block-size: 673px;
        pointer-events: none;
        position: absolute;
        left: 14px;
        bottom: -70px;
      }

      @media (width <= 768px) {
        &::before {
          background-image: url('../img/top/recruit_01_2x.png');
          inline-size: calc((100 / 390) * 390 * 1vw);
          block-size: calc((100 / 390) * 414 * 1vw);
          pointer-events: none;
          position: absolute;
          left: 0;
          bottom: calc((100 / 390) * 324 * 1vw);
        }
      }

      .wrap {
        position: relative;
        display: block flex;
        align-items: start;
        justify-content: space-between;

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

        &::before {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/top/recruit_02.png');
          inline-size: 293px;
          block-size: 241px;
          pointer-events: none;
          position: absolute;
          right: -8px;
          top: -18px;
          z-index: 5;
        }

        @media (width <= 768px) {
          &::before {
            background-image: url('../img/top/recruit_02_2x.png');
            inline-size: calc((100 / 390) * 136.5 * 1vw);
            block-size: calc((100 / 390) * 112 * 1vw);
            right: calc((100 / 390) * 0 * 1vw);
            top: calc((100 / 390) * -77 * 1vw);
          }
        }

        .unit {
          position: relative;
          inline-size: 440px;
          margin-block-start: 312px;

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

          .catch {
            background-image: linear-gradient(95deg, #22327e 34%, #5d69a1 54%, #0f1b53 79%);
            font-family: var(--shippori);
            font-size: 24px;
            line-height: 1.3;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;

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

          .description {
            position: relative;
            line-height: 1.9;
            margin-block-start: 48px;

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

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

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

/* =====================
animation
===================== */

/* ==== js-parallax ==== */
.mv {
  .catch {
    .js-parallax {
      --_transition: filter 1s ease, opacity 1s ease;
      opacity: 0;
      filter: blur(0.2em);
      transition: var(--_transition);
      transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);

      &.on {
        opacity: 1;
        filter: blur(0);
      }
    }
    .en-catch[data-id='1'].js-parallax {
      --_delay: 0s;
    }
    .en-catch[data-id='2'].js-parallax {
      --_delay: 0.3s;
    }
    .ja-catch.js-parallax {
      --_delay: 0.6s;
    }
  }
}

.company {
  .u-inner::after,
  .img {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);
  }
  &.on {
    .u-inner::after,
    .img {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.business {
  .img {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);
  }
  &.on {
    .img {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.recruit {
  .u-inner::before,
  .wrap:before {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);
  }
  &.on {
    .u-inner::before,
    .wrap:before {
      opacity: 1;
      transform: translateY(0);
    }
  }
}