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

/*
	よくある質問
-----------------------------------------------------------------------------------------------*/
/* header
============================== */
@media print, screen and (min-width:813px){
	#headerWrapper .titMenu.faq{
		color: var(--clrBase);
	}
	#headerWrapper .titMenu.faq::after{
		opacity: 1;
	}
}

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

/* Q A
============================== */
.listFaq{
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--clrGrayL);
}
.listFaq li{
	border-bottom: 1px solid var(--clrGrayL);
	position: relative;
}
.listFaq li::before{
	content: "Q";
	color: var(--clrBase);
	font-size: 3rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 100%;
	position: absolute;
	top: 28px;
	left: 0;
}

/* Q */
.titQ{
	font-size: 2.4rem;
	font-family: var(--fZen);
	font-weight: 700;
	line-height: 130%;
	padding: 30px 60px;
	position: relative;
	transition: all 0.3s;
}
.titQ::before,
.titQ::after{
	content: " ";
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--clrGrayL);
	position: absolute;
	top: 45px;
	right: 30px;
	transition: all 0.3s;
}
.titQ::after{
	transform: rotate(90deg);
}
.titQ:hover,
.titQ.jsToggleOpen{
	color: var(--clrBase);
}
.titQ:hover{
	cursor: pointer;
}
.titQ.jsToggleOpen::after{
	transform: rotate(180deg);
	opacity: 0;
}

/* A */
.txtA{
	text-align: justify;
	padding: 0 60px 30px 60px;
}


@media screen and (max-width:812px){
	/*
		よくある質問
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.faqPage #cmnPageTitWrapper{
		background: url("/cms/npf/brand/recruit//images/bg_faq_main_tit_sp.png") no-repeat center top / cover;
	}

	/* Q A
	============================== */
	.listFaq li::before{
		font-size: 2.4rem;
		top: 16px;
	}

	/* Q */
	.titQ{
		font-size: 1.6rem;
		padding: 20px 30px;
	}
	.titQ::before,
	.titQ::after{
		width: 12px;
		top: 29px;
		right: 0;
	}

	/* A */
	.txtA{
		padding: 0 0 20px 30px;
	}
}