/* sp-contact-v1 — CONTACT ページの中身。下層ページ班、2026-09-28。共通の枠は sp-frame-v1.css。
   オーナー「CONTACT、これそれぞれリンク配置してるけど行きつくとこ同じやん。無駄なUI過ぎる」
   → メールを作る操作は 1 つだけ（メールアドレスそのもの）。4 つの区分はリンクではなく「件名の選択」（ラジオ）にし、
     選んだ区分の件名がメールアドレスのリンクに付く。行き先が同じ操作を並べない。
   オーナー「コンタクトは案件とかスポンサーの流入でもある、ラベリングきをつけて」
   → 最初の区分を「案件・スポンサー・コラボ・制作」（契約 §4 の表記）にし、区分の和文を操作の型で主に読ませる。
   器はサイバー（契約 §4「サイバーなら信号線で作る」）：縦の信号線に等間隔の節点。線は宛先（メールアドレス）へ曲がって届く
   ＝「件名を選ぶ → その件名で宛先に届く」という経路そのもの。選んだ節点から宛先までの区間が点灯する（#b89cff、主指揮が採用）。
   区切り線・箱は使わない。
   並び
   - 1024 以上：2 列（12 列の 7：5、列の間 32）。左 = 導入文と区分（導入文の「下の区分を選ぶと」のとおり、区分は導入の下）、右 = 宛先（アドレス・コピー・X）。
     信号線は、導入文と区分の間の通り道（導入文のインク → 線 24、線 → SELECT SUBJECT のインク 24）を右へ走り、宛先の手前 16 で止まる。
     宛先のアドレスの小文字の中心がその線の高さに乗るように、右の列を置く。
     主指揮 2026-09-28「1440 以上で右半分が大きく空いている。導入文と区分を左、メールアドレスと連絡先を右に置く 2 列に」。
   - 1023 以下：1 列。区分の下に宛先（5 つめの節の高さ）。信号線は最後の節点から下へ伸び、宛先の行で右へ曲がる。
   左端：節点の左端はガター。経路の文字は節点の右 32（スマホ 24）。 */

body.sp--contact {
  --ct-text: 48px;    /* ガター → 経路の文字。節点 16 + 32 */
  --ct-pitch: 72px;   /* 節点の間隔（区分の行の高さ）。構成案 §9.4 */
  --ct-lit: #b89cff;  /* 選んだ経路の線と節点。信号線 rgb(184 156 255 / .32) と同じ色の不透明（ホームの入口演出の線と同じ値。主指揮が採用） */
  --ct-mail-fs: 28px; /* メールアドレスの大きさ */
}
@media (max-width: 767px) {
  body.sp--contact { --ct-text: 40px; --ct-pitch: 64px; --ct-mail-fs: 20px; }
}

body.sp #main > .sp-body.ct-body { position: relative; }
body.sp .ct-rail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.sp .ct-rail .ct-rail-base { fill: none; stroke: var(--sp-signal); stroke-width: 1; }
body.sp .ct-rail .ct-rail-lit { fill: none; stroke: var(--ct-lit); stroke-width: 1; }

/* 導入文のインク → SELECT SUBJECT のインク 48（スマホ 32） */
body.sp .ct-subjects { position: relative; z-index: 1; min-width: 0; margin: calc(var(--sp-gap-block) - 8px) 0 0; padding: 0; border: 0; }
/* 見出しのインク → 最初の区分名のインク 24（Barlow 13/13：インクは箱の上から 2.6、下から 1.3。実測で合わせて 20） */
body.sp .ct-subjects > legend.sp-label { float: left; width: 100%; padding-left: var(--ct-text); padding-bottom: 20px; box-sizing: border-box; }
body.sp .ct-subjects > legend + * { clear: left; }

/* 1 行 = 区分 1 つ。押せる範囲は行全体（72 × 列幅、スマホ 64） */
body.sp .ct-opt {
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: var(--sp-col);
  height: var(--ct-pitch);
  padding-left: var(--ct-text);
  cursor: pointer;
}
/* ラジオは見えない（節点と文字が状態を表す）。キーボードの矢印で選べる */
body.sp .ct-radio { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.sp .ct-code {
  display: block;
  color: var(--sp-quiet);
  font: 600 13px / 13px var(--sp-latin);
  letter-spacing: 0.2em;
}
/* 区分名のインク → 和文のインク 8（実測で 5） */
body.sp .ct-cap {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
  color: var(--sp-quiet);
  font: 700 13px / 13px var(--sp-jp);
  letter-spacing: 0.08em;
  word-break: auto-phrase;
}
/* 選んだ区分：紙色＋下線（構成案 §2.7「Active filter: paper text with the .u underline」）。下線はインクの下 8（実測） */
body.sp .ct-cap::after { content: ""; position: absolute; left: 0; right: 0.08em; top: calc(100% + 8px); height: 1px; background: currentColor; opacity: 0; }
body.sp .ct-opt:hover :is(.ct-code, .ct-cap) { color: var(--sp-paper); }
body.sp .ct-radio:checked ~ :is(.ct-code, .ct-cap) { color: var(--sp-paper); }
body.sp .ct-radio:checked ~ .ct-cap::after { opacity: 1; }
/* キーボードの焦点：和文を囲む 2px の紙色。上の区分名（8 上）にも下の下線（8 下）にも掛からない間隔 3 */
body.sp .ct-radio:focus-visible ~ .ct-cap { outline: 2px solid var(--sp-paper); outline-offset: 3px; }
/* 節点：16 の輪。消灯の輪（契約 §2）、地は黒の帯で線を隠す。中心は区分名（欧文）の大文字の中心（実測で −2） */
body.sp .ct-node {
  position: absolute;
  left: 0;
  top: -2px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--sp-ring);
  border-radius: 50%;
  background: var(--sp-black);
  transition: border-color 200ms linear;
}
body.sp .ct-node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ct-lit); transform: scale(0); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
body.sp .ct-radio:checked ~ .ct-node { border-color: var(--ct-lit); }
body.sp .ct-radio:checked ~ .ct-node::after { transform: scale(1); }

