@keyframes average1{
	10%{transform: translateY(0);}
	11%{transform: translateY(-20px);}
	15%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes average2{
	15%{transform: scale(1);}
	20%{transform: scale(0.9);}
	25%{transform: scale(1.05);}
	30%{transform: scale(1);}
	100%{transform: scale(1);}
}

@keyframes averageSP1{
	10%{transform: translateY(0);}
	11%{transform: translateY(-20px);}
	15%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes averageSP2{
	15%{transform: scale(1);}
	20%{transform: scale(0.9);}
	25%{transform: scale(1.05);}
	30%{transform: scale(1);}
	100%{transform: scale(1);}
}


@keyframes spirit1{
	0%{transform: translateY(40px);opacity: 0;}
	15%{transform: translateY(0);opacity: 1;}
	50%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes spirit2{
	0%{transform: translateY(-40px);opacity: 0;}
	15%{transform: translateY(0);opacity: 1;}
	50%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes spirit3{
	0%{transform: scale(1);}
	10%{transform: scale(1);}
	15%{transform: scale(0.9);}
	20%{transform: scale(1.2);}
	25%{transform: scale(1);}
	100%{transform: scale(1);}
}

@keyframes spiritSP1{
	0%{transform: translateY(40px);opacity: 0;}
	15%{transform: translateY(0);opacity: 1;}
	50%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes spiritSP2{
	0%{transform: translateY(-40px);opacity: 0;}
	15%{transform: translateY(0);opacity: 1;}
	50%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
@keyframes spiritSP3{
	0%{transform: scale(1);}
	10%{transform: scale(1);}
	15%{transform: scale(0.9);}
	20%{transform: scale(1.2);}
	25%{transform: scale(1);}
	100%{transform: scale(1);}
}


@keyframes num{
	0%{transform: scale(0.9);}
	5%{transform: scale(1.15);}
	10%{transform: scale(1);}
	100%{transform: scale(1);}
}


.num-wrap i.on{
	animation: num 3000ms ease 1;
}
.num-wrap i{
	position: absolute;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	color: #26b3e6;
	line-height: 1;
	z-index: 50;
}


#company .number-item .donuts{
	position: absolute;
	margin: auto;
	width: 190px;
	height: 190px;
	border-radius: 100px;

	box-sizing: border-box;
}
#company .number-item .donuts canvas {
	top: 0;
	left: 0;
    width: 190px;
    height: 190px;
    position: absolute;
    z-index: 50;
    transform: rotate(-90deg);
}
#company .number-item .donuts canvas.canvas-cover{
	z-index: 100;
}
#company .number-item .donuts span{
	position: absolute;
	display: block;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 130px;
	height: 130px;
	border-radius: 76px;
	background: #fff;
	z-index: 120;
	border: 2px solid #4abfea;
	box-sizing: border-box;
	will-change: transform;
}
#company .number-item .donuts span img{
	width: 100%;
	height: 100%;
}




/*  number-job
---------------------------------------------------------------------------*/

.number-job .num-wrap i{
	font-size: 63px;
}

.number-job .num-wrap i:nth-child(1){
	top: -11px;
	left: 319px;
}
.number-job .num-wrap i:nth-child(2){
	top: 184px;
	left: 328px;
}
.number-job .num-wrap i:nth-child(3){
	top: 270px;
	left: 324px;
}
.number-job .num-wrap i:nth-child(4){
	top: 196px;
	left: 30px;
}
.number-job .num-wrap i:nth-child(5){
	top: 103px;
	left: 16px;
}
.number-job .num-wrap i:nth-child(6){
	top: -10px;
	left: 24px;
}
.number-job .circle-box{
	position: relative;
	text-align: center;
}
.number-job .num-wrap{
	position: relative;
	left: 3px;
	margin: auto;
	width: 417px;
	z-index: 50;
}
.number-job .num-obj img{
	width: 100%;
	height: auto;
}
.number-job .donuts{
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	z-index: 30;
}




/*  number-average 
---------------------------------------------------------------------------*/

.number-average .num-wrap i{
	font-size: 160px;
}



@media screen and (min-width: 768px) {

	.number-average .num-wrap i:nth-child(1){
		top: -25px;
		left: 0;
		animation: average2 3000ms ease infinite;
	}	
	.number-average .num-icon{
		position: relative;
		margin: auto;
		width: 250px;
		z-index: 50;
		animation: average1 3000ms ease infinite;
	}


}
@media screen and (max-width: 767px) {
	
	.number-average .num-wrap i:nth-child(1){
		top: -25px;
		left: 0;
		animation: averageSP2 3000ms ease infinite;
	}	
	.number-average .num-icon{
		position: relative;
		margin: auto;
		width: 250px;
		z-index: 50;
		animation: averageSP1 3000ms ease infinite;
	}

}


.number-average .circle-box{
	position: relative;
	margin-top: 15px;
	text-align: center;
}
.number-average .num-wrap{
	position: relative;
	margin: auto;
	padding: 0 0 55px;
	width: 379px;
	z-index: 50;	
}
.number-average .num-obj img{
	width: 100%;
	height: auto;
}
.number-average .num-icon img{
	width: 100%;
	height: auto;
}



/*  age
---------------------------------------------------------------------------*/


.number-age .circle-box{
	position: relative;
	text-align: center;
}
.number-age .num-wrap{
	position: relative;
	margin: auto;
	width: 358px;
	z-index: 50;
}
.number-age .num-obj img{
	width: 100%;
	height: auto;
}

#company .number-item .bar{
	position: absolute;
	top: 12px;
	left: 115px;
	margin: auto;
	width: 301px;
	height: 305px;
}
#company .number-item .bar canvas{
	top: 2px;
	left: 0;
    width: 301px;
    height: 305px;
    position: absolute;
    z-index: 50;
}
#company .number-item .bar canvas.canvas-cover{
	z-index: 100;
}
#company .number-item h4{
	position: absolute;
	bottom: 30px;
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 500;
	font-size: 20px;
}
.number-item .number-box{
	text-align: center;
	color: #26b3e6;
}
.number-item .number-box i{
	font-size: 14px;
}
.number-age .num-wrap i{
	font-size: 38px;
}
.number-age .num-wrap i:nth-child(1){
	top: 8px;
	left: 155px;
}
.number-age .num-wrap i:nth-child(2){
	top: 52px;
	left: 193px;
}
.number-age .num-wrap i:nth-child(3){
	top: 95px;
	left: 278px;
}
.number-age .num-wrap i:nth-child(4){
	top: 139px;
	left: 170px;
}
.number-age .num-wrap i:nth-child(5){
	top: 182px;
	left: 161px;
}
.number-age .num-wrap i:nth-child(6){
	top: 226px;
	left: 95px;
}
.number-age .num-wrap i:nth-child(7){
	top: 268px;
	left: 82px;
}




