.visual {
  position: relative;
  background-image: url(/lp/recruitment/assets/img/kv.webp);
  width: 100%;
  height: 719px;
  background-repeat: no-repeat;
}

.visualHeadWrap{
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(987 / 1920 * 100vw + 7vw);
    translate: -50% -50%;
    transform: rotate(0deg);
}

  .visualPerson01{
      position: absolute;
      bottom: -5vw;
      left: 0;
      width: calc(407 / 1920 * 100vw);
      height: calc(484 / 1920 * 100vw);
      background-image: url(/lp/recruitment/assets/img/person01.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
      z-index: 1;
  }

  .visualPerson02{
      position: absolute;
      bottom: -2vw;
      right: 0;
      width: calc(455 / 1920 * 100vw);
      height: calc(409 / 1920 * 100vw);
      background-image: url(/lp/recruitment/assets/img/person02.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
      z-index: 1;
  }

.visualHead{
    p{
      width: calc(100% - 50px);
      font-size: calc(48 / 1920 * 100vw);
      color: #fff;
      font-weight: 900;
      text-align: center;
      transform: rotate(-2deg);
    }
  h1{
      display: flex;
      flex-direction: column;
      gap: calc(30 / 1920 * 100vw);
      align-items: center;
  }
  h1 p{
  position: relative;
  width: fit-content;
  font-size: calc(105 / 1920 * 100vw);
  font-weight: 700;
  color: #0062A3;
  padding: 0 20px;
  line-height: 1.5;
  .small{
    font-size: calc(78 / 1920 * 100vw);
  }
  .orange{
    color: #FF5F0C;
    font-size: calc(116 / 1920 * 100vw);
  }
}
  h1 p:first-child{
    right:calc(50 / 1920 * 100vw);
  }
  h1 p:last-child{
    left:calc(50 / 1920 * 100vw);
  }
  h1 p::before{
content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: -1;
        background-color: #ffffff;
        clip-path: polygon(0% 11%, 100% 9%, 100% 93%, 0% 100%);
  }
  h1 p::after{
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        width: 98%;
        height: 80%;
        background-size: contain;
        left: calc(30 / 1920 * 100vw);
        bottom: calc(-8 / 1920 * 100vw);
        z-index: -1;
        transform: skewY(-1deg);
        border: 1px solid #fff;
  }
}

.visualContact{
   position: relative;
  display: block;
  width: calc(480 / 1920 * 100vw);
  margin-inline: auto;
  margin-top: 50px;
  text-align: center;
  border-radius: 48px;
  background: linear-gradient(to right, #ff822f 0%, #ff5f0c 50%, #ff822f 100%);
  box-shadow: 0px 3px 6px rgba(57, 57, 57, 0.16);
  color: #ffffff;
  font-size: calc(32 / 1920 * 100vw);
  font-weight: 700;
  padding: 20px;
}
  .visualContact::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff33;
    opacity: 0;
    border-radius: 48px;
    transition: 0.3s;
  }
    .visualContact:hover::before{
      opacity: 1;
  }


.visualHeadWrap__dec{
    position: absolute;
    left: calc(-150 / 1920 * 100vw);
    top: -8%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(192 / 1920 * 100vw);
    height: calc(192 / 1920 * 100vw);
    border-radius: 50%;
    background-color: #6BC4DB;
    color: #ffffff;
    font-size: calc(30 / 1920 * 100vw);
    font-weight: 700;
    text-align: center;
}

.worries{
  overflow: hidden;
}

.worriesSection{
  position: relative;
  background-color: #0076C5;
  padding-block: 100px;
}

.worriesPerson01{
    position: absolute;
    bottom: 0;
    right: 10vw;
    width: calc(335 / 1920 * 100vw);
    height: calc(438 / 1920 * 100vw);
    background-image: url(/lp/recruitment/assets/img/person03.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 1;
}

.worriesTitle{
  text-align: center;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  word-break: keep-all;
}

.worries__itemWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(40 / 1920 * 100vw);
  margin-top: 30px;
  padding-bottom: 80px;
}

.worries__item{
  position: relative;
  width: min(360px, 100%);
  background-color: #fff;
  border-radius: 111px;
  padding: 30px 10px;
  text-align: center;
  p{
    font-size: 24px;
    font-weight: 700;
    span{
      background: linear-gradient(transparent 60%, #FFC368 30%);
      display: inline-block;
    }
  }
}

.worries__item::before{
    content: "";
    position: absolute;
    background-image: url(/lp/recruitment/assets/img/arrow.svg);
    background-repeat: no-repeat;
    width: 21px;
    height: 56px;
    left: 50%;
    translate: -50% 0 ;
    bottom: -60px;
  }

.worries__wide{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    background-color: #fff;
    word-break: keep-all;
    p{
      font-size: 40px;
      font-weight: 700;
      text-align: center;
      color: #0062A3;
      padding: 30px 20px;
    }
    span{
      color: #FF5F0C;
    }
}

.worries{
  padding: 0 20px;
}

@media screen and (max-width: 1024px) {
  .visualHeadWrap{
    width: calc(1400 / 1920 * 100vw + 7vw);
  }
  .visualHead{
  p{
    font-size: calc(65 / 1920 * 100vw);
  }
  h1 p{
      font-size: calc(145 / 1920 * 100vw);
    }
      h1 p:first-child {
    right: calc(150 / 1920 * 100vw);
}
    h1 p:last-child {
        left: calc(150 / 1920 * 100vw);
    }
}

  .visualContact{
    width: calc(760 / 1920 * 100vw);
    font-size: calc(56 / 1920 * 100vw);
  }

  .visualHeadWrap__dec {
    width: calc(242 / 1920 * 100vw);
    height: calc(242 / 1920 * 100vw);
    font-size: calc(36 / 1920 * 100vw);
  }
  .worries__item{
  p{
    font-size: 18px;
  }
}
}


@media screen and (max-width: 767px) {
  .visual{
    height: 480px;
  }
  .visualHeadWrap{
    width: calc(1200 / 1920 * 100vw + 7vw);
  }
  .visualHead{
    p {
        font-size: calc(59 / 1920 * 100vw);
  }
  h1 p{
      font-size: calc(125 / 1920 * 100vw);
    }
  }
  .visualHeadWrap__dec {
  left: calc(-260 / 1920 * 100vw);
  }
  .visualContact {
    width: calc(1000 / 1920 * 100vw);
    font-size: calc(65 / 1920 * 100vw);
  }
  .visualContact{
  margin-top: 30px;
  }
  .worries__itemWrap{
    flex-direction: column;
    gap: 30px;
  }
  .worries__wide{
    p{
      font-size: 24px;
    }
  }
  .worriesPerson01{
    right: 0;
    width: 152px;
    height: 153px;
  }
  .worries__item::before{
    content: none;
  }
  .worries__item:last-child:before{
    content: "";
  }
}

@media screen and (max-width: 479px) {
  .visualPerson01{
    width: calc(547 / 1920 * 100vw);
    height: calc(654 / 1920 * 100vw);
  }
  .visualPerson02{
    width: calc(600 / 1920 * 100vw);
    height: calc(529 / 1920 * 100vw);
  }
  .worries__wide{
    p{
      font-size: 22px;
    }
  }
  .worriesPerson01{
    width: 131px;
    height: 135px;
  }
}