/* ===========================================================
   03-business — OUR BUSINESS（事業カード4枚）

   このセクションの特徴は「段違い2カラム」。
   右列が約152px下にずれて始まり、左右が互い違いに見える。
   単純な grid だと揃ってしまうので、右列だけ margin-top を入れる。

   実測値（Figma / 2026-08-05・06）※旧「620 / 42 / 620:260」は観察ベースの誤り
     サムネイル  X=42 Y=1503 W=612 H=344.58
     列間隔      58    （612*2 + 58 = 1282 = コンテナ幅）
     右列オフセット 152（カンプ実測比からの逆算で約151。現状維持）
     ワードマーク FUSION AI for Biz 439.04×38.62 / FUSION AI 264.84×38.6
                 AIプロダクト等は Bold 36px

   ⚠️ 見出し（.sec-business__title）に font-size を再指定しないこと。
      base.css の .sec-head__ja が持っており、後勝ちで SP 用の上書きを潰す。
   =========================================================== */

.sec-business__head {
  margin-bottom: 64px;                /* PROVISIONAL */
}

.sec-business__title {
  /* font-size は .sec-head__ja（base.css）に任せる。ここで再指定すると
     base.css の SP 上書き（--sp-fs-h2）を後勝ちで潰してしまい、
     スマホで38pxのまま画面外へはみ出す。 */
  line-height: var(--lh-h2);
}

/* 実測（Figma / 2026-08-05）:
   カードのサムネイル X=42 Y=1503 W=612 H=344.58
   → コンテナ1282 に 612 が2枚入るので、カラム間は 1282 − 612×2 = 58 */
.sec-business__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 58px;                   /* 実測 */
  row-gap: 88px;                      /* PROVISIONAL */
}

/* 段違いレイアウト。右列（偶数番目）だけ下げる。 */
.sec-business__item:nth-child(even) {
  margin-top: 152px;
}

/* 右列を下げた分、最後の行に隙間が空く。
   4枚目の直後に来るボタンが右に寄りすぎないよう、余白は .sec-business__more で調整する。 */

.sec-business__card {
  display: block;
  position: relative;
  transition: opacity var(--dur) var(--ease);
}


.sec-business__thumb {
  display: block;
  width: 100%;
  /* height:auto を必ず入れる。<img> の width/height 属性が
     プレゼンテーション・ヒントとして効き、aspect-ratio を無視するため。 */
  height: auto;
  aspect-ratio: 612 / 344.58;         /* 実測。620/260 だと縦に潰れてカンプと別物になる */
  object-fit: cover;
  object-position: center;
}

/* サムネイル中央のサービス・ロゴタイプ。
   実測（Figma）: サムネイル 612 幅に対して
     FUSION AI for Biz  439.04 × 38.62  → 71.7%
     FUSION AI          264.84 × 38.6   → 43.3%
     AIプロダクト等      Bold 36px / 行間23.3 / #000000
   いずれも X はサムネイル中央（例: 242 + 213/2 = 348.5 ≒ 42 + 612/2）。 */
.sec-business__wm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: auto;                       /* width/height属性のヒントを打ち消す */
  pointer-events: none;
}

.sec-business__wm--biz {
  width: 71.7%;
}

.sec-business__wm--fusion {
  width: 43.3%;
}

/* 3・4枚目はロゴタイプではなく素のテキスト。 */
.sec-business__wm--text {
  width: max-content;
  max-width: 88%;
  font-size: 36px;                    /* 実測 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.sec-business__ext {
  position: absolute;
  right: 16px;                        /* PROVISIONAL */
  bottom: 12px;
  font-size: 14px;
  color: var(--text);
}