/*  game
---------------------------------------------------------------------------*/


.number-game .chart-v{
	position: relative;
	margin: auto;
	width: 380px;
	height: 45px;
}
.number-game .chart-v canvas{
	top: 0;
	left: 0;
    width: 380px;
    height: 45px;
    position: absolute;
    z-index: 50;
}
.number-game .chart-v canvas.canvas-cover{
	z-index: 100;
}


.number-game .num-wrap i:nth-child(1){
	top: 65px;
	left: 58px;
	font-size: 100px;
}	
.number-game .num-wrap i:nth-child(2){
	top: 120px;
	left: 254px;
	font-size: 36px;
}	
.number-game .num-wrap i:nth-child(3){
	top: 119px;
	left: 330px;
	font-size: 36px;
}
.number-game .circle-box{
	position: relative;
	text-align: center;
}
.number-game .num-icon{
	margin: 0 auto 20px;
	width: 138px;
}
.number-game .num-icon img{
	width: 100%;
	height: auto;
}
.number-game .num-wrap{
	position: relative;
	margin: -15px auto 0;
	width: 382px;
	z-index: 50;
}
.number-game .num-obj img{
	width: 100%;
}



#company .number-item .circle{
	position: relative;
	margin: auto;
	width: 240px;
	height: 240px;
}
#company .number-item .circle canvas{
	top: 0;
	left: 0;
    width: 240px;
    height: 240px;
    position: absolute;
    z-index: 50;
}
#company .number-item .circle canvas.canvas-cover{
	z-index: 30;
}



