/* ============================================================
   KABUKI recruit.css（採用情報ページ専用）
   Figma: node 332:1495（PC）/ 343:2021（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   塗り色は get_metadata に含まれないため、背景の白/淡グレー/黒の割り当ては
   構成上の判断（bg-section の矩形が並ぶ範囲＝淡グレー、Hero/Message は
   低解像度の全体俯瞰スクリーンショットで確認した「黒帯」）。
   淡いグレーの背景は tokens.css に無いため --color-gray から color-mix() で
   導出する（company.css / front.css と同じ手法）。
   ============================================================ */

/* ================================================
   p-recruit__hero
   Figma: node 332:1495 内 hero-wrapper（332:1498, y=93〜348）+
   タグライン（332:1501, x=580 y=210）
   大見出し「Recruit」のフォントサイズは get_metadata がバウンディングボックス
   しか返さないため実測不可。テキストボックス高さの比（PC 144 : SP 48 = 3:1）が
   company/hero.php の「Company」と同一のため、同じ推定値（PC fs-48の2倍、
   SP fs-32の1.5倍）を踏襲した。
   ================================================ */
.p-recruit__hero {
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-recruit__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-block: 64px;
  }
}

.p-recruit__hero-heading-block {
  /* 2026-08-03 SOTA決定（Hero見出しブロックのカノニカル型統一）: DOM順を
     Recruit→採用情報に変更。SP/PCとも同じ縦積み・左揃え・gap8px
     （他ページと共通のブロック構造）。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.p-recruit__hero-eyebrow {
  /* 2026-08-03 SOTA決定: 全ページ共通の日本語ラベルサイズ（SP=fs-14 / PC=fs-18）に統一
     （旧実装はブレークポイント共通18pxだった。get_design_context 確認済み: 332:1500 は
     PC実測18px-Bold）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: inherit;
}

@media (min-width: 768px) {
  .p-recruit__hero-eyebrow {
    font-size: var(--fs-18);
  }
}

.p-recruit__hero-title {
  /* 2026-08-03 SOTA決定: 全ページ共通の英語見出しサイズ（SP=fs-32 / PC=fs-48*2）に統一
     （旧実装はSP側がfs-32*1.5=48pxの近似値だった）。 */
  font-size: var(--fs-32);
  color: inherit;
}

@media (min-width: 768px) {
  .p-recruit__hero-title {
    /* get_design_context 確認済み: 365:2499 text-96px = fs-48*2 で一致 */
    font-size: calc(var(--fs-48) * 2);
  }
}

.p-recruit__hero-tagline {
  /* get_design_context 確認済み: 332:1501 text-22px-Bold, w-504px */
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: inherit;
  max-width: 504px;
}

/* ================================================
   p-recruit__heading（KABUKIで働く意味 / こんな方を求めています /
   募集職種 / 選考フロー / Message 共通見出し）
   JP大見出し＋補足ラベルの組。company の section-head と違い、Recruit では
   見出し自体が日本語（「Message」を除く）。見出しの実寸フォントサイズは
   bounding box (h=51 PC / h=36 SP) から company/front の確立済みスケール
   （fs-32→fs-48）を踏襲。--center は「KABUKIで働く意味」「募集職種」
   「選考フロー」（見出し中心 x が page 中心 x=720 と一致）に使用。
   ================================================ */
.p-recruit__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .p-recruit__heading {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 32px;
  }
}

.p-recruit__heading--center {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .p-recruit__heading--center {
    justify-content: center;
  }
}

.p-recruit__heading-title {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: inherit;
}

/* get_design_context で確認: 332:1679「KABUKIで働く意味」/ 332:1519「こんな方を
   求めています」/ 341:1908「募集職種」/ 341:1917「選考フロー」はいずれも PC でも
   32px 固定（拡大しない）。48px に拡大するのは Message セクションの英字見出し
   （u-font-en 併用、332:1526 Montserrat 48px-Bold）のみ。 */
@media (min-width: 768px) {
  .p-recruit__heading-title.u-font-en {
    font-size: var(--fs-48);
  }
}

.p-recruit__heading-sub {
  /* get_design_context 確認済み: 332:1527/332:1522/332:1681 いずれも
     text-22px-Regular（16px-Bold ではなかった） */
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  color: inherit;
}

