/* -----------------------------------------------------------
	ページTOPエリア
-------------------------------------------------------------- */

/*キャッチエリア*/
.top-catch-area .catch {
	text-align: center;
}

.top-catch-area .txt {
	font-size: 2rem;
	text-align: center;
}

@media screen and (max-width: 768px){
	/*キャッチエリア*/
	.top-catch-area .txt {
		font-size: 1.6rem;
	}
	}

/* -----------------------------------------------------------
	流れ
--------------------------------------------------------------*/
.flow-area {
	background-color: #F9F5F2;
	position: relative;
	margin: 250px auto 180px;
	padding: 80px 0 30px;
}

.flow-area::before {
	content: "";
	background: url("../img/wave-pink.png")no-repeat top left / 100% 100%;
	display: block;
	width: 100%;
	height: 126px;
	position: absolute;
	top: -125px;
}
.flow-area::after {
	content: "";
	background: url("../img/wave-pink02.png")no-repeat top left / 100% 100%;
	display: block;
	width: 100%;
	height: 126px;
	position: absolute;
	bottom: -125px;
}

.flow-area .titlebox {
    margin-bottom: 0px;
}

.flow-area .ttl-catch {
    display: flex;
    margin-bottom: 75px;
    gap: 100px;
    justify-content: center;
	text-align: center;
	position: absolute;
	top: -110px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.flow-area .ttl-catch .catch {
	margin-bottom: 0px;
}

.flow-area .flow-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 70px 30px;
}

.flow-area .flow-list li {
	background-color: #fff;
	padding: 70px 30px 40px;
	text-align: center;
	position: relative;
	width: 23%;
}

.flow-area .flow-list li::after {
	content: "";
	width: 11px;
	height: 31px;
	position: absolute;
	background: url("../img/flow-arrow.png") no-repeat center;
	background-size: contain;
	top: 50%;
    right: -24px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.flow-area .flow-list li:nth-child(4)::after,
.flow-area .flow-list li:last-child::after {
	content: none;
}

.flow-area .flow-list li .txt {
	font-size: 2.2rem;
	font-weight: 500;
	margin-top: 20px;
}

.flow-area .flow-list li .s-txt {
	font-size: 1.6rem;
	margin-top: 20px;
	line-height: 1.5;
	text-align: left;
}

.flow-area .flow-list li a {
	color: #FFA144;
    text-decoration: underline;
}

.flow-area .flow-list li .num {
	font-size: 1.4rem;
	font-weight: 500;
	position: absolute;
	display: flex;
    gap: 20px;
	top: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	white-space: nowrap;
}

.flow-area .flow-list li .num span img {
	height: 22px;
	margin-top: 20px;
}
.flow-area .flow-list li .num span img.num-tall {
	height: 29px;
}

.flow-area .flow-list li .num span:before {
    position: absolute;
    top: -5px;
    left: 39px;
    content: "";
    width: 1px;
    height: 120%;
    background: #707070;
    transform: rotate(40deg);
}

/*注意*/
.attention {
	font-size: 1.8rem;
	font-weight: 500;
	color: #E50303;
	margin-top: 50px;
	text-align: center;
	line-height: 1.5;
}

/*deco*/
.flow-area .deco-img {
	position: absolute;
	top: -200px;
	left: 15%;
	z-index: 5;
}


@media screen and (max-width: 1450px){
	.flow-area .flow-list li {
		padding: 60px 20px 25px;
	}
	
	.flow-area .flow-list li .step-img {
		width: 130px;
	}
}


@media screen and (max-width: 768px){
	.flow-area {
		margin: 130px auto 80px;
		padding: 60px 0 30px;
	}

	.flow-area::before {
		content: "";
		background: url("../img/wave-pink.png")no-repeat top left / 100% 100%;
		display: block;
		width: 100%;
		height: 50px;
		top: -50px;
	}
	.flow-area::after {
		content: "";
		background: url("../img/wave-pink02.png")no-repeat top left / 100% 100%;
		display: block;
		width: 100%;
		height: 50px;
		bottom: -50px;
	}

	.flow-area .titlebox {
		margin-bottom: 0px;
	}

	.flow-area .ttl-catch {
		top: -50px;
	}

	.flow-area .ttl-catch .catch {
		margin-bottom: 0px;
	}

	.flow-area .flow-list {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		gap: 30px;
	}

	.flow-area .flow-list li {
		padding: 20px 15px 20px;
        text-align: center;
        position: relative;
        display: flex;
        align-items: center;
		gap:20px;
		width: 100%;
	}

	.flow-area .flow-list li::after {
		content: "";
		width: 6px;
		height: 31px;
		position: absolute;
		background: url("../img/flow-arrow.png") no-repeat center;
		background-size: contain;
		top: auto;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: rotate( 90deg );
	}

	.flow-area .flow-list li:nth-child(4)::after {
		content: "";
	}
	
	.flow-area .flow-list li img.step-img {
		width: 78px;
		margin: 0;
	}

	.flow-area .flow-list li .txt {
		font-size: 2rem;
		margin-top: 0px;
		text-align: left;
	}
	
	.flow-area .flow-list li .s-txt {
		margin-top: 10px;
	}

	.flow-area .flow-list li .num {
		font-size: 1.4rem;
		position: relative;
		display: flex;
		gap: 30px;
		top: auto;
		left: auto;
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		margin-bottom: 5px;
	}

	.flow-area .flow-list li .num span img {
		height: 15px;
		width: 100%;
		margin-top: 0px;
	}
	.flow-area .flow-list li .num span img.num-tall {
		height: 18px;
	}

	.flow-area .flow-list li .num span:before {
		top: -2px;
		left: 47px;
	}
	
	/*注意*/
	.attention {
		font-size: 1.5rem;
		margin-top: 30px;
	}

	/*deco*/
	.flow-area .deco-img {
		top: -100px;
		left: 5%;
	}
	.flow-area .deco-img img {
		width: 60px;
	}
	
	}