.circleImage {
  height: 140px;
  width: 140px;
  border-radius: 70px;
  background-color: #fceb05;
  filter: blur(4px);
  box-shadow: 10px 10px 10px 1px #c5b803f3;
}
.circleImage:before {
  content: "";
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  transform: translate(20px, 20px);

  background-color: #fffab8;
  filter: blur(4px);
  box-shadow: 10px 10px 10px 20px #fdf36a;
}

.squareImage {
  height: 130px;
  width: 130px;
  background-color: #12f34b;
  filter: blur(4px);
  box-shadow: 10px 10px 10px 1px #039132f6;
}
.squareImage:before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  transform: translate(20px, 20px);
  background-color: #7dfd6d;
  filter: blur(4px);
  box-shadow: 10px 10px 10px 20px #36fc67;
}

/*-三角--*/
.triangle-container {
  width: 150px;
  height: 150px;
  filter: blur(4px) drop-shadow(10px 10px 20px #020c66);
  z-index: -2;
}
.triangleImage {
  width: 100%;
  height: 100%;
  background-color: #3548f0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.triangleImage:before {
  content: "";
  position: absolute;
  height: 70px;
  width: 70px;
  transform: translate(30px, 44px);
  background-color: #9da6f0;
  filter: drop-shadow(10px 10px 30px #626fe7);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/*--ハート---*/
.heart-container {
  width: 200px;
  height: 200px;
  filter: blur(4px) drop-shadow(10px 10px 10px #aa2605f6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -2;
}

.heartImage {
  width: 100%;
  height: 100%;
  background-color: #fd5227;
  /* ハートの形に切り抜く */
  clip-path: path(
    "M100,70 C100,30 175,35 170,85 C165,120 120,145 100,160 C80,145 35,120 30,85 C25,35 100,30 100,70 Z"
  );
}
.heartImage:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 150px;
  transform: translate(-5px, -5px);
  background-color: #fd714e;
  filter: blur(4px);
  clip-path: path(
    "M100,80 C100,55 145,58 142,88 C139,110 112,125 100,135 C88,125 61,110 58,88 C55,58 100,55 100,80 Z"
  );
}
.heartImage:after {
  content: "";
  position: absolute;
  height: 120px;
  width: 120px;
  transform: translate(-10px, -10px);
  background-color: #fdb686;
  filter: blur(4px);
  clip-path: path(
    "M100,90 C100,74 128,76 126,95 C124,109 108,118 100,124 C92,118 76,109 74,95 C72,76 100,74 100,90 Z"
  );
}

.backposition {
  width: 100%;
  height: 100%;
  z-index: -1;
}
/*メディアクエリーPC*/
@media (min-width: 768px) {
  .backposition .position1 {
    position: absolute;
    top: 1%;
    left: 2%;
  }
  .backposition .position2 {
    position: absolute;
    top: 3%;
    right: 1%;
  }
  .backposition .position3 {
    position: absolute;
    top: 5%;
    right: 2%;
  }
  .backposition .position4 {
    position: absolute;
    top: 6%;
    left: 1%;
  }
}
/*メディアクエリーモバイル*/
@media (max-width: 767px) {
  .backposition .position1 {
    position: absolute;
    top: 0;
    right: 2%;
  }
  .backposition .position2 {
    position: absolute;
    top: 2%;
    left: 0;
  }
  .backposition .position3 {
    position: absolute;
    top: 19%;
    right: 2%;
  }
  .backposition .position4 {
    position: absolute;
    top: 16%;
    left: 2%;
  }
}