@charset "UTF-8";
.btn_shopping{
	z-index: 99;
}
#main .content .col2 .fltR .tel{
	pointer-events: none;
}

@media (max-width: 1097px) and (min-width: 769px) {
	#main .content .col2 .fltL{
		width: auto;
		height: auto;
	}
    #main .content .col2 .fltR p{
		padding-right: 0;
    }

}

@media (max-width: 921px) and (min-width: 769px) {

    #main .content .col4>li {
        width: calc((100% / 4) - 2.1%);
    }
    #main .content ol.step li{
    	background: url(../img/arrow.png) no-repeat right 21%;	
    }
    #main .content .corner{
    	padding: 3.5%;
    }
	#main .content ol.step{
		display: flex;
		flex-wrap: wrap;
	}
    #main .content ol.step.col4 li {
		padding-right: 2%;
		margin-right: 0.6%;
    }
    #main .content ol.step li:last-child{
    	padding-right: 0;
    }

    #main .content ol.step li figure img{
		width: 100%;
		height: auto;
    }

    #main .content .col2 .fltL{
		width: 50%;
		height: auto;
    }
    #main .content .col2 > div {
    	width: 44.5%;
    }
    #main .content .col2 .fltR p br{
		display: none;
    }
    #main #purification ol.col4 li{
    	background: url(../img/arrow.png) no-repeat right 35%;
    }


}

@media(max-width: 768px){
	#main .content p {
		font-size: 9px;
	}
	#main #soil h3 > img{
		width: 30.4%;
		max-width: 142px;
	}
	#main .content strong.copy{
		width: 100%;
	}
	#main .content strong.copy img{
		width: 100%;
	}
	#main .content .corner{
		padding: 20px;
	}
	#main .content .corner h4{
		text-align: center;
	}
	#main .content .corner h4 img{
		width: 90%;
	    display: inline-block;
	    margin: 0 auto;
	}
	#main .content ol.step li{
		width: 100%;
	}
	#main .content ol.step.col4 li{
		padding-right: 0;
		padding-bottom: 20px;
		margin-right: 0;
		margin-bottom: 20px;
	}
	#main .content ol.step li{
		background: url(../img/arrow-sp.png) no-repeat bottom center;
	}
	#main .content ol.step{
		width: 90%;
		margin: 0 auto;
	}
	#main .content ol.step li figure img{
		width: 100%;
		height: auto;
	}
	#main .content .col2 > div{
		width: 100%;
	}
	#main .content .col2 .fltL{
		margin-bottom: 20px;
	}
    #main .content .col2 .fltR p br{
		display: none;
    }
	#main .content .col3{
		text-align: center;
	}
    #main .content .col3 > div{
    	width: 90%;
    	margin: 0 auto 25px;	
    	float: none;
    }
    #main .content .col3 > div:first-child{
    	margin-left: auto;
    }
    #main .content .col3 > div figure{

    }
    #main .content .col3 > div figure img{
    	width: 100%;
    	height: auto;
    }
    #main .content .col2 .fltR .tel{
    	pointer-events: auto;
    }

    #main #soil .copy{
    	width: 73%;
    }
    #main #water h3,#main #soil h3{
    	margin-bottom: 20px;
    }
    #main #water h3 img{
		width: 50.5%;
		max-width: 248px;
    }


}