/* CSS Document */

/* sp View   ～768px  ----------------------------------------------------------------------------------------------*/
section>.sub_title{
    font-size: 24px;
    color: var(--secondary-color);
    margin: 1em auto;
}
ul,li{
    width: fit-content;
}
#bus_course{
    width: fit-content;
    margin: 2em auto;
}
#bus_course ul{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 auto 1em;
}
#bus_course ul li strong::before{
    content: "●";
    margin-right: 0.25em;
}
#bus_course ul li{
    line-height: 1.5em;
}
/*#bus_course ul li:nth-child(1)::after{
    content: "";
    margin-left: 2em;
}
#bus_course ul li:nth-child(2)::before{
    content: "";
    margin-left: 1em;
}*/

#bus_course ul li strong {
    display: block;
    color: #333;
    font-weight: bold;
}
#bus_course ul li span{
    display: block;
    padding-left: 1em;
}
#bus_course img{
    width: 320px;
    height: auto;
   /* margin: 1em;*/
/*    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    border-radius: 10px; */

}
.map{
    width: 100%;

}
.map iframe {
    width: 100%;
    height: 100vh;
}
.map .map_menu{
    display: none;
}

.map-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
    margin-bottom: 2em;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#s1 .responsive_text{
    font-size: 20px;
}

/*--- Tablet View ---------------------------------------------------------------------------------------------------------*/
@media (min-width: 768px){
    #s1 .responsive_text{
        font-size: 24px;
    }
    #bus_course ul {
        display: block;
    }
    #bus_course ul li strong,#bus_course ul li span{
        display: inline;
    }
    
    #container_map{
        position: relative;        
    }
    .map_menu{
        display: block;
        position: absolute;
        top: -40px;
        left:90px;
        z-index: 10;
    }
    .map_menu img{
        width: 60px;
        height: auto;
    }
    .map {
        margin-top: 60px;
        position: relative;
        width: calc(100% - 100px);
        height: 90vh;
        /*padding-top: 56.25%;*/
        padding-top: 0;
        overflow: hidden;
        margin-right: 120px;
    }
    .map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /*width: calc(100% - 360px);*/
        margin-left: 120px;
        /*height: calc(100% + 360px);*/
        height: 100%;
        /*margin-top: -170px;*/
        border: 1px solid #fff;
        z-index: 1;
    }
    .map-responsive {
        width: 80%;
        height: 540px;
        margin: auto;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
}