*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Noto Sans JP', sans-serif;
    
    /*
    background:#f5f5f5;
     */
    background:#fff;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 30px;
    /*
    background:#1f2937;
    */
    background:#ffffff;
    color:white;
}

.logo img{
    height:50px;
}

nav{
    display:flex;
    gap:15px;
}

.nav-btn{
    border:none;
    background:none;
    color:#1f2937;
    cursor:pointer;
    font-size:15px;
}

.nav-btn:hover{
    color:#60a5fa;
}

main{
    padding:40px;
}

.page{
    display:none;
}

.page.active{
    display:block;
}

.accordion{
    margin-bottom:10px;
    background:white;
    border-radius:8px;
    overflow:hidden;
}

.accordion-header{
    width:100%;
    text-align:left;
    padding:15px;
    border:none;
    cursor:pointer;
    background:#3d9acf;
    color:white;
    font-size:16px;
    font-family: 'Noto Sans JP', sans-serif;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
}

.accordion-content ul{
    list-style:none;
}

.accordion-content li {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    color: #3d9acf;
    font-size: 14px;
}

.item-facility {
       
    width: 100px;        /* 1列目の横幅を固定 */
    flex-shrink: 0;      /* 画面が狭くなっても1列目が潰れないように */
    color: #686868;
}

@media(max-width:768px){

    header{
        flex-direction:column;
        gap:15px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .item-facility {
       
    width: 100px;        /* 1列目の横幅を固定 */
    flex-shrink: 0;      /* 画面が狭くなっても1列目が潰れないように */
}

}

@media(max-width:500px){
    header{
        flex-direction:column;
        gap:15px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .item-facility {
       
    width: 150px;        /* 1列目の横幅を固定 */
    flex-shrink: 0;      /* 画面が狭くなっても1列目が潰れないように */
}

}

@media (max-width:500px){

.item-facility{
    flex:0 0 100px;
}

}


@media(min-width:769px){

    .item-facility {
       
    width: 300px;        /* 1列目の横幅を固定 */
    flex-shrink: 0;      /* 画面が狭くなっても1列目が潰れないように */
}

}