/* ==========================================================================
   site-outro.css — CTA ＋ フッターの «締め» ひとまとまり
   --------------------------------------------------------------------------
   三嶋指示：CTA とフッターを上下セットとして扱い、グラデーションをつなげる。

   ★以前は CTA とフッターが **別々に自分の地を塗っていた**。
     境目（1440px で y = 714px）で色が飛んでいたのが «つながっていない» 原因。
     実測（横中央での地の色）：

       CTA の下端    rgb(5.8, 2.9, 61.9)
       フッターの上端 rgb(4.9, 2.5, 50.7)   ← 青が 11 ぶん急に暗くなる

     さらにフッターの上辺に rgba(255,255,255,0.16) の 1px 罫があり、
     «面が変わる» 手掛かりが二重に置かれていた。

   ★直し方は «片方の色を寄せる» ではなく、**塗る主体を 1 つにする**。
     この要素が 1 枚のグラデーションを持ち、CTA とフッターは地を持たない。
     二つの高さがページごとに変わっても、境目は構造的に発生しない。
   ========================================================================== */

.site-outro {
  position: relative;
  isolation: isolate;

  /*
    ★角度 145deg は元の CTA ／ フッターと同じ。変えると全部やり直しになる。

    ★色の止め位置は «1440px でこれまでと同じ見え方になる» ように決めた。
      基準の箱：**1425 × 1305.9px**（CTA 726.8 ＋ フッター 579.1）。
      幅が 1440 でなく 1425 なのは縦スクロールバーぶん。
      145deg のグラデーション線の長さ L は
          L = W·|sin145°| + H·|cos145°| = 1425(0.5736) + 1305.9(0.8192) = 1887.1px
      横中央の各高さが線上のどこに当たるか（実測）：

        CTA の上端     y=0      → t = 21.7%   rgb(16.8, 12.1, 94.6)
        CTA／フッター境 y=726.8  → t = 53.2%   rgb(5.7, 2.9, 60.7)
        ページ下端     y=1305.9 → t = 78.3%   rgb(4, 2, 39)

      上端は旧 CTA 上端 rgb(16.8, 12.1, 94.7) と一致、
      下端は旧フッター下端と完全一致（navy-950）。境目では色が飛ばない。

      ★★**この箱の高さが変わると、フッター見出しのコントラストが動く。**
        高さが増えるほど、フッターの文字はグラデーションの明るい側へ寄る。
        ただし «どこが伸びたか» で向きが変わる。実測の推移：

          1227.5px  SUPPORT 4.47  MENU 4.72
          1260.3px（フッター下 padding ↑）   4.39   4.63
          1293.1px（最下行の上 padding ↑）   4.30   4.58
          1305.9px（CTA 見出しの行間 ↑）     4.32   4.59  ← CTA 側が伸びると戻る

        SUPPORT は 4.5 に未達のまま。**余白や行間を足したら必ず測り直すこと。**
        止め位置（navy-950 74%）を早めても効かない。効いているのは
        下の 2 枚目の光（83% 61.5%）で、これが SUPPORT の真後ろにある。

      ★navy-950 を 74% で止めているのは、ページ下端（t=77.5%）までに
        暗さを出し切るため。止め位置を後ろへ動かすとフッターの下が明るくなり、
        そこに乗る文字（navy-300 / navy-400）のコントラストが落ちる。
  */
  background:
    /* 旧 CTA の光。中心 y を 12%(CTA 内) → 7%(全体) に読み替え。
       半径は «中心から最も遠い角まで» の 34% → 28%（454.8px 相当を維持） */
    radial-gradient(circle at 82% 7%, rgba(141, 137, 200, 0.24), transparent 28%),
    /* 旧フッター上の光。y 8%(フッター内) → 61.5%(全体)、34% → 29%（411.4px 相当） */
    radial-gradient(circle at 83% 61.5%, rgba(86, 80, 185, 0.3), transparent 29%),
    /* 旧フッター下の光。y 105%(フッター内) → 102%(全体)、34% → 26%（468.4px 相当） */
    radial-gradient(circle at 12% 102%, rgba(49, 43, 151, 0.22), transparent 26%),
    linear-gradient(145deg, var(--navy-700), var(--navy-900) 50%, var(--navy-950) 74%);
}

/*
  細い方眼の地紋。もとはフッターだけに敷いていた。
  ★★フッターに残したままだと、**境目で地紋が «いきなり始まる»**。
    マスクがいちばん濃いのがフッターの上端だったので、
    グラデーションをつないでも、そこに横一直線の手掛かりが残ってしまう。
    地紋も上下セットで持たせて、始まりを CTA の頭へ移した。
  ★濃度 0.035 は据え置き。72% で消えるのも同じ比率のまま
    （フッター内の 72% → セット全体の 72%）。
*/
.site-outro::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: clamp(4rem, 8vw, 7.5rem) clamp(4rem, 8vw, 7.5rem);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 72%);
}