@charset "UTF-8";



/* ================================================================================
prepare
================================================================================ */
#KV
{
	min-width: 1100px;
	padding: 5rem 0;
	background-image: url("../image/front-page/KV_background.png");
	background-size: cover;
background-repeat: no-repeat;
}
#KV > .inner
{
	width: 1100px;
	margin: 0 auto;
	position: relative;
}

#KV .text1
{
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 36px;
	color: #1379BC;
}

#KV .text2
{
	margin: 0 auto 3rem;
	text-align: left;
	color: #1379BC;
 font-size: 20px;
}

#KV .text2 span
{
	padding: 5px;
	background-color: white;
}

#KV p:nth-child(1){	transition-delay: 1.0s;	}
#KV p:nth-child(2){	transition-delay: 2.0s;	}
#KV h3{	width: 419px;		}

#KV .img1{	width: 373px;	position: absolute; top: 100px; left:645px;	}

#KV .bimg1{	width: 62px;	position: absolute; top: 400px; left:-20px;	}

/* ================================================================================
explain
================================================================================ */
#explain
{
	min-width: 1100px;
	padding: 5rem 0;

}
#explain > .inner
{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	position: relative;

}

#explain .box0
{
display: flex;
justify-content: space-between;
width: 925px;
margin: 0 auto;

}


#explain .text1
{
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 36px;
}

#explain .text2
{
	margin: 0 auto 3rem;
	line-height: 2;
	text-align: left;
 font-size: 16px;
}

#explain .button
{
width: 328px;
margin-top: 120px;
margin-left: 240px;
}

#explain .bimg1{	width: 62px;	position: absolute; top: 850px; left:-100px;	}

#explain .bimg2{	width: 62px;	position: absolute; top: 600px; left: 1200px;	}



/* ================================================================================
hope
================================================================================ */
#hope
{
	min-width: 1100px;
	padding: 5rem 0 15rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("../image/front-page/bg_water_1.png");
	background-position: 0 110%;
}
#hope > .inner
{
	width: 1100px;
	margin: 0 auto;
	position: relative;

}

#hope .menu
{
display: flex;
justify-content: space-between;
width: 854px;
margin: 0 auto 50px;
}

#hope .menub
{
width: 400px;
}


#hope h3
{
width: 700px;
margin: 0 auto 70px;
font-size: 34px;
font-weight: bold;
}

