/*======================================

	林建設工業
	会社情報　取り組みCSS

=======================================*/


#torikumi h3.title {
	font-size: 170%;
	font-weight: bold;
	background: #e6e6e6;
	padding: 5px 15px;
	border-top: solid 1px #231815;
	border-bottom: solid 1px #231815;
	margin-bottom: 25px;
}

.line_title{
	margin-bottom: 30px;
}


/*======================================
	会社の取り組み
=======================================*/
#kouken{
	padding-top: 10px;
}

#kouken .list > li{
	margin-bottom: 35px;
}
#kouken .list .txt{
	position: relative;
	margin-bottom: 1.2em;
}
#kouken .list .title{
	color: #0a8d00;
	font-size: 120%;
	font-weight: bold;
	position: relative;
	left: 0;
}
#kouken .list .desc{
	display: block;
}

#kouken .list li:nth-child(1) .desc{
	padding-left: 13em;
}
#kouken .list li:nth-child(2) .desc{
	padding-left: 19em;
}
#kouken .list li:nth-child(3) .desc{
	padding-left: 14em;
}


#kouken .img_list li{
	float: left;
	max-width: 345px;
	width: 31.3%;
	margin-right: 2.72%;
	margin-bottom: 20px;
}
#kouken .img_list li:nth-child(3n){
	margin-right: 0;
}
#kouken .img_list .caption{
	margin-top: 15px;
}


/*======================================
	働き方への取り組み
=======================================*/
#working{
	
}

#working h5{
	font-size: 120%;
	font-weight: bold;
	color: #ec6d6d;
}
#working .desc{
	margin-top: 5px;
}
#working .torikumi_wrap{
	background-color: #fadbd6;
	padding: 20px;
	margin-top: 25px;
}


/* section01 */
#working .s_01{
	margin-bottom: 60px;
}
#working .s_01 .info{
	float: left;
	max-width: 305px;
	width: 25%;
	margin-right: 2.3%; 
}
#working .s_01 .img_list{
	float: right;
	max-width: 730px;
	width: 72.6%;
}

#working .s_01 .info .title{
	font-size: 110%;
	font-weight: bold;
	background: #fff;
	color: #ec6d6d;
	padding: 10px;
	margin-bottom: 10px;
}

#working .s_01 .img_list li{
	float: left;
	max-width: 230px;
	width: 31.8%;
	margin-right: 2%;
}
#working .s_01 .img_list li:last-child{
	margin-right: 0;
}

/* section02 */
#working .s_02{
	margin-bottom: 60px;
}

#working .s_02 .info{
	position: relative;
	padding-left: 280px;
	margin-bottom: 20px;
}
#working .s_02 .info .mk{
	position: absolute;
	top: 2px;
	left: 0;
	max-width: 250px;
	width: 100%;
	font-size: 115%;
	color: #fff;
	background: #ec6d6d;
	padding: 8px 20px;
	text-align: center;
}
#working .s_02 .l_data{
	float: left;
	width: 49%;
	padding: 15px;
	margin-right: 2%;
	background: #fff;
}
#working .s_02 .r_data{
	float: right;
	width: 49%;
	padding: 15px;
	background: #fff;
}

#working .s_02 .data .title{
	font-size: 115%;
	font-weight: bold;
	color: #ec6d6d;
	margin-bottom: 5px;
}
#working .s_02 .data .txt{
	margin-bottom: 15px;
}

#working .s_02 .data .btn_01{
	max-width: 225px;
	border: solid 2px #ec6d6d;
	color: #ec6d6d;
	background-image: url(../img/efforts/arrow_p.png);
	background-color: #fff;
	background-position: top 13px right 10px;
	padding: 12px 0;
}

/* section03 */
#working .s_03 .left_data{
	float: left;
	max-width: 530px;
	width: 48%;
	margin-right: 4%;
}
#working .s_03 .right_data{
	float: right;
	max-width: 530px;
	width: 48%;
}
#working .s_03 .desc{
	margin-bottom: 20px;
}
#working .s_03 .img{
	width: 100%;
}


/*======================================
	SDGs
=======================================*/
#sdgs_list > li:not(:last-child){
	margin-bottom: 80px;
}
#sdgs_list .flex_container{
	display: flex;
	align-self: start;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sdgs_list .flex_container h5{
	font-size: 150%;
	margin-bottom: 15px;
}
#sdgs_list .flex_container .img{
	max-width: 160px;
	width: 100%;
	margin-right: 20px;
	flex: 1;
}
#sdgs_list .flex_container .txt{
	max-width:870px;
	width: 79.09%;
}
#sdgs_list .flex_container .txt ul{
	list-style-type: disc;
	padding-left: 20px;
}

