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

/*
	組織紹介  teamPage
-----------------------------------------------------------------------------------------------*/
.teamPage #commonKvArea{
	background: url(../images/ph_kv_team_pc.jpg) no-repeat center center / cover;
}
.teamPage .ctsArea{
	width: var(--w1100);
}
.teamPage #numberArea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px 0;
}
/* リスト */
.teamPage #numberArea li{
	display: flex;
	flex-direction: column;
	width: calc((100% / 2) - 15px);
	background-color: #ffffff;
	padding: 30px 30px 50px;
	border-radius: var(--brLarge);
	filter: var(--shadow);
}
/* タイトル_アンダーライン（グレー） */
.teamPage #numberArea li .tit_underline_gray{
	color: var(--clrBase);
	font-size: 2.6rem;
	letter-spacing: 0.2rem;
	margin-bottom: 15px;
}
/* テキスト */
.teamPage #numberArea li .txt{
	font-size: 1.6rem;
	line-height: 190%;
	text-align: justify;
	margin-bottom: auto;
}
@media print,screen and (min-width:813px){
	/* アニメーション  ずらし */
	.teamPage #numberArea li:nth-of-type(even).anmFadeUp.jsAnmStart{
		animation: anmFadeUp 1s ease 0.7s forwards;
	}
}

/* インタビューへのリンクボタン
============================== */
.interviewLink{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px 0;
	margin-top: 40px;
}
.interviewLink .btn{
	position: relative;
	display: flex;
	width: calc((100% / 2) - 10px);
	height: 40px;
	background-color: var(--clrBlack);
	color: var(--clrWhite);
	line-height: 40px;
	padding-left: 70px;
	transition: all 0.3s;
}
/* 三角 */
.interviewLink .btn::after{
	position: absolute;
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--clrWhite60);
	border-right: 1px solid var(--clrWhite60);
	position: absolute;
	top: 50%;
	right: 9px;
	transform: translateY(-50%) rotate(45deg);
}
@media print,screen and (min-width:813px){
	/* ホバー時 */
	.interviewLink .btn:hover{
		background-color: var(--clrBase);
	}
}
/* 画像 */
.interviewLink .img{
	position: absolute;
	width: 50px;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}
.interviewLink .img img{
	width: 100%;
}
.interviewLink .senior{
	font-size: 0.9rem;
	padding: 1px 5px 0 0;
}
.interviewLink .en{
	font-family: var(--fEn);
	font-weight: 600;
	font-size: 1.8rem;;
}


