
/*
body.recruit_in_numbers #page_header_img {
    background: #e5ebf3;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 0px;
}

body.recruit_in_numbers #page_header_img p {
    text-align: center;
    color: #333;
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: 700;
}
*/

body.recruit_in_numbers #page_menu .menu li.figures a::before{
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-color: #A2D2FF;
    position: absolute;
    bottom: -0.7rem;
    left: 0;
    right: 0;
}

body.recruit_in_numbers #page_header_img {
    background: #f4f4f4 url(../images/page/page_header_image_work.jpg) no-repeat center center;
    background-size: cover;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 50px;
}

body.recruit_in_numbers #page_header_img p {
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: 700;
}
body.recruit_in_numbers #content_wrapper {
    position: relative;
    padding: 70px 0 80px;
    background: #e5ebf3;
    max-width: 100%;
}

body.recruit_in_numbers ul#topicpath {
    margin: 0px auto 80px;
    display: flex;
    gap: 1em;
}

body.recruit_in_numbers #main_column {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

body.recruit_in_numbers #main_column .achieve {
    text-align: right;
    position: absolute;
    right: 0;
    top: -40px;
}

#in_numbers_list{
	display: flex;
    justify-content: space-between;
    gap: 20px;
}

#in_numbers_list > ul{
    width: calc(50% - 8px);
    color: #1762ab;
}

#in_numbers_list > ul > li{
    background: #fff;
    padding: 24px;
    border: 4px solid #1762ab;
    width: calc(40% - 8px);
}

#in_numbers_list .masonry {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#in_numbers_list .masonry > * {
  margin-bottom: 20px;
}

#in_numbers_list > ul > li.for_2{
    width: 100%;
}


.main_appeal{
	font-size: 1.6rem;
    font-weight: 500;
}

.main_appeal .num {
    margin-left: 4px;
}

.main_appeal.font_large{
	font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 8px;
}

.main_appeal.font_small{
	font-size: 1.5rem;
}

span.num {
    color: #f39800;
/*	color: #1762ab;*/
	font-size: 2.4rem;
    font-weight: 500;
}

.main_appeal.font_large span.num {
	font-size: 3.2rem;
}

.main_appeal.font_small span.num {
	font-size: 2.4rem;
}

.num_wrap{
    font-size: 1.6rem;
}

.num_wrap span.num.font_large{
	font-size: 3.2rem;
}

.num_wrap span.num.font_small{
	font-size: 2.4rem;
}


#in_numbers_list + .notes {
    text-align: right;
}

ul.sales_list > li:before{
	content: "■";
}

ul.sales_list > li.sales1:before{
	color: #333;
}

ul.sales_list > li.sales1:before{
	color: #333;
}

ul.sales_list > li.sales2:before{
	color: #333;
}

ul.sales_list > li.sales3:before{
	color: #333;
}

ul.sales_list > li.sales4:before{
	color: #333;
}

ul.sales_list > li.sales5:before{
	color: #333;
}

ul.sales_list > li.sales6:before{
	color: #333;
}


/* 創業46年 */
#in_numbers_list > ul > li#founding{
	background-image: url(../images/page/recruit_in_numbers/founding.png);
	background-repeat: no-repeat;
    background-position: 84% 13px;
    background-size: 20%;
    min-height: 100px;
}

/* 売上高844億円 */
#in_numbers_list > ul > li#sales{
	background-image: url(../images/page/recruit_in_numbers/sales.png);
	background-repeat: no-repeat;
    background-position: 50% 90px;
    background-size: 80%;
    min-height: 230px;
}

#in_numbers_list > ul > li#sales .main_appeal {
    line-height: 1;
    text-align: center;
}

/* 拠点15拠点 */
#in_numbers_list > ul > li#base{
	background-image: url(../images/page/recruit_in_numbers/base.png);
	background-repeat: no-repeat;
    background-position: 50% 104px;
    background-size: 80%;
    min-height: 230px;
}

#in_numbers_list > ul > li#base .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#base .notes {
    line-height: 1;
    text-align: center;
    font-size: 0.8rem;
}

/* 最終用途別売上割合 */
#in_numbers_list > ul > li#sales_ratio{
    min-height: 284px;
}

#chart_wrap{
	width: 523px;
	height: 240px;
}

/* 従業員数201名 */
#in_numbers_list > ul > li#employees{
	background-image: url(../images/page/recruit_in_numbers/employees.png);
	background-repeat: no-repeat;
    background-position: 50% 108px;
    background-size: 54%;
    min-height: 230px;
}

/* 男女比3:7 */
#in_numbers_list > ul > li#gender_ratio{
	background-image: url(../images/page/recruit_in_numbers/gender_ratio.png);
	background-repeat: no-repeat;
    background-position: 50% 108px;
    background-size: 80%;
    min-height: 230px;
}

#in_numbers_list > ul > li#gender_ratio .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#gender_ratio .notes {
    line-height: 1;
    text-align: center;
    font-size: 0.8rem;
}

/* 勤続年数14年 */
#in_numbers_list > ul > li#length_service{
	background-image: url(../images/page/recruit_in_numbers/length_service.png);
	background-repeat: no-repeat;
    background-position: 50% 120px;
    background-size: 54%;
    min-height: 230px;
}

#in_numbers_list > ul > li#length_service .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#length_service .notes {
    line-height: 1;
    text-align: center;
    font-size: 0.8rem;
}

