.container {  
 /* margin-left: 10vw;*/
 /*position: relative;*/
      width: 100%;
      /*height: 100%;*/
      /*display: flex;*/
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      overflow: hidden;
}


.maru {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
}

.c1 {
  width: 11px;
  height: 11px;
  background-color: #ee7800;
  animation: randomMove1 35s infinite linear;
}

.c2 {
  width: 11px;
  height: 11px;
  background-color: #ED1A3D;
  animation: randomMove2 60s infinite linear;
}

.c3 {
  width: 11px;
  height: 11px;
  background-color: #00AEEF;
  animation: randomMove3 25s infinite linear;
}

.c4 {
  width: 11px;
  height: 11px;
  background-color: #00AEEF;
  animation: randomMove4 30s infinite linear;
}

.c5 {
  width: 11px;
  height: 11px;
  background-color: #00AEEF;
  animation: randomMove5 25s infinite linear;
}
.c6 {
  width: 11px;
  height: 11px;
  background-color: #F36C21;
  animation: randomMove6 60s infinite linear;
}
.c7 {
  width: 11px;
  height: 11px;
  background-color: #ED1A3D;
  animation: randomMove7 50s infinite linear;
}
.c8 {
  width: 11px;
  height: 11px;
  background-color: #ee7800;
  animation: randomMove8 30s infinite linear;
}
.c9 {
  width: 11px;
  height: 11px;
  background-color: #ff0000;
  animation: randomMove9 10s infinite linear;
}
.c10 {
  width: 11px;
  height: 11px;
  background-color: #ee7800;
  animation: randomMove10 20s infinite linear;
}

.c11 {
  width: 11px;
  height: 11px;
  background-color: #ee7800;
  animation: randomMove11 60s infinite linear;
}

.c12 {
  width: 11px;
  height: 11px;
  background-color: #0095d9;
  animation: randomMove12 20s infinite linear;
}

.c13 {
  width: 11px;
  height: 11px;
  background-color: #ED1A3D;
  animation: randomMove13 30s infinite linear;
}






/* ランダムな動きを定義 */
@keyframes randomMove1 {
  0% { transform: translate(100px, 250px); }
  30% { transform: translate(410px, 250px); }  
  60% { transform: translate(800px, 250px); }
  65% { transform: translate(800px, 250px); }
  75% { transform: translate(500px, 250px); }
  100% { transform: translate(100px, 250px); }
}

@keyframes randomMove2 {
  0% { transform: translate(450px, 150px); }
  50% { transform: translate(450px, 150px); }  
  100% { transform: translate(450px, 150px); }
}

@keyframes randomMove3 {
  0% { transform: translate(700px, 500px); }
  50% { transform: translate(180px, 180px); }
  75% { transform: translate(300px, 200px); }
  100% { transform: translate(700px, 500px); }
}

@keyframes randomMove4 {
  0% { transform: translate(1300px, 300px); }
  50% { transform: translate(1300px, 300px); }
  100% { transform: translate(1300px, 300px); }
}

@keyframes randomMove5 {
  0% { transform: translate(1550px, 520px); }
  40% { transform: translate(1550px, 150px); }
  60% { transform: translate(1550px, 150px); }
  100% { transform: translate(1550px, 520px); }
}

@keyframes randomMove6 {
  0% { transform: translate(1450px, 450px); }
  50% { transform: translate(1450px, 450px); }
  100% { transform: translate(1450px, 450px); }
}

@keyframes randomMove7 {
  0% { transform: translate(1500px, 600px); }  
  50% { transform: translate(1500px, 600px); }
  100% { transform: translate(1500px, 600px); }
}

@keyframes randomMove8 {
   0% { transform: translate(150px, 500px); } 
 /* 45% { transform: translate(250px, 400px); }      
  55% { transform: translate(250px, 400px); }*/
 100% { transform: translate(150px, 500px); } 
}

