@charset "utf-8";
/* CSS Document */
/*---------------------------------------------------------------
html body and base setting
--------------------------------------------------------------- */
html {
    font-size:62.5%;
    padding:0;
    margin:0;
    width:100%;
}
body {
    position:relative;
    overflow: hidden;
    font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	line-height: 1.4;
	background: #fff;
    color:#333;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    width:100%;
    height:100%;
    margin:auto;
	text-rendering: optimizeLegibility;
    font-kerning: normal;               
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern", "liga", "clig", "calt";
}
body::after {
  content: none;
}



/*gmap*/
.gmap_wrap {
	display: flex;
	width: 100%;
	overflow: hidden;
}
@media screen and (max-width: 991px) {
	.gmap_wrap {
		flex-flow: wrap;
	}
}

#gmap {
	width: 65%;
	min-height: 600px;
    max-height: 100vh;
}
#gmap span.num {
	display: none;
}
#gmap .flex{
	font-family: 'Noto Serif JP', serif;
	font-size: 1.4rem;
}
#gmap .flex .times{
	margin-top: .5rem;
	font-size: 1.2rem;
}
/*#gmap button{
	width: 20px;
    height: 20px;
	top: 0;
    right: 0;
    outline: none;
}*/
@media screen and (max-width: 991px) {
	#gmap {
		width: 100%;
		min-height: 450px;
	}
}
@media screen and (max-width: 767px) {
	#gmap {
		width: 100%;
		min-height: 350px;
	}
}
/* markerArea */
#markerArea {
	-ms-overflow-style: none;
	scrollbar-width: none;
	width: 37%;
	padding: 30px;
	height: 600px;
	overflow-y: scroll;
}
#markerArea::-webkit-scrollbar{  
	display:none;
}
.marker_list{
	font-size: 1.2rem;
  padding: 0 20px;
}
.marker_list > li {
	transition: all .3s;
	cursor: pointer;
}
.marker_list > li:hover {
	opacity: .75;
}

.marker_list > li + li{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0,0,0,.1); 
}
.marker_list > li:last-child {
    display: none;
}

.marker_list .flex{
	display: flex;
}
.marker_list .flex .num{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 1rem;
	font-size: 1.3rem;
	border-radius: 100%;
    background: #c98e5a;
	color: #fff;
}
.marker_list .flex >div:not(.times){
	flex: 1;
}
.marker_list .flex .times{
	width: 120px;
	margin:0 0 0 auto;
    text-align: right;
}

@media screen and (max-width: 991px) {
	#markerArea {
		width: 100%;
		padding: 20px 0;
	}
}