@charset "UTF-8";

@media screen and (min-width: 769px){
	#header{
		position: sticky;
	}
}

main{
	text-align: center;
	overflow: hidden;
}
.sec-bg-wrap{
	position: absolute;
	inset: -2rem;
	width: calc(100% + 4rem);
	height: calc(100vh + 4rem);
	overflow: hidden;
}
.sec-bg{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	height: 100%;
	width: 100%;
	will-change: transform, filter;
	transform: translateZ(0);
}
.sec-title{
	padding-top: 12.8rem;
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 4rem;
	position: relative;
	z-index: 999;
}
.sec-title:before{
	content: attr(data-en);
	font-size: 7.5rem;
	margin-bottom: 1.5rem;
	display: block;
	font-family: "Anton", sans-serif;
	font-weight: 400;
}
p.outline{
	font-weight: 400;
	font-size: 1.8rem;
	position: relative;
	z-index: 999;
	line-height: 1.7777;
}
.data-area{
	justify-content: space-between;
	margin-top: 4rem;
	padding-bottom: 15rem;
}
.data-box{
	width: calc(50% - 1.2rem);
	height: 35.2rem;
	background: url(../images/number-bg01.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	margin-bottom: 2.4rem;
	padding-block: 4rem 2.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	transition: .3s opacity ease;
}
.data-box.is-active{
	opacity: 1;
}
.data-desc{
	line-height: 1.5625;
	font-weight: 400;
	color: #000;
}
.data-number-area{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-size: 2.8rem;
	color: #00763f;
}
.data-number{
	font-size: 10rem;
	font-weight: 400;
	display: block;
	font-variant-numeric: tabular-nums;
}
.data-unit{
	display: block;
	padding-bottom: .3em;
	padding-left: .2em;
}
.data-unit:not(:last-of-type){
	margin-right: 1.2rem;
}
.sec{
	margin-top: 2rem;
	overflow: hidden;
	position: relative;
}
.data-title{
	font-size: 2.8rem;
	color: #000;
}
.small{
	display: block;
	font-size: 1.6rem;
	margin-top: .5em;
}
/* +++#sec01+++ */
#sec01{
	margin-top: 2rem;
}
#sec01 .sec-bg.normal{
	background-image: url(../images/numbers-sec01-bg01.jpg);
}
#sec01 .data-box:nth-of-type(1) .data-number{
	min-width: 4ch;
}
#sec01 .data-box:nth-of-type(2) .data-number{
	min-width: 1ch;
}
#sec01 .data-box:nth-of-type(3) .data-number{
	min-width: 3ch;
}
/* +++#sec02+++ */
#sec02 .sec-bg{
	background-image: url(../images/numbers-sec02-bg01.jpg);
}
#sec02 .sec-title,
#sec02 .outline{
	color: #000;
}

#sec02 .data-box:nth-of-type(1) .data-number{
	min-width: 3.5ch;
}
#sec02 .data-box:nth-of-type(2) .data-number{
	min-width: 3ch;
}
#sec02 .data-box:nth-of-type(3) .data-number{
	min-width: 3.5ch;
}
#sec02 .data-box:nth-of-type(4) .data-number{
	min-width: 3ch;
}
#sec02 .data-box:nth-of-type(5) .data-number{
	min-width: 2ch;
}
#sec02 .data-box:nth-of-type(6) .data-number{
	min-width: 2ch;
}
#sec02 .data-box:nth-of-type(7) .data-number{
	min-width: 2.5ch;
}
.staff{
	justify-content: center;
	padding-bottom: 4rem;
}
.men,
.women{
	display: flex;
	align-items: flex-end;
}
.data-colon{
	font-size: 10rem;
	font-weight: 400;
	padding: 0 .05em .15em;
}
.data-label{
	writing-mode: vertical-lr;
	font-size: 2.1rem;
	padding: 0 .25em .25em 0;
}
#sec02 .data-box:last-of-type{
	margin-inline: auto;
}
/* +++円グラフ+++ */
.chart-box{
	margin-top: 2rem;
	width: 100%;
}
.chart{
	max-width: 39.5rem;
	width: 90%;
	margin-inline: auto;
}
.chart-svg{
	width: 100%;
	height: auto;
	display: block;
}

.chart-bg{
	fill: #dfe7e2;
	fill-opacity: 0;
}
.seg01 { 
	fill: #00763f;
}
.seg02 {
	fill: #00763f;
	fill-opacity: .8;
}
.seg03 {
	fill: #00763f;
	fill-opacity: .5;

}
.seg04 {
	fill: #00763f;
	fill-opacity: .7;

}
.seg05 {
	fill: #00763f;
	fill-opacity: .2;
}

