@charset "UTF-8";

/*
	共通
-----------------------------------------------------------------------------------------------*/
.pageData #ctsWrapper,
.pageFaq #ctsWrapper,
.pageWlfOfc #ctsWrapper{
	padding-bottom: 0;
}

/*
	数字でわかるストランザ
-----------------------------------------------------------------------------------------------*/
.pageData .ctsArea{
	text-align: left;
}
#dataWrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#dataWrapper .titCmnSideBorder{
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
}

/* レイアウト
============================== */
/* リスト */
.dataList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	width: 100%;
}
/* アイテム */
.dataItem {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	border-radius: max(30px, calc(30 / var(--baseWidth) * 100vw));
	background: var(--bgCream);
}
.dataCts{
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	width: 100%;
	padding-inline: max(50px, calc(50 / var(--baseWidth) * 100vw));
	position: relative;
}
/* カードタイトル */
.dataItem .tit {
	flex-shrink: 0;
	display: inline-block;
	padding:
		max(15px, calc(15 / var(--baseWidth) * 100vw))
		max(10px, calc(10 / var(--baseWidth) * 100vw))
		max(5px, calc(5 / var(--baseWidth) * 100vw))
		max(20px, calc(20 / var(--baseWidth) * 100vw));
	font-size: max(1.6rem, calc(16 / var(--baseWidth) * 100vw));
	color: var(--colorMain);
	border-bottom: 1px solid var(--colorMain);
}
.dataItem .tit span {
	font-size: max(1.2rem, calc(12 / var(--baseWidth) * 100vw));
}
/* 数字 */
.dataItem .number {
	font-family: var(--ffEn);
	font-size: max(8.0rem, calc(80 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.0;
	color: var(--colorMain);
	text-align: center;
}
.dataItem .unit {
	font-size: max(3.0rem, calc(30 / var(--baseWidth) * 100vw));
}
/* 注釈 */
.dataItem .note {
	font-size: max(1.2rem, calc(12 / var(--baseWidth) * 100vw));
	text-align: center;
	color: var(--colorGrey400);
}
/* 画像 */
.dataItem .ph {
	display: block;
	width: 100%;
	height: auto;
}

/* 事業成長率
============================== */
.dataItemGrowth .txtArea {
	position: absolute;
	top: max(15px, calc(15 / var(--baseWidth) * 100vw));
	left: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemGrowth .ph {
	width: 100%;
}

/* 昇給者率
============================== */
.dataItemSalary .ph{
	width: auto;
	height: max(110px, calc(110 / var(--baseWidth) * 100vw));
}

/* 平均年齢
============================== */
.dataItemAge .ph{
	width: auto;
	height: max(110px, calc(110 / var(--baseWidth) * 100vw));
}

/* 年代別社員構成割合
============================== */
.dataItemGeneration .dataCts{
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemGeneration .ph{
	width: 100%;
}

/* 男女比
============================== */
.dataItemGender .dataCts{
	gap: 0;
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}

/* 男女比 */
.genderRatio {
	display: flex;
	justify-content: center;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	margin-bottom: max(5px, calc(5 / var(--baseWidth) * 100vw));
}
.genderRatioItem .label {
	color: var(--colorMain);
	font-weight: var(--fwBold);
}
.dataItemGender .ph{
	width: auto;
	height: max(100px, calc(100 / var(--baseWidth) * 100vw));
}

/* 男女間賃金差異 */
.wageGap{
	width: 100%;
	padding-top: max(20px, calc(20 / var(--baseWidth) * 100vw));
	border-top: 1px solid var(--colorGrey200);
}
.wageGapHead{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
.wageGapTit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: max(3px, calc(3 / var(--baseWidth) * 100vw)) max(25px, calc(25 / var(--baseWidth) * 100vw));
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
	color: #fff;
	font-weight: var(--fwBold);
	background: var(--colorMain);
	border-radius: 999px;
}
.wageGapLead{
	margin-top: max(5px, calc(5 / var(--baseWidth) * 100vw));
	color: var(--colorGrey400);
	font-size: max(1.2rem, calc(12 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	text-align: center;
	letter-spacing: 0.1rem;
}
.wageGapList{
	display: flex;
	flex-direction: column;
	gap: max(5px, calc(5 / var(--baseWidth) * 100vw));
}
.wageGapItem{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: max(15px, calc(15 / var(--baseWidth) * 100vw));
}
.wageGapItem dt{
	color: var(--colorMain);
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.wageGapItem dd{
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	margin: 0;
	color: var(--colorMain);
	font-weight: var(--fwBold);
	line-height: 1;
}
.wageGapItem .value{
	font-family: var(--ffEn);
	font-size: max(3.5rem, calc(35 / var(--baseWidth) * 100vw));
}
.wageGapItem .unit{
	margin-left: max(2px, calc(2 / var(--baseWidth) * 100vw));
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
}
.wageGapNote{
	margin-top: max(10px, calc(10 / var(--baseWidth) * 100vw));
	padding-left: max(1.1rem, calc(11 / var(--baseWidth) * 100vw));
	color: var(--colorGrey400);
	font-size: max(1.1rem, calc(11 / var(--baseWidth) * 100vw));
	text-indent: -1.1rem;
	letter-spacing: 0;
}

/* 女性管理職割合
============================== */
.dataItemFemaleManager .dataCts{
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemFemaleManager .ph{
	width: 100%;
}

/* 月平均残業時間
============================== */
.dataItemOvertime .dataCts{
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemOvertime .ph{
	width: auto;
	height: max(100px, calc(100 / var(--baseWidth) * 100vw));
}

/* 有給休暇取得率
============================== */
.dataItemPaidLeave .dataCts{
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemPaidLeave .ph{
	width: auto;
	height: max(80px, calc(80 / var(--baseWidth) * 100vw));
}

/* 育児休業から復職率
============================== */
.dataItemChildcare .dataCts{
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.dataItemChildcare .ph{
	width: auto;
	height: max(110px, calc(110 / var(--baseWidth) * 100vw));
}

/* 注釈
============================== */
.dataNotes{
	width: 100%;
	margin-top: max(10px, calc(10 / var(--baseWidth) * 100vw));
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
	text-align: right;
}


/*
	福利厚生・オフィス環境
-----------------------------------------------------------------------------------------------*/
.pageWlfOfc #ctsWrapper > .ctsArea{
	display: flex;
	gap: max(100px, calc(100 / var(--baseWidth) * 100vw));
	flex-direction: column;
}

/* 福利厚生
============================== */
.welfareListHead{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: max(85px, calc(85 / var(--baseWidth) * 100vw));
	line-height: 1.5;
	color: #fff;
	font-size: max(1.8rem, calc(18 / var(--baseWidth) * 100vw));
	background: var(--colorMain);
	font-weight: var(--fwBold);
	border-radius: var(--bdrs30) var(--bdrs30) 0 0;
}
.welfareListHead span{
    font-size: max(1.3rem, calc(13 / var(--baseWidth) * 100vw));
}
.welfareList{
	display: flex;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	flex-wrap: wrap;
}
.welfareList li{
	width: calc((100% - max(60px, calc(60 / var(--baseWidth) * 100vw))) / 3);
}
.welfareListTxt{
	display: flex;
	gap: max(15px, calc(15 / var(--baseWidth) * 100vw));
	flex-direction: column;
	align-items: center;
	min-height: max(238px, calc(238 / var(--baseWidth) * 100vw));
	margin: 0 auto;
	padding: max(20px, calc(20 / var(--baseWidth) * 100vw)) max(30px, calc(30 / var(--baseWidth) * 100vw)) max(30px, calc(30 / var(--baseWidth) * 100vw));
	text-align: left;
	background: var(--bgCream);
	border-radius: 0 0 var(--bdrs30) var(--bdrs30);
}
/* アイコン */
.welfareImg{
	height: max(90px, calc(90 / var(--baseWidth) * 100vw));
}
.welfareImg img{
	width: auto;
	height: 100%;
}

/* オフィス環境
============================== */
.officeList{
	display: flex;
	gap: max(80px, calc(80 / var(--baseWidth) * 100vw));
	flex-direction: column;
}
#office .cmnClm{
	width: 100%;
}
/* テーブル */
#office .tblBase{
	letter-spacing: .1rem;
}
#office .tblBase th{
	align-items: flex-start;
	width: max(150px, calc(150 / var(--baseWidth) * 100vw));
}
#office .tblBase td{
	display: flex;
	flex-direction: column;
	line-height: 1.7;
}
/* splide */
#office .cmnClmBox{
	align-items: flex-start;
}
#office .titCmnSideBorder{
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
/* テキストリンク */
#office .cmnTxtBtn-en{
	margin-top: max(10px, calc(10 / var(--baseWidth) * 100vw));
	font-family: var(--ffEn);
}


/*
	よくある質問
-----------------------------------------------------------------------------------------------*/
.pageFaq #ctsWrapper > .ctsArea{
	width: var(--width1000);
}
.faqWrapper{
	display: flex;
	flex-direction: column;
	gap: max(60px, calc(60 / var(--baseWidth) * 100vw));
}

/* 見出し
============================== */
.pageFaq .detailHead{
	margin-bottom: 30px;
	text-align: left;
}

/* アンカーリンク
============================== */
.anchorList{
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: max(880px, calc(880 / var(--baseWidth) * 100vw));
	margin: 0 auto max(60px, calc(60 / var(--baseWidth) * 100vw)) auto;
}
.anchorList li{
	width: calc((100% - max(30px, calc(30 / var(--baseWidth) * 100vw)))/4);
}
.anchor{
	min-width: 100%;
	width: 100%;
}

/* アコーディオン
============================== */
.cmnToggleBox{
	display: flex;
	flex-direction: column;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
}
.cmnToggle{
	background: var(--bgCream);
	border-radius: max(30px, calc(30 / var(--baseWidth) * 100vw));
	transition: background-color .4s;
}
.cmnToggle:has(.toggle_key.close){
	background: var(--bgCream);
}
[class^="toggle"]{
	padding: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
/* アイコン */
.cmnToggleImg{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: max(50px, calc(50 / var(--baseWidth) * 100vw));
	height: max(50px, calc(50 / var(--baseWidth) * 100vw));
	margin-right: max(15px, calc(15 / var(--baseWidth) * 100vw));
	border-radius: max(50px, calc(50 / var(--baseWidth) * 100vw));
	background: #fff;
}
.cmnToggle_ttl .cmnToggleImg img{
	width: max(20px, calc(20 / var(--baseWidth) * 100vw));
}
.cmnToggle_answer .cmnToggleImg img{
	width: max(18px, calc(18 / var(--baseWidth) * 100vw));
}
/* 質問 */
.toggle_key{
	padding-right: max(60px, calc(60 / var(--baseWidth) * 100vw));
	position: relative;
}
.cmnToggle_ttl{
	display: flex;
	align-items: center;
	text-align: left;
	font-size: max(1.8rem, calc(18 / var(--baseWidth) * 100vw));
}
/* 開閉装飾 + - */
.toggle_key::before,
.toggle_key::after{
	content: "";
	width: max(20px, calc(20 / var(--baseWidth) * 100vw));
	height: 2px;
	background: var(--colorMain);
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: 30px;
	transition: transform .3s;
}
.toggle_key::before{
	transform: rotate(0deg);
}
.toggle_key::after{
	transform: rotate(90deg);
}
.toggle_key.close::before{
	transform: rotate(180deg);
}
.toggle_key.close::after{
	display: none;
}
@media (any-hover: hover){
	.toggle_key:hover{
		cursor: pointer;
	}
	.cmnToggle:hover{
		background: #f3eee3;
		transition: background-color .4s;
	}
}
/* 答え */
.toggle{
	display: none;
	padding-top: 0;
}
.cmnToggle_answer {
	display: flex;
	align-items: flex-start;
}
.cmnToggleTxt{
	align-self: center;
	width: 100%;
	text-align: left;
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	font-weight: var(--fwMedium);
}
/* 答え文章量が2行以上の時 */
.cmnToggleTxt.is-multiline{
	align-self: flex-start;
}


@media screen and (width <= 812px){
	/*
		数字でわかるストランザ
	-----------------------------------------------------------------------------------------------*/
	#dataWrapper .titCmnSideBorder{
		margin-bottom: 20px;
	}

	/* レイアウト
	============================== */
	.dataList{
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	.dataItemGrowth,
	.dataItemGeneration,
	.dataItemGender{
		grid-column: 1 / -1;
	}
	.dataItem{
		border-radius: 10px;
	}
	.dataCts{
		gap: 10px;
		padding: 10px 15px;
	}

	/* カードタイトル
	============================== */
	.dataItem .tit{
		padding: 10px 10px 5px 15px;
		font-size: 1.3rem;
	}
	.dataItem .tit span{
		font-size: 0.9rem;
	}

	/* 数字
	============================== */
	.dataItem .number{
		font-size: 4.0rem;
	}
	.dataItem .unit{
		font-size: 1.6rem;
	}
	.dataItem .note{
		font-size: 0.9rem;
	}

	/* 事業成長率
	============================== */
	.dataItemGrowth .dataCts{
		padding: 0 50px;
	}
	.dataItemGrowth .txtArea{
		top: 30px;
		left: 30px;
	}
	.dataItemGrowth .number{
		font-size: 6.0rem;
	}
	.dataItemGrowth .unit{
		font-size: 2.5rem;
	}
	.dataItemGrowth .note{
		font-size: 1.1rem;
	}

	/* 昇給者率
	============================== */
	.dataItemSalary .ph{
		height: 80px;
	}

	/* 平均年齢
	============================== */
	.dataItemAge .ph{
		height: 80px;
	}

	/* 年代別社員構成割合
	============================== */
	.dataItemGeneration .dataCts{
		padding: 20px 50px;
	}

	/* 男女比
	============================== */
	.dataItemGender .dataCts{
		padding: 20px 25px;
	}

	/* 男女比 */
	.dataItemGender .number{
		font-size: 6.0rem;
	}
	.dataItemGender .unit{
		font-size: 2.5rem;
	}
	.dataItemGender .ph{
		height: 80px;
	}

	/* 男女間賃金差異 */
	.wageGap{
		padding-top: 15px;
	}
	.wageGapTit{
		font-size: 1.3rem;
	}
	.wageGapLead{
		font-size: 1.1rem;
	}
	.wageGapItem{
		gap: 10px;
	}
	.wageGapItem dt{
		font-size: 1.4rem;
	}
	.wageGapItem .value{
		font-size: 2.6rem;
	}
	.wageGapItem .unit{
		font-size: 1.5rem;
	}
	.wageGapNote{
		padding-left: 1.0rem;
		font-size: 1.0rem;
		text-indent: -1.0rem;
	}

	/* 女性管理職割合
	============================== */
	.dataItemFemaleManager .dataCts{
		padding-block: 10px;
	}

	/* 月平均残業時間
	============================== */
	.dataItemOvertime .dataCts{
		padding-block: 10px;
	}
	.dataItemOvertime .ph{
		height: 70px;
	}

	/* 有給休暇取得率
	============================== */
	.dataItemPaidLeave .dataCts{
		padding-block: 10px;
	}
	.dataItemPaidLeave .ph{
		height: 60px;
	}

	/* 育児休業から復職率
	============================== */
	.dataItemChildcare .dataCts{
		padding-block: 10px;
	}
	.dataItemChildcare .ph{
		height: 80px;
	}

	/* 注釈
	============================== */
	.dataNotes{
		margin-top: 10px;
		margin-bottom: 20px;
		font-size: 1.0rem;
	}


	/*
		福利厚生・オフィス環境
	-----------------------------------------------------------------------------------------------*/
	.pageWlfOfc #ctsWrapper > .ctsArea{
		gap: 80px;
	}

	/* 福利厚生
	============================== */
	.welfareListHead{
		height: 65px;
		font-size: 1.6rem;
	}
	.welfareListHead span{
		font-size: 1.2rem;
	}
	.welfareList{
		gap: 20px;
	}
	.welfareList li{
		width: 100%;
	}
	.welfareListTxt{
		gap: 10px;
		min-height: auto;
		padding: 15px 20px 20px;
	}
	/* アイコン */
	.welfareImg{
		height: 80px;
	}

	/* オフィス環境
	============================== */
	/* テーブル */
	#office .tblBase th{
		width: 110px;
	}
	/* splide */
	#office .cmnClmBox{
		gap: 25px;
	}
	#office .titCmnSideBorder{
		margin-bottom: 20px;
	}
	/* テキストリンク */
	#office .cmnTxtBtn-en{
		margin-top: 8px;
	}


	/*
		よくある質問
	-----------------------------------------------------------------------------------------------*/
	.pageFaq .ctsArea{
		max-width: 500px;
		width: 100%;
	}
	.faqWrapper{
		gap: 50px;
	}

	/* 見出し
	============================== */
	.pageFaq .detailHead{
		margin-bottom: 20px;
	}

	/* アンカーリンク
	============================== */
	.anchorList{
		gap: 5px;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 40px;
	}
	.anchorList li{
		width: calc((100% - 10px) / 2);
	}
	.anchor{
		min-width: 100%;
		width: 100%;
	}
	.anchor [class^="btnIcon"]{
		background: #fff url(/recruit/images/ico_arrow_anchor_bk.svg) no-repeat 50% center / 50%;
	}
	@media (any-hover: hover){
		.anchor:hover [class^="btnIcon"]{
			background: var(--colorBlack) url(/recruit/images/ico_arrow_anchor_wh.svg) no-repeat 50% center / 50%;
		}
	}

	/* アコーディオン
	============================== */
	.cmnToggleBox{
		gap: 10px;
	}
	.cmnToggle{
		border-radius: 20px;
	}
	[class^="toggle"]{
		padding: 20px;
	}
	/* アイコン */
	.cmnToggleImg{
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}
	.cmnToggle_ttl .cmnToggleImg img{
		width: 18px;
	}
	.cmnToggle_answer .cmnToggleImg img{
		width: 16px;
	}
	/* 質問 */
	.toggle_key{
		padding-right: 40px;
	}
	.cmnToggle_ttl{
		font-size: 1.5rem;
	}
	/* 開閉装飾 + - */
	.toggle_key::before,
	.toggle_key::after{
		width: 15px;
		right: 20px;
	}
	/* 答え */
	.toggle{
		padding-top: 0;
	}
	.cmnToggleTxt{
		font-size: 1.4rem;
	}
}