@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("../img/keyvisual_pc.webp") no-repeat center / cover;
}
[id^="sec_"] .lead{
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.889;
}
@media screen and (max-width: 1440px){
	#keyVisual{
		background-position: 23% center;
	}
}
@media screen and (max-width: 1200px){
	#keyVisual{
		background-position: 37% center;
	}
	#keyVisual .inner .left{
		padding-left: 40px;
	}
	#keyVisual .ttl{
		font-size: 4rem;
	}
}
@media screen and (max-width: 820px){
	[id^="sec_"] .lead{
		text-align: left;
	}
	
}
@media screen and (max-width: 767px){
	#keyVisual{
		background-image: url("../img/keyvisual_sp.webp");
		background-position: 50% center;
	}
	#keyVisual .inner .left{
		padding-left: 0;
	}
	#keyVisual .ttl{
		font-size: clamp(1.8rem,5.2vw,4.8rem);
	}
}
@media screen and (max-width: 374px){
	#keyVisual .ttl{
		font-size: 1.4rem;
	}
	[id^="sec_"] .ttl-sub{
		font-size: 3rem;
	}
}

/* ------------------------------------------------------------------------ */

/* Data詳細

/* ------------------------------------------------------------------------ */

#sec_data .container{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 48px;
	margin-top: 48px;
}


#sec_data .container li{
	background: #fff;
	border: solid 2px var(--color-black);
	padding: 0 15px 24px;
}
#sec_data .container.two li{
	width: calc(100% / 2);
}
#sec_data .container.three li{
	width: calc(100% / 3);
}

#sec_data .container2 li:first-child{
	max-width: 624px;
	width: 54%;
}
#sec_data .container2 li:last-child{
	max-width: 528px;
	width: 46%;
}

#sec_data .container li .flex{
	align-items: center;
	justify-content: center;
	margin-top: 25px;
}

#sec_data .container .label-ttl{
	font-size: 2.8rem;
	margin-right: 1.5em;
	margin-bottom: -20px;
}

#sec_data .flex-3 .box{
	width: 30%;
}
#sec_data .flex-3 .box-graph{
	margin-top: 20px;
	margin-right: 5px;
	max-width: 200px;
	width: 40%;
}
#sec_data .flex-3 .coutUp .num{
	font-size: 2.5em;
}


#sec_data li .ttl{
	background: var(--color-black);
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	margin-top: 10px;
	margin-left: -24px;
	position: relative;
	width: calc(100% + 30px);
	height: 48px;
	display: grid;
	place-content: center;
}
	#sec_data li .ttl::after{
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 17px;
		background: #1A1A1A;
		background: linear-gradient(105deg, rgba(26, 26, 26, 1) 50%, rgba(255, 255, 255, 1) 50%);
	}

#sec_data li .coutUp{
	font-size: 4rem;
	font-weight: 500;
	color: var(--color-base);
	line-height: 1;
	margin: 10px auto 0;
	max-width: fit-content;
	position: relative;
}

#sec_data li .coutUp .num{
	font-size: 3.25em;
	font-weight: 700;
	font-family: "Barlow", sans-serif;
}

#sec_data li .label{
	background: #737373;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	min-width: 80px;
	display: inline-block;
	margin: 16px auto 0;
	padding: 0 10px;
}

#sec_data li::after{
	content: "";
	display: block;
	margin: 20px auto 0;
}

/* 従業員数 */
#sec_data .container li.employee{
	max-width: 534px;
	width: 45%;
}
	#sec_data li.employee::after{
		background: url("../img/icon_employee.svg") no-repeat center / contain;
		width: 100%;
		max-width: 380px;
		aspect-ratio: 380/140;
		margin-top: 0;
	}
		#sec_data li.employee .coutUp::after,
		#sec_data li.employee .coutUp::before{
			content: "";
			display: block;
			width: 30px;
			height: 35px;
			background: url(../img/icon_star.svg) no-repeat center / contain;
			position: absolute;
			top: 40px;
		}
		#sec_data li.employee .coutUp::before{
			right: calc(100% + 20px);
		}
		#sec_data li.employee .coutUp::after{
			left: calc(100% + 20px);
			transform: scale(-1,1);
		}

