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

/*
	働く環境を知る  扉ページ  environmentPage
-----------------------------------------------------------------------------------------------*/

/*
	働く環境の特徴  workstylePage
-----------------------------------------------------------------------------------------------*/
/* kvエリア
============================== */
.workstylePage #commonKvArea{
	background: url(../images/ph_kv_workstyle_pc.jpg) no-repeat center center / cover;
}
.workstylePage .ctsArea{
	width: var(--w1100);
}

/* 数字で見る #numberArea
============================== */
.workstylePage #numberArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 0;
}
.workstylePage #numberArea li{
	position: relative;
	width: calc((100% - 32px ) / 3);
	background-color: #ffffff;
	border-radius: var(--brSmall);
	filter: var(--shadow);
	padding: 20px;
}
@media print,screen and (min-width:813px){
	.workstylePage #numberArea li:nth-of-type(4){
		width: calc(((100% - 8px) / 3) * 2);
	}
}
/* ナンバー */
.workstylePage #numberArea .num{
	position: absolute;
	width: 90px;
	height: 20px;
	background-color: var(--clrBlack);
	color: var(--clrWhite);
	font-family: var(--fEn);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 20px;
	text-align: center;
	top: 35px;
	left: -35px;
	transform: rotate(90deg);
}
/* タイトル */
.workstylePage #numberArea .tit{
	font-weight: 600;
	font-size: 2.0rem;
	color: var(--clrBase);
	text-align: center;
	border-bottom: 1px dashed var(--clrBlack20);
	margin: 0 0 16px 15px;
	padding: 0 15px 12px 0;
}
/* 画像スペース */
.workstylePage #numberArea .img{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	gap: 20px;
}
/* 画像スペース */
.workstylePage #numberArea .img img{
	width: 280px;
}
/* 年度 */
.workstylePage #numberArea .year{
	font-size: 1.2rem;
	text-align: right;
	color: #7d7c77;
	margin-top: 10px;
}
/* アニメーション  ずらし */
@media print,screen and (min-width:813px){
	.workstylePage #numberArea li:nth-of-type(2).anmFadeUp.jsAnmStart,
	.workstylePage #numberArea li:nth-of-type(7).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 0.7s forwards;
	}
	.workstylePage #numberArea li:nth-of-type(3).anmFadeUp.jsAnmStart,
	.workstylePage #numberArea li:nth-of-type(8).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 0.9s forwards;
	}
	.workstylePage #numberArea li:nth-of-type(4).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 1.1s forwards;
	}
	.workstylePage #numberArea li:nth-of-type(5).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 1.3s forwards;
	}
}

/* Voice  #voiceArea
============================== */
.workstylePage #voiceArea{
	margin-top: 90px;
}
/* タイトルエリア */
.workstylePage #voiceArea .titArea{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.workstylePage #voiceArea .titArea .sub{
	width: 100%;
	font-weight: 600;
	font-size: 1.3rem;
	text-align: center;
	padding-top: 10px;
	border-top: 1px solid var(--clrBlack60);
}
/* 共通タイトル */
.workstylePage #voiceArea .titBox{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--clrBase);
	color: var(--clrWhite);
	width: 450px;
	height: 210px;
	font-weight: 600;
	font-size: 2.4rem;
	z-index: 2;
}
@media print,screen and (min-width:813px){
	.workstylePage #voiceArea li:nth-of-type(even) .titBox{
		right: 0;
	}
}
/* Question */
.workstylePage #voiceArea .titBox .question{
	position: absolute;
	top: -60px;
	left: -22px;
}
/* リスト */
.workstylePage #voiceArea .list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 60px;
	margin-top: 70px;
}
.workstylePage #voiceArea li{
	position: relative;
}
@media print,screen and (min-width:813px){
	/* 点線 */
	.workstylePage #voiceArea li:not(:first-of-type)::after{
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 2px;
		background: repeating-linear-gradient(to right, var(--clrBlack60) 0 2px, /* 点の色とサイズ */ transparent 2px 6px /* 点の後ろに間隔をあける */);
		top: -110px;
		right: 0;;
	}
}
/* 画像エリア */
.workstylePage #voiceArea li .img{
	position: relative;
	width: 1400px;
	margin: 0 auto;
	left: -180px;
	top: 0;
	z-index: 1;
}
@media print,screen and (min-width:813px){
	.workstylePage #voiceArea li .img img{
		position: absolute;
		top: -12px;
		left: 0;
	}
	/* 01  会社の好きなところは？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(1) .img{
		height: 964px;
	}
	/* 02  セントラル短資にはどんな人が多い？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(2) .img{
		height: 754px;
	}
	/* 03  退社後や休日の過ごし方は？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(3) .img{
		height: 901px;
	}
	/* 04  あなたはチームプレイ派？個人で成果を上げる派？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(4) .img{
		height: 930px;
	}
	/* 05  入社を決めた1番のポイントは？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(5) .img{
		height: 1123px;
	}
	/* 06  お取引先や同僚から言われて印象に残っている言葉は？
	============================== */
	.workstylePage #voiceArea li:nth-of-type(6) .img{
		height: 841px;
	}
	/* アニメーション  ずらし */
	.workstylePage #voiceArea li .img img:nth-of-type(1).anmFadeIn.jsAnmStart{
		animation: anmFadeIn 1.6s ease 0.5s forwards;
	}
	.workstylePage #voiceArea li .img img:nth-of-type(2).anmFadeIn.jsAnmStart{
		animation: anmFadeIn 1.6s ease 1.0s forwards;
	}
	.workstylePage #voiceArea li .img img:nth-of-type(3).anmFadeIn.jsAnmStart{
		animation: anmFadeIn 1.6s ease 1.5s forwards;
	}
}


