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

/* ==========================================================================
	ダイバーシティ
========================================================================== */
/*
	ページタイトル
---------------------------------------------------- */
.diversityPage #cmnPageTitWrapper{
	background-image: url("../images/bg_job_diversity_page_tit_pc.png");/* pc画像は2倍書き出し */
}
/*
	各Box
---------------------------------------------------- */
.diversityBox {
	margin-bottom: 80px;
}
.diversityBox:last-child {
	margin-bottom: 0;
}
[class^="diversityChart"] {
	display: flex;
	text-align: justify;
}
/* 縦積み */
.diversityChartVertical {
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
/* 横積み */
.diversityChartHorizontal {
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.diversityChartHorizontal .txt {
	width: 400px;
	justify-content: space-between;
}
/* 注釈 */
.diversityNotes{
	width: auto;
	font-size: 1.2rem;
	padding-left: 1em;
	text-indent: -1em;
	color: var(--clrDGray);
	margin-top: 5px;
}
/*
	テーブル
---------------------------------------------------- */
/* タイトル */
.diversityScrollArea .baseCaption{
	margin-bottom: 10px;
}
.diversityScrollArea .num{
	font-size: 3.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	text-align: center;
	line-height: 100%;
}
/* 女性の数字の色 */
.diversityScrollArea .num:first-of-type{
	color: var(--clrMRed);
}
.diversityScrollArea .num .unit{
	font-size: 2.4rem;
}
/* 育児休業制度 テーブル
============================== */
.tblScrollImgArea{
	display: flex;
	gap: 9px;
	width: 580px;
}
.tblScrollImgArea .baseTableScroll{
	width: 390px;
}
/* 1列目の幅 */
.tblScrollImgArea thead th:first-of-type{
	width: 55px;
}
/* 2列目以降の幅 */
.tblScrollImgArea thead th:not(:first-of-type){
	/* width: calc((100% - 55px)/3); */
	width: 111px;
}
/* 文字揃え */
.tblScrollImgArea th,
.tblScrollImgArea td{
	text-align: center;
}
.tblScrollImgArea th{
	padding-inline: 10px;
}
/* 画像 */
.tblScrollImgAreaPic{
	display: flex;
	align-items: flex-end;
}

/* 女性職員の活躍 テーブル
============================== */
.tblScroll2ClmArea .baseTableScroll thead th{
	width: calc(100% / 2);
}
.tblScroll2ClmArea{
	width: 100%;
}



/* ==========================================================================
	福利厚生制度
========================================================================== */
.welfarePage #cmnPageTitWrapper{
	background-image: url("../images/bg_environment_welfare_page_tit_pc.png");
}
.guideWrapper .contributionBox:not(:last-of-type){
	margin-bottom: 75px;
}
/* 01のリストと、06と07以外のliに効かせる */
.welfarePage .guideWrapper .contributionBox .contributionPhList,
.welfarePage .guideWrapper .contributionBox:not(:nth-of-type(6)) .contributionPhList li{
	display: flex;
	justify-content: space-between;
}
/* 02と03と07に効かせる */
.welfarePage .guideWrapper .contributionBox:nth-of-type(2) .contributionPhList li,
.welfarePage .guideWrapper .contributionBox:nth-of-type(3) .contributionPhList li,
.welfarePage .guideWrapper .contributionBox:nth-of-type(7) .contributionPhList li{
	gap: 30px;
}
.contributionPhTxt{
	text-align: justify;
}
.contributionInnerBox{
	display: flex;
	gap: 30px;
}
/* 01と06と07のテキストの下マージン */
.welfarePage .guideWrapper .contributionBox:first-of-type .contributionPhTxt,
.guideWrapper .contributionBox:nth-of-type(6) .contributionPhTxt,
.guideWrapper .contributionBox:nth-of-type(7) .contributionPhTxt{
	margin-bottom: 30px;
}
/* 「軽井沢かぶと山荘」の文字 */
.contributionPhArea p{
	font-size: 1.2rem;
	line-height: 100%;
	color: var(--clrDGray);
	margin-top: 8px;
}


/* ==========================================================================
	人財育成制度
========================================================================== */
.educationPage #cmnPageTitWrapper{
	background-image: url("../images/bg_environment_education_page_tit_pc.png");
}
/* 01のタイトルのみ下マージンを小さく */
.educationPage .guideWrapper .contributionBox:first-of-type .lineBtmTit{
	margin-bottom: 7px;
}
/* 01の画像は2倍なのでサイズ調整 */
.educationPage .guideWrapper .contributionBox:first-of-type img{
	width: 1000px;
}
.educationPage .guideWrapper .contributionBox .contributionPhList{
	display: flex;
	gap: 10px;
}
/* カッコスタート pcでは打ち消し */
.normalTit .kakkoStart {
	text-indent: 0;
	letter-spacing: 0;
}


