/* 基本スタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

/* ナビゲーションスタイル */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* 横並びに表示 */
    flex-wrap: wrap;
}

nav ul li {
    padding: 10px;
    background: lightgray;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* レスポンシブデザインのスタイル */
@media screen and (max-width: 639px) {
    body {
        background-color: lightcoral;
    }

    nav ul {
        flex-direction: column; /* 縦並びに変更 */
    }
}

@media only screen and (min-width: 640px) and (max-width: 1023px) {
    body {
        background-color: lightblue;
    }

    nav ul {
        flex-direction: row; /* 横並びを維持 */
    }
}

@media screen and (min-width: 1024px) {
    body {
        background-color: lightgreen;
    }

    nav ul {
        flex-direction: row; /* 横並びを維持 */
    }
}