@charset "UTF-8";

/* -----------------------------------------------------------
   WORK
------------------------------------------------------------*/
#contents-visual .ttl-cover h1.ttl{
	padding-top: 51.83%;
}
.cont-2nd #job{
	background-color: #2F72FC;
}
.cont-2nd #job .ttl-box{
	margin-bottom: 128px;
}
#job .ttl-box h2.ttl{
	background-image: url(../work/img/ttl_job.png);
}

#job .job-box{	
	margin-right: auto;
	margin-bottom: 200px;
	position: relative;
	display: flex;
	align-items: center;
}

#job .job-box figure{
	content: "";
	display: block;
	width:max(850px,73%);
	aspect-ratio: 850 / 580;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	background-size: cover;
	z-index: 1;
	border: 1px solid #000;
}
#job .job-box figure img{
	
	width: 100%;
	height: 100%;
	background-size: cover;
}
#job .job-box.job1 figure{background-image: url(../work/img/job_1.jpg);}
#job .job-box.job2 figure{background-image: url(../work/img/job_2.jpg);}
#job .job-box.job3 figure{background-image: url(../work/img/job_3.jpg);}
#job .job-box.job4 figure{background-image: url(../work/img/job_4.jpg);}



#job .job-box .txt-box{
	width: min(552px,47vw);
	box-sizing: border-box;
	padding: 30px 60px 60px;
	border: 1px solid #000;
	background-color: #FFF;
	position: relative;
	z-index: 2;
}
#job .job-box.job2 .txt-box{
	margin-left: auto;
}
#job .job-box.job4 .txt-box{
	margin-left: auto;
}

#job .job-box .txt-box h3{
	font-size: 3.0rem;
	text-align: center;
	display: block;
	border-bottom: 1px solid #000;
	padding-bottom: 1em;
	margin-bottom: 1em;
}
#job .job-box .txt-box p{
	font-size: 1.8rem;
	line-height: 2.0;
}
#tour .ttl-box .toptxt-box{
	order: 1;
}
#tour .ttl-box h2.ttl{
	order: 2;
	background-image: url(../work/img/ttl_tour.png);
}
#tour .ytube{
	width: 80%;
	padding-top: calc(56.25% * 0.8);
	margin: 48px auto;
	position: relative;
}
#tour .ytube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media all and (min-width: 768px) {
	#job .job-box.job1 figure{ right: -110px;}
	#job .job-box.job2 figure{ left: -110px;}
	#job .job-box.job3 figure{ right: -110px;}
	#job .job-box.job4 figure{ left: -110px;}
}
@media all and (max-width: 767px) {
	main > .inner{
		padding: 10vw 0 16vw;
	}
	.cont-2nd #job{
		margin-bottom: 0;
	}
	.cont-2nd #job .ttl-box{
		width: 94%;
		margin-bottom: 7.6vw;
	}
	#job .job-box{
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 76vw;
		margin-bottom: 15vw;
	}
	#job .job-box:last-child{
		margin-bottom: 0;
	}
	#job .job-box figure{		
		width:84%;
		aspect-ratio: 704 / 750;
		position: absolute;
		top: 0;
		transform: none;
		-webkit-transform: none;
		-ms-transform: none;
		
	}
	#job .job-box.job1 figure,
	#job .job-box.job3 figure{
		right: 0;
	}
	#job .job-box.job2 figure,
	#job .job-box.job4 figure{
		left: 0;
	}

	#job .job-box.job1 figure{background-image: url(../work/img/job_1_smp.jpg)}
	#job .job-box.job2 figure{background-image: url(../work/img/job_2_smp.jpg)}
	#job .job-box.job3 figure{background-image: url(../work/img/job_3_smp.jpg)}
	#job .job-box.job4 figure{background-image: url(../work/img/job_4_smp.jpg)}

	#job .job-box .txt-box{
		width: 90%;		
		padding: 7%;
	}
	#job .job-box .txt-box h3{
		font-size: 1.9rem;
		
	}
	#job .job-box .txt-box p{
		font-size: 1.5rem;
		line-height:1.8;
	}
	#tour .ytube{
		width: 100%;
		padding-top: calc(56.25% * 1.0);
		height: auto;
		margin: 12vw auto 0;
	}
	
}