/* ==========================================================================
	キャリア紹介
========================================================================== */
/* --- キャッチコピー文字詰め --- */
.careerKvTit{
	margin-top: -1.05em;
}
.l1Txt1{
	text-indent: -0.05em;
	letter-spacing: -0.13em;
}
.l1Txt2{
	text-indent: -0.05em;
}
.l1Txt3{
	letter-spacing: -0.25em;
}
.l1Txt4{
	text-indent: -0.2em;
}
.l1Txt5{
	text-indent: -0.15em;
	letter-spacing: -0.2em;
}
.l2Txt1{
	text-indent: -0.3em;
}
.l2Txt2{
	letter-spacing: -0.15em;
}
.l2Txt3{
	text-indent: -0.2em;
	letter-spacing: -0.2em;
	margin-right: 0.1em;
}
.l2Txt4{
	letter-spacing: -0.1em;
}
.l2Txt5{
	text-indent: -0.1em;
	letter-spacing: -0.15em;
}
.l2Txt6{
	text-indent: -0.25em;
	letter-spacing: -0.2em;
}
.l2Txt7{
	letter-spacing: -0.3em;
}

/*
	careerTopArea
---------------------------------------------------- */
#careerTopArea{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 1140px;
	height: 157px;
	margin-top: 100px;
	margin-inline: auto;
	padding-block: 0 20px;
	border-bottom: 5px solid #000;
}
.careerTopTit{
	font-size: 8.8rem;
}
.careerTopSubTit{
	font-size: 3.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 100%;
}

/*
	kv
---------------------------------------------------- */
/* ヘッダー分padding-top:100px;を打ち消し */
#ctsWrapper.spaceS{
	padding-top: 0;
}
[id^="careerKvWrapper0"]{
	height: calc(100vh - 257px);
	min-height: 600px;
	position: relative;
	overflow: hidden;
}
/* 写真エリア
============================== */
[id^="careerKvWrapper0"]::before{
	content: " ";
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../images/bg_environment_career_kv_01_pc.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
}
/* コンテンツ幅用箱
============================== */
.careerKvWrapperInBox{
	width: var(--wBase);
	height: 100%;
	margin-inline: auto;
	padding-inline: 30px;
	position: relative;
}
/* プロフィール
============================== */
.careerKvProfileBox{
	position: relative;
	display: grid;
	grid-auto-rows: auto;
	width: fit-content;
	background-color: #fff;
	border: 1px solid #000;
	position: absolute;
	bottom: 60px;
	left: 30px;
}
/* 01などの数字 */
.careerKvProfileBox::before{
	content: "01";
	position: absolute;
	top: -55px;
	font-size: 4.6rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 100%;
}
@media print, screen and (min-width:813px){
	/* --- インタビューナンバー --- */
	.careerKvNum{
		grid-column-start: 1;
		grid-row-start: 1;
		grid-row: span 2;
		align-self: stretch;
	}
	/* --- キャッチコピー --- */
	.careerKvTit{
		grid-column-start: 2;
		grid-row-start: 1;
	}
	/* --- 職種・名前 --- */
	.careerKvPerson{
		grid-column-start: 2;
		grid-row-start: 2;
		align-self: start;
	}
}
/* --- インタビューナンバー --- */
.careerKvNum{
	border-right: 1px solid #000;
	writing-mode: vertical-rl;
	text-align: center;
	font-size: 2.2rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	letter-spacing: 0.05rem;
	padding: 10px;
}
/* --- キャッチコピー --- */
.careerKvTit{
	border-bottom: 1px solid #000;
	color: var(--clrMRed);
	font-size: 4.6rem;
	line-height: 120%;
	padding: 40px;
}
/* --- 職種・名前 --- */
.careerKvPerson{
	padding: 20px 40px;
}
.careerKvPerson > span{
	display: inline-block;
}
.careerKvPerson .job{
	font-size: 1.3rem;
	margin-right: 10px;
}
.careerKvPerson .name{
	font-size: 2.4rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 90%;
	translate: 0 0.08em;
}
/* --- 職種・名前 --- */
.careerKvPerson .notes{
	font-size: 1rem;
	margin-left: 20px;
}
/* アニメーション
============================== */
[id^="careerKvWrapper0"]::before{
	scale: 1.2;
	filter: blur(20px);
	opacity: 0;
	transition: opacity 0.1s;
}
.careerKvProfileBox{
	opacity: 0;
}

