/* ============================================================
   MUKIAI v2「最後まで宇宙」の見た目（2026-09-30 代表決定）
   top.css のあとに読み、<body class="space"> のページだけに効く。ほかのページへ広げるときは、
   body に class="space" を付け、この CSS と space.js を読み、after-hero の先頭に .space-layer を置く。
   規律（ヒーローと同じ）：空は黒 #03060E。光るのは本当に光るものだけ（星・月・地球の縁・街明かり・細い線）。
   星雲やもやは足さない。面は半透明のガラス、区切りは細い線。ブランド色は 紺 #1A2B5F／白／#3B82F6→#06B6D4。
   ============================================================ */
.space{
  --sky:#03060E; --txt:#F5F7FC; --txt-2:#C9D2EA; --txt-3:#93A0C4;
  --glass:rgba(10,17,38,.58); --glass-hi:rgba(255,255,255,.06); --hair:rgba(201,210,234,.16); --hair-2:rgba(201,210,234,.3);
  --soft:#8DB8FF;
  background:var(--sky);color:var(--txt);
}
html:has(body.space){background:#03060E}

/* ---------------- 背景：ヒーローと地続きの星空（after-hero の中で画面に張りつく 2D の層） ---------------- */
.space .after-hero{background:linear-gradient(180deg,rgba(3,6,14,0) 0,rgba(3,6,14,.0) 6vh,#03060E 46vh);border-radius:0;box-shadow:none}
.space-layer{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;overflow:hidden}
.space-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.space .sec,.space .sec-end{background:transparent!important;border-radius:0!important;box-shadow:none!important;margin-top:0!important;color:var(--txt)}
.space .sec{position:relative;z-index:1}
.space .horizon{display:none}
.space #why{padding-top:clamp(180px,34vh,340px)}

/* 文字の後ろだけ少し暗くする（星が文字にかからないように） */
.space .h2,.space .lead,.space .why-close,.space .sec-call,.space .eyebrow{text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.space .lead{color:var(--txt-2)}
.space .eyebrow{color:var(--txt-3)}
.space .ph-dot{background:rgba(201,210,234,.22)}
.space .ph-dot::after{background:linear-gradient(100deg,#fff,#8DB8FF)}
.space .arrow-link{color:#fff}
.space .arrow-link .al-text{border-bottom-color:rgba(141,184,255,.8)}

/* ガラスの面（共通） */
.space .reason,.space .fact,.space .step,.space .order-why,.space .kpi,.space .road,.space .asks li,.space .takes li,.space .conds li,.space .plain,.space .pcard-body{
  background:linear-gradient(160deg,var(--glass-hi),rgba(255,255,255,.015)),var(--glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 rgba(255,255,255,.07);color:var(--txt)}
.space .reason p,.space .fact p:not(.fact-sky),.space .step p:not(.step-k),.space .order-why p:not(.order-k),.space .road-head p,.space .plain p,.space .consult-note,.space .cond-head p,.space .cond-foot{color:var(--txt-2)}
.space .fact-sky,.space .step-k,.space .svc-tag,.space .take-k,.space .reason .answer b{color:var(--soft);background:none;-webkit-text-fill-color:currentColor}
.space .reason .roll-num{color:var(--soft)}

/* ボタン：暗い面の上の形に統一 */
.space .btn--solid,.space .btn--white{background:#F5F7FC;color:var(--navy);box-shadow:none}
.space .btn--solid:hover,.space .btn--white:hover{color:#fff}
.space .btn--line,.space .btn--ghost{background:rgba(3,6,14,.4);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.space .btn-note{color:var(--txt-3)}

/* ---------------- ヘッダーと全画面メニュー（ぼかし＋縮小で開く。300ms） ---------------- */
.space .site-header.is-scrolled[data-tone="dark"]{background:linear-gradient(180deg,rgba(3,6,14,.85),rgba(3,6,14,.5) 70%,rgba(3,6,14,0))}
.space .burger{display:block;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--hair-2);flex:none}
.space .mobile-menu{inset:0;top:0;left:0;right:0;border-radius:0;z-index:58;padding:calc(var(--header-h) + 4vh) var(--gutter) 40px;display:flex;flex-direction:column;justify-content:center;gap:0;
  background:rgba(3,6,14,.86);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);color:#fff;box-shadow:none;transform:scale(1.04);filter:blur(8px);transform-origin:50% 40%}
.space .mobile-menu.open{transform:none;filter:none}
.space .mobile-menu>a{font-size:clamp(30px,5.4vw,76px);font-weight:900;letter-spacing:-.02em;line-height:1.25;padding:.12em 0;border:0;max-width:var(--wrap);width:100%;margin-inline:auto;display:flex;align-items:baseline;gap:18px;
  opacity:0;transform:translateY(.5em);transition:opacity 500ms var(--ease-reveal),transform 700ms var(--ease-reveal);transition-delay:calc(var(--i,0) * 50ms + 120ms)}
.space .mobile-menu.open>a{opacity:1;transform:none}
.space .mobile-menu>a small{font-family:var(--font-en);font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--txt-3)}
.space .mobile-menu>a:hover{color:var(--soft)}
.space .mobile-menu>a.mm-sub{font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:0;color:var(--txt-2)}
.space .mm-cta{max-width:var(--wrap);width:100%;margin:34px auto 0;display:flex;flex-wrap:wrap;gap:12px}
.space .menu-dim{display:none}
.space .site-header{z-index:61}
@media (min-width:761px){.space .header-cta{margin-left:0}.space .nav{margin-left:auto}}

/* ---------------- 01 why ---------------- */
.space .why-fig{box-shadow:0 0 0 1px var(--hair),0 40px 90px -50px #000}
.space .reason::before{background:radial-gradient(240px 240px at var(--lx,50%) var(--ly,0%),rgba(90,150,255,.16),transparent 70%)}
.space .reason p{color:var(--txt-2)}
.space .reason .answer{border-top-color:var(--hair-2);color:#fff}

/* ---------------- 02 beside：単語ごとに右下から（goal 型） ---------------- */
.space .sec--dawn{padding-bottom:clamp(60px,8vw,120px)}
.rw .w{display:inline-block;transform:translate(200px,115px);opacity:0;transition:transform var(--dur-reveal) var(--ease-reveal),opacity 500ms ease;transition-delay:calc(var(--i) * var(--stagger-word))}
.rw.in .w{transform:none;opacity:1}
.space .facts{margin-top:clamp(56px,7vw,110px)}
.space .fact h3{color:#fff}
.space .beside-note{background:rgba(255,255,255,.06)}

/* ---------------- reel：小さな枠が広がって止まり、また流れていく ---------------- */
.reel{position:relative;z-index:1;padding:clamp(40px,6vw,90px) 0 0}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.reel-head h2{font-size:clamp(26px,3.2vw,48px);font-weight:900;line-height:1.25;letter-spacing:-.02em;max-width:18em}
.reel-head p{max-width:24em;font-size:14px;line-height:1.9;color:var(--txt-2)}
.reel-track{position:relative;height:calc(100vh + 1700px);margin-top:36px}
.reel-box{position:absolute;left:0;right:0;top:0;height:100vh;display:grid;place-items:center;will-change:transform;transform-origin:50% 50%}
.reel-frame{position:relative;width:min(1560px,calc(100vw - 48px));height:min(calc(100vh - 110px),calc((100vw - 48px) * .6));margin-top:54px;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(8,14,32,.78);box-shadow:inset 0 0 0 1px var(--hair-2),0 60px 140px -60px #000}
.reel-box .deco{color:#fff}
.reel-box .deco:nth-of-type(1){left:-20px;top:-20px}.reel-box .deco:nth-of-type(2){right:-20px;top:-20px}.reel-box .deco:nth-of-type(3){left:-20px;bottom:-20px}.reel-box .deco:nth-of-type(4){right:-20px;bottom:-20px}
.reel-media{position:absolute;inset:0;display:flex;flex-direction:column}
.reel-media video{width:100%;height:100%;object-fit:cover}
/* --- 差し込み口の中身（本物の動画が来るまでの、自作のループ） --- */
.demo{display:flex;flex-direction:column;height:100%;padding:clamp(18px,2.4vw,40px);gap:clamp(14px,2vw,28px)}
.demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.demo-tab{position:relative;padding:12px 14px 14px;border-radius:12px;font-size:clamp(12px,1vw,15px);font-weight:700;line-height:1.5;color:var(--txt-3);box-shadow:inset 0 0 0 1px var(--hair);background:transparent;border:0;text-align:left;cursor:pointer;font-family:inherit;transition:color 400ms,background-color 400ms}
.demo-tab b{display:block;font-family:var(--font-en);font-size:11px;letter-spacing:.16em;margin-bottom:2px;color:var(--soft)}
.demo-tab i{position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.demo-tab i::after{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left}
.demo-tab.on{color:#fff;background:rgba(255,255,255,.06)}
.demo-tab.on i::after{animation:demoBar var(--demo-dur,7s) linear forwards}
@keyframes demoBar{to{transform:scaleX(1)}}
.demo-stage{position:relative;flex:1;min-height:0}
.demo-scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2.4vw,44px);align-items:center;opacity:0;visibility:hidden;transition:opacity 500ms ease,visibility 0s 500ms}
.demo-scene.on{opacity:1;visibility:visible;transition:opacity 600ms ease 100ms,visibility 0s}
.demo-col{height:100%;display:flex;flex-direction:column;min-height:0}
.demo-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--txt-3);margin-bottom:12px}
.demo-card{position:relative;flex:1;min-height:0;border-radius:16px;padding:clamp(14px,1.6vw,26px);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:10px;overflow:hidden}
.demo-card h4{margin:0;font-size:clamp(14px,1.2vw,18px);font-weight:900}
/* 入れるもの */
.wave{display:flex;align-items:center;gap:4px;flex:1;min-height:40px}
.wave i{flex:1;max-width:8px;border-radius:4px;background:linear-gradient(180deg,#8DB8FF,#3B82F6);height:20%;animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -90ms)}
@keyframes wave{to{height:calc(30% + var(--h,40%))}}
.receipt{align-self:center;width:min(46%,190px);flex:1;min-height:0;border-radius:6px 6px 0 0;background:#EEF2FB;padding:14px 12px;display:flex;flex-direction:column;gap:8px;transform:rotate(-4deg);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at 50% 100%,#0000 90deg,#000 0) bottom/12px 8px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from 135deg at 50% 0,#0000 90deg,#000 0) bottom/12px 8px repeat-x}
.receipt i{height:6px;border-radius:3px;background:#A9B6D6}
.receipt i:nth-child(1){width:60%;height:9px;background:#1A2B5F}.receipt i:nth-child(3){width:80%}.receipt i:nth-child(4){width:50%}.receipt i:nth-child(6){width:70%;margin-top:auto;background:#1A2B5F}
.scan{position:absolute;left:8%;right:8%;top:20%;height:2px;background:var(--grad);box-shadow:0 0 14px #3B82F6;opacity:0}
.demo-scene.on .scan{animation:scan 2.2s var(--ease-reveal) .4s 2}
@keyframes scan{0%{top:18%;opacity:1}100%{top:86%;opacity:0}}
.bits{position:relative;flex:1;min-height:0}
.bits span{position:absolute;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hair-2);white-space:nowrap;animation:drift2 5s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -700ms)}
@keyframes drift2{to{transform:translate(8px,-10px) rotate(3deg)}}
/* 自動で起きること */
.demo-mid{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center;min-width:clamp(120px,15vw,230px);position:relative}
.demo-mid::before{content:"";position:absolute;left:-14px;right:-14px;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--hair-2) 20%,var(--hair-2) 80%,transparent)}
.demo-step{position:relative;padding:10px 14px;border-radius:999px;font-size:clamp(11.5px,.95vw,14px);font-weight:700;text-align:center;background:#060B1C;box-shadow:inset 0 0 0 1px var(--hair);color:var(--txt-3);transition:color 400ms,box-shadow 400ms,background-color 400ms;transition-delay:calc(var(--k) * 900ms + 900ms)}
.demo-scene.on .demo-step{color:#fff;box-shadow:inset 0 0 0 1px rgba(141,184,255,.8),0 0 18px rgba(59,130,246,.45);background:#0B1736}
/* 出てくるもの */
.out-row{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity 500ms ease,transform 700ms var(--ease-reveal);transition-delay:calc(var(--k) * 260ms + 3400ms)}
.demo-scene.on .out-row{opacity:1;transform:none}
.out-row b{flex:none;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(201,210,234,.7)}
.out-row i{height:8px;border-radius:4px;background:rgba(201,210,234,.5);flex:var(--f,1)}
.out-row i+i{background:rgba(141,184,255,.7);flex:var(--g,.4)}
.out-row.th i{background:#fff;height:6px;opacity:.5}
.out-sep{height:1px;background:var(--hair);margin:4px 0}
.demo-foot{font-size:12px;color:var(--txt-3);text-align:right}

/* ---------------- 03 process ---------------- */
.space .step{opacity:.4}
.space .step.on{opacity:1;box-shadow:inset 0 0 0 1px rgba(141,184,255,.55),inset 0 1px 0 rgba(255,255,255,.1),0 0 60px -20px rgba(59,130,246,.5)}
.space .steps-line{background:var(--hair)}
.space .step .phase{background:#060B1C;box-shadow:0 0 0 1px var(--hair-2)}
.space .ph-base{fill:#111C3D}.space .ph-lit{fill:#54658F}
.space .step.on .ph-base{fill:#111C3D}.space .step.on .ph-lit{fill:#F3F6FF}
.space .step.on .phase{box-shadow:0 0 0 1px rgba(160,200,255,.6),0 0 22px rgba(160,200,255,.45)}
.space .process-hint{color:var(--txt-3)}
.space .order-k{color:#fff}

/* ---------------- 04 case ---------------- */
.space .kpi-num{color:#fff}
.space .kpi--accent{background:linear-gradient(150deg,rgba(26,43,95,.9),rgba(20,52,120,.85));box-shadow:inset 0 0 0 1px rgba(141,184,255,.5)}
.space .kpi-sub{color:#9EE7F3;background:none;-webkit-text-fill-color:currentColor;filter:none}
.space .kpi-note{color:var(--txt-2)}
.space .road-track{background:repeating-linear-gradient(90deg,rgba(141,184,255,.5) 0 6px,transparent 6px 12px)}
.space .road-done{background:#fff;box-shadow:0 0 12px rgba(160,200,255,.7)}
.space .road-today{background:var(--soft)}.space .road-today span{color:#fff}
.space .road-items .done span{background:#fff;color:var(--navy)}
.space .road-items .plan span{box-shadow:inset 0 0 0 1px rgba(141,184,255,.6);color:var(--soft)}
.space .road-items .plan b{color:var(--txt-3)}

/* ---------------- 05 卒業：地球と月がもう一度出る ---------------- */
.earth-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.space .grad-sticky{border-radius:0}
.space .grad-after{padding-bottom:clamp(60px,8vw,120px)}

/* ---------------- 06 サービス：カード群（大きな絵＋見出しの文字ロール＋ホバーで右へ滑る） ---------------- */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px) 32px;margin-top:clamp(40px,5vw,72px)}
.pcard{display:block;text-decoration:none;color:#fff;will-change:transform}
.pcard--wide{grid-column:1/-1}
.pcard-img{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 0 0 1px var(--hair)}
.pcard--wide .pcard-img{aspect-ratio:21/9}
.pcard-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06) translateY(var(--py,0px));transition:filter 600ms ease}
.pcard:hover .pcard-img img{filter:brightness(1.12)}
.pcard-meta{margin:18px 0 8px;font-family:var(--font-en);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.pcard-title{position:relative;display:flex;align-items:center;overflow:hidden;font-size:clamp(22px,2.3vw,36px);font-weight:900;letter-spacing:-.02em;line-height:1.3}
.pcard:not(.pcard--wide) .pcard-title{font-size:clamp(20px,1.9vw,28px)}
.pcard-desc{margin-top:10px;max-width:40em;font-size:15px;line-height:1.85;color:var(--txt-2)}
.pcard .svc-price{margin-top:12px;color:#fff;font-size:clamp(18px,1.6vw,24px)}
.pcard .svc-price small{color:var(--txt-3)}
.pcard .svc-fine{color:var(--txt-3)}
/* 見出しの文字ロール（1.2秒 expo.inOut、10ms ずらし） */
.rollt{display:inline-flex;flex-wrap:wrap}
.rollt .col{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3;vertical-align:top}
.rollt .stack{display:block;transition:transform var(--dur-roll) var(--ease-roll);transition-delay:calc(var(--i) * var(--stagger-roll))}
.rollt .stack>i{display:block;height:1.3em;font-style:normal;white-space:pre}
.rollt.in .stack{transform:translateY(-5.2em)}

/* ---------------- 07 consult / 08 honest ---------------- */
.space .consult-fig{box-shadow:0 0 0 1px var(--hair),0 40px 90px -50px #000}
.space .ask-k{background:#F5F7FC;color:var(--navy);box-shadow:none}
.space .takes li{background:linear-gradient(160deg,var(--glass-hi),rgba(255,255,255,.015)),var(--glass)}
.space .plain{border:0;background:rgba(6,11,28,.8)}
.space .zeros li{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair)}
.space .zeros b{color:#fff}
.space .plain .plain-foot{color:var(--txt-3)}

/* ---------------- 09 最後の呼びかけ：地平線の地球 ---------------- */
.space .end-sticky{background:transparent}
.space .end-inner{z-index:2}
.space .end-title,.space .end-lead,.space .end-sub{text-shadow:0 0 26px rgba(3,6,14,.95),0 0 8px rgba(3,6,14,.9)}
.space .end-lead,.space .end-sub{color:var(--txt-2)}
.space .orbit-deco{opacity:.35}

/* ---------------- フッター：暗いガラスの面が上に乗る ---------------- */
.space .site-footer{background:linear-gradient(180deg,#0A1226 0%,#060B1A 100%);color:#fff;border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 rgba(141,184,255,.4),0 -40px 80px -40px #000}
.space .foot-nav a{color:var(--txt-2)}.space .foot-nav a:hover{color:#fff}
.space .foot-info div{border-bottom-color:var(--hair)}
.space .foot-info dt,.space .foot-credit,.space .foot-bottom{color:var(--txt-3)}
.space .foot-info dd{color:var(--txt-2)}
.space .foot-info a{color:var(--soft)}
.scrollnav{margin-top:56px;padding:26px 0 8px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:24px}
.scrollnav small{display:block;font-family:var(--font-en);font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--txt-3)}
.scrollnav b{font-size:clamp(20px,2vw,28px);font-weight:900}
.scrollnav .bar{position:relative;width:min(240px,34vw);height:2px;background:rgba(255,255,255,.16)}
.scrollnav .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad)}

/* スマホの固定バー */
@media (max-width:760px){
  .space .fixed-bar{background:rgba(3,6,14,.86);box-shadow:inset 0 1px 0 var(--hair-2)}
}

/* ---------------- ページ遷移：押した絵が全面に広がり、暗転して移る ---------------- */
#fly{position:fixed;z-index:120;pointer-events:none;display:none;overflow:hidden;border-radius:16px;background:#03060E center/cover no-repeat;will-change:left,top,width,height,filter}
#flyBlack{position:fixed;inset:0;z-index:121;background:#03060E;opacity:0;pointer-events:none;transition:opacity 320ms ease}
.fly-out main>*:not(#hero),.fly-out .site-footer{transition:opacity 500ms ease}
.fly-out .pcard:not(.picked),.fly-out .sec .wrap>*:not(.pcards){opacity:.25;transition:opacity 500ms ease}

/* ---------------- レスポンシブ ---------------- */
@media (max-width:1080px){.pcards{grid-template-columns:1fr}.pcard--wide .pcard-img{aspect-ratio:16/10}}
@media (max-width:860px){
  .reel-head{flex-direction:column;align-items:flex-start}
  .reel-track{height:auto;margin-top:24px}
  .reel-box{position:relative;height:auto;transform:none!important;display:block}
  .reel-frame{width:calc(100vw - var(--gutter)*2);height:auto;margin:0 auto;aspect-ratio:auto}
  .reel-media{position:relative}
  .demo{padding:14px;gap:12px}
  .demo-tabs{grid-template-columns:1fr;gap:6px}
  .demo-tab{padding:9px 12px 12px;font-size:12.5px}
  .demo-tab b{display:inline;margin-right:8px}
  .demo-stage{min-height:430px}
  .demo-scene{grid-template-columns:1fr;grid-template-rows:1fr auto 1.2fr;gap:10px}
  .demo-mid{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
  .demo-mid::before{display:none}
  .demo-step{padding:6px 10px;font-size:11px}
  .demo-k{margin-bottom:6px}
  .space .glass,.space .reason,.space .fact,.space .step,.space .kpi,.space .road{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,17,38,.86)}
}
@media (prefers-reduced-motion:reduce){
  .rw .w{transform:none!important;opacity:1!important}
  .reel-track{height:auto}.reel-box{position:relative;height:auto;transform:none!important}
  .reel-frame{height:70vh}
  .demo-scene{position:relative;opacity:1;visibility:visible;margin-bottom:24px}
  .demo-stage{display:block}
  .out-row{opacity:1;transform:none}
  .rollt .stack{transform:translateY(-5.2em)}
  .wave i,.bits span{animation:none}
}

/* 動く3Dのサムネイルを入れる箱（01 と 07 の図。06 のカードは .pcard-img が箱） */
.space .why-fig,.space .consult-fig{position:relative}
.pcard-img .thumb3d>img{transform:none}

/* ---------------- reel の動画（2026-09-30）。差し込み口に data-video があるとき ---------------- */
.reel-media.has-video .demo{display:none}
.reel-frame:has(.has-video){aspect-ratio:16/9;height:auto;width:min(1560px,calc(100vw - 48px),calc((100vh - 110px) * 16 / 9))}
.reel-video{position:absolute;inset:0;background:#0A0F1E}
.reel-video video{width:100%;height:100%;object-fit:cover;display:block}
.reel-ctl{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;opacity:.0;transition:opacity 400ms ease}
.reel-box.in .reel-ctl,.reel-media.is-playing .reel-ctl,.reel-video:hover .reel-ctl,.reel-ctl:focus-within{opacity:1}
.reel-btn{font:inherit;font-size:13px;font-weight:700;color:#fff;background:rgba(3,6,14,.62);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color 300ms}
.reel-btn:hover{background:rgba(59,130,246,.85)}
.reel-btn[aria-pressed="true"]{background:#F5F7FC;color:#1A2B5F}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;align-items:center;gap:12px;font:inherit;font-weight:700;font-size:15px;color:#1A2B5F;background:#F5F7FC;border:0;border-radius:999px;padding:14px 24px 14px 18px;cursor:pointer;box-shadow:0 20px 50px -20px #000}
.reel-play span{width:0;height:0;border-left:13px solid #1A2B5F;border-top:8px solid transparent;border-bottom:8px solid transparent}
.reel-media.is-manual:not(.is-playing) .reel-play{display:inline-flex}
/* 末尾の「次に読む」：線はホバーで伸びる（スクロールでは動かない） */
.scrollnav .bar i{width:0;transition:width 600ms var(--ease-reveal)}
.scrollnav:hover .bar i,.scrollnav:focus-visible .bar i{width:100%}
@media (max-width:860px){
  .reel-frame:has(.has-video){width:calc(100vw - var(--gutter)*2);aspect-ratio:16/9}
  .reel-media.has-video{position:absolute;inset:0}
  .reel-ctl{opacity:1;right:8px;bottom:8px}.reel-btn{font-size:12px;padding:7px 12px}
}

/* reel の動画：音が出せていない間の案内（枠のどこを押しても音が出る） */
.reel-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;align-items:center;gap:10px;font:inherit;font-size:14px;font-weight:700;color:#1A2B5F;background:#F5F7FC;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;box-shadow:0 16px 40px -16px #000}
.reel-hint::before{content:"";width:9px;height:9px;border-radius:50%;background:#3B82F6;animation:reelHint 1.4s ease-in-out infinite}
@keyframes reelHint{50%{transform:scale(1.7);opacity:.35}}
.reel-media.needs-tap .reel-hint{display:inline-flex}
.reel-media.needs-tap .reel-video{cursor:pointer}
@media (max-width:860px){.reel-hint{bottom:auto;top:10px;font-size:12px;padding:8px 14px}}

/* 並び替え（2026-09-30）：01 → 動画 → 02。01 の結びから動画の枠が広がり始めるまでの間を詰め、動画のあと 02 へは間を空ける */
.space #why{padding-bottom:clamp(24px,3vw,48px)}
.space #reel{padding-top:0}
.space #reel .reel-track{margin-top:0}
.space #reel + #beside{padding-top:clamp(72px,9vw,150px)}
@media (max-width:860px){.space #why{padding-bottom:40px}.space #reel{padding-bottom:8px}}