@charset "UTF-8";

/*
	共通
-----------------------------------------------------------------------------------------------*/
.pageWork #ctsWrapper,
.pageWorkDetail #ctsWrapper{
	padding-bottom: 0;
}
.pageWork #ctsWrapper > .ctsArea,
.pageWorkDetail #ctsWrapper > .ctsArea{
	padding-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
}
/* 画像 */
.depPh{
	position: relative;
}
.depPeople{
	position: absolute;
	transform: translateX(-50%);
	bottom: 0;
	left: 50%;
}
.depBg{
	width: 100%;
	border-radius: var(--bdrs30);
}
/* 写真上テキスト */
.depHead{
	text-align: left;
	position: absolute;
}
.depHeadTxt{
	font-weight: var(--fwBlack);
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	line-height: 2.0;
	letter-spacing: .1rem;
	color: #fff;
	background: var(--colorBlack);
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/*
	職種紹介
-----------------------------------------------------------------------------------------------*/
.pageWorkIndex #ctsWrapper > .ctsArea{
	display: flex;
	gap: max(120px, calc(120 / var(--baseWidth) * 100vw));
	flex-direction: column;
}

/* 価値創出の循環
============================== */
/* 画像 */
.cycleImg{
	max-width: max(990px, calc(990 / var(--baseWidth) * 100vw));
	margin: 0 auto;
}

