Wrap header menu and tighten footer spacing

innovedus_cms/mysite/static/css/footer.css

@@ -63,7 +63,7 @@
   padding: 0;
   list-style: none;
   column-count: 2;
-  column-gap: 40px;
+  column-gap: 28px;
 }
 
 .footer-menu-list li {

innovedus_cms/mysite/static/css/mysite.css

@@ -75,10 +75,15 @@ a {
 
 .menu-item {
   position: relative;
-  flex: 1 1 0;
+  flex: 0 0 auto;
   text-align: left;
 }
 
+.menu-item:hover,
+.menu-item:focus-within {
+  z-index: 20;
+}
+
 .menu-item-header {
   display: flex;
   align-items: center;
@@ -172,10 +177,13 @@ a {
 .submenu {
   position: absolute;
   top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: calc(100vw - 32px);
+  transform: none;
   margin-top: -2px;
-  margin-left: 20px;
+  margin-left: 10px;
   list-style: none;
   padding-inline-start: 0;
   border-bottom: #0e1b42;
@@ -184,6 +192,7 @@ a {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  z-index: 20;
   transition: opacity 160ms ease, transform 160ms ease;
 }
 
@@ -198,11 +207,11 @@ a {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
-  transform: translateX(-50%) translateY(2px);
+  transform: translateY(2px);
 }
 
 .submenu-item {
-  min-width: 94px;
+  min-width: 0;
   height: 36px;
   border: #0e1b42;
   border-style: solid;
@@ -221,7 +230,8 @@ a {
   display: block;
   font-variation-settings: normal;
   font-family: "Inter:Regular", "Noto Sans JP:Regular", sans-serif;
-  word-break: break-word;
+  white-space: nowrap;
+  word-break: keep-all;
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
@@ -276,7 +286,7 @@ a {
   border: 0;
   background: transparent;
   outline: none;
-  width: 153px;
+  width: 140px;
 }
 
 .template-darkbackground .header-search input[type="search"] {
@@ -329,7 +339,19 @@ a {
   }
 }
 
-@media (max-width: 768px) {
+@media (min-width: 768px) and (max-width: 1023px) {
+  .main-nav {
+    min-width: 0;
+  }
+
+  .main-menu {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .main-menu-link {
+    padding: 4px 4px;
+  }
 }
 
 @media (min-width: 575px) and (max-width: 767px) {
@@ -432,6 +454,8 @@ a {
 
   .submenu {
     position: static;
+    min-width: 0;
+    max-width: none;
     margin: 8px 0 0;
     opacity: 1;
     visibility: visible;
@@ -463,6 +487,8 @@ a {
   .submenu-item a {
     padding: 6px 0 6px 18px;
     font-size: 14px;
+    white-space: normal;
+    word-break: break-word;
   }
 }
 

innovedus_cms/mysite/static/css/subscribe_fab.css

@@ -48,7 +48,7 @@
   padding: 0 10px 0 0;
   border-radius: 36px;
   background: #ffffff1a;
-  border: 1px solid #ffffff80;
+  border: 1px solid #0e1b0e;
   transform: translateX(calc(100% - var(--fab-toggle-width)));
   transition: transform 0.25s ease, background-color 0.2s ease;
   backdrop-filter: blur(12px);