/* ============================================ */
/* menu.css ― メニュー共通パーツ専用スタイル       */
/* （menu.html の中身の見た目を担当）             */
/* ============================================ */

/* ===== メニュー本体 ===== */
.menu {
    background-image: url("image/navibg3.jpg");   /* ← フルURLから相対パスへ */
    background-repeat: repeat;
    background-size: 260% auto;
    background-color: #eeeeee;
    padding: 23px;
    position: sticky;   /* ★スクロールで画面上部に貼り付く */
    top: 0;             /* ★画面の一番上で固定 */
    align-self: flex-start;  /* ★Flexの場合、高さが伸びるのを防ぐ */
    max-height: 100vh;       /* ★画面高さを超えたらメニュー内をスクロール */
    overflow-y: auto;        /* ★メニューが長い場合は内部スクロール */

}
.menu .menu-title {
    text-align: center;
    font-weight: bold;
    padding: 10px 0px;
    color: #333333;
    background-color: rgba(192, 243, 255, 0.85);
    border-radius: 10px 10px 0 0;
}
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    border-bottom: 1px solid #cccccc;
    background-color: rgba(238, 238, 238, 0.85);
}
.menu li:last-child {
    border-bottom: none;
}
.menu a {
    display: block;
    padding: 14px 12px;
    text-decoration: none;
    font-size: 16px;
}
.menu a:hover {
    background-color: rgba(238, 238, 238, 0.5);
    border-radius: 15px;
}
.menu .city-logo {
    text-align: center;
    padding: 12px 0;
}

/* ===== スマホ用ロゴ（最下部・メニューの一部） ===== */
.city-logo-sp {
    text-align: center;
    background-image: url("image/navibg3.jpg");   /* ← フルURLから相対パスへ */
    background-repeat: repeat;
    background-size: 260% auto;
    background-color: #eeeeee;
    padding: 15px 0;
}

/* ===== PC（広い画面）でのメニュー ===== */
@media (min-width: 768px) {
    .menu {
        width: 250px;
        flex-shrink: 0;
        min-height: 100vh;
        border-right: 2px solid #557da9;
    }
    .menu a {
        padding: 12px 10px;
        font-size: 12px;
    }
    /* PCではスマホ用ロゴを隠す → メニュー内ロゴを使用 */
    .city-logo-sp {
        display: none;
    }
}

/* ===== スマホ（狭い画面）でのメニュー ===== */
@media (max-width: 767px) {
    .menu {
        border-bottom: 2px solid #557da9;
    }
    /* スマホではメニュー内（PC用）ロゴを隠す */
    .city-logo-pc {
        display: none;
    }
    /* メニューを3列組みに */
    .menu ul {
        display: flex;
        flex-wrap: wrap;
    }
    .menu li {
        width: 33.33%;
        border-bottom: 1px solid #cccccc;
    }
    .menu a {
        padding: 8px 4px;
        font-size: 12px;
        text-align: center;
    }
}