@charset "utf-8";

.FW4_compareAB img{
	max-width: 100%;
}
.FW4_compareBorder{
	display: block;
}
.FW4_compareBorderBox {
    width: 1275px;
	height: 500px;
	left: -605px;
	top: 0;
    position: relative;
    z-index: 4;
    flex-shrink: 0;
    background-image: url(../img/feature02/f1_compareAB_pc.png);
	background-repeat: no-repeat;
    background-size: 100%;
}
.FW4_compareBorderLine{
	display: none!important;
}
.f6_topImgWrapper{
	width: 100%;
}
.f6_topImgWrapper .FW4_compareBorderBox{
	width: 628px;
	height: 410px;
	left: -282px;
	background-image: url(../img/feature02/f1_compareAB_pc.png);
	background-repeat: no-repeat;
}
.f6_compare_text {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
	pointer-events: none;
}

@media screen and (max-width:1275px) , print { 

	.FW4_compareBorderBox {
    	width: calc(100vw - 40px);
		height: 39.2vw;
		left: calc(52px - 50vw);
	}
	.f6_topImgWrapper .FW4_compareBorderBox {
    	width: calc(50vw - 39px);
		height: 32vw;
		left: calc(52px - 25vw);
	}

}

@media screen and (min-width:768px) , print { /*PC&TB*/

	.feature08_dummy_topImgWrapper{
		width: 100%;
		height: auto;
	}

	.feature08_dummy_topImgBox{
		height: auto;
		margin: 0 auto;
	}

}
@media screen and (max-width:767px) { /*SP*/

	.feature08_dummy_topImgWrapper{
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.FW4_compareBorderBox {
    	width: 100vw;
		height: 96.2vw;	
		left: calc(22px - 50vw);
		background-image: url(../img/feature02/f1_compareAB_sp.png);
	}
	.f6_topImgWrapper img{
		max-width: 100%;
	}
	.f6_topImgWrapper .FW4_compareBorderBox {
		left: calc(32px - 50vw);
    	width: calc(100vw - 20px);
		height: calc((100vw - 20px)*0.96) ;		
		background-image: url(../img/feature02/f1_compareAB_sp.png);
	}
	
}