/* ===========================================================
   07-careers — CAREERS（暗背景・参加形態カード4枚）

   Figma 実測（Frame 1 = 1360:2400 基準の相対座標）
   ─────────────────────────────────────────────
   背景 Rectangle 133   X0    Y5539  W1366 H633  fill #1F1F1F
   ラベル "Careers"     X42   Y5681  W64   H18   Bold 11.5 / lh17.3 / ls2.07px / #67BE8D
   見出し               X42   Y5713  W532  H122  Bold 38   / lh60.8
   本文                 X42   Y5872  W570  H100  Regular 14
   カード1 (Group 394)  X714  Y5669  W282  H181
   カード3              X714  Y5898              → 行間隔 48
   カード枠 Rect136     線 #FFFFFF 1px 内側 / 角丸4 / 塗りなし
   カード見出し         X729  Y5681  W221  H26   Bold 17 / lh25.5 / #67BE8D
   カード本文           X729         W253  H42   （padding 15px から逆算）

   導出値
   ─────────────────────────────────────────────
   カード右端 1042+282 = 1324 = 1366-42 → 左右ガター 42 で対称
   カード列間隔  1042 - (714+282) = 46
   2カラム間隔   714 - (42+570)   = 102
   上パディング  5669 - 5539 = 130（カードが基準。テキスト列は +12）
   下パディング  6172 - (5898+181) = 93
   =========================================================== */

.sec-careers {
  /* position: relative は見た目のためではなく保険。
     地の色を持つ唯一のセクションなので、static のままだと背景が
     「位置指定された要素」の層より奥に落ち、上の層に重なるもの
     （05-brand の幕2 など）に暗い帯だけ塗り潰される。実際に一度出した。
     他のセクションは .section 経由で relative が付いている。 */
  position: relative;
  background: var(--bg-dark-alt);          /* #1f1f1f 実測 */
  color: var(--text-invert);
  padding-block: 130px 93px;
}

.sec-careers__inner {
  display: grid;
  grid-template-columns: 570px 610px;
  column-gap: 102px;
  align-items: start;
}

/* カードの方が 12px 上から始まる。テキスト列だけ下げて合わせる。 */
.sec-careers__intro {
  padding-top: 12px;
}

/* base.css の .sec-label は margin-bottom:24px。ここは実測 14px。 */
.sec-careers .sec-label {
  margin-bottom: 14px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--aixeed-green);
}

.sec-careers__head {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;               /* 実測 0px */
}

.sec-careers__lead {
  /* 見出し下端 5835 → 本文 5872 */
  margin-top: 37px;
  max-width: 570px;
  font-size: var(--fs-body);
  line-height: var(--lh-lead);     /* 実測 33.3px / 14px = 2.38 */
  letter-spacing: 0;               /* 実測 0px */
  color: var(--text-invert);       /* 実測 #FFFFFF */
}

/* --- カード ------------------------------------------------- */

.sec-careers__cards {
  display: grid;
  grid-template-columns: repeat(2, 282px);
  column-gap: 46px;
  row-gap: 48px;
}

.sec-careers__card {
  /* カード全体を押せるようにするための基準（__card-link::after が広がる）。 */
  position: relative;
  height: 181px;
  /* Figma の線は「内側」＝ border-box と同じ扱い。
     カード外形 282、テキスト X729（カード X714 から 15）、テキスト幅 253。
     border-box では border 1px も内側を食うので、padding から 1px 引く。
       左 15-1=14 / 右 (282-15-253)-1=13 / 上 12-1=11
     content = 282 - 2(border) - 14 - 13 = 253 でカンプと一致する。
     ここを 15/14 のままにすると content が 251px になり、1行目に必要な
     251.84px に届かず本文の折返しが1行増える（実測して判明）。 */
  padding: 11px 13px 11px 14px;
  border: 1px solid var(--surface);   /* 実測 #FFFFFF 1px 内側 */
  border-radius: 4px;                 /* 実測 */
}

