h3{font-size: 2rem;
    color: #fff;
    margin-bottom: 30px;
    position: relative;
    padding: .5em 0.7em;
    background-color: #2589d0;
    color: #fff;
    left: -40px;
    z-index: 100;
    font-family: serif;
    width: 98%;}
    h3:before {
        position: absolute;
        top: 100%;
        left: 0;
        border-bottom: solid 10px transparent;
        border-right: solid 20px #1579c0;
        content: '';
    }
    #sightseeing  a{word-break: break-word; }
    #sightseeing .wrap { display: flex; font-family: Arial, sans-serif; max-width: 1250px; margin: 50px auto; border-radius: 15px; border: solid 10px #f2f2f2;}
    #sidebar { width: 30%; padding: 20px; background: #9ed8ff; }
    #map { height: 70vh; width: 100%; position: relative;}
    .tab { cursor: pointer; padding: 10px; margin: 5px 0; background: #fff; text-align: center; border-radius: 5px; }
    #sidebar .active { background: #007bff; color: #fff;}
    #sidebar .active svg path{fill:#fff;}
    #sidebar .active svg circle{stroke: #fff;}
    #sidebar .active svg .cls2-2{stroke: #368578;}
    .icon { width: 30px; height: 30px; margin-right: 8px; vertical-align: middle; }
    #searchBox { width: 92%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; }
    .leaflet-marker-icon {
        opacity: 0;
        transition: opacity 0.5s ease-in-out; /* フェードアニメーション */
    }

    .leaflet-marker-icon.fade-in {
        opacity: 1;
    }

    .leaflet-marker-icon.fade-out {
        opacity: 0;
    }
    .banner-area{
        display: flex;
        gap: 30px;
        max-width: 900px;
        margin: 50px auto;
    }
    .banner-area img{
        width: 100%;
    }
    @media screen and (max-width:767px) {
        #sightseeing .wrap { flex-wrap: wrap;}
        #map{height: 50vh;}
        #sidebar{width: 100%;}
    }

    #storeList {
        margin-top: 20px;
        padding: 10px;
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        border-radius: 5px;
        max-width: 1250px;
        margin: 0 auto 50px;
    }
    #storeList h4 {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 1.5em;
    }
    #storeListContainer h5 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #333;
        font-size: 1.2em;
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;
    }
    #storeListContainer ul {
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px;
        display: flex;
        flex-wrap: wrap;
        column-gap: 25px;
    }
    #storeListContainer li {
        padding: 10px;
        border: 1px solid #ddd;
        margin-bottom: 5px;
        background-color: #fff;
        border-radius: 3px;
        transition: background-color 0.3s;
        cursor: pointer;
        width: calc(90% / 3);
    }
    #storeListContainer li:hover {
        background-color: #f0f8ff;
    }
    @media screen and (max-width: 768px) {
        #storeListContainer ul{
            column-gap: 10px;
        }
        #storeListContainer h5 {
            font-size: 1em;
        }
        #storeListContainer li {
            padding: 8px;
            font-size: 0.9em;
            width: calc(82%/3);
            line-height: 15px;
        }
        .banner-area{
            width: 90%;
            flex-wrap: wrap;
        }
    }
    @media screen and (max-width: 480px) {
        #storeListContainer li {
            padding: 6px;
            font-size: 0.8em;
        }
    }