/* 宛先：欧文ラベル → メールアドレス（ただ 1 つのメール作成の操作）→ コピー → X。
   3 つの操作は、押せる範囲 44 の上端に文字を置き、下線を文字のインクの下 8.5 に引く（共通の枠の .sp-u の型）。縦に積む
   （横に並べると、大きさの違う 2 つの下線が別の高さに並ぶ） */
body.sp .ct-terminal { position: relative; z-index: 1; padding-left: var(--ct-text); }
body.sp .ct-terminal > .sp-label { padding-top: 0; }
body.sp .ct-mail-row { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
body.sp .ct-mail {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  /* ラベルのインク → アドレスのインク 16：ラベルの箱の下 1.3 + ここ + アドレスのインク（t・h・@ の上端）は箱の上から 0.2em */
  margin-top: calc(14.7px - 0.2em);
  padding: 0;
  color: var(--sp-paper);
  font: 600 var(--ct-mail-fs) / var(--ct-mail-fs) var(--sp-latin);
  letter-spacing: 0.04em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* 下線：行の箱の下 + 下がり（g・p・@ のインクは箱の下へ 0.1em 出る）+ 8.5 */
body.sp .ct-mail::after { content: ""; position: absolute; left: 0; right: 0; top: calc(1.1em + 8.5px); height: 1px; background: currentColor; }
/* 矢印は小文字の基線に下端をそろえる（基線は箱の上から 0.9em） */
body.sp .ct-mail .ui-icon { flex: none; width: 16px; height: 16px; margin-top: calc(0.9em - 16px); color: var(--sp-quiet); }
body.sp .ct-mail:is(:hover, :focus-visible) .ui-icon { color: var(--sp-paper); }
/* copy：.sp-u の型（下がりのある文字）。アドレスの下線 → copy のインク 16 */
body.sp .ct-copy { gap: 8px; margin-top: calc(1.1 * var(--ct-mail-fs) - 22.5px); }
body.sp .ct-copy-icon { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sp .ct-copy .ct-copy-done, body.sp .ct-copy.is-copied .ct-copy-idle { display: none; }
body.sp .ct-copy.is-copied .ct-copy-done { display: block; }
/* 別の窓口（X）：.sp-u の型。copy の下線 → 文字 48（スマホ 32。実測で 26／10） */
body.sp .ct-alt { margin-top: 26px; }

/* 最後の下線 → フッターの文字 96（スマホ 64）。フッターは文字の上に約 33、ALT LINE の箱は下線の下に 22.8 ある（実測で合わせた値） */
body.sp #main > .sp-body.ct-body { padding-bottom: 40.5px; }

/* ---- 1024 以上：2 列 ---- */
@media (min-width: 1024px) {
  body.sp #main > .sp-body.ct-body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* 12 列の 7：5。左は導入文の 2 つめの文（38 字 = 608）が 1 行に入る幅（1440 で 662） */
    column-gap: 32px;
    align-items: start;
    /* 最後の中身（4 つめの区分の和文）→ フッターの文字 96：区分の行の箱は和文のインクの下に 41 ある（実測で合わせた値） */
    padding-bottom: 20.5px;
  }
  body.sp .ct-lead { grid-column: 1; grid-row: 1; }
  body.sp .ct-subjects { grid-column: 1; grid-row: 2; }
  /* 右の列：アドレスの小文字の中心（ラベルのインクの上端から 38）が、導入文と区分の間の通り道（SELECT SUBJECT のインクの 24 上）に乗る位置 */
  body.sp .ct-terminal { grid-column: 2; grid-row: 2; padding-left: 0; margin-top: calc(var(--sp-gap-block) - 72px); } /* 実測で合わせた値 */
}
@media (max-width: 767px) {
  body.sp .ct-mail { gap: 8px; }
  body.sp .ct-mail .ui-icon { width: 13px; height: 13px; margin-top: calc(0.9em - 13px); }
  body.sp .ct-alt { margin-top: 10px; }
  body.sp #main > .sp-body.ct-body { padding-bottom: 7.5px; }
}