/* 男女比 */
#sec_data .container li.ratio{
	max-width: 618px;
	width: 55%;
}
#sec_data li.ratio::after{
	content: none;
}
	#sec_data li.ratio .box-left::after,
	#sec_data li.ratio .box-graph::before,
	#sec_data li.ratio .box-right::after{
		content: "";
		display: block;
	}
	#sec_data li.ratio .box-left::after{
		background: url(../img/icon_men.svg) no-repeat center / contain;
		max-width: 97px;
		width: 66%;
		aspect-ratio: 97/128;
		margin: 10px 32% 0 auto;
	}
	#sec_data li.ratio .box-right::after{
		background: url(../img/icon_women.svg) no-repeat center / contain;
		max-width: 80px;
		width: 54%;
		aspect-ratio: 80/112;
		margin: 26px 35% 0 auto;
	}
	#sec_data li.ratio .box-graph::before{
		background: url(../img/icon_graph.svg) no-repeat center / contain;
		max-width: 200px;
		aspect-ratio: 1/1;
		margin: 0 auto;
	}

/* 平均年齢 */
#sec_data li.age::after{
	content: none;
}
#sec_data li.age .img{
	background: url(../img/icon_person3.svg) no-repeat center / contain;
	max-width: 280px;
	aspect-ratio: 280/120;
	margin-left: 25px;
	width: 48%;
}

/* 店舗数 */
#sec_data li.stores::after{
	content: none;
}
#sec_data .container li.stores .flex{
	margin-top: 43px;
}
#sec_data li.stores .img{
	background: url(../img/icon_stores.svg) no-repeat center / contain;
	max-width: 226px;
	aspect-ratio: 226/178;
	margin-right: 25px;
	width: 46%;
}
#sec_data li.stores .coutUp{
	margin-top: 0;
}

/* 平均勤続年数 */
#sec_data li.years::after{
	background: url("/wp_nsa/wp-content/themes/ns-akita/img/data_icon_01.svg") no-repeat center / contain;
	width: 100%;
	max-width: 81px;
	aspect-ratio: 81/100;
}

/* 月平均所定外労働時間 */
#sec_data li.average::after{
	background: url("/wp_nsa/wp-content/themes/ns-akita/img/data_icon_02.svg") no-repeat center / contain;
	width: 100%;
	max-width: 97px;
	aspect-ratio: 97/100;
}

/* 平均有給休暇取得日数 */
#sec_data li.holiday::after{
	background: url("/wp_nsa/wp-content/themes/ns-akita/img/data_icon_03.svg") no-repeat center / contain;
	width: 100%;
	max-width: 97px;
	aspect-ratio: 97/99;
}

/* 新卒・中途比率 */
#sec_data .container li.ratio-employer{
	max-width: 618px;
	width: 55%;
}
#sec_data li.ratio-employer .box-left,
#sec_data li.ratio-employer .box-right{
	width: 31%;
}
	#sec_data li.ratio-employer .box-graph{
		width: 35%;
	}

#sec_data li.ratio-employer::after{
	content: none;
}
	#sec_data li.ratio-employer .box-left::after,
	#sec_data li.ratio-employer .box-graph::before,
	#sec_data li.ratio-employer .box-right::after{
		content: "";
		display: block;
	}
	#sec_data li.ratio-employer .box-left::after{
		background: url(../img/icon_beginner.svg) no-repeat center / contain;
		max-width: 120px;
		width: 84%;
		aspect-ratio: 120/122;
		margin: 10px auto 0;
	}
	#sec_data li.ratio-employer .box-right::after{
		background: url(../img/icon_career.svg) no-repeat center / contain;
		max-width: 98px;
		width: 64%;
		aspect-ratio: 98/130;
		margin: 10px 32% 0 auto;
	}

	#sec_data li.ratio-employer .box-graph::before{
		background: url(../img/icon_graph_2.svg) no-repeat center / contain;
		max-width: 200px;
		aspect-ratio: 1/1;
		margin: 0 auto;
	}

/* 育児休業取得率 */
#sec_data .container1 li.paidleave{
	max-width: 528px;
    width: 46%;
}
#sec_data li.paidleave::after{
	content: none;
}
#sec_data .container li.paidleave .flex{
	margin-top: 40px;
}
#sec_data li.paidleave .coutUp .num{
	font-size: 3em;
}
#sec_data li.paidleave .img{
	background: url(../img/icon_paidleave.svg) no-repeat center / contain;
	max-width: 221px;
	aspect-ratio: 221/150;
	margin-left: 25px;
	width: 45%;
}

