@charset "utf-8";

.business .title_area{background-image:url(/recruit/newgrads/img/common/h1_business.jpg);}
.main_business{
	max-width:600px;
	margin:0 auto;
}
.business_warp{
	margin:100px 0 0;
}
.business_bg{
	width:var(--vw-100);
	height:500px;
	margin:0 calc(50% - var(--vw-50));
	overflow:hidden;
}
.business_bg img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
}
.business_box{
	position:relative;
	padding:75px 100px 0;
	margin:-80px 0 0;
	background:#fff;
	z-index:1;
}
.business_h3{
	font-size:3.6rem;
	letter-spacing:.36px;
	line-height:3.24rem;
	padding-bottom:19px;
	margin-top:0;
}
.business_h3::after{
	position:relative;
	content:attr(data-en);
	font-family:var(--font-Syncopate);
	font-size:1.8rem;
	letter-spacing:0;
	line-height:4rem;
	font-weight:bold;
	margin-left:15px;
	top:-1px;
}
.business_h4{
	font-family:var(--font-NotoSerif);
	font-size:2.4rem;
	letter-spacing:0;
	line-height:5.4rem;
	padding:0;
	margin:38px 0 21px;
}
.business_h4::before{display:none;}
.business_box p{
	margin-bottom:27px;
}
.works_box{
	display:grid;
	grid-template-columns:repeat(auto-fit,calc((100% - 40px)/3));
	grid-gap:37px 20px;
	margin:55px 0 0;
}
.works_box p{
	font-size:1.2rem;
	letter-spacing:.96px;
	line-height:1.8rem;
	text-align:center;
	margin:10px 0 0 !important;
}
.business_warp + h2{margin-top:100px;}


@media screen and (min-width:768px) and (max-width:1024px){
.main_business{max-width:500px;}
.business_bg{height:365px;}
.business_box{padding:55px 40px 0;}
.business_h3{
	font-size:3.3rem;
	letter-spacing:.33px;
}
.business_h3::after{font-size:1.6rem;}
.business_h4{
	font-size:2.2rem;
	line-height:4.5rem;
}
.business_box p{margin-bottom:23px;}
.works_box{margin:45px 0 0;}
}


@media screen and (max-width:767px){
.business_warp{margin:80px 0 0;}
.business_bg{height:230px;}
.business_box{
	padding:36px 20px 0;
	margin:-40px 0 0;
}
.business_h3{
	font-size:3rem;
	letter-spacing:.3px;
	padding-bottom:5px;
	padding:0 6px 5px;
	border-color:#333;
}
.business_h3::after{
	display:block;
	font-size:1.4rem;
	margin:5px 0 0;
}
.business_h4{
	font-size:2rem;
	line-height:3rem;
	margin:33px 0 18px;
}
.business_box p{margin-bottom:20px;}
.works_box{
	grid-template-columns:repeat(auto-fit,calc((100% - 12px)/2));
	grid-gap:30px 12px;
	margin:22px 0 0;
}
.business_warp + h2{margin-top:70px;}
}