@charset "utf-8";

.doublecleansing{position:relative}
.doublecleansing .container{width:100%; margin:0 auto; max-width:1000px; position:relative; box-sizing:border-box}

.con01{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con02{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con03{position:relative; background:#fff; text-align:center; padding:100px 0;}
.con04{position:relative; background:#fff; text-align:center; padding:0 0 100px 0;}
.con05{position:relative; background:#fff; text-align:center; padding:0 0 100px 0;}
.con06{position:relative; background:#fff; text-align:center; padding:0 0 100px 0;}

.con01 .visual{position:relative; max-width:860px; margin:0 auto}
.con01 .visua img{display:block}
.con01 .visual p{position:relative; padding:20px 0 0 0; text-align:right; font-size:21px; color:#111; line-height:1.4}

.con02 .box{position:relative; font-size:0; text-align:left}
.con02 .box .img{display:inline-block; vertical-align:middle; margin-right:50px;}
.con02 .box .txt{display:inline-block; vertical-align:middle; max-width:460px; position:relative; padding-top:40px}
.con02 .box .txt:after{content:''; display:block; width:200px; height:2px; background:#111; position:absolute; left:-100px; top:0px}
.con02 .box .txt p:nth-child(1){position:relative; font-size:32px; font-weight:bold; color:#222}
.con02 .box .txt p:nth-child(2){position:relative; padding:20px 0 0 0; line-height:1.6; font-size:19px; color:#666}
.con02 .box .txt p:nth-child(2) em{font-weight:bold !important}

.con02 .box.right{margin-top:170px; height:720px;}
.con02 .box.right .img{margin-right:0; position:absolute; right:0; top:0}
.con02 .box.right .txt{position:absolute; left:0; top:50%; transform:translateY(-50%); max-width:520px}
.con02 .box.right .txt:after{left:auto; right:-50px}

.con03 .title{position:relative}
.con03 .title p:nth-child(2){position:relative; line-height:1.6; font-size:19px; color:#666666; padding:20px 0 0 0}
.con03 .title img.mobile{display:none}

.pd{position:relative;}
.pd .pd_tit{padding:50px 0; font-size:21px;}
.pd .pd_tit p:nth-child(2){position:relative; padding:20px 0 0 0}
.pd .pd_con{position:relative; background-size:center top; background-size:auto 515px; background-repeat:no-repeat; padding:100px 0 0 0;}
.pd .pd_box{position:relative; font-size:0}
.pd .pd_box > div{display:inline-block; vertical-align:top;}
.pd .pd_box > div:nth-child(1){margin-right:20px}
.pd .pd_box > div p:nth-child(1){position:relative}
.pd .pd_box > div p:nth-child(2){position:relative; padding:25px 0 0 0}
.pd .pd_box > div p:nth-child(2) a{display:inline-block; color:#fff; padding:10px 35px; background:#222; font-size:20px; border-radius:40px}
.pd .pd_box > div p:nth-child(2) a:after{width:9px; height:13px; content:''; display:inline-block; background:url(images/bullet.jpg) no-repeat; vertical-align:middle; margin-left:10px; position:relative; top:-1px}
.pd .pd_tail{position:relative; max-width:820px; margin:0 auto; padding:50px 0 0 0; line-height:1.6; font-size:19px; color:#666}

.pd.green .pd_tit p{color:#3c7a54}
.pd.green .pd_con{background-image:url(images/bg01.jpg);}
.pd.oil .pd_tit p{color:#8b6743}
.pd.oil .pd_con{background-image:url(images/bg02.jpg);}
.pd.dry .pd_tit p{color:#cd4b4b}
.pd.dry .pd_con{background-image:url(images/bg03.jpg);}

.id .con02 .box .txt{vertical-align:top; margin-top:50px}
.th .con02 .box .txt p:nth-child(2){letter-spacing:-1px}
.vn .con03 .title p:nth-child(2){max-width:750px; margin:0 auto}

@media screen and (max-width: 1020px){
	.con01, .con02, .con03{padding:70px 0}
	.con04, .con05, .con06{padding:0 0 70px 0}
	.doublecleansing .container{padding:0 20px}
	
	.con01 .visual p{font-size:18px;}
	
	.con02 .box{text-align:center; height:auto !important;}
	.con02 .box .img{display:block !important; margin:0 auto !important;; position:relative !important; right:auto !important; top:auto !important}
	.con02 .box.right{margin-top:100px}
	.con02 .box .txt{display:block !important; padding-top:30px !important; position:relative !important; left:auto !important; top:auto !important; transform:none !important; max-width:none !important}
	.con02 .box .txt:after{display:none !important}
	
	.con03 .title p:nth-child(2){font-size:17px; line-height:1.5; padding:15px 0 0 0}
	
	.pd .pd_tit{padding:40px 0; font-size:18px}
	.pd .pd_tail{font-size:17px; line-height:1.5}
	
	.id .con02 .box .txt{margin-top:0}
}

@media screen and (max-width: 890px){
	.pd .pd_box{padding:0 20px; box-sizing:border-box}
	.pd .pd_box > div{width:49%}
	.pd .pd_box > div:nth-child(1){margin-right:2%}
	.pd .pd_box > div p:nth-child(2) a{font-size:15px; padding:10px 20px;}
	.pd .pd_con{padding:70px 0 0 0; background-size:auto 55%}
	.pd .pd_tail{font-size:15px; padding:30px 20px 0 20px}
}

@media screen and (max-width: 768px){
	.con01, .con02, .con03, .con04, .con05{padding:50px 0}
	.con04, .con05, .con06{padding:0 0 50px 0}
	
	.con01 .visual p{font-size:16px; padding:10px 0 0 0}
	
	.con02 .box .txt p:nth-child(1) img{max-width:100px}
	.con02 .box .txt p:nth-child(1){font-size:20px; text-align:left}
	.con02 .box .txt p:nth-child(2){padding:15px 0 0 0; line-height:1.5; font-size:13px; text-align:left}
	.con02 .box.right{margin-top:50px}
	.con02 .box .img img{width:100%}
	
	.con02 .box .txt{overflow:hidden}
	.con02 .box .txt p:nth-child(1){display:inline-block; vertical-align:top; margin-right:20px}
	.con02 .box .txt p:nth-child(2){display:inline-block; vertical-align:top; width:calc(100% - 140px); box-sizing:border-box; padding-top:0}
	.con02 .box.right .txt p:nth-child(1){display:block; margin-right:0}
	.con02 .box.right .txt p:nth-child(2){display:block; width:auto; padding-top:15px}
	
	.con03 .title p:nth-child(2){font-size:14px}
	.con03 .title p:nth-child(2) br{display:none}
	.con03 .title img{display:none}
	.con03 .title img.mobile{display:block;}
	
	.pd .pd_tit{padding:30px 0; font-size:14px; line-height:1.4}
	.pd .pd_tit img{max-width:400px; width:100%}
	.pd .pd_tit p:nth-child(2){padding:15px 0 0 0}
	.pd .pd_box > div p:nth-child(2){padding:15px 0 0 0}
	.pd .pd_box > div p:nth-child(2) a{font-size:12px; padding:7px 18px}
	.pd .pd_con{padding:50px 0 0 0; background-size:auto 35%}
	.pd .pd_box > div p:nth-child(2) a:after{width:7px; height:10px; background-size:cover; margin-left:6px}
	.pd .pd_tail{font-size:14px}
}