/*==============================================================
About-job
==============================================================*/
.about-job {
  position: relative;
  z-index: 1;

  .cont {
    .box {
      max-width: 70%;
      display: flex;
      flex-direction: column;
      gap: 32px;

      @media screen and (max-width: 991px) {
        max-width: 80%;
      }

      @media screen and (max-width: 560px) {
        max-width: 100%;
      }

      .item {
        display: flex;
        flex-direction: column;
        gap: 24px;

        @media screen and (max-width: 991px) {
          gap: 8px;
        }

        .top {
          position: relative;

          .ttl {
            font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
            font-weight: 600;
            border-bottom: 4px solid #ff9900;
            margin-bottom: 16px;
            width: 100%;
            max-width: max-content;
            color: #0479ff;
          }

          .des-ttl {
            position: absolute;
            bottom: 0;
            left: 0;
            font-weight: 600;
            font-size: clamp(1.125rem, 0.7647rem + 1.0294vw, 2rem);

            @media screen and (max-width: 991px) {
              position: unset;
              margin-top: 16px;
            }
          }
        }
        .bottom {
          display: flex;
          gap: 32px;

          @media screen and (max-width: 991px) {
            flex-direction: column;
            gap: 8px;
          }

          .des {
            flex: 9;
            line-height: 1.6;

            @media screen and (max-width: 1280px) {
              flex: 6;
            }
          }

          .content {
            flex: 2.5;
            background-color: #f3f3f3;
            padding: 16px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

            @media screen and (max-width: 1280px) {
              max-height: fit-content;
            }

            .c-ttl {
              font-weight: 600;
              border-bottom: 1px solid #ccc;
              margin-bottom: 4px;
              padding-bottom: 2px;
            }
            .c-des {
            }
          }
        }
      }

      .item-02 {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .top {
          position: relative;

          .ttl {
            font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
            font-weight: 600;
            margin-bottom: 16px;
            width: 100%;
            text-align: center;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              bottom: -4px;
              left: 50%;
              transform: translateX(-50%);
              width: 100%;
              max-width: 40%;
              height: 4px;
              background: #0479ff;
            }
          }

          .img-cont {
            display: flex;
            gap: 24px;

            @media screen and (max-width: 560px) {
              flex-direction: column;
            }

            .img {
              border-radius: 10px;
              padding: 0 6px;
              background-color: #0479ff;
              overflow: hidden;
            }
          }
        }
        .bottom {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;

          .des-ttl {
            font-size: clamp(1.125rem, 0.7647rem + 1.0294vw, 2rem);
            font-weight: 600;
          }

          .des {
            line-height: 1.6;
            width: 100%;
            max-width: 80%;

            @media screen and (max-width: 1280px) {
              max-width: 100%;
            }
          }
        }
      }
    }
  }
}