/* 有給取得日数9.6日 */
#in_numbers_list > ul > li#paid_days_taken{
	background-image: url(../images/page/recruit_in_numbers/paid_days_taken.png);
	background-repeat: no-repeat;
    background-position: 50% 110px;
    background-size: 54%;
    min-height: 230px;
}

#in_numbers_list > ul > li#paid_days_taken .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 4px;
}

#in_numbers_list > ul > li#paid_days_taken .num_wrap{
    line-height: 1;
    text-align: center;
}

/* 女性管理職の割合17% */
#in_numbers_list > ul > li#female_manager{
	background-image: url(../images/page/recruit_in_numbers/female_manager.png);
	background-repeat: no-repeat;
	background-position: 50% 130px;
    background-size: 68%;
    min-height: 230px;
}

#in_numbers_list > ul > li#female_manager .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 4px;
}

#in_numbers_list > ul > li#female_manager .num_wrap{
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#female_manager .notes {
    line-height: 1.4;
    text-align: center;
    font-size: 0.8rem;
}

/* 残業平均時間 */
#in_numbers_list > ul > li#average_overtime{
	background-image: url(../images/page/recruit_in_numbers/average_overtime.png);
	background-repeat: no-repeat;
    background-position: 50% 123px;
    background-size: 48%;
    min-height: 230px;
}

#in_numbers_list > ul > li#average_overtime .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#average_overtime .num_wrap{
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#average_overtime .notes {
    line-height: 1.4;
    text-align: center;
    font-size: 0.8rem;
}

/* 離職率 */
#in_numbers_list > ul > li#turnover{
	background-image: url(../images/page/recruit_in_numbers/turnover.png);
	background-repeat: no-repeat;
    background-position: 50% 104px;
    background-size: 80%;
    min-height: 230px;
}

#in_numbers_list > ul > li#turnover .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#turnover .num_wrap{
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#turnover .notes {
    line-height: 1.4;
    text-align: center;
    font-size: 0.8rem;
}

/* 産休育休取得率 */
#in_numbers_list > ul > li#acquisition_rate{
	background-image: url(../images/page/recruit_in_numbers/acquisition_rate.png);
	background-repeat: no-repeat;
    background-position: 50% 118px;
    background-size: 60%;
    min-height: 230px;
}

#in_numbers_list > ul > li#acquisition_rate .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#acquisition_rate .num_wrap{
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}


/* 在宅勤務率 */
#in_numbers_list > ul > li#telecommuting_rate{
	background-image: url(../images/page/recruit_in_numbers/telecommuting_rate.png);
	background-repeat: no-repeat;
    background-position: 50% 108px;
    background-size: 80%;
    min-height: 230px;
}

#in_numbers_list > ul > li#telecommuting_rate .main_appeal {
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}

#in_numbers_list > ul > li#telecommuting_rate .num_wrap{
    line-height: 1;
    text-align: center;
    margin-bottom: 8px;
}







/* アニメーション設定 */
#in_numbers_list > ul > li{
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: backwards;
}

#in_numbers_list > ul > li#founding{
	animation-name: to_right;
	animation-delay: 0s;
}

#in_numbers_list > ul > li#sales{
	animation-name: to_bottom;
	animation-delay: 0.2s;
}

#in_numbers_list > ul > li#base{
	animation-name: to_left;
	animation-delay: 0.4s;
}

#in_numbers_list > ul > li#sales_ratio{
	animation-name: to_top;
	animation-delay: 0.6s;
}

#in_numbers_list > ul > li#employees{
	animation-name: to_right;
	animation-delay: 0.8s;
}

#in_numbers_list > ul > li#gender_ratio{
	animation-name: to_bottom;
	animation-delay: 1.0s;
}

#in_numbers_list > ul > li#length_service{
	animation-name: to_left;
	animation-delay: 1.2s;
}

#in_numbers_list > ul > li#paid_days_taken{
	animation-name: to_top;
	animation-delay: 1.4s;
}

#in_numbers_list > ul > li#female_manager{
	animation-name: to_right;
	animation-delay: 1.6s;
}

#in_numbers_list > ul > li#average_overtime{
	animation-name: to_bottom;
	animation-delay: 1.8s;
}

#in_numbers_list > ul > li#turnover{
	animation-name: to_left;
	animation-delay: 2.0s;
}

#in_numbers_list > ul > li#acquisition_rate{
	animation-name: to_top;
	animation-delay: 2.2s;
}

#in_numbers_list > ul > li#telecommuting_rate{
	animation-name: to_right;
	animation-delay: 2.4s;
}

@keyframes to_top { /* 下から上 */
	from {
		opacity: 0;
		transform: translateY(80px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes to_bottom { /* 上から下 */
	from {
		opacity: 0;
		transform: translateY(-80px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes to_left { /* 右から左 */
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes to_right{ /* 左から右 */
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}








@media screen and (max-width: 768px) {
  #in_numbers_list .masonry > * {
    width: calc(50% - 10px);
  }
}



@media screen and (max-width: 520px) {
	#in_numbers_list {
	    flex-direction: column;
	}

	#in_numbers_list > ul {
	    width: 100%;
	}

	#chart_wrap{
		width: 100%;
		height: 240px;
	}

}



@media screen and (max-width: 520px) {
  #in_numbers_list .masonry > * {
    width: 100%;
  }
}