@charset "UTF-8";
/* ----------------------------------------------
		トップメインアニメーション
------------------------------------------------- */
#animation_wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

#animation_wrap .anm_obj {
  border: 0px solid #000;
  /*max-width: 1000px;*/
  width: 100%;
  height: 100%;
  position: absolute;
}

#animation_wrap .rotate__cont {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
	bottom: 40%;
	border: 0px solid #000;
}
#animation_wrap .rotate__float {
  animation: rotate 60s infinite linear;
	width: 250%;
  position: absolute;
	top: 0%;
	left: -75%;
	right: -75%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#animation_wrap .rotate__float.stop {
	animation-play-state: paused;
}
#animation_wrap .rotate__float.start {
	animation-play-state: running;
}


/*#animation_wrap .yellow-curve img {
	transform: scaleX(1.1);
	animation: wobbling_x 0.7s ease-in-out infinite alternate,
						wobbling_y 1.2s ease-in-out infinite alternate;

}
@keyframes wobbling_x {
	0% {
		margin-left: 16px;
	}

	100% {
		margin-left: 0px;
	}
}

@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}*/




/*サイズによる調整*/
/*
@media only screen and (max-width: 1400px) {
	#animation_wrap .rotate__cont {
		bottom: -175%;
	}
}
@media only screen and (max-width: 1200px) {
	#animation_wrap .rotate__cont {
		bottom: -150%;
	}
}
@media only screen and (max-width: 980px) {
	#animation_wrap .rotate__cont {
		bottom: -100%;
	}
}
*/

#animation_wrap .anm_obj img {
  /*width: 100%;*/
}

@media only screen and (max-width: 980px) {
/*	
  #animation_wrap .anm_obj img {
    width: auto;
    height: 100%;
    object-fit: cover;

  }
  #animation_wrap .anm_obj {
    transform-origin: center !important;
  }
	*/
}



/* アニメーション全体の基本設定 */
#animation_wrap .anm_obj {
/* アニメーション動作時　*/
  animation-duration: 3.5s;
	/*animation-duration: 0s;*/
  /*  animation-duration: 0s; アニメーション停止時 */
  
  /* animation-timing-function: ease-out;*/ 
  /* animation-timing-function: ease-in-out; */
  /* animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); */
  /*animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);*/
  
  animation-timing-function: cubic-bezier(0.58, 0.01, 0.175, 1);
  animation-direction: normal;
  animation-delay: 2s;
	/*animation-delay: 0s;*/
  /* animation-play-state: paused; */
  animation-fill-mode: forwards;
  transform-origin: top;

  opacity: 1;
}

/* 各オブジェクトごとの動作詳細設定 */

/* オブジェ　黄色い大地 */
#animation_wrap .anm_obj.lay {
	_background-color: var(--main-theme_color);
  animation-name: anm_obj_lay;
  transform: translate(0px,0px) rotate(0deg);
  opacity: 0;
	
}
@keyframes anm_obj_lay {
  0% {
    transform: translate(0px,100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0px,60%) rotate(0deg);
    opacity: 1;
  }
}

/*スマホサイズ*/
@media only screen and (max-width: 640px) {
	@keyframes anm_obj_lay {
		0% {
			transform: translate(0px,100%) rotate(0deg);
			opacity: 1;
		}
		100% {
			transform: translate(0px,70%) rotate(0deg);
			opacity: 1;
		}
	}
}