@charset "UTF-8";

/* =====================
  Recruit
===================== */
.main {

  /* =====================
    MV
  ===================== */
  .u-mv {
    &::after {
      background-image: url('../img/recruit/mv.png');
    }
  }

  /* =====================
      message
    ===================== */
  .message {
    position: relative;
    padding-block-start: 176px;
    padding-block-end: 88px;

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

    .inner {
      inline-size: 1440px;
      margin-inline: auto;
      display: block flex;
      justify-content: space-between;
      padding-inline: 120px 0;

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

      &::before {
        content: '';
        position: absolute;
        top: 89px;
        left: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/recruit/message_bg.png');
        inline-size: 1100px;
        block-size: 769px;
        pointer-events: none;
        z-index: -1;
      }

      @media (width <=768px) {
        &::before {
          background-size: cover;
          inline-size: 100%;
          block-size: unset;
          min-block-size: calc((100 / 390) * 769 * 1vw);
          top: calc((100 / 390) * 80 * 1vw);
        }
      }

      .wrap {
        .catch {
          background-image: linear-gradient(305.03deg, #102647 58.91%, #2b7996 93.69%);
          font-family: var(--serif);
          font-size: 40px;
          font-weight: 500;
          line-height: 1.6;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;

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

        .message_wrap {
          position: relative;
          margin-block-start: 41px;

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

          .description {
            color: #102647;

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

      .img {
        flex-shrink: 0;
        display: block flow;
        margin-block-start: 25px;

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

  /* =====================
      welfare
    ===================== */
  .welfare {
    padding-block-start: 112px;
    padding-block-end: 177px;
    background-color: #f6f6f6;

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

    .walfare_wrap {
      padding-inline: 40px;

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

      .u-hgroup {
        margin-inline-start: 48px;

        @media only screen and (width <=768px) {
          margin-inline: auto;
        }
      }

      .list {
        margin-block-start: 61px;

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

        .item {
          background-color: #fff;
          padding-inline: 40px;
          padding-block: 40px;
          display: block flex;
          gap: 56px;
          align-items: center;

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

          .img {
            flex-shrink: 0;

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

          .unit {
            .title {
              inline-size: fit-content;
              color: #fff;
              background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
              border-radius: 50rem;
              padding-inline: 40px;
              padding-block: 8px;
              font-size: 18px;
              font-weight: 600;

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

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

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

          &+.item {
            margin-block-start: 16px;

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

  /* =====================
      number
    ===================== */
  .number {
    padding-block-start: 126px;
    padding-block-end: 124px;
    background-color: #efefef;

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

    .u-inner {
      .number_wrap {
        display: block grid;
        grid-template-columns: repeat(3, 388px);
        justify-content: center;
        gap: 18px;
        margin-block-start: 54px;

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

        .item {
          position: relative;
          padding-block: 34px 36px;
          padding-inline: 28px;
          background-color: #fffefe;

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

          .title {
            font-family: var(--serif);
            font-size: 18px;
            font-weight: 500;
            line-height: 1;
            text-align: center;
            color: #102647;

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

          .en-title {
            display: block flow;
            font-family: var(--serif);
            font-size: 15px;
            line-height: 1;
            text-align: center;
            color: #d1d2d5;
            margin-block-start: 12px;

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

          .unit {
            display: block flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-block-start: 16px;

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

            .num {
              .count {
                font-family: var(--serif);
                font-size: 88px;
                font-weight: bold;
                line-height: 1;
                color: var(--primary);

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

              .tani {
                display: inline-block;
                font-family: var(--serif);
                font-size: 40px;
                font-weight: bold;
                line-height: 1.2;
                color: var(--primary);
                margin-inline-start: 6px;

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

            .img {
              flex-shrink: 0;
            }

            .num_wrap {
              display: block flex;
              align-items: baseline;

              .tani {
                font-size: 64px;
                line-height: 1;

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

          &[data-id='6'] {
            .unit {
              white-space: nowrap;

              .num {
                margin-inline-start: -14px;

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

          @media (width <=768px) {

            &[data-id='1'],
            &[data-id='2'],
            &[data-id='3'],
            &[data-id='4'],
            &[data-id='5'],
            &[data-id='6'] {
              .img {
                inline-size: calc((100 / 390) * 98 * 1vw);
              }
            }
          }
        }
      }
    }
  }

  /* =====================
      interview
    ===================== */
  .interview {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 120px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/interview_bg.png');
    inline-size: 100%;
    min-block-size: 720px;

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

    .u-inner {
      .wrap {
        display: block grid;
        grid-template-columns: 383px auto;
        grid-template-rows: repeat(4, max-content);
        align-items: start;
        column-gap: 88px;
        padding-inline: 40px 0;

        @media only screen and (width <=768px) {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(5, max-content);
          column-gap: unset;
          padding-inline: 0;
        }

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

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

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

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

        .u-anchor {
          grid-area: 3/1/4/2;
          padding-inline: 40px;
          margin-inline: auto;
          margin-block-start: 8px;

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

        .interview-controller {
          grid-area: 4/1/5/2;
          margin-block-start: 20px;

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

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

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

      .interview-list {
        align-items: center;
      }

      .swiper-slide {
        block-size: 401px !important;

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

        a {
          width: inherit;
          block-size: inherit;
          display: block grid;
        }
      }

      .swiper-slide-active {
        @media (width > 768px) {
          width: 360px !important;
          block-size: 481px !important;
        }

        a {
          width: inherit;
          block-size: inherit;
          display: block grid;
        }
      }

      .interview-list {
        .item {
          position: relative;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center bottom;
        }
      }
    }
  }

  /* =====================
      careers
    ===================== */
  .careers {
    padding-block-start: 126px;
    padding-block-end: 77px;

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

    /* ==== セクション共通 ==== */
    .section {
      margin-block-start: 54px;
      margin-inline: 40px;
      border-block-start: 1px solid #c1d4e4;
      padding-bottom: 43px;

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

    .h3-title {
      margin-block-start: 58px;

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

      .title {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 3.36px;
        color: #102647;

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

      & span[lang='en'] {
        display: block flow;
        background-image: linear-gradient(180deg, rgba(16, 38, 71, 0.3) 0%, rgba(16, 38, 71, 0) 100%);
        font-family: var(--serif);
        font-size: 40px;
        line-height: 1;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        margin-block-start: 10px;

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

    .person {
      .list {
        margin-block-start: 44px;
        display: block grid;
        grid-template-columns: repeat(2, auto);
        gap: 32px;

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

        .item {
          background-color: #f6f6f6;
          padding-inline: 48px;
          padding-block: 40px;

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

          .title {
            inline-size: fit-content;
            color: #fff;
            background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
            border-radius: 50rem;
            padding-inline: 43px;
            padding-block: 8px;
            font-size: 18px;
            font-weight: 600;

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

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

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

  /* =====================
      requirements
    ===================== */
  .requirements {
    .requirements_wrap {
      background-color: #f6f6f6;
      padding-block: 7px 46px;
      margin-block-start: 45px;

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

      .u-table {
        --_border-color: #d1d2d5;
        margin-block-start: 40px;

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

        .tr {
          & dt {
            background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }
        }
      }
    }
  }

  /* =====================
    flow
  ===================== */
  .flow {
    .flow_list {
      margin-block-start: 44px;
      display: block grid;
      grid-template-columns: repeat(4, auto);
      column-gap: 80px;

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

      .item {
        position: relative;
        background-color: #f6f6f6;
        display: block grid;
        grid-template-rows: repeat(2, max-content);
        justify-items: center;
        padding-inline: 40px;
        padding-block: 40px 32px;
        row-gap: 48px;

        @media (width <=768px) {
          grid-template-columns: 1fr;
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw);
          row-gap: calc((100 / 390) * 32 * 1vw);
        }

        .unit {
          min-block-size: 320px;
          display: block grid;
          grid-template-rows: repeat(3, max-content);
          justify-items: center;
          row-gap: 22px;

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

          .no {
            position: relative;
            inline-size: 60px;
            aspect-ratio: 1/1;
            font-family: var(--serif);
            font-size: 24px;
            font-weight: 500;
            background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
            color: #fff;
            border-radius: 50rem;
            display: block grid;
            place-content: center;

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

          .title {
            font-family: var(--serif);
            font-size: 24px;
            font-weight: bold;
            color: #102647;

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

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

        &::after {
          content: '';
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/recruit/flow_arrow.svg');
          inline-size: 80px;
          block-size: 36px;
          position: absolute;
          top: 50%;
          right: -80px;
          transform: translateY(-50%);
        }

        @media only screen and (width <=768px) {
          &::after {
            inline-size: calc((100 / 390) * 100 * 1vw);
            aspect-ratio: 80/36;
            block-size: unset;
            top: unset;
            bottom: calc((100 / 390) * -54 * 1vw);
            left: 50%;
            right: unset;
            transform: translateX(-50%) rotate(90deg);
          }
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }
  }

  /* ==== エントリーボタン ==== */

  .entry_btn {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/entry_bg.png');
    inline-size: 100%;
    min-block-size: 473px;
    padding-block: 126px 120px;

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

    .u-inner {
      .anchor {
        position: relative;
        inline-size: fit-content;
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 500;
        line-height: 1.8;
        color: #fff;
        background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
        display: block flex;
        align-items: center;
        gap: 48px;
        justify-content: center;
        padding-inline: 132px;
        padding-block: 28px;
        transition: all 0.5s ease-in-out;
        margin-inline: auto;
        margin-block-start: 54px;
        z-index: 1;

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

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
          background: linear-gradient(90deg, #288ba2 0%, #61b14b 100%);
          opacity: 0;
          transition: opacity 0.8s;
        }

        &::after {
          content: '';
          inline-size: 50px;
          aspect-ratio: 50 / 8;
          mask-repeat: no-repeat;
          mask-size: contain;
          mask-position: center;
          mask-image: var(--icon-arrow);
          background-color: #fff;
          flex-shrink: 0;
        }

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

        @media (any-hover: hover) {
          &:hover {
            &::before {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}