
@media screen and (max-width: 850px) {
	.flow_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #b44c97;
}
.flow_title h1{
	color: #b44c97;
    font-size: 6vw;
    background-color: #FFF;
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.flow_title img{
	height: 25vw;
}
.flow_explanation{
	padding:7vw;
	font-size: 4vw;
}
.flow_explanation_bottom{
	display: flex;
	align-items:center;
	font-size: 4.5vw;
	padding:5vw 7vw;
}
.flow_explanation_bottom .div_triangle{
	width: 0;
    height: 0;
    border: 2vw solid transparent;
    border-top: 4vw solid #000000;
    position: relative;
    top: 1vw;
    margin-right: 1vw;
}
.flow_list{
	display: flex;
	justify-content: center;
	margin-bottom: 10vw;
}
.flow_list li{
	height: 41vw;
	display: flex;
	align-items: center;
}
.flow_list_content{
	font-size: 5vw;
	width: 5vw;
	border: 1vw solid #b44c97;
	padding: 1.5vw;
	border-radius: 2vw;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.flow_list_triangle{
	width: 0;
    height: 0;
    border: 3vw solid transparent;
    border-right: 0;
    border-left: 4vw solid #b44c97;
}
.flow_detail_img{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2vw 0;
}
.flow_detail_img img{
	height: 45vw;
}

#flow_detail{
	background-color: #FFFCE3;
	display: flex;
	justify-content: center;
	padding:10vw 0;
}

.flow_list_content_detail{
	font-size: 5vw;
	width: 90vw;
	background-color: #b44c97;
	padding: 2vw;
	border-radius: 3vw;
	color: #FFF;
}
.flow_list_detail_flex{
	display:flex;
	justify-content: space-between;
	align-items: center;
	height: 9vw;
}
.flow_list_content_detail span{
	margin-left:5vw;
}
.flow_content{
	display: none;
	background-color: #FFF;
	font-size:4vw;
	color: #000000;
	padding:4vw 0;
	margin-top: 2vw;
	line-height: 1.4;
}
.flow_content h2{
    color: #b44c97;
    width: 75vw;
    margin: 0 auto;
    font-size: 4.5vw;
    padding: 2vw;
    border-bottom: 0.3vw solid #b44c97;
}
.flow_content p{
	width: 74vw;
    margin: 4vw auto;
}
.flow_content p span{
	margin: 0;
	color: #F60104;
}
.flow_content_background_blue{
	background: #EDF7FF;
    border: solid 0.3vw #000000;
    padding: 3vw;
    width: 70vw;
    margin: 4vw auto;
}
.flow_content_background_blue span{
	margin: 0;
	color: #F60104;
}
.flow_content_background_blue h3{
	margin: 2vw 0;
    font-size: 4.3vw;
}
.flow_content_border{
    border: solid 0.3vw #000000;
    padding: 3vw;
    width: 70vw;
    margin: 4vw auto;
}
.flow_content a{
	color: #555555;
	text-decoration: underline;
}




.flow_list_triangle_detail{
	width: 0;
    height: 0;
    border: 3vw solid transparent;
    border-top: 5vw solid #b44c97;
    position: relative;
    top: 2vw;
}
.flow_detail_triangle_box{
	display: flex;
	justify-content: center;
	margin: 1vw auto;
}
.arrow_box{
	width: 9vw;
	height:9vw;
	background-color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 2vw;
}
.arrow_bottom{
	height:4vw;
	width: 4vw;
	border-right: 1vw solid #b44c97;
	border-bottom: 1vw solid #b44c97;
	transform: rotate(45deg);
	position: relative;
	bottom: 1vw;
	transition: 0.2s;
}
.arrow_up{
	transform: rotate(225deg);
	transition: 0.2s;
	bottom:-1vw;
}

}
@media screen and (min-width: 850px) {
	.flow_title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #b44c97;
	}
	.flow_title h1{
		color: #b44c97;
		font-size: 30px;
		height:100px;
		background-color: #FFF;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}
	.flow_title img{
		height: 180px;
	}
	.flow_explanation{
		padding: 20px;
		font-size:20px;
		margin: 25px auto 0 auto;
		width: 740px;
		font-size: 20px;
		line-height: 1.5;
	}
	.flow_explanation_bottom{
		display: flex;
		align-items:center;
		justify-content: center;
		font-size:17px;
		padding:20px 0;
	}
	.flow_explanation_bottom .div_triangle{
	    width: 0;
	    height: 0;
	    border: 10px solid transparent;
	    border-top: 10px solid #000000;
	    position: relative;
	    top: 6px;
	    margin-right: 10px;
	}
	.flow_list{
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
		user-select: none;
	}
	.flow_list li{
		height: 200px;
		display: flex;
		align-items: center;
	}
	.flow_list_content{
		font-size: 22px;
		width: 40px;
		border: 3px solid #b44c97;
		padding: 12px;
		border-radius: 10px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		background: #FFF;
	}
	.flow_list_triangle{
		width: 0;
		height: 0;
		border: 15px solid transparent;
		border-right: 0;
		border-left: 25px solid #eebbcb;
		margin: 7px;
	}
	.flow_detail_img{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 2vw 0;
	}
	.flow_detail_img img{
		height: 225px;
	}

	#flow_detail{
		background-color: #FFFCE3;
		/* display: flex; */
		justify-content: center;
		padding:50px 0;
	}

	.flow_list_content_detail{
	    font-size: 25px;
	    width: 710px;
	    background-color: #b44c97;
	    padding: 10px;
	    border-radius: 7px;
	    color: #FFF;
	    cursor: pointer;
	    margin: 0 auto;
	}
	.flow_list_detail_flex{
		display:flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
	}
	.flow_list_content_detail span{
		margin-left:30px;
	}
	.flow_content{
		display: none;
	    background-color: #FFF;
	    font-size: 17px;
	    color: #000000;
	    padding: 20px 0;
	    margin-top: 13px;
	    line-height: 1.4;
	}
	.flow_content h2{
	    color: #b44c97;
	    width: 600px;
	    margin: 0 auto;
	    font-size: 25px;
	    padding: 4px;
	    border-bottom: 2px solid #b44c97;
	}
	.flow_content p{
		width: 600px;
	    margin: 20px auto;
	}
	.flow_content p span{
		margin: 0;
		color: #F60104;
	}
	.flow_content_background_blue{
	    background: #EDF7FF;
	    border: solid 1px #000000;
	    padding: 25px;
	    width: 560px;
	    margin: 20px auto;
	}
	.flow_content_background_blue span{
		margin: 0;
		color: #F60104;
	}
	.flow_content_background_blue h3{
		margin: 0 0 30px auto;
	    font-size: 20px;
	    font-weight: bold;
	}
	.flow_content_border{
	    border: solid 1px #000000;
	    padding: 20px;
	    width: 560px;
	    margin: 10px auto;
	}
	.flow_content a{
		color: #555555;
		text-decoration: underline;
	}



	.flow_intro{
		font-size: 18px;
		text-align: center;
		margin-bottom: 20px;
	}
	.flow_list_detail{
		margin: 0 auto;
		text-align:;
	}
	.flow_list_triangle_detail{
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-top: 20px solid #eebbcb;
		position: relative;
		top: 10px;
	}
	.flow_detail_triangle_box{
		display: flex;
		justify-content: center;
		margin: 5px auto;
	}
	.arrow_box{
		width: 60px;
		height: 41px;
		background-color: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
	}
	.arrow_bottom{
		height: 23px;
		width: 23px;
		border-right: 6px solid #b44c97;
		border-bottom: 6px solid #b44c97;
		transform: rotate(45deg);
		position: relative;
		bottom: 8px;
		transition: 0.2s;
	}
	.arrow_up{
		transform: rotate(225deg);
		transition: 0.2s;
		bottom: -8px;
	}
}