/* ================================================
   p-recruit__photo-placeholder（写真コンテナ）
   aspect-ratio/ブレークポイント制御はこのまま流用し、中身は実写真に差し替え済み。
   ================================================ */
.p-recruit__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}

.p-recruit__photo-placeholder img,
.p-recruit__photo-placeholder picture {
  width: 100%;
  height: 100%;
  display: block;
}

.p-recruit__photo-placeholder img {
  object-fit: cover;
}

/* 紹介文セクションの写真（363:2479 / 367:2742, 実測 353x277。PC/SP 同寸） */
.p-recruit__photo-placeholder--intro {
  aspect-ratio: 353 / 277;
  width: 100%;
  max-width: 353px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-recruit__photo-placeholder--intro {
    width: 353px;
    max-width: none;
    flex-shrink: 0;
    margin-inline: 0;
  }
}

/* Message セクションの写真（SP: 367:2741 実測 353x316 / PC: 367:2688 実測 246x275） */
.p-recruit__photo-placeholder--message {
  aspect-ratio: 353 / 316;
  width: 100%;
  max-width: 353px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-recruit__photo-placeholder--message {
    aspect-ratio: 246 / 275;
    width: 246px;
    max-width: none;
    flex-shrink: 0;
    margin-inline: 0;
  }
}

/* ================================================
   p-recruit__intro（紹介文 + 写真）
   Figma: node 332:1495 内 本文（332:1677, x=273 y=398 w531 h288）+
   写真（363:2479, x=817 y=398）
   ================================================ */
.p-recruit__intro {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__intro {
    padding-block: 56px;
  }
}

.p-recruit__intro-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-recruit__intro-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
}

.p-recruit__intro-text {
  /* get_design_context 確認済み: 332:1677 text-18px, font-medium。
     line-height: Figma実測 2.0（2026-07-29追加の --lh-loose を適用）。 */
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: var(--lh-loose);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-recruit__intro-text {
    max-width: 531px; /* Figma 本文テキストボックス実測 531px */
  }
}

.p-recruit__intro-photo {
  align-self: center;
}

@media (min-width: 768px) {
  .p-recruit__intro-photo {
    align-self: flex-start;
  }
}

/* ================================================
   p-recruit__why（KABUKIで働く意味・3カード）
   Figma: bg-section（337:1791, y=736〜1112）+ カード3枚
   （336:1788〜1790, PC横並び w380 h157）
   ドットの色は塗り情報が metadata に無いため --color-red を採用
   （front.css の p-front__tcg-dot と同じ判断根拠）。
   ================================================ */
.p-recruit__why {
  /* get_design_context 確認済み: 337:1791 bg-section = Figma変数 kabuki/gray (#F7FBF9)。
     2026-07-29: tokens.css に --color-bg-section 追加のため var() に置換 */
  background-color: var(--color-bg-section);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__why {
    padding-block: 56px;
  }
}

.p-recruit__why-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-recruit__why-cards {
    flex-direction: row;
    flex-wrap: wrap;
    /* get_design_context 確認済み: カード間の実測ギャップは30px（24pxではなかった） */
    gap: 30px;
  }
}

.p-recruit__why-card {
  /* get_design_context 確認済み: 336:1788〜1790 border #E5E5E5, rounded-10px
     （12px/枠なし ではなかった） */
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 10px;
  padding: 24px;
}

@media (min-width: 768px) {
  .p-recruit__why-card {
    flex: 1 1 300px;
  }
}

.p-recruit__why-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 2026-07-29: Figma実測20px。--fs-20追加前は近似で--fs-18を当てていた */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 8px;
}

.p-recruit__why-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-red);
  flex-shrink: 0;
}

