/*ボール*/

  .ball-1{
    position: absolute;
    left: 100px;
    right: 0;
    top: 50px;
    bottom: 0;
    width:100px;
    height:100px;
    border-radius: 50%;
    background:rgb(255, 255, 255);
    opacity:0.6;
    animation: bound-anim1 1s infinite;
  }


  @keyframes bound-anim1 {
    0%,100% {top: 140px;transform: scale(1);}
    30% {top: 40px; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 140px;transform: scale(1.15,0.9);}
  }
  
  /*影*/
  .shadow1{
    position: absolute;
    left: 120px;
    right: 0;
    top:250px;
    width: 60px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    filter: blur(6px);
    opacity:0.9;
    animation: shadow-anim1 1s infinite;
  }
  
  @keyframes shadow-anim1 {
    0%,100%  {transform: scale(1);filter: blur(4px);}
    30% {transform: scale(1.6,1);filter: blur(8px);}
  }


  .ball-2{
    position: absolute;
    left: 400px;
    right: 0;
    top: 50px;
    bottom: 0;
    width:100px;
    height:100px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    background:rgb(255, 255, 255);
    opacity:0.6;
    animation: bound-anim2 1s infinite;
  }


  @keyframes bound-anim2 {
    0%,100% {top: 140px;transform: scale(1);}
    30% {top: 40px; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 140px;transform: scale(1.15,0.9);}
  }
  
  /*影*/
  .shadow2{
    position: absolute;
    left: 420px;
    right: 0;
    top:250px;
    width: 60px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    filter: blur(6px);
    opacity:0.9;
    animation: shadow-anim2 1s infinite;
  }
  
  @keyframes shadow-anim2 {
    0%,100%  {transform: scale(1);filter: blur(4px);}
    30% {transform: scale(1.6,1);filter: blur(8px);}
  }

  .ball-3{
    position: absolute;
    left: 700px;
    right: 0;
    top: 50px;
    bottom: 0;
    width:100px;
    height:100px;
    background:rgb(255, 255, 255);
    opacity:0.6;
    animation: bound-anim3 1s infinite;
  }


  @keyframes bound-anim3 {
    0%,100% {top: 140px;transform: scale(1);}
    30% {top: 40px; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 140px;transform: scale(1.15,0.9);}
  }
  
  /*影*/
  .shadow3{
    position: absolute;
    left: 720px;
    right: 0;
    top:250px;
    width: 60px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    filter: blur(6px);
    opacity:0.9;
    animation: shadow-anim3 1s infinite;
  }
  
  @keyframes shadow-anim3 {
    0%,100%  {transform: scale(1);filter: blur(4px);}
    30% {transform: scale(1.6,1);filter: blur(8px);}
  }


/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
  .ball-1{
    left: 50px;
    width: 10%;
    height: 15%;
  }
   .shadow1{
    left: 40px;
  }

  .ball-2{
    left: 200px;
    width:10%;
    height:15%;
  }
  
  .shadow2{
    left: 190px;
  }

  .ball-3{
    left: 350px;
    width:10%;
    height:15%;
  }

  .shadow3{
    left: 345px;
  }


}