/* sp-about-v1 — ABOUT（団体概要）の中身。下層ページ班、2026-09-28。
   文言は本番 src/app/(main)/about/AboutContent.tsx のまま（一字も変えない）。団体概要の値は site.ts の定数（代表者は活動名）。
   読み物なので、本文の読みやすさを優先する（主指揮 2026-09-28）：列は 640、本文 16/30、見出しは本番の和文見出しのまま。
   本番の章ラベル（CHAPTER 0X · …）・明朝・罫・番号の飾りは持ち込まない（構成案 §8.2、§2.12）。
   器は置かない（和の塊は冒頭の麻の葉だけ）。団体概要は区切り線のない 2 列（ラベルは控えめ、値は紙色）。 */

body.sp .ab-lead { max-width: var(--sp-col); }
/* 本番の見出し「e-sports × デジタルクリエイティブ」→ 控えめな前置き。インクの上端が帯の端から 96 */
body.sp .ab-eyebrow {
  margin: calc(var(--sp-edge) - 4px) 0 0;
  color: var(--sp-quiet);
  font: 700 14px / 20px var(--sp-jp);
  letter-spacing: 0.04em;
}
body.sp .ab-body > .ab-lead:first-child { margin-top: 0; }
/* オーナーの言葉（宣言）が冒頭の主役。40/56・700・紙色。前置きのインク → 宣言のインク 16 */
body.sp .ab-manifesto {
  margin: 4px 0 0;
  color: var(--sp-paper);
  font: 700 40px / 56px var(--sp-jp);
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 2 つの文はどちらも「で始まる。括弧の前の空き（0.5em）を左へ出して、インクの左端をガターに揃える（光学補正。文字は変えない） */
body.sp .ab-manifesto > span { display: block; margin-left: -0.625em; } /* 括弧のインクは箱の左から 0.625em（1440・390 で実測） */
/* 宣言のインク → 紹介文のインク 24 */
body.sp .ab-intro.sp-lead { margin-top: 8px; }

body.sp .ab-body > .sp-section { margin-top: calc(var(--sp-gap-section) - 12px); }
body.sp .ab-body .sp-h2 + * { margin-top: calc(var(--sp-gap-head) - 12px); }

/* 主な活動領域：3 列（1 列 320 まで、間 32 = 合わせて 1024）。右へ 24 ずつ上がる互い違い（ホームの潮と同じ右上がり）。
   主指揮 2026-09-28「互い違いの段の間が広すぎて、要素がばらばらに見える。詰めて」→ 段差 48 → 24、列の幅を文の長さに合わせて 368 → 320 */
body.sp .ab-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); column-gap: 32px; margin: 0; padding: 0; list-style: none; }
body.sp .ab-act { margin: 0; }
body.sp .ab-act:nth-child(1) { padding-top: 48px; }
body.sp .ab-act:nth-child(2) { padding-top: 24px; }
body.sp .ab-act-title { margin: 0; color: var(--sp-paper); font: 600 24px / 24px var(--sp-latin); letter-spacing: 0.04em; }
/* 題は、行き先のあるもの（STREAM・CREATE）もないもの（COMPETE）も同じ箱：高さ 44 の上端に文字 */
body.sp .ab-act-title > span { display: inline-flex; align-items: flex-start; min-height: 44px; }
body.sp .ab-acts-section .ab-acts { margin-top: 24px; }
/* STREAM → メンバー、CREATE → 制作実績。見出しそのものが行き先への操作（新しい文言は足さない）。下線はインクの下 8.5 */
body.sp .ab-act-link { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; min-height: 44px; color: inherit; text-decoration: none; }
body.sp .ab-act-link > span { display: block; }
body.sp .ab-act-link .sp-arrow { margin-top: calc(0.55em - 5px); } /* 矢印の中心を大文字の中心に */
body.sp .ab-act-link::after { content: ""; position: absolute; left: 0; right: 0; top: calc(0.88em + 8.5px); height: 1px; background: currentColor; } /* 大文字のインクの下 8.5（インクの下端は 0.88em、実測） */
body.sp .ab-act-link .sp-arrow { flex: none; color: var(--sp-quiet); }
body.sp .ab-act-link:is(:hover, :focus-visible) .sp-arrow { color: var(--sp-paper); }
/* 題のインク → 本文のインク 24（行き先のある題は下線の下 16）。題の箱（44）の下の余白に本文が入る */
body.sp .ab-act-text { margin: -6.5px 0 0; color: var(--sp-paper); font: 400 16px / 28px var(--sp-jp); letter-spacing: 0.02em; }

/* VAPOR-8の特徴：3 行。飾りの印は付けず、行どうしは 16（インク） */
body.sp .ab-features { max-width: var(--sp-col); margin: 0; padding: 0; list-style: none; }
body.sp .ab-features li { margin: 0; color: var(--sp-paper); font: 400 16px / 30px var(--sp-jp); letter-spacing: 0.02em; }
body.sp .ab-features li + li { margin-top: 2px; }

/* 団体概要：区切り線のない 2 列。ラベル列 128（スマホ 88）、行どうしはインクで 24 */
body.sp .ab-profile { max-width: var(--sp-col); margin: 0; }
/* 最後の中身 → フッターの文字 96（スマホ 64）。フッターは文字の上に約 43 */
body.sp #main > .sp-body.ab-body { padding-bottom: 55px; }
body.sp .ab-profile > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 0; }
body.sp .ab-profile > div + div { margin-top: 10px; }
body.sp .ab-profile dt { color: var(--sp-quiet); font: 700 14px / 30px var(--sp-jp); letter-spacing: 0.04em; }
body.sp .ab-profile dd { margin: 0; color: var(--sp-paper); font: 400 16px / 30px var(--sp-jp); letter-spacing: 0.02em; overflow-wrap: anywhere; }
body.sp .ab-mail { color: var(--sp-paper); font: 600 17px / 30px var(--sp-latin); letter-spacing: 0.04em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
body.sp .ab-mail:is(:hover, :focus-visible) { text-decoration-color: var(--sp-paper); }

@media (max-width: 1023px) {
  body.sp .ab-acts { column-gap: 24px; }
}
@media (max-width: 767px) {
  body.sp .ab-manifesto { font-size: 24px; line-height: 36px; margin-top: 8px; }
  body.sp .ab-intro.sp-lead { margin-top: 10.5px; }
  body.sp .ab-acts-section .ab-acts { margin-top: 15.5px; }
  body.sp #main > .sp-body.ab-body { padding-bottom: 21.5px; }
  body.sp .ab-acts { grid-template-columns: 1fr; row-gap: 24px; }
  body.sp .ab-act:nth-child(n) { padding-top: 0; }
  body.sp .ab-act-title { font-size: 22px; line-height: 22px; }
  body.sp .ab-act-text { margin-top: -6.5px; font-size: 15px; line-height: 26px; }
  body.sp .ab-features li { font-size: 15px; line-height: 28px; }
  body.sp .ab-profile > div { grid-template-columns: 88px minmax(0, 1fr); }
  body.sp .ab-profile dd { font-size: 15px; line-height: 28px; }
  body.sp .ab-profile dt { line-height: 28px; }
}

/* 題字「ABOUT」の A は左の余白がほとんどない（0.01em）。インクの左端をガターに揃える（1440・390 で実測） */
body.sp--about .sp-title > span { margin-left: -0.01em; }