/* ----------------------------------------
	cleanwater
---------------------------------------- */
.con_main{
    width: 100%;
    height: 400px;
    color: #FFF;
}

.con_main.cleanwater{
    background: url(/img/cleanwater_main_bg.jpg) no-repeat;
	height: 70vh;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
}

.con_main h2{
    margin: 0px auto;
        padding-top: 35vh;
    text-align: center;
    font-size: 60px;
    line-height: 1.2em;
    font-weight: normal;
    letter-spacing: 2px;
}
.con_main h2 span{
display: block;
    font-size: 16px;
    line-height: 2em;
}

.cleanwater_wtw {
	background: white;
	margin-top: 58vh;
	h2,h3,h4{
	font-weight: normal;
	}
	section.introduction {
        width: fit-content;
        margin: 60px auto;
        padding-top: 80px;
        text-align: center;
		h2 {
            font-size: 18px;
            margin-bottom: 40px;
			span {
                font-size: 44px;
                display: block;
                color: #2A799A;
			}
		}
		p {
			line-height: 1.7em;
			font-size: 14px;
		}
	}
	section.story {
        background-image: url(/img/clean_water/waterwave_bg.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        margin: 150px auto;
        width: 100%;
	display:block;
        >div{
	width: 85%;
            min-width: 700px;
            position: relative;
            padding-left: 40%;
            h2 {
                color: #2A799A;
                font-size: 18px;
                span {
                    font-size: 60px;
                    display: block;
                }
            }
            p {
                line-height: 1.7em;
		font-size: 14px;
            }
            ul {
                display: flex;
                margin: 40px auto;
                li {
                    display: inline-flex;
                    justify-content: space-between;
                    width: 48%;
                    >div {
                        width: 70%;
                        img {
                        }
                        h3{font-size: 14px;}
                        p {
                            font-size: 11px;
                        }
                    }
                    >div:first-child {
                        width: 25%;
                        display: block;
                    }
                }
            }
        }
        >div::before {
		content: "";
		display: block;
		width: 45%;
		aspect-ratio: 8 / 10;
		max-width: 400px;
		max-height: 600px;
		background-image: url(/img/clean_water/kyoaqua_hontai.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 0;
		right: 55%;
		z-index: 0;
        }
        }
	}
    
	section.story2 {
        width: 100%;
        margin: 120px auto;
        padding-left: 52%;
        position: relative;
        box-sizing: border-box;
		a {
            width: 480px;
            display: block;
            position: relative;
			img {
                width: 100%;
			}
		}
        a::before{
            content: "";
            display: block;
            width: 67px;
            height: 29px;
            background-image: url(/img/clean_water/roupe.png);
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            bottom: 1%;
            right: 1%;
            z-index: 0;
        }
		h2 {
			width: 480px;
			color: #2A799A;
			font-size: 28px;
		}
		p {
			width: 480px;
			font-size: 14px;
			line-height: 1.7em;
			margin-top: 1.5em;
		}
	}
    section.story2::before {
        content: "";
        display: block;
        width: 50%;
        height: 580px;
        background-image: url(/img/clean_water/water_lady_side.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: right;
        position: absolute;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        top: 0;
        left: 0;
        z-index: 0;
    }

    section.points {
        width: 96%;
        max-width: 1100px;
        margin: 10vh auto 20vh auto;
        h2{
            font-size: 60px;
            color: #2A799A;
            text-align: center;
            line-height: 2.5em;
            margin: 0;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 23%;
                margin-bottom: 2em;
                img {
                }
                div {
                    span {
                        color: #2A799A;
                        font-size: clamp(10px, 3vw, 10px);
                        font-weight: bold;
                    }
                    h3 {
                        font-size: var(--font-middle-size);
                        line-height: 2em;
                        padding: 0;
                        margin: 0;
                    }
                    p{
                        font-size: 12px;
			line-height: 1.7em;
                    }
                }
            }
        }
    }

	section.points2 {
        width: 96%;
        max-width: 1000px;
        margin: 10vh auto 20vh auto;
		h2 {
		text-align: center;
		color: #2A799A;
		margin-bottom: 2em;
		}
		ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
			li {
				img {
				}
			}
		}
	}
	section.system {
        width: 100%;
        margin: 10vh auto 0 auto;
        background-color: #faf8f4;
        position: relative;
		h2 {
            font-size: 24px;
            position: relative;
            width: 1100px;
            margin: auto;
            padding-left: 400px;
            top: -2em;
            display: block;
            box-sizing: border-box;
			span {
                display: block;
                font-size: 36px;
			}
        }
        h2::before{
            content: "SYSTEM";
            font-size: 90px;
            line-height: 1em;
            color: #2A799A;
            position: absolute;
            left: 0;
            top:0;
        }
		div.system_wrap {
            width: 1100px;
                margin: 0vh auto 0vh auto;
                padding-bottom: 1vh;
			>div {
				img {
				}
				h3 {
		                    font-size: 16px;
		                    margin: 3em 0 0 0;
		                    span{
					font-size: 30px;
		                        color: #2A799A;
		                        display: inline-block;
		                        margin-right: 1em;
		                        font-weight: bold;
		                    }
				}
				p {
					line-height: 1.7em;
					font-size: 14px;
					span {
					}
				}
				ul {
		                    display: flex;
		                    flex-wrap: wrap;
		                    justify-content: space-between;
		                    margin-top: 2em;
		                    margin-bottom: 4em;
					li {
						img {
						}
						p {
			                            font-size: 12px;
			                            text-align: center;
			                            margin: 0;
			                            line-height: 1.7em;
						}
					}
				}
			}
            >div:first-child{
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                img{
                    width: 28%;
                    margin: auto;
                }
                > div{
                    width: 65%;
                    h3{
                        font-size: 30px;
                        color: #2A799A;
                        line-height: 1.5em;
                        margin: 2em auto auto auto;
                    }
                    p{
                        span{color: red;font-size: 12px;}
                    }
                
                }
            }
		}
	}
	section.quality {
        width: 100%;
        margin: 0 auto;
        padding: 6em 0;
        background-color: #faf8f4;
        position: relative;
		h2 {
            position: absolute;
            margin: 0;
            font-size: 28px;
            font-weight: normal;
            width: 1100px;
            left: 50%;
            top: 1em;
            transform: translate(-50%);
            z-index: 5;
			span {
                font-size: 90px;
                color: #2A799A;
                display: inline-block;
                margin-right: 30px;
			}
		}
		div.quality_wrap {
            width: 1100px;
            margin: 0 auto;
            background: white;
            padding: 5em 3em 1em 3em;
            border-radius: 20px;
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
			div {
                width: 48%;
                margin-bottom: 2em;
				h3 {
                    color: #2A799A;
                    font-weight: normal;
                    font-size: 20px;
                    height: 2.5em;
				}
				p {
					font-size: 14px;
					line-height: 1.7em;
                    			margin-top: 1em;
				}
				img {
				}
				a {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    margin: 2em auto;
                    img {
                        width: 100%;
                    }
                }
                a::before{
                    content: "";
                    display: block;
                    width: 67px;
                    height: 29px;
                    background-image: url(/img/clean_water/roupe.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: absolute;
                    bottom: 1%;
                    right: 1%;
                    z-index: 0;
                }

			}
            div:last-child{
                width: 100%;
                h3{
                    height: auto;
                    margin: 0;
                }
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    width: 1000px;
            
                    li {
                        display: inline-flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-items: center;
                        margin: 0.5em auto 0.5em 0;
            
                        h4 {
                            display: block;
                            font-size: 16px;
                            font-weight: normal;
                            color: white;
                            background: #36a89e;
                            border-radius: 5px;
                            padding: 1em;
                            box-sizing: border-box;
                            margin: 0;
            
                            span {
                            display: block;
                            font-size: 12px;
                            }
                        }
                        p {
                        font-size: 18px;
                        width: fit-content;
                        display: inline-block;
                        padding: 1em;
                        margin: 0px;
                        }
                    }
                }
            }

		}
	}
}


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

