@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/
.flex{
	display:flex;
	flex-wrap: wrap;
}
.delayScroll{
  width: 1200px;
  margin: 0 auto;
	opacity: 100;
}
@media screen and (max-width: 1200px){
  .delayScroll{
    width: 90%;
  }
}
.delayScroll div:first-child{
	width: 23.7693389%;
	box-sizing:border-box;
}
.delayScroll div:nth-child(2){
	width: 15.6821378%;
	box-sizing:border-box;
}
.delayScroll div:nth-child(3){
	width: 36.8495077%;
	box-sizing:border-box;
  display: flex;
  flex-wrap: wrap;
}
.delayScroll div:nth-child(4){
	width: 23.6990156%;
	box-sizing:border-box;
  display: flex;
  flex-wrap: wrap;
}
figure{
  width: 100%;
  margin: 0;
  padding: 0;
}
img{
  width: 100%;
  height: auto;
  display: block;
}
.img_size1{
  width: 24.80916%;
}
.img_size2{
  width: 75.19084%;
}
.img_size3{
  width: 49.7%;
}
.img_size4{
  width: 50.3%
}

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

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.9s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

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

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 1.5s;
}
.delay-time03{
animation-delay: 3s;
}
.delay-time04{
animation-delay: 4.5s;
}
.delay-time05{
animation-delay: 6s;
}
.delay-time06{
animation-delay: 7.5s;
}
.delay-time07{
animation-delay: 9s;
}
.delay-time08{
animation-delay: 10.5s;
}