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

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 440px;
	height: 170px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/


/*ここから実装*/


.boxes{
  display: grid;
  column-gap: 20px;
  row-gap: 80px;
  margin-top: 100px;
	width: 500px;
	margin: 0 auto;
}
.box {
  aspect-ratio: 16 / 9;
  background-color: #81D8D0;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(150px);
}
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.boxes p{
	font-size: 24px;
	color: beige;
	text-align: center;
	padding: 120px;
}