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

	index.css（recruit）

----------------------------------------------------------------------------------------*/

/* ヘッダー //
////////////////////////////////////////////////////////////////////*/

#body_header{
	background-color: transparent !important;
	box-shadow: none;
	border: none;
}
#body_header.is-scrolled{
	background-color: #fff !important;
	border-bottom: 1px solid #ccc;
}

/* メインビジュアル //
////////////////////////////////////////////////////////////////////*/

.mv{
	background-image: url(/wp/wp-content/themes/baibaisite/recruit/images/index/slidebk.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 120px 0 0;
	margin-top: -90px;
}
.mv .title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: auto;
	padding: 50px 20px 60px;
}
.mv .title h3{
	font-size: 54px;
	line-height: 1.48;
	color: var(--acc1);
	font-family: var(--font-gothic);
}
@media (max-width: 1440px) {
	.mv .title{
		padding: 50px 40px 60px;
	}
	.mv .title h3{
		font-size: 46px;
	}
	.mv .title img{
		width: 360px;
	}
}

/* concept-slider */
.concept-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.concept-slider__track {
	display: flex;
	width: max-content;
	gap: 60px;
}
.concept-slider__track.is-ready {
	animation: scroll 80s linear infinite;
}
.concept-slider__item {
	flex: 0 0 auto;	  
}
.concept-slider__item img {
	display: block;
	width: 684px;
	height: 450px;
	border-radius: 10px;
	object-fit: cover;
	box-shadow:
	0 0 2px rgba(0, 0, 0, 0.10),
	0 0 6px rgba(0, 0, 0, 0.08),
	0 0 12px rgba(0, 0, 0, 0.06);
}
.concept-slider__item.two img{
	width: 530px;
	height: 333px;
	margin-top: 72px;
} 
.concept-slider__item.four img{
	width: 252px;
	height: 168px;
	margin: 60px 0 0 198px;
} 
.concept-slider__item.three img{
	width: 400px;
	height: 263px;
	margin-top: 20px;
} 
@keyframes scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* お知らせ //
////////////////////////////////////////////////////////////////////*/  

.news{
	background-color: #e5dfcf;
	padding: 20px 0;
	font-weight: 500;
	letter-spacing: 0.05em; 
}
.news div{
	background-color: #fff;
	width: 1100px;
	margin: auto;
	box-shadow:
	0 0 2px rgba(0, 0, 0, 0.10),
	0 0 6px rgba(0, 0, 0, 0.08),
	0 0 12px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 40px 110px 40px 47px;
	border-radius: 10px;
	position: relative;
}
.news div span{
	margin-right: 37px;
}
.news div i{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 50px;
	color: var(--acc1);
	font-size: 30px;
	height: fit-content;
}

/* メッセージ //
////////////////////////////////////////////////////////////////////*/

.mes{
	padding: 180px 0 100px;
	background-color: #f8f7f3;
}
.mes h3{
	text-align: center;
	font-size: 40px;
	line-height: 1;
	font-family: var(--font-gothic);
	padding-bottom: 50px;
}
.mes div{
	max-width: 960px;
	margin: auto;
	position: relative;
}
.mes div img{
	position: absolute;
	top: -160px;
	left: -120px;
}
.mes div p{
	font-weight: 500;
	padding-bottom: 30px;
}
.mes a{
	background-color: var(--acc1);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	border-radius: 35px;
	width: 400px;
	margin: 40px auto 0;
	text-align: center;
	padding: 24px 0;
	display: block;
}
.mes a nav i{
	padding-left: 20px;
}

/* 先輩社員メッセージ //
////////////////////////////////////////////////////////////////////*/

.person{
	max-width: 1500px;
	box-sizing: border-box;
	padding: 0 30px;
	margin: 100px auto 140px;
	position: relative
}
.person h2{
	font-size: 45px;
}
.person h2 span{
	font-family: var(--font-en);
	color: #e3ddcb;
	font-size: 32px;
	padding-left: 26px;
	top: 2px;
    position: relative;
}
.person > p{
	font-size: 20px;
	font-weight: 500;
	color: var(--acc1);
	margin: 3px 0 55px;
}
.person nav{
	position: absolute;
	right: 30px;
	top: 55px;
	font-size: 16px;
	display: flex;
	align-items: center;
	font-weight: 500;
}
.person nav i{
	color: var(--acc1);
	font-size: 30px;
	padding-left: 30px;
}
.person.is-slider .person_item{
	width: calc(100% / 3);
	height: 605px;
	position: relative;
}
.person.is-slider .person_item i{
	color: #fff;
	position: absolute;
	font-size: 30px;
	z-index: 1;
    top: 330px;
    right: 30px;
}
.person.is-slider .person_item figure{
	height: 100%;
}
.person.is-slider .person_item img{
	filter: brightness(0.7);
	object-fit: cover;
    height: 100%;
}
.person.is-slider .person_item figcaption{
	position: absolute;
	top: 290px;
	right: 0;
	left: 0;
	text-align: center;
	margin: auto;
	width: fit-content;
    height: fit-content;
	color: #fff;
}
.person.is-slider .person_item figcaption p {
	font-size: 26px;
	margin-bottom: 12px;
	line-height: 1.5;
	font-weight: 600;
}
.person.is-slider .person_item figcaption > div{
	border-top: 1px solid #fff;
	width: 235px;
	display: flex;
	justify-content: center;
	gap: 10px;
	font-size: 16px;
	padding-top: 10px;
}


