/* ベースのスタイル */
ul {
    list-style: none; /* リストマーカーを非表示 */
    padding: 0; /* パディングをゼロに */
    margin: 0; /* マージンをゼロに */
}

/* 1階層目のメニューバー全体 */
.menu.ul-level-1 {
    display: flex; /* フレックスボックスを使用 */
    background: linear-gradient(to bottom, #005f8a, #004060); /* 暗いトーンの縦方向グラデーション */
    border-radius: 20px; /* 丸みを帯びた角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 立体感を持たせるシャドウ */
    height: 28px; /* メニューバーの高さを約2/3に縮小 */
    align-items: center; /* 項目を垂直方向中央に配置 */
    padding: 0 10px; /* 左右に少しパディングを追加 */
}

/* 1階層目のリストアイテム（個々のメニュー項目） */
.ul-level-1 > li {
    position: relative; /* ドロップダウンの基準位置に */
    /* li要素自体にはマージンを設定せず、a要素のパディングで調整 */
}

/* トップレベルのa要素（メニューバーの項目） */
.ul-level-1 > li > a { /* ul-level-1の直下のliの直下のaにのみ適用 */
    display: block; /* リンクをブロック要素に */
    padding: 3px 15px; /* 上下パディングを調整し、左右のパディングを保持 */
    text-decoration: none; /* 下線を無くす */
    color: white; /* テキストの色 */
    transition: background-color 0.3s, transform 0.3s; /* ホバー時の背景色変化とアニメーション */
    border-radius: 20px; /* 丸みを帯びたボタン */
    font-size: 12px; /* 文字サイズを調整（小さくする） */
    line-height: 22px; /* height: 28px - padding-top: 3px - padding-bottom: 3px = 22px */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* 1階層目のリンクホバー時のスタイル */
.ul-level-1 > li > a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* ホバー時の背景色 */
    transform: translateY(-1px); /* わずかに上に浮き上がる効果 */
}

/* ドロップダウンメニューのコンテナ（親のli要素） */
.menu-content {
    position: relative; /* ドロップダウン用に相対位置を設定 */
}

/* ドロップダウンメニュー (ul-level-2) */
.ul-level-2 {
    display: none; /* ドロップダウンメニューを初期非表示に */
    position: absolute; /* 絶対配置 */
    left: 0; /* 左寄せ */
    top: 100%; /* 親要素（li.menu-content）の下に配置 */
    background: #ffffff; /* ホワイトの背景 */
    border-radius: 5px; /* 丸い角 */
    margin-top: 5px; /* 親要素との間に少し隙間 */
    width: 150px; /* ドロップダウンの幅はそのまま */
    border: 1px solid #ccc; /* 枠線 */
    z-index: 1000; /* 前面に表示 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ドロップダウンのシャドウ */
    padding: 5px 0; /* ドロップダウン全体の上下に少しパディングを追加 */
    box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */

    /* アニメーション関連 */
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(10px); /* 初期状態は少し下に */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* アニメーション */
}

/* 親メニュー項目ホバー時にドロップダウンを表示 */
.menu-content:hover > .ul-level-2 { /* 直下のul-level-2にのみ適用 */
    display: block; /* ホバー時にドロップダウン表示 */
    opacity: 1; /* 不透明に */
    transform: translateY(0); /* 元の位置に戻す */
}

/* ドロップダウン内の各リストアイテム (ul-level-2 > li) */
.ul-level-2 > li {
    display: block; /* li要素もブロック要素として振る舞うことを明示 */
    width: 100%; /* 親要素の幅に合わせる */
    position: relative; /* 3階層目の基準位置に */
}

/* ドロップダウン内の項目 (ul-level-2 > li > a) */
.ul-level-2 > li > a { /* ul-level-2の直下のliの直下のaにのみ適用 */
    display: block; /* リンクをブロック要素に */
    padding: 6px 15px; /* ドロップダウン項目の上下パディングを約1/2に縮小 */
    text-decoration: none; /* 下線を無くす */
    color: black; /* ドロップダウン項目のテキスト色 */
    border-radius: 3px; /* 丸い角を少し抑える */
    font-size: 12px; /* 文字サイズを調整（小さくする） */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    transition: background-color 0.2s, color 0.2s; /* ホバー時のアニメーション */
}

/* 2階層目のリンクホバー時のスタイル */
.ul-level-2 > li > a:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
    color: #007bff; /* ホバー時のテキスト色 */
}

/* 3階層目のメニュー (ul-level-3) */
.ul-level-3 {
    display: none; /* 初期状態では非表示 */
    position: absolute; /* 絶対配置 */
    left: 100%; /* 親の右に表示 */
    top: -5px; /* 親のアイテムと少し重なるように調整 */
    background: #ffffff; /* ホワイトの背景 */
    border-radius: 5px; /* 丸い角 */
    width: 150px; /* 幅を指定 */
    border: 1px solid #ccc; /* 枠線 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* シャドウ */
    padding: 5px 0; /* 上下のパディング */
    box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */

    /* アニメーション関連 */
    opacity: 0; /* 初期状態は透明 */
    transform: translateX(10px); /* 初期状態は少し右に */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* アニメーション */
}

/* 2階層目のリストアイテムにホバーしたときの3階層目の表示 */
.ul-level-2 > li:hover > .ul-level-3 {
    display: block; /* ホバー時に表示 */
    opacity: 1; /* 不透明に */
    transform: translateX(0); /* 元の位置に戻す */
}

/* 3階層目のリンクスタイル */
.ul-level-3 > li > a {
    display: block; /* ブロック要素に */
    padding: 6px 15px; /* パディング調整 */
    color: black; /* テキストの色 */
    text-decoration: none; /* 下線を無くす */
    border-radius: 3px; /* 丸い角 */
    font-size: 11px; /* さらに少し小さく */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    transition: background-color 0.2s, color 0.2s; /* ホバー時のアニメーション */
}

/* 3階層目のリンクホバー時のスタイル */
.ul-level-3 > li > a:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
    color: #007bff; /* ホバー時のテキスト色 */
}