/* CSS Document */

:root{
	--base-color: #4d4d4d;
	--primary-color: #b9840c;
	--font-min: "游明朝", YuMincho, 'Yu Mincho', "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ＭＳ 明朝", serif;
	}

#wrapper{
	overflow: clip;
	}

#congestionMap{
	padding: 0;
	}
	#congestionMap header{
		padding: 0;
		}
	#congestionMap svg{
		width: 100%;
		height: auto;
		background: #f2ecc2;
		vertical-align: bottom;
		}
	#congestionMap h2{
		display: flex;
		align-items: center;
		grid-gap: 0.5em;
		padding: 1em 0.8em;
		background: #1a1a1a;
		color: #fff;
		font-size: 1.5em;
		font-family: var(--font-min);
		font-weight: bold;
		}
		#congestionMap h2:before{
			content: "";
			width: 4px;
			height: 1em;
			background: #c65819;
			}
	#congestionMap p{
		margin-top: 1em;
		}

#areaMap{}
	#areaMap a{
		fill: transparent;
		cursor: pointer;
		}

#areaSelect{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	grid-gap: 0.5em;
	width: var(--wrap);
	margin: 1em auto;
	padding: 0;
	}
	#areaSelect dl{
		cursor: pointer;
		}
	#areaSelect dt{
		display: flex;
		align-items: center;
		justify-content: space-between;
		grid-gap: 0;
		padding: 0.6em 0.8em;
		background: var(--primary-color);
		border-radius: 4px 4px 0 0;
		color: #fff;
		font-family: var(--font-min);
		font-weight: bold;
		text-align: center;
		}
		#areaSelect dt:before{
			content: "";
			flex: 0 0 1em;
			width: 1em;
			height: 1em;
			margin-left: auto;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 13"><path d="M.5,13c-.13,0-.26-.05-.35-.15-.2-.2-.2-.51,0-.71L5.79,6.5,.15,.85C-.05,.66-.05,.34,.15,.15S.66-.05,.85,.15L6.85,6.15c.2,.2,.2,.51,0,.71L.85,12.85c-.1,.1-.23,.15-.35,.15Z"/></svg>');
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			background: #fff;
			transform: translateX(0.3em) scale(0.8125);
			order: 1;
			}
	#areaSelect dd{
		display: flex;
		align-items: center;
		justify-content: space-between;
		grid-gap: 1em;
		padding: 0.8em;
		border: solid #808080;
		border-width: 0 1px 1px 1px;
		}
		#areaSelect dd:before{
			content: "";
			flex: 0 0 1em;
			width: 1em;
			height: 1em;
			margin-left: auto;
			order: 1;
			transform: scale(2);
			}
		#areaSelect dd:first-child{
			border-top: none;
			}
		#areaSelect dd:last-child{
			border-radius: 0 0 4px 4px;
			}
		#areaSelect dd:not(:last-child){
			border-bottom-style: dashed;
			}

#areaDetail{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--space) 1em;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	opacity: 0;
	z-index: 10000;
	overflow-y: scroll;
	}
	#areaDetail.open{
		pointer-events: all;
		opacity: 1;
		}
	#areaDetail section{
		position: relative;
		left: 50%;
		display: grid;
		align-items: flex-start;
		grid-template-columns: calc(var(--space) / 2) 1fr calc(var(--space) / 2);
		width: min(100%, 980px);
		padding: calc(var(--space) / 2) 0 0 0;
		background: #fff;
		overflow-x: hidden;
		transform: translate(-50%, 0);
		}
	#areaDetail h3{
		grid-column: 2;
		justify-self: center;
		padding: 0.5em;
		background: var(--primary-color);
		border-radius: 4px;
		color: #fff;
		font-family: var(--font-min);
		font-size: 1.125em;
		font-weight: bold;
		}

