various fixes

private/scss/modules/_search_contest.scss

@@ -0,0 +1,189 @@
+.search__contest__item {
+  display: block;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  z-index: 100;
+  &.data_id_0 {
+    left: 100%;
+    margin-left: 15px;
+    top: 60%;
+    @media screen and (max-width: $medium_breakpoint) {
+      margin-left: -15px;
+    }
+  }
+  &.data_id_1 {
+    right: 100%;
+    margin-right: 15px;
+    top: 30%;
+    .position {
+      right: auto;
+      left: 90%;
+    }
+    @media screen and (max-width: $medium_breakpoint) {
+      margin-right: -15px;
+    }
+  }
+  &.data_id_2 {
+    left: 100%;
+    margin-left: 15px;
+    top: 40%;
+    @media screen and (max-width: $medium_breakpoint) {
+      margin-left: -15px;
+    }
+  }
+  &.data_id_4 {
+    left: 100%;
+    margin-left: 15px;
+    top: 80%;
+    @media screen and (max-width: $medium_breakpoint) {
+      margin-left: -15px;
+    }
+  }
+  &.data_id_5 {
+    right: 100%;
+    margin-right: 15px;
+    top: 20%;
+    .position {
+      right: auto;
+      left: 90%;
+    }
+    @media screen and (max-width: $medium_breakpoint) {
+      margin-right: -15px;
+    }
+  }
+}
+
+.letter {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  line-height: 50px;
+  font-size: 22px;
+  font-weight: 900;
+  color: $white;
+  z-index: 5;
+}
+
+.position {
+  display: block;
+  position: absolute;
+  top: 90%;
+  right: 90%;
+  font-size: 12px;
+  color: $dark_gray;
+}
+
+.flower {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  z-index: 2;
+}
+
+.flower:after {
+  position: absolute;
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: $red;
+  border-radius: 50%;
+  width: 30%;
+  height: 30%;
+  margin: auto;
+  .data_id_1 & {
+    background: $blue;
+  }
+  .data_id_2 & {
+    background: $yellow;
+  }
+  .data_id_3 & {
+    background: $violet;
+  }
+  .data_id_4 & {
+    background: $lime;
+  }
+}
+
+.flower .petal {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform: rotate(72deg);
+}
+
+.flower .petal::before, .flower .petal::after {
+  content: '';
+  position: absolute;
+  width: 60%;
+  height: 60%;
+  background: $red;
+  border-radius: 0 100px;
+  top: 50%;
+  left: 50%;
+  margin-left: -20%;
+  margin-top: -20%;
+  transform-origin: 33% 33%;
+  .data_id_1 & {
+    background: $blue;
+  }
+  .data_id_2 & {
+    background: $yellow;
+  }
+  .data_id_3 & {
+    background: $violet;
+  }
+  .data_id_4 & {
+    background: $lime;
+  }
+}
+
+.flower .petal::after {
+  transform: rotate(36deg)
+}
+
+.flower.petal5 .petal {
+  transform: rotate(144deg);
+}
+
+.flower.petal5 .petal:after {
+  transform: rotate(-72deg);
+}
+
+.flower.petal5 > .petal:after {
+  content: none;
+}
+
+.flower.petal6 .petal {
+  transform: rotate(120deg);
+}
+
+.flower.petal6 .petal:after {
+  transform: rotate(60deg);
+}
+
+.flower.petal8 .petal {
+  transform: rotate(90deg);
+}
+
+.flower.petal8 .petal:after {
+  transform: rotate(45deg);
+  width: 56%;
+  height: 56%;
+}
+
+.flower.roundpetal .petal:before, .flower.roundpetal .petal:after {
+  width: 30%;
+  margin-left: -15%;
+  margin-top: 0;
+  top: 0;
+  height: 50%;
+  border-radius: 50% 50% 0 0;
+  transform-origin: 50% 100%;
+}