/* ============================================================
   v6（2026-10-10）セクションの面（代表指示：区切りは分かるが背景色がなく、見えづらい）
   各ページの最後に読む。既存の CSS は触らず、ここで上書きする。

   決めた形（案A：交互）
   ・セクションを「宇宙の地（透明のまま、星が見える）」と「少し明るい紺の面（.sf-panel）」の交互にする
   ・どれを面にするかは HTML 側で section に .sf-panel を付けて決める（ページごとに交互になるよう手で割り当て）
   ・面にしないもの：ヒーロー、ページの見出し（.page-hero）、動画が全画面に広がる #what（.reel-pin）、
     地球の場面（#graduate）、最後の呼びかけ（.cta-block）、フッター。今の見え方を崩さないため
   ・面は完全に塗りつぶさず、不透明度 .9 前後にして、後ろの星が少しだけ透けるようにする
   捨てた案B（役割ごとに色を変える）：色の種類が4〜5に増え、同じ役割のセクションが続くページ
   （無料相談ページの for / asks / takes など）では境目が出ない。交互なら、どのページでも隣どうしが必ず違う色になる
   ============================================================ */

.space{
  --sf-panel-top:rgba(16,26,51,.92);    /* #101A33 */
  --sf-panel-bot:rgba(11,18,38,.90);    /* #0B1226 */
  --sf-line:rgba(120,160,255,.25);
  --sf-line-2:rgba(120,160,255,.10);
  --sf-radius:24px;
}

/* space.css の「.space .sec は透明・角丸なし・影なし（!important）」を、面のセクションだけ上書きする */
body.space .sec.sf-panel{
  background:linear-gradient(180deg,var(--sf-panel-top) 0%,var(--sf-panel-bot) 100%)!important;
  border-radius:var(--sf-radius)!important;
  box-shadow:
    inset 0 1px 0 var(--sf-line),            /* 上端の細い光の線 */
    inset 0 -1px 0 var(--sf-line-2),         /* 下端は控えめに */
    0 40px 90px -50px rgba(0,0,0,.9)!important;
  margin-inline:clamp(8px,1.4vw,24px);
}

/* 面の上では、文字の後ろを暗くする影（星よけ）が黒いにじみに見えるので外す */
body.space .sf-panel .h2,
body.space .sf-panel .lead,
body.space .sf-panel .why-close,
body.space .sf-panel .sec-call,
body.space .sf-panel .eyebrow{text-shadow:none}

/* 面の上の補助の文字（--txt-3）は少しだけ明るくして、面の上でも 4.5:1 以上を保つ */
body.space .sf-panel{--txt-3:#A3AFD0}

/* 事例ページ：スマホで上に張りつく図の帯は、宇宙の黒で塗ってあるので、面の色に合わせる */
@media (max-width: 860px){
  body.space.sub .sf-panel .stage-wrap{background:linear-gradient(180deg,rgba(14,23,46,.97) 86%,rgba(14,23,46,0))}
  html.sv-inline body.space.sub .sf-panel .stage-wrap{background:linear-gradient(180deg,rgba(14,23,46,.97) 62%,rgba(14,23,46,0))}
  html.sv-inline body.space.sub .sf-panel .scene .sv{background:rgba(6,11,28,.6)}
}

@media (max-width: 600px){
  body.space .sec.sf-panel{--sf-radius:18px;margin-inline:6px}
}