#congestionSearch{
	background: #f3f3f3 url(../images/pattern.png) bottom center;
	padding: 1em;
	}
	#congestionSearch .congestionSearch{
		width: var(--wrap);
		margin: auto;
		padding-top: 0.5em;
		}
	#congestionSearch ul{
		padding-left: 20px;
		list-style: disc;
		}
	#congestionSearch ul.list{
		line-height: 1.7em;
		}
	.xdsoft_datetimepicker{
		transform: translateY(1em);
		}

.congestionSearch{
	position: relative;
	grid-column: 1 / 4;
	display: flex;
	flex-wrap: wrap;
	grid-gap: 1em var(--space);
	margin-top: 1em;
	padding: 0 1em;
	background: #f3f3f3 url(../images/pattern.png) bottom center;
	z-index: 1;
	}

.congestionSearchText{
	justify-content: center;
	padding-top: 0.5em;
	}
	.congestionSearchText p{
		margin: 0 !important;
		}

.congestionSearchMenu{}
	.congestionSearchMenu :where(input,select){
		margin: 0;
		padding: 0.8em 0.8em 0.8em 2em;
		background-color: transparent;
		border: none;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"><path fill="%23808080" d="M14.35,4.65c-.2-.2-.51-.2-.71,0l-5.65,5.65L2.35,4.65c-.2-.2-.51-.2-.71,0s-.2,.51,0,.71l6,6c.1,.1,.23,.15,.35,.15s.26-.05,.35-.15l6-6c.2-.2,.2-.51,0-.71Z"/></svg>') no-repeat;
		background-position: center right;
		background-size: auto 1em;
		box-sizing: border-box;
		}
		.congestionSearchMenu :where(input,select):focus{
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"><path fill="%23808080" d="M14.35,4.65c-.2-.2-.51-.2-.71,0l-5.65,5.65L2.35,4.65c-.2-.2-.51-.2-.71,0s-.2,.51,0,.71l6,6c.1,.1,.23,.15,.35,.15s.26-.05,.35-.15l6-6c.2-.2,.2-.51,0-.71Z"/></svg>') no-repeat;
			background-position: center right;
			background-size: auto 1em;
			border: none;
			}
	.congestionSearchMenu dl{
		display: grid;
		grid-gap: 0.5em;
		}
	.congestionSearchMenu dt{
		display: none;
		}
	.congestionSearchMenu dd{
		display: flex;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: 1em 1em;
		background-position: 0.5em center;
		border: 1px solid #1a1a1a;
		border-radius: 4px;
		cursor: pointer;
		}
	.congestionSearchMenu ul{
		background: #fff;
		border: 1px solid #1a1a1a;
		border-radius: 6px;
		opacity: 0;
		z-index: 1;
		}
		.congestionSearchMenu ul:not(.open){
			pointer-events: none;
			}

.congestionSearchMenuDate{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23b9840c" d="M8,1h-2V5h2V1Zm10,0h-2V5h2V1Zm1,2v3h-4V3h-6v3H5V3H2V22H22V3h-3ZM7,19h-2v-2h2v2Zm0-4h-2v-2h2v2Zm0-4h-2v-2h2v2Zm4,8h-2v-2h2v2Zm0-4h-2v-2h2v2Zm0-4h-2v-2h2v2Zm4,8h-2v-2h2v2Zm0-4h-2v-2h2v2Zm0-4h-2v-2h2v2Zm4,8h-2v-2h2v2Zm0-4h-2v-2h2v2Zm0-4h-2v-2h2v2Z"/></svg>');
	}

.congestionSearchMenuTime{
	position: relative;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23b9840c" d="M13.05,6h-2.1V14.05h5.55v-2.1h-3.45V6Zm-1.05-4.5C6.2,1.5,1.5,6.2,1.5,12s4.7,10.5,10.5,10.5,10.5-4.7,10.5-10.5S17.8,1.5,12,1.5Zm0,18.9c-4.63,0-8.4-3.77-8.4-8.4S7.37,3.6,12,3.6s8.4,3.77,8.4,8.4-3.77,8.4-8.4,8.4Z"/></svg>');
	}

