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

/*///////////////////////////////////////////////////////////////////////////
 イントロ
///////////////////////////////////////////////////////////////////////////*/

/*イントロ（スタート時）*/
.JS_intro3 {
	width: 100%;
	height: 100%;
	position: fixed;
	inset: 0;
	background: url(../../img/recruit/op_bg.jpg) center center / cover no-repeat;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 9999;
	animation: scaleDown 1.8s ease forwards;
	overflow: hidden;
	transition: 1.5s ease;
}

 .JS_intro3_human {
	position: absolute;
	inset: 0;
	background-image: url(../../img/recruit/top_firstview_02_before.png);

	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	z-index: 1;
	margin:0;
	transition: 1.5s ease;
}

@media (min-width: 960px) {
	.JS_intro3_human {
		background-position: top 0vw center;
		background-size: auto 1300px;
	}
}

@media (max-width: 959px) {
	.JS_intro3_human {
		/*background-position: top 5vw center;*/
		background-position: bottom -20vw center;
		background-size: auto 550px;
	}
}


/*イントロ　フェーズ1（切り替え時）*/
.JS_intro3.phase1 {
	position: absolute;
	height:770px;
    top: 0;
    left: 0;
    z-index: 3;
	display:block;
	background:none;
	opacity: 1;
}

@media (min-width: 960px) {
	.JS_intro3.phase1 {
		min-height: 770px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
}

@media (max-width: 959px) {
	.JS_intro3.phase1 {
		height: 520px;
	}
}

.JS_intro3.phase1 .JS_intro3_human{
	animation:none;
}

@media (min-width: 960px) {
	.JS_intro3.phase1 .JS_intro3_human {
		width: 980px;
		height:770px;
		margin: 0 auto;
		background-position: bottom 0px right 20px;
		background-size: auto 750px;
	}
}

@media (max-width: 959px) {
	.JS_intro3.phase1 .JS_intro3_human {
		width : 100%;
		height: 100%;
		padding: 0 20px;
		background-position: bottom 0px left -33vw;
		background-size: auto 120vw;
	}
}
/*イントロ　フェーズ2（イントロ終了時）*/
.JS_intro3.phase1.phase2 .JS_intro3_human{
	opacity: 0;
}

/*イントロ　テキストアニメーション*/
.JS_intro_ttl {
  color: #fff;
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 6.5vw;
  font-weight: 700;
  margin: 0;
  z-index: 3;
  position: relative;
}
.JS_intro_ttl span {
  display: block;
  transform : translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
}
.JS_intro_ttl.-visible,
.JS_intro_ttl.-visible span {
  transform: translate(0, 0);
}
.JS_intro3.phase1 .JS_intro_ttl{
	display:none;
}









/*///////////////////////////////////////////////////////////////////////////
 ファーストビュー（イントロ終了後に表示するコンテンツ）
///////////////////////////////////////////////////////////////////////////*/
.firstview {
	position: relative;
	overflow: hidden;
	animation: bgscroll 5000s linear infinite;

	background-image: url(../../img/recruit/top_firstview_01.jpg);
	background-size: cover;
	background-repeat: repeat-x;
}

@-webkit-keyframes bgscroll {
  0% {background-position: 10000vw 0;}
  100% {background-position: 0 0;}
 }

 @keyframes bgscroll {
  0% {background-position: 10000vw 0;}
  100% {background-position: 0 0;}
 }

@media (min-width: 960px) {
	.firstview {
		min-height: 770px;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		background-position: bottom center;

	}
}
@media (max-width: 959px) {
	.firstview {
		height: 520px;
		background-position: bottom left;
	}
}

.firstview_in{
	position:relative;
	z-index: 2;
}

.firstview_human{
	transition: opacity 2s ease;
	/*transition-delay: 0.5s;*/ /* 時差 */
	position:absolute;
	opacity:0;
	bottom:0;
	right:0;

	background-image: url(../../img/recruit/top_firstview_02_after.png);
	background-repeat: no-repeat;
}

@media (min-width: 960px) {
	.firstview_in{
		width: 980px;
		margin: 0 auto;
	}

	.firstview_human{
		z-index:3;
		width: 980px;
		height: 720px;

		background-position: bottom right 20px;
		background-size: auto 750px;
	}
}
@media (max-width: 959px) {
	.firstview_in{
		width : 100%;
		height: 100%;
		padding: 0 20px;
		position: relative;
	}

	.firstview_human{
		width : 100%;
		height: 100%;

		background-position: bottom left -33vw;
		background-size: auto 120vw;
	}
}
/*イントロパートとの連動アニメーション*/
.firstview_human.disp{ opacity:1; }





#RECRUIT .firstview_txt{
	margin-top: 30px;
	color: var(--clr-g-dark);
	text-align: left;
}
@media (min-width: 960px) {
	#RECRUIT .firstview_txt{
		margin-top: 30px;
	}
}
@media (max-width: 959px) {
	#RECRUIT .firstview_txt{
		margin-top: 20px;
		margin-left: 38vw/*140px*/;
	}
}
#RECRUIT .firstview_txt_dl>dt{
	font-weight: bold;
	line-height: 1.2;
}
@media (min-width: 960px) {
	#RECRUIT .firstview_txt_dl>dt{
		font-size: 2.2rem;
	}
}
@media (max-width: 959px) {
	#RECRUIT .firstview_txt_dl>dt{
		font-size: 1.2rem;
	}
}
#RECRUIT .firstview_txt_dl>dd{
	margin-top: 5px;
}

@media (max-width: 959px) {
	#RECRUIT .firstview_txt_dl>dd{
		font-size: 1.0rem;
	}
	#RECRUIT .firstview_txt_dl>dd br{
		display: none;
	}
}

@media (min-width: 960px) {
	#RECRUIT .firstview_txt_dl + .firstview_txt_dl{
		margin-top: 20px;
	}
}
@media (max-width: 959px) {
	#RECRUIT .firstview_txt_dl + .firstview_txt_dl{
		margin-top: 10px;
	}
}

@media (min-width: 960px) {
	#RECRUIT .firstview_lead{
		padding-top: 100px;
	}
}
@media (max-width: 959px) {
	#RECRUIT .firstview_lead{
		padding-top: 70px;
	}
}
#RECRUIT .firstview_lead_ul>li{
	box-sizing: border-box;
}
@media (min-width: 960px) {
	#RECRUIT .firstview_lead_ul>li{
		width : 430px;
	}
}
@media (max-width: 959px) {
	#RECRUIT .firstview_lead_ul>li{
		width : 210px;
	}
	#RECRUIT .firstview_lead_ul>li:nth-child(1) { margin-left: 30vw;}
	#RECRUIT .firstview_lead_ul>li:nth-child(2) { margin-left: 30vw; margin-top: 5px;}
}
#RECRUIT .firstview_lead_ul>li img{
	width : 100%;
	height: auto;
}