/*
	社員紹介  peopleDetailPage
-----------------------------------------------------------------------------------------------*/
/*
	KV
==================================*/
.peopleDetailPage #commonKvAreaL{
	position: relative;
}
.peopleDetailPage #commonKvAreaL::before{
	content: "";
	display: block;
	width: calc(50% + 170px);
	height: 47.15vw;
	min-height: 600px;
	position: absolute;
	right:0; 
	top:50px;
	border-radius: 10px 0 0 10px;
}
/* --------------- 各ページKV画像指定 --------------- */
.peopleDetailPage01 #commonKvAreaL::before{
	background: url(../images/ph_people_kv_ns_pc.jpg) no-repeat left center / cover;
}
.peopleDetailPage02 #commonKvAreaL::before{
	background: url(../images/ph_people_kv_km_pc.jpg) no-repeat left center / cover;
}
.peopleDetailPage03 #commonKvAreaL::before{
	background: url(../images/ph_people_kv_rm_pc.jpg) no-repeat left center / cover;
}
/* タイトルエリア */
.peopleDetailPage #commonKvAreaL .kvIn .titArea{
	gap: 5px;
	position: relative;
	z-index: 2;
}
/* メインキャッチ */
@media print, screen and (min-width: 813px) {
	.peopleDetailPage #commonKvAreaL .kvIn .titArea .txtBack span{
		line-height: 180%;
		font-size:3.6rem;
	}
}
/* 英語タイトル */
.peopleDetailPage .kvIn .num{
	font-family: var(--fEn);
	color: var(--clrBase);
	font-size: 2.0rem;
}
/* 名前 入社年 職種*/
.peopleDetailPage .kvIn .data{
	font-size: 1.5rem;
	padding-top: 25px;
}
.peopleDetailPage .kvIn .data .name{
	display: inline;
	font-family: var(--fEn);
	font-weight: 400;
	font-size: 3.2rem;
	letter-spacing: 0.2rem;
}
.peopleDetailPage .kvIn .job{
	background: #fff;
	width: fit-content;
	font-size: 1.4rem;
	padding-inline:15px;
	border-radius: 30px;
}
/*
	Questionリスト　About Job peopleAboutWrapper
==================================*/
.peopleAboutWrapper{
	padding-block: 160px;
}
.ctsW1100{
	width: var(--w1100);
	margin: 0 auto;
	padding-inline:30px;
	position:relative;
}
/* タイトル */
.peopleAboutWrapper .ctsW1100 .catchBase{
	top:-78px;
	right: -30px;
}
/* Questionリスト */
.peopleQLi{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 auto;
}
.peopleQLi > li{
	display: flex;
	flex-direction: column;
	align-items: center;
	filter: var(--shadow);
	border-radius: 10px;
	background: #fff;
	width: 510px;
}
/* bgの色指定 */
.peopleQLi li:nth-of-type(2),
.peopleQLi li:nth-of-type(3),
.peopleQLi li:nth-of-type(6),
.peopleQLi li:nth-of-type(7){
	background: #fffff0;
}
.peopleQLi .titQArea{
	display: flex;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding-right: 20px;
}
/* 左上の青ベタ番号 */
.peopleQLi .numQ{
	width: auto;
	background: var(--clrBase);
	border-radius: 10px 0 0 0 ;
	color: #fff;
	display: flex;
	align-items:flex-end;
	gap: 0 7px;
	font-size: 1.1rem;
	font-family: var(--fEn);
	letter-spacing: 0.02em;
	line-height: 100%;
	padding: 15px 15px 12px 10px;
	writing-mode: vertical-rl;
}
.peopleQLi .numQ span{
	font-size: 3.0rem;
	line-height: 100%;
	margin-left: -3px;
}
.peopleQLi .titQ{
  display: flex;
  align-items: center;
  justify-content:left;
	width: 100%;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 140%;
	border-bottom:#a2a19e 1px solid;
	padding: 30px 0 10px 0;
}
.peopleQLi .txtQ{
	font-size: 1.4rem;
	color: var(--clrBlack);
	padding:20px 20px 20px 30px;
	text-align: justify;
}
/* anm
============================== */
@media print, screen and (min-width:813px){
	.peopleAboutWrapper.clm02 .peopleQLi .jsAnmStart:nth-of-type(2),
	.peopleAboutWrapper.clm02 .peopleQLi .jsAnmStart:nth-of-type(4),
	.peopleAboutWrapper.clm02 .peopleQLi .jsAnmStart:nth-of-type(6){
		animation: anmFadeUp 1s ease 0.9s forwards;
	}
}
/*
	スケジュール　 peopleScheduleWrapper
==================================*/
.peopleScheduleWrapper{
	background:#fff;
}
.peopleScheduleWrapper .peopleScBg{
	width: 100%;
}
.peopleScheduleWrapper .ctsArea{
	position: relative;
	padding: 100px 30px 70px 30px;
}
.peopleScheduleWrapper .catchBase{
	position: absolute;
	top: -78px;
	left: 0;
	right: initial;
}
/* スケジュール */
.peopleScLi{
	display: flex;
	gap: 0 20px;
	color: var(--clrBlack);
	position: relative;
}
/* スケジュールに敷かれた青線 */
.peopleScLi::before{
	content: " ";
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--clrBase);
	position: absolute;
	top: 48px;
	left: 50%;
	transform: translateX(-50%);
}
.peopleScLi li{
	flex: 1;
}
/* 時間 */
.peopleScLi .timeSc{
	width: fit-content;
	font-size: 1.9rem;
	font-family: var(--fEn);
	font-weight: 600;
	line-height: 80%;
	margin-bottom: 40px;
	position: relative;
	padding: 5px;
	background: #000;
	color: #fff;
	left: 50%;
	transform: translateX(-50%);
}
/* 時間の下のグレー線 */
.peopleScLi .timeSc::before{
	content: " ";
	display: block;
	width: 1px;
	height: 10px;
	background-color: #a2a19e;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}
/* スケジュール青線の上の丸 */
.peopleScLi .timeSc::after{
	content: " ";
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid var(--clrBase);
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	bottom: -29px;
	left: 50%;
	transform: translateX(-50%);
}
/* スケジュールテキスト */
.peopleScLi .txtSc{
	color: var(--clrBlack);
	font-size: 1.0rem;
	line-height: 160%;
	text-align: justify;
}
/* pcで短い文章の時にセンター合わせ */
@media print, screen and (min-width:813px){
	.peopleScLi .txtSc.txtCenter{
		text-align: center;
	}
}

/*
	About you　 peopleAboutB
==================================*/
.peopleAboutWrapper.peopleAboutB{
	padding: 160px 0 80px 0;
	position: relative;
}
.peopleAboutWrapper.peopleAboutB::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	mix-blend-mode: multiply;
	background:var(--clrGrn) center bottom;
	width: 100%;
	height: 695px;
	z-index: 1;
}
.peopleAboutWrapper.peopleAboutB .ctsW1100{
	display: flex;
	justify-content: space-between;
	gap: 0 160px;
	z-index: 2;
}
.peopleAboutWrapper.peopleAboutB .peopleQLi{
	width: 510px;
	margin: 0;
}
/* peopleQLiのliのbg色指定 */
.peopleAboutWrapper.peopleAboutB .peopleQLi li:nth-of-type(3){
	background: #fff;
}
.peopleAboutWrapper.peopleAboutB .peopleQLi li:nth-of-type(even){
	background: #fffff0;
}
.peopleAboutWrapper.peopleAboutB .messageMovieBox{
	width: 360px;
	height: 640px;
	margin-top: 90px;
}
.peopleAboutWrapper.peopleAboutB .messageTit{
	position: absolute;
	background: #fff;
	font-size: 2.8rem;
	font-family: var(--fEn);
	font-weight: 500;
	padding: 0 20px;
	right: -30px;
	bottom: 70px;
	pointer-events: none;
}
/* 動画が再生中のときだけ .messageTit を非表示にする */
.myVideo.playing ~ .messageTit{
	display: none;
}


