Update p1/index.html

p1/index.html

@@ -255,6 +255,23 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       min-height: 100vh;
     }
 
+    .error-message {
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(255, 50, 50, 0.95);
+      color: white;
+      padding: 15px 25px;
+      border-radius: 8px;
+      z-index: 10000;
+      font-size: 14px;
+      text-align: center;
+      max-width: 80%;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      border-left: 4px solid #ff0000;
+    }
+
     h1 {
       color: #a2c2e8;
       text-align: center;
@@ -491,9 +508,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       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 {
@@ -523,9 +537,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       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 {
@@ -585,9 +596,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       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,
@@ -721,15 +729,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       }
     }
 
-    @keyframes spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
     .time-set-button {
       background-color: #112240;
       border: 1px solid #64ffda;
@@ -771,149 +770,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       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;
-    }
-
-    .lock-controls-btn.locked {
-      color: #97c2f0;
-    }
-
     .time-markers-container {
       display: flex;
       flex-wrap: wrap;
@@ -1043,289 +899,6 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
     <canvas id="effectCanvas"></canvas>
     <div class="grid"></div>
   </div>
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const starCanvas = document.getElementById('starCanvas');
-      const effectCanvas = document.getElementById('effectCanvas');
-      const starCtx = starCanvas.getContext('2d');
-      const effectCtx = effectCanvas.getContext('2d');
-
-      const dpr = window.devicePixelRatio || 1;
-
-      function resizeCanvas() {
-        starCanvas.width = window.innerWidth * dpr;
-        starCanvas.height = window.innerHeight * dpr;
-        effectCanvas.width = window.innerWidth * dpr;
-        effectCanvas.height = window.innerHeight * dpr;
-        starCtx.scale(dpr, dpr);
-        effectCtx.scale(dpr, dpr);
-      }
-
-      window.addEventListener('resize', resizeCanvas);
-      resizeCanvas();
-
-      const config = {
-        density: 0.95,
-        speed: 2.5,
-        glowSize: 5,
-        starOpacity: 1.0,
-        glowOpacity: 0.08,
-        milkyWayIntensity: 2.0,
-        bandThickness: 0.15,
-        clusterStrength: 3.0
-      };
-
-      let stars = [];
-      let glows = [];
-      let lightSpots = [];
-
-      const glowColors = [
-        { r: 142, g: 61, b: 235 },
-        { r: 180, g: 100, b: 230 },
-        { r: 70, g: 61, b: 230 },
-        { r: 160, g: 80, b: 210 },
-        { r: 70, g: 61, b: 235 }
-      ];
-
-      const BAND_ANGLE = -12 * Math.PI / 180;
-      let BASE_BAND_THICKNESS = Math.min(window.innerWidth, window.innerHeight) * config.bandThickness;
-      const BAND_LENGTH = Math.max(window.innerWidth, window.innerHeight) * 1.1;
-      const BAND_CURVE = 0.4;
-
-      let clusters = [];
-      const NUM_CLUSTERS = Math.floor(BAND_LENGTH / 120);
-
-      function initClusters() {
-        clusters = [];
-        for (let i = 0; i < NUM_CLUSTERS; i++) {
-          clusters.push({
-            t: Math.random(),
-            radius: (Math.random() * 0.15 + 0.05) * BAND_LENGTH,
-            strength: (Math.random() * 2.5 + 0.5) * config.clusterStrength
-          });
-        }
-      }
-
-      function bandCenter(t) {
-        const cx = window.innerWidth / 2;
-        const cy = window.innerHeight / 2;
-        const lx = (t - 0.5) * BAND_LENGTH;
-        const curveOffset = Math.sin((t - 0.5) * Math.PI * 2 * BAND_CURVE) * (BASE_BAND_THICKNESS * 0.4);
-        const cosVariation = Math.cos((t - 0.5) * Math.PI * 10) * (BASE_BAND_THICKNESS * 0.05) +
-          Math.cos((t - 0.5) * Math.PI * 4) * (BASE_BAND_THICKNESS * 0.082);
-        const localThickness = BASE_BAND_THICKNESS + cosVariation;
-        const cosA = Math.cos(BAND_ANGLE);
-        const sinA = Math.sin(BAND_ANGLE);
-        const x = cx + lx * cosA - curveOffset * sinA;
-        const y = cy + lx * sinA + curveOffset * cosA;
-        return { x, y, localThickness };
-      }
-
-      function gaussian(mean = 0, std = 1) {
-        let u = 0, v = 0;
-        while (u === 0) u = Math.random();
-        while (v === 0) v = Math.random();
-        const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-        return z * std + mean;
-      }
-
-      function initStars() {
-        stars = [];
-        glows = [];
-        lightSpots = [];
-
-        BASE_BAND_THICKNESS = Math.min(window.innerWidth, window.innerHeight) * config.bandThickness;
-
-        const WIDTH = window.innerWidth;
-        const HEIGHT = window.innerHeight;
-
-        const NUM_BACKGROUND = Math.floor((WIDTH * HEIGHT) / 1000 * config.density);
-        const NUM_BAND_TRIALS = Math.floor((WIDTH * HEIGHT) / 340 * config.density);
-
-        for (let i = 0; i < NUM_BACKGROUND; i++) {
-          const x = Math.random() * WIDTH;
-          const y = Math.random() * HEIGHT;
-          const size = Math.random() * 1 + 0.5;
-          const opacity = Math.random() * 0.5 + 0.3;
-          const twinkleSpeed = Math.random() * 5 + 3;
-          const twinkleOffset = Math.random() * Math.PI * 2;
-          const glowColor = glowColors[Math.floor(Math.random() * glowColors.length)];
-
-          stars.push({
-            x, y, size, opacity, twinkleSpeed, twinkleOffset, glowColor,
-            glowSize: Math.random() * (config.glowSize - 20) + 20,
-            isBackground: true
-          });
-        }
-
-        for (let i = 0; i < NUM_BAND_TRIALS; i++) {
-          const t = Math.random() ** 0.7;
-          const t_signed = Math.random() < 0.5 ? t : 1 - t;
-          const bc = bandCenter(t_signed);
-          const localThickness = bc.localThickness;
-
-          const perp = gaussian(0, localThickness * 0.45);
-          const ux = -Math.sin(BAND_ANGLE);
-          const uy = Math.cos(BAND_ANGLE);
-          const x = bc.x + perp * ux;
-          const y = bc.y + perp * uy;
-
-          const dist = Math.hypot(x - bc.x, y - bc.y);
-          const p_base = Math.exp(-(dist * dist) / (2 * (localThickness * 0.4) ** 2));
-
-          let clusterBoost = 0;
-          for (const cl of clusters) {
-            const cc = bandCenter(cl.t);
-            const dcl = Math.hypot(x - cc.x, y - cc.y);
-            clusterBoost += cl.strength * Math.exp(-(dcl * dcl) / (2 * (cl.radius * 0.6) ** 2));
-          }
-
-          const prob = Math.min(1, (0.5 * p_base) + (0.18 * clusterBoost * config.milkyWayIntensity));
-          if (Math.random() < prob) {
-            const size = (Math.random() < 0.02 ? (2.0 + Math.random() * 2.5) : (0.5 + Math.random() * 1.2)) * 0.5;
-            const opacity = 0.6 + Math.random() * 0.5;
-            const twinkleSpeed = Math.random() * 5 + 3;
-            const twinkleOffset = Math.random() * Math.PI * 2;
-            const glowColor = glowColors[Math.floor(Math.random() * glowColors.length)];
-
-            stars.push({
-              x, y, size, opacity, twinkleSpeed, twinkleOffset, glowColor,
-              opacity: config.starOpacity,
-              glowSize: Math.random() * (config.glowSize - 20) + 20,
-              isBackground: false
-            });
-
-            if (Math.random() > 0.8) {
-              glows.push({
-                x, y,
-                size: size * 5,
-                color: glowColor,
-                phase: Math.random() * Math.PI * 2
-              });
-            }
-          }
-        }
-
-        const lightSpotCount = 8;
-        for (let i = 0; i < lightSpotCount; i++) {
-          lightSpots.push({
-            x: Math.random() * WIDTH,
-            y: Math.random() * HEIGHT,
-            size: Math.random() * 200 + 100,
-            progress: Math.random() * 100,
-            speed: Math.random() * 0.5 + 0.3
-          });
-        }
-      }
-
-      function drawStars(time) {
-        starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
-
-        for (const star of stars) {
-          const twinkle = 0.7 + 0.3 * Math.sin(time * config.speed / star.twinkleSpeed + star.twinkleOffset);
-          const currentOpacity = star.opacity * twinkle * 0.5;
-
-          const gradient = starCtx.createRadialGradient(
-            star.x, star.y, 0,
-            star.x, star.y, star.glowSize
-          );
-          gradient.addColorStop(0, `rgba(255, 255, 255, ${currentOpacity})`);
-          gradient.addColorStop(0.2, `rgba(${star.glowColor.r}, ${star.glowColor.g}, ${star.glowColor.b}, ${currentOpacity * config.glowOpacity})`);
-          gradient.addColorStop(1, `rgba(${star.glowColor.r}, ${star.glowColor.g}, ${star.glowColor.b}, 0)`);
-
-          starCtx.beginPath();
-          starCtx.arc(star.x, star.y, star.glowSize, 0, Math.PI * 2);
-          starCtx.fillStyle = gradient;
-          starCtx.fill();
-
-          starCtx.beginPath();
-          starCtx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
-          starCtx.fillStyle = `rgba(255, 255, 255, ${currentOpacity})`;
-          starCtx.fill();
-        }
-
-        for (const glow of glows) {
-          const scale = 1 + 0.5 * Math.sin(time * config.speed * 0.5 + glow.phase);
-          const opacity = 0.3 * Math.sin(time * config.speed * 0.5 + glow.phase);
-
-          if (opacity > 0) {
-            const gradient = starCtx.createRadialGradient(
-              glow.x, glow.y, 0,
-              glow.x, glow.y, glow.size * scale * 0.5
-            );
-            gradient.addColorStop(0, `rgba(${glow.color.r}, ${glow.color.g}, ${glow.color.b}, ${opacity * 0.5})`);
-            gradient.addColorStop(1, `rgba(${glow.color.r}, ${glow.color.g}, ${glow.color.b}, 0)`);
-
-            starCtx.beginPath();
-            starCtx.arc(glow.x, glow.y, glow.size * scale, 0, Math.PI * 2);
-            starCtx.fillStyle = gradient;
-            starCtx.fill();
-          }
-        }
-      }
-
-      function drawEffects(time) {
-        effectCtx.clearRect(0, 0, effectCanvas.width, effectCanvas.height);
-
-        const WIDTH = window.innerWidth;
-        const HEIGHT = window.innerHeight;
-
-        for (const spot of lightSpots) {
-          spot.progress += spot.speed * config.speed;
-          if (spot.progress > 100) spot.progress = 0;
-
-          const progress = spot.progress / 100;
-          const opacity = Math.sin(progress * Math.PI) * 0.3;
-          const size = spot.size * (0.5 + progress);
-
-          const gradient = effectCtx.createRadialGradient(
-            spot.x, spot.y, 0,
-            spot.x, spot.y, size
-          );
-          gradient.addColorStop(0, `rgba(100, 200, 255, ${opacity})`);
-          gradient.addColorStop(1, 'rgba(100, 200, 255, 0)');
-
-          effectCtx.beginPath();
-          effectCtx.arc(spot.x, spot.y, size, 0, Math.PI * 2);
-          effectCtx.fillStyle = gradient;
-          effectCtx.fill();
-        }
-      }
-      let lastTime = 0;
-      const fps = 5;
-      const interval = 1000 / fps;
-
-      function animate(time) {
-        if (time - lastTime >= interval) {
-          const seconds = time / 1000;
-          drawStars(seconds);
-          drawEffects(seconds);
-          lastTime = time;
-        }
-        requestAnimationFrame(animate);
-      }
-
-      initClusters();
-      initStars();
-      requestAnimationFrame(animate);
-      
-      const refreshBackgroundBtn = document.getElementById('refresh-background-btn');
-      if (refreshBackgroundBtn) {
-        refreshBackgroundBtn.addEventListener('click', function () {
-          initClusters();
-          initStars();
-          console.log('背景を更新しました');
-          const originalText = this.textContent;
-          this.textContent = '更新中...';
-          this.disabled = true;
-          setTimeout(() => {
-            this.textContent = originalText;
-            this.disabled = false;
-          }, 1000);
-        });
-      }
-    });
-  </script>
   
   <div class="loading-overlay" id="loadingOverlay">
     <div class="spinner-box">
