/* =========================================================
   page-recruit.css : 採用情報ページ固有
   求人カード（写真背景＋左クリーム＋職種/雇用形態/月給）
   ========================================================= */

.recruit__list {
  max-width: 1530px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.recruit__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 483 / 354;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* 背景写真 */
.recruit__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左をクリームで覆い、右へ透過（テキストの可読性確保） */
.recruit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-bg) 52%,
    rgba(253, 252, 248, 0) 97%
  );
}

/* 施設タグ（写真上・左寄せ） */
.recruit__tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-left: 66px;
  margin-bottom: 56px;
}

/* 求人情報（ラベル / 値） */
.recruit__info {
  position: relative;
  z-index: 1;
  padding-left: 48px;
}

.recruit__info dl {
  display: grid;
  grid-template-columns: 131px auto;
  row-gap: 24px;
}

.recruit__info dt,
.recruit__info dd {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-text);
}

/* ==========================================================
   SP : max-width 750px
   ========================================================== */
@media (max-width: 750px) {
  .recruit__list {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 360px;
  }

  .recruit__card {
    aspect-ratio: 320 / 180;
  }

  .recruit__tag {
    margin-left: 16px;
    margin-bottom: 29px;
  }

  .recruit__info {
    padding-left: 37px;
  }

  .recruit__info dl {
    grid-template-columns: 91px auto;
    row-gap: 14px;
  }

  .recruit__info dt,
  .recruit__info dd {
    font-size: 16px;
  }
}