html {
  scroll-behavior: smooth;
} 
:root {
  --submenu-offset: 75px;
  --submenu-offset-left: 20px;
  --submenu-button-size: 55px;
  --submenu-button-size-active: 44px;
  --submenu-yellow: #F5B606;
  --submenu-overlay-bg: rgba(255, 255, 255, 0.95);
  --anim-duration: 0.35s;
  --anim-easing: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 1. PC (768px以上) ではサブメニュー全体を非表示 */
@media (min-width: 768px) {
  #submenu-wrapper {
    display: none !important;
  }
}

/* 2. Body Scroll Lock */
body.submenu-no-scroll {
  overflow: hidden;
}

/* 3. ラッパー: アニメーションの起点 */
#submenu-wrapper {
  position: fixed;
  z-index: 9;
  bottom: var(--submenu-offset);
  left: var(--submenu-offset-left);
  width: var(--submenu-button-size);
  height: var(--submenu-button-size);
  pointer-events: none;
  transition: transform 0.4s var(--anim-easing);
}

/* 4. 円形拡大オーバーレイ */
.submenu-overlay {
  position: fixed;
  bottom: var(--submenu-offset);
  left: var(--submenu-offset-left);
  width: var(--submenu-button-size);
  height: calc(var(--submenu-button-size) * 1.3);
  background: var(--submenu-overlay-bg);
  border-radius: 50%;
  transform: scale(1);
  transition: transform var(--anim-duration) var(--anim-easing),opacity var(--anim-duration) ease 0.06s;
  opacity: 0;
  z-index: -1;
}
#submenu-wrapper.is-active .submenu-overlay {
  transform: translate(0, 385px) scale(50);
  pointer-events: auto;
  opacity: 1;
}

/* 5. 開閉ボタン */
#submenu-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--submenu-button-size);
  height: var(--submenu-button-size);
  background-color: var(--submenu-yellow);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 4;
  transition: width 0.4s ease, height 0.4s ease, bottom 0.4s ease;
  pointer-events: auto;
}
#submenu-toggle img {
  width: 55%;
  height: auto;
  transition: none;
}

/* 6. メニュー本体 */
.submenu-body {
  position: fixed;
  left: var(--submenu-offset-left); 
  width: calc(100vw - (var(--submenu-offset) * 2)); 
  max-width: 380px;
  visibility: hidden;
  z-index: 3;
}

/* --- 展開時のアニメーション --- */

/* 6-1. ボタン全体をタイトル横に移動 */
#submenu-wrapper.is-active {
   transform: translate(0, -180px); 
   
}

#submenu-wrapper.is-active #submenu-toggle {
  width: var(--submenu-button-size-active);
  height: var(--submenu-button-size-active);
  bottom: -4px;

}

/* 6-2. メニュー本体の表示 */
#submenu-wrapper.is-active .submenu-body {
  visibility: visible;
  pointer-events: auto;
}

/* 6-3. メニュータイトルの表示 */
.submenu-title {
  color: #333;
  font-size: 1.1rem;
  font-weight: bold;
  height: calc(var(--submenu-button-size) - 5px);
  line-height: var(--submenu-button-size); 
  padding-left:calc(var(--submenu-offset-left) + 24px); 
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s;
}
#submenu-wrapper.is-active .submenu-title {
  opacity: 1;
}

/* 6-4. メニュー項目の時差表示 (Stagger Animation) */
.submenu-links {
  list-style: none;
  margin: 27px 0 0 5px;
  padding: 0;
  z-index: 5;
}
.submenu-links li {
  opacity: 0;
  transform: translateX(-20px);
}
#submenu-wrapper.is-active .submenu-links li {
  animation: slideInFadeIn 0.4s ease-out forwards;
}

#submenu-wrapper.is-active .submenu-links li:nth-child(1) { animation-delay: 0.25s; }
#submenu-wrapper.is-active .submenu-links li:nth-child(2) { animation-delay: 0.28s; }
#submenu-wrapper.is-active .submenu-links li:nth-child(3) { animation-delay: 0.31s; }
#submenu-wrapper.is-active .submenu-links li:nth-child(4) { animation-delay: 0.34s; }

@keyframes slideInFadeIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.submenu-links a {
  display: flex;
  align-items: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
}
.submenu-arrow-icon {
  margin-right: 12px;
  color: #888;
  width: 9px;
}