@charset "utf-8";
div#no100 {
	height: 1276px;
	background: #F4D1DE;
}

div#no100 .dataNo,
div#no100 h2,
div#no100 h2 span {
	color: #002B79;
}

.dataFoot ul li {
	list-style: none;
	line-height: 20px;
	text-align:justify;
	width: 510px;
	margin-left: -20px;
}

.note{
	font-size: 11px;
	letter-spacing: 0.024em;
	color: #002B79;
	opacity: 1 !important;
}

@keyframes show{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes show_up{
	0%{
		transform: translateY(20px);
		opacity: 0;
	}
	100%{	
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes show_pop{
	0%{
		transform: scale(0.8);
		opacity: 0;
	}
	60%{
		transform: scale(1.1);
		opacity: 1;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

.cont1{
	width: 1020px;
	height: 779px;
	padding: 40px 32px 32px;
	box-sizing: border-box;
	border-radius: 16px;
	background: #fff;
	position: absolute;
	top: 145px;
	left: 30px;
}
.cont1 > *{
	position: absolute;
	opacity: 0;
}
.cont1_title{
	top: 38px;
	left: 32px;
	opacity: 1 !important;
}
.cont1_title:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
	transition: 0.5s;
}
.cont1_title.show:before{
	width: 0;
}
.cont1_point{
	top: 147px;
	left: 86px;
	transform: translateY(20px);
}
.cont1_point.show{
	animation: show_up 0.5s ease forwards;
}
.cont1_no1{
	top: 123px;
	left: 326px;
}
.cont1_no1{
	transform: scale(0.8);
}
.cont1_no1.show{
	animation: show_pop 0.5s ease forwards;
}
.cont1_graf_base{
	top: 248px;
	left: 155px;
}
.cont1_graf{
	top: 267px;
	left: 30px;
	width: 124px;
	height: 437px;
	background: url(img/cont1_graf.png) no-repeat left center / 429px auto;
}
.cont1_graf_base.show{
	animation: show 0.5s ease forwards;
}
.cont1_graf.show{
	animation: cont1_graf 1s ease-in-out forwards;
}
@keyframes cont1_graf{
	0%{
		width: 124px;
		opacity: 0;
	}
	30%{
		width: 124px;
		opacity: 1;
	}
	100%{
		width: 429px;
		opacity: 1;
	}
}
.cont1_inner{
	background: #E2F0F7;
	border-radius: 10px;
	top: 81px;
	right: 32px;
	width: 452px;
	height: 666px;
}
.cont1_inner.show{
	animation: show 0.3s ease forwards;
}
.cont1_inner > *{
	position: absolute;
	opacity: 0;
	transition: 0.3s;
}
.cont1_title2{
	top: 32px;
	left: 37px;
}
.cont1_title2.show{
	animation: show_up 0.5s ease forwards;
}
.cont1_shien{
	transform: scale(0.8);
}
.cont1_shien1{
	bottom: 309px;
	left: 28px;
}
.cont1_shien2{
	bottom: 309px;
	right: 28px;
}
.cont1_shien3{
	bottom: 32px;
	left: 28px;
}
.cont1_shien4{
	bottom: 32px;
	right: 28px;
}
.cont1_shien1.show,
.cont1_shien2.show,
.cont1_shien3.show,
.cont1_shien4.show{
	animation: show_pop 0.5s ease forwards;
}
@keyframes cont1_shien{
	0%{
		transform: translateY(20px);
		opacity: 0;
	}
	100%{	
		transform: translateY(0);
		opacity: 1;
	}
}
.cont1_illust{
	top: -100px;
	right: 32px;
	transform: translateY(20px);
}
.cont1_illust.show{
	animation: show_up 0.5s ease forwards;
}

.cont1_illust_comment{
	top: -94px;
	right: 239px;
	transform: scale(0.8);
}
.cont1_illust_comment.show{
	animation: show_pop 0.5s ease forwards;
}
.cont1 .note{
	left: 32px;
	bottom: 24px;
}

.cont2{
	width: 1020px;
	height: 253px;
	border-radius: 16px;
	background: #FCFCDD;
	position: absolute;
	bottom: 45px;
	left: 30px;
}
.cont2 > *{
	position: absolute;
	opacity: 0;
}
.cont2_title{
	top: 46px;
	left: 64px;
	opacity: 1 !important;
}
.cont2_title:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #FCFCDD;
	transition: 0.5s;
}
.cont2_title.show:before{
	width: 0;
}
.cont2_graf_before{
	top: 39px;
	left: 503px;
	transform: scale(0.8);
}
.cont2_graf_before.show{
	animation: show_pop 0.5s ease forwards;
}
.cont2_graf_arrow{
	top: 98px;
	left: 709px;
}
.cont2_graf_arrow.show{
	animation: show 0.5s ease forwards;
}
.cont2_graf_after{
	top: 36px;
	left: 767px;
	transform: scale(0.8);
}
.cont2_graf_after.show{
	animation: show_pop 0.3s ease forwards;
}
.cont2_graf_up{
	top: -20px;
	right: 32px;
	transform: translateY(20px);
}
.cont2_graf_up.show{
	animation: show_up 0.5s ease forwards;
}
.cont2 .note{
	left: 64px;
	bottom: 24px;
}