/* ============================================================
   MUKIAI v2 下層4ページ（サービス／事例／会社概要／特商法）：宇宙の世界＋読みやすさの設計（2026-09-30）
   読む順：top.css → space.css → type.css → pages.css → add.css →（thumbs.css）→ このファイル。<body class="space sub"> だけに効く。
   設計の正：_design/読みやすさ_実測と設計_draft.md（第5節 文字の段、第6節 カード 案A、第7節 3D、第8節 動き）
   ・文字の大きさは type.css の5段（--t1〜--t5）と --t0 だけを使う。例外は設計書どおり、料金の数字の下限 56px と、ボタン・メニュー
   ・面・線の箱・ぼかし・角丸はやめ、区切りの線1本（--rule）と番号と余白で組む。残す面は、事例の図（.stage）とボタンだけ
   ・3D は枠なしで空に浮かべる（マスクは thumbs.css が持っている。ここでは箱の飾りを外すだけ）
   ・本文の太さは --fw-body の1か所（500）
   背景の星空と地球は space.js / space.css の部品をそのまま使う。
   ============================================================ */
.space.sub{
  --fw-body:500;                  /* 本文の太さ。ここ1か所で変える（2026-09-30 トップの担当が 400 と 500 を見比べて 500 に決定） */
  --body:#DDE3F3;                 /* 本文の色 */
  --note:#C9D2EA;                 /* 補足の色 */
  --rule:rgba(201,210,234,.24);   /* 区切りの線 */
  /* 出方の時間（設計書 6.4）：行のせり上がり 0.7秒・行ごと 60ms、文字ごと 12ms、数字ロール 0.8秒 */
  --dur-reveal:700ms; --stagger-line:60ms; --stagger-char:12ms; --dur-roll:800ms;
  font-size:var(--t4);line-height:var(--lh4);
}

/* ---------------- 背景：最初の画面から星を出す ----------------
   space.js は .after-hero の上端から 45vh かけて星を出す。下層ページは境目が無いので、上端を画面の外へ逃がす */
.space.sub main{display:flow-root}
.space.sub .after-hero{margin-top:-120vh;padding-top:120vh;background:none}

/* ---------------- ヘッダー：進んだら面を付ける（見出しがロゴとメニューの下を通っても重ならない） ---------------- */
.space.sub .site-header.is-scrolled[data-tone="dark"]{background:rgba(3,6,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}
.space.sub .mobile-menu{overflow-y:auto}
.space.sub .mobile-menu>a{font-size:clamp(26px,4.3vw,60px)}
.space.sub .mobile-menu>a.mm-sub{font-size:var(--t4)}
.space.sub .mobile-menu>a small{font-size:var(--t5)}
@media (max-height:700px){.space.sub .mobile-menu{justify-content:flex-start}.space.sub .mobile-menu>a{font-size:clamp(24px,3.4vw,44px)}}
/* ボタンとメニューは段の外（設計書 5.1） */
.space.sub .btn{font-size:16px}
.space.sub .btn--lg{font-size:18px}
.space.sub .nav{font-size:15px}
.space.sub .header-cta .btn,.space.sub .fixed-bar .btn{font-size:14px}

/* ============================================================
   1. 文字の段
   ============================================================ */
/* t1：そのページで一番読ませたい1文 */
.space.sub .page-title,.space.sub .end-title,.space.sub .grad-title,.space.sub .sv-big{font-size:var(--t1);line-height:var(--lh1);letter-spacing:-.02em}
.space.sub .price-num{font-size:clamp(56px,6.2vw,104px);line-height:1}   /* 数字だけは下限 56px（設計書 5.1 の例外） */
/* t0：サイトで一番大きい1文（事例の最後の見出し） */
.space.sub .grad--max .grad-title{font-size:var(--t0);line-height:1.08}
/* t2：見出し */
.space.sub .h2,.space.sub #program .h2,.space.sub .scene h2,.space.sub .page-hero--short .page-title,.space.sub .gf-line,.space.sub .gs-a,.space.sub .gs-b,.space.sub .prog-stage b,.space.sub .zeros10 b{
  font-size:var(--t2);line-height:var(--lh2);letter-spacing:-.01em}
.space.sub .h2{max-width:21em}
/* t3：小見出しと、各セクションで一番読ませたい文 */
.space.sub .h3,.space.sub .payback h3,.space.sub .pillar h3,.space.sub .pcard-title,.space.sub .pcard:not(.pcard--wide) .pcard-title,.space.sub .trust h2,.space.sub .prac h3,.space.sub .prac-more-h,.space.sub .prog .step h3,
.space.sub .conds li,.space.sub .checks li,.space.sub .faq summary,.space.sub .svc-price,.space.sub .pcard .svc-price,.space.sub .why-key,.space.sub .values-key,.space.sub .page-lead--key,
.space.sub .foot-tag,.space.sub .scrollnav b,.space.sub .sum,.space.sub .prac-areas .n,.space.sub .scatter .q,.space.sub .flow8 .arrow{
  font-size:var(--t3);line-height:var(--lh3);letter-spacing:0}
