/* about（research/spec/about.md）
 *
 * 実測（本番 https://570design.jp/about ・2026-10-05・Chrome・innerWidth 1240。measured/about.md）:
 *   段（Group N/O/B/Q/R）: max-width 880・左右 margin 100・中央寄せ → 1240 幅で x 180〜1060
 *     MEMBER の段だけ margin-top 200（スマホ 150）、ほかは 50。ACCESS だけ margin-bottom 100
 *     幅 500 未満は左右 20
 *   MEMBER: 内側 padding 上下 20。写真 880x443（比 320:161）・下 20 → 見出し -MEMBER（箱 20・下 20）
 *     → 9行。行の高さ 18（13px/1.4）・行間 25（スマホ 10）・名前と役職の間 20・役職 10px/1.4 を縦中央
 *     井東の行だけ役職に margin-left -12（本番の並べ替えの名残）
 *   見出し（-COMPANY 等）: 13px/1.4・字間 3px・primary・箱の高さ 20・下 10（MEMBER は 20）
 *   表: 左の列 150 固定（スマホは min 100）・右は残り。13px/2.53（行 33）・色 #000
 *   ACCESS: 住所 13px/2.53 → 地図 margin-top 50・880x500
 *   ページの高さ 2737（フッター 200 込み）
 */
.ab-sec {
  display: flex; flex-direction: column;
  width: calc(100% - 200px); max-width: 880px; margin: 50px auto 0;
}
.ab-member { margin-top: 200px; }
.ab-access { margin-bottom: 100px; }
.ab-member-in { display: flex; flex-direction: column; padding: 20px 0; }

.ab-photo { width: 100%; height: auto; aspect-ratio: 320 / 161; margin: 0 0 20px; }

.ab-h {
  align-self: flex-start; margin: 0 0 10px; height: 20px; font-size: 13px; font-weight: 500; line-height: 1.4;
  letter-spacing: 3px; color: var(--c-primary);
}
.ab-member .ab-h { margin-bottom: 20px; }

.ab-rows { list-style: none; margin: 0; padding: 0; }
.ab-rows li { display: flex; align-items: center; gap: 20px; }   /* 行の高さは 13px/1.4 = 18.2 のまま（本番も端数で積む） */
.ab-rows li + li { margin-top: 25px; }
.ab-name { flex: 0 0 auto; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.ab-role { flex: 0 1 auto; font-size: 10px; line-height: 1.4; }
.ab-role-g { flex-grow: 1; }          /* 本番は上の2人の役職だけ余りを取る（見た目は同じ。寸法を揃える） */
.ab-role-12 { margin-left: -12px; }

.ab-tbl { display: flex; align-items: flex-start; }
.ab-k, .ab-v, .ab-addr { font-size: 13px; line-height: 2.53; white-space: pre-line; }
.ab-k { flex: 0 0 150px; }
.ab-v { flex: 1 1 0; min-width: 0; }

.ab-map { display: block; width: 100%; height: 500px; margin-top: 50px; border: 0; }

@media (min-width: 500px) {
  .ab-k > .hp-pc, .ab-v > .hp-pc, .ab-addr > .hp-pc { display: block; }   /* 文の箱を本番と同じ寸法で測れるように */
}
@media (max-width: 499.98px) {
  .ab-sec { width: calc(100% - 40px); }
  .ab-member { margin-top: 150px; }
  .ab-member-in { min-width: 350px; }   /* 本番 Group（MEMBER の中）: 幅 < 500 で min_width_css 350。390 未満では右にはみ出す（本番も 360 で横幅 370） */
  .ab-rows li, .ab-rows li + li { margin-top: 10px; }   /* 本番: 幅 500 未満は行ごとに margin-top 10（1行目にも付く） */
  .ab-name { margin-left: 10px; }
  .ab-k { flex: 0 0 100px; }
}