.congestionSearchMenuWeather{
	position: relative;
	}
	.congestionSearchMenuWeather ul{
		position: absolute;
		left: 50%;
		top: 100%;
		display: flex;
		grid-gap: 0.5em;
		padding: 1em;
		transform: translate(-50%, 1em);
		font-size: 0.875em;
		}
	.congestionSearchMenuWeather li{
		display: grid;
		justify-content: center;
		grid-gap: 0.5em;
		text-align: center;
		line-height: 1em;
		cursor: pointer;
		}
		.congestionSearchMenuWeather li:before{
			content: "";
			display: block;
			width: 3.57em;
			height: 3.57em;
			/*margin: auto;*/
			background: #fff;
			border: 1px solid #b2b2b2;
			border-radius: 6px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 75%;
			box-sizing: border-box;
			}
	.congestionSearchMenuWeather[data-type="0"],
	.congestionSearchMenuWeather li:nth-of-type(1):before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23e86f1e" d="M7.18,5.96l-2.35-2.35-1.22,1.22,2.35,2.35,1.22-1.22Zm13.21-1.13l-1.22-1.22-2.35,2.35,1.22,1.22,2.35-2.35ZM12.86,1h-1.73v3.32h1.73V1ZM4.32,11.14H1v1.73h3.32v-1.73Zm7.68-5.06c-3.27,0-5.92,2.65-5.92,5.92s2.65,5.92,5.92,5.92,5.92-2.65,5.92-5.92-2.65-5.92-5.92-5.92Zm4.82,11.96l2.35,2.35,1.22-1.22-2.35-2.35-1.22,1.22Zm2.86-6.9v1.73h3.32v-1.73h-3.32Zm-8.54,11.86h1.73v-3.32h-1.73v3.32Zm-7.52-3.83l1.22,1.22,2.35-2.35-1.22-1.22-2.35,2.35Z"/></svg>');
		}
	.congestionSearchMenuWeather[data-type="1"],
	.congestionSearchMenuWeather li:nth-of-type(2):before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%233ba5db" d="M3.9,11.16c.22-2.52,2.34-4.51,4.92-4.51,.11,0,.22,0,.33,.01,.53-1.82,1.88-3.26,3.61-3.93-.77-1.19-2.1-1.98-3.62-1.98-2.23,0-4.07,1.69-4.29,3.87-.31-.1-.65-.15-.99-.15-1.85,0-3.35,1.5-3.35,3.35s1.5,3.35,3.35,3.35h.03Zm16.11-2.6s0,0,0,0c0-.06,0-.12,0-.17,0-2.78-2.25-5.03-5.03-5.03-2.6,0-4.74,1.98-5,4.51-.36-.11-.75-.17-1.15-.17-2.15,0-3.9,1.75-3.9,3.9s1.75,3.9,3.9,3.9h11.18c1.92,0,3.47-1.55,3.47-3.47s-1.55-3.47-3.47-3.47Zm-11.83,14.34c0,.61,.5,1.11,1.11,1.11s1.11-.5,1.11-1.11-1.11-4.14-1.11-4.14c0,0-1.11,3.53-1.11,4.14Zm-5.42-2.29c0,.61,.49,1.1,1.1,1.1s1.1-.49,1.1-1.1-1.1-4.1-1.1-4.1c0,0-1.1,3.5-1.1,4.1Zm10.86,0c0,.61,.49,1.1,1.1,1.1s1.1-.49,1.1-1.1-1.1-4.1-1.1-4.1c0,0-1.1,3.5-1.1,4.1Zm5.42,2.29c0,.61,.5,1.11,1.11,1.11s1.11-.5,1.11-1.11-1.11-4.14-1.11-4.14c0,0-1.11,3.53-1.11,4.14Z"/></svg>');
		}
	.congestionSearchMenuWeather[data-type="2"],
	.congestionSearchMenuWeather li:nth-of-type(3):before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23156a96" d="M3.87,11.16h.03c.22-2.52,2.34-4.51,4.92-4.51,.11,0,.22,0,.33,.01,.53-1.82,1.88-3.26,3.61-3.93-.77-1.19-2.1-1.98-3.62-1.98-2.23,0-4.07,1.69-4.29,3.87-.31-.1-.65-.15-.99-.15-1.85,0-3.35,1.5-3.35,3.35s1.5,3.35,3.35,3.35Zm16.14-2.6s0,0,0,0c0-.06,0-.12,0-.17,0-2.78-2.25-5.03-5.03-5.03-2.6,0-4.74,1.98-5,4.51-.36-.11-.75-.17-1.15-.17-2.15,0-3.9,1.75-3.9,3.9s1.75,3.9,3.9,3.9h11.18c1.92,0,3.47-1.55,3.47-3.47s-1.55-3.47-3.47-3.47ZM5.25,17.25L.75,24h1.5l4.5-6.75h-1.5Zm3.75,0l-4.5,6.75h1.5l4.5-6.75h-1.5Zm3.75,0l-4.5,6.75h1.5l4.5-6.75h-1.5Zm3.75,0l-4.5,6.75h1.5l4.5-6.75h-1.5Zm-.75,6.75h1.5l4.5-6.75h-1.5l-4.5,6.75Z"/></svg>');
		}
	.congestionSearchMenuWeather[data-type="3"],
	.congestionSearchMenuWeather li:nth-of-type(4):before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23c5dae5" d="M484.36,372.49l-76.38-44.1,50.09-22.11-9.52-21.58-65.89,29.07-43.1-24.9,74.61-32.88-74.59-32.87,43.08-24.86,65.89,29.07,9.54-21.62-50.09-22.1,76.36-44.05-13.32-23.04-76.36,44.08,5.92-54.42-23.47-2.56-7.78,71.58-43.09,24.89,8.83-81.02-65.78,48.15v-49.76l58.12-42.54-13.93-19.05-44.19,32.35V0h-26.6V88.19l-44.17-32.35-13.95,19.05,58.12,42.54v49.76l-65.78-48.13,8.79,80.99-43.05-24.88-7.8-71.58-23.47,2.56,5.92,54.42L40.99,116.5l-13.32,23.04,76.36,44.05-50.09,22.1,9.52,21.62,65.87-29.07,43.12,24.86-74.59,32.89,24.5,10.8,50.09,22.08-43.1,24.88-65.89-29.07-9.54,21.58,50.11,22.11-76.4,44.1,13.35,23.05,76.36-44.1-5.93,54.41,23.47,2.55,7.78-71.59,43.07-24.86-8.81,81.01,65.79-48.15v49.77l-58.12,42.53,13.95,19.04,44.17-32.33v88.19h26.6v-88.19l44.19,32.33,13.93-19.04-58.12-42.54v-49.74l65.78,48.14-8.81-81.02,43.07,24.86,7.82,71.59,23.43-2.55-5.9-54.41,76.35,44.1,13.32-23.05Zm-327.98-116.48l41.37-18.24,31.63,18.24-31.61,18.27-41.39-18.27Zm86.33,59.55l-36.53,26.73,4.9-44.96,31.63-18.27v36.5Zm0-82.61l-31.63-18.25-4.9-44.97,36.53,26.72v36.5Zm26.6-36.5l36.54-26.72-4.92,44.97-31.61,18.25v-36.5Zm0,119.11v-36.5l31.61,18.27,4.92,44.96-36.54-26.73Zm44.93-41.28l-31.61-18.27,31.63-18.24,41.38,18.24-41.4,18.27Z"/></svg>');
		}
	.congestionSearchMenuWeather .select{}
		.congestionSearchMenuWeather .select:before{
			background-color: #f2ecc2;
			}

