npm - @chocodrop/mcp - Versions diffs - 0.1.0-alpha.0 - Mend

@chocodrop/mcp 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/LICENSE +21 -0
package/README.md +19 -0
package/bin/chocodrop-mcp.js +13 -0
package/package.json +42 -0
package/runtime/.chocodrop-mcp-runtime +1 -0
package/runtime/asset-bridge.js +460 -0
package/runtime/mcp-server.js +107 -0
package/runtime/site/examples/basic/README.md +38 -0
package/runtime/site/examples/basic/index.html +1730 -0
package/runtime/site/examples/bookmarklet-v2.html +141 -0
package/runtime/site/examples/bookmarklet.html +126 -0
package/runtime/site/examples/lofi-room/index.html +2570 -0
package/runtime/site/examples/lofi-room/sandbox-lite.html +124 -0
package/runtime/site/examples/music-garden/index.html +2150 -0
package/runtime/site/examples/pixel-ocean/index.html +1780 -0
package/runtime/site/examples/react-three-fiber/AdvancedExample.jsx +338 -0
package/runtime/site/examples/react-three-fiber/App.jsx +97 -0
package/runtime/site/examples/react-three-fiber/README.md +294 -0
package/runtime/site/examples/react-three-fiber/package.json +25 -0
package/runtime/site/examples/sdk-test/README.md +70 -0
package/runtime/site/examples/space/index.html +1975 -0
package/runtime/site/examples/toy-city/index.html +2288 -0
package/runtime/site/examples/wabi-sabi/index.html +2515 -0
package/runtime/site/getting-started.html +84 -0
package/runtime/site/index.html +1370 -0
package/runtime/site/public/CommandUI.js +6341 -0
package/runtime/site/public/LiveCommandClient.js +432 -0
package/runtime/site/public/SceneManager.js +5493 -0
package/runtime/site/public/bookmarklet.js +206 -0
package/runtime/site/public/bootstrap.js +50 -0
package/runtime/site/public/chocodrop-demo.umd.js +24020 -0
package/runtime/site/public/chocodrop-demo.umd.min.js +24020 -0
package/runtime/site/public/chocodrop.esm.js +2 -0
package/runtime/site/public/html-sandbox/frame.js +865 -0
package/runtime/site/public/icons/icon-192.png +0 -0
package/runtime/site/public/icons/icon-512.png +0 -0
package/runtime/site/public/icons/icon-maskable-512.png +0 -0
package/runtime/site/public/immersive-launcher.js +175 -0
package/runtime/site/public/immersive.html +165 -0
package/runtime/site/public/index.html +1011 -0
package/runtime/site/public/index.js +9 -0
package/runtime/site/public/load-chocodrop.js +25 -0
package/runtime/site/public/load-three.js +26 -0
package/runtime/site/public/manifest.webmanifest +59 -0
package/runtime/site/public/pwa-bootstrap.js +128 -0
package/runtime/site/public/sample-card.svg +15 -0
package/runtime/site/public/service-worker.js +117 -0
package/runtime/site/public/translation-dictionary.js +257 -0
package/runtime/site/public/xr/xr-ui.css +338 -0
package/runtime/site/public/xr-viewer.html +263 -0
package/runtime/site/src/client/local-bridge.js +83 -0

package/runtime/site/examples/wabi-sabi/index.html ADDED Viewed

