@charset "UTF-8";
/* CSS Document */

main#main article div.bg{
	background-image: url("../img/main.webp");
	background-position: center center;
}

@media screen and (max-width: 768px) {
	main#main article div.bg{
		background-image: url("../img/main_sp.webp");
		background-position: center center;
	}
}



/*************************************************** section top ***************************************************/


#section_top{
	padding-top: 130px;
	padding-bottom: 150px;
}

.stitle{
	line-height: 1.2;
}

.stxt {
	font-size: 16px;
	text-align: center;
	padding: 30px 0 100px;
	line-height: 2;
}

.inner {
	width: 84%;
	max-width: 1200px;
	margin: 0 auto;
}

#section_top article{
	padding: 70px;
	background-color: #FFF;
	max-width: 1200px;
	margin: 0 auto;
}


@media screen and (max-width: 1400px) {
	#section_top article{
		padding: 5vw;
	}
	
}

@media screen and (max-width: 1190px) {
	#section_top{
	  padding: 13% 0%;
	}
}

@media screen and (max-width: 767px) {
	#section_top{
		padding: 15% 0%;
	}

	.stxt {
		text-align:justify;
		text-justify:distribute;
		padding: 30px 0 60px;
	}

	
}

@media screen and (max-width: 640px) {
	#section_top article figure{
		display: block;
		overflow-x: scroll;
		padding-bottom: 10px;
		scroll-snap-type: x mandatory;
		scroll-snap-align: center;
		
	}

	#section_top article figure img{
		display: block;
		width: 580px;
		max-width: none;
		scroll-snap-align: center;
	}

	#section_top article p{
		font-size: 12px;
		width: 100%;
		padding-top: 10px;
		text-align: center;
		background-color: #002b62;
		color: #FFF;
		padding: 5px;
		line-height: 1;
	}
}

@media screen and (max-width: 1190px) {
	#section_top{
	  padding: 18% 0%;
	}
}


@media screen and (max-width: 360px) {
	.stitle {
	  font-size: 20px;
	}
}

/*************************************************** section top ***************************************************/


/*************************************************** careerbtbox ***************************************************/


#careerbtbox{
	position: relative;
	min-height: 500px;
}

#careerbtbox > div{
	position: relative;
	z-index: 10;
	padding-top: 130px;
	color: #FFF;
}

@media screen and (max-width: 1190px) {
	#careerbtbox > div{
		padding-top: 13%;
	}
}

@media screen and (max-width: 767px) {
	#careerbtbox > div{
		padding-top: 15%;
	}
}

@media screen and (max-width: 480px) {
	#careerbtbox > div{
		padding-top: 18%;
	}
}

#careerbtbox::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: calc(100% - 100px) ;
	background-color: #002b62;
	z-index: 1;
}

#careerbtbox .categorybox{
	margin-bottom: 250px;
}

#careerbtbox .categorybox h2{
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	padding-bottom: 40px;
	line-height: 1;
}

#careerbtbox .categorybox p{
	padding-bottom: 75px;
	text-align:justify;
	text-justify:distribute;
}

#careerbtbox .buttonbox{
	position: relative;
}


#careerbtbox .buttonbox article{
	position: relative;
	display: flex;
	width: 84%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 100;
}



#careerbtbox .buttonbox .bgs{
	position: absolute;
	z-index: 10;
	width: 100%;
	height: calc(100% - 100px) ;
	top: 100px;
	width: 95%;
	max-width: calc(50% + 700px) ;
}

#careerbtbox #manager_box .buttonbox .bgs{
	right: 0;
}

#careerbtbox #rofessional_box .buttonbox .bgs{
	left: 0;
}


@media screen and (max-width: 767px) {

	#careerbtbox .categorybox h2{
		font-size: 30px;
		font-weight: 700;
		text-align: center;
		padding-bottom: 25px;
	}

	#careerbtbox .buttonbox .bgs{
		position: absolute;
		z-index: 10;
		width: 100%;
		height: calc(100% - 50px) ;
		top: 50px;
		width: 95%;
		max-width: calc(50% + 700px) ;
	}
	

}