/*  number-married
---------------------------------------------------------------------------*/


.number-married .num-wrap i{
	font-size: 80px;
}

.number-married .num-wrap i:nth-child(1){
	top: -12px;
	left: 0;
}	

.number-married .circle-box{
	position: relative;
	text-align: center;
}
.number-married .num-wrap{
	position: relative;
	margin: auto;
	padding: 0 0 20px;
	width: 199px;
	z-index: 50;
}
.number-married .num-obj img{
	width: 100%;
	height: auto;
}
.number-married .chart-h{
	position: relative;
	z-index: 30;
}



/*  number-child
---------------------------------------------------------------------------*/

.number-child .num-wrap i{
	font-size: 80px;
}
.number-child .num-wrap i:nth-child(1){
	top: -12px;
	left: 0;
}	

.number-child .circle-box{
	position: relative;
	text-align: center;
}
.number-child .num-wrap{
	position: relative;
	margin: auto;
	padding: 0 0 20px;
	width: 171px;
	z-index: 50;
}
.number-child .num-obj img{
	width: 100%;
	height: auto;
}



/*  number-house
---------------------------------------------------------------------------*/

.number-house .circle-box{
	position: relative;
}

.number-house .num-wrap{
	position: relative;
	margin: auto;
	width: 377px;
	z-index: 50;
}
.number-house .num-wrap i{
	font-size: 45px;
}
.number-house .num-wrap i:nth-child(1){
	top: 0px;
	left: 344px;
}
.number-house .num-wrap i:nth-child(2){
	top: 131px;
	left: 347px;
}
.number-house .num-wrap i:nth-child(3){
	top: 274px;
	left: 312px;
}
.number-house .num-wrap i:nth-child(4){
	top: 274px;
	left: 81px;
}
.number-house .num-wrap i:nth-child(5){
	top: 239px;
	left: 9px;
}
.number-house .num-wrap i:nth-child(6){
	top: 135px;
	left: 19px;
}
.number-house .num-wrap i:nth-child(7){
	top: 59px;
	left: 6px;
}

.number-house .icon-pin{
	display: inline-block;
	width: 25px;
	height: 31px;
	background: url("../number/number_house_pin.png");
	background-size: 100% 100%;
}

.number-house .num-wrap figure + .icon-pin{
	position: absolute;
	top: 162px;
	left: 186px;
	z-index: 110;
}


.number-house strong{
	position: absolute;
	display: block;
	padding: 0 0 0 25px;
	top: 0;
	left: 0;
	font-size: 16px;
	color: #26b3e6;
	z-index: 110;
}

.number-house strong .icon-pin{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
}


.number-house .num-obj img{
	width: 100%;
	height: auto;
}
.number-house .map{
	position: absolute;
	top: 49px;
	left: 125px;
	width: 250px;
	height: 226px;
	z-index: 30;
}
.number-house .map img{
	width: 100%;
	height: 100%;
}
.number-house .map-inner{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 50;
}
.number-house .map-inner img{
	position: absolute;
	opacity: 0;
}
.number-house .map-inner img.on{
	opacity: 1;
	transition: opacity 300ms ease;
}

.number-house .map span{
	position: absolute;
	z-index: 100;
}




/*  number-spirit
---------------------------------------------------------------------------*/

.number-spirit .num-wrap i{
	font-size: 135px;
}




