@charset "utf-8";

/* -----------------------------------------------------------
    intro-area
-------------------------------------------------------------- */
.intro-area{
	padding: 50px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.intro-area .txt-wrap{
	width: 600px;
	margin: 0 0 0 calc((100% - 1200px)/ 2);
	position: relative;
	z-index: 1;
}
.intro-area .txt-wrap::before{
	content: "";
	display: block;
	width: 299px;
	height: 189px;
	background: url("../img/recruit-work-img02.jpg") no-repeat center/ cover;
	border-radius: 30px;
	overflow: hidden;
	position: absolute;
	top: 60px;
	right: -229px;
	transition: all .6s ease;
	transform: translateX(10%);
	opacity: 0;
}
.is-show.intro-area .txt-wrap::before{
	transform: translateX(0);
	opacity: 1;
}
.intro-area .img-area{
	width: calc(50% - 70px);
	height: 519px;
	background-color: var(--bg-green);
	border-radius: 150px 0 0 150px;
	flex-shrink: 0;
	text-align: right;
	position: relative;
}
.intro-area .img-area::before{
	content: "";
	display: block;
	width: calc(100vw - (100vw - 1200px)/2 - 852px);
	/*max-width: 548px;*/
	min-width: 430px;
	height: 412px;
	background: url("../img/recruit-work-img01.jpg") no-repeat center top/ cover;
	border-radius: 30px;
	overflow: hidden;
	position: absolute;
	top: -50px;
	right: 0;
	transition: all .6s ease;
	transform: translateX(10%);
	opacity: 0;
}
.is-show.intro-area .img-area::before{
	transform: translateX(0);
	opacity: 1;
}
.intro-area .img-area::after{
	content: "";
	display: block;
	width: calc(100vw - (100vw - 1200px)/2 - 981px);
	max-width: 380px;
	min-width: 298px;
	height: 300px;
	background: url("../img/recruit-work-img03.jpg") no-repeat center/ cover;
	border-radius: 30px;
	overflow: hidden;
	position: absolute;
	bottom: -77px;
	left: 35px;
	transition: all .6s ease;
	transform: translateX(10%);
	opacity: 0;
}
.is-show.intro-area .img-area::after{
	transform: translateX(0);
	opacity: 1;
}

@media screen and (max-width: 768px){
	.intro-area{
		padding: 10px 0 0;
		flex-direction: column;
	}
	.intro-area .txt-wrap{
		width:100%;
		margin: 20px 0;
		padding: 0 20px;
	}
	.intro-area .txt-wrap::before{
		width: 50%;
		height: 118px;
		border-radius: 0 20px 20px 0;
		position: absolute; 
		top: auto;
		bottom: -320px;
		right: 0;
		left: 0;
		transform: translateX(-10%);
	}
	.is-show.intro-area .txt-wrap::before{
		transform: translateX(0);
		opacity: 1;
	}
	.is-show.intro-area .txt-wrap::before{
		transform: translateX(0);
		opacity: 1;
	}
	.intro-area .img-area{
		width: 100%;
		height: 348px;
		border-radius: 80px 0 0 80px;
		margin: 20px 0 0;
	}
	.intro-area .img-area::before{
		width: 100%;
		min-width: 0;
		height: 200px;
		background: url("../img/recruit-work-img01.jpg") no-repeat center top/ cover;
		border-radius: 20px 0 0 20px;
		top: 0;
		right: 0;
	}
	.intro-area .img-area::after{
		width: 50%;
		max-width: auto;
		min-width: auto;
		height: 149px;
		border-radius: 20px;
		bottom: -15px;
		right: 15px;
		left: auto;
	}
}


/* -----------------------------------------------------------
    flow-area
-------------------------------------------------------------- */
.flow-area {
	margin: 170px 0 0;
	/*margin: 100px 0 0;*/
}
.flow-area .flow-list{
	margin: 30px 0 0;
}
.flow-area .flow-list li{
	display: flex;
	margin: 0 0 50px 0;
	position: relative;
	background: #f5f5f5;
	align-items: center;
	border-radius: 20px;
}
.flow-area .flow-list li::before{
	content: "";
	display: block;
	width: 10px;
	height: 50px;
	background-color: var(--recruit-main);
	position: absolute;
	bottom: -50px;
	left: 158px;
}
/*.flow-area .flow-list li:nth-child(8)::before{
	content: "";
	display: block;
	width: 10px;
	height: 25px;
	background-color: var(--recruit-main);
	position: absolute;
	bottom: -25px;
	left: 158px;
}
.flow-area .flow-list li:nth-child(8)::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	border-top: 20px solid var(--recruit-main);
	border-bottom: 0;
	position: absolute;
	bottom: -45px;
	left: 151px;
}*/
.flow-area .flow-list li:last-child{
	margin: 0;
}
.flow-area .flow-list li:last-child::before,
.flow-area .flow-list li:last-child::after{
	display: none;
}
.flow-area .flow-list li .img{
	width: 326px;
	height: 210px;
	border-radius: 20px;
	overflow: hidden;
	flex-shrink: 0;
}
.flow-area .flow-list li .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.flow-area .flow-list li .txt-wrap{
	margin: 0 50px 0 60px;
}
.flow-area .flow-list li .ttl-wrap{
	display: flex;
	align-items: center;
	gap: 0 20px;
}
.flow-area .flow-list li .title-en{
	font-size: 2.0rem;
	line-height: 1;
	color: var(--recruit-main);
	font-family: var(--en-font);
	font-weight: 700;
	position: relative;
	padding: 0 40px 0 0;
	flex-shrink: 0;
}
.flow-area .flow-list li .title-en span{
	font-size: 7rem;
	opacity: 0.15;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	left: 0;
	white-space: nowrap;
}
.flow-area .flow-list li .flow-ttl{
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--recruit-main);
}

