@charset "UTF-8";
/* CSS Document */
/* ttlArea */
.ttlArea {
	background-image: url("../img/flow/ttl_bg.jpg");
}

.ttlArea:before {
  background-color: rgb(173 175 56 / 20%);
}

/* flowArea */
.flowArea .item .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 100px 20px 100px;
}

.flowArea .item:nth-child(2n) {
	background-color: #f2f2f2;
}

.flowArea .item:nth-child(2n) .inner {
  flex-direction: row-reverse;
}

.flowArea .item .inner .left {
	position: relative;
	width: 60%;
	padding: 0 40px;
	text-align: left;
}

.flowArea .item .inner .left h1 {
	font-size: min(6.5vw,28px);
	line-height: 1;
	letter-spacing: 0.2em;
	padding: 35px 0;
	color: #000;
}

.flowArea .item .inner .left p {
	font-size: min(3.5vw,16px);
	font-weight: 500;
	line-height: 1.8;
}

.flowArea .item .inner .right {
	width: 40%;
}

.flowArea .item .inner .right .img {
	background-size: cover;
	border-radius: 100%;
	aspect-ratio: 1/1;
}
.flowArea .item .flow01 .right .img {
	background-image: url("../img/flow/flow01.webp");
}

.flowArea .item .flow02 .right .img {
	background-image: url("../img/flow/flow02.webp");
}
.flowArea .item .flow03 .right .img {
	background-image: url("../img/flow/flow03.webp");
}


.flowArea .item .inner .left::before {
	position: absolute;
	top: -50px;
	font-size: 32px;
	letter-spacing: 10px;
	color: #B763A4;
	border-bottom: 1px solid #B763A4;
	width: 100px;
}

.flowArea .item .flow01 .left::before {
	content: "01";
}

.flowArea .item .flow02 .left::before {
	content: "02";
}

.flowArea .item .flow03 .left::before {
	content: "03";
}




@media screen and (max-width: 1000px) {
/* flowArea */
	.flowArea .inner {
		padding: 70px 6vw 50px;
	}
	
}
@media screen and (max-width: 767px) {
/* flowArea */
	.flowArea .item .inner {
		display: block;
	}
	
	.flowArea .item .inner .left {
		width: 100%;
		margin: 0 auto;
		padding: 20px 3vw;
	}
		
	.flowArea .item .flow01 .left::before {
		top: -45px;
		font-size:22px;
	}

	.flowArea .item .inner .left h1 {
		padding: 5px 0;
	}

	.flowArea .item .inner .right {
		width: 80%;
		margin: 0 auto;
	}

	.flowArea .item .inner .right .img {
		margin: 0 auto;
	}
	
	.flowArea .item .flow02 .left::before {
		top: -45px;
		font-size:22px;
	}
	
	.flowArea .item .flow03 .left::before {
		top: -45px;
		font-size:22px;
	}
	
}
@media screen and (max-width: 600px) {
/* flowArea */
	.flowArea .inner {
		padding: 50px 6vw 40px;
	}
}	
@media screen and (max-width: 340px) {
/* flowArea */
}