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

#animation_roof_layer .anm_obj {
  border: 0px solid #000;
  max-width: 1000px;

  position: absolute;
}
#animation_roof_layer .anm_obj.lay3 {
  z-index: 3;
}
#animation_roof_layer .anm_obj.lay2 {
  z-index: 2;
}
#animation_roof_layer .anm_obj.lay1 {
  z-index: 1;
}
#animation_roof_layer .anm_obj img {
  width: 100%;
}

/* アニメーション全体の基本設定 */
#animation_roof_layer .anm_obj {
/* アニメーション動作時　*/
  animation-duration: 3.5s;
  /*  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-direction: normal;
  animation-delay: 0s;
  /* animation-play-state: paused; */
  
  transform-origin: top;

  opacity: 1;
}

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

/* 屋根　上 */
#animation_roof_layer .anm_obj.lay3 {
  animation-name: anm_obj_lay3;
  transform: translate(0px,0px) rotate(0deg);
}
@keyframes anm_obj_lay3 {
  0% {
    transform: translate(1200px,1100px) rotate(50deg);
    opacity: 0.75;
  }
  100% {
    transform: translate(0px,0px) rotate(0deg);
    opacity: 1;
  }
}
#animation_roof_layer .anm_obj.lay3 img {
  filter: brightness(0.9) contrast(110%);
}

/* 屋根　中 */
#animation_roof_layer .anm_obj.lay2 {
  animation-name: anm_obj_lay2;
  transform: translate(0px,0px) rotate(0deg);
}
@keyframes anm_obj_lay2 {
  0% {
    transform: translate(600px,700px) rotate(20deg);
    opacity: 1;
  }
  100% {
    transform: translate(0px,0px) rotate(0deg);
    opacity: 1;
  }
}


/* 屋根　下 */
#animation_roof_layer .anm_obj.lay1 {
  animation-name: anm_obj_lay1;
  transform: translate(0px,0px) rotate(0deg);
}
@keyframes anm_obj_lay1 {
  0% {
    transform: translate(2000px,900px) rotate(100deg);
  }
  100% {
    transform: translate(0px,0px) rotate(0deg);
  }
}
#animation_roof_layer .anm_obj.lay1 img {
  opacity: 0.5;
}
#animation_roof_layer .anm_obj.lay1.hidden img {
  opacity: 0;
}


/* 屋根　固定 */
#animation_roof_layer .anm_obj.lay0 {
  animation-name: anm_obj_lay0;
  transform: translate(0px,0px) rotate(0deg);
}
@keyframes anm_obj_lay0 {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}




/* テーマテキスト */
#animation_roof_layer .anm_obj.layTheme {
  position: relative;
}
#animation_roof_layer .anm_obj.layTheme img {
  opacity: 0;
}
#animation_roof_layer .anm_obj.layTheme.show {
  position: fixed !important;
}
#animation_roof_layer .anm_obj.layTheme.show img {
  opacity: 1;
}


/* 屋根　影 */
#animation_roof_layer .anm_obj.layShadow {
  animation-name: anm_obj_layShadow;
  transform: translate(0px,0px) rotate(0deg);
}
@keyframes anm_obj_lay1 {
  0% {
    transform: translate(1200px,500px) rotate(35deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(0px,0px) rotate(0deg);
    opacity: 1;
  }
}

#animation_roof_layer .anm_obj.layShadow img {
  opacity: 0;
  filter: drop-shadow(10px 50px 20px rgba(0, 0, 0, 0.5));
  transform: translateX(0px);
}

#animation_roof_layer .anm_obj.layShadow.onFilter img {
  opacity: 1;
  
  animation-duration: 6.0s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-name: onFilter;
  
  transform: translateX(-5px);
  
}
@keyframes onFilter {
  0% {
    filter: drop-shadow(20px 0px 0px rgba(0, 0, 0, 0.7));
    transform: translateX(-5px) scale(0.925, 1);
  }
  100% {
    filter: drop-shadow(-20px 0px 10px rgba(0, 0, 0, 0.7));
    transform: translateX(-20px) scale(0.925, 1);
  }
}