/*
	キャリアステップ  Career Step01
-----------------------------------------------------------------------------------------------*/
/*
	KV
==================================*/
.career_stepPage.careerStep01 #commonKvAreaL{
	background: url(../images/ph_career01_kv_pc.jpg) no-repeat center center / cover;
}
.career_stepPage.careerStep02 #commonKvAreaL{
	background: url(../images/ph_career02_kv_pc.jpg) no-repeat center center / cover;
}
.career_stepPage #commonKvAreaL .kvIn .titArea{
	gap:0px;
}
.career_stepPage #commonKvAreaL .kvIn{
	height: 38.52vw;
	min-height: 540px;
}
.career_stepPage .kvIn .num{
	color: var(--clrBase);
	font-family: var(--fEn);
	font-size: 1.7rem;
}
.career_stepPage .kvIn .tit{
	font-size: 3.4rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 150%;
}
/* Introduction 各装飾*/
.career_stepPage .kvIn .introArea{
	width: 400px;
	font-size: 1.1rem;
	padding-top:20px;
}
/* タイトル */
.career_stepPage .kvIn .titIntro{
	font-size: 1.8rem;
	font-weight: 600;
	font-family: var(--fEn);
	display: flex;
  align-items: center;
	letter-spacing: 0em;
}
.career_stepPage .kvIn .titIntro::after{
	content: "";
	border-top: 1px solid #000;
	width: 100%;
	margin-left: 8px;
}
/* テキスト */
.career_stepPage .kvIn .txtIntro{
	padding: 10px 0 15px 0;
	line-height: 150%;
	text-align: justify;
	border-bottom: 1px solid #000;

}
/* 名前　入社年　職種 */
.career_stepPage .kvIn .data{
	font-size: 1.2rem;
	padding-top:15px;
}
.career_stepPage .kvIn .data span{
	font-family: var(--fEn);
	font-size: 2.5rem;
	display: inline;
	font-weight: 400;
}
.career_stepPage .kvIn .job{ 
	font-size: 1.2rem;
	background: #fff;
	border-radius: 30px;
	width: fit-content;
	padding-inline: 10px;
	margin-top:5px;
}
/*
	stepBox
==================================*/
#careerStepArea .ctsArea{
	display: flex;
	flex-direction: column;
	gap: 120px;
	padding: 120px 30px 120px 30px;
}
.career_stepPage .stepBox {
	position: relative;
	display: flex;
	justify-content: space-between;
}
/* step01〜05　タイトル */
.career_stepPage .stepBox .catchBase{
	position: absolute;
	right:-30px;
	top:-60px;
}
/* 左の年数エリア */
.career_stepPage .stepBox .year{
	position: relative;
	text-align: right;
	font-family: var(--fEn);
	font-size: 7.8rem;
	font-weight: 600;
	width: 300px;
}
.career_stepPage .stepBox .year span{
	position: absolute;
	top:-40px;
	right: 0;
}
/* 右のエリア */
.career_stepPage .stepBox dl{
	width: 700px;
	position: relative;
}
/* ラストのエリア */
.career_stepPage .stepBox dl.last .careerStepLi .txt,
.career_stepPage .stepBox dl.last .careerStepLi li:nth-last-of-type(1){
	padding: 0;
}
.career_stepPage .stepBox dl.last::after{
	content: none;
}
.career_stepPage .stepBox dt.txtBack{
	position: relative;
}
/* 丸 */
.career_stepPage .stepBox .year span::before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 26px;
	height: 26px;
	border: 4px solid var(--clrBase);
	background-color: #fff;
	border-radius: 50%;
	right:-75px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