/*
	研修／福利厚生  education_benefitsPage
-----------------------------------------------------------------------------------------------*/
/* kvエリア
============================== */
.education_benefitsPage #commonKvArea{
	background: url(../images/ph_kv_education_benefits_pc.jpg) no-repeat center center / cover;
}
/* 書き換え */
.education_benefitsPage #commonKvArea .kvIn .tit .en{
	filter: initial;
}
.education_benefitsPage .ctsArea{
	width: var(--w1100);
}
.education_benefitsPage .leadTxtBox{
	padding-bottom: 40px;
}
.education_benefitsPage .tit_underline_gray{
	font-size: 3.0rem;
	margin: 0 auto 40px;
}
.education_benefitsPage #trainingArea{
	margin-bottom: 120px;
}
.education_benefitsPage .list{
	display: flex;
	flex-direction: column;
}

/* 研修について  福利厚生  共通部分
============================== */
.education_benefitsPage #trainingArea .list > li,
.education_benefitsPage #welfareArea .welfarelist{
	background-color: #ffffff;
	padding: 50px 50px 80px;
	border-radius: var(--brSmall);
	filter: var(--shadow);
	will-change: transform;/* iOSで再描画対象として強制的に保持 */
	transform: translateZ(0);/* iOSが要素をGPU合成レイヤーに載せ直す */
	overflow: hidden;
}
.education_benefitsPage .listIn li .tit{
	color: var(--clrBase);
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
}
.education_benefitsPage .listIn li .txt{
	text-align: justify;
}

/* 研修について  共通部分  #trainingArea
============================== */
.education_benefitsPage #trainingArea .list{
	gap: 60px;
}

/* 入社前から入社後  #flowArea
============================== */
.education_benefitsPage #flowArea .listIn{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
/* グラデ縦線 */
.education_benefitsPage #flowArea .listIn::after{
	position: absolute;
	content: "";
	display: block;
	background: linear-gradient(to bottom, #c882c3 20%, #84a3f9 80%);
	width: 16px;
	height: calc(100% + 100px);
	top: 20px;
	left: 175px;
}
/* リスト */
.education_benefitsPage #flowArea .listIn li{
	display: flex;
	padding: 0 60px;
}
/* タイトル */
.education_benefitsPage #flowArea .listIn li .tit{
	position: relative;
	display: inline-block;
	font-size: 2.4rem;
	min-width: 80px;
	text-align: right;
	white-space: nowrap;
	margin-right: 85px;
}
/* 画像 */
.education_benefitsPage #flowArea .listIn li .img{
	min-width: 260px;
}
.education_benefitsPage #flowArea .listIn li .img img{
	width: 100%;
}
/* 横線 */
.education_benefitsPage #flowArea .listIn li .tit::after{
	position: absolute;
	content: "";
	display: block;
	background-color: var(--clrBlack);
	width: 40px;
	height: 1px;
	top: 20px;
	left: 102px;
	z-index: 1;
}
.education_benefitsPage #flowArea .listIn li .txt{
	margin-right: 60px;
	padding-top: 6px;
}

/* キャリアステップ  #carrierArea
============================== */
/* リスト */
.education_benefitsPage #carrierArea .listIn{
	display: flex;
	margin-bottom: 30px;
}
.education_benefitsPage #carrierArea .listIn li{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 360px;
	height: 200px;
	margin-right: -50px;
	
}
/* タイトル置き換え */
.education_benefitsPage #carrierArea .listIn li .tit{
	font-weight: 600;
	font-size: 1.6rem;
	color: var(--clrWhite);
	padding-left: 40px;
}
/* 01 */
.education_benefitsPage #carrierArea .listIn li:nth-of-type(1) .tit{
	color: initial;
	padding-left: initial;
}
.education_benefitsPage #carrierArea .listIn li:nth-of-type(1){
	background-color: #d6dcfa;
	width: 320px;
	clip-path: polygon(0% 0%, 83% 0%, 100% 50%, 83% 100%, 0% 100%);
}
/* 02_03 共通 */
.education_benefitsPage #carrierArea .listIn li:nth-of-type(2),
.education_benefitsPage #carrierArea .listIn li:nth-of-type(3){
	clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}