#sdgs_list .flex_container.--column2 .img{
	display: flex;
	gap: 4%;
	max-width: 340px;
	width: 100%;
	align-items: center;
	flex-wrap: nowrap;
}
#sdgs_list .flex_container.--column2 .img img{
	width: 48%;
	aspect-ratio: 1;
}
#sdgs_list .flex_container.--column2 .txt{
	width: 63%;
}

#sdgs_list .img_list{
	margin-top: 40px;
}
#sdgs_list .img_list .title{
	color: #0a8d00;
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 10px;
}
#sdgs_list .img_list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sdgs_list .img_list ul::after{
	display: block;
	content:"";
	width: 32%;
}
#sdgs_list .img_list ul li{
	width: 32%;
	margin-bottom: 15px;
}
#sdgs_list .img_list .note{
	margin-top: 5px;
}




@media screen and (max-width:960px) {
	#working .s_01 .info {
		max-width: 325px;
		width: 37%;
		margin-right: 2.3%;
	}
	#working .s_01 .img_list {
		max-width: 525px;
		width: 59.6%;
	}
}

@media screen and (max-width:800px) {
	#kouken .list .title{
		position: relative;
	}
	#kouken .list li:nth-child(1) .desc,
	#kouken .list li:nth-child(2) .desc,
	#kouken .list li:nth-child(3) .desc{
		padding-left: 0;
		margin-top: 5px;
	}
	#kouken .img_list li{
		width: 48%;
		margin-right: 4%;
	}
	#kouken .img_list li:nth-child(3n){
		margin-right: 4%;
	}
	#kouken .img_list li:nth-child(even){
		margin-right: 0;
	}
	
	#working .s_01 .info{
		position: relative;
		float: none;
		max-width: 100%;
		width: 100%;
		margin-bottom: 25px;
	}
	#working .s_01 .img_list{
		float: none;
		max-width: 600px;
		width: 100%;
		margin: 0 auto;
	}
	#working .s_01 .info .title{
		position: absolute;
		padding: 10px 17px;
		max-width: 275px;
		width: 100%;
	}
	#working .s_01 .info .txt{
		padding-left: 305px;
	}
}

@media screen and (max-width:650px) {
	#working .s_01 .info .title{
		position: relative;
		max-width: 100%;
	}
	#working .s_01 .info .txt{
		padding-left: 0;
	}
	#working .s_02 .info{
		padding-left: 0;
	}
	#working .s_02 .info .mk{
		position: relative;
		display: block;
		margin-bottom: 10px;
	}
}

@media screen and (max-width:600px) {
	#working .s_02 .l_data,
	#working .s_02 .r_data{
		float: none;
		max-width: 100%;
		width: 100%;
	}
	#working .s_02 .l_data{
		margin-bottom: 20px;
	}
	#working .s_03 .left_data,
	#working .s_03 .right_data{
		float: none;
		max-width: 100%;
		width: 100%;
		margin-right: 0;
	}
	#working .s_03 .left_data{
		margin-bottom: 50px;
	}
	#working .s_03 .img{
		max-width: 250px;
		width: 100%;
		margin: 0 auto;
	}

	#sdgs .top_img{
		margin-bottom: 30px;
	}
	#sdgs_list > li:not(:last-child){
		margin-bottom: 60px;
	}
	#sdgs_list .flex_container{
		display: block;
	}
	#sdgs_list .flex_container h5 {
		text-align: center;
	}
	#sdgs_list .flex_container .img{
		width: 100%;
		margin: 0 auto 20px;
	}
	#sdgs_list .flex_container .txt{
		width: 100%;
	}
	#sdgs_list .flex_container.--column2 .txt{
		width: 100%;
	}
	#sdgs_list .img_list{
		margin-top: 20px;
	}
	#sdgs_list .img_list ul li{
		width: 48%;
		margin-bottom: 20px;
	}
	#sdgs_list .img_list .note{
		margin-top: 0;
	}
}

@media screen and (max-width:400px) {
	#kouken .img_list li{
		float: none;
		width: 100%;
		margin: 30px auto;
	}
	#kouken .img_list li:nth-child(3n),
	#kouken .img_list li:nth-child(even){
		margin: 30px auto;
	}
	
	#working .s_01 .img_list {
		max-width: 300px;
		width: 100%;
	}
	#working .s_01 .img_list li{
		width: 48%;
		margin-right: 2%;
	}
	#working .s_01 .img_list li:nth-child(2) {
		margin-right: 0;
	}
	#working .s_01 .img_list li:nth-child(3) {
		margin-left: 25.6%;
		margin-right: 25.6%;
	}
}