diff --git a/src/scss/keyframes/sp/_end-animation.scss b/src/scss/keyframes/sp/_end-animation.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/modules/sp/_end-animation.scss b/src/scss/modules/sp/_end-animation.scss
new file mode 100644
index 0000000..18129c2
--- /dev/null
+++ b/src/scss/modules/sp/_end-animation.scss
@@ -0,0 +1,194 @@
+@include tablet-layout {
+  .end-animation {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    overflow: hidden;
+    z-index: 997;
+  }
+
+  /*** end-roll ***/
+  .end-animation__end-roll {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-mint;
+
+    .text-balls {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+
+      .text-ball {
+        position: absolute;
+        width: 180px; height: 180px;
+        border-radius: 50%;
+        opacity: 0;
+
+        .inner {
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-color: #F0EFE7;
+          border-radius: 50%;
+          border: solid 10px #F0EFE7;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          .bg { width: 100%; height: 100%; }
+          .bg div {
+            width: 100%; height: 10%;
+            background-color: #EBC1C7;
+            margin-bottom: 10%;
+            transform: translateX(-100%);
+          }
+
+          &::after {
+            content: ""; display: block;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background-size: 60%;
+            background-position: center;
+            background-repeat: no-repeat;
+            opacity: 0;
+          }
+        }
+      }
+      .text-ball:nth-child(1) {
+        top: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
+      }
+      .text-ball:nth-child(2) {
+        top: 50px; right: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
+      }
+      .text-ball:nth-child(3) {
+        bottom: 50px; left: 50px;
+        .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
+      }
+    }
+
+    .paints {
+      position: absolute;
+      top: calc(50% - 60px); left: calc(50% - 60px);
+      width: 120px; height: 120px;
+
+      div {
+        float: left;
+        width: calc(50% - 5px); height: calc(50% - 5px);
+        margin-right: 10px;
+        border-radius: 50%;
+        opacity: 0;
+      }
+      div:nth-child(1),
+      div:nth-child(2) { margin-bottom: 10px; }
+      div:nth-child(2n) { margin-right: 0; }
+      div:nth-child(1) { background-color: $theme-pink; }
+      div:nth-child(2) { background-color: $theme-light-purple; }
+      div:nth-child(3) { background-color: $theme-purple; }
+      div:nth-child(4) { background-color: $theme-light-pink; }
+    }
+
+    .window {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background-color: $theme-bg;
+      transform: translateY(-100%);
+      perspective: 1500px;
+
+      img {
+        display: block;
+        height: 200px;
+        position: absolute;
+        bottom: 30px; right: 0px;
+        transform: rotateZ(-20deg);
+      }
+
+      &::before {
+        content: ""; display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background-image: url(../images/bg.png);
+        background-size: 15px;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .end-animation[data-state="start"] {
+    /*** end-roll ***/
+    .end-animation__end-roll {
+      animation:
+        end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
+        end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
+        end-animation__end-roll-color-3 0.5s ease 3s forwards,
+        end-animation__end-roll-color-4 0.5s ease 3.9s forwards;
+
+      .text-balls {
+        .text-ball:nth-child(1) {
+          animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
+            &::after { animation: fadein 0.5s ease 1.6s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
+        }
+        .text-ball:nth-child(2) {
+          animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
+            &::after { animation: fadein 0.5s ease 2.5s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
+        }
+        .text-ball:nth-child(3) {
+          animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
+          .inner {
+            animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
+            &::after { animation: fadein 0.5s ease 3.4s forwards; }
+          }
+          .bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
+          .bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
+          .bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
+          .bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
+          .bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
+        }
+      }
+
+      .paints {
+        div:nth-child(1) {
+          animation:
+            end-animation__show-paint 0.6s ease 0s forwards,
+            scale0-1 0.5s ease-out 1.2s reverse forwards;
+          }
+        div:nth-child(2) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.2s forwards,
+            scale0-1 0.5s ease-out 2.1s reverse forwards;  
+        }
+        div:nth-child(3) {
+          animation:
+            end-animation__show-paint 0.4s ease 0.4s forwards,
+            scale0-1 0.5s ease-out 3s reverse forwards;  
+        }
+        div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
+      }
+
+      .window {
+        animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
+        img { animation: end-animation__end 0.5s ease 4.7s forwards; }
+      }
+    }
+  }
+}
diff --git a/src/scss/modules/tablet/_end-animation.scss b/src/scss/modules/tablet/_end-animation.scss
index 18129c2..6116e13 100644
--- a/src/scss/modules/tablet/_end-animation.scss
+++ b/src/scss/modules/tablet/_end-animation.scss
@@ -1,4 +1,4 @@
-@include tablet-layout {
+@include sp-layout {
   .end-animation {
     position: absolute;
     top: 0; left: 0;
@@ -21,7 +21,7 @@
 
       .text-ball {
         position: absolute;
-        width: 180px; height: 180px;
+        width: 90px; height: 90px;
         border-radius: 50%;
         opacity: 0;
 
@@ -31,7 +31,7 @@
           width: 100%; height: 100%;
           background-color: #F0EFE7;
           border-radius: 50%;
-          border: solid 10px #F0EFE7;
+          border: solid 5px #F0EFE7;
           box-sizing: border-box;
           overflow: hidden;
 
@@ -56,23 +56,23 @@
         }
       }
       .text-ball:nth-child(1) {
-        top: 50px; left: 50px;
+        top: 25px; left: 25px;
         .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
       }
       .text-ball:nth-child(2) {
-        top: 50px; right: 50px;
+        top: 25px; right: 25px;
         .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
       }
       .text-ball:nth-child(3) {
-        bottom: 50px; left: 50px;
+        bottom: 25px; left: 25px;
         .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
       }
     }
 
     .paints {
       position: absolute;
-      top: calc(50% - 60px); left: calc(50% - 60px);
-      width: 120px; height: 120px;
+      top: calc(50% - 40px); left: calc(50% - 40px);
+      width: 80px; height: 80px;
 
       div {
         float: left;
@@ -100,7 +100,7 @@
 
       img {
         display: block;
-        height: 200px;
+        height: 100px;
         position: absolute;
         bottom: 30px; right: 0px;
         transform: rotateZ(-20deg);