@charset "utf-8";

/* PROCESS */
	.process {
		margin: var(--mywp-mg-block) 0;
		}
	.process-item {
		display: none;
		position: relative;
		}
	.process-item.c {
		display: block;
		}
	.process-button {
		background: var(--mywp-white);
		color: var(--mywp-shade-50);
		display: block;
		}
	.process-button.c {
		color: var(--mywp-dark);
		}
	.process-button:hover,
	.process-button.c:hover {
		color: var(--mywp-highlight);
		}
	.process-image {
		margin-left: 50%;
		position: relative;
		z-index: 1;
		}
	.process-img {
		border-radius: var(--mywp-radius);
		}
	.process-info {
		border-radius: var(--mywp-radius);
		display: grid;
		margin-right: var(--mywp-mg-pad);
		margin-top: -20%;
		position: relative;
		z-index: 2;
		}
	.process-holder {
		margin: 2rem;
		}
	.process-icon {
		max-width: 6rem;
		}
	.process-title {
		font-size: var(--mywp-ts-head-4);
		margin: 1rem 0;
		}
	.process-description > p {
		margin: 0;
		}
	@media (max-width: 49.99em) {
		.process-list {
			border-bottom: 0.1rem solid var(--mywp-light);
			display: flex;
			margin-bottom: 1rem;
			}
		.process-list > li {
			padding-bottom: 1rem;
			}
		.process-list > li + li {
			padding-left: 1rem;
			}
		.process-button {
			font-size: 1.4rem;
			}
		.process-button > i {
			display: none;
			}
	}
	@media (min-width: 50em) {
		.process {
			display: grid;
			grid-gap: 4rem;
			grid-template-columns: 1fr 1fr;
			}
		.process-list {
			margin-right: 4rem;
			margin-top: 4rem;
			}
		.process-list > li {
			padding-bottom: 1rem;
			}
		.process-list > li + li {
			border-top: 0.1rem solid var(--mywp-light);
			padding-top: 2rem;
			}
		.process-button {
			font-size: 2rem;
			font-weight: 700;
			text-align: right;
			padding: 2rem;
			width: 100%;
			}
		.process-button > i {
			color: var(--mywp-medium);
			margin-left: 1rem;
			}
		.process-button.c > i {
			color: var(--mywp-highlight);
			}
		.process-header {
			margin-top: 4rem;
			}
		.process-image {
			margin-left: 35%;
			}
		.process-info {
			border-radius: var(--mywp-radius);
			display: grid;
			margin-left: -2rem;
			margin-right: 20%;
			margin-top: -30%;
			}
	}
	@media (min-width: 60em) {
		.process-header {
			margin-top: 8rem;
			}
	}
	@media (min-width: 80em) {
		.process-header {
			margin-top: 12rem;
			}
		.process-list {
			margin-right: 12rem;
			}
		.process-button {
			font-size: 3rem;
			}
		.process-info {
			margin-left: -10rem;
			}
	}