@charset "utf-8";

.blue_title {
	font-size: clamp(65px, 8vw, 125px);
	text-align: center;
	color: #FFF;
	background: #00BBFF;
	padding-top: 20px;
	margin: 10% 0 50px 0;
}
/* WORKFLOW 1 */
.workflow1 {
	background: url(../images/Workflow_step1.png) no-repeat;
	height: 439px;
	width: 1030px;
	margin: auto;
}
.workflow1 .buttons {
	width: 670px; 
	padding: 10px 0 0 80px;
}
.workflow1 .buttons .phone {
	width: 315px;
}
.workflow1 .buttons .flex a {
	width: 114px;
	margin: 0 5px;
}
.workflow h2 {
	width: 685px;
	font-size: 2rem;
	color: #006ED8;
	padding: 135px 0 0 85px;
	line-height: 2.5ex;
}
.workflow p {
	width: 635px;
	font-size: 1.3rem;
	padding: 40px 0 0 85px;
}
.arrow {
	width: 129px;
	margin: -25px auto;
}

/* WORKFLOW 2 */
.workflow2 {
	background: url(../images/Workflow_step2.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: auto;
}
.workflow2 ul {
	display: flex;
	flex-wrap: wrap;
	height: 80px;
	list-style-type: none;
	width: 635px;
	font-size: 1.3rem;
	padding: 40px 0 0 85px;
	margin: 0;
}
.workflow2 ul li {
	width: 230px;
}
.workflow2 ul li::before {
	content: "●";
	color: #006ED8;
    margin-right: 5px;
}

/* WORKFLOW 3 */
.workflow3 {
	background: url(../images/Workflow_step3.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: auto;
}
.workflow3 .workflow_title {
	padding-top: 145px;
}

/* WORKFLOW 4 */
.workflow4 {
	background: url(../images/Workflow_step4.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: auto;
}

/* WORKFLOW 5 */
.workflow5 {
	background: url(../images/Workflow_step5.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: auto;
}

/* WORKFLOW 6 */
.workflow6 {
	background: url(../images/Workflow_step6.png) no-repeat center;
	height: 1427px;
	width: 1030px;
	margin: auto;
}
.workflow6 h2 {
	padding-bottom: 40px;
}
.workflow6 h3 {
	font-size: 35px; 
	text-align: center; 
	color: #FFF; 
	background: #006ED8;
	border-radius: 10px; 
	width: 870px; 
	margin: 150px auto 40px auto;
	padding: 5px 0 0 0;
}
.workflow6 .img {
	background: url("../images/Workflow_step6_img.png") no-repeat center;
	height: 755px;
}

/* WORKFLOW 7 */
.workflow7 {
	background: url(../images/Workflow_step7.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: auto;
}
.workflow7 img {
	padding: 25px 0 0 60px;
}
.workflow7 .workflow_explain {
	padding-top: 10px;
}

/* WORKFLOW 8 */
.workflow8 {
	background: url(../images/Workflow_step8.png) no-repeat center;
	height: 439px;
	width: 1030px;
	margin: 0 auto 120px auto;
}

@media screen and (max-width: 1100px){
	.workflow1 {
		background: url("../images/Workflow_step1 (smartphone).png") no-repeat;
		height: 738px;
		width: 603px;
	}
	.workflow1 .buttons {
		width: 438px; 
		padding: 0;
		margin: 0 auto;
		flex-direction: column;
	}
	.workflow1 .buttons .phone {
		width: 438px; 
		padding: 0;
		margin: 0;
	}
	.workflow1 .buttons .flex a {
		width: 161px;
		margin: 15px 5px;
	}
	.workflow2 {
		background: url("../images/Workflow_step2 (smartphone).png") no-repeat;
		height: 559px;
		width: 603px;
	}
	.workflow3 {
		background: url("../images/Workflow_step3 (smartphone).png") no-repeat;
		height: 529px;
		width: 603px;
	}
	.workflow4 {
		background: url("../images/Workflow_step4 (smartphone).png") no-repeat;
		height: 585px;
		width: 603px;
	}
	.workflow5 {
		background: url("../images/Workflow_step5 (smartphone).png") no-repeat;
		height: 561px;
		width: 603px;
	}
	.workflow6 {
		background: url("../images/Workflow_step6 (smartphone).png") no-repeat;
		height: 1633px;
		width: 603px;
	}
	.workflow6 h3 {
		font-size: 30px; 
		width: 85%; 
		margin: 30px auto 20px auto;
	}
	.workflow6 .img {
		background: url("../images/Workflow_step6_img (smartphone).png") no-repeat center;
		height: 1027px;
	}
	.workflow7 {
		background: url("../images/Workflow_step7 (smartphone).png") no-repeat;
		height: 605px;
		width: 603px;
	}
	.workflow7 p {
		padding-top: 30px;
	}
	.workflow8 {
		background: url("../images/Workflow_step8 (smartphone).png") no-repeat;
		height: 561px;
		width: 603px;
	}
	.workflow h2 {
		width: 100%;
		text-align: center;
		font-size: 1.8rem;
		padding: 290px 0 0 0;
	}
	.workflow p {
		width: 80%;
		font-size: 1.25rem;
		padding: 40px 0 0 0;
		margin: auto;
	}
	.arrow {
		width: 72px;
		margin: -25px auto 25px auto;
	}
}