@font-face{
	font-family:Comfortaa;
	src:url("fonts/Comfortaa-Light.ttf") format("truetype");
	font-weight:400;
}
@font-face{
	font-family:Manrope;
	src:url("fonts/Manrope-Light.ttf") format("truetype");
	font-weight:400;
}



#countWrap{
}

/************************
  すって、はいてコンテナ
 ************************/
#countWrap .img{
	position:relative;
	max-width:200px;
	margin:auto;
	width:75%;
}
#countWrap .img .text{
	word-break:keep-all;
	text-align:center;
	position:absolute;
	font-weight:bold;
	display:block;
	color:#fff;
	z-index:10;
	left:50%;
	top:43%;
}

/* すって */
@keyframes text{
	0%   {opacity:1;}
	10%  {opacity:1;}
	20%  {opacity:0;}
	30%  {opacity:0;}
	40%  {opacity:0;}
	45%  {opacity:1;}
	50%  {opacity:1;}
	60%  {opacity:0;}
	70%  {opacity:0;}
	80%  {opacity:0;}
	85%  {opacity:1;}
	90%  {opacity:1;}
	100% {opacity:0;}
}
#countWrap .img .text span{
	margin-left:-1.5em;
	position:absolute;
	font-size:1.3rem;
	font-size:20px;
	display:block;
	opacity:1;
}
#countWrap .img .text span.pulse{
	animation:text 12s linear forwards;
}

/* はいて */
@keyframes text2{
	0%   {opacity:0;}
	5%   {opacity:1;}
	10%  {opacity:1;}
	20%  {opacity:0;}
	30%  {opacity:0;}
	40%  {opacity:0;}
	45%  {opacity:1;}
	50%  {opacity:1;}
	60%  {opacity:0;}
	70%  {opacity:0;}
	80%  {opacity:0;}
	85%  {opacity:1;}
	90%  {opacity:1;}
	100% {opacity:1;}
}
#countWrap .img .text span:nth-child(2){
	opacity:0;
}
#countWrap .img .text span.pulse:nth-child(2){
	animation:text2 12s linear forwards;
	animation-delay:2.4s;
}


/******
  図形
 ******/
/* コンテナ */
@keyframes scales{
	0%   {transform:scale(.90);}
	4%   {transform:scale(.88);}
	96%  {transform:scale(.62);}
	100% {transform:scale(.60);}
}
#bWrap{
	transform:scale(.6);
}
#bWrap.pulse{
	animation:scales 2.4s linear alternate-reverse 6 forwards;
}
#countWrap #bWrap span{
	display:block;
	width:100%;
}
#countWrap .img img{
	width:100%
}
/* 白以外 */
#countWrap #bWrap span:not(#b1){
	position:absolute;
	top:0;
	left:0
}
/* 白（最奥） */
@keyframes r1{
	0%   { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}
#countWrap #bWrap span#b1{
	animation:r1 11s linear infinite;
}
/* 青緑（中間） */
@keyframes r2{
	0%   { transform:rotate(120deg); }
	100% { transform:rotate(480deg); }
}
#countWrap #bWrap span#b2{
	transform:rotate(120deg);
	animation:r2 12s linear infinite;
}
/* 黄緑（手前） */
@keyframes r3{
	0%   { transform:rotate(240deg); }
	100% { transform:rotate(600deg); }
}
#countWrap #bWrap span#b3{
	transform:rotate(240deg);
	animation:r3 13s linear infinite;
}



/**********
  カウンタ
 **********/
#countWrap .textArea{
	text-align:center;
	width:100%;
}
#countWrap .textArea .text{
	font-weight:bold;
	font-size:1rem;
	color:#707070;
}
#countArea{
	font-family:"Manrope";
	font-family:"Comfortaa";
	position:relative;
	line-height:1em;
	font-size:90px;
	color:#707070;
	height:1em;
	width:100%;
}
#countArea span{
	text-align:center;
	position:absolute;
	display:block;
	width:100%;
	opacity:0;
}

#countArea span.pulse{
	animation:time 2.4s;
}
#countArea span#count0.pulse{
	animation:time0 2.4s forwards;
	animation-delay:12s;
}
#countArea span#count4{animation-delay:2.4s}
#countArea span#count3{animation-delay:4.8s}
#countArea span#count2{animation-delay:7.2s}
#countArea span#count1{animation-delay:9.6s}
#countArea span#count0{opacity:0;}

@keyframes time{
	0%   {opacity:0;}
	5%   {opacity:1;}
	95%  {opacity:1;}
	100% {opacity:0;}
}
@keyframes time0{
	0%   {opacity:0;}
	5%   {opacity:1;}
	100% {opacity:1;}
}