.congestionSearchSample{}
	.congestionSearchSample dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 19em;
		font-size: 0.875em;
		}
	.congestionSearchSample dt{
		/*display: flex;*/
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-content: space-between;
		width: 100%;
		margin-top: 0.5em;
		/*padding: 0 1.5em;*/
		order: 1;
		line-height: 1em;
		text-align: center;
		}
		.congestionSearchSample dt:before{
			content: "Comfortable";
			transform: translateX(-10%);
			white-space: nowrap;
			}
		.congestionSearchSample dt:after{
			content: "Crowded";
			transform: translateX(5%);
			white-space: nowrap;
			}
	.congestionSearchSample dd{
		position: relative;
		width: 3em;
		height: 3em;
		background-color: #fff;
		color: transparent;
		}
		.congestionSearchSample dd:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: 80%;
			transform: scale(0.8);
			}
		.congestionSearchSample dd:nth-of-type(1){
			border-radius: 2em 0 0 2em;
			width: 3.5em;
			overflow: hidden;
			}
			.congestionSearchSample dd:nth-of-type(1):before{
				background-position: right center;
				}
		.congestionSearchSample dd:nth-of-type(5){
			border-radius: 0 2em 2em 0;
			width: 3.5em;
			overflow: hidden;
			}
			.congestionSearchSample dd:nth-of-type(5):before{
				background-position: left center;
				}

