@charset "utf-8";
:root {
	--radius-base: 10px;
}

.keyVisual_content .innerBox .figure{
	background: url("../img/keyvisual.jpg") no-repeat center top / cover;
}

.keyVisual_content .keyVisual_title span{
	margin-top: 170px;
	line-height: 1.2;
}

.keyVisual_content .keyVisual_title span::before{
	background: url("../img/p_message_blue.png") no-repeat center top / contain;
	max-width: 427.5px;
	width: 100%;
	aspect-ratio: 855/267;
	bottom: 1.5em;
}

.cnt-flex{
	display: flex;
	justify-content: space-between;
	gap: 60px;
}
.cnt-flex.reverse{
	flex-direction: row-reverse;
}

[id^="sec_"] .cnt-flex .txtBox{
	font-size: 18px;
	text-align: left;
	max-width: 800px;
	width: 57%;
}
	[id^="sec_"] .cnt-flex .txtBox p{
		line-height: 1.889;
	}
	[id^="sec_"] .cnt-flex .txtBox p + p{
		margin-top: 1em;
	}
	[id^="sec_"] .cnt-flex .txtBox .sign{
		font-size: 20px;
		font-weight: 500;
	}

[id^="sec_"] .cnt-flex figure{
	overflow: hidden;
	max-width: 542px;
	width: 43%;
}

#sec_message-top{
	background: #dac4f5;
	border-bottom: solid 1px #000;
}
	#sec_message-top .cnt-flex{
		align-items: stretch;
	}
		#sec_message-top .txtBox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
		}
			#sec_message-top .txtBox .inner{
				padding: 40px 0 70px;
				width: 100%;
			}

		#sec_message-top figure{
			border-right: solid 1px #000;
			border-left: solid 1px #000;
		}
			#sec_message-top figure img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

#sec_message{
	padding: 100px 0 170px;
}

	#sec_message .cnt-flex{
		align-items: flex-start;
	}

	#sec_message .cnt-flex + .cnt-flex{
		margin-top: 70px;
	}

		#sec_message .cnt-flex .txtBox{
			padding-bottom: 30px;
		}
			#sec_message .cnt01 .txtBox{
				background: url("../img/p_motivation.png") no-repeat right bottom / 48%;
			}
			#sec_message .cnt02 .txtBox{
				background: url("../img/p_safety.png") no-repeat right bottom / 31%;
			}
			#sec_message .cnt03 .txtBox{
				background: url("../img/p_work Environment.png") no-repeat right bottom / 61%;
			}

			#sec_message .cnt-flex .hd04{
				padding-top: 1em;
			}

		#sec_message .cnt-flex figure{
			aspect-ratio: 540/340;
			border-radius: var(--radius-base);
			border: solid 1px #000;
		}

[id^="sec_"] .cnt01 .hd04 .line{
	background-image: linear-gradient(0deg, #a0d8ef 0.725em, transparent 0.725em);
}
[id^="sec_"] .cnt02 .hd04 .line{
	background-image: linear-gradient(0deg, #fff3b8 0.725em, transparent 0.725em);
}
[id^="sec_"] .cnt03 .hd04 .line{
	background-image: linear-gradient(0deg, #f9cac7 0.725em, transparent 0.725em);
}



@media screen and (max-width: 1024px){
	.keyVisual_content .innerBox .keyVisual_title{
		font-size: clamp(14px,5.5vw,54px);
	}
	.keyVisual_content .keyVisual_title span{
		margin-left: 20px;
	}
	.keyVisual_content .keyVisual_title span::before{
		left: -0.2em;
	}
	
	#sec_message .cnt-flex{
		flex-direction: column-reverse;
		align-items: center;
	}
	#sec_message .cnt-flex .txtBox,
	#sec_message .cnt-flex figure{
		width: 100%;
	}
	#sec_message .cnt-flex .txtBox{
		max-width: 680px;
	}
	#sec_message .cnt-flex .hd04{
		padding: 0;
	}
	#sec_message .cnt-flex + .cnt-flex{
		margin-top: 40px;
	}
	#sec_message .cnt-flex .txtBox{
		padding-bottom: 100px;
	}
	
}
@media screen and (max-width: 768px){
	:root {
		--radius-base: 5px;
		--font-hd04: clamp(14px,7.5vw,31px);
	}
	
	.keyVisual_content .innerBox .keyVisual_title{
		font-size: 7.03125vw;
	}
	
	.keyVisual_content .keyVisual_title span{
		margin-top: 0;
		margin-bottom: 
		margin-left: 7.8125vw;
	}
	.keyVisual_content .keyVisual_title span::before{
		left: -5.599vw;
		width: 62%;
	}
	.cnt-flex,
	.cnt-flex.reverse{
		flex-direction: column-reverse;
	}
	.cnt-flex{
		gap: 9vw;
	}
	
	[id^="sec_"] .cnt-flex .txtBox,
	[id^="sec_"] .cnt-flex figure{
		width: 100%;
	}
	
	[id^="sec_"] .cnt-flex .txtBox{
		max-width: 542px;
	}
		[id^="sec_"] .hd04{
			font-size: var(--font-hd04);
		}
		[id^="sec_"] .cnt-flex .txtBox p{
			font-size: 15px;
		}
	
	[id^="sec_"] .cnt-flex .txtBox .sign{
		font-size: 18px;
	}
	
	#sec_message-top .cnt-flex{
		margin: 0 -10px;
		gap: 0;
	}
	#sec_message-top .txtBox{
		border-top: solid 1px #000;
		padding: 0 10px;
		max-width: inherit;
	}
	#sec_message-top figure{
		border: none;
		margin: 0 auto;
	}
	
	#sec_message{
		padding: 60px 0;
	}
	#sec_message .cnt-flex .txtBox{
		padding-bottom: 70px;
		max-width: 542px;
	}
	#sec_message .txtBox .ttl{
		font-size: clamp(14px,7.6vw,31px);
	}
	
	#sec_message .cnt01 .txtBox{
		background-size: 75%;
	}
	#sec_message .cnt02 .txtBox{
		background-size: 50%;
	}
	#sec_message .cnt03 .txtBox{
		background-size: 98%;
	}
}