diff --git a/src/scss/modules/sp/_page-box.scss b/src/scss/modules/sp/_page-box.scss
new file mode 100644
index 0000000..c81333e
--- /dev/null
+++ b/src/scss/modules/sp/_page-box.scss
@@ -0,0 +1,165 @@
+@include tablet-layout {
+  .page-box {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-pink;
+    transform-origin: right top;
+    transform: rotate(90deg);
+    overflow: hidden;
+    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: 20px; left: 20px;
+    width: calc(100% - 40px); height: calc(100% - 40px);
+    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;
+
+    .page-title {
+      position: relative;
+      margin: 50px auto;
+      width: 500px; height: 45px;
+
+      div {
+        position: absolute;
+        right: 0; top: 0;
+        height: 100%;
+      }
+      div:nth-child(1) { width: 100%; background-color: $theme-gray; }
+      div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; }
+      div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; }
+      div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; }
+
+      h2 {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 45px;
+        font-size: 20px;
+        color: #fff;
+        text-align: center;
+        line-height: 45px;
+      }
+    }
+  }
+
+  /*** close-btn ***/
+  .page-box__close-btn {
+    position: absolute;
+    top: 5px; right: 5px;
+    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;
+    }
+  }
+}
diff --git a/src/scss/modules/sp/_profile.scss b/src/scss/modules/sp/_profile.scss
new file mode 100644
index 0000000..c20aafb
--- /dev/null
+++ b/src/scss/modules/sp/_profile.scss
@@ -0,0 +1,84 @@
+@include tablet-layout {
+  .profile-page {}
+
+  /*** body ***/
+  .profile-page__body {
+    width: 600px;
+    margin: 0 auto;
+
+    .icon {
+      position: relative;
+      width: 150px; height: 150px;
+      margin: 0 auto;
+      border: solid 5px $theme-purple;
+      background-color: $theme-purple;
+      border-radius: 50%;
+      box-sizing: border-box;
+
+      &:after {
+        position: absolute;
+        top: 0; left: 0;
+        content: ""; display: block;
+        width: 100%; height: 100%;
+        border-radius: 50%;
+        background-image: url(../images/profile/yuki540.png);
+        background-size: cover;
+        background-position: center;
+      }
+
+      div {
+        position: absolute;
+        background-color: $theme-purple;
+      }
+      div:nth-child(1) { width: 25px; height: 100px; left: 0; bottom: -5px; border-radius: 20px; }
+      div:nth-child(2) { width: 10px; height: 80px; left: 40px; bottom: -10px; border-radius: 4px; }
+      div:nth-child(3) { width: 18px; height: 80px; left: calc(50% - 6px); bottom: -50px; border-radius: 10px; }
+      div:nth-child(4) { width: 12px; height: 80px; right: 0px; bottom: -3px; border-radius: 8px; }
+    }
+
+    .name {
+      margin: 0 auto;
+      margin-top: 60px;
+      width: 150px; height: 40px;
+      border-left: solid 15px $theme-purple;
+      background-color: #fff;
+      padding: 0 5px;
+      box-shadow: 0 0 5px rgba(0,0,0,0.4);
+      font-size: 25px;
+      color: #555;
+      font-weight: bold;
+      text-align: center;
+      line-height: 40px;
+      transform: rotate(-5deg);
+    }
+
+    .info {
+      margin: 0 auto;
+      margin-top: 40px;
+
+      .info-li {
+        position: relative;
+        width: 400px;
+        padding: 0 10px;
+        margin: 0 auto;
+        margin-bottom: 15px;
+        border-bottom: solid 1px $theme-light-pink;
+        
+        span {
+          font-size: 14px;
+          color: $theme-light-purple;
+          margin-right: 5px;
+        }
+
+        &::after {
+          position: absolute;
+          left: -15px; bottom: -5px;
+          content: ""; display: block;
+          width: 10px; height: 10px;
+          background-color: $theme-light-pink;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}