/* 私たちの目指す世界（案・3版）
   入口で PHILOSOPHY・MISSION・VISION の3つを選び、押した絵がそのまま広がって章の画面になる。
   章の中は1画面ずつ止まる6画面（TOP の絵と題 → 本文 → ACTION&STANCE ×3 → 最後と相談・ほかの章）。
   絵の部品（.sc）は入口のバナーと章で同じもの。大きさだけ変えて src/world3.js が並べる。
   JS が無いときは、入口・3章がふつうの縦長のページとして上から順に読める（html.w2js が付いたときだけ章を重ねる）。 */
:root{ --ground:#ffffff; --paper:#efeae0; --ink:#173c2b; --leaf:#2c6b4a; --coral:#e2674c; --red:#ff2a1a; --night:#0d0d0d; --mist:#cfd5d8; --left:max(260px,17vw); }
html:has(body.w2){ scroll-snap-type:none !important; }
html.w2-lock, html.w2-lock body{ overflow:hidden; }
body.world.w2{ background:var(--ground); color:var(--ink); font-family:'Noto Sans JP',sans-serif; }
body.w2 .wd-section::before{ display:none; }

/* ── 絵の部品 ── */
.sc{ position:absolute; left:0; top:0; overflow:hidden; isolation:isolate; }
.sc[data-sc="P0"]{ background:var(--paper); }
.bn .sc[data-sc="P0"]{ background:var(--paper); }
.sc[data-sc="m0"]{ background:#111; }
.sc[data-sc="v0"]{ background:var(--mist); }
.L{ position:absolute; left:0; top:0; transform-origin:0 0; }
.L img{ position:absolute; display:block; left:0; top:0; width:100%; height:100%; }
.L.bg{ z-index:1; } .L.wd{ z-index:2; } .L.pp{ z-index:3; } .L.fx{ z-index:4; pointer-events:none; }
.L.wd.front{ z-index:5; opacity:0; pointer-events:none; }
.bn .L.wd.front{ display:none; }
.L .w{ position:absolute; left:0; top:0; font-family:Inter,sans-serif; font-weight:900; line-height:.78; letter-spacing:-.035em; white-space:nowrap; transform:translate(-50%,-50%); user-select:none; }
.L .w b{ font-weight:900; display:inline-block; }
.L.persp{ perspective:900px; }
.ht{ color:transparent; background:radial-gradient(circle,#123323 0 1.25px,transparent 1.55px) 0 0/4px 4px, var(--leaf); -webkit-background-clip:text; background-clip:text; }
.ht b{ color:transparent; background:inherit; -webkit-background-clip:text; background-clip:text; }
.tex b{ color:transparent; background:url(../img/w2/p_move_tex.webp) center/260% auto, var(--leaf); -webkit-background-clip:text; background-clip:text; }
.tex b:nth-child(2){ background-position:35% 40%; } .tex b:nth-child(3){ background-position:70% 60%; } .tex b:nth-child(4){ background-position:100% 30%; }
.L.sky{ -webkit-mask:url(../img/w2/p3_sky.png) 0 0/100% 100%; mask:url(../img/w2/p3_sky.png) 0 0/100% 100%; }
.cg,.cc{ position:absolute; border-radius:50%; mix-blend-mode:multiply; }
.cg{ background:url(../img/w2/p_move_tex.webp) center/cover, var(--leaf); }
.cc{ background:var(--coral); opacity:.88; }
.route{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route path{ fill:none; stroke:var(--red); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.route circle{ fill:var(--red); }
.seed{ position:absolute; width:.4%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 0 6px rgba(255,255,255,.8); animation:seed 7s linear infinite; }
@keyframes seed{ 0%{ transform:translate(0,0); opacity:0 } 10%{ opacity:1 } 100%{ transform:translate(-1400%,-2600%); opacity:0 } }
.spark{ position:absolute; width:.7%; aspect-ratio:1; border-radius:50%; background:#fff6dc; box-shadow:0 0 14px 4px rgba(255,230,170,.75); animation:spark 2.6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes spark{ 0%{ transform:translate(0,0) scale(1); opacity:0 } 15%{ opacity:1 } 100%{ transform:translate(-980%,-2230%) scale(.25); opacity:0 } }

/* ── 入口 ── */
.w2-entry{ position:relative; background:var(--ground); }
.en-head{ position:relative; padding:96px 5vw 0 var(--left); }
.en-k{ margin:0 0 14px; font:600 12px Inter,sans-serif; letter-spacing:.42em; color:var(--leaf); }
.en-head h1{ margin:0; font-weight:900; color:var(--ink); }
.en-en{ display:block; margin-bottom:10px; font:400 12px Inter,sans-serif; letter-spacing:.42em; text-transform:uppercase; color:#3d5a4b; }
.en-ja{ display:block; font-size:clamp(30px,3.3vw,52px); line-height:1.2; letter-spacing:.01em; }
.en-lede{ margin:12px 0 0; font-weight:500; font-size:14px; line-height:1.9; color:#2b3f35; }
.en-grid{ display:grid; grid-template-columns:1.06fr .94fr; grid-template-rows:minmax(0,1.3fr) minmax(0,1fr); gap:10px;
  height:max(520px,calc(100svh - 300px)); margin:22px 4vw 0 var(--left); }
.bn{ position:relative; display:block; overflow:hidden; border-radius:3px; text-decoration:none; color:inherit; container-type:size; }
.bn-vision{ grid-column:1 / -1; }
.bn-art{ position:absolute; inset:0; display:block; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bn:hover .bn-art{ transform:scale(1.035); }
.bn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.bn-txt{ position:absolute; z-index:5; display:flex; flex-direction:column; pointer-events:none; }
.bn-k{ font:600 12px Inter,sans-serif; letter-spacing:.42em; }
.bn-jp{ margin-top:8px; font-weight:900; line-height:1.45; letter-spacing:.02em; font-size:max(14px,min(2.2cqw,24px)); }
.bn-vision .bn-txt{ right:3.5cqw; bottom:8cqh; text-align:right; align-items:flex-end; color:#fff; text-shadow:0 1px 2px rgba(10,20,30,.55),0 0 16px rgba(10,20,30,.45); }
.bn-mission .bn-txt{ right:4cqw; bottom:7cqh; text-align:right; align-items:flex-end; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.6); }
.bn-philosophy .bn-txt{ right:4cqw; bottom:7cqh; text-align:right; align-items:flex-end; color:var(--ink); text-shadow:0 0 12px var(--paper),0 0 4px var(--paper),0 0 2px var(--paper); }
.bn-mission .bn-jp, .bn-philosophy .bn-jp{ font-size:max(13px,min(3.4cqw,20px)); }
.bn.is-flying{ visibility:hidden; }

.en-fin{ padding:120px 4vw 40px var(--left); scroll-margin-top:96px; }
.en-fin h2{ margin:0; font-weight:900; font-size:clamp(30px,4.2vw,64px); line-height:1.25; color:var(--ink); }
.en-fin .sub{ margin:16px 0 0; font:400 12px Inter,sans-serif; letter-spacing:.32em; color:#3d5a4b; }
.w2-cta{ display:inline-flex; align-items:center; gap:14px; padding:16px 26px; border-radius:999px; background:#fff; color:var(--ink);
  border:1px solid rgba(23,60,43,.3); text-decoration:none; text-shadow:none; font-weight:700; font-size:15px; letter-spacing:.06em; transition:gap .3s ease, border-color .3s ease; pointer-events:auto; }
.w2-cta:hover{ gap:20px; border-color:var(--ink); }
.w2-cta svg{ width:16px; height:16px; }
body.w2 .wd-film-sound{ font-family:'Noto Sans JP',sans-serif; }
.en-film{ background:none; }
/* 動画：上のバナーの並びと同じ左端・右端。16:9 */
body.w2 .wd-video.en-film{ min-height:0; padding:0; margin:0 4vw 110px var(--left); display:block; background:none; }
body.w2 .en-film .wd-video-frame{ position:relative; width:100%; height:auto; aspect-ratio:16/9; max-width:none; max-height:none; margin:0; background:#000; overflow:hidden; }
body.w2 .en-film .wd-video-frame iframe{ position:absolute; inset:0; top:0; left:0; width:100%; height:100%; transform:none; border:0; }

/* ── 章（JS があるときは画面に重ねる） ── */
html.w2js .ch{ position:fixed; inset:0; z-index:15; visibility:hidden; pointer-events:none; }
html.w2js .ch.on{ visibility:visible; pointer-events:auto; }
html.w2js .ch.top{ z-index:16; }
.ch-philosophy{ background:var(--ground); } .ch-mission{ background:var(--night); } .ch-vision{ background:var(--ground); }
html.w2js .ch.anim{ background:transparent; }
.ch-stage{ position:absolute; inset:0; overflow:hidden; z-index:0; }
html:not(.w2js) .ch-stage{ display:none; }
.ch-stage .sc{ visibility:hidden; }
html.w2js .ch:not(.on) .sc{ visibility:hidden !important; }
html.w2js .ch:not(.on) .ch-stage{ display:none; }
.veil{ position:absolute; inset:0; z-index:20; pointer-events:none; opacity:0; }
.ch-philosophy .veil{ background:var(--ground); }
.ch-mission .veil{ background:#000; }
.ch-vision .veil{ background:var(--ground); }
.redline{ position:absolute; left:0; right:0; height:2px; z-index:21; background:var(--red); opacity:0; box-shadow:0 0 12px rgba(255,42,26,.5); }
/* 文の層：1画面ずつ止まる。上のメニューの高さ（上端〜88px）には文を出さない */
html.w2js .ch-scroll{ position:absolute; inset:0; z-index:1; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(transparent 0, transparent 88px, #000 120px); mask-image:linear-gradient(transparent 0, transparent 88px, #000 120px); scrollbar-width:none; }
html.w2js .ch-scroll::-webkit-scrollbar{ display:none; }
html.w2js .ch.anim .ch-scroll, html.w2js .ch.anim .ch-back{ opacity:0; transition:none; }
html.w2js .ch .ch-scroll, html.w2js .ch .ch-back{ transition:opacity .45s ease; }
.pn{ position:relative; height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }
.tx{ position:absolute; }
.tx .lab{ margin:0; font:600 12px Inter,sans-serif; letter-spacing:.42em; }
.tx h2{ margin:10px 0 0; font-weight:900; font-size:clamp(24px,2.6vw,42px); line-height:1.38; letter-spacing:.02em; }
.tx .en{ margin:12px 0 0; font:400 11px Inter,sans-serif; letter-spacing:.5em; }
.tx.ink{ color:var(--ink); text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.95); }
.tx.dark{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.6); }
.tx.head.dark{ background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0)); padding:28px 0 28px 60px; margin-right:-20px; }
.tx.head{ right:6vw; top:132px; text-align:right; }
.ch-vision .tx.head{ top:auto; bottom:12svh; }
.tx.body{ right:6vw; top:50%; transform:translateY(-50%); width:min(36vw,560px); }
.tx.body p{ margin:0 0 1.1em; font-weight:500; font-size:clamp(14px,1.08vw,16.5px); line-height:2.05; letter-spacing:.03em; }
.tx.body p:last-child{ margin-bottom:0; }
.tx.body em{ font-style:normal; font-weight:700; }
.ch-philosophy .tx.body em{ color:var(--leaf); }
.ch-mission .tx.body em{ color:#ffc2bb; }
.ch-vision .tx.body em{ color:#16506e; }
/* ACTION&STANCE の名前：画面の下の帯。帯の地は写真の明るさに合わせた影（箱にはしない） */
.tx.as{ left:0; right:0; bottom:0; padding:16svh 5vw 9svh var(--left); }
.tx.as.dark{ background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.62) 12svh); }
.tx.as.ink{ background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.86) 12svh); }
.ch-vision .tx.as.ink{ background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.88) 12svh); }
.pn-as.up .tx.as{ top:0; bottom:auto; padding:120px 5vw 14svh var(--left); background:linear-gradient(rgba(239,239,239,.9) 70%,rgba(239,239,239,0)); }
.tx.as .e{ margin:0; font:400 12px Inter,sans-serif; letter-spacing:.14em; }
.tx.as .e.red{ color:#ff7b70; }
.tx.as .e.red2{ color:#b5170c; }
.tx.as h3{ margin:8px 0 0; font-weight:900; font-size:clamp(20px,1.9vw,30px); letter-spacing:.04em; }
.tx.end{ left:var(--left); right:5vw; top:120px; bottom:6svh; display:flex; flex-direction:column; align-items:flex-start; }
.tx.end .fin{ margin:0; font-weight:900; font-size:clamp(28px,3.6vw,56px); line-height:1.25; }
.nx{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(860px,100%); height:min(30svh,260px); }
.bn.mini .bn-txt{ left:4cqw; bottom:8cqh; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 14px rgba(0,0,0,.55); }
.bn.mini[data-ch="philosophy"] .bn-txt{ color:var(--ink); text-shadow:0 0 10px var(--paper),0 0 3px var(--paper); }
.ch-back{ position:absolute; z-index:30; left:24px; top:20px; display:inline-flex; align-items:center; gap:6px; padding:9px 16px 9px 12px; border-radius:999px;
  font:600 12px Inter,sans-serif; letter-spacing:.24em; color:var(--ink); background:rgba(255,255,255,.88); border:1px solid rgba(23,60,43,.22); text-decoration:none; }
html:not(.w2js) .ch-back{ display:none; }
/* 場面の印：右端に章の6画面ぶんの短い線。いまの画面だけ長く濃く。押すとその画面へ移る */
.ch-prog{ position:absolute; z-index:30; right:22px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:10px; color:var(--ink); }
.ch-prog i{ display:block; width:10px; height:2px; border-radius:1px; background:currentColor; opacity:.35; cursor:pointer; transition:width .5s ease, opacity .5s ease; box-shadow:0 0 6px rgba(255,255,255,.8); }
.ch-prog i.on{ width:26px; opacity:.95; }
.ch-prog i.as{ height:2px; }
/* 次の場面があるときの合図：右下の小さな下向きの印。ゆっくり上下する */
.ch-next{ position:absolute; z-index:30; right:18px; bottom:24px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink); opacity:.7; transition:opacity .5s ease; pointer-events:none; filter:drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.ch-next::before{ content:''; width:1px; height:28px; background:currentColor; opacity:.6; }
.ch-next svg{ animation:w2nudge 2.4s ease-in-out infinite; }
@keyframes w2nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.ch.is-dark .ch-prog, .ch.is-dark .ch-next{ color:#fff; }
.ch.is-dark .ch-prog i{ box-shadow:0 0 6px rgba(0,0,0,.6); }
.ch.is-dark .ch-next{ filter:drop-shadow(0 0 4px rgba(0,0,0,.7)); }
.ch.is-last .ch-next{ opacity:0; }
html.w2js .ch.anim .ch-prog, html.w2js .ch.anim .ch-next{ opacity:0; }
html:not(.w2js) .ch-prog, html:not(.w2js) .ch-next{ display:none; }
@media (prefers-reduced-motion: reduce){ .ch-next svg{ animation:none; } }

/* 外枠（パンくず・目次）を、下の絵の明るさで読める色にする */
body.w2 .topbar .breadcrumb a, body.w2 .topbar .breadcrumb .current, body.w2 .topbar .breadcrumb .sep{ opacity:1 !important; }
body.w2.w2-ink .topbar .breadcrumb a, body.w2.w2-ink .topbar .breadcrumb .current, body.w2.w2-ink .topbar .breadcrumb .sep, body.w2.w2-ink .topbar .label{ color:var(--ink) !important; text-shadow:0 0 8px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.95) !important; }
body.w2:not(.w2-ink) .topbar .breadcrumb a, body.w2:not(.w2-ink) .topbar .breadcrumb .current, body.w2:not(.w2-ink) .topbar .breadcrumb .sep{ color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.6) !important; }
body.w2 .nav-jump a{ opacity:1 !important; }
body.w2.w2-ink .nav-jump a{ color:var(--ink) !important; text-shadow:0 0 8px #fff,0 0 3px #fff; }
body.w2:not(.w2-ink) .nav-jump a{ color:#fff !important; text-shadow:0 0 2px #000,0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.8); }
body.w2 .wd-progress{ display:none; }

/* JS が無いとき：章をふつうの節として並べる */
html:not(.w2js) .ch{ position:relative; padding:40px 0; }
html:not(.w2js) .pn{ height:auto; }
html:not(.w2js) .tx{ position:static; transform:none; width:auto; margin:40px 5vw 0 var(--left); padding:0; background:none; color:var(--ink); text-shadow:none; }
html:not(.w2js) .ch-mission{ background:var(--ground); }
html:not(.w2js) .nx{ display:none; }
html:not(.w2js) .tx, html:not(.w2js) .tx *{ background:none !important; color:var(--ink) !important; text-shadow:none !important; }
html:not(.w2js) .en-grid{ display:block; height:auto; margin:24px 5vw 0 var(--left); }
html:not(.w2js) .bn{ display:block; margin:0 0 18px; container-type:normal; }
html:not(.w2js) .bn-txt{ position:static; color:var(--ink) !important; text-shadow:none !important; align-items:flex-start !important; text-align:left !important; }

@media (max-width:760px){
  :root{ --left:16px; }
  .en-head{ padding:82px 16px 0 var(--left); }
  .en-ja{ font-size:clamp(24px,7vw,34px); white-space:nowrap; }
  .en-lede{ font-size:13px; }
  .en-grid{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1.15fr) minmax(0,1fr); height:max(460px,calc(100svh - 300px)); margin:18px 16px 0 var(--left); gap:8px; }
  .bn-jp{ font-size:14px; }
  .bn-mission .bn-jp, .bn-philosophy .bn-jp{ font-size:12px; }
  .bn-mission .bn-txt, .bn-philosophy .bn-txt{ left:5cqw; right:5cqw; top:auto; bottom:6cqh; text-align:left; align-items:flex-start; }
  .bn-philosophy .bn-txt{ text-shadow:0 0 10px var(--paper),0 0 4px var(--paper),0 0 2px var(--paper); }
  .en-fin{ padding:80px 16px 48px var(--left); }
  body.w2 .wd-video.en-film{ margin:0 16px 80px var(--left); }
      html.w2js .ch-scroll{ -webkit-mask-image:linear-gradient(transparent 0, transparent 70px, #000 96px); mask-image:linear-gradient(transparent 0, transparent 70px, #000 96px); }
  .ch-back{ left:12px; top:auto; bottom:14px; }
  .tx.head, .ch-vision .tx.head{ left:0; right:0; top:auto; bottom:0; text-align:left; padding:14svh 22px 12svh; margin:0; }
  .tx.head.dark{ background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.62) 10svh); }
  .tx h2{ font-size:22px; }
  .tx .en{ letter-spacing:.24em; }
  .tx.body{ left:0; right:0; top:auto; bottom:0; transform:none; width:auto; padding:12svh 22px 9svh; }
  .tx.body p{ font-size:14px; line-height:1.95; }
  .ch-mission .tx.body{ background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7) 10svh); }
  .ch-vision .tx.body{ background:linear-gradient(rgba(238,242,244,0),rgba(238,242,244,.93) 10svh); }
  .tx.as{ padding:12svh 22px 12svh; }
  .pn-as.up .tx.as{ padding:104px 22px 10svh; }
  .tx.as h3{ font-size:21px; }
  .ch-prog{ right:7px; gap:9px; }
  .ch-prog i{ width:7px; } .ch-prog i.on{ width:18px; }
  .ch-next{ right:12px; bottom:20px; }
  .ch-next::before{ height:20px; }
  .tx.end{ left:22px; right:22px; top:100px; bottom:9svh; }
  .nx{ height:22svh; }
}
@media (prefers-reduced-motion: reduce){ .seed, .spark{ animation:none; opacity:0; } .bn-art{ transition:none; } }

/* ── 入口の絵の主の字（章の名前）。章の中では隠し、遷移のあいだだけ入れ替える ── */
.L .w.bw{ letter-spacing:-.02em; }
.L .w.bw.soft{ filter:blur(.5px); text-shadow:0 0 2px rgba(20,40,60,.25),0 0 24px rgba(20,40,60,.35); }
.ch .w.bw{ visibility:hidden; }
.bn .L.wd .w:not(.bw){ visibility:hidden; }
.L.wd.front .w.bw{ display:none; }

/* ── 章の TOP：写真は画面いっぱい。題と本文は人の顔と大きな英字を避けて写真の上に重ねる（細い影だけ。箱や帯は敷かない） ── */
.pn-top .tx.top{ position:absolute; transform:none; max-height:none; overflow:visible; }
.tx.top h2{ font-size:clamp(20px,1.9vw,30px); }
.tx.top .bd{ margin-top:16px; }
.tx.top .bd p{ margin:0 0 .8em; font-weight:500; font-size:clamp(13px,.95vw,15px); line-height:1.9; letter-spacing:.03em; }
.tx.top .bd p:last-child{ margin-bottom:0; }
.tx.top .bd em{ font-style:normal; font-weight:700; }
.tx.top.ink{ color:var(--ink); text-shadow:0 0 2px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.85); }
.tx.top.dark{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 12px rgba(0,0,0,.45); }
.ch-philosophy .pn-top .tx.top{ left:auto; right:3vw; top:auto; bottom:3.5svh; width:min(31vw,480px); }
.ch-mission .pn-top .tx.top{ left:var(--left); right:auto; top:auto; bottom:7svh; width:min(36vw,520px); }
.ch-vision .pn-top .tx.top{ left:auto; right:4.5vw; top:auto; bottom:7svh; width:min(36vw,540px); }
.ch-philosophy .tx.top .bd em{ color:var(--leaf); }
.ch-mission .tx.top .bd em{ color:#ffc2bb; }
.ch-vision .tx.top .bd em{ color:#d6ecf7; }
@media (max-width:760px){
  .ch-philosophy .pn-top .tx.top, .ch-mission .pn-top .tx.top, .ch-vision .pn-top .tx.top{ left:0; right:0; top:auto; bottom:62px; width:auto; max-height:min(60svh,calc(100svh - 330px)); overflow-y:auto; padding:0 20px 14px; -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent); mask-image:linear-gradient(#000 calc(100% - 22px),transparent); }
  .tx.top h2{ font-size:19px; }
  .tx.top .en{ letter-spacing:.24em; }
  .tx.top .bd{ margin-top:10px; }
  .tx.top .bd p{ font-size:13px; line-height:1.78; margin-bottom:.5em; }
}
.ch-live .w3-spttl > :first-child{ font:600 11px Inter,sans-serif; letter-spacing:.32em; }
.ch-live .w3-spttl h1 + :not(.w3-asds){ margin-top:6px; font:400 10px Inter,sans-serif; letter-spacing:.3em; }
/* 「挑戦を、報われる側へ」は1行。10字が枠の幅に収まる大きさにする */
.en-fin h2, .tx.end .fin{ white-space:nowrap; }
.en-fin h2{ font-size:clamp(28px,min(4.2vw,calc((100vw - var(--left) - 4vw) / 10.6)),64px); }
.tx.end .fin{ font-size:clamp(24px,min(3.6vw,calc((100vw - var(--left) - 5vw) / 10.6)),56px); }
@media (max-width:760px){
  .en-fin h2{ font-size:calc((100vw - 32px) / 10.4); }
  .tx.end .fin{ font-size:calc((100vw - 44px) / 10.4); }
}

/* ── ACTION&STANCE の画面に重ねる CELLMOM のページ（src/w3cm/） ── */
.ch-live{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; }
.ch-live-root{ position:absolute; inset:0; }
.ch-live .ca-back, .ch-live [data-back]{ display:none !important; }
/* VALUE の下層と同じく、上席評価・NOW・NEXT の欄（STEP の文）は出さない。STEP の印は残す */
.ch-live .ev, .ch-live .ev2, .ch-live [class*="-eval"],
.ch-live .p1x-note, .ch-live .p1x-tip, .ch-live .p2x-now, .ch-live .p2x-next, .ch-live .p3x-now, .ch-live .p3x-next, .ch-live .p3x-nt,
.ch-live .m1-note, .ch-live .m2-note, .ch-live .m3-note,
.ch-live .v1-cap, .ch-live .v1-sp .k, .ch-live .v2-cap, .ch-live .v2-flow .blk, .ch-live .v3-now, .ch-live .v3-next, .ch-live .v3-lb i{ display:none !important; }
/* 足した説明文（VALUE の .vp-asds と同じ組み） */
.ch-live .w3-asds{ max-width:30em; margin:14px 0 0; padding-top:12px; border-top:1px solid currentColor; border-top-color:color-mix(in srgb, currentColor 30%, transparent); font:500 12.5px/1.95 'Noto Sans JP',sans-serif; letter-spacing:.02em; opacity:.95; white-space:normal; }
/* ページの見出しが上の端にあるものは、上のメニューと戻るの下へ下げる */
/* PC：HP の戻る（WORLD）は右上へ。ページの見出しは CELLMOM の位置のまま */
@media (min-width:761px){ .ch-back{ left:auto; right:22px; top:20px; } }
.ch-live .w3-asds.is-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ch-philosophy .pn-as .tx .ds, .ch-mission .pn-as .tx .ds, .ch-vision .pn-as .tx .ds{ max-width:34em; margin:10px 0 0; font-weight:500; font-size:13px; line-height:1.9; }
/* ph3：見出しは空の細い帯に1行で並ぶ。前置きを足すと上のメニューにかかるので、名前から並べる */
@media (min-width:761px){ .ch-live .p3x-mast .k{ display:none !important; } }
.ch-live .v1-sp h3, .ch-live .v1-sp p:not(.w3-asds){ display:none !important; }
.ch-live .w3-spttl{ position:absolute; left:20px; right:20px; bottom:76px; z-index:30; text-shadow:none; }
.ch-live .w3-spttl h1{ margin:6px 0 0; font-size:20px; line-height:1.4; }
.ch-live .w3-spttl *{ position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important; }

/* 題と本文の画面だけ、写真の下側をわずかに沈める（帯ではなく、写真の明るさを下げる程度） */
.ch-stage::after{ content:''; position:absolute; inset:0; z-index:19; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.ch.at-top .ch-stage::after{ opacity:1; }
.ch-mission .ch-stage::after, .ch-vision .ch-stage::after{ background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.28)); }
.ch-mission .ch-stage::after{ background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 55%); }
.ch-philosophy .ch-stage::after{ background:linear-gradient(90deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.35)); }
@media (max-width:760px){
  .ch-mission .ch-stage::after, .ch-vision .ch-stage::after{ background:linear-gradient(rgba(0,0,0,0) 35%,rgba(0,0,0,.5)); }
  .ch-philosophy .ch-stage::after{ background:linear-gradient(rgba(255,255,255,0) 40%,rgba(255,255,255,.6)); }
  .tx.top.ink{ text-shadow:0 0 2px #fff,0 0 8px #fff,0 0 16px rgba(255,255,255,.9); }
}

/* 5版の直し */
.ch.anim .ch-stage::after{ opacity:0 !important; transition:none; }   /* 戻る遷移の途中に左の暗がりを残さない */
.ch .ch-stage .sc.is-live{ visibility:hidden !important; }   /* 動く場面が重なりきったら、下の静止の絵を消す（二重に写さない） */
.ch-live.sp{ background:inherit; }
.ch-philosophy .ch-live.sp{ background:#fff; } .ch-mission .ch-live.sp{ background:#0d0d0d; } .ch-vision .ch-live.sp{ background:#fff; }
.ch-live.sp .ch-live-root{ position:absolute; overflow:hidden; }
.ch-live.sp .ch-live-root h1, .ch-live.sp .ch-live-root .w3-asds, .ch-live.sp .ch-live-root [class*="-lb"], .ch-live.sp .ch-live-root [class*="-tag"],
.ch-live.sp .ch-live-root [class*="-ttl"], .ch-live.sp .ch-live-root [class*="-hd"], .ch-live.sp .ch-live-root [class*="-mast"], .ch-live.sp .ch-live-root [class*="-name"], .ch-live.sp .ch-live-root .v3-t, .ch-live.sp .ch-live-root .p3x-anno{ display:none !important; }
.ch-live .w3-cap{ position:absolute; left:20px; right:20px; z-index:30; }
.ch-live .w3-cap .k{ margin:0 0 8px; font:600 11px Inter,sans-serif; letter-spacing:.3em; }
.ch-live .w3-cap .e{ margin:0; font:400 11px Inter,sans-serif; letter-spacing:.14em; }
.ch-live .w3-cap h3{ margin:6px 0 0; font-weight:900; font-size:20px; letter-spacing:.04em; }
.ch-live .w3-cap .ds{ margin:10px 0 0; font-weight:500; font-size:13px; line-height:1.85; }
.ch-philosophy .w3-cap, .ch-vision .w3-cap{ color:var(--ink); } .ch-mission .w3-cap{ color:#fff; }
.ch-mission .w3-cap .e{ color:#ff7b70; }
@media (max-width:760px){
  /* 入口の小さな枠：写真を上、文を下の地に分けて、人と文を重ねない */
  .bn-mission .bn-art, .bn-philosophy .bn-art{ bottom:30%; }
  .bn-mission{ background:#111; } .bn-philosophy{ background:#fff; border:1px solid #e3e3e3; }
  .bn-mission .bn-txt, .bn-philosophy .bn-txt{ bottom:5cqh; text-shadow:none !important; }
}

/* RECALL（PC）：本文は草の暗い所に、白い字で（英字と人に重ねない） */
.ch-live .w3-pccap{ position:absolute; z-index:30; left:var(--left); top:45svh; width:min(25vw,380px); margin:0; color:#fff; font:500 13.5px/1.95 'Noto Sans JP',sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.55); }
/* DELIVER（PC）：説明文は STEP5 の手前で折り返す */
.ch-live .v2-mast .w3-asds{ max-width:19em; }
/* 左の目次：写真の上では濃い影をつけて読ませる */
body.w2:not(.w2-ink) .nav-jump a{ text-shadow:0 0 2px #000,0 0 3px #000,0 1px 4px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.85) !important; }
body.w2.w2-ink .nav-jump a{ text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 10px #fff !important; }
/* 著作権表記：いまのページと同じく最後に */
body.w2 .copy-center{ position:relative !important; display:block; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; margin:0 auto; padding:0 0 36px; text-align:center; }

/* FIRST（PC）：題と説明文を F にかけない */
@media (min-width:761px){ .ch-live .p2x-hd .lab{ letter-spacing:.16em !important; } .ch-live .p2x-hd h1{ font-size:22px !important; } .ch-live .p2x-hd .w3-asds{ max-width:15em; } }
/* VISION の題と本文の画面（PC）：左の目次の下だけ、暗いぼかしを敷く */
body.w2-navshade .nav-jump::before{ content:''; position:absolute; left:-70px; right:-90px; top:-50px; bottom:-50px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side,rgba(10,18,26,.55),rgba(10,18,26,0)); }
/* 低い画面（PC）：MOVE の字と題・本文を重ねないよう、文を詰める */
@media (min-width:761px) and (max-height:780px){
  .ch-philosophy .pn-top .tx.top{ width:min(34vw,480px); bottom:2.5svh; }
  .tx.top h2{ font-size:19px; margin-top:6px; }
  .tx.top .en{ margin-top:6px; }
  .tx.top .bd{ margin-top:10px; }
  .tx.top .bd p{ font-size:12.5px; line-height:1.72; margin-bottom:.45em; }
}

/* スマホ：静止の絵にゆっくりした動き */
@media (max-width:760px){
  html.w2js .ch.on:not(.anim) .ch-stage .sc{ animation:w2drift 16s ease-in-out infinite alternate; }   /* 絵の全体（写真・字・人）をいっしょにわずかに寄せる */
  @keyframes w2drift{ from{ scale:1 } to{ scale:1.035 } }
  .tx h2, .tx h3, .w3-cap h3{ text-wrap:balance; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){ html.w2js .ch.on .ch-stage .sc{ animation:none; } }

.sp-br{ display:none; }
@media (max-width:760px){ .sp-br{ display:inline; } }

/* ── スマホ：ACTION&STANCE の場面ごとの見せ場（静止の絵の上に軽く重ねる。PC では出さない） ── */
.fxsp{ display:none; }
@media (max-width:760px){
  html.w2js .ch-stage .fxsp{ display:block; position:absolute; inset:0; z-index:4; pointer-events:none; }
  html.w2js .ch:not(.on) .fxsp *{ animation-play-state:paused !important; }
  /* 関心を持つ：同じ写真を人が入る幅で帯にし、上下はぼかした写真で受ける */
  .sc.is-band::before{ content:''; position:absolute; inset:-30px; z-index:0; background:url(../img/w2/p1_bg.webp) center/cover; filter:blur(22px) saturate(.9); opacity:.85; }
  .sc.is-band .L{ -webkit-mask-image:linear-gradient(transparent calc(var(--bt) - 2px), #000 calc(var(--bt) + 40px), #000 calc(var(--bt) + var(--bh) - 50px), transparent calc(var(--bt) + var(--bh))); mask-image:linear-gradient(transparent calc(var(--bt) - 2px), #000 calc(var(--bt) + 40px), #000 calc(var(--bt) + var(--bh) - 50px), transparent calc(var(--bt) + var(--bh))); }
  .sc.is-band .L.wd{ -webkit-mask-image:none; mask-image:none; }
  /* 最初の熱源：指先から右へ、1枚ずつ大きくなる板が順に倒れる */
  .fx-domino i{ position:absolute; bottom:31%; width:2.2%; background:#fbf7ef; border:1px solid rgba(23,60,43,.35); transform-origin:100% 100%; animation:dom 5s cubic-bezier(.5,0,.6,1) infinite; box-shadow:2px 2px 0 rgba(226,103,76,.85); }
  .fx-domino i:nth-child(1){ left:52%; height:3%; animation-delay:0s; }
  .fx-domino i:nth-child(2){ left:58%; height:4.6%; animation-delay:.35s; }
  .fx-domino i:nth-child(3){ left:65%; height:6.8%; width:2.8%; animation-delay:.7s; }
  .fx-domino i:nth-child(4){ left:74%; height:9.6%; width:3.4%; animation-delay:1.05s; }
  .fx-domino i:nth-child(5){ left:85%; height:13%; width:4%; animation-delay:1.4s; }
  @keyframes dom{ 0%,12%{ transform:rotate(0) } 22%{ transform:rotate(66deg) } 80%{ transform:rotate(66deg) } 92%,100%{ transform:rotate(0) } }
  /* 振り返られる関わり：足もとから綿毛の原が広がる */
  .fx-bloom{ background:radial-gradient(circle,rgba(255,255,255,.95) 0 1.3px,transparent 1.8px) 0 0/11px 13px, radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.5px) 5px 6px/9px 10px;
    top:52% !important; clip-path:circle(8% at 70% 100%); animation:bloom 7s ease-in-out infinite alternate; opacity:.9; }
  @keyframes bloom{ to{ clip-path:circle(85% at 55% 100%); } }
  /* 考え抜く：吊った紙が赤い糸に引かれて揺れる */
  .fx-papers i{ position:absolute; top:13%; width:13%; height:9%; background:#f6f4ef; border-top:2px solid #ff2a1a; box-shadow:0 6px 14px rgba(0,0,0,.25); transform-origin:50% -60%; animation:swing 3.6s ease-in-out infinite alternate; translate:calc(var(--sx, 0) * 8px) 0; }
  .fx-papers i::before{ content:''; position:absolute; left:50%; bottom:100%; width:1px; height:6vh; background:#ff2a1a; }
  .fx-papers i:nth-child(1){ left:6%; animation-delay:-.6s; }
  .fx-papers i:nth-child(2){ left:20%; top:22%; width:10%; height:7%; animation-delay:-1.4s; }
  .fx-papers i:nth-child(3){ left:4%; top:31%; width:8%; height:6%; animation-delay:-2.2s; }
  @keyframes swing{ from{ transform:rotate(-5deg) } to{ transform:rotate(6deg) } }
  /* 確かな未来：赤い網点が CERTAIN に集まり、ピントが合う */
  .fx-dots{ left:60% !important; right:0 !important; top:49% !important; bottom:45% !important; background:radial-gradient(circle,#ff2a1a 0 1.2px,transparent 1.6px) 0 0/7px 7px; animation:dots 5s ease-in-out infinite; }
  @keyframes dots{ 0%{ opacity:.9; transform:scale(1.8); filter:blur(1px) } 45%,85%{ opacity:0; transform:scale(1); } 100%{ opacity:.9; transform:scale(1.8); } }
  .ch.on .sc[data-sc="m2"] .w.certain{ animation:focus 5s ease-in-out infinite; }
  @keyframes focus{ 0%{ filter:blur(6px); opacity:.5 } 45%,85%{ filter:blur(0); opacity:1 } 100%{ filter:blur(6px); opacity:.5 } }
  /* 共に走り切る：2人の先に張ったテープが風に揺れる */
  .fx-tape{ top:56% !important; bottom:auto !important; height:4%; }
  .fx-tape svg{ width:100%; height:100%; overflow:visible; }
  .fx-tape path{ fill:none; stroke:#ff2a1a; stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(255,42,26,.6)); }
  /* 見つけ出す：レフ板の光の輪が動き、輪の中だけ街がくっきりする */
  .fx-lens{ background:url(../img/w2/v1_sharp.webp) 59% 50%/auto 100% no-repeat; clip-path:circle(17% at 30% 30%); animation:lens 9s ease-in-out infinite; box-shadow:inset 0 0 0 999px rgba(255,255,255,.04); z-index:2 !important; }
  .fx-lens::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--lx,30%) var(--ly,30%),rgba(255,255,255,0) 16%,rgba(255,255,255,.35) 17%,rgba(255,255,255,0) 18.5%); }
  @keyframes lens{ 0%{ clip-path:circle(17% at 26% 26%) } 35%{ clip-path:circle(17% at 74% 20%) } 70%{ clip-path:circle(17% at 70% 48%) } 100%{ clip-path:circle(17% at 26% 26%) } }
  /* 正しく届ける：STEP の字が奥から引き寄せられる */
  .fx-steps b{ position:absolute; left:6%; top:52%; font:900 64px/1 Inter,sans-serif; letter-spacing:-.03em; color:#fff; opacity:0; transform-origin:0 50%; animation:pull 6s cubic-bezier(.3,0,.2,1) infinite; text-shadow:0 0 20px rgba(255,255,255,.35); }
  .fx-steps b:nth-child(2){ animation-delay:2s; } .fx-steps b:nth-child(3){ animation-delay:4s; }
  @keyframes pull{ 0%{ opacity:0; transform:translate(40%,-160%) scale(.2); filter:blur(4px) } 30%{ opacity:.9; filter:blur(0) } 55%{ opacity:.9; transform:translate(0,0) scale(1) } 70%,100%{ opacity:0; transform:translate(-10%,40%) scale(1.3) } }
  /* 壁を諦めない：壁の羽板が開き、隙間から光が差す */
  .fx-light{ left:45% !important; background:repeating-linear-gradient(104deg,rgba(255,236,206,0) 0 22px,rgba(255,244,222,.9) 22px 30px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%); mask-image:linear-gradient(90deg,transparent,#000 30%); animation:louver 5s ease-in-out infinite alternate; mix-blend-mode:screen; translate:calc(var(--sx, 0) * -12px) 0; }
  @keyframes louver{ from{ opacity:.0; } to{ opacity:1; } }
  /* VISION：ぼけが端で抜けて白く見えないよう、地を街の色にする */
  .ch-vision{ background:#9ea9b0; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){ .fxsp, .fxsp *{ animation:none !important; } }
@media (max-width:760px){ .ch.is-last .fxsp{ opacity:0; transition:opacity .3s; } }

/* ── STEP（横の軸）：場面に止まると右に入口、押すと STEP0〜6 を横に送る ── */
.ch-philosophy{ --acc:#2c6b4a; --stp-ink:#173c2b; --stp-scrim:rgba(244,240,232,.9); }
.ch-mission{ --acc:#ff2a1a; --stp-ink:#fff; --stp-scrim:rgba(10,10,10,.78); }
.ch-vision{ --acc:#1f5f9e; --stp-ink:#12263a; --stp-scrim:rgba(240,244,248,.9); }
.stp-open{ position:absolute; z-index:27; right:64px; top:50%; display:inline-flex; align-items:center; gap:12px; padding:15px 18px 15px 24px; border:0; border-radius:999px;
  background:#fff; color:var(--acc); font:800 13px Inter,sans-serif; letter-spacing:.18em; cursor:pointer; box-shadow:0 2px 16px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transform:translate(18px,-50%); transition:opacity .45s ease, transform .45s ease; }
.stp-open svg{ animation:stpNudge 1.6s ease-in-out infinite; }
@keyframes stpNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
.ch.stp-can .stp-open{ opacity:1; pointer-events:auto; transform:translate(0,-50%); }
.stp-open:hover{ background:var(--acc); color:#fff; }
.stp-pane{ position:absolute; inset:0; z-index:26; pointer-events:none; opacity:0; transition:opacity .45s ease; color:var(--stp-ink); }
.stp-pane::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--stp-scrim) 0, var(--stp-scrim) 20%, transparent 56%); transform:translateX(-40%); transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.ch.stp-on .stp-pane::before{ transform:none; }
.ch.stp-on .stp-pane{ opacity:1; }
.ch.stp-on .stp-bar{ pointer-events:auto; }
.stp-tx{ position:absolute; left:44px; bottom:150px; width:min(36vw,520px); min-height:300px; }   /* 文の長さが変わっても番号の位置を動かさない */
.stp-tx .as{ margin:0 0 14px; font:700 13px/1.6 'Noto Sans JP',sans-serif; letter-spacing:.06em; }
.stp-tx .k{ margin:0; font:900 76px/1 Inter,sans-serif; letter-spacing:-.02em; color:var(--acc); }
.stp-tx h4{ margin:18px 0 0; font:900 22px/1.55 'Noto Sans JP',sans-serif; letter-spacing:.02em; }
.stp-tx .b{ margin:14px 0 0; font:500 14px/1.95 'Noto Sans JP',sans-serif; }
.stp-tx .b:empty{ display:none; }
.stp-tx .k{ display:flex; align-items:flex-start; }
.stp-tx .dg{ display:inline-block; height:1em; overflow:hidden; }
.stp-tx .dgs{ display:flex; flex-direction:column; transition:transform .75s cubic-bezier(.65,0,.2,1); }
.stp-tx .dgs b{ display:block; height:1em; font:inherit; }
.stp-tx.is-in .as{ animation:stpWipe .7s cubic-bezier(.2,.7,.2,1) both; }
.stp-tx.is-in .k{ animation:stpWipe .8s .08s cubic-bezier(.2,.7,.2,1) both; }
.stp-tx .bd > *{ will-change:clip-path,transform; }
.stp-tx .bd.in-r h4{ animation:stpInR .7s .12s cubic-bezier(.2,.7,.2,1) both; }
.stp-tx .bd.in-r .b{ animation:stpInR .7s .22s cubic-bezier(.2,.7,.2,1) both; }
.stp-tx .bd.in-l h4{ animation:stpInL .7s .12s cubic-bezier(.2,.7,.2,1) both; }
.stp-tx .bd.in-l .b{ animation:stpInL .7s .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes stpWipe{ from{ clip-path:inset(0 100% 0 0); transform:translateX(-24px); } to{ clip-path:inset(0 0 0 0); transform:none; } }
@keyframes stpInR{ from{ clip-path:inset(0 0 0 100%); transform:translateX(40px); opacity:.2; } to{ clip-path:inset(0 0 0 0); transform:none; opacity:1; } }
@keyframes stpInL{ from{ clip-path:inset(0 100% 0 0); transform:translateX(-40px); opacity:.2; } to{ clip-path:inset(0 0 0 0); transform:none; opacity:1; } }
.stp-bar{ position:absolute; left:44px; right:110px; bottom:48px; display:flex; align-items:center; gap:22px; }
.stp-bar ol{ position:relative; flex:1; display:flex; justify-content:space-between; margin:0; padding:0; list-style:none; }
.stp-bar ol::before, .stp-bar ol::after{ content:''; position:absolute; left:4%; right:4%; top:5px; height:2px; background:currentColor; opacity:.28; }
.stp-bar ol::after{ right:auto; width:calc(92% * var(--p,0)); background:var(--acc); opacity:1; transition:width .5s ease; }
.stp-bar li{ position:relative; width:8%; display:flex; justify-content:center; }
.stp-bar li button{ position:relative; padding:22px 0 0; border:0; background:none; color:inherit; font:700 11px Inter,sans-serif; letter-spacing:.12em; cursor:pointer; opacity:.6; white-space:nowrap; }
.stp-bar li button::before{ content:''; position:absolute; left:50%; top:0; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:currentColor; opacity:.5; transition:transform .3s ease; }
.stp-bar li button.done, .stp-bar li button.on{ opacity:1; }
.stp-bar li button.done::before{ background:var(--acc); opacity:1; }
.stp-bar li button.on{ color:var(--acc); }
.stp-bar li button.on::before{ background:var(--acc); opacity:1; transform:scale(1.5); }
.stp-nv{ flex:none; width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; background:#fff; color:var(--acc); cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.18); }
.stp-nv:hover{ background:var(--acc); color:#fff; }
.stp-nv:disabled{ opacity:.35; cursor:default; background:#fff; color:var(--acc); }
/* STEP の画面：写真はくっきりのまま、少し寄って暗くし、STEP を送るたびに奥へ進む（ぼかさない） */
html.w2js .ch .ch-live, html.w2js .ch .ch-stage{ transform-origin:68% 52%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.ch.stp-on .ch-live, .ch.stp-on .ch-stage{ transform:scale(calc(1.06 + var(--sn,0) * .012)) translateX(calc(var(--sn,0) * -.5%)); filter:brightness(.86) contrast(1.04); }
.ch.stp-on .ch-live :has(> h1){ opacity:0 !important; transition:opacity .35s ease; }
body.w2-stp .nav-jump{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
.ch.stp-on .ch-live .w3-asds, .ch.stp-on .pn-as .tx{ opacity:0 !important; transition:opacity .3s ease; }
@media (max-width:760px){
  .stp-open{ right:44px; top:auto; bottom:12px; transform:translateY(12px); padding:11px 14px 11px 18px; font-size:12px; }
  .ch.stp-can .stp-open{ transform:none; }
  .stp-pane::before{ background:linear-gradient(0deg, var(--stp-scrim) 0, var(--stp-scrim) 34%, transparent 70%); transform:translateY(30%); }
  .ch.stp-on .stp-pane::before{ transform:none; }
  .stp-tx{ left:20px; right:20px; width:auto; bottom:132px; min-height:250px; }
  .stp-tx .k{ font-size:48px; }
  .stp-tx h4{ margin-top:12px; font-size:17px; }
  .stp-tx .b{ font-size:13px; line-height:1.85; }
  .stp-bar{ left:12px; right:12px; bottom:72px; gap:8px; }
  .stp-nv{ width:40px; height:40px; }
  .stp-bar li button{ font-size:0; padding-top:14px; }
  .stp-bar li button.on{ font-size:10px; }
}
.ch.stp-on .stp-bar li{ animation:stpDot .5s cubic-bezier(.2,.7,.2,1) both; }
.ch.stp-on .stp-bar li:nth-child(2){ animation-delay:.04s; } .ch.stp-on .stp-bar li:nth-child(3){ animation-delay:.08s; } .ch.stp-on .stp-bar li:nth-child(4){ animation-delay:.12s; }
.ch.stp-on .stp-bar li:nth-child(5){ animation-delay:.16s; } .ch.stp-on .stp-bar li:nth-child(6){ animation-delay:.2s; } .ch.stp-on .stp-bar li:nth-child(7){ animation-delay:.24s; }
@keyframes stpDot{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }