/* ============================================================
   MUKIAI トップ v3「営業の流れで組み直す」（story.css）2026-10-09
   設計：Fable の設計図（読者の疑問 → セクション）。
     00 ヒーロー → 01 社長の心配（#worry）→ 02 社員はもう使っている（#why）→ 03 個人で止まる／会社に残る（#stop）
     → 04 実績（#case）＋インラインCTA → 05 MUKIAI伴走支援とは（#what）→ 06 進め方 → 07 卒業 → 08 サービス → 情報の扱い → 09 無料相談 → 10 先にお伝えしておくこと → 11 最後の呼びかけ
   読み込み：index-v2.html だけ。いちばん最後（read.css のあと）。
   規律：space.css・read.css と同じ（空は黒、面は使わず線と余白で区切る、文字の大きさは type.css の段だけ）。
   出方は top.js が見ている既存のクラスを使う（.rv[data-split] / .fill-in / [data-roll] / .cta-rise、フェードは read.css の .up）。
   ============================================================ */

/* ---------------- 演出の引き算 ---------------- */
.moonlet,.phase-rail,.orbit-deco,.tide{display:none!important}

/* ---------------- 00 ヒーロー：見出しの下の1行 ---------------- */
.hero-call{font-size:clamp(16px,1.25vw,18px)}
.hero-sub{margin-top:14px;max-width:26em;font-size:clamp(18px,1.6vw,26px);font-weight:500;line-height:1.6;letter-spacing:.02em;color:rgba(245,247,252,.92);
  text-shadow:0 0 22px rgba(3,6,14,.9),0 0 6px rgba(3,6,14,.8)}
.hero-tide .hero-sub{opacity:0}   /* 出す時刻は top.js が予約ボタンに合わせる */

/* ---------------- セクションの間（01〜03 はひと続きの話なので、間を少し詰める） ---------------- */
.space #why,.space.read #why{padding-top:clamp(64px,8vw,128px);padding-bottom:clamp(64px,8vw,128px)}
.space #worry{padding-top:clamp(180px,34vh,340px);padding-bottom:clamp(64px,8vw,128px)}   /* ヒーローの次の面（旧 #why の値） */
.space #stop{padding-top:clamp(64px,8vw,128px)}

