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

/******** トップイメージ ********/

#main-img {
	position:relative;
	width:100%;
	height:747px;
	background:URL(../img/top/main-img.png) no-repeat center center;
	background-size:cover;
}

#main-inner {
	position:absolute;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	top:251px;
	width:1060px;
	left:0;
	right:0;
	margin:0 auto;
}
#main-logo {
	width:384px;
	margin-right:68px;
}

#main-cmt{
	text-align: left;
	font-family: 'Hiragino Sans';
	color:#fff;
}

#main-cmt p{
	font-size:2.5rem;
	position: relative;
}

#main-cmt ul{
}

#main-cmt ul li{
  line-height: 36px;
	font-size:1.25rem;
}

#scroll-btn {
	position:absolute;
	left:50%;
	bottom:-66px;
	-webkit-transform:translate(-50%,0);
	-ms-transform:translate(-50%,0);
	transform:translate(-50%,0);
}
#scroll-circle {
	display:block;
	color:#FFF;
	font-size:1.066rem;
	letter-spacing:1px;
	width:85px;
	height:85px;
	background:#7adeff;
	border:1px solid #7adeff;
	border-radius:50px;
}
#scroll-circle::after {
	content:'';
	display:block;
	width:25px;
	height:25px;
    border-top:2px solid #FFF;
    border-right:2px solid #FFF;
	-webkit-transform:translate(100%, 80%) rotate(135deg);
	-ms-transform:translate(100%, 80%) rotate(135deg);
	transform:translate(100%, 80%) rotate(135deg);
	-webkit-transition:all 200ms;
	transition:all 200ms;
	top:50%;
}
#scroll-btn p{
	font-size: 12px;
	margin-top:6px;
}

#main-copy {
  padding:143px 0 92px 0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	justify-content: center;
}
#main-copy h1 {
	font-size:1.5rem;
	line-height:48px;
	font-family: 'Kozuka Mincho Pro';
	font-weight: 500;
}

#main-copy #left-circle{
	margin-top: 34px;
	margin-right:6.25rem;
}

#main-copy #right-circle{
	margin-top: -47px;
	margin-left:6.6875rem;
}

.br-sp{
	display: none;
}

/******** 事業案内＆INFORMATION ********/

#contents-inner {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	width:1100px;
	margin:0 auto;
}

/******** 事業案内 ********/

.sec-cont{
	width:530px;
	margin-right:40px;
}

.sec-top-ttl{
	font-size:1.5rem;
	margin-bottom:29px;
	color:#00a3d8;
	text-align: center;
}

.sec-top-ttl img{
	padding:6px 13px;
}

#block {
	height: 410px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	text-align: left;
}

#block .block-box1{
	width:16.25rem;
	height: 200px;
	padding-left:28px;
	padding-top:20px;
	color:#fff;
}

#block .block-box1:hover{
	opacity:.5;
	cursor: pointer;
}

#block .block-box1 span{
	font-size: 2rem;
}

#block .block-box2{
	width:16.25rem;
	height: 200px;
	padding-left:28px;
	padding-top:20px;
	color:#fff;
}

#block .block-box2:hover{
	opacity:.5;
	cursor: pointer;
}

#block .block-box2 span{
	font-size: 2rem;
}

.block-box1{
	background: URL(../img/top/content-1.png) no-repeat center center;
}

.block-box2{
	background: URL(../img/top/content-2.png) no-repeat center center;
}

.top-box{
	margin-bottom: 10px;
}

.l-box{
	margin-right: 10px;
}

.l4-box span{
  font-size: 1.75rem;
}

/******** INFORMATION ********/

#sec-info{
	width:530px;
	margin-left:40px;
}

#info {
	text-align:left;
	border-top:1px solid #7adeff;
	border-bottom:1px solid #7adeff;
	padding:30px 0 35px 0;
	height: 410px;
	overflow-y: scroll; 
}

#info dl {
	font-size:0.9375rem;
	line-height:36px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	flex-wrap: wrap;
}

#info dt{
	color: #00a3d8;
}

#info dt small{
	background-color:#00d9d9;
	color:#fff;
	margin-left:10px;
	padding:3px;
	font-size: 13px;
	font-weight: 600;
}

.dd-tit-sp{
  padding-left: 10px;
	width:auto;
}
.dd-con-sp {
  padding-left: 108px;
	width:auto;
}


/******** RECRUITMENT ********/

#sec-recruit{
	margin-top:100px;
}

#title-recruit-sp{
  display: none;
}

#recruit{
	width:100%;
	height: 352px;
	background:URL(../img/top/recruit-img.png) no-repeat center center;
	background-size:cover;
	color:#FFF;
}

#recruit-inner {
	width:1110px;
	margin:0 auto;
	padding:80px 0 0 0;
}

#title-recruit{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex; 
	text-align: left;
	position:relative;
}

#title-recruit h3{
	font-size: 3.25rem;
	font-weight: 200;
	margin-left: 21px;
	-webkit-transform:translate(0, -10px);
	-ms-transform:translate(0, -10px);
	transform:translate(0, -10px);
}

#title-recruit h3 a{
	color: #FFF;
}

