diff --git a/src/scripts/app.js b/src/scripts/app.js
index 1969132..20cdb12 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -8,6 +8,7 @@ import './components/app.tag'
 
 // init
 util.setRingSize()
+util.bindNav()
 
 // loading
 util.startLoading(() => {
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index 52f5e23..ef26ecc 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -67,6 +67,26 @@ export const setRingSize = () => {
   top_page__wrap.style.transform = `scale(${ per })`
 }
 
+/**
+ * ナビゲーションボタンホバー時のイベント監視
+ */
+export const bindNav = () => {
+  const navs = document.querySelectorAll('.top-page__global-nav a')
+
+  navs.forEach((nav, key) => {
+    /* mouseover ------------------------------------------------- */
+    nav.addEventListener('mouseover', e => {
+      const color = e.target.getAttribute('data-color')
+      top_page.setAttribute('data-color', color)
+    })
+
+    /* mouseout -------------------------------------------------- */
+    nav.addEventListener('mouseout', e => {
+      top_page.setAttribute('data-color', '')
+    })
+  })
+}
+
 /**
  * ロードの開始タイミングを取得
  * @param fn : コールバック関数