@media screen and (max-width: 1200px){
	#sec_data .container{
		gap: 25px;
		margin-top: 25px;
	}

	#sec_data ul{
		gap: 20px;
	}
	#sec_data li .ttl{
		font-size: clamp(2rem,2.2vw,2.4rem);
	}
	#sec_data li .coutUp{
		font-size: clamp(2.2rem,3vw,4rem);
	}
	#sec_data .container .label-ttl{
		font-size: clamp(2.2rem,2.2vw,2.8rem);
		margin-bottom: -15px;
	}

	/* 男女比 */
	#sec_data li.ratio .box-right::after{
		margin: 25px 29% 0 auto;
	}
	#sec_data li.ratio .box-left::after{
		margin: 2px 24% 0 auto;
	}

	/* 平均勤続年数 */
	#sec_data li.years::after{
		width: 28%;
	}
	
	/* 月平均所定外労働時間・平均有給休暇取得日数 */
	#sec_data li.average::after,
	#sec_data li.holiday::after{
		width: 30%;
	}

	/* 新卒・中途比率 */
	#sec_data li.ratio-employer .box-right::after{
		margin-right: 28%;
	}
}

@media screen and (max-width: 820px){
	#sec_data::after,
	#sec_data::before{
		border-top-width: 15px;
		border-bottom-width: 15px;
	}
	#sec_data .container,
	#sec_data .container.three{
		flex-direction: column;
	}
	#sec_data .container li,
	#sec_data .container.three li,
	#sec_data .container2 li:first-child,
	#sec_data .container2 li:last-child,
	#sec_data .container li.employee,
	#sec_data .container li.ratio,
	#sec_data .container1 li.paidleave{
		max-width: 510px;
		margin: 0 auto;
		width: 90%;
	}
	#sec_data li .ttl{
		font-size: 2.4rem;
	}
	#sec_data li .coutUp{
		font-size: 4rem;
	}

	#sec_data .container li .flex{
		margin-top: 0;
	}

	#sec_data .container .label-ttl{
		margin: 0 auto -20px;
	}

	#sec_data .flex-3 .coutUp .num{
		font-size: 2em;
	}
	#sec_data .flex-3 .box .fnt30{
		display: block;
	}

	/* 従業員数 */
	#sec_data li.employee .coutUp::after,
	#sec_data li.employee .coutUp::before{
		width: 25px;
		top: 20px;
	}
	#sec_data li.employee .coutUp::before{
		right: calc(100% + 10px);
	}
	#sec_data li.employee .coutUp::after{
		left: calc(100% + 10px);
	}

	/* 男女比 */
	#sec_data .container li.ratio .flex{
		margin-top: 20px;
	}
	#sec_data li.ratio .box-right::after{
		margin: 20px auto 0;
	}
	#sec_data li.ratio .box-left::after{
		margin: 10px auto 0;
	}

	/* 平均年齢 */
	#sec_data .container li.age .flex{
		flex-direction: column;
	}
	#sec_data li.age .coutUp br{
		display: none;
	}
	#sec_data li.age .label{
		margin-top: 10px;
	}
	#sec_data li.age .img{
		margin: 20px auto;
		width: 68%;
	}

	/* 店舗数 */
	#sec_data .container li.stores .flex{
		margin-top: 10px;
		margin-right: 5%;
	}
	#sec_data li.stores .img{
		width: 52%;
	}
	#sec_data li.stores .coutUp .fnt30{
		display: block;
	}

	/* 新卒・中途比率 */
	#sec_data .container li.ratio-employer .flex{
		margin-top: 20px;
	}
	#sec_data li.ratio-employer .box-right::after{
		margin: 10px auto 0;
	}

	/* 売上金額 */
	#sec_data li.sales .label{
		margin-top: 10px;
	}
	#sec_data li.sales .coutUp .num{
		font-size: 3em;
	}

	/* 育児休業取得率 */
	#sec_data li.paidleave .img{
		margin-left: 15px;
	}
	#sec_data li.paidleave .coutUp .num{
		font-size: 2.6em;
	}
}
@media screen and (max-width: 767px){
	#sec_data li .ttl{
		font-size: clamp(1.6rem,5vw,2.4rem);
		height: auto;
		padding: 8px 0;
	}
	#sec_data li .coutUp{
		font-size: clamp(2.2rem,8vw,4rem);
	}
	#sec_data li .label{
		font-size: 1.2rem;
		margin-top: 2px;
		min-width: 64px;
	}
	#sec_data li::after{
		margin-top: 10px;
	}

	#sec_data .container .label-ttl{
		font-size: clamp(1.8rem,2.2vw,2.8rem);
		margin: 0 auto -15px;
	}

	#sec_data .flex-3 .box-graph .label{
		margin-top: 10px;
	}

	#sec_data li.years::after{
		width: 23%;
	}
	#sec_data li.average::after,
	#sec_data li.holiday::after{
		width: 25%;
	}

	/* 店舗数 */
	#sec_data li.stores .label{
		margin-top: 10px;
	}
}