/* A 濃いグレー（フィルムの舞台の色）＝既定 */
:root{--bg:#1F1F22;--bg2:#27272B;--txt:#EDEDE9;--g1:#A3A5AB;--g2:#6B6D73;--line:#3A3A3F;--ease:cubic-bezier(.625,.05,0,1);--grain:.16;--vig:.55;--blend:screen}
/* B 薄いグレー（反転コマの色） */
body[data-tone="light"]{--bg:#E6E6E2;--bg2:#DCDCD8;--txt:#0E0E10;--g1:#55575D;--g2:#8A8C92;--line:#C8C8C4;--grain:.28;--vig:.22;--blend:multiply}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",system-ui,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background-color .5s,color .5s}
a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.wrap{padding:0 20px}}
header.site{position:absolute;top:0;left:0;right:0;z-index:20}
header.site .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
header.site img{height:32px;width:auto;display:block}
header.site img.k{display:none}
body[data-tone="light"] header.site img.w{display:none}body[data-tone="light"] header.site img.k{display:block}
nav.g{display:flex;gap:30px;font-size:14px;color:var(--g1)}
.pill{font-size:14px;font-weight:700;background:var(--txt);color:var(--bg);border-radius:999px;padding:12px 22px;white-space:nowrap;display:inline-block}
.pill.ghost{background:transparent;color:var(--txt);border:1px solid var(--txt);padding:11px 21px}
.hr{display:flex;align-items:center;gap:34px}
@media (max-width:760px){nav.g{display:none}}
/* ---- FV＝サイトの顔 ---- */
.fv{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--bg)}
.fv .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:56px}
.fv .in .wrap{width:100%}
.d2{font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(112px,19.2vw,420px);line-height:.82;letter-spacing:-.06em;margin:0;color:var(--txt);transform-origin:left center;white-space:nowrap;display:block;width:max-content}
.fv .rule{height:1px;background:var(--line);margin:34px 0 30px}
.fv .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
@media (max-width:760px){.fv .row{grid-template-columns:1fr;gap:24px;align-items:start}}
.fv .tag{font-size:clamp(22px,2.9vw,44px);font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.3}
.fv .side{display:flex;flex-direction:column;gap:16px;align-items:flex-end;text-align:right}
@media (max-width:760px){.fv .side{align-items:flex-start;text-align:left}}
.fv .name{margin:0;color:var(--g1);font-size:14.5px;line-height:1.8}
.fv .eb{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0 0 22px}
.fv .eyebrow{font-family:Manrope,system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--g2);text-transform:uppercase;margin:0;white-space:nowrap}
@media (max-width:760px){.fv .eb{flex-direction:column;gap:6px}.fv .eyebrow{font-size:10px;white-space:normal;letter-spacing:.14em}}
/* 動き：粒子・走査線・縦の傷・揺らぎ */
.fv-grain{position:absolute;inset:-20%;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--blend);background-image:url("data:image/svg+xml;utf8,");animation:fvGrain .6s steps(6) infinite}
@keyframes fvGrain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(-2%,6%)}}
.fv-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,var(--vig)) 100%)}
.fv-scan{position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);mix-blend-mode:var(--blend);animation:fvScan 7s linear infinite}
body[data-tone="light"] .fv-scan{background:linear-gradient(90deg,transparent,rgba(0,0,0,.28),transparent)}
@keyframes fvScan{0%{transform:translateY(0)}100%{transform:translateY(100vh)}}
.fv-scr{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:var(--blend);background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.22) 23% calc(23% + 1px),transparent calc(23% + 1px) 64%,rgba(255,255,255,.14) 64% calc(64% + 1px),transparent calc(64% + 1px) 100%);animation:fvScr 5.5s steps(7) infinite}
body[data-tone="light"] .fv-scr{background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(0,0,0,.18) 23% calc(23% + 1px),transparent calc(23% + 1px) 64%,rgba(0,0,0,.12) 64% calc(64% + 1px),transparent calc(64% + 1px) 100%)}
@keyframes fvScr{0%,70%{opacity:0;transform:translateX(0)}74%{opacity:.5;transform:translateX(3%)}80%{opacity:.3;transform:translateX(-5%)}86%{opacity:0}100%{opacity:0}}
.fv.go .in{animation:fvDrift 9s ease-in-out infinite alternate}
@keyframes fvDrift{0%{transform:translate(0,0)}100%{transform:translate(0,-6px)}}
.fv.go .d2{animation:fvBang .55s cubic-bezier(.15,.9,.2,1) both,fvFlick 6s steps(2) 2s infinite}
@keyframes fvBang{0%{opacity:0;transform:scale(1.5) translateY(.06em);filter:blur(16px)}55%{opacity:1;transform:scale(.985);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes fvFlick{0%,96%{opacity:1}97%{opacity:.86}98%{opacity:1}99%{opacity:.93}100%{opacity:1}}
.fv .bang{opacity:0}
.fv-tc{position:absolute;right:40px;top:96px;font-family:Manrope,monospace;font-size:12px;letter-spacing:.2em;color:var(--g2);font-variant-numeric:tabular-nums}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fv.go .rv{opacity:1;transform:none}
.fv.go .rv.s1{transition-delay:.45s}.fv.go .rv.s2{transition-delay:.6s}.fv.go .rv.s3{transition-delay:.72s}
/* A/B と REPLAY */
.ctl{position:absolute;left:40px;top:96px;z-index:21;display:flex;gap:8px;opacity:0;transition:opacity .6s 1.2s}
@media (max-width:760px){.ctl{left:20px;top:auto;bottom:16px}.fv-tc{right:20px;top:88px}}
.fv.go ~ .ctl{opacity:1}
.ctl button{font-family:Manrope,system-ui,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--g2);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.ctl button.on{color:var(--bg);background:var(--txt);border-color:var(--txt)}
.ctl .ver{font-family:Manrope,system-ui,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--g2);align-self:center;margin-left:6px}
.fv h1.name{font-weight:inherit}
/* ---- オープニング v1.5 ---- */
.op{position:fixed;inset:0;z-index:100;background:#000;color:#F2F2F0;overflow:hidden}
.op.done{display:none}
/* ① ゲージ */
.op-gauge{position:absolute;z-index:4;left:0;right:0;top:50%;height:3px;background:#1E1E22;transform:translateY(-50%)}
.op-gauge i{display:block;height:100%;width:0;background:#F2F2F0}
.op-load{position:absolute;z-index:4;left:40px;top:calc(50% + 18px);font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.22em;color:#9A9CA3;display:flex;gap:14px}
.op-load b{color:#F2F2F0;font-variant-numeric:tabular-nums}
.op.open .op-gauge,.op.open .op-load{opacity:0;transition:opacity .2s}
/* ② 上下に開く */
.op-stage{position:absolute;inset:0;background:#141416;opacity:0}
.op-shut{position:absolute;left:0;right:0;height:50.5%;background:#000;z-index:3;transition:transform .85s cubic-bezier(.7,0,.15,1)}
.op-shut.top{top:0}.op-shut.bot{bottom:0}
.op.open .op-shut.top{transform:translateY(-101%)}.op.open .op-shut.bot{transform:translateY(101%)}
/* ③ フィルム */
.op-film{position:absolute;inset:0;opacity:0}
.op-film.on{opacity:1}
.op-film.inv{background:#EDEDE9}
.op-film.inv .op-cut{color:#0A0A0A}
.op-film.inv .op-grain{opacity:.35;mix-blend-mode:multiply}
.op-film.shake{animation:opShake .22s steps(3)}
@keyframes opShake{0%{transform:translate(0,0)}33%{transform:translate(-14px,8px)}66%{transform:translate(10px,-6px)}100%{transform:translate(0,0)}}
.op-cut{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 5vw;text-align:center;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-weight:900;font-size:clamp(36px,6.6vw,104px);line-height:1.2;letter-spacing:-.03em;white-space:pre-line;opacity:0;color:#EDEDE9}
.op-cut.l{justify-content:flex-start;text-align:left;font-size:clamp(40px,8.4vw,132px);line-height:1.08;padding-left:4vw}
.op-cut.r{justify-content:flex-end;text-align:right;font-size:clamp(38px,7.4vw,118px);line-height:1.1;padding-right:4vw}
.op-cut.inv{font-size:clamp(40px,7.8vw,124px);letter-spacing:-.04em}
.op-cut.last{font-size:clamp(64px,13vw,210px);line-height:1;letter-spacing:-.06em}
.op-cut.last span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;opacity:0}
.op-cut.last.on span{animation:opWord .3s cubic-bezier(.2,.9,.2,1) forwards}
.op-cut.last.on span:nth-child(2){animation-delay:.3s;font-size:1.12em}.op-cut.last.on span:nth-child(3){animation-delay:.6s;font-size:1.26em;animation-name:opWordHold;animation-duration:.4s}
.op-cut.last .dots{display:inline-block;white-space:nowrap;margin-left:.04em}
.op-cut.last .dots b{display:inline-block;width:.1em;height:.1em;border-radius:50%;background:currentColor;margin-left:.15em;vertical-align:.3em;opacity:0}
.op-cut.last.on .dots b{animation:opDot .12s cubic-bezier(.2,.9,.2,1) forwards}
.op-cut.last.on .dots b:nth-child(1){animation-delay:0.98s}.op-cut.last.on .dots b:nth-child(2){animation-delay:1.15s}.op-cut.last.on .dots b:nth-child(3){animation-delay:1.32s}
@keyframes opDot{0%{opacity:0;transform:scale(2.6)}55%{opacity:1;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes opWord{0%{opacity:0;transform:translateY(-50%) scale(1.7);filter:blur(10px)}30%{opacity:1;transform:translateY(-50%) scale(.98);filter:blur(0)}80%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-50%) scale(1.02)}}
@keyframes opWordHold{0%{opacity:0;transform:translateY(-50%) scale(1.7);filter:blur(10px)}30%{opacity:1;transform:translateY(-50%) scale(.98);filter:blur(0)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
.op-cut.on{opacity:1;animation:opPunch .16s cubic-bezier(.2,.9,.2,1) both,opJitter .14s steps(2) .16s infinite,opFlick .3s steps(3) .16s infinite}
.op-cut.on.k1{animation-name:opPunch,opJitter,opFlick;transform:rotate(-1.2deg)}
.op-cut.on.k2{transform:rotate(.8deg)}
@keyframes opPunch{0%{opacity:0;transform:scale(1.55);filter:blur(12px)}60%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes opJitter{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4px,3px) scale(1.014)}100%{transform:translate(3px,-3px) scale(.994)}}
@keyframes opFlick{0%{opacity:.9}50%{opacity:1}100%{opacity:.82}}
.op-grain{position:absolute;inset:-20%;pointer-events:none;opacity:.24;background-image:url("data:image/svg+xml;utf8,");animation:opGrain .45s steps(6) infinite}
@keyframes opGrain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(-2%,6%)}}
.op-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 42%,rgba(0,0,0,.8) 100%)}
.op-film.inv .op-vig{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%)}
.op-scr{position:absolute;inset:0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 37%,rgba(255,255,255,.18) 37% calc(37% + 1px),transparent calc(37% + 1px) 71%,rgba(255,255,255,.12) 71% calc(71% + 1px),transparent calc(71% + 1px) 100%);animation:opScr .6s steps(5) infinite}
@keyframes opScr{0%{transform:translateX(0)}50%{transform:translateX(9%)}100%{transform:translateX(-6%)}}
.op-lines{position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 2px,transparent 2px 4px)}
.op-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.op-flash.on{opacity:.9}
.op-count{position:absolute;right:36px;top:28px;font-family:Manrope,monospace;font-size:12px;letter-spacing:.2em;color:#9A9CA3}
/* ④ プツン（光なし・完全に切る）: 押した瞬間に暗い帯へ潰れ、0.05秒後に消えて真っ黒。SKIPも消す */
.op-stage.tv{animation:opTv .1s step-start forwards;transform-origin:50% 50%} /* 緩急は区間ごとにかかる＝step-start で 0〜0.05秒は帯・0.05秒で消える */
@keyframes opTv{0%{transform:scale(1,1);filter:brightness(1);opacity:1}50%{transform:scale(1.03,.05);filter:brightness(.35);opacity:1}100%{transform:scale(1.03,0);filter:brightness(0);opacity:0}} /* 段送りでは全区間に同じプロパティを書く（書かない区間は一気に最後の値へ飛ぶ） */
.op.off .op-skip{opacity:0}
.op.hand{transition:opacity .2s;opacity:0;pointer-events:none}
.op-skip{position:absolute;right:36px;bottom:36px;font-family:Manrope,system-ui,sans-serif;font-size:12px;letter-spacing:.2em;color:#5E6067;background:none;border:1px solid #2A2A2E;border-radius:999px;padding:8px 14px;cursor:pointer;z-index:5}
@media (prefers-reduced-motion: reduce){.op{display:none}}
/* ⑤ FV＝Unsaid. がバーンと出る（粒は無し） */
.fv .bang{opacity:0}
.fv.go .bang{animation:fvBang .55s cubic-bezier(.15,.9,.2,1) both}
@keyframes fvBang{0%{opacity:0;transform:scale(1.6) translateY(.08em);filter:blur(16px)}55%{opacity:1;transform:scale(.97);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.fv.go .rv{opacity:1;transform:none}
/* ==== トップ v4.2：FV より下 ==== */
:root{--paper:#E6E6E2;--paper2:#DCDCD8;--card:#F0F0EC;--ink:#0E0E10;--gray:#55575D;--meta:#8A8C92;--rl:#C8C8C4;--black:#000;--wt:#EDEDE9;--wg:#8A8C92;--wrl:#2A2A2C;--pop:cubic-bezier(.22,1.45,.36,1)}
html,body{height:auto}
html{scroll-behavior:smooth}
body{overflow:visible}
body.lock{overflow:hidden}
/* hidden の要素は必ず隠す（.bt の display が勝って「結果をもう一度見る」が最初から見えていた・公開ページは土台が隠すがモック単体では出た・9/30） */
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* ヘッダー：FV の上では確定のまま。スクロールしたら紙の色、黒い帯の上では白 */
header.site{position:fixed;padding-top:env(safe-area-inset-top,0px);transition:background-color .4s var(--ease)}
header.site.solid{background:rgba(230,230,226,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
header.site.dark{background:rgba(0,0,0,.82)}
body[data-tone="light"] header.site.dark img.k{display:none}
body[data-tone="light"] header.site.dark img.w{display:block}
header.site.dark nav.g{color:#A3A5AB}
header.site.dark .pill.ghost{color:var(--wt);border-color:var(--wt)}
nav.g a{white-space:nowrap;transition:color .3s}
nav.g a:hover{color:var(--ink)}
header.site.dark nav.g a:hover{color:var(--wt)}
.hd-menu{display:none;background:none;border:0;padding:10px 2px;font:700 14px/1 "Zen Kaku Gothic New",sans-serif;color:var(--ink);cursor:pointer}
header.site.dark .hd-menu{color:var(--wt)}
/* 1000px 以下はナビを畳んで「メニュー」に（761〜940px でナビの文字が2段に折れていた・9/30） */
@media (max-width:1000px){nav.g{display:none}.hd-menu{display:inline-block}.hr{gap:18px}}
/* 10/1 ロゴを文字大の組み方（横に広い）にしたら、320px で「メニュー」が縦に折れた → 400px 以下はロゴ 28px・「メニュー」は1行・ボタンの余白を少し詰める */
@media (max-width:400px){header.site img{height:28px}.hr{gap:14px}.hd-menu{white-space:nowrap}header.site .pill.ghost{padding:10px 14px}}
/* FV の減光（上下対称）の写しを FV の真下に置いて下へ消す＝FV は変えずに継ぎ目を消す */
.fv-tail{position:absolute;left:0;right:0;top:0;height:max(100svh,640px);pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,var(--vig)) 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 7%,rgba(0,0,0,.18) 14%,transparent 24%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 7%,rgba(0,0,0,.18) 14%,transparent 24%)}
.st .wrap{position:relative;z-index:1}
.ctl{z-index:19}
/* 日本語は文節で折り返す・段落は最後の行を1〜2字にしない */
main,.bd,.ft{word-break:auto-phrase}
main p,.bd p{text-wrap:pretty}
.st-h,.cs-t,.bd-h{text-wrap:balance}
.cl{display:inline-block}
/* ---- 文字が明らかになる（A ピント＝確定）。JS が --p（0〜1）を付ける。JS なし・動きを減らす設定・#…said では何もしない ---- */
html.rv-on [data-rv]{filter:blur(calc((1 - var(--p, 1)) * 10px));opacity:calc(.2 + .8 * var(--p, 1))}
/* ---- 節：地の色を交互に（ワイヤーの見せ方） ---- */
.tp-sec{position:relative;padding:144px 0;scroll-margin-top:76px;background:var(--paper)}
.tp-sec.alt{background:var(--paper2)}
@media (max-width:760px){.tp-sec{padding:96px 0}}
/* 節の見出し＝英字＋日本語の名前（左）＋ひとこと（右） */
.sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;margin-bottom:64px}
.sh-w{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(56px,8.2vw,132px);line-height:.86;letter-spacing:-.05em;color:var(--ink)}
.sh-k{margin:18px 0 0;font-size:clamp(15px,1.25vw,18px);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.sh-s{margin:0;max-width:30em;font-size:clamp(16px,1.3vw,19px);line-height:1.8;color:var(--gray)}
.sh-s b{display:block;margin-bottom:6px;font-size:clamp(19px,1.7vw,25px);font-weight:900;color:var(--ink)}
@media (max-width:900px){.sh{grid-template-columns:1fr;gap:20px;margin-bottom:44px}}
/* ボタン */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.bt{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;transition:background-color .3s,color .3s}
.bt:hover{background:transparent;color:var(--ink)}
.bt.o{background:transparent;color:var(--ink)}
.bt.o:hover{background:var(--ink);color:var(--paper)}
.bt.l{background:var(--wt);border-color:var(--wt);color:var(--black)}
.bt.l:hover{background:transparent;color:var(--wt)}
/* カード */
.cd{background:var(--card);border-radius:3px}
/* ---- 01 声明（メッセージ1本） ---- */
.st{padding:200px 0 176px}
.st-h{margin:0 0 44px;max-width:15em;font-size:clamp(30px,4.3vw,66px);line-height:1.32;font-weight:900;letter-spacing:-.025em;color:var(--ink)}
.st-p{margin:0;max-width:34em;font-size:clamp(17px,1.45vw,21px);line-height:2;font-weight:500;color:var(--ink)}
@media (max-width:760px){.st{padding:140px 0 104px}.st-h{margin-bottom:32px;font-size:min(26px,calc((100vw - 40px) / 13.4))}}
/* ---- 02 Approach：画面に留め、Listen.→Confirm.→Act. のカードを順にポンと出す ---- */
.ap-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ap-card{display:flex;flex-direction:column;padding:36px 32px 40px}
.ap-w{margin:0 0 40px;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(44px,4.6vw,72px);line-height:.86;letter-spacing:-.05em;color:var(--ink)}
.ap-k{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--gray)}
.ap-t{margin:0 0 12px;font-size:clamp(19px,1.6vw,23px);line-height:1.45;font-weight:900;color:var(--ink)}
.ap-d{margin:0;font-size:15px;line-height:1.9;color:var(--gray)}
.ap-note{margin:28px 0 0;font-size:14.5px;color:var(--gray)}
@media (max-width:900px){.ap-cards{grid-template-columns:1fr}.ap-w{margin-bottom:24px}}
/* 留める（JS が html.ap-on を付けたときだけ。入りきらない画面では付けない） */
html.ap-on .ap{height:250vh;height:250svh;padding:0}
html.ap-on .ap-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:76px;box-sizing:border-box}
html.ap-on .ap .sh{margin-bottom:44px}
html.ap-on .ap-card,html.ap-pop .ap-card{opacity:0;transform:translateY(36px) scale(.9);transition:opacity .3s var(--ease),transform .6s var(--pop)}
html.ap-on .ap-card.on,html.ap-pop .ap-card.on{opacity:1;transform:none}
@media (max-width:900px){
html.ap-on .ap .sh{margin-bottom:28px}
html.ap-on .ap-cards{grid-template-columns:1fr}
html.ap-on .ap-card{grid-area:1/1;margin-top:calc(var(--i) * 18px);border-top:1px solid var(--rl);padding:26px 22px 28px}
html.ap-on .ap-note{margin-top:18px;font-size:13px}
}
/* ---- 03 Service：7：5 の2枚のカード。名前→ひとこと→やること→問いの予告（続きは詳しいページで）→ボタン ---- */
.sv-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:stretch}
.sv-card{display:flex;flex-direction:column;padding:48px 48px 44px}
.sv-card.mk{scroll-margin-top:96px}
.sv-w{margin:0;font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:clamp(64px,7.2vw,116px);line-height:.82;letter-spacing:-.055em;color:var(--ink)}
.sv-card.mk .sv-w{font-size:clamp(48px,5.4vw,86px)}
.sv-name{margin:14px 0 0;font-size:clamp(18px,1.6vw,23px);font-weight:900;letter-spacing:-.01em}
.sv-sum{margin:12px 0 0;max-width:31em;font-size:15.5px;line-height:1.85;color:var(--ink)}
.sv-k{margin:26px 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--meta)}
.sv-do{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-do li{position:relative;padding-left:20px;font-size:16px;font-weight:700;line-height:1.5}
.sv-do li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--ink)}
/* 問いの予告：初めの2つは読める。3つ目からはピントが合っていない（続きは詳しいページで） */
.sv-tz{margin-top:30px;padding-top:22px;border-top:1px solid var(--rl)}
.sv-tz-h{margin:0;font-size:16px;font-weight:900}
.sv-tz-p{margin:4px 0 10px;font-size:13.5px;line-height:1.7;color:var(--gray)}
.sv-tz ol{list-style:none;margin:0;padding:0}
.sv-tz li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:10px 0;border-top:1px solid var(--rl);font-size:14.5px;font-weight:700;line-height:1.55;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.sv-tz li span{padding-top:2px;font-family:Manrope,system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--meta)}
.sv-tz li.b1{filter:blur(2.2px);opacity:.55}
.sv-tz li.b2{filter:blur(4.5px);opacity:.28}
.sv-tz-more{margin:10px 0 0;font-size:12.5px;color:var(--meta)}
.sv-card:hover .sv-tz li.b1{filter:blur(1.2px);opacity:.75}
.sv-card:hover .sv-tz li.b2{filter:blur(3px);opacity:.42}
.sv-card .acts{margin-top:auto;padding-top:28px}
.bt .ar{display:inline-block;margin-left:10px;transition:transform .4s var(--ease)}
.bt:hover .ar{transform:translateX(4px)}
@media (max-width:900px){.sv-grid{grid-template-columns:1fr}.sv-card{padding:34px 22px 30px}}
/* 幅の狭いスマホ（〜400px）: カードのボタンが1行に入らず横にはみ出していた（360px で 5px・9/30）→ 字と余白を少し詰め、入らない時は文節で折る */
@media (max-width:400px){.bt{white-space:normal;text-align:center;word-break:auto-phrase;padding-block:12px}.sv-card .bt{padding-inline:18px;font-size:14px}}
/* ---- 04 Cases：HX とマーケティングの2列・6枚がばらばらの順にパパパッと出る ---- */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;gap:12px 16px}
.cs-g{margin:0;padding-bottom:4px;align-self:end;font-size:15px;font-weight:700;color:var(--ink)}
.cs-card{padding:28px 30px 30px}
.cs-t{margin:0;font-size:clamp(19px,1.75vw,25px);line-height:1.45;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.cs-d{margin:14px 0 0;font-size:15px;line-height:1.8;color:var(--ink)}
.cs-d span{display:block;margin-bottom:2px;font-size:12.5px;font-weight:700;color:var(--meta)}
.cs-more{margin:48px 0 0}
html.cs-on .cs-card{opacity:0;transform:translateY(22px) scale(.9);transition:opacity .25s var(--ease),transform .55s var(--pop)}
html.cs-on .cs-card.on{opacity:1;transform:none}
@media (max-width:900px){.cs-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.cs-g:not(:first-child){margin-top:28px}.cs-card{padding:24px 22px 26px}}
/* ---- 05 Members：左詰め・横一列（段差なし） ---- */
.mb-people{display:grid;grid-template-columns:repeat(2,minmax(0,366px));gap:28px}
.mb-p{margin:0}
.mb-ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#D3D2CD}
.mb-ph img{display:block;width:100%;height:100%;object-fit:cover}
.mb-r{margin:18px 0 6px;font-size:13px;color:var(--gray)}
.mb-n{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:900}
.mb-w{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--gray)}
.mb-more{margin:48px 0 0}
@media (max-width:900px){.mb-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* ---- 06 News：左詰め ---- */
.nw-list{list-style:none;margin:0;padding:0;max-width:1000px;border-bottom:1px solid var(--rl)}
.nw-list li{display:grid;grid-template-columns:120px 96px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--rl)}
.nw-d{font-family:Manrope,system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--gray);font-variant-numeric:tabular-nums}
.nw-c{font-size:13px;color:var(--meta)}
.nw-t{font-size:17px;font-weight:700;color:var(--ink)}
@media (max-width:900px){.nw-list li{grid-template-columns:1fr;gap:4px}}
/* ---- 07 帯：写真を背景に敷き、その上に見出しとボタン（写真は後日・今は暗い単色の光で仮置き） ---- */
.bd{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(380px,36vw,520px);background:#141416;color:#F2F2EE;scroll-margin-top:0}
.bd-ph{position:absolute;inset:-3%;background:radial-gradient(ellipse 50% 70% at 20% 28%,rgba(236,236,232,.30),rgba(236,236,232,0) 64%),radial-gradient(ellipse 36% 50% at 80% 74%,rgba(236,236,232,.10),rgba(236,236,232,0) 70%),linear-gradient(120deg,#2b2b2d 0%,#161618 55%,#0c0c0d 100%);animation:bdKen 26s ease-in-out infinite alternate}
.bd-bl{position:absolute;inset:-3%;background:repeating-linear-gradient(98deg,rgba(0,0,0,0) 0 72px,rgba(0,0,0,.22) 72px 108px);-webkit-mask-image:radial-gradient(ellipse 52% 72% at 20% 28%,#000,transparent 70%);mask-image:radial-gradient(ellipse 52% 72% at 20% 28%,#000,transparent 70%);animation:bdKen 26s ease-in-out infinite alternate}
@keyframes bdKen{from{transform:scale(1)}to{transform:scale(1.06)}}
.bd-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 58%,rgba(0,0,0,.4) 100%)}
.bd-grain{position:absolute;inset:-20%;pointer-events:none;opacity:.14;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,");animation:fvGrain .6s steps(6) infinite}
.bd .wrap{position:relative;width:100%}
.bd-in{display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding:72px 0}
.bd-h{margin:0;font-size:clamp(28px,3.4vw,52px);line-height:1.3;font-weight:900;letter-spacing:-.02em;color:#F2F2EE}
.bd-note{position:absolute;right:max(40px,calc((100% - 1280px) / 2));bottom:18px;font-size:12px;color:#8A8C92}
.bd.photo .bd-ph{background:var(--img) var(--pos,76% 50%)/cover no-repeat}
.bd.photo .bd-bl{display:none}
@media (max-width:760px){.bd.photo .bd-ph{background-position:var(--pos-sp,84% 50%)}}
@media (prefers-reduced-motion: reduce){.bd-ph,.bd-bl{animation:none}}
@media (max-width:760px){.bd{min-height:340px}.bd-in{padding:56px 0}.bd-note{right:20px}}
/* ---- 帯 tv（10/1）：昔のテレビ。いつもは薄い砂嵐と走査線、ゆっくり下りる暗い帯。2〜5秒おきに「ブチッ、ブチッ」と2〜3回乱れる（横ずれ・砂嵐が強まる・ときどき映りが切れる） ---- */
.bd.tv{background:#0B0B0C}
.bd-noise{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.12;image-rendering:pixelated;pointer-events:none}
.bd-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.55) 0 1px,rgba(0,0,0,0) 1px 3px)}
.bd-roll{position:absolute;left:0;right:0;top:-35%;height:35%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.32),rgba(0,0,0,0));animation:bdRoll 7s linear infinite}
@keyframes bdRoll{to{transform:translateY(386%)}}
.bd-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%)}
.bd.tv .bd-h{position:relative}
.bd-g{position:absolute;inset:0;opacity:0;pointer-events:none;color:#F2F2EE}
.bd.tv.rgb .bd-g.g1{color:#FF3D6E}
.bd.tv.rgb .bd-g.g2{color:#3DE3FF}
.bd.tv.glitch .bd-noise{opacity:.38}
.bd.tv.glitch .bd-in{transform:translate(var(--gx,0px),-2px)}
.bd.tv.glitch .bd-g{opacity:.92}
.bd.tv.glitch .bd-g.g1{clip-path:inset(var(--g1,18%) 0 calc(74% - var(--g1,18%)) 0);transform:translateX(calc(var(--gx,0px) * -1.6))}
.bd.tv.glitch .bd-g.g2{clip-path:inset(var(--g2,58%) 0 calc(80% - var(--g2,58%)) 0);transform:translateX(calc(var(--gx,0px) * 2))}
.bd.tv.cut .bd-in{opacity:0}
.bd.tv.cut .bd-noise{opacity:.5}
@media (prefers-reduced-motion: reduce){.bd-roll{display:none}}
/* ---- フッター：2段（ロゴとナビ／会社名・住所とプライバシーポリシー・コピーライト） ---- */
.ft{background:var(--paper);padding:44px 0 30px}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:26px;border-bottom:1px solid var(--rl)}
.ft-top img{display:block;height:40px;width:auto} /* 10/1 本人「特にフッターのロゴが小さい」→ 28px → 40px（文字大の組み方） */
.ft-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px;font-size:14px;font-weight:700}
.ft-nav a{color:var(--ink)}
.ft-bot{display:flex;align-items:baseline;justify-content:space-between;gap:10px 32px;flex-wrap:wrap;padding-top:18px}
.ft-co{margin:0;font-size:12.5px;line-height:1.8;color:var(--gray)}
.ft-meta{margin:0;display:flex;gap:24px;font-size:12.5px;color:var(--meta)}
.ft-meta a{color:var(--gray)}
.ft-meta span{font-family:Manrope,system-ui,sans-serif;letter-spacing:.04em}
@media (max-width:900px){.ft-top{flex-direction:column;align-items:flex-start;gap:22px}.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;width:100%}.ft-bot{flex-direction:column;gap:6px}}
/* ---- スマホのメニュー（オープニングの幕と同じく上下から開く） ---- */
.spm{position:fixed;inset:0;z-index:60;background:var(--black);color:var(--wt);clip-path:inset(50% 0 50% 0);transition:clip-path .45s var(--ease)}
.spm.on{clip-path:inset(0 0 0 0)}
.spm[hidden]{display:none}
.spm-in{height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 20px calc(32px + env(safe-area-inset-bottom,0px))}
.spm-top{height:76px;display:flex;align-items:center;justify-content:space-between}
.spm-top img{height:32px;width:auto;display:block}
.spm-x{background:none;border:0;padding:10px 2px;color:var(--wt);font:700 14px/1 "Zen Kaku Gothic New",sans-serif;cursor:pointer}
.spm-nav{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.spm-nav a{font-size:30px;font-weight:900;line-height:1.45;letter-spacing:-.02em}
.spm-nav a.c{align-self:flex-start;margin-top:24px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:16px;font-weight:700}
/* ==== WordPress で足した分（build_wp_theme.py） ==== */
/* ログインしているときの管理バーの下にヘッダーを置く */
.admin-bar header.site{top:32px}
@media (max-width:782px){.admin-bar header.site{top:46px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}