/* ===========================================================
   20-cta-sphere — 下層ページ共通の CTA（球体つき）の「差分だけ」

   土台は css/08-cta.css。pages.json の "styles": ["08-cta"] で
   先に読み込ませているので、ここには**球体まわりの追加分しか書かない**。
   （以前はこのファイルが 08-cta.css を丸ごと複製していて、
     値を直すとき2箇所を揃える必要があった。それを解消したもの）

   ⚠️ カンプでは球体は**下層ページの CTA にしか無い**（トップの `Group 397` は
   見出し・本文・丸ボタンの3要素だけ）。**ユーザー判断でトップにも適用している。**
   （design/SUBPAGES.md「2. サービス一覧ページ > CTA」）

   実測（Figma / サービス一覧の top_pc / 2026-08-06）:
     球体 375.25 × 375.25
     フレーム座標で 左端 x≈491 / 上端 y≈1455
     CTAセクション上端 y≈1153、`.sec-cta__inner` 上端 = +203（padding-top）= 1356
     → left = 491 − 42(ガター) = 449
     → top  = 1455 − 1356      = 99

   ⚠️ **カンプでは球体は見出しに重なっていない。**
      見出しの下端が 1418、球体の上端が 1455。重なるのは本文の左側だけ。
      最初は目視で `left:300 / top:-60 / width:300` と置いていたが、
      それだと見出し「話を聞かせ」が球体のグラデーションに乗って読めなくなる。
      目視合わせは当てにせず、この実測値を維持すること。

   球体の下端（1455+375=1830）はCTAの下端（1606）を超える。カンプでは
   セクション境界でスパッと切れているが、これは直後のフッターが覆うので
   `overflow: hidden` は使わない（理由は下の注記）。
   =========================================================== */

/* `clip` であって `hidden` ではない。ここは間違えやすい。
     hidden … このセクションがスクロールコンテナ扱いになり、中の
               `position: sticky`（球体）が**貼り付かなくなる**
     clip  … スクロールコンテナを作らないので sticky はそのまま効く

   役割は2つ:
   1. カンプ通り、球体をセクション下端でスパッと切る（下端1830 > CTA下端1606）
   2. 下に伸ばした帯（.sec-cta__pin）がドキュメント高さを押し広げるのを防ぐ
      （clip を外すとフッターの下に 571px の空白ができる。実測で確認済み） */
.sec-cta--sphere {
  overflow: clip;
}

.sec-cta--sphere .sec-cta__inner {
  position: relative;                 /* 球体の配置起点 */
}

/* --- 配置は帯（.sec-cta__pin）が持つ --------------------------

   球体は 05-brand と同じく画面に貼り付く（sticky）。
   ただし **CTA はページ最後のセクション**なので事情が違う。

   05-brand は前後にスクロールの余地があるが、CTA の後ろはフッターだけ。
   帯を素直に「カンプ位置から下へ」置くと、貼り付き始める前にページ末尾に
   着いてしまい **何も起きない**（実測: 余地155pxで貼り付き0）。

   そこで逆に **帯を上へ伸ばす**。球体は CTA が画面に入るずっと前から
   貼り付いた状態にしておき、`overflow: clip` したセクションの箱が
   下から上がってくることで「窓」の役をして球体を現す。
   スクロールを続けると同じ箱の上端が球体を食べていく。
   ＝ 05-brand の「固定されていて、幕が覆って消える」と同じ見え方。

   貼り付く画面位置は「ページ末尾で球体がカンプ位置に来る値」にする:
     CTA(453) + フッター(345) = 806 が末尾の高さ
     球体のカンプ上端 = セクション上端 + 203(padding) + 99 = +302
     → 球体上端からドキュメント下端まで 806 - 302 = 504
     → top: calc(100vh - 504px) なら末尾で必ずカンプ位置に落ちる
   ⚠️ 504 は CTA とフッターの高さから出た値。どちらかを変えたら計算し直すこと。
      全ページで CTA とフッターは共通なので、この1つの値で足りる。 */
.sec-cta--sphere .sec-cta__pin {
  position: absolute;
  z-index: 0;                         /* 文字より後ろに敷いてコントラストを守る */
  left: 449px;                        /* 実測 */
  top: -600px;                        /* カンプ位置(99)より600px上から貼り付かせる */
  width: 375px;                       /* 実測 */
  height: 1275px;                     /* 下端は 99+375 より十分下（早く外れないように）*/
  pointer-events: none;
}

.sec-cta--sphere .sec-cta__sphere {
  position: sticky;
  top: calc(100vh - 504px);
  width: 100%;
  height: auto;                       /* width/height 属性のヒントを打ち消す（必須） */
}

/* 球体より手前に文字とボタンを出す。 */
.sec-cta--sphere .sec-cta__copy,
.sec-cta--sphere .sec-cta__button {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sec-cta--sphere .sec-cta__pin {
    height: auto;
  }

  .sec-cta--sphere .sec-cta__sphere {
    position: static;
  }
}

@media (max-width: 1099px) {
  /* 縦積みになって左インデントも消えるので、実測座標はそのまま使えない。
     PC版の関係（見出しの下・本文の左寄り・見出しには掛けない）を保つ置き方にする。 */
  .sec-cta--sphere .sec-cta__pin {
    left: 32%;                        /* PROVISIONAL */
    top: -600px;                      /* PC と同じ考え方。素の位置は 88px */
    width: 300px;
    height: 1200px;
  }

  /* 末尾の高さが PC と変わるので実測し直しが必要。PROVISIONAL。 */
  .sec-cta--sphere .sec-cta__sphere {
    top: calc(100vh - 500px);
  }
}

@media (max-width: 767px) {
  /* ⚠️ ここには以前「球体を右上の外に逃がす」配置と `position: static`
     （＝貼り付けない）が入っていた。その後カンプに合わせて球体を
     **水平中央**に置き直したのに、static だけ外し忘れていた。
     結果、**SPだけ球体が一切動かない**状態になっていた（2026-08-12 修正）。
     配置は下のブロックが持つ。ここでは何も上書きしない。 */
}

@media (max-width: 767px) {
  /* SPカンプでは球体が**水平中央**にあり、黒いボタンがその上に重なる。
     ≤1099px の left:32% はタブレット向けの暫定値で、375pxだと左に寄りすぎる。

     PROVISIONAL: 幅269px・ボタン上端から44px上、はカンプ画像からの目測。
     Figmaでの実測はまだ取れていない。 */
  .sec-cta--sphere .sec-cta__pin {
    left: 50%;
    transform: translateX(-50%);

    /* ✅ SPカンプ実測（2026-08-12）:
         球体   X=54.73  Y=9451.75  262.39×262.39
         本文塊 X=18     Y=9205     339×203  → 下端 9408
         → 球体の上端は**本文の下端から 43.75px 下**
         → 中心 54.73+131.2 = 185.9（画面中心187.5）＝ 中央

       実装側の本文下端はセクション上端から 205.29 なので、
       球体の静止位置（上端）は 205.29 + 43.75 = 249.04。

       sticky の静止位置は「pin の下端 − 球径」で決まるので
         pin下端 = 249.04 + 262.39 = 511.43
         pin高さ = 511.43 − (−430) = 941.43

       ⚠️ pin の基準（オフセット親）はセクションではなく内側の .container で、
          その padding ぶん 63.33px 下にずれる。実測して差し引き 941 → 878。

       上から降りてくる距離は PC の考え方（カンプ位置の 600px 上 ＝ 球径の1.6倍）に
       合わせて 262.39 × 1.6 ≒ 430px 上から。

       ⚠️ 以前は球径269px・静止位置がセクション上端付近で、
          **見出しの後ろに球体が来ていた**（カンプでは本文より下）。 */
    width: 262.39px;
    top: -430px;
    height: 878px;
  }

  .sec-cta--sphere .sec-cta__sphere {
    position: sticky;
    top: max(16px, calc(50vh - 135px));   /* 球径269の半分 */
  }
}