@charset "UTF-8";

/* ご契約までの6つのステップ */
#steps-block .ttl-unit {
	position: relative;
}

#steps-block .txtDeco--center {
	top: auto;
	bottom: -0.1em;
}

#steps-block .content {
	max-width: 1120px;
	margin: 120px auto 0;
}

#steps-block .flow__unit {
	padding: 40px 5%;
	border: 2px solid var(--color_gray02);
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	display: flex;
	justify-content: space-between;
	gap: 16px 5%;
	position: relative;
}

#steps-block .flow__unit .number {
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	line-height: 1.05;
	color: var(--color_primary01);
	padding: 0.35em;
	aspect-ratio: 1/1;
	border: 2px solid var(--color_gray02);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: var(--color_white);
}

#steps-block .flow__unit .unit-img {
	width: 30%;
}

#steps-block .flow__unit .unit-img figure {
	width: 100%;
	height: 200px;
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	overflow: hidden;
}

#steps-block .flow__unit .unit-inner {
	width: 65%;
}

#steps-block .flow__unit .unit-ttl {
	font-family: var(--ff_jp_sans-serif);
	font-weight: var(--fw_jp_normal);
	border-bottom: 1px solid var(--color_gray02);
	margin-bottom: 24px;
}

#steps-block .flow__unit .unit-desc {
	display: block;
	width: 100%;
}

#steps-block .dot-line {
	width: 100%;
	height: 96px;
	background-image: radial-gradient(circle, var(--color_gray02) 3px, transparent 3px);
	background-position: center;
	background-repeat: repeat-y;
	background-size: 6px 12px;
}


/* フルワイドイメージ */
#visual-block01 figure {
	width: 100%;
	height: 590px;
}



/* スマートフォン用 - ブレイクポイント768 */
@media screen and (max-width: 768px) {

	/* ご契約までの6つのステップ */
	#steps-block .content {
		margin: 60px auto 0;
	}

	#steps-block .flow__unit {
		padding: 30px;
		flex-direction: column;
	}

	#steps-block .flow__unit .number {
		padding: 0.5em;
	}

	#steps-block .flow__unit .unit-img {
		width: 100%;
		margin-top: 16px;
	}

	#steps-block .flow__unit .unit-inner {
		width: 100%;
	}

	#steps-block .flow__unit .unit-ttl {
		margin-bottom: 16px;
	}

	#steps-block .dot-line {
		height: 56px;
		background-image: radial-gradient(circle, var(--color_gray02) 2px, transparent 2px);
		background-size: 4px 8px;
	}


	/* フルワイドイメージ */
	#visual-block01 figure {
		height: 360px;
	}

}