@@ -0,0 +1,2515 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>侘び寂び - Wabi-Sabi Space | ChocoDrop Demo</title>
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+        }
+    }
+    </script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Yu Gothic', 'Hiragino Sans', sans-serif;
+            background: #fafafa; /* ミニマルな白 */
+        }
+        canvas {
+            display: block;
+        }
+        #info {
+            position: fixed;
+            top: 16px;
+            left: 16px;
+            color: #2d3748;
+            background: rgba(250, 250, 250, 0.85);
+            backdrop-filter: blur(12px) saturate(180%);
+            -webkit-backdrop-filter: blur(12px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            padding: 14px 18px;
+            border-radius: 8px;
+            font-size: 12px;
+            font-weight: 400;
+            z-index: 2000;
+            max-width: 280px;
+            line-height: 1.5;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        #info.hidden {
+            opacity: 0;
+            transform: translateY(-10px);
+            pointer-events: none;
+        }
+        .close-btn {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: none;
+            border: none;
+            font-size: 16px;
+            color: #666;
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: background-color 0.2s ease;
+        }
+        .close-btn:hover {
+            background-color: rgba(30, 30, 30, 0.1);
+        }
+        /* 統合メニュー */
+        .unified-menu {
+            position: fixed;
+            top: 16px;
+            right: 20px;
+            z-index: 1000;
+        }
+        .menu-toggle {
+            background: rgba(99, 102, 241, 0.15);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: #2d3748;
+            padding: 10px 14px;
+            border-radius: 8px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2), 0 2px 6px rgba(0, 0, 0, 0.05);
+            width: 44px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0.8;
+        }
+        .menu-toggle:hover {
+            background: rgba(99, 102, 241, 0.2);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: scale(1.1) translateY(-2px);
+            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3), 0 3px 8px rgba(0, 0, 0, 0.1);
+            opacity: 1;
+        }
+        .menu-dropdown {
+            position: absolute;
+            top: 56px;
+            right: 0;
+            min-width: 220px;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            border: 1px solid rgba(99, 102, 241, 0.2);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+        }
+        .menu-dropdown.active {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        .menu-item {
+            display: block;
+            padding: 12px 16px;
+            color: #2d3748;
+            text-decoration: none;
+            font-size: 13px;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            cursor: pointer;
+            background: none;
+            border-left: none;
+            border-right: none;
+            border-top: none;
+            width: 100%;
+            text-align: left;
+        }
+        .menu-item:last-child {
+            border-bottom: none;
+        }
+        .menu-item:hover {
+            background: rgba(99, 102, 241, 0.08);
+            padding-left: 20px;
+            border-left: 2px solid rgba(99, 102, 241, 0.4);
+        }
+        .menu-item.has-submenu {
+            position: relative;
+            padding: 0;
+            border: none;
+        }
+        .submenu-toggle {
+            display: block;
+            padding: 12px 16px;
+            color: #2d3748;
+            font-size: 13px;
+            background: none;
+            border: none;
+            width: 100%;
+            text-align: left;
+            cursor: pointer;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        }
+        .submenu-toggle:hover {
+            background: rgba(99, 102, 241, 0.08);
+            padding-left: 20px;
+            border-left: 2px solid rgba(99, 102, 241, 0.4);
+        }
+        .submenu {
+            display: none;
+            background: rgba(99, 102, 241, 0.03);
+            border-top: 1px solid rgba(99, 102, 241, 0.1);
+        }
+        .submenu.active {
+            display: block;
+        }
+        .submenu .menu-item {
+            padding-left: 32px;
+            font-size: 12px;
+        }
+        .submenu .menu-item:hover {
+            padding-left: 36px;
+            background: rgba(99, 102, 241, 0.12);
+        }
+        /* メニューアイコンのバウンスアニメーション */
+        .menu-icon {
+            display: inline-block;
+            animation: menu-bounce 2s ease-in-out infinite;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            text-shadow: 0 0 10px currentColor;
+        }
+        .menu-icon:hover {
+            transform: scale(1.4);
+            animation: menu-bounce-fast 0.8s ease-in-out infinite;
+        }
+        @keyframes menu-bounce {
+            0%, 100% {
+                filter: brightness(1) drop-shadow(0 0 8px currentColor);
+                transform: scale(1) translateY(0px);
+            }
+            25% {
+                filter: brightness(1.3) drop-shadow(0 0 15px currentColor);
+                transform: scale(1.1) translateY(-4px);
+            }
+            50% {
+                filter: brightness(1.5) drop-shadow(0 0 20px currentColor);
+                transform: scale(1.15) translateY(-8px);
+            }
+            75% {
+                filter: brightness(1.3) drop-shadow(0 0 15px currentColor);
+                transform: scale(1.1) translateY(-4px);
+            }
+        }
+        @keyframes menu-bounce-fast {
+            0%, 100% {
+                filter: brightness(1.4) drop-shadow(0 0 15px currentColor);
+                transform: translateY(0px);
+            }
+            50% {
+                filter: brightness(1.8) drop-shadow(0 0 25px currentColor);
+                transform: translateY(-12px);
+            }
+        }
+        #info strong {
+            font-size: 14px;
+            font-weight: 600;
+            color: #1a1a1a;
+            display: block;
+            margin-bottom: 10px;
+            text-align: center;
+            letter-spacing: 0.5px;
+        }
+        #info code {
+            background: rgba(30, 30, 30, 0.08);
+            color: #2d3748;
+            padding: 2px 5px;
+            border-radius: 3px;
+            font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+            font-size: 11px;
+        }
+        .controls {
+            margin-top: 8px;
+            padding-top: 8px;
+            border-top: 1px solid rgba(30, 30, 30, 0.15);
+            font-size: 11px;
+        }
+        .control-item {
+            margin: 4px 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .key {
+            background: rgba(30, 30, 30, 0.1);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-weight: 500;
+            min-width: fit-content;
+        }
+        /* ChocoDrop 要素を墨絵風にカスタマイズ */
+        .chocodrop-media {
+            border: 2px solid rgba(30, 30, 30, 0.8) !important;
+            background: rgba(250, 250, 250, 0.9) !important;
+            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) !important;
+        }
+        .chocodrop-overlay {
+            background: rgba(30, 30, 30, 0.8) !important;
+            border: none !important;
+        }
+        .chocodrop-button {
+            background: rgba(30, 30, 30, 0.9) !important;
+            color: white !important;
+            border: 1px solid rgba(30, 30, 30, 0.9) !important;
+        }
+        /* オレンジ色の要素を完全に除去 */
+        .chocodrop-frame,
+        .chocodrop-selection-box,
+        .chocodrop-resize-handle {
+            border-color: rgba(30, 30, 30, 0.8) !important;
+            background-color: transparent !important;
+        }
+        .chocodrop-highlight {
+            background-color: rgba(30, 30, 30, 0.1) !important;
+            border-color: rgba(30, 30, 30, 0.8) !important;
+        }
+        /* 全ての赤/オレンジ系の色を強制的に墨色に変更 */
+        * {
+            --chocodrop-primary-color: rgba(30, 30, 30, 0.9) !important;
+            --chocodrop-accent-color: rgba(30, 30, 30, 0.8) !important;
+        }
+        div[style*="background-color: rgb(255"],
+        div[style*="background-color: #ff"],
+        div[style*="background: rgb(255"],
+        div[style*="background: #ff"],
+        div[style*="border-color: rgb(255"],
+        div[style*="border-color: #ff"] {
+            background-color: rgba(30, 30, 30, 0.1) !important;
+            border-color: rgba(30, 30, 30, 0.8) !important;
+        }
+        /* ChocoDrop で使われる可能性のある全ての要素 */
+        div, span, button {
+            filter: none !important;
+        }
+        /* 世界選択ドロップダウン */
+        .world-selector {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            z-index: 100;
+        }
+        .world-toggle-btn {
+            background: rgba(250, 250, 250, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            color: #2d3748;
+            padding: 10px 16px;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .world-toggle-btn:hover {
+            background: rgba(255, 255, 255, 0.95);
+            border-color: rgba(255, 255, 255, 0.6);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.06);
+        }
+        .world-dropdown {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            margin-bottom: 8px;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
+            min-width: 200px;
+            max-height: 400px;
+            overflow-y: auto;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(10px);
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .world-dropdown.active {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        .world-item {
+            display: block;
+            padding: 12px 16px;
+            color: #2d3748;
+            text-decoration: none;
+            font-size: 13px;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            position: relative;
+        }
+        .world-item:last-child {
+            border-bottom: none;
+        }
+        .world-item:hover {
+            background: rgba(255, 255, 255, 0.6);
+            padding-left: 22px;
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+        }
+        .world-item:first-child {
+            border-radius: 12px 12px 0 0;
+        }
+        .world-item:last-child {
+            border-radius: 0 0 12px 12px;
+        }
+        .world-dropdown::-webkit-scrollbar {
+            width: 6px;
+        }
+        .world-dropdown::-webkit-scrollbar-track {
+            background: rgba(30, 30, 30, 0.05);
+            border-radius: 4px;
+        }
+        .world-dropdown::-webkit-scrollbar-thumb {
+            background: rgba(30, 30, 30, 0.2);
+            border-radius: 4px;
+        }
+        .world-dropdown::-webkit-scrollbar-thumb:hover {
+            background: rgba(30, 30, 30, 0.3);
+        }
+        /* より限定的なスタイル上書き */
+        .chocodrop-container * {
+            background-color: rgba(250, 250, 250, 0.9) !important;
+            border-color: rgba(30, 30, 30, 0.8) !important;
+        }
+        /* 🖤 墨モード - デフォルトはカラー表示 */
+        canvas {
+            /* mix-blend-modeを削除してThree.jsの描画を正常に */
+            background: transparent !important;
+        }
+        /* モノクロ変換用のクラス（ユーザーが要求した時のみ適用） */
+        .ink-mode .chocodrop-media,
+        .ink-mode img,
+        .ink-mode video {
+            mix-blend-mode: multiply !important;
+            filter: contrast(1.2) saturate(0) !important;
+            transition: filter 1s ease-in-out;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation Links (hidden - now in unified menu) -->
+    <div class="navigation" style="display: none;">
+        <a href="../../index.html" class="nav-link">🏠 Home</a>
+        <a href="https://github.com/nyukicorn/chocodrop" class="nav-link" target="_blank">📦 GitHub</a>
+    </div>
+    <!-- Main Info Panel -->
+    <div id="info">
+        <button class="close-btn" onclick="hideInfoPanel()">×</button>
+        <strong>🖤 侘び寂びの世界へようこそ</strong>
+        <div style="font-size: 11px; opacity: 0.9; margin-bottom: 12px; line-height: 1.6; text-align: center; font-style: italic;">
+            音楽に共鳴する、墨が紡ぐ不完全な美の世界
+        </div>
+        💡 基本操作:<br>
+        1. 動画や画像をインポートしてみて！<br>
+        2. 🎵 音楽入り動画をやってみて！墨絵に魂が宿ります<br>
+        3. 視点操作: ChocoDropを最小化してドラッグ<br>
+        4. 🎨モノクロ変換をやってみて！(対象を選択 → 「モノクロに変更」)<br>
+        <div class="controls">
+            <div class="control-item">
+                <span class="key">@</span>
+                <span>ChocoDrop / ちょこドロップ起動</span>
+            </div>
+            <div class="control-item">
+                <span class="key">🍫</span>
+                <span>右下ボタンからも起動可</span>
+            </div>
+        </div>
+    </div>
+    <!-- 世界選択ドロップダウン (hidden - now in unified menu) -->
+    <div class="world-selector" style="display: none;">
+        <button class="world-toggle-btn" id="worldToggle">
+            <span>🌍</span>
+            <span>世界一覧</span>
+            <span style="font-size: 10px; margin-left: 2px;">▼</span>
+        </button>
+        <div class="world-dropdown" id="worldDropdown">
+            <a href="../basic/index.html" class="world-item">🍫 はじまりの国</a>
+            <a href="../pixel-ocean/index.html" class="world-item">🌊 海底世界</a>
+            <a href="../music-garden/index.html" class="world-item">🌸 硝子の花</a>
+            <a href="../space/index.html" class="world-item">🌌 宇宙空間</a>
+            <a href="../toy-city/index.html" class="world-item">🎡 AI遊園地</a>
+        </div>
+    </div>
+    <!-- 統合メニュー -->
+    <div class="unified-menu">
+        <button class="menu-toggle" id="unifiedMenuToggle" aria-label="Menu">☰</button>
+        <div class="menu-dropdown" id="unifiedMenuDropdown">
+            <button class="menu-item" id="showInfoBtn"><span class="menu-icon">📖</span> このワールドについて</button>
+            <div class="menu-item has-submenu">
+                <button class="submenu-toggle" id="worldsMenuToggle"><span class="menu-icon">🌍</span> 世界選択 <span style="font-size: 10px;">▼</span></button>
+                <div class="submenu" id="worldsSubmenu">
+                    <a href="../basic/index.html" class="menu-item"><span class="menu-icon">🍫</span> はじまりの国</a>
+                    <a href="../pixel-ocean/index.html" class="menu-item"><span class="menu-icon">🌊</span> 海底世界</a>
+                    <a href="../music-garden/index.html" class="menu-item"><span class="menu-icon">🌸</span> 硝子の花</a>
+                    <a href="../space/index.html" class="menu-item"><span class="menu-icon">🌌</span> 宇宙空間</a>
+                    <a href="../toy-city/index.html" class="menu-item"><span class="menu-icon">🎡</span> AI遊園地</a>
+                    <a href="index.html" class="menu-item"><span class="menu-icon">🖤</span> 侘び寂びの世界（現在地）</a>
+                </div>
+            </div>
+            <a href="../../index.html" class="menu-item"><span class="menu-icon">🏠</span> Home</a>
+            <a href="https://github.com/nyukicorn/chocodrop" class="menu-item" target="_blank"><span class="menu-icon">🔗</span> GitHub</a>
+            <button class="menu-item" id="vrMenuButton"><span class="menu-icon">🥽</span> VR</button>
+            <button class="menu-item" id="arMenuButton"><span class="menu-icon">🥽</span> AR</button>
+        </div>
+    </div>
+    <script type="module">
+    import ensureChocoDrop from '../../public/load-chocodrop.js';
+    // 🎯 情報パネルをローダー前に初期化（早期に閉じられるように）
+    let autoHideTimer = null;
+    const getInfoPanel = () => document.getElementById('info');
+    const clearInfoPanelAutoHide = () => {
+        if (autoHideTimer) {
+            clearTimeout(autoHideTimer);
+            autoHideTimer = null;
+        }
+    };
+    const scheduleInfoPanelAutoHide = () => {
+        clearInfoPanelAutoHide();
+        autoHideTimer = window.setTimeout(() => {
+            if (typeof window.hideInfoPanel === 'function') {
+                window.hideInfoPanel();
+            }
+        }, 30000);
+    };
+    window.scheduleInfoPanelAutoHide = scheduleInfoPanelAutoHide;
+    window.hideInfoPanel = function hideInfoPanel() {
+        const infoPanel = getInfoPanel();
+        if (!infoPanel) {
+            clearInfoPanelAutoHide();
+            return;
+        }
+        infoPanel.classList.add('hidden');
+        window.setTimeout(() => {
+            if (infoPanel.classList.contains('hidden')) {
+                infoPanel.style.display = 'none';
+            }
+        }, 300);
+        clearInfoPanelAutoHide();
+    };
+    window.showInfoPanel = function showInfoPanel() {
+        const infoPanel = getInfoPanel();
+        if (!infoPanel) {
+            return;
+        }
+        infoPanel.style.display = 'block';
+        window.requestAnimationFrame(() => {
+            infoPanel.classList.remove('hidden');
+        });
+        scheduleInfoPanelAutoHide();
+    };
+    (async () => {
+        await ensureChocoDrop();
+        const THREE = window.THREE;
+        const ChocoDrop = window.ChocoDrop;
+        // 統合メニューの制御
+        (function() {
+            const menuToggle = document.getElementById('unifiedMenuToggle');
+            const menuDropdown = document.getElementById('unifiedMenuDropdown');
+            const worldsMenuToggle = document.getElementById('worldsMenuToggle');
+            const worldsSubmenu = document.getElementById('worldsSubmenu');
+            const showInfoBtn = document.getElementById('showInfoBtn');
+            const infoPanel = document.getElementById('info');
+            // 初回訪問チェック - localStorage使用
+            const FIRST_VISIT_KEY = 'wabisabi_visited';
+            const hasVisited = localStorage.getItem(FIRST_VISIT_KEY);
+            if (!hasVisited) {
+                // 初回訪問時は情報パネルを表示
+                if (infoPanel) {
+                    infoPanel.style.display = 'block';
+                }
+                localStorage.setItem(FIRST_VISIT_KEY, 'true');
+            } else {
+                // 2回目以降は非表示
+                if (infoPanel) {
+                    infoPanel.style.display = 'none';
+                }
+            }
+            // 統合メニューのトグル
+            if (menuToggle && menuDropdown) {
+                menuToggle.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    menuDropdown.classList.toggle('active');
+                });
+                // 外側クリックで閉じる
+                document.addEventListener('click', (e) => {
+                    if (!menuToggle.contains(e.target) && !menuDropdown.contains(e.target)) {
+                        menuDropdown.classList.remove('active');
+                        // サブメニューも閉じる
+                        if (worldsSubmenu) {
+                            worldsSubmenu.classList.remove('active');
+                        }
+                    }
+                });
+                // Escキーで閉じる
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        menuDropdown.classList.remove('active');
+                        if (worldsSubmenu) {
+                            worldsSubmenu.classList.remove('active');
+                        }
+                    }
+                });
+            }
+            // 世界選択サブメニューのトグル
+            if (worldsMenuToggle && worldsSubmenu) {
+                worldsMenuToggle.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    worldsSubmenu.classList.toggle('active');
+                });
+            }
+            // 情報パネル表示ボタン
+            if (showInfoBtn) {
+                showInfoBtn.addEventListener('click', () => {
+                    // グローバルに定義された showInfoPanel() を呼び出す
+                    if (typeof showInfoPanel === 'function') {
+                        showInfoPanel();
+                    } else {
+                        // フォールバック: 直接表示
+                        const panel = document.getElementById('info');
+                        if (panel) {
+                            panel.style.display = 'block';
+                            panel.classList.remove('hidden');
+                        }
+                    }
+                    menuDropdown.classList.remove('active');
+                });
+            }
+            // VR/ARボタンは後でThree.jsのrendererと連携
+            // グローバル変数として保存
+            window.unifiedMenuVRButton = document.getElementById('vrMenuButton');
+            window.unifiedMenuARButton = document.getElementById('arMenuButton');
+        })();
+    })(); // Close async IIFE
+    </script>
+    <!-- VR/AR Button inline implementation -->
+    <script>
+        // VRButton implementation
+        const VRButton = {
+            createButton: function(renderer) {
+                const button = document.createElement('button');
+                function showEnterVR() {
+                    button.style.display = '';
+                    button.style.cursor = 'pointer';
+                    button.style.left = 'calc(50% - 50px)';
+                    button.style.width = '100px';
+                    button.textContent = 'ENTER VR';
+                    button.onmouseenter = function() { button.style.opacity = '1.0'; };
+                    button.onmouseleave = function() { button.style.opacity = '0.5'; };
+                    button.onclick = function() {
+                        const session = renderer.xr.getSession();
+                        if (session) {
+                            session.end();
+                        } else {
+                            navigator.xr.requestSession('immersive-vr', {
+                                optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking']
+                            }).then(session => {
+                                renderer.xr.setSession(session);
+                                button.textContent = 'EXIT VR';
+                                session.addEventListener('end', () => {
+                                    button.textContent = 'ENTER VR';
+                                });
+                            }).catch(err => {
+                                console.error('VR session failed:', err);
+                            });
+                        }
+                    };
+                }
+                function showWebXRNotFound() {
+                    button.style.display = '';
+                    button.style.cursor = 'auto';
+                    button.style.left = 'calc(50% - 75px)';
+                    button.style.width = '150px';
+                    button.textContent = 'VR NOT SUPPORTED';
+                    button.onmouseenter = null;
+                    button.onmouseleave = null;
+                    button.onclick = null;
+                }
+                button.style.position = 'absolute';
+                button.style.bottom = '20px';
+                button.style.padding = '12px 6px';
+                button.style.border = '1px solid #fff';
+                button.style.borderRadius = '4px';
+                button.style.background = 'rgba(0,0,0,0.1)';
+                button.style.color = '#fff';
+                button.style.font = 'normal 13px sans-serif';
+                button.style.textAlign = 'center';
+                button.style.opacity = '0.5';
+                button.style.outline = 'none';
+                button.style.zIndex = '999';
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                        supported ? showEnterVR() : showWebXRNotFound();
+                    });
+                } else {
+                    showWebXRNotFound();
+                }
+                return button;
+            }
+        };
+        // ARButton implementation
+        const ARButton = {
+            createButton: function(renderer, options) {
+                const button = document.createElement('button');
+                function showEnterAR() {
+                    button.style.display = '';
+                    button.style.cursor = 'pointer';
+                    button.style.left = 'calc(50% - 50px)';
+                    button.style.width = '100px';
+                    button.textContent = 'ENTER AR';
+                    button.onmouseenter = function() { button.style.opacity = '1.0'; };
+                    button.onmouseleave = function() { button.style.opacity = '0.5'; };
+                    button.onclick = function() {
+                        const session = renderer.xr.getSession();
+                        if (session) {
+                            session.end();
+                        } else {
+                            navigator.xr.requestSession('immersive-ar', {
+                                optionalFeatures: ['hit-test', 'dom-overlay', 'local-floor'],
+                                domOverlay: options?.domOverlay || { root: document.body }
+                            }).then(session => {
+                                renderer.xr.setSession(session);
+                                button.textContent = 'EXIT AR';
+                                session.addEventListener('end', () => {
+                                    button.textContent = 'ENTER AR';
+                                });
+                            }).catch(err => {
+                                console.error('AR session failed:', err);
+                                alert('AR not supported: ' + err.message);
+                            });
+                        }
+                    };
+                }
+                function showWebXRNotFound() {
+                    button.style.display = '';
+                    button.style.cursor = 'auto';
+                    button.style.left = 'calc(50% - 75px)';
+                    button.style.width = '150px';
+                    button.textContent = 'AR NOT SUPPORTED';
+                    button.onmouseenter = null;
+                    button.onmouseleave = null;
+                    button.onclick = null;
+                }
+                button.style.position = 'absolute';
+                button.style.bottom = '70px';
+                button.style.padding = '12px 6px';
+                button.style.border = '1px solid #fff';
+                button.style.borderRadius = '4px';
+                button.style.background = 'rgba(0,0,0,0.1)';
+                button.style.color = '#fff';
+                button.style.font = 'normal 13px sans-serif';
+                button.style.textAlign = 'center';
+                button.style.opacity = '0.5';
+                button.style.outline = 'none';
+                button.style.zIndex = '999';
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                        supported ? showEnterAR() : showWebXRNotFound();
+                    });
+                } else {
+                    showWebXRNotFound();
+                }
+                return button;
+            }
+        };
+        console.log('✅ VRButton/ARButton inline implementation loaded');
+    </script>
+    <script type="module">
+    import ensureChocoDrop from '../../public/load-chocodrop.js';
+    (async () => {
+        await ensureChocoDrop();
+        const THREE = window.THREE;
+        const ChocoDrop = window.ChocoDrop;
+        // Three.js 基本設定
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: false,  // 透明背景を無効化
+            powerPreference: "default"
+        });
+        renderer.setClearColor(0xfafafa, 1);  // 明確に背景色を設定
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        renderer.xr.enabled = true; // ★ VR/AR有効化
+        document.body.appendChild(renderer.domElement);
+        // ★ WebXRサポートのデバッグ情報
+        console.log('🥽 WebXR Debug Info:');
+        console.log('- navigator.xr:', !!navigator.xr);
+        console.log('- isSecureContext:', window.isSecureContext);
+        if (navigator.xr) {
+            navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                console.log('- immersive-vr supported:', supported);
+            });
+            navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                console.log('- immersive-ar supported:', supported);
+            });
+        }
+        // ★ VR/ARボタンを統合メニューと連携（bodyには追加しない）
+        if (typeof VRButton !== 'undefined' && window.unifiedMenuVRButton) {
+            console.log('✅ VRButton script loaded - connecting to unified menu');
+            // VRセッション開始関数を作成
+            function startVRSession() {
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                        if (supported) {
+                            const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'] };
+                            navigator.xr.requestSession('immersive-vr', sessionInit).then(session => {
+                                session.addEventListener('end', () => {
+                                    renderer.xr.setSession(null);
+                                });
+                                renderer.xr.setSession(session);
+                            });
+                        } else {
+                            console.log('VR not supported on this device');
+                            // NOT SUPPORTEDメッセージは表示しない（静かに失敗）
+                        }
+                    });
+                }
+            }
+            window.unifiedMenuVRButton.onclick = startVRSession;
+            // サポートチェック - 未サポートの場合はボタンを非表示に
+            if ('xr' in navigator) {
+                navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+                    if (!supported) {
+                        window.unifiedMenuVRButton.style.display = 'none';
+                    }
+                });
+            } else {
+                window.unifiedMenuVRButton.style.display = 'none';
+            }
+        } else {
+            console.log('❌ VRButton script not loaded or menu button not found');
+            if (window.unifiedMenuVRButton) {
+                window.unifiedMenuVRButton.style.display = 'none';
+            }
+        }
+        if (typeof ARButton !== 'undefined' && window.unifiedMenuARButton) {
+            console.log('✅ ARButton script loaded - connecting to unified menu');
+            // ARセッション開始関数を作成
+            function startARSession() {
+                if ('xr' in navigator) {
+                    navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                        if (supported) {
+                            const sessionInit = {
+                                requiredFeatures: ['hit-test'],
+                                optionalFeatures: ['dom-overlay'],
+                                domOverlay: { root: document.body }
+                            };
+                            navigator.xr.requestSession('immersive-ar', sessionInit).then(session => {
+                                session.addEventListener('end', () => {
+                                    renderer.xr.setSession(null);
+                                });
+                                renderer.xr.setSession(session);
+                            });
+                        } else {
+                            console.log('AR not supported on this device');
+                            // NOT SUPPORTEDメッセージは表示しない（静かに失敗）
+                        }
+                    });
+                }
+            }
+            window.unifiedMenuARButton.onclick = startARSession;
+            // サポートチェック - 未サポートの場合はボタンを非表示に
+            if ('xr' in navigator) {
+                navigator.xr.isSessionSupported('immersive-ar').then(supported => {
+                    if (!supported) {
+                        window.unifiedMenuARButton.style.display = 'none';
+                    }
+                });
+            } else {
+                window.unifiedMenuARButton.style.display = 'none';
+            }
+        } else {
+            console.log('❌ ARButton script not loaded or menu button not found');
+            if (window.unifiedMenuARButton) {
+                window.unifiedMenuARButton.style.display = 'none';
+            }
+        }
+        // 🎨 シンプルな白い空間（霧なし）
+        function createMinimalBackground() {
+            // シンプルな白い背景色のみ
+            scene.background = new THREE.Color(0xfafafa);
+            // 霧は削除（墨雲が見えなくなるため）
+        }
+        // 🖌️ シンプルな墨風スプライト作成
+        function createSimpleInk(type, x = 0, y = 0, z = 0) {
+            const canvas = document.createElement('canvas');
+            canvas.width = 256;
+            canvas.height = 256;
+            const ctx = canvas.getContext('2d');
+            // 白背景（墨モードで黒になる）
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // 墨の流れと塊を描画
+            ctx.strokeStyle = 'black';
+            ctx.fillStyle = 'black';
+            if (type.includes('flow')) {
+                // 🌊 流れる線の集合（Image #1のような）
+                ctx.lineWidth = 2;
+                for (let i = 0; i < 15; i++) {
+                    ctx.beginPath();
+                    ctx.moveTo(Math.random() * 50, Math.random() * 256);
+                    ctx.bezierCurveTo(
+                        Math.random() * 256, Math.random() * 256,
+                        Math.random() * 256, Math.random() * 256,
+                        200 + Math.random() * 56, Math.random() * 256
+                    );
+                    ctx.stroke();
+                }
+            } else if (type.includes('blob')) {
+                // 🖤 濃い黒い塊（Image #2のような）
+                const numBlobs = 3;
+                for (let i = 0; i < numBlobs; i++) {
+                    ctx.beginPath();
+                    const centerX = 60 + Math.random() * 136;
+                    const centerY = 60 + Math.random() * 136;
+                    const size = 30 + Math.random() * 40;
+                    // 不規則な形の塊
+                    ctx.moveTo(centerX, centerY);
+                    for (let j = 0; j < 8; j++) {
+                        const angle = (j / 8) * Math.PI * 2;
+                        const radius = size * (0.7 + Math.random() * 0.6);
+                        const x = centerX + Math.cos(angle) * radius;
+                        const y = centerY + Math.sin(angle) * radius;
+                        ctx.lineTo(x, y);
+                    }
+                    ctx.closePath();
+                    ctx.fill();
+                }
+            }
+            const texture = new THREE.CanvasTexture(canvas);
+            const spriteMaterial = new THREE.SpriteMaterial({
+                map: texture,
+                transparent: false // 墨モードなので透明度不要
+            });
+            const sprite = new THREE.Sprite(spriteMaterial);
+            sprite.scale.set(6, 6, 1);
+            sprite.position.set(x, y, z);
+            // アニメーション用データ
+            sprite.userData = {
+                originalY: y,
+                floatSpeed: 0.001,
+                rotationSpeed: 0.0005,
+                floatAmplitude: 2,
+                phase: Math.random() * Math.PI * 2
+            };
+            return sprite;
+        }
+        // 🌿 墨の塵エフェクト（下部）
+        function createInkDust() {
+            const dustGroup = new THREE.Group();
+            // 墨の塵パーティクル
+            const dustGeometry = new THREE.BufferGeometry();
+            const dustCount = 200;
+            const positions = new Float32Array(dustCount * 3);
+            const colors = new Float32Array(dustCount * 3);
+            const sizes = new Float32Array(dustCount);
+            for (let i = 0; i < dustCount; i++) {
+                const i3 = i * 3;
+                // 下部に配置
+                positions[i3] = (Math.random() - 0.5) * 30;
+                positions[i3 + 1] = -10 + Math.random() * 2;
+                positions[i3 + 2] = (Math.random() - 0.5) * 10;
+                // 墨の濃淡
+                const darkness = 0.1 + Math.random() * 0.4;
+                colors[i3] = darkness;
+                colors[i3 + 1] = darkness;
+                colors[i3 + 2] = darkness;
+                sizes[i] = Math.random() * 3 + 1;
+            }
+            dustGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            dustGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            dustGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+            const dustMaterial = new THREE.PointsMaterial({
+                size: 2,
+                sizeAttenuation: true,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.5,
+                blending: THREE.MultiplyBlending
+            });
+            const dust = new THREE.Points(dustGeometry, dustMaterial);
+            dustGroup.add(dust);
+            // 墨の塵のパルス用データ
+            dustGroup.userData = {
+                pulseSpeed: 0.002,
+                time: 0
+            };
+            return dustGroup;
+        }
+        // 🍂 墨の葉パーティクル
+        function createInkLeaves() {
+            const leafGeometry = new THREE.BufferGeometry();
+            const leafCount = 8; // 少し増やす
+            const positions = new Float32Array(leafCount * 3);
+            const colors = new Float32Array(leafCount * 3);
+            for (let i = 0; i < leafCount; i++) {
+                const i3 = i * 3;
+                positions[i3] = (Math.random() - 0.5) * 30;
+                positions[i3 + 1] = 10 + Math.random() * 10;
+                positions[i3 + 2] = (Math.random() - 0.5) * 20;
+                // 墨の濃淡
+                const darkness = 0.1 + Math.random() * 0.3;
+                colors[i3] = darkness;
+                colors[i3 + 1] = darkness;
+                colors[i3 + 2] = darkness;
+            }
+            leafGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            leafGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            const leafMaterial = new THREE.PointsMaterial({
+                size: 6,
+                sizeAttenuation: true,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.MultiplyBlending
+            });
+            const leaves = new THREE.Points(leafGeometry, leafMaterial);
+            // 落下アニメーション用
+            leaves.userData = {
+                fallSpeed: 0.008,
+                swaySpeed: 0.002,
+                time: 0
+            };
+            return leaves;
+        }
+        // 削除 - 桜の花びらパーティクル
+        function createSakuraPetals_removed() {
+            const petalCount = 20;
+            const petalsGroup = new THREE.Group();
+            // 花びらのテクスチャを作成
+            const canvas = document.createElement('canvas');
+            canvas.width = 64;
+            canvas.height = 64;
+            const ctx = canvas.getContext('2d');
+            // 花びらの形を描画
+            ctx.fillStyle = '#ffb7c5';
+            ctx.beginPath();
+            ctx.moveTo(32, 10);
+            ctx.bezierCurveTo(20, 20, 20, 40, 32, 54);
+            ctx.bezierCurveTo(44, 40, 44, 20, 32, 10);
+            ctx.fill();
+            const texture = new THREE.CanvasTexture(canvas);
+            for (let i = 0; i < petalCount; i++) {
+                const spriteMaterial = new THREE.SpriteMaterial({
+                    map: texture,
+                    transparent: true,
+                    opacity: 0.8,
+                    rotation: Math.random() * Math.PI
+                });
+                const petal = new THREE.Sprite(spriteMaterial);
+                petal.scale.set(1, 1.2, 1);
+                // ランダムな開始位置
+                petal.position.set(
+                    (Math.random() - 0.5) * 60,
+                    15 + Math.random() * 20,
+                    (Math.random() - 0.5) * 40
+                );
+                // アニメーション用データ
+                petal.userData = {
+                    velocity: new THREE.Vector3(
+                        (Math.random() - 0.5) * 0.02,
+                        -0.01 - Math.random() * 0.01,
+                        (Math.random() - 0.5) * 0.02
+                    ),
+                    rotationSpeed: (Math.random() - 0.5) * 0.01,
+                    swayPhase: Math.random() * Math.PI * 2,
+                    swaySpeed: 0.002 + Math.random() * 0.002,
+                    swayAmplitude: 0.02 + Math.random() * 0.02
+                };
+                petalsGroup.add(petal);
+            }
+            return petalsGroup;
+        }
+        // 🌟 墨の光点エフェクト
+        function createInkSpirits() {
+            const spiritsGroup = new THREE.Group();
+            const spiritCount = 8;
+            for (let i = 0; i < spiritCount; i++) {
+                const geometry = new THREE.SphereGeometry(0.15, 4, 4);
+                const material = new THREE.MeshBasicMaterial({
+                    color: 0x333333,
+                    transparent: true,
+                    opacity: 0.6
+                });
+                const spirit = new THREE.Mesh(geometry, material);
+                // ランダムな位置
+                spirit.position.set(
+                    (Math.random() - 0.5) * 50,
+                    Math.random() * 10 - 5,
+                    (Math.random() - 0.5) * 40
+                );
+                // 薄い光（モノクロ）
+                const light = new THREE.PointLight(0xffffff, 0.2, 3);
+                light.position.copy(spirit.position);
+                spiritsGroup.add(light);
+                // アニメーション用データ
+                spirit.userData = {
+                    light: light,
+                    phase: Math.random() * Math.PI * 2,
+                    moveSpeed: 0.001 + Math.random() * 0.001,
+                    glowSpeed: 0.002 + Math.random() * 0.003,
+                    wanderRadius: 10 + Math.random() * 10,
+                    originalPos: spirit.position.clone()
+                };
+                spiritsGroup.add(spirit);
+            }
+            return spiritsGroup;
+        }
+        // シーン構築
+        createMinimalBackground();
+        // 🌫️ 星雲エフェクトベースの墨雲
+        function createInkNebula(x, y, z, intensity = 1.0) {
+            const nebulaGroup = new THREE.Group();
+            // ☁️ 墨雲用のキャンバステクスチャ作成
+            function createInkTexture(size = 512) {
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+                const context = canvas.getContext('2d');
+                // 白背景
+                context.fillStyle = 'white';
+                context.fillRect(0, 0, size, size);
+                // 墨のグラデーション（より薄く、自然に）
+                const gradient = context.createRadialGradient(
+                    size/2, size/2, 0,
+                    size/2, size/2, size/2
+                );
+                gradient.addColorStop(0, 'rgba(0,0,0,0.3)');
+                gradient.addColorStop(0.3, 'rgba(0,0,0,0.2)');
+                gradient.addColorStop(0.7, 'rgba(0,0,0,0.05)');
+                gradient.addColorStop(1, 'rgba(0,0,0,0)');
+                context.fillStyle = gradient;
+                context.fillRect(0, 0, size, size);
+                // 墨の有機的な滲み
+                for (let i = 0; i < 30; i++) {
+                    const x = Math.random() * size;
+                    const y = Math.random() * size;
+                    const radius = Math.random() * size * 0.2;
+                    const opacity = Math.random() * 0.3;
+                    const grad = context.createRadialGradient(x, y, 0, x, y, radius);
+                    grad.addColorStop(0, `rgba(0,0,0,${opacity})`);
+                    grad.addColorStop(1, 'rgba(0,0,0,0)');
+                    context.fillStyle = grad;
+                    context.fillRect(0, 0, size, size);
+                }
+                return new THREE.CanvasTexture(canvas);
+            }
+            const inkTexture = createInkTexture();
+            // 🌫️ 複数レイヤーの墨雲スプライト
+            for (let layer = 0; layer < 3; layer++) {
+                const layerGroup = new THREE.Group();
+                for (let i = 0; i < 6; i++) {
+                    const spriteMaterial = new THREE.SpriteMaterial({
+                        map: inkTexture,
+                        color: new THREE.Color(0x000000),
+                        transparent: true,
+                        opacity: (0.3 - layer * 0.05) * intensity,  // 透明度を上げる
+                        blending: THREE.NormalBlending,  // 通常ブレンディングに変更
+                        depthWrite: false,
+                        depthTest: true  // 深度テストは有効
+                    });
+                    const sprite = new THREE.Sprite(spriteMaterial);
+                    // 有機的な配置
+                    const angle = (i / 6) * Math.PI * 2;
+                    const radius = (15 + Math.random() * 25) * (1 + layer * 0.3);
+                    const height = (Math.random() - 0.5) * 15;
+                    sprite.position.set(
+                        Math.cos(angle) * radius + (Math.random() - 0.5) * 10,
+                        height + (Math.random() - 0.5) * 8,
+                        Math.sin(angle) * radius + (Math.random() - 0.5) * 10
+                    );
+                    // サイズを控えめに調整
+                    const scale = (8 + Math.random() * 12) * (1 + layer * 0.2);
+                    sprite.scale.set(scale, scale, scale);
+                    // 回転
+                    sprite.material.rotation = Math.random() * Math.PI * 2;
+                    layerGroup.add(sprite);
+                }
+                nebulaGroup.add(layerGroup);
+            }
+            // ✨ 中心の濃い墨核
+            const coreMaterial = new THREE.SpriteMaterial({
+                map: inkTexture,
+                color: new THREE.Color(0x000000),
+                transparent: true,
+                opacity: 0.4 * intensity,
+                blending: THREE.MultiplyBlending,
+                depthWrite: false,
+                depthTest: false  // 深度テストを無効化して常に表示
+            });
+            const coreSprite = new THREE.Sprite(coreMaterial);
+            coreSprite.scale.set(15, 15, 15);  // サイズを小さく
+            nebulaGroup.add(coreSprite);
+            nebulaGroup.position.set(x, y, z);
+            // アニメーション用データ
+            nebulaGroup.userData = {
+                rotationSpeed: 0.0001 + Math.random() * 0.0001,
+                pulseSpeed: 0.3 + Math.random() * 0.3,
+                originalIntensity: intensity
+            };
+            scene.add(nebulaGroup);
+            return nebulaGroup;
+        }
+        // 🔲 ふわふわ動く四角の墨塊
+        function createFloatingSquare(x, y, z) {
+            const geometry = new THREE.BoxGeometry(4, 4, 4);
+            const material = new THREE.MeshBasicMaterial({
+                color: 0x000000,
+                transparent: true,
+                opacity: 0.7
+            });
+            const cube = new THREE.Mesh(geometry, material);
+            cube.position.set(x, y, z);
+            // アニメーション用データ
+            cube.userData = {
+                floatSpeed: 0.002 + Math.random() * 0.002,
+                rotationSpeed: 0.001 + Math.random() * 0.001,
+                floatAmplitude: 3 + Math.random() * 2,
+                originalY: y,
+                phase: Math.random() * Math.PI * 2
+            };
+            scene.add(cube);
+            return cube;
+        }
+        // 🎋 竹の茎を生成
+        function createBamboo(x, z) {
+            const bambooGroup = new THREE.Group();
+            // 竹の節を複数作成
+            const segments = 5 + Math.floor(Math.random() * 3);
+            const height = 30 + Math.random() * 20;
+            const radius = 0.5 + Math.random() * 0.3;
+            for (let i = 0; i < segments; i++) {
+                const segmentHeight = height / segments;
+                const geometry = new THREE.CylinderGeometry(
+                    radius * (1 - i * 0.05), // 上に行くほど細く
+                    radius * (1 - (i-1) * 0.05),
+                    segmentHeight,
+                    8
+                );
+                const material = new THREE.MeshPhongMaterial({
+                    color: 0x1a1a1a, // 暗い灰色
+                    emissive: 0x0a0a0a,
+                    shininess: 20
+                });
+                const segment = new THREE.Mesh(geometry, material);
+                segment.position.y = i * segmentHeight - height/2 + segmentHeight/2;
+                // 節の部分に黒い線
+                if (i > 0) {
+                    const nodeGeometry = new THREE.TorusGeometry(radius * 1.1, 0.05, 4, 8);
+                    const nodeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
+                    const node = new THREE.Mesh(nodeGeometry, nodeMaterial);
+                    node.position.y = segment.position.y - segmentHeight/2;
+                    node.rotation.x = Math.PI / 2;
+                    bambooGroup.add(node);
+                }
+                bambooGroup.add(segment);
+            }
+            bambooGroup.position.set(x, 0, z);
+            bambooGroup.userData = {
+                swaySpeed: 0.001 + Math.random() * 0.001,
+                swayAmplitude: 0.02,
+                originalRotation: { x: 0, z: 0 }
+            };
+            return bambooGroup;
+        }
+        // 🪨 枯山水の石を生成
+        function createZenStone(x, y, z, scale = 1) {
+            const geometry = new THREE.DodecahedronGeometry(3 * scale, 0);
+            // 頂点をランダムに変形して自然な石の形に
+            const positions = geometry.attributes.position.array;
+            for (let i = 0; i < positions.length; i += 3) {
+                positions[i] *= (0.7 + Math.random() * 0.6);
+                positions[i + 1] *= (0.5 + Math.random() * 0.3);
+                positions[i + 2] *= (0.7 + Math.random() * 0.6);
+            }
+            geometry.computeVertexNormals();
+            const material = new THREE.MeshPhongMaterial({
+                color: 0x3a3a3a,
+                emissive: 0x0a0a0a,
+                shininess: 10
+            });
+            const stone = new THREE.Mesh(geometry, material);
+            stone.position.set(x, y, z);
+            stone.rotation.set(
+                Math.random() * Math.PI,
+                Math.random() * Math.PI,
+                Math.random() * Math.PI
+            );
+            // 石の周りの砂紋
+            const ripples = createSandRipples(x, z, scale * 8);
+            return { stone, ripples };
+        }
+        // 🌊 砂紋パターン
+        function createSandRipples(centerX, centerZ, radius) {
+            const rippleGroup = new THREE.Group();
+            const rippleCount = 5;
+            // radiusが0やNaNの場合のフォールバック
+            const safeRadius = (!radius || isNaN(radius) || radius <= 0) ? 10 : radius;
+            for (let i = 0; i < rippleCount; i++) {
+                const innerRadius = Math.max(0.1, safeRadius * (0.5 + i * 0.2));
+                const outerRadius = Math.max(innerRadius + 0.1, innerRadius + 0.5);
+                const geometry = new THREE.RingGeometry(
+                    innerRadius,
+                    outerRadius,
+                    32
+                );
+                const material = new THREE.MeshBasicMaterial({
+                    color: 0x1a1a1a,
+                    transparent: true,
+                    opacity: 0.3 - i * 0.05,
+                    side: THREE.DoubleSide
+                });
+                const ring = new THREE.Mesh(geometry, material);
+                ring.rotation.x = -Math.PI / 2;
+                ring.position.set(centerX, -9.9, centerZ);
+                rippleGroup.add(ring);
+            }
+            return rippleGroup;
+        }
+        // 💧 水滴エフェクト
+        function createWaterDrop(x, y, z) {
+            const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+            const material = new THREE.MeshPhysicalMaterial({
+                color: 0x666666,
+                transparent: true,
+                opacity: 0.5,
+                roughness: 0,
+                metalness: 0,
+                clearcoat: 1.0,
+                clearcoatRoughness: 0,
+                reflectivity: 0.9,
+                refractionRatio: 0.98
+            });
+            const drop = new THREE.Mesh(geometry, material);
+            drop.position.set(x, y, z);
+            drop.userData = {
+                fallSpeed: 0.05 + Math.random() * 0.03,
+                originalY: y,
+                splashed: false,
+                lifeTime: 0
+            };
+            return drop;
+        }
+        // 墨雲と四角を配置（位置と強度を調整）
+        const inkNebulas = [];
+        inkNebulas.push(createInkNebula(-40, 15, -30, 0.8));  // より遠くに、強度を下げる
+        inkNebulas.push(createInkNebula(35, -10, -25, 0.7));
+        inkNebulas.push(createInkNebula(-15, 25, 40, 0.9));  // より後ろに配置
+        const floatingSquares = [];
+        for (let i = 0; i < 8; i++) {
+            const angle = (i / 8) * Math.PI * 2;
+            const radius = 40 + Math.random() * 20;
+            const square = createFloatingSquare(
+                Math.cos(angle) * radius + (Math.random() - 0.5) * 20,
+                (Math.random() - 0.5) * 30,
+                Math.sin(angle) * radius + (Math.random() - 0.5) * 20
+            );
+            floatingSquares.push(square);
+        }
+        // 🎋 竹を配置
+        const bamboos = [];
+        for (let i = 0; i < 6; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 25 + Math.random() * 35;
+            const bamboo = createBamboo(
+                Math.cos(angle) * distance,
+                Math.sin(angle) * distance
+            );
+            scene.add(bamboo);
+            bamboos.push(bamboo);
+        }
+        // 🪨 枯山水の石と砂紋を配置
+        const stones = [];
+        for (let i = 0; i < 3; i++) {
+            const x = (Math.random() - 0.5) * 40;
+            const z = (Math.random() - 0.5) * 30;
+            const scale = 0.8 + Math.random() * 0.6;
+            const { stone, ripples } = createZenStone(x, -8, z, scale);
+            scene.add(stone);
+            scene.add(ripples);
+            stones.push({ stone, ripples });
+        }
+        // 💧 水滴を配置
+        const waterDrops = [];
+        function spawnWaterDrop() {
+            const x = (Math.random() - 0.5) * 50;
+            const z = (Math.random() - 0.5) * 30;
+            const drop = createWaterDrop(x, 25, z);
+            scene.add(drop);
+            waterDrops.push(drop);
+        }
+        // 定期的に水滴を生成
+        setInterval(spawnWaterDrop, 3000);
+        // 初期水滴
+        for (let i = 0; i < 5; i++) {
+            setTimeout(spawnWaterDrop, i * 600);
+        }
+        // 墨の塵を追加
+        const inkDust = createInkDust();
+        scene.add(inkDust);
+        // 墨の葉を追加
+        const inkLeaves = createInkLeaves();
+        scene.add(inkLeaves);
+        // 墨の精霊を追加（ホタルの代わり）
+        const inkSpirits = createInkSpirits();
+        scene.add(inkSpirits);
+        // 🌟 金箔パーティクル
+        function createGoldLeaves() {
+            const goldGroup = new THREE.Group();
+            const leafCount = 30;
+            const leafGeometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(leafCount * 3);
+            const colors = new Float32Array(leafCount * 3);
+            const sizes = new Float32Array(leafCount);
+            for (let i = 0; i < leafCount; i++) {
+                const i3 = i * 3;
+                positions[i3] = (Math.random() - 0.5) * 60;
+                positions[i3 + 1] = 20 + Math.random() * 30;
+                positions[i3 + 2] = (Math.random() - 0.5) * 40;
+                // 金箔の色（明るい金色）
+                const brightness = 0.8 + Math.random() * 0.2;
+                colors[i3] = 1.0 * brightness;     // R
+                colors[i3 + 1] = 0.8 * brightness; // G
+                colors[i3 + 2] = 0.1 * brightness; // B
+                sizes[i] = 3 + Math.random() * 4;
+            }
+            leafGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            leafGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            leafGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+            const leafMaterial = new THREE.PointsMaterial({
+                size: 6,
+                sizeAttenuation: true,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending
+            });
+            const goldLeaves = new THREE.Points(leafGeometry, leafMaterial);
+            // アニメーション用データ
+            goldLeaves.userData = {
+                fallSpeed: 0.005,
+                swaySpeed: 0.001,
+                glitterSpeed: 0.003,
+                musicIntensity: 0,
+                time: 0
+            };
+            goldGroup.add(goldLeaves);
+            return goldGroup;
+        }
+        // 金箔を追加
+        const goldLeaves = createGoldLeaves();
+        scene.add(goldLeaves);
+        // ライティング（ミニマル調整）
+        const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
+        scene.add(ambientLight);
+        const spotLight = new THREE.SpotLight(0xffffff, 0.2);
+        spotLight.position.set(0, 20, 10);
+        scene.add(spotLight);
+        // カメラ位置
+        camera.position.set(0, 0, 25);
+        camera.lookAt(0, 0, 0);
+        // ★ ARレチクル（ヒット位置表示）
+        const reticleGeometry = new THREE.RingGeometry(0.08, 0.10, 32);
+        reticleGeometry.rotateX(-Math.PI / 2);
+        reticleGeometry.computeBoundingSphere(); // NaN防止
+        const reticle = new THREE.Mesh(
+            reticleGeometry,
+            new THREE.MeshBasicMaterial({
+                color: 0x333333,
+                side: THREE.DoubleSide,
+                transparent: true,
+                opacity: 0.7
+            })
+        );
+        reticle.matrixAutoUpdate = false;
+        reticle.visible = false;
+        scene.add(reticle);
+        // コントロール
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.minDistance = 10;
+        controls.maxDistance = 50;
+        // 筆ストローク機能は削除（ChocoDrop専用空間）
+        // ユーザーのクリック機能は削除（Alt+ドラッグの墨絵描画のみ）
+        // 🍫 ChocoDrop初期化
+        let chocoDrop;
+        function initChocoDrop() {
+            if (typeof window.ChocoDrop === 'undefined') {
+                console.error('ChocoDrop not loaded. Please check the script path.');
+                return;
+            }
+            try {
+                chocoDrop = window.ChocoDrop.createChocoDrop(scene, {
+                    camera: camera,
+                    renderer: renderer,
+                    serverUrl: null, // GitHub Pagesなので
+                    enableServerHealthCheck: false,  // サーバーレス環境なのでヘルスチェック無効
+                    skipServiceDialog: true, // GitHub Pages用：サービス設定ダイアログを無効化
+                    sceneOptions: {
+                        enableMouseInteraction: true
+                    },
+                    onControlsToggle: (disabled) => {
+                        controls.enabled = !disabled;
+                    }
+                });
+                console.log('🍵 侘び寂びの世界へようこそ');
+                console.log('ChocoDrop loaded successfully!');
+                console.log('Press @ to activate ChocoDrop');
+            } catch (error) {
+                console.error('ChocoDrop initialization failed:', error);
+            }
+        }
+        // ChocoDrop読み込み待機
+        function waitForChocoDrop() {
+            if (typeof window.ChocoDrop !== 'undefined') {
+                initChocoDrop();
+            } else {
+                console.log('Waiting for ChocoDrop to load...');
+                setTimeout(waitForChocoDrop, 500);
+            }
+        }
+        setTimeout(waitForChocoDrop, 1000);
+        // 🎨 ChocoDrop のオレンジ色を動的に墨色に変更
+        function enforceInkStyle() {
+            const elements = document.querySelectorAll('*');
+            elements.forEach(el => {
+                const style = el.style;
+                const computedStyle = window.getComputedStyle(el);
+                // オレンジ/赤系の背景色を墨色に変更
+                if (style.backgroundColor &&
+                    (style.backgroundColor.includes('rgb(255') ||
+                     style.backgroundColor.includes('#ff') ||
+                     style.backgroundColor.includes('orange'))) {
+                    el.style.backgroundColor = 'rgba(30, 30, 30, 0.1)';
+                    el.style.borderColor = 'rgba(30, 30, 30, 0.8)';
+                }
+                // 境界線の色も変更
+                if (style.borderColor &&
+                    (style.borderColor.includes('rgb(255') ||
+                     style.borderColor.includes('#ff'))) {
+                    el.style.borderColor = 'rgba(30, 30, 30, 0.8)';
+                }
+            });
+        }
+        // 定期的にスタイルをチェック・修正
+        setInterval(enforceInkStyle, 500);
+        // 🎵 音楽解析システム
+        let audioContext = null;
+        let analyser = null;
+        let dataArray = null;
+        let beatDetectionHistory = [];
+        let lastBeatTime = 0;
+        let musicData = {
+            volume: 0,
+            bass: 0,
+            mid: 0,
+            treble: 0,
+            tempo: 0,
+            bpm: 0,
+            beatDetected: false,
+            isPlaying: false
+        };
+        function setupAudioAnalysis() {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 256;
+                dataArray = new Uint8Array(analyser.frequencyBinCount);
+            }
+        }
+        function connectVideoToAnalyser(videoElement) {
+            if (!audioContext || !analyser) return;
+            try {
+                const source = audioContext.createMediaElementSource(videoElement);
+                source.connect(analyser);
+                analyser.connect(audioContext.destination);
+                musicData.isPlaying = true;
+                console.log('🎵 音楽解析開始');
+            } catch (error) {
+                console.log('音楽解析エラー:', error);
+            }
+        }
+        function analyzeMusicData() {
+            if (!analyser || !dataArray) return;
+            analyser.getByteFrequencyData(dataArray);
+            // 音量計算
+            let sum = 0;
+            for (let i = 0; i < dataArray.length; i++) {
+                sum += dataArray[i];
+            }
+            musicData.volume = sum / dataArray.length / 255;
+            // 周波数帯域分析
+            const bassRange = Math.floor(dataArray.length * 0.1);
+            const midRange = Math.floor(dataArray.length * 0.5);
+            let bassSum = 0, midSum = 0, trebleSum = 0;
+            for (let i = 0; i < bassRange; i++) {
+                bassSum += dataArray[i];
+            }
+            for (let i = bassRange; i < midRange; i++) {
+                midSum += dataArray[i];
+            }
+            for (let i = midRange; i < dataArray.length; i++) {
+                trebleSum += dataArray[i];
+            }
+            musicData.bass = bassSum / bassRange / 255;
+            musicData.mid = midSum / (midRange - bassRange) / 255;
+            musicData.treble = trebleSum / (dataArray.length - midRange) / 255;
+            // 🥁 ビート検出とBPM計算
+            const currentTime = performance.now();
+            const bassThreshold = 0.3;
+            const volumeThreshold = 0.2;
+            // ビート検出（ベース音量の急激な変化）
+            if (musicData.bass > bassThreshold && musicData.volume > volumeThreshold) {
+                if (currentTime - lastBeatTime > 300) { // 最小300ms間隔
+                    musicData.beatDetected = true;
+                    lastBeatTime = currentTime;
+                    // BPM計算用履歴更新
+                    beatDetectionHistory.push(currentTime);
+                    if (beatDetectionHistory.length > 8) {
+                        beatDetectionHistory.shift();
+                    }
+                    // BPM計算
+                    if (beatDetectionHistory.length >= 4) {
+                        const intervals = [];
+                        for (let i = 1; i < beatDetectionHistory.length; i++) {
+                            intervals.push(beatDetectionHistory[i] - beatDetectionHistory[i-1]);
+                        }
+                        const avgInterval = intervals.reduce((a, b) => a + b) / intervals.length;
+                        musicData.bpm = 60000 / avgInterval; // ms → BPM
+                    }
+                }
+            } else {
+                musicData.beatDetected = false;
+            }
+            // 🎛️ リアルタイム音楽データ表示を更新
+            updateMusicDebugDisplay();
+        }
+        // 🎛️ 音楽データのリアルタイム表示
+        let musicDebugVisible = false; // デフォルトで非表示
+        function updateMusicDebugDisplay() {
+            let debugPanel = document.getElementById('music-debug');
+            if (!debugPanel) {
+                debugPanel = document.createElement('div');
+                debugPanel.id = 'music-debug';
+                debugPanel.style.cssText = `
+                    position: fixed;
+                    bottom: 20px;
+                    left: 20px;
+                    background: rgba(0, 0, 0, 0.8);
+                    color: #00ff88;
+                    padding: 10px;
+                    border-radius: 6px;
+                    font-family: 'Monaco', monospace;
+                    font-size: 10px;
+                    z-index: 100;
+                    min-width: 200px;
+                    backdrop-filter: blur(10px);
+                    border: 1px solid rgba(0, 255, 136, 0.3);
+                    display: none;
+                `;
+                document.body.appendChild(debugPanel);
+                // クリックで非表示
+                debugPanel.addEventListener('click', () => {
+                    musicDebugVisible = false;
+                    debugPanel.style.display = 'none';
+                });
+            }
+            // 非表示の時は更新をスキップ（パフォーマンス向上）
+            if (!musicDebugVisible) {
+                debugPanel.style.display = 'none';
+                return;
+            }
+            debugPanel.style.display = 'block';
+            if (musicData.isPlaying) {
+                debugPanel.innerHTML = `
+                    <div style="color: #00ff88; font-weight: bold;">🎵 MUSIC ACTIVE</div>
+                    <div>Volume: ${'█'.repeat(Math.floor(musicData.volume * 20))} ${(musicData.volume * 100).toFixed(0)}%</div>
+                    <div>Bass:   ${'█'.repeat(Math.floor(musicData.bass * 20))} ${(musicData.bass * 100).toFixed(0)}%</div>
+                    <div>Mid:    ${'█'.repeat(Math.floor(musicData.mid * 20))} ${(musicData.mid * 100).toFixed(0)}%</div>
+                    <div>Treble: ${'█'.repeat(Math.floor(musicData.treble * 20))} ${(musicData.treble * 100).toFixed(0)}%</div>
+                    <div>BPM: ${musicData.bpm ? musicData.bpm.toFixed(0) : '--'}</div>
+                    <div>${musicData.beatDetected ? '🥁 BEAT!' : '⚪ ----'}</div>
+                    <div style="font-size: 8px; color: #666; margin-top: 5px;">Press M or Click to hide</div>
+                `;
+            } else {
+                debugPanel.innerHTML = `
+                    <div style="color: #ff6666;">🔇 NO MUSIC</div>
+                    <div style="font-size: 8px; color: #666;">Video with audio needed</div>
+                    <div style="font-size: 8px; color: #666; margin-top: 5px;">Press M or Click to hide</div>
+                `;
+            }
+        }
+        // Mキーで音楽デバッグパネルを切り替え
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'm' || e.key === 'M') {
+                musicDebugVisible = !musicDebugVisible;
+                updateMusicDebugDisplay();
+                console.log(`🎵 Music debug panel ${musicDebugVisible ? 'shown' : 'hidden'}`);
+            }
+        });
+        // ChocoDrop の動画要素を監視
+        function observeVideoElements() {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === 1) { // ELEMENT_NODE
+                            const videos = node.tagName === 'VIDEO' ? [node] : node.querySelectorAll('video');
+                            videos.forEach((video) => {
+                                video.addEventListener('play', () => {
+                                    setupAudioAnalysis();
+                                    connectVideoToAnalyser(video);
+                                });
+                                video.addEventListener('pause', () => {
+                                    musicData.isPlaying = false;
+                                });
+                            });
+                        }
+                    });
+                });
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
+        // 監視開始
+        observeVideoElements();
+        // 🎵 強化されたVideoTexture音声接続システム
+        function monitorVideoTextures() {
+            let foundVideo = false;
+            let connectionAttempts = 0;
+            // Scene内のすべてのオブジェクトを詳細検査
+            scene.traverse((child) => {
+                // VideoTexture検出（複数パターン対応）
+                if (child.material) {
+                    const materials = Array.isArray(child.material) ? child.material : [child.material];
+                    materials.forEach(material => {
+                        // map, emissiveMap, normalMapなど全テクスチャをチェック
+                        ['map', 'emissiveMap', 'normalMap', 'roughnessMap'].forEach(texType => {
+                            const texture = material[texType];
+                            if (texture && texture.image instanceof HTMLVideoElement) {
+                                const video = texture.image;
+                                if (!video.audioConnected) {
+                                    console.log(`🎵 Found VideoTexture (${texType}):`, video.src);
+                                    connectVideoWithRetry(video);
+                                    foundVideo = true;
+                                }
+                            }
+                        });
+                    });
+                }
+            });
+            // DOM内のvideo要素も監視（ChocoDrop要素用）
+            document.querySelectorAll('video').forEach(video => {
+                if (!video.audioConnected && video.src) {
+                    console.log('🎵 Found DOM video element:', video.src);
+                    connectVideoWithRetry(video);
+                    foundVideo = true;
+                }
+            });
+            if (foundVideo) {
+                console.log('✅ VideoTexture detection completed');
+            }
+        }
+        // リトライ機能付き音声接続
+        function connectVideoWithRetry(video, retries = 3) {
+            const attemptConnection = () => {
+                try {
+                    if (video.paused) {
+                        // 再生待ち
+                        video.addEventListener('play', () => {
+                            console.log('▶️ Video started playing, connecting audio...');
+                            setupAudioAnalysis();
+                            connectVideoToAnalyser(video);
+                            video.audioConnected = true;
+                            showMusicStatus(true);
+                        }, { once: true });
+                    } else {
+                        // 既に再生中
+                        console.log('🎬 Video already playing, connecting now...');
+                        setupAudioAnalysis();
+                        connectVideoToAnalyser(video);
+                        video.audioConnected = true;
+                        showMusicStatus(true);
+                    }
+                    // 停止/一時停止の監視
+                    video.addEventListener('pause', () => {
+                        musicData.isPlaying = false;
+                        showMusicStatus(false);
+                    });
+                    video.addEventListener('ended', () => {
+                        musicData.isPlaying = false;
+                        showMusicStatus(false);
+                    });
+                } catch (error) {
+                    console.log(`音声接続エラー (残り${retries}回):`, error);
+                    if (retries > 0) {
+                        setTimeout(() => connectVideoWithRetry(video, retries - 1), 1000);
+                    }
+                }
+            };
+            attemptConnection();
+        }
+        // 音楽状況の可視化
+        function showMusicStatus(isConnected) {
+            // 既存のステータス表示を削除
+            const existingStatus = document.getElementById('music-status');
+            if (existingStatus) {
+                existingStatus.remove();
+            }
+            // 新しいステータス表示を作成
+            const statusDiv = document.createElement('div');
+            statusDiv.id = 'music-status';
+            statusDiv.style.cssText = `
+                position: fixed;
+                top: 80px;
+                left: 16px;
+                background: ${isConnected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(239, 68, 68, 0.15)'};
+                border: 1px solid ${isConnected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)'};
+                color: ${isConnected ? '#16a34a' : '#dc2626'};
+                padding: 6px 10px;
+                border-radius: 6px;
+                font-size: 11px;
+                z-index: 100;
+                backdrop-filter: blur(10px);
+                transition: all 0.3s ease;
+            `;
+            statusDiv.textContent = isConnected ? '🎵 音楽連動 ON' : '🔇 音楽未検出';
+            document.body.appendChild(statusDiv);
+            // 5秒後に自動で非表示
+            setTimeout(() => {
+                if (statusDiv.parentNode) {
+                    statusDiv.style.opacity = '0';
+                    setTimeout(() => statusDiv.remove(), 300);
+                }
+            }, 5000);
+        }
+        // より頻繁な監視（500ms間隔）
+        setInterval(monitorVideoTextures, 500);
+        // 初回実行を早める
+        setTimeout(monitorVideoTextures, 1000);
+        // ★ AR ヒットテスト用変数
+        let hitTestSource = null;
+        let hitTestSourceRequested = false;
+        // ★ ARタップで墨のオブジェクトを配置
+        const onSelect = () => {
+            if (!reticle.visible) return;
+            // レチクル位置に墨の精霊を配置
+            const spirit = createInkSpirits().children[0]; // 単体の精霊を作成
+            spirit.position.copy(reticle.position);
+            spirit.position.y += 0.5; // 少し浮かせる
+            scene.add(spirit);
+            console.log('🖤 墨の精霊を配置:', reticle.position);
+        };
+        // XRセッション開始時の設定
+        renderer.xr.addEventListener('sessionstart', () => {
+            const session = renderer.xr.getSession();
+            if (session) {
+                session.addEventListener('select', onSelect);
+                console.log('🥽 XRセッション開始');
+            }
+        });
+        // アニメーションループ（XR対応）
+        renderer.setAnimationLoop((timestamp, frame) => {
+            const time = performance.now() * 0.001;
+            // ★ ARヒットテスト処理
+            const session = renderer.xr.getSession();
+            if (session && frame) {
+                // 初回だけヒットテストsourceを取得
+                if (!hitTestSourceRequested) {
+                    session.requestReferenceSpace('viewer').then((viewerRefSpace) => {
+                        session.requestHitTestSource({ space: viewerRefSpace }).then((source) => {
+                            hitTestSource = source;
+                        });
+                    });
+                    hitTestSourceRequested = true;
+                }
+                if (hitTestSource) {
+                    const referenceSpace = renderer.xr.getReferenceSpace();
+                    const hitTestResults = frame.getHitTestResults(hitTestSource);
+                    if (hitTestResults.length) {
+                        const hit = hitTestResults[0];
+                        const pose = hit.getPose(referenceSpace);
+                        reticle.visible = true;
+                        reticle.matrix.fromArray(pose.transform.matrix);
+                    } else {
+                        reticle.visible = false;
+                    }
+                }
+            }
+            // 🎵 音楽データ更新
+            if (musicData.isPlaying) {
+                analyzeMusicData();
+                // 高音域が強いときに追加の水滴を生成
+                if (musicData.treble > 0.6 && Math.random() < 0.1) {
+                    const newDrop = createWaterDrop();
+                    scene.add(newDrop);
+                    waterDrops.push(newDrop);
+                }
+            }
+            // 墨雲のアニメーション（音楽連動・美しく控えめに）
+            inkNebulas.forEach((nebula, index) => {
+                if (nebula.userData && nebula.userData.rotationSpeed) {
+                    // 音楽に合わせて回転速度調整（控えめ）
+                    const musicBoost = musicData.isPlaying ? 1 + musicData.volume * 0.5 : 1;
+                    nebula.rotation.y += nebula.userData.rotationSpeed * musicBoost;
+                    nebula.rotation.z += nebula.userData.rotationSpeed * 0.3 * musicBoost;
+                    // 音楽の低音に合わせて微細なパルス（美しく制限）
+                    const bassPulse = musicData.isPlaying ?
+                        Math.sin(time * 5) * musicData.bass * 0.05 : 0; // 大幅に縮小
+                    const naturalPulse = Math.sin(time * nebula.userData.pulseSpeed) * 0.02 + 1;
+                    const finalPulse = Math.max(0.8, Math.min(1.2, naturalPulse + bassPulse)); // 範囲制限
+                    nebula.scale.setScalar(finalPulse);
+                    // 透明度で音楽表現（新しい美しさ）
+                    nebula.children.forEach(layer => {
+                        layer.children.forEach(sprite => {
+                            if (sprite.material) {
+                                const musicGlow = musicData.isPlaying ?
+                                    Math.sin(time * 3) * musicData.volume * 0.1 : 0;
+                                const baseOpacity = sprite.material.userData?.originalOpacity || sprite.material.opacity;
+                                sprite.material.opacity = Math.max(0.1, Math.min(1.0, baseOpacity + musicGlow));
+                                // 初回のみ元の透明度を保存
+                                if (!sprite.material.userData) {
+                                    sprite.material.userData = { originalOpacity: sprite.material.opacity };
+                                }
+                            }
+                        });
+                    });
+                }
+            });
+            // ふわふわ四角のアニメーション（音楽連動）
+            floatingSquares.forEach(square => {
+                const userData = square.userData;
+                // 音楽ビートで適度な脈動
+                const beatPulse = musicData.isPlaying && musicData.beatDetected ?
+                    Math.sin(time * 12) * 0.4 + 1.0 : 1.0; // 適度な脈動
+                // 音楽ボリュームで浮遊の強さを適度に調整
+                const volumeBoost = musicData.isPlaying ?
+                    1 + musicData.volume * 0.6 : 1; // 適度なボリューム反応
+                // ベース音で追加の動き
+                const bassFloat = musicData.isPlaying ?
+                    Math.sin(time * 6) * musicData.bass * 2 : 0;
+                // 上下浮遊（音楽で適度に活発に）
+                square.position.y = userData.originalY +
+                    Math.sin(time * userData.floatSpeed * volumeBoost + userData.phase) *
+                    userData.floatAmplitude * beatPulse + bassFloat;
+                // より有機的な回転（音楽で適度に速く）
+                const rotationBoost = musicData.isPlaying ? 1 + musicData.mid * 0.4 : 1;
+                square.rotation.x += userData.rotationSpeed * rotationBoost;
+                square.rotation.y += userData.rotationSpeed * 0.7 * rotationBoost;
+                square.rotation.z += userData.rotationSpeed * 0.3 * rotationBoost;
+                // 透明度の微妙な変化（音楽で息づくように）
+                if (square.material) {
+                    const breathe = Math.sin(time * 2 + userData.phase) * 0.1 + 0.9;
+                    const musicBreath = musicData.isPlaying ?
+                        musicData.volume * 0.1 : 0;
+                    square.material.opacity = Math.min(1.0, breathe + musicBreath);
+                }
+            });
+            // 墨の塵のパルス
+            if (inkDust.userData) {
+                inkDust.userData.time = time;
+                const pulse = Math.sin(time * inkDust.userData.pulseSpeed) * 0.5 + 0.5;
+                inkDust.children[0].material.opacity = 0.3 + pulse * 0.3;
+            }
+            // 墨の葉の落下
+            if (inkLeaves.userData) {
+                inkLeaves.userData.time = time;
+                const positions = inkLeaves.geometry.attributes.position.array;
+                for (let i = 0; i < positions.length; i += 3) {
+                    // ゆっくり落下
+                    positions[i + 1] -= inkLeaves.userData.fallSpeed;
+                    // 左右に揺れる
+                    positions[i] += Math.sin(time * inkLeaves.userData.swaySpeed + i) * 0.01;
+                    // 下まで落ちたら上に戻す
+                    if (positions[i + 1] < -10) {
+                        positions[i + 1] = 20;
+                        positions[i] = (Math.random() - 0.5) * 30;
+                    }
+                }
+                inkLeaves.geometry.attributes.position.needsUpdate = true;
+            }
+            // 🎋 竹のゆらぎアニメーション（音楽連動）
+            bamboos.forEach(bamboo => {
+                const userData = bamboo.userData;
+                // 基本の揺れ + 音楽ビートで強調
+                const beatBoost = musicData.isPlaying && musicData.beatDetected ? 2.0 : 1.0;
+                const volumeBoost = musicData.isPlaying ? 1 + musicData.volume : 1;
+                bamboo.rotation.x = Math.sin(time * userData.swaySpeed * volumeBoost) *
+                    userData.swayAmplitude * beatBoost;
+                bamboo.rotation.z = Math.cos(time * userData.swaySpeed * 1.3 * volumeBoost) *
+                    userData.swayAmplitude * 0.5 * beatBoost;
+            });
+            // 🪨 砂紋の波紋アニメーション（音楽連動・強化版）
+            stones.forEach(({ stone, ripples }) => {
+                // 石本体の音楽連動アニメーション（強化版）
+                if (musicData.isPlaying) {
+                    // 音楽ビートで石が明確に震える（効果を大幅強化）
+                    const beatShake = musicData.beatDetected ?
+                        (Math.random() - 0.5) * 0.4 : 0;
+                    // ベース音で上下に大きく動く
+                    const bassMovement = Math.sin(time * 8) * musicData.bass * 1.2;
+                    // 音量で回転速度が大幅に変わる
+                    const rotationSpeed = musicData.volume * 0.01;
+                    // 高音域で左右に揺れる
+                    const trebleShake = Math.sin(time * 12) * musicData.treble * 0.6;
+                    // 石の位置を音楽に合わせて調整（より大きな変化）
+                    if (!stone.userData.originalPosition) {
+                        stone.userData.originalPosition = stone.position.clone();
+                    }
+                    stone.position.x = stone.userData.originalPosition.x + beatShake + trebleShake;
+                    stone.position.y = stone.userData.originalPosition.y + bassMovement;
+                    stone.position.z = stone.userData.originalPosition.z + beatShake * 0.8;
+                    // 回転も音楽に大きく連動
+                    stone.rotation.y += rotationSpeed;
+                    stone.rotation.x += rotationSpeed * 0.5;
+                    stone.rotation.z += rotationSpeed * 0.3;
+                }
+                // 砂紋の波紋アニメーション
+                ripples.children.forEach((ring, index) => {
+                    // 音楽ビートで大きく拡張（効果を強化）
+                    const beatPulse = musicData.beatDetected ? 0.3 : 0;
+                    const bassWave = musicData.isPlaying ? musicData.bass * 0.2 : 0;
+                    const volumeBoost = musicData.isPlaying ? musicData.volume * 0.15 : 0;
+                    // より目立つスケール変化
+                    const baseWave = Math.sin(time * 0.8 - index * 0.5) * 0.1;
+                    const scale = 1 + baseWave + beatPulse + bassWave + volumeBoost;
+                    ring.scale.set(scale, scale, scale);
+                    // より明瞭な透明度変化
+                    const baseOpacity = 0.4 - index * 0.06;
+                    const fadeWave = Math.sin(time * 0.8 - index * 0.5) * 0.1;
+                    const musicOpacity = beatPulse * 0.4 + volumeBoost * 0.3;
+                    ring.material.opacity = Math.max(0, Math.min(0.8, baseOpacity + fadeWave + musicOpacity));
+                });
+            });
+            // 💧 水滴の落下アニメーション（音楽連動）
+            waterDrops.forEach((drop, index) => {
+                if (drop.userData.splashed) {
+                    drop.userData.lifeTime += 0.016;
+                    if (drop.userData.lifeTime > 2) {
+                        // 水滴を削除して再利用
+                        scene.remove(drop);
+                        waterDrops.splice(index, 1);
+                    }
+                } else {
+                    // 落下（高音域で速度増加）
+                    const trebleBoost = musicData.isPlaying ? 1 + musicData.treble * 0.5 : 1;
+                    drop.position.y -= drop.userData.fallSpeed * trebleBoost;
+                    // 地面に達したら波紋エフェクト
+                    if (drop.position.y < -9) {
+                        drop.userData.splashed = true;
+                        // 波紋エフェクトの作成
+                        const splashGeometry = new THREE.RingGeometry(0.5, 2, 32);
+                        splashGeometry.computeBoundingSphere(); // NaN防止
+                        const splashMaterial = new THREE.MeshBasicMaterial({
+                            color: 0x444444,
+                            transparent: true,
+                            opacity: 0.2,
+                            side: THREE.DoubleSide
+                        });
+                        const splash = new THREE.Mesh(splashGeometry, splashMaterial);
+                        splash.rotation.x = -Math.PI / 2;
+                        splash.position.copy(drop.position);
+                        splash.position.y = -9.8;
+                        scene.add(splash);
+                        // 波紋を広げるアニメーション
+                        const expandSplash = setInterval(() => {
+                            splash.scale.x *= 1.05;
+                            splash.scale.y *= 1.05;
+                            splash.material.opacity *= 0.95;
+                            if (splash.material.opacity < 0.01) {
+                                scene.remove(splash);
+                                clearInterval(expandSplash);
+                            }
+                        }, 16);
+                        drop.visible = false;
+                    }
+                }
+            });
+            // 桜のアニメーションは削除
+            // 🌟 金箔パーティクルアニメーション（音楽連動）
+            if (goldLeaves.userData) {
+                const positions = goldLeaves.children[0].geometry.attributes.position.array;
+                const colors = goldLeaves.children[0].geometry.attributes.color.array;
+                for (let i = 0; i < positions.length; i += 3) {
+                    // 音楽ビートで金箔が舞い踊る
+                    if (musicData.isPlaying) {
+                        const beatPulse = musicData.beatDetected ? 0.2 : 0;
+                        const volumeFloat = musicData.volume * 0.1;
+                        // ゆっくり落下 + 音楽で浮上
+                        positions[i + 1] -= goldLeaves.userData.fallSpeed - volumeFloat;
+                        // 左右に揺れる + ビートで激しく
+                        const swayIntensity = goldLeaves.userData.swaySpeed * (1 + beatPulse * 3);
+                        positions[i] += Math.sin(time * swayIntensity + i) * (0.01 + beatPulse);
+                        positions[i + 2] += Math.cos(time * swayIntensity + i) * (0.005 + beatPulse * 0.5);
+                        // 金色の輝きを音楽で調整
+                        const brightness = 0.8 + musicData.mid * 0.4 + beatPulse * 0.6;
+                        colors[i] = brightness;     // R
+                        colors[i + 1] = brightness * 0.8; // G
+                        colors[i + 2] = brightness * 0.2; // B
+                    } else {
+                        // 通常の落下
+                        positions[i + 1] -= goldLeaves.userData.fallSpeed;
+                        positions[i] += Math.sin(time * goldLeaves.userData.swaySpeed + i) * 0.01;
+                    }
+                    // 下まで落ちたら上に戻す
+                    if (positions[i + 1] < -15) {
+                        positions[i + 1] = 25;
+                        positions[i] = (Math.random() - 0.5) * 40;
+                        positions[i + 2] = (Math.random() - 0.5) * 20;
+                    }
+                }
+                goldLeaves.children[0].geometry.attributes.position.needsUpdate = true;
+                goldLeaves.children[0].geometry.attributes.color.needsUpdate = true;
+            }
+            // 🌟 墨の精霊アニメーション（音楽連動）
+            inkSpirits.children.forEach(child => {
+                if (child instanceof THREE.Mesh && child.userData.originalPos) {
+                    const userData = child.userData;
+                    // ゆらゆらと飛ぶ動き + 音楽で活発化
+                    const midBoost = musicData.isPlaying ? 1 + musicData.mid * 0.5 : 1;
+                    const beatBoost = musicData.beatDetected ? 1.5 : 1;
+                    const wanderX = Math.sin(time * userData.moveSpeed * midBoost + userData.phase) *
+                        userData.wanderRadius * beatBoost;
+                    const wanderY = Math.cos(time * userData.moveSpeed * 1.3 * midBoost + userData.phase) *
+                        userData.wanderRadius * 0.5 * beatBoost;
+                    const wanderZ = Math.sin(time * userData.moveSpeed * 0.7 * midBoost + userData.phase) *
+                        userData.wanderRadius * 0.7 * beatBoost;
+                    child.position.set(
+                        userData.originalPos.x + wanderX,
+                        userData.originalPos.y + wanderY,
+                        userData.originalPos.z + wanderZ
+                    );
+                    // 墨の濃淡変化 + 音楽で明滅
+                    const volumePulse = musicData.isPlaying ? musicData.volume * 0.3 : 0;
+                    const fade = Math.sin(time * userData.glowSpeed) * 0.2 + 0.5 + volumePulse;
+                    child.material.opacity = Math.max(0.1, Math.min(1.0, fade));
+                    if (userData.light) {
+                        userData.light.intensity = fade * 0.2;
+                        userData.light.position.copy(child.position);
+                    }
+                }
+            });
+            // 筆ストロークアニメーションは削除
+            controls.update();
+            renderer.render(scene, camera);
+        });
+        // レスポンシブ対応
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // 30秒後の自動非表示タイマー開始
+        if (typeof window.scheduleInfoPanelAutoHide === 'function') {
+            window.scheduleInfoPanelAutoHide();
+        }
+        console.log('✅ 侘寂の世界が準備完了！🎨 音楽入り動画で墨絵に魂を宿らせましょう');
+        // WebXR最終チェック
+        console.log('=== WebXR Final Check ===');
+        console.log('VRButton available:', typeof VRButton);
+        console.log('ARButton available:', typeof ARButton);
+        console.log('navigator.xr available:', !!navigator.xr);
+        console.log('Window location:', window.location.href);
+        console.log('Is HTTPS:', window.location.protocol === 'https:');
+    })();
+    </script>
+</body>
+</html>