@charset "UTF-8";
/* CSS Document */

/*************************************

   common

**************************************/

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

  title

-------------------------*/
.title1 h3{
	color: var(--main-color)
}
.title1 span{
	color: var(--sub-color);
}

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

  table

-------------------------*/
.table_w50{
	gap:20px
}

.table_w50 > div{
	width: 100%;
}

.table1 dt{
	width: 30%;
}
.table1 dd{
	width: 70%;
}

.table2 dt{
	width: 25%
}
.table2 dd{
	width: calc(75% / 2);
	text-align: center
}

@media (min-width:768px){
	.table_w50 > div{
		width: calc(50% - 20px)
	}
}


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

  header

-------------------------*/
.page_header{
	background: var(--bg-color);
	padding: 150px 0 50px;
	border-bottom-left-radius: 2em;
	border-bottom-right-radius: 2em;
	margin-bottom: 3em;
}

.header_title{
	text-align: center;
}
.header_title span{
	color: var(--main-color);
	letter-spacing: 6px;
	font-size: 2em;
	display: block;
	line-height: 1.3;
	margin-bottom: .3em;
}

@media (min-width:1024px){
	.page_header{
		padding: 190px 0 100px;
		border-bottom-left-radius: 5em;
		border-bottom-right-radius: 5em;
	}
	.header_title span{
		letter-spacing: 10px
	}
}


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

  page_intro

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


.page_intro{
	height: 600px;
	position: relative;
	margin-bottom: 5em;
}
.page_intro:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.3);
}
.page_intro img{
	vertical-align: bottom;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.intro_text{
	position: absolute;
	bottom: 50px;
	color: #fff;
}
.intro_text h3{
	font-size: 1.6em;
	line-height: 2.2;
	margin-bottom: 1em;
	letter-spacing: 3px;
}
@media (max-width:767px){
	.intro_text{
		padding: 0 5%
	}
}
@media (min-width:768px){
	.intro_text{
		left: 5%;
	}
}

@media (min-width:1200px){
	.page_intro{
		height: 800px;
	}
	.intro_text{
		left: 8%;
	}
}





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

   privacy　個人情報保護方針

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

#page_privacy > p{
	margin-bottom: 1em;
}

.privacy_wrap{
	margin-top: 5em
}
.privacy_wrap dl{
	border-bottom: solid 1px #ccc;
	padding: 1em 0 2em;
	margin-bottom: 2em;
}
.privacy_wrap dt{
	font-weight: bold;
	font-size: 1.8em;
	line-height: 1.6;
	margin-bottom: 1em
}
.privacy_wrap dd{
	line-height: 1.8
}
.privacy_wrap dd p{
	font-size: 1em;
	font-weight: 400;
	line-height: 2;
	margin-bottom: 1em
}

.privacy_wrap ul,
.privacy_wrap ol{
	margin: 1em auto;
	padding-left: 2em
}
.privacy_wrap li{
	list-style: disc;
	margin-bottom: .5em;
	line-height: 1.8
}
.privacy_wrap ol li{
	list-style: decimal
}



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

   404 　Not Found

------------------------------------*/
#page_notf .page_header{
	margin-bottom: 3em!important;
}
#page_notf .wrap{
}
#page_notf .wrap h2{
	margin-bottom: 1em;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.6
}

#page_notf a{
	margin-top: 2em
}
#page_notf a:after{
	display: none!important
}





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

   about　私達について

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

#about_intro{
	height: 600px;
	position: relative;
	margin-bottom: 5em;
}
#about_intro:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.3);
}
#about_intro img{
	vertical-align: bottom;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.intro_text{
	position: absolute;
	bottom: 50px;
	color: #fff;
}
.intro_text h3{
	font-size: 1.6em;
	line-height: 2.2;
	margin-bottom: 1em;
	letter-spacing: 3px;
}
@media (max-width:767px){
	.intro_text{
		padding: 0 5%
	}
}
@media (min-width:768px){
	.intro_text{
		left: 5%;
	}
}

