:root{ --bg:#000000; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.11); --line:rgba(255,255,255,.16); --fg:#ffffff; --dim:rgba(255,255,255,.6); --pink:#fe2c55; /* TikTok Red */ --ok:#34c759; /* 完了の緑 */ --warn:#ff9f0a; /* 注意のオレンジ */ --purple:#fe2c55; /* 単色に統一（グラデーションを廃止） */ --cyan:#25f4ee; /* TikTok Aqua */ --ink:#000000; --surface:#121212; /* パネル・モーダルの下地 */ /* 最大化・解除の動き。**畳む側（ヘッダー・操作列）と伸びる側（映像）で 必ず同じ値を使う。** ずれると合計の高さ・幅が保たれず、途中でページが はみ出したり、映像が枠からはみ出して切れたりする。 JS 側の ZOOM_MS とも揃えること */ --zoom-dur:.34s; --zoom-ease:cubic-bezier(0.76,0,0.24,1); /* easeInOutQuart */ } *{box-sizing:border-box} html,body{ height:100%; touch-action:manipulation; /* ダブルタップでの画面拡大を無効化（ピンチ拡大は残す） */ -webkit-text-size-adjust:100%; /* 長押しでiOSの選択メニュー（Copy / Look Up …）が出ると、クロップの 「少し長めに押してからドラッグ」と衝突する。アプリでは操作不能になるので殺す。 規約・プライバシーは別ファイルのスタイルなので、本文の選択は残っている */ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } input,textarea,[contenteditable]{-webkit-user-select:text; user-select:text} *{-webkit-tap-highlight-color:transparent} body{ margin:0; color:var(--fg); overflow-x:clip; /* 何かがはみ出しても横スクロールはさせない（clip はスクロール領域を作らない） */ background:var(--bg); font:14px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; } .wrap{ --gutter:18px; max-width:1100px; margin:0 auto; padding:18px; /* 上端はアプリ（WebViewが画面いっぱい）だとステータスバーに潜り込む。 Webでは inset が 0 なので max() の左側が残る */ padding-top:max(18px, env(safe-area-inset-top)); padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); /* **下も他の辺と同じ守り方にする。** 以前は 72px の生の値で、 それが iPad のホームインジケータを避ける唯一の砦になっていた。 この値は `fitStart()` が一覧の高さから引くので、大きいと一覧が縮む */ padding-bottom:max(18px, env(safe-area-inset-bottom)); } /* ロゴは常に画面の左右中央。両側の幅が揃うよう `1fr` を対にして、 左右どちらかにボタンが増減してもロゴの位置がずれないようにする */ header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:14px; max-height:80px; /* **既定では切らない。** 以前ここに overflow:hidden を置いていたが、 右肩のアカウントメニュー（.acctmenu）は top:100% でヘッダの**下**に開くので、 箱の外＝丸ごと切り落とされて「押しても何も起こらない」ように見えた （実測：ヘッダ bottom 50 に対しメニューは top 54〜bottom 142。 88px すべてが外側で、elementFromPoint がメニューではなく dropzone を返す）。 切る必要があるのは**高さを畳むときだけ**なので、下の :has() 側へ移した。 アカウントアイコンは一覧でしか出ず（showStart / showPlayer）、 最大化は練習画面でしか起きないので、両者が重なることはない */ /* 映像の伸び縮みと同じ長さ・同じイージング。畳んだ分がそのまま映像に渡るので、 合計の高さが最後まで変わらない（途中でページがはみ出さない） */ transition:max-height var(--zoom-dur) var(--zoom-ease), transform var(--zoom-dur) var(--zoom-ease), opacity calc(var(--zoom-dur) * .8) ease, margin-bottom var(--zoom-dur) var(--zoom-ease); } /* 最大化中はヘッダーを画面の上へ隠す。動画領域を広く使うため、 ただ隠すのではなく高さそのものを畳んで、空いた分だけ下の内容を押し上げる （transform だけでは見た目が動くだけで、確保していた場所は空いたままになる）。 :has() で #player 側の状態を見るだけなので、縦積み・2カラム・端末を問わず共通で効く */ header:has(~ #player.maxed){ max-height:0; margin-bottom:0; opacity:0; transform:translateY(-100%); pointer-events:none; } /* 畳んでいる間・畳む動きの間だけ切る。`.zooming` も見るのは、解除して高さが 戻りきるまでの途中でも中身がはみ出さないようにするため */ header:has(~ #player.maxed), header:has(~ #player.zooming){overflow:hidden} .hdr-side{display:flex; align-items:center; gap:8px; min-width:0} .hdr-side > button{flex:none} .hdr-left{justify-content:flex-start} .hdr-right{justify-content:flex-end} /* ロゴ。高さだけ決めて幅は比率任せ。**黒地に置く前提の画像**なので色は持たない */ h1{--logoh:32px; margin:0; line-height:0; color:#fff; justify-self:center} h1 .logo{display:block; height:var(--logoh); width:auto} /* 幅は比率任せ */ /* 読み上げと検索向けにテキストも残す。見た目からは外す */ .sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0} #btnChange{display:inline-flex; align-items:center; gap:6px} .home-ico{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:480px){ .wrap{ --gutter:12px; padding:14px 12px 16px; padding-top:max(14px, env(safe-area-inset-top)); padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); padding-bottom:max(16px, env(safe-area-inset-bottom)); } header{gap:10px; margin-bottom:12px} h1{--logoh:25px} #btnChange{font-size:12px; padding:6px 10px} #btnChange span{display:none} /* 狭い画面はホームアイコンだけにする */ } .spacer{flex:1} /* ---- アプリの案内（iPhone・iPad のブラウザだけ）---- 意匠は Figma の案A。地は面の色（ピンクで塗らない）、押せることは「入手」の丸で示す */ .appban{ display:flex; flex-direction:column; margin:0 0 14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:#1c1c1f; } .appban[hidden]{display:none} .ab-main{display:flex; flex-direction:column; gap:12px; padding:16px; color:var(--fg); text-decoration:none; -webkit-tap-highlight-color:transparent} .ab-main:active{background:#242428} .ab-head{display:flex; align-items:center; gap:12px} .ab-ico{flex:0 0 auto; width:56px; height:56px; border-radius:13px} .ab-title{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px} .ab-title b{font-size:16px; line-height:1.4} .ab-title small{font-size:12px; color:var(--dim)} .ab-get{ flex:0 0 auto; padding:7px 18px; border-radius:999px; background:var(--pink); color:#fff; font-size:14px; font-weight:700; line-height:1.4; } /* ---- LP（/about/）への入口（スマホ・タブレットのブラウザだけ）---- LP の扉と同じ空気にする：暗い紫の地・虹の縁・虹の「Cloop」・黄色の「あなたの出番」。 **テーマを選んでいても、このカードは暗いまま**（LP の扉が暗いので、押した先と見た目を揃える）。 縁は背景を2枚重ねて作る（border-image は角丸と両立しない） */ .lpcard{ display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:14px 14px 14px 12px; border:1.5px solid transparent; border-radius:16px; color:#fff; text-decoration:none; background: radial-gradient(120% 140% at 0% 0%, #3a1640 0%, #1a1022 55%, #120c18 100%) padding-box, linear-gradient(115deg, #fe2c55, #ff9a1f 30%, #ffd84a 45%, #25f4ee 70%, #9e5cff) border-box; box-shadow:0 10px 30px -12px rgba(254,44,85,.45); -webkit-tap-highlight-color:transparent; transition:transform .18s cubic-bezier(.22,1,.36,1); } .lpcard[hidden]{display:none} .lpcard:active{transform:scale(.98)} /* 絵：LP の縦の映像を2枚、扇に重ねる。上に再生の丸 */ .lc-art{position:relative; flex:0 0 auto; width:92px; height:112px} .lc-shot{position:absolute; top:6px; width:62px; height:100px; object-fit:cover; border-radius:10px; border:2px solid rgba(255,255,255,.9); box-shadow:0 6px 16px rgba(0,0,0,.5); background:#2a1d33} .lc-shot.a{left:2px; transform:rotate(-7deg); z-index:1} .lc-shot.b{right:0; transform:rotate(8deg); filter:brightness(.75)} .lc-play{position:absolute; left:50%; top:50%; z-index:2; width:38px; height:38px; margin:-19px 0 0 -19px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.45)} .lc-play svg{width:18px; height:18px; margin-left:2px; fill:#1a1022} /* 押せることを、再生の丸の波紋でそっと知らせる（transform と opacity だけ） */ .lc-play::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #fff; animation:lcRing 2.4s cubic-bezier(.22,1,.36,1) infinite} @keyframes lcRing{0%{transform:scale(1); opacity:.8} 70%,100%{transform:scale(1.9); opacity:0}} .lc-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px} .lc-kick{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:rgba(255,255,255,.8)} .lc-kick i{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#ffc21a; box-shadow:0 0 8px #ffc21a} .lc-kick em{font-style:normal; color:#ffc21a} .lc-kick > span{white-space:nowrap} /* 「す」だけが次の行に落ちる（320px で実際に落ちた） */ .lc-title{font-size:16px; font-weight:800; line-height:1.45; letter-spacing:.01em; text-wrap:pretty} .lc-title .nw{white-space:nowrap} /* 「ってな／に？」で割らない（320px で割れた） */ .lc-logo{font-size:1.18em; font-weight:900; letter-spacing:.01em; background:linear-gradient(90deg, #fe2c55, #ff9a1f 35%, #ffd84a 50%, #25f4ee 75%, #9e5cff); -webkit-background-clip:text; background-clip:text; color:transparent} .lc-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:rgba(255,255,255,.65)} .lc-meta svg{flex:0 0 auto; width:28px; height:28px; padding:6px; border-radius:50%; background:rgba(255,255,255,.12); fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} /* 360px 未満は絵を縮めて、文字に幅を回す */ @media (max-width:359px){ .lpcard{gap:10px; padding:12px 12px 12px 10px} .lc-art{width:76px; height:96px} .lc-shot{width:52px; height:86px; top:5px} .lc-play{width:32px; height:32px; margin:-16px 0 0 -16px} .lc-play svg{width:15px; height:15px} .lc-kick{font-size:10px; gap:5px} .lc-title{font-size:15px} } /* ---- drop zone ---- */ #dropzone{ border:2px dashed rgba(254,44,85,.45); border-radius:20px; background:rgba(255,255,255,.03); padding:64px 20px; text-align:center; color:var(--dim); cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; } #dropzone:hover{border-color:var(--pink); color:var(--fg); transform:translateY(-1px); box-shadow:0 14px 46px -18px rgba(254,44,85,.85)} #dropzone b{display:block; font-size:17px; color:var(--fg); margin-bottom:6px; letter-spacing:.02em} /* 扉のキャラ10人。**折り返さない**（nowrap）。幅が狭くなったら一緒に縮む。 大きさは flex コンテナ（.emo）の幅に対する % なので、10人ぶん＋間隔を足しても 95% に収まる＝どんな幅でも1行に並ぶ。両端の clamp は小さすぎ・大きすぎの止め */ #dropzone .emo{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:clamp(2px, 1%, 10px); margin-bottom:12px; } /* 下限を px で置かない。10人ぶん（86%）＋間隔（9%）で95%に収まる計算なので、 % のまま縮めるかぎり**どんな幅でもはみ出さない**。px の下限を足すと、 幅が下限を割ったところで枠から溢れる（320px で実際に14px はみ出した）。 上限46pxは原本96pxのちょうど半分＝Retina で等倍2倍になる大きさ */ #dropzone .emo img{flex:0 0 auto; width:min(8.6%, 46px); height:auto} .orline{display:flex; align-items:center; gap:12px; margin:14px 0; color:var(--dim); font-size:12px} .orline::before,.orline::after{content:""; flex:1; height:1px; background:var(--line)} .src-btns{display:flex; gap:10px} .srcbtn{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:9px; padding:16px 12px; border-radius:14px; font-size:14px; font-weight:700; } .srcbtn svg{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .srcbtn svg .fill{fill:currentColor; stroke:none} #ytform{display:flex; gap:8px; flex-wrap:wrap} #yturl{ flex:1; min-width:220px; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--fg); font:inherit; border-radius:10px; padding:9px 12px; } #yturl:focus{border-color:var(--cyan); outline:none} #srcmsg{margin:10px 0 0; font-size:12px; color:var(--pink); min-height:18px} #srcmsg:empty{display:none} /* 何も出ていないときは場所を取らない（下の枠と詰める） */ #srcmsg.info{color:var(--dim)} /* ---- 動画ライブラリ ---- */ /* 動画が溜まったら一覧を先に見せ、取り込みは1行に畳む。 一覧は伸びるが上限で頭打ちになり、そこから先は内側でスクロールする。 フッターは画面下ではなく一覧のすぐ下に付く。 上限は JS の fitStart() が実測して入れる（100svh はアドレスバーで動くため） */ #start.has-lib #dropzone{display:none} #start.has-lib #library{margin:0 0 14px} #start.has-lib #libList{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:2px 2px 2px 0; /* 下端をぼかして「まだ続く」ことを示す。最後まで送ると消える */ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } /* 上限に達していない（＝スクロール不要な）ときはぼかさない */ #start.has-lib #libList.at-end{-webkit-mask-image:none; mask-image:none} .addbtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border-radius:14px; font-size:14px; font-weight:700; border-color:rgba(254,44,85,.45); color:var(--fg); } .addbtn[hidden]{display:none} /* display を明示している要素は hidden 属性に勝ってしまう */ .addbtn:hover{border-color:var(--pink); background:rgba(254,44,85,.12)} .addbtn svg{width:18px; height:18px; fill:none; stroke:var(--pink); stroke-width:2.2; stroke-linecap:round} #library{margin-top:26px} #ytNote{margin:8px 0 0; font-size:11px; color:var(--dim); text-align:center} #ytNote[hidden]{display:none} /* 11px の小さな字なので、色と下線の両方でリンクだと示す。 padding は inline 要素なので行送りを動かさず、指の当たり判定だけ広がる */ #ytNote a{color:var(--cyan); text-decoration:underline; text-underline-offset:2px; padding:6px 0} .lib-head{display:flex; align-items:baseline; gap:10px; margin:0 2px 10px} .lib-head h2{margin:0; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--dim)} .lib-count{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums} /* 圧縮できていない動画の注意。オレンジは他で使っていないので目立つ */ .libwarn{ margin-left:auto; display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; border-color:rgba(255,159,10,.5); color:var(--warn); font-size:12px; font-variant-numeric:tabular-nums; } .libwarn[hidden]{display:none} .libwarn:hover{border-color:var(--warn); background:rgba(255,159,10,.12)} .libwarn svg{width:14px; height:14px; fill:none; stroke:var(--warn); stroke-width:2; stroke-linejoin:round} .libwarn svg .ex{stroke-linecap:round} .lib-warn{display:inline-flex; align-items:center} .lib-warn svg{width:13px; height:13px; fill:none; stroke:var(--warn); stroke-width:2; stroke-linejoin:round} .lib-warn svg .ex{stroke-linecap:round} #libList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .lib-item{display:flex; align-items:stretch; gap:8px; position:relative} .lib-open{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; padding:9px 12px 9px 9px; text-align:left; border-radius:14px; } .lib-open:hover{border-color:var(--pink); background:rgba(255,255,255,.09)} /* クラウドへ上げるボタン。削除より細くして、行の文字幅を削らない */ /* 同期の印。メタ情報の並びに置く。送信中は雲だけ、終わったら雲＋チェック */ .lib-sync{display:inline-flex; align-items:center} .lib-sync svg{width:15px; height:10px; fill:var(--dim); stroke:none} .lib-sync.done svg{fill:var(--ok)} .lib-thumb{ flex:none; width:52px; height:52px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border:1px solid var(--line); overflow:hidden; position:relative; } .lib-thumb img{width:100%; height:100%; object-fit:cover; object-position:center; display:block} .lib-thumb.has-img{background:#000} .lib-thumb svg{width:22px; height:22px; fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.6} .lib-thumb .fill{fill:rgba(255,255,255,.5); stroke:none} .lib-thumb.yt svg{stroke:var(--pink)} .lib-thumb.yt .fill{fill:var(--pink)} .lib-body{min-width:0; display:flex; flex-direction:column; gap:4px} .lib-name{font-size:14px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .lib-meta{display:flex; gap:12px; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums} .lib-edit{flex:none; width:46px; border-radius:14px; display:grid; place-items:center; padding:0} .lib-edit svg{width:17px; height:17px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .lib-edit:hover{border-color:var(--cyan)} .lib-edit:hover svg{stroke:var(--cyan)} /* Pro と同期。買う前・買ったあと・繋がったあとで中身が入れ替わる */ #pro{ margin:14px 0 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); } #pro[hidden]{display:none} .pro-head{display:flex; align-items:center; gap:7px} .pro-head b{font-size:14px; letter-spacing:.02em} .pro-ico{display:inline-flex; flex:0 0 auto} .pro-ico[hidden]{display:none} .pro-ico svg{width:17px; height:11px; fill:var(--fg); stroke:none} #proWhen{margin-left:auto; font-size:11px; color:var(--dim); text-align:right} #proPrice{margin-left:auto; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums} #proSub{margin:5px 0 0; font-size:12px; color:var(--dim); line-height:1.5} .prohelp{ width:18px; height:18px; padding:0; border-radius:50%; font-size:11px; line-height:1; color:var(--dim); display:grid; place-items:center; flex:0 0 auto; } .prohelp[hidden]{display:none} .prohelp:hover{color:var(--fg); border-color:var(--pink)} #proSend{margin-top:10px} #proSend[hidden]{display:none} .use-num{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; margin-bottom:5px} .use-bar{height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden} .use-bar i{display:block; height:100%; width:0; background:var(--pink); transition:width .3s} .pro-auto{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:12px; color:var(--dim); cursor:pointer; } .pro-auto[hidden]{display:none} .pro-auto input{accent-color:var(--pink); width:15px; height:15px; flex:0 0 auto} .pro-acts{display:flex; align-items:center; gap:10px; margin-top:11px} .probtn{ flex:1 1 auto; padding:10px 12px; border-radius:12px; font-size:13px; font-weight:700; border-color:rgba(254,44,85,.45); color:var(--fg); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; } .pm-mid{grid-column:2; display:inline-flex; align-items:center; gap:7px} .pm-ico{display:inline-flex} .pm-ico[hidden]{display:none} .pm-ico svg{width:16px; height:11px; fill:var(--fg); stroke:none} .pm-use{ grid-column:3; justify-self:end; font-size:11px; font-weight:400; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; } .pm-use[hidden]{display:none} .pm-use.tight #proUsed{color:var(--pink)} /* 9割を超えたら「使った分」だけ赤く */ .probtn:hover{border-color:var(--pink); background:rgba(254,44,85,.12)} .probtn:disabled{opacity:.5; cursor:default} .prolink{ border:0; background:none; padding:6px 2px; font-size:12px; color:var(--dim); text-decoration:underline; text-underline-offset:3px; } .prolink:hover{color:var(--fg)} /* LP（/about/）への入口。Web 版の「アプリとつなぐ」の枠の中（スマホ・タブレットのブラウザは #lpCard。PC はこの1行だけ） */ .aboutlink{display:inline-flex; align-items:center; gap:4px; margin:6px 0 2px; font-size:13px; font-weight:600; color:var(--cyan); text-decoration:underline; text-underline-offset:3px} .aboutlink::after{content:"→"; text-decoration:none} .aboutlink[hidden]{display:none} .prolink[hidden]{display:none} /* フッターは法務リンクだけ。**アカウント操作を並べない。** 3つ並ぶと 375px で折り返して2行になる（実際になった）。右肩のメニューへ逃がしてある */ .foot-line{display:flex; align-items:center; justify-content:center; margin:10px 0 0} .foot-line #legalLinks{margin:0} /* 右肩のアカウントメニュー */ .acct{position:relative; flex:none} .acct[hidden]{display:none} #btnAcct{ width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center; color:var(--dim); } #btnAcct svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #btnAcct:hover,#btnAcct.on{color:#fff; border-color:var(--cyan); background:rgba(255,255,255,.09)} .acctmenu{ position:absolute; top:calc(100% + 6px); right:0; z-index:40; display:flex; flex-direction:column; min-width:170px; padding:4px; background:#141414; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.55); } .acctmenu[hidden]{display:none} /* display:flex に負けるので添える */ .acctmenu button{ border:0; background:none; text-align:left; white-space:nowrap; padding:9px 12px; border-radius:7px; font-size:13px; color:var(--fg); } .acctmenu button[hidden]{display:none} .acctmenu button:hover{background:rgba(255,255,255,.09)} /* **`danger` は使わない。** 既存の `button.danger` が赤ベタなので、 メニューの項目に当てると文字が読めなくなる（実際に潰れた） */ .acctmenu button.warn{color:var(--pink)} /* 戻せない操作は色で区別する */ /* 端末リンクの番号。離れて見えるよう大きく、字間を空ける */ .linkcode{ position:relative; width:100%; padding:16px; border:1px solid var(--line); border-radius:12px; text-align:center; font-size:30px; font-weight:700; letter-spacing:.16em; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.05); } .copyico{ position:absolute; top:8px; right:8px; width:15px; height:15px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .linkcode:hover .copyico{stroke:var(--pink)} #linkShow[hidden],#linkEnter[hidden],#linkMsg[hidden]{display:none} #linkEnter{display:flex; gap:8px} #linkInput{ flex:1 1 auto; min-width:0; background:rgba(0,0,0,.32); border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:10px 12px; text-transform:uppercase; letter-spacing:.1em; font-size:16px; /* 16px 未満だと iOS が勝手に拡大する */ } #linkInput:focus{outline:none; border-color:var(--pink)} #legalLinks{margin:28px 0 0; font-size:12px; color:var(--dim); text-align:center} #proWait{margin-top:8px} #legalLinks a{color:var(--dim)} #ytwrap{position:absolute; inset:0; display:none} #ytwrap iframe{width:100%; height:100%; display:block; border:0} #cropbox.yt{width:min(100%, calc(56vh * 16 / 9)); aspect-ratio:16/9; max-height:56vh} #cropbox.yt video{display:none} #cropbox.yt #ytwrap{display:block} #cropbox.yt #cropov{display:none} #player.yt .countbar{display:none} #cropbox.yt #ytwrap{pointer-events:none} #overlay{ position:fixed; inset:14px; z-index:50; border-radius:22px; background:rgba(0,0,0,.9); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; pointer-events:none; font-size:20px; font-weight:700; color:var(--pink); border:3px dashed var(--pink); } body.dragging #overlay{display:flex} /* ---- player ---- */ #player{display:none} /* 縦動画は既定で縦積み。横に余白が余るほど画面が広いときだけ2カラムにする。 PCのマウス操作は1100px、iPadなど指操作は960pxから （スマホは横向きでも1024px前後までしか無いので掛からない。iPadは13インチの縦置き 1032ptと、11インチ以下・miniの横置き1133pt以上を想定。実機で要確認） */ @media (min-width:1100px) and (pointer:fine), (min-width:960px) and (pointer:coarse){ #player.portrait .layout{display:flex; gap:18px; align-items:flex-start} #player.portrait .col-video{flex:0 0 auto; max-width:50%} #player.portrait .col-ctrl{flex:1 1 0; min-width:0} #player.portrait .col-ctrl .bar{margin-top:0} #player.portrait #rangeNav > button{font-size:11px; padding:6px 9px} } /* ---- 動画の最大化ボタン ---- */ .col-video{position:relative} /* ボタンを stage の外（半分はみ出し）に置くため */ #btnMax{ position:absolute; z-index:7; width:28px; height:28px; padding:0; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.86); border:1px solid rgba(255,255,255,.3); box-shadow:0 4px 12px rgba(0,0,0,.7); backdrop-filter:blur(6px); left:50%; bottom:-14px; transform:translateX(-50%); /* 縦積み：下端の左右中央 */ } #btnMax:hover{border-color:var(--cyan); background:#000} #player.side #btnMax{left:auto; right:-14px; top:50%; bottom:auto; transform:translateY(-50%)} /* 横並び：右端の天地中央 */ #player.side.maxed #btnMax{right:9px} /* 最大化中は画面の端に接するので、映像の内側に入れる */ .max-ico{width:15px; height:15px; display:block; fill:#fff; stroke:none} .max-ico g{display:none} /* 縦積みは上下の三角、横並びは左右の三角。最大化中は内向きに反転する */ #player:not(.side) .max-ico .v-out{display:block} #player:not(.side).maxed .max-ico .v-out{display:none} #player:not(.side).maxed .max-ico .v-in{display:block} #player.side .max-ico .h-out{display:block} #player.side.maxed .max-ico .h-out{display:none} #player.side.maxed .max-ico .h-in{display:block} /* 縦積み：再生の段だけ残して、タイムラインとカウントを畳む */ #player.maxed:not(.side) .tlwrap, #player.maxed:not(.side) .countbar{display:none} /* **戻す途中はまだ出さない。** 解除した瞬間にこの2段が場所を取り返すと、 映像がまだ縮み切っていないぶんページが一時的に伸び、下の段が画面外へ 押し出される（実測で162px はみ出していた）。縮み終わってから、 空いている場所にそのまま出す＝レイアウトは動かない */ #player.zooming:not(.side):not(.maxed) .tlwrap, #player.zooming:not(.side):not(.maxed) .countbar{display:none} /* YouTube はプレイヤーを改変できないため、切らずに横幅いっぱいへ広げるだけ */ /* YouTube はプレイヤーを改変できないので切らない。外枠だけを広げ、16:9のまま中央に置く （大きさは availableH から JS が入れる） */ #player.maxed #cropbox.yt{aspect-ratio:auto; max-height:none} #player.maxed .stage{align-items:center} /* 横並び：操作系を画面の外へ送り出す（映像の列がそのぶん広がる） */ /* 映像の伸び縮みと同じ長さ・同じイージング。操作列が空けた幅がそのまま映像に渡るので、 途中で映像が枠からはみ出して切れることがない */ /* **`min-width` も動かす。** 横向き2カラムでは操作列の幅を決めているのが flex-basis ではなく min-width（映像を50%に抑える側の指定）なので、 ここを動かさないと幅が一瞬で消え、スライドして畳まれなくなる */ .col-ctrl{ transition:flex-basis var(--zoom-dur) var(--zoom-ease), min-width var(--zoom-dur) var(--zoom-ease), opacity calc(var(--zoom-dur) * .6) ease, transform var(--zoom-dur) var(--zoom-ease); } /* 横並びのときは映像の列を行幅いっぱいまで伸ばす。 basis を 0 にするのは、basis:auto（中身の幅）だと 「箱を広げる → 列が広がる → また箱を広げる」と参照が循環して収束しないため */ /* 横並びの最大化中だけ使う浮き島。JS（placeRangeNav）がフレーズと再生の段を ここへ入れる（フレーズが上・再生の段が下）。高さが可変な2つを並べるので 固定オフセットではなく flex の column で積む */ #maxOverlay{ position:absolute; left:12px; right:12px; bottom:12px; z-index:5; display:flex; flex-direction:column; gap:8px; pointer-events:none; } #maxOverlay[hidden]{display:none} #maxOverlay > *{pointer-events:auto} #maxOverlay #rangeNav{position:static; padding:10px 2px 2px} /* 動画の上に直に乗るので、既存の浮き要素（rangeNav の chip など）と同じ 暗地＋ぼかしの見た目にして視認性を確保する */ /* **ここに overflow を付けないこと。** 以前 `overflow-x:auto` を保険で付けていたが、 `overflow-x` を visible 以外にすると `overflow-y` も auto に計算される（仕様）。 つまりバーが切り落とし箱になり、**速度のプルダウン（.speeds）が丸ごと消える**。 .speeds は bottom:100% で上へ開くので、バーの外＝クリップ対象になる （実測：ポップアップ136pxのうち131pxがバーの上にはみ出し、 elementFromPoint がバーではなく stage を返す＝描かれてすらいない）。 .stage の overflow:hidden には当たらない（ポップアップは stage の内側に収まる）ので、 切っていたのはこのバーだけ。 横スクロールの保険が要らない理由：この箱が出るのは `.side.maxed`＝横置きのときだけで、 最狭の 568x320 でもバー518pxに対し中身440px（余り78px）。 さらに .bar.rated が等速でないとき尺表示を譲る。4つ目の四角ボタンを足さない限り溢れない （CLAUDE.md「再生バーに4つ目の四角ボタンを足さないこと」） */ #maxOverlay #playBar{ margin-top:0; flex-wrap:nowrap; padding:8px 10px; border-radius:14px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.5); /* **フレーズの段より上に置く。** backdrop-filter は重なりの文脈を作るので、 速度のプルダウン（.speeds の z-index:40）はこのバーの内側で閉じてしまう。 上へ開いたぶんが #rangeNav（z-index:5）の下に潜り、 いちばん下の項目（0.5×）だけ押せなくなる（実測）。 バーとフレーズの段は場所が重ならないので、上げても見た目は変わらない */ position:relative; z-index:6; } #player.side.maxed .col-video{flex:1 1 0; max-width:none; min-width:0} #player.side.maxed .col-ctrl{ flex:0 0 0 !important; opacity:0; transform:translateX(28px); /* 伸びも縮みもさせない */ pointer-events:none; overflow:hidden; height:0; /* 幅0だと中身が縦に伸びてページが縦スクロールするので高さも潰す */ /* 横向き2カラム用の min-width（動画を50%までに抑える側の設定）がここでも 効いたままだと、flex:0 0 0 にしても min-width ぶんの幅が確保され続けて 動画がその分だけ画面幅いっぱいまで伸びない（実際に右側が黒く余った） */ min-width:0 !important; } #player.side.maxed .layout{gap:0} /* ---- 最大化・解除の動き ---- **箱を scale して見せかけない。** 横と縦で倍率の違う scale を当てると、 映像の縦横比が崩れ、枠の中のUI（フレーズの列・ボタン）まで伸び縮みする。 動かすのは「枠の実寸（width / height）」と「映像の**等倍** scale」だけ。 枠は形が変わってよいが、中身はそれぞれ自前の大きさを持っているので歪まない。 クロップのドラッグ中に効くと操作が遅れて感じるので、**最大化の間だけ**付ける */ #player.zooming .stage{transition:height var(--zoom-dur) var(--zoom-ease)} #player.zooming #cropbox{ transition:width var(--zoom-dur) var(--zoom-ease), height var(--zoom-dur) var(--zoom-ease); } #player.zooming #cropbox video{ transition:width var(--zoom-dur) var(--zoom-ease), height var(--zoom-dur) var(--zoom-ease), transform var(--zoom-dur) var(--zoom-ease); } #player.zooming #cropov{ transition:left var(--zoom-dur) var(--zoom-ease), top var(--zoom-dur) var(--zoom-ease), width var(--zoom-dur) var(--zoom-ease), height var(--zoom-dur) var(--zoom-ease); } /* 最終形を測る一瞬だけ、すべての動きを止める（この間に描画は挟まれない）。 止めずに測ると、畳みかけのヘッダー・操作列の途中の値を拾ってしまい、 映像が「一度伸びてから、もう一度伸びる」二段の動きになる */ .wrap.no-anim, .wrap.no-anim *{transition:none !important} .stage{ position:relative; background:#000; border-radius:16px; overflow:hidden; display:flex; justify-content:center; border:1px solid var(--line); box-shadow:0 20px 60px -30px rgba(254,44,85,.6); } #cropbox{position:relative; overflow:hidden; line-height:0; max-width:100%} /* 拡大中は、選んだ矩形の画角のまま横幅にフィットさせる */ #cropbox.cropped{max-height:none} #cropbox.cropped video{position:absolute; left:0; top:0; max-width:none; max-height:none} video{display:block; width:auto; max-width:100%; max-height:56vh; background:#000} #cropov{position:absolute; inset:0; cursor:crosshair; touch-action:none} #croprect{ position:absolute; display:none; border:2px dashed var(--cyan); border-radius:4px; background:rgba(37,244,238,.14); box-shadow:0 0 0 9999px rgba(0,0,0,.35); } #uncropTip{ position:absolute; top:10px; right:48px; z-index:6; height:30px; display:none; align-items:center; white-space:nowrap; border:none; background:#fff; color:#000; font-size:12px; font-weight:700; padding:0 11px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.45); } #uncropTip::after{ content:""; position:absolute; right:-6px; top:50%; margin-top:-5px; width:0; height:0; border-style:solid; border-width:5px 0 5px 6px; border-color:transparent transparent transparent #fff; } #uncropTip.show{display:flex; animation:tipIn .18s ease-out} @keyframes tipIn{from{opacity:0; transform:translateX(6px)}to{opacity:1; transform:none}} #restoreTip{ position:absolute; top:10px; left:10px; z-index:6; display:none; align-items:center; max-width:calc(100% - 68px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,.72); border:1px solid rgba(37,244,238,.5); backdrop-filter:blur(6px); color:var(--fg); font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; box-shadow:0 4px 14px rgba(0,0,0,.55); } #restoreTip.show{display:flex; animation:restoreIn .2s ease-out} @keyframes restoreIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} #btnUncrop{ position:absolute; top:10px; right:10px; z-index:6; width:30px; height:30px; padding:0; display:grid; place-items:center; border-radius:9px; background:rgba(0,0,0,.72); border:1px solid rgba(37,244,238,.5); backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.55); } #btnUncrop:hover{border-color:var(--cyan); background:rgba(0,0,0,.92)} .uncrop-ico{width:15px; height:15px; display:block; fill:var(--cyan); stroke:none} #rangeNav{ position:absolute; left:12px; right:12px; bottom:12px; z-index:5; display:flex; align-items:center; gap:6px; overflow-x:auto; padding:10px 2px 2px; scrollbar-width:none; } #rangeNav::-webkit-scrollbar{display:none} #navChips{display:flex; gap:6px} #rangeNav > button{ flex:none; font-size:12px; font-weight:600; padding:7px 12px; border-radius:11px; backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.5); } /* フレーズが1つでもあれば控えめに（点線＋暗い背景） */ #rangeNav > button.quiet{ background:rgba(0,0,0,.82); background-image:none; color:#fff; border:1px dashed rgba(255,255,255,.32); box-shadow:0 4px 14px rgba(0,0,0,.5); } #rangeNav > button.quiet:hover{color:#fff; border-color:var(--cyan); background:rgba(0,0,0,.92)} #rangeNav > #btnClearAll{ background:none; background-image:none; border:none; box-shadow:none; backdrop-filter:none; color:#fff; padding:7px 6px; text-shadow:0 1px 3px rgba(0,0,0,.9); } #rangeNav > #btnClearAll:hover{color:var(--pink); background:none} /* 左右2カラムのときは JS（placeRangeNav）が #rangeNav を .col-ctrl の先頭へ動かす。 タイムラインは .col-ctrl 側にあるので、フレーズの列もそちら側に来て関連が見える。 動画の上に重ねる絶対配置をやめ、ふつうの行に戻す */ #player.side #rangeNav{ position:static; padding:0 2px 12px; margin:0; } .navchip{ position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; /* タイムラインのフレーズバーと同じ配色（下地の黒は映像の上での可読性用） */ background-color:rgba(0,0,0,.82); background-image:linear-gradient(180deg, rgba(37,244,238,.30), rgba(37,244,238,.14)); border:1px solid rgba(37,244,238,.7); border-radius:11px; padding:7px 13px; font:inherit; font-size:13px; font-weight:600; backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.5); text-shadow:0 1px 3px rgba(0,0,0,.8); color:#fff; } .navchip:hover{border-color:var(--cyan); background-color:rgba(0,0,0,.9)} /* 選択中：タイムラインの選択中バーと同じ枠線・背景。文字と下線は枠線と同じピンク （汎用の button.on スタイルに上書きされないよう明示する） */ .navchip.on{ color:#fff; font-weight:600; background-color:rgba(0,0,0,.82); /* 1枚目＝再生の進捗（左から --p まで濃く）／2枚目＝選択中の下地 */ background-image: linear-gradient(90deg, rgba(254,44,85,.52) var(--p,0%), rgba(254,44,85,0) var(--p,0%)), linear-gradient(180deg, rgba(254,44,85,.22), rgba(254,44,85,.14)); border-color:var(--pink); } .navchip.on:hover{border-color:var(--pink); background-color:rgba(0,0,0,.9)} .navchip.on .nm{text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:5px; text-decoration-thickness:2px} .navchip .ed{ position:absolute; top:-7px; right:-7px; width:19px; height:19px; padding:0; margin:0; display:grid; place-items:center; border-radius:50%; font-size:11px; line-height:1; background:rgba(0,0,0,.95); border:1px solid rgba(255,255,255,.38); color:#fff; opacity:.9; text-shadow:none; } .navchip .ed .ico{width:11px; height:11px; stroke-width:2.2} .navchip .ed:hover{opacity:1; border-color:var(--cyan); background:#000000} /* 名前の変更・削除ウィンドウ */ #editpop{ position:absolute; z-index:45; display:none; align-items:center; gap:6px; padding:7px; background:rgba(18,18,18,.97); border:1px solid var(--cyan); border-radius:12px; box-shadow:0 14px 34px -12px rgba(0,0,0,.95); backdrop-filter:blur(6px); } #editpop.show{display:flex} #editpop::after{ content:""; position:absolute; bottom:-7px; left:var(--arrow,50%); margin-left:-6px; border:6px solid transparent; border-top-color:var(--cyan); } #editName{ width:140px; background:rgba(0,0,0,.4); border:1px solid var(--line); color:var(--fg); font:inherit; font-size:13px; border-radius:8px; padding:6px 9px; } #editName:focus{border-color:var(--cyan); outline:none} /* 一覧の動画の名前（「2026/09/28の動画」）はフレーズより長いので欄を広げる。 1行目のように上に入らないときは下に出し、矢印も上向きにする */ #editpop.lib #editName{width:190px} #editpop.below::after{bottom:auto; top:-7px; border-top-color:transparent; border-bottom-color:var(--cyan)} /* iOS はフォントが16px未満の入力にフォーカスすると画面を勝手に拡大するので、タッチ端末では16pxにする */ @media (pointer:coarse){ #btnPlay{min-height:38px} #editName,#yturl{font-size:16px} #editName{width:160px} } #editpop button{padding:6px 10px; font-size:12px; border-radius:8px} #editDel{color:var(--pink); border-color:rgba(254,44,85,.5)} #editDel:hover{background:rgba(254,44,85,.18); border-color:var(--pink)} .stage.yt{padding-bottom:56px} .col-ctrl{container-type:inline-size} .bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; --barh:36px} /* 再生の段は高さを揃える。#btnPlay だけ文字ラベルを持つので、揃えないとここだけ高くなる （PCのブラウザで実際に発生した。coarse 用に既にあった揃え方を既定にも広げただけ） */ #btnPlay,#btnRestart,#btnMirror,#btnLoop,#btnSpeed{ height:var(--barh); min-height:0; justify-content:center; } button{ background:var(--panel2); color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:7px 13px; font:inherit; cursor:pointer; white-space:nowrap; transition:border-color .12s, background .12s, transform .06s; } button:hover{border-color:var(--pink); background:rgba(254,44,85,.14)} button:active{transform:translateY(1px)} button.primary{ background:linear-gradient(100deg,var(--pink),var(--purple)); border:none; color:#fff; font-weight:700; box-shadow:0 8px 24px -10px rgba(254,44,85,.9); } button.primary:hover{filter:brightness(1.08)} button.ghost{background:transparent} button.on{background:var(--cyan); border-color:var(--cyan); color:var(--ink); font-weight:700} #btnPlay{min-width:126px; text-align:center} .time{font-variant-numeric:tabular-nums; color:var(--dim)} .time b{color:var(--fg); font-weight:700} .toggle{display:flex; align-items:center; gap:8px} .tg-label{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--dim)} .ico{ width:15px; height:15px; flex:none; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .switch{ position:relative; flex:none; width:48px; height:26px; padding:0; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.07); cursor:pointer; transition:background .18s, border-color .18s, box-shadow .18s; } .switch:hover{border-color:var(--cyan); background:rgba(255,255,255,.12)} .switch .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,.55); transition:transform .18s cubic-bezier(.3,1.4,.5,1), background .18s; } .switch.on{ background:var(--cyan); border-color:transparent; box-shadow:0 0 20px -6px var(--cyan); } .switch.on:hover{background:var(--cyan)} .switch.on .knob{transform:translateX(22px); background:#000000} .switch:active .knob{width:24px} .tlwrap{margin-top:14px} .tlview{position:relative} /* タイムラインの中身。表示窓（#timeline）より広く作って左右にずらす。 子要素は今までどおり % 指定のままでよい */ #tlinner{position:relative; width:100%; height:100%; will-change:transform} /* スクロールバー。溝は4pxに抑え、掴む余地だけ上下に持たせる */ #tlbar{position:relative; height:14px; margin:4px 11px 0; display:none; touch-action:none; cursor:pointer} #tlbar::before{content:""; position:absolute; left:0; right:0; top:5px; height:4px; border-radius:2px; background:rgba(255,255,255,.10)} #tlbarThumb{position:absolute; top:5px; height:4px; min-width:24px; border-radius:2px; background:rgba(255,255,255,.42)} #tlbar:hover #tlbarThumb{background:rgba(255,255,255,.62)} /* スクロールバーを使った人への案内。タイムラインに重ねて中央に出す */ #tlbarTip{ position:absolute; inset:0; z-index:9; display:none; place-items:center; pointer-events:none; } #tlbarTip.show{display:grid; animation:restoreIn .2s ease-out} .tip-pill{ display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 24px); padding:7px 12px; border-radius:999px; background:#fff; color:#000; font-size:12px; font-weight:700; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.45); } .tip-pill svg{ width:15px; height:15px; flex:none; fill:none; stroke:#000; stroke-width:2; stroke-linecap:round; } #btnTall{ position:absolute; top:50%; right:-8px; transform:translateY(-50%); z-index:10; width:26px; height:26px; padding:0; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.95); border:1px solid rgba(255,255,255,.28); box-shadow:0 4px 12px rgba(0,0,0,.65); } #btnTall:hover{border-color:var(--cyan); background:#000000} #btnTall .ico{width:14px; height:14px; stroke:#fff} #btnTall .b{display:none} #btnTall.on .a{display:none} #btnTall.on .b{display:inline} #btnRestart{padding:6px 10px; display:inline-flex; align-items:center} #btnRestart .ico{width:17px; height:17px; stroke:#fff; fill:none} #btnRestart:hover .ico{stroke:var(--cyan)} #btnMirror{padding:6px 9px; display:inline-flex; align-items:center; color:#fff} #btnMirror.on{color:var(--ink)} .bar-right{display:flex; align-items:center; gap:10px} /* ミラー・くり返し・速度をひとまとまりに */ #btnLoop{padding:6px 9px; display:inline-flex; align-items:center} #btnLoop .ico{width:18px; height:18px} #btnLoop.on .ico{stroke:var(--ink)} .mirror-ico{width:24px; height:16px; display:block; fill:currentColor; stroke:none} /* 再生速度：時計アイコンに集約し、押すと上へせり出す */ .speedwrap{position:relative; display:flex; flex:none} #btnSpeed{padding:6px 9px; display:inline-flex; align-items:center; gap:5px; color:#fff} #btnSpeed.on{color:var(--ink)} .speed-ico{width:19px; height:19px; flex:none; display:block; fill:currentColor; stroke:none} #btnSpeed .rate{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1} #btnSpeed .rate:empty{display:none} /* 正方形を保つため、等速でないときは時計アイコンではなく倍率を出す */ #btnSpeed.on .speed-ico{display:none} #btnSpeed.on .rate{font-size:11px; letter-spacing:-.02em} .speeds{ position:absolute; z-index:40; bottom:calc(100% + 9px); right:0; /* 右端で見切れないよう右揃え */ display:none; flex-direction:column; gap:4px; padding:5px; background:rgba(18,18,18,.97); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px -12px rgba(0,0,0,.95); backdrop-filter:blur(6px); } .speeds.show{display:flex; animation:speedIn .16s ease-out} @keyframes speedIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}} .speeds::after{ content:""; position:absolute; bottom:-7px; right:16px; border:6px solid transparent; border-top-color:var(--line); } /* 上に出す余地がないときは下向きに開く */ .speeds.down{bottom:auto; top:calc(100% + 9px)} .speeds.down::after{bottom:auto; top:-7px; border-top-color:transparent; border-bottom-color:var(--line)} .speeds.down.show{animation-name:speedInDown} @keyframes speedInDown{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} .speeds button{ min-width:72px; padding:8px 12px; font-size:13px; font-weight:600; border-radius:8px; font-variant-numeric:tabular-nums; text-align:center; } /* ---- timeline ---- */ #timeline{ position:relative; height:66px; transition:height .18s; /* 左右の余白。0秒と終端で再生ヘッドが枠に食われないように、トラックを内側へ寄せる */ --tlpad:10px; padding:0 var(--tlpad); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:12px; cursor:crosshair; touch-action:none; user-select:none; overflow:hidden; } #timeline.tall{height:132px} #timeline:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(37,244,238,.35)} #wave{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .35s} #wave.on{opacity:1} #progress{position:absolute; top:0; bottom:0; left:0; width:0; background:linear-gradient(90deg, rgba(254,44,85,.22), rgba(254,44,85,.22))} .rangebar{ position:absolute; top:8px; height:calc(100% - 18px); border-radius:8px; overflow:visible; z-index:1; background:linear-gradient(180deg, rgba(37,244,238,.30), rgba(37,244,238,.14)); border:1px solid rgba(37,244,238,.7); } .rangebar.active{ background:linear-gradient(180deg, rgba(254,44,85,.45), rgba(254,44,85,.30)); border-color:var(--pink); box-shadow:0 0 18px -2px rgba(254,44,85,.8); z-index:3; /* 重なっても選択中のフレーズのハンドルが掴める */ } .rangebar .lbl{ position:absolute; top:2px; left:6px; font-size:11px; font-weight:600; color:#ffffff; white-space:nowrap; pointer-events:none; text-shadow:0 1px 3px #000; } .rangebar.active .lbl{color:#fff} .handle{position:absolute; top:-8px; bottom:-8px; width:22px; cursor:ew-resize; z-index:2} .handle.start{left:-11px} .handle.end{right:-11px} /* つまみ本体（丸みのある縦バー） */ .handle::after{ content:""; position:absolute; top:9px; bottom:9px; left:50%; width:7px; margin-left:-3.5px; border-radius:5px; background:var(--cyan); box-shadow:0 2px 8px rgba(0,0,0,.6); transition:width .12s, margin-left .12s, filter .12s; } /* つまみの中の指がかり（2本線） */ .handle::before{ content:""; position:absolute; top:50%; left:50%; width:3px; height:12px; margin:-6px 0 0 -1.5px; border-radius:1px; z-index:1; border-left:1px solid rgba(0,0,0,.45); border-right:1px solid rgba(0,0,0,.45); } .handle:hover::after{width:11px; margin-left:-5.5px; filter:brightness(1.15)} .handle:active::after{width:13px; margin-left:-6.5px} .rangebar.active .handle::after{background:var(--pink)} .handle.move{ left:50%; width:22px; margin-left:-11px; top:8px; bottom:8px; cursor:grab; background:none; border:none; box-shadow:none; } .handle.move:active{cursor:grabbing} .handle.move::before{display:none} .handle.move:hover::after,.handle.move:active::after{width:6px; margin-left:-3px} .handle.move::after{ content:""; position:absolute; top:50%; bottom:auto; left:50%; width:6px; height:10px; margin:-5px 0 0 -3px; background:none; border-radius:0; opacity:.6; border-left:2px solid #fff; border-right:2px solid #fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition:opacity .12s; } .handle.move:hover::after{opacity:1} #selbar{ position:absolute; top:8px; height:calc(100% - 18px); border-radius:8px; display:none; background:rgba(255,255,255,.16); border:1px dashed #fff; } /* 画面の向きの固定。閉じている錠と開いている錠を1つのSVGで出し分ける */ #playhead{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9); z-index:1; cursor:ew-resize; touch-action:none} #playhead::before{content:""; position:absolute; top:-1px; left:-4px; border:5px solid transparent; border-top-color:#fff; transition:transform .12s} /* 掴みしろ。ハンドル（z-index:2）より下なので、重なったところはハンドルが勝つ。 タイムラインは overflow:hidden なので、はみ出しても横スクロールにはならない */ #playhead::after{content:""; position:absolute; top:0; bottom:0; left:-10px; right:-10px} /* 中段のつまみ。線だけだと掴めると気づかれないので、触れる大きさの面を置く */ .ph-grip{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11px; height:46%; min-height:20px; max-height:34px; border-radius:6px; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.55); pointer-events:none; /* 判定は #playhead::after に任せる */ transition:transform .12s; } #playhead.grabbing::before{transform:scale(1.35)} #playhead.grabbing .ph-grip{transform:translate(-50%,-50%) scale(1.18)} .ticks{position:absolute; left:0; right:0; bottom:0; height:14px; pointer-events:none} .tick{position:absolute; bottom:0; font-size:10px; color:var(--dim)} .tick::before{content:""; position:absolute; left:50%; bottom:12px; width:1px; height:6px; background:rgba(255,255,255,.18)} .countbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px} .bpmgrp{display:flex; align-items:center; gap:8px} .countbar button:not(.switch){padding:5px 9px; font-size:12px; border-radius:8px} .countbar .bpm{font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums} .countbar .bpm b{color:var(--fg); font-size:14px} #btnTap{min-width:46px; letter-spacing:.08em} .hint{color:var(--dim); font-size:12px; margin-top:9px} #btnHelp{ width:28px; height:28px; padding:0; border-radius:50%; flex:none; font-size:14px; font-weight:700; color:var(--dim); line-height:1; } #btnHelp:hover{color:#fff; border-color:var(--cyan); background:rgba(255,255,255,.09)} .modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); } .modal[hidden]{display:none} .modal .sheet{ position:relative; width:100%; max-width:520px; max-height:80vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px 24px; box-shadow:0 30px 80px -20px #000; } .mclose{ position:absolute; top:12px; right:12px; width:28px; height:28px; padding:0; border-radius:8px; color:var(--dim); font-size:12px; } .mclose:hover{color:#fff; border-color:var(--pink)} .modal h3{margin:0 0 14px; font-size:15px; font-weight:700; color:var(--fg); letter-spacing:.02em; display:flex; align-items:center; gap:7px} #cfIcon{flex:0 0 auto; display:inline-flex} #cfIcon[hidden]{display:none} #cfIcon svg{width:16px; height:16px; fill:none; stroke:var(--warn); stroke-width:2; stroke-linejoin:round} #cfIcon svg .ex{stroke-linecap:round} .modal .lead{margin:0 0 14px; font-size:13px; line-height:1.8} .modal ol{margin:0 0 16px; padding-left:1.3em; font-size:13px; line-height:2} .modal .note{margin:14px 0 0; font-size:12px; line-height:1.7; color:var(--dim)} /* YouTube の履歴。サムネは16:9のまま使う */ .yth-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:16px 2px 0; font-size:11px; color:var(--dim); letter-spacing:.06em; } .yth-head[hidden]{display:none} #ythist{list-style:none; margin:7px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:min(42vh, 300px); overflow-y:auto} #ythist li{display:flex; align-items:stretch; gap:6px} .yt-del{flex:0 0 auto; width:34px; border-radius:10px; display:grid; place-items:center} .yt-del svg{width:15px; height:15px; fill:none; stroke:var(--dim); stroke-width:1.8; stroke-linecap:round} .yt-del:hover{border-color:var(--pink)} .yt-del:hover svg{stroke:var(--pink)} #ythist[hidden]{display:none} .yt-item{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; padding:6px 10px 6px 6px; border-radius:12px; } .yt-item:hover{border-color:var(--pink); background:rgba(255,255,255,.09)} .yt-item img{ flex:none; width:72px; height:41px; border-radius:7px; object-fit:cover; background:rgba(255,255,255,.08); display:block; } .yt-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px} .yt-name{ font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .yt-meta{display:flex; gap:9px; font-size:11px; color:var(--dim); white-space:nowrap} #ytmsg{margin:10px 0 0; font-size:12px; color:var(--pink); min-height:16px} #ytmsg.info{color:var(--dim)} #ttPick{width:100%; padding:12px} /* 取り込み中の進捗。変換は数十秒かかるので、無いと固まって見える */ #busy{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(4px)} #busy[hidden]{display:none} .busy-box{width:100%; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px} #busyTitle{margin:0 0 12px; font-size:15px; font-weight:700; color:var(--fg)} .busy-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden} .busy-bar span{display:block; height:100%; width:0; border-radius:3px; background:var(--pink); transition:width .2s} /* 離れると中止される旨は、読み飛ばされないよう目立たせる */ .busy-box .note{margin:12px 0 0; padding:9px 11px; border-radius:10px; color:var(--fg); background:rgba(254,44,85,.12); border:1px solid rgba(254,44,85,.4)} #cfNo[hidden]{display:none} .sheet.narrow{max-width:340px} #cfTitle{margin:0 0 10px} #cfBody{margin:0 0 12px} #cfNote{margin:0 0 18px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line)} #cfNote[hidden]{display:none} .cf-actions{display:flex; gap:8px} .cf-actions button{flex:1; padding:11px; font-size:14px; border-radius:12px} button.danger{background:var(--pink); border-color:var(--pink); color:#fff} button.danger:hover{filter:brightness(1.08)} .hint b{color:var(--fg)} #selaction{ position:absolute; z-index:40; display:none; align-items:center; gap:6px; padding:6px; background:rgba(18,18,18,.97); border:1px solid var(--pink); border-radius:12px; box-shadow:0 14px 34px -12px rgba(0,0,0,.95); backdrop-filter:blur(6px); } #selaction.show{display:flex} #selaction::before{ content:""; position:absolute; top:-7px; left:var(--arrow,50%); margin-left:-6px; border:6px solid transparent; border-bottom-color:var(--pink); } #selaction button{padding:6px 11px; font-size:13px; border-radius:9px} /* ========================================================= Pro の訴求と、画面の色（テーマ） 意匠は Figma「Cloop Pro 訴求」。**Pro の色はホログラム調の3色** （ピンク→紫→シアン）で、Pro に関わる所にだけ使う。ほかで使うと特別に見えなくなる ========================================================= */ .pro-badge{ display:inline-flex; align-items:center; padding:2px 7px; border-radius:5px; background:linear-gradient(90deg,#fe2c55,#9e5cff 55%,#25f4ee); color:#fff; font-size:11px; font-weight:800; letter-spacing:.12em; line-height:1.4; text-shadow:0 1px 1px rgba(0,0,0,.25); white-space:nowrap; } .pro-badge[hidden]{display:none} /* ヘッダー：ロゴと PRO をひとかたまりで中央に置く */ h1{display:flex; align-items:center; gap:7px} /* 縁のホログラム。枠線に gradient は塗れないので、疑似要素に塗って中を mask で抜く */ #pro.promo::before, .pm-sheet::before, .pm-lock::before, .pmc-ico::before, .pm-climax::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; background:linear-gradient(100deg,#fe2c55,#9e5cff 50%,#25f4ee); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* ---- 無料のときの訴求枠 ---- */ #pro.promo{ position:relative; padding:16px; border:0; border-radius:18px; background: radial-gradient(75% 90% at 95% 0%, rgba(254,44,85,.42), transparent 70%), radial-gradient(70% 80% at 0% 105%, rgba(37,244,238,.16), transparent 70%), #0b0810; box-shadow:0 10px 34px -10px rgba(254,44,85,.28); } #pro.promo > :not(#proPromo){display:none !important} /* 同期用の中身は隠す */ #proPromo[hidden]{display:none} .pp-head{display:flex; align-items:center; gap:8px} .pp-head > b{font-size:16px; font-weight:700; color:#fff} /* 見出しの横で踊る1人。行の高さは変えない（上下を負のマージンで食わせる） */ .pp-chara{width:40px; height:40px; margin:-12px 0 -10px; transform:rotate(6deg); pointer-events:none} /* 幅360px未満は PRO・名前・キャラ・値段が1行に入らない（320px で22px 足りない）。キャラを外す */ @media (max-width:359px){ .pp-chara{display:none} } .pp-price{ margin-left:auto; display:inline-flex; align-items:baseline; gap:5px; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); } .pp-price[hidden]{display:none} .pp-price small{font-size:11px; font-weight:500; color:rgba(255,255,255,.7)} .pp-price b{font-size:14px; color:#fff; font-variant-numeric:tabular-nums} .pp-lead{margin:12px 0; font-size:17px; font-weight:700; line-height:1.55; color:#fff; text-wrap:pretty} .pp-lead em, .pm-title em{ font-style:normal; color:transparent; background:linear-gradient(90deg,#fe2c55,#b873ff 50%,#25f4ee); -webkit-background-clip:text; background-clip:text; } .pp-cta, .pm-buy{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; border:0; color:#fff; background:linear-gradient(90deg,#fe2c55,#ff4f99); font-weight:700; box-shadow:0 8px 22px -8px rgba(254,44,85,.6), inset 0 1px 0 rgba(255,255,255,.28); } .pp-cta:hover, .pm-buy:hover{border:0; background:linear-gradient(90deg,#fe2c55,#ff4f99); filter:brightness(1.06)} .pp-cta{height:48px; border-radius:13px; font-size:15px} .pp-cta svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round} /* ---- フッターの「購入を復元」。利用規約・プライバシーと同じ見た目で並べる ---- */ .foot-sep{font-size:12px; color:var(--dim); margin:0 .4em} .foot-sep[hidden]{display:none} .footlink{padding:0; border:0; background:none; border-radius:0; font-size:12px; color:var(--dim); text-decoration:underline; text-underline-offset:2px} .footlink:hover{border:0; background:none; color:var(--fg)} .footlink[hidden]{display:none} /* ---- 右肩：歯車（無料）とアカウント（Pro）。見た目はアカウントボタンに揃える ---- */ #btnGear{width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center; color:var(--dim)} #btnGear svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} #btnGear:hover, #btnGear.on{color:var(--fg); border-color:var(--cyan); background:var(--panel2)} .acctmenu{min-width:236px} .thm{padding:8px 6px 6px} /* 下にサインアウト・削除が並ぶときだけ区切る */ .acctmenu:has(> button:not([hidden])) .thm{border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:10px} .thm-h{margin:0 4px 8px; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--dim)} .thm-row{display:flex; gap:4px} .acctmenu .sw-btn{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 2px; border:0; border-radius:10px; background:none; text-align:center; } .acctmenu .sw-btn:hover{background:var(--panel2)} .sw-btn small{font-size:10.5px; color:var(--dim)} .sw-btn.on small{color:var(--fg); font-weight:700} .sw{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid rgba(128,128,128,.35)} .sw-btn.on .sw{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--pink)} .sw-btn.locked .sw svg{width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))} .sw-btn.locked .sw-white svg{stroke:#555; filter:none} .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:8px; box-shadow:2px 2px 0 #17151a} .acctmenu .thm-lock{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:8px; padding:8px; border:1px solid rgba(254,44,85,.45); border-radius:9px; background:rgba(254,44,85,.1); color:var(--fg); font-size:12px; font-weight:700; text-align:center; } .acctmenu .thm-lock:hover{background:rgba(254,44,85,.18)} .thm-lock svg{width:13px; height:13px; fill:none; stroke:var(--pink); stroke-width:2.2; stroke-linecap:round} /* ---- Pro の説明（モーダル）。開けるのは無料の人だけ＝常に黒地なので、色は直に書く ---- */ /* **`.modal.pm` まで書いて強くする。** ファイル末尾のスマホ向け @media に `.modal .sheet{max-height:86vh; padding:…}` があり、同じ強さだと後ろのそちらが勝つ */ .modal.pm .pm-sheet{ position:relative; max-width:430px; max-height:min(92vh, 900px); padding:0; border:0; border-radius:26px; display:flex; flex-direction:column; overflow:hidden; color:#fff; background: radial-gradient(60% 40% at 85% 0%, rgba(254,44,85,.5), transparent 70%), radial-gradient(55% 35% at 10% 3%, rgba(158,92,255,.35), transparent 70%), radial-gradient(60% 30% at 50% 22%, rgba(37,244,238,.1), transparent 70%), #0d0912; } .pm-sheet::before{padding:1px; z-index:4} .pm-sheet .mclose{z-index:5; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff} .pm-scroll{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch} .pm-hero{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 24px 26px; text-align:center} /* 賑やかし。Figma の位置（左右それぞれの端から）と大きさ。Figma の回転は反時計回りが正 */ .pm-ch{position:absolute; height:auto; pointer-events:none} .pm-ch.c1{left:18px; top:24px; width:45px; transform:rotate(-12deg)} .pm-ch.c2{left:26px; top:104px; width:40px; transform:rotate(-8deg)} .pm-ch.c3{left:15px; bottom:14px; width:34px; transform:rotate(-26deg)} .pm-ch.c4{right:28px; top:55px; width:38px; transform:rotate(10deg)} .pm-ch.c5{right:35px; top:116px; width:42px; transform:rotate(8deg)} .pm-ch.c6{right:12px; bottom:17px; width:37px; transform:rotate(21deg)} /* 幅360px未満は見出しの左右の2人が「Pro」にかぶる。外周の4人だけ残す */ @media (max-width:359px){ .pm-ch.c2, .pm-ch.c5{display:none} } .pm-lock{position:relative; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:rgba(0,0,0,.55); box-shadow:0 0 28px rgba(158,92,255,.55)} .pm-lock::before{padding:1.2px} .pm-logo{display:block; height:32px; width:auto} .pm-lock .pro-badge{font-size:14px; padding:3px 9px; border-radius:6px} .pm-title{margin:0; font-size:28px; font-weight:900; line-height:1.32; color:#fff; letter-spacing:.01em} .pm-price{margin:0; display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:500; color:rgba(255,255,255,.75)} .pm-price[hidden]{display:none} .pm-price b{font-size:20px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums} .pm-list{display:flex; flex-direction:column; gap:10px; padding:0 14px 8px} .pm-card{display:flex; gap:12px; padding:15px 14px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1)} .pmc-ico{position:relative; flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(254,44,85,.28), rgba(158,92,255,.28), rgba(37,244,238,.28))} .pmc-ico::before{padding:1.2px} .pmc-ico svg{width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .pmc-ico svg .dot{fill:#fff; stroke:none} .pm-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px} .pm-txt > b{font-size:16px; font-weight:700; color:#fff} .pm-txt > p{margin:0; font-size:13px; line-height:1.6; color:rgba(255,255,255,.68); text-wrap:pretty} /* 容量の目安。**使用量ではない**ので数字は 3GB だけ */ .pm-meter{display:flex; align-items:center; gap:8px; margin-top:4px} .pm-meter i{flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,#fe2c55,#9e5cff 60%,#25f4ee)} .pm-meter span{font-size:11px; font-weight:600; color:rgba(255,255,255,.55)} .pm-hdr{display:flex; align-items:center; justify-content:center; gap:7px; height:40px; margin-top:4px; border-radius:10px; background:#000; border:1px solid rgba(255,255,255,.12)} .pm-hdr img{display:block; height:22px; width:auto} .pm-sw{display:flex; gap:12px; padding-top:4px} .pm-sw span{display:flex; flex-direction:column; align-items:center; gap:5px} .pm-sw .sw{width:28px; height:28px} .pm-sw span.on .sw{box-shadow:0 0 0 3px #0d0912, 0 0 0 5px #9e5cff} .pm-sw small{font-size:10.5px; color:rgba(255,255,255,.6)} .pm-sw span.on small{color:#fff; font-weight:700} .pm-privacy{display:flex; justify-content:center; align-items:flex-start; gap:7px; margin:6px 0 0; font-size:11px; line-height:1.5; text-align:center; color:rgba(255,255,255,.55)} .pm-privacy svg{flex:none; width:13px; height:13px; margin-top:2px; fill:none; stroke:rgba(255,255,255,.55); stroke-width:2} .pm-who{padding:30px 22px 36px} /* 下は購入ボタンのぼかし（-26px）に食われないぶん空ける */ .pm-who h3{margin:0 0 12px; font-size:20px; font-weight:900; color:#fff} .pm-who ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px} .pm-who li{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; line-height:1.5; color:rgba(255,255,255,.92)} .pm-who li::before{ content:""; flex:none; width:20px; height:20px; border-radius:50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(135deg,#fe2c55,#9e5cff,#25f4ee); } .pm-climax{position:relative; margin-top:18px; padding:18px 12px; border-radius:18px; background:rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:0 0 30px -6px rgba(158,92,255,.45)} .pm-climax small{font-size:12px; font-weight:500; color:rgba(255,255,255,.6)} .pm-climax b{font-size:26px; font-weight:900; color:transparent; background:linear-gradient(90deg,#fe2c55,#9e5cff,#25f4ee); -webkit-background-clip:text; background-clip:text} /* 扉と同じ10人。**幅に対する % で縮める**（扉の .emo と同じ理由。px の下限を置くと狭い画面で溢れる） */ .pm-dancers{display:flex; justify-content:center; gap:1.2%; width:100%; padding-top:8px} .pm-dancers img{width:min(8.6%, 26px); height:auto} /* 購入は下に固定。上の縁をぼかして、中身が下へ続いていることを示す */ .pm-foot{position:relative; z-index:3; flex:none; margin-top:-26px; padding:26px 18px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, rgba(13,9,18,0), #0d0912 38%)} .pm-buy{height:56px; border-radius:16px; font-size:17px} .pm-buy:disabled{opacity:.6} /* 開くときは**画面の下端から**競り上がり、一度行き過ぎて戻る（easeOutBack の形）。 始点は 100vh（シートの高さではなく画面の高さ）。広い画面で中央に出すときも下端から来る。 **跳ねは控えめに。** 本家の easeOutBack（.34,1.56,.64,1）は行き過ぎが移動距離の約10%で、 スマホの画面いっぱいだと約75px 跳ねてステータスバーの下まで上がった。y1 を 1.35 に下げて約4% （約33px）にしてある。`hidden` を外した瞬間に display が戻るので、そこで animation が頭から走る。 閉じるときは .closing を付けて下へ落とし、終わってから hidden にする（closeProModal） */ @keyframes pmUp{from{transform:translateY(100vh)} to{transform:none}} @keyframes pmDown{from{transform:none} to{transform:translateY(100vh)}} @keyframes pmFade{from{background-color:rgba(0,0,0,0)} to{background-color:rgba(0,0,0,.72)}} @keyframes pmFadeOut{from{background-color:rgba(0,0,0,.72)} to{background-color:rgba(0,0,0,0)}} .modal.pm:not([hidden]){animation:pmFade .28s ease-out both} .modal.pm:not([hidden]) .pm-sheet{animation:pmUp .6s cubic-bezier(.34,1.35,.64,1) both} /* 閉じる。上と同じ強さなので、後ろに書いたこちらが勝つ */ .modal.pm.closing{animation:pmFadeOut .32s ease-in both; pointer-events:none} .modal.pm.closing .pm-sheet{animation:pmDown .32s cubic-bezier(.32,0,.67,0) both} /* スマホは下から出るシート。ステータスバーの下まで */ @media (max-width:520px){ .modal.pm{align-items:flex-end; padding:max(44px, calc(env(safe-area-inset-top) + 8px)) 0 0} .modal.pm .pm-sheet{max-width:none; height:100%; max-height:none; border-radius:26px 26px 0 0; /* 行き過ぎて上に跳ねた瞬間、下端にすき間が開く。同じ色の影を真下に伸ばして塞ぐ （overflow:hidden は影を切らない） */ box-shadow:0 140px 0 0 #0d0912} /* 縁の線は上と左右だけ。下端はふだん画面の外で、跳ねた瞬間だけ途中に横線として見えてしまう （疑似要素を下へ伸ばすと、シートの overflow:hidden で下の辺ごと切れる） */ .pm-sheet::before{bottom:-40px} } /* ---- 画面の色（Pro だけ） ---- html[data-theme] で色の変数だけを差し替える。**既定（ブラック）は何も上書きしない**ので、 出荷済みの見た目は変わらない。 ホワイトとシックは明るい地。練習画面も明るくするが、**映像の枠と映像に重ねる部品は黒のまま** （チップ・最大化・クロップ解除は映像の上に乗る）。波形の色は --wave* を JS が読んで canvas に描く */ html[data-theme="fes"]{ --bg:#12091f; --surface:#1c1030; --panel:rgba(255,255,255,.07); --panel2:rgba(255,255,255,.12); --line:rgba(255,255,255,.18); --pink:#ff2e88; --purple:#ffb800; --cyan:#3df2ff; --wave:rgba(255,255,255,.2); --wave-beat:rgba(255,46,136,.42); --guide:61,242,255; --guide-rainbow:255,46,136|255,184,0|61,242,255|158,92,255; } html.lit[data-theme="white"]{ --bg:#f4f4f6; --surface:#ffffff; --panel:#ffffff; --panel2:#ffffff; --line:rgba(0,0,0,.1); --fg:#16161a; --dim:rgba(22,22,26,.56); --cyan:#0a9c97; --ink:#ffffff; --wave:rgba(22,22,26,.13); --wave-beat:rgba(10,156,151,.38); --wave-tick:rgba(22,22,26,.12); --guide:10,156,151; --focus:#0a9c97; } /* シック：参考は「CHIC ELEGANCE」（#2B4C5C / #D8C3A5 / #EAE7DC / #8E8D8A / #E98074）。 地はアイボリー、文字はネイビー、アクセントはコーラル */ html.lit[data-theme="chic"]{ --bg:#eae7dc; --surface:#f7f5ef; --panel:#f7f5ef; --panel2:#f7f5ef; --line:rgba(43,76,92,.18); --fg:#2b4c5c; --dim:rgba(43,76,92,.62); --pink:#e98074; --purple:#e98074; --cyan:#2b4c5c; --ink:#eae7dc; --wave:rgba(43,76,92,.15); --wave-beat:rgba(233,128,116,.45); --wave-tick:rgba(43,76,92,.14); --guide:43,76,92; --focus:#e98074; /* ネイビーは文字の色なので、フォーカスに使うと目立たない */ } /* 明るい地で、白を前提に直書きしていた所 */ /* 訴求枠（.promo）は暗い地の意匠そのもの。明るい色で白くすると、白い字が白い地に消える （Pro でない人は明るい色を選べないので本来は重ならないが、前提に頼らない） */ html.lit #pro:not(.promo){background:var(--panel)} html.lit #dropzone{background:var(--panel)} html.lit .lib-open:hover, html.lit .acctmenu button:hover{background:var(--panel2)} html.lit .lib-thumb{background:linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02))} html.lit .lib-thumb svg{stroke:var(--dim)} html.lit .lib-thumb .fill{fill:var(--dim)} html.lit .use-bar{background:var(--line)} html.lit #btnAcct:hover, html.lit #btnAcct.on{color:var(--fg); background:var(--panel2)} html.lit .acctmenu{background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,.14)} html.lit .modal{background:rgba(0,0,0,.38)} html.lit .modal .sheet{box-shadow:0 30px 80px -20px rgba(0,0,0,.3)} html.lit .mclose:hover{color:var(--fg)} html.lit #cfNote{background:var(--panel)} html.lit #yturl, html.lit #linkInput{background:var(--panel)} /* 練習画面：白を前提に直書きしていた所。**映像の上に乗る部品（.stage の中）は触らない** */ html.lit .col-ctrl .ico, html.lit #btnRestart .ico, html.lit header .ico{stroke:var(--fg)} html.lit #btnMirror, html.lit #btnSpeed{color:var(--fg)} html.lit #btnMirror.on, html.lit #btnSpeed.on{color:var(--ink)} html.lit .speeds{background:var(--surface); box-shadow:0 14px 34px -12px rgba(0,0,0,.3)} html.lit .switch:not(.on){background:var(--panel2)} /* .on の色（アクセント）を潰さない */ html.lit .switch.on .knob{background:var(--ink)} html.lit #timeline{background:var(--panel); box-shadow:0 1px 2px rgba(0,0,0,.05)} html.lit #tlbar::before{background:rgba(0,0,0,.08)} html.lit #tlbarThumb{background:rgba(0,0,0,.3)} html.lit #playhead{background:var(--fg); box-shadow:none} html.lit #playhead::before{border-top-color:var(--fg)} html.lit .ph-grip{background:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.25)} /* 映像の上（.stage）は、変数を黒の既定に戻す。**中身は出荷時の見た目のまま**になる。 「前回の続きから」のチップ（#restoreTip）は暗い地に暗い字、クロップの枠と解除ボタンは テーマの深緑・紺で映像に沈んでいた。横並びの最大化で映像の上に浮く #maxOverlay（再生の段と フレーズ）も .stage の中なので、ここで一緒に戻る（時刻の文字が消えていた件） */ html.lit .stage{ --fg:#ffffff; --dim:rgba(255,255,255,.6); --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.11); --line:rgba(255,255,255,.16); --cyan:#25f4ee; --ink:#000000; } /* 横並び（最大化していない）では #rangeNav が操作列＝明るい地に来る。映像の上ではないので、 チップもタイムラインの帯と同じ明るい見た目にする（黒いチップのままだと浮き、 「クリア」は白字で地に消え、鉛筆は操作列の .ico 指定で暗い円に暗い線になっていた） */ html.lit #player.side:not(.maxed) #rangeNav .navchip{ background-color:var(--panel); color:var(--fg); text-shadow:none; box-shadow:0 2px 8px rgba(0,0,0,.08); background-image:linear-gradient(180deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)); border-color:color-mix(in srgb, var(--cyan) 65%, transparent); } html.lit #player.side:not(.maxed) #rangeNav .navchip.on{ background-image: linear-gradient(90deg, color-mix(in srgb, var(--pink) 38%, transparent) var(--p,0%), transparent var(--p,0%)), linear-gradient(180deg, color-mix(in srgb, var(--pink) 20%, transparent), color-mix(in srgb, var(--pink) 10%, transparent)); border-color:var(--pink); } html.lit #player.side:not(.maxed) #rangeNav .navchip .ed{background:var(--surface); border-color:var(--line); color:var(--fg)} html.lit #player.side:not(.maxed) #rangeNav > button.quiet{ background:var(--panel); color:var(--fg); border-color:var(--line); box-shadow:none; } html.lit #player.side:not(.maxed) #rangeNav > #btnClearAll{color:var(--dim); text-shadow:none} /* フレーズの帯はテーマのアクセントから作る（既定は TikTok の水色と赤の直書き） */ html.lit .rangebar{background:color-mix(in srgb, var(--cyan) 16%, transparent); border-color:color-mix(in srgb, var(--cyan) 65%, transparent)} html.lit .rangebar.active{background:color-mix(in srgb, var(--pink) 28%, transparent); border-color:var(--pink); box-shadow:0 0 16px -4px color-mix(in srgb, var(--pink) 80%, transparent)} html.lit #progress{background:color-mix(in srgb, var(--pink) 16%, transparent)} html.lit .rangebar .lbl, html.lit .rangebar.active .lbl{color:var(--fg); text-shadow:none} html.lit .handle.move::after{border-color:var(--fg); filter:none} html.lit #selbar{background:rgba(0,0,0,.07); border-color:var(--fg)} html.lit .tick::before{background:rgba(0,0,0,.18)} html.lit #player .stage{box-shadow:0 12px 30px -14px rgba(0,0,0,.35)} html.lit #timeline:focus{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 32%, transparent)} /* 範囲を選んだときの「追加／クリア」と、フレーズの編集。黒の直書きのままだと、 文字（--fg）が暗い地に暗い字で消える */ html.lit #selaction, html.lit #editpop{background:var(--surface); box-shadow:0 14px 34px -12px rgba(0,0,0,.3)} html.lit #editName{background:var(--bg)} /* ピンクを直書きしていた縁取りを、テーマのアクセントに寄せる */ html[data-theme="chic"].lit .addbtn, html[data-theme="chic"].lit #dropzone, html[data-theme="chic"].lit .probtn{border-color:rgba(233,128,116,.6)} html[data-theme="fes"] .addbtn, html[data-theme="fes"] #dropzone{border-color:rgba(255,46,136,.55)} /* フェスの飾り。一覧も練習画面も（練習画面では紙吹雪を薄くする）。 動かすのは transform だけの層（光の渦・紙吹雪）にして、合成だけで回るようにする */ html.party body{background:#16052b} html.party body::before, html.party body::after{content:''; position:fixed; z-index:-1; pointer-events:none} /* 光の渦。画面より大きく取って回す（端が見えない） */ html.party body::before{ 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; } /* 紙吹雪。タイル1枚ぶん上から始めて、1枚ぶん落としたら巻き戻す（継ぎ目が出ない） */ html.party body::after{ left:0; right:0; top:-240px; height:calc(100% + 240px); background:url("data:image/svg+xml,") 0 0/240px 240px; opacity:.8; animation:fesFall 11s linear infinite; } html.party[data-screen="player"] body::after{opacity:.3} @keyframes fesSpin{to{transform:rotate(360deg)}} @keyframes fesFall{to{transform:translateY(240px)}} /* カードはすりガラス。地の光が透けて見える */ html.party .lib-open, html.party .lib-edit, html.party .srcbtn, html.party #pro:not(.promo), html.party #dropzone{ background:rgba(22,5,43,.5); border-color:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); } /* サムネの縁を行ごとに色替え */ html.party .lib-item:nth-child(3n+1) .lib-thumb{border-color:#ff2e88; box-shadow:0 0 14px rgba(255,46,136,.7)} html.party .lib-item:nth-child(3n+2) .lib-thumb{border-color:#ffb800; box-shadow:0 0 14px rgba(255,184,0,.6)} html.party .lib-item:nth-child(3n) .lib-thumb{border-color:#3df2ff; box-shadow:0 0 14px rgba(61,242,255,.6)} /* 追加ボタンは虹が流れる。タイル（200%）1枚ぶん送ると元に戻る */ html.party .addbtn{ border:none; 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%; box-shadow:0 10px 30px -8px rgba(255,46,136,.75); animation:fesShift 5s linear infinite; } html.party .addbtn svg{stroke:#fff} @keyframes fesShift{to{background-position:-200% 0}} html.party .lib-head h2{ background:linear-gradient(90deg,#ff2e88,#ffb800,#3df2ff); -webkit-background-clip:text; background-clip:text; color:transparent; } html.party .lib-head .lib-count{color:rgba(255,255,255,.75)} /* 練習画面。再生ボタンにも虹を流し、再生ヘッドはネオン。 タイムラインはすりガラス（地の光が透ける） */ html.party #btnPlay{ background:linear-gradient(90deg,#ff2e88,#ffb800,#3df2ff,#9e5cff,#ff2e88) 0 0/200% 100%; animation:fesShift 5s linear infinite; text-shadow:0 1px 3px rgba(0,0,0,.35); } html.party #timeline, html.party #playBar > button:not(.primary):not(.on), html.party .bar-right > button:not(.on), html.party .speedwrap > button:not(.on), html.party .countbar button:not(.switch){ background:rgba(22,5,43,.5); -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); } html.party #playhead{background:#fff; box-shadow:0 0 8px #ff2e88, 0 0 18px rgba(61,242,255,.8)} html.party .rangebar.active{box-shadow:0 0 18px -2px #ff2e88, 0 0 30px -6px #3df2ff} html.party #player .stage{box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 40px -8px rgba(255,46,136,.7)} /* ロゴはネオンの光。脈打つ */ html.party h1 .logo{animation:fesGlow 1.6s ease-in-out infinite alternate} @keyframes fesGlow{ from{filter:drop-shadow(0 0 6px rgba(255,46,136,.7))} to{filter:drop-shadow(0 0 14px rgba(255,46,136,.95)) drop-shadow(0 0 26px rgba(61,242,255,.55))} } /* ---- ピクセル（promo03 の見た目）---- 地は流れる虹色の液体（#pixelBg・素の WebGL。JS の pixelBg が描く）。字はゲームの字 （和文 DotGothic16・英字 Press Start 2P）、部品は墨の縁取り＋硬い影、カードは白。 明るい地なので LIGHT_THEMES に入れてあり、html.lit の直し（映像の上は黒の既定に戻す、など）が そのまま効く。ここに書くのはこのテーマだけの見た目。 **既存のレイアウトに干渉させない。** 枠の太さ・文字の大きさ・余白・行送りは一切変えない （変えると、375px で詰めてある段が溢れる・一覧の高さの実測がずれる）。 - 太い縁は `border-color` ＋内側の影（inset）か `outline` で足す。どちらも寸法に入らない - 硬い影は box-shadow。押したときの沈みは transform - 字の形だけ替える（font-family）。**動く数字（再生時刻）は替えない** — 等幅の数字を持たない 字にすると、再生中に幅が揺れて段が動く - 飾りのドット絵は、中身が無いと決まっている余白（扉の枠の上下 64px）にだけ置く */ /* 字は同梱（アプリはオフラインで動く）。どちらも SIL OFL 1.1（pixel/OFL-*.txt）。 TTF を woff2 に変えただけで、字は間引いていない（一覧の名前はユーザーが付けるので、どの漢字も来る）。 DotGothic16 501KB・Press Start 2P 30KB。**このテーマを選んだときにだけ読まれる** （@font-face は、その字を使う要素が描かれるまで取りに行かない） */ @font-face{font-family:"Cloop Dot"; src:url("pixel/DotGothic16.woff2") format("woff2"); font-display:swap} @font-face{font-family:"Cloop Pix"; src:url("pixel/PressStart2P.woff2") format("woff2"); font-display:swap} html.lit[data-theme="pixel"]{ --bg:#efece6; --surface:#ffffff; --panel:#ffffff; --panel2:#ffffff; --line:rgba(23,21,26,.16); --fg:#17151a; --dim:rgba(23,21,26,.62); --pink:#ff3d7f; --purple:#ff3d7f; --cyan:#7b5cff; --ink:#ffffff; --wave:rgba(23,21,26,.16); --wave-beat:rgba(255,61,127,.42); --wave-tick:rgba(23,21,26,.14); --guide:123,92,255; /* 8カウントの線は4色で回す。promo03 の水色（#5ee7ff）とピーチ（#ffb38a）は白いタイムラインの上で ほとんど見えなかったので、同じ系統で濃い青とオレンジに替えた */ --guide-rainbow:255,61,127|255,122,89|123,92,255|59,130,246; --focus:#ff3d7f; --k:#17151a; /* 墨。縁取りと影 */ /* **小さい字に縁取りを付けない。右下への硬い影だけ。** 14px のドットの字は字の中のすき間が 1〜2px しかなく、縁取り（text-stroke でも8方向の影でも）がそこを埋めて、遠目に墨の帯になった （iOS で顕著）。promo03 で縁取りが効いていたのは字が 100px あったから */ --k-drop:2px 2px 0 var(--k); --dot:"Cloop Dot","Hiragino Sans",sans-serif; --pix:"Cloop Pix",ui-monospace,monospace; } /* WebGL が使えない端末でも、液体の色味だけは残す */ html.pixel body{background:linear-gradient(160deg,#e9dcff,#f6c6e8 40%,#ffb38a 70%,#ff8fb1)} #pixelBg{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block} /* 部品：墨の縁取り（既存の 1px の枠＋内側 1.5px）＋硬い影。押すと影のぶん沈む */ html.pixel button{border-color:var(--k); box-shadow:inset 0 0 0 1.5px var(--k), 3px 3px 0 var(--k)} html.pixel button:hover{border-color:var(--k); background:#fff6fa} html.pixel button:active{transform:translate(2px,2px); box-shadow:inset 0 0 0 1.5px var(--k), 1px 1px 0 var(--k)} /* primary は border:none（既定）。枠は影だけで描く */ html.pixel button.primary{background:var(--pink); color:#fff; box-shadow:inset 0 0 0 2.5px var(--k), 3px 3px 0 var(--k)} html.pixel button.primary:hover{background:var(--pink)} html.pixel button.on{background:#ffd23f; border-color:var(--k); color:var(--k)} /* 右肩のメニューの中（色の見本・サインアウト・削除）は、ボタンの墨の縁も影も付けない。 付けると見本が白い箱に入り、選んでいる色だけ button.on の黄色い地になった */ html.pixel .acctmenu button, html.pixel .acctmenu button:active{box-shadow:none; border-color:transparent; transform:none} html.pixel .acctmenu .sw-btn, html.pixel .acctmenu .sw-btn.on{background:none; color:inherit} html.pixel .acctmenu button:hover{background:var(--panel2)} /* 速度のプルダウンも同じ。選択肢に箱と影を付けると重たく、右端では影が画面の縁で切れた。 箱のほうを墨の縁と硬い影のカードにして、選択肢は選んでいるものだけ黄色の地 */ html.pixel .speeds{border-color:var(--k); box-shadow:inset 0 0 0 1.5px var(--k), 4px 4px 0 var(--k)} html.pixel .speeds button, html.pixel .speeds button:active{box-shadow:none; border-color:transparent; transform:none} html.pixel .footlink, html.pixel .prolink, html.pixel .mclose, html.pixel #rangeNav > #btnClearAll{box-shadow:none} /* ghost（ホーム・スキップ・いいえ・クリア・削除）は元の色でも「背景なし・細い枠あり」の控えめなボタン。 墨の枠は付けて、右下の硬い影だけ外す＝影のあるボタンより一段控えめ。 以前は枠ごと消していて、ホームボタンだけ枠の無い裸のアイコンになった */ html.pixel button.ghost{box-shadow:inset 0 0 0 1.5px var(--k)} html.pixel button.ghost:active{transform:translate(1px,1px); box-shadow:inset 0 0 0 1.5px var(--k)} /* 名前の編集の「削除」は枠がピンク（消す操作の警告色）。内枠も同じ色にそろえる */ html.pixel #editDel, html.pixel #editDel:active{box-shadow:inset 0 0 0 1.5px var(--pink)} /* カード（白・墨の縁・硬い影） */ html.pixel #dropzone, html.pixel .srcbtn, html.pixel .lib-open, html.pixel .lib-edit, html.pixel #pro:not(.promo){ background:#fff; border-color:var(--k); box-shadow:inset 0 0 0 2px var(--k), 5px 5px 0 var(--k); } html.pixel #dropzone{border-style:solid} html.pixel #dropzone:hover{border-color:var(--k); transform:translate(-1px,-1px); box-shadow:inset 0 0 0 2px var(--k), 7px 7px 0 var(--k)} html.pixel .lib-open:hover, html.pixel .srcbtn:hover{background:#fff6fa} html.pixel .lib-thumb{border-color:var(--k); outline:1.5px solid var(--k)} html.pixel .orline{color:var(--k)} html.pixel .orline::before, html.pixel .orline::after{background:var(--k)} /* ゲームの字（形だけ。大きさ・太さの指定は既存のまま）。 **替えるのは、幅が箱の側で決まっているところだけ。** ドットの字は同じ大きさでも横に広く、 中身で幅が決まる所（フレーズのチップ・帯のラベル）に当てると、チップが 4.7px 太って 隣の「フレーズを追加」を押し出した（実測）。そこは既存の字のまま */ html.pixel #dropzone b, html.pixel .addbtn, html.pixel .srcbtn, html.pixel .pro-head b, html.pixel .pp-head b, html.pixel .lib-name, html.pixel .modal h3, html.pixel .thm-h{ font-family:var(--dot); } html.pixel .lib-head h2{color:var(--k)} /* 追加ボタンはピンクの札。白い字に墨の縁取り（縁取りは塗りの順番で描くので寸法に入らない） */ html.pixel .addbtn{ background:var(--pink); color:#fff; border-color:var(--k); box-shadow:inset 0 0 0 2px var(--k), 5px 5px 0 var(--k); text-shadow:var(--k-drop); } html.pixel .addbtn svg{stroke:#fff; filter:drop-shadow(1.5px 1.5px 0 var(--k))} html.pixel .addbtn:hover{background:var(--pink); border-color:var(--k); filter:brightness(1.05)} /* 扉の飾り：枠の上下の余白（padding 64px）の四隅にドット絵。中身とは重ならない */ html.pixel #dropzone{position:relative} /* 位置を持たない枠。relative を当てても配置は変わらない */ html.pixel #dropzone::before, html.pixel #dropzone::after{ content:''; position:absolute; width:30px; height:30px; pointer-events:none; background:url("pixel/heart.svg") 0 0/contain no-repeat; top:16px; left:16px; animation:pxBob 1.2s steps(2) infinite; } html.pixel #dropzone::after{background-image:url("pixel/coin.svg"); top:auto; left:auto; right:16px; bottom:16px; animation-delay:-.6s} @keyframes pxBob{50%{transform:translateY(-3px)}} /* 練習画面 */ html.pixel #timeline{border-color:var(--k); outline:1.5px solid var(--k); box-shadow:4px 4px 0 var(--k)} html.pixel #player .stage{border-color:var(--k); outline:2px solid var(--k); box-shadow:6px 6px 0 var(--k)} html.pixel #player.maxed .stage, html.pixel #player.zooming .stage{outline:none; box-shadow:none} html.pixel .rangebar.active{background:color-mix(in srgb, var(--pink) 30%, transparent); box-shadow:none} /* フレーズのチップ。映像の上でも白い札（ゲームの字の見出しと同じ作り） */ html.pixel .navchip, html.pixel #player.side:not(.maxed) #rangeNav .navchip{ background:#fff; background-image:none; color:var(--k); text-shadow:none; backdrop-filter:none; border-color:var(--k); box-shadow:inset 0 0 0 1.5px var(--k), 3px 3px 0 var(--k); } html.pixel .navchip.on, html.pixel #player.side:not(.maxed) #rangeNav .navchip.on{ color:#fff; border-color:var(--k); background-color:var(--pink); background-image:linear-gradient(90deg, rgba(255,210,63,.95) var(--p,0%), transparent var(--p,0%)); } html.pixel .navchip.on .nm{text-decoration:none; text-shadow:var(--k-drop)} html.pixel .navchip .ed{background:#fff; border-color:var(--k); color:var(--k); box-shadow:none} html.pixel .navchip .ed .ico{stroke:var(--k)} html.pixel #rangeNav > button{backdrop-filter:none} html.pixel #rangeNav > button.quiet{background:#fff; color:var(--k); border-color:var(--k)} /* COMBO ×N。チップの外（body 直下）に浮かべる札。**出すのはこのテーマだけ**（JS の showCombo が見る）。 ループしたら跳ねて出て、しばらくして消える（動きは JS の Web Animations） */ #combo{ position:fixed; left:0; top:0; z-index:30; pointer-events:none; opacity:0; white-space:nowrap; font-family:var(--pix); font-size:13px; line-height:1; color:var(--k); padding:7px 9px 6px; background:#ffd23f; border-radius:8px; box-shadow:inset 0 0 0 2.5px var(--k), 3px 3px 0 var(--k); } #combo small{font-size:8px; margin-right:6px; vertical-align:1px} /* ---- range list ---- */ /* 操作列が狭いときは各要素を縮めて1段に収める */ @container (max-width:840px){ .bar{gap:7px} #btnPlay{min-width:96px; padding:6px 10px; font-size:13px} #btnRestart,#btnMirror{padding:5px 8px} .time{font-size:12px} .time b{font-size:13px} .toggle{gap:6px} .tg-label{font-size:12px} .switch{width:42px; height:23px} .switch .knob{width:17px; height:17px} .switch.on .knob{transform:translateX(19px)} #btnSpeed{padding:5px 8px} .countbar{gap:6px} .bpmgrp{gap:6px} .countbar button:not(.switch){padding:4px 8px; font-size:11px} } /* さらに狭いときは文字を落としてアイコンだけにする */ @container (max-width:560px){ #btnPlay{min-width:62px; padding:7px 10px} /* アイコンだけでも押しやすい幅を確保 */ #btnPlay .lbl{display:none} } /* ---- 操作ガイド ---- */ #tour{position:fixed; inset:0; z-index:70; pointer-events:none} #tour[hidden]{display:none} /* ハイライト以外は4枚のマスクで覆い、操作を受け付けない */ .t-mask{position:fixed; background:rgba(0,0,0,.68); pointer-events:auto} /* 変化を見せている間は暗転を外す（操作は #tourBlock が引き続き止める） */ #tour.hold .t-mask{background:transparent} /* 変化を見せている間は全面を塞ぐ */ #tourBlock{position:fixed; inset:0; pointer-events:none} #tour.hold #tourBlock{pointer-events:auto} #tourHole{ position:fixed; border-radius:14px; border:2px solid var(--cyan); pointer-events:none; box-shadow:0 0 22px -4px var(--cyan); transition:left .25s, top .25s, width .25s, height .25s; } #tourCard{ position:fixed; width:min(300px, calc(100vw - 32px)); pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px 13px; box-shadow:0 24px 60px -20px #000; transition:left .25s, top .25s; } #tourCard .t-step{font-size:11px; letter-spacing:.12em; color:var(--cyan); font-weight:700} #tourCard h4{margin:6px 0 6px; font-size:15px; font-weight:700} #tourCard p{margin:0 0 12px; font-size:13px; line-height:1.7; color:var(--dim)} #tourCard .t-actions{display:flex; gap:8px; justify-content:flex-end} #tourCard button{padding:6px 12px; font-size:12px} #tourCard .t-done{display:none; text-align:right; font-size:13px; font-weight:700; color:var(--cyan)} @media (max-width:520px){ #tourCard{width:min(258px, calc(100vw - 24px)); padding:11px 13px 10px} #tourCard .t-step{font-size:10px} #tourCard h4{font-size:14px; margin:4px 0 4px} #tourCard p{font-size:12px; line-height:1.6; margin:0 0 9px} #tourCard button{padding:5px 10px; font-size:11px} #tourCard .t-done{font-size:12px} } #tour.hold #tourCard .t-actions{display:none} #tour.hold #tourCard .t-done{display:block} /* ========================================================== モバイル（指で操作する端末） ここは @container のコンパクト化より後ろに置く。同じ詳細度なので 後に書いたほうが勝ち、指のサイズが画面の狭さより優先される ========================================================== */ @media (pointer:coarse){ /* --- 押せる大きさを確保する（目標44px） --- */ /* 再生の段は全部同じ高さに揃える。右の3つは正方形 */ .bar{--barh:44px} #btnMirror,#btnLoop,#btnSpeed{width:var(--barh); padding:0} #btnRestart{width:var(--barh); padding:0} /* アイコンだけなので同じ正方形にする */ #btnPlay{font-size:14px} .speeds button{min-height:44px; min-width:88px; font-size:14px} .countbar button:not(.switch){min-height:40px; padding:6px 12px; font-size:13px} #btnTap{min-width:58px} .navchip{min-height:40px; font-size:13px} #rangeNav > button{min-height:38px} .mclose{width:38px; height:38px} #editpop button{min-height:40px; padding:6px 13px; font-size:13px} #selaction button{min-height:42px; padding:8px 14px} #btnHelp{width:36px; height:36px; font-size:15px} #btnAcct{width:36px; height:36px} #btnAcct svg{width:19px; height:19px} .acctmenu button{padding:12px 14px; font-size:14px} /* 指で押すぶん広げる */ /* トグルはコンパクト化より指の大きさを優先 */ .switch{width:52px; height:30px} .switch .knob{width:24px; height:24px} .switch.on .knob{transform:translateX(22px)} /* --- 見た目は変えず、当たり判定だけ広げる --- */ #btnHelp{position:relative} /* 他の3つはもともと absolute なので触らない */ #btnHelp::after,.mclose::after{content:""; position:absolute; inset:-5px} /* 右端にあるので**右へは広げない**（広げるとページが横スクロールする） */ #btnAcct::after{content:""; position:absolute; inset:-4px 0 -4px -4px} /* このボタンはタイムラインの外にはみ出しているので、右方向へは広げない （広げると画面幅を超えてページが横スクロールしてしまう） */ #btnTall::after{content:""; position:absolute; inset:-9px 0 -9px -18px} /* 26px の丸を44px相当に */ /* 鉛筆はチップの外側（上と右）へ多めに広げる。内側に広げすぎると フレーズの切り替えタップを食べてしまう */ .navchip .ed::after{content:""; position:absolute; top:-4px; right:-6px; bottom:-9px; left:-9px} /* --- タイムラインのつまみを掴みやすく --- */ #timeline{height:76px} #timeline.tall{height:152px} .handle{width:34px} .handle.start{left:-17px} .handle.end{right:-17px} .handle.move{width:34px; margin-left:-17px} .handle::after{width:8px; margin-left:-4px} } /* 操作列が狭いときの組み方。指かマウスかではなく「操作列の幅」だけで決めるので、 スマホ縦・スマホ横の右カラム・PCの細いウィンドウのどれでも同じ1段になる */ /* 1段に収めるため、狭くなる順にラベルから落としていく */ @container (max-width:600px){ #btnPlay .lbl{display:none} } @container (max-width:560px){ /* 動画とタイムラインの間は必ず1段に収める。 潰れて中身がはみ出さないよう flex:none で固定し、幅そのものを詰める。 唯一 .time だけは縮んでよい（極端に狭い端末での逃げ道） */ .bar{flex-wrap:nowrap; gap:6px} .bar > *{flex:none} .bar > .spacer{display:none} .bar-right{gap:4px; margin-left:auto} /* ひとまとまりのまま右端へ寄せる */ #btnPlay{min-width:0; padding:7px 17px} #btnRestart .ico{width:15px; height:15px} .mirror-ico{width:22px; height:15px} .bar .time{font-size:12px; flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap} #btnLoop .ico{width:16px; height:16px} .countbar{row-gap:10px} .countbar > .toggle:first-child{order:0} .countbar > .spacer{order:1} .countbar > .toggle:last-child{order:2} .bpmgrp{order:3; width:100%; gap:6px} .bpmgrp .bpm{flex:none} .bpmgrp button{flex:1 1 0; min-width:0} } /* 360px 級のさらに狭い端末でも1段を守れるよう、もう一段詰める */ @container (max-width:344px){ .bar{gap:3px; --barh:40px} .bar-right{gap:3px} .bar .time{font-size:11px} .bar .time .tot{display:none} /* ここまで狭ければ尺は目盛りで読む */ #btnPlay{padding:7px 12px} #btnSpeed .rate{font-size:11px} } @media (max-width:560px){ .modal{padding:12px} .modal .sheet{padding:20px 18px 22px; max-height:86vh} } /* ---- 横向きは画面の幅をそのまま使う ---- max-width:1100px は「広いPCの画面で間延びさせない」ための指定なので、 横向きの端末では外す。スマホだけでなくタブレット（iPad横向き＝1200〜1400px）も対象。 判定は端末の種類ではなく「横向き × タッチ」または「横向き × スマホと同じ比率の窓」。 こうしておくと、実機でもPCのウィンドウを縮めた確認でも同じ結果になる */ @media (orientation:landscape) and (pointer:coarse), (orientation:landscape) and (max-height:640px) and (max-width:1200px){ .wrap{ --gutter:12px; max-width:none; padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); } } /* 横向きのスマホ：縦に積むと映像に高さを回せないので、左右に分ける。 操作系が1段に収まるようになったぶん、操作列は細くして映像に幅を回す。 タブレットは縦積みのまま（画面が広く、並べると逆に使いにくいため） */ @media (orientation:landscape) and (max-height:560px) and (max-width:1024px){ .wrap{padding-top:max(8px, env(safe-area-inset-top)); padding-bottom:8px} /* 横向きは縦に余裕がない。一覧と取り込みを左右に分けて、両方見えるようにする */ #start.has-lib{display:flex; flex-direction:row; gap:14px; align-items:stretch} #start.has-lib #library{flex:1 1 auto; min-width:0; margin:0} /* 「＋ 動画を追加」の頭を、一覧の1行目の頭に揃える。 左列は見出し（.lib-head）のぶん下がるので、その高さを padding で足す。 高さは fitStart() が --libhead に実測値を入れる */ #start.has-lib .start-foot{ flex:0 0 clamp(300px, 40%, 340px); min-width:0; /* 同期の枠が折り返さない幅 */ display:flex; flex-direction:column; gap:10px; padding-top:var(--libhead, 0px); overflow-y:auto; /* 高さは fitStart() が入れる */ } #start.has-lib .start-foot > *{flex:0 0 auto} /* 縮めずにスクロールさせる */ #start.has-lib .start-foot .orline{margin:0} #start.has-lib .start-foot #srcmsg{margin:0} #start.has-lib .start-foot #legalLinks{margin:4px 0 0} header{margin-bottom:6px} h1{--logoh:25px} .layout{display:flex; gap:10px; align-items:flex-start} /* 最大化前は動画に幅の半分より多くを渡さない（最大化はそのためにある）。 余った分は操作列（.col-ctrl）へ回す。画面が狭くて両方の最小幅が収まらないときは 動画側から縮む（flex-shrink） */ .col-video{flex:0 1 50%; min-width:0; max-width:50%} .col-ctrl{flex:1 1 0; min-width:clamp(272px, 32%, 320px)} /* ガイドのカードは左右に置くので、収まるよう小さめにする */ #tourCard{width:min(258px, calc(100vw - 24px)); padding:11px 13px 10px} #tourCard h4{font-size:14px; margin:4px 0 4px} #tourCard p{font-size:12px; line-height:1.6; margin:0 0 9px} #tourCard button{padding:5px 10px; font-size:11px} .col-ctrl .bar{margin-top:0} .tlwrap{margin-top:9px} .countbar{margin-top:9px} /* 縦に余りが出るので、そのぶんタイムラインを高くしてつまみを掴みやすくする */ #timeline{height:84px} #timeline.tall{height:150px} }