@charset "utf-8";

/* ------------------------------------------------
	共通
------------------------------------------------ */

#wrapper {
	width: 1200px;
	max-width: 96%;
}
.post_box > h2.page-title {
	margin: 30px 0 0;
	padding: 0;
	border: none;
	background: transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #039;
}
.post_box > h2.page-title span {
	width: 100%;
	display: block;
	color: #FFF;
	border: none;
	font-size: min(3.5vw,150%);
}
.post_box > h2.page-title img {
	width: 120px;
	border-left: 1px solid #FFF;
}

/* ------------------------------------------------
------------------------------------------------ */

#area-map {
	position: relative;
	margin-bottom: 30px;
}

ul#map-btn {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
ul#map-btn li {
	position: absolute;
	list-style-type: none;
	margin-left: 0;
}
ul#map-btn li#sabo_pin  { top: 11%; width: 50%; right: 50%; transform: translateY(-50%); }
ul#map-btn li#dam_pin   { top: 31%; width: 50%; right: 50%; transform: translateY(-50%); }
ul#map-btn li#river_pin { bottom: 36.5%; width: 50%; left: 50%; }
ul#map-btn li#coast_pin { bottom: 15%; width: 50%; left: 50%; }

ul#map-btn li::after {
	content: "";
	position: absolute;
	display: block;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
ul#map-btn li#sabo_pin::after {
	top: 0;
	left: 100%;
	width: min(12vw,150px);
	height: 100%;
	background-image: url(images/sabo_bow.png);
	background-position: center 75%;
}
ul#map-btn li#dam_pin::after {
	top: 0;
	left: 100%;
	width: min(17.5vw,250px);
	height: 100%;
	background-image: url(images/dam_bow.png);
}
ul#map-btn li#river_pin::after {
	top: 0;
	right: 100%;
	width: min(6.5vw,90px);
	height: 100%;
	background-image: url(images/river_bow.png);
	background-position: center 75%;
}
ul#map-btn li#coast_pin::after {
	top: 65%;
	left: 40%;
	width: min(4vw,40px);
	height: 100%;
	background-image: url(images/coast_bow.png);
}

@media only screen and (min-width: 801px){
 ul#map-btn li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 10px;
	border: 2px solid #000;
	border-radius: 20px;
	background: #FFF;
 }
 ul#map-btn li a img:nth-child(1) {
	width: 65%;
 }
 ul#map-btn li a img:nth-child(2) {
	width: 32%;
 }
}

@media only screen and (max-width: 800px){
 ul#map-btn li#sabo_pin  { width: auto; top: 15%; }
 ul#map-btn li#dam_pin   { width: auto; }
 ul#map-btn li#river_pin { width: auto; bottom: 36.5%; transform: translateY(-50%); }
 ul#map-btn li#coast_pin { width: auto; bottom: 11.5%; left: 70%; transform: translateY(-50%); }

 ul#map-btn li#sabo_pin  a,
 ul#map-btn li#dam_pin   a,
 ul#map-btn li#river_pin a,
 ul#map-btn li#coast_pin a {
	text-decoration: none;
	color: #000;
 }
 ul#map-btn li#sabo_pin a,
 ul#map-btn li#dam_pin  a {
	text-align: right;
 }
 ul#map-btn li#sabo_pin  a img,
 ul#map-btn li#dam_pin   a img,
 ul#map-btn li#river_pin a img,
 ul#map-btn li#coast_pin a img {
	display: none;
 }
 ul#map-btn li#sabo_pin  a::before,
 ul#map-btn li#dam_pin   a::before,
 ul#map-btn li#river_pin a::before,
 ul#map-btn li#coast_pin a::before {
	display: inline-block;
	padding: 3px 15px 2px;
	border: 2px solid #000;
	border-radius: 50px;
	font-size: min(100%,3vw);
 }
 ul#map-btn li#sabo_pin a::before {
	content: "砂防事業";
	background: #FDE;
 }
 ul#map-btn li#dam_pin a::before {
	content: "ダム事業";
	background: #FC7;
 }
 ul#map-btn li#river_pin a::before {
	content: "河川事業";
	background: #FFB;
 }
 ul#map-btn li#coast_pin a::before {
	content: "海岸事業";
	background: #BEF;
 }
 ul#map-btn li#coast_pin::after {
	top: 80%;
	left: 0%;
 }
}



ul.pannel-list-w {/* PC用一覧表示 */
	overflow: hidden;
}
ul.pannel-list-w li {
	float: left;
}

ul.pannel-list-s {/* 小画面用一覧表示 */
}
ul.pannel-list-s li {
	width: auto;
	max-width: 480px;
	list-style-type: none;
	margin: 30px auto 50px;;
}
ul.pannel-list-s li a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	border: 2px solid #000;
	border-radius: 30px;
	padding: 10px 10px 20px;
}
ul.pannel-list-s li a::after {
	content: "Click!";
}
@media only screen and (min-width: 801px){
 ul.pannel-list-w {
	display: block;
 }
 ul.pannel-list-s {
	display: none;
 }
}
@media only screen and (max-width: 800px){
 ul.pannel-list-w {
	display: none;
 }
 ul.pannel-list-s {
	display: block;
 }
}