/* 職種紹介 //
////////////////////////////////////////////////////////////////////*/

.work{
	max-width: 1500px;
	box-sizing: border-box;
	padding: 0 30px;
	margin: 80px auto 100px;
	position: relative
}
.work h2{
	font-size: 45px;
}
.work h2 span{
	font-family: var(--font-en);
	color: #e3ddcb;
	font-size: 32px;
	padding-left: 30px;
}
.work > p{
	font-size: 20px;
	font-weight: 500;
	color: var(--acc1);
	margin: 15px 0 55px;
}
.work >  a nav{
	position: absolute;
	right: 20px;
	top: 45px;
	font-size: 16px;
	display: flex;
	align-items: center;
	font-weight: 500;
}
.work >  a nav i{
	color: var(--acc1);
	font-size: 30px;
	padding-left: 30px;
}
.work > div{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	text-align: center;
	gap: 20px;
}
.work > div > a {
	flex: 1;
	max-width: 450px;
}
.work > div > a article {
	width: 100%;
}
.work > div > a img {
	width: 100%;
	border-radius: 20px;
	display: block;
}
.work article h4{
	color: var(--acc1);
	font-size: 30px;
	margin-bottom: 26px;
}
.work article h4 span{
	font-size: 24px;
	display: block;
}
.work article p{
	font-weight: 500;
}
.work article img{
	border-radius: 20px;
}
.work article div{
	border: 2px solid var(--acc1);
    border-radius: 20px;
    z-index: 1;
    margin: -65px 20px 0;
    position: relative;
    background: #fff;
    padding: 35px 0 64px;
}
.work article nav{
	background-color: var(--acc1);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	border-radius: 35px;
	width: 300px;
	margin: -34px auto 0;
	text-align: center;
	padding: 24px 0;
	display: block;
	position: relative;
	z-index: 2;
}
.work article nav i{
	padding-left: 20px;
}

/* 福利厚生 研修制度 //
////////////////////////////////////////////////////////////////////*/
.yarigai{
	background-color: #f8f7f3;
}
.yarigai > div{
	max-width: 1500px;
	box-sizing: border-box;
	padding: 80px 30px;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.yarigai .tx{
	width: 530px;
}
.yarigai .tx h3{
	color: #414042;
	margin: 42px 0 49px;
	font-size: 40px;
	font-family: var(--font-gothic);
}
.yarigai .tx p{
	width: 490px;
	font-weight: 500;
}
.yarigai .card{
	border-radius: 20px;
	padding: 53px 0 60px;
	background-color: #fff;
	box-shadow:
	0 0 2px rgba(0, 0, 0, 0.10),
	0 0 6px rgba(0, 0, 0, 0.08),
	0 0 12px rgba(0, 0, 0, 0.06);
	text-align: center;
	width: 405px;
}
@media (max-width: 1489px){
	.yarigai .card{
		width: 375px;
	}
}
@media (max-width: 1400px){
	.yarigai .card{
		width: 350px;
	}
}
@media (max-width: 1360px){
	.yarigai .card{
		width: 330px;
	}
}
.yarigai .card h4{
	color: var(--acc1);
	font-size: 28px;
}
.yarigai .card p{
	font-size: 16px;
	line-height: 1.75;
	font-weight: 500;
}
.yarigai .card img{
	margin: 33px auto 35px;
}
.yarigai div a:last-of-type .card img{
	margin: 33px auto 41px;
}
.yarigai .card nav{
	font-size: 16px;
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 82px;
	padding-right: 13px;
}
.yarigai .card nav i{
	color: var(--acc1);
	font-size: 30px;
	margin-left: 15px;
}

/* 会社の様子をご紹介 //
////////////////////////////////////////////////*/

.yousu{
	background-image: url(/wp/wp-content/themes/baibaisite/recruit/images/index/rainbowbk.jpg);
	background-size: cover;
	background-position: center;
}
.yousu a > div{
	max-width: 1500px;
	box-sizing: border-box;
	padding: 30px 30px 20px;
	margin: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
}
.yousu a > div > img{
	position: absolute;
	left: 30px;
	bottom: 0;
	mix-blend-mode: multiply;
}
@media (max-width: 1440px){
	.yousu a > div > img{
		width: calc(462px*3 / 4);
	}
}
.yousu .tx{
	width: 480px;
	position: relative;
}
.yousu .tx h3{
	color: #414042;
	margin: 20px 0 20px;
	font-size: 40px;
	font-family: var(--font-gothic);
}
.yousu .tx p{
	font-size: 16px;
	line-height: 1.875;
	width: 490px;
	font-weight: 500;
}
.yousu .box{
	width: calc(100% - 567px);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 23px;
	padding-right: 57px;
}
.yousu .box img{
	margin: 91px 0 0;
	border-radius: 10px;
	width: calc((100% - 46px) / 3);
	max-width: 253px;
	aspect-ratio: 253 / 169;
	object-fit: cover;
}
.yousu .box img:first-of-type{
	margin-top: 0;
}
.yousu .box img:last-of-type{
	margin-top: 31px;
}
.yousu a > div > i{
	position: absolute;
	color: var(--acc1);
	font-size: 30px;
	right: 30px;
	top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}