@charset "UTF-8";

/* =====================
  animation
===================== */
@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

  100% {
    opacity: 1;
    translate: 0 0%;
  }
}

/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* =====================
  Header
===================== */
.header {
  .logo {
    .logo-small {
      opacity: 0;
      transition: all 0.3s ease-in-out;

      @media (width <= 768px) {
        opacity: 1;
      }
    }
    &::after {
      content: '';
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/top/logo_big.png');
      inline-size: 250px;
      block-size: 238px;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.1s ease-in-out;
    }

    @media (width <= 768px) {
      &::after {
        display: none;
      }
    }
  }
}
.is-header-color {
  .header {
    .logo {
      .logo-small {
        opacity: 1;
      }

      &::after {
        transform: translateY(-100%);
      }
    }
  }
}

.main {
  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;
    width: 100%;
    min-block-size: 870px;

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

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

    @media (width <= 768px) {
      &::before {
        inline-size: calc(100% - calc((100 / 390) * 48 * 1vw));
        background-image: url('../img/top/mv_bg_2x.png');
        block-size: calc((100 / 390) * 217 * 1vw);
      }
    }
    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      overflow: hidden;
      width: calc(100% - 250px);
      min-height: 662px;
      top: 94px;
      right: 0;

      @media (width <= 768px) {
        width: calc(100% - calc((100 / 390) * 64 * 1vw));
        min-height: calc((100 / 390) * 468 * 1vw);
        top: calc((100 / 390) * 60 * 1vw);
      }
      .mv-swiper-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: inherit;

        .swiper-slide {
          position: relative;

          & picture {
            display: block flow;
            & img {
              inline-size: 100%;
              block-size: 100%;
              min-height: 662px;
              object-fit: cover;
              object-position: center;

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

    /* ==== Bullet ==== */
    .swiper-pagination {
      position: absolute;
      text-align: left;
      padding-inline: 250px 80px;
      bottom: 47px;
      right: 0;
      pointer-events: none;

      @media (width <= 768px) {
        text-align: right;
        padding-inline: calc((100 / 390) * 64 * 1vw);
        bottom: calc((100 / 390) * 127 * 1vw);
      }
    }

    .swiper-pagination-bullet {
      opacity: 1;
      width: 10px !important;
      height: 10px !important;
      margin: 0 0 0 24px !important;
      background: rgba(255, 255, 255, 0.5);

      @media (width <= 768px) {
        width: calc((100 / 390) * 8 * 1vw) !important;
        height: calc((100 / 390) * 8 * 1vw) !important;
        margin: 0 0 0 calc((100 / 390) * 16 * 1vw) !important;
      }
    }

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: var(--primary);
    }

    .swiper-pagination-bullet:first-child {
      margin: 0 !important;
    }
    /* ====  ==== */

    .content {
      position: relative;
      min-height: 756px;
      z-index: 10;

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

      .catch {
        position: absolute;
        display: block flex;
        gap: 167px;
        top: 272px;
        left: 105px;

        @media (width <= 768px) {
          top: calc((100 / 390) * 134 * 1vw);
          left: calc((100 / 390) * 18 * 1vw);
          gap: calc((100 / 390) * 36 * 1vw);
        }

        /* =====================
          日本語　キャッチ
        ===================== */
        .ja-catch {
          position: relative;
          font-family: var(--catch);
          font-size: 40px;
          color: var(--primary);
          line-height: 1;
          background-image: linear-gradient(94deg, #173004 0%, #459e00 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
          z-index: 11;
          margin-inline-start: 16px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
            line-height: 1.1;
            margin-inline-start: 0;
          }
        }
        /* =====================
        英字　キャッチ
        ===================== */
        .en-catch {
          text-transform: uppercase;
          text-shadow: 4px 4px 30px rgba(0, 45, 8, 0.4);
          background-image: radial-gradient(circle at 2% 96%, #16711c, rgba(255, 255, 255, 0.8) 60%);
          font-family: var(--title);
          font-size: 80px;
          line-height: 1.1;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 36 * 1vw);
            margin-block-start: calc((100 / 390) * 189 * 1vw);
          }
        }
      }
    }
    /* =====================
      Scroll
    ===================== */
    /* スクロールダウンの位置 */
    .scroll {
      position: absolute;
      right: 32px;
      bottom: 210px;
      z-index: 12;

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

      /* 線のアニメーション部分 */
      &::before {
        animation: scroll 2s cubic-bezier(1, 0, 0, 1) infinite;
        background-color: #fff;
        top: 120px;
        border-radius: 50rem;
        content: '';
        height: 80px;
        left: 50%;
        margin: auto;
        position: absolute;
        width: 2px;
        z-index: 2;
      }
      /* 線の背景色 */
      &::after {
        background-color: transparent;
        top: 120px;
        border-radius: 50rem;
        content: '';
        height: 80px;
        left: 50%;
        margin: auto;
        position: absolute;
        width: 2px;
      }
      & > 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: 11px;
          block-size: 103px;
        }

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

      @media (width <= 768px) {
        &::before {
          top: calc((100 / 390) * 106 * 1vw);
          height: calc((100 / 390) * 60 * 1vw);
          width: 1px;
        }
        &::after {
          top: calc((100 / 390) * 106 * 1vw);
          height: calc((100 / 390) * 60 * 1vw);
          width: 1px;
        }
        & > span {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

    /* =====================
    news
  ===================== */
    .news {
      position: relative;
      margin-inline-start: 634px;

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

      .u-hover {
        display: block grid;
        grid-template-columns: max-content auto;
        align-items: center;
        column-gap: 40px;
        min-block-size: 114px;
        padding-inline: 0 80px;

        @media (width <= 768px) {
          min-block-size: calc((100 / 390) * 119 * 1vw);
          grid-template-columns: 1fr;
          grid-template-rows: repeat(2, max-content);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block: calc((100 / 390) * 8 * 1vw);
        }

        & > h2.title {
          position: relative;
          font-family: var(--title);
          font-size: 32px;
          background-image: linear-gradient(255.87deg, #d2d200 -8.93%, #007635 37.32%, #18562a 83.58%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          text-transform: uppercase;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
          }
        }
        .wrap {
          position: relative;
          display: block flex;
          align-items: baseline;
          gap: 32px;
          line-height: 1.6;
          color: #00601f;

          @media (width <= 768px) {
            flex-direction: column;
            align-items: start;
            gap: 0;
          }

          &::after {
            content: '';
            inline-size: 14px;
            aspect-ratio: 14 / 9;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--icon-arrow);
            background-color: currentColor;
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
          }

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

          .date {
            font-family: var(--title);
            line-height: 1.6;
            text-align: center;
            color: #00601f;

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

  /* =====================
    company
  ===================== */
  .company {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/company_bg.png');
    inline-size: 100%;
    min-block-size: 760px;
    z-index: 1;
    margin-block: 120px;

    @media (width <= 768px) {
      background-image: unset;
      inline-size: 100%;
      min-block-size: unset;
      margin-block: calc((100 / 390) * 80 * 1vw);

      &::before {
        content: '';
        position: absolute;
        inline-size: 100%;
        block-size: calc((100 / 390) * 260 * 1vw);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../img/top/company_bg_2x.png');
      }
    }
    .inner {
      inline-size: 1440px;
      min-block-size: 760px;
      margin-inline: auto;
      display: block grid;
      align-items: end;

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

      .tate {
        position: absolute;
        top: 90px;
        right: 112px;
        font-family: var(--catch);
        font-size: 32px;
        color: #fff;
        line-height: 1;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;

        @media (width <= 768px) {
          top: calc((100 / 390) * 34 * 1vw);
          right: calc((100 / 390) * 20 * 1vw);
          font-size: calc((100 / 390) * 20 * 1vw);
          line-height: 1.4;

          & span.sp {
            display: inline-block;
            padding-inline: 0.5em;
          }
        }
      }

      .wrap {
        inline-size: 760px;
        background-color: #fff;
        padding-inline: 80px;
        padding-block-start: 80px;

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

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

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

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

  /* =====================
    business
  ===================== */
  .business {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 128px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/business_bg.png');

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

    .inner {
      inline-size: 1440px;
      margin-inline: auto;

      @media (width <= 768px) {
        inline-size: 100%;
      }
      .wrap {
        display: block flex;
        align-items: start;
        gap: 88px;

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

        .img {
          display: block flow;
          flex-shrink: 0;

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

        .unit {
          margin-inline-end: 80px;

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

          .u-h2-title {
            margin-block-start: 64px;

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

          .description {
            color: #fff;
            margin-block-start: 42px;

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

          .business-list {
            margin-block-start: 48px;
            display: block flex;
            align-items: center;
            gap: 16px;

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

            .item {
              .u-hover {
                display: block flow;
                color: #fff;
                border: 1px solid #fff;
                border-radius: 50rem;
                padding-inline: 31px;
                padding-block: 8px;
                text-align: center;

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

                .title {
                  white-space: nowrap;
                }
              }
            }
          }

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

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

  /* ==== marquee ==== */
  .u-marquee {
    inline-size: 100%;
    position: absolute;
    bottom: -27px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;

    &::before {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/top/marquee.png');
      inline-size: 2359px;
      block-size: 54px;
      animation: marquee 100s linear infinite;
    }

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

      &::before {
        background-image: url('../img/top/marquee_2x.png');
        inline-size: calc((100 / 390) * 1401.5 * 1vw);
        block-size: calc((100 / 390) * 43.5 * 1vw);
        animation: marquee 50s linear infinite;
      }
    }
  }

  /* =====================
    works
  ===================== */
  .works {
    position: relative;
    padding-block-start: 128px;
    padding-block-end: 120px;
    background-color: #effdf5;
    z-index: 1;

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

    .inner {
      padding-inline: 80px 0;
      display: block flex;
      gap: 72px;

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

      .wrap {
        flex-shrink: 0;

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

        .u-h2-title {
          margin-block-start: 41px;

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

        .works-controller {
          position: relative;
          margin-block-start: 51px;

          @media (width <= 768px) {
            position: absolute;
            bottom: calc((100 / 390) * -504 * 1vw);
            left: 50%;
            transform: translateX(-50%);
            margin-block-start: 0;
          }

          .controll-btn {
            display: flex;
            align-items: center;
            width: fit-content;
            gap: 72px;

            @media (width <= 768px) {
              justify-content: center;
              gap: calc((100 / 390) * 72 * 1vw);
            }
          }

          & :where(.works-prev, .works-next) {
            display: block;
            cursor: pointer;
            position: relative;
            inline-size: 30px;
            aspect-ratio: 30 / 19;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--icon-arrow);
            background-color: var(--primary);

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

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

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

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

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

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

      .works-list {
        overflow: hidden;
        margin-inline-start: calc((100 / 390) * 16 * 1vw);
        .swiper-wrapper {
          .swiper-slide {
            inline-size: 280px !important;
            block-size: 420px !important;

            @media (width <= 768px) {
              inline-size: unset !important;
              block-size: unset !important;
            }
            .picture {
              & img {
                inline-size: 280px !important;
                block-size: 420px !important;

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

  /* =====================
    links
  ===================== */
  .links {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 80px;

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

    .u-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding-inline: 0;
      }

      .section_item {
        position: relative;
        inline-size: 640px;
        block-size: 399px;
        overflow: hidden;

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

        .link-anchor {
          position: relative;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          padding-inline: 64px;
          padding-block: 69px 64px;

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

          &::before {
            content: '';
            position: absolute;
            inline-size: 640px;
            block-size: 399px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            top: 0;
            left: 0;
            transition: all 0.3s ease-in-out;
          }

          @media (width <= 768px) {
            &::before {
              inline-size: 100%;
              block-size: calc((100 / 390) * 302 * 1vw);
            }
          }
          .u-h2-title {
            position: relative;
          }

          .description {
            position: relative;
            color: #fff;
            margin-block-start: 42px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 22 * 1vw);
            }
          }
          .u-anchor {
            position: relative;
            margin-block-start: 41px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 22 * 1vw);
            }
          }
        }
        &[data-id='recruit'] {
          .link-anchor {
            &::before {
              background-image: url('../img/top/recruit_bg.png');
            }

            @media (width <= 768px) {
              &::before {
                background-image: url('../img/top/recruit_bg_2x.png');
              }
            }
          }
        }
        &[data-id='sdgs'] {
          .link-anchor {
            &::before {
              background-image: url('../img/top/sdgs_bg.png');
            }

            @media (width <= 768px) {
              &::before {
                background-image: url('../img/top/sdgs_bg_2x.png');
              }
            }
          }
        }

        @media (any-hover: hover) {
          &:hover {
            .link-anchor {
              &::before {
                scale: 1.1;
              }
              .u-anchor {
                background-color: #fff;
                .btn-txt {
                  color: #003a13;
                }
              }
            }
          }
        }
      }
    }
  }
}

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

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

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

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

.company {
  .tate.js-parallax {
    --_transition: filter 1.2s ease, opacity 1.2s ease;
    opacity: 0;
    filter: blur(0.2em);
    transition: var(--_transition);
    transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);

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

.company,
.business,
.works {
  .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='recruit'] {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .js-parallax[data-id='sdgs'] {
    opacity: 0;
    transition: all 1s ease-in-out 0.6s;
    transform: translateY(1em);
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
  }
}