diff --git a/public/index.html b/public/index.html
index e6f8e13..1d58d25 100644
--- a/public/index.html
+++ b/public/index.html
@@ -235,7 +235,7 @@
         </div>
       </section>
       <!--********************************** calling ***************************************-->
-      <section class="calling" data-state="start">
+      <section class="calling">
         <section class="calling__bg">
           <div></div><div></div><div></div><div></div>
           <div></div><div></div><div></div><div></div>
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index b5d1ad1..8f01662 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -4,6 +4,8 @@ const load_view = document.querySelector('.load-view')
 const load_view_body_close = document.querySelector('.load-view__body__close')
 const gab_animation = document.querySelector('.gab-animation')
 const gab_animation__end_block = document.querySelector('.gab-animation__close .end-block')
+const calling = document.querySelector('.calling')
+const calling__end = document.querySelector('.calling__end')
 
 /**
  * 画像のプリロード
@@ -82,6 +84,20 @@ export const startGabAnimation = () => {
     if(e.animationName === 'gab-animation__close'
       || e.animationName === 'gab-animation__close__sp') {
       root.removeChild(gab_animation)
+      startCalling()
+    }
+  })
+}
+
+/**
+ * callingの開始
+ */
+export const startCalling = () => {
+  calling.setAttribute('data-state', 'start')
+
+  calling__end.addEventListener('animationend', e => {
+    if(e.animationName === 'calling__end') {
+      root.removeChild(calling)
     }
   })
 }
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
index 3770571..b934132 100644
--- a/src/scss/modules/pc/_calling.scss
+++ b/src/scss/modules/pc/_calling.scss
@@ -6,7 +6,7 @@
     min-width: $min-width; min-height: $min-height;
     background-color: $theme-purple;
     overflow: hidden;
-    z-index: 1001;
+    z-index: 998;
   }
 
   /*** bg ***/