update: 閉じるボタンとページボックスにスタイルを適用

src/scss/keyframes/pc/_page-box.scss

@@ -0,0 +1,22 @@
+@keyframes page-box__show {
+  from { transform: rotate(90deg); }
+  to   { transform: rotate(0deg); }
+}
+@keyframes page-box__hidden {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(-90deg); }
+}
+
+@keyframes page-box__show-close-btn {
+  from { transform: translate(calc(100% + 20px), calc(-100% + -20px)); }
+  to   { transform: translate(0, 0); }
+}
+@keyframes page-box__rotate-close-btn {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(15deg); }
+}
+
+@keyframes page-box__show-content {
+  from { transform: scale(0.9); opacity: 0; }
+  to   { transform: scale(1); opacity: 1; }
+}

src/scss/modules/pc/_page-box.scss

@@ -0,0 +1,138 @@
+@include pc-layout {
+  .page-box {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-pink;
+    transform-origin: right top;
+    transform: rotate(90deg);
+    z-index: 1002;
+  }
+
+  /*** bg ***/
+  .page-box__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      transform-origin: right top;
+      transform: rotate(90deg);
+    }
+    div:nth-child(1) {
+      background-color: $theme-light-pink;
+    }
+    div:nth-child(2) {
+      background-color: $theme-bg;
+      
+      &::after {
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        background-size: 15px;
+        background-image: url(../images/bg.png);
+        opacity: 0.4;
+      }
+    }
+  }
+
+  /*** content ***/
+  .page-box__content {
+    position: absolute;
+    top: 40px; left: 40px;
+    width: calc(100% - 80px); height: calc(100% - 80px);
+    border: solid 10px $theme-pink;
+    box-sizing: border-box;
+    background-color: $theme-bg;
+    border-radius: 15px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.6) inset;
+    overflow: auto;
+    opacity: 0;
+    transition: all 0.35s ease 0s;
+  }
+
+  /*** close-btn ***/
+  .page-box__close-btn {
+    position: absolute;
+    top: 10px; right: 10px;
+    width: 100px; height: 100px;
+    display: block;
+    transform: translate(calc(100% + 20px), calc(-100% + -20px));
+    z-index: 5;
+
+    section {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      box-shadow: 0 0 5px rgba(0,0,0,0.4);
+      border-radius: 3px;
+      transition: all 0.35s ease 0s;
+    }
+    section:nth-child(1) {
+      background-color: $theme-pink;
+      transform: rotate(0deg);
+    }
+    section:nth-child(2) {
+      background-color: $theme-bg;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 49px; left: 20px;
+        width: 60px; height: 1px;
+        border-top: dashed 2px $theme-purple;
+        box-sizing: border-box;
+        opacity: 0.7;
+      }
+      &::before { transform: rotate(45deg); }
+      &::after  { transform: rotate(-45deg); }
+    }
+  }
+  .page-box__close-btn:hover {
+    section:nth-child(1) { background-color: $theme-purple; }
+    section:nth-child(2) { background-color: #eee; }
+  }
+  .page-box__close-btn:hover ~ .page-box__content { border-color: $theme-purple; }
+
+  .page-box[data-state="true"] {
+    animation: page-box__show 0.35s ease 0s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div:nth-child(1) { animation: page-box__show 0.35s ease 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__show 0.35s ease 0.2s forwards; }
+    }
+
+    /*** content ***/
+    .page-box__content {
+      animation: page-box__show-content 0.6s ease 0.55s forwards;
+    }
+
+    /*** close-btn ***/
+    .page-box__close-btn {
+      animation: page-box__show-close-btn 0.6s ease 0.9s forwards;
+      section:nth-child(1) { animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
+    }
+  }
+  
+  .page-box[data-state="false"] {
+    transform: rotate(0deg);
+    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
+    
+    /*** bg ***/
+    .page-box__bg {
+      div { transform: rotate(0deg); }
+      div:nth-child(1) { animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
+      div:nth-child(2) { animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
+    }
+    
+    /*** content ***/
+    .page-box__content,
+    .page-box__close-btn {
+      animation: fadeout 0.2s ease 0s forwards;
+    }
+  }
+}

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

@@ -5,7 +5,7 @@
     width: 100%; height: 100%;
     background-color: $theme-bg;
     overflow: hidden;
-    z-index: 996;
+    z-index: 1001;
 
     &::after {
       content: ""; display: block;