/*
 * 福利厚生（benefits）下層ページ専用スタイル。
 * デザイン基準幅: 1920px（Figma「採用TOP_安心への取り組み」）
 */

.benefits-page {
  --bn-red: #811c21;
  --bn-red-deep: #751b1e;
  --bn-ink: #333;
  --bn-font-yu: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "Noto Sans JP", sans-serif;
  --bn-font-noto: "Noto Sans JP", sans-serif;
  font-family: var(--bn-font-noto);
  color: var(--bn-ink);
  overflow-x: clip;
}

.benefits-page img {
  max-width: 100%;
}

/* ---------------------------------- intro */

.bn-intro {
  padding-top: clamp(48px, 4.4vw, 85px);
  text-align: center;
}

.bn-intro__inner {
  width: min(1080px, 92%);
  margin: 0 auto;
}

.bn-intro__heading {
  margin: 0;
  font-family: var(--bn-font-yu);
  font-weight: 700;
  font-size: clamp(26px, 2.3vw, 44px);
  line-height: 2;
  color: #000;
}

.bn-intro__accent {
  color: var(--bn-red-deep);
}

.bn-intro__lead {
  margin-top: clamp(20px, 1.9vw, 37px);
  font-family: var(--bn-font-yu);
  font-weight: 700;
  font-size: clamp(15px, 0.95vw, 18px);
  line-height: 2.2;
  color: #000;
}

.bn-intro__lead p {
  margin: 0;
}

.bn-intro__lead p + p {
  margin-top: 2.2em;
}

/* ---------------------------------- benefit rows */

.bn-rows {
  width: min(1400px, 92%);
  margin: clamp(70px, 6.8vw, 131px) auto 0;
  display: grid;
  gap: clamp(60px, 5.3vw, 101px);
}

.bn-row {
  display: grid;
}

.bn-row > * {
  grid-area: 1 / 1;
}

.bn-row__img {
  width: 50%;
}

.bn-row__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 6;
  object-fit: cover;
  border-radius: 10px;
}

.bn-row--img-right .bn-row__img {
  justify-self: end;
}

.bn-row--img-left .bn-row__img {
  justify-self: start;
}

.bn-row__card {
  position: relative;
  z-index: 1;
  width: 58.6%;
  height: fit-content;
  padding: clamp(32px, 3.3vw, 64px);
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

.bn-row--img-right .bn-row__card {
  justify-self: start;
}

.bn-row--img-left .bn-row__card {
  justify-self: end;
}

/* 行ごとの上下オフセット（デザイン値: 92 / 29 / 75 / 146px） */
.bn-row:nth-child(1) .bn-row__card {
  margin-top: clamp(40px, 4.8vw, 92px);
}

.bn-row:nth-child(2) .bn-row__img {
  margin-top: clamp(12px, 1.5vw, 29px);
}

.bn-row:nth-child(3) .bn-row__card {
  margin-top: clamp(32px, 3.9vw, 75px);
}

.bn-row:nth-child(4) .bn-row__card {
  margin-top: clamp(60px, 7.6vw, 146px);
}
.bn-row:nth-child(5) .bn-row__card {
  margin-top: clamp(60px, 7.6vw, 146px);
}
.bn-row__heading {
  margin: 0;
  font-family: var(--bn-font-noto);
  font-weight: 700;
  font-size: clamp(22px, 1.7vw, 32px);
  line-height: 1.6;
  color: var(--bn-ink);
}

.bn-row__heading-sub {
  font-size: clamp(17px, 1.25vw, 24px);
}

.bn-row__text {
  margin: clamp(14px, 1.25vw, 24px) 0 0;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.8;
  color: #000;
}

.bn-row__text p {
  margin: 0;
}

.bn-row__text p + p {
  margin-top: 1.8em;
}

/* リンク・CTA・ヒーローは site-common.css の共通部品を使用 */

.bn-rows + .recruit-links {
  margin-top: clamp(80px, 8vw, 154px);
}

/* ---------------------------------- responsive */

@media (max-width: 900px) {
  .bn-row {
    display: block;
  }

  .bn-row__img {
    width: 100%;
  }

  .bn-row__card {
    width: min(92%, 640px);
    margin: -48px auto 0;
  }

  .bn-row:nth-child(1) .bn-row__card,
  .bn-row:nth-child(3) .bn-row__card,
  .bn-row:nth-child(4) .bn-row__card,
  .bn-row:nth-child(5) .bn-row__card {
    margin-top: -48px;
  }

  .bn-row:nth-child(2) .bn-row__img {
    margin-top: 0;
  }
}