From 3e998d98588468bb74ccb79a649630aa07a7fddb Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Wed, 18 Apr 2018 23:15:38 +0900
Subject: [PATCH] =?UTF-8?q?update:=20SNS=E3=83=90=E3=83=BC=E3=81=AB?=
 =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/modules/pc/_top-page.scss | 55 ++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

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;
+    }
   }
 }