/* タイムラインの縦線 */
.career_stepPage .stepBox .timeline::after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 4px;
	height: 0;
	background: var(--clrBase);
	top: 34px;
	left: -80px;
	transition: height 1.5s ease-in;
}
.career_stepPage .stepBox .timeline.anmBar::after{
	height: calc(100% + 120px);
}
/* 点線 */
.career_stepPage .stepBox.dotLine dl::after{
	background-color:transparent;
	background-image :linear-gradient(to top, var(--clrBase), var(--clrBase) 4px, transparent 4px, transparent 8px); 
  background-size: 4px 8px;          
  background-position: left bottom; 
  background-repeat: repeat-y;
}
.career_stepPage .stepBox .careerStepLi{
	padding-block: 30px;
}
.career_stepPage .stepBox .careerStepLi li:nth-of-type(2){
	padding-top:20px;
}
.career_stepPage .stepBox .careerStepLi .tit{
	font-size: 2.2rem;
	font-weight: 700;
}
.career_stepPage .stepBox .careerStepLi .tit span{
	display: block;
	width: fit-content;
}
.career_stepPage .stepBox .careerStepLi .tit::after,
.career_stepPage .stepBox .careerStepLi .tit span::after{
	content: "";
	display: block;
	background-color:var(--clrWhite);
	width: 100%;
}
.career_stepPage .stepBox .careerStepLi .tit::after{
	height: 1px;
}
.career_stepPage .stepBox .careerStepLi .tit span::after{
	height: 3px;
}
.career_stepPage .stepBox .careerStepLi .txt{
	padding-top: 15px;
	text-align: justify;
}
/* career Step02の画像回り込みのみに使用 */
.careerStepLi .txtPhoto{
	display: flex;
	justify-content: space-between;
}
.careerStepLi .txtPhoto .txt{
	width: 310px;
}
.careerStepLi .txtPhoto img{
	padding-top: 20px;
	width: 360px;
	height: 270px;
}


