@charset "UTF-8";
/*
	コンテンツ共通
-----------------------------------------------------------------------------------------------*/
.ctsArea{
	padding-block: max(120px, calc(120 / var(--baseWidth) * 100vw));
}
#ctsWrapper{
	padding-bottom: 0;
}
[class*="Desc"]{
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
	gap: max(28px, calc(28 / var(--baseWidth) * 100vw));
	flex: 1;
	text-align: left;
	position: relative;
}
/* 見出し */
.topHead{
	display: flex;
	flex-direction: column;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
}
.topHeadTxt{
	font-size: max(5.0rem, calc(50 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBlack);
	line-height: 1.0;
}
#aboutWrapper .topHeadAccent{
	color: var(--colorRed);
}
#workWrapper .topHeadAccent{
	color: var(--colorBlue);
}
#peopleWrapper .topHeadAccent{
	color: var(--colorPurple);
}
#envWrapper .topHeadAccent{
	color: var(--colorGreen);
}
#faqWrapper .topHeadAccent{
	color: var(--colorOrange);
}
.topHeadEn{
	display: block;
	font-family: var(--ffEn);
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.0;
}
/* リード文 */
.topLead{
	margin-top: max(30px, calc(30 / var(--baseWidth) * 100vw));
	font-size: max(1.6rem, calc(16 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.9;
}
[class*="Desc"] .topLead{
	margin-top: 0;
}
/* アメーバ */
[class*="GraphicImg"]{
	position: absolute;
	z-index: 1;
}

/*
	kv 〜 intro
-----------------------------------------------------------------------------------------------*/
.ctsBox{
	background: var(--bgNoise), url(/recruit/images/bg_top01_pc.png) no-repeat top center / cover;
}
/*
	kv
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	position: relative;
}
.kvInner{
	width: max(1050px, calc(1050 / var(--baseWidth) * 100vw));
	margin: 0 0 0 auto;
	position: relative;
	z-index: 1;
}
.kvGraphicImg01{
	width: 264px;
	top: max(162px, calc(162 / var(--baseWidth) * 100vw));
	left: max(-230px, calc(-230 / var(--baseWidth) * 100vw));
}
.kvGraphicImg02{
	width: 240px;
	right: max(125px, calc(125 / var(--baseWidth) * 100vw));
	bottom: max(-140px, calc(-140 / var(--baseWidth) * 100vw));
}
.kvHead{
	width: max(680px, calc(680 / var(--baseWidth) * 100vw));
	font-size: max(6.0rem, calc(60 / var(--baseWidth) * 100vw));
	position: absolute;
	bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
	left: max(80px, calc(80 / var(--baseWidth) * 100vw));
	z-index: 2;
}
.kvHead span{
	font-size: max(4.8rem, calc(48 / var(--baseWidth) * 100vw));
}
.kvTxtImgArea{
	width: max(830px, calc(830 / var(--baseWidth) * 100vw));
	position: absolute;
	bottom: max(40px, calc(40 / var(--baseWidth) * 100vw));
	z-index: 1;
}

/*
	intro
-----------------------------------------------------------------------------------------------*/
#introWrapper{
	position: relative;
}
#introWrapper::before{
	content: '';
	width: max(603px, calc(603 / var(--baseWidth) * 100vw));
	height: max(580px, calc(580 / var(--baseWidth) * 100vw));
	background: rgba(255, 255, 255, .35);
	border-radius: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: blur(30px);
	z-index: 0;
}
#introWrapper .ctsArea{
	padding-block: max(80px, calc(80 / var(--baseWidth) * 100vw)) max(170px, calc(170 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 2;
}
#introWrapper .topHead{
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
#introWrapper .topHeadTxt{
	color: #FF6F31;
	font-size: max(4.0rem, calc(40 / var(--baseWidth) * 100vw));
	line-height: 1.5;
}
.introBox{
	position: relative;
}
.introGraphicImg01{
	width: 172px;
	bottom: 5%;
	left: 24%;
	z-index: -1;
}
.introHead{
	margin-block: max(30px, calc(30 / var(--baseWidth) * 100vw)) max(56px, calc(56 / var(--baseWidth) * 100vw));
	color: var(--colorOrange);
	font-size: max(2.2rem, calc(22 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.7;
	letter-spacing: 0.3rem;
}
.introLead{
	font-size: max(1.7rem, calc(17 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 2.8;
}
.introGraphicImg03{
	width: 30%;
	top: 3%;
	left: -6%;
}
.introGraphicImg04{
	width: 28%;
	right: -3%;
	bottom: 20%;
}
.introGraphicImg05{
	width: 9%;
	bottom: 33%;
	left: 16%;
	z-index: 2;
}
.introGraphicImg06{
	width: 23%;
	bottom: -2%;
	left: 9%;
}
.introGraphicImg07{
	width: 23%;
	max-width: 140px;
	bottom: -3%;
	left: 28%;
}
.introGraphicImg08{
	width: 23%;
	max-width: 228px;
	right: 22%;
	bottom: -12%;
}
/*
	about
-----------------------------------------------------------------------------------------------*/
#aboutWrapper{
	margin-top: max(-50px, calc(-50 / var(--baseWidth) * 100vw));
	background: #fff;
	border-radius: var(--bdrs50);
	position: relative;
}
.aboutBox{
	position: relative;
}
.aboutImg{
	width: max(84px, calc(84 / var(--baseWidth) * 100vw));
	position: absolute;
	top: max(-102px, calc(-102 / var(--baseWidth) * 100vw));
	right: max(97px, calc(97 / var(--baseWidth) * 100vw));
}
.aboutList{
	display: flex;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	margin-top: max(50px, calc(50 / var(--baseWidth) * 100vw));
	padding: max(50px, calc(50 / var(--baseWidth) * 100vw));
	color: #fff;
	background: var(--bgCream);
	border-radius: var(--bdrs30);
	position: relative;
	z-index: 1;
}
.aboutList li{
	width: calc((100% - max(20px, calc(20 / var(--baseWidth) * 100vw)))/3);
}
@media (any-hover: hover){
	.aboutList li [class^="aboutLink-"] .btnIcon{
		transition: background-color .4s;
	}
	.aboutList li:hover [class^="aboutLink-"] .btnIcon{
		background: var(--colorBlack) url(/recruit/images/ico_arrow_wh.svg) no-repeat 50% center / 50%;
		transition: background-color .4s;
	}
}
[class^="aboutLink-"]{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: max(18px, calc(18 / var(--baseWidth) * 100vw));
	height: max(200px, calc(200 / var(--baseWidth) * 100vw));
	padding: max(30px, calc(30 / var(--baseWidth) * 100vw));
	line-height: 1.0;
	border-radius: max(10px, calc(10 / var(--baseWidth) * 100vw));
	position: relative;
}
.aboutLink-red{
	background: var(--colorRed);
}
.aboutLink-blue{
	background: var(--colorBlue);
}
.aboutLink-green{
	background: var(--colorGreen);
}
[class^="aboutListIco0"]{
	height: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.aboutListIco01{
	width: max(45px, calc(45 / var(--baseWidth) * 100vw));
}
.aboutListIco02{
	width: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.aboutListIco03{
	width: max(47px, calc(47 / var(--baseWidth) * 100vw));
}
.aboutLinkTit{
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwMedium);
}
.aboutLinkTxt{
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
}
[class^="aboutLink-"] .btnIcon{
	top: auto;
	right: max(18px, calc(18 / var(--baseWidth) * 100vw));
	bottom: max(18px, calc(18 / var(--baseWidth) * 100vw));
	transform: none;
}
/*
	work
-----------------------------------------------------------------------------------------------*/
#workWrapper{
	margin-top: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	background: var(--bgNoise), url(/recruit/images/bg_top02_pc.png) no-repeat top center / cover;
}
.work.ctsArea{
	padding-top: max(170px, calc(170 / var(--baseWidth) * 100vw));
	position: relative;
}
.workGraphicImg01{
	width: max(182px, calc(182 / var(--baseWidth) * 100vw));
	top: 0;
	left: max(42px, calc(42 / var(--baseWidth) * 100vw));
}
.cycle{
	margin-block: max(50px, calc(50 / var(--baseWidth) * 100vw)) max(25px, calc(25 / var(--baseWidth) * 100vw));
	padding: max(50px, calc(50 / var(--baseWidth) * 100vw));
	padding-bottom: max(75px, calc(75 / var(--baseWidth) * 100vw));
	text-align: left;
	background: #fff;
	border-radius: var(--bdrs50);
	position: relative;
}
.cycleTit{
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.0;
}
.cycle .btn{
	position: absolute;
	bottom: max(-25px, calc(-25 / var(--baseWidth) * 100vw));
	left: 50%;
	transform: translate(-50%, 0);
}
.workTit{
	font-size: max(3.4rem, calc(34 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	color: #FF6F31;
	letter-spacing: 0;
}
.department.ctsArea,
.careerpath.ctsArea{
	padding-top: 0;
}
.department{
	display: flex;
}
.departmentBox{
	display: flex;
	justify-content: space-between;
	gap: max(50px, calc(50 / var(--baseWidth) * 100vw));
	width: 100%;
}
.departmentDesc{
	flex: 0 0 max(515px, calc(515 / var(--baseWidth) * 100vw));
	margin-right: auto;
}
.departmentGraphic01{
	width: 207px;
	position: absolute;
	right: 0;
	bottom: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
}
.departmentImg{
	width: max(706px, calc(706 / var(--baseWidth) * 100vw));
    margin-left: min(-100px, calc(-200 / var(--baseWidth) * 100vw));
	border-radius: 0 var(--bdrs50) var(--bdrs50) 0;
	overflow: hidden;
}
.careerpath.ctsArea{
	padding-bottom: max(170px, calc(170 / var(--baseWidth) * 100vw));
}
.careerpathBox{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	gap: max(40px, calc(40 / var(--baseWidth) * 100vw));
	width: 100%;
}
.careerpathDesc{
	flex: 0 0 max(400px, calc(400 / var(--baseWidth) * 100vw));
}
.careerpathSplide{
	flex: 2;
}
.careerpathSplide .splide__track{
	overflow: visible!important;
}
.careerpathSplide .splide__slide{
	width: max(690px, calc(690 / var(--baseWidth) * 100vw));
	padding: max(50px, calc(50 / var(--baseWidth) * 100vw));
	text-align: left;
	background: #fff;
	border-radius: var(--bdrs50);
	position: relative;
	overflow: visible;
}
.careerpathImg{
	width: max(260px, calc(260 / var(--baseWidth) * 100vw));
	border: max(30px, calc(30 / var(--baseWidth) * 100vw)) solid;
	border-radius: 100%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: max(-30px, calc(-30 / var(--baseWidth) * 100vw));
	right: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.careerpathLink{
	display: block;
	pointer-events: auto;
	transition: var(--transitionBase);
}
@media (any-hover: hover){
	.careerpathLink:hover{
		opacity: 0.7;
	}
}
/* カラー */
.sales .careerpathImg{
	border-color: var(--colorGreen);
}
.contract-dev .careerpathImg{
	border-color: var(--colorLightBlue);
}
.policy-maintenance .careerpathImg{
	border-color: var(--colorBlue);
}
.product-dev .careerpathImg{
	border-color: var(--colorYellow);
}
.marketing .careerpathImg{
	border-color: var(--colorOrange);
}
.administration .careerpathImg{
	border-color: var(--colorRed);
}

.careerpathProfile{
	min-height: max(183px, calc(183 / var(--baseWidth) * 100vw));
}
.careerpathProfile .captionCopy{
	display: block;
	margin: 0 0 max(10px, calc(10 / var(--baseWidth) * 100vw));
	padding: 0;
	font-size: max(2.4rem, calc(24 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	background: transparent;
	position: static;
}
.careerpathProfile .profileName{
	font-size: max(3.0rem, calc(30 / var(--baseWidth) * 100vw));
}
.careerpathProfile .profilePosition{
	font-size: max(1.3rem, calc(13 / var(--baseWidth) * 100vw));
}
.careerpathGraph{
	margin-top: max(32px, calc(32 / var(--baseWidth) * 100vw));
}
/* スライダーボタン
============================== */
.splide__arrow{
	display: block;
	width: max(40px, calc(40 / var(--baseWidth) * 100vw));
	height: max(40px, calc(40 / var(--baseWidth) * 100vw));
	border: 1px solid var(--colorBlack);
	border-radius: 100%;
	background: #fff url(/recruit/images/ico_top_arrow_bk.svg) no-repeat 50% center / 40%;
	position: static;
	opacity: inherit;
	transform: none;
	transition: var(--transitionBase);
}
.splide__arrow--prev{
	scale: -1 1;
}
.splide__arrow svg{
	display: none;
}
.careerpathSplide .splide__arrow{
	position: absolute;
}
.careerpathSplide .splide__arrow--prev{
	left: max(-20px, calc(-20 / var(--baseWidth) * 100vw));
}
.careerpathSplide .splide__arrow--next{
	right: max(-20px, calc(-20 / var(--baseWidth) * 100vw));
}
@media (any-hover: hover){
	.splide__arrow:hover{
		background-position: calc(50% + 4px) center;
		transition: var(--transitionBase);
	}
}


/*
	people
-----------------------------------------------------------------------------------------------*/
#peopleWrapper{
	margin-top: max(-50px, calc(-50 / var(--baseWidth) * 100vw));
	background: #fff;
	border-radius: var(--bdrs50);
	position: relative;
}
#peopleWrapper .ctsArea{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.peopleDesc{
	gap: 40px;
	flex: 0 0 max(400px, calc(400 / var(--baseWidth) * 100vw));
	padding-right: max(50px, calc(50 / var(--baseWidth) * 100vw));
	background: linear-gradient(to right, #fff 80%, rgba(255, 255, 255, 0) 100%);
	z-index: 1;
}
.peopleDesc::before{
	content: '';
	position: absolute;
	top: 0;
	right: 100%;
	width: 100vw;
	height: 100%;
	background: #fff;
	z-index: -1;
}
#peopleWrapper .topLead{
	text-align: justify;
}
/* スライダーボタン
============================== */
.peopleSplide .splide__arrows{
	display: flex;
	align-items: center;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	position: absolute;
	bottom: 0;
	left: max(346px, calc(346 / var(--baseWidth) * 100vw));
	z-index: 2;
}

.peopleGraphicImg01{
	width: max(120px, calc(120 / var(--baseWidth) * 100vw));
	top: max(-100px, calc(-100 / var(--baseWidth) * 100vw));
	right: 2%;
}
.peopleGraphicImg02{
	width: max(236px, calc(236 / var(--baseWidth) * 100vw));
	bottom: max(-104px, calc(-104 / var(--baseWidth) * 100vw));
	left: 0;
}
/*
	environment
-----------------------------------------------------------------------------------------------*/
#envWrapper{
	margin-top: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	background: var(--bgNoise), url(/recruit/images/bg_top03_pc.png) no-repeat top center / cover;
	border-radius: 0 0 var(--bdrs50) var(--bdrs50);
}
#envWrapper .ctsArea{
	padding-top: max(170px, calc(170 / var(--baseWidth) * 100vw));
}
.envList{
	display: flex;
	flex-wrap: wrap;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
	max-width: max(800px, calc(800 / var(--baseWidth) * 100vw));
	margin: max(50px, calc(50 / var(--baseWidth) * 100vw)) auto 0;
}
.envList li{
	width: calc((100% - max(10px, calc(10 / var(--baseWidth) * 100vw)))/2);
	height: max(170px, calc(170 / var(--baseWidth) * 100vw));
}
.envList li:first-child{
	width: 100%;
	height: max(200px, calc(200 / var(--baseWidth) * 100vw));
}
[class^="envLink-"]{
	display: flex;
	height: 100%;
	padding: max(34px, calc(34 / var(--baseWidth) * 100vw)) max(42px, calc(42 / var(--baseWidth) * 100vw));
	text-align: left;
	background: #fff;
	border-radius: var(--bdrs30);
	position: relative;
}
.envLink-data{
	background: #fff url(/recruit/images/bg_top_env01_pc.png) no-repeat center right / 43%;
}
.envLink-benefits{
	background: #fff url(/recruit/images/bg_top_env02_pc.png) no-repeat center right / 50%;
}
.envLink-office{
	background: #fff url(/recruit/images/bg_top_env03_pc.png) no-repeat center right / 50%;
}
.dataImg,
.benefitsImg,
.officeImg{
	width: 100px;
	position: absolute;
	top: 50%;
	right: 32%;
	transform: translate(0, -50%);
}
.benefitsImg{
	width: 76px;
	right: 25%;
}
.officeImg{
	width: 95px;
	right: 23%;
}
.envTit{
	font-size: max(2.8rem, calc(28 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	transition: var(--transitionBase);
}
[class^="envLink-"] .btnIcon-bk{
	width: max(40px, calc(40 / var(--baseWidth) * 100vw));
	height: max(40px, calc(40 / var(--baseWidth) * 100vw));
	background-size: 45%;
	right: max(30px, calc(30 / var(--baseWidth) * 100vw));
	transition: var(--transitionBase);
}
@media (any-hover: hover){
	.envLink-data:hover{
		background-size: 45%;
	}
	.envLink-benefits:hover,
	.envLink-office:hover{
		background-size: 54%;
	}
	[class^="envLink-"]:hover .envTit{
		color: var(--colorGreen);
		transition: var(--transitionBase);
	}
	[class^="envLink-"]:hover .btnIcon-bk{
		background-color: var(--colorGreen);
		transition: var(--transitionBase);
	}
}

/*
	faq
-----------------------------------------------------------------------------------------------*/
#faqWrapper{
	position: relative;
}
#faqWrapper .ctsArea{
	display: flex;
	align-items: end;
	gap: max(50px, calc(50 / var(--baseWidth) * 100vw));
	max-width: max(800px, calc(800 / var(--baseWidth) * 100vw));
	padding-inline: 0;
	text-align: left;
}
.faqDesc .topLead{
	text-align: justify;
}
.faqList{
	flex: 0 0 300px;
}
.faqLink{
	display: flex;
	align-items: center;
	max-width: max(300px, calc(300 / var(--baseWidth) * 100vw));
	height: max(65px, calc(65 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	position: relative;
	transition: var(--transitionBase);
}
.faqLink::before,
.faqLink::after{
	content: '';
	height: max(1px, calc(1 / var(--baseWidth) * 100vw));
	position: absolute;
	bottom: 0;
	left: 0;
}
.faqLink::before{
	width: 100%;
	background: var(--colorGrey100);
}
.faqLink::after{
	width: max(50px, calc(50 / var(--baseWidth) * 100vw));
	background: var(--colorOrange);
	transition: var(--transitionBase);
}
.faqLink .btnIcon-bk{
	width: max(25px, calc(25 / var(--baseWidth) * 100vw));
	height: max(25px, calc(25 / var(--baseWidth) * 100vw));
	transition: var(--transitionBase);
}
@media (any-hover: hover){
	.faqLink:hover{
		color: var(--colorOrange);
		transition: var(--transitionBase);
	}
	.faqLink:hover::after{
		width: 100%;
		transition: var(--transitionBase);
	}
	.faqLink:hover .btnIcon-bk{
		background-color: var(--colorOrange);
		transition: var(--transitionBase);
	}
}
.faqGraphicImg01{
	width: max(228px, calc(228 / var(--baseWidth) * 100vw));
	top: max(-54px, calc(-54 / var(--baseWidth) * 100vw));
	right: 2%;
}
.faqGraphicImg02{
	width: max(146px, calc(146 / var(--baseWidth) * 100vw));
	bottom: max(-35px, calc(-35 / var(--baseWidth) * 100vw));
	left: 4%;
}

@media screen and (width <= 812px){
	/*
		コンテンツ共通
	-----------------------------------------------------------------------------------------------*/
	.ctsArea{
		padding-block: 80px;
	}
	[class*="Desc"]{
		align-items: center;
		gap: 16px;
		text-align: left;
	}
	/* 見出し */
	.topHead{
		gap: 16px;
	}
	.topHeadTxt{
		font-size: 2.8rem;
	}
	.topHeadEn{
		font-size: 1.1rem;
		text-align: center;
	}
	/* リード文 */
	.topLead{
		margin-top: 20px;
		font-size: 1.4rem;
		line-height: 2.0;
		text-align: left;
	}

	/*
		kv 〜 intro
	-----------------------------------------------------------------------------------------------*/
	.ctsBox{
		background: var(--bgNoise), url(/recruit/images/bg_top01_sp.png) no-repeat top center / cover;
	}
	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	.kvInner{
		width: calc(100% - 18px);
	}
	.kvGraphicImg01{
		width: 28%;
		top: auto;
		bottom: 30%;
		left: 20px;
	}
	.kvGraphicImg02{
		width: 28%;
		right: -18px;
		bottom: -40px;
	}
	.kvHead{
		width: 70%;
		margin: -45px 0 0 25px;
		font-size: 2.8rem;
		position: relative;
		bottom: auto;
		left: auto;
	}
	.kvHead span{
		font-size: 2.4rem;
	}
	.kvTxtImgArea{
		width: 360px;
		bottom: -20px;
	}
	/* .slideInner{
		gap: 20px;
	}
	.slideInner img{
		height: 100%;
	} */

	/*
		intro
	-----------------------------------------------------------------------------------------------*/
	#introWrapper::before{
		width: 500px;
		height: 500px;
	}
	#introWrapper .ctsArea{
		padding-block: 180px 160px;
	}
	#introWrapper .topHead{
		margin-bottom: 25px;
	}
	#introWrapper .topHeadTxt{
		line-height: 1.4;
		font-size: 2.5rem;
	}
	.introGraphicImg01{
		width: 25%;
		bottom: -35%;
		left: -4%;
	}
	.introHead{
		margin-block: 24px 26px;
		font-size: 1.9rem;
		line-height: 1.6;
		letter-spacing: 0.2rem;
	}
	.introLead{
		text-align: left;
		font-size: 1.5rem;
		line-height: 2.0;
	}
	.introGraphicImg03{
		width: 45%;
		max-width: 320px;
		top: 50px;
		left: -7%;
	}
	.introGraphicImg04{
		width: 45%;
		max-width: 320px;
		top: 20px;
		right: -3%;
		bottom: auto;
	}
	.introGraphicImg05{
		width: 15%;
		max-width: 70px;
		top: 87%;
		bottom: auto;
		left: 23%;
	}
	.introGraphicImg06{
		width: 43%;
		max-width: 210px;
		top: 85%;
		bottom: auto;
		left: -4%;
	}
	.introGraphicImg07{
		width: 20%;
		max-width: 90px;
		top: 96%;
		bottom: auto;
		left: 30%;
	}
	.introGraphicImg08{
		width: 25%;
		max-width: 140px;
		right: 10%;
		bottom: -2%;
	}

	/*
		about
	-----------------------------------------------------------------------------------------------*/
	#aboutWrapper{
		margin-top: -30px;
	}
	#aboutWrapper .ctsArea{
		padding-top: 100px;
	}
	.aboutImg{
		width: 80px;
		top: -80px;
		right: 20px;
	}
	.aboutList{
		flex-direction: column;
		margin-top: 80px;
		padding: 25px;
	}
	.aboutList li{
		width: 100%;
	}
	[class^="aboutLink-"]{
		gap: 12px;
		height: 160px;
		padding: 20px;
		line-height: 1.0;
	}
	[class^="aboutListIco0"]{
		height: max(50px, calc(50 / var(--baseWidth) * 100vw));
	}
	.aboutListIco01{
		width: max(45px, calc(45 / var(--baseWidth) * 100vw));
	}
	.aboutListIco02{
		width: max(50px, calc(50 / var(--baseWidth) * 100vw));
	}
	.aboutListIco03{
		width: max(47px, calc(47 / var(--baseWidth) * 100vw));
	}
	.aboutLinkTit{
		font-size: 1.8rem;
	}
	.aboutLinkTxt{
		font-size: 1.2rem;
	}
	[class^="aboutLink-"] .btnIcon{
		width: 25px;
		height: 25px;
		right: 10px;
		bottom: 10px;
	}

	/*
		work
	-----------------------------------------------------------------------------------------------*/
	#workWrapper{
		margin-top: -30px;
		background: var(--bgNoise), url(/recruit/images/bg_top02_sp.png) no-repeat top center / cover;
	}
	.work.ctsArea{
		padding-block: 100px 50px;
	}
	.workGraphicImg01{
		width: 20%;
		max-width: 150px;
		top: 0;
		left: 25px;
	}
	.cycle{
		margin-block: 30px 28px;
		padding-inline: 0;
		padding: 30px 20px 50px;
	}
	.cycleTit{
		margin-bottom: 20px;
		font-size: 1.8rem;
		text-align: center;
	}
	/* .cycleImg{
		overflow-x: scroll;
		white-space: nowrap;
	}
	.cycleImg img{
		width: auto;
		max-width: none;
		height: 600px;
		margin: 0 25px;
	} */
	.cycle .btn{
		bottom: -28px;
	}
	.workTit{
		font-size: 2.2rem;
		text-align: center;
	}
	.department.ctsArea,
	.careerpath.ctsArea{
		padding-top: 0;
	}
	.department.ctsArea{
		padding-bottom: 50px;
	}
	.departmentBox{
		flex-direction: column;
		justify-content: start;
		gap: 0;
	}
	.departmentDesc{
		flex: none;
		margin-right: auto;
	}
	.departmentGraphic01{
		width: 45%;
		margin: 0 auto;
		position: static;
	}
	.departmentImg{
		width: 100%;
		margin-left: auto;
		margin-bottom: 15px;
		border-radius: var(--bdrs50);
	}
	.careerpath.ctsArea{
		padding-bottom: 110px;
	}
	.careerpathBox{
		flex-direction: column;
		justify-content: start;
		gap: 30px;
		width: 100%;
	}
	.careerpathDesc,
	.careerpathSplide{
		flex: none;
	}
	.careerpathSplide .splide__slide{
		width: 90%;
		margin: 0 auto;
		padding: 0;
		pointer-events: all;
	}
	.careerpathImg{
		width: 70%;
		margin: -30px auto 0;
		border: 22px solid var(--colorGreen);
		position: static;
	}
	.careerpathProfile{
		min-height: auto;
		text-align: center;
	}
	.careerpathProfile .captionCopy{
		margin: 18px 0 14px;
		padding-inline: 25px;
		font-size: 2.2rem;
	}
	.careerpathProfile .profileName{
		font-size: 2.4rem;
	}
	.careerpathProfile .profilePosition{
		font-size: 1.1rem;
		line-height: 1.4;
	}
	.careerpathGraph{
		margin: 20px 0 30px;
		overflow-x: scroll;
	}
	.careerpathGraph img{
		width: auto;
		max-width: none;
		height: 140px;
		margin: 0 25px;
	}
	/* スライダーボタン
	============================== */
	.splide__arrows{
		margin-top: 30px;
		justify-content: center;
		position: static;
	}
	.splide__arrow{
		width: 40px;
		height: 40px;
	}
	.careerpathSplide .splide__arrow--prev{
		left: -15px;
	}
	.careerpathSplide .splide__arrow--next{
		right: -15px;
	}

	/*
		people
	-----------------------------------------------------------------------------------------------*/
	#peopleWrapper{
		margin-top: -30px;
	}
	#peopleWrapper .ctsArea{
		flex-direction: column;
		gap: 0;
	}
	.peopleDesc{
		align-items: center;
		gap: 30px;
		flex: none;
		width: 100%;
		padding-right: 0;
		text-align: left;
	}
	.peopleDesc::before{
		content: none;
	}
	.peopleSplide{
		margin-top: 40px;
	}
	/* スライダーボタン
	============================== */
	.peopleSplide .splide__arrows{
		position: static;
	}

	.peopleGraphicImg01{
		width: 17%;
		top: -3%;
		right: 7%;
	}
	.peopleGraphicImg02{
		width: 30%;
		bottom: -4%;
		left: 5%;
	}

	/*
		environment
	-----------------------------------------------------------------------------------------------*/
	#envWrapper{
		margin-top: -30px;
		background: var(--bgNoise), url(/recruit/images/bg_top03_sp.png) no-repeat top center / cover;
	}
	#envWrapper .ctsArea{
		padding-top: 110px;
	}
	.envList{
		flex-direction: column;
		gap: 10px;
		max-width: 500px;
		margin: 30px auto 0;
	}
	.envList li,
	.envList li:first-child{
		width: 100%;
		height: 160px;
	}
	[class^="envLink-"]{
		display: flex;
		height: 100%;
		padding: 22px 25px;
	}
	.envLink-data{
		background: #fff url(/recruit/images/bg_top_env01_sp.png) no-repeat center right / auto 160px;
	}
	.envLink-benefits{
		background: #fff url(/recruit/images/bg_top_env02_sp.png) no-repeat center right / auto 160px;
	}
	.envLink-office{
		background: #fff url(/recruit/images/bg_top_env03_sp.png) no-repeat center right / auto 160px;
	}
	.dataImg,
	.benefitsImg,
	.officeImg{
		width: 48px;
		top: 55%;
		right: 160px;
	}
	.dataImg{
		top: auto;
		bottom: 10px;
		transform: none;
	}
	.benefitsImg{
		width: 45px;
		right: 140px;
	}
	.officeImg{
		width: 62px;
		right: 120px;
	}
	.envTit{
		font-size: 2.2rem;
	}
	[class^="envLink-"] .btnIcon-bk{
		width: 35px;
		height: 35px;
		background-size: 45%;
		right: 16px;
	}

	/*
		faq
	-----------------------------------------------------------------------------------------------*/
	#faqWrapper .ctsArea{
		flex-direction: column;
		align-items: center;
		gap: 10px;
		max-width: 500px;
		padding-inline: 25px;
		text-align: center;
	}
	.faqList{
		flex: none;
		width: 90%;
	}
	.faqLink{
		max-width: 100%;
		height: 70px;
	}
	.faqLink::after{
		width: 70px;
	}

	.faqGraphicImg01{
		width: 28%;
		max-width: 150px;
		top: -7%;
		right: 4%;
	}
	.faqGraphicImg02{
		width: 20%;
		max-width: 100px;
		bottom: -10%;
		left: 6%;
	}
}