@media screen and (min-width: 768px) {

	.number-spirit .num-wrap i:nth-child(1){
		top: -21px;
		left: 195px;
		animation: spirit3 3000ms ease infinite;
	}	
	.number-spirit .num-wrap .num-icon img:nth-child(1){
		left: 0;
		animation: spirit2 ease 3000ms infinite;
	}
	.number-spirit .num-wrap .num-icon img:nth-child(2){
		right: 0;
		animation: spirit1 ease 3000ms infinite;
	}

}
@media screen and (max-width: 767px) {
	
	.number-spirit .num-wrap i:nth-child(1){
		top: -21px;
		left: 195px;
		animation: spiritSP3 3000ms ease infinite;
	}	
	.number-spirit .num-wrap .num-icon img:nth-child(1){
		left: 0;
		animation: spiritSP2 ease 3000ms infinite;
	}
	.number-spirit .num-wrap .num-icon img:nth-child(2){
		right: 0;
		animation: spiritSP1 ease 3000ms infinite;
	}

}




.number-spirit .circle-box{
	position: relative;
	text-align: center;
}

.number-spirit ul{
	display: inline-block;
	text-align: left;
	width: 340px;
}

.number-spirit ul li{
	position: relative;
	font-size: 15px;
	color: #26b3e6;
	line-height: 1;
}
.number-spirit ul li + li{
	margin-top: 13px;
}
.number-spirit ul li i{
	position: absolute;
	left: 0;
	top: -1px;
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	width: 18px;
	text-align: center;
	font-weight: 700;
	font-size: 21px;
	vertical-align: middle;
	line-height: 1;
}
.number-spirit ul li strong{
	display: block;
	margin: 0 0 0 30px;
	vertical-align: middle;
}
.number-spirit .num-wrap{
	position: relative;
	top:  -10px;
	height: 109px;
}
.number-spirit .num-wrap .num-icon{
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 207px;
	height: 68px;
}
.number-spirit .num-wrap .num-icon img{
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
}
#company .number-f4-list + .btn-index-link{
	margin-top: 40px;
}


#company .number-item-elm{
	position: relative;
/*	padding: 55px 0 30px;
*/	padding: 40px 0 30px;
	width: 100%;
	height: 100%;
	border: 2px solid #26b3e6;
	box-sizing: border-box;
	background: #fff;
	z-index: 30;
	width: 485px;
/*	height: 470px;
*/	height: 450px;
	transform-origin: top left;
}








@media screen and (min-width: 768px) {



/* company
------------------------------------*/


	#company #number-f4 .number-item-wrap{
		margin: 0 -15px;
	}

	.number-item-conatiner{
		width: 100%;
		padding: 0 10px 0 0;
	}

	#company .number-item{
		position: relative;
		padding: 0 15px 10px;
		box-sizing: border-box;
	}

	#company .number-item-inner{
		position: relative;
		width: 100%;
	}

	.lower-grad #number-f4 .number-item-wrap{
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
	}
	.lower-grad #number-f4 .number-item:nth-child(n+3){
		margin-top: 25px;
	}

	#company .number-item-inner:after{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #26b3e6;
		transform: translate(10px,10px);
	}


}




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



/* company
------------------------------------*/


	#company .number-item{
		position: relative;
		padding: 0 0 10px;
		box-sizing: border-box;
	}


	/* TOP 用 */
	.top-grad  #company .number-item{
		position: relative;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.top-grad #company #number-f4 .number-item-wrap{
		margin: 0 -15px;
	}

	/* lower 用 */
	.lower-grad #company .number-item:nth-child(n+2){
		margin-top: 35px;
	}

	#company .number-item-inner{
		position: relative;
		width: 100%;
	}
	#company .number-item-inner:after{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #26b3e6;
		transform: translate(5px,5px);
	}


	#company .number-f4-list + .btn-index-link{
		margin-top: 30px;
	}

	#company #number-f4 .swiper-container{
		overflow: inherit;
	}


}