#hope h3 span
{
  background: linear-gradient(180deg, white 0%, white 70%, #E1FC86 70%, #E1FC86 100%);
}


#hope .img1
{
position: absolute;
top: 90px;
left: 700px;
width: 170px;
}

#hope .fbox
{
display: flex;
justify-content: space-between;
width: 940px;
margin: 0 auto 80px;
}

#hope .box
{
text-align: center;
position: relative;
width: 260px;
height: 260px;
padding-top: 80px;
background-color: #E4F6FA;
border-radius: 130px;
font-weight: bold;
}

#hope .box:nth-child(2)
{
padding-top: 65px;
}

#hope .number
{
color: white;
text-align: center;
position: absolute;
font-size: 20px;
width: 58px;
height: 58px;
padding-top: 17px;
background-color: #1A95F0;
border-radius: 29px;
top: 0;
left: 10px;
}

#hope .box p
{
font-size: 15px;
color: #26A8E2;
}

#hope .box span
{
font-size: 24px;
line-height: 2;
color: #26A8E2;
}

#hope .img2
{
width: 271px;
margin: 0 auto;
}

#hope .button
{
width: 529px;
margin: 0 auto 60px;
}

#hope .button2
{
width: 402px;
margin: 0 auto;
}

#hope .img0
{
position: absolute;
left: calc( 50% - 9px );
bottom: 20px;
width: 18px;
margin: 0 auto;
}


/* ================================================================================
standard
================================================================================ */
#standard
{
	min-width: 1100px;
	padding: 5rem 0;
	background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#standard > .inner
{
	width: 1100px;
	margin: 0 auto;
}
#standard .fbox
{
display: flex;
justify-content: space-between;
align-items: center;
width: 516px;
margin: 0 auto 100px;
}

#standard .number
{
font-size: 48px;
color: white;
text-align: center;
background-color: #26A8E2;
padding-top: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
}


#standard span
{
font-size: 24px;
color: #26A8E2;
}


#standard h3
{
font-size: 40px;
font-weight: bold;
margin-bottom: 0px;
}

#standard h3 span
{
border-bottom: none!important
}

#standard .img1
{
width: 924px;
margin: 0 auto 50px;
}

#standard h4
{
width: 520px;
text-align: center;
padding: 10px 10px;
border-radius: 100px;
margin: 0 auto;
font-size: 28px;
font-weight: bold;
background-color: #E4F6FA;
margin-bottom: 30px;
}

#standard .img2
{
width: 375px;
margin: 0 auto 50px;
}

#standard .img3
{
width: 394px;
margin-bottom: 20px;
}

#standard .img4
{
width: 120px;
margin-bottom: 0px;
}

#standard .img5
{
width: 506px;
margin-bottom: 0px;
}

#standard .img6
{
width: 519px;
margin-bottom: 0px;
}

#standard .img7
{
width: 672px;
margin-bottom: 0px;
margin-left: -10px;

}

#standard li
{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}

#standard li:last-child
{
margin-bottom: 0;
}

#standard .lbox
{
width: 506px;
padding-top: 30px;
margin-left: 50px;
}


#standard .lbox2
{
display: flex;
}

#standard .lbox3
{
width: 275px;
padding-top: 30px;
}


#standard .lbox3 h5
{
font-size: 28px;
margin-bottom: 20px;

}

#standard .lbox3 p
{
line-height: 2;
font-size: 16px;
}

#standard .text1
{
padding-top: 180px;
font-weight: bold;
font-size: 20px;
text-align: right;
}

#standard .img9
{
width: 674px;
margin-right: -10px;
}

#standard .img10
{
width: 319px;
}

#standard .img11
{
width: 319px;
margin-left: 550px;
}

#standard .img12
{
width: 421px;
margin-left: 170px;
}

#standard .img13
{
width: 326px;
margin: 0 auto 100px;
}

#standard .button
{
width: 529px;
margin: 0 auto 50px;
}

#standard .product
{
text-align: center;
font-weight: bold;
font-size: 18px;
color: #309EE2;
}


#standard span
{
border-bottom: 1px solid #309EE2;
}

#standard .bimg1{	width: 29px;	position: absolute; top: 120px; left:1000px;	}

#standard .bimg2{	width: 85px;	position: absolute; top: 2000px; left: 10px;	}

#standard .bimg3{	width: 151px;	position: absolute; top: 2500px; left: 1200px;	}

#standard .bimg4{	width: 404px;	position: absolute; top: 3900px; left: 600px;	}

/* ================================================================================
custom
================================================================================ */
#custom
{
	min-width: 1100px;
	padding: 5rem 0;
	background-size: cover;
background-repeat: no-repeat;
position: relative;
background-color: #E1F2F8
}
#custom > .inner
{
	width: 1100px;
	margin: 0 auto;
}
#custom .fbox
{
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
width: 590px;
margin: 0 auto 50px;
}

#custom .number
{
font-size: 48px;
color: white;
text-align: center;
background-color: #26A8E2;
padding-top: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
}


#custom span
{
font-size: 24px;
color: #26A8E2;
}


#custom h3
{
font-size: 40px;
font-weight: bold;
}



#custom h5
{
font-size: 110px;
line-height: 1;
color: white;
margin-bottom: 20px;
}


#custom .img1
{
width: 34px;
margin-right: 10px;
}

#custom .img2
{
width: 484px;
}

#custom .img3
{
width: 484px;
padding-top: 50px;}

#custom .img4
{
width: 319px;
}

#custom .img5
{
width: 408px;
padding-top: 200px;
}


#custom ul
{
margin-bottom: 200px;
}


#custom li
{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}

#custom li .list2
{
display: flex;
justify-content:left;
align-items: center;
width: 450px;
margin: 0 auto 20px;}

#custom li:last-child
{
margin-bottom: 0;
}

#custom .lbox
{
width: 506px;
}


#custom .lbox2
{
display: flex;
}

#custom .lbox3
{
width: 600px;
}

#custom .lbox3 .tr
{
text-align: right;
}

#custom .text
{
width: 324px;
margin: 0 0 10px auto;
font-size: 16px;
background-color: #FFFFFF;
padding: 20px 40px;
}





#custom .lbox3 p
{
line-height: 2;
font-size: 16px;
font-weight: bold;
}

#custom .ul2
{
width: 450px;
margin: 0 0 0 auto;
}

#custom .imgbox
{
width: 790px;
margin: 0 auto;
}

#custom .button
{
width: 520px;
margin: 0 auto 30px;
}

#custom .product
{
text-align: center;
font-weight: bold;

font-size: 18px;
color: #309EE2;

}

#custom .product span
{
border-bottom: 1px solid #309EE2;
}

#custom .bimg1{	width: 29px;	position: absolute; top: -20px; left:850px;	}

#custom .bimg2{	width: 86px;	position: absolute; top: 850px; left: 900px;	}

#custom .bimg3{	width: 337px;	position: absolute; top: 1680px; left: 650px;	}

/* ================================================================================
oem
================================================================================ */
#oem
{
	min-width: 1100px;
	padding: 7rem 0 35rem;
position: relative;
background-repeat: no-repeat;
background-size: contain;
background-image: url("../image/front-page/bg_water_1.png");
background-position: 0% 100%;
}
#oem > .inner
{
	width: 1100px;
	margin: 0 auto;
}
#oem .fbox
{
display: flex;
justify-content: space-between;
align-items: center;
width: 590px;
margin: 0 auto 50px;
}

#oem .number
{
font-size: 48px;
color: white;
text-align: center;
background-color: #26A8E2;
padding-top: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
}


#oem span
{
font-size: 24px;
color: #26A8E2;
}


#oem h3
{
font-size: 40px;
font-weight: bold;
}


#oem h4
{
width: 388px;
text-align: center;
padding: 15px 10px;
border-radius: 100px;
margin: 0 auto;
font-size: 24px;
background-color: #E4F6FA;
margin-bottom: 30px;
}

#oem .img1
{
width: 674px;
margin: 0 auto 100px}


#oem .button
{
width: 520px;
margin: 0 auto 30px;
}

#oem .product
{
text-align: center;
font-weight: bold;
font-size: 18px;
color: #309EE2;
}

#oem .product span
{

border-bottom: 1px solid;
}

#oem .bimg1{	width: 25px;	position: absolute; top: 10px; left:850px;	}

#oem .bimg2{	width: 56px;	position: absolute; top: 1300px; left: 850px;	}
/* ========================================
SP
======================================== */
@media screen and (max-width: 767px)
{

	#KV
	{
		min-width: 100vw;
		padding: 10vw 5vw 65vw;
		background-image: url("../image/front-page/KV_background.png");
		background-size: cover;
	background-repeat: no-repeat;
	}
	#KV > .inner
	{
		width: 90vw;
		margin: 0 auto;
		position: relative;
	}

	#KV .text1
	{
		margin: 0 auto 1rem;
		text-align: left;
		font-size: 5.5vw;
		font-weight: bold;
		color: #1379BC;
	}

	#KV .text2
	{
		margin: 0 auto 5vw;
		text-align: left;
		color: #1379BC;
	 font-size: 4vw;
	}

	#KV .text2 span
	{
		line-height: 2.5;
		padding: 5px;
		background-color: white;
	}


	#KV h3{	width: 80vw;		}

	#KV .img1{	width: 50vw;	position: absolute; top: 80vw; left:-5vw;	}

	#KV .img2{	width: 50vw;	position: absolute; top: 95vw; left:44vw;	}

#KV .bimg1{	width: 12vw;	position: absolute; top: 131vw; left:0vw;	}

	/* ================================================================================
	explain
	================================================================================ */
	#explain
	{
		min-width: 100vw;
		padding: 10vw 5vw;

	position: relative;
	}
	#explain > .inner
	{
		width: 90vw;
		margin: 0 auto;
		display: block;
	}

	#explain .text1
	{
		margin: 0 auto 1rem;
		text-align: left;
		font-size: 5vw;
	}

	#explain .text2
	{
		margin: 0 auto 3rem;
		line-height: 2;
		text-align: left;
	 font-size: 16px;
	}

	#explain .button
	{
	width: 80vw;
	margin: 0 auto;
	/* margin-top: 0;
	margin-left: 0; */
	}

	#explain .bimg1{	width: 12vw;	position: absolute; top: 245vw; left:-5vw;	}

	#explain .bimg2{	width: 12vw;	position: absolute; top: 150vw; left: 82vw;	}

	#recommend .bimg1{	width: 35vw;	position: absolute; top: -15vw; left:55vw;	}

	#recommend .bimg2{	width: 20vw;	position: absolute; top: 90vw; left: 70vw;	}

	#recommend .bimg3{	width: 84vw;	position: absolute; top: 185vw; left: 15vw;	}

	/* ================================================================================
	hope
	================================================================================ */
	#hope
	{
		min-width: 100vw;
		padding: 0rem 0 10rem;
		background-position: 0 100%;

		background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	}
	#hope > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#hope .menu
	{
display: flex;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#hope .menub
	{
	width: 44vw;
	margin-bottom: 5vw;
	}

	#hope h3
	{
	width: 90vw;
	margin: 0 auto 10vw;
	font-size: 5vw;
	font-weight: bold;
	}

	#hope .img1
	{
	position: absolute;
	top: 130vw;
	left: 54vw;
	width: 40vw;
	}

	#hope .fbox
	{
	display: block;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#hope .box
	{
	text-align: center;
	position: relative;
	width: 45vw;
	height: 45vw;
	padding-top: 15vw;
	background-color: #E4F6FA;
	border-radius: 25vw;
	}

	#hope .box:nth-child(1)
	{
	}

	#hope .box:nth-child(2)
	{
	padding-top: 12vw;
	margin-top: -30vw;
	margin-left: 45vw;

	}

	#hope .box:nth-child(3)
	{
		padding-top: 12vw;
		margin-top: -10vw;
		margin-left: 10vw;
	}

	#hope .number
	{
	color: white;
	text-align: center;
	position: absolute;
	font-size: 6vw;
	width: 13vw;
	height: 13vw;
	padding-top: 3vw;
	background-color: #1A95F0;
	border-radius: 10vw;
	top: 0;
	left: 2vw;
	}

	#hope .box p
	{
	font-size: 3.5vw;
	color: #26A8E2;
	}

	#hope .box span
	{
	font-size: 5vw;
	line-height: 2;
	color: #26A8E2;
	}

	#hope .img2
	{
	width: 60vw;
	margin: 0 auto;
	}

	#hope .button
	{
	width: 90vw;
	margin: 0 auto 60px;
	}

	#hope .button2
	{
	width: 90vw;
	margin: 0 auto;
	}

	#hope .img0
	{
	position: absolute;
	left: calc( 50% - 9px );
	bottom: 2vw;
	width: 5vw;
	margin: 0 auto;
	}


	/* ================================================================================
	standard
	================================================================================ */
	#standard
	{
		min-width: 100vw;
		padding: 0rem 0 10rem;
		background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	}
	#standard > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}
	#standard .fbox
	{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#standard .number
	{
	font-size: 9vw;
	color: white;
	text-align: center;
	background-color: #26A8E2;
	padding-top: 3vw;
	width: 20vw;
	height: 20vw;
	border-radius: 10vw;
	}


	#standard span
	{
	font-size: 4vw;
	color: #26A8E2;
	}


	#standard h3
	{
	font-size: 6.5vw;
	font-weight: bold;
	margin-bottom: 0;
	}


	#standard .img1
	{
	width: 105vw;
	margin: 0 0 10vw -10vw;
	}

	#standard h4
	{
	width: 90vw;
	text-align: center;
	padding: 5vw 5vw;
	border-radius: 20vw;
	margin: 0 auto;
	font-size: 6vw;
	font-weight: normal;
	background-color: #E4F6FA;
	margin-bottom: 10vw;
	}

	#standard .img2
	{
	width: 60vw;
	margin: 0 auto 10vw;
	}

	#standard .img3
	{
	width: 90vw;
	margin-bottom: 5vw;
	}

	#standard .img4
	{
	width: 28vw;
	margin-bottom: 0px;
	}

	#standard .img5
	{
	width: 80vw;
	margin-left: 15vw;
	}

	#standard .img6
	{
	width: 80vw;
	margin-left: -10vw;
	}

	#standard .img7
	{
	width: 90vw;
	margin-left: -10vw;
	}

	#standard li
	{
	display: block;
	justify-content: space-between;
	margin-bottom: 8vw;
	}

	#standard li:last-child
	{
	margin-bottom: 0;
	}

	#standard .lbox
	{
	width: 90vw;
	padding-top: 5vw;
	margin-left: 0;
	}


	#standard .lbox2
	{
	display: flex;
	}

	#standard .lbox3
	{
	width: 90vw;
	padding-top: 5vw;
	}


	#standard .lbox3 h5
	{
	font-size: 6vw;
	margin-bottom: 5vw;

	}

	#standard .lbox3 p
	{
	line-height: 2;
	font-size: 4vw;
	}

	#standard .text1
	{
	padding-top: 2vw;
	font-weight: bold;
	font-size: 4vw;
	text-align: right;
	}

	#standard .img9
	{
	width: 90vw;
	margin-left: 5vw;
	margin-bottom: 10vw;
	margin-right: 0;
	}

	#standard .img10
	{
	width: 55vw;
	}

	#standard .img11
	{
	width: 55vw;
	margin-top: -20vw;
	margin-left: 37vw;
	}

	#standard .img12
	{
	width: 50vw;
	margin-left: 0;
	}

	#standard .img13
	{
	width: 50vw;
	margin: -2vw 0 20vw 30vw;
	}

	#standard .button
	{
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#standard .product
	{
	text-align: center;
	font-size: 4vw;
	color: #309EE2;
	}


	#standard span
	{
	border-bottom: 1px solid #309EE2;
	}

	#standard .bimg1{	width: 4vw;	position: absolute; top: 10vw; left:90vw;	}

	#standard .bimg2{	width: 20vw;	position: absolute; top: 300vw; left: -5vw;	}

	#standard .bimg3{	width: 20vw;	position: absolute; top: 460vw; left: 80vw;	}

	#standard .bimg4{	width: 43vw;	position: absolute; top: 600vw; left: 18vw;	}

	#standard .bimg5{	width: 59vw;	position: absolute; top: 769vw;
left: 22vw;}

	/* ================================================================================
	custom
	================================================================================ */
	#custom
	{
		min-width: 100vw;
		padding: 5rem 0;
		background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	background-color: #E1F2F8
	}
	#custom > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}
	#custom .fbox
	{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#custom .number
	{
	font-size: 9vw;
	color: white;
	text-align: center;
	background-color: #26A8E2;
	padding-top: 3vw;
	width: 20vw;
	height: 20vw;
	border-radius: 10vw;
	}



	#custom span
	{
	font-size: 6vw;
	color: #26A8E2;
	}


	#custom h3
	{
	font-size: 6vw;
	font-weight: bold;
	margin-bottom: 0;
	}

	#custom h5
	{
	font-size: 16vw;
	margin-bottom: 5vw;
	line-height: 1;
	color: white;
	}



	#custom .img1
	{
	width: 10vw;
	margin-right: 2vw;
	}

	#custom .img2
	{
	width: 90vw;
	}

	#custom .img3
	{
	width: 90vw;
	padding-top: 0;
margin-bottom: 10vw;}

	#custom .img4
	{
	width: 60vw;
	}

	#custom .img5
	{
	width: 60vw;
	padding-top: 40vw;
	}


	#custom ul
	{
	margin-bottom: 20vw;
	}


	#custom li
	{
	display: flex;
	justify-content: space-between;
	margin-bottom: -10vw;
	}

	#custom li .list2
	{
	font-weight: bold;
	display: flex;
	justify-content:left;
	align-items: center;
	width: 80vw;
	margin: 0 0 5vw;}

	#custom li:last-child
	{
	margin-bottom: 0;
	}

	#custom .lbox
	{
	width: 90vw;
	}


	#custom .lbox2
	{
	display: flex;
	}

	#custom .lbox3
	{
	width: 90vw;
	}

	#custom .lbox3 .tr
	{
	text-align: left;
	}

	#custom .text
	{
	width: 80vw;
	margin: 0 auto 8vw;
	font-size: 4vw;
	background-color: #FFFFFF;
	padding: 4vw 8vw;
	}





	#custom .lbox3 p
	{
	line-height: 2;
	width: 75vw;
	font-size: 4vw;
	}

	#custom .ul2
	{
	width: 80vw;
	margin: 0 auto 20vw;
	}

	#custom .imgbox
	{
	width: 90vw;
	margin: 0 auto;
	}

	#custom .button
	{
	width: 90vw;
	margin: 0 auto 30px;
	}

	#custom .product
	{
	text-align: center;
	font-size: 4vw;
	color: #309EE2;
	}

	#custom .bimg1{	width: 6vw;	position: absolute; top: -3vw; left:80vw;	}

	#custom .bimg2{	width: 15vw;	position: absolute; top: 50vw; left: 80vw;	}

	#custom .bimg3{	width: 50vw;	position: absolute; top: 463vw; left: 28vw;	}
	/* ================================================================================
	oem
	================================================================================ */
	#oem
	{
		min-width: 100vw;
		padding: 5rem 0 15rem;

	}
	#oem > .inner
	{
		width: 90vw;
		margin: 0 auto;
	}

	#oem .fbox
	{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	width: 90vw;
	margin: 0 auto 10vw;
	}

	#oem .number
	{
	font-size: 9vw;
	color: white;
	text-align: center;
	background-color: #26A8E2;
	padding-top: 3vw;
	width: 20vw;
	height: 20vw;
	border-radius: 10vw;
	}



	#oem span
	{
	font-size: 6vw;
	color: #26A8E2;
	}


	#oem h3
	{
	font-size: 6vw;
	font-weight: bold;
	margin-bottom: 0;
	}

	#oem h4
	{
	width: 90vw;
	text-align: center;
	padding: 3vw 2vw;
	border-radius: 50vw;
	margin: 0 auto;
	font-size: 5vw;
	background-color: #E4F6FA;
	margin-bottom: 6vw;
	}


	#oem h5
	{
	font-size: 16vw;
	margin-bottom: 5vw;
	line-height: 1;
	color: white;
	}



	#oem .img1
	{
	width: 90vw;
	margin: 0 auto 20vw -10vw;
}


	#oem .button
	{
	width: 90vw;
	margin: 0 auto 5vw;
	}

	#oem .product
	{
	text-align: center;
	font-size: 4vw;
	color: #309EE2;
	}

	#oem .bimg1{	width: 5vw;	position: absolute; top: 2vw; left:90vw;	}

	#oem .bimg2{	width: 10vw;	position: absolute; top: 220vw; left: 80vw;	}
}



/* ======================================== end ======================================== */