@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------

flow.html

-------------------------------------------------- */

/* flow-lead */
.flow-lead{
	font-size: 1.8rem;
	margin: 5% auto;
}

/* flow-main */
.flow-main{
	position: relative;
	padding: 3% 0;
}
.flow-main:before{
	content: "";
    width: 45%;
    height: 100%;
    background: #EFEFEF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}

/* flow-ttl */
.flow-ttl{
	max-width: 800px;
	width: 100%;
	display: flex;
	margin: 1.5rem auto 0;
}
.flow-ttl h3{
	width: 50%;
	margin-bottom: 8rem;
}
@media screen and (max-width: 768px) {
	.flow-ttl h3{
		margin-bottom: 3rem;
	}
}

/* flow-box */
.flow-box{
	max-width: 800px;
	width: 90%;
	background: #26232C;
	color: #FFF;
	text-align: center;
	padding: 3rem;
	margin: 0 auto 120px;
	position: relative;
}
.flow-box::after{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 30px solid #D8371C;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	border-bottom: 30px solid transparent;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -110px;
	margin: auto;
}
.flow-box:last-child::after{
	content: none;
}
.flow-box h4{
	font-size: 2.8rem;
	margin-bottom: 2rem;
}
.flow-box br{
	display: none;
}
.flow-box .flow-bnrarea{
	display: block;
	margin-top: 2rem;
}
.flow-box .flow-bnrarea p+p{
	margin-top: 1.5rem;
}
.flow-box .btn-arrow a{
	margin-bottom: 0;
}
.flow-box .flow-text{
	font-size: 2rem;
}
.flow-box .flow-text span{
	display: block;
	font-size: 3rem;
	line-height: .8;
}
@media screen and (max-width: 768px) {
	.flow-box{
		/*padding: 5%;*/
		margin: 0 auto 40px;
	}
	.flow-box::after{
		border-top: 15px solid #D8371C;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-bottom: 15px solid transparent;
		bottom: -42px;
	}

	.flow-box h4{
		font-size: 2.4rem;
		margin-bottom: 1rem;
	}
	.flow-box .flow-caution{
		text-align: left;
	}
	.flow-box br{
		display: block;
	}
	.flow-box .btn-arrow a{
		font-size: 100%;
		padding-left: 1em;
		padding-right: 3.8em;
	}
}

/* flow-listarea */
.flow-listarea{
	display: flex;
}

/* flow-list */
.flow-list{
	width: 50%;
	display: flex;
	flex-direction: column;
}
.flow-list:first-child{
	align-items: flex-end;
	/*margin-right: 10%;*/
}
.flow-list li {
    max-width: 400px;
    width: 90%;
    font-size: 2rem;
    background: #26232C;
    color: #FFF;
    text-align: center;
    padding: 3rem 4%;
    margin: 0 0 120px;
    position: relative;
}
.flow-list li:before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 30px solid #D8371C;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	border-bottom: 30px solid transparent;
	position: absolute;
	top: -70px;
	left: 0;
	right: 0;
	margin: auto;
}

.after-arrow::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 30px solid #D8371C;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 30px solid transparent;
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    margin: auto;
}

.flow-list .flow-last{
	margin-top: auto;
}
.flow-list .flow-last::before{
	top: -180px;
}
@media screen and (max-width: 768px) {
	.flow-list:first-child{
		align-items: center;
		margin-right: 0;
	}
	.flow-list li{
		padding: 5% 2%;
		margin: 0 auto 40px;
		margin-left: 10%;
	}
	.flow-list li:before{
		border-top: 15px solid #D8371C;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-bottom: 15px solid transparent;
		top: -26px;
	}
	.flow-list .flow-last::before{
		top: -80px;
	}
	.after-arrow::after {
    	border-top: 15px solid #D8371C;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-bottom: 15px solid transparent;
    	bottom: -40px;
	}

}


.double-arrow{
	position: relative;
}
.double-arrow:before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 30px solid #D8371C;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	border-bottom: 30px solid transparent;
	position: absolute;
	bottom: -100px;
	left: 25%;
	margin: auto;
}

.double-arrow:after{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 30px solid #D8371C;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	border-bottom: 30px solid transparent;
	position: absolute;
	bottom: -100px;
	right: 25%;
	margin: auto;
}

@media screen and (max-width: 768px) {
	.double-arrow:before{
		border-top: 15px solid #D8371C;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-bottom: 15px solid transparent;
		bottom: -40px;
	}

	.double-arrow:after{
    	border-top: 15px solid #D8371C;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-bottom: 15px solid transparent;
    	bottom: -40px;
	}

}