@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

#wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
}

a{
	color: #333;
}

/*========= レイアウトのためのCSS ===============*/
p{
	text-align: center;
	margin: 20px 0;
	font-size:1.5rem;
}


/*========= particle js を描画するエリア設定 ===============*/

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
/*	background-color:#FEE7E7;*//*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

/*==================================================
じわっ
===================================*/

.blur{
	animation-name:blurAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}