/* 全体レイアウトの設定 */
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.menu-bar {
    display: flex;
    justify-content: center; /* メニュー全体を中央に寄せる */
    background-color: #149C7C; /* メニューバーの背景色 */
    padding: 10px; /* メニューバーの内側の余白 */
}

.menu-bar ul {
    display: flex;
    list-style: none; /* リストのスタイルをなしにする */
    padding: 0; /* リストの内側の余白をなくす */
    margin: 0; /* リストの外側の余白をなくす */
    width: 840px; /* メニューバーの横幅を300pxに設定 */
    justify-content: space-between; /* リスト内の各項目を均等に配置 */
    height: 100%; /* 高さを親要素に合わせる */
    align-items: center; /* 垂直方向の中央揃え */
}

.menu-bar li {
    flex: 1; /* 各リストアイテムが均等に幅を取る */
    text-align: center; /* テキストを中央に配置 */
}

.menu-bar a {
    color: white; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    display: block; /* リンクをブロック要素にすることで全体をクリック可能にする */
    padding: 10px 0; /* リンク内のパディング */
}

/* スマートフォン用のレスポンシブデザイン */
@media (max-width: 768px) {
    .menu-bar li:nth-child(3), /* 利用規約のリストアイテム */
    .menu-bar li:nth-child(4) { /* お問い合わせのリストアイテム */
        display: none; /* 非表示にする */
    }
}