@charset "UTF-8";

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

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

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      inline-size: 100%;
      block-size: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 73.69%, #ffffff 100%);
      z-index: 4;
    }

    .u-mv-deco {
      &::before {
        background-image: url('../img/top/mv_r.svg');
        inline-size: 516px;
        block-size: 389px;
        top: 98px;
        right: 0;
      }

      @media only screen and (width <= 768px) {
        &::before {
          background-image: url('../img/top/mv_r_2x.svg');
          inline-size: calc((100 / 390) * 222 * 1vw);
          block-size: calc((100 / 390) * 183 * 1vw);
          top: calc((100 / 390) * 86 * 1vw);
          right: 0;
        }
      }
      &::after {
        background-image: url('../img/top/mv_l.svg');
        inline-size: 675px;
        block-size: 249px;
        bottom: 23px;
        left: 0;
      }

      @media only screen and (width <= 768px) {
        &::after {
          background-image: url('../img/top/mv_l_2x.svg');
          width: 316px;
          height: 117px;
          inline-size: calc((100 / 390) * 316 * 1vw);
          block-size: calc((100 / 390) * 117 * 1vw);
          bottom: calc((100 / 390) * 23 * 1vw);
          left: 0;
        }
      }
    }

    /* ==== 背景スライダー ==== */
    .mv-slider {
      position: absolute;
      overflow: hidden;
      width: 100%;
      min-height: 840px;
      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%;
        min-height: inherit;

        .swiper-slide {
          position: relative;

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

              @media (width <= 768px) {
                min-height: calc((100 / 390) * 647 * 1vw);
              }
            }
          }
        }
      }
      .zoom img {
        animation-name: zoom;
        animation-duration: 15s;
        animation-delay: 0ms;
        animation-timing-function: linear; /* ease/ease-in/ease-out/ease-in-out/linear/cubic-bezier()/steps(1, jump-end) */
        animation-iteration-count: 1; /* {num}/infinite */
        animation-direction: normal; /* normal/reverse/alternate/alternate-reverse */
        animation-fill-mode: both; /* none/backwards(0%)/forwards(100%)/both(0%->100%) */
        animation-play-state: running; /* running/paused */
      }
    }

    .content {
      position: relative;
      min-height: 756px;
      padding-block-start: 146px;
      padding-inline: 40px;
      z-index: 10;

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

      .catch {
        position: relative;

        /* =====================
          日本語　キャッチ
        ===================== */
        .ja-catch {
          font-size: 24px;
          font-weight: bold;
          line-height: 1.5;
          color: #fff;
          z-index: 11;
          padding-inline-start: 48px;

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

        /* =====================
          ロゴ
        ===================== */
        .mv-logo {
          display: block flow;
          text-align: center;
          margin-block-start: 43px;

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

      /* =====================
        Recruit バナー
      ===================== */
      .recruit_bnr {
        position: relative;
        inline-size: 459px;
        block-size: 116px;
        margin-inline: auto 0;
        margin-block-start: 104px;
        transition: all 0.3s ease-in-out;

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

        &::after {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/top/bnr.png');
          inline-size: 148px;
          block-size: 162px;
          bottom: 0;
          right: 16px;
          pointer-events: none;
        }

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

        .hover {
          display: block grid;
          align-content: center;
          inline-size: 100%;
          block-size: inherit;
          background: #fff;
          border-radius: 20px;
          padding-inline: 27px;
          row-gap: 6px;

          @media only screen and (width <= 768px) {
            border-radius: calc((100 / 390) * 20 * 1vw);
            padding-inline: calc((100 / 390) * 20 * 1vw);
            row-gap: calc((100 / 390) * 4 * 1vw);
          }

          &::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
            opacity: 0;
            transition: all 0.3s ease-in-out;
          }

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

          .unit {
            display: block flex;
            align-items: center;
            gap: 10px;
            padding-inline: 12px;

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

            .btn {
              position: relative;
              inline-size: 46px;
              block-size: 27px;
              background-image: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
              border-radius: 10px;
              transition: all 0.3s ease-in-out;

              @media only screen and (width <= 768px) {
                inline-size: calc((100 / 390) * 34 * 1vw);
                block-size: calc((100 / 390) * 19 * 1vw);
                border-radius: calc((100 / 390) * 10 * 1vw);
              }

              &::before {
                content: '';
                position: absolute;
                inset: 1px;
                border-radius: 9px;
                background-color: #fff;
                opacity: 0;
                transition: all 0.3s ease-in-out;
              }

              @media only screen and (width <= 768px) {
                &::before {
                  border-radius: calc((100 / 390) * 9 * 1vw);
                }
              }

              &::after {
                content: '';
                inline-size: 10px;
                aspect-ratio: 1 / 1;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_arrow.svg');
                filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                flex-shrink: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.3s ease-in-out;
              }

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

            & p.catch {
              font-size: 15px;
              font-weight: 500;
              line-height: 1.5;
              color: var(--primary);

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

          & h4.en-catch {
            position: relative;
            font-family: var(--title);
            font-size: 32px;
            line-height: 1.1;
            text-transform: uppercase;

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

        @media (any-hover: hover) {
          &:hover {
            .hover {
              &::before {
                opacity: 1;
              }
              .btn {
                &::before {
                  opacity: 1;
                }
                &::after {
                  filter: unset;
                  top: 46%;
                  left: 52%;
                }
              }
              & h4.en-catch {
                background: unset;
                -webkit-background-clip: unset;
                -webkit-text-fill-color: unset;
                background-clip: unset;
                color: #fff;
              }
            }
          }
        }
      }

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

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

        /* 線のアニメーション部分 */
        &::before {
          animation: scroll 2s cubic-bezier(1, 0, 0, 1) infinite;
          background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
          top: 71px;
          border-radius: 50rem;
          content: '';
          height: 64px;
          left: 50%;
          margin: auto;
          position: absolute;
          width: 1px;
          z-index: 2;
        }
        /* 線の背景色 */
        &::after {
          background-color: transparent;
          top: 71px;
          border-radius: 50rem;
          content: '';
          height: 64px;
          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: 54px;
          }

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

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

  /* =====================
    company
  ===================== */
  .company {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 294px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/company_bg.png');
    min-block-size: 860px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 223 * 1vw);
      background-image: url('../img/top/company_bg_2x.png');
      min-block-size: calc((100 / 390) * 750 * 1vw);
    }
    .u-inner {
      position: relative;

      .en-catch {
        display: block flow;
        background: linear-gradient(0deg, rgba(0, 59, 130, 0.3) 0%, rgba(27, 185, 238, 0.3) 66.35%);
        font-family: var(--title);
        font-size: 72px;
        line-height: 1.1;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        padding-inline: 10px;

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

      .catch {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.6;
        padding-inline: 50px;
        margin-block-start: 40px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
          padding-inline: 0;
          margin-block-start: calc((100 / 390) * 19 * 1vw);
        }
      }
      .unit {
        padding-inline: 50px;
        display: block grid;
        justify-items: end;

        @media only screen and (width <= 768px) {
          padding-inline: 0;
          justify-items: start;
        }

        .description {
          padding-inline-end: 8px;

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

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

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

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

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

    .u-inner {
      .wrap {
        padding-inline: 50px;
        display: block flex;
        justify-content: space-between;
        gap: 66px;

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

        .unit {
          .catch {
            font-size: 32px;
            font-weight: 500;
            margin-block-start: 53px;

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

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

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 24 * 1vw);
            }
          }
        }
        .img {
          display: block flow;
          flex-shrink: 0;
          margin-block-start: 29px;

          @media only screen and (width <= 768px) {
            margin-block-start: 0;
            & img {
              inline-size: 100%;
            }
          }
        }
      }
    }
  }
  /* =====================
    links
  ===================== */
  .links {
    position: relative;
    padding-block: 96px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top/links_bg.png');
    min-block-size: 697px;

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

    .u-inner {
      .list {
        display: block grid;
        grid-template-columns: repeat(2, 580px);
        gap: 40px;
        justify-content: center;

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

        .item {
          -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
          background-color: #fff;
          border-radius: 0 40px 0 40px;

          @media only screen and (width <= 768px) {
            -webkit-backdrop-filter: blur(calc((100 / 390) * 20 * 1vw));
            backdrop-filter: blur(calc((100 / 390) * 20 * 1vw));
            border-radius: 0 calc((100 / 390) * 40 * 1vw) 0 calc((100 / 390) * 40 * 1vw);
          }

          .hover {
            display: block flow;
            padding-block: 64px;

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

            .img_wrap {
              overflow: hidden;

              .img {
                & img {
                  transition: all 0.3s ease-in-out;

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

            .unit {
              position: relative;
              margin-block-start: -46px;
              padding-inline: 32px;
              display: block flex;
              align-items: baseline;
              justify-content: space-between;

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

              .btn {
                position: relative;
                inline-size: 94px;
                block-size: 47px;
                background-image: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
                border-radius: 10px;
                transition: all 0.3s ease-in-out;

                @media only screen and (width <= 768px) {
                  inline-size: calc((100 / 390) * 47 * 1vw);
                  block-size: calc((100 / 390) * 29 * 1vw);
                  border-radius: calc((100 / 390) * 10 * 1vw);
                }

                &::before {
                  content: '';
                  position: absolute;
                  inset: 1px;
                  border-radius: 9px;
                  background-color: #fff;
                  opacity: 0;
                  transition: all 0.3s ease-in-out;
                }
                @media only screen and (width <= 768px) {
                  &::before {
                    border-radius: calc((100 / 390) * 9 * 1vw);
                  }
                }

                &::after {
                  content: '';
                  inline-size: 10px;
                  aspect-ratio: 1 / 1;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../img/_common/icon_arrow.svg');
                  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                  flex-shrink: 0;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  transition: all 0.3s ease-in-out;
                }

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

            .description {
              text-align: center;
              margin-block-start: 40px;

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

            @media (any-hover: hover) {
              &:hover {
                .img_wrap {
                  .img {
                    & img {
                      transform: scale(1.1);
                    }
                  }
                }
                .unit {
                  .btn {
                    &::before {
                      opacity: 1;
                    }
                    &::after {
                      filter: unset;
                      top: 46%;
                      left: 54%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    Recruit
  ===================== */
  .recruit {
    position: relative;
    padding-block-start: 218px;
    padding-block-end: 187px;
    background: linear-gradient(0deg, #003b82 0%, #1bb9ee 66.35%);
    border-radius: 0px 0px 50px 50px;
    overflow: hidden;

    @media only screen and (width <= 768px) {
      padding-block-start: calc((100 / 390) * 142 * 1vw);
      padding-block-end: calc((100 / 390) * 156 * 1vw);
      border-radius: 0 0 calc((100 / 390) * 30 * 1vw) calc((100 / 390) * 30 * 1vw);
    }

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

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

    .u-inner {
      position: relative;
      z-index: 5;
      .wrap {
        .unit {
          color: #fff;
          text-align: center;
          margin-block-start: 56px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 40 * 1vw);
          }
          .description {
            margin-block-start: 0.5em;
          }
        }
        .u-anchor {
          margin-block-start: 47px;

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

    /* loop */
    .loop {
      position: absolute;
      inline-size: fit-content;
      pointer-events: none;
      display: block flex;
      gap: 24px;

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

      .loop-box {
        display: block flex;
        gap: 24px;
        flex-shrink: 0;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 16 * 1vw);
        }
        .loop-item {
          width: fit-content;
          display: block;
          flex-shrink: 0;
          & img {
            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 177 * 1vw);
            }
          }
        }
      }
      &[data-id='1'] {
        top: 64px;
        left: 0;

        @media (width <= 768px) {
          top: calc((100 / 390) * 47 * 1vw);
        }
        .loop-box {
          animation: loop-list1 100s linear infinite;
        }
      }
      &[data-id='2'] {
        bottom: 64px;
        left: 0;

        @media (width <= 768px) {
          bottom: calc((100 / 390) * 64 * 1vw);
        }
        .loop-box {
          animation: loop-list2 100s linear infinite;
        }
      }
    }
  }

  /* =====================
    News
  ===================== */
  .news {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 120px;

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

    .u-inner {
      .wrap {
        padding-inline: 50px;
        display: block grid;
        grid-template-columns: max-content 1fr;
        align-items: start;
        justify-content: space-between;
        gap: 72px;

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

        .unit {
          @media only screen and (width <= 768px) {
            display: block flex;
            align-items: center;
            justify-content: space-between;
          }

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

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 0 * 1vw);
            }
          }
        }
        .news_wrap {
          .news-list {
            .item {
              border-block-start: solid 1px #bfcdd9;

              .news-title {
                position: relative;
                display: block grid;
                grid-template-columns: 103px 1fr max-content;
                align-items: center;
                gap: 48px;
                padding-block: 39px;
                padding-inline: 40px;

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

                &::after {
                  content: '';
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../img/_common/icon_arrow.svg');
                  inline-size: 10px;
                  aspect-ratio: 1/1;
                }

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

                .date {
                  font-family: var(--title);

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

                .title {
                  @media only screen and (width <= 768px) {
                    grid-area: 2/1/3/2;
                  }
                }
              }
              &:last-child {
                border-block-end: solid 1px #bfcdd9;
              }
            }
          }
        }
      }
    }
  }
}

/* =====================
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,
.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='sdgs'] {
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
    transform: translateY(1em);
    &.on {
      opacity: 1;
      transform: translateY(0);
    }
  }
}