/* Landing page specific styles - 優先度を高くする */
* {
  font-family: 'Noto Sans JP', sans-serif !important;
}

body {
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-gray) !important;
}

/* variables */
:root {
  --line-green: #3CCF10 !important;
  --line-green-dark: #309910 !important;
  --text-primary: #3AB2E4 !important;
  --yellow: #FFF700 !important;
  --text-gray: #333333 !important;
}

.text-gray-333 {
  color: var(--text-gray) !important;
}

.bg-primary {
  background-color: var(--text-primary) !important;
}

.border-primary {
  border-color: var(--text-primary) !important;
}

.btn-line {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 34px !important;
  border: none !important;
  border-radius: 9999px !important;
  background: var(--line-green) !important;
  color: white !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.3s, transform 0.1s !important;
  box-shadow: 0 6px 0 var(--line-green-dark) !important;
}

.btn-line:active {
  transform: translateY(2px) !important;
  box-shadow: 0 4px 0 var(--line-green-dark) !important;
}

.bg-yellow-gradient {
  background: linear-gradient(154.81deg, #FFF700 16.03%, #F9BA01 92.05%) !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.underline-yellow {
  position: relative !important;
  z-index: 2 !important;
}

.underline-yellow::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 14px !important;
  background-color: var(--yellow) !important;
  z-index: -1 !important;
}

.heading-primary {
  text-align: center !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  color: var(--text-gray) !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  .heading-primary {
    font-size: 28px !important;
  }
}

.heading-primary::before {
  content: '' !important;
  position: absolute !important;
  height: 4px !important;
  width: 180px !important;
  background-color: var(--text-primary) !important;
  bottom: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.footer-item-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-gray) !important;
  letter-spacing: 0.8px !important;
  line-height: 24px !important;
}

/* Enhanced Sidebar Overlay Styles */
#sidebarOverlay {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(30, 41, 59, 0.5) 30%,
      rgba(51, 65, 85, 0.6) 70%,
      rgba(0, 0, 0, 0.7) 100%) !important;
  animation: overlayPulse 3s ease-in-out infinite alternate !important;
}

@keyframes overlayPulse {
  0% {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(30, 41, 59, 0.5) 30%,
        rgba(51, 65, 85, 0.6) 70%,
        rgba(0, 0, 0, 0.7) 100%) !important;
  }

  100% {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(30, 41, 59, 0.55) 30%,
        rgba(51, 65, 85, 0.65) 70%,
        rgba(0, 0, 0, 0.75) 100%) !important;
  }
}

#mobileSidebar .relative {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease !important;
}

#mobileSidebar.translate-x-0 .relative {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* 元のヘッダーを非表示にする */
#header-nav {
  display: none !important;
}

a {
  text-decoration: none !important;
}

a:focus {
  outline: none;
}

/* セクションのスクロール位置調整 */
section[id] {
  scroll-margin-top: 80px !important;
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 60px !important;
  }
}

/* モバイルサイドメニューの縦並び表示 */
#mobileSidebar ul {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#mobileSidebar li {
  width: 100% !important;
  margin-bottom: 1rem !important;
}

#mobileSidebar a {
  display: flex;
  width: 100% !important;
  font-size: 14px !important;
  text-align: left !important;
}