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

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

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

.cleanwater_wtw {
	overflow: hidden;
        margin-top: 25vh;
        padding-top: 7vh;
        line-height: 1.7em;
        background: #FFF;
    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;
        }
	}
	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: 100%;
            position: relative;
            /* padding-left: 40%; */
            h2 {
                color: #2A799A;
                font-size: 4vw;
                padding-top: 15em;
                span {
                    font-size: 9vw;
                    display: block;
                }
            }
            p {
		font-size:  3.5vw;
                    margin: 1.5em auto 3em;
            }
            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:  4vw;}
                        p {
                            font-size:  3vw;
                    		margin: auto;
                        }
                    }
                    >div:first-child {
                        width: 20%;
                        display: block;
                    }
                }
            }
        }
        >div::before {
                content: "";
                display: block;
                width: 80%;
                height: 25vh;
                background-image: url(/img/clean_water/kyoaqua_hontai.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                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;
        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: 5.5vw;
			margin: 0.5em auto;
  }
		p {
            /* width: 480px; */
            font-size: 4vw;
  }
	}
    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 {
                    span {
                        color: #2A799A;
                        font-size: clamp(10px, 3vw, 10px);
                        font-weight: none;
                            margin-top: 1em;
                            display: block;
                    }
                    h3 {
                        font-size: var(--font-middle-size);
                        line-height: 2em;
                        padding: 0;
                        margin: 0;
                            font-size: 4vw;
                    }
                    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: #faf8f4;
        padding-bottom: 1em;
        position: relative;
		h2 {
            font-size: 4vw;
            position: relative;
            width: 100%;
            margin: auto;
            /* padding-left: 400px; */
            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 {
					line-height: 1.7em;
					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: 3.5vw;
							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: 4.5vw;
                        color: #2A799A;
                        line-height: 1.5em;
                        margin: 0;
                    }
                    p{
                        span{color: red;font-size: 12px;}
                    }
                
                }
            }
            >div:last-child{
                ul{
                    li{width:48%;}
                }
            }
		}
	}
	section.quality {
		width: 100%;
		margin: 0 auto;
		padding: 5em 0 20vh 0;
		background-color: #faf8f4;
		position: relative;

		h2 {
            position: absolute;
            margin: 0;
            font-size: 7vw;
            font-weight: normal;
            /* width: 1100px; */
            left: 5%;
            top: 1em;
            /* transform: translate(-50%); */
            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: 7em 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;
					margin: 0.5em auto;
					/* 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: 12px;
                            }
                        }
                        p {
                        font-size: 3.5vw;
                        width: fit-content;
                        display: inline-block;
                        padding: 0.5em;
                        margin-bottom: 2em;
                        }
                    }
                }
            }

		}
	}
}