@charset "utf-8";
/* CSS Document */

.mainBlock01{
    display: block;
    width: 1280px;
    bottom: 259px;
}

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

/* その場で01 */
.fadeIn{
    animation-name: fadeInAnime;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    text-align: center;
    z-index: 0;
    margin-top: 30px;
    height: 0px;
    position: relative;
    width: 100%;
    top: 150px;
}

.fadeIn img{
    width: 360px;    
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* その場で02 */
.fadeIn02{
    animation-name: fadeInAnime;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    opacity: 0;
    text-align: center;
    z-index: 0;
    margin-top: 0px;
    height: 0px;
    position: relative;
    width: 100%;
    top: 0px;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

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

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

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

/* 上から01 */

.fadeDown01{
    animation-name: fadeDownAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: -1;
    position: absolute;
    text-align: left;    
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/* 上から02 */

.fadeDown02{
    animation-name: fadeDownAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 0;
    position: absolute;
    text-align: right;
    right: 0px;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/* 左から */

.fadeLeft{
    animation-name: fadeLeftAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 1;
    text-align: left;
    float: left;
    top: 28px;
    left: 0px;
    /* [disabled]right: auto; */
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
    animation-name: fadeRightAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    position: absolute;
    opacity: 0;
    z-index: 2;
    text-align: right;
    /* [disabled]left: auto; */
    top: 30px;
    right: 0px;
    clear: none;
    float: right;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

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



p{
	margin:50px 0;
}

.flex{
	display:flex;
	flex-wrap: wrap;
}

.box{
	width: 220px;
	padding: 20px;
	margin:0 20px 20px 20px;
	background: #666;
	color: #fff;
}