/* 02 */
.education_benefitsPage #carrierArea .listIn li:nth-of-type(2){
	background-color: #6f84ed;
}
/* 03 */
.education_benefitsPage #carrierArea .listIn li:nth-of-type(3){
	background-color: var(--clrBase);
}
/* テキスト */
.education_benefitsPage #trainingArea .txt{
	text-align: justify;
}

/* スキルアップ支援  #skillArea
============================== */
/* リスト */
.education_benefitsPage #skillArea .listIn{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 50px 37px;
}
.education_benefitsPage #skillArea .listIn li{
	position: relative;
	width: calc((100% / 3) - 25px);
}
.education_benefitsPage #skillArea .listIn .num,
.education_benefitsPage #skillArea .listIn .num::after{
	position: absolute;
	top: 0;
	left: 0;
}
/* 番号 */
.education_benefitsPage #skillArea .listIn .num{
	font-family: var(--fEn);
	font-weight: 400;
	font-size: 2.0rem;
	color: var(--clrWhite);
	padding: 2px 5px;
	z-index: 1;
}
/* 番号三角部分 */
.education_benefitsPage #skillArea .listIn .num::after{
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: linear-gradient(to bottom, #c882c3 20%, #84a3f9 80%);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	transform: rotate(90deg);
	z-index: -1;
}
.education_benefitsPage #skillArea .listIn .tit{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 140px;
	background-color: var(--clrWhite);
	margin-bottom: 15px;
}
.education_benefitsPage #skillArea .listIn .txt{
	font-size: 1.3rem;
}

/* 福利厚生  #welfareArea
============================== */
.education_benefitsPage #welfareArea .welfarelist{
	padding-bottom: 70px;
}
.education_benefitsPage #welfareArea .list > li:not(:last-of-type){
	border-bottom: 1px solid var(--clrBlack20);
	margin-bottom: 35px;
	padding-bottom: 35px;
}
.education_benefitsPage #welfareArea li .listIn{
	display: flex;
	justify-content: center;
	gap: 40px;
}
.education_benefitsPage #welfareArea li .listIn li{
	display: flex;
	align-items: center;
	width: calc((100% / 4) - 30px);
	flex-direction: column;
}
.education_benefitsPage #welfareArea li .listIn li .tit{
	margin-top: 15px;
	margin-bottom: 15px;
}
.education_benefitsPage #welfareArea li .listIn li .txt{
	font-size: 1.3rem;
	line-height: 160%;
}
.education_benefitsPage #welfareArea li .listIn li .img{
	width: 160px;
}
.education_benefitsPage #welfareArea li .listIn li .img img{
	width: 100%;
}


