@charset "utf-8";

.content_area .inner{
	max-width:1120px;
}

.in-numbers_section{
	display:grid;
	gap:52px;
	padding-top:80px;
}

.numbers-item{
	border-radius: 55px;
	background: #E7F6FC;
}

.numbers-block.block-02{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
	gap:80px;
}

.numbers-block.block-04{
	display:grid;
	grid-template-columns: 60% 34.5%;
    grid-template-rows: 1fr;
	gap:5.5%;
}

.numbers-box{
	display: flex;
    justify-items: center;
    padding: 30px 25px 25px;
    height: 100%;
    align-items: center;
    flex-direction: column;
}

.numbers-flex{
	display:flex;
}

.numbers-flex.vertical{
    flex-direction: column;
    align-items: center;
}

.numbers-label {
  position: relative;
  padding-top: 24px; 
  display: inline-block;
  font-size:2.4rem;
  margin:0 0 18px 0;
  padding:0;
}

.numbers-label::before {
  content: attr(data-label-en); 
  position: absolute;
  top: -24px;
  left: -0.5em;
  font-family: 'Caveat', cursive; 
  font-size: 2.4rem;
  font-weight: 400;
  color: #FA6060; 
  line-height: 1;
  letter-spacing: 0;
}

.js-slot-number{
	font-size:9.6rem;
	line-height:1.0;
	font-weight:900;
	letter-spacing:0;
	color: #FA6060;
}
.js-slot-number span{
/*
	background: linear-gradient(90deg, #40e0ff, #0084dd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
*/
}

.unit,.gender{
	font-size:2.4rem;
	font-weight:700;
	background: linear-gradient(90deg, #40e0ff, #0084dd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.numbers-item p{
	margin-bottom:0;
}

.note{
	font-size:1.2rem;
	line-height:1.4;
	margin-bottom:0;
	margin-top:auto;
	color:#006FBC;
/* 	background: linear-gradient(90deg, #0084dd, #40e0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; */
}

/* 1 */
.numbers-item.item-01 .numbers-box{
	padding:45px 22px 22px;
}

.numbers-ttlbox{
	text-align:center;
}

.numbers-title{
	font-size:3.2rem;
	margin-bottom:28px;
	padding-bottom:12px;
	border-bottom:1px solid #7BE4EE;
}

.numbers-title:before{
	content:none;
}

.numbers-title span {
	padding: 0 60px;
	display: inline-block;
}

.numbers-item .numbers-sub{
	margin-bottom:46px;
	color:#006FBC;
}

.numbers-item.item-01 .numbers-flex{
	gap:57px;
	margin-bottom:48px;
	align-items: flex-end;
}
.numbers-item.item-01 .numbers-value{
	margin-bottom:15px;
}

/* 2 */
.numbers-item.item-02 .numbers-flex{
	gap:30px;
	height:100%;
	justify-content: space-between;
    margin-bottom: 18px;
/*     margin-top: 15px; */
}

/* 3 */
.numbers-flex.gender-area{
	flex-direction: column;
    align-items: center;
	width:100%;
	margin-bottom:18px;
	margin-top:-10px;
}

.gender-values{
	display:flex;
	width: 100%;
    justify-content: space-between;
	margin-top: -30px;
}

/* 4 */
.vacation_txt{
	display: flex;
	align-items: flex-end;
}

.numbers-item.item-04 .numbers-flex{
	gap:30px;
/* 	align-items: flex-end; */
	margin-bottom:18px;
}
.numbers-item .vacation_lead{
	font-size:2.4rem;
	color:#006FBC;
	margin-bottom:25px;
}

.numbers-item.item-04 .numbers-value{
	margin-top:30px;
}

.numbers-item.item-04 .unit{
	font-size:3.2rem;
	margin-left:8px;
}

.numbers-item.item-04 .unit span{
	font-size:2.4rem;
}

/* 5 */
.numbers-two{
	display:flex;
	gap:65px;
	margin-top:-30px;
	margin-left:28px;
	margin-bottom:18px;
}


/* 7 */
.numbers-graph-images{
	display:flex;
	width:100%;
/* 	justify-content: space-evenly; */
    justify-content: space-around;
	align-items: flex-end;
	max-width: 800px;
}

.numbers-graph-txt{
	display:flex;
	width:100%;
/* 	justify-content: space-evenly; */
    justify-content: space-around;
	max-width: 800px;
	border-top:1px solid #000;
}

.numbers-graph-num{
	display:flex;
	flex-direction: column;
    align-items: center;
}

.num_year{
	font-size:1.6rem;
	color:#006FBC;
	margin-top:8px;
}


/* ↓　数字部分アニメーション */

/* in-numbers 全体（任意） */
.in-numbers_section {
    perspective: 800px;
}

/* 数字セット全体（375 / 4209 / 15.4 など） */
.js-slot-number {
    display: inline-flex;
    gap: 2px;
    font-variant-numeric: tabular-nums; /* 桁幅を揃える（任意） */
    /* ★ここでは色を透明にしない！*/
    /* color は unit や他のテキストと同じでOK */
}

/* 1桁分の「覗き窓」 */
.slot-digit {
    display: inline-block;
    overflow: hidden;
    height: 1em;   /* 1行分だけ見せる */
    line-height: 1;
}

/* 縦に並んで回る部分 */
.slot-digit-reel {
    display: block;
}

/* 縦に並ぶ各行（= 同じ1桁の数字） */
.slot-digit-reel span {
    display: block;
    height: 1em;
    line-height: 1;
/*
	background: linear-gradient(90deg, #40e0ff, #0084dd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; 
*/
}

/* スロット回転アニメーション */
/* 同じ数字を6行並べるので、5行分（-500%）動かす */
@keyframes slotSpinDigit {
    0% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(-500%);
    }
    100% {
        transform: translateY(-500%);
    }
}