.congestionData{
	grid-column: 2;
	margin-top: 1em;
	}
	.congestionData dl{
		display: flex;
		align-items: center;
		grid-gap: 0.5em var(--space);
		}
	.congestionData dd{
		font-size: 0.875em;
		text-align: center;
		}
		.congestionData dd:before{
			content: "";
			display: block;
			width: 3.57em;
			height: 3.57em;
			margin: auto;
			border: 1px solid #b2b2b2;
			border-radius: 6px;
			background-size: 80% 80%;
			box-sizing: border-box;
			}
	.congestionData .slick-list{
		margin: 0 1.5em;
		}
	.congestionData .slick-arrow{
		all: initial;
		position: absolute;
		width: 1em;
		height: 1em;
		top: 1.5em;
		background: #fff;
		border: 1px solid #808080;
		border-radius: 100%;
		color: transparent;
		overflow: hidden;
		cursor: pointer;
		box-sizing: border-box;
		transform: translateY(-50%);
		z-index: 1;
		}
		.congestionData .slick-arrow:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.35,4.65c-.2-.2-.51-.2-.71,0s-.2,.51,0,.71l2.65,2.65-2.65,2.65c-.2,.2-.2,.51,0,.71,.1,.1,.23,.15,.35,.15s.26-.05,.35-.15l3.35-3.35-3.35-3.35Z"/></svg>');
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			background: #808080;
			}
	.congestionData .slick-prev{
		left: 0;
		}
		.congestionData .slick-prev:before{
			transform: rotate(180deg);
			}
	.congestionData .slick-next{
		right: 0;
		}

.congestionMap{
	position: relative;
	grid-column: 1 / 4;
	margin-top: 1em;
	padding-top: min(800px, 120%);
	}
	.congestionMap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

.congestionSpot{
	position: relative;
	grid-column: 1 / 4;
	}
	.congestionSpot h4{
		padding: 1em;
		background: #f3f3f3 url(../images/pattern.png) bottom center;
		font-family: var(--font-min);
		font-size: 1.125em;
		font-weight: bold;
		text-align: center;
		}
	.congestionSpot h4+div{
		display: grid;
		grid-gap: calc(var(--space) / 2);
		grid-column: 2;
		padding: calc(var(--space) / 2);
		}
	.congestionSpot dl{
		display: flex;
		flex-direction: column;
		grid-gap: 1em;
		}
	.congestionSpot dt{
		font-family: var(--font-min);
		font-size: 1.125em;
		font-weight: bold;
		text-align: center;
		line-height: 1.5em;
		}
	.congestionSpot dd{}
		.congestionSpot dd:nth-of-type(1){
			order: -1;
			position: relative;
			padding-top: 66.66%;
			}
		.congestionSpot dd:nth-of-type(2){
			line-height: 1.4em;
			}
		.congestionSpot dd:nth-of-type(3){
			margin-top: auto;
			align-self: center;
			}
		.congestionSpot dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
		.congestionSpot dd a{
			display: block;
			padding: 1em 2em;
			background: #1a1a1a;
			border-radius: 0.2em;
			color: #fff;
			font-size: 0.875em;
			font-weight: bold;
			line-height: 1em;
			text-decoration: none;
			}
			.congestionSpot dd a:hover{
				background: #b9840c;
				}

