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

#contentsBlock section[id^="sec_"]{
	margin-top: 100px;
}

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

#contentsBlock .flexContainer figure{
	max-width: 466px;
	width: 50%;
}
#contentsBlock .flexContainer figure img{
	width: 100%;
}

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

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

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


@media screen and (max-width: 880px){
	#contentsBlock .flexContainer{
		flex-direction: column-reverse;
	}
	#contentsBlock .flexContainer .txtBox{
		width: 100%;
	}
	#contentsBlock .flexContainer figure{
		margin: 0 auto;
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	#contentsBlock section[id^="sec_"]{
		margin-top: 60px;
	}
	.hd01{
		font-size: var(--fs-3xl);
	}
	#contentsBlock .flexContainer{
		margin-top: 15px;
	}
	
	#contentsBlock #sec_mission .flexContainer{
		flex-direction: column;
	}
	#startContainer{
		padding: 25px 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;
	width: calc(100% / 3 - 15px);
}

#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("/outline/img/outline_icon_01.webp");
	}
	#sec_features .list .list-2 .hd02::before{
		background-image: url("/outline/img/outline_icon_02.webp");
	}
	#sec_features .list .list-3 .hd02::before{
		background-image: url("/outline/img/outline_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;
	}
	#sec_features .list li{
		width: 100%;
	}
}

@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_about .listBox{
	background: #e5e5e5;
	margin-top: 30px;
	padding: 30px;
}

#sec_about .listBox .ttl{
	font-size: var(--fs-xl);
	color: #3a520a;
}

#sec_about .listBox .list{
	margin-top: 25px;
}
	#sec_about .listBox .list li{
		text-indent: -0.6em;
		padding-left: 0.6em;
	}

#sec_about .listBox .list li + li{
	margin-top: 0.3em;
}
@media screen and (max-width: 767px){
	#sec_about .listBox{
		padding: 15px;
	}
	#sec_about .listBox .list{
		margin-top: 15px;
	}
}

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

/*  仕事が生活を、生活が仕事を豊かにする。

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

#sec_info{
	background: #d5eba0;
	padding: 100px 0 ;
}

#sec_info .ttl{
	font-size: var(--fs-4xl);
}
#sec_info .ttl .min{
	font-size: 2.4rem;
	color: #3a520a;
}

#sec_info .innerBox{
	background: #fff;
	margin-top: 40px;
	padding: 60px 40px;
	line-height: 1.875;
}

#sec_info .innerBox p{
	margin-top: 1.875em;
}

#sec_info .innerBox figure{
	max-width: 831px;
	width: 100%;
	margin: 2.6em auto 0;
}

@media screen and (max-width: 767px){
	#sec_info{
		padding: 60px 0;
	}
	#sec_info .ttl{
		font-size: var(--fs-3xl);
	}
	#sec_info .innerBox{
		padding: 40px 15px;
	}
}