/* Cloop の色・書体（元の LP の lp.css から）と場面の見た目。base.css の :root を上書きする */
@font-face{ font-family: "Cloop Dot"; src: url("../assets/fonts/DotGothic16.woff2") format("woff2"); font-display: swap; }
:root{
  --bg: #16052b; --bg2: #0c0218; --pink: #ff2e88; --yellow: #ffb800; --cyan: #3df2ff; --purple: #9e5cff; --green: #7dff5a;
  --rainbow: linear-gradient(90deg, #ff2e88, #ffb800, #3df2ff, #9e5cff, #ff2e88);
  --display: "Dela Gothic One", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --f: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --acc: #fff; --acc-ink: #16052b; --acc-shadow: 255 46 136; --ui: #ff2e88; --paper: #16052b; --ink: #16052b; --gray: #6b6480;
  /* 画面の色（③）。選ぶ前はブランドの色 */
  --t-bg: #16052b; --t-bg2: #0c0218; --t-surf: #22103d; --t-fg: #fff; --t-dim: rgb(255 255 255 / .62); --t-line: rgb(255 255 255 / .18);
  --t-pink: #ff2e88; --t-cyan: #3df2ff; --t-wave: rgb(255 255 255 / .22); --t-beat: rgb(255 46 136 / .42); --t-head: var(--display);
}
/* 値はアプリの htdocs/style.css の html[data-theme] のまま */
[data-ft="black"]{ --t-bg: #000; --t-bg2: #000; --t-surf: #121212; --t-fg: #fff; --t-dim: rgb(255 255 255 / .6); --t-line: rgb(255 255 255 / .16); --t-pink: #fe2c55; --t-cyan: #25f4ee; --t-wave: rgb(255 255 255 / .2); --t-beat: rgb(254 44 85 / .42); }
[data-ft="white"]{ --t-bg: #f4f4f6; --t-bg2: #e9e9ee; --t-surf: #fff; --t-fg: #16161a; --t-dim: rgb(22 22 26 / .56); --t-line: rgb(0 0 0 / .1); --t-pink: #fe2c55; --t-cyan: #0a9c97; --t-wave: rgb(22 22 26 / .13); --t-beat: rgb(10 156 151 / .38); }
[data-ft="chic"]{ --t-bg: #eae7dc; --t-bg2: #dfdacb; --t-surf: #f7f5ef; --t-fg: #2b4c5c; --t-dim: rgb(43 76 92 / .62); --t-line: rgb(43 76 92 / .18); --t-pink: #e98074; --t-cyan: #2b4c5c; --t-wave: rgb(43 76 92 / .15); --t-beat: rgb(233 128 116 / .45); }
[data-ft="fes"]{ --t-bg: #12091f; --t-bg2: #0b0414; --t-surf: #1c1030; --t-fg: #fff; --t-dim: rgb(255 255 255 / .6); --t-line: rgb(255 255 255 / .18); --t-pink: #ff2e88; --t-cyan: #3df2ff; --t-wave: rgb(255 255 255 / .2); --t-beat: rgb(255 46 136 / .42); }
[data-ft="pixel"]{ --t-bg: #efece6; --t-bg2: #f6c6e8; --t-surf: #fff; --t-fg: #17151a; --t-dim: rgb(23 21 26 / .62); --t-line: rgb(23 21 26 / .16); --t-pink: #ff3d7f; --t-cyan: #7b5cff; --t-wave: rgb(23 21 26 / .16); --t-beat: rgb(255 61 127 / .42); --t-head: "Cloop Dot", var(--f); --k: #17151a; }
html[data-ft]{ --acc: var(--t-pink); --acc-ink: #fff; --ui: var(--t-pink); }
html[data-ft="chic"]{ --acc-shadow: 180 90 80; } html[data-ft="white"], html[data-ft="black"]{ --acc-shadow: 254 44 85; }

/* 舞台（ヘッダーの下〜下の帯の上）。子は重ねる（ショットを時間で切り替える） */
.frame{ position: absolute; top: var(--st); bottom: var(--sb); left: var(--side); right: var(--side); display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.frame > *{ grid-area: 1 / 1; }
html, body{ background: var(--bg); }
body{ color: #fff; }
.dsp{ font-family: var(--display); font-weight: 400; line-height: 1.2; letter-spacing: .02em; }
.mono{ font-family: var(--mono); }
.rb{ background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-y{ color: var(--yellow); } .hl-p{ color: var(--pink); } .hl-c{ color: var(--cyan); }
.chip{ display: inline-block; font-family: var(--mono); font-size: .8rem; padding: .15em .6em; border-radius: .4em; line-height: 1.4; }
.chip.pk{ background: var(--pink); color: #fff; } .chip.cy{ background: var(--cyan); color: var(--bg); }
.scene{ background: transparent; color: #fff; }   /* 地は world.js（three.js の星雲） */
#world{ position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.frame, .stack{ perspective: 1100px; }
.stack > *, .frame > *{ will-change: transform, opacity; }
.bgv, .bgi{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 2 24 / .55), rgb(12 2 24 / .35) 40%, rgb(12 2 24 / .8)); }
/* 中身のまとまり：天地中央 */
.stack{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--sh) * .028); width: 100%; max-height: 100%; text-align: center; }

/* ── 上の帯 ── */
.hd-logo img{ height: 2rem; width: auto; } .hd-logo .lg-lt{ display: none; }
html.ft-light .hd-logo .lg-dk{ display: none; } html.ft-light .hd-logo .lg-lt{ display: block; }
.hd-menu{ box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }

/* ── 入口 ── */
.poster{ background: radial-gradient(70% 50% at 50% 50%, rgb(12 2 24 / .55), rgb(12 2 24 / .85)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding-top: 0; padding-bottom: calc(var(--sb) - 18px); gap: 1.1rem; }   /* 下の帯（フッター）を差し引いた高さの天地中央（--sb は帯の上に 18px の間を足した値なので引く） */
.poster-t{ gap: .5rem; letter-spacing: .1em; }
/* 主ボタン：音が出ることを、ボタンの言葉と動く棒で知らせる。浮かせて光を横切らせる（CV と同じ扱い） */
.pgo{ position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: .95rem 1.7rem .95rem 1.3rem; border-radius: 3em; background: #fff; color: #16052b; text-align: left;
  box-shadow: 0 0 0 .5rem rgb(255 255 255 / .12), 0 14px 40px -10px rgb(255 46 136 / .95); animation: pgo-beat .46875s ease-out infinite; }
.pgo::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .9) 50%, transparent 65%); transform: translateX(-120%); animation: pgo-shine 3.2s 1s ease-in-out infinite; mix-blend-mode: overlay; }
.pgo-t{ display: flex; flex-direction: column; font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; line-height: 1.2; }
.pgo-t small{ font-weight: 500; font-size: .66rem; letter-spacing: .08em; color: rgb(22 5 43 / .6); margin-top: .2rem; }
.eq{ display: flex; align-items: flex-end; gap: .18rem; height: 1.6rem; }
.eq i{ width: .3rem; height: 100%; border-radius: .2rem; background: linear-gradient(#ff2e88, #ffb800); transform-origin: 50% 100%; animation: eq .46875s ease-in-out infinite alternate; }
.eq i:nth-child(2){ animation-delay: -.12s; background: linear-gradient(#ffb800, #3df2ff); } .eq i:nth-child(3){ animation-delay: -.3s; background: linear-gradient(#3df2ff, #a35bff); } .eq i:nth-child(4){ animation-delay: -.2s; background: linear-gradient(#a35bff, #ff2e88); }
@keyframes eq{ from{ transform: scaleY(.25); } to{ transform: scaleY(1); } }
@keyframes pgo-beat{ 0%{ box-shadow: 0 0 0 .9rem rgb(255 255 255 / .22), 0 14px 40px -10px rgb(255 46 136 / .95); } 100%{ box-shadow: 0 0 0 .5rem rgb(255 255 255 / .08), 0 14px 40px -10px rgb(255 46 136 / .95); } }
@keyframes pgo-shine{ 0%, 55%{ transform: translateX(-120%); } 85%, 100%{ transform: translateX(120%); } }
/* ワクワクの一言：途中で出番がある（指で叩く印が脈打つ） */
.ptease{ display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem .55rem .7rem; margin-bottom: .4rem; border-radius: 2em; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
  color: rgb(255 255 255 / .9); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.ptease b{ color: #ffb800; }
/* キャッチの強弱：パッと見てキーワードだけが一瞬で入る。キーワードは大きいディスプレイ書体、つなぎ（で・サッと・って・が）は小さい本文の書体 */
.pk-kw{ display: flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1.05; margin: .3rem 0 .8rem; }
.pk-kw > span{ display: flex; align-items: baseline; gap: .15em; font-family: var(--f); font-weight: 800; font-size: 1rem; letter-spacing: .06em; }
.pk-kw em{ font-style: normal; font-family: var(--display); font-weight: 400; font-size: 2.6rem; letter-spacing: .02em; }
.pk-kw em.rb{ font-size: 3.3rem; }   /* 大きい字にも順位：Cloop ＞ なに？ ＞ サッ ＞ わかる */
.pk-kw > span:first-child{ margin-bottom: -.55rem; }   /* 見ながら と Cloop の行の間を詰める（本人 2026-10-13「今の半分くらい」） */
.pk-kw em.k2{ font-size: 2.5rem; } .pk-kw em.km{ font-size: 1.6rem; }   /* 見ながら：ひとまとまりで中くらい */ .pk-kw em.k3{ font-size: 2.1rem; } .pk-kw em.k4{ font-size: 1.8rem; }
.pk-kw .emj{ font-style: normal; font-size: 1.5rem; align-self: center; }
html.land .pk-kw{ flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .3em; margin: .1rem 0 .4rem; }   /* 横置きは高さが無いので 1 行に並べる */
html.land .pk-kw em.rb{ font-size: 2.6rem; } html.land .pk-kw > span:first-child{ margin-bottom: 0; } html.land .pk-kw em.k2{ font-size: 2rem; } html.land .pk-kw em.km{ font-size: 1.35rem; } html.land .pk-kw em.k3{ font-size: 1.7rem; } html.land .pk-kw em.k4{ font-size: 1.5rem; } html.land .pk-kw .emj{ font-size: 1.6rem; }
.pgo{ flex: none; }
.pk-h .emj{ font-family: system-ui, sans-serif; margin-left: .1em; }
.tap{ position: relative; width: 1.3rem; height: 1.3rem; flex: none; }
.tap::before, .tap i{ content: ''; position: absolute; inset: 0; border-radius: 50%; }
.tap::before{ inset: 30%; background: #ffb800; box-shadow: 0 0 10px #ffb800; animation: tapDot 1.875s ease-in-out infinite; }
.tap i{ border: 2px solid #ffb800; opacity: 0; animation: tapRing 1.875s ease-out infinite; }
@keyframes tapDot{ 0%, 60%, 100%{ transform: scale(1); } 66%{ transform: scale(.6); } }
@keyframes tapRing{ 0%, 64%{ transform: scale(.4); opacity: 0; } 68%{ opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .tap::before, .tap i{ animation: none; } }
.pmute{ color: rgb(255 255 255 / .75); font-size: .78rem; letter-spacing: .1em; padding: .5rem 1rem; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgb(255 255 255 / .35); }
@media (prefers-reduced-motion: reduce){ .pgo, .pgo::after, .eq i{ animation: none; } }
.pk-k{ font-family: var(--mono); font-size: .7rem; letter-spacing: .3em; opacity: .85; }
.pk-h{ font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.25; letter-spacing: .02em; text-align: center; margin: .2rem 0 .6rem; }

/* ── 下の帯 ── */
.dock{ background: linear-gradient(to top, rgb(12 2 24 / .92), rgb(12 2 24 / .7) 60%, rgb(12 2 24 / 0)); }
.cp-pill .tag{ font-family: var(--mono); background: #fff; color: var(--bg); }
.cta{ font-weight: 900; }
.cta svg{ width: 18px; fill: none; }
.gate-pill .dot{ background: var(--pink); }
.mark{ background: var(--yellow); } .mark.done{ box-shadow: 0 0 0 1.5px var(--yellow); }
html[data-ft] .dock{ color: var(--t-fg); background: linear-gradient(to top, var(--t-bg), color-mix(in srgb, var(--t-bg) 70%, transparent) 60%, transparent); }
html[data-ft] .dock .meta{ text-shadow: none; }
html[data-ft] .pp svg{ fill: var(--t-fg); } html[data-ft] .snd svg{ stroke: var(--t-fg); } html[data-ft] .snd svg path:first-child{ fill: var(--t-fg); }
html[data-ft] .seg{ background: var(--t-line); } html[data-ft] .seg i, html[data-ft] .knob{ background: var(--t-fg); }
html[data-ft] .cp-pill{ color: var(--t-fg); border-color: var(--t-line); background: color-mix(in srgb, var(--t-surf) 60%, transparent); }
html[data-ft] .cp-pill .tag{ background: var(--t-fg); color: var(--t-bg); }
html.ft-light .annot{ color: var(--t-fg); text-shadow: none; }
html[data-ft="pixel"] .cta, html[data-ft="pixel"] .cv{ font-family: "Cloop Dot", var(--f); font-weight: 400; box-shadow: inset 0 0 0 2.5px var(--k), 3px 3px 0 var(--k); }
html[data-ft="pixel"] .cta::before, html[data-ft="pixel"] .cv::before{ display: none; }
html[data-ft="pixel"] .cp-pill{ border-color: var(--k); box-shadow: inset 0 0 0 1.5px var(--k); }

/* ── シート（PC で「アプリを入手」） ── */
.sheet-in{ color: var(--ink); }
.get{ padding: 18px 0 6px; text-align: center; }
.get-k{ font-family: var(--mono); font-size: .75rem; color: var(--pink); letter-spacing: .2em; }
.get-h{ font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin-top: .4rem; }
.get-p{ font-size: .85rem; color: var(--gray); margin-top: .4rem; }
.get-b{ display: grid; gap: 10px; margin: 18px auto 0; max-width: 360px; }
.get-b .cv{ background: var(--bg); color: #fff; height: 52px; font-size: .95rem; }
.cv svg{ width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ── 01 無理ゲーな音ゲー ── */
.sc-game{ background: #0d0220; }
.sc-game .bgv{ filter: brightness(.36) saturate(1.3); }
.gm-red{ position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 22vmin rgb(255 0 60 / .85); background: radial-gradient(circle at 50% 56%, transparent 40%, rgb(120 0 40 / .35)); }
.gm-boom{ position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 56%, #fff 0 8%, #ffe08a 15%, #ff2e88 34%, #4a0f88 62%, #0d0220 82%); }
.gm-wh{ position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.gm-shk{ position: absolute; inset: 0; }
.gm-frame{ display: block; }
.gm-play{ position: absolute; inset: 0; }
.gm-notes{ position: absolute; inset: 0; }
.gn{ position: absolute; left: 0; top: 0; opacity: 0; display: grid; place-items: center; border-radius: 999px; color: #fff; white-space: nowrap; will-change: transform, opacity;
  font-family: var(--display); font-size: .95rem; padding: .3em .85em; background: radial-gradient(circle at 35% 30%, #ff8fc0, var(--pink)); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--pink); }
.gn.big{ width: calc(var(--sh) * .085); height: calc(var(--sh) * .085); padding: 0; font-size: 1.6rem; }
.gn-y{ background: radial-gradient(circle at 35% 30%, #ffe08a, var(--yellow)); color: var(--bg); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--yellow); }
.gn-c{ background: radial-gradient(circle at 35% 30%, #c4fcff, var(--cyan)); color: var(--bg); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--cyan); }
.gn-v{ background: radial-gradient(circle at 35% 30%, #d6bbff, var(--purple)); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--purple); }
.gm-ring{ position: absolute; left: 0; top: 0; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 22px var(--cyan), inset 0 0 22px var(--cyan); transition: border-color .2s, box-shadow .2s; }
.gm-ring.hot{ border-color: #ff5577; box-shadow: 0 0 30px #ff3355, inset 0 0 26px #ff3355; }
.gm-tap{ position: absolute; border-radius: 50%; border: 3px solid var(--cyan); transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; }
.gm-tap.go{ animation: gtap .35s var(--ease-out); }
@keyframes gtap{ from{ opacity: .9; transform: translate(-50%, -50%) scale(.6); } to{ opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.gm-guide{ position: absolute; top: 0; width: 0; border-left: 2px dashed rgb(255 255 255 / .5); }
.gm-jd{ position: absolute; left: 50%; top: 38%; font-family: var(--display); font-size: 2.2rem; letter-spacing: .06em; white-space: nowrap; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); opacity: 0; }
.gm-jd.auto{ color: rgb(255 255 255 / .7); text-shadow: none; font-size: 1.2rem; }
.gm-jd.miss{ color: #ff3355; text-shadow: 0 0 12px #ff3355; }
.gm-miss{ position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--display); font-size: 1.1rem; color: #ff3355; text-shadow: 0 0 6px #000, 0 0 2px #000; white-space: nowrap; }
.gm-cb{ position: absolute; left: 0; top: 0; font-family: var(--mono); line-height: 1; text-align: left; }
.gm-cb b{ font-size: 2.6rem; } .gm-cb small{ display: block; font-size: .62rem; letter-spacing: .25em; margin-top: .2rem; }
.gm-cb.zero b{ color: #ff3355; }
.gm-vt{ position: absolute; right: 0; top: 4%; bottom: 14%; width: .7rem; border-radius: 1rem; background: rgb(255 255 255 / .15); overflow: hidden; }
.gm-vt i{ position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(0deg, var(--cyan), var(--yellow) 55%, var(--pink)); transform-origin: 50% 100%; transform: scaleY(0); }
.gm-vt.hot{ box-shadow: 0 0 16px var(--pink); } .gm-vt.max{ animation: vmax .18s steps(2) infinite; }
@keyframes vmax{ 50%{ box-shadow: 0 0 26px #fff; } }
.gm-vtl{ position: absolute; right: -.2rem; bottom: calc(14% - 1.2rem); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; }
.gm-bpm{ position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: .8rem; opacity: .9; }
.gm-bpm.hot{ color: #ff3355; }
.gm-how{ position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-weight: 900; font-size: .95rem; text-shadow: 0 0 10px #000; }
.gm-warn{ position: absolute; left: -30%; right: -30%; top: 18%; height: 2.6rem; opacity: 0; display: flex; align-items: center; gap: 1.6rem; white-space: nowrap; overflow: hidden;
  font-family: var(--mono); font-size: 1rem; color: #000; background: repeating-linear-gradient(-45deg, var(--yellow) 0 1.1rem, #000 1.1rem 2.2rem); }
.gm-warn span{ background: var(--yellow); padding: 0 .6rem; }
.gm-max{ position: absolute; left: 0; right: 0; top: 10%; text-align: center; font-family: var(--display); font-weight: 400; font-size: 3.4rem; line-height: 1; opacity: 0;
  text-shadow: .2rem .2rem 0 var(--pink), -.2rem -.2rem 0 var(--cyan); }
.gm-max small{ display: block; font-family: var(--mono); font-size: .9rem; letter-spacing: .4em; margin-bottom: .5rem; text-shadow: none; }
.gm-fly{ position: absolute; left: 0; top: 0; width: calc(var(--sh) * .14); opacity: 0; }

/* ── 01 着地 ── */
.sc-catch .bgv{ filter: brightness(.4) saturate(1.1); }
.wh{ position: absolute; inset: 0; background: #fff; pointer-events: none; }
.c-q{ font-size: 1.8rem; } .c-q small, .e-h small{ display: block; font-family: var(--f); font-weight: 700; font-size: .5em; opacity: .9; margin-bottom: .4rem; letter-spacing: .06em; }
.c-tl{ position: relative; width: 100%; padding-top: 2rem; }
.c-tl .chip{ position: absolute; top: 0; } .c-tl .cy{ left: 0; } .c-tl .pk{ right: 0; }
.c-a{ font-size: 1.75rem; line-height: 1.3; }
.c-s{ font-size: .9rem; font-weight: 700; line-height: 1.8; opacity: .92; }

/* タイムライン（なぞる） */
.tl{ position: relative; width: 100%; height: calc(var(--sh) * .085); min-height: 44px; border-radius: .7rem; background: rgb(0 0 0 / .55); box-shadow: 0 0 0 1px rgb(255 255 255 / .18); overflow: hidden; touch-action: none; }
.tl-wave{ position: absolute; inset: 22% 0; background: repeating-linear-gradient(90deg, rgb(61 242 255 / .5) 0 2px, transparent 2px 5px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.tl-beat{ position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .28) 0 1px, transparent 1px 6.25%); }
.tl-rg{ position: absolute; top: 0; bottom: 0; background: rgb(255 46 136 / .42); border-left: 4px solid var(--pink); border-right: 4px solid var(--pink); opacity: 0; }
.tl-ph{ position: absolute; top: -10%; bottom: -10%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; }
.tl-fing{ position: absolute; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgb(255 255 255 / .85); box-shadow: 0 0 0 .6rem rgb(255 255 255 / .25); opacity: 0; pointer-events: none; }

/* ── あるある ── */
.e-n{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem 1rem; }
.e-n span{ font-family: var(--display); font-size: calc(min(var(--sh) * .09, 15vw)); line-height: 1; color: rgb(255 255 255 / .9); }
.e-n span.on{ color: #fff; text-shadow: 0 0 18px rgb(255 255 255 / .5); }
.e-n span.x{ color: var(--pink); filter: drop-shadow(.35rem 0 0 var(--cyan)); }
.e-l{ list-style: none; font-size: .95rem; font-weight: 700; line-height: 1.9; }
.e-l b{ color: var(--yellow); }
.e-h{ font-size: 1.75rem; line-height: 1.3; }

/* ── ① 選ぶ ── */
.p-q{ font-size: 1.9rem; } .p-q small{ display: block; font-family: var(--mono); font-size: .42em; letter-spacing: .3em; color: var(--cyan); margin-bottom: .5rem; }
.cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; width: 100%; height: calc(var(--sh) * .46); }
.card{ position: relative; border-radius: 1rem; overflow: hidden; background: #000; box-shadow: 0 14px 26px -10px rgb(0 0 0 / .8); transition: outline-color .2s; outline: 4px solid transparent; outline-offset: -1px; }
.card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(12 2 24 / .92)); }
.card b{ position: absolute; z-index: 1; left: .2rem; right: .2rem; bottom: .8rem; font-family: var(--display); font-weight: 400; font-size: .95rem; line-height: 1.25; color: #fff; word-break: keep-all; }
.card b small{ display: block; font-family: var(--f); font-weight: 700; font-size: .62rem; opacity: .9; margin-top: .2rem; }
.card.sel{ outline-color: var(--yellow); }
.card.def{ animation: cdef 1.4s var(--ease-move) infinite; }
@keyframes cdef{ 50%{ outline-color: rgb(255 184 0 / .7); } }

/* ── Cloop とは ── */
.sc-about .bgi{ filter: blur(14px) brightness(.4) saturate(1.3); transform: scale(1.1); }
.orbit{ position: relative; width: min(calc(var(--sh) * .4), 72vw); aspect-ratio: 1; transform-style: preserve-3d; }
.orbit-old-ring{ position: absolute; inset: 8%; border-radius: 50%; border: .7rem solid transparent;
  background: conic-gradient(var(--pink), var(--yellow), var(--cyan), var(--purple), var(--pink)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.orbit .icon{ position: absolute; left: 50%; top: 50%; width: 34%; transform: translate(-50%, -50%); border-radius: 22%; box-shadow: 0 10px 30px -8px rgb(255 46 136 / .8); }
.orbit .ob{ position: absolute; left: 50%; top: 50%; width: 22%; }
.a-t{ font-size: .98rem; font-weight: 700; line-height: 1.85; }
.a-t b{ font-family: var(--display); font-weight: 400; font-size: 1.3em; }
.tags{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.tags li{ font-size: .75rem; font-weight: 700; padding: .3em .8em; border-radius: 99px; border: 1px solid rgb(255 255 255 / .45); }

/* ── ② なぞる ── */
.vbox{ position: relative; width: 100%; height: calc(var(--sh) * .5); border-radius: 1rem; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }
.vbox video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-lc{ position: absolute; right: .6rem; top: .6rem; z-index: 1; font-size: .9rem; }
.t-h{ font-size: 1.55rem; }

/* ── 01 開いて 02 なぞって 03 ループ ── */
.sc-steps .bgi{ filter: brightness(.33) saturate(1.3); }
.st{ list-style: none; display: grid; gap: .6rem; text-align: left; width: 100%; }
.st li{ font-family: var(--display); font-size: 1.7rem; line-height: 1.15; display: flex; align-items: baseline; gap: .8rem; transition: font-size .4s var(--ease-out); }
.st li span{ font-family: var(--mono); font-size: .45em; color: var(--cyan); }
.st li.on{ font-size: 2.6rem; }
.st li em{ font-style: normal; }
.s-n{ font-size: .9rem; font-weight: 700; line-height: 1.85; text-align: left; width: 100%; }

/* ── 機能 ── */
.f-t h3{ font-size: 1.7rem; line-height: 1.25; }
.f-t p{ font-size: .88rem; font-weight: 700; line-height: 1.75; margin-top: .6rem; opacity: .92; }
.dialw{ position: relative; width: min(calc(var(--sh) * .42), 74vw); aspect-ratio: 1; }
.dial{ --k: 1; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -135deg, var(--cyan) 0 calc(var(--k) * 270deg), rgb(255 255 255 / .12) 0 270deg, transparent 0); }
.dial::after{ content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--bg); }
.fv{ position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 50%; object-fit: cover; opacity: .55; }
.dv{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 3rem; text-shadow: 0 2px 12px #000; }
.dv small{ font-size: .45em; margin-left: .1em; }
.ast{ position: absolute; left: 6%; top: calc(var(--st) + 2%); width: calc(var(--sh) * .12); pointer-events: none; }
.mw{ position: relative; display: flex; gap: 3%; width: 100%; height: calc(var(--sh) * .5); }
.mh{ position: relative; flex: 1; border-radius: 1rem; overflow: hidden; background: #000; }
.mh video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh span{ position: absolute; top: .5rem; left: .5rem; z-index: 1; font-family: var(--mono); font-size: .62rem; padding: .2em .6em; border-radius: 99px; background: rgb(0 0 0 / .6); }
.mh.r span{ left: auto; right: .5rem; }
.mw .ax{ position: absolute; left: 50%; top: -3%; bottom: -3%; border-left: 2px dashed #fff; }
.zw{ position: relative; width: 100%; height: calc(var(--sh) * .52); border-radius: 1rem; overflow: hidden; background: #000; }
.zv{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 88%; }
.zr{ position: absolute; left: 22%; right: 22%; top: 66%; bottom: 4%; border: 3px solid var(--cyan); border-radius: .5rem; box-shadow: 0 0 0 999px rgb(0 0 0 / .35); }
.bw{ position: relative; width: 100%; display: flex; flex-direction: column; gap: .6rem; }
.bv{ width: 100%; height: calc(var(--sh) * .3); object-fit: cover; border-radius: 1rem; background: #000; }
.bn{ font-family: var(--mono); font-size: 1.6rem; text-align: left; }
.bl{ position: relative; height: calc(var(--sh) * .07); min-height: 36px; border-radius: .6rem; background: rgb(0 0 0 / .5); overflow: hidden; }
.bl-l{ position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--pink) 0 2px, transparent 2px 12.5%); transform-origin: 0 50%; }
.bl-r{ position: absolute; left: 25%; width: 37.5%; top: 0; bottom: 0; background: rgb(255 46 136 / .35); border-left: 3px solid var(--pink); border-right: 3px solid var(--pink); opacity: 0; }

/* ── PRO ── */
.sc-pro .stack{ gap: calc(var(--sh) * .03); }
.badge{ font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; padding: .3em 1em; border-radius: 99px; background: #fff; color: var(--bg); }
.pr0 h2{ font-size: 2.2rem; } .pp1{ font-size: .95rem; font-weight: 700; }
.sc-pro h3{ font-size: 1.9rem; line-height: 1.25; }
.sc-pro p{ font-size: .9rem; font-weight: 700; line-height: 1.75; }
.ic3{ display: flex; align-items: center; gap: 1rem; }
.dev{ display: block; border: 3px solid #fff; border-radius: .7rem; background: linear-gradient(160deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05)); }
.dev.ph1, .dev.ph2{ width: calc(var(--sh) * .08); height: calc(var(--sh) * .15); }
.dev.tab{ width: calc(var(--sh) * .22); height: calc(var(--sh) * .16); }
.cloud{ display: block; width: calc(var(--sh) * .12); height: calc(var(--sh) * .07); border-radius: 99px; background: var(--cyan); box-shadow: -1.2rem -.6rem 0 -.2rem var(--cyan), 1rem -.9rem 0 .1rem var(--cyan); }
.arr{ display: block; width: 1.4rem; height: 3px; background: #fff; position: relative; }
.arr::after{ content: ""; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left-color: #fff; border-right: 0; }
.code{ font-size: 1.7rem; letter-spacing: .15em; padding: .2em .6em; border-radius: .6rem; background: rgb(255 255 255 / .12); }
.sc-pro .gb{ font-size: 2rem; line-height: 1; } .sc-pro .gb b{ font-size: 3.4em; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── ③ 画面の色 ── */
.sc-theme{ color: var(--t-fg); }
/* 選ぶ前の場面はブランドの色のまま（着替えの円の下で一緒に変わらないように） */
.sc-pre{ --t-bg: #16052b; --t-surf: #22103d; --t-fg: #fff; --t-dim: rgb(255 255 255 / .62); --t-line: rgb(255 255 255 / .18); --t-pink: #ff2e88; --t-cyan: #3df2ff; --t-wave: rgb(255 255 255 / .22); --t-beat: rgb(255 46 136 / .42); --t-head: var(--display); }
.sc-themed{ background: var(--t-bg); }
.sc-themed[data-ft="pixel"]{ background: linear-gradient(160deg, #e9dcff, #f6c6e8 40%, #ffb38a 70%, #ff8fb1); }
.th-h{ font-family: var(--t-head); font-size: 1.75rem; }
.th-h .hl-p{ color: var(--t-pink); }
html[data-ft="pixel"] .th-h{ font-weight: 400; text-shadow: 2px 2px 0 #fff; }
.appm{ width: min(calc(var(--sh) * .27), 52vw); height: auto; border-radius: 1.2rem; background: var(--t-bg); box-shadow: 0 0 0 4px var(--t-fg), 0 18px 30px -16px rgb(0 0 0 / .6);
  padding: .7rem; display: flex; flex-direction: column; gap: .55rem; overflow: hidden; transition: background-color .5s, box-shadow .5s; }
html[data-ft="pixel"] .appm{ box-shadow: 0 0 0 4px var(--k), 7px 7px 0 var(--k); }
.appm .vd{ height: auto; aspect-ratio: 16 / 10; border-radius: .6rem; background: #000 url(../assets/media/stage.jpg) center / cover; flex: none; }
.chipm{ align-self: flex-start; font-size: .62rem; font-weight: 700; padding: .15em .7em; border-radius: 99px; background: var(--t-pink); color: #fff; }
.tlm{ position: relative; height: 1.7rem; border-radius: .4rem; background: var(--t-surf); box-shadow: 0 0 0 1px var(--t-line); overflow: hidden; flex: none; }
.tlm::before{ content: ""; position: absolute; inset: 20% 0; background: repeating-linear-gradient(90deg, var(--t-wave) 0 2px, transparent 2px 4px); }
.tlm::after{ content: ""; position: absolute; left: 28%; width: 36%; top: 0; bottom: 0; background: var(--t-beat); border-left: 2px solid var(--t-pink); border-right: 2px solid var(--t-pink); }
.bts{ display: flex; gap: .4rem; } .bts i{ flex: 1; height: 1.4rem; border-radius: 99px; background: var(--t-surf); box-shadow: 0 0 0 1px var(--t-line); }
.bts i:first-child{ flex: 1.6; background: var(--t-pink); box-shadow: none; }
html[data-ft="pixel"] .bts i:first-child{ box-shadow: inset 0 0 0 2px var(--k), 2px 2px 0 var(--k); }
.appm .ln{ display: block; opacity: 1; height: .45rem; border-radius: 2px; background: var(--t-line); } .appm .ln.s{ width: 60%; }
.sws{ position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; width: 100%; padding: .7rem .4rem; border-radius: 1rem; }
.sws::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--t-surf); box-shadow: 0 0 0 1px var(--t-line); opacity: var(--bgo, 1); }

.sw-b{ display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--t-dim); }
.sw-b small{ font-size: .62rem; font-weight: 700; }
.sw-b.on{ color: var(--t-fg); }
.sw{ display: block; width: min(2.6rem, 11vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(128 128 128 / .35); }
.sw-b.on .sw{ box-shadow: 0 0 0 3px var(--t-surf), 0 0 0 6px var(--t-pink); }
.sw-b.def .sw{ animation: swdef 1.4s var(--ease-move) infinite; }
@keyframes swdef{ 50%{ box-shadow: 0 0 0 3px var(--t-surf), 0 0 0 6px rgb(255 184 0 / .8); } }
.sw-black{ background: #0a0a0a; } .sw-white{ background: #f4f4f6; }
.sw-chic{ background: radial-gradient(circle, #e98074 0 26%, transparent 29%), #eae7dc; border: 3px solid #2b4c5c; }
.sw-fes{ background: linear-gradient(135deg, #ff2e88, #ffb800 55%, #3df2ff); }
.sw-pixel{ background: linear-gradient(135deg, #ff3d7f, #ffb38a 35%, #b9a8ff 70%, #9fe3ff); border: 2.5px solid #17151a; border-radius: 22%; box-shadow: 2px 2px 0 #17151a; }

/* ── さあ、はじめよう ── */
.sc-end{ color: var(--t-fg); }
.crowd{ position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem; width: 100%; }
.crowd img{ width: min(calc(var(--sh) * .12), 21vw); }
.en-h{ font-family: var(--t-head); font-size: 1.6rem; line-height: 1.3; }
.en-h em{ font-style: normal; display: block; font-size: 1.35em; white-space: nowrap; }
html.ft-light .en-h .rb{ background: none; color: var(--t-pink); }
.en-b{ display: grid; gap: .7rem; width: min(100%, 22rem); }
.cv.big{ height: 3.6rem; font-size: 1.1rem; font-weight: 900; border-radius: 99px; }
.en-s{ font-size: .8rem; font-weight: 700; opacity: .85; }

/* ── 横置き：主役と文字を左右に。中央 70% ── */
html.land .stack{ gap: calc(var(--sh) * .04); }
html.land .sc-trace .stack, html.land .sc-feat .stack, html.land .sc-theme .stack{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--gap); text-align: left; }
html.land .sc-trace .vbox{ grid-row: 1 / 3; height: calc(var(--sh) * .9); }
html.land .sc-trace .t-h{ font-size: 1.4rem; }
html.land .sc-feat .f-t{ text-align: left; }
html.land .vbox, html.land .mw, html.land .zw{ height: calc(var(--sh) * .86); }
html.land .bv{ height: calc(var(--sh) * .55); }
html.land .cards{ height: calc(var(--sh) * .62); width: min(100%, calc(var(--sh) * 1.4)); }
html.land .sc-pick .stack{ flex-direction: row; text-align: left; }
html.land .sc-theme .appm{ grid-row: 1 / 3; justify-self: center; }
html.land .sc-end .stack{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--gap); }
html.land .sc-end .crowd{ grid-row: 1 / 4; }
html.land .crowd img{ width: calc(var(--sh) * .22); }
html.land .sc-about .stack{ flex-direction: row; text-align: left; }
html.land .orbit{ width: calc(var(--sh) * .8); flex: none; }
html.land .sc-catch .stack, html.land .sc-eight .stack{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; text-align: left; }
html.land .e-n{ grid-row: 1 / 3; } html.land .e-n span{ font-size: calc(var(--sh) * .2); }
html.land .c-tl{ grid-column: 2; }

/* 参加の場面は、下に待ちの札が出る分を空ける */
.sc-pick .stack, .sc-trace .stack, .sc-theme .stack{ padding-bottom: 3.4rem; }
.sc-pick .cards{ height: calc(var(--sh) * .42); }

html.land .sc-pick .stack, html.land .sc-trace .stack, html.land .sc-theme .stack{ padding-bottom: 2.6rem; }

/* 横置きの調整：文字の基準を縦置きより控えめに（舞台の高さが 260px 前後しかない） */
html.land{ font-size: clamp(11px, min(calc(100vw * 16 / 760), calc(var(--vh) * 16 / 400)), 18px); }
.a-r{ display: flex; flex-direction: column; align-items: center; gap: calc(var(--sh) * .028); }
html.land .a-r{ align-items: flex-start; }
html.land .tags{ justify-content: flex-start; }
html.land .gm-max{ top: 15%; font-size: 1.9rem; }
html.land .sc-catch .stack{ grid-template-areas: "q a" "tl s"; row-gap: calc(var(--sh) * .06); }
html.land .c-q{ grid-area: q; } html.land .c-tl{ grid-area: tl; grid-column: auto; } html.land .c-a{ grid-area: a; } html.land .c-s{ grid-area: s; }
html.land .sc-steps .stack{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
html.land .st li.on{ font-size: 2.2rem; }
html.land .cv.big{ height: 2.9rem; font-size: .95rem; }
html.land .en-b{ gap: .5rem; }
html.land .sc-end .crowd img{ width: calc(var(--sh) * .2); }
html.land .sc-pro h3, html.land .pr0 h2{ font-size: 1.6rem; }

/* ③ 選んだチップ：大きく光る */
.sw-b.on .sw{ box-shadow: 0 0 0 3px var(--t-surf), 0 0 0 6px var(--t-pink), 0 0 26px 6px var(--t-pink); }
.sw-b.on small{ color: var(--t-fg); }
/* 着替えたあと：何に着替えたかを大きく */
.th-name{ display: flex; align-items: center; gap: .6rem; font-family: var(--t-head); font-size: 1.7rem; line-height: 1; }
.th-name .sw{ width: 2.6rem; }
.th-name small{ font-family: var(--f); font-weight: 700; font-size: .5em; color: var(--t-dim); }
.sc-themed .stack{ gap: calc(var(--sh) * .11); }
.sc-themed .appm{ transform-origin: 50% 60%; }
.th-name{ position: relative; z-index: 2; }
html[data-ft="pixel"] .th-name b{ text-shadow: 2px 2px 0 #fff; }
.mh{ backface-visibility: visible; transform-style: preserve-3d; }

/* 擬似画面は中身の高さで決める（高さを決め打ちすると、低い画面でボタンの段が切れる・本人 2026-10-13）。大きさは幅で決める */
html.land .sc-theme .appm{ width: calc(var(--sh) * .42); }
html.land .sc-themed .appm{ width: calc(var(--sh) * .46); }
html.land .sc-themed .stack{ gap: 0; }

/* ── レビュー（2026-10-12）で直したところ ── */
/* 着地：文字に影（後ろを 3D の輪が通る） */
.sc-catch .c-q, .sc-catch .c-a, .sc-catch .c-s{ text-shadow: 0 2px 14px rgb(12 2 24 / .85), 0 0 3px rgb(12 2 24 / .7); }
/* Cloop とは：アイコンとキャラを画面幅くらいに */
.sc-about .orbit{ width: min(94vw, calc(var(--sh) * .58)); }
.sc-about .orbit .icon{ width: 40%; }
.sc-about .orbit .ob{ width: 28%; }
.sc-about .a-t{ font-size: .9rem; line-height: 1.75; }
html.land .sc-about .orbit{ width: calc(var(--sh) * .9); }
/* なぞる：映像は上半身 */
.vbox video{ object-position: 50% 12%; }
/* 拡大：全身を縦長の枠に入れ、足元まで見せてから足元へ寄る */
.zw{ width: auto; height: calc(var(--sh) * .54); aspect-ratio: 3 / 4; margin: 0 auto; }
.zv{ object-position: 50% 100%; transform-origin: 50% 96%; }
.zr{ left: 18%; right: 18%; top: 72%; bottom: 2%; }
html.land .zw{ height: calc(var(--sh) * .86); }
/* PRO のアイコン（Lucide） */
.lc{ width: calc(var(--sh) * .1); height: calc(var(--sh) * .1); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lc.cl{ width: calc(var(--sh) * .15); height: calc(var(--sh) * .15); stroke: var(--cyan); filter: drop-shadow(0 0 10px rgb(61 242 255 / .6)); }
.lc.cl .up{ stroke: #fff; }
.lc.ar{ width: calc(var(--sh) * .05); height: calc(var(--sh) * .05); stroke: rgb(255 255 255 / .6); }

/* ── フェス（アプリの html.party と同じ作り：光の渦・紙吹雪・虹が流れるボタン・ネオン） ── */
.fes-glow, .fes-conf{ position: absolute; pointer-events: none; opacity: 0; transition: opacity .6s; }
.fes-glow{ inset: -40%;
  background: radial-gradient(30% 24% at 28% 30%, rgba(255,46,136,.62), transparent 70%), radial-gradient(28% 22% at 74% 26%, rgba(255,184,0,.5), transparent 70%),
    radial-gradient(32% 26% at 68% 72%, rgba(61,242,255,.42), transparent 70%), radial-gradient(30% 24% at 30% 74%, rgba(158,92,255,.62), transparent 70%);
  animation: fesSpin 22s linear infinite; }
.fes-conf{ left: 0; right: 0; top: -240px; height: calc(100% + 240px); background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><rect x='18' y='22' width='9' height='4' rx='1' fill='%23ff2e88' transform='rotate%2882 22 24%29'/><circle cx='96' cy='14' r='2.6' fill='%23ffb800'/><path d='M170 40l4 7h-8z' fill='%233df2ff' transform='rotate%28101 170 44%29'/><rect x='222' y='92' width='9' height='4' rx='1' fill='%239e5cff' transform='rotate%28166 226 94%29'/><circle cx='54' cy='84' r='2.6' fill='%237dff5a'/><path d='M130 76l4 7h-8z' fill='%23ffffff' transform='rotate%2818 130 80%29'/><rect x='200' y='160' width='9' height='4' rx='1' fill='%23ff2e88' transform='rotate%28137 204 162%29'/><circle cx='28' cy='150' r='2.6' fill='%23ffb800'/><path d='M92 132l4 7h-8z' fill='%233df2ff' transform='rotate%2893 92 136%29'/><rect x='160' y='118' width='9' height='4' rx='1' fill='%239e5cff' transform='rotate%28149 164 120%29'/><circle cx='116' cy='196' r='2.6' fill='%237dff5a'/><path d='M40 214l4 7h-8z' fill='%23ffffff' transform='rotate%28129 40 218%29'/><rect x='186' y='222' width='9' height='4' rx='1' fill='%23ff2e88' transform='rotate%2854 190 224%29'/><circle cx='226' cy='20' r='2.6' fill='%23ffb800'/><path d='M70 176l4 7h-8z' fill='%233df2ff' transform='rotate%2822 70 180%29'/></svg>") 0 0 / 240px 240px; animation: fesFall 11s linear infinite; }
@keyframes fesSpin{ to{ transform: rotate(360deg); } } @keyframes fesFall{ to{ transform: translateY(240px); } }
[data-ft="fes"] .fes-glow{ opacity: 1; } [data-ft="fes"] .fes-conf{ opacity: .85; }
.sc-themed[data-ft="fes"]{ background: #16052b; }
html[data-ft="fes"] .cta, html[data-ft="fes"] .cv{ color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); background: linear-gradient(90deg, #ff2e88, #ffb800, #3df2ff, #9e5cff, #ff2e88) 0 0 / 200% 100%; animation: fesShift 5s linear infinite; }
@keyframes fesShift{ to{ background-position: -200% 0; } }
[data-ft="fes"] .th-name b, html[data-ft="fes"] .en-h em .rb{ background: linear-gradient(90deg, #ff2e88, #ffb800, #3df2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-ft="fes"] .appm{ background: rgba(22,5,43,.55); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 0 0 3px #ff2e88, 0 0 26px 4px rgba(255,46,136,.7), 0 0 60px 10px rgba(61,242,255,.35); }
[data-ft="fes"] .appm .bts i:first-child{ background: linear-gradient(90deg, #ff2e88, #ffb800, #3df2ff, #9e5cff, #ff2e88) 0 0 / 200% 100%; animation: fesShift 5s linear infinite; }
[data-ft="fes"] .appm .bts i:nth-child(2){ box-shadow: 0 0 0 1.5px #ffb800, 0 0 10px rgba(255,184,0,.6); }
[data-ft="fes"] .appm .bts i:nth-child(3){ box-shadow: 0 0 0 1.5px #3df2ff, 0 0 10px rgba(61,242,255,.6); }
[data-ft="fes"] .appm .vd{ box-shadow: 0 0 0 2px #3df2ff, 0 0 14px rgba(61,242,255,.6); }
[data-ft="fes"] .tlm::after{ background: linear-gradient(90deg, rgba(255,46,136,.5), rgba(255,184,0,.5), rgba(61,242,255,.5)); }
.en-h{ text-shadow: 0 2px 14px rgb(12 2 24 / .7), 0 0 3px rgb(12 2 24 / .6); position: relative; z-index: 2; }
html.ft-light .en-h{ text-shadow: 0 1px 10px rgb(255 255 255 / .9); }
.sc-about .orbit{ width: min(94vw, calc(var(--sh) * .54)); }
.sc-about .stack{ gap: calc(var(--sh) * .02); }
.sc-about .a-r{ gap: calc(var(--sh) * .02); }
.lc{ width: min(calc(var(--sh) * .1), 15vw); height: min(calc(var(--sh) * .1), 15vw); }
.lc.cl{ width: min(calc(var(--sh) * .15), 22vw); height: min(calc(var(--sh) * .15), 22vw); }
.lc.ar{ width: min(calc(var(--sh) * .05), 7vw); height: min(calc(var(--sh) * .05), 7vw); }
.ic3{ gap: min(1rem, 2.5vw); }
/* 虹の文字（透明な塗り）に text-shadow を付けると、影が字の中に透けて濁る → 虹の字だけ影を外し、外側に drop-shadow（本人・2026-10-12「8カウントの視認性」） */
.rb{ text-shadow: none; filter: drop-shadow(0 2px 6px rgb(12 2 24 / .85)) drop-shadow(0 0 1px rgb(12 2 24 / .9)); }
html.ft-light .rb{ filter: none; }
/* Cloop とは：キャラは奥へ回るとアイコンの裏へ（重なりは z-index で決める） */
.sc-about .orbit{ transform-style: flat; }
.sc-about .orbit .icon{ z-index: 1; }

/* 拡大の四角＝寄ったあとに見える範囲（scale 2.3・原点 50% 96%）とぴったり同じ。四角も映像と同じ原点で広がる */
.zr{ left: 28.26%; right: 28.26%; top: 54.26%; bottom: 1.74%; transform-origin: 50% 96%; box-shadow: 0 0 0 999px rgb(0 0 0 / .35); }
/* 寄る中心を足元（枠の上から 68%）に。範囲 = 原点 50% 81.8%・2.3 倍で見える所 */
.zv{ transform-origin: 50% 81.8%; }
.zr{ top: 46.25%; bottom: 10.25%; transform-origin: 50% 81.8%; }

/* ── ピクセルのアプリの絵をカラフルに（本人 2026-10-14「もっとカラフルに」）。色はアプリの html.pixel から：ピンク・黄 #ffd23f・水色 #9fe3ff・紫 #b9a8ff、墨の縁取りと硬い影、ハートとコイン。円が広がる間から効くよう、場面の data-ft で当てる ── */
.sc-themed[data-ft="pixel"] .appm{ position: relative; background: linear-gradient(165deg, #fff 0%, #ffe3f0 45%, #e6deff 80%, #d9f4ff 100%); }
.sc-themed[data-ft="pixel"] .appm::before, .sc-themed[data-ft="pixel"] .appm::after{ content: ""; position: absolute; width: 14%; aspect-ratio: 1; background: url(../assets/img/pixel/heart.svg) 0 0 / contain no-repeat; top: 3%; right: 4%; z-index: 2; filter: drop-shadow(2px 2px 0 var(--k)); }
.sc-themed[data-ft="pixel"] .appm::after{ background-image: url(../assets/img/pixel/coin.svg); top: auto; bottom: 4%; right: 5%; width: 11%; }
.sc-themed[data-ft="pixel"] .appm .vd{ box-shadow: 0 0 0 2px var(--k), 3px 3px 0 #b9a8ff, 3px 3px 0 2px var(--k); }
.sc-themed[data-ft="pixel"] .chipm{ background: #ffd23f; color: var(--k); box-shadow: inset 0 0 0 1.5px var(--k), 2px 2px 0 var(--k); font-family: "Cloop Dot", var(--f); font-weight: 400; }
.sc-themed[data-ft="pixel"] .tlm{ background: #fff; box-shadow: 0 0 0 2px var(--k), 3px 3px 0 var(--k); }
.sc-themed[data-ft="pixel"] .tlm::before{ background: repeating-linear-gradient(90deg, #ff3d7f 0 2px, transparent 2px 4px, #ffb38a 4px 6px, transparent 6px 8px, #ffd23f 8px 10px, transparent 10px 12px, #9fe3ff 12px 14px, transparent 14px 16px, #b9a8ff 16px 18px, transparent 18px 20px); opacity: .75; }
.sc-themed[data-ft="pixel"] .tlm::after{ background: rgb(255 61 127 / .35); border-left: 3px solid var(--k); border-right: 3px solid var(--k); }
.sc-themed[data-ft="pixel"] .bts i{ box-shadow: inset 0 0 0 2px var(--k), 2px 2px 0 var(--k); }
.sc-themed[data-ft="pixel"] .bts i:nth-child(2){ background: #ffd23f; }
.sc-themed[data-ft="pixel"] .bts i:nth-child(3){ background: #9fe3ff; }
.sc-themed[data-ft="pixel"] .appm .ln{ height: .55rem; background: linear-gradient(90deg, #ff3d7f, #ffb38a 30%, #ffd23f 50%, #9fe3ff 75%, #b9a8ff); box-shadow: 0 0 0 1.5px var(--k); }
.sc-themed[data-ft="pixel"] .appm .ln.s{ background: linear-gradient(90deg, #b9a8ff, #9fe3ff); }