.space.sub .conds li,.space.sub .checks li,.space.sub .faq summary,.space.sub .why-key,.space.sub .values-key,.space.sub .page-lead--key{font-weight:700;color:#fff}
/* t4：本文 */
.space.sub .page-lead,.space.sub .lead,.space.sub .grad-sub,.space.sub .end-lead,.space.sub .values-t p,.space.sub .cond-head p,.space.sub .cond-foot,.space.sub .fit-note,
.space.sub .prog .step p:not(.step-k):not(.step-out),.space.sub .prog-all,.space.sub .order-why p:not(.order-k),.space.sub .why-list li,
.space.sub .price-card p.note,.space.sub .payback li,.space.sub .pb-ex p,.space.sub .pb-note p,.space.sub .price-num .pre,.space.sub .price-num .post,
.space.sub .pcard-desc,.space.sub .incl li,.space.sub .pcard-more,.space.sub .nots li,.space.sub .nots-foot,.space.sub .faq .faq-a,.space.sub .faq .faq-a p,
.space.sub .trust-head p,.space.sub .trust-items li,.space.sub .prac p:not(.prac-k),.space.sub .prac-areas li,.space.sub .prac-areas li>span:last-child,.space.sub .prac-more-h+p,
.space.sub .conclusion p,.space.sub .concl li,.space.sub .scene .body,.space.sub .scene .state,.space.sub .exp,.space.sub .why-box p,.space.sub .sv-big small,
.space.sub .pillar p:last-child,.space.sub .info div,.space.sub .privacy h3,.space.sub .privacy p,.space.sub .privacy li,.space.sub .arrow-link{
  font-size:var(--t4);line-height:var(--lh4);letter-spacing:.02em}
.space.sub .page-lead,.space.sub .lead,.space.sub .grad-sub,.space.sub .end-lead,.space.sub .values-t p,.space.sub .cond-head p,.space.sub .cond-foot,.space.sub .fit-note,
.space.sub .prog .step p:not(.step-k):not(.step-out),.space.sub .prog-all,.space.sub .order-why p:not(.order-k),.space.sub .why-list li,
.space.sub .price-card p.note,.space.sub .payback li,.space.sub .pb-ex p,.space.sub .pb-note p,.space.sub .pcard-desc,.space.sub .incl li,.space.sub .nots-foot,.space.sub .faq .faq-a,
.space.sub .trust-head p,.space.sub .prac p:not(.prac-k),.space.sub .prac-areas li>span:last-child,.space.sub .prac-more-h+p,
.space.sub .conclusion p,.space.sub .concl li,.space.sub .scene .body,.space.sub .exp,.space.sub .why-box p,.space.sub .pillar p:last-child,.space.sub .info dd,.space.sub .privacy p,.space.sub .privacy li{
  font-weight:var(--fw-body);color:var(--body)}
/* 本文の1行は 36字まで */
.space.sub .page-lead,.space.sub .lead,.space.sub .grad-sub,.space.sub .end-lead,.space.sub .cond-foot,.space.sub .prog-all,.space.sub .order-why p:not(.order-k),.space.sub .why-list li,
.space.sub .price-card p.note,.space.sub .pb-ex p,.space.sub .pb-note p,.space.sub .nots-foot,.space.sub .faq .faq-a,.space.sub .conclusion p,.space.sub .privacy p,.space.sub .privacy li,.space.sub .info dd,.space.sub .values-t p{max-width:var(--measure)}
.space.sub .page-lead--key,.space.sub .why-key,.space.sub .values-key{max-width:24em}
/* 本文の段で、強く読ませる文（太さ 700・白） */
.space.sub .scene .state,.space.sub .nots li,.space.sub .trust-items li,.space.sub .pb-key,.space.sub .pb-note p.pb-key,.space.sub .pcard-more,.space.sub .prac-areas b,.space.sub .cond-foot{font-weight:700;color:#fff}
/* t5：補足・ラベル・但し書き（これより小さい文字は置かない） */
.space.sub .eyebrow,.space.sub .page-tag,.space.sub .btn-note,.space.sub .notes li,.space.sub .step-k,.space.sub .step-out,.space.sub .step .ex,.space.sub .prog-stage small,.space.sub .order-k,
.space.sub .conds li::before,.space.sub .payback li::before,.space.sub .price-name,.space.sub .price-tax,.space.sub .pcard-meta,.space.sub .svc-price small,.space.sub .incl-k,.space.sub .trust-k,.space.sub .prac-k,.space.sub .prac-areas .n small,
.space.sub .conclusion b,.space.sub .why-box b,.space.sub .scene-k,.space.sub .badge,.space.sub .scene .note,.space.sub .btable small,.space.sub .bdl dt,
.space.sub .stage-label,.space.sub .sv-cap,.space.sub .sv-chip,.space.sub .legend,.space.sub .rings .tag,.space.sub .flow8 .boxes div,.space.sub .flow8 .boxes small,.space.sub .flow8 .bar span,.space.sub .chip-grey,.space.sub .checks9 li,
.space.sub .now10-items,.space.sub .now10 b::after,.space.sub .zeros10 div,.space.sub .train-stack div,.space.sub .train-long+p,.space.sub .train p,.space.sub .sum small,
.space.sub .pillar .sky,.space.sub .info dt,.space.sub .info small,.space.sub .legal-foot p,
.space.sub .end-sub,.space.sub .foot-nav,.space.sub .foot-info,.space.sub .foot-line-note,.space.sub .foot-credit,.space.sub .foot-bottom,.space.sub .scrollnav small{
  font-size:var(--t5);line-height:var(--lh5)}
.space.sub .btn-note,.space.sub .notes li,.space.sub .step-out,.space.sub .price-tax,.space.sub .scene .note,.space.sub .sv-cap,.space.sub .info small,.space.sub .legal-foot p,.space.sub .foot-line-note,.space.sub .foot-credit,.space.sub .foot-bottom,.space.sub .foot-info dt{color:var(--note);font-weight:500}
.space.sub .eyebrow,.space.sub .page-tag,.space.sub .order-k,.space.sub .incl-k,.space.sub .conclusion b,.space.sub .why-box b,.space.sub .scene-k,.space.sub .stage-label,.space.sub .pcard-meta,.space.sub .scrollnav small{font-weight:800;letter-spacing:.12em}
.space.sub .eyebrow .en{font-size:inherit}
.space.sub .svc-fine{font-size:var(--t5)!important;line-height:var(--lh5);color:var(--note)}

/* 一番読ませたい文（本文の規則より後ろに置いて、t3 を効かせる） */
.space.sub .page-lead.page-lead--key,.space.sub .order-why p.why-key,.space.sub .values-t p.values-key{font-size:var(--t3);line-height:var(--lh3);letter-spacing:0;font-weight:700;color:#fff;max-width:24em}

/* 補足の3項目（オンライン、30分／無理な営業はしません…）。1文の長い行をやめ、短い項目に分ける */
.notes{display:grid;gap:4px;margin-top:16px}
.notes li{position:relative;padding-left:16px}
.notes li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:1px;background:var(--note)}
.notes--center{justify-items:center;text-align:center;margin-inline:auto;max-width:var(--measure)}
.notes--center li{padding-left:0}.notes--center li::before{display:none}

/* ============================================================
   2. 面をやめる（線と余白と番号で組む）
   ============================================================ */
.space.sub .step,.space.sub .order-why,.space.sub .conds li,.space.sub .checks li,.space.sub .price-card,.space.sub .payback,.space.sub .payback li,.space.sub .pb-ex,.space.sub .nots li,.space.sub .faq details,
.space.sub .why-box,.space.sub .conclusion,.space.sub .pillar,.space.sub .prac,.space.sub .prac-fig,.space.sub .trust,.space.sub .info,.space.sub .privacy article{
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0}

/* ---------------- 最初の画面 ---------------- */
.space.sub .page-hero{background:none;min-height:82vh}
.space.sub .page-hero--short{min-height:60vh}
.space.sub .page-title{max-width:12em;text-shadow:0 0 30px rgba(3,6,14,.95),0 0 8px rgba(3,6,14,.9)}
.space.sub .page-hero--short .page-title{max-width:21em}
.space.sub .page-lead,.space.sub .page-tag{text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.space.sub .page-lead+.page-lead{margin-top:14px}
.space.sub .page-tag{color:var(--txt-3)}
.space.sub .page-hero .orbit-deco{opacity:.34}
/* 事例の結論：箱なし。左に青い線、3行の対の表 */
.space.sub .conclusion{margin-top:clamp(28px,3.4vw,44px);max-width:50em;padding:2px 0 2px clamp(16px,1.8vw,24px);border-left:2px solid #8DB8FF}
.space.sub .conclusion b{color:var(--soft);margin-bottom:8px}
.space.sub .conclusion p{color:#fff;font-weight:700}
.concl{margin-top:14px;display:grid;counter-reset:cc;border-bottom:1px solid var(--rule)}
.concl li{display:grid;grid-template-columns:2.2em minmax(0,1.1fr) 1.6em minmax(0,1fr);align-items:baseline;padding:12px 0;border-top:1px solid var(--rule);counter-increment:cc}
.concl li::before{content:counter(cc,decimal-leading-zero);font-family:var(--font-en);font-weight:800;font-size:var(--t5);letter-spacing:.1em;color:var(--soft)}
.concl i{font-style:normal;color:var(--soft)}
.concl span:last-child{color:#fff;font-weight:700}

/* ---------------- サービス 01：向いている会社（線で区切った3行。チェックの丸が順に出る） ---------------- */
.space.sub .fit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.space.sub .checks{gap:0;max-width:none;border-bottom:1px solid var(--rule)}
.space.sub .checks li{padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid var(--rule);align-items:flex-start;gap:18px}
.space.sub .checks li::before{margin-top:.28em;width:28px;height:28px;background:rgba(141,184,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1px rgba(141,184,255,.6)}
.space.sub .fit-note{margin-top:22px;color:#fff;font-weight:700}

/* ---------------- サービス 02：4段・7つの工程（ピン留めしない。4段の中に工程を入れた縦の一覧） ----------------
   以前：7枚を横に並べてピン留め（本文 12.5px・1行11字、7つ目が読めるまで 2,280px、待つ間は不透明度 0.4）。
   いま：左に段の名前（聞く／分ける／作る／卒業）、右に工程の行。文字は最初から全部読める。進み具合は月の満ち欠けだけで見せる */
.space.sub #program .process-pin{height:auto}
.space.sub #program .process-sticky{position:relative;height:auto;min-height:0;display:block;padding:var(--sec) 0}
.space.sub .prog{display:block;margin-top:clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.prog-g{display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--rule)}
.prog-stage{padding-top:clamp(20px,2.4vw,32px);position:sticky;top:calc(var(--header-h) + 12px);align-self:start}
.prog-stage b{display:block;font-weight:900;color:#fff}
.prog-stage small{display:block;margin-top:6px;font-family:var(--font-en),var(--font-ja);font-weight:800;letter-spacing:.1em;color:var(--soft)}
.prog-all{padding:clamp(24px,2.8vw,38px) 0}
.space.sub .prog .step{opacity:1;display:grid;grid-template-columns:48px minmax(0,14em) minmax(0,1fr);column-gap:clamp(18px,2.4vw,36px);row-gap:6px;align-items:start;padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid var(--rule);font-size:var(--t3)}
.space.sub .prog .prog-rows .step:first-child{border-top:0}
.space.sub .prog .step .phase{grid-column:1;grid-row:1 / span 4;width:48px;height:48px;margin:2px 0 0}
.space.sub .prog .step .step-k{grid-column:2;grid-row:1;margin:0;color:var(--soft);font-weight:800}
.space.sub .prog .step h3{grid-column:2;grid-row:2 / span 3;margin:0;font-weight:900;color:#fff}
.space.sub .prog .step p:not(.step-k):not(.step-out){grid-column:3;grid-row:1 / span 2;margin:0;max-width:34em}
.space.sub .prog .step .step-out{grid-column:3;grid-row:3;margin:4px 0 0;color:#fff;font-weight:700}
.space.sub .prog .step .ex{grid-column:3;grid-row:4;justify-self:start;margin-top:2px;color:var(--soft)}
/* 月：行が画面に入ったら出る（装飾の型：0.58秒、180度）。満ちた側が明るくなるのは space.css の .on と同じ見た目 */
.space.sub .step.lit .ph-lit{fill:#F3F6FF}
.space.sub .step.lit .phase,.space.sub .step.on .phase{box-shadow:0 0 0 1px rgba(160,200,255,.6),0 0 22px rgba(160,200,255,.45)}
.js-lit .space.sub .prog .step .phase{transform:scale(0) rotate(-180deg);transition:transform 580ms cubic-bezier(.3,0,0,1)}
.js-lit .space.sub .prog .step.lit .phase{transform:none}
/* この順番の理由：箇条2つ＋大きい1文＋本文 */
.space.sub .order-why{display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:14px;margin-top:0;padding:clamp(28px,3.4vw,44px) 0 0;align-items:start}
.space.sub .order-k{grid-column:1;grid-row:1 / span 4;color:var(--soft);white-space:normal}
.space.sub .order-why>*:not(.order-k){grid-column:2}
.why-list{display:grid;gap:8px}
.why-list li,.blist li{position:relative;padding-left:1.2em}
.why-list li::before,.blist li::before{content:"";position:absolute;left:.15em;top:.82em;width:.5em;height:1px;background:var(--soft)}
.space.sub .why-key{margin:6px 0 2px;padding-left:clamp(14px,1.6vw,22px);border-left:2px solid #8DB8FF}
.space.sub .order-why .arrow-link{justify-self:start;margin-top:4px}

/* ---------------- サービス 03：社員だけで回る（ピン留めしない。単語ごとに右下から） ---------------- */
.grad-flat{padding-bottom:0}
.grad-flat .orbit-deco{top:6%}
.gf-lines{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,28px)}
.gf-line{font-weight:900;color:var(--txt-2);text-shadow:0 0 22px rgba(3,6,14,.95)}
.grad-flat .grad-title{margin-top:clamp(40px,6vw,96px);text-shadow:0 0 30px rgba(3,6,14,.95),0 0 8px rgba(3,6,14,.9)}
.grad-flat .grad-title .w{display:block}
.grad-flat .grad-title .w+.w{text-shadow:none}
.grad-flat .grad-after{padding-top:clamp(64px,8vw,120px)}
/* 終わりの条件：線で区切った5行。チェックの四角が順に出る（装飾の型） */
.space.sub .cond-head{grid-template-columns:1fr;gap:12px;align-items:start}
.space.sub .conds{gap:0;margin-top:clamp(24px,3vw,40px);border-bottom:1px solid var(--rule)}
.space.sub .conds li{padding:clamp(16px,1.8vw,26px) 0;border-top:1px solid var(--rule);align-items:baseline}
.space.sub .conds li::before{color:var(--soft);font-weight:800}
.space.sub .conds .box{align-self:center}
.js-lit .space.sub .conds .box{transform:scale(0);transition:transform 580ms cubic-bezier(.3,0,0,1)}
.js-lit .space.sub .conds.lit .box{transform:none}
.space.sub .conds li:nth-child(2) .box{transition-delay:100ms}.space.sub .conds li:nth-child(3) .box{transition-delay:200ms}.space.sub .conds li:nth-child(4) .box{transition-delay:300ms}.space.sub .conds li:nth-child(5) .box{transition-delay:400ms}
.space.sub .cond-foot{margin-top:24px}

/* ---------------- サービス 04：料金（面なし。左に数字と条件、右上に 3D、下に回収の考え方） ---------------- */
.price-top{display:grid;grid-template-columns:minmax(0,1fr) min(40vw,600px);column-gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(20px,2.4vw,32px)}
.space.sub .price-card{padding:0;color:#fff}
.space.sub .price-name{color:var(--soft);font-weight:800;letter-spacing:.08em}
.space.sub .price-nums{margin-top:16px;gap:8px clamp(24px,3.4vw,56px)}
.space.sub .price-num .pre,.space.sub .price-num .post{font-weight:900;line-height:1.2}
.space.sub .price-tax{margin-top:14px}
.space.sub .price-card p.note{margin-top:18px}
.space.sub .payback{margin-top:clamp(40px,5vw,72px);padding:clamp(28px,3.4vw,44px) 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:18px;align-items:start}
.space.sub .payback h3{font-weight:900;color:#fff;grid-column:1 / -1;max-width:24em}
.payback-body{grid-column:2}
.space.sub .payback ol{margin-top:0;gap:0;border-bottom:1px solid var(--rule)}
.space.sub .payback li{padding:16px 0 16px 3.2em;border-top:1px solid var(--rule)}
.space.sub .payback li::before{left:0;top:1.1em;width:auto;height:auto;border-radius:0;background:none;color:var(--soft);font-weight:800;letter-spacing:.1em;content:counter(pb,decimal-leading-zero)}
.space.sub .payback .pb-ex{margin-top:22px;padding:2px 0 2px clamp(14px,1.6vw,22px);border-left:2px solid #8DB8FF}
.space.sub .payback .pb-ex b{color:#fff;font-weight:700}
.space.sub .payback .pb-note{margin-top:22px}
.space.sub .pb-ex p+p,.space.sub .pb-note p+p{margin-top:6px}

/* ---------------- サービス 05：ほかのサービス（3D は枠なし）とお受けしていない仕事 ---------------- */
.pcards--opts{margin-top:clamp(36px,4vw,56px)}
.space.sub .pcard-title{overflow:visible}
.space.sub .pcard-desc{max-width:30em;margin-top:12px}
.incl-k{margin-top:14px;color:var(--soft)}
.incl{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:4px;max-width:30em}
.incl li{padding-right:.9em;margin-right:.9em;border-right:1px solid var(--rule)}
.incl li:last-child{border-right:0;padding-right:0;margin-right:0}
.space.sub .pcard .svc-price{margin-top:16px}
.space.sub .pcard .svc-price small{color:var(--note);font-weight:500}
.pcard-more{margin-top:16px}
.pcard-more span{display:inline-block;border-bottom:1.5px solid rgba(141,184,255,.8);padding-bottom:2px}
.space.sub .nots{gap:0;margin-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--rule)}
.space.sub .nots li{padding:clamp(18px,2vw,28px) clamp(18px,2.4vw,36px) clamp(18px,2vw,28px) 0}
.space.sub .nots li+li{padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--rule)}
.space.sub .nots li::before{margin-top:.82em;background:var(--soft)}
.space.sub .nots-foot{margin-top:18px}

/* ---------------- お預かりした情報の扱い／自社での実践（add.css の面を外す） ---------------- */
.space.sub .trust{padding:clamp(28px,3.4vw,48px) 0;border-block:1px solid var(--rule);align-items:start}
.space.sub .trust-items li{padding:16px 0;border-top:1px solid var(--rule)}
.space.sub .trust-items li:first-child{border-top:0;padding-top:0}
.space.sub .trust-items li:last-child{border-bottom:0;padding-bottom:0}
.space.sub .prac-list{gap:0;border-bottom:1px solid var(--rule)}
.space.sub .prac{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--rule)}
.space.sub .prac-fig{padding:0}
/* 反転した線画の地を真っ黒まで落として、空との境目を消す（枠に見えないように） */
.space.sub .prac-fig img{filter:invert(1) hue-rotate(180deg) contrast(1.3);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.space.sub .prac h3{margin-top:4px}
.space.sub .prac-areas{border-top-color:var(--rule)}
.space.sub .prac-areas li{grid-template-columns:11em 3.6em minmax(0,1fr);padding:14px 0;border-bottom-color:var(--rule)}
.space.sub .prac-areas .n{line-height:1}
.space.sub .prac-areas .n small{color:var(--note);font-weight:500;letter-spacing:0}

/* ---------------- サービス 06：よくあるご質問（動かさない。線で区切った行） ---------------- */
.space.sub .faq{gap:0;max-width:none;border-bottom:1px solid var(--rule)}
.space.sub .faq details{border-top:1px solid var(--rule);overflow:visible}
.space.sub .faq summary{padding:clamp(18px,2vw,26px) 48px clamp(18px,2vw,26px) 0}
.space.sub .faq summary::after{right:6px}
.space.sub .faq .faq-a{padding:0 0 clamp(20px,2.4vw,30px)}

/* ---------------- 事例：10場面の物語 ---------------- */
.space.sub .stage{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(8,14,32,.8);box-shadow:0 60px 140px -60px #000}
.space.sub .stage::before{display:none}
.space.sub .sv{inset:64px 30px 28px}
.space.sub .sv-cap{padding-top:16px}
.space.sub .sv-big small{font-weight:900;margin-left:8px}
.space.sub .legend{gap:8px 16px}
.space.sub .sum small{color:var(--note);font-weight:500}
.space.sub .now10{margin-top:34px}
.space.sub .now10-items{gap:8px;font-weight:700}
.now10-items b,.now10-items i{display:block;font-style:normal;font-weight:inherit}
.space.sub .now10-items span:nth-child(n+4){color:var(--note)}
.space.sub .zeros10 div{line-height:1.5}
.space.sub .zeros10 b{line-height:1;margin-bottom:8px}
.space.sub .flow8 .boxes small{color:var(--note)}
.space.sub .rings .tag{line-height:1.3}
.space.sub .scene h2{max-width:12em;text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.space.sub .scene .body{margin-top:20px;max-width:var(--measure);text-shadow:0 0 14px rgba(3,6,14,.9)}
.space.sub .scene .body p+p,.space.sub .scene .body p+ul,.space.sub .scene .body ul+p,.space.sub .scene .body table+p{margin-top:12px}
.space.sub .scene .state{margin-top:16px;max-width:var(--measure)}
.space.sub .scene .note,.space.sub .exp{margin-top:12px;max-width:var(--measure)}
.space.sub .scene-k .num{color:var(--soft)}
.space.sub .badge{letter-spacing:.02em;padding:3px 12px}
.space.sub .badge--done{background:#F5F7FC;color:var(--navy)}
.space.sub .badge--doing{background:rgba(141,184,255,.16);color:#DCE8FF;box-shadow:inset 0 0 0 1px rgba(141,184,255,.45)}
.space.sub .badge--plan{background:transparent;color:var(--soft);box-shadow:inset 0 0 0 1.5px rgba(141,184,255,.6)}
.blist{display:grid;gap:4px;margin-top:8px}
.btable{margin-top:12px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.btable th,.btable td{padding:9px 0;border-top:1px solid var(--rule);text-align:left;vertical-align:baseline;font-weight:700;color:#fff}
.btable tr:last-child th,.btable tr:last-child td{border-bottom:1px solid var(--rule)}
.btable td{text-align:right;white-space:nowrap;padding-left:1.2em;width:1%}
.btable small{display:block;color:var(--note);font-weight:500}
.bdl{display:grid;border-bottom:1px solid var(--rule)}
.bdl div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.bdl dt{color:var(--soft);font-weight:800;padding-top:.2em}
.bdl dd{margin:0}
/* なぜこの順番か：箱なし。左に青い線 */
.space.sub .why-box{margin-top:24px;padding:2px 0 2px clamp(16px,1.8vw,22px);border-left:2px solid #8DB8FF;max-width:var(--measure)}
.space.sub .why-box b{color:var(--soft);margin-bottom:4px}
/* 読んでいない場面は少しだけ落とす（0.35 → 0.7。見出しとラベルは落とさない） */
.space.sub .scene{opacity:1}
.space.sub .scene:not(.is-active)>*:not(h2):not(.scene-k){opacity:.7;transition:opacity 600ms var(--ease-reveal)}
.space.sub .scene.is-active>*{transition:opacity 600ms var(--ease-reveal)}
/* 最後の場面：サイトで一番大きい見出し（--t0）。ピン留めは 420vh → 360vh に詰める */
.space.sub .grad--max .grad-pin{height:360vh}
@media (min-width:761px){.grad--max .earth-canvas{left:15%}}

/* ---------------- 会社概要・特商法（静かに） ---------------- */
.space.sub .pillars{gap:0;border-top:1px solid var(--rule)}
.space.sub .pillar{padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,40px) 0 0;overflow:visible}
.space.sub .pillar+.pillar{padding-left:clamp(20px,2.6vw,40px);border-left:1px solid var(--rule)}
.space.sub .pillar .sky{color:var(--soft);font-weight:800;margin-top:16px}
.space.sub .pillar h3{margin-top:4px;font-weight:900}
.space.sub .pillar p:last-child{margin-top:10px}
.js-lit .space.sub .pillars .pillar{transform:translateY(27px);opacity:0;transition:transform 600ms var(--ease-reveal),opacity 600ms ease}
.js-lit .space.sub .pillars.lit .pillar{transform:none;opacity:1}
.space.sub .pillars .pillar:nth-child(2){transition-delay:80ms}.space.sub .pillars .pillar:nth-child(3){transition-delay:160ms}
.space.sub .values{align-items:center}
.space.sub .values figure{box-shadow:none}
.values-t p+p{margin-top:14px}
.space.sub .values-t .values-key{margin-top:22px;padding-left:clamp(14px,1.6vw,22px);border-left:2px solid #8DB8FF}
.space.sub .info{margin-top:clamp(28px,3.4vw,44px);padding:0;border-top:1px solid var(--rule)}
.space.sub .info div{grid-template-columns:13em minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--rule)}
.space.sub .info dt{color:var(--txt-3);font-weight:800;padding-top:.25em}
.space.sub .info a{color:var(--soft)}
.space.sub .info small{margin-top:8px;max-width:var(--measure)}
.space.sub .privacy{gap:0;max-width:none;border-bottom:1px solid var(--rule)}
.space.sub .privacy article{padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid var(--rule)}
.space.sub .privacy h3{font-weight:900;color:#fff}

/* ---------------- 最後の呼びかけとフッター ---------------- */
.space.sub .end-inner .notes{margin-top:18px}
.space.sub .site-footer{min-height:76vh;display:grid;align-content:center}
.space.sub .foot-info dd{color:var(--body)}

/* ============================================================
   3. 3D は枠なしで空に浮かべる（設計書 第7節）
   ============================================================ */
.space.sub .pcard-img,.space.sub .fit-fig,.space.sub .price-media{box-shadow:none;border-radius:0;overflow:visible;background:none}
.space.sub .fit-fig{position:relative}
@media (min-width:861px){
  .space.sub .fit-fig{aspect-ratio:1/1;margin-right:calc(var(--gutter) * -1)}
  .space.sub .price-media{aspect-ratio:4/3;margin:clamp(-150px,-9vw,-70px) calc(var(--gutter) * -1) 0 0}   /* 見出しの右まで持ち上げる。数字とは重ねない */
}
@media (max-width:860px){
  /* スマホ：3D は文字の後ろに敷かず、文字の上か下に、画面の幅いっぱいで置く */
  .space.sub .fit-fig{margin-inline:calc(var(--gutter) * -1);aspect-ratio:1/.72}
  .space.sub .pcard .pcard-img,.space.sub .price-media{margin-inline:calc(var(--gutter) * -1);aspect-ratio:1/.56}
}

/* ============================================================
   4. 幅ごとの組み替え
   ============================================================ */
@media (max-width:1180px){
  .space.sub .prog .step{grid-template-columns:48px minmax(0,1fr)}
  .space.sub .prog .step .step-k,.space.sub .prog .step h3,.space.sub .prog .step p:not(.step-k):not(.step-out),.space.sub .prog .step .step-out,.space.sub .prog .step .ex{grid-column:2;grid-row:auto}
  .space.sub .prog .step h3{margin-bottom:6px}
  .space.sub .prog .step .phase{grid-row:1 / span 6}
}
@media (max-width:1080px){
  .space.sub .pillars{grid-template-columns:1fr}
  .space.sub .pillar,.space.sub .pillar+.pillar{padding:22px 0;border-left:0;border-top:1px solid var(--rule)}
  .space.sub .pillars{border-top:0}
  .space.sub .nots{grid-template-columns:1fr;border-top:0}
  .space.sub .nots li,.space.sub .nots li+li{padding:16px 0;border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:860px){
  .gf-lines{grid-template-columns:1fr}
  .space.sub .fit-grid{grid-template-columns:1fr}
  .prog-g{grid-template-columns:1fr}
  .prog-stage{position:static;display:flex;align-items:baseline;gap:12px;padding-top:22px}
  .prog-stage small{margin-top:0}
  .prog-all{padding:10px 0 22px}
  .space.sub .prog .step{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px 0}
  .space.sub .prog .prog-rows .step:first-child{border-top:1px solid var(--rule);margin-top:14px}
  .space.sub .prog .step .phase{width:40px;height:40px;position:static}
  .space.sub .order-why,.space.sub .payback{grid-template-columns:1fr}
  .space.sub .order-k{grid-row:auto}
  .space.sub .order-why>*:not(.order-k),.payback-body{grid-column:1}
  .price-top{grid-template-columns:1fr;row-gap:8px}
  .space.sub .price-media{order:-1}
  .space.sub .prac{grid-template-columns:1fr;gap:14px;background:none}
  .space.sub .prac-areas li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .space.sub .prac-areas li>span:last-child{font-size:var(--t4)}
  .concl li{grid-template-columns:2.2em minmax(0,1fr);row-gap:2px}
  .concl i{display:none}
  .concl span:last-child{grid-column:2}
  .concl span:last-child::before{content:"→ ";color:var(--soft);font-weight:400}
  .space.sub .info div{grid-template-columns:1fr;gap:2px;padding:16px 0}
  .bdl div{grid-template-columns:1fr;gap:0}
  /* 事例の最後の見出し：--t0（42px）で9字が 358px に収まるよう、字間だけ詰める */
  .space.sub .grad--max .grad-title{letter-spacing:-.06em}
  /* 事例：JS が無いときの舞台（上に張りつく形のまま）。明るい帯を消す */
  .space.sub .stage-wrap{background:linear-gradient(180deg,rgba(3,6,14,.94) 86%,rgba(3,6,14,0))}

  /* 事例（スマホ）：舞台の絵を各場面の中へ移し、上に残すのは進み具合の線だけにする（pages-space.js が html に sv-inline を付ける） */
  .sv-inline .space.sub .stage-wrap{display:block;height:auto;padding:10px var(--gutter) 16px;background:linear-gradient(180deg,rgba(3,6,14,.94) 62%,rgba(3,6,14,0))}
  .sv-inline .space.sub .stage{height:auto;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;transform:none}
  .sv-inline .space.sub .stage-top{position:static}
  .sv-inline .space.sub .scene{min-height:0;padding:34px 0 60px}
  .sv-inline .space.sub .scene:not(.is-active)>*{opacity:1}
  .sv-inline .space.sub .scene .sv{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;transition:none;margin-top:20px;padding:18px 16px 14px;border-radius:18px;color:#fff;background:rgba(8,14,32,.82)}
  .sv-inline .space.sub .scene .sv-cap{display:block;margin-top:14px;padding-top:0}
  .sv-inline .space.sub .scene .scatter{flex:none;height:170px}
  .sv-inline .space.sub .scene .rings{flex:none;height:250px}
  .sv-inline .space.sub .scene .train{flex:none;min-height:150px;grid-template-columns:1fr}
  .sv-inline .space.sub .scene .train p{margin-top:4px}
  .sv-inline .space.sub .scene .people-gap{height:40px}
  .sv-inline .space.sub .scene .legend{grid-template-columns:1fr}
  /* 図の中で5つ横に並べると字が入りきらないので、縦に積む */
  .sv-inline .space.sub .scene .now10-items{grid-template-columns:1fr;gap:0;margin-top:22px}
  .sv-inline .space.sub .scene .now10-items span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--rule)}
  .sv-inline .space.sub .scene .zeros10{grid-template-columns:1fr;gap:0}
  .sv-inline .space.sub .scene .zeros10 div{display:flex;align-items:baseline;gap:14px;padding:10px 0;background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--rule)}
  .sv-inline .space.sub .scene .zeros10 b{margin:0;min-width:1.2em}
}
@media (prefers-reduced-motion:reduce){
  .space.sub .step{opacity:1}
  .space.sub .scene:not(.is-active)>*{opacity:1}
}