body {
            width: 70%;
            margin: 200px auto 200px auto;
      }
      
      div {
            position: relative;
      }
      
      /* 4種類の円をデザイン */
      .ball1 {
            width: 40%;
            padding-top: 40%;
            background-color: #f00;
            opacity: 0.5;
            border-radius: 50%;
      }
      
      .ball2 {
            width: 70%;
            padding-top: 70%;
            background-color: #0f0;
            opacity: 0.5;
            border-radius: 50%;
            top: -150px;
            left: 30%;
      }
      
      .ball3 {
            width: 80%;
            padding-top: 80%;
            border-radius: 50%;
            top: -200px;
            background-color: #00f;
            opacity: 0.5;
      }
      
      .ball4 {
            width: 60%;
            padding-top: 60%;
            border-radius: 50%;
            top: -100px;
            left: 40%;
            background-color: #a0f;
            opacity: 0.5;
      }