/* ============================================================================
flowSection
============================================================================*/

/* -----------------------------------------------------------
flowTtlWrap 
-----------------------------------------------------------*/
	.flowSection {
		overflow: hidden;
	}
	.flowSection .flowTtlWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.flowSection .flowTtlWrap .txtBox {
		width: 55.55%;
	}
	.flowSection	.flowTtlWrap .picBox {
		width: 40%;
		max-width:930px;
		margin-right: -10%;
		margin-top: clamp(-40px, 5vw, -60px);
	}

@media (max-width: 1199px) {
	.flowSection .flowTtlWrap .txtBox {
		width: 70%;
	}
}

@media (max-width: 767px) {
	.flowSection .flowTtlWrap.fullbleed-left {
		padding-right:5%;
		padding-left:5%;
	}
	.flowSection .flowTtlWrap .txtBox {
		width: 100%;
	}
	.flowSection	.flowTtlWrap .picBox {
		width: 100%;
		margin-left: auto;

	}
}



/* -----------------------------------------------------------
flowWrap 
-----------------------------------------------------------*/
/* flowWrap
--------------------------------- */
	.flowWrap {
		position: relative;
		margin-top: clamp(-300px, calc(-19.44vw + 73.33px), -160px);
		z-index: 2;
	}
@media (max-width: 1199px) {
	.flowWrap {
		margin-top: clamp(-160px, calc(-20.79vw + 89.49px), -70px);
	}
}
@media (max-width: 767px) {
	.flowWrap {
		margin-top: 0;
	}	
}

/* flowBox
--------------------------------- */
	.flowWrap .flowBox {
		display: flex;
	}
	.flowWrap .flowBox .numUnit {
		position: relative;
	}
	.flowWrap .flowBox .numUnit .numberCircle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #81A6E5;
		color: #fff;
		font-size: 5rem;
		font-family: var(--fontFamily-en_01);
		font-weight: 700;	
		margin-top: 20px;
		z-index: 2;
	}
	.flowWrap .flowBox:last-of-type .numUnit .numberCircle {
			background: var(--color-bl-01);
	}
	.flowWrap .flowBox .numUnit::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 3px;
		height: 100%;
		background: #81A6E5;
	}
	.flowWrap .flowBox .txtUnit {
		width: calc(100% - 100px);
		margin-left: 3%;
		padding: 25px 0;
		border-bottom: 1px solid #B0C7EF;
	}
	.flowWrap .flowBox .txtUnit .ttl {
		padding-bottom: 0.2em;
		font-size: clamp(2.2rem, 1.02rem + 1.6vw, 2.6rem);
		font-weight: 800;
		color:var(--color-bk-accent);
	}

	/* st01_linkBox */
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top:0.8em;
		padding: 1em 1.5em;
		background: linear-gradient(to right, #D8E4FF 0%, #D8E4FF 50%, #CCDCF8 100%);
		border: 1px solid #B4CEFA;
		border-radius: 10px;;
	}
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox .title {
		margin-right:5px;
		line-height: 1.4;
		color: #003897;
	}	
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox .title .ya {
		margin-left:3px;
		font-size: 0.9em;
	}	
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox .menu-contact a {
		padding :10px 40px;
	}


	/* 補正 */
	.flowWrap .flowBox:last-of-type .numUnit::before {
		height: 50%;
	}
	.flowWrap .flowBox:nth-of-type(1) .txtUnit {
		padding-top:0;
	}
	.flowWrap .flowBox:nth-of-type(1) .numUnit .numberCircle {
		margin-top: 0;
	}

@media (max-width: 1199px) {
	.flowWrap .flowBox .numUnit .numberCircle {
		width: 90px;
		height: 90px;
	}
	.flowWrap .flowBox .txtUnit {
		width: calc(100% - 90px);
	}
}
@media (max-width: 767px) {
	.flowWrap .flowBox .numUnit .numberCircle {
		width: 70px;
		height: 70px;
		font-size: 3rem;
	}
	.flowWrap .flowBox .txtUnit {
		width: calc(100% - 70px);
	}
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox > * {
		width: 100%;
	}
	.flowWrap .flowBox .txtUnit .txt .st01_linkBox .title {
		margin-right: 0;
		text-align: center;
		padding-bottom: 0.5em;
	}	
}


/* ============================================================================
conCtaSection
============================================================================*/
	.conCtaSection .conCtaWrap {
		padding: clamp(60px, 8vw, 100px);
		border-radius: 30px;
		background:
			url("../images/flow/02_p_01.png") right center / auto 100% no-repeat,
			linear-gradient(to right, #05225A, #487FB7);
			background-blend-mode: multiply;
	}
	.conCtaSection .conCtaWrap h2 {
		margin-inline: auto;
		max-inline-size: max-content;
		color: #FFF;
	}
	.conCtaSection .conCtaWrap .txt {
		font-size: 1.6rem;
		margin-inline: auto;
		max-inline-size: max-content;
		color: #FFF;
	}
	.conCtaSection .conCtaWrap .menu-contact a {
		max-width: 280px;
		margin: 2em auto 0;
		padding: 14px 24px;
	}

@media (max-width: 767px) {
	.conCtaSection .conCtaWrap .txt {
		font-size: 1.45rem;
	}	
}