@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ----------------------------------------------------- */
/*                                   interview common                                  */
/* ----------------------------------------------------- */

.interview.st .recruit_visual {
	width: 100%;
	padding-top: 50px;
	animation: fadeIn 0.8s ease 0.5s 1 normal backwards;
}

.recruit_visual__inner {
	background: url("/assets/img/recruit/interview/border_diagonal.png") repeat-x bottom;
	padding-bottom:270px;
}

.interview .recruit_visual__title {
	height: 510px;
}
@media screen and (max-width:679px) {
	.interview .recruit_visual__title {
		height: 374px;
	}
}

.interview .recruit_visual::after {
	position:relative;
	z-index:150;
	content: '';
	display: block;
	border-bottom: 270px solid #FFF; /* 三角を白にする */
	margin-top:-270px;
	border-left: calc(100vw + 450px) solid transparent;
}

@media screen and (max-width:679px) {
	.interview .recruit_visual::after {
		content: '';
		display: block;
		border-bottom: 152px solid #FFF; /* 三角を白にする */
		border-left: calc(100vw + 225px) 100vw solid transparent;
	}
}

.employee_voice .recruit_visual__title .img02 {
    overflow: hidden;
    position: absolute;
    top: 93px;
    left: 439px;
}
@media screen and (max-width:679px) {
	.employee_voice .recruit_visual__title .img02 {
		overflow: hidden;
		position: absolute;
		top: 103px;
		left: 130px;
	}
}

.recruit_visual__title .img03.employee_voice {
	position: absolute;
	top: 12px;
	left: 82px;
	width: 734px;
}
.recruit_visual__title .img03.employee_voice img {
	width: 734px;
}
@media screen and (max-width:679px) {
	.recruit_visual__title .img03.employee_voice {
		top: 64px;
		left: 15px;
		width: 302px;
	}
	.recruit_visual__title .img03.employee_voice img {
		width: 302px;
	}
}

.interview .recruit_visual__title .img04 {
	animation: fadeIn_bottom 0.5s ease 0.1s 1 normal backwards;
	animation-delay: 2.1s;
	position: absolute;
	top: 335px;
	left: 42px;  
	z-index: 200;
	width: 250px;
}
.interview .recruit_visual__title .img04  dl{
	text-align: left;
}
.interview .recruit_visual__title .img04  dt{
	font-size: 90px;
	font-family: "Outfit", sans-serif;
    font-weight: 500;
}
.interview .recruit_visual__title .img04  dd span{
	display: inline-block;
	background: #fff;
	padding: 10px 12px;
}
.interview .recruit_visual__title .img04  span:first-child{
	font-size: 24px;
	font-weight: bold;
}
.interview .recruit_visual__title .img04  span:last-child{
	font-size: 16px;
}

@media screen and (max-width:679px) {
	.interview .recruit_visual__title .img04 {
		top: 270px;
		left: -20px;  
		width: 150px;
	}
	.mac .interview .recruit_visual__title .img04,
	.iphone .interview .recruit_visual__title .img04,
	.android .interview .recruit_visual__title .img04{
		left: 0;  
	}
	.interview .recruit_visual__title .img04  dt{
		font-size: 50px;
	}
	.interview .recruit_visual__title .img04  span:first-child{
		font-size: 14px;
	}
	.interview .recruit_visual__title .img04  span:last-child{
		font-size: 11px;
	}
}

.interview .recruit_visual__title .img05{
	animation: fadeIn_bottom 0.5s ease 0.1s 1 normal backwards;
	animation-delay: 2.4s;
	text-align: center;
	position: absolute;
	z-index: 100;
}
@media screen and (max-width:679px) {
	.interview .recruit_visual__title .img05 img{ width: 100%;}	
}


/* ----- aboutus ----- */

 .interview_aboutus .interview_aboutus_inner{
    text-align: center;
    max-width: 1140px;
    padding: 20px 0 50px 0;
    margin: 0 auto;
}
@media screen and (max-width:679px) {
   .interview_aboutus .interview_aboutus_inner{
    width: 100%;
    padding: 10px 20px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: left;
  }
}

