@charset "utf-8";

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



@keyframes bg-color {
  0% { background-color:#d5ecea; }
  20% { background-color: #d3eefb; }
  40% { background-color: #d3dff1; }
  60% { background-color: #d2cde5; }
  80% { background-color: #e7d6e8; }
  100% { background-color: #fadce9; }
}


.wrapper{
	overflow: hidden;
	margin:0 auto 0 auto;
	width:95%;
}


.box{
	width: 100%;
	padding: 0px 10px 10px 10px;
	margin:0 0 20px 0;
	color: #000;
	box-sizing:border-box;
}

p{
	width:100%;
	font-weight:100;
	font-size: 1.3em;
	margin:10px 0 10px 0;
	padding:0 0 0 0;
}

h1{
	font-size:1.7em;
	font-weight:100;
	margin:50px 0 10px 0;
}

h2{
	color: #4F300C;
	font-size:1.5em;
	font-weight:100;
}

.immax{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

img{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

hr{
	margin:20px 0 20px 0;
	width:8%;
	border-top: 2px solid black;
}



/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);
	filter: blur(20px);
  opacity: 0;
  }

  to {
    opacity: 1;
	transform: translateY(0);
	 filter: blur(0);
  opacity: 1;
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}