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

/* ------- カウントアップ ------- */
.countup-block {
	font-weight: bold;
	opacity: 0;
	transform: scale(0.8);
	line-height: 1;
}
		
.employees {
	width: 100%;
	position: relative;
}
.employees .countup-block_wrap_1 {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: auto;
	margin: 0 auto;
	color: #FFCC00;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}
.employees .countup-block_wrap_1 .countup-block {
	font-size: 64px;
	display: inline-block;
	line-height: 1;
}
.employees .countup-block_wrap_1 .sub1 {
	font-size: 24px;
	line-height: 1;
}
.employees .countup-block_wrap_1 .sub1 span {
	font-size: 18px;
}
.employees .countup-block_wrap_1 .sub2 {
	font-size: 28px;
	line-height: 1;
}

.employees .countup-block_wrap_2 {
	position: absolute;
	top: 170px;
	left: 140px;
	bottom: auto;
	color: #192d62;
	line-height: 1;
	font-weight: bold;
}
.employees .countup-block_wrap_2 .countup-block {
	font-size: 36px;
	display: inline-block;
	line-height: 1;
}
.employees .countup-block_wrap_2 .sub1 {
	font-size: 20px;
	line-height: 1;
}


.woman {
	width: 100%;
	position: relative;
}
.woman .countup-block_wrap_1 {
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: auto;
	margin: 0 auto;
	color: #FFCC00;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}
.woman .countup-block_wrap_1 .countup-block {
	font-size: 70px;
	display: inline-block;
	line-height: 1;
}
.woman .countup-block_wrap_1 .sub1 {
	font-size: 24px;
	line-height: 1;
}
.woman .countup-block_wrap_1 .sub1 span {
	font-size: 18px;
}
.woman .countup-block_wrap_1 .sub2 {
	font-size: 28px;
	line-height: 1;
}

.woman .countup-block_wrap_2 {
	position: absolute;
	top: 220px;
	left: 140px;
	bottom: auto;
	color: #192d62;
	line-height: 1;
	font-weight: bold;
}
.woman .countup-block_wrap_2 .countup-block {
	font-size: 36px;
	display: inline-block;
	line-height: 1;
}
.woman .countup-block_wrap_2 .sub1 {
	font-size: 20px;
	line-height: 1;
}

.training {
	width: 100%;
	position: relative;
}
.training .countup-block_wrap_1 {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	bottom: auto;
	margin: 0 auto;
	color: #FFCC00;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}
.training .countup-block_wrap_1 .countup-block {
	font-size: 120px;
	display: inline-block;
	line-height: 1;
}
.training .countup-block_wrap_1 .sub1 {
	font-size: 36px;
	color: #192d62;
	line-height: 1;
}
.training .countup-block_wrap_2 {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	margin: auto;
	color: #FFCC00;
	line-height: 1;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.training .countup-block_wrap_2 .countup-block {
	font-size: 120px;
	display: inline-block;
	line-height: 1;
}
.training .countup-block_wrap_2 .sub1 {
	font-size: 36px;
	color: #192d62;
	line-height: 1;
	display: block;
	padding: 0 10px 10px 10px;
}

.club {
	width: 100%;
	position: relative;
}
.club .countup-block_wrap_1 {
	position: absolute;
	top: 110px;
	left: 0;
	right: 0;
	bottom: auto;
	margin: 0 auto;
	color: #FFCC00;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}
.club .countup-block_wrap_1 .countup-block {
	font-size: 140px;
	display: inline-block;
	line-height: 1;
}
.club .countup-block_wrap_1 .sub1 {
	font-size: 36px;
	color: #192d62;
	line-height: 1;
}
		
.qualification,
.participation {
	width: 100%;
	height: 200px;
	position: relative;
}

.qualification .countup-block_wrap_1,
.participation .countup-block_wrap_1{
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	bottom: auto;
	margin: 0 auto;
	color: #FFCC00;
	line-height: 1;
	text-align: center;
	font-weight: bold;
}
.qualification .countup-block_wrap_1 .countup-block,
.participation .countup-block_wrap_1 .countup-block{
	font-size: 120px;
	display: inline-block;
	line-height: 1;
}
.qualification .countup-block_wrap_1 .sub1,
.participation .countup-block_wrap_1 .sub1{
	font-size: 36px;
	color: #192d62;
	line-height: 1;
	padding: 10px;
}

		
		
/* ------- 円グラフ ------- */
.pie-block {
  width: 90%;
  max-width: 360px;
  margin: 60px auto;
  position: relative;
}
 
.pie-block canvas {
  width: 100%;
  height: auto;
  display: block;
}
 
.pie-label {
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	color: #FFFFFF;
	line-height: 1;
}
 
.pie-label-name {
  font-size: 20px;
  font-weight: bold;
}
 
.pie-label-percent {
  
}
.pie-percent-number {
  font-size: 70px;
  font-weight: bold;
}
.pie-percent-symbol {
  font-size: 22px;
}


.arrow_block {
  width: 100%;
  max-width: 230px; /* 親サイズの上限（好みで調整） */
	position: absolute;
	bottom: 100px;
	left: 100px;
}
.arrow-wrap {
  width: 100%;
  max-width: 260px; /* 親サイズの上限（好みで調整） */
  margin: auto;
  position: relative;
  overflow: visible;
  padding-top: 14%; /* レスポンシブ：上方向に少し余白 */
}
 
/* SVG（レスポンシブ） */
svg.arrow {
  width: 100%;
  max-width: 420px; /* 最終の最大サイズ */
  position: absolute;
  right: 0;
  bottom: 0;
 
  transform-box: fill-box;
  transform-origin: 0% 100%;
 
  transform: translate(-12%, 12%) scale(0.25);
  opacity: 0;
 
  overflow: visible;
 
  transition:
    transform 0.9s cubic-bezier(.25,1.4,.3,1),
    opacity 0.3s ease-out;
}
 
/* 発火後 */
svg.arrow.animate {
  transform: translate(0, 0) scale(1);
  opacity: 1;
 
  animation: pop 0.25s ease-out 0.9s;
}
 
/* pop */
@keyframes pop {
  0%   { transform: translate(0,0) scale(1); }
  60%  { transform: translate(0,0) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}
 
#arrow-path { fill: #192d62; }


@media screen and (max-width:768px) {
	
	/* ------- カウントアップ ------- */

	.employees .countup-block_wrap_1 {
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
	}
	.employees .countup-block_wrap_1 .countup-block {
		font-size: 46px;
		display: inline-block;
		line-height: 1;
	}
	.employees .countup-block_wrap_1 .sub1 {
		font-size: 20px;
		line-height: 1;
	}
	.employees .countup-block_wrap_1 .sub1 span {
		font-size: 18px;
	}
	.employees .countup-block_wrap_1 .sub2 {
		font-size: 26px;
		line-height: 1;
	}

	.employees .countup-block_wrap_2 {
		position: absolute;
		top: 100px;
		left: 100px;
		bottom: auto;
	}
	.employees .countup-block_wrap_2 .countup-block {
		font-size: 28px;
	}
	.employees .countup-block_wrap_2 .sub1 {
		font-size: 16px;
	}

	.woman .countup-block_wrap_1 {
		top: 60px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
	}
	.woman .countup-block_wrap_1 .countup-block {
		font-size: 46px;
	}
	.woman .countup-block_wrap_1 .sub1 {
		font-size: 20px;
		line-height: 1;
	}
	.woman .countup-block_wrap_1 .sub1 span {
		font-size: 18px;
	}
	.woman .countup-block_wrap_1 .sub2 {
		font-size: 28px;
		line-height: 1;
	}

	.woman .countup-block_wrap_2 {
		top: 140px;
		left: 100px;
		bottom: auto;
	}
	.woman .countup-block_wrap_2 .countup-block {
		font-size: 26px;
	}
	.woman .countup-block_wrap_2 .sub1 {
		font-size: 18px;
	}

	.training .countup-block_wrap_1 {
		top: 30px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
	}
	.training .countup-block_wrap_1 .countup-block {
		font-size: 70px;
	}
	.training .countup-block_wrap_1 .sub1 {
		font-size:22px;
	}
	.training .countup-block_wrap_2 {
		bottom: 20px;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.training .countup-block_wrap_2 .countup-block {
		font-size: 70px;

	}
	.training .countup-block_wrap_2 .sub1 {
		font-size: 22px;
		padding: 0 10px 10px 10px;
	}

	.club .countup-block_wrap_1 {
		top: 80px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
	}
	.club .countup-block_wrap_1 .countup-block {
		font-size: 90px;
	}
	.club .countup-block_wrap_1 .sub1 {
		font-size: 24px;
		color: #192d62;
	}
	
	.qualification,
	.participation {
		height: 160px;
	}
	.qualification .countup-block_wrap_1,
	.participation .countup-block_wrap_1{
		top: 20px;
		left: 0;
		right: 0;
		bottom: auto;
		margin: 0 auto;
	}
	.qualification .countup-block_wrap_1 .countup-block,
	.participation .countup-block_wrap_1 .countup-block{
		font-size: 70px;
	}
	.qualification .countup-block_wrap_1 .sub1,
	.participation .countup-block_wrap_1 .sub1{
		font-size: 26px;
		padding: 10px;
	}



	/* ------- 円グラフ ------- */

	.pie-label-name {
		font-size: 20px;
		font-weight: bold;
	}

	.pie-percent-number {
		font-size: 40px;
		font-weight: bold;
	}
	.pie-percent-symbol {
		font-size: 18px;
	}


	.arrow_block {
		width: 100%;
		max-width: 220px; /* 親サイズの上限（好みで調整） */
		position: absolute;
		bottom: 60px;
		left: 30px;
	}
	.arrow-wrap {
		width: 100%;
		max-width: 220px; /* 親サイズの上限（好みで調整） */
		margin: auto;
		position: relative;
		overflow: visible;
		padding-top: 14%; /* レスポンシブ：上方向に少し余白 */
	}

	/* SVG（レスポンシブ） */
	svg.arrow {
		width: 100%;
		max-width: 200px; /* 最終の最大サイズ */
		position: absolute;
		right: 0;
		bottom: 0;

		transform-box: fill-box;
		transform-origin: 0% 100%;

		transform: translate(-12%, 12%) scale(0.25);
		opacity: 0;

		overflow: visible;

		transition:
			transform 0.9s cubic-bezier(.25,1.4,.3,1),
			opacity 0.3s ease-out;
	}
}