@media screen and (max-width: 1024px) {
	.in-numbers_section{
		gap:40px;
	}
	
	.numbers-label{
		font-size:2.0rem;
	}
	.numbers-label::before {
		top: -20px;
		font-size: 1.8rem;
	}
	.js-slot-number{
		font-size:6.0rem;
	}
	
	.unit, .gender{
		font-size:1.6rem;
	}
	
	.numbers-title{
		font-size:2.8rem;
		margin-bottom:20px;
	}
	.numbers-title span {
		padding: 0 20px;
	}

	.numbers-item .numbers-sub{
		margin-bottom:25px;
	}
	
	.numbers-item.item-01 .numbers-flex{
		margin-bottom:25px;
	}
	
	.numbers-block.block-02{
		gap:40px;
	}
	
	.numbers-item.item-02 .numbers-flex{
		gap:20px;
	}
	
	.gender-values{
		margin-top:0;
	}
	
	.numbers-block.block-04{
		grid-template-columns: 60% 34.5%;
	}
	
	.numbers-two{
		margin:-10px 0 18px 0;
		gap: 25px;
	}
}

@media screen and (max-width: 767px) {
	
	.in-numbers_section{
		gap:30px;
		padding-top:40px;
	}
	
	.numbers-block.block-02,.numbers-block.block-04{
		grid-template-columns: repeat(1, 1fr);
		gap:30px;
	}
	
	.numbers-box{
		padding:30px 20px 22px;
	}
	
	.numbers-item{
		border-radius:30px;
	}
	
	.numbers-item.item-01 .numbers-box{
		padding:20px 18px 18px;
	}
	
	.js-slot-number{
		font-size:5.0rem;
	}
	
	.numbers-flex.side,.numbers-item.item-01 .numbers-flex{
		flex-direction: column;
		align-items: center;
	}
	
	/* 1 */
	.numbers-title{
		font-size:2.2rem;
		margin:0 0 15px 0;
	}
	
	.numbers-item .numbers-sub{
		font-size:1.6rem;
	}
	
	.numbers-item.item-01 .numbers-flex{
		gap:20px;
		margin-bottom:20px
	}
	
	.numbers-item.item-01 .numbers-value{
		margin-bottom:0;
	}
	
	/* 4 */
	.numbers-item.item-04 .numbers-flex{
		gap:20px;
	}
	
	.numbers-item.item-04 .numbers-value{
		margin-top:0;
	}
	
	.numbers-item .vacation_lead{
		font-size:1.6rem;
		margin-bottom:8px;
	}
	
	/* 6 */
	.numbers-item.item-06 .numbers-flex{
		margin-bottom:18px;
	}
	
	/* 7 */
	.num_year{
		font-size:1.2rem;
	}
}