img{
	width:100%;
	vertical-align:bottom;
}

.visual-w{
	width:100%;
	min-width:1000px;
	margin-top:30px;
	margin-bottom:50px;
}

.visual{
	width:1000px;
	margin:0 auto;
}

.side0{
	padding:30px 10px 0 20px;
}

.arrow{
	position:relative;
	display:inline-block;
	padding-left:20px;
	text-align:center;
}

.arrow::before{
	content:'';
	width:9px;
	height:9px;
	border:0px;
	border-top:solid 3px #fff;
	border-right:solid 3px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform:rotate(45deg);
	position:absolute;
	top:50%;
	left:0;
	margin-top:-6px;
}

.side1{
	color:#fff;
	font-size:0.8rem;
	margin-top:100px;
	padding-left:50px;
}

.side2{
	color:#fff;
	font-size:0.8rem;
	margin-top:10px;
	padding-left:50px;
}


.h21{
	text-align:center;
	font-size:1.2rem;
}

.wrap{
	width:1000px;
	margin:0 auto;
}

.h22{
	margin-top:50px;
	font-size:1.2rem;
	background-color: #009A47;
	color:#fff;
	padding:6px 15px;
}

.h31{
	font-size:1rem;
	font-weight:bold;
	margin-bottom:20px;
}

.in1-1{
	width:30%;
	margin-right:5%;
}

.in1-2{
	width:30%;
	margin-right:5%;
}

.in1-3{
	width:30%;
}

.in1{
	margin-bottom:80px;
}

.h32{
	margin-top:50px;
	font-size:1rem;
	background-color: #009a47;
	color:#fff;
	padding:6px 15px 4px;
}

.block1{
	width:77%;
	margin:0 auto;
}

.in3{
	padding:12px 5% 9px;
	display:table;
	width:100%;
	margin-bottom:10px;
}

.in3-1{
	width:28%;
	padding-right:10%;
	display:table-cell;
	vertical-align:top;
}

.in3-2{
	width:72%;
	display:table-cell;
	font-size:0;
	vertical-align:top;
}

.p1{
	display:inline-block;
	font-size:1rem;
	width:20%;
	vertical-align:top;
}

.p2{
	display:inline-block;
	font-size:1rem;
	width:80%;
}

.bo{
	padding-bottom:30px;
	border-bottom:solid 1px #000;
}

.block1-w{
	width:1000px;
	margin:0 auto 80px;
}

.block2-w{
	width:1000px;
	margin:0 auto 80px;
}

.top{
	text-align:right;
	padding:30px 0 10px;
}

.top img{
	width:100px;
}

.current{
	background-color: #009A47;
	color:#fff;
}

.l-h{
	line-height:2;
}

.midori{
	border:solid 1px #009647;
	padding:30px 5%;
}

.h41{
	color:#009647;
	font-size:1.5rem;
	text-align:center;
	margin-bottom:30px;
	letter-spacing:3px;
}

.in4{
	padding:12px 5% 9px;
	display:table;
	width:100%;
}

.p3{
	text-align:center;
}

.h51{
	padding:5px 20px 3px;
	background-color:#ebebeb;
	font-size:1.1rem;
	color:#009647;
}

.p4{
	padding-left:20px;
}

table , td, th {
	border:none;
	border-collapse: collapse;
}

table{
	width:100%;
}


.td1{
	width:70%;
	padding-right:10px;
	padding-left:20px;
}

.td2{
	width:30%;
}

.indent{
	padding-left:1.2rem;
	text-indent:-1.2rem;
}

.in5-1{
	width:55%;
	margin-right:10%;
}

.in5-2{
	width:35%;
}

.in6-1{
	width:46%;
	margin-right:8%;
}

.in6-2{
	width:46%;
}

.h42{
	font-size:1.2rem;
	color:#009647;
	padding-bottom:5px;
	border-bottom:solid 3px #009647;
}

.in7{
	padding:10px;
	border-bottom: dotted 2px #aaa;
}

.in7-1{
	width:30%;
}

.in7-2{
	width:70%;
}

.in8-1{
	width:75%;
	margin-right:5%;
}

.in8-2{
	width:20%;
}

.p5 a:hover{
	color:#009647;
}

