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

/*
	採用を知る  扉ページ  aboutPage
-----------------------------------------------------------------------------------------------*/

/*
	求める人物像  personalityPage
-----------------------------------------------------------------------------------------------*/
.personalityPage #commonKvArea{
	background: url(../images/ph_kv_personality_pc.jpg) no-repeat center center / cover;
}
.personalityPage #personalityArea .ctsArea{
	position: relative;
	z-index: 0;
}
.personalityPage #personalityArea .ctsArea::after{
	position: absolute;
	content: "";
	display: block;
	background: url(../images/ph_personality_pc.png) no-repeat center center / cover;
	width: 1400px;
	height: 1126px;
	top: calc(50% + 90px);
	left: calc(50% + 70px);
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: -1;
}
/* アニメーション_少しずらす */
.personalityPage #personalityArea .ctsArea::after{
	animation: anmFadeIn 3.4s ease 0.8s forwards;
}

/* リードボックス
============================== */
.personalityPage .leadTxtBox{
	width: var(--w800);
	margin: 0 auto;
}
.personalityPage .leadTxtBox .txt{
	text-align: justify;
}
/* 文字ボックス共通 */
.personalityPage .txtBox{
	position: relative;
	height: 1000px;
}
.personalityPage .txtBox li{
	position: absolute;
	z-index: 1;
}
@media print,screen and (min-width:813px){
	/* 文字ボックス個別設定 */
	.personalityPage .txtBox li:nth-of-type(1){
		top: 0;
		left: 540px;
	}
	.personalityPage .txtBox li:nth-of-type(2){
		top: 90px;
		left: 0;
	}
	.personalityPage .txtBox li:nth-of-type(3){
		bottom: 0;
		left: 300px;
	}
	/* 黒帯文字 */
	.personalityPage .txtBack span{
		font-size: 3.2rem;
	}
	/* テキスト */
	.personalityPage .txtBox .txt{
		width: 290px;
		font-size: 1.3rem;
		margin-top: 20px;
	}
	/* アニメーション_少しずらす */
	.personalityPage .txtBox li:nth-of-type(2).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 0.8s forwards;
	}
}
/* ナンバー */
.personalityPage .txtBox .num{
	position: absolute;
	top: -8px;
	z-index: -1;
}
@media print,screen and (min-width:813px){
	/* ナンバー個別設定 */
	.personalityPage .txtBox li:nth-of-type(1) .num{
		right: 30px;
	}
	.personalityPage .txtBox li:nth-of-type(2) .num{
		right: -45px;
	}
	.personalityPage .txtBox li:nth-of-type(3) .num{
		right: 0;
	}
}


/*
	募集要項  guidelinePage
-----------------------------------------------------------------------------------------------*/
.guidelinePage #commonKvArea{
	background: url(../images/ph_kv_guideline_pc.jpg) no-repeat center center / cover;
}
.guidelinePage .ctsArea{
	width: var(--w1100);
}
/* テーブルリスト */
.guidelinePage #guidelineArea .list > li{
	filter: var(--shadow);
}
.guidelinePage #guidelineArea .list > li:not(:nth-of-type(1)){
	margin-top: 60px;
}
.guidelinePage #guidelineArea .listBox li{
	display: flex;
	flex-direction: column;
}
/* ● */
.guidelinePage #guidelineArea .maru{
	position: relative;
	padding-left: 1.2em;
}
.guidelinePage #guidelineArea .maru::after{
	position: absolute;
	content:"";
	display: block;
	background-color: var(--clrBase);
	width: 14px;
	height: 14px;
	top: 2px;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 50%;
}
.guidelinePage #guidelineArea .tit{
	font-weight: 600;
}
.guidelinePage #guidelineArea td ul{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 採用までの流れ  #flowArea
============================== */
.guidelinePage #flowArea .flowList{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.guidelinePage #flowArea .flowList li{
	position: relative;
	display: flex;
	align-items: center;
	gap: 30px;
}
/* 三角 */
.guidelinePage #flowArea .flowList li:not(:last-of-type)::after{
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-color: var(--clrBlack40) var(--clrBlack40) transparent transparent;
	transform: rotate(135deg);
	bottom: -15px;
	left: 95px;
}
.guidelinePage #flowArea .flowList .tit{
	width: 200px;
	height: 80px;
	line-height: 80px;
	background-color: var(--clrBase);
	color: var(--clrWhite);
	text-align: center;
}