.p-recruit__why-card-desc {
  /* get_design_context 確認済み: 341:1893 text-16px-Regular, text-black
     （14px / gray-text ではなかった） */
  font-size: var(--fs-16);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

/* ================================================
   p-recruit__values（こんな方を求めています・5項目リスト）
   Figma: 357:2325（x=270 y=1247 w900 h470、01〜05 番号 + タイトル + 説明を
   横罫線で区切った縦積みリスト）。company/values.php と同じ5項目の文言を
   使用するが、本ページは番号+タイトル+説明の3点構成のため別実装。
   ================================================ */
.p-recruit__values {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__values {
    padding-block: 56px;
  }
}

.p-recruit__values-list {
  display: flex;
  flex-direction: column;
}

/* 2026-07-31追加（石黒指摘）: 見出し「こんな方を求めています」がSPで
   「こんな方を求めていま/す」と1文字だけ孤立して折り返されるのを防ぐため、
   意味区切り「こんな方を／求めています」に手動改行を挿入。768px以上では
   1行に収まるため無効化（tcg/connect-diagram.php, front/service-ai.php と
   同じ既存の <br class="...-break"> パターンを踏襲）。 */
@media (min-width: 768px) {
  .p-recruit__values-heading-break {
    display: none;
  }
}

.p-recruit__values-row {
  /* 2026-07-31修正（田中SP指摘）: align-items が flex-start だと赤い番号01〜05が
     行の上端に寄っていたため、center に変更して番号を行の中央揃えに。 */
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-gray);
}

.p-recruit__values-row:first-child {
  border-top: 1px solid var(--color-gray);
}

@media (min-width: 768px) {
  .p-recruit__values-row {
    gap: 40px;
    padding-block: 24px;
  }
}

.p-recruit__values-number {
  /* get_design_context 確認済み: 356:2264等 text-18px-Bold, text-[#da0000]
     （24px / black ではなかった） */
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-red);
  flex-shrink: 0;
  width: 32px;
}

