@charset "UTF-8";
/*アニメサイズ対策*/
#canvas, #animation_container, #dom_overlay_container, .aspect-ratio-block {
    /*width:100% !important;
    max-width:100% !important;
    height:auto !important;*/
    aspect-ratio: 1920 / 1200 !important;
}

/*イラストの動き*/
#yurayura01 {
	animation: yurayura01 4s  infinite;
}
@keyframes yurayura01 {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}
/*イラストの動き02*/
#yurayura02 {
	animation: yurayura02 3s  infinite;
}
@keyframes yurayura02 {
    0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(18px);
  }
}
/*イラストの動き03*/
#yurayura03 {
	animation: yurayura03 3s  infinite;
}
@keyframes yurayura03 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-5px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-3px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/*ふわっと表示*/
.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}
.fade.active {
	opacity: 1;
	transform: translateY(0px);
}