update: callingの終了要素にスタイルを適用

src/scss/keyframes/pc/_calling.scss

@@ -51,3 +51,8 @@
   85% { transform: scale(1.1); opacity: 1; }
   100% { transform: scale(1); opacity: 1; }
 }
+
+@keyframes calling__end {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0%); }
+}

src/scss/modules/pc/_calling.scss

@@ -333,6 +333,25 @@
     }
   }
 
+  /*** end ***/
+  .calling__end {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    z-index: 6;
+
+    div {
+      width: 100%; height: 10%;
+      overflow: hidden;
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-color: $theme-mint;
+        transform: translateY(-100%);
+      }
+    }
+  }
+
   .calling[data-state="start"] {
     /*** bg ***/
     .calling__bg {
@@ -512,5 +531,19 @@
         }
       }
     }
+
+    /*** end ***/
+    .calling__end {
+      div:nth-child(1):after  { animation: slide-bottom 0.3s ease 12.6s forwards; }
+      div:nth-child(2):after  { animation: slide-bottom 0.3s ease 12.65s forwards; }
+      div:nth-child(3):after  { animation: slide-bottom 0.3s ease 12.75s forwards; }
+      div:nth-child(4):after  { animation: slide-bottom 0.3s ease 12.8s forwards; }
+      div:nth-child(5):after  { animation: slide-bottom 0.3s ease 12.85s forwards; }
+      div:nth-child(6):after  { animation: slide-bottom 0.3s ease 12.9s forwards; }
+      div:nth-child(7):after  { animation: slide-bottom 0.3s ease 12.95s forwards; }
+      div:nth-child(8):after  { animation: slide-bottom 0.3s ease 13.0s forwards; }
+      div:nth-child(9):after  { animation: slide-bottom 0.3s ease 13.05s forwards; }
+      div:nth-child(10):after { animation: calling__end 0.3s ease 13.1s forwards; }
+    }
   }
 }