From 3aec57673fc063f26b1aa17143a1a3d06a90694a Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Wed, 18 Apr 2018 14:45:51 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=83=88=E3=83=83=E3=83=97=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=95=E3=83=AC=E3=83=BC=E3=83=A0?=
 =?UTF-8?q?=E3=81=AB=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=A9?=
 =?UTF-8?q?=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 | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
index c51cc4a..7d4bebd 100644
--- a/src/scss/modules/pc/_top-page.scss
+++ b/src/scss/modules/pc/_top-page.scss
@@ -94,6 +94,53 @@
     opacity: 0;
   }
 
+  /*** frame ***/
+  .top-page__frame {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    section {
+      position: absolute;
+      width: 45px; height: 45px;
+
+      div {
+        position: absolute;
+        background-color: $theme-purple;
+        border-radius: 3px;
+        opacity: 0.8;
+        transform: scale(0);
+      }
+      div:nth-child(1),
+      div:nth-child(3) { width: 12px; height: 12px; }
+      div:nth-child(2) { width: 25px; height: 25px; }
+    }
+    section:nth-child(1) {
+      top: 20px; left: 20px;
+      div:nth-child(1) { top: 0; right: 0; }
+      div:nth-child(2) { top: 0; left: 0; }
+      div:nth-child(3) { bottom: 0; left: 0; }
+    }
+    section:nth-child(2) {
+      top: 20px; right: 20px;
+      div:nth-child(1) { top: 0; left: 0; }
+      div:nth-child(2) { top: 0; right: 0; }
+      div:nth-child(3) { bottom: 0; right: 0; }
+    }
+    section:nth-child(3) {
+      bottom: 20px; left: 20px;
+      div:nth-child(1) { top: 0; left: 0; }
+      div:nth-child(2) { bottom: 0; left: 0; }
+      div:nth-child(3) { bottom: 0; right: 0; }
+    }
+    section:nth-child(4) {
+      bottom: 20px; right: 20px;
+      div:nth-child(1) { top: 0; right: 0; }
+      div:nth-child(2) { bottom: 0; right: 0; }
+      div:nth-child(3) { bottom: 0; left: 0; }
+    }
+  }
+
   .top-page[data-state="start"] {
     /*** ring ***/
     .top-page__ring {
@@ -110,5 +157,14 @@
         scale0-1 0.4s ease 0.2s forwards,
         fadein 0.4s ease 0.2s forwards;
     }
+
+    /*** frame ***/
+    .top-page__frame {
+      section {
+        div:nth-child(2) { animation: scale0-1 0.4s ease 0.6s forwards; }
+        div:nth-child(1), 
+        div:nth-child(3) { animation: scale0-1 0.4s ease 0.7s forwards; }
+      }
+    }
   }
 }