@import "./construction.css";

/*----------------------------------

 地図

----------------------------------*/
/*****************************
 凡例
 *****************************/
#explanatory{
	display:block;
	overflow:hidden;
}


#explanatory > ul{
	display:flex;
	gap:0.5em 1em;
	justify-content:center;
}

#explanatory > ul > li{
	white-space:no-wrap;
}

#explanatory > ul > li > span{
	display:inline-block;
	overflow:hidden;
	position:relative;
}

#explanatory > ul > li > span[class^='cl-']{
	width:60px;
	height:20px;
	margin-right:5px;
}

.cl-const{
	background-color:#999999;
}
.cl-day{
	background-color:#99fc99;
}
.cl-night{
	background-color:#6766cc;
}
.cl-all{
	background-color:#ff3333;
}
.cl-ic{
	/**/
}

#explanatory > ul + p{
	float:right;
	marign:0 0 1em;
}

/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#explanatory > ul{
		flex-wrap:wrap;
		justify-content:initial;
	}

	#explanatory > ul + p{
		float:none;
	}

}



/*****************************
 地図本体
 *****************************/
#map_wrap{
	position:relative;
}

#map_base{
	margin:0 auto;
	border:1px solid #333333;;
}

#map_base a:has(img) {
	display:inline-block;
	overflow:hidden;
	line-height:100%;
	font-size:0;
}

#map_base a img{
	pointer-events:initial;
	z-index: 23!important;
}



/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#map_wrap{
		width:100%;
		height:300px;
		overflow:scroll;
		border:1px solid #333333;;
	}

	#map_base{
		border:unset;
	}

}


/*****************************
 地図説明
 *****************************/
#mapinfo-img{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:10px;
	left:calc(50% - 490px);
	z-index:10;
}

.mp_3 #mapinfo-img{
	top:auto;
	left:auto;
	bottom:10px;
	right:calc(50% - 490px);
}


#mapinfo-txt{
	display:none;
	text-align:left;
	font-size:var(--txt-s);
	line-height:125%;
	margin-bottom:1em;
}

/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#mapinfo-img > img{
		display:none;
	}

	#mapinfo-txt{
		display:block;
	}

}


/*----------------------------------

 新着工事規制一覧

----------------------------------*/
#traffic_info > dl{

}

#traffic_info > dl > dt,
#traffic_info > dl > dd{
	display:block;
	overflow:hidden;
	float:left;
}

#traffic_info > dl > dt{
	width: 5em;
	clear:both;
}

#traffic_info > dl > dd{
	width:calc(100% - 5em);
	margin-bottom:0.5em;
}



/* for Sp --------------------*/
@media screen and ( max-width:768px) {


}