/* カード全体を当たり判定にする（見出しの文字だけでなく、矢印も枠内の余白も押せる）。
   ⚠️ .sec-careers__card の position: relative はこの ::after のための基準。
      以前はその relative とコメントだけがあって**この規則が抜けていた**ため、
      実際に押せるのは見出しのテキストだけだった。
      「囲み内の矢印も押せるように」との先方指示で追加（2026-08-15）。
   絶対配置なので、静的配置の矢印 span より前面に来て当たり判定を奪う。 */
.sec-careers__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sec-careers__card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-card-title);
  color: var(--aixeed-green);
}

/* カード右上の外部リンク矢印。見出しが space-between なので右端に付く。
   カンプは → （右向き）。事業紹介カードの ↗（外部リンク）とは別物なので、
   揃えようとして書き換えないこと。色は見出しから継承（#67BE8D）。
   ⚠️ 以前は空の16×16の箱で、**画面には何も出ていなかった**。
   Figma の書き出しに差し替えるなら、ここに background-image を当てて
   font-size を0にする。寸法もその時に実測すること。 */
.sec-careers__arrow {
  flex: none;
  font-size: 16px;
  line-height: 1;
}

.sec-careers__card-body {
  /* カード見出し下端 5707 → 本文 5732 付近（実測は X/W のみ、Y は導出） */
  margin-top: 25px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);     /* 実測 150% */
  letter-spacing: 0;               /* 実測 0px */
  color: var(--text-invert);       /* 実測 #FFFFFF */
}

/* ===========================================================
   SP — カンプが無いので変換設計。
   2カラム（テキスト｜カード2×2）→ 縦1列、カードも1列に落とす。
   カードは高さ固定をやめて内容なりに伸ばす（文量が違うため）。
   =========================================================== */

@media (max-width: 1099px) {
  .sec-careers__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .sec-careers__intro {
    padding-top: 0;
  }

  .sec-careers__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sec-careers__card {
    height: auto;
    min-height: 181px;
  }
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測
       セクション   `Group 422`  X=0  Y=7888  375×1218  #1F1F1F
       中身         `Frame 301`  X=18 Y=7986  339×1021  縦Auto / 間隔 **90**
       見出し塊     `Frame 299`  339×269  間隔 **40**
       カード列     `Frame 300`  Y=359  339×662  間隔 **32**
       カード1枚    `Group 394`  339×131  線 #FFFFFF

     上下の余白 = 7986−7888 = 98 ／ (7888+1218)−(7986+1021) = 99

     ⚠️ カンプのラベルは「OUR BUSINESS」だが、事業紹介と重複しているので
        複製漏れと判断し「Careers」のままにしている（ABOUT US と同じ事象）。 */
  .sec-careers {
    padding-block: 98px 99px;         /* 実測 */
  }

  .sec-careers > .container {
    width: 100%;
    padding-inline: 20px;             /* SP共通の左右余白 */
  }

  /* 見出し塊 → カード列 は実測90。 */
  .sec-careers__inner {
    row-gap: 90px;
  }

  /* 実測: Bold 26px / 行間130% / 字間0（26×1.3×3行 = 101.4 ≒ 実測H102）。
     事業紹介・ビジョンの32pxとは**別サイズ**。カンプがセクションごとに
     使い分けているので、揃えようとして書き換えないこと。 */
  .sec-careers__head {
    font-size: min(26px, 6.93vw);     /* 375pxでちょうど26px。狭い端末では追随 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* ラベル→見出しは実測4px（見出しのYが22 = ラベル18 + 4）。 */
  .sec-careers .sec-label {
    margin-bottom: 4px;
    line-height: 18px;
  }

  .sec-careers__lead {
    margin-top: 40px;                 /* 実測 Frame 299 の間隔 */
  }

  /* カードは1列。間隔は実測32。 */
  .sec-careers__cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;                    /* 実測 */
  }

  /* 高さは中身なり（カンプもカードごとに違う。1枚目は131）。 */
  .sec-careers__card {
    height: auto;
    min-height: 0;
  }
}