body {
    background-color: rgb(110, 208, 198);
}

#menu {
     background-color: rgb(110, 208, 198);
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    width: 1000px;
    height: 300px; /* ボタンの高さを300pxに設定 */
    display: flex; /* フレックスボックスを使って並べる */
    justify-content: space-between; /* アイテム間を均等に配置 */
    align-items: center; /* アイテムを縦に中央揃え */
}

#menu li {
    width: 300px;
    height: 300px; /* ボタンの高さも300pxに設定 */
    text-align: center;
    background-color: cadetblue;
    transition: all 0.3s ease-in-out;
    position: relative; /* 背景画像を入れるために相対位置を設定 */
    overflow: hidden; /* 画像がボタン外にはみ出さないようにする */
}

/* キャラクターのボタン */
#menu li.nintama {
    font-size: 300%;
    color: #000;
    text-decoration: none;
    display: block;
    background-image: url(image/キャラクター１.jpg); /* 初期の背景画像 */
    background-size: cover; /* 画像がボタン全体に合わせてリサイズ */
    background-position: center; /* 画像を中央に配置 */
    position: relative;
}

/* 映画のボタン */
#menu li.moive {
    font-size: 300%;
    color: #000;
    text-decoration: none;
    display: block;
    background-image: url(image/映画１.jpg); /* 初期の背景画像 */
    background-size: cover;
    background-position: center; /* 画像を中央に配置 */
    position: relative;
}

#menu li.musical {
    font-size: 300%;
    color: #000;
    text-decoration: none;
    display: block;
    background-image: url(image/ミュージカル１.jpg); /* 初期の背景画像 */
    background-size: cover; /* 画像がボタン全体に合わせてリサイズ */
    background-position: center; /* 画像を中央に配置 */
    position: relative;
}

/* キャラクターのボタンのホバー時 */
#menu li.nintama:hover {
    background-image: url(image/キャラクター２.jpg); /* ホバー時にキャラクター画像を変更 */
}

/* 映画のボタンのホバー時 */
#menu li.moive:hover {
    background-image: url(image/映画２.jpg); /* ホバー時に映画画像を変更 */
}

#menu li.musical:hover {
    background-image: url(image/ミュージカル２.jpg); /* ホバー時に映画画像を変更 */
}

/* リストアイテムにホバーした時に少し拡大する */
#menu li:hover {
    transform: scale(1.1); /* ホバー時に拡大 */
}

/* メニューアイテムのリンク設定 */
#menu li a {
    display: block;
    color: #000;
    text-decoration: none;
    font-size: 300px;
    padding-top: 300px; /* 文字をボタン内で調整 */
    font-family: Arial, sans-serif;
}

/* メニューアイテムに画像を追加した場合、画像にアニメーションをつける */
#menu li img {
    max-height: 100%; /* 画像がボタン内に収まるように */
    vertical-align: middle; /* 画像の縦位置を中央に */
    transition: transform 0.3s ease-in-out;
}

#menu li:hover img {
    transform: scale(1.2); /* 画像も少し拡大する */
}