/* 基本的なスタイルリセット */
body {
    font-family: sans-serif; /* お好みのフォントに */
    margin: 0;
    padding: 40px; /* メニューが見やすいように余白を追加 */
    background-color: #f4f4f4; /* 背景色 */
}

.cool-menu {
    background-color: #333; /* メニューバーの背景色 */
    border-radius: 5px; /* 角を少し丸める */
    overflow: hidden; /* 角丸めのために必要 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を付ける */
}

.cool-menu ul {
    list-style: none; /* リストの点を消す */
    margin: 0;
    padding: 0;
    display: flex; /* メニュー項目を横並びにする */
    justify-content: center; /* 中央揃えにする場合 */
    /* justify-content: flex-start; 左揃えにする場合 */
}

.cool-menu li {
    /* 各メニュー項目の間隔は下の a タグの padding で調整 */
}

.cool-menu a {
    display: block; /* クリック範囲を広げる */
    padding: 15px 25px; /* 上下の余白、左右の余白 */
    color: #fff; /* 文字色 */
    text-decoration: none; /* 下線を消す */
    position: relative; /* ホバーエフェクトの基準位置 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 背景色と文字色の変化を滑らかに */
}

/* ホバー時のスタイル */
.cool-menu a:hover {
    background-color: #555; /* ホバー時の背景色 */
    color: #eee; /* ホバー時の文字色 */
}

/* ホバー時に下線アニメーションを追加 */
.cool-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* 下線なので下に配置 */
    width: 100%;
    height: 3px; /* 下線の太さ */
    background-color: #00aaff; /* 下線の色 */
    transform: scaleX(0); /* 初期状態では非表示 (幅を0に) */
    transform-origin: center; /* 中央から広がるように */
    transition: transform 0.3s ease-out; /* アニメーション */
}

.cool-menu a:hover::after {
    transform: scaleX(1); /* ホバー時に表示 (幅を100%に) */
}