/* Business */

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

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

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

  .title {
    font-size: var(--font-size-2xl);
    margin: 0;
    font-weight: 600;
    padding-bottom: 1.5rem;
  }

  .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: 685px;
      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: 0;
      /* right: 0; */
      right: 0;
      /* height: 244px; */
      height: 365px;
      width: 514px;
      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: -0.8em;
      left: -5.5%;
      padding: 10px 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: 10px 4vw 10px calc(5vw + var(--sp-inner-p)); /* 5vw=spの全体（100vw）に対する5%のpadding 10px=spのコンテンツに対するpadding */
      position: absolute;
      top: -1em;
      left: calc(-5vw - var(--sp-inner-p));
      z-index: 1000;
    }
    .sentence-detail {
      width: 100%;
      padding-top: 3em;
    }
  }
}