.interview_aboutus{
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .interview_aboutus .interview_aboutus_inner .aboutus_block {
    display: flex;
	flex-direction: row-reverse;
    justify-content: space-between;
    margin: 60px auto 0 auto;
  }
  .interview_aboutus .interview_aboutus_inner .aboutus_block .block {
    height: auto;
    text-align: left;
    position: relative;
  }
  .interview_aboutus .interview_aboutus_inner .aboutus_block .block.img {
    width: 400px;
	height: 315px;
    position: sticky;
	top: 110px !important;
	box-sizing: border-box;
  }
  .interview_aboutus .interview_aboutus_inner .aboutus_block .block.text {
    width: 678px;
  }

  .interview_aboutus .interview_aboutus_inner .aboutus_block .block img {
    max-width: 100%;
  }
  .interview_aboutus .interview_aboutus_inner .aboutus_block .block p {
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
  }
.interview_aboutus .interview_aboutus_inner .aboutus_block .block dl{
	margin-bottom: 30px;
}
.interview_aboutus .interview_aboutus_inner .aboutus_block .block dl:last-child{ margin: none;}

.interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	margin-bottom: 10px;
	font-size: 1.8rem;
	font-weight: bold;
	padding-left: 15px;
}

.interview_aboutus .interview_aboutus_inner .aboutus_block .block dd{
	line-height: 180%;
}

@media screen and (max-width:679px) {
	.interview_aboutus .interview_aboutus_inner .aboutus_block {
		display: block;
		width: 100%;
	    margin: 40px auto 0;
	}
	.interview_aboutus .interview_aboutus_inner .aboutus_block .block.img {
		width: 100%;
		height: auto;
		position: relative;
		top: 0 !important;
		text-align: center;
	}
	.interview_aboutus .interview_aboutus_inner .aboutus_block .block.text {
		width: 100%;
	}
	.interview_aboutus .interview_aboutus_inner .aboutus_block .block img {
		width: 100%;
		margin: 0 auto 30px;
	}
}


/* ----- schedule ----- */

.interview .schedule {
	width: 100%;
	background: #F0F0F0;
}
.interview .schedule::before{
    content: '';
    display: block;
	border-top: 65px solid #fff; /* 三角を白にする */
	border-left: 100vw solid transparent;
  }
.interview .schedule::after {
	content: '';
	display: block;
	border-bottom: 65px solid #FFEA00; /* 三角を黄色にする */
	border-left: 100vw solid transparent;
}
.interview .schedule .schedule_inner {
	text-align: center;
	width: 100%x;
	margin: 0 auto;
	padding: 30px 20px 60px 20px;
	box-sizing: border-box;
}

  .schedule .interview_schedule {
    width: 1140px;
    border: 2px solid #000;
    margin: 0 auto 30px auto;
    border-radius: 100px;
    padding: 90px 120px;
    background: #FFF;
    box-sizing: border-box;
  }
.schedule_time{
	display: flex;
	background-size: 3px;
}
.schedule_time li{
	flex: 1;
	margin-bottom: 30px;
	padding: 15px 0 15px 10px;
	font-size: 1.2rem;
}
.schedule_time li:first-child{
	background:  url(/assets/img/recruit/interview/schedule_dot.png) 0 0 repeat-y;
	background-size: 3px;
}
.schedule_time li:nth-child(n+2){
	background-image:  url(/assets/img/recruit/interview/schedule_arrow.png), url(/assets/img/recruit/interview/schedule_dot.png);
	background-repeat: no-repeat, repeat-y ;
	background-position: 0 50%, 3px 0;
	background-size: 10px, 3px;
}
.schedule_time li:last-child{
	background-image: url(/assets/img/recruit/interview/schedule_arrow.png), url(/assets/img/recruit/interview/schedule_dot.png), url(/assets/img/recruit/interview/schedule_dot.png);
	background-repeat: no-repeat, repeat-y, repeat-y;
	background-position: 0 50%, 3px 0, right 0;
	background-size: 10px, 3px, 3px;
}

.schedule_time span:first-child{
	font-size: 24px;
	margin-bottom: 10px;
	display: block;
	font-family: "Outfit", sans-serif;
	font-weight: 500;
}
.schedule_time span:last-child{
	color: #000;
	font-size: 14px;
}

.schedule_img{
	display: flex;
	justify-content: space-between;
}
.schedule_img div{ width: 430px; }
.schedule_img img{ width: 100%;}


