/* ============================================================
   v9（2026-10-11）無料相談ページ（consult-v2.html）だけの見た目。cta.css のあとに読む
   このページの演出は「月が満ちる」の1つだけ：
     ヒーローと「申し込んだあとの流れ」（#flow）を1つの舞台（.cs-stage）にまとめ、
     右の月が三日月から満月になる。満月になった直後に予約の面（#book）が来る。動きは page-consult.js
   共通の部品（.btn／.rows／.sf-panel など）のファイルは触らない。上書きは原則 .cs- の付いたものの中だけで行う（例外は下の v9.1 の一覧）
   JS が無いとき・動きを減らす設定のときは、<html> に .cs-js が付かないので、最初から満月・4段階すべて灯った完成形
   v9.1（2026-10-11）検査の指摘を直した：
     ・最初の三日月を太く（page-consult.js の START 0.08→0.18）、暗い側に月面をごく薄く見せる（地球照 .cs-earthshine）
     ・月面を、展開図を丸く切り抜いたものから、球に焼き直した円盤の画像に替えた（極の筋が消える）
     ・右端の小さな月（.phase-rail）はこのページでは出さない／フッターの下に呼びかけの地球がはみ出さないようにした
     ・スマホ・タブレットは月の帯を舞台のいちばん上に移し、帯を低く（128→100px）、下のぼかしを短く
     ・まだ灯っていない段階の不透明度 .42→.65（本文 4.5:1 以上）／予約の面の2列（PC・準備中のとき）と、飛んだときの位置
     ・初期に月を隠す処理を @media (scripting) からクラス（.cs-pre）に替えた
   共通の部品の見た目を、このページの中だけで少し上書きしているもの：.phase-rail・.site-footer・#cta の注記・#trust と #for の改行（それぞれ下に理由）
   ============================================================ */

.space.sub .cs-stage{
  --cs-d:clamp(300px,34vw,480px);                                        /* 月の直径（PC） */
  --cs-gap:clamp(32px,4vw,64px);                                         /* 文字の列と月の間 */
  --cs-top:max(calc(var(--header-h) + 12px),calc(50vh - var(--cs-d) / 2)); /* 月が止まる位置：画面の中央（ヘッダーの下より上には行かない） */
  position:relative;
}

/* ---------------- 月（SVG：暗い側の円＋明るい側の月面写真。明るい側の形は clipPath の d を JS が書き換える） ---------------- */
.space.sub .cs-moon{margin:0;pointer-events:none}
.space.sub .cs-pin{position:relative;width:var(--cs-d);aspect-ratio:1}
.space.sub .cs-svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.space.sub .cs-dark{fill:rgb(10,16,34);stroke:rgba(201,210,234,.14);stroke-width:1;vector-effect:non-scaling-stroke}
/* 地球照：暗い側に同じ月面を薄く重ねる。動かさない（毎フレーム変えるのは明るい側の形だけ） */
.space.sub .cs-earthshine{opacity:.16}
/* 縁の光：月の後ろの円の影。満ちるほど濃くする（不透明度だけを変える。毎フレーム filter はかけない） */
.space.sub .cs-glow{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 calc(var(--cs-d) * .12) calc(var(--cs-d) * .01) rgba(170,196,255,.24),0 0 calc(var(--cs-d) * .36) calc(var(--cs-d) * .04) rgba(96,140,255,.10);
  opacity:calc(.1 + .9 * var(--p,1))}

/* JS が動くときだけ：読み込みで三日月が、見出しの文字と同じころに出る。
   読み込みが遅い回線で、JS より先に満月が一瞬見えないよう、最初は隠しておく。
   v9.1：見分けは <head> の1行のスクリプトが付ける .cs-pre（@media (scripting) に対応していない古いブラウザでも効く）。JS が無ければ付かないので満月が見える */
@media (prefers-reduced-motion:no-preference){
  .cs-pre .space.sub .cs-pin{opacity:0}
  /* 安全網：page-consult.js が5秒たっても動かないとき（.cs-js が付かないまま）は、満月のまま出す。
     そのあとで page-consult.js が届いても、月がもう見えていれば演出は始めない（満月・全部灯ったまま。page-consult.js） */
  .cs-pre:not(.cs-js) .space.sub .cs-pin{animation:cs-late 600ms ease 5s both}
  .cs-js .space.sub .cs-pin{animation:cs-in 1100ms cubic-bezier(.2,.7,.2,1) 150ms both}
}
@keyframes cs-in{from{opacity:0}to{opacity:1}}
@keyframes cs-late{from{opacity:0}to{opacity:1}}

/* 見出し：JS が無いとき（文字が分割されないとき）も <wbr> の所でだけ改行する */
.space.sub .cs-stage .page-title{word-break:keep-all;overflow-wrap:anywhere}

/* ---------------- PC：2列の舞台。月は右の列、ヒーローと #flow の両方の行にまたがり、画面の中央に張りつく ---------------- */
@media (min-width:861px){
  .space.sub .cs-stage{display:grid;grid-template-columns:minmax(0,1fr) var(--cs-d);column-gap:var(--cs-gap);
    width:min(var(--wrap),100% - var(--gutter) * 2);margin-inline:auto}
  .space.sub .cs-stage>.page-hero{grid-column:1;grid-row:1}
  .space.sub .cs-stage>#flow{grid-column:1;grid-row:2}
  .space.sub .cs-stage>.page-hero>.wrap,.space.sub .cs-stage>#flow>.wrap{width:100%}
  /* 下の余白＝月が張りつきから外れる位置。舞台の下端が画面の下端より 40px 下にある間に外れるので、
     #book の面が見え始めるのは満月になった後。#book の見出しが画面の中央に来るころには、月は画面の上に出ている */
  .space.sub .cs-moon{grid-column:2;grid-row:1 / 3;position:relative;z-index:1;
    padding-bottom:calc(100vh - var(--cs-top) - var(--cs-d) + 40px)}
  .space.sub .cs-pin{position:sticky;top:var(--cs-top)}
  /* 見出し：月の列の横でも3行のまま読めるよう、段を1つ下げる（ほかのページの .page-hero--short と同じ t2） */
  .space.sub .cs-stage .page-title{font-size:var(--t2);line-height:var(--lh2);letter-spacing:-.01em}
}

/* ---------------- スマホ・タブレット：1列。月はヘッダーの下に帯で張りつく（事例ページの .stage-wrap と同じやり方） ----------------
   v9.1：帯を舞台のいちばん上に置き直した（order:-1）。最初の画面から三日月が見え、ヒーローの下端に月の切れ端が覗くことも、
   タブレット縦でヒーローの上に大きな空白が空くこともなくなる。帯は 128→100px（月 96→80px）に低くし、
   下のぼかしは 12px だけにした（ぼかしの中を通る本文の行が、半分隠れたまま透けて見えないように） */
@media (max-width:860px){
  .space.sub .cs-stage{display:flex;flex-direction:column}
  .space.sub .cs-moon{order:-1;margin-top:var(--header-h);position:sticky;top:var(--header-h);z-index:5;height:100px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgb(3,6,14) calc(100% - 12px),rgba(3,6,14,0))}
  .space.sub .cs-pin{--cs-d:80px;width:80px}
  /* ヒーロー：上の余白は帯が受け持つ。高さは中身なり（共通の min-height:82vh だと、タブレット縦で上に大きな空白が空く） */
  .space.sub .cs-stage>.page-hero{min-height:0;padding-top:clamp(20px,5vw,40px)}
  .space.sub .cs-stage>#flow{padding-top:clamp(28px,8vw,56px)}
}

