/* ===================================================== */
/* フロートイメージ*/
/* ===================================================== */
/*------------------
common
------------------*/
.floatimgArea {
	z-index: 9999;
	display: flex;
	justify-content: flex-end;
	position: absolute;
	bottom: 10rem;
	right: 0;
	width: 100%;
	padding-right: 1.2rem;
	background-color: #fff0;
	filter: drop-shadow(0.3rem 0.3rem 0.2rem rgba(0, 0, 0, 0.3));
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea {
		position: absolute;
		bottom: 8rem;
		right: 0;
		width: 100%;
		background-color: #fff0;
	}

	.floatimgArea img {
		align-self: flex-end;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea {
		position: absolute;
		display: flex;
		bottom: 8rem;
		right: 0;
		width: 100%;
		background-color: #fff0;
	}

	.floatimgArea img {
		align-self: flex-end;
	}
}

/*--- modal ---*/
.floatimgArea button.closeImg {
	position: absolute;
	top: -25px;
	right: 4%;
	width: 20px;
	height: 20px;
}

.floatimgArea button.closeImg::before {
	position: absolute;
	top: 0;
	right: 0;
	content: "";
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
}

.floatimgArea button.closeImg::after {
	position: absolute;
	top: -2px;
	right: -2px;
	content: "\e5c9";
	font-family: 'Material Icons Round';
	font-weight: 200;
	font-size: 25px;
	color: #2D649A;
}


/*------------------
緊急復旧済み区間・復旧到達地点画像
------------------*/
.floatimgArea.floatimg-01 {
	max-width: 45rem;
	min-width: 45rem;
}

.floatimgArea.floatimg-01 img {
	max-width: 45rem;
	min-width: 45rem;
	height: 100%;
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea.floatimg-01 {
		max-width: 30rem;
		min-width: 30rem;
	}

	.floatimgArea.floatimg-01 img {
		max-width: 30rem;
		min-width: 30rem;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea.floatimg-01 {
		max-width: 25rem;
		min-width: 25rem;
	}

	.floatimgArea.floatimg-01 img {
		max-width: 25rem;
		min-width: 25rem;
		height: auto;
	}
}

/*------------------
通行可能・不可区間箇所
------------------*/
.floatimgArea.floatimg-02 {
	max-width: 45rem;
	min-width: 45rem;
}

.floatimgArea.floatimg-02 img {
	max-width: 45rem;
	min-width: 45rem;
	height: 100%;
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea.floatimg-02 {
		max-width: 30rem;
		min-width: 30rem;
	}

	.floatimgArea.floatimg-02 img {
		max-width: 30rem;
		min-width: 30rem;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea.floatimg-02 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-02 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

/*------------------
断水解消状況
------------------*/
.floatimgArea.floatimg-03 {
	max-width: 25rem;
	min-width: 25rem;
}

.floatimgArea.floatimg-03 img {
	max-width: 25rem;
	min-width: 25rem;
	height: 100%;
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea.floatimg-03 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-03 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea.floatimg-03 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-03 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

/*------------------
仮設住宅建設状況
------------------*/
.floatimgArea.floatimg-04 {
	max-width: 25rem;
	min-width: 25rem;
}

.floatimgArea.floatimg-04 img {
	max-width: 25rem;
	min-width: 25rem;
	height: 100%;
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea.floatimg-04 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-04 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea.floatimg-04 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-04 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

/*------------------
下水機能確保状況
------------------*/
.floatimgArea.floatimg-05 {
	max-width: 25rem;
	min-width: 25rem;
}

.floatimgArea.floatimg-05 img {
	max-width: 25rem;
	min-width: 25rem;
	height: 100%;
}

/*--- sp ---*/
@media only screen and (max-width: 768px) {
	.floatimgArea.floatimg-05 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-05 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

@media only screen and (max-width: 375px) {
	.floatimgArea.floatimg-05 {
		max-width: 20rem;
		min-width: 20rem;
	}

	.floatimgArea.floatimg-05 img {
		max-width: 20rem;
		min-width: 20rem;
		height: auto;
	}
}

/*------------------
モーダルウィンドウが開いた時の背景
------------------*/
.modal_overlay.js-modal-close {
	position: absolute;
	top: -100vh;
	background: rgb(0 0 0 / 0%);
	height: 150vh;
	width: 100vw;
}

.fixed {
	position: fixed;
	height: 100%;
	width: 100%;
}