/*
	よくある質問  faqPage
-----------------------------------------------------------------------------------------------*/
.faqPage #commonKvArea{
	background: url(../images/ph_kv_faq_pc.jpg) no-repeat center center / cover;
}
.faqPage .ctsArea{
	width: var(--w1100);
}
/* リスト */
.faqPage #faqArea .list{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.faqPage #faqArea .list > li{
	background-color: var(--clrWhite50);
	padding: 90px 60px 80px;
}
/* 見出しタイトル */
.faqPage #faqArea .titMain{
	position: relative;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 100%;
	margin-bottom: 50px;
	padding-left: 15px;
}
.faqPage #faqArea .titMain::after{
	position: absolute;
	content: "";
	display: block;
	background-color: var(--clrBase);
	width: 3px;
	height: 100%;
	top: 0;
	left: 0;
}
/* 質問リスト */
.faqPage #faqArea .listIn{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.faqPage #faqArea .listIn li{
	filter: var(--shadow);
}
/* 質問エリア */
.faqPage #faqArea .titArea{
	position: relative;
	background-color: var(--clrBase);
	padding: 20px 60px 20px;
	cursor: pointer;
}
/* プラスマイナス */
.faqPage #faqArea .titArea::before,
.faqPage #faqArea .titArea::after {
	position: absolute;
	content: "";
	display: block;
	background-color: var(--clrWhite);
	width: 20px;
	height: 2px;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
}
.faqPage #faqArea .titArea::after {
	transform: rotate(270deg);
	transition: all 0.3s;
}
.faqPage #faqArea .titArea.close_btn::after{
	transform: initial;
}
/* Q */
.faqPage #faqArea .en{
	position: absolute;
	color: var(--clrWhite);
	font-family: var(--fEn);
	font-weight: 400;
	font-size: 2.8rem;
	top: 50%;
	left: 23px;
	transform: translateY(-50%);
	opacity: 0.6;
}
/* 質問タイトル */
.faqPage #faqArea .tit{
	color: var(--clrWhite);
	font-weight: 600;
	font-size: 1.8rem;
}
/* テキスト */
.faqPage #faqArea .txt{
	background-color: var(--clrWhite);
	padding: 20px 60px 30px;
	text-align: justify;
}


@media screen and (max-width:812px){
	/*
		求める人物像  personalityPage
	-----------------------------------------------------------------------------------------------*/
	.personalityPage #commonKvArea{
		background: url(../images/ph_kv_personality_sp.jpg) no-repeat center center / cover;
	}
	.personalityPage #personalityArea .ctsArea::after{
		width: 100%;
		height: 100vw;
		top: 200px;
		left: 0;
		transform: initial;
	}
	/* ベースリードコピー打ち消し */
	.personalityPage .leadTxtBox {
		padding-bottom: 95vw;
	}
	/* 文字ボックス共通 */
	.personalityPage .txtBox{
		height: 100%;
	}
	.personalityPage .txtBox li{
		position: relative;
		height: 100%;
	}
	.personalityPage .txtBox {
		gap: 40px;
	}
	/* ナンバー */
	.personalityPage .txtBox .num{
		right: -5px;
	}
	/* テキスト */
	.personalityPage .txtBox .txt{
		margin-top: 15px;
	}


	/*
		募集要項  guidelinePage
	-----------------------------------------------------------------------------------------------*/
	.guidelinePage #commonKvArea{
		background: url(../images/ph_kv_guideline_sp.jpg) no-repeat center center / cover;
	}
	
	/* 採用までの流れ  #flowArea
	============================== */
	.guidelinePage #flowArea .flowList{
		gap: 40px;
	}
	.guidelinePage #flowArea .flowList li{
		flex-direction: column;
		gap: 15px;
	}
	/* 三角 */
	.guidelinePage #flowArea .flowList li:not(:last-of-type)::after{
		bottom: -25px;
		right: 0;
		left: 0;
		margin: auto;
		transform: rotate(135deg);
	}
	.guidelinePage #flowArea .flowList .tit{
		width: 100%;
		height: 60px;
		line-height: 60px;
	}


	/*
		よくある質問  faqPage
	-----------------------------------------------------------------------------------------------*/
	.faqPage #commonKvArea{
		background: url(../images/ph_kv_faq_sp.jpg) no-repeat center center / cover;
	}
	/* リスト */
	.faqPage #faqArea .list > li{
		padding: 30px 20px 20px;
	}
	/* 見出しタイトル */
	.faqPage #faqArea .titMain{
		font-size: 2.0rem;
		margin-bottom: 20px;
	}
	/* 質問エリア */
	.faqPage #faqArea .titArea{
		padding: 18px 30px 18px 40px;
	}
	/* プラスマイナス */
	.faqPage #faqArea .titArea::before,
	.faqPage #faqArea .titArea::after {
		width: 12px;
		right: 10px;
	}
	/* Q */
	.faqPage #faqArea .en{
		font-size: 2.0rem;
		top: 28px;
		left: 14px;
	}
	/* 質問タイトル */
	.faqPage #faqArea .tit{
		font-size: 1.5rem;
	}
	/* テキスト */
	.faqPage #faqArea .txt{
		padding: 15px;
	}








}