/* contact-fix-v1 — sp-contact-v1.css の後に読み込む。独立審査 contact-fixes.md の実測値。 */

/* 1.【重】区分の階層：和文（区分の中身）を主＝紙色・16px、欧文ラベル 13px の従。宛先 28 → 区分 16 → ラベル 13 の三段にする（16px は主指揮承認の契約例外） */
body.sp .ct-cap {
  color: var(--sp-paper);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.06em;
  margin-top: 4.5px;
} /* 区分名のインク → 和文のインク 8（実測） */
body.sp .ct-cap::after {
  top: calc(100% + 9px);
} /* 和文のインク → 下線 8.5（契約 §4） */
@media (max-width: 767px) {
  body.sp .ct-cap {
    font-size: 15px;
    line-height: 15px;
  }
}

/* 2.【重】1600・1920 の間延び：左列上限を 1440 の 7fr（662px）に固定、右列は宛先幅。1440 の構図を全幅で保つ */
@media (min-width: 1024px) {
  body.sp #main > .sp-body.ct-body {
    grid-template-columns: minmax(0, 662px) max-content;
    padding-bottom: 24px;
  } /* 左の列の上限は 1440 の 7fr と同じ 662。4つめの和文 → フッター文字 96（項目1の padding-bottom 24px と組み合わせ） */
}
/* 2（続き・fix2／fix3）1441 以上：列の倍率 u（--site-max ÷ 1168）で 1440 と同じ構図のまま相似拡大。1024〜1440 は上の固定値のまま */
@media (min-width: 1441px) {
  body.sp--contact {
    --sp-col: calc(var(--site-max) * 640 / 1168); /* fix3：導入文・区分行の max-width（1440 の --sp-col） */
    --ct-text: calc(var(--site-max) * 48 / 1168);
    --ct-pitch: calc(var(--site-max) * 72 / 1168);
    --ct-mail-fs: calc(var(--site-max) * 28 / 1168);
  }
  body.sp .ct-lead {
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 30 / 1168);
  }
  body.sp .ct-code,
  body.sp .ct-subjects > legend.sp-label,
  body.sp .ct-terminal > .sp-label {
    font-size: calc(var(--site-max) * 13 / 1168);
    line-height: calc(var(--site-max) * 13 / 1168);
  }
  body.sp .ct-cap {
    font-size: calc(var(--site-max) * 16 / 1168);
    line-height: calc(var(--site-max) * 16 / 1168);
    margin-top: calc(var(--site-max) * 4.5 / 1168);
  }
  body.sp .ct-cap::after {
    top: calc(100% + var(--site-max) * 9 / 1168);
  }
  body.sp .ct-node {
    width: calc(var(--site-max) * 16 / 1168);
    height: calc(var(--site-max) * 16 / 1168);
    top: calc(var(--site-max) * -2 / 1168);
  }
  body.sp .ct-node::after {
    inset: calc(var(--site-max) * 4 / 1168);
  }
  body.sp .ct-subjects {
    margin-top: calc(var(--site-max) * 40 / 1168);
  }
  body.sp .ct-subjects > legend.sp-label {
    padding-bottom: calc(var(--site-max) * 20 / 1168);
  }
  body.sp .ct-terminal {
    margin-top: calc(var(--site-max) * -24 / 1168);
  }
  body.sp .ct-mail {
    gap: calc(var(--site-max) * 12 / 1168);
    margin-top: calc(var(--site-max) * 14.7 / 1168 - 0.2em);
    min-height: calc(var(--site-max) * 44 / 1168);
  }
  body.sp .ct-mail::after {
    top: calc(1.1em + var(--site-max) * 8.5 / 1168);
  }
  body.sp .ct-mail .ui-icon {
    width: calc(var(--site-max) * 16 / 1168);
    height: calc(var(--site-max) * 16 / 1168);
    margin-top: calc(0.9em - var(--site-max) * 16 / 1168);
  }
  body.sp .ct-copy {
    gap: calc(var(--site-max) * 8 / 1168);
    margin-top: calc(1.1 * var(--ct-mail-fs) - var(--site-max) * 22.5 / 1168);
    min-height: calc(var(--site-max) * 44 / 1168);
  }
  body.sp .ct-copy-icon {
    width: calc(var(--site-max) * 13 / 1168);
    height: calc(var(--site-max) * 13 / 1168);
  }
  body.sp .ct-alt {
    gap: calc(var(--site-max) * 10 / 1168);
    margin-top: calc(var(--site-max) * 26 / 1168);
    min-height: calc(var(--site-max) * 44 / 1168);
  }
  body.sp #main > .sp-body.ct-body {
    grid-template-columns: minmax(0, calc(var(--site-max) * 662 / 1168)) max-content;
    column-gap: calc(var(--site-max) * 32 / 1168);
    padding-bottom: calc(24px - (var(--site-max) - 1168px) * 39 / 1168);
  }
  body.sp .ct-copy,
  body.sp .ct-alt {
    font-size: calc(var(--site-max) * 13 / 1168);
    line-height: calc(var(--site-max) * 13 / 1168);
  }
  body.sp .ct-copy.sp-u--desc::after,
  body.sp .ct-alt.sp-u--desc::after {
    top: calc(0.9em + var(--site-max) * 10.3 / 1168);
  }
  body.sp .ct-alt .ui-icon {
    width: calc(var(--site-max) * 12 / 1168);
    height: calc(var(--site-max) * 12 / 1168);
  }
  body.sp .sp-body > .sp-lead:first-child {
    margin-top: calc(var(--sp-edge) - var(--site-max) * 8 / 1168);
  }
}

/* 3.【中】導入文の強制改行：列が足りない幅では <br> を外し、390 の4字行・1024 の7字行を解消 */
@media (max-width: 767px), (min-width: 1024px) and (max-width: 1099px) {
  body.sp .ct-lead br {
    display: none;
  }
}
@media (max-width: 767px) {
  body.sp .ct-lead {
    text-wrap: balance;
  }
}

/* 4.【軽】キーボード焦点：和文の四角い outline をやめ、節点（.ct-node）に輪を付ける */
body.sp .ct-radio:focus-visible ~ .ct-cap {
  outline: none;
}
body.sp .ct-radio:focus-visible ~ .ct-node {
  outline: 2px solid var(--sp-paper);
  outline-offset: 3px;
} /* 16px 節点の周り。見える焦点（WCAG 2.4.7）を保つ */
@media (max-width: 767px) {
  body.sp .ct-radio:focus-visible ~ .ct-node {
    outline: none;
    border-color: var(--sp-paper);
    box-shadow: inset 0 0 0 1px var(--sp-paper);
  }
}

/* 5.【軽】選択時の下線：opacity の瞬間表示をやめ、契約 §5 の下線の引き直し 480ms に揃える */
body.sp .ct-cap::after {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.sp .ct-radio:checked ~ .ct-cap::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  body.sp .ct-cap::after {
    transition: none;
  }
}

/* 6.【軽】信号線の器 — CSS 変更なし（主指揮：信号線の器として採用）。項目2により 1600・1920 で線が 897px まで伸びる問題は解消 */