.areaDetailClose{
	all: initial;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.5em;
	height: 1.5em;
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><polygon points="25.38 5.38 24.62 4.62 15 14.24 5.38 4.62 4.62 5.38 14.24 15 4.62 24.62 5.38 25.38 15 15.76 24.62 25.38 25.38 24.62 15.76 15 25.38 5.38"/></svg>');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	color: transparent;
	background: var(--base-color);
	cursor: pointer;
	}

[data-congestion]{}
	[data-congestion]:before{
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		}
	[data-congestion="1"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%233ba5db" d="M13,28.64h6V12.64h-6V28.64Zm3-17.82c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Z"/></svg>');
		}
	[data-congestion="2"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%2392c75f" d="M9,28.64h6V12.64h-6V28.64ZM12,4.82c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm8,6c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Zm-3,17.82h6V12.64h-6V28.64Z"/></svg>');
		}
	[data-congestion="3"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23deb53a" d="M5,28.64h6V12.64H5V28.64ZM8,4.82c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm8,0c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm-3,23.82h6V12.64h-6V28.64ZM24,10.82c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Zm-3,17.82h6V12.64h-6V28.64Z"/></svg>');
		}
	[data-congestion="4"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23e86f1e" d="M8,7.59c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm-3,20.82h6V15.41H5v13ZM16,3.59c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm0,8c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm-3,16.82h6v-9h-6v9Zm11-14.82c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3Zm-3,14.82h6V15.41h-6v13Z"/></svg>');
		}
	[data-congestion="5"]:before{
		background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23e33232" d="M8,10.82c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm7-4.45c0-1.66-1.34-3-3-3s-3,1.34-3,3,1.34,3,3,3,3-1.34,3-3Zm6,7.45c0,1.66,1.34,3,3,3s3-1.34,3-3-1.34-3-3-3-3,1.34-3,3ZM5,28.64h6v-10H5v10ZM16,10.82c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm-3,17.82h6v-10h-6v10Zm8,0h6v-10h-6v10Zm2-22.27c0-1.66-1.34-3-3-3s-3,1.34-3,3,1.34,3,3,3,3-1.34,3-3Z"/></svg>');
		}

#liveCamera>div {
	display: grid;
	justify-items: center;
	grid-gap: 2em;
	padding: 2em;
	}
	#liveCamera h3{
		position: relative;
		display: grid;
		grid-template-areas: 'icon text';
		grid-template-columns: 0.8em 1fr;
		grid-gap: 0.25em;
		font-weight: bold;
		line-height: 1.5;
		}
		#liveCamera h3:before,
		#liveCamera h3:after{
			content: "";
			grid-area: icon;
			border-radius: 100%;
			aspect-ratio: 1;
			box-sizing: border-box;
			transform: translateY(0.3em);
			}
		#liveCamera h3:before{
			background: #c65819;
			transform: translateY(0.3em) scale(0.7);
			}
		#liveCamera h3:after{
			border: 1px solid #c65819;;
			}
	#liveCamera h3+a{
		aspect-ratio: 5 / 2;
		width: min(800px, 100%);
		height: auto;
		}
	#liveCamera img{
		width: 100%;
		}
	#liveCamera a{
		width: fit-content;
		}
	@media (max-width: 767px) {
		#liveCamera h3{
			font-size: 1.4em;
			}
		}
	@media (min-width: 768px) {
		#liveCamera h3{
			font-size: 1.5625em;
			}
		}

/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
:root{
	--space: 2em;
	--wrap: calc(100% - 2em);
	}
.congestionSearch{
	flex-direction: column;
	}
.congestionSearchMenu{}
	.congestionSearchMenu ul{
		display: none !important;
		pointer-events: none;
		}
.congestionSearchSample{
	align-self: center;
	}
.xdsoft_datetimepicker{
	display: none !important;
	}

input{
	position: relative;
}
input::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: none;
}

