#water_details {
    height: auto;
    background: #efefef; 
}

.waterTop_top {
    display: inline-block;
    margin-top: 2%;
    width: 100%;
    height: auto;
    background: #fff;
}

.waterTop_logo {
    margin: 0 auto;
    max-width: 50%;
    height: auto;
    padding: 3% 0 2% 0;
}

.waterTop_logo img {
    max-width: 100%;
}

.waterTop_content {
    box-sizing: border-box;
    width: 100%;
    height: auto;
}

.waterTop_content span {
    display: inline-block;
    padding: 3% 0;
    text-align: left;
    line-height: 1.5;
    font-size: calc(14px + 8 * ((100vw - 320px) / 1920));
}

.waterTop_content img {
    width: 100%;
}

.waterTop_btm {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2% 0 3% 0;
}

.waterTop_btm_con h1 {
    margin-bottom: 0;
    border-bottom: 1px solid #615f5f;
    font-family: "游明朝", "YuMincho", serif;
    font-size: calc(36px + 8 * ((100vw - 1300px) / 1920));
}

.waterTop_txt {
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}

.waterTop_txt p {
    line-height: 1.5;
    font-size: calc(18px + 6 * ((100vw - 1300px) / 1920));
}

.waterTop_txt span {
    font-weight: bolder;
}

#waterMdl_btm {
    height: auto;
    background: #efefef;
}

.waterMdl_btm_con {
    display: inline-block;
    padding-top: 1%;
    width: 100%;
    height: auto;
    background: #fff;
}

.waterMdl_btm_left {
    box-sizing: border-box;
    padding: 2%;
    width: 50%;
    height: auto;
    float: left;
}

.waterMdl_btm_right {
    box-sizing: border-box;
    padding: 2%;
    width: 50%;
    height: auto;
    float: left;
}

.btm_boxes span {
    display: inline-block;
    padding: 1% 0;
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(36, 36, 66);
    font-size: calc(30px + 5 * ((100vw - 1040px) / 1920));
    color: #fff;
}

.btm_content {
    margin-top: 4%;
    height: auto;
    background: #efefef;
}

.btm_content img {
    width: 98%;
    padding-top: 1%;
}

.btm_content p {
    padding: 2% 6% 4% 6%;
    text-align: left;
    font-size: calc(14px + 10 * ((100vw - 960px) / 1920));
}

.waterBtm_top img {
    max-width: 98%;
}

.waterBtm_btm { 
    height: auto;
}

.waterBtm_btm_txt {
    padding-bottom: 3%;
}

.waterBtm_btm_txt h1 {
    width: 100%;
    height: auto;
    padding: 1% 0;
    text-align: center;
    background: rgb(36, 36, 66);
    font-size: calc(26px + 6 * ((100vw - 600px) / 1920));
    color: #fff;
}

.waterBtm_btm_txt span {
    font-weight: bolder;
}

.waterBtm_btm_txt p {
    padding: 0 3%;
    text-align: left;
    font-size: calc(18px + 4 * ((100vw - 1040px) / 1920));
}


@media screen and (min-width: 480px) and (max-width: 959px) {   
    .waterTop_content span {
        width: 90%;
    }

    .waterMdl_btm_left {
        box-sizing: border-box;
        padding: 2%;
        width: 100%;
        height: auto;
        float: none;
    }
    
    .waterMdl_btm_right {
        box-sizing: border-box;
        padding: 2%;
        width: 100%;
        height: auto;
        float: none;
    }

    .btm_boxes span {
        font-size: calc(26px + 4 * ((100vw - 480px) / 959));
    }
    
    .btm_content p {
        font-size: calc(14px + 4 * ((100vw - 480px) / 959));
    }
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    
    .waterTop_logo {
        margin: 0 auto;
        max-width: 50%;
        height: auto;
    }

    .waterTop_logo {
        margin: 0 auto;
        max-width: 100%;
        height: auto;
        padding: 3% 0 2% 0;
    }
    
    .waterTop_logo img {
        max-width: 70%;
        padding: 5% 0 3% 0;
    }

    .waterTop_content span {
        width: 90%;
    }

    .waterTop_btm_con {
        box-sizing: border-box;
        margin:0 auto;
    }

    .waterTop_btm_con h1 {
        font-size: calc(24px + 2 * ((100vw - 320px) / 480));
    }
    
    .waterTop_txt {
        box-sizing: border-box;
        text-align: left;
    }
    
    .waterTop_txt p {
        font-size: calc(14px + 2 * ((100vw - 320px) / 480));
    }
    
    .waterTop_txt span {
        font-weight: bolder;
    }

    .waterMdl_btm_left {
        box-sizing: border-box;
        padding: 2%;
        width: 100%;
        height: auto;
        float: none;
    }
    
    .waterMdl_btm_right {
        box-sizing: border-box;
        padding: 2%;
        width: 100%;
        height: auto;
        float: none;
    }
    
    .btm_boxes span {
        font-size: calc(24px + 2 * ((100vw - 320px) / 480));
    }
    
    .btm_content p {
        font-size: calc(12px + 2 * ((100vw - 320px) / 480));
    }

    .waterBtm_btm_txt h1 {
        font-size: calc(24px + 2 * ((100vw - 320px) / 480));
    }
    
    .waterBtm_btm_txt p {
        padding: 0 3%;
        text-align: left;
        font-size: calc(14px + 2 * ((100vw - 320px) / 480));
    }
}