@charset "utf-8";
/*ヘッダーイメージ*/
#top_img { width: 100%; height: auto; min-width: 1100px; margin-top: 100px; }
.img_area { display: flex; justify-content: center; align-items: flex-end; width: 100%; background: url("../img/top_img.jpg") no-repeat; background-size: cover; aspect-ratio: 2 / 1; }
.img_area img { width: 100%; height: auto;}

main {}
.img_area {
	position: relative;
}
.bottom-right {
	color: #FFF;
	font-weight: 600;
	text-shadow: 0 0 5px #000;
  position: absolute;
  bottom: 10px;
  right: 0px;
	font-size: 16px;
/*	width: 160px;
	margin-bottom: 10px;
	margin-right: 10px;*/
}

/*お知らせ*/
#oshirase_area { max-width: 900px; width: 100%; margin: 0 auto; }
#oshirase_area > li:first-child { border-top: solid 1px #C6C6C6; }
#oshirase_area > li { border-bottom: solid 1px #C6C6C6;}
#oshirase_area > li > a > ul { background: url("../img/arrow2.png") no-repeat right center;}
#oshirase_area > li a { color: #333; text-decoration: none; }
.data {display: flex; align-items: center; width: 100%; height: 60px;}
.day {}
.tit1 { width: 120px; font-size: 14px; color: #fff; text-align: center; line-height: 30px; background: #f5a947; margin: 0 20px;}
.tit2 { width: 120px; font-size: 14px; color: #fff; text-align: center; line-height: 30px; background: #a3ca20; margin: 0 20px;}
.tit3 { width: 120px; font-size: 14px; color: #fff; text-align: center; line-height: 30px; background: #9CC0F9; margin: 0 20px;}
.item { color: #095256; line-height: 25px; }
a .item { text-decoration: underline; }
.item img { margin-left: 10px;}

/*施設概要*/
#shisetsu { width: 100%; background: #E1E8C6; box-shadow: 0 0 0 100vmax  #E1E8C6; clip-path: inset(0 -100vmax); overflow: hidden;}
.gaiyou_list { display: flex; flex-wrap: wrap; align-items: stretch; max-width: 900px; width: 100%; margin: 100px auto 0 auto; line-height: 20px; }
.gaiyou_list dt { display: flex; align-items: center; justify-content: center; width: 280px; height: auto; background: #A3CA20; padding: 12px 0; text-align: center; margin-bottom: 10px; font-weight: bold;}
.gaiyou_list dd { width: 620px; padding: 12px 0 12px 30px; margin-bottom: 10px; background: #fff; line-height: 24px}

#kensetu_map {}
.kensetu_tit { max-width: 330px; width: 100%; padding: 44px 0.3em 0; margin: 0 auto 20px; height: 60px; background: #E1E8C6; text-align: center; font-size: 24px; font-weight: bold; line-height: 0; letter-spacing: 2px;}
.kensetu_tit span { background: linear-gradient(to top, #fff 0%, #fff 50%, #e1e8c6 50%, #e1e8c6 100%); padding: 0 0.3em;} 
.map { width: 100%;}
.map iframe { width: 100%; height: auto; aspect-ratio: 8 / 3;}
.map_link { width: 100%; text-align: center; margin: 25px 0 0 0;}
.map_link a { text-decoration: underline; font-size: 18px; color: 095256; font-weight: 700; line-height: 18px; }
.map_link a:hover { text-decoration: none; }
.map_link a img { width: 8px; height: 13px; margin:0 0 4px 3px;}

/*工事状況*/
.jokyo_box { width: 100%; background: #f5f5f5 url("../img/back_img.jpg") no-repeat bottom center; background-size: 100% auto; overflow: hidden;}
.jokyo_area { max-width: 900px; width: 100%; margin: 0 auto;}
.teiten_tit { width: 100%; line-height: 65px; font-size: 26px; font-weight: bold; padding-left: 20px; background: #E1E8C6; border-top: solid 6px #095256;}
.teiten_come { margin: 60px 0 30px 0;}
.year { width: 100%; margin: 0 auto; font-size: 21px; font-weight: bold; color: #095256; border-left: solid 10px #095256; line-height: 33px; padding-left: 15px; margin-top: 50px; }

.jokyo_list{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 30px;}
.jokyo_list li { width: 290px; background: #fff; margin-bottom: 30px;}
.jokyo_list_col4{ display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin-top: 30px;}
.jokyo_list_col4 li { width: 24%; background: #fff; margin: 0 0.5% 30px;}
.jokyo_list img, .jokyo_list_col4 img {width: 100%; height: auto; }
.jokyo_img{
	overflow: hidden;
	box-shadow: 0 2px 2px -1px rgba(0,0,0,0); 
	/*cursor: pointer;
	&:hover {
		&::before {
			opacity: 1;
		}
		& img {
			scale: 1.03;
		}
	}*/
}



.jokyo_img img { width: 100%; aspect-ratio: 3/2; 
	object-fit: cover; transition-property: scale, filter; transition-duration: .4s}

.jokyo_day { display: inline-block; padding: 15px 20px 0; font-size: 13px;}
.jokyo_come { display: inline-block; padding: 0 20px 15px 20px;}
.jokyo_list_col4 .jokyo_come { font-size: 0.9em;}
.jokyo_btn { width: 310px; font-size: 18px;  border: solid 5px #095256; margin: 20px auto 100px auto;}
.jokyo_btn a { display: block; height: 50px; padding-top: 15px; color: #095256; text-decoration: none; text-align: center; background: #fff url("../img/arrow3.png") no-repeat 270px center; transition: background-color 0.3s; }
.jokyo_btn a:hover { background-color: #eee;}


@media screen and ( max-width: 800px) {
	/*ヘッダーイメージ*/
	#top_img { min-width: auto; margin-top: 80px; }
	
.img_area { display: flex; justify-content: center; align-items: flex-end; width: 100%; background: url("../img/top_img_m.jpg") no-repeat; background-size: cover; aspect-ratio: 3 / 2; }

main {}
.img_area {
	position: relative;
}
.bottom-right {
	color: #666;
	font-weight: 600;
	text-shadow: 0 0 5px #FFF;
  position: absolute;
  top: 20px;
  right: 0px;
	font-size: 10px;
	width: 100px;
}
	/*お知らせ*/
	#oshirase_area { padding: 0 5%; }
	.data { flex-wrap: wrap; height: auto; padding: 10px 0;}
	.item {width: 93%; padding: 5px 0 0;}

	/*施設概要*/
	#shisetsu { text-align: center; padding: 0 5%;}
	.gaiyou_list { font-size: 16px; margin-top: 30px; }
	.gaiyou_list dt { display: block; width: 100%; margin-bottom: 0; font-weight: bold; text-align-last: left; padding-left: 20px;}
	.gaiyou_list dd { width: 100%; text-align: left; padding: 12px 20px; line-height: 1.4em;}

	#kensetu_map {}
	.kensetu_tit { font-size: 26px; padding: 35px 0 0; margin: 40px auto 20px;}
	.map { width: 110%; margin-left: -5%; }
	.map iframe { aspect-ratio: 1 / 1;}

/*工事状況*/
	.jokyo_box { background-size: 150% auto;}
	.jokyo_list li { max-width: 440px; width: 100%; background: #fff; }
	.jokyo_list_col4 li { width: 100%; background: #fff; margin: 0 0 30px;}
	.jokyo_list_col4 .jokyo_come { font-size: 1em;}
	.jokyo_area { padding:  0 5%}
	.jokyo_list { justify-content: center;}
	.jokyo_btn { width: 300px;  margin: 10px auto 80px auto; }
	.jokyo_btn a { background-position: 265px center;}

}