@media (min-width:1200px){
	#about_intro{
		height: 800px;
	}
	.intro_text{
		left: 8%;
	}
}


/*  greeting */

#greeting {
	margin: 3em auto;
}
#greeting div.bg{
	border-radius: 2em;
	overflow: hidden;
	padding: 2em 1em;
}

#greeting p{
	margin: 2em auto;
}

.riji_name{
	font-weight: bold;
	text-align: right;
	display: block;
	margin-top: 3em;
	font-size: 1.3em
}

@media (min-width:768px){
	#greeting div.bg{
		padding: 3em
	}
}


/*  area  */

#area{
	margin: 5em auto;
	gap:30px
}

@media(max-width:767px){
	#area{
		flex-direction: column-reverse;
	}
}


#area figure,
#area > div{
	width: 100%;
}

@media (min-width:1000px){
	#area figure,
	#area > div{
		width: calc(50% - 20px)
	}
	#area > div .title1{
		text-align: left
	}
}


/* kouji_wrap */

#kouji_wrap{
	gap : 30px;
	margin-bottom: 5em
}

#kouji_wrap > div{
	width: 100%;
}


@media (min-width:1000px){
	#kouji_wrap > div{
		width: calc(50% - 30px);
	}
	#kouji_wrap .title1{
		text-align: left
	}
}

#construction .table_wrap dt,
#construction .table_wrap dd{
	width: 50%;
}

#beneficiary .table_head{
	background: var(--bg-color);
}
#beneficiary .table_head dd{
	font-weight: bold;
	line-height: 1.5
}

#beneficiary .table_wrap{
	margin-bottom: 0
}
#beneficiary .table_wrap dt{
	width: 45%;
}
#beneficiary .table_wrap dd{
	width: 25%;
	text-align: center;
}


@media (min-width:768px){
	#beneficiary .table_wrap dt{
		width: 40%;
	}
	#beneficiary .table_wrap dd{
		width: 30%
	}
}

/* facility */

#facility{
	margin: 10em auto;
}
#facility .title1{
	margin-bottom: 3em
}

#facility div.flex {
	gap : 30px;
}
#facility figure{
	width: 100%;
}
#facility figcaption{
	text-align: center;
	margin-top: .5em;
	font-weight: bold;
	color: #575757
}

@media (min-width:768px){
	#facility figure{
		width: calc(50% - 30px)
	}
}

@media (min-width:1000px){
	#facility figure{
		width: calc((100% / 3) - 30px)
	}
}

/* history */

#history{
	margin: 5em auto;
}




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

   サービス　共通

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

/* ヘッダー部分 */
.service_header{
	gap : 20px;
	align-items: center;
	margin-bottom: 6em;
}

.service_header > *{
	width: 100%;
	margin-bottom: 2em;
}

@media (min-width:768px){
	.service_header > *{
		width: calc(50% - 20px)
	}
}

.sh_title h2,
.sh_sub_title{
	font-weight: bold;
}

.sh_title h2{
	font-size: 3em;
	color: #0F7EEF;
	margin-bottom: 1em;
	letter-spacing: 15px;
}
.sh_sub_title{
	color: var(--sub-color);
	font-size: 1.3em;
	line-height: 1.6;
	margin-bottom: 1em;
	letter-spacing: 5px;
}

@media (min-width:768px){
	.sh_title h2{
		font-size: 3em;
	}
	.sh_sub_title{
		font-size: 1.5em;
	}
}

@media (min-width:1200px){
	.sh_title h2{
		font-size: 4em;
	}
	.sh_sub_title{
		font-size: 2em;
	}
}


.service_facility .title1{
	margin-bottom: 3em
}

/* facility_wrap */

.facility_wrap h3{
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 1em;
}
.facility_wrap p{
	line-height: 2.2!important
}

.facility_wrap1,
.facility_wrap2{
	gap : 20px;
	margin-bottom: 1em;
}
.facility_wrap1 > *,
.facility_wrap2 > *{
	width: 100%;
}

.facility_wrap1{
	margin-bottom: 5em;
	align-items: center;
}