@media screen and (max-width:812px){
	/*
		組織紹介  teamPage
	-----------------------------------------------------------------------------------------------*/
	.teamPage #commonKvArea{
		background: url(../images/ph_kv_team_sp.jpg) no-repeat center center / cover;
	}
	/* リスト */
	.teamPage #numberArea li{
		width: 100%;
		padding: 20px 20px 40px;
	}
	/* タイトル_アンダーライン（グレー） */
	.teamPage #numberArea li .tit_underline_gray{
		font-size: 2.0rem;
	}
	/* テキスト */
	.teamPage #numberArea li .txt{
		font-size: 1.5rem;
		line-height: 160%;
	}

	/* インタビューへのリンクボタン
	============================== */
	.interviewLink{
		margin-top: 30px;
	}
	.interviewLink .btn{
		width: 240px;
		margin: 0 auto;
		padding-left: 80px;
	}
	/* 画像 */
	.interviewLink .img{
		left: 15px;
	}


	/*
		社員紹介  peopleDetailPage
	-----------------------------------------------------------------------------------------------*/
	/*
		KV
	==================================*/
	.peopleDetailPage #commonKvAreaL{
		padding-top: 70px;
	}
	.peopleDetailPage #commonKvAreaL::before{
		width: calc(50% + 83px);
		min-height: 340px;
		right:0; 
		top:90px;
	}

	/* --------------- 各ページKV画像指定 --------------- */
	.peopleDetailPage01 #commonKvAreaL::before{
		background: url(../images/ph_people_kv_ns_sp.jpg) no-repeat left center / cover;
	}
	.peopleDetailPage02 #commonKvAreaL::before{
		background: url(../images/ph_people_kv_km_sp.jpg) no-repeat left center / cover;
	}
	.peopleDetailPage03 #commonKvAreaL::before{
		background: url(../images/ph_people_kv_rm_sp.jpg) no-repeat left center / cover;
	}
	/* タイトルエリア */
	.peopleDetailPage #commonKvAreaL .kvIn .titArea{
		gap:10px;
		padding-top: 70px;
	}
	@media screen and (orientation: landscape) and (max-width: 768px){
		/* スマホ横向きだけに適用されるCSS */
		.peopleDetailPage01 #commonKvAreaL::before{
			background: url(../images/ph_people_kv_ns_pc.jpg) no-repeat left center / cover;
		}
		.peopleDetailPage02 #commonKvAreaL::before{
			background: url(../images/ph_people_kv_km_pc.jpg) no-repeat left center / cover;
		}
		.peopleDetailPage03 #commonKvAreaL::before{
			background: url(../images/ph_people_kv_rm_pc.jpg) no-repeat left center / cover;
		}
		.peopleDetailPage #commonKvAreaL::before{
			width: calc(50% + 150px);
			min-height: 340px;
			right:0; 
			top:90px;
		}
		.peopleDetailPage #commonKvAreaL .kvIn{
			height: 42.85vw;
			min-height: 340px;
		}
		/* タイトルエリア */
		.peopleDetailPage #commonKvAreaL .kvIn .titArea{
			padding-top: 30px;
		}
	}
	/* メインキャッチ */
	.peopleDetailPage #commonKvAreaL .kvIn .titArea .txtBack span{
		font-size: 2.1rem;
		line-height: 150%;
	}
	/* 英語タイトル */
	.peopleDetailPage .kvIn .num{
		font-size: 1.2rem;
	}
	/* 名前 入社年 職種*/
	.peopleDetailPage .kvIn .data{
		font-size: 1.0rem;
		padding-top: 10px;
	}
	.peopleDetailPage .kvIn .data .name{
		font-size: 2.0rem;
	}
	.peopleDetailPage .kvIn .job{
		font-size: 1.0rem;
		padding: 1px 6px;
	}

	/*
		Questionリスト　About Job peopleAboutWrapper
	==================================*/
	.peopleAboutWrapper{
		padding-block: 80px;
	}
	.ctsW1100{
		padding-inline:20px;
		max-width: 500px;
	}
	/* タイトル */
	.peopleAboutWrapper .ctsW1100 .catchBase{
		width: 248px;
		top:-44px;
		right: 40px;
	}
	.peopleQLi > li{
		width: 100%;
	}
	/* bgの色指定 */
	.peopleQLi li:nth-of-type(2),
	.peopleQLi li:nth-of-type(4),
	.peopleQLi li:nth-of-type(6){
		background: #fffff0;
	}
	.peopleQLi li:nth-of-type(3),
	.peopleQLi li:nth-of-type(7){
		background: #fff;
	}
	.peopleQLi .titQArea{
		gap: 20px;
	}
	/* 左上の青ベタ番号 */
	.peopleQLi .numQ{
		font-size: 1.0rem;
		padding: 8px 6px 8px 5px;
		gap:0 4px;
	}
	.peopleQLi .numQ span{
		font-size: 1.5rem;
		margin-left: -2px;
	}
	.peopleQLi .titQ{
		font-size: 1.6rem;
		padding-block:10px;
	}
	.peopleQLi .txtQ{
		padding:15px 20px 20px 40px;
	}
	/*
		スケジュール　 peopleScheduleWrapper
	==================================*/
	.peopleScheduleWrapper .ctsArea{
		padding: 50px 20px 50px 20px;
	}
	.peopleScheduleWrapper .catchBase{
		top: -37px;
		left: 10px;
	}
	/* スケジュール */
	.peopleScLi{
		flex-direction:column;
		gap:20px 0;
	}
	/* スケジュールに敷かれた青線 */
	.peopleScLi::before{
		width: 3px;
		height: calc(100% + 24px);
		top: -12px;
		left: 9px;
		transform: translateX(0);
	}
	.peopleScLi li{
		padding-left: 30px;
	}
	/* 時間 */
	.peopleScLi .timeSc{
		width: 54px;
		text-align: center;
		font-size: 1.5rem;
		left: 0;
		transform: translateX(0);
		margin-bottom: 5px;
	}
	/* 時間の下のグレー線 */
	.peopleScLi .timeSc::before{
		width: 10px;
		height: 1px;
		bottom: 10px;
		left: -10px;
		transform: translateX(0);
	}
	/* スケジュール青線の上の丸 */
	.peopleScLi .timeSc::after{
		width: 13px;
		height: 13px;
		border: 3px solid var(--clrBase);
		bottom: 4px;
		left: -26px;
		transform: translateX(0);
	}
	/* スケジュールテキスト */
	.peopleScLi .txtSc{
		font-size: 1.2rem;
	}
	/*
		About you　 peopleAboutB
	==================================*/
	.peopleAboutWrapper.peopleAboutB{
		padding: 80px 0 40px 0;
	}
	.peopleAboutWrapper.peopleAboutB::after{
		height: 1025px;
	}
	.peopleAboutWrapper.peopleAboutB .ctsW1100{
		flex-direction:column;
		gap: 0x;
	}
	.peopleAboutWrapper.peopleAboutB .peopleQLi{
		width: 100%;
	}
	.peopleAboutWrapper.peopleAboutB .messageMovieBox{
		width: 200px;
		height: 100%;
		margin: 40px auto 0;
	}
	.peopleAboutWrapper.peopleAboutB .messageTit{
		font-size: 1.8rem;
		padding: 0px 10px;
		right: -15px;
		bottom: 30px;
	}


	/*
		キャリアステップ  Career Step
	-----------------------------------------------------------------------------------------------*/
	/*
		KV
	==================================*/
	.career_stepPage.careerStep01 #commonKvAreaL{
		background: url(../images/ph_career01_kv_sp.jpg) no-repeat center center / cover;
	}
	.career_stepPage.careerStep02 #commonKvAreaL{
		background: url(../images/ph_career02_kv_sp.jpg) no-repeat center center / cover;
	}
	.career_stepPage #commonKvAreaL .kvIn .titArea{
		justify-content: end;
	}
	.career_stepPage #commonKvAreaL .kvIn{
		height: 115.39vw;
		min-height: 450px;
	}
	.career_stepPage .kvIn .num{
		font-size: 1.2rem;
	}
	.career_stepPage .kvIn .tit{
		font-size: 2.0rem;
		line-height: 130%;
	}
	@media screen and (orientation: landscape) and (max-width: 768px){
		/* スマホ横向きだけに適用されるCSS */
		.career_stepPage.careerStep01 #commonKvAreaL{
			background: url(../images/ph_career01_kv_pc.jpg) no-repeat center right -100px / cover;
		}
		.career_stepPage.careerStep02 #commonKvAreaL{
			background: url(../images/ph_career02_kv_pc.jpg) no-repeat center right -100px / cover;
		}
		.career_stepPage #commonKvAreaL .kvIn{
			height: 42.85vw;
			min-height: 416px;
		}
		/* タイトルエリア */
		.career_stepPage #commonKvAreaL .kvIn .titArea{
			padding-top: 100px;
			justify-content: initial;
		}
	}
	/* Introduction 各装飾*/
	.career_stepPage .kvIn .introArea{
		width: auto;
		font-size: 1.0rem;
		margin:20px -20px 0 -20px;
		padding:15px 20px 20px 20px;
		order:3;
		background:rgb(255 255 255 / 80%);
	}
	/* タイトル */
	.career_stepPage .kvIn .titIntro{
		font-size: 1.0rem;
	}
	/* 名前　入社年　職種 */
	.career_stepPage .kvIn .data{
		font-size: 1.0rem;
		order:1;
	}
	.career_stepPage .kvIn .data span{
		font-size: 2.0rem;
	}
	.career_stepPage .kvIn .job{ 
		font-size: 1.0rem;
		order:2;
	}
	/*
		stepBox
	==================================*/
	#careerStepArea .ctsArea{
		gap: 80px;
		padding: 75px 20px 40px 60px;
	}
	.career_stepPage .stepBox {
		flex-direction: column;
		gap: 20px;
	}
	/* step01〜05　タイトル */
	.career_stepPage .stepBox .catchBase{
		right:-40px	;
		top:-40px;
		width: 187px;
	}
	/* 左の年数エリア */
	.career_stepPage .stepBox .year{
		text-align: left;
		font-size: 4.0rem;
		width: auto;
	}
	.career_stepPage .stepBox .year span{
		top:-40px;
		right: auto;
		left: 0;
	}
	/* 右のエリア */
	.career_stepPage .stepBox dl{
		width: 100%;
	}
	/* 丸 */
	.career_stepPage .stepBox .year span::before{
		width: 13px;
		height: 13px;
		border: 3px solid var(--clrBase);
		left: -35px;
	}
	/* タイムラインの縦線 */
	.career_stepPage .stepBox .timeline::after{
		width: 3px;
		left: -30px;
		top:-26px;
	}
	.career_stepPage .stepBox .timeline.anmBar::after{
		height: calc(100% + 100px);
	}
	/* 点線 */
	.career_stepPage .stepBox.dotLine dl::after{
		background-image :linear-gradient(to top, var(--clrBase), var(--clrBase) 3px, transparent 3px, transparent 6px); 
		background-size: 3px 6px;          
	}
	.career_stepPage .stepBox .careerStepLi{
		padding-block: 20px;
	}
	.career_stepPage .stepBox .careerStepLi .tit{
		font-size: 1.8rem;
	}
	/* career Step02の画像回り込みのみに使用 */
	.careerStepLi .txtPhoto{
		display: block;
	}
	.careerStepLi .txtPhoto .txt{
		width: 100%;
	}
	.careerStepLi .txtPhoto img{
		padding-top: 20px;
		width: 100%;
		height: 100%;
	}
}