/* 全体の文字や余白を整える */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

/* タイトルのスタイル */
h1 {
    text-align: center;
    padding: 30px 0;
    margin: 0;
    color: #2c3e50;
    font-size: 28px;
}

/* ナビゲーションメニューのスタイル */
nav {
    background-color: #2c3e50; /* 落ち着いたダークブルーグレー */
}

nav ul {
    list-style: none; /* 箇条書きの黒丸を消す */
    margin: 0;
    padding: 0;
    display: flex; /* メニューを横並びにする */
    justify-content: center; /* 中央に寄せる */
}

nav ul li a {
    display: block;
    padding: 15px 40px;
    color: #ffffff; /* 文字色を白にする */
    text-decoration: none; /* リンクの下線を消す */
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s; /* マウスを乗せた時の変化をなめらかにする */
}

nav ul li a:hover {
    background-color: #34495e; /* マウスを乗せた時に少し明るくする */
}

/* 文章が入るメインエリアのスタイル */
main {
    max-width: 800px; /* 横幅が広がりすぎないように最大値を決める */
    margin: 0 auto;   /* 画面の中央に配置する */
    padding: 40px 20px; /* 上下（40px）と左右（20px）に余白を作る */
    line-height: 1.8; /* 行間を少し広げて読みやすくする */
}