/* ----------------------------------------
	cleanwater SP
---------------------------------------- */

.con_main{
    width: 100%;
    height: 400px;
    color: #FFF;
}

.con_main.cleanwater{
	height: 45vh;
	background-size: cover;
	background-position: left;
}

.con_main h2{
	margin: 0px auto;
	padding-top: 23vh;
	text-align: center;
	font-size: 10vw;
	line-height: 1.2em;
	font-weight: normal;
	letter-spacing: 2px;
}
.con_main h2 span{
display: block;
    font-size: 16px;
    line-height: 2em;
}



.cleanwater_wtw {
	overflow: hidden;
	margin-top: 35vh;
    h2,h3,h4{
        font-weight: normal;
    }
	section.introduction {
        width: 94%;
        margin: 3em auto;
        text-align: center;
		h2 {
            font-size: 4vw;
            margin-bottom: 2em;
			span {
                font-size: 6vw;
                display: block;
                color: #2A799A;
            }
		}
		p {
		line-height: 1.7em;
		font-size: 3.5vw;
		width: 90%;
		margin: auto;
		}
	}
	section.story {
        background-image: url(/img/clean_water/waterwave_bg.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        margin: 5em auto;
        width: 94%;
        >div{
		width: 90%;
		min-width: auto;
		position: relative;
		margin: auto;
		padding-left: 0;
            h2 {
                color: #2A799A;
                font-size: 4vw;
                padding-top: 15em;
                span {
                    font-size: 9vw;
                    display: block;
                }
            }
            p {
                line-height: 1.7em;
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                margin: 2em auto;
                li {
                    display: inline-flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 2em;
                    >div {
                        width: 75%;
                        img {
                        }
                        h3{font-size: 3.5vw;}
                        p {
                            font-size: 3vw;
                        }
                    }
                    >div:first-child {
                        width: 20%;
                        display: block;
                    }
                }
            }
        }
        >div::before {
        content: "";
        display: block;
                width: 50%;
                height: 25vh;
        background-image: url(/img/clean_water/kyoaqua_hontai.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 50%;
        translate: (-50%);
        transform: translate(-50%);
        z-index: 0;
        }
	}
    
	section.story2 {
        width: 94%;
        margin: 5em auto;
        padding-top: 19em;
        position: relative;
        padding-left: 0;
        box-sizing: border-box;
		a {
            width: auto;
            display: block;
            position: relative;
			img {
                width: 100%;
			}
		}
        a::before{
            /* content: ""; */
            display: block;
            width: 67px;
            height: 29px;
            background-image: url(/img/clean_water/roupe.png);
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            bottom: 1%;
            right: 1%;
            z-index: 0;
        }
		h2 {
            width: auto;
            color: #2A799A;
            font-size: 5.5vw;
  }
		p {
            width: auto;
            font-size: 3.5vw;
  }
	}
    section.story2::before {
        content: "";
        display: block;
        width: 100%;
        height: 15em;
        background-image: url(/img/clean_water/water_lady_side.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: right;
        position: absolute;
        border-radius: 15px;
        /* border-bottom-right-radius: 15px; */
        top: 0;
        left: 0;
        z-index: 0;
    }

    section.points {
        width: 95%;
        margin: 5em auto;
        h2{
            font-size: 8vw;
            color: #2A799A;
            text-align: center;
            line-height: 2.5em;
            margin: 0;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 48%;
                margin-bottom: 2em;
                
                
                img {
                }
                div {
                        margin-top: 1em;
                    span {
			color: #2A799A;
			font-size: 3vw;
			font-weight: bold;
                    }
                    h3 {
                        font-size: var(--font-middle-size);
                        line-height: 2em;
                        font-size: 5vw;
                        padding: 0;
                        margin: 0;

                    }
                    p{
                        font-size: 3vw;
                    }
                }
            }
        }
    }

	section.points2 {
        width: 100%;
        margin: 5em auto;
		h2 {
		text-align: center;
		color: #2A799A;
		margin-bottom: 2em;
		font-size: 4.5vw;
		}
		ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 90%;
            margin: auto;
			li {
    margin: 1em auto;
				img {
				}
			}
		}
	}
	section.system {
        width: 100%;
        margin: 10vh auto 0 auto;
        background-color: aliceblue;
        padding-bottom: 1em;
        position: relative;
		h2 {
            font-size: 4vw;
            position: relative;
            width: 100%;
            margin: auto;
            padding-left: 0px;
            top: 1em;
            left: 5%;
            display: block;
            box-sizing: border-box;
			span {
                display: block;
                font-size: 6vw;
   }
        }
        h2::before{
            content: "SYSTEM";
            font-size: 12vw;
            line-height: 1em;
            color: #2A799A;
            position: absolute;
            left: 0;
            top: -1em;
        }
		div.system_wrap {
            width: 94%;
            margin: 2em auto;
            padding-bottom: 1vh;
			>div {
				img {
				}
				h3 {
                    font-size: 5vw;
                    margin: 3em 0 1em 0;
                    span{
                        font-size: 6vw;
                        color: #2A799A;
                        display: block;
                        /* margin-right: 1em; */
                    }
				}
				p {
					span {
					}
				}
				ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    margin-top: 2em;
                    margin-bottom: 4em;
					li {
                        margin: 1em auto;
                        /* width: 50%; */
						img {
						}
						p {
                            font-size: 3vw;
                            text-align: center;
                            margin: 0;
                            line-height: 1.7em;
						}
					}
				}
			}
            >div:first-child{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                img{
                    width: 90%;
                    margin: auto;
                }
                > div{
                    width: auto;
                    
                    
                    h3{
                        font-size: 4vw;
                        color: #2A799A;
                        line-height: 1.5em;
                        margin: 0;
                    }
                    p{
                        span{color: red;font-size: 3vw;}
                    }
                
                }
            }
            >div:last-child{
                ul{
                    li{width:48%;}
                }
            }
		}
	}
	section.quality {
        width: 100%;
        margin: 0 auto;
        padding: 5em 0;
        background-color: aliceblue;
        position: relative;
		h2 {
	                position: absolute;
	                margin: 0;
	                font-size: 5vw;
	                /* font-weight: normal; */
	                width: auto;
	                left: 8%;
	                top: 1em;
	                transform: unset;
	                z-index: 5;
			span {
				font-size: 12vw;
				color: #2A799A;
				display: block;
				margin-right: 0;
            }
		}
		div.quality_wrap {
            width: 92%;
            margin: 0 auto;
            background: white;
            padding: 8em 0.5em 1em 0.5em;
            border-radius: 20px;
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
			div {
                width: 96%;
                margin: 2em auto;
				h3 {
                    color: #2A799A;
                    font-weight: normal;
                    font-size: 4.5vw;
                    /* height: 2.5em; */
                }
				p {
                    font-size: 3.5vw;
                }
				img {
				}
				a {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    margin: 2em auto;
                    img {
                        width: 100%;
                    }
                }
                a::before{
                    /* content: ""; */
                    display: block;
                    width: 67px;
                    height: 29px;
                    background-image: url(/img/clean_water/roupe.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: absolute;
                    bottom: 1%;
                    right: 1%;
                    z-index: 0;
                }

			}
            div:last-child{
                width: 100%;
                h3{
                    height: auto;
                    margin: 0;
                }
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    width: 100%;
                    li {
                        display: inline-flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-items: center;
                        margin: 0.5em auto 0.5em 0;
            
                        h4 {
                            display: block;
                            font-size: 4vw;
                            font-weight: normal;
                            color: white;
                            background: #36a89e;
                            border-radius: 5px;
                            padding: 0.5em;
                            box-sizing: border-box;
                            margin: 0;
                            width: 100%;
                            span {
                            display: block;
                            font-size: 3vw;
                            }
                        }
                        p {
                        font-size: 4vw;
                        width: fit-content;
                        display: inline-block;
                        padding: 0.5em;
                        margin-bottom: 2em;
                        }
                    }
                }
            }

		}
	}
}

}