/* -------------------------------------------
   2. スクロール検知後のアニメーション（.jsAnmStart付与時）
   ------------------------------------------- */
/* 背景画像のアニメーション */
[id^="careerKvWrapper0"].jsAnmStart::before {
	/* アニメーション定義をここに移動 */
	animation: anmCareerKvPh 0.8s ease 0.6s forwards;
}
/* テキストのアニメーション */
.jsAnmStart .careerKvProfileBox {
	animation: anmFadeLeft 0.8s ease 0.7s forwards,
				anmFadeIn 0.8s ease 0.7s forwards;
}
[id^="careerKvWrapper0"].jsAnm.jsAnmStart {
	opacity: 1;
}
@keyframes anmCareerKvPh{
	0%  {
		scale: 1.2;
		filter: blur(20px);
		opacity: 0;
	}
	100%{
		scale: 1;
		filter: blur(0);
		opacity: 1;
	}
}

/*
	careerReadArea
---------------------------------------------------- */
.careerReadArea{
	height: 173px;
	background-color: var(--clrMRed);
}
.careerReadArea .cmnLeadTxt{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #fff;
	line-height: 180%;
}

/*
	careerChronologyWrapper
---------------------------------------------------- */
[id^="careerChronologyWrapper"].ctsArea{
	padding-block: 72px 0;
}
.careerChronologyList li{
	position: relative;
	display: flex;
	justify-content: space-between;
	padding-block: 0 58px;
}
.careerChronologyList li:last-of-type{
	padding-block: 0 90px;
}
/* 縦のラインと赤い丸共通 */
.careerChronologyList li::before,
.careerChronologyList li::after{
	content: " ";
	display: block;
	position: absolute;
}
/* 縦のラインの赤い丸 */
.careerChronologyList li::before{
	width: 21px;
	aspect-ratio: 1 / 1;
	background-color: var(--clrMRed);
	border-radius: 50%;
	left: 321px;
	top: 35px;
	z-index: 1;
}
/* -------------------------------------------
   縦のラインのグレー線とアニメーション
   ------------------------------------------- */
.careerChronologyList li::after {
	content: "";
	position: absolute;
	width: 5px;
	height: calc(100% + 20px);
	background-color: var(--clrBlack15);
	top: 35px;
	left: 329px;
	z-index: 0;
	/* 初期状態：上を起点に、高さ0にしておく */
	transform: scaleY(0);
	transform-origin: top;
	/* 動きの滑らかさ */
	transition: transform 2s cubic-bezier(0.33, 1, 0.68, 1);
}
/* JSでこのクラスがついた瞬間に、シュッと伸びる */
.careerChronologyList li.jsAnmStart::after {
    transform: scaleY(1);
}
@keyframes growLine {
	to {
		transform: scaleY(1);
	}
}
/* 最後のグレー線のみ短く */
.careerChronologyList li:last-of-type::after{
	bottom: 0;
	height: calc(100% - 125px);
}
.careerChronologyNum{
	font-size: 8rem;
	font-family: var(--fEn);
	font-weight: 500;
	line-height: 100%;
	margin-bottom: 10px;
}
.careerChronologySub{
	width: fit-content;
	font-size: 1.8rem;
	line-height: 100%;
	color: #fff;
	padding: 6px 8px 8px;
	background-color: #000;
}
.careerChronologyTxtArea{
	width: 750px;
}
.careerChronologyRead{
	font-size: 4rem;
	line-height: 1.1;
	margin-bottom: 15px;
}
.careerChronologyTxt{
	font-size: 1.7rem;
	text-align: justify;
	line-height: 175%;
	margin-bottom: 15px;
}

/*
	careerKvWrapper02
---------------------------------------------------- */
#careerKvWrapper02::before{
	background-image: url(../images/bg_environment_career_kv_02_pc.png);
}
/* 数字を02に */
#careerKvWrapper02 .careerKvProfileBox::before{
	content: "02";
}

/*
	careerKvWrapper02
---------------------------------------------------- */
#careerChronologyWrapper02 .careerChronologyList li:last-of-type{
	padding-block: 0;
}
#careerChronologyWrapper02 .careerChronologyList li:last-of-type::after{
	height: calc(100% - 35px);
}



