@charset "UTF-8";
/*--------------------------------------------------------------
#categorie-top-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#categorie-top-area .bg-area {
		background: url("img/mainimage.jpg") top left no-repeat;
		background-size: cover;
	}
	
	
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	
	
}

/*--------------------------------------------------------------
#flow-message
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#flow-message {
		margin-bottom: 50px;
		padding: 0 8%;
	}
	
	#flow-message h3 {
		text-align: center;
		margin-bottom: 30px;
	}
	
	#flow-message p {
		text-align: left;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#flow-message {
		margin-bottom: 4.167vw;
		padding: 0;
	}
	
	#flow-message h3 {
		text-align: center;
		margin-bottom: 1.562vw;
	}
	
	#flow-message p {
		text-align: center;
	}
	
}

/*--------------------------------------------------------------
#flow-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#flow-area {
		background: #DEDEDC;
		margin: 0;
		padding: 30px 0;
	}
	
	#flow-area ul {
		width: auto;
		margin: 0 5%;
	}
	
	#flow-area ul li:nth-child(odd) {
		background: #FFF;
		padding: 45px 0;
		position: relative;
	}
	
	#flow-area ul li:nth-child(even) {
		text-align: center;
	}
	
	#flow-area .material-symbols-outlined {
		font-size: 28px;
		font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24
	}

	
	#flow-area dl {
		padding: 0 8%;
	}
	
	#flow-area dt {
		width: auto;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 20px;
	}
	
	#flow-area dt span {
		font-size: 20px;
		font-weight: 300;
		font-family: "Rubik", sans-serif;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	
	#flow-area dd {
		width: auto;
		padding-left: 0;
		box-sizing: border-box;
		border-left: none;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#flow-area {
		background: #DEDEDC;
		margin: 0 2.083vw;
		padding: 4.167vw 0;
	}
	
	#flow-area ul {
		width: 70.31vw;
		margin: 0 auto;
	}
	
	#flow-area ul li:nth-child(odd) {
		background: #FFF;
		padding: 2.344vw 0;
		position: relative;
	}
	
	#flow-area ul li:nth-child(even) {
		text-align: center;
	}
	
	#flow-area .material-symbols-outlined {
		font-size: 1.458vw;
		font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24
	}

	
	#flow-area dl {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		padding: 0;
	}
	
	#flow-area dt {
		width: 19.53vw;
		text-align: center;
		font-size: 1.302vw;
		font-weight: 600;
		margin-bottom: 0;
	}
	
	#flow-area dt span {
		font-size: 1.302vw;
		font-weight: 300;
		font-family: "Rubik", sans-serif;
		position: absolute;
		top: 0.521vw;
		left: 0.521vw;
	}
	
	#flow-area dd {
		width: 46.87vw;
		padding-left: 2.344vw;
		box-sizing: border-box;
		border-left: 1px solid #A2A2A2;
	}
	
}