From ebe82aee827206cfe43b4c206f16279041d3fdb8 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Mon, 2 Apr 2018 22:17:28 +0900
Subject: [PATCH] =?UTF-8?q?add:=20=E3=82=BF=E3=83=96=E3=83=AC=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E7=89=88load-view=E3=81=AE=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/tablet/_load-view.scss | 115 ++++
 src/scss/modules/tablet/_load-view.scss   | 638 ++++++++++++++++++++++
 2 files changed, 753 insertions(+)
 create mode 100644 src/scss/keyframes/tablet/_load-view.scss
 create mode 100644 src/scss/modules/tablet/_load-view.scss

diff --git a/src/scss/keyframes/tablet/_load-view.scss b/src/scss/keyframes/tablet/_load-view.scss
new file mode 100644
index 0000000..f19a10a
--- /dev/null
+++ b/src/scss/keyframes/tablet/_load-view.scss
@@ -0,0 +1,115 @@
+@keyframes load-view__show-wait-icon__tablet {
+  from { transform: translateX(-150px) scale(0.8); }
+  to   { transform: translateX(0px) scale(1.3); }
+}
+@keyframes load-view__scale-wait-icon__tablet {
+  from { transform: scale(5) rotate(0deg); }
+  to   { transform: scale(1) rotate(360deg); }
+}
+
+@keyframes load-view__show-poster__tablet {
+  from { transform: translateY(calc(-100% + -200px)); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes load-view__fall-ball__tablet {
+  0%   { transform: translateY(calc(-50% + -25px)); }
+  40%  { transform: translateY(calc(50% - 25px)); }
+  100% { transform: translateY(0); }
+}
+@keyframes load-view__scale-ball__tablet {
+  0% {
+    width: 50px; height: 50px; border-radius: 50%;
+    top: calc(50% - 25px); left: calc(50% - 25px);
+  }
+  50% {
+    width: calc(100% - 10px); height: 322px; border-radius: 0%;
+    top: calc(50% - 161px); left: 5px;
+  }
+  100% {
+    width: calc(100% - 10px); height: 0; border-radius: 0%;
+    top: calc(50% - 161px); left: 5px;
+  }
+}
+
+@keyframes load-view__sway-illust__tablet {
+  from { transform: rotate(-2deg); }
+  to   { transform: rotate(2deg); }
+}
+@keyframes load-view__rotate-illust__tablet {
+  from { transform: rotateY(0deg); }
+  to   { transform: rotateY(480deg); }
+}
+
+@keyframes load-view__move-paint-ball__tablet {
+  from { left: -60px; transform: rotate(0deg); }
+  to   { left: calc(100% + 60px); transform: rotate(1440deg); }
+}
+@keyframes load-view__move-paint-ball-1__tablet {
+  from { left: -60px; transform: rotate(0deg); }
+  to   { left: calc(100% + 60px); transform: rotate(5760deg); }
+}
+@keyframes load-view__move-paint-ball-2__tablet {
+  from { left: calc(100% + 60px); transform: rotate(0deg); }
+  to   { left: -60px; transform: rotate(-5760deg); }
+}
+
+@keyframes load-view__show-line-1__tablet {
+  from { transform: translate(calc(100% + 15px), calc(100% - 5px)); }
+  to   { transform: translate(-15px, calc(100% - 5px)); }
+}
+@keyframes load-view__show-line-2__tablet {
+  from { transform: translate(calc(-100% + -15px), calc(100% - 5px)); }
+  to   { transform: translate(-15px, calc(100% - 5px)); }
+}
+@keyframes load-view__hidden-line-1__tablet {
+  0%   { transform: translate(-15px, calc(100% - 5px)); }
+  50%  { transform: translate(-15px, 0); }
+  100% { transform: translate(calc(100% + 15px), 0); }
+}
+@keyframes load-view__hidden-line-2__tablet {
+  0%   { transform: translate(-15px, calc(100% - 5px)); }
+  50%  { transform: translate(-15px, 0); }
+  100% { transform: translate(calc(-100% + -15px), 0); }
+}
+
+@keyframes load-view__sway-sd__tablet {
+  from { transform: rotate(-5deg); }
+  to   { transform: rotate(5deg); }
+}
+
+@keyframes load-view__show-curtain-1__tablet {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0%); }
+}
+@keyframes load-view__show-curtain-2__tablet {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0%); }
+}
+@keyframes load-view__show-curtain-inner-1__tablet {
+  0% { transform: translateY(0); }
+  30% { transform: translateY(calc(100% - 15px)); }
+  80% { transform: translateY(calc(100% - 60px)); }
+  100% { transform: translateY(100%); }
+}
+@keyframes load-view__show-curtain-inner-2__tablet {
+  0% { transform: translateY(0); }
+  30% { transform: translateY(calc(-100% + 15px)); }
+  80% { transform: translateY(calc(-100% + 60px)); }
+  100% { transform: translateY(-100%); }
+}
+
+@keyframes load-view__show-message__tablet {
+  0%   { transform: translateX(-200px); opacity: 0; }
+  8%   { transform: translateX(-80px); opacity: 1; }
+  100% { transform: translateX(0px); opacity: 1; }
+}
+
+@keyframes load-view__close-1__tablet {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0%); }
+}
+@keyframes load-view__close-2__tablet {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0%); }
+}
diff --git a/src/scss/modules/tablet/_load-view.scss b/src/scss/modules/tablet/_load-view.scss
new file mode 100644
index 0000000..a000319
--- /dev/null
+++ b/src/scss/modules/tablet/_load-view.scss
@@ -0,0 +1,638 @@
+@include tablet-layout {
+  .load-view {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-pink;
+    overflow: hidden;
+  }
+
+  /**
+   * frame
+   */
+  .load-view__frame {
+    position: absolute;
+    top: 5px; left: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+  }
+
+  /*** squares ***/
+  .load-view__frame__squares {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      position: absolute;
+      width: 30px; height: 30px;
+      border: dashed 2px #fff;
+      box-sizing: border-box;
+      border-radius: 3px;
+    }
+    div:nth-child(1) { top: 0; left: 0; }
+    div:nth-child(2) { top: 0; right: 0; }
+    div:nth-child(3) { bottom: 0; left: 0; }
+    div:nth-child(4) { bottom: 0; right: 0; }
+  }
+
+  /*** lines ***/
+  .load-view__frame__lines {
+    position: absolute;
+    top: 28px; left: 28px;
+    width: calc(100% - 56px);
+    height: calc(100% - 56px);
+
+    div {
+      position: absolute;
+      box-sizing: border-box;
+    }
+    div:nth-child(1),
+    div:nth-child(3) {
+      left: 0; width: 100%; height: 3px;
+      border-top: dashed 2px #fff;
+    }
+    div:nth-child(2),
+    div:nth-child(4) {
+      top: 0; width: 1px; height: 100%;
+      border-left: dashed 2px #fff;
+    }
+    div:nth-child(1) { top: 0; }
+    div:nth-child(3) { bottom: 0; }
+    div:nth-child(2) { left: 0; }
+    div:nth-child(4) { right: 0; }
+  }
+
+  /**
+   * body
+   */
+  .load-view__body {
+    position: absolute;
+    top: 0px; left: 0px;
+    width: 100%; height: 100%;
+  }
+
+  /*** bg ***/
+  .load-view__body__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    &::before,
+    &::after {
+      content: ""; display: block;
+      position: absolute;
+      width: calc(100% - 120px);
+      height: calc(100% - 120px);
+      border-radius: 5px;
+      background-color: rgba(255,255,255,0.2);
+    }
+    &::before { top: 50px; left: 50px; }
+    &::after  { bottom: 50px; right: 50px; }
+  }
+
+  /*** panel ***/
+  .load-view__body__panel {
+    position: absolute;
+    top: 0; left: calc(50% - 300.5px);
+    width: 601px; height: 100%;
+  }
+
+  /*** panel__icon ***/
+  .load-view__body__panel__icon {
+    position: absolute;
+    top: calc(50% - 60px);
+    width: 80px; height: 80px;
+    opacity: 0;
+
+    .box {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 8px; left: 8px;
+        width: calc(100% - 16px); height: calc(100% - 16px);
+        box-sizing: border-box;
+        border: solid 2px transparent;
+      }
+
+      .frame {
+        position: absolute;
+        width: 40%; height: 40%;
+
+        &::before,
+        &::after { content: ""; display: block; position: absolute; }
+        &::before { width: 100%; height: 8px; }
+        &::after { width: 8px; height: 100%; }
+      }
+      .frame:nth-child(1) {
+        top: 0; right: 0;
+        &::before, &::after { top: 0; right: 0; }
+      }
+      .frame:nth-child(2) {
+        bottom: 0; left: 0;
+        &::before, &::after { bottom: 0; left: 0; }
+      }
+    }
+
+    .icon {
+      position: absolute;
+      top: 25px; left: 25px;
+      width: calc(100% - 50px); height: calc(100% - 50px);
+      background-size: 150%;
+      background-position: center;
+    }
+  }
+  .load-view__body__panel__icon_type_1 {
+    left: 56.2px;
+    .box {
+      &::after { border-color: $theme-pink; }
+      .frame {
+        &::before,
+        &::after { background-color: $theme-pink; }
+      }
+    }
+    .icon { background-image: url(../images/load-view/wait/1.png); }
+  }
+  .load-view__body__panel__icon_type_2 {
+    left: 192.4px;
+    .box {
+      &::after { border-color: $theme-light-purple; }
+      .frame {
+        &::before,
+        &::after { background-color: $theme-light-purple; }
+      }
+    }
+    .icon { background-image: url(../images/load-view/wait/2.png); }
+  }
+  .load-view__body__panel__icon_type_3 {
+    right: 192.4px;
+    .box {
+      &::after { border-color: $theme-light-pink; }
+      .frame {
+        &::before,
+        &::after { background-color: $theme-light-pink; }
+      }
+    }
+    .icon { background-image: url(../images/load-view/wait/3.png); }
+  }
+  .load-view__body__panel__icon_type_4 {
+    right: 56.2px;
+    .box {
+      &::after { border-color: $theme-purple; }
+      .frame {
+        &::before,
+        &::after { background-color: $theme-purple; }
+      }
+    }
+    .icon { background-image: url(../images/load-view/wait/4.png); }
+  }
+
+  /*** poster ***/
+  .load-view__body__poster {
+    position: absolute;
+    top: 0; left: calc(50% - 300.5px);
+    width: 601px; height: 100%;
+
+    .paint-ball-box {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      overflow: hidden;
+    }
+    .paint-ball {
+      position: absolute;
+      top: calc(50% - 30px); left: -60px;
+      width: 60px; height: 60px;
+      border-radius: 50%;
+      background-color: #fff;
+
+      div {
+        position: absolute;
+        top: 5px; left: 5px;
+        width: calc(100% - 10px); height: calc(100% - 10px);
+        border-radius: 50%;
+        border: dashed 2px $theme-pink;
+        box-sizing: border-box;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        content: ""; display: block;
+        width: calc(100% - 40px); height: 2px;
+        top: calc(50% - 1px); left: 20px;
+        background-color: $theme-pink;
+      }
+      &::before { transform: rotate(45deg); }
+      &::after  { transform: rotate(-45deg); }
+    }
+
+    .poster {
+      position: relative;
+      float: left;
+      width: 150.25px; height: 100%;
+      transform: translateY(calc(-100% + -150px));
+      perspective: 500px;
+    
+      .illust {
+        position: absolute;
+        top: calc(50% - 161px); left: 0;
+        width: 150.25px; height: 322px;
+        transform-origin: center bottom;
+        opacity: 0;
+        
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          background-size: 100% auto;
+          background-repeat: no-repeat;
+          background-position: center;
+          transform-origin: center bottom;
+        }
+      }
+
+      .ball {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        transform: translateY(calc(-50% + -25px));
+
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          top: calc(50% - 25px); left: calc(50% - 25px);
+          width: 50px; height: 50px;
+          border-radius: 50%;
+          background-color: #fff;
+        }
+      }
+
+      &::after {
+        content: ""; display: block; position: absolute;
+        left: -44.875px; bottom: -150px;
+        width: 0; height: 0;
+        border-top: solid 150px transparent;
+        border-right: solid 120px transparent;
+        border-left: solid 120px transparent;
+      }
+    }
+    .poster:nth-child(1) {
+      background-color: $theme-pink;
+      &::after { border-top-color: $theme-pink; }
+      .illust:after { background-image: url(../images/load-view/poster/1.png); }
+    }
+    .poster:nth-child(2) {
+      background-color: $theme-light-purple;
+      &::after { border-top-color: $theme-light-purple; }
+      .illust:after { background-image: url(../images/load-view/poster/2.png); }
+    }
+    .poster:nth-child(3) {
+      background-color: $theme-light-pink;
+      &::after { border-top-color: $theme-light-pink; }
+      .illust:after { background-image: url(../images/load-view/poster/3.png); }
+    }
+    .poster:nth-child(4) {
+      background-color: $theme-purple;
+      &::after { border-top-color: $theme-purple; }
+      .illust:after { background-image: url(../images/load-view/poster/4.png); }
+    }
+
+    .illust {
+      position: absolute;
+      top: calc(50% - 650px); left: 0;
+      width: 225px; height: 650px;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    &::after { content: ""; display: block; clear: both; }
+  }
+
+  .load-view__body__info {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    .allow {
+      position: relative;
+      width: 100%; height: 25%;
+      transform: translateX(-100%);
+
+      .sd {
+        position: absolute;
+        top: calc(50% - 60px); height: 120px;
+        display: block;
+        opacity: 0;
+        transform-origin: center bottom;
+      }
+      .sd-1 { left: 5%; }
+      .sd-2 { right: 5%; }
+
+      .text {
+        position: absolute;
+        top: calc(50% - 60px);
+        height: 120px;
+        display: block;
+        opacity: 0;
+      }
+      .text-1 { right: 10%; }
+      .text-2 { left: 10%; }
+
+      .line {
+        position: absolute;
+        top: 20px; left: 0;
+        width: 100%; height: calc(100% - 40px);
+        overflow: hidden;
+
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          bottom: 0; left: 0;
+          transform: translate(calc(100% - 15px), calc(100% - 5px));
+          width: calc(100% + 30px); height: 100%;
+          background-color: #fff;
+        }
+      }
+
+      .paint-ball {
+        position: absolute;
+        bottom: 20px; left: -60px;
+        width: 60px; height: 60px;
+        background-color: #fff;
+        border-radius: 50%;
+
+        div {
+          position: absolute;
+          top: 5px; left: 5px;
+          width: calc(100% - 10px); height: calc(100% - 10px);
+          border-radius: 50%;
+          border: dashed 2px $theme-pink;
+          box-sizing: border-box;
+        }
+        &::before,
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          left: 20px; top: calc(50% - 1px);
+          width: calc(100% - 40px); height: 2px;
+          background-color: $theme-pink;
+        }
+        &::before { transform: rotate(45deg); }
+        &::after  { transform: rotate(-45deg); }
+      }
+    }
+    .allow:nth-child(1) {
+      background-color: $theme-pink;
+    }
+    .allow:nth-child(2) {
+      background-color: $theme-light-purple;
+    }
+    .allow:nth-child(3) {
+      background-color: $theme-light-pink;
+    }
+    .allow:nth-child(4) {
+      background-color: $theme-purple;
+    }
+  }
+
+  .load-view__body__close {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    .curtain {
+      width: 100%; height: 50%;
+      background-color: #fff;
+      overflow: hidden;
+
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-color: $theme-pink;
+      }
+    }
+    .curtain:nth-child(1) { transform: translateY(-100%); }
+    .curtain:nth-child(2) { transform: translateY(100%); }
+
+    .message {
+      position: absolute;
+      top: calc(50% - 20px); left: 0;
+      width: 100%; height: 40px;
+      font-size: 30px;
+      color: #fff;
+      text-align: right;
+      line-height: 40px;
+      box-sizing: border-box;
+      padding: 0 20px;
+      opacity: 0;
+    }
+
+    &::before,
+    &::after {
+      content: ""; display: block;
+      position: absolute; left: 0;
+      width: 100%; height: 50%;
+      background-color: $theme-light-pink;
+      z-index: 1;
+    }
+    &::before { top: 0; transform: translateY(-100%); }
+    &::after  { bottom: 0; transform: translateY(100%); }
+  }
+
+  /********************************************************************************************
+   * animation
+   ********************************************************************************************/
+  /*** panel ***/
+  .load-view__body__panel__icon { .box { animation: rotate360 3s linear 0s infinite; } }
+  .load-view__body__panel__icon_type_1 {
+    animation:
+      fadein 0.8s ease 0s forwards,
+      load-view__show-wait-icon__tablet 0.8s ease 0s forwards;
+    .icon { animation: load-view__scale-wait-icon__tablet 1s ease 0s forwards; }
+  }
+  .load-view__body__panel__icon_type_2 {
+    animation:
+      fadein 0.8s ease 0.3s forwards,
+      load-view__show-wait-icon__tablet 0.8s ease 0.3s forwards;
+    .icon { animation: load-view__scale-wait-icon__tablet 1s ease 0.3s forwards; }
+  }
+  .load-view__body__panel__icon_type_3 {
+    animation:
+      fadein 0.8s ease 0.6s forwards,
+      load-view__show-wait-icon__tablet 0.8s ease 0.6s forwards;
+    .icon { animation: load-view__scale-wait-icon__tablet 1s ease 0.6s forwards; }
+  }
+  .load-view__body__panel__icon_type_4 {
+    animation:
+      fadein 0.8s ease 0.9s forwards,
+      load-view__show-wait-icon__tablet 0.8s ease 0.9s forwards;
+    .icon { animation: load-view__scale-wait-icon__tablet 1s ease 0.9s forwards; }
+  }
+
+  .load-view[data-state="start"] {
+    /*** close ***/
+    .load-view__body__close {
+      .curtain:nth-child(1) {
+        animation: load-view__show-curtain-1__tablet 0.5s ease 6s forwards;
+        &::after { animation: load-view__show-curtain-inner-1__tablet 1.5s ease 6.2s forwards; }
+      }
+      .curtain:nth-child(2) {
+        animation: load-view__show-curtain-2__tablet 0.5s ease 6s forwards;
+        &::after { animation: load-view__show-curtain-inner-2__tablet 1.5s ease 6.2s forwards; }
+      }
+      .message { animation: load-view__show-message__tablet 5s ease-out 6.7s forwards; }
+
+      &::before { animation: load-view__close-1 0.6s ease 7.2s forwards; }
+      &::after  { animation: load-view__close-2 0.6s ease 7.2s forwards; }
+    }
+
+    /*** info ***/
+    .load-view__body__info {
+      .allow:nth-child(1) {
+        animation: slide-right 0.4s ease 3.5s forwards;
+        .sd {
+          animation:
+            fadein 0.1s ease 5.1s forwards,
+            load-view__sway-sd__tablet 0.8s ease-in-out 5.1s alternate infinite;
+        }
+        .text {
+          animation:
+            fadein 0.1s ease 5.1s forwards,
+            load-view__sway-illust__tablet 0.8s ease-in-out 5.1s alternate infinite;
+        }
+        .line::after {
+          animation:
+            load-view__show-line-1__tablet 0.7s ease 4s forwards,
+            load-view__hidden-line-1__tablet 0.8s ease 4.7s forwards;
+        }
+        .paint-ball { animation: load-view__move-paint-ball-2__tablet 0.7s ease 4s forwards; }
+      }
+      .allow:nth-child(2) {
+        animation: slide-right 0.4s ease 3.6s forwards;
+        .text {
+          animation:
+            fadein 0.1s ease 5.2s forwards,
+            load-view__sway-illust__tablet 0.8s ease-in-out 5.2s alternate infinite;
+        }
+        .sd {
+          animation:
+            fadein 0.1s ease 5.2s forwards,
+            load-view__sway-sd__tablet 0.8s ease-in-out 5.2s alternate infinite;
+        }
+        .line::after {
+          animation:
+            load-view__show-line-2__tablet 0.7s ease 4.1s forwards,
+            load-view__hidden-line-2__tablet 0.8s ease 4.8s forwards;
+        }
+        .paint-ball { animation: load-view__move-paint-ball-1__tablet 0.7s ease 4.1s forwards; }
+      }
+      .allow:nth-child(3) {
+        animation: slide-right 0.4s ease 3.7s forwards;
+        .text {
+          animation:
+            fadein 0.1s ease 5.3s forwards,
+            load-view__sway-illust__tablet 0.8s ease-in-out 5.3s alternate infinite;
+        }
+        .sd {
+          animation:
+            fadein 0.1s ease 5.3s forwards,
+            load-view__sway-sd__tablet 0.8s ease-in-out 5.3s alternate infinite;
+        }
+        .line::after {
+          animation:
+            load-view__show-line-1__tablet 0.7s ease 4.2s forwards,
+            load-view__hidden-line-1__tablet 0.8s ease 4.9s forwards;
+        }
+        .paint-ball { animation: load-view__move-paint-ball-2__tablet 0.7s ease 4.2s forwards; }
+      }
+      .allow:nth-child(4) {
+        animation: slide-right 0.4s ease 3.8s forwards;
+        .text {
+          animation:
+            fadein 0.1s ease 5.4s forwards,
+            load-view__sway-illust__tablet 0.8s ease-in-out 5.4s alternate infinite;
+        }
+        .sd {
+          animation:
+            fadein 0.1s ease 5.4s forwards,
+            load-view__sway-sd__tablet 0.8s ease-in-out 5.4s alternate infinite;
+        }
+        .line::after {
+          animation:
+            load-view__show-line-2__tablet 0.7s ease 4.3s forwards,
+            load-view__hidden-line-2__tablet 0.8s ease 5s forwards;
+        }
+        .paint-ball { animation: load-view__move-paint-ball-1__tablet 0.7s ease 4.3s forwards; }
+      }
+    }
+
+    /*** poster ***/
+    .load-view__body__poster {
+      .paint-ball { animation: load-view__move-paint-ball__tablet 1s ease 2.6s forwards; }
+
+      .poster:nth-child(1) {
+        animation: load-view__show-poster__tablet 0.5s ease 0s forwards;
+        .ball {
+          animation: load-view__fall-ball__tablet 0.6s ease 0.6s forwards;
+          &::after { animation: load-view__scale-ball__tablet 0.7s ease 1.2s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.45s forwards,
+            load-view__rotate-illust__tablet 0.7s ease 2.6s forwards,
+            fadeout 0.35s ease 2.95s forwards;
+          &::after { animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(2) {
+        animation: load-view__show-poster__tablet 0.5s ease 0.2s forwards;
+        .ball {
+          animation: load-view__fall-ball__tablet 0.6s ease 0.8s forwards;
+          &::after { animation: load-view__scale-ball__tablet 0.7s ease 1.4s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.65s forwards,
+            load-view__rotate-illust__tablet 0.7s ease 2.8s forwards,
+            fadeout 0.35s ease 3.15s forwards;
+          &::after { animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(3) {
+        animation: load-view__show-poster__tablet 0.5s ease 0.4s forwards;
+        .ball {
+          animation: load-view__fall-ball__tablet 0.6s ease 1s forwards;
+          &::after { animation: load-view__scale-ball__tablet 0.7s ease 1.6s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 1.85s forwards,
+            load-view__rotate-illust__tablet 0.7s ease 3s forwards,
+            fadeout 0.35s ease 3.35s forwards;
+          &::after { animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+      .poster:nth-child(4) {
+        animation: load-view__show-poster__tablet 0.5s ease 0.6s forwards;
+        .ball {
+          animation: load-view__fall-ball__tablet 0.6s ease 1.2s forwards;
+          &::after { animation: load-view__scale-ball__tablet 0.7s ease 1.8s forwards; }
+        }
+        .illust {
+          animation:
+            fadein 0.1s ease 2.1s forwards,
+            load-view__rotate-illust__tablet 0.7s ease 3.2s forwards,
+            fadeout 0.35s ease 3.55s forwards;
+          &::after { animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
+        }
+      }
+    }
+  }
+}