@charset "UTF-8";

.main {
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(infinity * 1);
    display: block grid;
    row-gap: 16px;
    justify-items: center;
    place-content: center;
    background-color: #fff;
    translate: 0 0;

    &.is-show {
      transition: all 600ms ease 2500ms;
      opacity: 0;
      pointer-events: none;
    }

    .loading-logo1 {
      opacity: 0;
      animation: logo_fade 2s 0.3s forwards;

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

    .loading-logo2 {
      opacity: 0;
      animation: logo_fade 2s 0.9s forwards;

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

  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;
    width: 100%;
    height: 100vh;

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

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

    @media only screen and (width <=768px) {
      &::after {
        background-size: 100% calc((100 / 390) * 54 * 1vw);
        background-image: url('../img/top/wave_2x.svg');
        min-block-size: calc((100 / 390) * 54 * 1vw);
      }
    }

    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      overflow-x: hidden;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;

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

      .mv-swiper-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;

        .swiper-slide {
          position: relative;

          & picture {
            display: block flow;

            & img {
              inline-size: 100%;
              block-size: 100vh;
              object-fit: cover;
              object-position: center bottom;

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

    /* ==== サークル ==== */
    .pagination {
      position: absolute;
      inline-size: 140px;
      aspect-ratio: 1 / 1;
      right: 16px;
      bottom: 218px;
      z-index: 20;

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

    .swiper-pagination {
      position: absolute;
      top: 0;
      left: 0;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      color: #fff;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.2em;
      pointer-events: none;
      opacity: 0;
    }

    .swiper-pagination .swiper-pagination-current {
      font-size: 125%;
      margin-right: 0.1em;
    }

    .swiper-pagination-circle,
    .swiper-pagination-circle2 {
      pointer-events: none;
    }

    .swiper-pagination-circle svg,
    .swiper-pagination-circle2 svg {
      transform: rotate(-90deg);
    }

    .swiper-pagination-circle circle,
    .swiper-pagination-circle2 circle {
      fill: none;
      stroke: #fff;
      stroke-width: 1px;
      stroke-dasharray: 308;
      stroke-dashoffset: 308;
    }

    .swiper-pagination-circle.anim-start circle,
    .swiper-pagination-circle2.anim-start circle {
      animation: rotate-circle 4s ease-in-out forwards;
    }

    .swiper-pagination-circle.anim-end circle,
    .swiper-pagination-circle2.anim-end circle {
      animation: rotate-circle-end 1s ease-in-out;
    }

    .swiper-pagination-circle2 {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.3;
    }

    .swiper-pagination-circle2 circle {
      stroke-dashoffset: 0 !important;
    }

    .swiper-button-prev,
    .swiper-button-next {
      inline-size: 18px;
      block-size: 17px;
      background: no-repeat 50% 50%/100% auto;
      cursor: pointer;
      transition: opacity 0.2s ease-in;
      top: 50%;
      margin: 0;
      transform: translateY(-50%);
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
      display: none;
    }

    .swiper-button-prev {
      background-image: url('../img/top/arrow.svg');
      left: 28%;
      right: auto;
    }

    .swiper-button-next {
      background-image: url('../img/top/arrow.svg');
      transform: translateY(-50%) scale(-1, 1);
      right: 29%;
      left: auto;
    }

    /* =====================
      コンテンツ
    ===================== */

    .content {
      position: relative;
      inline-size: 1440px;
      block-size: 100vh;
      padding-inline: 40px;
      margin-inline: auto;
      padding-block-start: 174px;
      padding-block-end: 50px;
      display: block grid;
      align-items: center;
      z-index: 10;

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

      .catch {
        position: relative;

        &::before {
          content: '';
          display: block flow;
          inline-size: 300px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          background-color: var(--secondary);
          position: absolute;
          top: -99px;
          left: -147px;
          pointer-events: none;
        }

        @media only screen and (width <=768px) {
          &::before {
            inline-size: calc((100 / 390) * 150 * 1vw);
            top: calc((100 / 390) * 7 * 1vw);
            left: calc((100 / 390) * -70 * 1vw);
          }
        }

        /* =====================
          日本語　キャッチ
        ===================== */
        .ja-catch {
          inline-size: fit-content;
          font-family: var(--serif);
          font-size: 34px;
          font-weight: 600;
          line-height: 2.2;
          color: #fff;
          position: absolute;
          top: 35px;
          right: -680px;

          @media only screen and (width <=768px) {
            font-size: calc((100 / 390) * 21 * 1vw);
            position: relative;
            inset: unset;
            margin-inline: auto calc((100 / 390) * 25 * 1vw);
          }
        }

        /* =====================
          英語　キャッチ
        ===================== */
        .en-catch {
          display: block flow;
          font-family: var(--title);
          font-size: 130px;
          font-weight: 500;
          line-height: 0.9;
          letter-spacing: -3.9px;
          text-align: left;
          color: #fff;
          margin-block-start: -74px;

          @media only screen and (width <=768px) {
            font-size: calc((100 / 390) * 50 * 1vw);
            letter-spacing: calc((100 / 390) * -1.5 * 1vw);
            margin-inline-start: calc((100 / 390) * 4 * 1vw);
            margin-block-start: calc((100 / 390) * 12 * 1vw);
          }

          .line2 {
            display: inline-block;
            margin-inline-start: 175px;

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

          .line3 {
            @media (width > 768px) {
              padding-inline-start: 0.5ch;
            }
          }

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

        .show-up-text {
          overflow: hidden;
          position: relative;
          display: block flow;

          .char {
            display: inline-block;
            overflow-x: visible;
            overflow-y: clip;
            white-space: pre;
            opacity: 0;
            translate: 0 100%;
            animation: show-up-text 400ms cubic-bezier(0, 0.6, 0.4, 1) both;
            animation-play-state: paused;
            padding-bottom: 0.2em;
            /* ディセンダー分の余白を確保 */
            margin-bottom: -0.2em;
            /* レイアウトへの影響を打ち消す */
          }

          &.is-show .char {
            animation-play-state: running;
          }
        }

        /* =====================
          説明文
        ===================== */
        .description {
          margin-inline-start: 183px;
          margin-block-start: 30px;
          color: #fff;

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

  /* =====================
    company
  ===================== */
  .company {
    position: relative;
    padding-block-start: 150px;
    padding-block-end: 440px;
    overflow-x: clip;
    z-index: 5;

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

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

    @media only screen and (width <=768px) {
      &::before {
        background-size: 100% calc((100 / 390) * 720 * 1vw);
        background-position: bottom center;
        background-image: url('../img/top/company_bg_2x.png');
        inline-size: 100%;
        block-size: calc((100 / 390) * 720 * 1vw);
      }
    }

    .u-inner {
      position: relative;

      &::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/earth.png');
        inline-size: 991px;
        block-size: 1000px;
        position: absolute;
        top: -250px;
        right: -306px;
      }

      @media only screen and (width <=768px) {
        &::before {
          background-image: url('../img/top/earth_2x.png');
          inline-size: calc((100 / 390) * 304 * 1vw);
          block-size: calc((100 / 390) * 510 * 1vw);
          position: absolute;
          top: calc((100 / 390) * -309 * 1vw);
          right: 0;
        }
      }

      .wrap {
        position: relative;
        inline-size: 640px;

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

        @media only screen and (width <=768px) {
          .u-catch {
            letter-spacing: calc((100 / 390) * -1.25 * 1vw);
          }
        }

        .description {
          margin-block-start: 50px;

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

          &+.description {
            margin-block-start: 1.8em;
          }
        }

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

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

        &::before {
          content: '';
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/top/company_01.png');
          position: absolute;
          inline-size: 634px;
          block-size: 657px;
          top: 53px;
          right: -480px;
          pointer-events: none;
        }

        @media only screen and (width <=768px) {
          &::before {
            background-image: url('../img/top/company_01_2x.png');
            inline-size: calc((100 / 390) * 358 * 1vw);
            block-size: calc((100 / 390) * 234 * 1vw);
            top: calc((100 / 390) * -274 * 1vw);
            right: 0;
          }
        }
      }
    }
  }

  /* =====================
    business
  ===================== */
  .business {
    position: relative;
    padding-block-start: 68px;
    padding-block-end: 146px;
    z-index: 5;

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

    &::before {
      content: '';
      background-repeat: no-repeat;
      background-size: 100% 1332px;
      background-position: center;
      background-image: url('../img/top/business_bg.png');
      inline-size: 100%;
      block-size: 1332px;
      position: absolute;
      top: -198px;
      left: 0;
      pointer-events: none;
    }

    @media only screen and (width <=768px) {
      &::before {
        background-size: 100% calc((100 / 390) * 1079.5 * 1vw);
        background-image: url('../img/top/business_bg_2x.png');
        inline-size: 100%;
        block-size: calc((100 / 390) * 1079.5 * 1vw);
        top: calc((100 / 390) * -54.2 * 1vw);
        left: 0;
      }
    }

    .u-inner {
      position: relative;

      &::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/company_02.png');
        position: absolute;
        inline-size: 360px;
        block-size: 280px;
        top: -268px;
        right: -160px;
        pointer-events: none;
      }

      @media only screen and (width <=768px) {
        &::before {
          background-image: url('../img/top/company_02_2x.png');
          inline-size: calc((100 / 390) * 154 * 1vw);
          block-size: calc((100 / 390) * 120 * 1vw);
          top: calc((100 / 390) * -171 * 1vw);
          right: 0;
        }
      }

      .u-catch {
        color: #fff;
        text-align: center;
        margin-block-start: 52px;

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

      &>.description {
        color: #fff;
        text-align: center;
        margin-block-start: 48px;

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

      .list {
        margin-block-start: 52px;
        display: block grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;

        @media only screen and (width <=768px) {
          grid-template-columns: repeat(2, 1fr);
          gap: calc((100 / 390) * 10 * 1vw);
        }

        .item {
          background-color: #fff;
          border-radius: 10px;
          display: block grid;
          justify-items: center;
          place-content: center;
          padding-block: 38px;

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

            .img {
              & img {
                inline-size: calc((100 / 390) * 66 * 1vw);
              }
            }
          }

          .title {
            font-family: var(--serif);
            font-size: 30px;
            font-weight: bold;
            line-height: 1.4;
            background: linear-gradient(90deg, #a4b24e 0%, #5c7ca7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;

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

          .description {
            font-weight: 500;

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

      .wrap {
        display: block flex;
        gap: 50px;
        align-items: center;
        justify-content: center;
        margin-block-start: 51px;

        @media only screen and (width <=768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 10 * 1vw);
          margin-block-start: calc((100 / 390) * 38 * 1vw);
        }
      }
    }
  }

  /* =====================
  Recruit
  ===================== */
  .recruit {
    position: relative;
    padding-block-start: 287px;
    padding-block-end: 280px;
    overflow-x: clip;

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

    .u-inner {
      position: relative;

      &::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/recruit.png');
        position: absolute;
        inline-size: 801px;
        block-size: 725px;
        top: -32px;
        left: -240px;
        pointer-events: none;
      }

      @media only screen and (width <=768px) {
        &::before {
          display: block flow;
          background-image: url('../img/top/recruit_2x.png');
          inline-size: calc((100 / 390) * 358 * 1vw);
          block-size: calc((100 / 390) * 301.5 * 1vw);
          top: calc((100 / 390) * 109 * 1vw);
          left: calc((100 / 390) * 16 * 1vw);
        }
      }

      &::after {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/recruit_deco.png');
        position: absolute;
        inline-size: 231px;
        block-size: 168px;
        bottom: 13px;
        right: -211px;
        pointer-events: none;
      }

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

      .wrap {
        position: relative;
        inline-size: 630px;
        margin-inline: auto 0;
        z-index: 5;

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

        .u-catch {
          margin-block-start: 52px;

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

        .unit {
          position: relative;
          padding-inline-start: 151px;
          margin-block-start: 50px;

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

          .description+.description {
            margin-block-start: 1.8em;
          }

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

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

  /* =====================
    News
  ===================== */
  .news {
    position: relative;
    padding-block-start: 112px;
    padding-block-end: 112px;
    background-color: #f4f4f4;

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

    .u-inner {
      .wrap {
        display: block grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: repeat(2, max-content);
        align-items: start;
        justify-content: space-between;
        column-gap: 89px;
        row-gap: 14px;

        @media only screen and (width <=768px) {
          padding-inline: 0;
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: calc((100 / 390) * 9 * 1vw);
          align-items: center;
          justify-content: center;
          justify-items: center;
        }

        .u-hgroup {
          grid-area: 1/1/2/2;
          margin-block-start: 56px;

          @media only screen and (width <=768px) {
            margin-block-start: 0;
            margin-inline: auto;
            justify-items: center;

            & span[lang='en'] {
              justify-content: center;

              &::after {
                content: '';
                display: inline-block;
                inline-size: calc((100 / 390) * 16 * 1vw);
                aspect-ratio: 1/1;
                border-radius: 50rem;
                background-color: var(--secondary);
              }
            }

            & h2.title {
              justify-content: center;
              margin-block-end: unset;

              &::after {
                content: '';
                display: block flow;
                inline-size: 100%;
                block-size: 1px;
                background-color: var(--secondary);
              }
            }
          }
        }

        .u-anchor {
          grid-area: 2/1/3/2;

          @media (width <=768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 33 * 1vw);
          }
        }

        .news_wrap {
          grid-area: 1/2/3/3;

          @media only screen and (width <=768px) {
            grid-area: 2/1/3/2;
          }

          .news-list {
            .item {
              border-block-end: solid 1px #b7b7b7;

              .news-title {
                position: relative;
                display: block grid;
                grid-template-columns: 90px 1fr;
                align-items: center;
                gap: 36px;
                padding-block: 49px;

                @media only screen and (width <=768px) {
                  grid-template-columns: 1fr;
                  gap: calc((100 / 390) * 10 * 1vw) 0;
                  padding-block: calc((100 / 390) * 21 * 1vw) calc((100 / 390) * 27 * 1vw);
                }

                .date {
                  color: #979797;
                  font-size: 14px;
                  font-weight: bold;

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

                .title {
                  font-size: 15px;
                  font-weight: 300;

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

              &:last-child {
                border-block-end: none;
              }
            }
          }
        }
      }
    }
  }
}

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

/* ==== js-parallax ==== */

.mv,
.company,
.business,
.recruit,
.news {
  .js-parallax {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);

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

.links {
  .js-parallax[data-id='works'] {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);

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

  .js-parallax[data-id='contact'] {
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
    transform: translateY(1em);

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