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

.hexagon-container {
  width: 200px;
  height: 200px;
  filter: blur(4px) drop-shadow(10px 10px 20px #020c66);
}
.hexagonImage {
  width: 100%;
  height: 100%;
  background-color: #3548f0;
  clip-path: polygon(
    50% 5%,
    /* 上のトゲ */ 64% 33%,
    /* 凹み1 */ 95% 33%,
    /* 右上のトゲ */ 74% 55%,
    /* 凹み2 */ 85% 88%,
    /* 右下のトゲ */ 50% 75%,
    /* 下の凹み（中央） */ 15% 88%,
    /* 左下のトゲ */ 26% 55%,
    /* 凹み3 */ 5% 33%,
    /* 左上のトゲ */ 36% 33% /* 凹み4 */
  );
}

.hexagonImage:before {
  content: "";
  position: absolute;
  height: 90px;
  width: 90px;
  transform: translate(50px, 50px);
  background-color: #9da6f0;
  filter: drop-shadow(10px 10px 30px #626fe7);
  clip-path: polygon(
    50% 5%,
    /* 上のトゲ */ 64% 33%,
    /* 凹み1 */ 95% 33%,
    /* 右上のトゲ */ 74% 55%,
    /* 凹み2 */ 85% 88%,
    /* 右下のトゲ */ 50% 75%,
    /* 下の凹み（中央） */ 15% 88%,
    /* 左下のトゲ */ 26% 55%,
    /* 凹み3 */ 5% 33%,
    /* 左上のトゲ */ 36% 33% /* 凹み4 */
  );
  z-index: -2;
}
.hexagonImage:after {
  content: "";
  position: absolute;
  z-index: -3; /* 本体の後ろ */
  height: 130px;
  width: 130px;
  /* 本体の位置(40px) + 影のズレ(10px) */
  top: 30px;
  left: 30px;
  background-color: #4e5eec; /* 影の色 */
  filter: blur(10px); /* ここで影の広がりを表現 */
  clip-path: polygon(
    50% 5%,
    64% 33%,
    95% 33%,
    74% 55%,
    85% 88%,
    50% 75%,
    15% 88%,
    26% 55%,
    5% 33%,
    36% 33%
  );
}

/*メディアクエリーPC*/
@media (min-width: 768px) {


  .backposition .position1 {
    position: absolute;
    top: 1%;
    left: 10%;
  }
  .backposition .position2 {
    position: absolute;
    top: 10%;
    right: 0;
  }
  .backposition .position3 {
    position: absolute;
    top: 6%;
    left: 2%;
  }
}
/*メディアクエリーモバイル*/
@media (max-width: 767px) {


  .backposition .position1 {
    position: absolute;
    top: 0;
    left: 2%;
  }
  .backposition .position2 {
    position: absolute;
    top: 80%;
    right: 0;
    z-index: -1;
  }
  .backposition .position3 {
    position: absolute;
    top: 20%;
    left: 2%;
    z-index: -1;
  }
}