/* 3・4枚目は「近日公開予定」なので、↗ ではなく「お問い合わせ」のピルが入る。 */
.sec-business__cta {
  position: absolute;
  right: 16px;                        /* PROVISIONAL */
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;                       /* PROVISIONAL */
  padding-inline: 20px;
  border: 1px solid var(--text);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

/* カンプ実測（2026-08-12・Figmaのタイポグラフィパネル）:
     Zen Kaku Gothic New / Bold / 14px / 行間 28.3 / 字間 0
   ⚠️ 以前は --fs-xs(12px)・ウェイト指定なし・行間指定なしだった（未実測のまま）。 */
.sec-business__label {
  margin-top: 20px;                   /* PROVISIONAL */
  font-size: 14px;
  font-weight: 700;
  line-height: 28.3px;
  letter-spacing: 0;
  color: var(--aixeed-green);
}

.sec-business__name {
  margin-top: 8px;                    /* PROVISIONAL */
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: var(--lh-card-title);
}

.sec-business__body {
  margin-top: 16px;                   /* PROVISIONAL */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* 注記の上に区切り線が入る（助成金・近日公開予定など） */
.sec-business__note {
  margin-top: 24px;                   /* PROVISIONAL */
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--aixeed-green);
}

.sec-business__more {
  display: flex;
  justify-content: center;
  margin-top: 96px;                   /* PROVISIONAL */
}

/* ===========================================================
   TB / SP — 段違いをやめて1列に落とす。
   段違いは「横に2枚並んでいる」ことが前提の演出なので、
   縦積みでは無意味になる（むしろ余白がちぐはぐに見える）。
   =========================================================== */

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

  .sec-business__item:nth-child(even) {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測（Frame 295: X=18 / Y=1644 / 子の間隔100）。

     カンプでは左右18px（サムネ幅339 = 375 − 18×2）。ヒーロー・ステートメントは20pxで、
     **カンプ側が2pxずれていた**。作業中のズレと判断し、2026-08-12 に 20px へ統一した
     （ご判断済み）。以下の実測値は 18px 時点のもの。
     サムネイル幅339 = 375 − 18×2 と、見出しの左端18 の2点で裏が取れているので
     カンプのままにしてある（QUESTIONS.md に記載）。 */
  .sec-business > .container {
    width: 100%;
    padding-inline: 20px;
  }

  /* ステートメント本文の下端1149 → ラベル上端1644 で 495px 空く。
     カンプがこの通りなので、間を全部ここで持つ。 */
  .sec-business {
    padding-block: 495px 0;
  }

  /* ラベル→見出しは実測4px（PCの24pxとは別物）。
     ラベル自体のサイズ・字間は --fs-label / --ls-label が実測値と一致済み。 */
  .sec-business .sec-label {
    margin-bottom: 4px;
    line-height: 18px;              /* 実測 H=18。base.css の line-height:1 だと11.5になる */
  }

  /* 見出しは実測 Bold 32px / 行間130% / 字間0。
     320px幅の端末で溢れないよう vw で追随させる（375pxでちょうど32px）。 */
  .sec-business__title {
    font-size: min(32px, 8.53vw);
    line-height: 1.3;
    letter-spacing: 0;
  }

  .sec-business__head {
    margin-bottom: 100px;             /* 実測 Frame 295 の間隔 */
  }

  /* カード間は実測80px（Frame 294 の間隔）。 */
  .sec-business__list {
    row-gap: 80px;
  }

  /* ✅ カード内の実測（Frame 289 → Frame 288 → Frame 261 → Frame 262）。
     積み上げ: 190.87(サムネ) + 24 + 25(ラベル) + 4 + 50(見出し)
             + 16 + 105(本文) + 16 + 31(注記) = 461.87 ＝ カード実測H

     ⚠️ レイヤー名は当てにならない。カードのラベルはレイヤー名が
     「法人向けAI研修プログラム。C…」だが、実際の文言は「法人向けAI研修」。
     必ず右パネルの「コンテンツ」を読むこと。 */

  /* 字形・級数・字間はPCと同じ（どちらも実測 Bold 14px / 字間0）。
     SPで違うのは行送りと上余白だけなので、そこだけ上書きする。 */
  .sec-business__label {
    margin-top: 24px;               /* 実測 サムネ→テキスト塊 */
    line-height: 25px;              /* 実測 H=25（PCは28.3） */
  }

  .sec-business__name {
    margin-top: 4px;                /* 実測 Frame 288 の間隔 */
    font-size: 18px;                /* 実測 */
    line-height: 1.4;               /* 実測 140%（18×1.4×2行 = 50.4 ＝ H50） */
    letter-spacing: 0;
  }

  .sec-business__body {
    margin-top: 16px;               /* 実測 Frame 261 の間隔 */
    font-size: var(--sp-fs-body);   /* 14px */
    line-height: 1.5;               /* 実測 150%（14×1.5×5行 = 105 ＝ H105） */
    letter-spacing: 0;
  }

  /* 注記ブロック（Frame 262 / H=31 / 間隔10）= 罫線1 + 10 + テキスト20。 */
  .sec-business__note {
    margin-top: 16px;               /* 実測 Frame 261 の間隔 */
    padding-top: 10px;              /* 実測 Frame 262 の間隔 */
    font-size: var(--sp-fs-body);   /* PROVISIONAL: 注記のフォントサイズは未実測 */
    line-height: 20px;              /* 実測 31 − 1(罫線) − 10 */
  }

  /* テキスト版のロゴタイプは 36px のままだと「AI開発・FDEサービス」が
     カード幅を超えるので、画面幅に追随させる。ベクター版は % 指定なので
     そのままで潰れない。 */
  .sec-business__wm--text {
    font-size: clamp(20px, 5.6vw, 36px);
  }

  .sec-business__cta {
    right: 12px;
    bottom: 10px;
    height: 28px;
    padding-inline: 14px;
  }

  .sec-business__more {
    margin-top: 56px;
  }
}