@media screen and (max-width: 480px) {
	#careerbtbox .categorybox h2{
		font-size: 25px;
	}
}
















#careerbtbox .buttonbox article ul li{
	position: relative;
	width: 45%;
	margin-bottom: 150px;
}

#careerbtbox .buttonbox article ul li a figure{
	position: relative;
	z-index: 1;
	width: 65%;
	margin: 0 0 0 auto;
	overflow: hidden;
}

#careerbtbox .buttonbox article ul li a figure img{
	transition: all 500ms 0s ease;
	position: relative;
	z-index: 1;
	display: inline-block;
}

.pc #careerbtbox .buttonbox article ul li a:hover figure img{
	transform: scale(1.1);
}

#careerbtbox .buttonbox article ul li a figure::before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	
	z-index: 10;
}

.pc #careerbtbox .buttonbox article ul li a figure::before{
	transition: all 500ms 0s ease;
	opacity: .35;
}

.pc #careerbtbox .buttonbox article ul li a:hover figure::before{
	opacity: .0;
}

.sp #careerbtbox .buttonbox article ul li a figure::before{
	transition: all 500ms 0s ease;
	opacity: .4;
}

#careerbtbox .buttonbox article ul li a{
	position: relative;
	display: block;
}

#careerbtbox .buttonbox article ul li a div{
	position: absolute;
	z-index: 200;
	color: #FFF;
	line-height: 1.4;
	letter-spacing: 0;
	top: 75%;
	text-shadow: 1px 1px 2px rgb(0, 0, 0, 0.4);
}




#careerbtbox .buttonbox article ul li div h3{
	font-size: 24px;
	padding-bottom: 15px;
	
}

#careerbtbox .buttonbox article ul li div span{
	display: inline-block;
}

#careerbtbox .buttonbox article ul li div p{
	font-size: 14px;
}





@media screen and (max-width: 1200px) {

	#careerbtbox .categorybox p{
		padding-bottom: 50px;
	}

	#careerbtbox .categorybox{
		margin-bottom: 15vw;
	}

	

	#careerbtbox .buttonbox article ul li{
		width: 47%;
	}
	
	#careerbtbox .buttonbox article ul li a figure{
		width: 70%;
	}
	
	#careerbtbox .buttonbox article ul li div h3{
		font-size: 2vw;
		padding-bottom: 15px;
	}
	
	#careerbtbox .buttonbox article ul li div span{
		display: inline-block;
	}
	
	

}

@media screen and (max-width: 1000px) {

	#careerbtbox .buttonbox article ul li{
		margin-bottom: 15vw;
	}

	#careerbtbox .buttonbox article ul li div p{
		font-size: 1.4vw;
	}

}


@media screen and (max-width: 767px) {
	

	#careerbtbox .buttonbox article ul li{
		position: relative;
		width: 100%;
		max-width: 540px;
		margin: 0 auto;
	}

	#careerbtbox .buttonbox article ul li a figure{
		width: 85%;
	}


	#careerbtbox .buttonbox article ul li a div{
		position: relative;
		z-index: 200;
		color: #FFF;
		line-height: 1.4;
		letter-spacing: 0;
		top: auto;
		text-shadow: 1px 1px 2px rgb(0, 0, 0, 0.4);
		margin-top: -50px;
	}


	#careerbtbox .buttonbox article ul li div h3{
		font-size: 24px;
		padding-bottom: 15px;
	}
	
	#careerbtbox .buttonbox article ul li div span{
		display: inline-block;
	}
	
	#careerbtbox .buttonbox article ul li div p{
		font-size: 14px;
	}
}

@media screen and (max-width: 560px) {
	
	#careerbtbox .buttonbox article ul li div h3{
		font-size: 4.25vw;
		padding-bottom: 15px;
	}

	#careerbtbox .buttonbox article ul li div p{
		font-size: 12px;
	}

}