@charset "UTF-8";

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

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

    &::before {
      content: '';
      position: absolute;
      inline-size: calc(100% - 80px);
      block-size: 500px;
      background-color: #ededed;
      bottom: 0;
      right: 0;
      pointer-events: none;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc(100% - calc((100 / 390) * 32 * 1vw));
        block-size: calc((100 / 390) * 408 * 1vw);
      }
    }

    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/top/mv_deco.png');
      inline-size: 1415px;
      block-size: 964px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-62.6%);
      z-index: 3;
      pointer-events: none;
    }
    @media only screen and (width <= 768px) {
      &::after {
        background-image: url('../img/top/mv_deco_2x.png');
        inline-size: calc((100 / 390) * 268 * 1vw);
        block-size: calc((100 / 390) * 652 * 1vw);
        top: calc((100 / 390) * 42 * 1vw);
        left: 0;
        transform: unset;
      }
    }

    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      overflow: hidden;
      width: calc(100% - 80px);
      min-height: 705px;
      top: 90px;
      left: 0;

      @media (width <= 768px) {
        width: calc(100% - calc((100 / 390) * 48 * 1vw));
        min-height: calc((100 / 390) * 550 * 1vw);
        top: calc((100 / 390) * 70 * 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: 705px;
              object-fit: cover;
              object-position: center;

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

      /* ページネーションのサイズと色 */
      .swiper-pagination-bullet {
        position: relative;
        background-color: #fff;
        inline-size: 10px;
        block-size: 10px;
        margin: 0 8px !important;
        opacity: 0.5;
        z-index: 10;

        @media only screen and (width <= 768px) {
          inline-size: calc((100 / 390) * 8 * 1vw);
          block-size: calc((100 / 390) * 8 * 1vw);
          margin: 0 calc((100 / 390) * 7 * 1vw) !important;
        }
      }

      .swiper-pagination-bullet-active {
        opacity: 1;
      }

      .swiper-horizontal > .swiper-pagination-bullets,
      .swiper-pagination-bullets.swiper-pagination-horizontal,
      .swiper-pagination-custom,
      .swiper-pagination-fraction {
        inline-size: fit-content;
        bottom: 96px;
        left: 32px;

        @media only screen and (width <= 768px) {
          bottom: calc((100 / 390) * 65 * 1vw);
          left: calc((100 / 390) * 25 * 1vw);
        }
      }
    }

    .content {
      position: relative;
      min-height: 870px;
      padding-block-start: 363px;
      margin-inline: 0 80px;
      z-index: 10;

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

      /* =====================
        キャッチ
      ===================== */
      .catch_wrap {
        position: relative;

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

        .catch {
          text-align: center;

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

        .ja-catch {
          position: relative;
          font-family: var(--serif);
          font-size: 24px;
          font-weight: bold;
          line-height: 1.4;
          letter-spacing: 0.96px;
          text-align: center;
          color: #fff;
          margin-block-start: 16px;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            letter-spacing: calc((100 / 390) * 0.72 * 1vw);
            margin-block-start: calc((100 / 390) * 8 * 1vw);
            text-align: left;
          }
        }
      }
    }
    /* =====================
      Scroll
    ===================== */
    /* スクロールダウンの位置 */
    .scroll {
      position: absolute;
      right: 42px;
      bottom: 68px;
      z-index: 12;

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

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

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

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

    /* =====================
      news
    ===================== */
    .news {
      position: absolute;
      bottom: 0;
      right: 278px;
      inline-size: 840px;
      min-block-size: 75px;
      z-index: 5;

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 294 * 1vw);
        min-block-size: unset;
        right: unset;
        left: calc((100 / 390) * 80 * 1vw);
        bottom: calc((100 / 390) * 32 * 1vw);
        padding-inline-end: calc((100 / 390) * 16 * 1vw);
      }

      .u-hover {
        display: block grid;
        grid-template-columns: 111px auto 40px;
        align-items: center;
        inline-size: 100%;
        block-size: 75px;

        @media only screen and (width <= 768px) {
          grid-template-columns: 1fr;
          block-size: unset;
        }

        &::after {
          content: '';
          inline-size: 40px;
          aspect-ratio: 50 / 8;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background-color: currentColor;
        }
        @media only screen and (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 42 * 1vw);
            margin-inline: auto 0;
            margin-block-start: calc((100 / 390) * 12 * 1vw);
          }
        }

        & > h2.title {
          position: relative;
          font-family: var(--serif);
          font-size: 24px;
          font-weight: 200;
          line-height: 1.2;

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

        .wrap {
          position: relative;
          display: block flex;
          align-items: center;
          gap: 32px;
          padding-inline-start: 48px;

          @media only screen and (width <= 768px) {
            flex-direction: column;
            align-items: start;
            padding-inline-start: 0;
            gap: calc((100 / 390) * 4 * 1vw);
            margin-block-start: calc((100 / 390) * 15 * 1vw);
          }

          &::before {
            content: '';
            display: block flow;
            inline-size: 1px;
            block-size: 29px;
            background-color: var(--primary);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }

          @media only screen and (width <= 768px) {
            &::before {
              inline-size: calc((100 / 390) * 90 * 1vw);
              block-size: 1px;
              top: calc((100 / 390) * -8 * 1vw);
              left: 0;
              transform: unset;
            }
          }

          .date {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.6;
            color: var(--primary);

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

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

    /* =====================
      marquee
    ===================== */
    /* ==== marquee ==== */
    .m_wrap {
      inline-size: calc(100% - 80px);
      position: absolute;
      display: block flex;
      align-items: center;
      left: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;

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

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

        &::before {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
        }
      }
    }

    .m_wrap[data-id='left'] {
      top: 101px;

      @media only screen and (width <= 768px) {
        top: calc((100 / 390) * 84 * 1vw);
      }
      .marquee {
        animation: marquee1 100s linear infinite;
        &::before {
          background-image: url('../img/top/marquee_01.png');
          inline-size: 3476px;
          block-size: 76px;
        }
        @media only screen and (width <= 768px) {
          animation: marquee1 100s linear infinite;
          &::before {
            background-image: url('../img/top/marquee_01_2x.png');
            inline-size: calc((100 / 390) * 1787 * 1vw);
            block-size: calc((100 / 390) * 39 * 1vw);
          }
        }
      }
    }
    .m_wrap[data-id='right'] {
      bottom: 78px;

      @media only screen and (width <= 768px) {
        bottom: calc((100 / 390) * 167 * 1vw);
      }
      .marquee {
        animation: marquee2 100s linear infinite;
        &::before {
          background-image: url('../img/top/marquee_02.png');
          inline-size: 3476px;
          block-size: 76px;
        }
        @media only screen and (width <= 768px) {
          animation: marquee2 100s linear infinite;
          &::before {
            background-image: url('../img/top/marquee_02_2x.png');
            inline-size: calc((100 / 390) * 1787 * 1vw);
            block-size: calc((100 / 390) * 39 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    company
  ===================== */
  .company {
    position: relative;
    padding-block-start: 160px;
    padding-block-end: 159px;

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

    &::before {
      content: '';
      position: absolute;
      top: 72px;
      right: 0;
      display: block;
      inline-size: calc((100% - 760px) / 2 + 760px);
      block-size: 700px;
      background: linear-gradient(305.03deg, #102647 58.91%, #2b7996 93.69%);
      pointer-events: none;
    }

    @media only screen and (width <= 768px) {
      &::before {
        top: calc((100 / 390) * 118 * 1vw);
        inline-size: calc((100 / 390) * 358 * 1vw);
        block-size: calc((100 / 390) * 871 * 1vw);
        background: linear-gradient(347.16deg, #102647 57.36%, #2b7996 85.48%);
      }
    }

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

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

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

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

      .wrap {
        position: relative;
        inline-size: 1100px;
        padding-inline: 292px 0;
        margin-inline: auto 0;
        padding-block-start: 40px;

        @media only screen and (width <= 768px) {
          inline-size: 100%;
          padding-inline: calc((100 / 390) * 64 * 1vw) 0;
          padding-block-start: calc((100 / 390) * 242 * 1vw);
        }

        .catch {
          font-family: var(--serif);
          font-size: 32px;
          font-weight: 600;
          line-height: 1.6;
          color: #fff;
          /* border-block-end: 1px solid #fff; */
          padding-inline: 40px;
          padding-block-end: 19px;
          border-image-source: linear-gradient(0deg, #fff 1px, #0000 0);
          border-image-slice: fill 0;
          border-image-outset: 0 100vw 0 0;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block-end: calc((100 / 390) * 13 * 1vw);
          }
        }
        .unit {
          padding-inline: 151px 120px;
          display: block flow;
          justify-items: end;
          margin-block-start: 56px;

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

          .description {
            color: #fff;
            margin-block-start: 1em;
          }

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

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

  /* =====================
    business
  ===================== */
  .business {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 104px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/business_bg.png');
    inline-size: 100%;
    min-block-size: 893px;

    @media only screen and (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
      background-image: url('../img/top/business_bg_2x.png');
      inline-size: 100%;
      min-block-size: calc((100 / 390) * 811 * 1vw);
    }

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

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

    &::after {
      content: '';
      display: block flow;
      background-color: rgba(255, 255, 255, 0.1);
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 50%;
      block-size: 100%;
      pointer-events: none;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 279 * 1vw);
        background-color: rgba(255, 255, 255, 0.08);
      }
    }

    .u-inner {
      position: relative;
      z-index: 3;

      .title_wrap {
        display: block flex;
        justify-content: space-between;
        align-items: end;
        padding-inline: 40px;

        @media only screen and (width <= 768px) {
          padding-inline: 0;
          flex-direction: column-reverse;
          align-items: center;
          gap: calc((100 / 390) * 37 * 1vw);

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

        .u-hgroup {
          margin-inline: unset;
          margin-block-end: 14px;

          @media only screen and (width <= 768px) {
            margin-block-end: 0;
          }
        }
      }

      .wrap {
        display: block flex;
        align-items: end;
        justify-content: space-between;
        margin-block-start: 56px;
        padding-inline: 40px;

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

        .business-list {
          display: block grid;
          grid-template-columns: repeat(2, 400px);
          gap: 1px;
          padding: 1px;

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

          .item {
            position: relative;
            outline: solid 1px rgba(255, 255, 255, 0.8);

            .anchor {
              position: relative;
              display: block flow;
              inline-size: 100%;
              block-size: 100%;
              padding-inline: 31px 30px;
              padding-block: 29.2px;

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

              &::before {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(255, 255, 255, 0.2);
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.4s ease;
                z-index: -1;
              }

              @media (any-hover: hover) {
                &:hover {
                  &::before {
                    transform: scaleX(1);
                    transform-origin: left;
                  }
                }
              }
            }

            .h4-title {
              .title {
                position: relative;
                font-family: var(--serif);
                font-size: 18px;
                font-weight: bold;
                line-height: 1.4;
                color: #fff;
                display: block flex;
                justify-content: space-between;
                align-items: center;

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

                &::after {
                  content: '';
                  display: block flow;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../img/top/arrow_small.svg');
                  inline-size: 20px;
                  block-size: 5px;
                  flex-shrink: 0;
                }
                @media only screen and (width <= 768px) {
                  &::after {
                    inline-size: calc((100 / 390) * 22 * 1vw);
                    block-size: calc((100 / 390) * 5 * 1vw);
                  }
                }
              }
              & span[lang='en'] {
                display: block flow;
                font-family: var(--serif);
                font-size: 13px;
                font-weight: bold;
                line-height: 1.4;
                color: #a1cee5;
                margin-block-start: 16px;

                @media only screen and (width <= 768px) {
                  font-size: calc((100 / 390) * 11 * 1vw);
                  margin-block-start: calc((100 / 390) * 4 * 1vw);
                }
              }
            }
          }
        }
        @media only screen and (width <= 768px) {
          .u-anchor {
            margin-inline: auto;
          }
        }
      }
    }
  }

  /* =====================
    works
  ===================== */
  .works {
    position: relative;
    padding-block-start: 128px;
    padding-block-end: 128px;
    background-color: #efefef;
    overflow: hidden;

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

    .inner {
      position: relative;
      margin-inline: 120px 0;

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

      .wrap {
        display: block grid;
        grid-template-columns: 331px auto;
        grid-template-rows: repeat(4, max-content);
        column-gap: 104px;
        align-items: center;

        @media only screen and (width <= 768px) {
          grid-template-columns: auto;
          column-gap: 0;
          padding-inline: calc((100 / 390) * 32 * 1vw);
        }

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

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

        .description {
          grid-area: 2/1/3/2;
          text-align: center;
          margin-block-start: 46px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 31 * 1vw);
            margin-inline: calc(50% - 50vw);
          }
        }
        .u-anchor {
          grid-area: 3/1/4/2;
          margin-inline: auto;
          margin-block-start: 47px;

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

        /* ==== Controller ==== */
        .works-controller {
          grid-area: 4/1/5/2;
          position: relative;
          margin-block-start: 80px;
          inline-size: fit-content;
          margin-inline: auto;

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

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

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

          & :where(.works-prev, .works-next) {
            display: block;
            cursor: pointer;
            position: relative;
            inline-size: 50px;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--primary);
            border-radius: 50rem;

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

            &::after {
              content: '';
              display: block flow;
              inline-size: 49px;
              aspect-ratio: 50 / 8;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--icon-arrow);
              background-color: var(--primary);
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translateY(-50%);
            }
            @media only screen and (width <= 768px) {
              &::after {
                inline-size: calc((100 / 390) * 49 * 1vw);
              }
            }
          }

          .works-prev {
            &::after {
              left: unset;
              right: 50%;
              transform: translateY(-50%) scale(-1, 1);
            }
          }
        }
      }

      .works-list {
        grid-area: 1/2/5/3;
        clip-path: inset(0 -50vw 0 0);

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

        .swiper-wrapper {
          align-items: center;

          .swiper-slide {
            block-size: 480px;

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

              .picture {
                & img {
                  width: calc((100 / 390) * 240 * 1vw);
                  block-size: calc((100 / 390) * 360 * 1vw);
                }
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    SDGs
  ===================== */
  .sdgs {
    position: relative;
    padding-block-start: 72px;
    padding-block-end: 72px;

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

    .inner {
      position: relative;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/top/sdgs_bg.png');
      inline-size: 1360px;
      block-size: 400px;
      margin-inline: auto;

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

      .wrap {
        inline-size: 582px;
        margin-inline: 538px 240px;
        display: block grid;
        justify-items: center;
        justify-content: center;
        padding-block: 75px;

        @media only screen and (width <= 768px) {
          inline-size: 100%;
          margin-inline: 0;
          padding-block: calc((100 / 390) * 100 * 1vw) calc((100 / 390) * 64 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
        }

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

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

        .u-anchor {
          margin-block-start: 47px;
          padding-inline: 37px;

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

  /* =====================
    recruit
  ===================== */
  .recruit {
    position: relative;
    padding-block-start: 72px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/recruit_bg_01.png');
    inline-size: 100%;
    min-block-size: 763px;

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 72 * 1vw) 0;
      background-image: url('../img/top/recruit_bg_01_2x.png');
      inline-size: 100%;
      min-block-size: unset;
    }

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

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

    .u-inner {
      position: relative;

      &::after {
        content: '';
        display: block flow;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/top/recruit_illust.png');
        inline-size: 667px;
        block-size: 593px;
        position: absolute;
        right: -27px;
        bottom: 0;
        pointer-events: none;
      }

      @media only screen and (width <= 768px) {
        &::after {
          background-image: url('../img/top/recruit_illust_2x.png');
          inline-size: calc((100 / 390) * 340 * 1vw);
          block-size: calc((100 / 390) * 272 * 1vw);
          right: calc((100 / 390) * 24 * 1vw);
          bottom: -1px;
        }
      }

      .wrap {
        inline-size: 628px;
        padding-block: 71px 78px;
        margin-inline-start: 40px;

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

        .description[data-id='1'] {
          margin-block-start: 45px;

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

        .list {
          display: block flex;
          flex-wrap: wrap;
          gap: 19px 24px;
          margin-block-start: 24px;

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

          .item {
            font-weight: 600;
            color: #fff;
            background: linear-gradient(90deg, rgba(69, 166, 9, 0.7) 0%, rgba(2, 114, 134, 0.7) 100%);
            border-radius: 50rem;
            padding-inline: 40px;
            padding-block: 8px;

            @media only screen and (width <= 768px) {
              padding-inline: calc((100 / 390) * 32 * 1vw);
              padding-block: calc((100 / 390) * 8 * 1vw);
            }

            &[data-id='3'] {
              padding-inline: 56px;
              padding-block: 10px;

              @media only screen and (width <= 768px) {
                padding-inline: calc((100 / 390) * 32 * 1vw);
                padding-block: calc((100 / 390) * 10 * 1vw);
              }
            }
          }
        }

        .description[data-id='2'] {
          margin-block-start: 24px;

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

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

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

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

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

.mv {
  .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 {
  .js-parallax {
    &::before {
      opacity: 0;
      transition: all 1s ease-in-out 0s;
      transform: translateY(1em);
    }
    &.on {
      &::before {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}
.business,
.sdgs,
.works {
  .js-parallax {
    opacity: 0;
    transition: all 1s ease-in-out 0s;
    transform: translateY(1em);
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.recruit {
  .js-parallax {
    &::after {
      opacity: 0;
      transition: all 1s ease-in-out 0s;
      transform: translateY(1em);
    }
    &.on {
      &::after {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}