/* ---------------- 01 申し込んだあとの流れ：4段階（.rows と同じ番号・罫線のトークンで組む。1列） ---------------- */
/* 日本語の改行を文節で（「無くて｜も」のような切れ方を避ける）。対応していないブラウザはふだんの改行のまま */
.space.sub .cs-stage #flow .lead,.space.sub .cs-step-p,.space.sub .cs-sub>li{word-break:auto-phrase;text-wrap:pretty}
.space.sub .cs-steps{margin-top:clamp(32px,4vw,56px);display:grid;border-bottom:1px solid var(--rule);counter-reset:cs;max-width:46em}
.space.sub .cs-steps>li{display:grid;grid-template-columns:3em minmax(0,1fr);column-gap:clamp(12px,1.6vw,20px);align-items:baseline;
  padding:clamp(22px,2.6vw,36px) 0;border-top:1px solid var(--rule);counter-increment:cs}
.space.sub .cs-steps>li::before{content:counter(cs,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--font-en);font-weight:800;font-size:var(--t5);letter-spacing:.12em;color:var(--soft)}
.space.sub .cs-steps>li>*{grid-column:2;min-width:0}
.space.sub .cs-step-h{font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.space.sub .cs-step-p{margin-top:10px;max-width:var(--measure);font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body);text-wrap:pretty}
.space.sub .cs-step-p a{color:var(--soft);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.space.sub .cs-step-p a:hover{color:#fff}
.space.sub .cs-sub-k{margin-top:20px;font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.08em;color:var(--soft)}
.space.sub .cs-sub{margin-top:10px;display:grid;max-width:var(--measure);border-bottom:1px solid var(--rule)}
.space.sub .cs-sub-k+.cs-sub{margin-top:6px}
.space.sub .cs-step-h+.cs-sub{margin-top:14px}
.space.sub .cs-sub>li{position:relative;padding:10px 0 10px 1.3em;border-top:1px solid var(--rule);font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:#fff}
.space.sub .cs-sub>li::before{content:"";position:absolute;left:.1em;top:calc(10px + .9em);width:.6em;height:1px;background:var(--soft)}
.space.sub .cs-sub b{display:block;font-weight:700}
.space.sub .cs-sub b+span{display:block;font-weight:var(--fw-body);color:var(--body)}

/* 灯る前（JS が動くときだけ）：不透明度だけを変える。transform は使わない
   v9.1：.42 → .65。灯る前でも読める濃さにする（本文 #DDE3F3 で 6.8:1、青い番号とリンク #8DB8FF で 4.6:1。.42 だと番号が 2.5:1 だった） */
.cs-js .space.sub .cs-steps>li{opacity:.65;transition:opacity 500ms ease}
.cs-js .space.sub .cs-steps>li.lit{opacity:1}

/* ---------------- 02 予約の面（#book） ---------------- */
/* ボタンで飛んだとき：面の上の余白（--sec、1440 で約170px）をヘッダーの裏に送って、見出しの上の札（02 / Booking）がヘッダーの 48px 下に来るように。
   v9.1：前は面の上端をヘッダーの 16px 下に置いていたので、見出しの前に約180pxの空きがあった */
.space.sub .cs-stage~#book{scroll-margin-top:calc(var(--header-h) + 48px - var(--sec))}
/* PC・予約枠がまだ出ていないとき：準備中の箱は左の列、「まだ予約するほどではない方へ」は右の列に並べる（面の右側が空かないように）。
   予約枠が出たら（.book.is-ready）枠は全幅、入口はその下の全幅に戻る */
@media (min-width:1081px){
  .space.sub .cs-stage~#book>.wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(48px,5vw,96px);align-items:start}
  .space.sub .cs-stage~#book>.wrap>*{grid-column:1 / -1}
  .space.sub .cs-stage~#book .book:not(.is-ready){grid-column:1}
  .space.sub .cs-stage~#book .book:not(.is-ready)~.cs-doors{grid-column:2;grid-row:4;margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(22px,2.6vw,34px);max-width:none}
}
/* 予約枠の iframe：面の中に、細い線と角丸の枠で収める（高さは story-pages.css の .book-frame のまま） */
.space.sub .cs-frame{border:1px solid var(--sf-line);border-radius:var(--sf-radius);overflow:hidden;background:#fff}
.space.sub .cs-frame .book-frame{border-radius:0}

/* まだ予約するほどではない方へ：3つのテキストリンク（ボタンにはしない） */
.space.sub .cs-doors{margin-top:clamp(40px,5vw,64px);max-width:46em}
.space.sub .cs-doors-h{font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:#fff}
.space.sub .cs-doors-list{margin-top:10px;display:grid;border-bottom:1px solid var(--sf-line)}
.space.sub .cs-doors-list>li{border-top:1px solid var(--sf-line)}
.space.sub .cs-door{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;column-gap:clamp(14px,2.2vw,32px);align-items:center;
  padding:clamp(14px,1.6vw,20px) 4px;color:#fff;text-decoration:none}
.space.sub .cs-door-k{font-size:var(--t5);line-height:var(--lh5);font-weight:700;color:var(--soft)}
.space.sub .cs-door-t{font-size:var(--t4);line-height:1.5;font-weight:700;color:#fff}
.space.sub .cs-door-t .cta-main{display:block}
.space.sub .cs-door-t .cta-sub{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;font-weight:500;color:var(--note);word-break:keep-all;overflow-wrap:anywhere}
.space.sub .cs-door-ar{font-family:var(--font-en);font-size:18px;font-weight:800;color:var(--soft);transition:transform 250ms ease,color 250ms ease}
.space.sub .cs-door:hover .cs-door-t>.cta-main,.space.sub .cs-door:hover .cs-door-t:not(:has(.cta-main)){text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.space.sub .cs-door:hover .cs-door-ar{transform:translateX(4px);color:#fff}
.space.sub .cs-door:focus-visible{outline:2px solid #8DB8FF;outline-offset:2px;border-radius:6px}
/* 予約枠が出ていないときは、LINE の行を出さない（準備中の箱に同じ導線がある） */
.space.sub .book:not(.is-ready)~.cs-doors .cs-door-line{display:none}
@media (max-width:600px){
  .space.sub .cs-door{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .space.sub .cs-door-k{grid-column:1;grid-row:1}
  .space.sub .cs-door-t{grid-column:1;grid-row:2}
  .space.sub .cs-door-ar{grid-column:2;grid-row:1 / 3}
}

/* ---------------- このページだけの、共通の部品への小さな上書き（v9.1） ---------------- */
/* 右端の小さな月（.phase-rail）は、左から照らされた三日月で、右から満ちる大きな月と向きが逆に見えるので、このページでは出さない（story.css・page-check.css と同じ扱い） */
.space.sub .phase-rail{display:none}
/* フッター：共通の作りはフッターを margin-top:-100vh で最後の呼びかけに重ねる。高さが 76vh（pages-space.css）だと、ページの一番下で
   フッターの下に呼びかけの地球と注記がはみ出す（1440×900 で 216px）。重なり幅と同じ 100vh 以上にする（page-check.css と同じ直し方）。
   動きを減らす設定では共通側が重ねない（margin-top:0）ので変えない */
@media (prefers-reduced-motion:no-preference){
  .space.sub .site-footer{min-height:100vh}
}
/* 最後の呼びかけの注記：スクロールの途中で、地球の縁の明るい光が文字の真後ろを通るので、文字の周りだけ暗くして読めるようにする */
.space.sub #cta .notes li{text-shadow:0 0 16px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.95),0 0 2px rgb(3,6,14)}
/* 日本語の改行を文節で（390 幅で「お知らせくだ｜さい。」「結び｜ます。」「社内｜の情報を」のように切れていた）。
   HTML の <wbr> と句読点の後ろでだけ改行する（word-break:auto-phrase は「取り｜決め」と切ったので使わない。Safari でも同じ切れ方になる）。収まらない長さのときだけ、どこでも折る */
.space.sub .book-wait p,.space.sub #trust .trust-items li>span:last-child,.space.sub #for .rows small{word-break:keep-all;overflow-wrap:anywhere}

/* ---------------- 動きを減らす設定：最初から完成形（JS も .cs-js を付けない） ---------------- */
@media (prefers-reduced-motion:reduce){
  .space.sub .cs-pin{opacity:1;animation:none}
  .space.sub .cs-steps>li{opacity:1;transition:none}
  .space.sub .cs-door-ar{transition:none}
}