@charset "UTF-8";
body {
  background-color: #eef8fb;
}
.main {
  /* =====================
    MV
  ===================== */
  .mv {
    position: relative;
    margin-block-start: 84px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/mv_bg.png');
    width: 100%;
    min-block-size: 1592px;
    overflow: hidden;

    @media (width <= 768px) {
      background-image: url('../img/recruit/mv_bg_2x.png');
      min-block-size: calc((100 / 390) * 1449 * 1vw);
    }

    .mv-content {
      position: relative;
      .u-inner {
        position: relative;

        .breadcrumb {
          margin-block-start: -8px;

          @media (width <= 768px) {
            margin-block-start: 0;
            position: absolute;
            bottom: calc((100 / 390) * -549 * 1vw);
            right: calc((100 / 390) * -16 * 1vw);
          }
        }

        .ja-catch {
          margin-block-start: 105px;
          margin-inline-start: 40px;
          font-family: var(--yumin);
          font-size: 36px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 1.08px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 26 * 1vw);
            letter-spacing: calc((100 / 390) * 0.78 * 1vw);
            margin-block-start: calc((100 / 390) * 53 * 1vw);
            margin-inline-start: 0;
            line-height: 1.8;
          }
        }

        .en-catch {
          position: absolute;
          font-family: var(--title);
          font-size: 88px;
          font-weight: 500;
          line-height: 1.1;
          letter-spacing: 2.64px;
          z-index: 5;
          padding-inline-start: 88px;
          bottom: -702px;
          left: 48px;

          &::before {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/mv_logo.png');
            inline-size: 340px;
            block-size: 44px;
            position: absolute;
            top: -53px;
            left: 27px;
          }

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 42 * 1vw);
            letter-spacing: calc((100 / 390) * 1.26 * 1vw);
            bottom: calc((100 / 390) * -349 * 1vw);
            left: calc((100 / 390) * -48 * 1vw);

            &::before {
              background-image: url('../img/recruit/mv_logo_2x.png');
              inline-size: calc((100 / 390) * 186 * 1vw);
              block-size: calc((100 / 390) * 25 * 1vw);
              top: calc((100 / 390) * -26 * 1vw);
              left: calc((100 / 390) * 61 * 1vw);
            }
          }
        }
      }
      .loop {
        position: relative;
        inline-size: fit-content;
        pointer-events: none;
        display: block flex;
        gap: 32px;
        margin-block-start: 40px;

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

        .loop-box {
          display: block flex;
          animation: loop-list 40s linear infinite;
          gap: 32px;
          flex-shrink: 0;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 20 * 1vw);
          }
          .loop-item {
            width: fit-content;
            display: block;
            flex-shrink: 0;
            & img {
              @media (width <= 768px) {
                inline-size: calc((100 / 390) * 296 * 1vw);
              }
            }
          }
        }
      }
      /* ==== entry-bnr ==== */
      .entry-bnr {
        position: absolute;
        width: 80px;
        height: 208px;
        z-index: 5;
        background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
        border-radius: 20px 0 0 20px;
        top: 0;
        right: 0;

        @media (width <= 768px) {
          width: calc((100 / 390) * 64 * 1vw);
          height: calc((100 / 390) * 175 * 1vw);
          border-radius: calc((100 / 390) * 10 * 1vw) 0 0 calc((100 / 390) * 10 * 1vw);
          top: calc((100 / 390) * 27 * 1vw);
          right: 0;
        }

        .u-hover {
          position: relative;
          display: block flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          inline-size: 100%;
          block-size: 100%;
          writing-mode: vertical-rl;
          font-family: var(--yumin);
          font-weight: 600;
          line-height: 1.4;
          letter-spacing: 1.8px;
          color: #fff;
          &::before {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/recruit/icon_link.svg');
            inline-size: 22px;
            block-size: 24px;
          }

          @media (width <= 768px) {
            gap: calc((100 / 390) * 12 * 1vw);
            line-height: 1.4;
            letter-spacing: calc((100 / 390) * 6.2 * 1vw);
            justify-content: start;
            padding-inline-start: calc((100 / 390) * 35 * 1vw);

            &::before {
              inline-size: calc((100 / 390) * 18 * 1vw);
              block-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }
      }

      /* ==== BTN-set ==== */
      .btn-set {
        inline-size: 233px;
        position: absolute;
        z-index: 5;
        top: 450px;
        right: 0;
        background-color: #fff;
        border-radius: 20px 0 0 20px;
        padding-block: 12px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 342 * 1vw);
          top: calc((100 / 390) * 481 * 1vw);
          right: unset;
          left: 0;
          border-radius: calc((100 / 390) * 10 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 22 * 1vw);
          margin-inline: calc((100 / 390) * 24 * 1vw);
          display: block grid;
          grid-template-columns: repeat(2, calc((100 / 390) * 124 * 1vw));
          justify-content: space-between;
          column-gap: calc((100 / 390) * 46 * 1vw);
          row-gap: calc((100 / 390) * 11 * 1vw);
        }

        & > li {
          .u-hover {
            display: block flow;
            inline-size: 100%;
            block-size: 100%;
            padding-inline: 32px;
            padding-block: 9.5px;

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

            .btn-txt {
              position: relative;
              font-size: 15px;
              font-weight: 500;
              letter-spacing: 0.45px;
              color: #1b57af;
              display: block flex;
              align-items: center;
              justify-content: space-between;
              gap: 54px;

              &::before {
                content: '';
                display: block flow;
                inline-size: 13px;
                aspect-ratio: 13 / 8;
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: center;
                mask-image: var(--arrow);
                background-color: #fff;
                position: absolute;
                top: 50%;
                right: 5px;
                transform: translateY(-50%);
              }
              &::after {
                content: '';
                display: block flow;
                inline-size: 22px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                background-color: #1b57af;
              }

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

                &::before {
                  inline-size: calc((100 / 390) * 9 * 1vw);
                  right: calc((100 / 390) * 5 * 1vw);
                }
                &::after {
                  inline-size: calc((100 / 390) * 20 * 1vw);
                }
              }
            }
          }
        }
      }
    }
    /* =====================
      Message
    ===================== */
    .message {
      padding-block-start: 123px;

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

      .ja-catch {
        font-family: var(--yumin);
        font-size: 32px;
        font-weight: 600;
        letter-spacing: 0.96px;
        line-height: 1;
        text-align: center;
        color: #1b57af;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 25 * 1vw);
          letter-spacing: calc((100 / 390) * 0.75 * 1vw);
          margin-block-start: calc((100 / 390) * 46 * 1vw);
        }
      }
      .description {
        text-align: center;
        margin-block-start: 48px;

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

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

  /* =====================
    Requirements
  ===================== */
  .requirements {
    position: relative;
    padding-block-start: 80px;
    padding-block-end: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/requirement_bg.png');
    inline-size: 100%;

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

    /* ==== tab ==== */
    .tab {
      inline-size: fit-content;
      display: block flex;
      gap: 32px;
      background-color: #fff;
      border-radius: 50rem;
      padding-inline: 48px;
      margin-block-start: 60px;
      margin-inline-start: 40px;

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

      & li {
        font-family: var(--yumin);
        font-size: 18px;
        font-weight: 600;
        color: #b2b2b2;

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

        .link-anchor {
          position: relative;
          display: block flex;
          align-items: center;
          gap: 16px;
          inline-size: 100%;
          block-size: 100%;
          padding-block: 16px;

          &::before {
            content: '';
            display: block flow;
            inline-size: 10px;
            aspect-ratio: 1 / 1;
            border-radius: 50rem;
            background-color: transparent;
          }

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

            &::before {
              inline-size: calc((100 / 390) * 8 * 1vw);
            }
          }
        }
        /* ==== active ==== */
        &.active {
          color: #1b57af;
          pointer-events: none;
          .link-anchor {
            &::before {
              background-color: #1b57af;
            }
          }
        }
      }
    }

    /*エリアの表示非表示と形状*/
    .area {
      display: none;
      /*はじめは非表示*/
      opacity: 0;
      /*透過0*/
      margin-block-start: 47px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 40 * 1vw);
      }
    }
    /*areaにis-activeというクラスがついた時の形状*/
    .area.is-active {
      display: block;
      /*表示*/
      animation-name: displayAnime;
      /*ふわっと表示させるためのアニメーション*/
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
  }

  /* =====================
    interview
  ===================== */
  .interview {
    position: relative;
    padding-block-start: 84px;
    padding-block-end: 120px;
    background-color: #fff;

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

    .title_wrap {
      display: block flex;
      align-items: center;
      gap: 120px;

      @media (width <= 768px) {
        flex-direction: column;
        align-items: flex-start;
        gap: calc((100 / 390) * 37 * 1vw);
      }
    }
    .container {
      position: relative;
      max-inline-size: 1280px;
      background-color: #eef8fb;
      border-radius: 20px;
      padding-inline: 88px;
      padding-block: 64px;
      margin-block-start: 62px;

      @media (width <= 768px) {
        max-inline-size: calc((100 / 390) * 342 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
        padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 29 * 1vw);
        margin-block-start: calc((100 / 390) * 40 * 1vw);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }

      /* メインスライダー */
      .main-slider {
        position: relative;
        flex: 1;

        .anchor {
          position: absolute;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          cursor: pointer;
          &::before {
            content: '';
            display: block flow;
            inline-size: 100%;
            block-size: 100%;
          }
        }

        .main-slide {
          display: block flex;
          gap: 10px;

          @media (width <= 768px) {
            gap: 0;
          }

          .staff-image {
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            .picture {
              display: block flow;
              flex-shrink: 0;
            }

            @media (width <= 768px) {
              .picture {
                display: block flow;
                flex-shrink: 0;
                & > img {
                  inline-size: calc((100 / 390) * 118 * 1vw);
                  aspect-ratio: 118/300;
                }
              }
            }
          }

          .staff-info {
            margin-block-start: 52px;

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

            .staff-description {
              font-family: var(--yumin);
              font-size: 28px;
              font-weight: 600;
              line-height: 2.2;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
                line-height: 1.8;
              }
            }
            .staff-name_wrap {
              display: block flex;
              align-items: baseline;
              gap: 16px;
              border-inline-start: 1px solid;
              border-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
              border-image-slice: 1;
              padding-inline-start: 24px;
              margin-block-start: 20px;

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

              .staff-name {
                font-family: var(--title);
                font-size: 48px;
                font-weight: 500;
                line-height: 1.2;
                color: #549fd6;

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

      /* 右側のコンテンツエリア */
      .content-area {
        flex: 1;

        @media (width <= 768px) {
          position: relative;
        }
        /* サムネイルスライダー */
        .thumbnail-container {
          position: absolute;
          bottom: 90px;
          right: 88px;

          @media (width <= 768px) {
            position: relative;
            bottom: unset;
            right: unset;
            margin-block-start: calc((100 / 390) * 14 * 1vw);
          }

          .thumbnail-slider {
            .swiper-wrapper {
              gap: 40px;

              @media (width <= 768px) {
                gap: calc((100 / 390) * 16 * 1vw);
              }
              .thumbnail-slide {
                width: 346px;
                overflow: hidden;
                cursor: pointer;
                transition: all 0.3s ease;
                position: relative;

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

                /* サムネイル内の画像 */
                .thumbnail-image {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  overflow: hidden;
                }

                .thumbnail-info {
                  display: flex;
                  align-items: baseline;
                  gap: 16px;
                  padding-inline-start: 16px;

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

                  .thumbnail-name {
                    font-family: var(--title);
                    font-size: 32px;
                    font-weight: 500;
                    color: #549fd6;

                    @media (width <= 768px) {
                      font-size: calc((100 / 390) * 28 * 1vw);
                      line-height: 1.4;
                    }
                  }
                  .thumbnail-position {
                    font-size: 15px;
                    color: #141414;

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

      /* ナビゲーションボタン */
      .nav-button_wrap {
        position: absolute;
        right: 88px;
        top: 238px;
        display: block flex;
        gap: 20px;
        z-index: 12;

        @media (width <= 768px) {
          justify-content: end;
          top: calc((100 / 390) * -98 * 1vw);
          right: calc((100 / 390) * 48 * 1vw);
          gap: calc((100 / 390) * 12 * 1vw);
        }
        .nav-button {
          position: relative;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #549fd6 0%, #1b57af 100%);
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          display: block grid;
          place-content: center;
          &:after {
            content: '';
            display: block flow;
            inline-size: 24px;
            block-size: 14px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/_common/btn_arrow.svg');
          }
          &.prev-button {
            background: linear-gradient(to bottom, #1b57af 0%, #549fd6 100%);
            &:after {
              transform: scale(-1);
            }
          }

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

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

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

    .number-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-block-start: 64px;

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

      li {
        background-color: #fff;
        border-radius: 20px;

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

        h3 {
          font-size: 18px;
          font-weight: 500;
          color: #fff;
          text-align: center;
          background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
          padding-block: 22px;
          border-radius: 20px 20px 0 0;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 18 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0 0;
          }
        }

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

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

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

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

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

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 80 * 1vw);
            }
            .tani {
              font-family: var(--sanserif);
              font-size: 40px;
              color: #141414;
              background-image: unset;
              -webkit-text-fill-color: #141414;
              margin-inline-start: 12px;

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

  /* =====================
    entry-btn
  ===================== */
  .entry_btn {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/entry_bg.png');
    inline-size: 100%;
    block-size: 268px;

    @media (width <= 768px) {
      background-image: url('../img/recruit/entry_bg_2x.png');
      inline-size: 100%;
      block-size: calc((100 / 390) * 198 * 1vw);
    }

    .anchor {
      position: relative;
      display: block grid;
      align-items: center;
      inline-size: 100%;
      block-size: 100%;
      padding-block: 12px;

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

      .u-inner {
        position: relative;

        &::before {
          content: '';
          display: block flow;
          inline-size: 80px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
          position: absolute;
          top: 50%;
          right: 80px;
          transform: translateY(-50%);
        }
        &::after {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/_common/btn_arrow.svg');
          inline-size: 28px;
          block-size: 15px;
          position: absolute;
          top: 50%;
          right: 106px;
          transform: translateY(-50%);
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 50 * 1vw);
            right: calc((100 / 390) * 24 * 1vw);
          }
          &::after {
            inline-size: calc((100 / 390) * 20 * 1vw);
            right: calc((100 / 390) * 39 * 1vw);
          }
        }
        .title {
          font-family: var(--title);
          font-size: 56px;
          line-height: 1;
          color: #549fd6;

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

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

/* =====================
animation
===================== */
/* 右から左 */
@keyframes loop-list {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}