@charset "utf-8";

/* ========================================================== */
/* 出品者様募集 */
/* ========================================================== */
#recruit {
  position: relative;
  height: 780px;
  margin-bottom: 8rem;
  padding: 0;

  & .recruit-img {
    position: absolute;
    z-index: 0;
    width: 890px;
    top: 0;
    right: 0;

    & .title-recruit {
      position: absolute;
      z-index: 10;
      top: -3.5rem;
      right: -1.5rem;
      text-align: end;

      & .title-fs-sub {
        margin-right: 0;
      }

      &::after {
        content: '';
        z-index: -1;
        position: absolute;
        top: -50%;
        right: 5%;
        width: calc(70px * 2.11);
        height: calc(70px * 2.11);
        transform: rotate(45deg);
        background-color: #ffffff;
        opacity: 0;
      }

      &.appear::after {
        animation-name: titlefadeInAnime;
        /* aboutのタイトルと共有 */
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
      }
    }

    & .recruit-img-outer {
      position: relative;
      width: 100%;
      height: 586px;

      & .recruit-img-inner {
        z-index: 5;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        width: calc(890px - 60px);
        height: calc(586px - 34px);
        background-image: url(../images/recruit/image_2.webp);
        background-size: cover;
        background-position: 70% 50%;
        border-radius: 15px;
      }

      & .recruit-img-frm1 {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(890px - 30px);
        height: calc(586px - 17px);
        background-color: #05b9d7;
        border-radius: 25px;
      }

      & .recruit-img-frm2 {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(890px - 30px);
        height: calc(586px - 17px);
        background-color: #c7e4ee;
        border-radius: 25px;
      }
    }
  }

  & .recruit-comment {
    position: absolute;
    bottom: 0;
    left: 2rem;
    z-index: 10;
    width: 580px;
    height: auto;
    background-color: #ffffff;

    & .pick:hover {
      color: #24b5f5;
      transform: translateY(-1px);

    }

    & .recruit-comment-inner {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      padding: 100px 0 60px;
      font-size: 1.25rem;
      font-weight: bold;
      line-height: 2;

      & .recruit-comment-title {
        position: absolute;
        top: -20px;
        left: -40px;
        padding: 1rem 3rem;
        font-size: 1.75rem;
        text-align: center;
        background-color: #fff338;
        transform: rotate(-8.3deg);
        opacity: 0;
        animation-name: recruit-comment-title-anime;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 2s;
      }
    }
  }
}

@keyframes recruit-comment-title-anime {
  0% {
    opacity: 0;
    transform: rotate(-8.3deg) translateX(80%) scaleX(40%);
  }

  50% {
    transform: rotate(-8.3deg) translateX(-40%) scaleX(20%);
  }

  100% {
    opacity: 1;
    transform: rotate(-8.3deg) translateX(0) scaleX(100%);
  }
}

@media screen and (max-width: 1399px) {
  #recruit {
    & recruit-img {
      & .title-recruit {
        top: -4rem;
        right: 0;
      }
    }
  }
}

@media screen and (max-width: 1199px) {
  #recruit {
    height: auto;

    & .recruit-img {
      position: relative;
      margin: 0 auto;
      width: 96%;

      & .title-recruit {
        top: -3rem;
        right: -1rem;

        &::after {
          width: calc(70px * 2.11);
          height: calc(70px * 2.11);
        }
      }

      & .recruit-img-outer {
        height: 45vh;

        & .recruit-img-inner {
          width: calc(96% - 4%);
          height: calc(45vh - 2vh);
        }

        & .recruit-img-frm1 {
          width: calc(96% - 4%);
          height: calc(45vh - 2vh);
        }

        & .recruit-img-frm2 {
          width: calc(96% - 4%);
          height: calc(45vh - 2vh);
        }
      }
    }

    & .recruit-comment {
      position: relative;
      width: 80%;
      height: auto;
      left: 0;
      margin: -40px auto 0;
    }
  }
}

@media screen and (max-width: 767px) {
  #recruit {
    & .recruit-comment {
      margin-top: 0;
      width: 96%;

      & .recruit-comment-inner {
        padding: 60px 0;

        & .recruit-comment-title {
          top: -25px;
          left: -20px;
          font-size: 1.5rem;
          padding: 0.5rem 1.5rem;
          transform: rotate(-8.3deg);
        }
      }
    }
  }
}


@media screen and (max-width: 575px) {
  #recruit {
    & .recruit-img {
      & .title-recruit {
        top: -2.75rem;
        right: 0;

        &::after {
          width: calc(60px * 2.11);
          height: calc(60px * 2.11);
        }
      }
    }

    & .recruit-comment {
      & .recruit-comment-inner {
        & .recruit-comment-title {
          top: -20px;
          left: 50%;
          font-size: 20px;
          width: 90%;
          transform: rotate(0deg) translateX(-50%);
        }

        & div:nth-child(2) {
          & p {
            font-size: 1rem !important;
          }
        }
      }
    }
  }

  @keyframes recruit-comment-title-anime {
    0% {
      opacity: 0;
      transform: translateX(30%) scaleX(40%);
    }

    50% {
      transform: translateX(-90%) scaleX(20%);
    }

    100% {
      opacity: 1;
      transform: translateX(-50%) scaleX(100%);
    }
  }
}