/* ===========================================================
   04-about — ABOUT US（代表2名）

   見出しブロックの右端に「会社概要 →」の下線リンクが並ぶ。
   下に代表2名を2カラムで置く。
   PROVISIONAL: 寸法は未実測（カンプ観察ベース）。
   =========================================================== */

.sec-about__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 64px;                /* PROVISIONAL */
}

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

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

.sec-about__more {
  flex: none;
  width: 280px;                       /* PROVISIONAL */
  font-size: var(--fs-lead);
}

/* --- 代表2名 ------------------------------------------------ */

.sec-about__members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;                          /* 03-business と同じ列間隔 */
}

/* DERIVED: カンプの写真枠は約 612 × 362（1.69:1）。
   実アセットは 2520×1045（2.41:1）と横長なので cover で中央を切る。
   人物が中央にいるカットなので、中央基準で破綻しない。 */
.sec-about__photo {
  width: 100%;
  /* height:auto を必ず入れる。<img> の width/height 属性は
     プレゼンテーション・ヒントとして height:1045px を効かせるので、
     これが無いと aspect-ratio が無視されて画像が縦1045pxのまま伸びる。 */
  height: auto;
  aspect-ratio: 620 / 366;
  object-fit: cover;
  object-position: center;
}

.sec-about__role {
  margin-top: 20px;                   /* PROVISIONAL */
  font-size: var(--fs-xs);
  color: var(--aixeed-green);
}

.sec-about__name {
  margin-top: 6px;                    /* PROVISIONAL */
  font-size: 20px;                    /* PROVISIONAL */
  font-weight: 700;
  line-height: 1.5;
}

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

/* ===========================================================
   TB / SP — 見出しと「会社概要→」を縦積みに、代表も1列へ。
   =========================================================== */

@media (max-width: 1099px) {
  .sec-about__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .sec-about__more {
    width: 100%;
  }

  .sec-about__members {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
}

@media (max-width: 767px) {
  /* ✅ SPカンプ実測（Frame 392: X=18 / Y=4421 / W=351 / H=1482 / 子の間隔80）
       Frame 296（見出し塊）      H=398 / 内部間隔40
       Frame 390（人物ブロック）  Y=478 / H=461.97 / 内部間隔24
         写真 200 + 24 + テキスト塊238
       Frame 288（テキスト塊）    H=238 / 間隔4  → 役職25 + 4 + Frame 261
       Frame 261                  H=209 / 間隔16 → 名前25 + 16 + 本文168(8行)

     カンプでは事業紹介と同じ左右18pxだったが、ヒーロー・ステートメントの20pxに
     揃えることで確定（2026-08-12）。 */
  .sec-about > .container {
    width: 100%;
    padding-inline: 20px;
  }

  .sec-about .sec-label {
    margin-bottom: 4px;
    line-height: 18px;
  }

  /* 事業紹介の見出しと同じ扱い（Bold 32px / 行間130% / 字間0）。 */
  .sec-about__title {
    font-size: min(32px, 8.53vw);
    line-height: 1.3;
    letter-spacing: 0;
  }

  .sec-about__lead {
    margin-top: 40px;               /* 実測 Frame 296 の間隔 */
    font-size: var(--sp-fs-body);
    line-height: 1.5;
  }

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

  .sec-about__head {
    margin-bottom: 80px;            /* 実測 Frame 392 の間隔 */
  }

  /* 人物ブロック同士の間隔。.sec-about__members は grid で gap:56px を
     持っているので、margin ではなく gap 側を実測値にする
     （margin にすると 56 + 80 = 136 になる）。 */
  .sec-about__members {
    row-gap: 80px;                  /* 実測 Frame 392 の間隔 */
  }

  /* 写真は 339×200（Frame 390 のテキスト塊が Y=223.97、間隔24 → 199.97）。 */
  .sec-about__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 339 / 200;
    object-fit: cover;
  }

  .sec-about__role {
    margin-top: 24px;               /* 実測 写真→テキスト塊 */
    font-size: 14px;                /* 事業カードのラベルと同じ */
    font-weight: 700;
    line-height: 25px;              /* 実測 H=25 */
    letter-spacing: 0;
  }

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

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