@@ -1380,7 +953,7 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
           ブラウザの仕様により、オフラインで開く際に<b>最初のみ二回再読み込みボタンを押さなければいけません。</b><br>
           不安定な機能で、ページの更新などができなくなるバグが発生する可能性があります。</a>
         <br>
-        <button class="combine-button" id="sw-register-btn" disabled>登録を開始</button>
+        <button class="combine-button" id="sw-register-btn">登録を開始</button>
         <div class="combine-status" id="sw-status"></div>
       </div>
     </details><br>
@@ -1398,25 +971,25 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
         <div class="progress-marker" id="end-marker" style="left: 100%; display: none;"></div>
       </div>
       <div class="main-controls">
-        <button class="control-button" id="play-pause-btn" disabled>
+        <button class="control-button" id="play-pause-btn">
           <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-200v-560l440 280-440 280Z"/></svg>
         </button>
-        <button class="control-button" id="reset-btn" disabled title="再生開始秒数から再生">
+        <button class="control-button" id="reset-btn" title="再生開始秒数から再生">
           <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
         </button>
         <div class="time-display" id="time-display">00:00.00 / 00:00.00</div>
         <div class="volume-control">
-          <button class="volume-button" id="volume-btn" disabled>
+          <button class="volume-button" id="volume-btn">
             <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Z"/></svg>
           </button>
-          <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="1" disabled>
+          <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="0.5">
         </div>
         <div class="speed-control">
           <span class="speed-value" id="speed-value">1.00x</span>
-          <input type="range" class="speed-slider" id="speed-slider" min="0.01" max="5" step="0.01" value="1" disabled>
+          <input type="range" class="speed-slider" id="speed-slider" min="0.01" max="5" step="0.01" value="1">
         </div>
-        <button class="control-button" id="pip-btn" disabled title="ピクチャーインピクチャー">⇲</button>
-        <button class="control-button fullscreen-button" id="fullscreen-btn" disabled>⛶</button>
+        <button class="control-button" id="pip-btn" title="ピクチャーインピクチャー">⇲</button>
+        <button class="control-button fullscreen-button" id="fullscreen-btn">⛶</button>
       </div>
     </div>
 
@@ -1427,39 +1000,35 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
         <div class="volume-box-inline">
           <span>🔊 BGM音量調整</span>
           <div class="volume-item">
-            <input type="range" id="bgm-volume-slider" min="0" max="1" step="0.01" value="1">
-            <span id="bgm-volume-value">1.00</span>
+            <input type="range" id="bgm-volume-slider" min="0" max="1" step="0.01" value="0.8">
+            <span id="bgm-volume-value">0.80</span>
           </div>
         </div>
         <span>このボックスをドラッグして「再生開始秒数」や「再生終了秒数」の入力ボックスの上で離すと秒数を簡単に変更できます。</span>
-        <div class="time-marker" data-time="89.23">1:29.23</div>
-        <div class="time-marker" data-time="137.22">2:17.22</div>
+        <div class="time-marker" data-time="89.23" draggable="true">1:29.23</div>
+        <div class="time-marker" data-time="137.22" draggable="true">2:17.22</div>
       </div>
       <div class="setting-item">
         <label for="start-time">再生開始秒数:</label>
         <div class="time-input-container">
-          <input type="number" id="start-time" min="0" value="0" step="0.01" disabled>
-          <button class="time-set-button" id="set-start-time" disabled>現在の秒数に設定</button>
+          <input type="number" id="start-time" min="0" value="0" step="0.01">
+          <button class="time-set-button" id="set-start-time">現在の秒数に設定</button>
         </div>
       </div>
       <div class="setting-item">
         <label for="end-time">再生終了秒数:</label>
         <div class="time-input-container">
-          <input type="number" id="end-time" min="0" value="0" step="0.01" disabled>
-          <button class="time-set-button" id="set-end-time" disabled>現在の秒数に設定</button>
-          <button class="time-set-button" id="reset-end-time" disabled>動画の長さに戻す</button>
+          <input type="number" id="end-time" min="0" value="0" step="0.01">
+          <button class="time-set-button" id="set-end-time">現在の秒数に設定</button>
+          <button class="time-set-button" id="reset-end-time">動画の長さに戻す</button>
         </div>
       </div>
       <div class="setting-item">
         <label for="loop">ループ再生:</label>
-        <input type="checkbox" id="loop" disabled>
+        <input type="checkbox" id="loop">
       </div>
       <div class="setting-item">
-        <label for="loop-interval">繰り返し間隔(秒):</label>
-        <input type="number" id="loop-interval" min="0" value="0" step="0.1" disabled>
-      </div>
-      <div class="setting-item">
-        <button class="combine-button" id="apply-time-btn" disabled>時間設定を適用</button>
+        <button class="combine-button" id="apply-time-btn">時間設定を適用</button>
       </div>
 
       <h2>設定</h2>
@@ -1470,14 +1039,14 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       <div class="setting-item">
         <div class="global-volume-container">
           <label>全体音量係数:</label>
