@charset "utf-8";

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

		flow_caption

------------------------------------------------*/
.flow_caption {
	padding: 0 4%;
}
.flow_caption_inner {
	max-width: 1620px;
	margin: 70px auto;
	text-align: center;
}
.flow_caption .flow_caption_ttl {
	color: #382857;
	font-size: 5.8rem;
	font-weight: 900;
	line-height: 1.48;
	margin-bottom: 20px;
}
@media (max-width: 959px) {
	.flow_caption_inner {
		margin: 50px auto;
	}
	.flow_caption .flow_caption_ttl {
		font-size: 4rem;
	}
}
@media (max-width: 767px) {
	.flow_caption_inner {
		margin: 30px auto 35px;
		text-align: justify;
	}
	.flow_caption .flow_caption_ttl {
		font-size: 2.25rem;
		text-align: center;
	}
}

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

		flow_list

------------------------------------------------*/
.flow_list {
	margin-bottom: 240px;
	position: relative;
}
.flow_list::before {
	background: url(../img/flow/bg_line.svg) center / contain repeat-y;
	content: '';
	display: block;
	width: 50px;
	height: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}
.flow_list .flow_list_item {
	padding: 50px 4% 80px;
	text-align: center;
	position: relative;
	z-index: 1;
}
.flow_list .flow_list_item:last-of-type {
	padding: 60px 4%;
}
.flow_list .flow_list_item.is_blue {
	background: linear-gradient(90deg, #2a449a 0%, #15224d 100%);
	color: #fff;
}
.flow_list .flow_list_item.is_white {
	background: linear-gradient(90deg, #fff 0%, #e2e2e2 100%);
}
.flow_list .flow_list_item:not(:first-of-type) {
	margin-top: 90px;
}
.flow_list .flow_list_item .flow_list_item_inner {
	max-width: 1620px;
	margin: 0 auto;
}
.flow_list .flow_list_item h3 {
	font-size: 3.4rem;
	font-weight: 900;
}
.flow_list .flow_list_item.is_white h3 {
	color: #382857;
}
.flow_list .flow_list_item h3 + p {
	margin-top: 20px;
}
.flow_list .flow_list_item .flow_list_item_image {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 60px;
	gap: 2.08333333vw 2.75%;
}
.flow_list .flow_list_item .flow_list_item_image li {
	width: 31.5%;
	position: relative;
}
.flow_list .flow_list_item .flow_list_item_image li:has(iframe) {
	width: 45%;
}
.flow_list .flow_list_item .flow_list_item_image li:not(:first-of-type) {
	margin-left: 0;
}
.flow_list .flow_list_item .flow_list_item_image li figure {
	clip-path: polygon(0 0,100% 0,100% calc(100% - 45px),calc(100% - 45px) 100%, 0 100%);
	width: 100%;
	height: 0;
	padding-top: 70%;
	position: relative;
	overflow: hidden;
}
.flow_list .flow_list_item .flow_list_item_image li figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.flow_list .flow_list_item .flow_list_item_image li iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}
@media (max-width: 959px) {
	.flow_list {
		margin-bottom: 150px;
	}
	.flow_list::before {
		width: 35px;
	}
	.flow_list .flow_list_item {
		padding: 40px 4% 60px;
	}
	.flow_list .flow_list_item:last-of-type {
		padding: 40px 4%;
	}
	.flow_list .flow_list_item:not(:first-of-type) {
		margin-top: 60px;
	}
	.flow_list .flow_list_item h3 {
		font-size: 2.6rem;
	}
	.flow_list .flow_list_item p {
		font-size: 1.4rem;
		letter-spacing: 0;
	}
	.flow_list .flow_list_item h3 + p {
		margin-top: 15px;
	}
	.flow_list .flow_list_item .flow_list_item_image {
		margin-top: 45px;
	}
	.flow_list .flow_list_item .flow_list_item_image li figure {
		clip-path: polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%, 0 100%);
	}
}
@media (max-width: 767px) {
	.flow_list {
		margin-bottom: 55px;
	}
	.flow_list::before {
		width: 20px;
	}
	.flow_list .flow_list_item {
		padding: 35px 4% 55px;
	}
	.flow_list .flow_list_item:last-of-type {
		padding: 35px 4%;
	}
	.flow_list .flow_list_item:not(:first-of-type) {
		margin-top: 50px;
	}
	.flow_list .flow_list_item h3 {
		font-size: 1.8rem;
	}
	.flow_list .flow_list_item p {
		font-size: 1.2rem;
		letter-spacing: 0.05em;
		text-align: justify;
	}
	.flow_list .flow_list_item .flow_list_item_image {
		margin-top: 15px;
		gap: 15px;
	}
	.flow_list .flow_list_item .flow_list_item_image li {
		width: 100%;
		margin-top: 0;
	}
	.flow_list .flow_list_item .flow_list_item_image li:has(iframe) {
		width: 100%;
	}
	.flow_list .flow_list_item .flow_list_item_image li:not(:first-of-type) {
		margin-left: 0;
	}
}