@charset "utf-8";
/* CSS Document */
/* メニューバー全体のスタイル */
.main-nav {
    background-color: #cfa972; /* メニューバーの背景色 */
    padding: 10px 0;
    text-align: center;
}

.main-nav ul {
    list-style: none; /* リストの点（・）を非表示にする */
    margin: 0;
    padding: 0;
    display: flex; /* メニュー項目を横並びにする */
    justify-content: center; /* 中央揃え */
}

.main-nav li {
    margin: 0 15px; /* メニュー項目間の余白 */
}

/* メニューリンクの基本スタイル */
.main-nav a {
    color: #fff; /* 通常時の文字色 */
    text-decoration: none; /* 下線を非表示にする */
    padding: 10px 15px; /* リンクのクリック可能な範囲を広げる */
    display: block; /* paddingが効くようにブロック要素にする */
    border-radius: 5px; /* 角を少し丸くする */
    transition: background-color 0.3s ease, color 0.3s ease; /* ★ここがポイント：色の変化を滑らかにする */
}

/* ★ここがポイント：ホバー時のスタイル */
.main-nav a:hover {
    background-color: #b28850; /* ホバー時の背景色 */
    color: #fff; /* ホバー時の文字色（背景色に合わせて調整） */
    /* text-decoration: underline; */ /* ホバー時に下線を表示したい場合 */
}

/* アクティブなページを示すスタイル（任意） */
/* 例: 現在のページへのリンクに 'active' クラスを付与した場合 */
.main-nav a.active {
    background-color: #0056b3; /* アクティブなページの背景色 */
    color: #fff;
}