diff --git a/index.html b/index.html
index f3da91b..cf0ca1f 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
       </p>
       <div class="hamburger-menu">
         <input type="checkbox" id="menu-btn-check" style="display: none;">
-        <label for="menu-btn-check" class="menu-btn" style="  position: fixed;top: 10px;right: 10px;display: flex;height: 60px; width: 60px;justify-content: center;align-items: center;z-index: 90;background-color: #59b0ee;"><span></span></label>
+        <label for="menu-btn-check" class="menu-btn" style="  position: fixed;top: 10px;right: 10px;display: flex;height: 50px; width: 80px;justify-content: center;align-items: center;z-index: 90;background-color: #59b0ee;"><span style="color: #fff;">背景変更</span></label>
         <!--ここからメニュー-->
         <div class="menu-content">
             <ul>
diff --git a/jstrr.css b/jstrr.css
index 3f76631..054ac3e 100644
--- a/jstrr.css
+++ b/jstrr.css
@@ -126,58 +126,50 @@
 #ranking-table tr.me {background: #fee;}
 .warn {background: #f99;}
 
-.menu-btn {
+label.menu-btn {
   position: fixed;
   top: 10px;
   right: 10px;
   display: flex;
-  height: 60px;
+  height: px;
   width: 60px;
   justify-content: center;
   align-items: center;
   z-index: 90;
   background-color: #59b0ee;
 }
-.menu-btn span,
-.menu-btn span:before,
-.menu-btn span:after {
-  content: '';
-  display: block;
-  height: 3px;
-  width: 25px;
-  border-radius: 3px;
-  background-color: #ffffff;
-  position: absolute;
+label.menu-btn span{
+  color: #fff;
 }
-.menu-btn span:before {
+label.menu-btn span:before {
   bottom: 8px;
 }
-.menu-btn span:after {
+label.menu-btn span:after {
   top: 8px;
 }
-#menu-btn-check{
+input#menu-btn-check{
   display: none;
 }
-#menu-btn-check:checked ~ .menu-btn span {
+input#menu-btn-check:checked ~ label.menu-btn span {
   background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
 }
-#menu-btn-check:checked ~ .menu-btn span::before {
+input#menu-btn-check:checked ~ label.menu-btn span::before {
   bottom: 0;
   transform: rotate(45deg);
 }
-#menu-btn-check:checked ~ .menu-btn span::after {
+input#menu-btn-check:checked ~ label.menu-btn span::after {
   top: 0;
   transform: rotate(-45deg);
 }
 
-.menu-content ul {
+div.menu-content ul {
   padding: 70px 10px 0;
 }
-.menu-content ul li {
+div.menu-content ul li {
   border-bottom: solid 1px #000;
   list-style: none;
 }
-.menu-content ul li a {
+div.menu-content ul li a {
   display: block;
   width: 30%;
   font-size: 15px;
@@ -187,7 +179,7 @@
   padding: 9px 15px 10px 0;
   position: relative;
 }
-.menu-content ul li a::before {
+div.menu-content ul li a::before {
   content: "";
   width: 7px;
   height: 7px;
@@ -198,7 +190,7 @@
   right: 11px;
   top: 16px;
 }
-.menu-content {
+div.menu-content {
   width: 30%;
   height: 100%;
   position: fixed;
@@ -208,10 +200,10 @@
   background-color: #ffffffc9;
   transition: all 0.5s;/*アニメーション設定*/
 }
-#menu-btn-check:checked ~ .menu-content {
+input#menu-btn-check:checked ~ div.menu-content {
   left: 70%;/*メニューを画面内へ*/
 }
-.bg-change{
+button.bg-change{
   border: none;
   background: #ffffffc9;
   padding: 10px 15px;