.cls-1{
	fill:none;
	stroke:#000;
	stroke-miterlimit:10;
	stroke-width:.5px;
}
.cls-2{
	isolation:isolate;
}
.cls-3{
	fill:#00763f;
}
.cls-4{
	mix-blend-mode:multiply;
}
.chart-labels{
	opacity: 0;
	transition: .4s opacity ease;
}
.chart-labels.is-active{
	opacity: 1;
}


.sec-inner{
	height: fit-content;
}

@media screen and (max-width: 768px){
	.sec-title{
		padding-top: 20.5rem;
		font-size: 2.8rem;
		margin-bottom: 5.4rem;
	}
	.sec-title:before{
		margin-bottom: 2rem;
	}
	p.outline{
		font-size: 3rem;
		line-height: 1.5333333;
	}
	.data-area{
		display: block;
		margin-top: 7rem;
		padding-bottom: 7rem;
	}
	.data-box{
		width: 60rem;
		height: 50rem;
		margin-inline: auto;
		margin-bottom: 7rem;
		padding-block: 6rem 4rem;
	}

	.data-desc{
		line-height: 1.535;
		font-size: 2.8rem;
	}

.data-unit{
	display: block;
	padding-bottom: .3em;
	padding-left: .2em;
}
.data-unit:not(:last-of-type){
	margin-right: 1.2rem;
}
.sec{
	margin-top: 2rem;
	overflow: hidden;
	position: relative;
}
	.data-title{
		font-size: 3.6rem;
	}
.small{
	display: block;
	font-size: 1.6rem;
	margin-top: .5em;
}
/* +++#sec01+++ */
#sec01{
	margin-top: 2rem;
}
#sec01 .sec-bg{
	background-image: url(../images/sp-numbers-sec01-bg01.jpg);
}
#sec01 .data-box:nth-of-type(1) .data-number{
	min-width: 4ch;
}
#sec01 .data-box:nth-of-type(2) .data-number{
	min-width: 1ch;
}
#sec01 .data-box:nth-of-type(3) .data-number{
	min-width: 3ch;
}
/* +++#sec02+++ */
	#sec02 .sec-bg{
		background-image: url(../images/sp-numbers-sec02-bg01.jpg);
	}

#sec02 .data-box:nth-of-type(1) .data-number{
	min-width: 3.5ch;
}
#sec02 .data-box:nth-of-type(2) .data-number{
	min-width: 3ch;
}
#sec02 .data-box:nth-of-type(3) .data-number{
	min-width: 3.5ch;
}
#sec02 .data-box:nth-of-type(4) .data-number{
	min-width: 3ch;
}
#sec02 .data-box:nth-of-type(5) .data-number{
	min-width: 2ch;
}
#sec02 .data-box:nth-of-type(6) .data-number{
	min-width: 2ch;
}
#sec02 .data-box:nth-of-type(7) .data-number{
	min-width: 2.5ch;
}
.staff{
	justify-content: center;
	padding-bottom: 4rem;
}
.men,
.women{
	display: flex;
	align-items: flex-end;
}
.data-colon{
	font-size: 10rem;
	font-weight: 400;
	padding: 0 .05em .15em;
}
.data-label{
	writing-mode: vertical-lr;
	font-size: 2.1rem;
	padding: 0 .25em .25em 0;
}
#sec02 .data-box:last-of-type{
	margin-inline: auto;
}
/* +++円グラフ+++ */
.chart-box{
	margin-top: 2rem;
}
	.chart{
		width: 56rem;
		max-width: 56rem;
	}
.chart-svg{
	width: 100%;
	height: auto;
	display: block;
}

.chart-bg{
	fill: #dfe7e2;
	fill-opacity: 0;
}
.seg01 { 
	fill: #00763f;
}
.seg02 {
	fill: #00763f;
	fill-opacity: .8;
}
.seg03 {
	fill: #00763f;
	fill-opacity: .5;

}
.seg04 {
	fill: #00763f;
	fill-opacity: .7;

}
.seg05 {
	fill: #00763f;
	fill-opacity: .2;
}

.cls-1{
	fill:none;
	stroke:#000;
	stroke-miterlimit:10;
	stroke-width:.5px;
}
.cls-2{
	isolation:isolate;
}
.cls-3{
	fill:#00763f;
}
.cls-4{
	mix-blend-mode:multiply;
}
.chart-labels{
	opacity: 0;
	transition: .4s opacity ease;
}
.chart-labels.is-active{
	opacity: 1;
}
}