@charset "utf-8";

.box_flowtocomp {
	width: 100%;
	padding: 6em 5%;
}
.box_flowtocomp article {
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin: auto auto 5em auto;
}
.box_flowtocomp article .img {
	width: 40%;
}
.box_flowtocomp article .num {
	width: 12%;
	color: #818A93;
	line-height: 1;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.box_flowtocomp article .num span {
	position: relative;
	display: block;
	height: 100%;
	font-size: calc(2em + 2.5vw);
	color: #818A93;
}
.box_flowtocomp article .num span::before {
	position: absolute;
	top: 1.3em;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	content: "";
	height: calc(100% - 1.3em);
	width: 1px;
	background-color: #818A93;
}
.box_flowtocomp article .num span::after {
	position: absolute;
	bottom: 0;
	left: calc(50% - 0.5px);
	display: block;
	margin: auto;
	content: "";
	height: 0.8em;
	width: 1px;
	background-color: #818A93;
	transform-origin: center bottom; 
	transform: rotate(25deg);
}
.box_flowtocomp article section {
	width: 48%;
	text-align: left;
}
.box_flowtocomp article section h2 {
	margin-bottom: 0.9em;
	padding-bottom: 0.3em;
	line-height: 1.5;
	font-size: 2em;
	font-weight: normal;
	color: #5C5C5C;
	border-bottom: 2px dotted #5C5C5C;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.box_flowtocomp article section p {
	margin-bottom: 1.0em;
	line-height: 2;
	font-size: 1em;
	font-weight: normal;
	color: #5C5C5C;
}


@media screen and (max-width: 700px) {
	.box_flowtocomp {
		padding: 4em 5%;
	}
	.box_flowtocomp article {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.box_flowtocomp article .img {
		order: 1;
		width: 100%;
		margin-top: 2em;
		text-align: center;
	}
	.box_flowtocomp article .img img {
		display: inline-block;
	}
	.box_flowtocomp article .num {
		width: 12%;
	}
	.box_flowtocomp article section {
		width: 83%;
	}
	.box_flowtocomp article section h2 {
		margin-bottom: 0.6em;
		font-size: 1.7em;
	}
}