@charset "utf-8";
.tech_intro_box{
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	align-items: center;
	gap: 30px;
	padding: 60px 0 75px;
	margin-top: 70px;
}
.tech_intro_box::before{
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - var(--vw-50));
	width: var(--vw-100);
	height: 100%;
	background: url(/ja/recruit/img/common/bg.jpg) no-repeat center top/cover;
	z-index: -1;
}
.tech_intro_box::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: calc(50% - var(--vw-50));
	width: var(--vw-100);
	height: 60px;
	background: url(/ja/recruit/img/technology/pic_fukidashi.svg) no-repeat center/cover;
	z-index: 1;
}
.tech_intro_ttl{
	padding: 0;
	margin: 0 0 40px;
}
.tech_intro_ttl span{color:#CC0000;}
.tech_intro_ttl::before, .tech_intro_ttl::after{all: unset;}
.tech_intro_txt p{
	font-weight: 500;
	font-size: 1.7rem;
}
.tech_intro_img{padding-bottom: 20px;}
.tech_col{
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 30px 0;
	padding-top: 65px;
}
.tech_col_item{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 20px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ddd;
}
.tech_col_item:nth-child(odd){padding-right: 20px;}
.tech_col_item:nth-child(even){padding-left: 20px;}
.tech_col_item:nth-child(odd)::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: calc(100% - 30px);
	background: #ddd;
}
.tech_col_img{order: -1;}
.tech_col_head{
	display: flex;
	flex-direction: column-reverse;
}
.tech_col_ttl{
	font-size: 2.1rem;
	line-height: 3rem;
	padding: 0;
	margin: 0 0 8px;
}
.tech_col_ttl::before{display: none;}
.tech_col_label{
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 2.4rem;
	margin-bottom: 6px;
	color: #CC0000;
}
.tech_col_label span{
	flex-shrink: 0;
	display: inline-block;
	width: 64px;
	font-size: 1.1rem;
	line-height: 1.6rem;
	color: #fff;
	padding: 2px 0 3px;
	background: #CC0000;
	border-radius: 3px;
	text-align: center;
}
.tech_col_txt{
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 2.56rem;
	margin-bottom: 12px;
}
.tech_h2{
	font-size: 3rem;
	line-height: 4.4rem;
	padding: 0;
	margin: 50px 0 25px;
	text-align: center;
}
.tech_h2::before, .tech_h2::after{all: unset;}
.tech_col_list{margin: 0;}
.tech_col_list li{
	font-size: 1.5rem;
	line-height: 2.4rem;
}
.tech_col_list li:last-child{margin-bottom: 0;}
.quality_col{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 30px;
	margin: 30px 0;
}

@media screen and (max-width:1024px){
.tech_intro_box{
	padding: 60px 0 55px;
	margin-top: 60px;
}
.tech_intro_box::after{height: 40px;}
.tech_intro_ttl{
	font-size: 2.4rem;
	line-height: 3.84rem;
	margin: 0 0 15px;
}
.tech_intro_txt p{font-size: 1.4rem;}
.tech_intro_img{padding-bottom: 10px;}
.tech_col{
	grid-template-columns: repeat(2,1fr);
	gap: 25px 0;
	padding-top: 50px;
}
.tech_col_item{
	grid-template-columns: 120px auto;
	gap: 10px;
	padding-bottom: 20px;
}
.tech_col_item:nth-child(odd)::after{height: calc(100% - 20px);}
.tech_col_ttl{
	font-size: 1.6rem;
	line-height: 2.4rem;
	margin-bottom: 6px;
}
.tech_col_label{
	font-size: 1.3rem;
	line-height: 1.9rem;
	margin-bottom: 4px;
}
.tech_col_label span{
	width: 60px;
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 3px 0 2px;
}
.tech_col_txt{
	font-size: 1.3rem;
	line-height: 1.9rem;
	margin-bottom: 9px;
}
.tech_col_list li{
	font-size: 1.3rem;
	line-height: 2.34rem;
	margin-bottom: 0;
}
.tech_h2{
	font-size: 2.4rem;
	line-height: 3.84rem;
	margin: 50px 0 20px;
}
}

@media screen and (max-width:767px){
.tech_intro_box{
	grid-template-columns: repeat(1,1fr);
	gap: 20px;
	padding: 50px 0;
	margin-top: 45px;
}
.tech_intro_box::after{height: 30px;}
.tech_intro_ttl{text-align: center;}
.tech_intro_txt p{text-align: center;}
.tech_intro_img{
	max-width: 500px;
	margin: 0 auto;
}
.tech_col{
	grid-template-columns: repeat(1,1fr);
	padding-top: 40px;
}
.tech_col_item:nth-child(odd){padding-right: 0;}
.tech_col_item:nth-child(even){padding-left: 0;}
.tech_col_item:nth-child(odd)::after{display: none;}
.tech_h2{margin: 40px 0 20px;}
.quality_col{
	grid-template-columns: repeat(2,1fr);
	gap: 13px;
	margin: 20px 0;
}
}