@charset "UTF-8";

/* ===============================
   feature
=============================== */
#feature .card .headline {
	color: var(--black);
}
#feature .card .headline .ttl {
	font-weight: 600;
}
#feature .card p {
	font-size: .923em;
}

/* ===============================
   present
=============================== */
#present .item {
	background: var(--white);
	height: 100%;
}
#present .item .txtBox {
	padding: max(5%, 25px) max(5%, 20px);
	line-height: 1.5;
}
#present .item .txtBox h5 .h4 {
	line-height: 1;
}
@media(min-width:768px){
	#present .item .row,
	#present .item .imgBox {
		height: 100%;
	}
	#present .item .imgBox img {
		height: 100%;
		object-fit: cover;
	}
}

/* ===============================
   flow
=============================== */
#flow .item .step {
	display: block;
	color: var(--color1);
	text-align: center;
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0;
	position: relative;
	z-index: 3;
}
#flow .item .step span {
	display: block;
}
#flow .item .step span:nth-of-type(2) {
	font-size: 2em;
	font-weight: 600;
}
#flow .item .txtBox .headline {
	color: var(--black);
}
#flow .item .txtBox p {
	margin-top: .5em;
}

@media(max-width:767px){
	#flow .item {
		position: relative;
	}
	#flow .item .step {
		color: var(--white);
		position: absolute;
		top: 2em;
		left: 1em;
		z-index: 2;
	}
}
@media(min-width:768px){
	#flow .item .step {
		padding: 1em 0;
		background: var(--l-gray);
	}
	#flow .item::before,
	#flow .item::after {
		content: '';
		display: block;
		width: 1px;
		background: var(--border1);
		position: absolute;
		top: 0;
		bottom: 75%;
		left: 12.5%;
		z-index: -1;
	}
	#flow .item::after {
		top: 25%;
		bottom: 0;
	}
	#flow .item:first-child::before,
	#flow .item:last-child::after {
		display: none;
	}
}
@media(min-width:992px){
	#flow .item::before,
	#flow .item::after {
		left: 4.165%;
		bottom: 50%;
	}
	#flow .item::after {
		top: 50%;
		bottom: 0;
	}
}