/* ABOUT 本体の審査指摘に対する上書き（about-fixes.md） */

/* 1. 【重】1024以上で見出し軸と中身軸の2列格子（右の間延びを解消） */
@media (min-width: 1024px) {
  body.sp .ab-body > .sp-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }
  body.sp .ab-body > .sp-section > .sp-h2 {
    grid-column: 1;
  }
  /* 中身は2〜3列目。-3 は見出し（24/32）と本文（16/30）のインク上端を揃える補正（1440 の試しで差 0〜1） */
  body.sp .ab-body > .sp-section > .sp-h2 + * {
    grid-column: 2 / 4;
    margin-top: -3px;
  }
  /* 活動領域の題（Barlow 24・箱 44）は -3 のままだと見出しより 5 上に出るため +5（詳細度を上の規則より高くする） */
  body.sp .ab-body > .ab-acts-section > .sp-h2 + .ab-acts {
    margin-top: 2px;
  }
}


/* 2. 【重】768以上で活動領域を「題128＋本文」の行にし段差をなくす */
@media (min-width: 768px) {
  body.sp .ab-acts {
    display: block;
  }
  /* 題の列 128 は、団体概要のラベルの列（128）と同じ。本文の軸と値の軸がそろう */
  body.sp .ab-act {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: baseline;
  }
  body.sp .ab-act:nth-child(n) {
    padding-top: 0;
  }
  /* 行の送り 56（帯の格子の段 56）。下線 → 次の題のインク 28、COMPETE の本文 → 次の題 34 */
  body.sp .ab-act + .ab-act {
    margin-top: 12px;
  }
  body.sp .ab-act-text {
    margin: 0;
  }
  /* 最後の下線 → 次の見出しのインク 96（試しでは今の -12 のままだと 102） */
  body.sp .ab-body > .ab-acts-section + .sp-section {
    margin-top: calc(var(--sp-gap-section) - 18px);
  }
}

/* 3. 【中】767以下で特徴リストの項目間インク 16 → 24 */
@media (max-width: 767px) {
  body.sp .ab-features li + li {
    margin-top: 10px;
  }
}

/* 4. 【中】約物「」の後の全角空きを詰める（HTML は .ab-kakko で包む） */
body.sp .ab-kakko {
  margin-right: -0.5em;
}

/* 5. 【中】mailto の押せる高さ 44・下線を下がりのインク下 8.5 */
/* 下線は基準線から測る（今の 6 で基準線の 6 下）。下がりは基準線の 4 下なので、4 + 8.5 = 12.5。インラインの縦の padding は行の高さを変えずに押せる範囲だけを 20 → 44 に広げる */
body.sp .ab-mail {
  text-underline-offset: 12.5px;
  padding-block: 4px 20px;
}
/* 下線が下がった分、次の行（活動拠点）を離して、下線 → 次のインクを 24 に */
body.sp .ab-profile > div:has(.ab-mail) + div {
  margin-top: 22px;
}

/* 7. 【軽】767以下で活動領域末 → 次見出しのインク 62 → 64 */
@media (max-width: 767px) {
  body.sp .ab-body > .ab-acts-section + .sp-section {
    margin-top: calc(var(--sp-gap-section) - 10px);
  }
}

/* 1 続き.【重】1441以上：列倍率 u（--site-max ÷ 1168）で 1440 の構図を相似に拡大（fix2 字・128列＋ fix3 入れ物・格子・矢印・冒頭）。ほかの 768 以上・無条件の固定値より後に置き、上書きされないようにする */
@media (min-width: 1441px) {
  body.sp .ab-lead,
  body.sp .ab-features,
  body.sp .ab-profile {
    max-width: calc(var(--site-max) * 640 / 1168);
  }
  body.sp .ab-eyebrow {
    margin-top: calc(var(--sp-edge) - var(--site-max) * 4 / 1168);
    font-size: calc(var(--site-max) * 14 / 1168);
    line-height: calc(var(--site-max) * 20 / 1168);
  }
  body.sp .ab-manifesto {
    margin-top: calc(var(--site-max) * 4 / 1168);
    font-size: calc(var(--site-max) * 40 / 1168);
    line-height: calc(var(--site-max) * 56 / 1168);
  }
  body.sp .ab-intro.sp-lead {
    max-width: calc(var(--site-max) * 640 / 1168);
    margin-top: calc(var(--site-max) * 8 / 1168);
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
  }
  body.sp .ab-body > .sp-section {
    column-gap: calc(var(--site-max) * 32 / 1168);
  }
  body.sp .ab-body > .sp-section > .sp-h2 {
    font-size: calc(var(--site-max) * 24 / 1168);
    line-height: calc(var(--site-max) * 32 / 1168);
  }
  body.sp .ab-body > .sp-section > .sp-h2 + * {
    margin-top: calc(var(--site-max) * -3 / 1168);
  }
  body.sp .ab-body > .ab-acts-section > .sp-h2 + .ab-acts {
    margin-top: calc(var(--site-max) * 2 / 1168);
  }
  body.sp .ab-act-title {
    font-size: calc(var(--site-max) * 24 / 1168);
    line-height: calc(var(--site-max) * 24 / 1168);
  }
  body.sp .ab-act-title > span {
    min-height: calc(var(--site-max) * 44 / 1168);
  }
  body.sp .ab-act-link {
    gap: calc(var(--site-max) * 12 / 1168);
    min-height: calc(var(--site-max) * 44 / 1168);
  }
  body.sp .ab-act-link .sp-arrow {
    width: calc(var(--site-max) * 18 / 1168);
    height: calc(var(--site-max) * 10 / 1168);
    margin-top: calc(0.55em - var(--site-max) * 5 / 1168);
  }
  body.sp .ab-act-link::after {
    top: calc(0.88em + var(--site-max) * 8.5 / 1168);
  }
  body.sp .ab-act-text {
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 28 / 1168);
  }
  body.sp .ab-features li {
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
  }
  body.sp .ab-features li + li {
    margin-top: calc(var(--site-max) * 2 / 1168);
  }
  body.sp .ab-profile > div + div {
    margin-top: calc(var(--site-max) * 10 / 1168);
  }
  body.sp .ab-profile dd {
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
  }
  body.sp .ab-profile dt {
    font-size: calc(var(--site-max) * 14 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
  }
  body.sp .ab-mail {
    font-size: calc(var(--site-max) * 17 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
    text-underline-offset: calc(var(--site-max) * 12.5 / 1168);
    padding-block: calc(var(--site-max) * 4 / 1168) calc(var(--site-max) * 20 / 1168);
  }
  body.sp .ab-profile > div:has(.ab-mail) + div {
    margin-top: calc(var(--site-max) * 22 / 1168);
  }
  body.sp .ab-act {
    grid-template-columns: calc(var(--site-max) * 128 / 1168) minmax(0, 1fr);
  }
  body.sp .ab-act + .ab-act {
    margin-top: calc(var(--site-max) * 12 / 1168);
  }
  body.sp .ab-profile > div {
    grid-template-columns: calc(var(--site-max) * 128 / 1168) minmax(0, 1fr);
  }
  body.sp .ab-body > .sp-section {
    margin-top: calc(var(--sp-gap-section) - 12px - (var(--site-max) - 1168px) * 16 / 1168);
  }
  body.sp .ab-body > .ab-acts-section + .sp-section {
    margin-top: calc(var(--sp-gap-section) - 18px - (var(--site-max) - 1168px) * 27 / 1168);
  }
  body.sp #main > .sp-body.ab-body {
    padding-bottom: calc(55px - (var(--site-max) - 1168px) * 9 / 1168);
  }
}