@charset "UTF-8";

@import "./traffic_info.css";

/*/==========================================================
/ 
/ 過去の集中工事一覧
/
==========================================================/*/
#tinfo_bkn{

}

ul.const_list{
	display:flex;
	flex-wrap: wrap;
	flex-direction:column;
	overflow:hidden;
	gap:0.75em 0;
}

ul.const_list > li{
	display:block;
	overflow:hidden;
	clear:both;
	padding-top:0.75em;
	border-top:1px dotted #DDDDDD;
}

ul.const_list > li > a:has(img){
	display:inline-block;
	overflow:hidden;
}

ul.const_list > li > img,
ul.const_list > li > a:has(img){
	float:left;
	margin-right:1em;
}

ul.const_list > li > article{
	display:block;
	overflow:hidden;
}
ul.const_list > li h4{
	font-weight:700;
}


ul.const_list > li img{
	width: min(100%,300px);
	height: auto;
}



/*二段組*/
ul.const_list.compact{
	flex-direction:initial;
	gap:1em 2em;
}

ul.const_list.compact > li{
	width: calc(50% - 2em);
}

ul.const_list.compact > li img{
	width: min(100%,150px);
	height: auto;
}




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

	ul.const_list{
		display:flex;
		flex-wrap: wrap;
		flex-direction:column;
		overflow:hidden;
		gap:0.75em 0;
	}

	ul.const_list > li{
		padding-top:0.75em;
		border-top:1px dotted #DDDDDD;
		text-align:center;
	}

	ul.const_list > li > img,
	ul.const_list > li > a:has(img){
		float:unset;
		margin-right:0;
	}

	ul.const_list > li > article{
		display:block;
		overflow:hidden;
		text-align:left;
	}

	ul.const_list > li h4 + p{
		margin:0.5em 0 0;
	}

	ul.const_list.compact{
		justify-content:space-between;
		gap:5px 5px;
	}

	ul.const_list.compact > li{
		width: calc(50% - 5px);
	}

}