@charset "UTF-8";

#mv {  }

main img { display:block; }

main ul, main li { display:flex; flex-wrap:wrap; }
main ul { list-style:none; padding:0; }
main li { position:relative; width:300px; margin-right:30px; margin-bottom:40px; }
.yane li::before, .carPort li::before {
	content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,calc(-50% - 12px));
	width:40px; height:40px; background:#000 url(../common/img/arrow.svg)no-repeat center center / 20px 10px;
	border:2px solid #FFF; border-radius:50%;
	font-weight:bold; text-align:center; box-sizing:border-box; z-index:1;
}
main li:nth-child(3n) { margin-right:0; }
main li p             { position:relative; }
main li p:first-child::before {
	content:"Before"; position:absolute; bottom:0; left:0;
	width:100%; background:#000; color:#FFF; font-weight:bold; text-align:center;
}
main li p:last-child::after {
	content:"After"; position:absolute; bottom:0; left:0;
	width:100%; background:#FFCC00; color:#000; font-weight:bold; text-align:center;
}

@media (max-width: 768px){
}