input::-webkit-inner-spin-button{
    -webkit-appearance: none;
}

input::-webkit-clear-button{
    -webkit-appearance: none;
}


}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#areaSelect{
	height: 30em;
	}
	#areaSelect dl {
		width: calc((100% - 0.5em) / 2);
		}
#areaDetail{}
	#areaDetail .congestionData{}
		#areaDetail .congestionData dl{
			flex-direction: column;
			}
		#areaDetail .congestionData dt{
			text-align: center;
			}
		#areaDetail .congestionData dt+span{
			width: 21em;
			}
.congestionSearchMenu{}
	.congestionSearchMenu dl{
		grid-template-columns: 1fr 1fr;
		}
	.congestionSearchMenu dd{}
		.congestionSearchMenu dd:nth-of-type(1){
			grid-column: 1 / 3;
			}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#areaSelect{
	height: 22em;
	}

#areaDetail{}
	#areaDetail .congestionData{}
		#areaDetail .congestionData dl{
			justify-content: center;
			}
		#areaDetail .congestionData dt{
			width: 7em;
			}
		#areaDetail .congestionData dt+span{
			width: 18em;
			}
.congestionSearchMenu{}
	.congestionSearchMenu dl{
		grid-template-columns: 1.2fr 1fr 1fr;
		}
.congestionSpot{}
	.congestionSpot h4+div{
		grid-template-columns: repeat(2, 1fr);
		}
}
/* for sp */
@media (max-width: 575.98px) {
#areaSelect{
	height: 100%;
	}
	#areaSelect dl {
		width: 100%;
		}
}

/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#areaSelect dl {
	width: calc((100% - 1em) / 3);
	}
#congestionMap{}
	#congestionMap header{
		position: relative;
		}
		#congestionMap header h2+div{
			position: relative;
			left: 50%;
			width: 100vw;
			transform: translateX(-50%);
			}
	#congestionMap h2{
		display: none;
		}
#areaDetail{}
	#areaDetail .congestionData{}
		#areaDetail .congestionData dl{
			justify-content: center;
			}
		#areaDetail .congestionData dt{
			width: 7em;
			transform: translateY(-0.8em);
			}
.congestionSearch{
	align-items: center;
	justify-content: center;
	}
.congestionSearchMenu{}
	.congestionSearchMenu ul:not(.open){
		opacity: 0 !important;
		}
	.congestionSearchMenu ul.open{
		opacity: 1;
		}
	.congestionSearchMenu select{
		pointer-events: none;
		}
	.congestionSearchMenu input{}
		.congestionSearchMenu input::-webkit-calendar-picker-indicator,
		.congestionSearchMenu input::-moz-calendar-picker-indicator{
			display: none;
			}
.congestionSpot{}
	.congestionSpot h4+div{
		grid-template-columns: repeat(2, 1fr);
		}


::-webkit-calendar-picker-indicator {
	display: none;
}

::-webkit-inner-spin-button{
	-webkit-appearance: none;
}

::-webkit-clear-button{
	-webkit-appearance: none;
}


}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
:root{
	--space: 3em;
	--wrap: 720px;
	}
#areaSelect{
	height: 21em;
	}
.congestionSearchMenu{}
	.congestionSearchMenu dl{
		grid-template-columns: 10em 8em 8em;
		}