@media screen and (max-width: 768px){
	.flow-area {
		margin: 50px 0 0;
	}
	.flow-area .flow-list{
		margin: 30px 0 0;
	}
	.flow-area .flow-list li{
		flex-direction: column;
		margin: 0 0 20px 0;
		position: relative;
	}
	.flow-area .flow-list li::before{
		display: none;
	}
	.flow-area .flow-list li .img{
		border-radius: 15px;
		width: 100%;
		height: 180px;
	}
	.flow-area .flow-list li .txt-wrap{
		margin: 0;
		padding: 20px;
	}
	.flow-area .flow-list li .ttl-wrap{
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.flow-area .flow-list li .title-en{
		font-size: 1.8rem;
    	margin: 5px 0 0;
		padding: 0 40px 0 0;
	}
	.flow-area .flow-list li .title-en span{
		font-size: 6rem;
	}
	.flow-area .flow-list li .flow-ttl{
		font-size: 2.3rem;
		margin: 15px 0 0;
	}
	.flow-area .flow-list li .txt{
		margin: 10px 0 0;
	}
}


/* -----------------------------------------------------------
    img-slide01
-------------------------------------------------------------- */
.img-slide01{
	margin: 100px 0 0;
	width: 100%;
	height: 230px;
	background: url("../img/rec-work-slide01.jpg") repeat-x top left / auto 230px;
	animation: bg-slider 30s linear infinite;
	overflow: hidden;
}

@keyframes bg-slider {
	from {
        background-position: 0 0;
    }
    to {
        background-position: -1825px 0;
    } /* 1825pxとは使用した背景画像の長さ */
}

@media screen and (max-width: 768px){
	.img-slide01{
		margin: 50px 0 0;
		width: 100%;
		height: 160px;
		background: url("../img/rec-work-slide01.jpg") repeat-x top left / auto 160px;
		animation: bg-slider 35s linear infinite;
		overflow: hidden;
	}
}


/* -----------------------------------------------------------
    work-area
-------------------------------------------------------------- */
.work-area{
	/*margin: 170px 0 0;*/
	padding: 100px 0;
	position: relative;
}
.work-area::before{
    content: "";
    display: block;
    width: 100%;
    max-width: calc(1300px + (100% - 1300px)/2 + 80px);
    height: 100%;
    /*background-color: var(--bg-beige);*/
	background-color: var(--bg-green);
    border-radius: 0 200px 200px 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
/*------ personalityと共通 ------*/
.common-box{
	background: #fff;
	border-radius: 30px;
	margin: 50px 0 0;
	display: flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}
.common-box.sales{
	border: 2px solid var(--main);
}
.common-box.technical{
	/*border: 2px solid var(--recruit-sub);*/
	border: 2px solid #0DBEB3;
	margin: 80px 0 0;
}
.common-box .txt-wrap{
	padding: 10px 0 10px 50px;
	width: 600px;
}
.common-box .work-ttl{
	font-size: 2.0rem;
	font-weight: 500;
	color: #fff;
	line-height: 1;
	padding: 6px 20px 9px;
	border-radius: 20px;
	position: absolute;
	top: -18px;
	left: 50px;
}
.common-box.sales .work-ttl{
	background-color: var(--main);
}
.common-box.technical .work-ttl{
	/*background-color: var(--recruit-sub);*/
	background-color: #0DBEB3;
}
.common-box .catch{
	font-size: 3.2rem;
	margin: 0 0 20px;
}
/*------ ここまで ------*/

.work-area .common-box .img{
	border-radius: 0 28px 0 0;
	overflow: hidden;
	width: 517px;
}
.work-area .common-box .img:nth-child(2){
	border-radius: 0 0 28px 0;
	overflow: hidden;
}
.work-area .common-box .img img{
	width: 100%;
}
.work-area .common-box .detail-list{
	margin: 35px 0 0;
  	padding: 25px 20px 20px;
	border-radius: 20px;
	background-color: #f7f7f7;
	position: relative;
}
/*.work-area .common-box.sales .detail-list{
	background-color: var(--bg-blue);
}
.work-area .common-box.technical .detail-list{
	background-color: var(--bg-green);
}*/
.work-area .common-box .detail-list .detail-ttl{
	font-size: 2.0rem;
	font-weight: 600;
	position: absolute;
	top: -12px;
}
.work-area .common-box.sales .detail-list .detail-ttl{
	color: var(--main);
}
.work-area .common-box.technical .detail-list .detail-ttl{
	/*color: var(--recruit-sub);*/
	color: #0DBEB3;
}
.work-area .common-box .detail-list ul li .txt{
	margin: 0 15px 0 0;
	padding: 0 0 5px 16px;
	position: relative;
}
.work-area .common-box .detail-list ul li .txt::before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	position: absolute;
	top: 0.65em;
	left: 0;
}
.work-area .common-box.sales .detail-list ul li .txt::before{
	background-color: var(--main);
}
.work-area .common-box.technical .detail-list ul li .txt::before{
	/*background-color: var(--recruit-sub);*/
	background-color: #0DBEB3;
}
@media screen and (max-width: 768px){
	.work-area{
		margin: 50px 0 0;
		padding: 50px 0;
	}
	.work-area::before{
		width: 100%;
		max-width: auto;
		border-radius: 0 40px 40px 0;
	}
	/*------ personalityと共通 ------*/
	.common-box{
		border-radius: 20px;
		margin: 50px 0 0;
		flex-direction: column;
		position: relative;
	}
	.common-box.technical{
		margin: 50px 0 0;
	}
	.common-box .txt-wrap{
		padding: 30px 20px 10px 20px;
		width: 100%;
	}
	.common-box .work-ttl{
		font-size: 1.8rem;
		padding: 4px 18px 8px;
		border-radius: 20px;
		top: -17px;
		left: 15px;
	}
	.common-box .catch{
		font-size: 2.2rem;
	}
	/*------ ここまで ------*/
	.work-area .common-box .img-area{
		display: flex;
	}
	.work-area .common-box .img{
		border-radius: 0 0 0 18px;
		width: 50%;
		flex-shrink: 0;
	}
	.work-area .common-box .img:nth-child(2){
		border-radius: 0 0 18px 0;
	}
	.work-area .common-box .detail-list{
		margin: 30px 0 0;
		padding: 20px 15px 20px;
		border-radius: 15px;
	}
	.work-area .common-box .detail-list .detail-ttl{
		font-size: 1.8rem;
		top: -10px;
	}
	.work-area .common-box .detail-list ul li .txt{
		margin: 0 15px 0 0;
		padding: 0 0 7px 15px;
		line-height: 1.5;
		position: relative;
	}
	.work-area .common-box .detail-list ul li:last-child .txt{
		padding: 0 0 0 15px;
	}
	.work-area .common-box .detail-list ul li .txt::before{
		width: 5px;
		height: 5px;
	}
}


/* -----------------------------------------------------------
    personality-area
-------------------------------------------------------------- */
.personality-area{
	margin: 100px 0 0;
}
.personality-area .common-box{
	background: #fff;
	border-radius: 30px;
	margin: 50px 0 0;
	display: block;
	justify-content: space-between;
	position: relative;
}
.personality-area .common-box .flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.personality-area .common-box .img{
	border-radius: 0 28px 0 0;
	overflow: hidden;
}
.personality-area .common-box .point-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 30px 50px 50px;
}
.personality-area .common-box .point-list li{
	width: calc((100% - 40px)/ 2 );
	border-radius: 20px;
	padding: 20px 30px 50px;
	border: 1px solid #ddd;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.16);*/
}
.personality-area .common-box .point-list li .flex{
	justify-content: flex-start;
	align-items: center;
}
.personality-area .common-box .point-list li .img{
	height: 100px;
	width: 96px;
	border-radius: 0;
	margin: 0 20px 0 0;
	flex-shrink: 0;
	text-align: center;
}
.personality-area .common-box .point-list li .img img{
	height: 100%;
	width: auto;
}
.personality-area .common-box .point-list li .point-ttl{
	text-align: center;
	font-size: 2.3rem;
	font-weight: 600;
}
.personality-area .common-box.sales .point-list li .point-ttl{
	color: var(--main);
}
.personality-area .common-box.technical .point-list li .point-ttl{
	/*color: var(--recruit-sub);*/
	color: #0DBEB3;
}

