Update index.html

index.html

@@ -231,667 +231,719 @@ document.addEventListener('DOMContentLoaded', function () {
         <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
         <title>文化発表会動画プレイヤー</title>
         <style>
-            /* テクノロジー風背景スタイル */
-            .tech-background {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -2;
-            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
-            overflow: hidden;
-            }
-            .circuit-line {
-            position: absolute;
-            background: rgba(0, 255, 255, 0.1);
-            box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
-            }
-            .grid-dot {
-            position: absolute;
-            width: 2px;
-            height: 2px;
-            background: rgba(0, 255, 255, 0.3);
-            border-radius: 50%;
-            }
-            .hexagon {
-            position: absolute;
-            width: 40px;
-            height: 23px;
-            background: rgba(0, 255, 255, 0.05);
-            border: 1px solid rgba(0, 255, 255, 0.1);
-            box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
-            }
-            .hexagon:before, .hexagon:after {
-            content: "";
-            position: absolute;
-            width: 0;
-            border-left: 20px solid transparent;
-            border-right: 20px solid transparent;
-            }
-            .hexagon:before {
-            bottom: 100%;
-            border-bottom: 11.5px solid rgba(0, 255, 255, 0.05);
-            }
-            .hexagon:after {
-            top: 100%;
-            width: 0;
-            border-top: 11.5px solid rgba(0, 255, 255, 0.05);
-            }
-            .pulse {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background: rgba(0, 255, 255, 0.7);
-            border-radius: 50%;
-            box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.5);
-            animation: pulse 2s infinite;
-            }
-            @keyframes pulse {
-            0% { transform: scale(0.8); opacity: 0.7; }
-            50% { transform: scale(1.2); opacity: 1; }
-            100% { transform: scale(0.8); opacity: 0.7; }
-            }
-            @keyframes float {
-            0% { transform: translateY(0) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(5deg); }
-            100% { transform: translateY(0) rotate(0deg); }
-            }
-            /* メインスタイル */
-            body {
-            font-family: "M PLUS Rounded 1c", 'Arial', sans-serif;
-            background-color: rgba(10, 25, 47, 0.8);
-            color: #e6f1ff;
-            margin: 0;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 100vh;
-            }
-            h1 {
-            color: #a2c2e8;
-            text-align: center;
-            margin-bottom: 30px;
-            border-bottom: 1px solid #64ffda;
-            padding-bottom: 10px;
-            width: 100%;
-            }
-            .container {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: 1000px;
-            background-color: rgba(17, 34, 64, 0.3);
-            border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(100, 255, 218, 0.1);
-            }
-            .video-container {
-            position: relative;
-            width: 100%;
-            margin-bottom: 20px;
-            }
-            video {
-            width: 100%;
-            border-radius: 5px;
-            background-color: #000;
-            display: block;
-            cursor: pointer;
-            }
-            .video-controls {
-            background-color: rgba(17, 34, 64, 0.2);
-            padding: 10px;
-            border-radius: 0 0 5px 5px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            transition: opacity 0.3s;
-            }
-            .progress-container {
-            width: 100%;
-            height: 10px;
-            background-color: #1e2a47;
-            border-radius: 5px;
-            cursor: pointer;
-            position: relative;
-            }
-            .progress-bar {
-            height: 100%;
-            background-color: #64ffda;
-            border-radius: 5px;
-            width: 0%;
-            position: relative;
-            }
-            .progress-time {
-            position: absolute;
-            top: -25px;
-            transform: translateX(-50%);
-            background-color: rgba(30, 42, 71, 0.9);
-            padding: 3px 6px;
-            border-radius: 3px;
-            font-size: 12px;
-            display: none;
-            white-space: nowrap;
-            }
-            /* プログレスバーのマーカー */
-            .progress-marker {
-            position: absolute;
-            bottom: 0px;
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 10px solid #ff5555;
-            transform: translateX(-50%);
-            z-index: 2;
-            }
-            .main-controls {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            }
-            .control-button {
-            background: none;
-            border: none;
-            color: #e6f1ff;
-            font-size: 18px;
-            cursor: pointer;
-            padding: 5px;
-            border-radius: 50%;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background-color 0.3s;
-            }
-            .control-button:hover {
-            background-color: rgba(100, 255, 218, 0.2);
-            }
-            .time-display {
-            font-size: 14px;
-            color: #ccd6f6;
-            white-space: nowrap;
-            }
-            .volume-control {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            margin-left: auto;
-            }
-            .volume-button {
-            background: none;
-            border: none;
-            color: #e6f1ff;
-            font-size: 18px;
-            cursor: pointer;
-            padding: 5px;
-            }
-            .volume-slider {
-            width: 80px;
-            height: 6px;
-            -webkit-appearance: none;
-            background: #1e2a47;
-            border-radius: 3px;
-            outline: none;
-            opacity: 0;
-            transition: opacity 0.3s, width 0.3s;
-            background-image: linear-gradient(#6aebfc, #6aebfc);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            }
-            .volume-control:hover .volume-slider {
-            opacity: 1;
-            width: 100px;
-            }
-            .volume-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 12px;
-            height: 12px;
-            background: #6aebfc;
-            border-radius: 50%;
-            cursor: pointer;
-            }
-            .speed-control {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            }
-            .speed-slider {
-            width: 120px;
-            height: 6px;
-            -webkit-appearance: none;
-            background: #1e2a47;
-            border-radius: 3px;
-            outline: none;
-            background-image: linear-gradient(#64d1ff, #64d1ff);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            }
-            .speed-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 12px;
-            height: 12px;
-            background: #5bb7de;
-            border-radius: 50%;
-            cursor: pointer;
-            }
-            .speed-value {
-            font-size: 14px;
-            min-width: 30px;
-            text-align: center;
-            }
-            .fullscreen-button {
-            margin-left: 10px;
-            }
-            .audio-controls {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            margin-bottom: 15px;
-            }
-            .audio-item {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            }
-            .audio-item label {
-            min-width: 50px;
-            color: #9ab3d9;
-            }
-            .audio-slider {
-            flex-grow: 1;
-            height: 8px;
-            -webkit-appearance: none;
-            background: #1e2a47;
-            border-radius: 5px;
-            outline: none;
-            background-image: linear-gradient(#64ffda, #64ffda);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            }
-            .audio-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
-            background: #64ffda;
-            border-radius: 50%;
-            cursor: pointer;
-            }
-            .settings {
-            background-color: rbga(30, 42, 71, 0.3);
-            padding: 15px;
-            border-radius: 5px;
-            margin-bottom: 20px;
-            }
-            .setting-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-            }
-            .setting-item:last-child {
-            margin-bottom: 0;
-            }
-            .setting-item label {
-            color: #ccd6f6;
-            }
-            .global-volume-container, .playback-speed-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            width: 100%;
-            }
-            .global-volume-slider, .playback-speed-slider {
-            flex-grow: 1;
-            height: 8px;
-            -webkit-appearance: none;
-            background: #1e2a47;
-            border-radius: 5px;
-            outline: none;
-            background-image: linear-gradient(#64ffda, #64ffda);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            }
-            .global-volume-slider::-webkit-slider-thumb,
-            .playback-speed-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 16px;
-            height: 16px;
-            background: #64ffda;
-            border-radius: 50%;
-            cursor: pointer;
-            }
-            .slider-value {
-            min-width: 40px;
-            text-align: right;
-            }
-            input[type="number"], input[type="checkbox"], select {
-            background-color: #112240;
-            border: 1px solid #64ffda;
-            color: #e6f1ff;
-            padding: 5px;
-            border-radius: 3px;
-            }
-            .tech-decoration {
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, #64ffda, transparent);
-            margin: 20px 0;
-            }
-            /* 全画面時のスタイル */
-            .video-container:-webkit-full-screen {
-            width: 100%;
-            height: 100%;
-            background-color: black;
-            }
-            .video-container:-webkit-full-screen video {
-            width: 100%;
-            height: 100%;
-            }
-            .video-container:-webkit-full-screen .video-controls {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            border-radius: 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: 9998;
-            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);
-            }
-            }
-            .time-set-button {
-            background-color: #112240;
-            border: 1px solid #64ffda;
-            color: #e6f1ff;
-            padding: 5px 10px;
-            border-radius: 3px;
-            cursor: pointer;
-            font-size: 12px;
-            margin-left: 5px;
-            transition: background-color 0.3s;
-            }
-            .time-set-button:hover {
-            background-color: rgba(100, 255, 218, 0.2);
-            }
-            /* 合成ボタンスタイル */
-            .combine-button {
-            background-color: #97c2f0;
-            color: #0a192f;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            font-size: 16px;
-            cursor: pointer;
-            margin-top: 20px;
-            transition: all 0.3s;
-            font-weight: bold;
-            }
-            .combine-button:hover {
-            background-color: #52e0c4;
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(100, 255, 218, 0.4);
-            }
-            .combine-button:disabled {
-            background-color: #3a5a78;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-            }
-            /* 合成ステータスメッセージ */
-            .combine-status {
-            margin-top: 10px;
-            color: #97c2f0;
-            font-size: 14px;
-            height: 20px;
-            }
-            /* プレビューセクション */
-            .preview-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: rgba(17, 34, 64, 0.7);
-            border-radius: 5px;
-            display: none;
-            }
-            .preview-section h3 {
-            margin-top: 0;
-            color: #97c2f0;
-            border-bottom: 1px solid #64ffda;
-            padding-bottom: 5px;
-            }
-            /* 無効状態のオーバーレイ */
-            .disabled-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(10, 25, 47, 0.7);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 10;
-            border-radius: 5px;
-            }
-            .disabled-message {
-            background-color: rgba(30, 42, 71, 0.9);
-            padding: 20px;
-            border-radius: 5px;
-            text-align: center;
-            max-width: 80%;
-            }
-            .disabled-message p {
-            margin-bottom: 15px;
-            }
-            .loader {
-            width: 80px;
-            aspect-ratio: 1;
-            border: 10px solid #000;
-            box-sizing: border-box;
-            background: 
-            radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
-            radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
-            radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
-            radial-gradient(farthest-side,#fff 98%,#0000) 50%/20px 20px,
-            radial-gradient(farthest-side,#fff 98%,#0000) 50%/80% 80%,
-            #000;
-            background-repeat: no-repeat;
-            filter: blur(4px) contrast(10); 
-            animation: squarePulse 1s infinite alternate;
-            }
-            @keyframes squarePulse {
-            0% {
-            background-position: 
-            50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
-            }
-            25% {
-            background-position: 
-            50% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
-            }
-            50% {
-            background-position: 
-            50% 0, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
-            }
-            75% {
-            background-position: 
-            50% 0, 50% 100%, 0 50%, 50% 50%, 50% 50%, 50% 50%;
-            }
-            100% {
-            background-position: 
-            50% 0, 50% 100%, 0 50%, 100% 50%, 50% 50%, 50% 50%;
-            }
-            }
-            #buffering-indicator {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 10;
-            display: none;
-            }
-            .sync-status {
-            position: absolute;
-            bottom: 100px;
-            left: 10px;
-            width: 150px; /* 固定幅 */
-            height: 30px; /* 固定高さ */
-            background-color: rgba(0, 0, 0, 0.7);
-            color: #97c2f0;
-            padding: 5px 10px;
-            border-radius: 3px;
-            font-size: 12px;
-            z-index: 5;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            white-space: nowrap;        /* 文字の折り返しを防止 */
-            overflow: hidden;           /* 内容がはみ出す場合に隠す */
-            text-overflow: ellipsis;    /* はみ出したテキストに「…」を表示（任意） */
-            user-select: none;          /* テキストの選択を不可にする */
-            /* はみ出してもスクロールバーを出さない */
-            contain: strict;            /* レイアウトの影響を最小限にする */
-            }
-            .sync-status button {
-            background: none;
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            font-size: 12px;
-            }
-            .lock-controls-btn {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background-color: rgba(0, 0, 0, 0.7);
-            border: none;
-            color: #fff;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 100;
-            display: none;
-            }
-            .lock-controls-btn.locked {
-            color: #97c2f0;
-            }
-            .time-markers-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin: 15px 0;
-            padding: 15px;
-            background-color: rgba(17, 34, 64, 0.8);
-            border-radius: 5px;
-            }
-            .time-marker {
-            font-size: 80%;
-            padding: 6px 8px;
-            background-color: rgba(100, 255, 218, 0.05);
-            border: 1px solid #64ffda;
-            border-radius: 4px;
-            cursor: grab;
-            user-select: none;
-            transition: background-color 0.3s;
-            }
-            .time-marker:hover {
-            background-color: rgba(100, 255, 218, 0.1);
-            }
-            .time-marker.dragging {
-            opacity: 0.7;
-            cursor: grabbing;
-            }
-            .time-input-container {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            }
-            .time-input-container input {
-            width: 80px;
-            }
+/* テクノロジー風背景スタイル */
+.tech - background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100 %;
+    height: 100 %;
+    z - index: -2;
+    background: linear - gradient(135 deg, #0f0c29, # 302 b63, #24243e);
+    overflow: hidden;
+}
+.circuit-line {
+    position: absolute;
+    background: rgba(0, 255, 255, 0.1);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+.grid-dot {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: rgba(0, 255, 255, 0.3);
+    border-radius: 50%;
+}
+.hexagon {
+    position: absolute;
+    width: 40px;
+    height: 23px;
+    background: rgba(0, 255, 255, 0.05);
+    border: 1px solid rgba(0, 255, 255, 0.1);
+    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
+}
+.hexagon:before, .hexagon:after {
+    content: "";
+    position: absolute;
+    width: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+}
+.hexagon:before {
+    bottom: 100%;
+    border-bottom: 11.5px solid rgba(0, 255, 255, 0.05);
+}
+.hexagon:after {
+    top: 100%;
+    width: 0;
+    border-top: 11.5px solid rgba(0, 255, 255, 0.05);
+}
+.pulse {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: rgba(0, 255, 255, 0.7);
+    border-radius: 50%;
+    box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.5);
+    animation: pulse 2s infinite;
+}
+@keyframes pulse {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(0.8);
+        opacity: 0.7;
+    }
+}
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-20px) rotate(5deg);
+    }
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+}
+/* メインスタイル */
+body {
+    font-family: "M PLUS Rounded 1c", 'Arial', sans-serif;
+    background-color: rgba(10, 25, 47, 0.8);
+    color: # e6f1ff;
+    margin: 0;
+    padding: 20 px;
+    display: flex;
+    flex - direction: column;
+    align - items: center;
+    min - height: 100 vh;
+}
+h1 {
+    color: #a2c2e8;
+    text - align: center;
+    margin - bottom: 30 px;
+    border - bottom: 1 px solid #64ffda;
+    padding-bottom: 10px;
+    width: 100%;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 1000px;
+    background-color: rgba(17, 34, 64, 0.3);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(100, 255, 218, 0.1);
+}
+.video-container {
+    position: relative;
+    width: 100%;
+    margin-bottom: 20px;
+}
+video {
+    width: 100%;
+    border-radius: 5px;
+    background-color: # 000;
+    display: block;
+    cursor: pointer;
+}
+.video - controls {
+    background - color: rgba(17, 34, 64, 0.2);
+    padding: 10 px;
+    border - radius: 0 0 5 px 5 px;
+    display: flex;
+    flex - direction: column;
+    gap: 10 px;
+    transition: opacity 0.3 s;
+}
+.progress - container {
+    width: 100 %;
+    height: 10 px;
+    background - color: #1e2a47;
+    border-radius: 5px;
+    cursor: pointer;
+    position: relative;
+}
+.progress-bar {
+    height: 100%;
+    background-color: # 64 ffda;
+    border - radius: 5 px;
+    width: 0 %;
+    position: relative;
+}
+.progress - time {
+    position: absolute;
+    top: -25 px;
+    transform: translateX(-50 %);
+    background - color: rgba(30, 42, 71, 0.9);
+    padding: 3 px 6 px;
+    border - radius: 3 px;
+    font - size: 12 px;
+    display: none;
+    white - space: nowrap;
+}
+/* プログレスバーのマーカー */
+.progress - marker {
+    position: absolute;
+    bottom: 0 px;
+    width: 0;
+    height: 0;
+    border - left: 5 px solid transparent;
+    border - right: 5 px solid transparent;
+    border - top: 10 px solid# ff5555;
+    transform: translateX(-50 %);
+    z - index: 2;
+}
+.main - controls {
+    display: flex;
+    align - items: center;
+    gap: 15 px;
+}
+.control - button {
+    background: none;
+    border: none;
+    color: #e6f1ff;
+    font - size: 18 px;
+    cursor: pointer;
+    padding: 5 px;
+    border - radius: 50 %;
+    width: 36 px;
+    height: 36 px;
+    display: flex;
+    align - items: center;
+    justify - content: center;
+    transition: background - color 0.3 s;
+}
+.control - button: hover {
+    background - color: rgba(100, 255, 218, 0.2);
+}
+.time - display {
+    font - size: 14 px;
+    color: #ccd6f6;
+    white - space: nowrap;
+}
+.volume - control {
+    display: flex;
+    align - items: center;
+    gap: 5 px;
+    margin - left: auto;
+}
+.volume - button {
+    background: none;
+    border: none;
+    color: #e6f1ff;
+    font - size: 18 px;
+    cursor: pointer;
+    padding: 5 px;
+}
+.volume - slider {
+    width: 80 px;
+    height: 6 px;
+    - webkit - appearance: none;
+    background: #1e2a47;
+    border-radius: 3px;
+    outline: none;
+    opacity: 0;
+    transition: opacity 0.3s, width 0.3s;
+    background-image: linear-gradient(# 6 aebfc,
+            #6aebfc);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+.volume-control:hover .volume-slider {
+    opacity: 1;
+    width: 100px;
+}
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    background: # 6 aebfc;
+    border - radius: 50 %;
+    cursor: pointer;
+}
+.speed - control {
+    display: flex;
+    align - items: center;
+    gap: 5 px;
+}
+.speed - slider {
+    width: 120 px;
+    height: 6 px;
+    - webkit - appearance: none;
+    background: #1e2a47;
+    border-radius: 3px;
+    outline: none;
+    background-image: linear-gradient(# 64 d1ff,
+            #64d1ff);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+.speed-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    background: # 5 bb7de;
+    border - radius: 50 %;
+    cursor: pointer;
+}
+.speed - value {
+    font - size: 14 px;
+    min - width: 30 px;
+    text - align: center;
+}
+.fullscreen - button {
+    margin - left: 10 px;
+}
+.audio - controls {
+    display: flex;
+    flex - direction: column;
+    gap: 10 px;
+    margin - bottom: 15 px;
+}
+.audio - item {
+    display: flex;
+    align - items: center;
+    gap: 10 px;
+}
+.audio - item label {
+    min - width: 50 px;
+    color: #9ab3d9;
+}
+.audio-slider {
+    flex-grow: 1;
+    height: 8px;
+    -webkit-appearance: none;
+    background: # 1e2 a47;
+    border - radius: 5 px;
+    outline: none;
+    background - image: linear - gradient(#64ffda, # 64 ffda);
+    background - size: 100 % 100 %;
+    background - repeat: no - repeat;
+}
+.audio - slider::-webkit - slider - thumb {
+    -webkit - appearance: none;
+    width: 18 px;
+    height: 18 px;
+    background: #64ffda;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.settings {
+    background-color: rbga(30, 42, 71, 0.3);
+    padding: 15px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+.setting-item label {
+    color: # ccd6f6;
+}
+.global - volume - container,
+.playback - speed - container {
+    display: flex;
+    align - items: center;
+    gap: 10 px;
+    width: 100 %;
+}
+.global - volume - slider,
+.playback - speed - slider {
+    flex - grow: 1;
+    height: 8 px;
+    - webkit - appearance: none;
+    background: #1e2a47;
+    border-radius: 5px;
+    outline: none;
+    background-image: linear-gradient(# 64 ffda, #64ffda);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+.global-volume-slider::-webkit-slider-thumb,
+.playback-speed-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: # 64 ffda;
+    border - radius: 50 %;
+    cursor: pointer;
+}
+.slider - value {
+    min - width: 40 px;
+    text - align: right;
+}
+input[type="number"],
+input[type="checkbox"],
+select {
+    background - color: #112240;
+    border: 1px solid # 64 ffda;
+    color: #e6f1ff;
+    padding: 5 px;
+    border - radius: 3 px;
+}
+.tech - decoration {
+    width: 100 %;
+    height: 2 px;
+    background: linear - gradient(90 deg, transparent, #64ffda, transparent);
+    margin: 20px 0;
+}
+/* 全画面時のスタイル */
+.video-container:-webkit-full-screen {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+}
+.video-container:-webkit-full-screen video {
+    width: 100%;
+    height: 100%;
+}
+.video-container:-webkit-full-screen .video-controls {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    border-radius: 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: 9998;
+    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 # 91 daffa5;
+    animation: spin3D 3 s linear .2 s infinite;
+}
+.green - orbit {
+    width: 120 px;
+    height: 120 px;
+    border: 1 px solid #91ffbfa5;
+    animation: spin3D 2s linear 0s infinite;
+}
+.red-orbit {
+    width: 90px;
+    height: 90px;
+    border: 1px solid # ffca91a5;
+    animation: spin3D 1 s linear 0 s infinite;
+}
+.white - orbit {
+    width: 60 px;
+    height: 60 px;
+    border: 2 px solid# ffffff;
+    animation: spin3D 10 s linear 0 s infinite;
+}
+.w1 {
+    transform: rotate3D(1, 1, 1, 90 deg);
+}
+.w2 {
+    transform: rotate3D(1, 2, .5, 90 deg);
+}
+.w3 {
+    transform: rotate3D(.5, 1, 2, 90 deg);
+}
+/* キーフレームアニメーション */
+@keyframes spin3D {
+    from {
+        transform: rotate3d(.5, .5, .5, 360 deg);
+    }
+    to {
+        transform: rotate3d(0, 0, 0, 0 deg);
+    }
+}
+@keyframes spin {
+    from {
+        transform: rotate(0 deg);
+    }
+    to {
+        transform: rotate(360 deg);
+    }
+}
+.time - set - button {
+    background - color: #112240;
+    border: 1px solid # 64 ffda;
+    color: #e6f1ff;
+    padding: 5 px 10 px;
+    border - radius: 3 px;
+    cursor: pointer;
+    font - size: 12 px;
+    margin - left: 5 px;
+    transition: background - color 0.3 s;
+}
+.time - set - button: hover {
+    background - color: rgba(100, 255, 218, 0.2);
+}
+/* 合成ボタンスタイル */
+.combine - button {
+    background - color: #97c2f0;
+    color: # 0 a192f;
+    border: none;
+    padding: 10 px 20 px;
+    border - radius: 5 px;
+    font - size: 16 px;
+    cursor: pointer;
+    margin - top: 20 px;
+    transition: all 0.3 s;
+    font - weight: bold;
+}
+.combine - button: hover {
+    background - color: #52e0c4;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(100, 255, 218, 0.4);
+}
+.combine-button:disabled {
+    background-color: # 3 a5a78;
+    cursor: not - allowed;
+    transform: none;
+    box - shadow: none;
+}
+/* 合成ステータスメッセージ */
+.combine - status {
+    margin - top: 10 px;
+    color: #97c2f0;
+    font-size: 14px;
+    height: 20px;
+}
+/* プレビューセクション */
+.preview-section {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: rgba(17, 34, 64, 0.7);
+    border-radius: 5px;
+    display: none;
+}
+.preview-section h3 {
+    margin-top: 0;
+    color: # 97 c2f0;
+    border - bottom: 1 px solid #64ffda;
+    padding-bottom: 5px;
+}
+/* 無効状態のオーバーレイ */
+.disabled-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(10, 25, 47, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    border-radius: 5px;
+}
+.disabled-message {
+    background-color: rgba(30, 42, 71, 0.9);
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    max-width: 80%;
+}
+.disabled-message p {
+    margin-bottom: 15px;
+}
+.loader {
+    width: 80px;
+    aspect-ratio: 1;
+    border: 10px solid # 000;
+    box - sizing: border - box;
+    background:
+        radial - gradient(farthest - side, #fff 98 %, #0000) 50%/20px 20px,
+        radial-gradient(farthest-side, # fff 98 %, #0000) 50%/20px 20px,
+        radial-gradient(farthest-side, # fff 98 %, #0000) 50%/20px 20px,
+        radial-gradient(farthest-side, # fff 98 %, #0000) 50%/20px 20px,
+        radial-gradient(farthest-side, # fff 98 %, #0000) 50%/80% 80%,
+        # 000;
+    background - repeat: no - repeat;
+    filter: blur(4 px) contrast(10);
+    animation: squarePulse 1 s infinite alternate;
+}
+@keyframes squarePulse {
+    0 % {
+        background - position: 50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %;
+    }
+    25 % {
+        background - position: 50 % 0,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %;
+    }
+    50 % {
+        background - position: 50 % 0,
+            50 % 100 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %;
+    }
+    75 % {
+        background - position: 50 % 0,
+            50 % 100 %,
+            0 50 %,
+            50 % 50 %,
+            50 % 50 %,
+            50 % 50 %;
+    }
+    100 % {
+        background - position: 50 % 0,
+            50 % 100 %,
+            0 50 %,
+            100 % 50 %,
+            50 % 50 %,
+            50 % 50 %;
+    }
+}
+# buffering - indicator {
+    position: absolute;
+    top: 50 %;
+    left: 50 %;
+    transform: translate(-50 %, -50 %);
+    z - index: 10;
+    display: none;
+}
+.sync - status {
+    position: absolute;
+    bottom: 100 px;
+    left: 10 px;
+    width: 150 px;
+    /* 固定幅 */
+    height: 30 px;
+    /* 固定高さ */
+    background - color: rgba(0, 0, 0, 0.7);
+    color: #97c2f0;
+    padding: 5px 10px;
+    border-radius: 3px;
+    font-size: 12px;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    white-space: nowrap;
+    /* 文字の折り返しを防止 */
+    overflow: hidden;
+    /* 内容がはみ出す場合に隠す */
+    text-overflow: ellipsis;
+    /* はみ出したテキストに「…」を表示（任意） */
+    user-select: none;
+    /* テキストの選択を不可にする */
+    /* はみ出してもスクロールバーを出さない */
+    contain: strict;
+    /* レイアウトの影響を最小限にする */
+}
+.sync-status button {
+    background: none;
+    border: none;
+    color: # fff;
+    cursor: pointer;
+    font - size: 12 px;
+}
+.lock - controls - btn {
+    position: fixed;
+    bottom: 20 px;
+    right: 20 px;
+    background - color: rgba(0, 0, 0, 0.7);
+    border: none;
+    color: #fff;
+    width: 36 px;
+    height: 36 px;
+    border - radius: 50 %;
+    display: flex;
+    align - items: center;
+    justify - content: center;
+    cursor: pointer;
+    z - index: 100;
+    display: none;
+}
+.lock - controls - btn.locked {
+    color: #97c2f0;
+}
+.time-markers-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin: 15px 0;
+    padding: 15px;
+    background-color: rgba(17, 34, 64, 0.8);
+    border-radius: 5px;
+}
+.time-marker {
+    font-size: 80%;
+    padding: 6px 8px;
+    background-color: rgba(100, 255, 218, 0.05);
+    border: 1px solid # 64 ffda;
+    border - radius: 4 px;
+    cursor: grab;
+    user - select: none;
+    transition: background - color 0.3 s;
+}
+.time - marker: hover {
+    background - color: rgba(100, 255, 218, 0.1);
+}
+.time - marker.dragging {
+    opacity: 0.7;
+    cursor: grabbing;
+}
+.time - input - container {
+    display: flex;
+    align - items: center;
+    gap: 5 px;
+}
+.time - input - container input {
+    width: 80 px;
+}
+# hide - video: checked~.video - container video {
+    background - color: black;
+    opacity: 0;
+}
         </style>
     </head>
     <body>
@@ -1208,7 +1260,11 @@ window.addEventListener('load', async () => {
                     <button class="combine-button" id="apply-time-btn" disabled>時間設定を適用</button>
                 </div>
                 <h2>設定</h2>
-                <button class="combine-button" id="blank-mode-btn">消画モード: OFF</button>
+                <!-- 設定セクションに消画モードを追加 -->
+                <div class="setting-item">
+                    <label for="hide-video">消画モード:</label>
+                        <input type="checkbox" id="hide-video">
+                </div>
                 <div class="setting-item">
                     <div class="global-volume-container">
                         <label>全体音量係数:</label>