@media screen and (max-width:679px) {
   .interview .schedule .schedule_inner{
		width: 100%;
		padding: 30px 20px;
		margin: 0 auto;
		box-sizing: border-box;
		text-align: center;
  }
	.schedule .interview_schedule {
		width: 100%;
		padding: 30px 28px;
		border-radius: 30px;
	}
	.schedule_time{
		display: block;
		text-align: left;
		margin-bottom: 20px;
	}
	.schedule_time li{
		margin: 0;
		padding: 20px 0 8px;
		font-size: 1.4rem;
		font-weight: bold;
	}
	.schedule_time li:first-child{
		background:  url(/assets/img/recruit/common_border.png) 0 0 repeat-x;
		background-size: 9px;
	}
	.schedule_time li:nth-child(n+2){
		background-image:  url(/assets/img/recruit/interview/schedule_arrow_02.png), url(/assets/img/recruit/common_border.png);
		background-repeat: no-repeat, repeat-x ;
		background-position: 50% 0, 0 3px;
		background-size: 32px, 9px;
	}
	.schedule_time li:last-child{
		background-image: url(/assets/img/recruit/interview/schedule_arrow_02.png), url(/assets/img/recruit/common_border.png), url(/assets/img/recruit/common_border.png);
		background-repeat: no-repeat, repeat-x, repeat-x;
		background-position: 50% 0, 0 3px, 0 bottom;
		background-size: 32px, 9px, 9px;
	}
	.schedule_time span:first-child{
		display: inline-block;
		width: 26%;
		font-size: 20px;
		vertical-align: top;
	}
	.iphone .schedule_time span:first-child{
		font-size: 18px;
	}
	.schedule_time span:last-child{
		display: inline-block;
		width: 74%;
		font-size: 14px;
		padding-top: 4px;
		vertical-align: top;
	}
	
	.schedule_img{
		display: block;
	}
	.schedule_img div{ width: 100%; }
	.schedule_img div:first-child{ margin-bottom: 10px;}
}


/* ----- message ----- */

.interview .message {
	width: 100%;
	background: #FFEA00;
}
.interview .message::after {
	content: '';
	display: block;
	border-bottom: 65px solid #FFF; /* 三角を白にする */
	border-right: 100vw solid transparent;
}
.interview .message .message_inner {
	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: 30px 20px 60px 20px;
	box-sizing: border-box;
}
@media screen and (max-width:679px) {
   .interview .message .message_inner{
		width: 100%;
		padding: 30px 20px;
		margin: 0 auto;
		box-sizing: border-box;
		text-align: center;
  }
}

.interview .message .message_inner .message_block {
    display: flex;
    justify-content: space-between;
    width: 900px;
    margin: 60px auto 0;
  }
.interview .message .message_inner .message_block .block {
    height: auto;
    text-align: left;
    position: relative;
  }
.interview .message .message_inner .message_block .block.text {
    width: 420px;
  }
.interview .message .message_inner .message_block .block.img {
    width: 410px;
  }

.interview .message .message_inner .message_block .block img {
    max-width: 100%;
  }
.interview .message .message_inner .message_block .block p {
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
  }

@media screen and (max-width:679px) {
	.interview .message .message_inner .message_block {
		display: block;
		width: 100%;
		margin: 30px auto 0;
	}
	.interview .message .message_inner .message_block .block.text {
		width: 100%;
	}
	.interview .message .message_inner .message_block .block.img {
		width: 100%;
		text-align: center;
	}
	.interview .message .message_inner .message_block .block.img img{
		width: 100%;
		margin: 0 auto 30px;
	}
	.interview .message .message_inner .message_block .block p {
		position: relative;
		top: 0;
		transform: none;
		margin-bottom: 30px;
	}
}

/* ------------------------------------------- */
/*                           interview st only                           */
/* ------------------------------------------- */

