diff --git a/src/scss/modules/pc/load-view.scss b/src/scss/modules/pc/load-view.scss
index aead48c..696a746 100644
--- a/src/scss/modules/pc/load-view.scss
+++ b/src/scss/modules/pc/load-view.scss
@@ -680,6 +680,59 @@
         .arrow:nth-child(2) { div { width: 360px; } }
       }
     }
+
+    /**
+     * ribbons
+     */
+    .ribbons {
+      position: absolute;
+      top: 80px; left: 80px;
+      width: calc(100% - 160px); height: calc(100% - 160px);
+      z-index: 5;
+
+      .ribbon {
+        position: absolute;
+        div {
+          position: absolute;
+          overflow: hidden;
+          &::after {
+            content: ""; display: block; position: absolute;
+            width: 100%; height: 100%; top: 0; left: 0;
+          }
+        }
+        div:nth-child(1),
+        div:nth-child(3) { left: 0; width: 100%; height: 8px; }
+        div:nth-child(2),
+        div:nth-child(4) { top: 0; width: 8px; height: 100%; }
+        div:nth-child(1) {
+          top: 0;
+          &::after { transform: translateX(100%); }
+        }
+        div:nth-child(2) {
+          left: 0;
+          &::after { transform: translateY(-100%); }
+        }
+        div:nth-child(3) {
+          bottom: 0;
+          &::after { transform: translateX(-100%); }
+        }
+        div:nth-child(4) {
+          right: 0;
+          &::after { transform: translateY(100%); }
+        }
+      }
+
+      .ribbon:nth-child(1) {
+        top: 0; left: 0;
+        width: calc(100% - 20px); height: calc(100% - 20px);
+        div { &::after { background-color: $theme-light-purple; } }
+      }
+      .ribbon:nth-child(2) {
+        bottom: 0px; right: 0px;
+        width: calc(100% - 20px); height: calc(100% - 20px);
+        div { &::after { background-color: #C27F91; } }
+      }
+    }
   }
 
   #load-view[data-state="fin"] {