/* ---------------- 01 社長が心配すること ---------------- */
.space.read .worries{margin-top:clamp(36px,4.4vw,64px)}
.worry-door{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:clamp(14px,1.6vw,22px);padding:6px 0;text-decoration:none;font-size:var(--t4);line-height:var(--lh4)}
.worry-door-k{font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.12em;color:var(--txt-3)}
.worry-door-t{font-weight:700;color:#fff}
.worry-door-go{font-size:var(--t5);font-weight:700;color:#8DB8FF;border-bottom:1.5px solid rgba(141,184,255,.7);transition:color 300ms}
.worry-door-go::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.5em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.worry-door:hover .worry-door-go{color:#fff}

/* ---------------- 数字の段（02・03 で共通。04 の実績と同じ型で、3つを同じ幅に） ---------------- */
.space.read .kpis--even{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,4vw,56px)}
.space.read .kpis--even .kpi-num{font-size:clamp(48px,5.2vw,88px)}
.space.read .kpis--even .kpi-cap{margin-top:12px}
.space.read .kpis--even .kpi-note,.space.read .stat-line .kpi-note{margin-top:8px;color:var(--txt-3)}

/* 1つの数字と、その数字が言うこと */
.stat-line{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,72px);
  padding:clamp(24px,3vw,44px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.space.read .stat-line .kpi-num{font-size:clamp(56px,6.2vw,104px)}
.space.read .stat-line .kpi-cap{margin-top:10px}
.stat-line-b h3{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.stat-line-b p:not(.kpi-note){margin-top:10px;font-size:var(--t4);line-height:var(--lh4);font-weight:500;color:var(--body);max-width:var(--measure)}

/* ---------------- 02 社員はもう使い始めている ---------------- */
.why-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.why-point{padding:clamp(24px,3vw,44px) clamp(20px,2.6vw,40px) 0 0}
.why-point+.why-point{padding-left:clamp(20px,2.6vw,40px);border-left:1px solid var(--rule)}
.why-point h3{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.why-point p{margin-top:12px;font-size:var(--t4);line-height:var(--lh4);font-weight:500;color:var(--body);max-width:var(--measure)}

/* ---------------- 03 個人で止まる会社と、会社に残る会社 ---------------- */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.vs-col{padding:clamp(22px,2.6vw,36px) clamp(20px,2.6vw,40px) 0 0}
.vs-col+.vs-col{padding-left:clamp(20px,2.6vw,40px);border-left:1px solid var(--rule)}
.vs-k{font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.12em;color:var(--txt-3)}
.vs-col--stay .vs-k{color:#8DB8FF}
.vs-list{margin-top:12px}
.vs-list li{position:relative;padding:12px 0 12px 1.5em;border-top:1px solid var(--hair);font-size:var(--t4);line-height:var(--lh4);font-weight:700}
.vs-col--stop .vs-list li{color:var(--txt-2)}
.vs-col--stay .vs-list li{color:#fff}
.vs-list li::before{content:"";position:absolute;left:.15em;top:calc(12px + .62em);width:.62em;height:.62em;border-radius:50%;box-sizing:border-box}
.vs-col--stop .vs-list li::before{border:1.5px solid var(--txt-3)}
.vs-col--stay .vs-list li::before{background:#8DB8FF;box-shadow:0 0 10px rgba(141,184,255,.6)}
.causes-h{margin-top:clamp(56px,7vw,110px)}
@media (min-width:861px){.space.read #stop .why-head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}   /* 見出しが「AIが個人で止まる会社と、／会社に残る会社」の2行に収まる幅 */
/* 折りたたみ：研修で起きがちなこと */
.more{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,1.8vw,24px) 0;
  font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";flex:none;width:20px;height:20px;transition:transform 300ms var(--ease-reveal);
  background:linear-gradient(#8DB8FF,#8DB8FF) center/100% 2px no-repeat,linear-gradient(#8DB8FF,#8DB8FF) center/2px 100% no-repeat}
.more[open]>summary::after{transform:rotate(45deg)}
.more>summary:hover{color:#8DB8FF}
.more-body{padding-bottom:clamp(20px,2.4vw,32px)}
.more-lead{font-size:var(--t4);line-height:var(--lh4);font-weight:500;color:var(--body);max-width:var(--measure)}
.space.read .more .reasons{margin-top:clamp(16px,2vw,28px)}
.space.read .more .reason:last-child{border-bottom:0}

/* ---------------- 04 実績のあとのインラインCTA ---------------- */
.inline-cta{margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--rule)}
.inline-cta-lead{margin-bottom:clamp(18px,2vw,28px);font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}

/* ---------------- 05 MUKIAI伴走支援とは ---------------- */
/* M・U・K・I＋AI：v4（2026-10-09）でサービスページと同じ部品 .muki に替えた。見た目は story-pages.css、動きは story.js */
.pillars-h{margin-top:clamp(64px,8vw,128px)}
.space.read .pillars{margin-top:clamp(28px,3.4vw,48px)}
.what-time{margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--rule);font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff;max-width:30em}
.what-time b{color:#8DB8FF}
.what-foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.what-moon-h{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.what-moon p:not(.what-moon-h){margin-top:14px;font-size:var(--t4);line-height:var(--lh4);font-weight:500;color:var(--body);max-width:var(--measure)}
.what-reel{--co:12px}
.what-reel-box{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0A0F1E url(video/mukiai-reel-poster.jpg) center/cover no-repeat;box-shadow:0 0 0 1px var(--hair-2),0 40px 90px -50px #000}
.what-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 音：止められて音なしで流れている間の「クリック／タップで音が出ます」は、枠の真ん中に大きめに出す（右下の操作ボタンと重ならないように）。
   枠が伸び縮みしている間も、案内とボタンは同じ大きさに見せる：枠の倍率の逆数（--ik、story.js が入れる）で縮め戻す。止まっているときは 1 */
.space.read .what-reel .reel-hint{top:50%;bottom:auto;transform:translate(-50%,-50%) scale(var(--ik,1));font-size:15px;padding:13px 22px;box-shadow:0 0 0 6px rgba(141,184,255,.28),0 16px 40px -16px #000}
.what-reel .reel-play{transform:translate(-50%,-50%) scale(var(--ik,1))}
.what-reel .reel-ctl{right:var(--co);bottom:var(--co);transform-origin:100% 100%;transform:translate(calc(var(--co) - var(--co) * var(--ik,1)),calc(var(--co) - var(--co) * var(--ik,1))) scale(var(--ik,1))}
.what-reel figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:12px;font-size:var(--t5);line-height:var(--lh5);color:var(--sub)}
.what-reel figcaption b{font-weight:800;color:#fff}

/* ---------------- 05 動画：スクロールに合わせて、小さな枠から画面いっぱいへ（v4 2026-10-09） ----------------
   区間 .reel-pin（240vh）の中で .reel-stage が画面に張りつく。張りついてからの進み具合 p（0→1）で、
     黒い枠 .reel-curtain が小さな枠の位置から画面全体（舞台の幅 × 100vh、スマホは 100svh）へ広がり、角丸は 24px → 0。
     動画 .what-reel-box は同じ位置から、画面に収まる一番大きな 16:9 へ広がる（動画の文字が切れないよう、はみ出させない）。
     まわりの文字は p に合わせて薄くなる。p が 1 になったら、全画面のまましばらく見せてから区間を抜ける。動かすのは transform だけ（story.js）。
   動画の再生と音は space.js のまま（見えたら音ありで再生を試し、止められたら音なしで流して「クリック／タップで音が出ます」）。
   story.js が .is-armed を付けたときだけ効く。動きを減らす設定・画面が低すぎて収まらないときは付かない＝今までどおりの小さな枠のまま */
.reel-pin{margin-top:clamp(64px,8vw,128px)}
.reel-curtain{display:none}
.reel-pin.is-armed{height:240vh;margin-top:calc(clamp(64px,8vw,128px) - var(--pull,0px))}   /* --pull：張りついたとき中身が画面の真ん中に来るよう舞台の上に空く分。上の文字との間は今までどおり */
.reel-pin.is-armed .reel-stage{position:sticky;top:0;z-index:2;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h);pointer-events:none}
.reel-pin.is-armed .reel-stage>.wrap{position:static;z-index:auto}   /* 枠の位置の基準と重なりの順を舞台にそろえる（舞台は flex なので、z-index が残ると中の動画が黒い枠の下に閉じ込められる） */
.reel-pin.is-armed .what-foot{pointer-events:auto}
.reel-pin.is-armed .what-reel.up{transform:none;transition:opacity 600ms var(--ease-reveal);transition-delay:calc(var(--i,0) * 80ms)}   /* 枠の基準がずれないよう、せり上がりは付けず薄く出すだけ */
.reel-pin.is-armed .what-reel::before{content:"";display:block;aspect-ratio:16/9;border-radius:24px;background:#0A0F1E;box-shadow:0 0 0 1px var(--hair-2),0 40px 90px -50px #000}   /* 元の枠の場所（動画は舞台の上に乗せて動かす） */
.reel-pin.is-armed .what-reel-box{position:absolute;left:0;top:0;z-index:3;aspect-ratio:auto;box-shadow:none;transform-origin:0 0;will-change:transform}
.reel-pin.is-armed .reel-curtain{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;background:#000;transform-origin:0 0;will-change:transform;opacity:0;pointer-events:none}
.reel-pin.is-armed .reel-ctl,.reel-pin.is-armed .reel-hint,.reel-pin.is-armed .reel-play{will-change:transform}
/* 全画面の間だけ、ヘッダーを上へ逃がす（動画の上端にかぶらないように。区間を抜けたら戻る） */
html.reel-full .site-header{transform:translateY(-100%)}

/* ---------------- 11 最後の呼びかけ：LINE への道をはっきり ---------------- */
.end-line a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(141,184,255,.8);text-underline-offset:4px;text-decoration-thickness:1.5px}
.end-line a:hover{color:#8DB8FF}

/* ---------------- 幅ごと ---------------- */
@media (max-width:860px){
  .space.read .kpis--even{grid-template-columns:1fr}
  .stat-line,.why-points,.vs,.what-foot{grid-template-columns:1fr}
  .why-point,.why-point+.why-point,.vs-col,.vs-col+.vs-col{padding:22px 0 0;border-left:0}
  .why-point+.why-point,.vs-col+.vs-col{margin-top:22px;border-top:1px solid var(--rule)}
  .stat-line{gap:14px}
  .space.read .what-reel .reel-hint{top:50%;font-size:13px;padding:10px 16px}
  .what-reel{--co:8px}
}
@media (max-width:760px){
  .inline-cta .btn{width:100%}
  .space.read .kpis--even .kpi-num,.space.read .stat-line .kpi-num{font-size:clamp(48px,14vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-tide .hero-sub{opacity:1}
}

/* 2026-10-10 サウンドをオンにするボタン（space.js が作る）。動画に着く前に1回押してもらうと、スクロールで音ありで流れる */
.sound-pill{position:fixed;left:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(150,180,255,.45);background:rgba(10,16,36,.82);color:#E8EEFF;font:600 13px/1 inherit;letter-spacing:.04em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;pointer-events:none}
.sound-pill.show{opacity:1;transform:none;pointer-events:auto}
.sound-pill:hover{background:rgba(30,50,110,.9);border-color:rgba(160,200,255,.8)}
.sound-pill.on{border-color:#3B82F6;color:#fff}
.sound-pill.gone{opacity:0;transform:translateY(12px);pointer-events:none}
.sound-pill svg{flex:none}
@media (max-width:760px){.sound-pill{bottom:calc(84px + env(safe-area-inset-bottom));left:12px;padding:9px 14px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.sound-pill{transition:none}}

/* ---------------- v7（2026-10-10）：研修で起きがちなこと（5つ） ----------------
   押して開く折りたたみをやめた。見出しは普通の見出し、中身は最初から場所を取っておき、
   画面に入ったら上から1つずつ、少し下からせり上がって出る（story.js が .is-risen を付ける。一度出たら戻さない）。
   html.rise-on は story.js が動いたときだけ付く。JSなし・reduced-motion では付かないので、最初から全部見えている */
.more--open{border-bottom:0}
.more-h{margin:0;padding:clamp(16px,1.8vw,24px) 0 0;font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.more--open .more-body{padding-top:clamp(6px,.8vw,10px)}
html.rise-on .space.read .more--open .reason{opacity:0;transform:translateY(26px);
  transition:opacity 560ms cubic-bezier(.16,1,.3,1),transform 640ms cubic-bezier(.16,1,.3,1);transition-delay:var(--rise-d,0ms)}
html.rise-on .space.read .more--open .reason.is-risen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rise-on .space.read .more--open .reason{opacity:1;transform:none;transition:none}}