@media screen and (max-width:812px){
	/*
		働く環境の特徴  workstylePage
	-----------------------------------------------------------------------------------------------*/
	/* kvエリア
	============================== */
	.workstylePage #commonKvArea{
		background: url(../images/ph_kv_workstyle_sp.jpg) no-repeat center center / cover;
	}
	/* 画像スペース */
	.workstylePage #numberArea .img img{
		width: 220px;
	}

	/* 数字で見る #numberArea
	============================== */
	.workstylePage #numberArea li{
		width: 100%;
		background-color: #ffffff;
	}
	.workstylePage #numberArea li:nth-of-type(4) .img{
		flex-direction: column;
		margin-top: 25px;
		padding-left: 30px;
		width: 300px;
	}
	/* タイトル */
	.workstylePage #numberArea .tit{
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	
	/* Voice  #voiceArea
	============================== */
	.workstylePage #voiceArea{
		margin-top: 60px;
	}
	/* タイトルエリア */
	.workstylePage #voiceArea .titArea .main{
		width: 180px;
	}
	/* 共通タイトル */
	.workstylePage #voiceArea .titBox{
		position: relative;
		width: 100vw;
		max-width: 500px;
		height: auto;
		min-height: 130px;
		font-size: 1.8rem;
		padding: 40px 15px;
		margin-bottom: 20px;
		left: -20px;
	}
	/* Question */
	.workstylePage #voiceArea .titBox .question{
		width: 130px;
		top: -38px;
		left: initial;
		right: 10px;
	}
	/* リスト */
	.workstylePage #voiceArea .list{
		gap: 60px;
		margin-top: 40px;
	}
	/* 画像エリア */
	.workstylePage #voiceArea li .img{
		width: calc(100% + 40px);
		top: initial;
		left: -20px;
	}
	.workstylePage #voiceArea li .img img:not(:first-of-type){
		display: none;
	}


	/*
		研修／福利厚生  education_benefitsPage
	-----------------------------------------------------------------------------------------------*/
	/* kvエリア
	============================== */
	.outlinePage #commonKvArea{
		background: url(../images/ph_kv_education_benefits_sp.jpg) no-repeat center center / cover;
	}
	/* 書き換え */
	.education_benefitsPage .tit_underline_gray{
		font-size: 2.0rem;
		margin-bottom: 30px;
	}
	.education_benefitsPage .leadTxtBox{
		padding-bottom: 30px;
	}
	.education_benefitsPage #trainingArea{
		margin-bottom: 60px;
	}

	/* 研修について  福利厚生  共通部分
	============================== */
	.education_benefitsPage #trainingArea .list > li,
	.education_benefitsPage #welfareArea .welfarelist{
		padding: 30px 20px 40px;
	}
	.education_benefitsPage .listIn li .tit{
		font-size: 1.6rem;
	}

	/* 研修について  共通部分  #trainingArea
	============================== */
	.education_benefitsPage #trainingArea .list{
		gap: 40px;
	}

	/* 入社前から入社後  #flowArea
	============================== */
	/* グラデ縦線 */
	.education_benefitsPage #flowArea .listIn::after{
		width: 14px;
		left: 10px;
	}
	/* リスト */
	.education_benefitsPage #flowArea .listIn li{
		flex-direction: column;
		padding-right: 10px;
	}
	/* タイトル */
	.education_benefitsPage #flowArea .listIn li .tit{
		font-size: 2.0rem;
		min-width: initial;
		text-align: left;
	}
	/* 画像 */
	.education_benefitsPage #flowArea .listIn li .img{
		width: 100%;
		max-width: 300px;
		min-width: initial;
	}
	/* 横線 */
	.education_benefitsPage #flowArea .listIn li .tit::after{
		width: 30px;
		left: -50px;
	}
	.education_benefitsPage #flowArea .listIn li .txt{
		margin-right: initial;
		margin-bottom: 15px;
		padding-right: initial;
	}

	/* キャリアステップ  #carrierArea
	============================== */
	/* リスト */
	.education_benefitsPage #carrierArea .listIn{
		flex-direction: column;
		width: 100%;
		height: initial;
		margin-bottom: 50px;
	}
	.education_benefitsPage #carrierArea .listIn li{
		width: 100%;
		height: 180px;
		margin-bottom: -24px;
	}
	/* タイトル置き換え */
	.education_benefitsPage #carrierArea .listIn li .tit{
		padding-top: 15px;
		padding-left: initial;
	}
	/* 01 */
	.education_benefitsPage #carrierArea .listIn li:nth-of-type(1) .tit{
		padding-top: initial;
	}
	.education_benefitsPage #carrierArea .listIn li:nth-of-type(1){
		width: 100%;
		height: 130px;
		clip-path: polygon(0 0, 100% 0, 100% 79%, 50% 100%, 0 79%);
		margin-right: initial;
	}
	/* 02_03 共通 */
	.education_benefitsPage #carrierArea .listIn li:nth-of-type(2),
	.education_benefitsPage #carrierArea .listIn li:nth-of-type(3){
		clip-path: polygon(100% 0%, 100% 85%, 50% 100%, 0 85%, 0% 0, 50% 15%);
	}

	/* スキルアップ支援  #skillArea
	============================== */
	/* リスト */
	.education_benefitsPage #skillArea .listIn{
		gap: 30px;
	}
	.education_benefitsPage #skillArea .listIn li{
		width: 100%;
	}

	/* 福利厚生  #welfareArea
	============================== */
	.education_benefitsPage #welfareArea .list > li:not(:last-of-type){
		border-bottom: 1px solid var(--clrBlack20);
		margin-bottom: 35px;
		padding-bottom: 35px;
	}
	.education_benefitsPage #welfareArea li .listIn{
		flex-wrap:wrap;
		gap: 20px;
	}
	.education_benefitsPage #welfareArea li .listIn li{
		width: calc((100% / 2) - 10px);
	}
	.education_benefitsPage #welfareArea li .listIn li .tit{
		line-height: 140%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.education_benefitsPage #welfareArea li .listIn li .txt{
		font-size: 1.3rem;
		line-height: 160%;
	}
	.education_benefitsPage #welfareArea li .listIn li .img{
		width: 80%;
	}

}