@charset "utf-8";
/* CSS Document */
.camera-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.camera-flex a:hover {
opacity: 0.5;
}

.camera-flex .camera {
width: calc((100% - 60px) / 3);
margin-bottom: 20px;
}

.camera_name span {
display: inline-table;
line-height: 1.25em;
font-weight: bold;
}
.camera_name span br {
display: none;
}
.camera_img {
position: relative;
width: 100%;
}
.camera_img:before {
	content:"";
	display: block;
	padding-top: 60%; /* 3:5の縦横比の場合3/5=0.6×100で60% */
}
.camera_img img {
position: absolute;
width: 100%;
height: 100%;
margin-top: 5px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.road9 h2{background: #e60012 !important;}
.road9 .number{color: #e60012 !important;}
.road27 h2{background: #009944 !important;}
.road27 .number{color: #009944 !important;}

@media screen and (max-width:768px){
.camera-flex .camera {
width: calc((100% - 1em) / 2);
margin-bottom: 1em;
}
.image_map {
	display: none;
}
}
@media screen and (max-width:500px){
.camera_name span br {
display: block;
}
}

img.cam {
margin: 1em 0;
}