#s-title-recruit{
	position:absolute;
	bottom:-3px;
	left:106px;
	font-size: 0.9375rem;
}

#list-recruit{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	text-align: left;
	margin-left:106px;
	margin-top:36px;
}

.list1 li a,
.list2 li a{
	color:#fff;
	line-height:1.8;
	font-size:1.25rem;
}

.list2{
	margin-left: 2.5rem;
}

#list-recruit-sp{
	display: none;
}

/******** 上下水道指定地域 ********/

#sec-local{
	margin-top:100px;
	/* position: relative; */
}

#local-list{
	width:100vw;
}

#local-list ul{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	justify-content: center;
}

#local-list ul li{
	position:relative;
	margin:0 7px;
	color:#474747;
	font-size: 20px;
	/* display:inline-block; */
}

#local-list ul li span{
	position: absolute;
	top:50%;
	left:0;
  	-webkit-transform:translate(0, -50%);
	-ms-transform:translate(0, -50%);
	transform:translate(0, -50%);
	width:100%;
	text-align: center;
}

.letter4{
  -webkit-transform:translate(-10px, 0);
	-ms-transform:translate(-10px, 0);
	transform:translate(-10px, 0);
}


#pageup-bottom{
	border-top: none;
	margin-top: 30px;
}





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

	/****************************************************************************************************
	main-img
	****************************************************************************************************/

	#main-img {
		width:100vw;
		height: 50vh;
		background:URL(../img/top/main-img.png) no-repeat;
		background-size:cover;
		position: relative;
	}

	#main-inner {
		position:absolute;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align:start;
		-webkit-align-items:start;
		-ms-flex-align:start;
		align-items:start;
		top:25vw;
		width:92%;
		left:0;
		right:0;
		margin:0 auto;
	}
	#main-logo {
		position: static;
		width:27%;
		margin-right:5%;
	}
	
	#main-cmt{
		padding-top:5vw;
	}
	
	#main-cmt p{
		font-size:1.3rem;
		position: static;
		padding-bottom:10px;
	}
	
	#main-cmt ul{
		position: static;
	}
	
	#main-cmt ul li{
		line-height: 18px;
		font-size:0.9rem;
	}

	#main-copy {
		padding:0 0;
		display:block; 
		justify-content: center;
	}
	#main-copy h1 {
		font-size:18px;
		line-height:1.8;
		font-family: 'Kozuka Mincho Pro';
		font-weight: 500;
	}
	
	#main-copy #left-circle{
		width:15%;
		margin-left:8%;
		padding-bottom:5%;
	}
	
	#main-copy #right-circle{
		width:20%;
		margin-top:5%;
		margin-left:75%;
	}

	.br-sp{
		display: block;
	}

/******** スクロールボタン ********/

#scroll-btn {
	bottom:-13vw;
}
#scroll-circle{
	width:16vw;
	height:16vw;
}
#scroll-circle::after {
	content:'';
	display:block;
	width:4vw;
	height:4vw;
    border-top:2px solid #FFF;
    border-right:2px solid #FFF;
	-webkit-transition:all 200ms;
	transition:all 200ms;
	-webkit-transform:translate(120%, 105%) rotate(135deg);
	-ms-transform:translate(120%, 105%) rotate(135deg);
	transform:translate(120%, 105%) rotate(135deg);
}	
#scroll-btn p{
	font-size: 12px;
	margin-top:0px;
	-webkit-transform:translate(0,0);
	-ms-transform:translate(0,0);
	transform:translate(0,0);
}


	
/******** 事業案内＆INFORMATION ********/

	#contents-inner {
		display: block;
		width:92vw;
		margin:0 auto;
	}
 

/******** 事業案内 ********/

	.sec-top-ttl{
		font-size:1.5rem;
		margin-bottom:10px;
		color:#00a3d8;
		margin-right:0;
	}
	
	.sec-top-ttl img{
		width:12%;
	}
	
	#block {
		justify-content: center;
		height: 350px;
	}

	#block .block-box1{
		width:175px;
		height: 140px;
		padding-left:0;
		padding-top:0;
		color:#fff;
		margin:5px 2px;
		padding:10px 5px 0 10px;
	}
	
	#block .block-box1 span{
		font-size: 1.25rem;
	}
	#block .block-box1 p{
		font-size: 13px;
		padding:5px;
	}
	
	#block .block-box2{
		width:175px;
		height: 140px;
		padding-left:0;
		padding-top:0;
		color:#fff;
		margin:5px 2px;
		padding:10px 5px 0 10px;
	}
	
	#block .block-box2 span{
		font-size: 1.25rem;
	}
	#block .block-box2 p{
		font-size: 13px;
		padding:5px;
	}

	.block-box1{
		background: URL(../img/top/content-1sp.png) no-repeat center center;
		background-size: 175px 140px;
	}
	
	.block-box2{
		background: URL(../img/top/content-2sp.png) no-repeat center center;
		background-size: 175px 140px;
	}

	/* #block .block-box1{
		padding-left:4.5vw;
		padding-top:4vw;
	} */


	.top-box{
		margin-bottom: 0px;
	}
	
	.l-box{
		margin-right: 5px;
	}
	
	.l4-box span{
		font-size: 1.75rem;
	}

	/******** INFORMATION ********/

