Update index.html

index.html

@@ -9,6 +9,9 @@
     </script>
     <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgbGFuZz0iamEiPjxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQxIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzNDc0ZWIiIC8+IDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0YThlYiIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8IS0tIOWQhOS6uuWbvuWkjeS9nOWumuS7tuWkjeaWsOWIl+OBjOaWsOWIl+OBq+OBhOOBq+OBvuOBq+OCi+OCieWbvuWkjeOBjOOCjOOCieOCk+ODq+ODvOODrOODs+ODg+OCiwotLT4gPHBvbHlnb24gcG9pbnRzPSI1MCw1MCA1MCwxNTAgMTUwLDEwMCIgZmlsbD0idXJsKCNncmFkMSkiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgLz48L3N2Zz4=">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
     <title>文化発表会動画プレイヤー</title>
     <style>
         /* テクノロジー風背景スタイル */
@@ -89,7 +92,7 @@
         
             /* メインスタイル */
             body {
-                font-family: 'Arial', sans-serif;
+                font-family: "M PLUS Rounded 1c", 'Arial', sans-serif;
                 background-color: rgba(10, 25, 47, 0.8);
                 color: #e6f1ff;
                 margin: 0;
@@ -1073,6 +1076,8 @@
                 <input type="number" id="tempo" min="40" max="200" value="92" step="0.1">
                 <span id="tempo-speed-value">1.00x</span>
             </div>
+            <span>↑練習したいテンポを入力するとそのテンポの速さで再生するように再生速度スライダーを変更できます。
+            <br>楽譜に記載された「♪=」の横のテンポ(地球星歌は約92、地球星歌は約66)を基準に計算します。</span>
         </div>
         <div class="tech-decoration">
         </div>