@charset "UTF-8";

.main {
  .u-mv {
    &::before {
      background-image: url('../../img/recruit/jobcategories/mv.png');
    }

    @media (width <=768px) {
      & .u-inner {
        padding-block-start: calc((100 / 390) * 128 * 1vw);

        & .u-h1-title {
          & span[lang='en'] {
            font-size: calc((100 / 390) * 52 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    about
  ===================== */
  .about {
    position: relative;
    padding-block: 160px 139px;
    background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

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

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      block-size: 1258px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/jobcategories/about_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

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

    .u-inner {
      position: relative;
      color: #fff;

      .wrap {
        display: block flex;
        gap: 135px;
        padding-inline: 120px 80px;

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

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

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

          &::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block flow;
            inline-size: 431px;
            block-size: 431px;
            content: '';
            background-color: #fff;
            border-radius: 50rem;
            box-shadow: 0 0 80px rgb(255 255 255 / 80%);
          }

          @media only screen and (width <=768px) {
            &::before {
              inline-size: calc((100 / 390) * 318 * 1vw);
              block-size: calc((100 / 390) * 318 * 1vw);
              box-shadow: 0 0 calc((100 / 390) * 60 * 1vw) rgb(255 255 255 / 80%);
            }
          }

          & img {
            position: relative;

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

        .unit {
          & h3.catch {
            flex-shrink: 0;
            font-size: 40px;
            font-weight: 500;
            line-height: 1.6;

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

          .description {
            margin-block-start: 56px;
            font-size: 20px;

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

      &>.description {
        margin-block-start: 36px;
        font-size: 20px;
        text-align: center;

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

        .strong {
          display: inline-block;
          margin-block-start: 8px;
          font-family: 'Noto Serif JP', serif;
          font-size: 32px;

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

      /* ==== btn ==== */
      .btn-set {
        display: block grid;
        grid-template-columns: repeat(3, 390px);
        column-gap: 15px;
        justify-content: center;
        margin-block-start: 78px;

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

        .item {
          display: block grid;
          row-gap: 16px;
          justify-items: center;
          padding-block: 20px 40px;
          background-color: rgb(255 255 255 / 20%);
          border: solid 1px #fff;

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

          .title {
            font-size: 32px;
            font-weight: 500;
            text-align: center;

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

          .menu-item {
            position: relative;
            display: block flow;
            inline-size: 300px;
            block-size: 100px;
            padding-inline: 24px;
            font-size: 18px;
            font-weight: 500;
            color: var(--main);
            background-color: #fff;

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

            &::after {
              position: absolute;
              top: 50%;
              right: 24px;
              display: block flow;
              inline-size: 10px;
              block-size: 13px;
              content: '';
              background-image: url('../../img/recruit/jobcategories/icon_arrow.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              transform: translateY(-50%);
            }

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

            .btn-txt {
              position: relative;
              display: block flex;
              gap: 8px;
              align-items: center;

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

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

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

          &[data-id='01'] {
            .menu-item {
              padding-inline: 32px 24px;

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

              .btn-txt {
                &::before {
                  background-image: url('../../img/recruit/jobcategories/icon_callcenter.svg');
                }

                &.radio {
                  &::before {
                    background-image: url('../../img/recruit/jobcategories/icon_radio.svg');
                  }

                  &::after {
                    position: absolute;
                    top: 50%;
                    left: -8px;
                    content: '(';
                    transform: translateY(-50%);
                  }

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

          &[data-id='02'] {
            .btn-txt {
              &::before {
                background-image: url('../../img/recruit/jobcategories/icon_consulting.svg');
              }
            }
          }

          &[data-id='03'] {
            .btn-txt {
              &::before {
                background-image: url('../../img/recruit/jobcategories/icon_management.svg');
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    jobcategories
  ===================== */
  .jobcategories {
    position: relative;
    padding-block: 160px 0;
    counter-reset: number;

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

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      block-size: 3487px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/jobcategories/categories_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

    .section {
      position: relative;
      padding-block-end: 161px;

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

      &::before {
        position: absolute;
        left: 0;
        display: block flow;
        inline-size: calc((100% - 1120px) / 2 + 1120px);
        block-size: 100%;
        pointer-events: none;
        content: '';
        background: linear-gradient(to bottom, #001636, #0c7db5);
      }

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

      /* ==== Title ==== */
      .category-title {
        display: block grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: 16px;
        align-items: center;
        margin-block-start: 24px;

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

        .icon {
          display: block grid;
          grid-area: 1/1/3/2;
          place-content: center;
          inline-size: 100px;
          aspect-ratio: 1/1;
          background-color: #fff;
          border-radius: 50rem;

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

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

        .title {
          grid-area: 1/2/2/3;
          font-size: 36px;
          font-weight: 500;
          line-height: 1.1;

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

        & span[lang='en'] {
          display: block flow;
          grid-area: 2/2/3/3;
          font-family: var(--title);
          font-size: 20px;
          line-height: 1.1;
          text-transform: uppercase;

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

      .inner {
        position: relative;
        inline-size: 1440px;
        padding-block: 56px 0;
        margin-inline: auto;
        color: #fff;

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

        &::before {
          position: absolute;
          top: -86px;
          left: 40px;
          display: block flow;
          font-family: var(--title);
          font-size: 150px;
          line-height: 1;
          color: rgb(223 230 240 / 40%);
          text-align: center;
          pointer-events: none;
          content: '0' counter(number);
          counter-increment: number;
        }

        @media only screen and (width <=768px) {
          &::before {
            top: calc((100 / 390) * -64 * 1vw);
            left: calc((100 / 390) * 40 * 1vw);
            font-size: calc((100 / 390) * 120 * 1vw);
          }
        }

        .flex-wrap {
          display: block flex;
          gap: 48px;
          align-items: flex-start;

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

            >.img {
              inline-size: 100%;
            }
          }

          .unit {
            padding-inline-start: 120px;

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

            .description {
              padding-inline-start: 24px;
              margin-block-start: 32px;

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

            .img-wrap {
              display: block flex;
              gap: 48px;
              align-items: center;
              margin-block-start: 40px;

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

              .img {
                display: block flow;
              }
            }
          }

          >.img {
            flex-shrink: 0;
          }
        }

        .link-set {
          display: block flex;
          gap: 48px;
          justify-content: center;
          padding-inline: 120px;
          margin-block-start: 36px;

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

        .radio-wrap {
          display: block grid;
          justify-items: center;
          inline-size: 1040px;
          padding-block: 56px;
          padding-inline: 56px;
          margin-block-start: 72px;
          margin-inline-start: 120px;
          background-color: rgb(255 255 255 / 10%);
          border: solid 1px #fff;

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

          .category-title {
            margin-block-start: 0;

            .icon {
              background-color: transparent;
              border: 1px solid #fff;
            }

            .title {
              color: #fff;
            }

            & span[lang='en'] {
              color: #fff;
            }
          }

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

          .img-wrap {
            display: block flex;
            gap: 32px;
            align-items: center;
            margin-block-start: 24px;

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

            .img {
              display: block flow;

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

      &[data-id='job01'] {
        &::before {
          block-size: calc(100% - 259px);
        }

        @media only screen and (width <=768px) {
          &::before {
            block-size: 85.1%;
          }
        }

        .link-set {
          margin-block-start: 149px;

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

            .item {
              a {
                min-inline-size: calc((100 / 390) * 265 * 1vw);
              }

              margin-inline: auto;
            }
          }
        }
      }

      &[data-id='job02'] {
        &::before {
          right: 0;
          left: unset;
          block-size: calc(100% - 322px);
        }

        @media only screen and (width <=768px) {
          &::before {
            block-size: 72%;
          }
        }

        .inner {
          &::before {
            right: 40px;
            left: unset;
          }

          .flex-wrap {
            flex-direction: row-reverse;

            @media only screen and (width <=768px) {
              flex-direction: column-reverse;
            }

            .unit {
              padding-inline: 0 120px;

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

            .img-wrap {
              justify-content: end;
            }
          }

          .link-set {
            justify-content: center;
            
            

            @media only screen and (width <=768px) {
              justify-content: center;

              .item {
                a {
                  min-inline-size: calc((100 / 390) * 265 * 1vw);
                }

                margin-inline: auto;
              }
            }
          }
        }
      }

      &[data-id='job03'] {
        &::before {
          block-size: calc(100% - 312px);
        }

        @media only screen and (width <=768px) {
          &::before {
            block-size: 74%;
          }
        }

        .link-set {
          margin-block-start: 56px;

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

          @media only screen and (width <=768px) {
            justify-content: center;

            .item {
              a {
                min-inline-size: calc((100 / 390) * 265 * 1vw);
              }

              margin-inline: auto;
            }
          }
        }
      }
    }
  }
}