/* 職種・部署紹介
============================== */
/* リスト */
.introList{
	display: flex;
	gap: max(60px, calc(60 / var(--baseWidth) * 100vw)) max(30px, calc(30 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
}
.introList li{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc((100% - max(60px, calc(60 / var(--baseWidth) * 100vw))) / 3);
}
/* 画像 */
.introImgBox{
	position: relative;
}
.introPh{
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
	border-radius: var(--bdrs30);
	overflow: hidden;
}
.introItem{
	width: auto;
	max-height: max(90px, calc(90 / var(--baseWidth) * 100vw));
	position: absolute;
	right: max(20px, calc(20 / var(--baseWidth) * 100vw));
	bottom: 0;
}
/* テキスト */
.introBox{
	width: 100%;
	padding-inline: max(20px, calc(20 / var(--baseWidth) * 100vw));
	text-align: left;
}
.introDep{
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.introTxt{
	margin-top: max(5px, calc(5 / var(--baseWidth) * 100vw));
}
/* 各部署カラー設定 */
.administration .introDep{
	color: var(--colorRed);
}
.marketing .introDep{
	color: var(--colorOrange);
}
.sales .introDep{
	color: var(--colorGreen);
}
.contract-dev .introDep{
	color: var(--colorLightBlue);
}
.policy-maintenance .introDep{
	color: var(--colorBlue);
}
.customer-support .introDep{
	color: var(--colorPurple);
}
.product-dev .introDep{
	color: var(--colorFontYellow);
}
/* ボタン */
.btnBox{
	margin-top: max(30px, calc(30 / var(--baseWidth) * 100vw));
}

/* 私たちが大切にしている働き方
============================== */
.cultureBox{
	padding: max(50px, calc(50 / var(--baseWidth) * 100vw)) max(110px, calc(110 / var(--baseWidth) * 100vw));
	background: var(--bgCream);
	border-radius: var(--bdrs30);
}
.cultureList{
	display: flex;
	gap: max(35px, calc(35 / var(--baseWidth) * 100vw));
}
.cultureList li{
	display: flex;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: calc((100% - max(70px, calc(70 / var(--baseWidth) * 100vw))) / 3);
}
/* 画像 */
.cultureImg{
	max-width: max(240px, calc(240 / var(--baseWidth) * 100vw));
}
/* テキスト */
.cultureTtl{
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
	font-size: max(2.8rem, calc(28 / var(--baseWidth) * 100vw));
}
.cultureTtl .border{
	background: linear-gradient(var(--colorYellow), var(--colorYellow)) 0 calc(100% - 4px) / 100% 7px repeat-x;
}
.cultureTxtBox{
	display: flex;
	gap: max(15px, calc(15 / var(--baseWidth) * 100vw));
	flex-direction: column;
}
.cultureHead{
	line-height: 1;
	color: var(--colorMain);
	font-size: max(2.2rem, calc(22 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.cultureTxt{
	letter-spacing: .1rem;
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
}

/*
	部署紹介
-----------------------------------------------------------------------------------------------*/
.depList{
	display: flex;
	gap: max(60px, calc(60 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
}
.depList > li{
	width: calc((100% - max(120px, calc(120 / var(--baseWidth) * 100vw))) / 3);
}
/* 画像 */
.depList > li .depPeople{
	height: max(290px, calc(290 / var(--baseWidth) * 100vw));
	transform-origin: center bottom;
	transition: transform .3s ease;
}
.depList > li .depBg{
	object-fit: cover;
	border-radius: var(--bdrs30);
}

/* 画像上テキスト */
.pageWorkDep .depHead{
	left: min(-20px, calc(-20 / var(--baseWidth) * 100vw));
	bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.pageWorkDep .depHeadTxt{
	height: max(60px, calc(60 / var(--baseWidth) * 100vw));
	padding-block: max(2px, calc(2 / var(--baseWidth) * 100vw)) max(6px, calc(6 / var(--baseWidth) * 100vw));
	padding-inline: max(16px, calc(16 / var(--baseWidth) * 100vw));
	font-size: max(1.8rem, calc(18 / var(--baseWidth) * 100vw));
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	background: var(--colorBlack);
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* ボタン */
.depList li .depTxt{
	padding-inline: max(20px, calc(20 / var(--baseWidth) * 100vw));
}
.depList li .noLine{
	height: auto;
	margin-block: max(10px, calc(10 / var(--baseWidth) * 100vw)) max(15px, calc(15 / var(--baseWidth) * 100vw));
}
.noLine .txt{
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 各部署カラー設定 */
.pageWorkDep .sales1 .txt,
.pageWorkDep .sales2 .txt{
	color: var(--colorGreen);
}
.pageWorkDep .product-dev .txt{
	color: var(--colorFontYellow);
}
.pageWorkDep .policy-maintenance .txt{
	color: var(--colorBlue);
}
.pageWorkDep .marketing .txt{
	color: var(--colorOrange);
}
.pageWorkDep .hrd .txt,
.pageWorkDep .administration .txt{
	color: var(--colorRed);
}
.pageWorkDep .contract-dev .txt{
	color: var(--colorLightBlue);
}
/* 下線なしボタン */
.pageWorkDep .btnLine.noLine::before,
.pageWorkDep .btnLine.noLine::after{
	content: none;
}
.pageWorkDep .noLine .btnIcon-bk{
	right: 0;
}
@media (any-hover: hover){
	.depList > li a:hover .depPeople{
	transform: translateX(-50%) scale(1.05);
}
	.depList .btnLine:hover,
	.depList > li a:hover .btnLine{
		color: var(--colorBlack);
	}
	.depList .btnLine:hover .btnIcon-bk{
		background: var(--colorBlack) url(/recruit/images/ico_arrow_wh.svg) no-repeat 50% center / 50%;
	}
}

/* ハッシュタグ
============================== */
.tagList{
	display: flex;
	gap: max(5px, calc(5 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
}
.tagList li{
	display: block;
	padding: max(5px, calc(5 / var(--baseWidth) * 100vw)) max(10px, calc(10 / var(--baseWidth) * 100vw));
	line-height: 1;
	font-size: max(1.0rem, calc(10 / var(--baseWidth) * 100vw));
	border: 1px solid var(--colorBlack);
	border-radius: var(--bdrs30);
}

/*
	各部署ページ
-----------------------------------------------------------------------------------------------*/
.pageWorkDetail #ctsWrapper > .ctsArea{
	width: var(--width1000);
}
.pageWorkDetail #ctsWrapper > .ctsArea:first-child{
	padding-bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
}

/* メイン画像周り
============================== */
.pageWorkDetail .depPh .depPeople{
	height: max(530px, calc(530 / var(--baseWidth) * 100vw));
	left: 60%;
}
/* 写真上テキスト */
.pageWorkDetail .depHead{
	left: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
	bottom: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.pageWorkDetail .depHeadTxt{
	height: max(60px, calc(60 / var(--baseWidth) * 100vw));
	padding-block: max(2px, calc(2 / var(--baseWidth) * 100vw)) max(6px, calc(6 / var(--baseWidth) * 100vw));
	padding-inline: max(16px, calc(16 / var(--baseWidth) * 100vw));
	font-size: max(3.4rem, calc(34 / var(--baseWidth) * 100vw));
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	background: var(--colorBlack);
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* プロフィール
============================== */
.profileCts{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: max(30px, calc(30 / var(--baseWidth) * 100vw));
	padding-inline: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
/* 部署名 */
.profileHead{
	font-size: max(4.0rem, calc(40 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBlack);
}
/* 各部署カラー設定 */
.pageWorkSales1 .profileHead,
.pageWorkSales2 .profileHead{
	color: var(--colorGreen);
}
.pageWorkProduct-dev .profileHead{
	color: var(--colorFontYellow);
}
.pageWorkPolicy-maintenance .profileHead{
	color: var(--colorBlue);
}
.pageWorkMarketing .profileHead{
	color: var(--colorOrange);
}
.pageWorkHrd .profileHead,
.pageWorkAdministration .profileHead{
	color: var(--colorRed);
}
.pageWorkContract-dev .profileHead{
	color: var(--colorLightBlue);
}
/* 詳細 */
.profileBox{
	max-width: max(550px, calc(550 / var(--baseWidth) * 100vw));
	text-align: left;
}
.profileBox .profileEn{
	color: var(--colorGrey200);
	font-family: var(--ffEn);
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
	font-weight: var(--fwMedium);
}
/* イニシャル */
.profileBox .name .en{
	font-family: var(--ffEn);
	font-size: max(2.4rem, calc(24 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.profileBox .name .position{
	margin-left: max(10px, calc(10 / var(--baseWidth) * 100vw));
	font-size: max(1.3rem, calc(13 / var(--baseWidth) * 100vw));
	font-weight: var(--fwMedium);
}
/* 文 */
.profileBox .profileTxt{
	font-size: max(1.2rem, calc(12 / var(--baseWidth) * 100vw));
}

/* 部署を表現するキーワードは？
============================== */
.keywordCts{
	margin-top: max(80px, calc(80 / var(--baseWidth) * 100vw));
}
/* キーワード */
.keywordList{
	display: flex;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
	justify-content: center;
}
.keywordList li{
	padding: max(8px, calc(8 / var(--baseWidth) * 100vw)) max(20px, calc(20 / var(--baseWidth) * 100vw)) max(9px, calc(9 / var(--baseWidth) * 100vw));
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	border-radius: var(--bdrs30);
}
/* 各部署カラー設定 */
.pageWorkSales1 .keywordList li,
.pageWorkSales2 .keywordList li{
	background: var(--colorGreen);
}
.pageWorkProduct-dev .keywordList li{
	background: var(--colorFontYellow);
}
.pageWorkPolicy-maintenance .keywordList li{
	background: var(--colorBlue);
}
.pageWorkMarketing .keywordList li{
	background: var(--colorOrange);
}
.pageWorkHrd .keywordList li,
.pageWorkAdministration .keywordList li{
	background: var(--colorRed);
}
.pageWorkContract-dev .keywordList li{
	background: var(--colorLightBlue);
}
/* テキスト */
.keywordTxt{
	margin-top: max(40px, calc(40 / var(--baseWidth) * 100vw));
	text-align: left;
}

/* 部署を表現するキーワードは？
============================== */
.profileWrapper{
	background: var(--bgCream);
}
.profileWrapper .ctsArea{
	width: var(--width1000);
}
.pageWorkDetail .cmnClmBox{
	align-items: flex-start;
}


/*
	キャリアパス
-----------------------------------------------------------------------------------------------*/
.pageWorkCrPath #ctsWrapper > .ctsArea{
	padding-bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
}

/* 共通
============================== */
.cmnCrPathTxt{
	display: inline-flex;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
.cmnCrPathTxt span{
	width: fit-content;
	height: max(55px, calc(55 / var(--baseWidth) * 100vw));
	padding-block: max(3px, calc(3 / var(--baseWidth) * 100vw)) max(7px, calc(7 / var(--baseWidth) * 100vw));
	padding-inline: max(16px, calc(16 / var(--baseWidth) * 100vw));
	color: #fff;
	line-height: 1.5;
	font-size: max(3.2rem, calc(32 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* 各部署カラー設定 */
.marketing .crPathDep,
.marketing .planList li:not(:first-child) .planTxt::before,
.marketing .planList li:not(:first-child) .planTxt::after{
	background: var(--colorOrange);
}
.marketing .planList li:last-of-type::before{
	background: url("/recruit/images/ico_flag_or.svg") no-repeat center / contain;
}
.marketing .planList li:last-of-type .palnYear{
	color: #FA8200;
}
.marketing .planList li:last-of-type .planTxt{
	background-color: #FFECD7;
}
.marketing .crPathImg{
	border: clamp(50px, calc(50 / var(--baseWidth) * 100vw), 60px) solid var(--colorOrange);
}
.marketing .planTxt{
	border-top: 3px solid var(--colorOrange);
}
.contract-dev .crPathDep,
.contract-dev .planList li:not(:first-child) .planTxt::before,
.contract-dev .planList li:not(:first-child) .planTxt::after{
	background: var(--colorLightBlue);
}
.contract-dev .crPathImg{
	border: clamp(50px, calc(50 / var(--baseWidth) * 100vw), 60px) solid var(--colorLightBlue);
}
.contract-dev .planTxt{
	border-top: 3px solid var(--colorLightBlue);
}
.contract-dev .planList li:last-of-type::before{
	background: url("/recruit/images/ico_flag_lb.svg") no-repeat center / contain;
}
.contract-dev .planList li:last-of-type .palnYear{
	color: #37A0D7;
}
.contract-dev .planList li:last-of-type .planTxt{
	background-color: #EAF5FF;
}
.sales1 .crPathDep,
.sales1 .planList li:not(:first-child) .planTxt::before,
.sales1 .planList li:not(:first-child) .planTxt::after{
	background: var(--colorGreen);
}
.sales1 .crPathImg{
	border: clamp(50px, calc(50 / var(--baseWidth) * 100vw), 60px) solid var(--colorGreen);
}
.sales1 .planTxt{
	border-top: 3px solid var(--colorGreen);
}
.sales1 .planList li:last-of-type::before{
	background: url("/recruit/images/ico_flag_gr.svg") no-repeat center / contain;
}
.sales1 .planList li:last-of-type .palnYear{
	color: #2FA98D;
}
.sales1 .planList li:last-of-type .planTxt{
	background-color: #EBFFFC;
}

/* テキスト
============================== */
.crPathHead{
	display: flex;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	flex-direction: column;
	text-align: left;
	color: var(--colorOrange);
	font-size: max(3.2rem, calc(32 / var(--baseWidth) * 100vw));
}
.crPathHead .cmnCrPathTxt span{
	background: var(--colorOrange);
}
.crPathTxt{
	margin-top: max(20px, calc(20 / var(--baseWidth) * 100vw));
	text-align: left;
}

/* 各部署
============================== */
.crPathList{
	display: flex;
	gap: max(80px, calc(80 / var(--baseWidth) * 100vw));
	flex-direction: column;
	margin-top: max(80px, calc(80 / var(--baseWidth) * 100vw));
}
/* spのみ */
.crPathList li .note{
	display: none;
}
/* 内容 */
.crPathList li .bg{
	background: var(--bgCream);
	border-radius: var(--bdrs50);
}
.crPathList li .bg .crPathDetail{
	display: flex;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw)) max(50px, calc(50 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
	padding: max(70px, calc(70 / var(--baseWidth) * 100vw));
	text-align: left;
}
/* テキスト */
.detailTxtBox{
	display: flex;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	flex-direction: column;
	width: max(600px, calc(600 / var(--baseWidth) * 100vw));
}
.pageWorkCrPath .depHead{
	position: relative;
}
.pageWorkCrPath .depHeadTxt{
	height: max(60px, calc(60 / var(--baseWidth) * 100vw));
	padding-block: max(2px, calc(2 / var(--baseWidth) * 100vw)) max(6px, calc(6 / var(--baseWidth) * 100vw));
	padding-inline: max(16px, calc(16 / var(--baseWidth) * 100vw));
	font-size: max(3.2rem, calc(32 / var(--baseWidth) * 100vw));
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	background: var(--colorBlack);
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.crPathList li .crPathDetailHead .cmnCrPathTxt{
	font-weight: var(--fwBlack);
	border-radius: max(5px, calc(5 / var(--baseWidth) * 100vw));
	line-height: 2.0;
	letter-spacing: .1rem;
	color: #fff;
	background: var(--colorBlack);
	position: relative;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.crPathDetailHead .cmnCrPathTxt span{
	background: var(--colorBlack);
}
/* 部署・名前・テキスト */
.crPathDepBox{
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	flex-direction: column;
}
.crPathDep{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: max(80px, calc(80 / var(--baseWidth) * 100vw));
	height: max(30px, calc(30 / var(--baseWidth) * 100vw));
	padding-inline: max(15px, calc(15 / var(--baseWidth) * 100vw));
	line-height: 1.0;
	letter-spacing: .1rem;
	color: #fff;
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	border-radius: var(--bdrs30);
}
.crPathDepName{
	font-family: var(--ffEn);
	font-size: max(4.0rem, calc(40 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.crPathDepTxt{
	color: var(--colorGrey300);
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 画像 */
.crPathImg{
	flex-shrink: 0;
	width: max(350px, calc(350 / var(--baseWidth) * 100vw));
	height: fit-content;
	border-radius: max(200px, calc(200 / var(--baseWidth) * 100vw));
	overflow: hidden;
}
/* キャリアプラン */
.planGraph{
	width: 100%;
}
.planList{
	display: flex;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	align-items: flex-end;
	justify-content: center;
	text-align: center;
}
.planList li{
	width: calc((100% - max(30px, calc(30 / var(--baseWidth) * 100vw))) / 4);
	position: relative;
}
.planList li:last-of-type::before{
	content: "";
	width: 28px;
	aspect-ratio: 28 / 53;
	position: absolute;
	top: -1px;
	left: 15px;
}
.palnYear{
	margin-bottom: max(15px, calc(15 / var(--baseWidth) * 100vw));
	line-height: 1;
	font-size: max(1.8rem, calc(18 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.planList li:last-of-type .palnYear{
	padding-left: max(15px, calc(15 / var(--baseWidth) * 100vw));
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBlack);
}
.palnYear span{
	font-family: var(--ffEn);
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
}
.planTxt{
	display: flex;
	align-items: center;
	justify-content: center;
	height: max(140px, calc(140 / var(--baseWidth) * 100vw));
	padding: max(20px, calc(20 / var(--baseWidth) * 100vw));
	background: #fff;
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwMedium);
	line-height: 1.5;
	letter-spacing: 0.1rem;
	text-align: left;
	position: relative;
}
/* グラフ 調整 */
.planList li:first-child .planTxt{
	height: max(80px, calc(80 / var(--baseWidth) * 100vw));
	background: var(--colorGrey100);
	border-top: 3px solid var(--colorBlack);
}
.planList li:nth-child(2) .planTxt{
	height: max(100px, calc(100 / var(--baseWidth) * 100vw));
}
.planList li:nth-child(3) .planTxt{
	height: max(120px, calc(120 / var(--baseWidth) * 100vw));
}
.planList li:not(:first-child) .planTxt::before,
.planList li:not(:first-child) .planTxt::after{
	content: "";
	width: max(18px, calc(18 / var(--baseWidth) * 100vw));
	height: 3px;
	border-radius: max(10px, calc(10 / var(--baseWidth) * 100vw));
	position: absolute;
	transform: rotate(-45deg);
	top: max(3px, calc(3 / var(--baseWidth) * 100vw));
	right: min(-5px, calc(-5 / var(--baseWidth) * 100vw));
}
.planList li:not(:first-child) .planTxt::before{
	transform: rotate(45deg);
	top: min(-9px, calc(-9 / var(--baseWidth) * 100vw));
}
/* ボタン */
.crPathList li .btn{
	margin-top: max(30px, calc(30 / var(--baseWidth) * 100vw));
}


@media screen and (width <= 812px){
	/*
		共通
	-----------------------------------------------------------------------------------------------*/
	.pageWork #ctsWrapper > .ctsArea,
	.pageWorkDetail #ctsWrapper > .ctsArea,
	.pageWorkCrPath #ctsWrapper > .ctsArea{
		padding-bottom: 70px;
	}
	/* .depBg{
		margin-top: 20px;
		border-radius: var(--bdrs30);
	} */

	/*
		職種紹介
	-----------------------------------------------------------------------------------------------*/
	.pageWorkIndex #ctsWrapper > .ctsArea{
		gap: 60px;
	}
	/* 価値創出の循環
	============================== */
	/* 画像 */
	/* .cycleImg{
		width: 100vw;
		margin-left: calc(50% - 50vw);
		overflow-x: scroll;
		white-space: nowrap;
	}
	.cycleImg img{
		max-width: none;
		width: auto;
		margin: 0 25px;
		height: 500px;
	} */

	/* 職種・部署紹介
	============================== */
	/* リスト */
	.introList{
		gap: 40px;
		flex-direction: column;
	}
	.introList li{
		width: 100%;
	}
	/* 画像 */
	.introImgBox{
		padding-inline: 40px;
	}
	.introPh{
		margin-bottom: 10px;
	}
	.introItem{
		max-height: 75px;
		right: 20px;
		bottom: -10px;
	}
	/* テキスト */
	.introDep{
		font-size: 2.0rem;
	}
	.introTxt{
		font-size: 1.5rem;
	}
	/* ボタン */
	.btnBox{
		margin-top: 5px;
	}

	/* 私たちが大切にしている働き方
	============================== */
	.cultureBox{
		padding: 35px 25px;
	}
	.cultureList{
		gap: 40px;
		flex-direction: column;
	}
	.cultureList li{
		gap: 15px;
		width: 100%;
	}
	/* 画像 */
	.cultureImg{
		max-width: 140px;
	}
	/* テキスト */
	.cultureTtl{
		margin-bottom: 40px;
		font-size: 2.0rem;
	}
	.cultureTtl .border{
		background: linear-gradient(var(--colorYellow), var(--colorYellow)) 0 calc(100% - 2px) / 100% 8px repeat-x;
	}
	.cultureTxtBox{
		display: flex;
		gap: 15px;
	}
	.cultureHead{
		font-size: 1.8rem;
	}
	.cultureTxt{
		font-size: 1.4rem;
	}

	/*
		部署紹介
	-----------------------------------------------------------------------------------------------*/
	.depList{
		flex-direction: column;
	}
	.depList > li{
		width: 100%;
	}
	.depList > li .depPeople{
		width: auto;
		height: 240px;
	}
	.depList > li .depBg{
		max-height: 220px;
	}
	/* 写真上テキスト */
	.pageWork .depHead{
		left: -10px;
		bottom: 20px;
	}
	.pageWork .depHeadTxt{
		height: 60px;
		padding-inline: 14px;
		font-size: 1.6rem;
		line-height: 2.2;
	}
	/* ボタン */
	.noLine .txt{
		font-size: 2.2rem;
	}

	/* ハッシュタグ
	============================== */
	.tagList li{
		font-size: 1.2rem;
	}

	/*
		各部署ページ
	-----------------------------------------------------------------------------------------------*/
	.pageWorkDetail #ctsWrapper > .ctsArea{
		width: 100%;
	}
	.pageWorkDetail #ctsWrapper > .ctsArea:first-child{
		padding-bottom: 70px;
	}

	/* メイン画像周り
	============================== */
	.pageWorkDetail .depPh .depPeople{
		width: auto;
		height: 240px;
		left: 55%;
	}
	.pageWorkDetail .depPh .depBg{
		height: 220px;
	}
	/* 写真上テキスト */
	.pageWorkDetail .depHead{
		left: -10px;
		bottom: 20px;
	}
	.pageWorkDetail .depHeadTxt{
		padding: 2px 10px 4px;
		font-size: 2.0rem;
	}

	/* プロフィール
	============================== */
	.profileCts{
		gap: 10px;
		flex-direction: column;
		margin-top: 10px;
		padding-inline: 0;
	}
	/* 部署名 */
	.profileHead{
		font-size: 2.4rem;
	}
	/* 詳細 */
	.profileBox{
		max-width: 100%;
	}
	/* イニシャル */
	.profileBox .name .en{
		font-size: 2.2rem;
	}
	.profileBox .name .position{
		margin-left: 15px;
	}

	/* 部署を表現するキーワードは？
	============================== */
	.keywordCts{
		margin-top: 50px;
	}
	/* キーワード */
	.keywordList{
		gap: 5px;
		flex-wrap: wrap;
	}
	.keywordList li{
		font-size: 1.4rem;
	}
	/* テキスト */
	.keywordTxt{
		margin-top: 30px;
	}

	/* 部署を表現するキーワードは？
	============================== */
	.profileWrapper .ctsArea{
		width: 100%;
	}

	
	/*
		キャリアパス
	-----------------------------------------------------------------------------------------------*/
	/* 共通
	============================== */
	.cmnCrPathTxt{
		gap: 5px;
		flex-direction: column;
	}
	.cmnCrPathTxt span{
		height: 40px;
		font-size: 2.0rem;
	}
	/* 各部署カラー設定 */
	.marketing .crPathImg{
		border: 25px solid var(--colorOrange);
	}
	.contract-dev .crPathImg{
		border: 25px solid var(--colorLightBlue);
	}
	.sales1 .crPathImg{
		border: 25px solid var(--colorGreen);
	}

	/* テキスト
	============================== */
	.crPathHead{
		font-size: 2.0rem;
	}
	.crPathHead .cmnCrPathTxt span{
		padding-block: 4px;
	}

	/* 各部署
	============================== */
	.crPathList{
		margin-top: 40px;
	}
	.crPathList li .crPathDetail{
		gap: 15px;
		justify-content: center;
		padding: 30px 25px;
	}
	/* spのみ */
	.crPathList li .note{
		display: block;
		margin-top: 10px;
		text-align: left;
		font-size: 1.2rem;
	}
	/* 内容 */
	.crPathList li .bg .crPathDetail{
		gap: 15px;
		padding: 30px 25px;
	}
	/* テキスト */
	.detailTxtBox{
		gap: 15px;
		width: 100%;
		order: 2;
	}
	.pageWorkCrPath .depHead{
		bottom: 0;
		left: 0;
	}
	.pageWorkCrPath .depHeadTxt{
		padding: 2px 10px 4px;
		line-height: 2.0;
		font-size: 2.2rem;
	}
	.crPathDetailHead .cmnCrPathTxt{
		display: inline-flex;
		flex-direction: column;
		padding: 2px 10px 4px;
		font-size: 1.7rem;
		line-height: 1.4;
	}
	/* 部署・名前・テキスト */
	.crPathDep{
		height: 25px;
		font-size: 1.2rem;
	}
	.crPathDepName{
		font-size: 2.4rem;
	}
	.crPathDepTxt{
		font-size: 1.0rem;
	}
	/* 画像 */
	.crPathImg{
		width: 200px;
		order: 1;
	}
	/* キャリアプラン */
	.planGraph{
		order: 3;
	}
	.planList li:last-of-type::before{
		width: 16px;
		top: 0;
		left: 8px;
	}
	.scroll{
		overflow-x: scroll;
	}
	.planList{
		width: 650px;
		gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	}
	.palnYear{
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.planList li:last-of-type .palnYear{
		padding-left: 10px;
		font-size: 1.4rem;
	}
	.palnYear span{
		font-size: 1.6rem;
	}
	.planTxt{
		height: 110px;
		padding: 10px 13px;
		text-align: left;
		font-size: 1.0rem;
	}
	/* グラフ 調整 */
	.planList li:first-child .planTxt{
		height: 50px;
		line-height: 1.5;
	}
	.planList li:nth-child(2) .planTxt{
		height: 70px;
	}
	.planList li:nth-child(3) .planTxt{
		height: 90px;
	}
	.planList li:not(:first-child) .planTxt::before,
	.planList li:not(:first-child) .planTxt::after{
		width: 12px;
		top: 1px;
		right: -3px;
	}
	.planList li:not(:first-child) .planTxt::before{
		top: -6px;
	}
}