@charset "UTF-8";
/* =======================================================
* howtouse.php
* ======================================================= */
.flex .txt-lft {
	order: 1 !important;
}

.flex .flex-rgt {
	order: 2 !important;
}

.step {
	padding-top: 2%;
}

.step-container {
	background: #FFF;
	border-radius: 4px;
	margin-bottom: 1.5%;
}

.step-container .flex {
	align-items: center;
	padding: 3% 40px;
}

.step-container .flex p:first-of-type {
	flex: 1;
	font-size: 40px;
	padding-right: 40px;
}

.step-container:last-of-type .flex p:first-of-type {
	font-size: 18px;
}

.step-container:not(:last-of-type) .flex p:first-of-type::before {
	display: block;
	content: "STEP";
	font-size: 14px;
}

.step-container .flex p:nth-of-type(2) {
	border-left: 1px solid #CFCFCF;
	padding-left: 20px;
}

.step-inner {
	flex: 10;
}

.step-inner span {
	display: block;
	padding-bottom: 1%;
}

.step-container img {
	width: 280px;
	border-radius: 0 4px 4px 0;
	object-fit: cover;
}

/* =======================================================
* max-width: 768px
* ======================================================= */
@media screen and (max-width: 768px) {
	.inner {
		padding: 0 4%;
	}

	.flex .flex-rgt {
		padding: 0 15%;
	}

	.step-container {
		display: block;
		padding: 4%;
		margin-bottom: 4%;
	}

	.step-container .flex {
		padding: 0;
	}

	.step-container:last-of-type .flex p.txt-center {
		text-align: left;
		padding: 6% 4%;
	}

	.step-container .flex p:first-of-type {
		padding: 4% 6% 4% 4%;
	}

	.step-container .flex p:nth-of-type(2) {
		padding: 18px;
	}

}