:root{ --hgw-ink:#0f151c; --hgw-panel:#161f2a; --hgw-panel2:#1d2836; --hgw-line:#2a3846; --hgw-text:#e7edf3; --hgw-muted:#8b98a5; --hgw-accent:#1d9bf0; /* 再生位置・操作 */ --hgw-loop:#f4b400; /* ABリピート */ --hgw-outer:#7c5cff; /* 大枠 */ --hgw-radius:12px; color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0;background:var(--hgw-ink);color:var(--hgw-text); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",Roboto,sans-serif} body{padding:0;max-width:none;margin:0;overflow-x:hidden} .pad{padding:8px 10px} h1{font-size:1.05rem;margin:0 0 3px} .sub{color:var(--hgw-muted);font-size:.8rem;margin:0 0 10px;line-height:1.6} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--hgw-accent);outline-offset:2px} .hgwp{background:var(--hgw-panel);border:1px solid var(--hgw-line);border-left:0;border-right:0;border-radius:0;overflow:clip} .hgwp-stage{position:relative;background:#000;width:100%;aspect-ratio:16/9;max-height:46vh; display:flex;align-items:center;justify-content:center} .hgwp-stage video{width:100%;height:100%;object-fit:contain;display:block;margin:0 auto} .hgwp.audio .hgwp-stage{display:none} .hgwp.empty .hgwp-stage{display:block;aspect-ratio:auto;height:280px;max-height:40vh;background:var(--hgw-panel2)} .hgwp.empty video{display:none} .hgwp.empty .lane,.hgwp.empty .bar,.hgwp.empty .hint,.hgwp.empty .status{display:none} .dropbox{position:absolute;inset:10px;width:auto;display:none;flex-direction:column;gap:8px; align-items:center;justify-content:center;border:3px dashed var(--hgw-line);border-radius:12px; background:transparent;padding:0 12px;text-align:center} .hgwp.empty .dropbox{display:flex} .hgwp.empty .hgwp-tap{display:none} .dropbox .e1{font-size:1.05rem;font-weight:700;color:var(--hgw-text)} .dropbox .e2{font-size:.82rem;color:var(--hgw-muted)} .dropbox:hover{border-color:var(--hgw-accent)} .frames{display:inline-flex;gap:8px;align-items:center} .frames2{display:inline-flex;gap:6px} .status{padding:9px 12px;font-size:.78rem;line-height:1.6;border-top:1px solid var(--hgw-line); background:var(--hgw-panel2);color:var(--hgw-muted)} .status[hidden]{display:none} .status.err{color:#ffb4a8;background:#2a1a1a} .status b{color:var(--hgw-text);font-weight:600} .hgwp.audio .frames2{display:none} .vol{width:80px;accent-color:var(--hgw-accent)} .hgwp.mirror video{transform:scaleX(-1)} .hgwp:fullscreen{display:flex;flex-direction:column;height:100vh;border-radius:0;border:0} .hgwp:fullscreen .hgwp-stage{flex:1 1 auto;max-height:none;min-height:0;aspect-ratio:auto} .hgwp:fullscreen .lane.detail{height:150px} .hgwp:fullscreen .lane.over{height:50px} .hgwp:fullscreen .hint{display:none} .hgwp.audio .frames{display:none} .hgwp-tap{position:absolute;inset:0;width:100%;display:grid;place-items:center} .hgwp-tap span{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center; font-size:1.5rem;opacity:0;transition:opacity .12s} .hgwp[data-playing="0"] .hgwp-tap span{opacity:1} /* レーン */ .lane{position:relative;background:var(--hgw-panel2);touch-action:none;user-select:none;-webkit-user-select:none} .lane canvas{display:block;width:100%;height:100%} .grip{height:8px;background:var(--hgw-panel);cursor:row-resize;position:relative} .grip:hover{background:var(--hgw-line)} .grip::after{content:'';position:absolute;left:50%;top:3px;width:44px;height:2px;margin-left:-22px;border-radius:2px;background:var(--hgw-line)} .grip:hover::after{background:var(--hgw-muted)} .lane.detail{height:172px;border-top:1px solid var(--hgw-line);cursor:crosshair} .hgwp.audio .lane.detail{height:220px} .lane.over{height:64px;border-top:1px solid var(--hgw-line);cursor:pointer} /* 大枠なし（Web版）: 下の全体波形とその高さつまみを出さない。横移動バー(.hsb)が表示範囲を受け持つ */ .hgwp[data-outer="0"] .lane.over,.hgwp[data-outer="0"] .grip[data-g="ov"]{display:none} .lane .msg{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;color:var(--hgw-muted); pointer-events:none;text-align:center;padding:0 20px} .lane .msg[hidden]{display:none} .hnd{position:absolute;top:0;bottom:0;width:26px;margin-left:-13px;padding:0;display:none;z-index:3} .hnd[data-on="1"]{display:block} .hnd i{position:absolute;top:0;bottom:0;left:calc(50% - 1.5px);width:3px;background:var(--hgw-loop)} .hnd b{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-style:normal;font-weight:700;font-size:.68rem; padding:2px 6px;border-radius:5px;background:var(--hgw-loop);color:#1a1204;line-height:1.2} .hnd[data-k="b"] b{top:auto;bottom:3px} .hnd[data-k="os"] i,.hnd[data-k="oe"] i{background:var(--hgw-outer)} .hnd[data-k="os"] b,.hnd[data-k="oe"] b{background:var(--hgw-outer);color:#fff;top:3px} .body{position:absolute;top:0;bottom:0;cursor:grab;display:none;z-index:2} .body[data-on="1"]{display:block} .body:active{cursor:grabbing} /* 操作バー */ .bar{display:flex;align-items:center;gap:8px;padding:10px;flex-wrap:wrap;border-top:1px solid var(--hgw-line)} .btn{min-height:38px;padding:0 12px;border-radius:9px;background:var(--hgw-panel2);border:1px solid var(--hgw-line); font-size:.82rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap} .btn:hover{border-color:#3d4e5e} .btn.play{background:var(--hgw-accent);border-color:var(--hgw-accent);color:#04121e;font-weight:700;min-width:54px;min-height:42px} .btn[aria-pressed="true"]{background:var(--hgw-loop);border-color:var(--hgw-loop);color:#1a1204;font-weight:700} .btn:disabled{opacity:.4;cursor:default} .seg{display:inline-flex;border:1px solid var(--hgw-line);border-radius:9px;overflow:hidden} .seg button{min-height:38px;padding:0 12px;font-size:.8rem;background:var(--hgw-panel2)} .seg button[aria-pressed="true"]{background:var(--hgw-loop);color:#1a1204;font-weight:700} .seg button[aria-pressed="true"][data-m="outer"]{background:var(--hgw-outer);color:#fff} .seg button[aria-pressed="true"][data-m="all"]{background:var(--hgw-accent);color:#04121e} .seg button+button{border-left:1px solid var(--hgw-line)} .grp{display:inline-flex;align-items:center;gap:2px;background:var(--hgw-panel2);border:1px solid var(--hgw-line); border-radius:9px;padding:2px} .grp .btn{border:0;background:none;min-width:34px;padding:0 6px} .grp span{font-size:.75rem;color:var(--hgw-muted);padding:0 4px;font-variant-numeric:tabular-nums} .sel{min-height:38px;border-radius:9px;background:var(--hgw-panel2);border:1px solid var(--hgw-line); color:var(--hgw-text);font-size:.82rem;padding:0 8px} .read{font-size:.8rem;color:var(--hgw-muted);font-variant-numeric:tabular-nums;line-height:1.7} .read b{color:var(--hgw-text);font-weight:600} .read .ab{color:var(--hgw-loop)} .read .ou{color:var(--hgw-outer)} .grow{flex:1 1 auto} .clips{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-top:1px solid var(--hgw-line)} .cliplist{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-height:38px;align-items:center} .cliplist .empty-note{font-size:.76rem;color:var(--hgw-muted)} .clip{display:flex;align-items:center;gap:6px;background:var(--hgw-panel2);border:1px solid var(--hgw-line); border-radius:9px;padding:4px 6px 4px 4px;cursor:pointer} .clip:hover{border-color:var(--hgw-loop)} .clip[data-on="1"]{border-color:var(--hgw-loop);background:rgba(244,180,0,.12)} .clip canvas{display:block;width:110px;height:30px;border-radius:5px;background:#111a24} .clip .t{font-size:.72rem;color:var(--hgw-muted);font-variant-numeric:tabular-nums;line-height:1.3} .clip .t b{display:block;color:var(--hgw-text);font-size:.76rem} .clip .x{color:var(--hgw-muted);font-size:.9rem;padding:0 4px} .clip .x:hover{color:#ff6b6b} .hgwp.cutview .lane.detail{box-shadow:inset 0 0 0 2px var(--hgw-loop)} .hint{margin:0;padding:0 10px 12px;font-size:.74rem;color:var(--hgw-muted);line-height:1.7} kbd{background:var(--hgw-panel2);border:1px solid var(--hgw-line);border-radius:4px;padding:1px 5px;font-size:.72rem} .tools{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .tools input[type=file]{position:absolute;width:1px;height:1px;opacity:0} #dropzone{position:fixed;inset:0;z-index:50;display:none;place-items:center; background:rgba(15,21,28,.86);border:3px dashed var(--hgw-accent); font-size:1.1rem;color:var(--hgw-text);pointer-events:none} #dropzone.on{display:grid} .note{margin-top:8px;padding-bottom:14px;font-size:.76rem;color:var(--hgw-muted);line-height:1.7} @media (max-width:640px){ .lane.detail{height:132px} .lane.over{height:52px} .btn,.seg button{font-size:.78rem} } /* 音声ファイルのとき: 映像の場所を自分のテキストを見る欄にする。 試作は .hgwp.audio .hgwp-stage{display:none} で枠ごと消していたが、枠は残して中身を替える。 */ .hgwp .txt{display:none} .hgwp.audio .hgwp-stage{display:block;aspect-ratio:auto;max-height:none;height:var(--txt-h,180px);background:var(--hgw-panel)} .hgwp.audio video,.hgwp.audio .hgwp-tap{display:none} .hgwp.audio .txt{display:block;position:absolute;inset:0} .hgwp.audio .txt-in{display:block;width:100%;height:100%;resize:none;border:0;outline:0;margin:0; padding:12px 14px 12px;background:transparent;color:var(--hgw-text);font:inherit;font-size:1rem;line-height:1.75; -webkit-user-select:text;user-select:text;overflow:auto} .hgwp.audio .txt-in::placeholder{color:var(--hgw-muted)} .hgwp.audio .txt-tools{position:absolute;right:8px;top:6px;display:flex;gap:4px;opacity:.55} .hgwp.audio .txt-tools:hover{opacity:1} .hgwp.audio .txt-tools .btn{min-height:28px;padding:0 8px;font-size:.72rem} .hgwp.audio .lane.detail{height:172px} /* 全画面では、音声のときもテキスト欄が画面いっぱいになる（映像と同じ） */ .hgwp:fullscreen.audio .hgwp-stage,.hgwp:-webkit-full-screen.audio .hgwp-stage{height:100%} /* 右クリック／長押しのメニュー */ .hgwp{position:relative} .ctx{position:absolute;z-index:20;min-width:200px;background:var(--hgw-panel2);border:1px solid var(--hgw-line); border-radius:10px;padding:4px;box-shadow:0 10px 28px rgba(0,0,0,.5)} .ctx[hidden]{display:none} .ctx button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:7px;font-size:.84rem;color:var(--hgw-text);white-space:nowrap} .ctx button:hover{background:rgba(255,255,255,.07)} @media (pointer:coarse){ .ctx button{padding:12px 14px;font-size:.9rem} } /* ファイルを選ぶ枠の中の表（波形が作れる大きさ）。狭い画面でも4列が収まる大きさに。 */ .dropbox .e4{margin-top:10px;font-size:.72rem;color:var(--hgw-muted);max-width:100%;overflow-x:auto} .dropbox .e4t{margin-bottom:4px;font-weight:600;color:var(--hgw-text)} .dropbox .e4 table{border-collapse:collapse;margin:0 auto;font-variant-numeric:tabular-nums} .dropbox .e4 th,.dropbox .e4 td{padding:3px 8px;border:1px solid var(--hgw-line);text-align:center;white-space:nowrap;font-weight:400} .dropbox .e4 thead th{color:var(--hgw-muted);background:rgba(255,255,255,.03)} .dropbox .e4 tbody th{text-align:left;color:var(--hgw-text)} .dropbox .e4 tr.on td,.dropbox .e4 tr.on th{background:rgba(29,155,240,.14);color:var(--hgw-text)} .dropbox .e4 em{font-style:normal;color:var(--hgw-accent);font-size:.68rem;margin-left:4px} @media (max-width:480px){ .dropbox .e4{font-size:.66rem} .dropbox .e4 table{width:100%} .dropbox .e4 th,.dropbox .e4 td{padding:2px 4px;white-space:normal;line-height:1.35} } /* 全画面: 映像を画面いっぱいに敷き、波形と操作はその上に重ねる。 縦に積むと波形と操作列に高さを取られ、実測で1280x800のとき映像が 496px -> 381px と、全画面のほうが小さくなっていた。 Safari は :fullscreen ではなく :-webkit-full-screen で当たることがあり、 ひとつのルールにカンマで並べると全体が無効になるので別々に書く。 */ .tools-wrap{display:contents} .hgwp:fullscreen{display:block;position:relative;height:100vh;overflow:hidden;border:0;border-radius:0} .hgwp:fullscreen .hgwp-stage{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto} .hgwp:fullscreen .grip-st{display:none} .hgwp:fullscreen .tools-wrap{display:block;position:absolute;left:0;right:0;bottom:0;z-index:4; background:rgba(15,21,28,.86);transition:opacity .25s} .hgwp:fullscreen .lane.detail{height:132px} .hgwp:fullscreen .lane.over{height:44px} .hgwp:fullscreen .hint,.hgwp:fullscreen .clips{display:none} .hgwp:fullscreen.fs-idle .tools-wrap{opacity:0;pointer-events:none} .hgwp:fullscreen.fs-idle{cursor:none} .hgwp:-webkit-full-screen{display:block;position:relative;height:100vh;overflow:hidden;border:0;border-radius:0} .hgwp:-webkit-full-screen .hgwp-stage{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto} .hgwp:-webkit-full-screen .grip-st{display:none} .hgwp:-webkit-full-screen .tools-wrap{display:block;position:absolute;left:0;right:0;bottom:0;z-index:4; background:rgba(15,21,28,.86);transition:opacity .25s} .hgwp:-webkit-full-screen .lane.detail{height:132px} .hgwp:-webkit-full-screen .lane.over{height:44px} .hgwp:-webkit-full-screen .hint,.hgwp:-webkit-full-screen .clips{display:none} .hgwp:-webkit-full-screen.fs-idle .tools-wrap{opacity:0;pointer-events:none} .hgwp:-webkit-full-screen.fs-idle{cursor:none} /* 映像を大きく: 見出し・説明・約束の全文はプレーヤーの下（index.html）。 */ /* 約束はヘッダの鍵チップ（高さを増やさない）とドロップ枠の中にも出す。 */ .hgw-lock{border-color:#2c4a33;background:rgba(46,160,67,.12);color:#bfe9c8} .hgw-lock:hover{border-color:#3f6b49} .dropbox .e3{font-size:.76rem;color:#bfe9c8;line-height:1.6;max-width:34em;margin-top:4px} @media (max-width:600px){ .hgw-lock span.tx{display:none} } .hgw-below{padding-top:12px} .hgw-below .hgw-crumb{padding:0 0 4px} .hgw-below h1{margin:0 0 6px} /* 縦横比は実物に合わせる。上限を少し上げて、映像に使える高さを増やす。 */ .hgwp-stage{aspect-ratio:var(--vid-ar,16/9);max-height:62vh} /* 映像の高さを変えるつまみ。レーンのつまみと同じ見た目にそろえる。 */ .grip-st{cursor:ns-resize} /* タイムラインの横移動バー。つまみをドラッグ＝横移動、両端＝拡大縮小。 iPadにはホイールが無いので、指だけで大枠を動かせる手段として置く。 */ .hsb{position:relative;height:28px;background:var(--hgw-panel); border-top:1px solid var(--hgw-line);touch-action:none;cursor:pointer} .hsb-th{position:absolute;top:6px;bottom:6px;left:0;width:100%; background:var(--hgw-panel2);border:1px solid var(--hgw-line);border-radius:999px; cursor:grab;touch-action:none} .hsb-th:active{cursor:grabbing;border-color:var(--hgw-outer)} .hsb-th i{position:absolute;top:-6px;bottom:-6px;width:24px;display:block;cursor:ew-resize;touch-action:none} .hsb-th i[data-hs="s"]{left:-12px} .hsb-th i[data-hs="e"]{right:-12px} .hsb-th i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:3px;height:12px;border-radius:2px;background:var(--hgw-muted)} .hsb-th:active i::after{background:var(--hgw-outer)} /* iOSの文字自動拡大を止める。これが無いとiPadのSafariが勝手に文字を大きくし、 行が枠に収まらなくなる。body に overflow-x:hidden があるので、はみ出しは スクロールではなく「切れて見えない」形で出る。app.css には元から入っている 指定で、試作から持ってきたこのCSSにだけ抜けていた。 */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 波形が無いときの案内。中央寄せのグリッド項目は内容の幅で置かれるため、 文が長いと左右にはみ出して両端が切れる。幅を枠に収めて折り返す。 */ .lane .msg{padding:0 14px} .lane .msg > *,.lane .msg{max-width:100%} .lane .msg{overflow-wrap:anywhere;line-height:1.6} .lane .msg .btn{pointer-events:auto;margin-left:6px} .lane .msg[hidden]{display:none} /* 長い文が枠から出ないように */ .sub,.note,.hint,.hgw-priv,.status{overflow-wrap:anywhere} /* 診断パネル。iPadで止まった瞬間の記録をその場で読めるようにする。 */ #hgwDiag{position:fixed;inset:0;z-index:90;display:none;background:rgba(0,0,0,.72);padding:12px} #hgwDiag.on{display:block} #hgwDiag .dg-in{max-width:760px;margin:0 auto;height:100%;display:flex;flex-direction:column;gap:8px} #hgwDiag .dg-bar{display:flex;align-items:center;gap:8px} #hgwDiag .dg-bar b{flex:1 1 auto;font-size:.9rem} #hgwDiag .dg-tx{flex:1 1 auto;width:100%;background:var(--hgw-panel);color:var(--hgw-text); border:1px solid var(--hgw-line);border-radius:10px;padding:10px;font-size:.72rem;line-height:1.5; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow:auto;-webkit-user-select:text;user-select:text} .dg-open{cursor:pointer} .bar.bar-2nd{border-top:0;padding-top:0} /* ---------------- HEYGOWのページ枠 ---------------- /player/ は app.js を読まない（CSPを default-src 'self' で締めるため）ので、 ヘッダとフッタはここで持つ。色はサイト本体と同じ黒＋#1d9bf0。 */ .hgw-top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#000; border-bottom:1px solid var(--hgw-line)} .hgw-brand{font-weight:800;font-size:1rem;letter-spacing:.02em;color:var(--hgw-text);text-decoration:none} .hgw-top .sp{flex:1 1 auto} .hgw-chip{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 10px; border:1px solid var(--hgw-line);border-radius:999px;background:var(--hgw-panel2); color:var(--hgw-text);text-decoration:none;font-size:.82rem;white-space:nowrap} .hgw-chip:hover{border-color:#3d4e5e} /* WebKitは背景も枠も無い