.congestionData{}
	.congestionData dt+span{
		width: 22em;
		}
}
@media (max-width: 991px) {
/*991px以下*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
:root{
	--space: 4em;
	--wrap: 940px;
	}
#areaSelect{
	height: 20em;
	}
.congestionSearchMenu{}
	.congestionSearchMenu dl{
		grid-template-columns: 12em 8em 8em;
		}
.congestionData{}
	.congestionData dt+span{
		width: 26em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
:root{
	--space: 4em;
	--wrap: 1140px;
	}
.congestionSearchMenu{}
	.congestionSearchMenu dl{
		grid-template-columns: 14em 10em 10em;
		}
}


/*datetimepicker.js用*/
.xdsoft_datetimepicker{
	padding: 0;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	box-shadow: none;
	font-family: inherit;
	color: inherit;
	z-index: 10000;
	}
	.xdsoft_datetimepicker .xdsoft_datepicker{
		margin: 0;
		}
	.xdsoft_datetimepicker .xdsoft_calendar{
		padding: 0.5em;
		}
		.xdsoft_datetimepicker .xdsoft_calendar :is(th, td){
			height: auto;
			background: #fff;
			border: 1px solid #4d4d4d;
			color: inherit;
			}
		.xdsoft_datetimepicker .xdsoft_calendar th{
			line-height: 1.5em;
			}
		.xdsoft_datetimepicker .xdsoft_calendar td{
			line-height: 2em;
			}
			.xdsoft_datetimepicker .xdsoft_calendar td > div{
				padding: 0;
				text-align: center;
				}
			.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month{
				background: #e5e5e5;
				color: transparent;
				}
			.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current{
				background: #f2ecc2;
				color: inherit;
				box-shadow: none;
				}
	.xdsoft_datetimepicker .xdsoft_monthpicker{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		grid-gap: 0.25em;
		margin: 0.8em 0.5em 0.3em 0.5em;
		}
		.xdsoft_datetimepicker .xdsoft_monthpicker button{
			position: absolute;
			top: 50%;
			width: 1em;
			height: 1em;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: 40%;
			background: #4d4d4d;
			border-radius: 0;
			opacity: 1;
			transform: translateY(-50%);
			}
			.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_prev{
				left: 0;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path d="M6,0V10L0,5,6,0Z"/></svg>');
				}
			.xdsoft_datetimepicker .xdsoft_monthpicker .xdsoft_next{
				right: 0;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 10"><path d="M0,10V0L6,5,0,10Z"/></svg>');
				}
	.xdsoft_datetimepicker .xdsoft_year{
		width: auto;
		margin: 0;
		padding: 0;
		font-weight: normal;
		line-height: 1em;
		order: -1;
		transform: scale(0.8);
		pointer-events: none;
		}
		/*.xdsoft_datetimepicker .xdsoft_year span{}
			.xdsoft_datetimepicker .xdsoft_year span:after{
				content: "年";
				}*/
		.xdsoft_datetimepicker .xdsoft_year i{
			display: none;
			}
	.xdsoft_datetimepicker .xdsoft_month{
		width: auto;
		margin: 0;
		padding: 0;
		line-height: 1em;
		pointer-events: none;
		}
		.xdsoft_datetimepicker .xdsoft_month i{
			display: none;
			}
	.xdsoft_datetimepicker .xdsoft_today_button{
		display: none;
		}
	.xdsoft_datetimepicker .xdsoft_timepicker{
		width: auto;
		margin: 0;
		}
		.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{
			border: none;
			}
		.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time{
			margin: 0 1em;
			padding: 0 0 0 1.5em;
			border: none;
			background: none;
			color: inherit;
			}
			.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_time:hover{
				background: none !important;
				color: inherit !important;
				}
		.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_current{
			position: relative;
			background: none !important;
			color: inherit !important;
			font-weight: inherit !important;
			box-shadow: none  !important;
			}
			.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box .xdsoft_current:before{
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 1em;
				height: 1em;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11.6,2.15c-.2-.2-.51-.2-.71,0l-6.65,6.65L1.1,5.65c-.2-.2-.51-.2-.71,0s-.2,.51,0,.71l3.5,3.5c.1,.1,.23,.15,.35,.15s.26-.05,.35-.15L11.6,2.85c.2-.2,.2-.51,0-.71Z"/></svg>');
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-position: center;
				-webkit-mask-size: contain;
				background: #808080;
				transform: translateY(-50%);
				}
		.xdsoft_datetimepicker .xdsoft_timepicker  button{
			margin: 0 auto !important;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: 30%;
			background: #4d4d4d;
			opacity: 1;
			}
		.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M10,6H0L5,0l5,6Z"/></svg>');
			}
		.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M0,0H10L5,6,0,0Z"/></svg>');
			}