@charset "UTF-8";

/* ----------------------------------------
   動きに関するスタイル
---------------------------------------- */
/*---- ぽよぽよ ----*/
.poyopoyo {
   animation: poyopoyo 10s ease-out infinite;
   opacity: 1;
}

@keyframes poyopoyo {

   0%,
   40%,
   60%,
   80% {
      transform: scale(1.0);
   }

   50%,
   70% {
      transform: scale(0.95);
   }
}

/*---- 上下にふわふわ ----*/
.fuwafuwa {
   animation: fuwafuwa_updown 2s infinite ease-in-out;
}

@keyframes fuwafuwa_updown {
   0%, 100% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(500px);
   }
}

/*---- 上下にふわふわ ----*/
.fuwafuwa2 {
   animation: fuwafuwa_updown 3s infinite ease-in-out;
}

@keyframes fuwafuwa_updown {
   0%, 100% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(5px);
   }
}


/*---- 左右にゆらゆら ----*/
.yurayura {
   animation: yurayura-side 3s infinite ease-in-out;
}

@keyframes yurayura-side {
   0%, 100% {
       transform: translateX(0);
   }
   50% {
       transform: translateX(50px);
   }
}

/*---- 左右にゆらゆら ----*/
.yurayura_cyobi {
   animation: yurayura-side 5s infinite;
}

@keyframes yurayura-side {
   0%, 100% {
       transform: translateX(0);
   }
   50% {
       transform: translateX(5px);
   }
}


/* 左右にもふわふわ */
.fuwafuwayurayura {
   animation: floating-x 1.8s ease-in-out infinite alternate-reverse;
}

.fuwafuwayurayura img {
   animation: floating-y 3s ease-in-out infinite alternate-reverse;
}

@keyframes floating-x {
   0% {
      transform: translateX(-5%);
   }

   100% {
      transform: translateX(5%);
   }
}

@keyframes floating-y {
   0% {
      transform: translateY(-5%);
   }

   100% {
      transform: translateY(5%);
   }
}


.element {
  /* アニメーションの設定：再生時間2秒、滑らかなイージング */
  animation: moveTopLeft 2s ease-out forwards;
}

@keyframes moveTopLeft {
  0% {
    /* 初期位置：右下（例：X軸+100px、Y軸+100px） */
    transform: translate(100px, 100px);
    opacity: 0;
  }
  100% {
    /* 移動先：左上（元の位置：X軸0、Y軸0） */
    transform: translate(0, 0);
    opacity: 1;
  }
}



.element2 {
   animation: slideInLeft 80s ease-out forwards infinite;
   will-change: transform;
}

@keyframes slideInLeft {
   0% {
      transform: translate(100vw, 100vh);
      /* 画面の右外（100%の位置）からスタート */
   }

   100% {
      transform: translate(0, 50vh);
      /* 元の位置（左側）へ移動 */
   }
}


/*----- 雲 ------*/
  .clouds {
   width: 200%;
   height: 100%;
   /* 雲の画像パスを指定してください */
   background-image: url('/festival/img/cloud2.png'); 
   background-repeat: repeat-x;
   background-size: auto 100%;
   animation: flowClouds 60s linear infinite;
 }
 
 @keyframes flowClouds {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
 }




 /*----- fade-in -----*/
 .fade-in {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.fadein {
   opacity: 1;
   transform: translateY(0);
 }
 
 .no-fade {
   opacity: 1 !important;
   transform: none !important;
 }