.interview.st .recruit_visual { background: #FF7676;}

.interview.st .recruit_visual__title .img02::before { background: #FF7676;}

.interview.st .recruit_visual__title .img05{
	top: 65px;
	right: -80px;
}

.interview.st .recruit_visual__title .img05 img { width: 570px;}

.interview.st .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/st/circle_st.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.st .schedule_time span:first-child{ color: #FF7676;}

@media screen and (max-width:679px) {
	.interview.st .recruit_visual__title .img05{
		top: 115px;
		right: -25%;
		width: 300px;
	}
}

.interview.st .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #FF7676;}


/* ------------------------------------------- */
/*                           interview hk only                           */
/* ------------------------------------------- */

.interview.hk .recruit_visual { background: #BBED6C;}

.interview.hk .recruit_visual__title .img02::before { background: #BBED6C;}

.interview.hk .recruit_visual__title .img05{
	top: 65px;
	right: 25px;
}

.interview.hk .recruit_visual__title .img05 img { width: 527px;}

.interview.hk .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/hk/circle_hk.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.hk .schedule_time span:first-child{ color: #78C400;}

@media screen and (max-width:679px) {
	.interview.hk .recruit_visual__title .img05{
		top: 115px;
		right: -15%;
		width: 300px;
	}
}

.interview.hk .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #78C400;}


/* ------------------------------------------- */
/*                   interview kt_machinery only                    */
/* ------------------------------------------- */

.interview.kt_machinery .recruit_visual { background: #FFB134;}

.interview.kt_machinery .recruit_visual__title .img02::before { background: #FFB134;}

.interview.kt_machinery .recruit_visual__title .img05{
	top: 65px;
	right: -5px;
}

.interview.kt_machinery .recruit_visual__title .img05 img { width: 558px;}

.interview.kt_machinery .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/kt_machinery/circle_kt_machinery.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.kt_machinery .schedule_time span:first-child{ color: #FFB134;}

@media screen and (max-width:679px) {
	.interview.kt_machinery .recruit_visual__title .img05{
		top: 115px;
		right: -15%;
		width: 300px;
	}
}

.interview.kt_machinery .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #FFB134;}


/* ------------------------------------------- */
/*                interview kt_heattreatment  only                */
/* ------------------------------------------- */

.interview.kt_heattreatment .recruit_visual { background: #0ECDDD;}

.interview.kt_heattreatment .recruit_visual__title .img02::before { background: #0ECDDD;}

.interview.kt_heattreatment .recruit_visual__title .img05{
	top: 65px;
	right: 20px;
}

.interview.kt_heattreatment .recruit_visual__title .img05 img { width: 474px;}

.interview.kt_heattreatment .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/kt_heattreatment/circle_kt_heattreatment.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.kt_heattreatment .schedule_time span:first-child{ color: #0ECDDD;}

@media screen and (max-width:679px) {
	.interview.kt_heattreatment .recruit_visual__title .img05{
		top: 115px;
		right: -15%;
		width: 300px;
	}
}

.interview.kt_heattreatment .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #0ECDDD;}


/* ------------------------------------------- */
/*                           interview ao only                           */
/* ------------------------------------------- */

.interview.ao .recruit_visual { background: #F07BFF;}

.interview.ao .recruit_visual__title .img02::before { background: #F07BFF;}

.interview.ao .recruit_visual__title .img05{
	top: 65px;
	right: -80px;
}

.interview.ao .recruit_visual__title .img05 img { width: 619px;}

.interview.ao .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/ao/circle_ao.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.ao .schedule_time span:first-child{ color: #F07BFF;}

@media screen and (max-width:679px) {
	.interview.ao .recruit_visual__title .img05{
		top: 115px;
		right: -25%;
		width: 300px;
	}
}

.interview.ao .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #F07BFF;}


/* ------------------------------------------- */
/*                           interview km only                           */
/* ------------------------------------------- */

.interview.km .recruit_visual { background: #5C94FF;}

.interview.km .recruit_visual__title .img02::before { background: #5C94FF;}

.interview.km .recruit_visual__title .img05{
	top: 65px;
	right: 15px;
}

.interview.km .recruit_visual__title .img05 img { width: 518px;}

.interview.km .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt{
	background: url(/assets/img/recruit/interview/km/circle_km.png) 0 6px no-repeat;
    background-size: 10px;
}

.interview.km .schedule_time span:first-child{ color: #5C94FF;}

@media screen and (max-width:679px) {
	.interview.km .recruit_visual__title .img05{
		top: 115px;
		right: -5%;
		width: 300px;
	}
}

.interview.km .interview_aboutus .interview_aboutus_inner .aboutus_block .block dt::before{ color: #5C94FF;}