-          <input type="range" class="global-volume-slider" id="global-volume" min="0" max="10" step="0.01" value="5" disabled>
-          <span class="slider-value" id="global-volume-value">0.5</span>
+          <input type="range" class="global-volume-slider" id="global-volume" min="0" max="10" step="0.01" value="10">
+          <span class="slider-value" id="global-volume-value">1.0</span>
         </div>
       </div>
       <div class="setting-item">
         <div class="playback-speed-container">
           <label>再生速度:</label>
-          <input type="range" class="playback-speed-slider" id="playback-speed" min="0.01" max="5" step="0.001" value="1" disabled>
+          <input type="range" class="playback-speed-slider" id="playback-speed" min="0.01" max="5" step="0.001" value="1">
           <span class="slider-value" id="playback-speed-value">1.00x</span>
         </div>
       </div>
@@ -1494,14 +1063,28 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
     import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
     import { VRMAnimationLoaderPlugin, createVRMAnimationClip } from '@pixiv/three-vrm-animation';
 
-    // --- グローバル変数 ---
-    window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    
+    // --- 設定 ---
     const AUDIO_SRC = './m.mp3';
-    const VIDEO_SOURCES = ['v.mp4', '/t/v.mp4'];
+    const VIDEO_SOURCES = ['v.mp4'];
     const VRM_MODELS = ['default.vrm'];
-    const VRMA_ANIMATIONS = ['idle.vrma', 'bakuretsu.vrma'];
+    const VRMA_ANIMATIONS = ['idle.vrma'];
     
+    // --- エラーハンドリング用 ---
+    function showErrorMessage(message) {
+      const existing = document.querySelector('.error-message');
+      if (existing) existing.remove();
+      
+      const errorDiv = document.createElement('div');
+      errorDiv.className = 'error-message';
+      errorDiv.innerHTML = `⚠️ ${message}<br><small>詳細はコンソール(F12)を確認してください</small>`;
+      document.body.appendChild(errorDiv);
+      
+      setTimeout(() => {
+        if (errorDiv.parentNode) errorDiv.remove();
+      }, 8000);
+    }
+    
+    // --- グローバル変数 ---
     let panes = [];
     let activePane = null;
     let globalTimeline = {
@@ -1511,85 +1094,238 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
       playbackRate: 1.0,
       startTime: 0,
       endTime: 0,
-      loopEnabled: false,
-      loopInterval: 0
+      loopEnabled: false
     };
     let bgmAudioElement = null;
-    let bgmVolume = 1.0;
-    let splitInstance = null;
+    let bgmVolume = 0.8;
+    let globalVolume = 1.0;
+    let currentSplitInstance = null;
+    let syncTimer = null;
     