@keyframes randomMove9 {
  0% { transform: translate(850px, 700px); }  
  50% { transform: translate(900px, 650px); }
  90% { transform: translate(850px, 700px); }
  100% { transform: translate(850px, 700px); }
}

@keyframes randomMove10 {
  0% { transform: translate(300px, 650px); }
  45% { transform: translate(150px, 650px); }
  55% { transform: translate(150px, 650px); }
  100% { transform: translate(300px, 650px); }
}

@keyframes randomMove11 {
  0% { transform: translate(400px, 800px); }  
  50% { transform: translate(400px, 800px); }  
  100% { transform: translate(400px, 800px); }
}

@keyframes randomMove12 {
  0% { transform: translate(750px, 750px); }
  45% { transform: translate(450px, 550px); }
  55% { transform: translate(450px, 550px); }
  100% { transform: translate(750px, 750px); }
}

@keyframes randomMove13 {
  0% { transform: translate(1200px, 850px); }
  50% { transform: translate(1200px, 850px); }
  75% { transform: translate(1200px, 850px); }
  100% { transform: translate(1200px, 850px); }
}





/* 丸と線ペア */
    .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .pair {
      position: absolute;
    }

    .pair .dot {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;      
      top: 0;
      left: 0;
    }        


    /* シンプルな線 */
    .pair .line {
      position: absolute;
      width: 100px;
      height: 1px;
      background: #fff;      
      top: 4px;
      left: 6px;
      transform-origin: left center;
     } 


    /* 8ペア（異なる色・軌道・速度） */
    .pair1 { animation: pair-move-1 90s linear infinite alternate; }
    .pair1 .dot { background: #40BA8D; box-shadow: 0 0 0px #4fc3f7; }
    .pair1 .line { background: #40BA8D; box-shadow: 0 0 0px #66bb6a; } 

    .pair2 { animation: pair-move-2 75s ease-in-out infinite alternate; }
    .pair2 .dot { background: #ff7043; box-shadow: 0 0 0px #ff7043; }
    .pair2 .line { background: #ff7043; box-shadow: 0 0 0px #ff7043; }

    .pair3 { animation: pair-move-3 84s linear infinite alternate; }
    .pair3 .dot { background: #ab47bc; box-shadow: 0 0 0px #ab47bc; }
    .pair3 .line { background: #ab47bc; box-shadow: 0 0 0px #ab47bc; }

    .pair4 { animation: pair-move-4 60s ease-in-out infinite alternate; }
    .pair4 .dot { background: #66bb6a; box-shadow: 0 0 0px #66bb6a; }
    .pair4 .line { background: #66bb6a; box-shadow: 0 0 0px #66bb6a; }

    .pair5 { animation: pair-move-5 80s linear infinite alternate; }
    .pair5 .dot { background: #ef5350; box-shadow: 0 0 0px #ef5350; }
    .pair5 .line { background: #ef5350; box-shadow: 0 0 0px #ef5350; }

    .pair6 { animation: pair-move-6 60s ease-in-out infinite alternate; }
    .pair6 .dot { background: #26c6da; box-shadow: 0 0 0px #26c6da; }
    .pair6 .line { background: #26c6da; box-shadow: 0 0 0px #26c6da; }

    .pair7 { animation: pair-move-7 50s linear infinite alternate; }
    .pair7 .dot { background: #78909c; box-shadow: 0 0 0px #78909c; }
    .pair7 .line { background: #78909c; box-shadow: 0 0 0px #78909c; }

    .pair8 { animation: pair-move-8 70s ease-in-out infinite alternate; }
    .pair8 .dot { background: #ab47bc; box-shadow: 0 0 0px #ab47bc; }
    .pair8 .line { background: #ab47bc; box-shadow: 0 0 0px #ab47bc; }






    /* 各ペアのアニメーション軌道 */
    @keyframes pair-move-1 { 
      0%{transform:translate(5vw,10vh)rotate(0deg);}
      50%{transform:translate(5vw,10vh)rotate(0deg);}
      100%{transform:translate(5vw,10vh)rotate(0deg);} 
    }
    @keyframes pair-move-2 { 0%{transform:translate(85vw,25vh)rotate(15deg);}50%{transform:translate(15vw,70vh)rotate(-35deg);}100%{transform:translate(65vw,15vh)rotate(30deg);} }
    @keyframes pair-move-3 { 0%{transform:translate(45vw,90vh)rotate(-10deg);}50%{transform:translate(20vw,25vh)rotate(45deg);}100%{transform:translate(75vw,55vh)rotate(-20deg);} }
    @keyframes pair-move-4 { 0%{transform:translate(30vw,20vh)rotate(25deg);}50%{transform:translate(80vw,75vh)rotate(-30deg);}100%{transform:translate(10vw,50vh)rotate(15deg);} }
    @keyframes pair-move-5 { 0%{transform:translate(70vw,80vh)rotate(-15deg);}50%{transform:translate(35vw,15vh)rotate(40deg);}100%{transform:translate(85vw,90vh)rotate(-25deg);} }
    @keyframes pair-move-6 { 0%{transform:translate(55vw,10vh)rotate(20deg);}50%{transform:translate(5vw,85vh)rotate(-45deg);}100%{transform:translate(75vw,35vh)rotate(35deg);} }
    @keyframes pair-move-7 { 0%{transform:translate(20vw,60vh)rotate(-5deg);}50%{transform:translate(80vw,20vh)rotate(30deg);}100%{transform:translate(40vw,90vh)rotate(-15deg);} }
    @keyframes pair-move-8 { 0%{transform:translate(65vw,5vh)rotate(10deg);}50%{transform:translate(25vw,80vh)rotate(-40deg);}100%{transform:translate(90vw,45vh)rotate(25deg);} }


    /*両端まる*/
    .pairr .dotr {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      box-shadow: 0 0 10px;
      top: 6px;
      left: 11px;
    }
    .pairr .line-container {
      position: absolute;
      top: 4px;
      left: 14px;
      transform-origin: left center;
    }    
    .pairr .liner {
      position: absolute;
      width: 98px;
      height: 1px;
      box-shadow: 0 0 8px;
      top: 5px;
      left: 0;
    }
    .pairr .end-dot {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      box-shadow: 0 0 10px;
      top: 2px;
      left: 95px;
    }



    /* ペア1：両丸 緑*/
    .pair1r { animation: pair-move-1r 30s linear infinite alternate; }
    .pair1r .dotr { background: #40BA8D; box-shadow: 0 0 0px #4fc3f7; }
    .pair1r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffca28; }
    .pair1r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffca28; }


    /* ペア2： */
    .pair2r { animation: pair-move-2r 20s ease-in-out infinite alternate; }
    .pair2r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ff7043; }
    .pair2r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffeb3b; }
    .pair2r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffeb3b; }

    /* ペア3： */
    .pair3r { animation: pair-move-3r 20s linear infinite alternate; }
    .pair3r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ab47bc; }
    .pair3r .liner { background: #40BA8D; box-shadow: 0 0 0px #66bb6a; }
    .pair3r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #66bb6a; }

    /* ペア4：緑 */
    .pair4r { animation: pair-move-4r 110s ease-in-out infinite alternate; }
    .pair4r .dotr { background: #40BA8D; box-shadow: 0 0 0px #66bb6a; }
    .pair4r .liner { background: #40BA8D; box-shadow: 0 0 0px #42a5f5; }
    .pair4r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #42a5f5; }

    /* ペア5： */
    .pair5r { animation: pair-move-5r 10s linear infinite alternate; }
    .pair5r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair5r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair5r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }

    /* ペア6： */
    .pair6r { animation: pair-move-6r 30s linear infinite alternate; }
    .pair6r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair6r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair6r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }

    /* ペア7： */
    .pair7r { animation: pair-move-7r 30s linear infinite alternate; }
    .pair7r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair7r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair7r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }

    /* ペア8： */
    .pair8r { animation: pair-move-8r 30s linear infinite alternate; }
    .pair8r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair8r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair8r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }

     /* ペア9： */
    .pair9r { animation: pair-move-9r 30s linear infinite alternate; }
    .pair9r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair9r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair9r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }



 /* ペア10： */
    .pair10r { animation: pair-move-10r 30s linear infinite alternate; }
    .pair10r .dotr { background: #40BA8D; box-shadow: 0 0 0px #ef5350; }
    .pair10r .liner { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }
    .pair10r .end-dot { background: #40BA8D; box-shadow: 0 0 0px #ffd54f; }






    /* 各ペアの軌道 */
    @keyframes pair-move-1r {
      0% { transform: translate(-1vw, 110vh) rotate(50deg); }
      50% { transform: translate(-1vw, 110vh) rotate(50deg); }
      100% { transform: translate(-1vw, 110vh) rotate(50deg); }
    }
    @keyframes pair-move-2r {
      0% { transform: translate(18vw, 115vh) rotate(15deg); }
      50% { transform: translate(18vw, 115vh) rotate(15deg); }
      100% { transform: translate(18vw, 115vh) rotate(15deg); }
    }
    @keyframes pair-move-3r {
      0% { transform: translate(3vw, 110vh) rotate(70deg); }          
      55% { transform: translate(3vw, 110vh) rotate(70deg); } 
      100% { transform: translate(3vw, 110vh) rotate(70deg); }
    }
    @keyframes pair-move-4r {
      0% { transform: translate(10vw, 60vh) rotate(-5deg); }
      50% { transform: translate(10vw, 60vh) rotate(-5deg); }
      100% { transform: translate(10vw, 60vh) rotate(-5deg); }
    }
    @keyframes pair-move-5r {
      0% { transform: translate(7vw, 80vh) rotate(-10deg); }
      50% { transform: translate(7vw, 80vh) rotate(-10deg); }
      100% { transform: translate(7vw, 80vh) rotate(-10deg); }
    }

    @keyframes pair-move-6r {
      0% { transform: translate(15vw, 100vh) rotate(25deg); }
      50% { transform: translate(35vw, 130vh) rotate(25deg); }
      100% { transform: translate(15vw, 100vh) rotate(25deg); }
    }

    @keyframes pair-move-7r {
      0% { transform: translate(50vw, -65vh) rotate(-60deg); }
      50% { transform: translate(50vw, -65vh) rotate(-60deg); }      
      100% { transform: translate(50vw, -65vh) rotate(-60deg); }
    }
    @keyframes pair-move-8r {
      0% { transform: translate(60vw, 15vh) rotate(-35deg); }
      45% { transform: translate(60vw, 15vh) rotate(-35deg); }
      55% { transform: translate(60vw, 15vh) rotate(-35deg); }      
      100% { transform: translate(60vw, 15vh) rotate(-35deg); }
    }
    @keyframes pair-move-9r {
      0% { transform: translate(40vw, 190vh) rotate(75deg); }
      45% { transform: translate(40vw, 190vh) rotate(75deg); }
      55% { transform: translate(40vw, 190vh) rotate(75deg); }      
      100% { transform: translate(40vw, 190vh) rotate(75deg); }
    }
    @keyframes pair-move-10r {
      0% { transform: translate(35vw, 35vh) rotate(-70deg); }
      45% { transform: translate(35vw, 35vh) rotate(-70deg); }
      55% { transform: translate(35vw, 35vh) rotate(-70deg); }      
      100% { transform: translate(35vw, 35vh) rotate(-70deg); }
    }






    /*片方三角*/
    .pairy .start-dot {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      box-shadow: 0 0 10px;
      top: 4px;
      left: 11px;
    }
    
    .pairy .line-containery {
      position: absolute;
      top: 5px;
      left: 18px;
      transform-origin: left center;
    }
    
    .pairy .liney {
      position: absolute;
      width: 115px;
      height: 1px;
      box-shadow: 0 0 8px;
      top: 5px;
      left: 0;
    }
    
    .pairy .arrow {
      position: absolute;
      width: 8px;
      height: 8px;
      top: 2px;
      left: 110px;
      clip-path: polygon(20% 0%, 80% 50%, 20% 100%);
      box-shadow: 0 0 10px;
    }



/*片方三角ペア4*/
    .pairy4 .start-dot {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      box-shadow: 0 0 10px;
      top: 4px;
      left: 11px;
    }
    
    .pairy4 .line-containery {
      position: absolute;
      top: 5px;
      left: 18px;
      transform-origin: left center;
    }
    
    .pairy4 .liney {
      position: absolute;
      width: 176px;
      height: 1px;
      box-shadow: 0 0 8px;
      top: 5px;
      left: 0;
    }
    
    .pairy4 .arrow {
      position: absolute;
      width: 8px;
      height: 8px;
      top: 2px;
      left: 170px;
      clip-path: polygon(20% 0%, 80% 50%, 20% 100%);
      box-shadow: 0 0 10px;
    }




    /* ペア1：三角赤 */
    .pair1y { animation: pair-move-1y 30s linear infinite alternate; }
    .pair1y .start-dot { background: #ED1A3D; box-shadow: 0 0 0px #4fc3f7; }
    .pair1y .liney { background: #ED1A3D; box-shadow: 0 0 0px #ffca28; }
    .pair1y .arrow { background: #ED1A3D; box-shadow: 0 0 0px #ffca28; }

    /* ペア2：三角赤 */
    .pair2y { animation: pair-move-2y 20s ease-in-out infinite alternate; }
    .pair2y .start-dot { background: #ED1A3D; box-shadow: 0 0 0px #ff7043; }
    .pair2y .liney { background: #ED1A3D; box-shadow: 0 0 0px #ffeb3b; }
    .pair2y .arrow { background: #ED1A3D; box-shadow: 0 0 0px #ffeb3b; }

    /* ペア3： */
    .pair3y { animation: pair-move-3y 60s linear infinite alternate; }
    .pair3y .start-dot { background: #ED1A3D; box-shadow: 0 0 0px #ab47bc; }
    .pair3y .liney { background: #ED1A3D; box-shadow: 0 0 0px #66bb6a; }
    .pair3y .arrow { background: #ED1A3D; box-shadow: 0 0 0px #66bb6a; }

    /* ペア4： */
    .pair4y { animation: pair-move-4y 60s ease-in-out infinite alternate; }
    .pair4y .start-dot { background: #ED1A3D; box-shadow: 0 0 0px #66bb6a; }
    .pair4y .liney { background: #ED1A3D; box-shadow: 0 0 0px #42a5f5; }
    .pair4y .arrow { background: #ED1A3D; box-shadow: 0 0 0px #42a5f5; }


    @keyframes pair-move-1y {
      0% { transform: translate(25vw, 5vh) rotate(-15deg); }
      50% { transform: translate(25vw, 5vh) rotate(-15deg); }
      100% { transform: translate(25vw, 5vh) rotate(-15deg); }
    }
    @keyframes pair-move-2y {
      0% { transform: translate(60vw, 135vh) rotate(60deg); }
      50% { transform: translate(60vw, 135vh) rotate(60deg); }
      100% { transform: translate(60vw, 135vh) rotate(60deg); }
    }    
    @keyframes pair-move-3y {
      0% { transform: translate(-20vw, 70vh) rotate(-160deg); }
      50% { transform: translate(-20vw, 70vh) rotate(-160deg); }
      100% { transform: translate(-20vw, 70vh) rotate(-160deg); }
    }
    @keyframes pair-move-4y {
      0% { transform: translate(-35vw, 45vh) rotate(-125deg); }
      50% { transform: translate(-35vw, 45vh) rotate(-125deg); }
      100% { transform: translate(-35vw, 45vh) rotate(-125deg); }
    }