Update index.html

index.html

@@ -10,533 +10,22 @@
     <link rel="icon" href="icon.png" type="image/png">
     <script src="https://cdn.jsdelivr.net/npm/video-frames@1/dist/videoframes.umd.min.js"></script>
     <style>
-body {
-    margin: 0;
-    padding: 0;
-    background-color: #0a192f;
-    color: #00ffcc;
-    font-family: "M PLUS Rounded 1c", monospace;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center; /* 中央揃え */
-    width: 100%; /* 追加 */
-}
-    
-        h1 {
-          color: #00aaff;
-          text-shadow: 0 0 5px #0066ff;
-          border-bottom: 1px solid #0066ff;
-          padding-bottom: 10px;
-          text-align: center;
-        }
-    
-        .video-container {
-          position: relative;
-          max-width: 800px;
-          margin-bottom: 20px;
-          margin-top: 30px;
-          border: 2px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          background: #000;
-        }
-    
-        video {
-          width: 100%;
-          display: block;
-        }
-    
-        /* 字幕スタイル */
-        video::cue {
-          background-color: rgba(0, 0, 0, 0.7) !important;
-          color: #c7dbed !important;
-          font-family: "M PLUS Rounded 1c", monospace !important;
-          text-shadow: 1px 1px 2px #000 !important;
-          outline: 3px solid #0b3e8f !important;
-          border-radius: 10px !important;
-        }
-    
-        /* カスタム動画コントロール */
-        video::-webkit-media-controls {
-          display: none !important;
-        }
-    
-        .custom-controls {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          padding: 10px;
-          display: flex;
-          flex-direction: column;
-          opacity: 0;
-          transition: opacity 0.3s;
-        }
-    
-        .video-container:hover .custom-controls {
-          opacity: 1;
-        }
-    
-        .progress-container {
-          width: 100%;
-          height: 8px;
-          background: #001133;
-          margin-bottom: 10px;
-          cursor: pointer;
-          position: relative;
-        }
-    
-        .progress-bar {
-          height: 100%;
-          background: #00aaff;
-          width: 0%;
-          position: relative;
-        }
-    
-        .progress-bar::after {
-          content: '';
-          position: absolute;
-          right: -5px;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 10px;
-          height: 10px;
-          background: #00ccff;
-          border-radius: 50%;
-          box-shadow: 0 0 5px #00ccff;
-        }
-    
-        .buttons-container {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-    
-        .left-controls, .right-controls {
-          display: flex;
-          align-items: center;
-          gap: 15px;
-        }
-    
-        .control-btn {
-          background: none;
-          border: none;
-          color: #00ccff;
-          font-size: 16px;
-          cursor: pointer;
-          transition: all 0.3s;
-        }
-    
-        .control-btn:hover {
-          color: #00ffcc;
-          text-shadow: 0 0 5px #00ffcc;
-        }
-    
-        .time-display {
-          font-size: 14px;
-          color: #00aaff;
-          box-shadow: 0.1px 0.1px 0.1px black;
-          font-family: "M PLUS Rounded 1c", monospace;
-        }
-    
-        .volume-container {
-          display: flex;
-          align-items: center;
-          gap: 5px;
-        }
-    
-        .volume-slider {
-          width: 80px;
-          -webkit-appearance: none;
-          height: 4px;
-          background: #001133;
-          outline: none;
-        }
-    
-        .volume-slider::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          width: 12px;
-          height: 12px;
-          background: #00aaff;
-          border-radius: 50%;
-          cursor: pointer;
-        }
-    
-        .controls {
-          display: flex;
-          flex-direction: column;
-          gap: 15px;
-          width: 100%;
-          max-width: 800px;
-          background-color: #0f0f1a;
-          padding: 20px;
-          border: 1px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
-        }
-        .new {
-          display: flex;
-          flex-direction: column;
-          gap: 15px;
-          width: 100%;
-          max-width: 800px;
-          background-color: #0f0f1a;
-          padding: 20px;
-          border: 1px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
-        }
-    
-        .control-group {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: flex-start;
-          gap: 10px;
-          flex-wrap: nowrap;
-        }
-    
-        .control-group label {
-          white-space: nowrap;
-          min-width: 100px;
-          text-align: right;
-          color: #00ccff;
-        }
-    
-        input[type="range"] {
-          flex-grow: 1;
-          -webkit-appearance: none;
-          height: 8px;
-          background: #001133;
-          border-radius: 5px;
-          outline: none;
-        }
-    
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          width: 18px;
-          height: 18px;
-          background: #00aaff;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 5px #00aaff;
-        }
-    
-        input[type="number"], select {
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 5px;
-          font-family: "M PLUS Rounded 1c", monospace;
-        }
-    
-        button {
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 8px 15px;
-          cursor: pointer;
-          font-family: "M PLUS Rounded 1c", monospace;
-          transition: all 0.3s;
-          align-self: flex-start;
-        }
-    
-        button:hover {
-          background-color: #0066ff;
-          color: #000;
-          box-shadow: 0 0 10px #0066ff;
-        }
-    
-        select {
-          width: 300px;
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 5px;
-        }
-    
-        input[type="checkbox"] {
-          -webkit-appearance: none;
-          width: 18px;
-          height: 18px;
-          background: #001133;
-          border: 1px solid #0066ff;
-          position: relative;
-        }
-    
-        input[type="checkbox"]:checked {
-          background: #0066ff;
-          box-shadow: 0 0 5px #0066ff;
-        }
-    
-        input[type="checkbox"]:checked::after {
-          content: "✓";
-          position: absolute;
-          color: #000;
-          font-size: 14px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-    
-        /* 字幕設定用スタイル */
-        .subtitle-settings {
-          margin-top: 10px;
-          padding: 10px;
-          background-color: rgba(0, 20, 40, 0.5);
-          border: 1px solid #0066ff;
-        }
-    
-        /* 字幕サイズ調整用のCSS変数 */
-        :root {
-          --subtitle-scale: 1;
-          --subtitle-border-radius: 10px;
-        }
-    
-        video::cue {
-          font-size: calc(16px * var(--subtitle-scale)) !important;
-          line-height: 1.5 !important;
-          border-radius: var(--subtitle-border-radius) !important;
-        }
-    
-        /* 全画面時の字幕サイズ調整 */
-        .video-container:fullscreen video::cue,
-        .video-container:-webkit-full-screen video::cue,
-        .video-container:-moz-full-screen video::cue,
-        .video-container:-ms-fullscreen video::cue {
-          font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
-        }
-        body {
-          margin: 0;
-          padding: 0;
-          background-color: #0a192f;
-          height: 100vh;
-          width: 100vw;
-        }
-    
-        .ripple {
-          position: absolute;
-          border-radius: 50%;
-          background: transparent;
-          border: 1px solid rgba(100, 210, 255, 0.3);
-          transform: translate(-50%, -50%);
-          pointer-events: none;
-          animation: ripple-animation 4s ease-out forwards;
-          z-index: -1;
-          position: absolute;       
-        }
-    
-        @keyframes ripple-animation {
-          0% {
-            width: 0;
-            height: 0;
-            opacity: 0.6;
-          }
-          100% {
-            width: 600px;
-            height: 600px;
-            opacity: 0;
-          }
-        }
-    
-        /* ローディングアニメーション */
-        .loading-overlay {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.8);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          z-index: 9999;
-          transition: opacity 1s ease-out;
-        }
-    
-        .spinner-box {
-          width: 300px;
-          height: 300px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: transparent;
-        }
-    
-        /* 軌道スタイル */
-        .leo {
-          position: absolute;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 50%;
-        }
-    
-        .blue-orbit {
-          width: 165px;
-          height: 165px;
-          border: 1px solid #91daffa5;
-          animation: spin3D 3s linear .2s infinite;
-        }
-    
-        .green-orbit {
-          width: 120px;
-          height: 120px;
-          border: 1px solid #91ffbfa5;
-          animation: spin3D 2s linear 0s infinite;
-        }
-    
-        .red-orbit {
-          width: 90px;
-          height: 90px;
-          border: 1px solid #ffca91a5;
-          animation: spin3D 1s linear 0s infinite;
-        }
-    
-        .white-orbit {
-          width: 60px;
-          height: 60px;
-          border: 2px solid #ffffff;
-          animation: spin3D 10s linear 0s infinite;
-        }
-    
-        .w1 {
-          transform: rotate3D(1, 1, 1, 90deg);
-        }
-    
-        .w2 {
-          transform: rotate3D(1, 2, .5, 90deg);
-        }
-    
-        .w3 {
-          transform: rotate3D(.5, 1, 2, 90deg);
-        }
-    
-        /* キーフレームアニメーション */
-        @keyframes spin3D {
-          from {
-            transform: rotate3d(.5,.5,.5, 360deg);
-          }
-          to {
-            transform: rotate3d(0,0,0, 0deg);
-          }
-        }
-    
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-    
-        /* フレームプレビュー */
-        .frame-preview {
-          position: fixed;
-          bottom: 30px;
-          /*transform: translateX(-50%);*/
-          width: 160px;
-          height: 90px;
-          background: #000;
-          border: 2px solid #00aaff;
-          box-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
-          display: none;
-          z-index: 100;
-          pointer-events: none;
-        }
-    
-        .frame-preview canvas {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-    
-        .frame-time {
-          position: absolute;
-          bottom: -25px;
-          left: 50%;
-          transform: translateX(-50%);
-          background: rgba(0, 0, 0, 0.8);
-          color: #00ccff;
-          padding: 3px 8px;
-          border-radius: 4px;
-          font-size: 12px;
-          white-space: nowrap;
-        }
-    
-        /* 右クリックメニュー */
-        .context-menu {
-          position: fixed;
-          background-color: #0f0f1a;
-          border: 1px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          z-index: 1000;
-          display: none;
-          min-width: 200px;
-        }
-    
-        .context-menu button {
-          width: 100%;
-          text-align: left;
-          padding: 8px 15px;
-          border: none;
-          border-bottom: 1px solid #003366;
-          background: none;
-          color: #00ccff;
-          font-family: "M PLUS Rounded 1c", monospace;
-          cursor: pointer;
-        }
-    
-        .context-menu button:hover {
-          background-color: #0066ff;
-          color: #000;
-        }
-    
-        /* 音声/字幕のみモード */
-        .audio-only-mode {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-          background: rgba(0, 0, 0, 0.7);
-          color: #00ccff;
-          padding: 5px 10px;
-          border-radius: 4px;
-          font-size: 12px;
-          display: none;
-          z-index: 10;
-        }
-    
-        .audio-only-mode.active {
-          display: block;
-        }
- 
-.main-content {
-    position: relative;
-    z-index: 10;
-      width: 100%;
-    max-width: 1200px;
-    padding: 20px;
-    color: white;
-    max-width: 1200px;
-    margin: 0 auto;
-box-sizing: border-box; 
-}  </style>
-<style>
+/* リセットと基本設定 */
 html, body {
     margin: 0;
     padding: 0;
+    width: 100%;
+    min-height: 100vh;
     background-color: #0a192f;
     color: #00ffcc;
     font-family: "M PLUS Rounded 1c", monospace;
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
+    overflow-x: hidden;
 }
-            @keyframes blink {
-            0% { opacity: 0.2; }
-            100% { opacity: 0.8; }
-        }
+
+/* 背景アニメーションコンテナ */
 .wave-container {
     position: fixed;
     top: 0;
@@ -546,7 +35,8 @@ html, body {
     z-index: -1;
     overflow: hidden;
 }
-    /* グリッド線を最背面に */
+
+/* グリッド線 */
 .grid-lines {
     position: absolute;
     top: 0;
@@ -559,7 +49,8 @@ html, body {
     background-size: 50px 50px;
     z-index: 1;
 }
-    
+
+/* 波のアニメーション */
 .wave {
     position: absolute;
     width: 100%;
@@ -573,46 +64,548 @@ html, body {
         transparent
     );
     opacity: 0.7;
-    animation: waveFlow 4s linear infinite;
+    animation: waveFlow 8s linear infinite;
     z-index: 2;
 }
-          .wave:nth-child(2) {
-            animation-delay: 1s;
-            opacity: 0.5;
-        }
-        
-        .wave:nth-child(3) {
-            animation-delay: 2s;
-            opacity: 0.3;
-        }
-        
-        @keyframes waveFlow {
-            0% {
-                transform: translateY(-100%);
-            }
-            100% {
-                transform: translateY(100%);
-            }
-        }
+
+.wave:nth-child(2) {
+    animation-delay: -2s;
+    opacity: 0.5;
+}
+
+.wave:nth-child(3) {
+    animation-delay: -4s;
+    opacity: 0.3;
+}
+
+@keyframes waveFlow {
+    0% {
+        transform: translateY(-100%);
+    }
+    100% {
+        transform: translateY(100%);
+    }
+}
+
+/* テクノロジードット */
+.tech-dots {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+}
+
+.tech-dot {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background-color: rgba(100, 200, 255, 0.7);
+    border-radius: 50%;
+    animation: blink 2s infinite alternate;
+}
+
+@keyframes blink {
+    0% { opacity: 0.2; }
+    100% { opacity: 0.8; }
+}
+
+/* メインコンテンツ */
+.main-content {
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* ヘッダー */
+h1 {
+    color: #00aaff;
+    text-shadow: 0 0 5px #0066ff;
+    border-bottom: 1px solid #0066ff;
+    padding-bottom: 10px;
+    text-align: center;
+    margin-top: 20px;
+}
+
+/* ビデオコンテナ */
+.video-container {
+    position: relative;
+    max-width: 800px;
+    width: 100%;
+    margin: 30px 0 20px;
+    border: 2px solid #0066ff;
+    box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+    background: #000;
+}
+
+video {
+    width: 100%;
+    display: block;
+}
+
+/* 字幕スタイル */
+video::cue {
+    background-color: rgba(0, 0, 0, 0.7) !important;
+    color: #c7dbed !important;
+    font-family: "M PLUS Rounded 1c", monospace !important;
+    text-shadow: 1px 1px 2px #000 !important;
+    outline: 3px solid #0b3e8f !important;
+    border-radius: 10px !important;
+}
+
+/* カスタム動画コントロール */
+video::-webkit-media-controls {
+    display: none !important;
+}
+
+.custom-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.video-container:hover .custom-controls {
+    opacity: 1;
+}
+
+.progress-container {
+    width: 100%;
+    height: 8px;
+    background: #001133;
+    margin-bottom: 10px;
+    cursor: pointer;
+    position: relative;
+}
+
+.progress-bar {
+    height: 100%;
+    background: #00aaff;
+    width: 0%;
+    position: relative;
+}
+
+.progress-bar::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    background: #00ccff;
+    border-radius: 50%;
+    box-shadow: 0 0 5px #00ccff;
+}
+
+.buttons-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.left-controls, .right-controls {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.control-btn {
+    background: none;
+    border: none;
+    color: #00ccff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.control-btn:hover {
+    color: #00ffcc;
+    text-shadow: 0 0 5px #00ffcc;
+}
+
+.time-display {
+    font-size: 14px;
+    color: #00aaff;
+    box-shadow: 0.1px 0.1px 0.1px black;
+    font-family: "M PLUS Rounded 1c", monospace;
+}
+
+.volume-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.volume-slider {
+    width: 80px;
+    -webkit-appearance: none;
+    height: 4px;
+    background: #001133;
+    outline: none;
+}
+
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    background: #00aaff;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+/* コントロールパネル */
+.controls, .new {
+    width: 100%;
+    max-width: 800px;
+    background-color: #0f0f1a;
+    padding: 20px;
+    border: 1px solid #0066ff;
+    box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
+    margin-bottom: 20px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    flex-wrap: nowrap;
+}
+
+.control-group label {
+    white-space: nowrap;
+    min-width: 100px;
+    text-align: right;
+    color: #00ccff;
+}
+
+input[type="range"] {
+    flex-grow: 1;
+    -webkit-appearance: none;
+    height: 8px;
+    background: #001133;
+    border-radius: 5px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: #00aaff;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 5px #00aaff;
+}
+
+input[type="number"], select {
+    background-color: #001133;
+    color: #00ccff;
+    border: 1px solid #0066ff;
+    padding: 5px;
+    font-family: "M PLUS Rounded 1c", monospace;
+}
+
+button {
+    background-color: #001133;
+    color: #00ccff;
+    border: 1px solid #0066ff;
+    padding: 8px 15px;
+    cursor: pointer;
+    font-family: "M PLUS Rounded 1c", monospace;
+    transition: all 0.3s;
+    align-self: flex-start;
+}
+
+button:hover {
+    background-color: #0066ff;
+    color: #000;
+    box-shadow: 0 0 10px #0066ff;
+}
+
+select {
+    width: 300px;
+    background-color: #001133;
+    color: #00ccff;
+    border: 1px solid #0066ff;
+    padding: 5px;
+}
+
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    background: #001133;
+    border: 1px solid #0066ff;
+    position: relative;
+}
+
+input[type="checkbox"]:checked {
+    background: #0066ff;
+    box-shadow: 0 0 5px #0066ff;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    color: #000;
+    font-size: 14px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* 字幕設定用スタイル */
+.subtitle-settings {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: rgba(0, 20, 40, 0.5);
+    border: 1px solid #0066ff;
+}
+
+/* 字幕サイズ調整用のCSS変数 */
+:root {
+    --subtitle-scale: 1;
+    --subtitle-border-radius: 10px;
+}
+
+video::cue {
+    font-size: calc(16px * var(--subtitle-scale)) !important;
+    line-height: 1.5 !important;
+    border-radius: var(--subtitle-border-radius) !important;
+}
+
+/* 全画面時の字幕サイズ調整 */
+.video-container:fullscreen video::cue,
+.video-container:-webkit-full-screen video::cue,
+.video-container:-moz-full-screen video::cue,
+.video-container:-ms-fullscreen video::cue {
+    font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
+}
+
+/* ローディングアニメーション */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 1s ease-out;
+}
+
+.spinner-box {
+    width: 300px;
+    height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+}
+
+/* 軌道スタイル */
+.leo {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+}
+
+.blue-orbit {
+    width: 165px;
+    height: 165px;
+    border: 1px solid #91daffa5;
+    animation: spin3D 3s linear .2s infinite;
+}
+
+.green-orbit {
+    width: 120px;
+    height: 120px;
+    border: 1px solid #91ffbfa5;
+    animation: spin3D 2s linear 0s infinite;
+}
+
+.red-orbit {
+    width: 90px;
+    height: 90px;
+    border: 1px solid #ffca91a5;
+    animation: spin3D 1s linear 0s infinite;
+}
+
+.white-orbit {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #ffffff;
+    animation: spin3D 10s linear 0s infinite;
+}
+
+.w1 {
+    transform: rotate3D(1, 1, 1, 90deg);
+}
+
+.w2 {
+    transform: rotate3D(1, 2, .5, 90deg);
+}
+
+.w3 {
+    transform: rotate3D(.5, 1, 2, 90deg);
+}
+
+/* キーフレームアニメーション */
+@keyframes spin3D {
+    from {
+        transform: rotate3d(.5,.5,.5, 360deg);
+    }
+    to {
+        transform: rotate3d(0,0,0, 0deg);
+    }
+}
+
+/* フレームプレビュー */
+.frame-preview {
+    position: fixed;
+    bottom: 30px;
+    width: 160px;
+    height: 90px;
+    background: #000;
+    border: 2px solid #00aaff;
+    box-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
+    display: none;
+    z-index: 100;
+    pointer-events: none;
+}
+
+.frame-preview canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.frame-time {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: #00ccff;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+/* 右クリックメニュー */
+.context-menu {
+    position: fixed;
+    background-color: #0f0f1a;
+    border: 1px solid #0066ff;
+    box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+    z-index: 1000;
+    display: none;
+    min-width: 200px;
+}
+
+.context-menu button {
+    width: 100%;
+    text-align: left;
+    padding: 8px 15px;
+    border: none;
+    border-bottom: 1px solid #003366;
+    background: none;
+    color: #00ccff;
+    font-family: "M PLUS Rounded 1c", monospace;
+    cursor: pointer;
+}
+
+.context-menu button:hover {
+    background-color: #0066ff;
+    color: #000;
+}
+
+/* 音声/字幕のみモード */
+.audio-only-mode {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    color: #00ccff;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    display: none;
+    z-index: 10;
+}
+
+.audio-only-mode.active {
+    display: block;
+}
+
+/* リップルエフェクト */
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: transparent;
+    border: 1px solid rgba(100, 210, 255, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    animation: ripple-animation 4s ease-out forwards;
+    z-index: -1;
+}
+
+@keyframes ripple-animation {
+    0% {
+        width: 0;
+        height: 0;
+        opacity: 0.6;
+    }
+    100% {
+        width: 600px;
+        height: 600px;
+        opacity: 0;
+    }
+}
+
+/* レスポンシブ対応 */
+@media (max-width: 768px) {
+    .video-container, 
+    .controls, 
+    .new {
+        max-width: 95%;
+    }
     
-    /* テクノロジードットの修正 */
-    .tech-dots {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 3;
+    .control-group {
+        flex-direction: column;
+        align-items: flex-start;
     }
     
-    .tech-dot {
-        position: absolute;
-        width: 3px;
-        height: 3px;
-        background-color: rgba(100, 200, 255, 0.7);
-        border-radius: 50%;
-        animation: blink 2s infinite alternate;
+    .control-group label {
+        text-align: left;
+        margin-bottom: 5px;
     }
+    
+    select {
+        width: 100%;
+    }
+}
 </style>
 
 </head>