ハンバーガーメニューを縦並びに変更

Author: BreadMotion

assets/css/layout.css

@@ -390,28 +390,32 @@
         display: block;
         position: fixed;
         top: 0;
-        left: -100%;
+        right: -100%; /* 右から隠す */
+        left: auto; /* leftプロパティを解除 */
         width: 100%;
         height: 100vh;
         background: var(--color-panel);
         flex-direction: column;
         justify-content: center;
-        align-items: center;
+        align-items: flex-start; /* 左寄せに変更 */
         gap: 1.5rem;
-        transition: left 0.3s ease-in-out;
+        transition: right 0.3s ease-in-out; /* rightプロパティのtransition */
         z-index: 25;
         padding-top: 5rem;
+        flex-wrap: nowrap;
     }
 
     .site-nav.is-open {
-        left: 0;
+        right: 0;
     }
 
     .site-nav a {
         font-size: 1.5rem;
         padding: 0.75rem 1.5rem;
-        width: fit-content;
-        margin: 0 auto;
+        width: 100%;
+        text-align: left;
+        margin: 0;
+        display: block;
     }
 }