@charset "UTF-8";

body {
	/*position:relative;*/
    margin: 0;
    /*background:#f1f2ed;*/
    background:#00687D;				/*#005b10-#007C8A*/
    height: 100vh;
    overflow: hidden;
    opacity:0.8;
  }
body::before{  
    content: "";
  	position: absolute;
  	inset: 0;										/*top,right,bottom,left=0*/
  	background-color: rgba(38,252,0,0.1);		/*over-color*/
	/*background-color: rgba(42,140,0,0.1);*/		/*over-color*/
  	pointer-events: none;
  }
div{
    /*position: absolute;*/
	top:240px;
	left:530px;
}

.trasition {
    position: absolute; /* 座標指定のため必須 */
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid #333;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    transition: left 0.3s ease, top 0.3s ease; /* 移動を滑らかに */
  }

.ripple {
    position: absolute;
    border-radius: 50%;
    /*border: 2px solid rgba(255, 255, 255, 0.7);*/
        border: 2px solid rgba(127, 0, 255, 0.7);
    transform: scale(0);
    animation: rippleAnim 1.5s ease-out forwards;
    pointer-events: none;
  }
  
  .ripple::before {
    content: "";
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: linear-gradient(45deg, red, blue);
    z-index: -1;
  }
  
    @keyframes rippleAnim {
    to {
      transform: scale(8);
      opacity: 0;
    }
  }
  
  .ripple2 {
    position: absolute;
    border-radius: 50%;
    /*border: 2px solid rgba(255, 255, 255, 0.7);*/
        border: 2px solid rgba(127, 0, 255, 0.7);
    transform: scale(0);
    animation: rippleAnim2 1.5s ease-out forwards;
    pointer-events: none;
  }
  
  .ripple2::before {
    content: "";
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: linear-gradient(45deg, red, blue);
    z-index: -1;
  }

  @keyframes rippleAnim2 {
    to {
      transform: scale(6);
      opacity: 0;
    }
  }

.drop {
    position: absolute;
    width: 8px;
    height: 8px;
    background:red;
    border-radius: 50%;
    animation: dropAnim 0.4s ease-in forwards;
    pointer-events: none;
  }

@keyframes dropAnim {
    0% { transform: translateY(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0); opacity: 0; }
  }