.m1{
	color:#009a47;
	padding-bottom:8px;
	border-bottom:solid 3px #009a47;
	font-size:1.2rem;
	margin-bottom:50px;
}

.rec{
	padding:0 3%;
}

.rec1{
	width:49%;
	margin-right:2%;
}

.rec2{
	width:49%;
}

.rec3{
	width:100%;
}

.rec3 img{
	width:128px;
}

.po2{
	text-align:center;
	font-weight:bold;
}

.sdgs{
	width:151px;
}

.rec1_img{
	width:130px;
}

.rec2_img{
	width:130px;
}









.civil_list_main_title{
	font-size:20px;
	font-weight:bold;
	color:#009547;
	padding-bottom:25px;
}

.civil_list_head{
	background-color: #009547;
	height:46px;
}

.civil_list_head_txt1{
	float:left;
	width:280px;
	font-size:13px;
	font-weight:bold;
	color:#ffffff;
	padding:13px 0px 0px 25px;
}

.civil_list_head_txt2{
	float:left;
	font-size:13px;
	font-weight:bold;
	color:#ffffff;
	padding:13px 0px 0px 35px;
}

.civil_list_head_line{
	float:left;
	height:36px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ffffff;
	margin-top:5px;
}


.civil_list1{
	float:left;
	width:280px;
	height:250px;
	background-color:#e5f5ec;
}

.civil_list2{
	float:left;
	width: calc(100% - 280px);
}

.civil_list_title{
	font-size:13px;
	font-weight:bold;
	padding-top:40px;
	padding-left:20px;
}

.civil_list2_1{
	width: calc(100% - 155px);
	font-size:13px;
	font-weight:bold;
	padding:40px 15px 0 35px;
}

.civil_list2_2{
	width:155px;
	margin-top:40px;
	text-align:right;
}

.civil_list2_2 img{
	width:100%;
	max-width:155px;
}


.civil_list2_txt{
	font-size:13px;
	font-weight:bold;
	padding:40px 15px 0 35px;
}

.civil_list_border{
	border-bottom: solid 2px #009946;
	margin:0 2px;
}

.tab{
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	margin:0 auto;
}

.tab li a{
	width:100px;
	display: block;
	background:#fff;
	margin-right:10px;
	margin-bottom:5px;
	padding:5px 0;
	border-bottom:2px solid #009547;
	text-align:center;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	width:100px;
	background:#009547;
	margin-right:10px;
	padding:5px 0;
	color:#fff;
	text-align:center;
}

.tab li a:hover{
	width:100px;
	background:#009547;
	margin-right:10px;
	padding:5px 0;
	color:#fff;
	text-align:center;
	animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding-top:100px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
	display: block;/*表示*/
	animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.p10{
font-weight:bold;
}

.p11{
padding-left: 1em;
text-indent: -1em;
display:block;
}

.in9{
margin-bottom:100px;
}














@media only screen and (max-width: 1400px) {
	.side{
		display:none;
	}
}

@media only screen and (max-width: 700px) {


	.float2{
		float:none;
	}

	.wrap {
		width:100%;
		margin: 0;
		padding:50px 5% 0;
	}

	.henka{
		display:inline;
	}

	.kp1 {
		font-size: 1rem;
		margin-bottom:10px;
	}

	.kp2,.kp3{
		font-size:0.7rem;
	}

	.h22{
		margin-top:100px;
		font-size:1rem;
	}

	.in1-1,.in1-2,.in1-3{
		width:50%;
		margin-right:0;
		margin:0 auto;
	}

	.block1-w{
		width:100%;
	}

	.block1{
		width:100%;
	}

	section {
		margin-top: -60px;
		padding-top: 60px;
	}

	.h32{
		margin-top:0;
	}








	.civil_list_head_txt1{
		width:160px;
	}

	.civil_list1{
		width:160px;
	}

	.civil_list2{
		width: calc(100% - 166px);
	}


	.civil_list2_1{
		width:100%;
	}

	.civil_list2_2{
		width:100%;
		text-align:center;
	}

	.tab li{
		width: 50%;
	}

	.tab li a{
		margin:0 auto 5px;
	}

	.tab li.active a{
		margin:0 auto 5px;
	}

	.tab li a:hover{
		margin:0 auto 5px;
	}



}