update: グローバルナビゲーションにスタイルを適用

src/scss/keyframes/pc/_top-page.scss

@@ -6,3 +6,29 @@
   from { transform: rotate(0deg) scale(1.2); }
   to   { transform: rotate(360deg) scale(1.2); }
 }
+
+@keyframes top-page__show-message {
+  from { width: 0; }
+  to   { width: 250px; }
+}
+@keyframes top-page__hidden-message {
+  from { width: 250px; left: calc(50% - 125px); }
+  to   { width: 0px; left: 50%; }
+}
+
+@keyframes top-page__scale-nav {
+  from { width: 200px; left: calc(50% - 100px); }
+  to   { width: 700px; left: calc(50% - 350px); }
+}
+@keyframes top-page__rotate-nav-1 {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(20deg); }
+}
+@keyframes top-page__rotate-nav-2 {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-20deg); }
+}
+@keyframes top-page__show-nav-text {
+  from { color: transparent; }
+  to   { color: #fff; }
+}

src/scss/modules/pc/_top-page.scss

@@ -7,14 +7,27 @@
     overflow: hidden;
     z-index: 1001;
 
-    &::before {
+    &::after {
       content: ""; display: block;
       width: 100%; height: 100%;
       background-image: url(../images/bg.png);
       background-size: 15px;
+      opacity: 0.5;
+    }
+    &::before {
+      content: ""; display: block;
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background-color: $theme-bg;
       opacity: 0.4;
+      transition: all 0.3s ease 0s;
     }
   }
+  .top-page[data-color="pink"]:before { background-color: $theme-pink; }
+  .top-page[data-color="light-pink"]:before { background-color: $theme-light-pink; }
+  .top-page[data-color="purple"]:before { background-color: $theme-purple; }
+  .top-page[data-color="light-purple"]:before { background-color: $theme-light-purple; }
 
   /*** ring ***/
   .top-page__ring {
@@ -22,6 +35,7 @@
     top: calc(50% - 325px); left: calc(50% - 325px);
     width: 650px; height: 650px;
     border-radius: 50%;
+    z-index: 1;
 
     .wrap {
       position: absolute;
@@ -92,6 +106,7 @@
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0;
+    z-index: 1;
   }
 
   /*** frame ***/
@@ -99,6 +114,7 @@
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
+    z-index: 1;
 
     section {
       position: absolute;
@@ -141,6 +157,71 @@
     }
   }
 
+  /*** globa-nav ***/
+  .top-page__global-nav {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    z-index: 1;
+
+    .nav-box {
+      position: absolute;
+      top: calc(50% - 25px); left: calc(50% - 100px);
+      width: 200px; height: 50px;
+      opacity: 0;
+
+      section {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+
+        a {
+          display: block;
+          position: absolute; top: 0;
+          width: 200px; height: 50px;
+          border-radius: 30px;
+          box-shadow: 0 0 3px rgba(255,255,255,1);
+          font-size: 17px;
+          font-weight: bold;
+          color: transparent;
+          text-align: center;
+          line-height: 50px;
+          transition: all 0.3s ease 0s;
+        }
+        a:hover { transform: scale(1.2); }
+        a:nth-child(1) { left: 0; }
+        a:nth-child(2) { right: 0; }
+      }
+      section:nth-child(1) {
+        a:nth-child(1) { background-color: $theme-pink; }
+        a:nth-child(2) { background-color: $theme-light-pink; }
+      }
+      section:nth-child(2) {
+        a:nth-child(1) { background-color: $theme-light-purple; }
+        a:nth-child(2) { background-color: $theme-purple; }
+      }
+    }
+
+    .message {
+      position: absolute;
+      left: calc(50% - 125px); top: calc(50% - 25px);
+      width: 0px; height: 50px;
+      border-radius: 30px;
+      background-color: $theme-purple;
+      box-shadow: 0 0 3px rgba(255,255,255,1);
+      overflow: hidden;
+
+      h3 {
+        width: 250px; height: 50px;
+        font-size: 15px;
+        color: rgba(255,255,255,0.8);
+        text-align: center;
+        line-height: 50px;
+        transform: translateY(100%);
+      } 
+    }
+  }
+
   .top-page[data-state="start"] {
     /*** ring ***/
     .top-page__ring {
@@ -166,5 +247,37 @@
         div:nth-child(3) { animation: scale0-1 0.4s ease 0.7s forwards; }
       }
     }
+
+    /*** global-nav ***/
+    .top-page__global-nav {
+      .nav-box {
+        animation: fadein 0.1s ease 1.4s forwards;
+        section:nth-child(1) {
+          animation:
+            top-page__scale-nav 0.3s ease 1.4s forwards,
+            top-page__rotate-nav-1 0.5s ease 1.7s forwards;
+          a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
+          a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
+        }
+        section:nth-child(2) {
+          animation:
+            top-page__scale-nav 0.3s ease 1.4s forwards,
+            top-page__rotate-nav-2 0.5s ease 1.7s forwards;
+          a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
+          a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
+        }
+      }
+
+      .message {
+        animation:
+          top-page__show-message 0.4s ease 1s forwards,
+          top-page__hidden-message 0.5s ease 2s forwards;
+        h3 {
+          animation:
+            slide-top 0.5s ease 1.2s forwards,
+            fadeout 0.1s ease 2s forwards;
+        }
+      }
+    }
   }
 }