@media screen and (max-width:812px){

	/* ==========================================================================
		ダイバーシティ
	========================================================================== */
	/*
		ページタイトル
	---------------------------------------------------- */
	.diversityPage #cmnPageTitWrapper{
		background-image: url("../images/bg_job_diversity_page_tit_sp.png");
	}

	/*
		各Box
	---------------------------------------------------- */
	.diversityBox {
		margin-bottom: 40px;
	}
	[class^="diversityChart"] {
		flex-direction: column;
	}
	/* 縦積み */
	.diversityChartVertical {
		gap: 30px;
	}
	/* 横積み */
	.diversityChartHorizontal .txt {
		width: 100%;
	}
	/*
		テーブル
	---------------------------------------------------- */
	/* 育児休業制度 テーブル
	============================== */
	.tblScrollImgArea{
		width: 100%;
	}
	.tblScrollImgArea .baseTableScroll{
		width: 100%;
		table-layout: fixed;
	}
	.tblScrollImgArea thead th:first-of-type{
		width: 44px;
	}
	.tblScrollImgArea thead th:not(:first-of-type){
		width: calc((100% - 44px)/3);
	}
	.tblScrollImgArea  th:first-of-type{
		padding-inline: 5px;
	}
	.tblScrollImgArea{
		flex-direction: column;
	}
	.diversityBox tbody th,
	.diversityBox tbody td{
		padding: 10px;
	}
	/* 画像 */
	.tblScrollImgAreaPic{
		justify-content: center;
		align-items: center;
	}
	.tblScrollImgAreaPic img{
		max-width: 125px;
	}
	/* 女性職員の活躍 テーブル
	============================== */
	.diversityScrollArea .num{
		font-size: 2.8rem;
	}
	.diversityScrollArea .num .unit{
		font-size: 1.8rem;
	}


	/* ==========================================================================
		福利厚生制度
	========================================================================== */
	.welfarePage #cmnPageTitWrapper{
		background-image: url("../images/bg_environment_welfare_page_tit_sp.png");
	}
	.guideWrapper .contributionBox:not(:last-of-type){
		margin-bottom: 45px;
	}
	.guideWrapper .contributionBox:nth-of-type(2) .contributionPhList li,
	.guideWrapper .contributionBox:nth-of-type(3) .contributionPhList li,
	.guideWrapper .contributionBox:nth-of-type(7) .contributionPhList li{
		gap: 20px;
	}
	.guideWrapper .contributionBox:first-of-type .contributionPhList{
		flex-wrap: wrap;
		gap: 20px;
	}
	.guideWrapper .contributionBox:first-of-type .contributionPhList li{
		width: calc((100% - 20px)/2);
	}
	.guideWrapper .contributionBox:nth-of-type(2) .contributionInnerBox,
	.guideWrapper .contributionBox:nth-of-type(3) .contributionInnerBox,
	.guideWrapper .contributionBox:nth-of-type(7) .contributionInnerBox{
		flex-direction: column;
	}
	.guideWrapper .contributionBox:nth-of-type(7) .contributionInnerBox img{
		margin: 0 auto;
	}
	/* 01と06のテキストの下マージン */
	.guideWrapper .contributionBox:first-of-type .contributionPhTxt,
	.guideWrapper .contributionBox:nth-of-type(6) .contributionPhTxt{
		margin-bottom: 20px;
	}
	/* 07のテキストの下マージン打ち消し */
	.guideWrapper .contributionBox:nth-of-type(7) .contributionPhTxt{
		margin-bottom: 0;
	}


	/* ==========================================================================
		人財育成制度
	========================================================================== */
	.educationPage #cmnPageTitWrapper{
		background-image: url("../images/bg_environment_education_page_tit_sp.png");
	}
	/* 2行のタイトルの行間調整 */
	.educationPage .guideWrapper .contributionBox:first-of-type .lineBtmTit span,
	.educationPage .guideWrapper .contributionBox:nth-of-type(5) .lineBtmTit span,
	.educationPage .guideWrapper .contributionBox:nth-of-type(6) .lineBtmTit span,
	.educationPage .guideWrapper .contributionBox:nth-of-type(9) .lineBtmTit span{
		line-height: 120%;
	}
	.educationPage .guideWrapper .contributionBox:first-of-type div{
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.educationPage .guideWrapper .contributionBox .contributionPhList{
		gap: 20px;
	}
	/* 01の画像のサイズ打ち消し */
	.educationPage .guideWrapper .contributionBox:first-of-type img{
		width: 993.5px;
		padding-bottom: 13px;
	}
	/* カッコスタート spのみ適用 */
	.normalTit .kakkoStart {
		text-indent: -0.4em;
		letter-spacing: -0.05em;
	}


	/* ==========================================================================
		キャリア紹介
	========================================================================== */
	/*
		careerTopArea
	---------------------------------------------------- */
	#careerTopArea{
		width: 90%;
		height: 50px;
		padding-block: 0 15px;
		margin-top: 80px;
	}
	.careerTopTit{
		font-size: 4rem;
	}
	.careerTopSubTit{
		font-size: 2.5rem;
	}

	/*
		kv
	---------------------------------------------------- */
	[id^="careerKvWrapper0"]{
		height: calc(100vh - 130px);
		min-height: 550px;
	}
	[id^="careerKvWrapper0"]::before{
		background-image: url(../images/bg_environment_career_kv_01_sp.png);
	}
	/* コンテンツ幅用箱
	============================== */
	.careerKvWrapperInBox{
		display: flex;
		flex-direction: column;
		max-width: 500px;
		padding: 20px 20px 30px 20px;
	}
	/* プロフィール
	============================== */
	.careerKvProfileBox{
		display: flex;
		flex-direction: column;
		width: 100%;
		position: static;
		margin-top: auto;
	}
	/* 01などの数字 */
	.careerKvProfileBox::before{
		top: -48px;
		font-size: 4rem;
	}
	/* --- インタビューナンバー --- */
	.careerKvNum{
		order: 1;
		border-right: none;
		border-bottom: 1px solid #000;
		writing-mode: horizontal-tb;
		text-align: left;
		font-size: 1.6rem;
		padding: 10px 15px;
	}
	/* --- キャッチコピー --- */
	.careerKvTit{
		order: 2;
		font-size: 2.7rem;
		padding: 15px;
	}
	/* --- 職種・名前 --- */
	.careerKvPerson{
		order: 3;
		padding: 10px 15px;
	}
	.careerKvPerson .job{
		font-size: 1.2rem;
		margin-right: 8px;
	}
	.careerKvPerson .name{
		font-size: 1.8rem;
	}
	/* --- 職種・名前 --- */
	.careerKvPerson .notes{
	font-size: .8rem;
	margin-left: 10px;
}
	/* アニメーション
	============================== */
	.careerKvProfileBox{
		opacity: 0;
		animation: anmFadeUp 0.8s var(--anmBaseCB) 0.7s forwards,
				anmFadeIn 0.8s ease 0.7s forwards;
	}
	/*
		careerReadArea
	---------------------------------------------------- */
	.careerReadArea{
		display: flex;
		justify-content: center;
		height: fit-content;
	}
	.careerReadArea .cmnLeadTxt{
		max-width: 500px;
		font-size: 1.5rem;
		padding: 20px;
		margin-bottom: 0;
	}

	/*
		careerChronologyWrapper
	---------------------------------------------------- */
	[id^="careerChronologyWrapper"].ctsArea{
		padding-block: 40px 0;
	}
	.careerChronologyList li{
		flex-direction: column;
		padding-left: 30px;
	}
	/* 縦のラインの赤い丸 */
	.careerChronologyList li::before{
		width: 13px;
		left: 0;
		top: 20px;
	}
	/* 縦のラインのグレー線 */
	.careerChronologyList li::after{
		width: 3px;
		height: 100%;
		top: 30px;
		left: 5px;
	}
	/* 最後のグレー線のみ短く */
	.careerChronologyList li:last-of-type::after{
		height: calc(100% - 120px);
	}
	.careerChronologyTxtArea{
		width: 100%;
	}
	.careerChronologyNum{
		font-size: 5rem;
	}
	.careerChronologySub{
		font-size: 1.6rem;
	}
	.careerChronologyRead{
		font-size: 2.7rem;
		white-space: nowrap;
		margin-bottom: 12px;
	}
	.careerChronologyTxt{
		font-size: 1.4rem;
	}
	/*
		careerKvWrapper02
	---------------------------------------------------- */
	#careerKvWrapper02::before{
		background-image: url(../images/bg_environment_career_kv_02_sp.png);
	}
	#careerChronologyWrapper02 .careerChronologyList li:last-of-type::after{
		height: calc(100% - 30px);
	}
}