nav ul {
  list-style: none; /* リストのデフォルトの点を消す */
  padding: 0; /* パディングを0にする */
  margin: 0; /* マージンを0にする */
  display: flex; /* フレックスボックスを使って横並びにする */
}

nav li {
  margin-right: 20px; /* 項目間のスペースを調整 */
}

.logout-button {
     margin-left: auto; /* ログアウトボタンを右寄せにする */ 
     }

body {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    min-height: 100vh; /* ビューポートの高さを最小値に設定 */
    margin: 0;
    background-color: #CCFFCC;
}

.center-text {
  text-align: center;
}

main {
    flex: 1; /* メインコンテンツが残りのスペースを占めるようにする */
}


h1 {
    margin-bottom: 20px; /* h1とフォームの間に余白を追加 */
    font-family: 'GlimChe', sans-serif; /* GlimCheフォントを指定 */
    color: #009933; /* フォントカラーを指定 */
    font-size: 20px
    
}

h2 {
    margin-bottom: 20px; /* h1とフォームの間に余白を追加 */
    font-family: 'GlimChe', sans-serif; /* GlimCheフォントを指定 */
    color: #009933; /* フォントカラーを指定 */
    justify-content: center;
}

form {
    display: inline-block;
    width: auto; /* 必要に応じて幅を自動調整 */
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none; /* リストのスタイルをリセット */
    padding: 0; /* パディングをリセット */
}

li {
    margin: 10px 0; /* リストアイテムの間に余白を追加 */
}

footer {
    background-color: #009933; /* フッターの背景色を#009933に変更 */
    position: relative; /* 固定しない */
    left: 0;
    bottom: 0; /* 下に固定 */
    width: 100%; /* 幅を100%に変更 */
    color: #fff;
    text-align: left; /* 左寄せに変更 */
    padding: 10px 0;
}

footer h3 {
    font-size: 1em; /* h3の文字の大きさを通常のサイズに設定 */
}

footer a {
    font-size: 0.9em; /* h3より少し小さいサイズに設定 */
}

.image-container {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央に配置 */
    flex-wrap: wrap; /* 行がいっぱいになったら折り返す */
}

.image-container img {
   width: 30%; /* 各画像の幅を設定 */
   margin: 10px; /* 画像の間にスペースを作る */
}
