@charset "utf-8";
/* CSS Document */

#contentsBlock section[id^="sec_"]{
	margin-top: 100px;
}
@media screen and (max-width: 767px){
	#contentsBlock section[id^="sec_"]{
		margin-top: 60px;
	}
	.hd01{
		font-size: var(--fs-3xl);
	}
}
/* ------------------------------------------------------------------------ */

/*  下川町人財バンクとは？

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

#sec_about .flexContainer{
	margin-top: 35px;
	gap: 40px;
}

#sec_about .flexContainer figure{
	max-width: 460px;
	width: 50%;
}

#sec_about .flexContainer .txtBox{
	text-align: left;
	max-width: 700px;
	width: calc(100% - 460px);
}


#sec_about .flexContainer .txtBox .hd02{
	font-size: 2.4rem;
	line-height: 1.583;
	color: #e06024;
}

#sec_about .txtBox p{
	margin-top: 1.5em;
	line-height: 1.875;
}

@media screen and (max-width: 880px){
	#sec_about .flexContainer{
		flex-direction: column-reverse;
	}
	#sec_about .flexContainer .txtBox{
		width: 100%;
	}
	#sec_about .flexContainer figure{
		margin: 0 auto;
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	#sec_about .flexContainer{
		margin-top: 15px;
	}
}
/* ------------------------------------------------------------------------ */

/*  下川町人財バンクの特徴

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

#sec_features ul{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	counter-reset: listnum;
	gap: 30px;
	margin-top: 70px;
}

#sec_features .list li{
	border: solid 4px #d5eba0;
	position: relative;
	padding: 0 36px 40px;
}

#sec_features .list li::before{
	display: block;
	counter-increment: listnum;
	content: counter(listnum, decimal-leading-zero);
	font-family: "Roboto", sans-serif;
	font-size: 4.0rem;
	font-weight: 700;
	line-height: 1;
	background: #fff;
	color: #3a520a;
	padding: 0 30px;
	margin: -20px auto 29px;
	width: 100px;
}
#sec_features .list .hd02{
	font-size: var(--fs-2xl-sub);
	font-weight: 700;
	color: #3a520a;
}
#sec_features .list .hd02::before{
		content: "";
		display: block;
		width: 140px;
		height: 140px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin: 0 auto 25px;
	}
	#sec_features .list .list-1 .hd02::before{
		background-image: url("/about/img/features_icon_01.webp");
	}
	#sec_features .list .list-2 .hd02::before{
		background-image: url("/about/img/features_icon_02.webp");
	}
	#sec_features .list .list-3 .hd02::before{
		background-image: url("/about/img/features_icon_03.webp");
	}

#sec_features .list p{
	margin-top: 20px;
	text-align: left;
	line-height: 1.875;
}

@media screen and (max-width: 1023px){
	#sec_features ul{
		gap: 15px;
	}
	#sec_features .list li{
		padding: 0 20px 30px;
	}
	#sec_features .list .hd02{
		font-size: var(--fs-xl);
	}
}
@media screen and (max-width: 880px){
	#sec_features ul{
		flex-direction: column;
		gap: 40px;
	}
}

@media screen and (max-width: 767px){
	#sec_features ul{
		margin-top: 35px;
	}
	#sec_features .list .hd02::before{
		width: 100px;
		height: 100px;
		margin: 0 auto 15px;
	}
	#sec_features .list p{
		margin-top: 15px;
	}
}



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

/*  ご利用の流れ

/* ------------------------------------------------------------------------ */
#sec_flow .flowList{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 80px;
	position: relative;
	z-index: 0;
	gap: 40px;
}
#sec_flow .flowList::before{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background: #ccc;
	position: absolute;
	top: calc(100% / 2 - 5px);
	z-index: 0;
}
	#sec_flow .flowList li{
		border: solid 1px #ccc;
		padding: 0 20px 30px;
		background: #fff;
		width: calc(100% / 4 - 30px);
		position: relative;
		z-index: 1;
	}

		#sec_flow .flowList li span{
			font-size: var(--fs-xl);
			display: block;
			max-width: 100px;
			line-height: 40px;
			background: #9dbe47;
			color: #fff;
			border-radius: 20px;
			margin: -20px auto 30px;
		}

		#sec_flow .flowList li .hd02{
			font-size: var(--fs-2xl-sub);
			font-weight: 700;
			color: #3a520a;
			margin-bottom: 25px;
		}
			#sec_flow .flowList li .hd02::before{
				content: "";
				display: block;
				width: 140px;
				height: 140px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				margin: 0 auto 25px;
			}
			#sec_flow .flowList li.list-1 .hd02::before{
				background-image: url("/about/img/flow_icon_01.webp");
			}
			#sec_flow .flowList li.list-2 .hd02::before{
				background-image: url("/about/img/flow_icon_02.webp");
			}
			#sec_flow .flowList li.list-3 .hd02::before{
				background-image: url("/about/img/flow_icon_03.webp");
			}
			#sec_flow .flowList li.list-4 .hd02::before{
				background-image: url("/about/img/flow_icon_04.webp");
			}

		#sec_flow .flowList li p{
			line-height: 1.875;
		}


@media screen and (max-width: 1024px){
	#sec_flow .flowList li .hd02{
		font-size: var(--fs-xl);
	}
	#sec_flow .flowList li p br{
		display: none;
	}
}
@media screen and (max-width: 880px){
	#sec_flow .flowList{
		flex-direction: column;
		gap: 40px;
	}
	#sec_flow .flowList li{
		width: 100%;
	}
	#sec_flow .flowList::before{
		width: 5px;
		height: 100%;
		top: 0;
		left: calc(100% / 2 - 5px);
	}
	#sec_flow .flowList li .hd02{
		margin-bottom: 15px;
	}
	#sec_flow .flowList li .hd02::before{
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 767px){
	#sec_flow .flowList{
		margin-top: 40px;
	}
}