@charset "utf-8";

.intro-box{display:flex;flex-wrap:wrap;justify-content:space-between;padding:100px 0 200px;}
.intro-box > div{position:relative;width:45%;}
.intro-box > div:hover{animation:bounce .4s ease infinite alternate;}

.part-box{display:flex;flex-wrap:wrap;justify-content:space-between;}
.part-box li{padding:40px;width:48%;border:1px solid #dfdfdf;border-radius:7px;font-size:1.8rem;text-align:center;}
.part-box li:hover{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.step-area-box{display:flex;flex-wrap:wrap;justify-content:center;}
.step-area-box > div{width:60%;}
.step-box li{margin:0 0 40px;padding:40px;width:100%;border:1px solid #dfdfdf;border-radius:7px;font-size:1.8rem;text-align:center;}
.step-box li:hover{box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.ex-p{padding:0 0 15px;}
.ex-p:last-of-type{padding:0;}
.ex-p span{display:inline-block;position:relative;padding:0 0 0 30px;font-size:1.8rem;line-height:1;}
.ex-p span:before{content:'';display:block;position:absolute;top:0;left:0;width:18px;height:18px;border:1px solid #dae8f6;background:rgb(237 246 255);box-sizing:border-box;}
.ex-p span.admin:before{border:1px solid #dae8f6;background:rgb(237 246 255);}
.ex-p span.dev:before{border:1px solid #f4e5e5;background:#fff5f5;}
li.dev{border:1px solid #f4e5e5;background:#fff5f5;}
li.admin{border-color:#dae8f6;background:rgb(237 246 255);}

@keyframes bounce{
	0% {top: 0;
	}
	20% {top: -5px;
	}
	50% {top: -15px;
	}
	100% {top: -20px;
	}
}
@media screen and (max-width: 768px) {
	.intro-box{padding:50px 0 100px;}
	.step-area-box{display:block;flex-wrap:unset;justify-content:unset;}
	.step-area-box > div{width:100%;}
	.step-box li{margin:0 0 15px;padding:15px;}
	.ex-p{padding:0 0 10px;}
	.ex-p span{padding:0 0 0 25px;font-size:1.4rem;}
	.ex-p span:before{width:14px;height:14px;}

}