@media (min-width:768px){
	.facility_wrap1 > *,
	.facility_wrap2 > *{
		width: calc(50% - 20px);
	}	
	#facility_map{
		width: 60%!important
	}
}


.facility_wrap2 figure{
	aspect-ratio : 3 / 2;
	overflow: hidden;
	border-radius: 2em;
	margin-bottom: 1.5em;
}
.facility_wrap2 figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}


/* bg area */
.service_bg{
	margin: 5em auto;
	padding: 3em 0;
}
.service_bg div.w_wrap{
	background: #fff;
	border-radius: 2em;
	padding: 2em;
}
.role_dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap : 15px;
	max-width: 800px;
	margin: 0 auto 1em;
	
}
.role_dl > *{
	width: 100%;
	line-height: 2!important
}
.role_dl dt{
	color: var(--main-color);
	font-weight:bold;
}
@media (min-width:768px){
	.role_dl dt{
		width: 20%;
	}
	.role_dl dd{
		width: calc(80% - 15px)
	}
}

/* 表 */
.specifications{
	margin: 6em auto
}
.specifications .title1{
	text-align: left
}





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

   irrigation　水利

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

#flow-1{
	margin-bottom: 5em
}

#flow-1 .flex > *{
	width: 100%;
	margin-bottom: 1em;
}

@media (min-width:1000px){
	#flow-1 .flex figure{
		width: 65%;
		margin-right: 20px
	}
	#flow-1 .flex p{
		width: calc(35% - 20px);
	}
}

#role .w_wrap{
	margin: 3em auto	
}

.role_wrap{
	margin-bottom: 6em;
	position: relative
}
.role_wrap:not(:last-of-type):after{
	content: '';
	clip-path: polygon(50% 100%, 0 0, 98% 0);
	background: #333;
	display: block;
	width: 80px;
	height: 15px;
	position: absolute;
	top: calc(100% + 2.5em);
	left: 50%;
	transform: translateX( -50%)
}
.role_wrap > *{
	width: 100%;
	gap : 20px
}
.role_wrap h4{
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 1em;
	background: var(--main-color);
	border-radius: 2em;
	color: #fff;
	width: 100%;
	max-width: 400px;
	padding: 0 1em;
	
}
.role_wrap p{
	line-height: 2.2;
}

@media (min-width:1000px){
	.role_wrap > *{
		width: calc(50% - 20px);
	}
}




.figure_area{
	margin: 3em auto
}


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

   download

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

#page_download .dl_wrap .title1{
	text-align: left
}


.dl_wrap {
	margin: 3em auto
}

.dl_wrap i{
	display: inline-block;
	margin-right: .5em;
	font-size: 1.6em;
}

i.icon-word{color: blue}
i.icon-excel{color: green}
i.icon-pdf{color: red}

.dl_name{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 1.5em auto;
}

.dl_wrap a{
	display: inline-block;
	text-decoration: underline;
	color: #000
}

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

   damcard

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


.damcard_att{
	margin: 3em auto;
	padding: 1em;
	border-radius: 1.5em;
}
.damcard_att > div{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.damcard_att h3{
	font-weight: bold;
	font-size: 1.6em;
	letter-spacing: 2px;
	margin-bottom: 1em;
	color: var(--sub-color);
	text-align: center;
}
.damcard_att span{
	display: block;
	margin-top: 1.5em;
	font-weight: bold;
	color: red;
}

@media (min-width:768px){
	.damcard_att{
		padding: 1.5em 2em
	}
}

.damcard_wrap .title1{
	text-align: left;
	margin-bottom: 2em
}

.damcard_wrap ul{
	gap : 20px;
}
.damcard_wrap li{
	width: 100%;
}
.damcard_wrap li h4{
	font-weight: bold
}

@media (min-width:768px){
	.damcard_wrap li{
		width: calc(50% - 20px);
	}
}
@media (min-width:1200px){
	.damcard_wrap li{
		width: calc((100% / 3) - 20px);
	}
}