/*
 * first-guide
 */

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

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

/* ---------------------------------------- promise */

#promise .inside {
	display: table;
	width: 100%;
	background: var( --baby-blue );
	padding: 1.5em 1em 1.5em 1.5em;
	margin: 0 0 2em;
	border-radius: 1em;
}
#promise .inside .num,
#promise .inside .item {
	display: table-cell;
	vertical-align: middle;
}
#promise .inside .num {
	color: #fff;
	font-weight: 900;
}
#promise .inside .item {
	padding: 0 0 0 1em;
}
#promise .inside .item h4 {
	color: #fff;
	border-bottom: 2px #fff solid;
	text-align: left;
	line-height: 1.6;
	padding: 0 0 .25em;
	margin: 0 0 .5em;
}
#promise .inside .item p {
	line-height: 1.6;
	font-weight: 500;
}

@media (max-width: 767px) {

	#promise .inside .num {
		font-size: clamp(2.75rem, 1.945rem + 4.03vw, 3.875rem); 
	}
	#promise .inside .item h4 {
		font-size: clamp(1rem, 0.463rem + 2.68vw, 1.75rem);
	}

}

@media (min-width: 768px) {

	#promise .inside .num {
		font-size: clamp(2.75rem, -0.974rem + 7.76vw, 3.875rem); 
	}
	#promise .inside .item h4 {
		font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); 
	}

}

/* ---------------------------------------- flow */

#flow ul li {
	border: 4px var( --baby-blue ) solid;
	border-radius: 1em;
	position: relative;
}
#flow ul li:not(:last-child){
	margin: 0 0 3em;
}
#flow ul li:not(:last-child)::after {
	font-family: 'icomoon';
	content: "\f0d7";
	font-size: 240%;
	position: absolute;
	top: calc( 100% + .2em );
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#flow ul li .step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var( --baby-blue );
	border: 4px var( --baby-blue ) solid;
	background: #fff;
	border-radius: 100%;
	text-align: center;
	line-height: 1;
	font-weight: 900;
	position: absolute;
	top: -.75em;
	left: -.5em;
}
#flow ul li .step small {
	display: block;
}
#flow ul li .step em {
	display: block;
}
#flow ul li > figure img { border-radius: .5em; }
#flow ul li > .item p { line-height: 1.8; }

@media (max-width: 767px) {

	#flow ul li { 
		padding: 2em 1.5em 2em; 
	}
	#flow ul li > figure { 
		text-align: center;
		margin: 0 0 1.5em; 
	}

	#flow ul li .step {
		width: 3.25em;
		aspect-ratio: 1;
		font-size: clamp(1.25rem, 0.445rem + 4.03vw, 2.375rem);
	}
	#flow ul li .step small {
		font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem);
	}

}

@media (min-width: 768px) {

	#flow ul li { 
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1em 2.5em; 
	}
	#flow ul li > figure { width: 35%; }
	#flow ul li > .item { 
		width: 60%;
		padding: 0 0 0 1em; 
	}

	#flow ul li .step {
		width: 2.5em;
		aspect-ratio: 1;
		font-size: clamp(2rem, -0.483rem + 5.17vw, 2.75rem);
	}
	#flow ul li .step small {
		font-size: clamp(1rem, 0.172rem + 1.72vw, 1.25rem);
	}


}