#sec-info{
	width:92vw;
	margin:0 auto;
	margin-top:10vw;
}

#info {
	padding:30px 10px 35px 10px;
	height: 300px;
	overflow-y: scroll; 
}

#info dl {
	font-size:0.8rem;
	line-height:30px;
  display:block; 
}

#info dt{
	color: #00a3d8;
}

.dd-tit-sp{
  padding-left:10px;
}

.dd-con-sp{
	padding-left:10px;
}

/******** RECRUITMENT ********/

#sec-recruit{
	margin-top:100px;
}

/* #title-recruit-sp{
	color:#333;
	text-align: left;
	display: block;
}

#title-recruit-sp img{
	display: none;
}

#title-recruit-sp h3{
	font-size: 1.3rem;
	font-weight: 300;
	margin-left: 20px;
}

#s-title-recruit-sp{
	margin-left: 20px;
} */

#recruit{
	width:100%;
	height:auto;
	background: URL(../img/top/recruit-img.png) no-repeat center right;
	background-size:cover;
}

#recruit-inner {
	width:100%;
	margin:0 auto;
	padding:4vw;
}

/* #title-recruit{
	display: none;
} */

#title-recruit img{
  width:10%;
}

#title-recruit h3{
	font-size: 1.3rem;
	font-weight: 300;
	margin-left: 0px;
	-webkit-transform:translate(5%, -20%);
	-ms-transform:translate(5%, -20%);
	transform:translate(5%, -20%);
}

#s-title-recruit{
	font-size: 0.8rem;
	position: absolute;
	left:13vw;
	top:20px;
}


#list-recruit{
	display: none;
}

#list-recruit-sp{
 display: block;
}

#list-recruit-sp ul{
	margin-left: 18vw;
	margin-top:10px;
}

#list-recruit-sp ul li{
	text-align: left;
}

#list-recruit-sp ul li a{
   color:#00d9d9;
	 line-height:1.8;
	 font-size:1rem;
}



/******** 上下水道指定地域 ********/

#sec-local{
	/* margin-top:80px; */
}

#local-list{

}

#local-list ul{

}


#local-list ul li{
	margin:0 2px;
	font-size: 10px;
}

.letter4{
	font-size: 8px;
}



}

@media screen and (max-width: 896px) and (orientation: landscape) {

		/****************************************************************************************************
	main-img
	****************************************************************************************************/

	#main-img {
		width:100%;
		height: 100vh;
		background:URL(../img/top/main-img.png) no-repeat;
		background-size:100vw 100vh;
	}

	#main-inner {
		top:13vw;
	}
	
/******** スクロールボタン ********/

#scroll-btn {
	bottom:-7vw;
}
#scroll-circle{
	width:10vw;
	height:10vw;
}
#scroll-circle::after {
	-webkit-transform:translate(65%, 60%) rotate(135deg);
	-ms-transform:translate(65%, 60%) rotate(135deg);
	transform:translate(65%, 60%) rotate(135deg);
}	

#main-copy #left-circle{
	width:10%;
	margin-left:8%;
	padding-bottom:0;
}

#main-copy #right-circle{
	width:15%;
	margin-top:0;
	margin-left:75%;
}
	
/******** 事業案内＆INFORMATION ********/

#contents-inner {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex;
	justify-content: space-around;
	width:100vw;
	margin:0 auto;
}

.sec-top-ttl img{
	width:6vw;
}

/******** 事業案内 ********/
.sec-cont{
	width:50vw;
	margin:0 10px;
}
/******** INFORMATION ********/

#sec-info{
	width:50vw;
	margin:0 10px;
}

#info {
	padding:30px 0 35px 0;
	height: 300px;
	overflow-y: scroll; 
}

/******** RECRUITMENT ********/

#sec-recruit{
	margin-top:50px;
}

#title-recruit-sp{
  display: none;
}

#recruit{
	width:100vw;
	height: 200px;
	background:URL(../img/top/recruit-img.png) no-repeat center center;
	background-size:cover;
	color:#FFF;
	position:relative;
}

#recruit-inner {
	width:100vw;
	margin:0 auto;
	padding:0;
}

#title-recruit{
	padding:10px 0 0 10px;
}

#title-recruit h3{
	font-size: 2rem;
	font-weight: 200;
	margin-left: 20px;
	-webkit-transform:translate(0, 25px);
	-ms-transform:translate(0, 25px);
	transform:translate(0, 25px);
}

#title-recruit h3 a{
	color: #FFF;
}
#title-recruit h3 img{
	width:8vw;
}

#s-title-recruit{
	position:absolute;
	top:10px;
	left:106px;
	font-size: 0.9375rem;
}

#list-recruit{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
  display:flex; 
	text-align: left;
	margin-left:106px;
	margin-top:0;
}

.list1 li a,
.list2 li a{
	color:#fff;
	line-height:1.5;
	font-size:1.25rem;
}

.list2{
	margin-left: 2.5rem;
}

#list-recruit-sp{
	display: none;
}



}