.p-recruit__values-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-recruit__values-title {
  /* get_design_context 確認済み: 356:2265等 text-24px-Bold（16px ではなかった） */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-recruit__values-desc {
  /* get_design_context 確認済み: 356:2266等 text-12px-Regular, text-black
     （14px / gray-text ではなかった） */
  font-size: var(--fs-12);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

/* ================================================
   p-recruit__positions（募集職種）
   Figma: bg-section（341:1900, y=1767〜2447）+ 6職種グリッド
   （363:2480, PC 2列×3行、列間に縦罫線・行間に横罫線 / SP 縦1列）
   ================================================ */
.p-recruit__positions {
  /* get_design_context 確認済み: 341:1900 bg-section = 337:1791 と同じ
     kabuki/gray (#F7FBF9)。2026-07-29: --color-bg-section 追加のため var() に置換 */
  background-color: var(--color-bg-section);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__positions {
    padding-block: 56px;
  }
}

.p-recruit__positions-list {
  /* get_design_context 確認済み: 336:1787 でグリッド全体が白い角丸カード
     （bg-white, border #E5E5E5, rounded-20px）に収まっている。
     2026-07-30修正: 導入時はPCのみ再現していたが、Figma SPフレーム
     （343:2021内 362:2438）のスクリーンショット実測でSPも同じ白角丸カードに
     収まっていることを確認したため、共通化してSPにも適用。 */
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 20px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-recruit__positions-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-recruit__position-item {
  /* 2026-07-31修正（田中SP指摘）: SPで左右余白が無く、カード端にテキストが
     密着していたため、左右24pxを追加。 */
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-gray);
}

.p-recruit__position-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .p-recruit__position-item {
    padding: 24px 32px;
  }

  .p-recruit__position-item:nth-child(odd) {
    border-right: 1px solid var(--color-gray);
  }

  .p-recruit__position-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

.p-recruit__position-title {
  /* 2026-07-29: Figma実測20px。--fs-20追加前は近似で--fs-18を当てていた */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 8px;
}

.p-recruit__position-desc {
  /* get_design_context 確認済み: 339:1849等 text-16px-Regular, text-black
     （14px / gray-text ではなかった） */
  font-size: var(--fs-16);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

/* ================================================
   p-recruit__process（選考フロー）
   Figma: 341:2012（4ステップ、円+矢印アイコンの接続）。
   2026-07-29修正: 円は白地+グレー罫線（塗り35%グレーではなかった）、
   接続は連続バーではなく円と円の間に矢印アイコンを挟む構成に修正
   （get_design_context / get_screenshot 実測、SOTA指摘）。
   01「エントリー」のみ <a> でお問い合わせフォームへリンク（テンプレート
   コメント参照）。
   ================================================ */
.p-recruit__process {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__process {
    padding-block: 64px;
  }
}

.p-recruit__process-diagram {
  /* 2026-07-31修正（田中SP指摘）: SPで円と矢印の間隔が広く見えたため、
     gapを24pxから16pxに縮小。PC（768px以上、gap:20px）は別ブロックのため無影響。 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .p-recruit__process-diagram {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* 出典: get_design_context 341:2012（円222px×4 + 矢印を挟んだ実測総幅1095px に近似） */
    gap: 20px;
  }
}

.p-recruit__process-arrow {
  /* 2026-07-30修正: SPで非表示(display:none)にしていたが、Figma SP実測
     （362:2463等のVectorコネクタ、円と円の間 x=194 height=29）で縦積みの
     間に接続表現があることを確認。PC同様の矢印アイコンを90度回転して
     下向きに表示する（PC値がSPに漏れる系統バグの逆＝SP側の表現が丸ごと
     欠落していたケース）。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--color-gray-text);
}

.p-recruit__process-arrow svg {
  width: 26px;
  height: 26px;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .p-recruit__process-arrow {
    width: 29px;
    height: 26px;
  }

  .p-recruit__process-arrow svg {
    width: 100%;
    height: auto;
    transform: none;
  }
}

.p-recruit__process-step {
  /* 2026-07-30修正: SPは180pxで実装していたが、Figma SP実測（362:2442等の
     ellipse、ピクセル解析で x=84〜306 = 直径222px）でPCと同じ222pxと確認。
     SP側で根拠なく縮小していたバグのため、両ブレークポイント共通の222pxに統一。 */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 222px;
  height: 222px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  text-align: center;
  padding: 16px;
}

.p-recruit__process-step-number {
  /* get_design_context 確認済み: 339:1872等 text-24px-Bold, text-[#da0000]
     （22px / black ではなかった） */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-red);
}

.p-recruit__process-step-title {
  /* get_design_context 確認済み: 339:1864等 text-22px-Bold（16px ではなかった） */
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-recruit__process-step-desc {
  /* get_design_context 確認済み: 339:1874等 text-16px-Regular, text-black
     （12px / gray-text ではなかった） */
  font-size: var(--fs-16);
  color: var(--color-black);
}

/* ================================================
   p-recruit__message（代表からのメッセージ・黒帯+写真）
   Figma: bg-section（341:1925, y=2855〜3281）+ 363:2481（本文ブロック）+
   367:2688（写真）
   ================================================ */
.p-recruit__message {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-recruit__message {
    padding-block: 56px;
  }
}

.p-recruit__message-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-recruit__message-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
}

.p-recruit__message-body {
  display: flex;
  flex-direction: column;
}

/* 2026-07-30追加: Message見出し（「Message」+「代表からのメッセージ」）は
   SPのみ中央寄せ。Figma SP実測（343:2165内 Frame 81, x=122.5 w=108 → 中心が
   コンテナ中心 196.5 と一致）で確認。PC実測（332:1524, x=0 起点の左寄せ+横並び）
   とは異なるため、ページ内で他に流用されない .p-recruit__message 配下限定で
   分岐する（p-recruit__heading--center は他セクションでPC/SP共通の中央寄せの
   ため転用不可）。 */
.p-recruit__message .p-recruit__heading {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .p-recruit__message .p-recruit__heading {
    align-items: baseline;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .p-recruit__message-body {
    max-width: 611px; /* Figma 本文ブロック実測 611px */
  }
}

.p-recruit__message-text {
  /* get_design_context 確認済み: 332:1516 font-medium（16pxは一致）。
     line-height: Figma実測 1.8（2026-07-29追加の --lh-body を適用）。 */
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: inherit;
}

.p-recruit__message-signature {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.p-recruit__message-signature-title {
  /* get_design_context 確認済み: 332:1513 の親要素が font-bold + text-white を
     一括指定しており、代表取締役ラベルも白文字・太字（gray-light ではなかった） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: inherit;
}

.p-recruit__message-signature-name {
  /* 2026-07-29: Figma実測20px。--fs-20追加前は近似で--fs-18を当てていた */
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: inherit;
}

.p-recruit__message-photo {
  align-self: center;
}

@media (min-width: 768px) {
  .p-recruit__message-photo {
    align-self: flex-start;
  }
}