* {
    box-sizing: border-box; /* box-sizingの設定 */
}

body {
  margin: 0;
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
    background-color: #2b3e2f; /* ダークグリーン背景 */
    color: #f1f1f1; /* 明るい文字色 */
}

body, html {
    overflow-x: hidden;
}
/* キャンバスの枠線を追加して、範囲をわかりやすくする */
        #gameCanvas {
            border: 2px solid #000; /* 黒い枠線 */
            display: block;
            margin: 100px auto 0 auto; /* 上部に20pxのマージンを追加、左右中央寄せ */
        }
nav {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 0;
   text-align: center;
   z-index: 100;
   display: flex;
   justify-content: center;
   align-items: center;
   height: auto;
}

nav a {
   color: white;
   padding: 14px 20px;
   text-decoration: none;
   font-size: 18px;
   font-weight: bold;
}

nav a:hover {
   background-color: #4b7a41;
}

.hamburger-icon {
   display: none;
   cursor: pointer;
   font-size: 30px;
   color: white;
   position: absolute;
   right: 20px;
   top: 10px;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 10px;
   border-radius: 5px;
   z-index: 1001;
}

@media (max-width: 768px) {
   .nav-links {
       display: none;
       list-style: none;
       width: 100%;
       text-align: left;
       padding: 0;
   }

   .hamburger-icon {
       display: block;
       right: 20px;
       top: 10px;
   }

   .nav-links.show {
       display: block;
       width: 100%;
   }

   .nav-links li {
       width: 100%;
   }

   .nav-links a {
       display: block;
       padding: 12px 20px;
       font-size: 16px;
   }
}

footer {
   text-align: center;
   padding: 20px;
   background-color: #1b2a1f;
   color: white;
   font-size: 0.9rem;
   width: 100%; /* 画面幅に合わせて100%に変更 */
   margin-top: auto; /* フッターを下に配置 */
}

footer a {
   color: #a1c349;
   text-decoration: none;
}

footer a:hover {
   text-decoration: underline;
}

.footer {
   background-color: black;
   padding: 20px 0;
   text-align: center;
}

.footer-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.footer-links li {
   margin: 10px 15px;
}

.footer-link {
   text-decoration: none;
   color: white;
   font-size: 1.2rem;
   transition: color 0.3s ease-in-out;
}

.footer-link:hover {
   color: #a1c349;
}

.copyright {
   margin-top: 20px;
   color: white;
   font-size: 1rem;
}

@media (max-width: 768px) {
   .footer-links {
       display: block;
       margin-top: 20px;
   }

   .footer-links li {
       margin: 10px 0;
   }

   .footer-link {
       font-size: 1.1rem;
       margin-bottom: 10px;
   }

   .copyright {
       font-size: 0.9rem;
       margin-top: 30px;
   }
}
/* スコアとボタン用のラップ要素 */
    .score-board {
        display: flex;
        justify-content: space-around; /* スコアとボタンを横に並べる */
        align-items: center;
        margin-top: 20px; /* キャンバスとの間にスペース */
        margin-bottom: 20px;
    }

    .score-board div {
        font-size: 18px; /* テキストのサイズ */
    }

    /* ボタンのスタイル */
    .score-board button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .score-board button:hover {
        background-color: #45a049; /* ボタンホバー時の色 */
    } /* モバイル向けの最適化 */
    @media (max-width: 768px) {
        /* スコアとボタンを縦に並べる */
        .score-board {
            flex-direction: column; /* 縦並び */
            align-items: center;
        }

        .score-board div {
            font-size: 16px; /* スコアテキストのサイズを少し小さくする */
            margin-bottom: 10px; /* 各要素の間にスペース */
        }

        .score-board button {
            width: 100%; /* ボタンを幅いっぱいに */
            max-width: 300px; /* ボタンの最大幅を300pxに制限 */
            padding: 12px; /* ボタンのパディングを増やす */
        }
    }

    /* より小さなデバイス向けに調整 (例: スマートフォン) */
    @media (max-width: 480px) {
        .score-board div {
            font-size: 14px; /* スコアのフォントサイズをさらに小さくする */
        }

        .score-board button {
            padding: 10px; /* ボタンのパディングをさらに調整 */
        }
    }