@charset "utf-8";
/* CSS Document */
#top_wrapper {
	width: 100vw;
	height: 100vh;
	position:relative;	
}
/******************************/
.mainPhoto {
	width:100%;
	height: 94vh;
	overflow:hidden;
	margin:0 auto;
	position:relative;
	background-color: #eaffec;
}
.photo01 {
	animation: slideIn01 3s 1;
	width:40%;
	height: 43%;
	background-color: #35be42;
	border-radius: 0 1rem 1rem 0;
}
.photo02 {
	width: 29%;
	height: 90%;
	animation: slideIn02 3s 1;
	position: absolute;
	top: 10%;
	left: 41%;
	background-color: #97ffa1;
	border-radius: 1rem 1rem 0 0;
}
.photo03 {
	width: 37%;
	height: 45%;
	position: absolute;
	bottom: 10%;
	left: 3%;
	animation: slideIn03 3s 1;
	background-color: #a8d7ad;
	border-radius: 1rem;
}

.photo04 {
	width: 29%;
	height: 90%;
	position: absolute;
	top: 5%;
	right: 0%;
	animation: slideIn04 3s 1;
	background-color: #42fc56;
	border-radius: 1rem 0  0 1rem;
}
@keyframes slideIn01 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideIn02 {
  0% {
    opacity: 0;
  }  
  10% {
    opacity: 0;
    transform: translateX(1000px);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideIn03 {
  0% {
    opacity: 0;
  }  
  20% {
    opacity: 0;
    transform: translateY(500px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideIn04 {
  0% {
    opacity: 0;
  }  
  30% {
    opacity: 0;
    transform: translateY(-500px);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
}
/***************************************/
.head_catch {
	position: absolute;
	top: 60%;
	right: 2rem;
	z-index: 99;
	display: flex;
	flex-direction: column-reverse;
}
.catch_copy {
	font-size: 3rem;
	line-height: 1em;
}
.catch_note {	
	font-size: 1.3rem;
	line-height: 1em;
	margin-bottom: 0.5rem;
}
.head_rogo_wrapper {
	width: 50%;
	height: 40vh;
	position: absolute;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 110;
}
.head_frame {
	width: 50%;
	height: 10vh;
	background-color: rgba(0,255,0,0.2);
	position: absolute;
	bottom: 0;
	right: 0;
}
.sns_wrapper {
	background-color: rgba(125,125,8,0.2);
	position: absolute;
	top: -1rem;
	right: 2rem;
	padding: 0.5rem;
}