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

/*
	ワークライフバランス
-----------------------------------------------------------------------------------------------*/
/* header
============================== */
@media print, screen and (min-width:813px){
	#headerWrapper .titMenu.welfare{
		color: var(--clrBase);
	}
	#headerWrapper .titMenu.welfare::after{
		opacity: 1;
	}
}

/* ページタイトル
============================== */
.welfarePage #cmnPageTitWrapper{
	background: url("/cms/npf/brand/recruit//images/bg_welfare_main_tit_pc.png") no-repeat center top / cover;
}

/* リードタイトル
============================== */
.titLead{
	width: fit-content;
	border: 1px solid var(--clrBase);
	text-align: center;
	font-size: 2.4rem;
	font-family: var(--fZen);
	font-weight: 700;
	padding: 40px 60px;
	margin: 0 auto 80px auto;
	position: relative;
}
.titLead > span{
	display: block;
}
.titLead .clr{
	color: var(--clrBase);
}

/* 飾り */
.titLead::before,
.titLead::after{
	content: " ";
	display: block;
	width: 45px;
	height: 55px;
	background: url("/cms/npf/brand/recruit//images/item_comment.svg") no-repeat top left / 25px 20px, #fff;
	position: absolute;
}
.titLead::before{
	top: -1px;
	left: -10px;
}
.titLead::after{
	right: -10px;
	bottom: -1px;
	transform: rotate(180deg);
}

/* anm */
.titLead > span.jsAnmStart{
	animation: anmFadeUpS 0.8s ease 0.8s forwards;
}

/* item
============================== */
@media print, screen and (min-width:813px){
	.welfarePage .ctsArea{
		position: relative;
	}
	.itemPet{
		position: absolute;
	}
	.itemPet img{
		opacity: 0;
	}
	.itemPet::after{
		content: " ";
		display: block;
		width: 568px;
		height: 181px;
		background: url("/cms/npf/brand/recruit//images/item_welfare_paw.svg") no-repeat top left / 100% auto;
		position: absolute;
		opacity: 0;
		animation: anmFadeIn 1s ease 2s forwards;
	}

	/* 猫 */
	.itemPet:nth-of-type(1){
		top: -50px;
		left: 130px;
	}
	.itemPet:nth-of-type(1) img{
		animation: anmCat 1.3s ease 1s forwards;
	}
	.itemPet:nth-of-type(1)::after{
		bottom: 0;
		right: 60px;
		transform: translateY(100%);
	}

	/* 犬 */
	.itemPet:nth-of-type(2){
		top: 70px;
		right: 110px;
	}
	.itemPet:nth-of-type(2) img{
		animation: anmDog 1.3s ease 1s forwards;
	}
	.itemPet:nth-of-type(2)::after{
		bottom: -30px;
		left: 130px;
		transform: rotate(10deg) scale(-1);
	}
}

/* anm */
@keyframes anmCat{
	0%{
		opacity: 0;
		transform: translate(-100px, 100px) rotate(20deg);
	}
	20%{
		opacity: 1;
		transform: translate(-80px, 80px) rotate(-20deg);
	}
	50%{
		opacity: 1;
		transform: translate(-50px, 50px) rotate(20deg);
	}
	80%{
		opacity: 1;
		transform: translate(-20px, 20px) rotate(-20deg);
	}
	to{
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
	}
}
@keyframes anmDog{
	0%{
		opacity: 0;
		transform: translate(100px, -100px) rotate(20deg);
	}
	20%{
		opacity: 1;
		transform: translate(80px, -80px) rotate(-20deg);
	}
	50%{
		opacity: 1;
		transform: translate(50px, -50px) rotate(20deg);
	}
	80%{
		opacity: 1;
		transform: translate(20px, -20px) rotate(-20deg);
	}
	to{
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
	}
}

/* titIco
============================== */
.titIco{
	width: fit-content;
	text-align: center;
	color: var(--clrBrown);
	font-size: 3.6rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	padding: 0 75px;
	margin: 0 auto 30px auto;
	position: relative;
}
.titIco::before,
.titIco::after{
	content: " ";
	display: block;
	flex-shrink: 0;
	position: absolute;
	top: 50%;
}
.titIco::before{
	left: 50%;
	transform: translate(-50%, -50%);
}
.titIco::after{
	right: 0;
	transform: translateY(-50%);
}

/* ペットと暮らす方へ */
.icoPet{
	padding: 0 85px;
}
.icoPet::before,
.icoPet::after{
	width: 55px;
	height: 45px;
	background: url("/cms/npf/brand/recruit//images/item_welfare_pet.svg") no-repeat top left / 100% auto;
}

/* 勤務時間・働き方 */
.icoTime::before,
.icoTime::after{
	width: 45px;
	height: 45px;
	background: url("/cms/npf/brand/recruit//images/item_time_pet.svg") no-repeat top left / 100% auto;
}