@media screen and (max-width: 768px){
	.personality-area{
		margin: 50px 0 0;
	}
	.personality-area .common-box{
		background: #fff;
		border-radius: 15px;
		flex-direction: column;
	}
	.personality-area .common-box .flex{
		flex-direction:column-reverse;
	}
	.personality-area .common-box .img{
		border-radius: 12px 12px 0 0;
		height: 170px;
	}
	.personality-area .common-box .point-list{
		flex-direction: column;
		gap: 15px;
		padding: 20px 15px;
	}
	.personality-area .common-box .point-list li{
		width: 100%;
		border-radius: 20px;
		padding: 20px 15px;
	}
	.personality-area .common-box .point-list li .flex{
		flex-direction: row;
	}
	.personality-area .common-box .point-list li .img{
		height: 60px;
		width: 58px;
		margin: 0 15px 0 0;
	}
	.personality-area .common-box .point-list li .point-ttl{
		text-align: left;
		font-size: 2.0rem;
		line-height: 1.2;
	}

}

/* -----------------------------------------------------------
    schedule-area
-------------------------------------------------------------- */
.schedule-area {
	margin: 100px 0 0;
	padding: 100px 0;
	position: relative;
}
.schedule-area::before{
    content: "";
    display: block;
    width: 100%;
    max-width: calc(1300px + (100% - 1300px)/2 + 80px);
    height: 100%;
    background-color: var(--bg-green);
    border-radius: 200px 0 0 200px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.schedule-area table{
	width: 100%;
	border-collapse: collapse;
}
.schedule-area table .sales{
	background-color: var(--main);
	width: 533px;
}
.schedule-area table .technical{
	/*background-color: var(--recruit-sub);*/
	background-color: #0DBEB3;
	width: 533px;
}
.schedule-area table .cmn{
	/*background: linear-gradient(to right, var(--main) 0%, var(--main) 50%, var(--recruit-sub) 50%,var(--recruit-sub) 100%);*/
	background: linear-gradient(to right, var(--main) 0%, var(--main) 50%, #0DBEB3 50%,#0DBEB3 100%);
	width: 1066px;
}
/*----- thead -----*/
.schedule-area table thead th{
	text-align: center;
	font-size: 2.3rem;
	color: #fff;
	padding: 25px 0;
	border-radius: 30px 30px 0 0;
}

/*----- tbody -----*/
.schedule-area table tbody th.time-wrap{
	display: flex;
	align-items: center;
	color: var(--recruit-main);
	padding: 5px 0 0;
	position: relative;
}
.schedule-area table tbody th.time-wrap .time{
	font-size: 1.8rem;
	width: 50px;
}
.schedule-area table tbody th .clock-img{
	margin: 0 0 0 20px;
	position: relative;
	z-index: 1;
}
.schedule-area table tbody th .clock-img::before{
	content: "";
	width: 5px;
	height: 75px;
	background-color: var(--recruit-main);
	position: absolute;
	bottom: -75px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: -1;
}
.schedule-area table tbody tr:last-child th .clock-img::before{
	display: none;
}
.schedule-area table tbody td{
	position: relative;
}
.schedule-area table tbody td .txt{
	font-size: 1.8rem;
	font-weight: 600;
	padding: 20px;
	margin: 5px 10px;
	background-color: #fff;
	border-radius: 10px;
	min-height: 75px;
	height: 100%;
}
.schedule-area table td.technical.style02 .txt{
	padding: 62.5px 10px;
}
.schedule-area table tbody td .txt span{
	display: inline-block;
	background-color: var(--bg-green);
	border: 1px solid var(--recruit-sub);
	border-radius: 10px;
	width: 76px;
	text-align: center;
	margin: 0 15px 0 0;
	flex-shrink: 0;
}
.schedule-area table tbody tr:last-child td{
	padding: 0 0 5px 0;
	border-radius: 0 0 20px 20px;
}
.schedule-area table .img01::before{
	content: "";
	display: block;
	width: 220px;
	height: 170px;
	background: url("../img/rec-work-schedule-img01.png") no-repeat center / contain;
	position: absolute;
	top: -80px;
	right: 30px;
	z-index: 1;
	transform: rotate(8deg);
}
.schedule-area table .img02::before{
	content: "";
	display: block;
	width: 166px;
	height: 124px;
	background: url("../img/rec-work-schedule-img02.png") no-repeat center / contain;
	position: absolute;
	top: -26px;
	right: -75px;
	z-index: 1;
	transform: rotate(4deg);
}
.schedule-area table .img03::before{
	content: "";
	display: block;
	width: 166px;
	height: 124px;
	background: url("../img/rec-work-schedule-img03.png") no-repeat center / contain;
	position: absolute;
	top: -31px;
	right: 455px;
	z-index: 1;
	transform: rotate(-4deg);
}
.schedule-area table .img04::before{
	content: "";
	display: block;
	width: 200px;
	height: 150px;
	background: url("../img/rec-work-schedule-img04.png") no-repeat center / contain;
	position: absolute;
	top: -25px;
	right: 110px;
	z-index: 1;
	transform: rotate(3deg);
}
.schedule-area table .img05::before{
	content: "";
	display: block;
	width: 220px;
	height: 160px;
	background: url("../img/rec-work-schedule-img05.png") no-repeat center / contain;
	position: absolute;
	top: -26px;
	right: 40px;
	z-index: 1;
	transform: rotate(5deg);
}
.schedule-area table .img06::before{
	content: "";
	display: block;
	width: 200px;
	height: 130px;
	background: url("../img/rec-work-schedule-img06.png") no-repeat center / contain;
	position: absolute;
	top: 70px;
	right: -40px;
	z-index: 1;
	transform: rotate(-5deg);
}
.schedule-area table .img07::before{
	content: "";
	display: block;
	width: 166px;
	height: 124px;
	background: url("../img/rec-work-schedule-img07.png") no-repeat center / contain;
	position: absolute;
	top: 24px;
	right: 25px;
	z-index: 1;
	transform: rotate(-2deg);
}
@media screen and (max-width: 768px){
	.schedule-area {
		margin: 50px 0 0;
		padding: 50px 0;
		position: relative;
	}
	.schedule-area::before{
		width: 100%;
		max-width: auto;
		border-radius: 40px 0 0 40px;
	}
	.schedule-area .inner{
		position: relative;
	}
	.schedule-area .titlebox{
		padding: 0;
		margin:  0 20px 30px 20px;
	}
	.schedule-area .time-wrap{
		padding: 5px 0 0;
		width: 40px;
		position: absolute;
		top: 127px;
		left: 5px;
	}
	.schedule-area .time-wrap .com-time{
		/*position: relative;*/
		margin: 0 0 8px;
	}
	/*.schedule-area .time-wrap .com-time::before{
		content: "";
		width: 5px;
		height: 75px;
		background-color: var(--recruit-main);
		position: absolute;
		bottom: -75px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -1;
	}
	.schedule-area .time-wrap .com-timep:last-child::before{
		display: none;
	}*/
	.schedule-area .time-wrap .time{
		color: var(--recruit-main);
		font-size: 1.3rem;
		font-weight: 500;
		text-align: center;
		background-color: var(--bg-green);
		line-height: 1;
		padding: 0 0 2px;
	}
	.schedule-area .time-wrap .clock-img{
		width: 35px;
		height: 35px;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
	.schedule-area .sp-scrool{
		overflow-x: scroll;
		margin: 0 0 0 50px;
	}
	.schedule-area table{
		width: auto;
		width: max-content;
		border-collapse: collapse;
	}
	.schedule-area table .sales{
		width: 500px;
	}
	.schedule-area table .technical{
		width: 500px;
	}
	.schedule-area table .cmn{
		/* background: linear-gradient(to right, var(--main) 0%, var(--main) 50%, var(--recruit-sub) 50%,var(--recruit-sub) 100%); */
		width: 1000px;
	}
	/*----- thead -----*/
	.schedule-area table thead th{
		font-size: 1.8rem;
		padding: 15px;
		border-radius: 15px 15px 0 0;
	}
	/*----- tbody -----*/
	.schedule-area table tbody th.time-wrap{
		display: none;
	}
	.schedule-area table tbody td .txt{
		font-size: 1.5rem;
		font-weight: 500;
		padding: 10px 15px;
		margin: 5px 10px;
		min-height: 47px;
	}
	.schedule-area table td.technical.style02 .txt{
		padding: 38px 15px;
	}
	.schedule-area table tbody td .txt span{
		width: 60px;
		margin: 0 10px 0 0;
	}
	.schedule-area table tbody tr:last-child td{
		padding: 0 0 5px 0;
		border-radius: 0 0 20px 20px;
	}
	
	.schedule-area table .img01::before{
		width: 126px;
  		height: 94px;
		top: -50px;
		right: 240px;
		transform: rotate(3deg);
	}
	.schedule-area table .img02::before{
		width: 126px;
  		height: 94px;
		right: 13px;
	}
	.schedule-area table .img03::before{
		width: 126px;
  		height: 94px;
		top: -26px;
    	right: 505px;
	}
	.schedule-area table .img04::before{
		width: 126px;
  		height: 94px;
		position: absolute;
		top: -15px;
    	right: 185px;
		transform: rotate(2deg);
	}
	.schedule-area table .img05::before{
		width: 126px;
  		height: 94px;
		top: 10px;
		right: 160px;
	}
	.schedule-area table .img06::before{
		width: 126px;
  		height: 94px;
		position: absolute;
		top: 7px;
		right: 13px;
	}
	.schedule-area table .img07::before{
		width: 126px;
  		height: 94px;
		right: 93px;
    	top: -28px;
		transform: rotate(-1deg);
	}
}