:root {
	--icon-circle-width: 70px;
	--icon-size: 40px;
}




.icon-point-container {
	position: relative;
	width: 50%;
	margin-right: 50%;
	padding-right: var(--icon-circle-width);
	box-sizing: border-box;
}
.icon-point-container::before,
.icon-point-container::after {
	position: absolute;
	top: calc(var(--icon-circle-width) / 2);
	left: 0;
	right: 0;
	content: "";
	height: 1px;
	background: var(--blue);
	z-index: 0;
}
.icon-point-container::before {
	width: 1px;
	left: auto;
	right: 0;
	height: 100%;
}

.icon-point-container .icon-area {
	position: absolute;
	top: 0;
	right: calc((var(--icon-circle-width) / 2) * -1);
	width: var(--icon-circle-width);
	height: var(--icon-circle-width);
	border: 1px solid var(--blue);
	border-radius: 50%;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.icon-point-container:nth-of-type(2n) {
	margin-left: 50%;
	margin-right: 0;
	padding-left: var(--icon-circle-width);
	padding-right: 0;
}
.icon-point-container:nth-of-type(2n)::before {
	left: 0;
	right: auto;
}
.icon-point-container:last-of-type::before {
	display: none;
}
.icon-point-container:nth-of-type(2n) .icon-area {
	right: auto;
	left: calc((var(--icon-circle-width) / 2) * -1);
}

.icon-point-container .icon-area img {
	display: block;
	margin: 0;
	padding: 0;
	width: var(--icon-size);
	height: var(--icon-size);
}




@media screen and (max-width: 800px) {

	body {
		--icon-circle-width: 50px;
		--icon-size: 30px;
	}

	.icon-point-container,
	.icon-point-container:nth-of-type(2n) {
		width: calc(100% - (var(--icon-circle-width) / 2));
		margin-left: calc(var(--icon-circle-width) / 2);
		margin-right: 0;
		padding-left: var(--icon-circle-width);
		padding-right: 0;
		padding-bottom: var(--icon-size);
	}
	.icon-point-container .icon-area {
		left: calc((var(--icon-circle-width) / 2) * -1);
		right: auto;
	}
	.icon-point-container::before {
		left: 0;
		right: auto;
	}

}