/* 女性活躍推進への取り組み */
.icoWoman{
	margin-bottom: 70px;
}
.icoWoman::before,
.icoWoman::after{
	width: 46px;
	height: 45px;
	background: url("/cms/npf/brand/recruit//images/item_woman_pet.svg") no-repeat top left / 100% auto;
}

/* anm */
.titIco.jsAnmStart{
	opacity: 1;
}
.titIco.jsAnmStart::before{
	opacity: 0;
	animation: anmTitIcoL 1s ease 0.5s forwards;
}
@keyframes anmTitIcoL{
	0%{
		opacity: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	20%{
		opacity: 1;
	}
	70%{
		left: 50%;
		transform: translate(-50%, -50%);
	}
	100%{
		opacity: 1;
		left: 0;
		transform: translate(0, -50%);
	}
}
.titIco.jsAnmStart span{
	opacity: 0;
	animation: anmFadeIn 1s ease 1.5s forwards;
}
@keyframes anmFadeIn{
	0%  {opacity: 0;}
	100%{opacity: 1;}
}
.titIco.jsAnmStart::after{
	opacity: 0;
	animation: anmTitIcoR 1s ease 1.5s forwards;
}
@keyframes anmTitIcoR{
	0%  {opacity: 0;}
	100%{opacity: 1;}
}

/* list
============================== */
.listWelfare{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--clrGrayL);
}
.listWelfare li{
	width: calc(100% / 2);
	border-bottom: 1px solid var(--clrGrayL);
	padding: 50px 30px;
	position: relative;
}
@media print, screen and (min-width:813px){
	.listWelfare li::after{
		content: " ";
		display: block;
		width: 1px;
		height: calc(100% - 40px);
		background-color: var(--clrGrayL);
		position: absolute;
		top: 20px;
		right: 0;
	}
	.listWelfare.clm2 li:nth-of-type(2n)::after,
	.listWelfare.clm3 li:nth-of-type(3n)::after{
		display: none;
	}

	/* clm3 */
	.listWelfare.clm3 li{
		width: calc(100% / 3);
	}
}

/* tit */
.listWelfare .tit{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 2rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	margin-bottom: 15px;
	position: relative;
}
.listWelfare .tit::before,
.listWelfare .tit::after{
	content: " ";
	display: block;
	flex-shrink: 0;
	width: 15px;
	height: 1px;
	background-color: var(--clrBase);
}
.listWelfare .tit::before{
	margin-right: 10px;
}
.listWelfare .tit::after{
	margin-left: 10px;
}

/* txtL */
.listWelfare .txtL{
	min-height: 76px;
	color: var(--clrBrown);
	font-size: 1.8rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 140%;
	margin-bottom: 20px;
}

/* txt */
.listWelfare .txt{
	text-align: justify;
	font-size: 1.4rem;
}

/* コメント
============================== */
@media print, screen and (min-width:813px){
	.cmnCommentArea .titComment{
		font-size: 2.5rem;
	}
}


@media screen and (max-width:812px){
	/*
		ワークライフバランス
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.welfarePage #cmnPageTitWrapper{
		background: url("/cms/npf/brand/recruit//images/bg_welfare_main_tit_sp.png") no-repeat center top / cover;
	}
	.welfarePage #cmnPageTitWrapper .titPage{
		letter-spacing: 0.1rem;
	}
	.welfarePage #cmnPageTitWrapper .titPage span{
		letter-spacing: 0.2rem;
	}

	/* リードタイトル
	============================== */
	.titLead{
		width: 100%;
		font-size: 1.8rem;
		padding: 40px 20px;
		margin-bottom: 60px;
	}

	/* 飾り */
	.titLead::before,
	.titLead::after{
		width: 35px;
		height: 35px;
		background-size: 20px auto;
	}

	/* item
	============================== */
	.itemPet{
		display: none;
	}

	/* titIco
	============================== */
	.titIco{
		font-size: 2.2rem;
		padding: 0 50px;
		margin-bottom: 20px;
	}

	/* ペットと暮らす方へ */
	.icoPet{
		padding: 0 55px;
	}
	.icoPet::before,
	.icoPet::after{
		width: 40px;
		height: 33px;
	}

	/* 勤務時間・働き方 */
	.icoTime::before,
	.icoTime::after{
		width: 35px;
		height: 36px;
	}

	/* 女性活躍推進への取り組み */
	.icoWoman{
		margin-bottom: 30px;
	}
	.icoWoman::before,
	.icoWoman::after{
		width: 36px;
		height: 36px;
	}

	/* list
	============================== */
	.listWelfare{
		flex-direction: column;
	}
	.listWelfare li{
		width: 100%;
		padding: 20px 0;
	}

	/* tit */
	.listWelfare .tit{
		font-size: 1.8rem;
		margin-bottom: 10px;
	}

	/* txtL */
	.listWelfare .txtL{
		min-height: initial;
		font-size: 1.6rem;
	}

	/* コメント
	============================== */
	.cmnCommentArea .titComment{
		text-align: center;
		margin: 0 auto 20px auto;
	}
}