-    // Three.js関連
-    class ThreeContext {
-      constructor(canvas, vrmPath, vrmaPath, paneId) {
-        this.canvas = canvas;
-        this.vrmPath = vrmPath;
-        this.vrmaPath = vrmaPath;
-        this.paneId = paneId;
-        this.clock = new THREE.Clock();
-        this.mixer = null;
-        this.vrm = null;
-        this.vrma = null;
-        this.animationAction = null;
-        this.duration = 0;
-        this.playbackRate = 1.0;
-        this.isPlaying = false;
-        this.currentTime = 0;
-        
-        this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        
-        this.scene = new THREE.Scene();
-        this.scene.background = new THREE.Color(0x112240);
-        
-        this.camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
-        this.camera.position.set(0, 1, 3);
-        
-        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-        this.controls.enableDamping = true;
-        this.controls.dampingFactor = 0.05;
-        this.controls.screenSpacePanning = true;
-        this.controls.maxPolarAngle = Math.PI;
-        this.controls.target.set(0, 1, 0);
-        
-        // キーボード制御用
-        this.keyState = {
-          w: false, a: false, s: false, d: false, q: false, e: false
-        };
-        this.moveSpeed = 5;
-        
-        // ライト
-        const dirLight = new THREE.DirectionalLight(0xffffff, 1);
-        dirLight.position.set(1, 2, 1);
-        this.scene.add(dirLight);
-        const backLight = new THREE.DirectionalLight(0x88aaff, 0.5);
-        backLight.position.set(-1, 1, -1);
-        this.scene.add(backLight);
-        this.scene.add(new THREE.AmbientLight(0x404060));
-        
-        // グリッド
-        const gridHelper = new THREE.GridHelper(10, 20, 0x64ffda, 0x334466);
-        this.scene.add(gridHelper);
-        
-        // 地面プレーン
-        const planeMat = new THREE.MeshStandardMaterial({ color: 0x1a2a4a, roughness: 0.8, metalness: 0.1 });
-        const plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8), planeMat);
-        plane.rotation.x = -Math.PI / 2;
-        plane.position.y = -0.01;
-        this.scene.add(plane);
-        
-        this.loadModel();
-        this.setupKeyboardControls();
-        this.animate();
-      }
-      
-      setupKeyboardControls() {
-        const handleKeyDown = (e) => {
-          if (activePane !== this.paneId) return;
-          const key = e.key.toLowerCase();
-          if (this.keyState.hasOwnProperty(key)) {
+    // メディア読み込み状態
+    let mediaLoadStatus = {
+      bgm: false,
+      video: false,
+      vrm: false
+    };
+    
+    // --- ヘルパー関数 ---
+    function formatTime(seconds) {
+      if (isNaN(seconds)) return '00:00.00';
+      const mins = Math.floor(seconds / 60);
+      const secs = (seconds % 60).toFixed(2);
+      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(5, '0')}`;
+    }
+    
+    function updateProgressBar() {
+      if (globalTimeline.duration <= 0) return;
+      const progress = (globalTimeline.currentTime / globalTimeline.duration) * 100;
+      const progressBar = document.getElementById('progress-bar');
+      if (progressBar) progressBar.style.width = `${progress}%`;
+      
+      const startMarker = document.getElementById('start-marker');
+      if (startMarker && globalTimeline.startTime > 0) {
+        const startPercent = (globalTimeline.startTime / globalTimeline.duration) * 100;
+        startMarker.style.left = `${startPercent}%`;
+        startMarker.style.display = 'block';
+      } else if (startMarker) {
+        startMarker.style.display = 'none';
+      }
+      
+      const endMarker = document.getElementById('end-marker');
+      if (endMarker && globalTimeline.endTime > 0 && globalTimeline.endTime < globalTimeline.duration) {
+        const endPercent = (globalTimeline.endTime / globalTimeline.duration) * 100;
+        endMarker.style.left = `${endPercent}%`;
+        endMarker.style.display = 'block';
+      } else if (endMarker) {
+        endMarker.style.display = 'none';
+      }
+    }
+    
+    function updateTimeDisplay() {
+      const current = formatTime(globalTimeline.currentTime);
+      const total = formatTime(globalTimeline.duration);
+      const display = document.getElementById('time-display');
+      if (display) display.textContent = `${current} / ${total}`;
+    }
+    
+    // --- メディア同期（単一化）---
+    function syncAllMedia() {
+      if (!globalTimeline.isPlaying) return;
+      
+      let newTime = bgmAudioElement ? bgmAudioElement.currentTime : globalTimeline.currentTime;
+      
+      // 範囲制御
+      if (globalTimeline.endTime > 0 && newTime >= globalTimeline.endTime) {
+        if (globalTimeline.loopEnabled) {
+          newTime = globalTimeline.startTime;
+          seekAllMedia(newTime);
+        } else {
+          pauseAllMedia();
+          return;
+        }
+      }
+      
+      if (globalTimeline.startTime > 0 && newTime < globalTimeline.startTime) {
+        newTime = globalTimeline.startTime;
+        seekAllMedia(newTime);
+      }
+      
+      globalTimeline.currentTime = newTime;
+      
+      // 各ペインを同期
+      panes.forEach(pane => {
+        if (pane.type === 'video' && pane.videoElement) {
+          if (Math.abs(pane.videoElement.currentTime - newTime) > 0.05) {
+            pane.videoElement.currentTime = newTime;
+          }
+        } else if (pane.type === 'vrm' && pane.threeContext) {
+          pane.threeContext.seek(newTime);
+        }
+      });
+      
+      updateProgressBar();
+      updateTimeDisplay();
+    }
+    
+    function seekAllMedia(time) {
+      let newTime = Math.min(Math.max(time, 0), globalTimeline.duration);
+      
+      if (globalTimeline.startTime > 0 && newTime < globalTimeline.startTime) {
+        newTime = globalTimeline.startTime;
+      }
+      if (globalTimeline.endTime > 0 && newTime > globalTimeline.endTime) {
+        newTime = globalTimeline.endTime;
+      }
+      
+      if (bgmAudioElement) {
+        bgmAudioElement.currentTime = newTime;
+      }
+      panes.forEach(p => p.seek(newTime));
+      globalTimeline.currentTime = newTime;
+      updateProgressBar();
+      updateTimeDisplay();
+    }
+    
+    function playAllMedia() {
+      if (globalTimeline.currentTime >= globalTimeline.endTime && globalTimeline.endTime > 0) {
+        seekAllMedia(globalTimeline.startTime);
+      }
+      
+      globalTimeline.isPlaying = true;
+      
+      panes.forEach(p => p.play());
+      
+      if (bgmAudioElement) {
+        bgmAudioElement.currentTime = globalTimeline.currentTime;
+        bgmAudioElement.play().catch(e => console.warn('BGM play failed:', e));
+      }
+      
+      const playBtn = document.getElementById('play-pause-btn');
+      if (playBtn) {
+        playBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm0-280q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-280q-33 0-56.5-23.5T400-760q0-33 23.5-56.5T480-840q33 0 56.5 23.5T560-760q0 33-23.5 56.5T480-680Z"/></svg>';
+      }
+    }
+    
+    function pauseAllMedia() {
+      globalTimeline.isPlaying = false;
+      panes.forEach(p => p.pause());
+      if (bgmAudioElement) bgmAudioElement.pause();
+      
+      const playBtn = document.getElementById('play-pause-btn');
+      if (playBtn) {
+        playBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-200v-560l440 280-440 280Z"/></svg>';
+      }
+    }
+    
+    function resetToStartTime() {
+      seekAllMedia(globalTimeline.startTime);
+      if (!globalTimeline.isPlaying) {
+        playAllMedia();
+      }
+    }
+    
+    function applyGlobalVolume() {
+      const effectiveVolume = bgmVolume * globalVolume;
+      if (bgmAudioElement) bgmAudioElement.volume = Math.min(1, Math.max(0, effectiveVolume));
+    }
+    
+    // --- ThreeContext（修正版）---
+    class ThreeContext {
+      constructor(canvas, vrmPath, vrmaPath, paneId) {
+        this.canvas = canvas;
+        this.vrmPath = vrmPath;
+        this.vrmaPath = vrmaPath;
+        this.paneId = paneId;
+        this.clock = new THREE.Clock();
+        this.mixer = null;
+        this.vrm = null;
+        this.vrma = null;
+        this.animationAction = null;
+        this.duration = 0;
+        this.playbackRate = 1.0;
+        this.isPlaying = false;
+        this.currentTime = 0;
+        this.loadError = false;
+        
+        this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+        this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x112240);
+        
+        this.camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+        this.camera.position.set(0, 1.2, 2.5);
+        this.camera.lookAt(0, 1, 0);
+        
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        this.controls.screenSpacePanning = true;
+        this.controls.maxPolarAngle = Math.PI / 2;
+        this.controls.target.set(0, 1, 0);
+        
+        // キーボード制御（単一化のためにグローバルイベントは使わない）
+        this.keyState = {
+          w: false, a: false, s: false, d: false, q: false, e: false
+        };
+        this.moveSpeed = 5;
+        
+        // ライト
+        const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+        dirLight.position.set(1, 2, 1);
+        this.scene.add(dirLight);
+        const backLight = new THREE.DirectionalLight(0x88aaff, 0.5);
+        backLight.position.set(-1, 1, -1);
+        this.scene.add(backLight);
+        this.scene.add(new THREE.AmbientLight(0x404060));
+        
+        // グリッド
+        const gridHelper = new THREE.GridHelper(10, 20, 0x64ffda, 0x334466);
+        this.scene.add(gridHelper);
+        
+        // 地面プレーン
+        const planeMat = new THREE.MeshStandardMaterial({ color: 0x1a2a4a, roughness: 0.8, metalness: 0.1 });
+        const plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8), planeMat);
+        plane.rotation.x = -Math.PI / 2;
+        plane.position.y = -0.01;
+        this.scene.add(plane);
+        
+        this.loadModel();
+        this.setupKeyboardControls();
+        this.animate();
+      }
+      
+      setupKeyboardControls() {
+        const handleKeyDown = (e) => {
+          if (activePane !== this.paneId) return;
+          const key = e.key.toLowerCase();
+          if (this.keyState.hasOwnProperty(key)) {
             this.keyState[key] = true;
-            e.preventDefault();
+            if (key === 'w' || key === 'a' || key === 's' || key === 'd' || key === 'q' || key === 'e') {
+              e.preventDefault();
+            }
           }
         };
         
@@ -1598,7 +1334,9 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
           const key = e.key.toLowerCase();
           if (this.keyState.hasOwnProperty(key)) {
             this.keyState[key] = false;
-            e.preventDefault();
+            if (key === 'w' || key === 'a' || key === 's' || key === 'd' || key === 'q' || key === 'e') {
+              e.preventDefault();
+            }
           }
         };
         
@@ -1629,27 +1367,26 @@ ${unsupportedFeatures.map(feature => `• ${feature}`).join('\n')}
         if (this.keyState.q) move.y += 1;
         if (this.keyState.e) move.y -= 1;
         
-        move.normalize();
-        this.camera.position.x += move.x * speed;
-        this.camera.position.y += move.y * speed;
-        this.camera.position.z += move.z * speed;
+        if (move.length() > 0) {
+          move.normalize();
+          this.camera.position.x += move.x * speed;
+          this.camera.position.y += move.y * speed;
+          this.camera.position.z += move.z * speed;
+          this.controls.target.copy(this.camera.position.clone().sub(forward.multiplyScalar(2)));
+          this.controls.update();
+        }
+      }
+      
+      updateCameraAspect() {
+        const width = this.canvas.clientWidth;
+        const height = this.canvas.clientHeight;
+        if (width === 0 || height === 0) return;
+        
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
       }
       
-updateCameraAspect() {
-  const width = this.canvas.clientWidth;
-  const height = this.canvas.clientHeight;
-
-  this.camera.aspect = width / height;
-  this.camera.updateProjectionMatrix();
-  this.renderer.setSize(width, height);
-
-  // ★ ここに入れる
-  const center = new THREE.Vector3(0, 1, 0);
-  const offset = this.camera.position.clone().sub(this.controls.target);
-
-  this.controls.target.copy(center);
-  this.camera.position.copy(center.clone().add(offset));
-}
       async loadModel() {
         const loader = new GLTFLoader();
         loader.register(parser => new VRMLoaderPlugin(parser));
@@ -1658,62 +1395,47 @@ updateCameraAspect() {
           const gltf = await loader.loadAsync(this.vrmPath);
           this.vrm = gltf.userData.vrm;
           VRMUtils.rotateVRM0(this.vrm);
-          console.log('humanoid:', this.vrm.humanoid);
           this.scene.add(this.vrm.scene);
-          
-          // モデルの位置を調整
           this.vrm.scene.position.y = 0;
           
           if (this.vrmaPath) {
             const vrmaLoader = new GLTFLoader();
             vrmaLoader.register(parser => new VRMAnimationLoaderPlugin(parser));
             const vrmaGltf = await vrmaLoader.loadAsync(this.vrmaPath);
-            console.log(vrmaGltf);
             this.vrma = vrmaGltf.userData.vrmAnimations?.[0];
-            console.log('vrma:', this.vrma);
-            console.log('vrma userData:', vrmaGltf.userData);
             
             if (this.vrma) {
               this.mixer = new THREE.AnimationMixer(this.vrm.scene);
               const clip = createVRMAnimationClip(this.vrma, this.vrm);
-              console.log('clip:', clip);
               if (clip) {
                 this.animationAction = this.mixer.clipAction(clip);
                 this.animationAction.setLoop(THREE.LoopRepeat);
                 this.animationAction.clampWhenFinished = false;
                 this.animationAction.play();
-              
-                this.mixer.timeScale = 1;
-                this.isPlaying = true; // ←これ重要
+                this.mixer.timeScale = 0; // 初期は一時停止
                 this.duration = clip.duration;
+                console.log(`VRM animation loaded (${this.paneId}), duration: ${this.duration}`);
               }
             }
           }
         } catch(e) {
-          console.error('VRM load error:', e);
+          console.error(`VRM load error (${this.paneId}):`, e);
+          this.loadError = true;
+          showErrorMessage(`3Dモデルの読み込みに失敗しました: ${this.vrmPath}`);
         }
       }
       
       animate() {
         requestAnimationFrame(() => this.animate());
-      
-        const width = this.canvas.clientWidth;
-        const height = this.canvas.clientHeight;
-      
-        if (this.renderer.domElement.width !== width ||
-            this.renderer.domElement.height !== height) {
-      
-          this.renderer.setSize(width, height, false);
-          this.camera.aspect = width / height;
-          this.camera.updateProjectionMatrix();
-        }
-      
+        
+        this.updateCameraAspect();
+        
         const delta = Math.min(this.clock.getDelta(), 0.033);
         
         if (activePane === this.paneId) {
           this.updateKeyboardMovement(delta);
-          
         }
+        
         if (this.vrm) {
           this.vrm.update(delta);
         }
@@ -1764,7 +1486,7 @@ updateCameraAspect() {
       }
     }
     
-    // ペインクラス
+    // --- Pane クラス ---
     class Pane {
       constructor(container, id) {
         this.id = id;
@@ -1773,7 +1495,7 @@ updateCameraAspect() {
         this.videoSrc = VIDEO_SOURCES[0];
         this.vrmSrc = VRM_MODELS[0];
         this.vrmaSrc = VRMA_ANIMATIONS[0];
-        this.volume = 0;
+        this.volume = 0.5;
         this.element = null;
         this.threeContext = null;
         this.videoElement = null;
@@ -1816,13 +1538,28 @@ updateCameraAspect() {
         const updateSourceList = () => {
           sourceSelect.innerHTML = '';
           if (this.type === 'video') {
-            VIDEO_SOURCES.forEach(src => { const opt = document.createElement('option'); opt.value = src; opt.textContent = src.split('/').pop(); sourceSelect.appendChild(opt); });
+            VIDEO_SOURCES.forEach(src => { 
+              const opt = document.createElement('option'); 
+              opt.value = src; 
+              opt.textContent = src.split('/').pop(); 
+              sourceSelect.appendChild(opt); 
+            });
             vrmSelect.style.display = 'none';
           } else {
-            VRMA_ANIMATIONS.forEach(src => { const opt = document.createElement('option'); opt.value = src; opt.textContent = src.split('/').pop(); sourceSelect.appendChild(opt); });
+            VRMA_ANIMATIONS.forEach(src => { 
+              const opt = document.createElement('option'); 
+              opt.value = src; 
+              opt.textContent = src.split('/').pop(); 
+              sourceSelect.appendChild(opt); 
+            });
             vrmSelect.style.display = 'inline-block';
             vrmSelect.innerHTML = '';
-            VRM_MODELS.forEach(src => { const opt = document.createElement('option'); opt.value = src; opt.textContent = src.split('/').pop(); vrmSelect.appendChild(opt); });
+            VRM_MODELS.forEach(src => { 
+              const opt = document.createElement('option'); 
+              opt.value = src; 
+              opt.textContent = src.split('/').pop(); 
+              vrmSelect.appendChild(opt); 
+            });
           }
           sourceSelect.value = this.type === 'video' ? this.videoSrc : this.vrmaSrc;
           if (this.type === 'vrm') vrmSelect.value = this.vrmSrc;
@@ -1870,92 +1607,74 @@ updateCameraAspect() {
         });
       }
       
-split(direction) {
-  const container = this.container.parentElement;
-
-  const newPaneContainer = document.createElement('div');
-  newPaneContainer.className = 'split-pane';
-
-  const newId = 'pane-' + Date.now();
-  const newPane = new Pane(newPaneContainer, newId);
-
-  // ラップ用コンテナ
-  const wrapper = document.createElement('div');
-  wrapper.className = 'split-wrapper';
-  wrapper.style.display = 'flex';
-  wrapper.style.flexDirection =
-    (direction === 'left' || direction === 'right') ? 'row' : 'column';
-
-  // 既存と新規を入れる順番
-  if (direction === 'left' || direction === 'top') {
-    wrapper.appendChild(newPaneContainer);
-    wrapper.appendChild(this.container);
-  } else {
-    wrapper.appendChild(this.container);
-    wrapper.appendChild(newPaneContainer);
-  }
-
-  container.replaceChild(wrapper, this.container);
-
-  panes.push(newPane);
-
-  // Split適用
-  Split(Array.from(wrapper.children), {
-    direction:
-      (direction === 'left' || direction === 'right')
-        ? 'horizontal'
-        : 'vertical',
-    sizes: [50, 50],
-    minSize: 100,
-    gutterSize: 6,
-  });
-}
-
-reinitializeSplit(container) {
-  // すべての.split-pane要素を収集
-  const getAllPanes = (element) => {
-    let panesList = [];
-    if (element.classList && element.classList.contains('split-pane')) {
-      panesList.push(element);
-    } else if (element.children) {
-      for (let child of element.children) {
-        panesList = panesList.concat(getAllPanes(child));
+      split(direction) {
+        const container = this.container.parentElement;
+        const newPaneContainer = document.createElement('div');
+        newPaneContainer.className = 'split-pane';
+        const newId = 'pane-' + Date.now() + '-' + Math.random();
+        const newPane = new Pane(newPaneContainer, newId);
+        
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.flexDirection = (direction === 'left' || direction === 'right') ? 'row' : 'column';
+        wrapper.style.flex = '1';
+        wrapper.style.width = '100%';
+        wrapper.style.height = '100%';
+        
+        if (direction === 'left' || direction === 'top') {
+          wrapper.appendChild(newPaneContainer);
+          wrapper.appendChild(this.container);
+        } else {
+          wrapper.appendChild(this.container);
+          wrapper.appendChild(newPaneContainer);
+        }
+        
+        container.replaceChild(wrapper, this.container);
+        panes.push(newPane);
+        
+        // 分割を再初期化
+        this.reinitializeSplit(document.getElementById('split-container'));
       }
-    }
-    return panesList;
-  };
-  
-  const allPanes = getAllPanes(container);
-  
-  if (allPanes.length > 1) {
-    if (splitInstance && typeof splitInstance.destroy === 'function') {
-      splitInstance.destroy();
-    }
-    
-    // すべてのペインが同じ親を持つとは限らないので、グループ化が必要
-    // 簡易的に最初のレベルのペインだけを分割
-    const directChildren = Array.from(container.children).filter(
-      child => child.classList && child.classList.contains('split-pane')
-    );
-    
-    if (directChildren.length > 1) {
-      splitInstance = Split(directChildren, {
-        direction: 'horizontal',
-        sizes: Array(directChildren.length).fill(100 / directChildren.length),
-        minSize: 100,
-        gutterSize: 4,
-        cursor: 'col-resize',
-        onDragEnd: () => {
-          panes.forEach(pane => {
-            if (pane.type === 'vrm' && pane.threeContext) {
-              setTimeout(() => pane.threeContext.updateCameraAspect(), 50);
+      
+      reinitializeSplit(rootContainer) {
+        // 既存のSplitインスタンスを破棄
+        if (currentSplitInstance && typeof currentSplitInstance.destroy === 'function') {
+          currentSplitInstance.destroy();
+        }
+        
+        // 直接の子要素であるsplit-paneまたはsplit-wrapperを収集
+        const getTopLevelPanes = (element) => {
+          const panesList = [];
+          for (let child of element.children) {
+            if (child.classList && child.classList.contains('split-pane')) {
+              panesList.push(child);
+            } else if (child.children) {
+              // wrapperの場合、その中のsplit-paneを取得
+              const innerPanes = Array.from(child.children).filter(c => 
+                c.classList && c.classList.contains('split-pane')
+              );
+              if (innerPanes.length > 0) {
+                panesList.push(child);
+              }
             }
+          }
+          return panesList;
+        };
+        
+        const topPanes = getTopLevelPanes(rootContainer);
+        
+        if (topPanes.length > 1) {
+          const isHorizontal = topPanes[0].parentElement.style.flexDirection !== 'column';
+          currentSplitInstance = Split(topPanes, {
+            direction: isHorizontal ? 'horizontal' : 'vertical',
+            sizes: Array(topPanes.length).fill(100 / topPanes.length),
+            minSize: 100,
+            gutterSize: 4,
+            cursor: isHorizontal ? 'col-resize' : 'row-resize'
           });
         }
-      });
-    }
-  }
-}
+      }
+      
       updateContent() {
         const contentDiv = this.container.querySelector('.pane-content');
         contentDiv.innerHTML = '';
@@ -1967,14 +1686,25 @@ reinitializeSplit(container) {
           this.videoElement.loop = false;
           this.videoElement.volume = this.volume;
           this.videoElement.playsInline = true;
-          contentDiv.appendChild(this.videoElement);
+          
+          this.videoElement.addEventListener('error', () => {
+            showErrorMessage(`動画の読み込みに失敗しました: ${this.videoSrc}`);
+          });
           
           this.videoElement.addEventListener('loadedmetadata', () => {
-            if (globalTimeline.duration === 0 && bgmAudioElement) {
-              globalTimeline.duration = Math.max(this.videoElement.duration, bgmAudioElement.duration);
+            if (globalTimeline.duration === 0 && this.videoElement.duration) {
+              globalTimeline.duration = Math.max(globalTimeline.duration, this.videoElement.duration);
+              if (bgmAudioElement && bgmAudioElement.duration) {
+                globalTimeline.duration = Math.max(globalTimeline.duration, bgmAudioElement.duration);
+              }
+              globalTimeline.endTime = globalTimeline.duration;
+              document.getElementById('end-time').value = globalTimeline.duration;
+              updateTimeDisplay();
             }
           });
           
+          contentDiv.appendChild(this.videoElement);
+          
           if (this.threeContext) {
             this.threeContext.cleanup();
             this.threeContext = null;
@@ -2028,298 +1758,103 @@ reinitializeSplit(container) {
         if (this.videoElement) this.videoElement.volume = vol;
       }
     }
-    function syncTimeline() {
-  if (globalTimeline.isPlaying && bgmAudioElement) {
-    let newTime = bgmAudioElement.currentTime;
-
-    // 範囲制御
-    if (newTime >= globalTimeline.endTime && globalTimeline.endTime > 0) {
-      if (globalTimeline.loopEnabled) {
-        newTime = globalTimeline.startTime;
-        window.seekMedia(newTime);
-      } else {
-        window.pauseMedia();
-        return;
-      }
-    }
-
-    if (newTime < globalTimeline.startTime) {
-      newTime = globalTimeline.startTime;
-      window.seekMedia(newTime);
-    }
-
-    globalTimeline.currentTime = newTime;
-
-    // 同期（ズレた時だけ）
-    panes.forEach(pane => {
-      if (pane.type === 'video' && pane.videoElement) {
-        if (Math.abs(pane.videoElement.currentTime - newTime) > 0.05) {
-          pane.videoElement.currentTime = newTime;
-        }
-      } else if (pane.type === 'vrm' && pane.threeContext) {
-        pane.threeContext.seek(newTime);
-      }
-    });
-
-    updateProgressBar();
-    updateTimeDisplay();
-  }
-
-  requestAnimationFrame(syncTimeline);
-}
-    // BGM読み込み
+    
+    // --- BGM読み込み（エラーハンドリング強化）---
     function loadBGMAudio() {
       bgmAudioElement = new Audio(AUDIO_SRC);
       bgmAudioElement.loop = false;
-      bgmAudioElement.volume = bgmVolume;
+      bgmAudioElement.volume = bgmVolume * globalVolume;
       
-      let isLoaded = false;
+      let loadTimeout = setTimeout(() => {
+        if (!mediaLoadStatus.bgm) {
+          showErrorMessage(`BGMファイルが見つからないか読み込めません: ${AUDIO_SRC}`);
+          closeLoadingOverlay();
+        }
+      }, 5000);
       
-      const checkAndCloseLoading = () => {
-        if (!isLoaded && bgmAudioElement.readyState >= 2 && !isNaN(bgmAudioElement.duration) && isFinite(bgmAudioElement.duration)) {
-          isLoaded = true;
+      bgmAudioElement.addEventListener('canplaythrough', () => {
+        if (!mediaLoadStatus.bgm) {
+          mediaLoadStatus.bgm = true;
+          clearTimeout(loadTimeout);
           globalTimeline.duration = bgmAudioElement.duration;
-          
-          panes.forEach(pane => {
-            if (pane.type === 'video' && pane.videoElement && pane.videoElement.duration) {
-              globalTimeline.duration = Math.max(globalTimeline.duration, pane.videoElement.duration);
-            }
-          });
-          
           globalTimeline.endTime = globalTimeline.duration;
-          
-          if (!isNaN(globalTimeline.duration) && isFinite(globalTimeline.duration)) {
-            document.getElementById('end-time').value = globalTimeline.duration;
-          }
+          document.getElementById('end-time').value = globalTimeline.duration;
           updateTimeDisplay();
-          closeLoadingOverlay();
+          checkAllMediaLoaded();
         }
-      };
-      
-      bgmAudioElement.addEventListener('loadedmetadata', checkAndCloseLoading);
-      bgmAudioElement.addEventListener('canplaythrough', checkAndCloseLoading);
-      
-      setTimeout(() => {
-        if (!isLoaded) {
-          console.warn('音声読み込みが遅延しています。強制的にローディングを終了します。');
-          isLoaded = true;
-          globalTimeline.duration = 0;
-          closeLoadingOverlay();
-        }
-      }, 5000);
+      });
       
       bgmAudioElement.addEventListener('error', (e) => {
         console.error('BGM読み込みエラー:', e);
-        if (!isLoaded) {
-          isLoaded = true;
-          globalTimeline.duration = 0;
-          document.getElementById('end-time').value = 0;
-          closeLoadingOverlay();
-        }
+        showErrorMessage(`BGMの読み込みに失敗しました: ${AUDIO_SRC}`);
+        clearTimeout(loadTimeout);
+        closeLoadingOverlay();
       });
       
+      // BGMのtimeupdateで同期
       bgmAudioElement.addEventListener('timeupdate', () => {
         if (!globalTimeline.isPlaying) return;
-        
-        let newTime = bgmAudioElement.currentTime;
-        
-        // 範囲チェック
-        if (newTime >= globalTimeline.endTime && globalTimeline.endTime > 0) {
-          if (globalTimeline.loopEnabled) {
-            newTime = globalTimeline.startTime;
-            window.seekMedia(newTime);
-          } else {
-            window.pauseMedia();
-            return;
-          }
-        }
-        
-        if (newTime < globalTimeline.startTime && globalTimeline.startTime > 0) {
-          newTime = globalTimeline.startTime;
-          window.seekMedia(newTime);
-        }
-        
-        globalTimeline.currentTime = newTime;
-        updateProgressBar();
-        
-        panes.forEach(pane => {
-          if (pane.type === 'video' && pane.videoElement && Math.abs(pane.videoElement.currentTime - globalTimeline.currentTime) > 0.1) {
-            pane.videoElement.currentTime = globalTimeline.currentTime;
-          } else if (pane.type === 'vrm' && pane.threeContext) {
-            pane.threeContext.seek(globalTimeline.currentTime);
-          }
-        });
+        syncAllMedia();
       });
-    }
-    
-    function setBGMVolume(vol) {
-      bgmVolume = Math.min(1, Math.max(0, vol));
-      if (bgmAudioElement) bgmAudioElement.volume = bgmVolume;
-      document.getElementById('bgm-volume-value').textContent = bgmVolume.toFixed(2);
-    }
-    
-window.playMedia = function() {
-  if (
-    globalTimeline.currentTime >= globalTimeline.endTime ||
-    globalTimeline.currentTime < globalTimeline.startTime
-  ) {
-    window.seekMedia(globalTimeline.startTime);
-  }
-
-  globalTimeline.isPlaying = true;
-
-  panes.forEach(p => p.play());
-
-  if (bgmAudioElement) {
-    bgmAudioElement.currentTime = globalTimeline.currentTime; // 念のため
-    bgmAudioElement.play().catch(e => console.warn('BGM play failed:', e));
-  }
-
-  document.getElementById('play-pause-btn').innerHTML = '...';
-};
-    
-    window.pauseMedia = function() {
-      globalTimeline.isPlaying = false;
-      panes.forEach(p => p.pause());
-      if (bgmAudioElement) bgmAudioElement.pause();
-      document.getElementById('play-pause-btn').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-200v-560l440 280-440 280Z"/></svg>';
-    };
-    
-    window.seekMedia = function(time) {
-      let newTime = Math.min(Math.max(time, 0), globalTimeline.duration);
-      
-      if (globalTimeline.startTime > 0 && newTime < globalTimeline.startTime) {
-        newTime = globalTimeline.startTime;
-      }
-      if (globalTimeline.endTime > 0 && newTime > globalTimeline.endTime) {
-        newTime = globalTimeline.endTime;
-      }
       
-      if (bgmAudioElement) bgmAudioElement.currentTime = newTime;
-      panes.forEach(p => p.seek(newTime));
-      globalTimeline.currentTime = newTime;
-      updateProgressBar();
-      updateTimeDisplay();
-    };
-    
-    function updateProgressBar() {
-      const progress = (globalTimeline.currentTime / globalTimeline.duration) * 100;
-      document.getElementById('progress-bar').style.width = `${progress}%`;
-      
-      if (globalTimeline.startTime > 0) {
-        const startPercent = (globalTimeline.startTime / globalTimeline.duration) * 100;
-        const startMarker = document.getElementById('start-marker');
-        startMarker.style.left = `${startPercent}%`;
-        startMarker.style.display = 'block';
-      } else {
-        document.getElementById('start-marker').style.display = 'none';
-      }
-      
-      if (globalTimeline.endTime > 0 && globalTimeline.endTime < globalTimeline.duration) {
-        const endPercent = (globalTimeline.endTime / globalTimeline.duration) * 100;
-        const endMarker = document.getElementById('end-marker');
-        endMarker.style.left = `${endPercent}%`;
-        endMarker.style.display = 'block';
-      } else {
-        document.getElementById('end-marker').style.display = 'none';
-      }
-    }
-    
-    function updateTimeDisplay() {
-      const current = formatTime(globalTimeline.currentTime);
-      const total = formatTime(globalTimeline.duration);
-      document.getElementById('time-display').textContent = `${current} / ${total}`;
-    }
-    
-    function formatTime(seconds) {
-      const mins = Math.floor(seconds / 60);
-      const secs = (seconds % 60).toFixed(2);
-      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(5, '0')}`;
+      bgmAudioElement.load();
     }
     
-    function applyTimeSettings() {
-      const startTime = parseFloat(document.getElementById('start-time').value);
-      const endTime = parseFloat(document.getElementById('end-time').value);
-      const loopEnabled = document.getElementById('loop').checked;
-      const loopInterval = parseFloat(document.getElementById('loop-interval').value);
-      
-      if (!isNaN(startTime) && startTime >= 0) {
-        globalTimeline.startTime = startTime;
+    function checkAllMediaLoaded() {
+      if (mediaLoadStatus.bgm) {
+        closeLoadingOverlay();
       }
-      if (!isNaN(endTime) && endTime > 0 && endTime <= globalTimeline.duration) {
-        globalTimeline.endTime = endTime;
-      } else if (endTime === 0 || isNaN(endTime)) {
-        globalTimeline.endTime = globalTimeline.duration;
-        document.getElementById('end-time').value = globalTimeline.duration;
-      }
-      
-      globalTimeline.loopEnabled = loopEnabled;
-      globalTimeline.loopInterval = loopInterval;
-      
-      // 現在の時間が範囲外なら調整
-      if (globalTimeline.currentTime < globalTimeline.startTime) {
-        window.seekMedia(globalTimeline.startTime);
-      } else if (globalTimeline.currentTime > globalTimeline.endTime) {
-        window.seekMedia(globalTimeline.startTime);
-      }
-      
-      updateProgressBar();
     }
     
-    function resetToStartTime() {
-      window.seekMedia(globalTimeline.startTime);
-      if (!globalTimeline.isPlaying) {
-        window.playMedia();
+    function closeLoadingOverlay() {
+      const loadingOverlay = document.getElementById('loadingOverlay');
+      if (loadingOverlay && loadingOverlay.style.display !== 'none') {
+        loadingOverlay.style.transition = 'opacity 1s ease-out';
+        loadingOverlay.style.opacity = '0';
+        setTimeout(() => {
+          loadingOverlay.style.display = 'none';
+        }, 1000);
       }
     }
     
-    // プログレスバークリック
-    function setupProgressClick() {
-      const progressContainer = document.getElementById('progress-container');
-      progressContainer.addEventListener('click', (e) => {
-        const rect = progressContainer.getBoundingClientRect();
-        const percent = (e.clientX - rect.left) / rect.width;
-        let newTime = percent * globalTimeline.duration;
-        
-        if (globalTimeline.startTime > 0 && newTime < globalTimeline.startTime) {
-          newTime = globalTimeline.startTime;
-        }
-        if (globalTimeline.endTime > 0 && newTime > globalTimeline.endTime) {
-          newTime = globalTimeline.endTime;
-        }
-        
-        window.seekMedia(newTime);
-      });
-    }
-    
-    // 初期化
-    function init() {
-      const splitContainer = document.getElementById('split-container');
-      const defaultPaneContainer = document.createElement('div');
-      defaultPaneContainer.className = 'split-pane';
-      splitContainer.appendChild(defaultPaneContainer);
-      const pane = new Pane(defaultPaneContainer, 'pane-main');
-      panes.push(pane);
-      
-      loadBGMAudio();
-      setupProgressClick();
-      syncTimeline();
-      
-      // コントロール有効化
-      setTimeout(() => {
-        document.querySelectorAll('#play-pause-btn, #reset-btn, #volume-btn, #volume-slider, #speed-slider, #fullscreen-btn, #start-time, #end-time, #reset-end-time, #loop, #loop-interval, #global-volume, #set-start-time, #set-end-time, #playback-speed, #apply-time-btn, #pip-btn').forEach(el => el.disabled = false);
-      }, 1000);
-      
-      // イベントリスナー
+    function setupEventListeners() {
+      // 再生/一時停止
       document.getElementById('play-pause-btn').addEventListener('click', () => {
-        if (globalTimeline.isPlaying) window.pauseMedia();
-        else window.playMedia();
+        if (globalTimeline.isPlaying) pauseAllMedia();
+        else playAllMedia();
       });
       
+      // リセット
       document.getElementById('reset-btn').addEventListener('click', resetToStartTime);
       
-      document.getElementById('apply-time-btn').addEventListener('click', applyTimeSettings);
+      // 時間設定適用
+      document.getElementById('apply-time-btn').addEventListener('click', () => {
+        const startTime = parseFloat(document.getElementById('start-time').value);
+        const endTime = parseFloat(document.getElementById('end-time').value);
+        const loopEnabled = document.getElementById('loop').checked;
+        
+        if (!isNaN(startTime) && startTime >= 0) {
+          globalTimeline.startTime = startTime;
+        }
+        if (!isNaN(endTime) && endTime > 0 && endTime <= globalTimeline.duration) {
+          globalTimeline.endTime = endTime;
+        } else if (endTime === 0 || isNaN(endTime)) {
+          globalTimeline.endTime = globalTimeline.duration;
+          document.getElementById('end-time').value = globalTimeline.duration;
+        }
+        
+        globalTimeline.loopEnabled = loopEnabled;
+        
+        if (globalTimeline.currentTime < globalTimeline.startTime) {
+          seekAllMedia(globalTimeline.startTime);
+        } else if (globalTimeline.currentTime > globalTimeline.endTime) {
+          seekAllMedia(globalTimeline.startTime);
+        }
+        
+        updateProgressBar();
+      });
       
+      // 現在時間を開始/終了に設定
       document.getElementById('set-start-time').addEventListener('click', () => {
         document.getElementById('start-time').value = globalTimeline.currentTime;
       });
@@ -2336,10 +1871,6 @@ window.playMedia = function() {
         globalTimeline.loopEnabled = e.target.checked;
       });
       
-      document.getElementById('loop-interval').addEventListener('change', (e) => {
-        globalTimeline.loopInterval = parseFloat(e.target.value);
-      });
-      
       // 音量関連
       const volumeSlider = document.getElementById('volume-slider');
       volumeSlider.addEventListener('input', (e) => {
@@ -2350,73 +1881,91 @@ window.playMedia = function() {
       const globalVolumeSlider = document.getElementById('global-volume');
       const globalVolumeValue = document.getElementById('global-volume-value');
       globalVolumeSlider.addEventListener('input', (e) => {
-        const val = parseFloat(e.target.value);
-        const normalized = val / 10;
-        globalVolumeValue.textContent = normalized.toFixed(2);
-        if (bgmAudioElement) bgmAudioElement.volume = normalized * bgmVolume;
+        globalVolume = parseFloat(e.target.value) / 10;
+        globalVolumeValue.textContent = globalVolume.toFixed(2);
+        applyGlobalVolume();
       });
       
-      const playbackSpeedSlider = document.getElementById('playback-speed');
-      const playbackSpeedValue = document.getElementById('playback-speed-value');
-      playbackSpeedSlider.addEventListener('input', (e) => {
-        const rate = parseFloat(e.target.value);
-        playbackSpeedValue.textContent = rate.toFixed(2) + 'x';
-        globalTimeline.playbackRate = rate;
-        if (bgmAudioElement) bgmAudioElement.playbackRate = rate;
-        panes.forEach(pane => pane.setPlaybackRate(rate));
+      const bgmSlider = document.getElementById('bgm-volume-slider');
+      const bgmValue = document.getElementById('bgm-volume-value');
+      bgmSlider.addEventListener('input', (e) => {
+        bgmVolume = parseFloat(e.target.value);
+        bgmValue.textContent = bgmVolume.toFixed(2);
+        applyGlobalVolume();
       });
       
+      // 再生速度
       const speedSlider = document.getElementById('speed-slider');
       const speedValue = document.getElementById('speed-value');
-      speedSlider.addEventListener('input', (e) => {
-        const rate = parseFloat(e.target.value);
-        speedValue.textContent = rate.toFixed(2) + 'x';
+      const playbackSpeedSlider = document.getElementById('playback-speed');
+      const playbackSpeedValue = document.getElementById('playback-speed-value');
+      
+      const updateSpeed = (rate) => {
         globalTimeline.playbackRate = rate;
         if (bgmAudioElement) bgmAudioElement.playbackRate = rate;
         panes.forEach(pane => pane.setPlaybackRate(rate));
-        playbackSpeedSlider.value = rate;
+        speedValue.textContent = rate.toFixed(2) + 'x';
         playbackSpeedValue.textContent = rate.toFixed(2) + 'x';
-      });
+        speedSlider.value = rate;
+        playbackSpeedSlider.value = rate;
+      };
       
-      // BGM音量
-      const bgmSlider = document.getElementById('bgm-volume-slider');
-      bgmSlider.addEventListener('input', (e) => {
-        setBGMVolume(parseFloat(e.target.value));
+      speedSlider.addEventListener('input', (e) => updateSpeed(parseFloat(e.target.value)));
+      playbackSpeedSlider.addEventListener('input', (e) => updateSpeed(parseFloat(e.target.value)));
+      
+      // プログレスバークリック
+      const progressContainer = document.getElementById('progress-container');
+      progressContainer.addEventListener('click', (e) => {
+        const rect = progressContainer.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        let newTime = percent * globalTimeline.duration;
+        
+        if (globalTimeline.startTime > 0 && newTime < globalTimeline.startTime) {
+          newTime = globalTimeline.startTime;
+        }
+        if (globalTimeline.endTime > 0 && newTime > globalTimeline.endTime) {
+          newTime = globalTimeline.endTime;
+        }
+        
+        seekAllMedia(newTime);
       });
-      setBGMVolume(1);
       
       // 全画面
-      document.getElementById('fullscreen-btn').addEventListener('click', () => {
+      const fullscreenBtn = document.getElementById('fullscreen-btn');
+      fullscreenBtn.addEventListener('click', () => {
         const viewingBox = document.getElementById('viewing-box');
-        if (document.fullscreenElement) {
-          document.exitFullscreen();
+        if (!document.fullscreenElement) {
+          viewingBox.requestFullscreen().catch(e => console.warn('Fullscreen failed:', e));
         } else {
-          viewingBox.requestFullscreen();
+          document.exitFullscreen();
         }
       });
       
-      // ピクチャーインピクチャー
-      document.getElementById('pip-btn').addEventListener('click', async () => {
-        const video = panes.find(p => p.type === 'video')?.videoElement;
-        if (video && document.pictureInPictureEnabled) {
+      // ピクチャーインピクチャー（最初の動画ペイン）
+      const pipBtn = document.getElementById('pip-btn');
+      pipBtn.addEventListener('click', async () => {
+        const videoPane = panes.find(p => p.type === 'video' && p.videoElement);
+        if (videoPane && videoPane.videoElement && document.pictureInPictureEnabled) {
           try {
             if (document.pictureInPictureElement) {
               await document.exitPictureInPicture();
             } else {
-              await video.requestPictureInPicture();
+              await videoPane.videoElement.requestPictureInPicture();
             }
           } catch (err) {
             console.warn('PiP failed:', err);
+            showErrorMessage('ピクチャーインピクチャーを開始できませんでした');
           }
+        } else if (!videoPane) {
+          showErrorMessage('ピクチャーインピクチャーを使用するには動画ペインが必要です');
         }
       });
       
-      // タイムマーカードラッグ
-      const markers = document.querySelectorAll('.time-marker');
+      // タイムマーカードラッグ＆ドロップ
       const startTimeInput = document.getElementById('start-time');
       const endTimeInput = document.getElementById('end-time');
       
-      markers.forEach(marker => {
+      const setupDragDrop = (marker) => {
         marker.setAttribute('draggable', 'true');
         marker.addEventListener('dragstart', (e) => {
           e.dataTransfer.setData('text/plain', marker.getAttribute('data-time'));
@@ -2425,7 +1974,9 @@ window.playMedia = function() {
         marker.addEventListener('dragend', () => {
           marker.classList.remove('dragging');
         });
-      });
+      };
+      
+      document.querySelectorAll('.time-marker').forEach(setupDragDrop);
       
       startTimeInput.addEventListener('dragover', (e) => e.preventDefault());
       startTimeInput.addEventListener('drop', (e) => {
@@ -2442,46 +1993,129 @@ window.playMedia = function() {
       });
     }
     
-    function closeLoadingOverlay() {
-      const loadingOverlay = document.getElementById('loadingOverlay');
-      if (loadingOverlay) {
-        loadingOverlay.style.transition = 'opacity 1s ease-out';
-        loadingOverlay.style.opacity = '0';
-        setTimeout(() => {
-          loadingOverlay.style.display = 'none';
-        }, 1000);
+    // --- 初期化 ---
+    function init() {
+      const splitContainer = document.getElementById('split-container');
+      const defaultPaneContainer = document.createElement('div');
+      defaultPaneContainer.className = 'split-pane';
+      splitContainer.appendChild(defaultPaneContainer);
+      const pane = new Pane(defaultPaneContainer, 'pane-main');
+      panes.push(pane);
+      
+      loadBGMAudio();
+      setupEventListeners();
+      
+      // 全体音量の初期値
+      globalVolume = 1.0;
+      applyGlobalVolume();
+      
+      // タイトル設定
+      const urlParams = new URLSearchParams(window.location.search);
+      const titleElem = document.getElementById('title-name');
+      if (titleElem) {
+        titleElem.textContent = urlParams.get('mode') === 't' ? "地球星歌" : "時の旅人";
       }
     }
     
-    window.addEventListener('load', () => {
-      document.getElementById('title-name').textContent = new URLSearchParams(window.location.search).get('mode') === 't' ? "地球星歌" : "時の旅人";
-      init();
-    });
-    
-    document.addEventListener('DOMContentLoaded', () => {
-      const loadingOverlay = document.getElementById('loadingOverlay');
-      if (loadingOverlay) {
-        loadingOverlay.style.display = 'flex';
-        loadingOverlay.style.opacity = '1';
+    // 背景アニメーション（簡易版 - 元のコードから継承）
+    document.addEventListener('DOMContentLoaded', function () {
+      const starCanvas = document.getElementById('starCanvas');
+      const effectCanvas = document.getElementById('effectCanvas');
+      if (!starCanvas || !effectCanvas) return;
+      
+      const starCtx = starCanvas.getContext('2d');
+      const effectCtx = effectCanvas.getContext('2d');
+      const dpr = window.devicePixelRatio || 1;
+      
+      function resizeCanvas() {
+        starCanvas.width = window.innerWidth * dpr;
+        starCanvas.height = window.innerHeight * dpr;
+        effectCanvas.width = window.innerWidth * dpr;
+        effectCanvas.height = window.innerHeight * dpr;
+        starCtx.scale(dpr, dpr);
+        effectCtx.scale(dpr, dpr);
+      }
+      
+      window.addEventListener('resize', resizeCanvas);
+      resizeCanvas();
+      
+      // シンプルな星の描画
+      const stars = [];
+      for (let i = 0; i < 300; i++) {
+        stars.push({
+          x: Math.random() * window.innerWidth,
+          y: Math.random() * window.innerHeight,
+          size: Math.random() * 2 + 0.5,
+          opacity: Math.random() * 0.5 + 0.3
+        });
+      }
+      
+      function drawStars() {
+        starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
+        for (const star of stars) {
+          starCtx.beginPath();
+          starCtx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+          starCtx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
+          starCtx.fill();
+        }
+      }
+      
+      drawStars();
+      
+      const refreshBtn = document.getElementById('refresh-background-btn');
+      if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
+          for (let i = 0; i < stars.length; i++) {
+            stars[i].x = Math.random() * window.innerWidth;
+            stars[i].y = Math.random() * window.innerHeight;
+          }
+          drawStars();
+          refreshBtn.textContent = '更新しました';
+          setTimeout(() => { refreshBtn.textContent = 'おまけ：背景を更新'; }, 1000);
+        });
       }
     });
-  </script>
-  <script>
+    
+    // サービスワーカー
     window.addEventListener('load', async () => {
       const registerBtn = document.getElementById('sw-register-btn');
+      const swStatus = document.getElementById('sw-status');
       if (registerBtn) {
-        registerBtn.disabled = false;
         registerBtn.addEventListener('click', async () => {
+          if (!('serviceWorker' in navigator)) {
+            if (swStatus) swStatus.textContent = 'このブラウザはService Workerをサポートしていません';
+            return;
+          }
           registerBtn.disabled = true;
+          registerBtn.textContent = '登録中...';
           try {
-            await navigator.serviceWorker.register('/sw.js');
+            const registration = await navigator.serviceWorker.register('/sw.js');
+            console.log('ServiceWorker registration successful');
+            if (swStatus) swStatus.textContent = '✅ 登録完了 (オフライン対応)';
             registerBtn.textContent = '登録完了';
           } catch(e) {
-            registerBtn.textContent = '失敗';
+            console.error('ServiceWorker registration failed:', e);
+            if (swStatus) swStatus.textContent = '❌ 登録失敗: sw.jsが見つからない可能性があります';
+            registerBtn.textContent = '再試行';
+            registerBtn.disabled = false;
           }
         });
       }
     });
+    
+    // アプリケーション開始
+    window.addEventListener('load', () => {
+      init();
+    });
+    
+    document.addEventListener('DOMContentLoaded', () => {
+      const loadingOverlay = document.getElementById('loadingOverlay');
+      if (loadingOverlay) {
+        loadingOverlay.style.display = 'flex';
+        loadingOverlay.style.opacity = '1';
+      }
+    });
   </script>
 </body>
+
 </html>