@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap);

.top_animation {
	position:relative;
	/*padding: 0 !important;
	height:100vh;*/
	background: #fff;
	overflow: hidden;
}
.top_animation ul{
	/*position:relative;*/
	position: absolute;
	top: 0;
	width:100%;
	height:100%;
}
.top_animation li {
	width: 100%;
	height: 100%;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	animation-duration: 15s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	background-size: cover;
}
.top_animation li:not(.ani_logo):not(.ani_fig_fin)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	/*background: rgb(0 0 0 / 80%);*/
	background-image: url('../../../../res/file/image/ani_textBG.png');
	background-size: cover;
}
.top_animation li.ani_logo {
	animation-name: ani_logo_on;
/*	animation: ani_logo_on 17s ease 0s infinite normal;*/
}
@keyframes ani_logo_on {
  0% {opacity:0;}
  1% {opacity:1;}
  10% {opacity:1;}
  11% {opacity:0;}
}
.top_animation li.ani_virtual {
	animation-name: ani_virtual_on;
}
@keyframes ani_virtual_on {
  0% {opacity:0;}
  10% {opacity:0;transform:translate(0,3%);}
  14% {opacity:1;transform:translate(0,0);}
  28% {opacity:1;}
  29% {opacity:0;}
}
.top_animation li.ani_digital {
	animation-name: ani_digital_on;
}
@keyframes ani_digital_on {
  0% {opacity:0;}
  28% {opacity:0;transform:translate(0,3%);}
  32% {opacity:1;transform:translate(0,0);}
  46% {opacity:1;}
  47% {opacity:0;}
}
.top_animation li.ani_smart {
	animation-name: ani_smart_on;
}
@keyframes ani_smart_on {
  0% {opacity:0;}
  46% {opacity:0;transform:translate(0,3%);}
  50% {opacity:1;transform:translate(0,0);}
  64% {opacity:1;}
  65% {opacity:0;}
}
.top_animation li.ani_covid {
	animation-name: ani_covid_on;
}
@keyframes ani_covid_on {
  0% {opacity:0;}
  64% {opacity:0;transform:translate(0,3%);}
  68% {opacity:1;transform:translate(0,0);}
  82% {opacity:1;}
  83% {opacity:0;}
}
.top_animation li.ani_fig_fin {
	animation-name: ani_fig_fin;
	animation-timing-function: linear;
    background-color: #000;
}
@keyframes ani_fig_fin {
  0% {opacity:0;}
  82% {opacity:0;transform:scale(1.05);}
  86% {opacity:1;transform:scale(1);}
  100% {opacity:1;}
}
.top_animation li .ani_inner{
	position:absolute;
	top:50%;
	left:2%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	transform:translateY(-50%);
}
.top_animation li .ani_inner.ani_text{
	width: 100%;
	/*text-align:center;
	font-size: 2.6rem;*/
	font-size: 2.6vw;
	color: white;
	letter-spacing: .1em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 100;
}
.top_animation li .ani_inner.ani_text br {
	display: none;
}
.top_animation li.ani_logo .ani_text{
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
}
.top_animation li .ani_inner.ani_fig{
	width:100%;
	height:100%;
    background-size: cover;
    background-position: center;
}
/*.top_animation li.ani_fig_construction_1 .ani_inner.ani_fig.fig_construction{
	background-image:url('../../../../res/file/image/index_ani_fig_construction_1.jpg');
}
.top_animation li.ani_fig_construction_2 .ani_inner.ani_fig.fig_construction{
	background-image:url('../../../../res/file/image/index_ani_fig_construction_2.jpg');
}
.top_animation li.ani_fig_construction_3 .ani_inner.ani_fig.fig_construction{
	background-image:url('../../../../res/file/image/index_ani_fig_construction_3.jpg');
}
.top_animation li.ani_fig_data_1 .ani_inner.ani_fig.fig_data{
	background-image:url('../../../../res/file/image/index_ani_fig_data_1.jpg');
}
.top_animation li.ani_fig_data_2 .ani_inner.ani_fig.fig_data{
	background-image:url('../../../../res/file/image/index_ani_fig_data_2.jpg');
}
.top_animation li.ani_fig_data_3 .ani_inner.ani_fig.fig_data{
	background-image:url('../../../../res/file/image/index_ani_fig_data_3.jpg');
}
.top_animation li.ani_fig_city_1 .ani_inner.ani_fig.fig_city{
	background-image:url('../../../../res/file/image/index_ani_fig_city_1.jpg');
}
.top_animation li.ani_fig_city_2 .ani_inner.ani_fig.fig_city{
	background-image:url('../../../../res/file/image/index_ani_fig_city_2.jpg');
}
.top_animation li.ani_fig_relation_1 .ani_inner.ani_fig.fig_relation{
	background-image:url('../../../../res/file/image/index_ani_fig_relation_1.jpg');
}*/
.top_animation li.ani_virtual {
	background-image:url('../../../../res/file/image/top_animation01.jpg');
}
.top_animation li.ani_digital {
	background-image:url('../../../../res/file/image/top_animation02.jpg');
}
.top_animation li.ani_smart {
	background-image:url('../../../../res/file/image/top_animation03.jpg');
}
.top_animation li.ani_covid {
	background-image:url('../../../../res/file/image/top_animation04.jpg');
}
.top_animation li.ani_fig_fin{
	background-image:url('../../../../res/file/image/top_animation05.jpg');
}
/*.top_animation li.ani_fig_fin .ani_inner.ani_fig.fig_fin{
	background-image:url('../../../../res/file/image/index_ani_text_fig_fin.jpg');
	opacity: .7;
}*/
.top_animation li .ani_inner h1 {
	position: static;
	transform: translate(0,0);
	background: transparent;
}
.top_animation .ani_fin_text {
	width: 90%;
    text-align: center;
    position: absolute;
    z-index:10;
    top: 50%;
    right: 50%;
    color: #fff;
    -webkit-transform: translate(50%,-50%);
    -ms-transform: translate(50%,-50%);
    transform: translate(50%,-50%);
	text-shadow: 0 0 3px gray;
    /*font-size: 3.2rem;*/
    font-size: 3.5vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
	animation-name: ani_fin_text;
	animation-duration: 15s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
@keyframes ani_fin_text {
  0% {opacity:0;}
  82% {opacity:0;}
  83% {opacity:1;}
  100% {opacity:1;}
}