@charset "utf-8";

/*----------------------------- before_after -----------------------------*/
/****************************** all ******************************/
.before_after{
	position:relative;
	overflow:hidden;
}

.before_after_after, 
.before_after > img{
	width:100%;
}

.before_after_after{
	background:url(/top/img/section8/before_after/after/pc.jpg) no-repeat top left / 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

@supports (background-image:url("image.webp")){
	.before_after_after{
		background-image:url(/top/img/section8/before_after/after/pc.webp);
	}
	
	@media(max-width:768px){
		.before_after_after{
			background-image:url(/top/img/section8/before_after/after/sp.webp);
		}
	}
}

@media(max-width:768px){
	.before_after_after{
		background-image:url(/top/img/section8/before_after/after/sp.jpg);
	}
}

.before_after img{
	width:100%;
	height:auto;
}

.before_after_trigger{
	width:100%;
	border:none;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:0;
	z-index:1;
}

.before_after_trigger::before, 
.before_after_trigger::after{
	content:"";
	height:100%;
	background:#fff;
	display:block;
	position:absolute;
	top:0;
}

.before_after_trigger::before{
	left:0;
}

.before_after_trigger::after{
	right:0;
}

.before_after_trigger > span{
	aspect-ratio:1;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position:relative;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}

.before_after_trigger > span::before, 
.before_after_trigger > span::after{
	content:"";
	aspect-ratio:1;
	background:#fff;
	display:block;
}

.before_after_trigger > span::before{
	clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

.before_after_trigger > span::after{
	clip-path:polygon(0 0, 100% 0, 50% 100%);
}

.before_after_release{
	position:absolute;
	z-index:2;
}

.before_after_release_top, 
.before_after_release_bottom{
	width:100%;
	left:0;
}

.before_after_release_right, 
.before_after_release_left{
	height:100%;
	top:0;
}

.before_after_release_top{
	top:0;
}

.before_after_release_right{
	right:0;
}

.before_after_release_bottom{
	bottom:0;
}

.before_after_release_left{
	left:0;
}
/****************************** /all ******************************/

/****************************** pc ******************************/
@media screen and (min-width:1280px){
	.before_after_trigger{
		height:4px;
		bottom:-2px;
	}
	
	.before_after_trigger::before{
		width:calc(90% - 25px);
	}
	
	.before_after_trigger::after{
		width:calc(10% - 25px);
	}
	
	.before_after_trigger > span{
		width:50px;
		border:solid #fff 5px;
		left:40%;
	}
	
	.before_after_trigger > span::before, 
	.before_after_trigger > span::after{
		width:10px;
	}
	
	.before_after_trigger > span::before{
		margin-bottom:10px;
	}
	
	.before_after_release_top, 
	.before_after_release_bottom{
		height:10px;
	}
	
	.before_after_release_right, 
	.before_after_release_left{
		width:10px;
	}
}
/****************************** /pc ******************************/

/****************************** tablet ******************************/
@media screen and (min-width:768px) and (max-width:1280px){
	.before_after_trigger{
		height:0.4vw;
		bottom:-0.2vw;
	}
	
	.before_after_trigger::before{
		width:calc(90% - 2.5vw);
	}
	
	.before_after_trigger::after{
		width:calc(10% - 2.5vw);
	}
	
	.before_after_trigger > span{
		width:5.0vw;
		border:solid #fff 0.5vw;
		left:40%;
	}
	
	.before_after_trigger > span::before, 
	.before_after_trigger > span::after{
		width:1.0vw;
	}
	
	.before_after_trigger > span::before{
		margin-bottom:1.0vw;
	}
	
	.before_after_release_top, 
	.before_after_release_bottom{
		height:1.0vw;
	}
	
	.before_after_release_right, 
	.before_after_release_left{
		width:1.0vw;
	}
}
/****************************** /tablet ******************************/

/****************************** sp ******************************/
@media screen and (max-width:768px){
	.before_after_trigger{
		height:1.0vw;
		bottom:-0.5vw;
	}
	
	.before_after_trigger::before{
		width:calc(90% - 5.0vw);
	}
	
	.before_after_trigger::after{
		width:calc(10% - 5.0vw);
	}
	
	.before_after_trigger > span{
		width:11.0vw;
		border:solid #fff 1.0vw;
		left:40%;
	}
	
	.before_after_trigger > span::before, 
	.before_after_trigger > span::after{
		width:2.5vw;
	}
	
	.before_after_trigger > span::before{
		margin-bottom:2.0vw;
	}
	
	.before_after_release_top, 
	.before_after_release_bottom{
		height:2.0vw;
	}
	
	.before_after_release_right, 
	.before_after_release_left{
		width:2.0vw;
	}
}
/****************************** /sp ******************************/
/*----------------------------- /before_after -----------------------------*/