/* components/recruit-banner.css — 採用情報バナー（Figma 294:14744 PC / 294:14662 SP）
   フッター直上に全ページ共通で表示（採用ランディング・募集要項詳細を除く）。
   スタッフ写真背景＋オーバーレイ（teal 20% multiply＋黒12%）＋白見出し＋
   黄色ピルボタン（共通 .c-morebtn）。上端の波は直前セクションの地色
   （既定: オフホワイト／コラム・お知らせ系はライトイエロー）で塗り分ける。
   下端には全ページ共通のフッター上端ウェーブ（c-footer__wave）が写真に重なる
   （モック Figma 294:14673 はフラット接続だが、ウェーブを重ねる方針に変更）。 */
.c-recruit-banner {
  position: relative;
  /* base.css の section { margin-block } をリセット（前後に #fffffa の帯が出るのを防ぐ） */
  margin-block: 0;
  /* Figma: pt 200 / pb 32。人物写真を上部に見せるため上を大きく取る。
     下端はフッター上端のウェーブ（c-footer__wave＝高さ ≒ 5.42vw）が上にはみ出してくる分を
     加算し、ボタンが波形に被らないようにする。 */
  padding-block: var(--space-200) calc(var(--space-64) + 5.42vw);
  padding-inline: var(--space-24);
  /* 背景写真は saiyo/cta-bg.webp と同じ元写真だがトリム位置が異なるため専用アセット
     （Figma 294:14745 のフィル位置 top -52.03% / h 241.84% で切り出し・@2x 2880×794） */
  background-image: url("../../images/common/recruit-banner-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* オーバーレイ（teal 20% multiply ＋ 黒 12%） */
.c-recruit-banner__overlay {
  position: absolute;
  inset: 0;
}
.c-recruit-banner__overlay::before,
.c-recruit-banner__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
}
.c-recruit-banner__overlay::before {
  background: rgba(153, 195, 188, 0.2);
  mix-blend-mode: multiply;
}
.c-recruit-banner__overlay::after {
  background: rgba(0, 0, 0, 0.12);
}

/* 上端の波（直前セクションの地色 → 当セクション写真 への境界）。
   Figma 294:14754（Rectangle 40・1440×57.7）。素材は上=地色テクスチャ／下=透過。
   地色で差し替えられるよう img ではなく背景画像の疑似要素で持つ。 */
.c-recruit-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1440 / 57.7;
  background: url("../../images/saiyo/recruit-cta-wave-off-white.webp") top center / 100% 100% no-repeat;
  pointer-events: none;
}
/* コラム・お知らせ系はCTA（c-cta-visit）の地がライトイエローのため波も同色に切替
   （cta-visit.css の黄色地バリアントと同じ対象ページ。判定は body クラス is-cta-yellow） */
.is-cta-yellow .c-recruit-banner::after {
  background-image: url("../../images/saiyo/recruit-cta-wave.webp");
}

.c-recruit-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

/* 見出し（タイトル＋サブ）。間隔4pxはFigma準拠の例外値。 */
.c-recruit-banner__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.c-recruit-banner__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.25);
}
.c-recruit-banner__sub {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ボタンは共通 .c-morebtn。幅のみFigma準拠で固定。 */
.c-recruit-banner__btn {
  width: 20.6875rem; /* 331px */
  max-width: 100%;
}

@media (max-width: 768px) {
  .c-recruit-banner {
    /* SP（Figma 294:14662）：pt 96 / pb 16・左右ガター12px・SP専用背景写真。
       下端はPC同様フッターウェーブの重なり分を加算。 */
    padding-block: var(--space-96) calc(var(--space-32) + 5.42vw);
    padding-inline: var(--space-12);
    /* SPもトリム位置が異なる専用アセット（Figma 294:14662 のフィル位置 top -12.26% / h 113.65%・@2x 750×440） */
    background-image: url("../../images/common/recruit-banner-bg-sp.webp");
  }
  .c-recruit-banner__inner {
    gap: var(--space-8);
  }
  .c-recruit-banner__heading {
    gap: 0;
  }
  .c-recruit-banner__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-body);
  }
  .c-recruit-banner__sub {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    text-shadow: 0 0 25px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.25);
  }
  /* ボタン：幅327px（375px端末で左右12pxガター相当）・ラベル12.8px・矢印24px。 */
  .c-recruit-banner__btn {
    width: 100%;
    max-width: 20.4375rem; /* 327px */
    font-size: var(--font-size-h6);
    padding: var(--space-12) calc(var(--space-16) + var(--space-24)) var(--space-12) var(--space-16);
  }
  .c-recruit-banner__btn.c-morebtn::after {
    right: var(--space-12);
    width: var(--space-24);
    height: var(--space-24);
    background-size: var(--space-24);
  }
}