@charset "Shift_JIS";


.decolation{
    display: flex;
    vertical-align: center;
}


/*試し用:/
.usagi-area22 {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  
  }

  /* --- ふわふわ揺れる --- */
@keyframes fuwafuwa {
    0% { transform: translate(0, 0) rotate(-7deg); }
    50% { transform: translate(0, -10px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(7deg); }
  }
  
  /* --- 右から左へ移動 --- */
  @keyframes moveLeft {
    0% { right: -120px; }
    100% { right: 120%; }
  }
  
  
  
  /* --- 共通画像設定 --- */
  .usagi22 {
    position: absolute;
    bottom: 20px;
    width: 100px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation:/* fuwafuwa 3s ease-in-out infinite alternate,*/
               moveLeft 25s linear infinite;
  }
  
  /* --- 各うさぎ --- */
  .usagi1 {
    background-image: url("../images/sasaki/uzumaru_background.png");
    animation-delay: 0s, 0s;
  /*  bottom: 30px;*/
  }
  
  .usagi2 {
    background-image: url("../images/sasaki/uzumaru_background.png");
    animation-delay: 1.5s, 8s;
    /*bottom: 60px;*/
  }
  
  .usagi3 {
    background-image: url("../images/sasaki/uzumaru_background.png");
    animation-delay: 3s, 16s;
    /*bottom: 90px;*/
  }

  .slide-container {
    width: 100%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
   }
   .slide-wrapper {
    display: flex;
    animation: slide-flow 20s infinite linear 1s both;
    position: relative;
   }

   .slide{
    width: 100%;
    height: 100px;
    margin-left: 520px;
   }
  
    .uzu1{
      margin-left: 520px;
      
    }
   
   @keyframes slide-flow {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}
   }