/* ========================================
 * Recruit Section - Refactored
 * ========================================
 */

.recruit {
  z-index: 1;
  min-height: 50vh;
  position: relative;
  margin: 15rem 0;

  @media screen and (max-width: 960px) {
    margin-top: 9rem;
    .absolute-box .title {
      top: -3.4em;
      padding: 20px 5.5%;
    }
  }

  @media screen and (max-width: 599px) {
    margin-top: 6rem;
  }

  .title {
    font-size: var(--font-size-4xl);
    margin: 0;
    font-weight: 600;
    padding-bottom: 1.5rem;
  }
  .sub-title {
    display: block;
    width: 100%;
    color: #5E9CCB;
    font-family: "Zen Kaku Gothic New", serif;
    font-size: calc(var(--font-size-m) * 1.5);
  }
  .sub-title::before {
    content: "";
    display: inline-block;
    background-image: url(../../images/common/icon01.webp);
    /* background-size: cover; */
    background-repeat: no-repeat;
    width: 55px;
    height: 19px;
  }

  .contents {
    .font-xl {
      padding-bottom: 1rem;
    }
    .contents-left {
      width: 40%;
    }
    .contents-right {
      width: 60%;
    }
  }
  .top-sentence {
    font-size: var(--font-size-l);
    font-weight: bold;
    padding-bottom: 2rem;
  }
  .sentence-detail {
    font-size: var(--font-size-m);
    line-height: 2rem;
  }

  /* 特殊な位置関係用css */
  @media (min-width: 1200px) {
    .container-inner {
      max-width: calc((100vw - var(--pc-width)) / 2 + var(--pc-width));
      position: relative;
      height: 775px;
      margin-left: 0;
      .cnts-img {
        height: 100%;
        width: calc(1200px + ((100vw - 1200px) / 2));
        margin-left: calc(50% - 50vw);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center right;
          vertical-align: middle;
        }
      }
    }

    .absolute-box {
      background: var(--base-color);
      position: absolute;
      bottom: -1px;
      right: -1px;
      height: 660px;
      width: 600px;
      padding: 3rem;
    }
  }
  @media (min-width: 1200px) and (max-width: 1330px) {
    .container-inner {
      max-width: calc((100vw - var(--pc-width)) / 2 + var(--pc-width));
      position: relative;
      height: 685px;
      margin-left: 0;
      .cnts-img {
        height: 100%;
        width: calc(1200px + ((100vw - 1200px) / 2) - 5vw);
        margin-left: calc(50% - 50vw);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center right;
          vertical-align: middle;
        }
      }
    }
  }
  @media (min-width: 600px) and (max-width: 1199px) {
    .container-inner {
      max-width: 100vw;
      .cnts-img {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center right;
          vertical-align: middle;
        }
  
      }
    }
    .absolute-box {
      position: relative;
    }

    .title {
      background: var(--base-color);
      position: absolute;
      top: -2.7em;
      left: -5.5%;
      padding: 30px 5.5%;
      z-index: 1000;
    }
    .sentence-detail {
      width: 100%;
      padding-top: 3em;
    }
  }
  @media screen and (max-width: 599px) {
    .container-inner {
      max-width: 100vw;
      .cnts-img {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
      }
      img {
        width: 100%;
        min-height: 265px;
        object-fit: cover;
      }
    }
    .absolute-box {
      position: relative;
    }
    .title {
      background: var(--base-color);
      padding: 15px 4vw 15px calc(5vw + var(--sp-inner-p)); /* 5vw=spの全体（100vw）に対する5%のpadding 10px=spのコンテンツに対するpadding */
      position: absolute;
      top: -3.4em;
      left: calc(-5vw - var(--sp-inner-p));
      z-index: 1000;
    }
    .sentence-detail {
      width: 100%;
      padding-top: 3em;
    }
    .btn-area a {
      margin: 0 auto;
    }
  }
}

@media screen and (max-width: 599px) {
  .recruit {
    margin: 7rem 0;
  }
}