@charset "utf-8";
/* CSS Document */

body {
font-family:"biz-udpgothic","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ ",Meiryo,"MS ゴシック",sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
}

/* gmap
---------------------------*/
#gmap {
box-sizing: border-box;
width: 63% !important;
height: 90% !important;
}
#gmap span {
display: none;
}


/* markerArea
---------------------------*/
#markerArea {
width: 35%;
}

#marker_list{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
counter-reset:number;
list-style: none!important;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: "Noto serif jp", serif;
font-weight: 400;
}


#marker_list li {
width: 100%;
padding: 20px 5px 20px 35px;
margin: 0 0 0 0;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
border-bottom: dotted 1px #ccc;
font-size: 13px;
position: relative;
transition : all 0.5s ease 0s;
cursor: pointer;
}

#marker_list li span {
display: block !important;
font-size: 12px;
}

#marker_list li span.dpb {
display: block !important;
width: 100%;
}

#marker_list li:hover {
background-color: #f0f0f0 !important;
}

#marker_list li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
color: white;
font-weight:bold;
font-size: 12px;
line-height: 25px;
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
top: 20px;
left: 0;
}

#marker_list.nb_shoping li:before,
#marker_list.nb_park li:before,
#marker_list.nb_education li:before,
#marker_list.nb_medical li:before,
#marker_list.nb_culture li:before,
#marker_list.nb_public li:before{
background: #827959;
}

#marker_list li:hover{
background-color: #fff;
}

@media screen and (max-width : 896px) {

#gmap {
width: 100% !important;
height: 400px !important;
}

#markerArea {
width: 100%;
padding: 0 0;
}

#marker_list li {
width: 98%;
padding: 10px 5px 10px 30px;
font-size: 1.3rem;
align-items: flex-start !important;
flex-direction: column;
}

#marker_list li span {
font-size: 1rem;
display: block;
}

}