diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
index 590d050..648f077 100644
--- a/src/scss/modules/pc/_top-page.scss
+++ b/src/scss/modules/pc/_top-page.scss
@@ -257,6 +257,56 @@
     }
   }
 
+  /*** sns ***/
+  .top-page__sns {
+    position: absolute;
+    top: calc(50% - 75px); left: 0px;
+    width: 50px; height: 150px;
+    background-color: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,0.4);
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    overflow: hidden;
+    transform: translateX(calc(-100% + -5px));
+    z-index: 1;
+
+    a {
+      position: relative;
+      display: block;
+      width: 50px; height: 50px;
+
+      &::before {
+        position: absolute;
+        top: 0; left: 0;
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        transform: translateX(-100%);
+        transition: all 0.25s ease 0s;
+      }
+
+      i {
+        position: absolute;
+        top: 0; left: 0;
+        width: 50px; height: 50px;
+        font-size: 25px;
+        line-height: 50px;
+        text-align: center;
+        color: $theme-light-purple;
+      }
+    }
+    a:hover:before { transform: translateX(0); }
+    a:nth-child(1) {
+      &::before { background-color: $theme-mint; }
+    }
+    a:nth-child(2) {
+      &::before { background-color: $theme-gray; }
+    }
+    a:nth-child(3) {
+      i { font-size: 22px; }
+      &::before { background-color: $theme-light-pink; }
+    }
+  }
+
   .top-page[data-state="start"] {
     /*** ring ***/
     .top-page__ring {
@@ -317,5 +367,10 @@
         }
       }
     }
+
+    /*** sns ***/
+    .top-page__sns {
+      animation: slide-right 0.4s ease 3s forwards;
+    }
   }
 }