/*
Theme Name: FeelFlow
Description: AI技術で心と体の調和を実現するWordPressテーマ
Version: 2.0.0
Author: FeelFlow Team
*/

/* CSS Custom Properties (Variables) */
:root {
  --primary: #3b82f6;
  --primary-foreground: #f8fafc;
  --secondary: #f3f4f6;
  --secondary-foreground: #111827;
  --muted: #f3f4f6;
  --muted-foreground: #6b7280;
  --accent: #f3f4f6;
  --accent-foreground: #111827;
  --destructive: #ef4444;
  --destructive-foreground: #f8fafc;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #3b82f6;
  --background: #ffffff;
  --foreground: #1e293b;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --radius: 0.5rem;
  
  /* グラデーションカラーパレット - 一括変更用 */
  --gradient-primary: linear-gradient(to bottom right, #062456, #8E8B95, #132343);
  --gradient-primary-hover: linear-gradient(to bottom right, #0a2a5a, #a09199, #1a2e4a);
  --gradient-primary-135: linear-gradient(135deg, #062456, #8E8B95, #132343);
  --gradient-primary-135-hover: linear-gradient(135deg, #0a2a5a, #a09199, #1a2e4a);
  --gradient-primary-lr: linear-gradient(to right, #062456, #8E8B95, #132343);
  
  /* オーバーレイ用（透明度付き） */
  --gradient-overlay: linear-gradient(to bottom right, rgba(6, 36, 86, 0.3), rgba(142, 139, 149, 0.1), rgba(19, 35, 67, 0.2));
  --gradient-bg-light: linear-gradient(to bottom right, rgba(6, 36, 86, 0.05), rgba(142, 139, 149, 0.05), rgba(19, 35, 67, 0.05));
  --gradient-bg-medium: linear-gradient(to bottom right, rgba(6, 36, 86, 0.1), rgba(142, 139, 149, 0.1), rgba(19, 35, 67, 0.1));
  --gradient-top: linear-gradient(to top, rgba(6, 36, 86, 0.4), transparent);
  --gradient-accent: linear-gradient(to right, transparent, rgba(6, 36, 86, 0.3), transparent);
  
  /* 個別カラー */
  --color-primary-1: #062456;
  --color-primary-2: #8E8B95;
  --color-primary-3: #132343;
  --color-primary-1-hover: #0a2a5a;
  --color-primary-2-hover: #a09199;
  --color-primary-3-hover: #1a2e4a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #1e293b;
  background-color: #ffffff;
  position: relative;
}

@media (min-width: 1024px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    pointer-events: none;
    z-index: 9999;
  }
  
  
  header .container {
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 2rem !important;
    margin: 0 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  header .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    gap: 2rem !important;
    width: 100% !important;
  }
  
  /* ロゴエリア */
  header .flex.items-center.space-x-3 {
    width: auto !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  
  /* デスクトップナビゲーション */
  header .desktop-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    gap: 0.5rem !important;
    order: 2 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
  }
  
  header .desktop-nav a {
    color: white !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    width: auto !important;
    margin: 0 !important;
    /* transition removed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    min-width: 80px !important;
  }
  
  /* ナビゲーションアイコン */
  header .desktop-nav a::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: invert(1) !important;
  }
  
  @media (min-width: 1024px) {
    header .desktop-nav a[href="#home"]::before,
    header .desktop-nav a:first-child::before,
    header .desktop-nav a[href*="home"]::before,
    header .desktop-nav a[href="/"]::before,
    header .desktop-nav a[href$="/"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E") !important;
    }
    
    
    header .desktop-nav a[href="#blog"]::before {
      display: none !important;
      background-image: none !important;
    }
    
    header .desktop-nav a[href="#about"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important;
    }
    
    header .desktop-nav a[href="#team"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'/%3E%3C/svg%3E") !important;
    }
    
  }
  
  header .desktop-nav a[href="#mission-vision"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E") !important;
  }
  
  /* デフォルトアイコンを無効化 */
  header .desktop-nav a::before {
    background-image: none !important;
  }
  
  header .desktop-nav a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
  }
  
  /* モバイルメニューボタンを非表示 */
  header .mobile-menu-button {
    display: none !important;
  }
}

/* デスクトップでのレイアウト調整 */
@media (min-width: 1024px) {
  /* メインコンテンツエリアの調整 */
  main {
    margin-left: 200px !important;
    padding-left: 0 !important;
    width: calc(100% - 200px) !important;
  }
  
  /* フッターの調整 */
  footer {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
}
  
  /* ヒーローセクションの調整 */
  #home {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* 全セクションの調整 */
  main section {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* コンテナの調整 */
  main .container {
    max-width: 1200px !important;
  }
  
  /* メインコンテンツのパディング */
  main {
    padding-bottom: 0 !important;
  }
}

/* WordPress specific adjustments */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site main {
  flex: 1;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Layout Utilities */
.flex { display: flex; }
.hidden { display: none; }
.block { display: block; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Spacing */
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.pb-4 { padding-bottom: 1rem; }

/* Sizing */
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-15 { width: 3.75rem; }
.h-15 { height: 3.75rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }

/* Position */
.top-0 { top: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Colors */
.text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.text-blue-600 { color: #2563eb; }

/* Typography */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }

/* Background */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-background { background-color: #ffffff; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgb(37 99 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.from-cyan-400 { --tw-gradient-from: #22d3ee; }
.via-blue-400 { --tw-gradient-via: #60a5fa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-purple-400 { --tw-gradient-to: #c084fc; }
.from-blue-600\/20 { --tw-gradient-from: rgb(37 99 235 / 0.2); }
.to-amber-500\/10 { --tw-gradient-to: rgb(245 158 11 / 0.1); }

/* Background transparency */
.bg-black\/20 { background-color: rgb(0 0 0 / 0.2); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }

/* Border and Effects */
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.object-contain { object-fit: contain; }
.overflow-hidden { overflow: hidden; }

/* Transitions */
.transition-colors { 
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transition-duration: 150ms; 
}
.transition-all { 
  transition-property: all; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transition-duration: 300ms; 
}
.duration-300 { transition-duration: 300ms; }

/* Hover Effects */
.hover\:text-gray-200:hover { color: #e5e7eb; }
.hover\:text-blue-600:hover { color: #2563eb; }
.hover\:text-white:hover { color: #ffffff; }

/* Responsive Utilities */
@media (min-width: 640px) {
  .container { max-width: 640px; }
  .sm\:block { display: block; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:space-y-0 > * + * { margin-top: 0rem; }
  .sm\:space-x-12 > * + * { margin-left: 3rem; }
}

@media (min-width: 768px) {
  .container { max-width: 768px; }
  .md\:hidden { display: none; }
  .md\:flex { display: flex; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .container { max-width: 1024px; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .lg\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
  .lg\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* Header Styles */
header {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header.scrolled {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(147, 51, 234, 0.95));
  backdrop-filter: blur(20px);
}

/* Logo styles */
.custom-logo img {
  transition: transform 0.3s ease;
}

.custom-logo img:hover {
  transform: scale(1.05);
}

/* Text shadow for header text */
header .text-white {
  text-shadow: none;
}

/* Navigation Styles */
.menu-item {
  list-style: none;
}

.menu-item a {
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

/* Mobile menu toggle button */
#mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

#mobile-menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#mobile-menu-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Hero Section Styles */
.hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-image.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  z-index: 2;
}

/* Text gradients */
.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.text-transparent {
  color: transparent;
}

.drop-shadow-lg {
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

/* Additional Utility Classes */
.text-foreground { color: #1e293b !important; } /* Dark slate color */
.bg-foreground { background-color: #1e293b; }
.primary { color: #3b82f6; }
.primary-foreground { color: #ffffff; }

/* Additional Responsive Classes */
@media (min-width: 640px) {
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

/* Focus states */
.focus\:absolute:focus { position: absolute; }
.focus\:top-4:focus { top: 1rem; }
.focus\:left-4:focus { left: 1rem; }
.focus\:bg-primary:focus { background-color: #3b82f6; }
.focus\:text-primary-foreground:focus { color: #ffffff; }
.focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:rounded:focus { border-radius: 0.25rem; }

/* Animation classes */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Additional text sizes */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* Additional colors */
.text-amber-400 { color: #fbbf24; }
.text-amber-300 { color: #fcd34d; }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.text-cyan-400 { color: #22d3ee; }
.text-purple-400 { color: #c084fc; }

/* Background colors for sections */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-blue-50 { background-color: #eff6ff; }

/* Styling for each section */
section {
  padding: 4rem 1rem;
}



#about {
  background-color: #ffffff;
}



#team {
  background-color: #f0f9ff;
}

#contact {
  background-color: #fef3c7;
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: #3b82f6;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #2563eb;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #3b82f6;
  font-weight: 500;
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
  cursor: pointer;
  /* transition removed */
  text-decoration: none;
  font-size: 0.875rem;
}

.btn-secondary:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Card styles */
.card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

/* Enhanced Card Component Matching React Version */

/* Card base styles - exact match to React Card component */
.value-card {
  background-color: hsl(0 0% 100%) !important; /* bg-card */
  color: hsl(222.2 84% 4.9%) !important; /* text-card-foreground */
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* gap-6 */
  border-radius: 0.75rem !important; /* rounded-xl */
  border: 1px solid hsl(214.3 31.8% 91.4%) !important; /* border */
  backdrop-filter: blur(8px) !important;
  background-color: rgba(255, 255, 255, 0.8) !important; /* bg-white/80 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Card hover effects - removed */

/* Card content - exact match to React CardContent */
.value-card .card-content {
  padding: 1.5rem !important; /* px-6 */
  padding-bottom: 1.5rem !important; /* [&:last-child]:pb-6 */
}

/* Override any previous card styling to match React exactly */
.value-card.bg-white-80.backdrop-blur-sm.border.border-blue-100 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
}

/* Icon container styling - exact match */
.value-card .w-16.h-16 {
  width: 4rem !important;
  height: 4rem !important;
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1)) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Enhanced SVG icon styling */
.value-card .w-16.h-16 svg {
  width: 2rem !important; /* h-8 w-8 */
  height: 2rem !important;
  color: #3b82f6 !important; /* text-primary */
}

/* Text styling within cards */
.value-card h4 {
  font-weight: 500 !important; /* font-medium */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin-bottom: 0 !important;
}

.value-card .description p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
  margin: 0 !important;
}

/* Space-y-4 utility for card content */
.value-card .card-content.space-y-4 > * + * {
  margin-top: 1rem !important;
}

.value-card .card-content.space-y-4 > *:first-child {
  margin-top: 0 !important;
}

/* Grid layouts */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form styles */
.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 120px;
}

.form-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* WordPress alignment classes */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

/* Image styles */
img {
  max-width: 100%;
  height: auto;
}

/* List styles */
ul, ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Additional transparency classes */
.from-black\/30 { --tw-gradient-from: rgb(0 0 0 / 0.3); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/20 { --tw-gradient-via: rgb(0 0 0 / 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-black\/30 { --tw-gradient-to: rgb(0 0 0 / 0.3); }

/* Higher opacity background classes */
.from-black\/50 { --tw-gradient-from: rgb(0 0 0 / 0.5); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/40 { --tw-gradient-via: rgb(0 0 0 / 0.4); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-black\/50 { --tw-gradient-to: rgb(0 0 0 / 0.5); }

/* ==========================================================================
   Enhanced Responsive Design Fixes
   ========================================================================== */

/* Grid System Improvements */
@media (max-width: 640px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .text-3xl, .text-4xl, .text-5xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  /* Hero Section Mobile */
  #home .hero-title {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  
  .hero-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* Mobile Navigation Improvements */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-menu.active {
    display: flex;
  }
  
  .mobile-menu a {
    color: white;
    font-size: 1.25rem;
    margin: 1rem 0;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .mobile-menu a:hover {
    color: #f59e0b;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .hero-title {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Blog Section Styles */
#blog {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

#blog h2 {
  text-align: center;
}

#blog .text-center p {
  text-align: center !important;
}

/* ブログセクションのグリッドレイアウト */
#blog .grid {
  display: grid !important;
}

#blog .grid.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr) !important;
}

@media (min-width: 768px) {
  #blog .grid.md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  #blog .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

#blog .gap-8 {
  gap: 2rem !important;
}

/* React Card風のカード要素 */
#blog .overflow-hidden {
  overflow: hidden !important;
}

#blog .hover\:shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

#blog .transition-shadow {
  transition: box-shadow 0.3s ease !important;
}

#blog .bg-white\/70 {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

#blog .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#blog .h-full {
  height: 100% !important;
}

#blog .flex {
  display: flex !important;
}

#blog .flex-col {
  flex-direction: column !important;
}

/* アスペクト比維持 */
#blog .aspect-video {
  aspect-ratio: 16 / 9 !important;
}

/* 画像のホバー効果 */
#blog img.hover\:scale-105:hover {
  transform: scale(1.05) !important;
}

#blog .transition-transform {
  transition: transform 0.3s ease !important;
}

/* カード内のパディング */
#blog .p-6 {
  padding: 1.5rem !important;
}

/* フレックスボックスの flex-1 */
#blog .flex-1 {
  flex: 1 !important;
}

/* margin-top: auto 用 */
#blog .mt-auto {
  margin-top: auto !important;
}

/* テキストクランプ */
#blog .-webkit-line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#blog .-webkit-line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* アニメーション遅延の適用 */
#blog [style*="animation-delay"] {
  opacity: 0;
  animation: slideUp 0.8s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ボタンのホバー効果を強制適用 */
#blog a[onmouseover] {
  /* transition removed */
}

/* サンプルカードのスタイリング強化 */
#blog .w-full.h-full {
  width: 100% !important;
  height: 100% !important;
}

#blog .object-cover {
  object-fit: cover !important;
}

#blog .items-center {
  align-items: center !important;
}

#blog .justify-center {
  justify-content: center !important;
}

/* ブログセクションの追加スタイリング調整 */
#blog .text-center.mb-16 {
  margin-bottom: 4rem !important;
}

#blog .text-center.mb-16 h2 {
  margin-bottom: 1.5rem !important;
}

#blog .text-center.mb-16 p {
  line-height: 1.75 !important;
  max-width: 48rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#blog .grid.mb-12 {
  margin-bottom: 3rem !important;
}

/* カード内の要素間隔の統一 */
#blog .overflow-hidden > div[style*="padding: 24px"] {
  padding: 24px !important;
}

/* バッジの改良 */
#blog span[style*="border-radius: 6px"] {
  transition: all 0.2s ease !important;
}

#blog span[style*="border-radius: 6px"]:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

/* ボタンパディングの統一 */
#blog a[style*="padding: 12px 16px"] {
  padding: 12px 16px !important;
}

/* もっと見るボタンエリアの間隔 */
#blog .text-center:last-child {
  margin-top: 2rem !important;
}

/* ===== NAVIGATION COMPLETE OVERRIDES (React Style Matching) ===== */
/* すべてのナビゲーション要素からリストスタイルと下線を完全削除 */
header nav, header nav *, 
.desktop-nav, .desktop-nav *,
.mobile-nav, .mobile-nav *,
#mobile-menu, #mobile-menu *,
.wp-nav-menu, .wp-nav-menu *,
.menu, .menu *,
ul.menu, li.menu-item {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* すべてのナビゲーションリンクから下線を完全削除 */
header nav a, 
.desktop-nav a,
.mobile-nav a,
.mobile-nav-link,
nav .menu-item a,
.wp-nav-menu a,
.menu a,
ul.menu a,
li.menu-item a {
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* デスクトップナビゲーションの間隔調整 */
header nav a {
  margin-right: 2.5rem !important; /* 40px */
}

header nav a:last-child {
  margin-right: 0 !important;
}

/* ホバー時も下線なし */
header nav a:hover, 
.desktop-nav a:hover,
.mobile-nav a:hover,
.mobile-nav-link:hover,
nav .menu-item a:hover,
.wp-nav-menu a:hover,
.menu a:hover,
ul.menu a:hover,
li.menu-item a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
}

/* 疑似要素も削除 */
header nav a::before,
header nav a::after,
.desktop-nav a::before,
.desktop-nav a::after,
.mobile-nav a::before,
.mobile-nav a::after,
.mobile-nav-link::before,
.mobile-nav-link::after,
nav .menu-item a::before,
nav .menu-item a::after,
.wp-nav-menu a::before,
.wp-nav-menu a::after {
  content: none !important;
  display: none !important;
}

/* リストマーカーの疑似要素も削除 */
header nav li::before,
header nav ul::before,
.desktop-nav li::before,
.desktop-nav ul::before,
.mobile-nav li::before,
.mobile-nav ul::before,
nav .menu-item::before,
.wp-nav-menu li::before,
.wp-nav-menu ul::before,
.menu li::before,
ul.menu::before,
li.menu-item::before {
  content: none !important;
  display: none !important;
}

/* テーマのデフォルト設定を上書き */
#page .menu li,
#page .wp-nav-menu li,
#page nav li,
.wp-nav-menu .menu-item,
.menu .menu-item {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page .menu li::before,
#page .wp-nav-menu li::before,
#page nav li::before,
.wp-nav-menu .menu-item::before,
.menu .menu-item::before {
  content: none !important;
  display: none !important;
}

/* デスクトップナビゲーションの間隔調整（React版と同じ） */
header nav.hidden.lg\\:flex a {
  white-space: nowrap;
  display: inline-block;
  margin-right: 1.5rem; /* 24px間隔 */
}

header nav.hidden.lg\\:flex a:last-child {
  margin-right: 0; /* 最後の要素は右マージンなし */
}

/* モバイルナビゲーションの間隔調整 */
.mobile-nav {
  gap: 1rem; /* space-y-4相当 */
}

.mobile-nav a {
  display: block;
  white-space: nowrap;
}

/* ===== END NAVIGATION OVERRIDES ===== */

/* ===== RESPONSIVE UTILITIES ===== */
/* Media Queries for Tailwind-like responsive classes */

/* Large screens (1024px and up) - lg: prefix */
@media (min-width: 1024px) {
  .lg\\:flex {
    display: flex !important;
  }
  
  .lg\\:hidden {
    display: none !important;
  }
  
  .lg\\:block {
    display: block !important;
  }
  
  .lg\\:items-center {
    align-items: center !important;
  }
  
  .lg\\:space-x-10 > * + * {
    margin-left: 2.5rem !important;
  }
  
  .lg\\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .lg\\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  
  .lg\\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
}

/* Medium screens (768px and up) - md: prefix */
@media (min-width: 768px) {
  .md\\:flex {
    display: flex !important;
  }
  
  .md\\:hidden {
    display: none !important;
  }
  
  .md\\:block {
    display: block !important;
  }
  
  .md\\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  
  .md\\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

/* Small screens (640px and up) - sm: prefix */
@media (min-width: 640px) {
  .sm\\:flex {
    display: flex !important;
  }
  
  .sm\\:hidden {
    display: none !important;
  }
  
  .sm\\:block {
    display: block !important;
  }
}

/* Base responsive classes already applied */
.hidden {
  display: none !important;
}

.flex {
  display: flex !important;
}

.items-center {
  align-items: center !important;
}

.space-x-10 > * + * {
  margin-left: 2.5rem !important;
}

/* Additional utility classes for navigation */
.space-x-4 > * + * {
  margin-left: 1rem !important;
}

.space-y-4 > * + * {
  margin-top: 1rem !important;
}

.space-y-6 > * + * {
  margin-top: 1.5rem !important;
}

.space-y-8 > * + * {
  margin-top: 2rem !important;
}

.space-x-16 > * + * {
  margin-left: 4rem !important;
}

/* Primary color classes */
.text-primary {
  color: #3b82f6 !important;
}

.bg-primary {
  background-color: #3b82f6 !important;
}

.bg-primary\/10 {
  background-color: rgb(59 130 246 / 0.1) !important;
}

/* Additional gap utilities */
.gap-16 {
  gap: 4rem !important;
}

/* Margin and padding classes */
.mb-16 {
  margin-bottom: 4rem !important;
}

.mb-20 {
  margin-bottom: 5rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-0-5 {
  margin-top: 0.125rem !important;
}

/* Size classes */
.w-24 {
  width: 6rem !important;
}

.h-1 {
  height: 0.25rem !important;
}

.h-400px {
  height: 400px !important;
}

/* Border classes */
.border-blue-100 {
  border-color: #dbeafe !important;
}

/* Animation classes */
.animate-on-scroll {
  opacity: 1;
}

.animate-slide-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slide-right {
  animation: slideInRight 0.8s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Floating animation */
.floating-element {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Color and background utilities for About section */
.bg-primary-10 {
  background-color: rgba(59, 130, 246, 0.15); /* Stronger blue background */
}

.bg-amber-500-10 {
  background-color: rgba(245, 158, 11, 0.15); /* Stronger amber background */
}

.bg-white-80 {
  background-color: rgba(255, 255, 255, 0.95); /* More opaque white */
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.text-amber-600 {
  color: #d97706;
}

/* Enhanced shadow utilities */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover-shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Enhanced transition utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* ===== END ABOUT SECTION STYLES ===== */

/* ===== VALUE CARD STYLES (React Card Component Match) ===== */

/* Value cards grid layout */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Value card base styling - matching React Card component */
.value-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 from React Card */
  border-radius: 0.75rem !important; /* rounded-xl */
  border: 1px solid #dbeafe !important; /* border-blue-100 */
  background-color: rgba(255, 255, 255, 0.95) !important; /* More opaque bg-white/95 */
  backdrop-filter: blur(8px) !important; /* Stronger blur */
  /* transition removed */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* Stronger shadow */
}

/* Hover effect removed */

/* Card content styling - matching React CardContent */
.value-card .card-content {
  padding: 2rem !important; /* p-8 */
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

/* Remove default margin and use gap instead */
.value-card .card-content > * {
  margin-top: 0 !important;
}

/* Icon container - exact match to React version */
.value-card .w-16 {
  width: 4rem !important; /* w-16 */
  height: 4rem !important; /* h-16 */
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(245, 158, 11, 0.2)) !important; /* Stronger gradient */
  border-radius: 1rem !important; /* rounded-2xl */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important; /* mx-auto */
}

/* SVG icon styling */
.value-card .h-8 {
  height: 2rem !important; /* h-8 */
  width: 2rem !important; /* w-8 */
  color: #3b82f6 !important; /* Direct blue color instead of CSS variable */
  stroke: currentColor !important;
  stroke-width: 2 !important; /* Thicker stroke */
}

/* Card title styling */
.value-card h4 {
  font-weight: 600 !important; /* font-semibold instead of medium */
  color: #1e293b !important; /* Direct dark color instead of CSS variable */
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Card description styling */
.value-card .description p {
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.625 !important; /* leading-relaxed */
  color: #475569 !important; /* Direct gray color with better contrast */
  margin: 0 !important;
}

/* ===== END VALUE CARD STYLES ===== */

/* ===== MISSING UTILITY CLASSES ===== */

/* Size utilities */
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }

/* Padding utilities */
.p-8 { padding: 2rem !important; }

/* Border radius utilities */
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }

/* Background gradient utilities */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
.from-primary\/10 { 
  --tw-gradient-from: rgba(59, 130, 246, 0.2); /* Stronger gradient */
  --tw-gradient-to: rgba(59, 130, 246, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-amber-500\/10 { 
  --tw-gradient-to: rgba(245, 158, 11, 0.2); /* Stronger gradient */
}

/* Color utilities using CSS variables */
.text-primary { color: #3b82f6 !important; } /* Direct blue color */
.text-foreground { color: #1e293b !important; } /* Direct dark color */

/* Flex utilities */
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Font utilities */
.font-medium { font-weight: 500 !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* ===== END MISSING UTILITY CLASSES ===== */

/* ===== AMBER COLOR UTILITIES ===== */

/* Amber background with opacity */
.bg-amber-500\/10 { 
  background-color: rgba(245, 158, 11, 0.2) !important; /* Stronger amber background */
}

/* Amber text color */
.text-amber-600 { 
  color: #b45309 !important; /* Darker amber text */
}

/* Rounded utilities */
.rounded-full { 
  border-radius: 9999px !important; 
}

/* Inline utilities */
.inline-block { 
  display: inline-block !important; 
}

/* ===== END AMBER COLOR UTILITIES ===== */

/* ===== GRADIENT UTILITIES FOR DECORATIONS ===== */

/* Primary to amber gradient - for lines and elements */
.from-primary { 
  --tw-gradient-from: #3b82f6;
  --tw-gradient-to: rgb(59 130 246 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-500 { 
  --tw-gradient-to: #f59e0b;
}

/* Background gradients with opacity */
.from-primary\/5 { 
  --tw-gradient-from: rgba(59, 130, 246, 0.05);
  --tw-gradient-to: rgba(59, 130, 246, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-500\/5 { 
  --tw-gradient-to: rgba(245, 158, 11, 0.05);
}

/* Amber to amber-darker gradient for floating elements */
.from-amber-500 { 
  --tw-gradient-from: #f59e0b;
  --tw-gradient-to: rgb(245 158 11 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-600 { 
  --tw-gradient-to: #d97706;
}

/* Transform utilities */
.transform { 
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-3 { 
  --tw-rotate: 3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Additional size utilities for decorative elements */
.w-2 { width: 0.5rem !important; }
.h-2 { height: 0.5rem !important; }
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }

/* Position utilities for floating elements */
.-top-6 { top: -1.5rem !important; }
.-right-6 { right: -1.5rem !important; }

/* Flex shrink utility */
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Object fit utility */
.object-cover { object-fit: cover !important; }

/* Additional border utilities */
.border { border-width: 1px !important; }

/* Badge Component Styling - Exact React Match */

/* Badge base styling matching React Badge component */
.badge-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important; /* rounded-md */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.5rem !important; /* px-2 py-0.5 */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 500 !important; /* font-medium */
  width: fit-content !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 0.25rem !important;
  transition: color 0.2s, box-shadow 0.2s !important;
  overflow: hidden !important;
  background-color: rgba(245, 158, 11, 0.1) !important; /* bg-amber-500/10 */
  color: #d97706 !important; /* text-amber-600 */
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Enhanced About Us badge with better visibility */
span.inline-block.px-6.py-2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important; /* px-6 py-2 */
  background-color: rgba(245, 158, 11, 0.15) !important; /* More visible bg-amber-500/10 */
  color: #d97706 !important; /* text-amber-600 */
  font-weight: 500 !important; /* font-medium */
  margin-bottom: 1rem !important; /* mb-4 */
  border-radius: 9999px !important; /* rounded-full */
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.025em !important;
}

/* Enhanced Gradient Decorations and Visual Elements */

/* Gradient line decoration under section header */
.w-24.h-1.bg-gradient-to-r.from-primary.to-amber-500.mx-auto.mt-6.rounded-full {
  width: 6rem !important; /* w-24 */
  height: 0.25rem !important; /* h-1 */
  background: linear-gradient(to right, #3b82f6, #f59e0b) !important; /* from-primary to-amber-500 */
  margin: 1.5rem auto 0 auto !important; /* mx-auto mt-6 */
  border-radius: 9999px !important; /* rounded-full */
  display: block !important;
}

/* Enhanced gradient utility classes */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.from-primary {
  --tw-gradient-from: #3b82f6 !important;
  --tw-gradient-to: rgba(59, 130, 246, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-amber-500 {
  --tw-gradient-to: #f59e0b !important;
}

/* Enhanced floating decoration */
.absolute.-top-6.-right-6.w-12.h-12.bg-gradient-to-br.from-amber-500.to-amber-600.rounded-full.flex.items-center.justify-center.shadow-lg.floating-element {
  position: absolute !important;
  top: -1.5rem !important; /* -top-6 */
  right: -1.5rem !important; /* -right-6 */
  width: 3rem !important; /* w-12 */
  height: 3rem !important; /* h-12 */
  background: linear-gradient(to bottom right, #f59e0b, #d97706) !important; /* from-amber-500 to-amber-600 */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
  animation: floating 3s ease-in-out infinite !important;
  z-index: 10 !important;
}

/* Inner white dot for floating decoration */
.absolute.-top-6.-right-6.w-12.h-12 .w-3.h-3.bg-white.rounded-full {
  width: 0.75rem !important; /* w-3 */
  height: 0.75rem !important; /* h-3 */
  background-color: white !important; /* bg-white */
  border-radius: 9999px !important; /* rounded-full */
}

/* Image background decoration */
.absolute.inset-0.bg-gradient-to-br.from-primary\/5.to-amber-500\/5.rounded-2xl.transform.rotate-3 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important; /* inset-0 */
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), rgba(245, 158, 11, 0.05)) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  transform: rotate(3deg) !important; /* transform rotate-3 */
}

/* Enhanced image styling */
img.relative.rounded-2xl.shadow-2xl.w-full.h-400px.object-cover.border.border-blue-100 {
  position: relative !important;
  border-radius: 1rem !important; /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; /* shadow-2xl */
  width: 100% !important; /* w-full */
  height: 400px !important; /* h-400px */
  object-fit: cover !important; /* object-cover */
  border: 1px solid #dbeafe !important; /* border border-blue-100 */
}

/* Text and list styling enhancements */
.space-y-8 > * + * {
  margin-top: 2rem !important; /* space-y-8 */
}

.space-y-6 > * + * {
  margin-top: 1.5rem !important; /* space-y-6 */
}

.space-y-4 > * + * {
  margin-top: 1rem !important; /* space-y-4 */
}

.space-x-4 > * + * {
  margin-left: 1rem !important; /* space-x-4 */
}

/* Bullet Points and List Item Styling */

/* Bullet point styling - exact match to React version */
.flex.items-start.space-x-4 .w-6.h-6.bg-gradient-to-br.from-primary.to-amber-500.rounded-full.flex.items-center.justify-center.flex-shrink-0.mt-0-5 {
  width: 1.5rem !important; /* w-6 */
  height: 1.5rem !important; /* h-6 */
  background: linear-gradient(to bottom right, #3b82f6, #f59e0b) !important; /* from-primary to-amber-500 */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important; /* flex-shrink-0 */
  margin-top: 0.125rem !important; /* mt-0.5 */
}

/* Inner white dot for bullet points */
.flex.items-start.space-x-4 .w-6.h-6 .w-2.h-2.bg-white.rounded-full {
  width: 0.5rem !important; /* w-2 */
  height: 0.5rem !important; /* h-2 */
  background-color: white !important; /* bg-white */
  border-radius: 9999px !important; /* rounded-full */
}

/* List item text styling */
.flex.items-start.space-x-4 h4.font-medium.text-foreground.mb-1 {
  font-weight: 500 !important; /* font-medium */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 */
  margin-top: 0 !important;
}

.flex.items-start.space-x-4 p.text-sm.text-foreground {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Enhanced positioning utilities */
.mt-0\.5 {
  margin-top: 0.125rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

/* Ensure proper flexbox alignment */
.flex.items-start {
  display: flex !important;
  align-items: flex-start !important;
}

.items-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

/* Typography enhancements */
h3.text-2xl.lg\:text-3xl.font-medium.text-primary.leading-tight {
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 500 !important; /* font-medium */
  color: #3b82f6 !important; /* text-primary */
  line-height: 1.25 !important; /* leading-tight */
}

@media (min-width: 1024px) {
  h3.text-2xl.lg\:text-3xl.font-medium.text-primary.leading-tight {
    font-size: 1.875rem !important; /* lg:text-3xl */
  }
}

/* Section spacing */
.mb-20 {
  margin-bottom: 5rem !important;
}

.mb-16 {
  margin-bottom: 4rem !important;
}

.gap-16 {
  gap: 4rem !important;
}

/* Force CSS Application - Override Any Theme Conflicts */

/* Force gradient backgrounds with maximum specificity */
section#about .absolute.inset-0 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(245, 158, 11, 0.08)) !important;
  border-radius: 1rem !important;
  transform: rotate(3deg) !important;
  z-index: 1 !important;
}

/* Force floating element visibility */
section#about .floating-element {
  position: absolute !important;
  top: -1.5rem !important;
  right: -1.5rem !important;
  width: 3rem !important;
  height: 3rem !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
  animation: floating 3s ease-in-out infinite !important;
  z-index: 20 !important;
}

/* Force floating element inner dot */
section#about .floating-element .w-3 {
  width: 0.75rem !important;
  height: 0.75rem !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
}

/* Force badge visibility with high specificity */
section#about span.inline-block {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
  border-radius: 50px !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-size: 0.875rem !important;
}

/* Force gradient line visibility */
section#about .w-24.h-1 {
  width: 6rem !important;
  height: 0.25rem !important;
  background: linear-gradient(90deg, #3b82f6, #f59e0b) !important;
  margin: 1.5rem auto 0 auto !important;
  border-radius: 50px !important;
  display: block !important;
}

/* Force card styling with maximum priority */
section#about .value-card {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  /* transition removed */
  padding: 0 !important;
}

/* Force card hover effects - removed */

/* Force card icon backgrounds */
section#about .value-card .w-16.h-16 {
  width: 4rem !important;
  height: 4rem !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(245, 158, 11, 0.15)) !important;
  border-radius: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Force bullet point styling */
section#about .w-6.h-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: linear-gradient(135deg, #3b82f6, #f59e0b) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
}

/* Force bullet point inner dots */
section#about .w-6.h-6 .w-2.h-2 {
  width: 0.5rem !important;
  height: 0.5rem !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
}

/* Ensure animations work */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px) !important;
  }
  50% {
    transform: translateY(-10px) !important;
  }
}

/* Force text colors */
section#about .text-primary {
  color: #3b82f6 !important;
}

section#about .text-foreground {
  color: hsl(222.2, 84%, 4.9%) !important;
}

/*
Theme Name: FeelFlow
Description: AI技術で心と体の調和を実現するWordPressテーマ
Version: 2.0.0
Author: FeelFlow Team
*/

/* CSS Custom Properties (Variables) */
:root {
  --primary: #3b82f6;
  --primary-foreground: #f8fafc;
  --secondary: #f3f4f6;
  --secondary-foreground: #111827;
  --muted: #f3f4f6;
  --muted-foreground: #6b7280;
  --accent: #f3f4f6;
  --accent-foreground: #111827;
  --destructive: #ef4444;
  --destructive-foreground: #f8fafc;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #3b82f6;
  --background: #ffffff;
  --foreground: #1e293b;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --radius: 0.5rem;
  
  /* グラデーションカラーパレット - 一括変更用 */
  --gradient-primary: linear-gradient(to bottom right, #062456, #8E8B95, #132343);
  --gradient-primary-hover: linear-gradient(to bottom right, #0a2a5a, #a09199, #1a2e4a);
  --gradient-primary-135: linear-gradient(135deg, #062456, #8E8B95, #132343);
  --gradient-primary-135-hover: linear-gradient(135deg, #0a2a5a, #a09199, #1a2e4a);
  --gradient-primary-lr: linear-gradient(to right, #062456, #8E8B95, #132343);
  
  /* オーバーレイ用（透明度付き） */
  --gradient-overlay: linear-gradient(to bottom right, rgba(6, 36, 86, 0.3), rgba(142, 139, 149, 0.1), rgba(19, 35, 67, 0.2));
  --gradient-bg-light: linear-gradient(to bottom right, rgba(6, 36, 86, 0.05), rgba(142, 139, 149, 0.05), rgba(19, 35, 67, 0.05));
  --gradient-bg-medium: linear-gradient(to bottom right, rgba(6, 36, 86, 0.1), rgba(142, 139, 149, 0.1), rgba(19, 35, 67, 0.1));
  --gradient-top: linear-gradient(to top, rgba(6, 36, 86, 0.4), transparent);
  --gradient-accent: linear-gradient(to right, transparent, rgba(6, 36, 86, 0.3), transparent);
  
  /* 個別カラー */
  --color-primary-1: #062456;
  --color-primary-2: #8E8B95;
  --color-primary-3: #132343;
  --color-primary-1-hover: #0a2a5a;
  --color-primary-2-hover: #a09199;
  --color-primary-3-hover: #1a2e4a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #1e293b;
  background-color: #ffffff;
  position: relative;
}

@media (min-width: 1024px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    pointer-events: none;
    z-index: 9999;
  }
  
  
  header .container {
    max-width: 1200px !important;
    width: 100% !important;
    padding: 0 2rem !important;
    margin: 0 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  header .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    gap: 2rem !important;
    width: 100% !important;
  }
  
  /* ロゴエリア */
  header .flex.items-center.space-x-3 {
    width: auto !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  
  /* デスクトップナビゲーション */
  header .desktop-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    gap: 0.5rem !important;
    order: 2 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
  }
  
  header .desktop-nav a {
    color: white !important;
    text-decoration: none !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    width: auto !important;
    margin: 0 !important;
    /* transition removed */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    min-width: 80px !important;
  }
  
  /* ナビゲーションアイコン */
  header .desktop-nav a::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: invert(1) !important;
  }
  
  @media (min-width: 1024px) {
    header .desktop-nav a[href="#home"]::before,
    header .desktop-nav a:first-child::before,
    header .desktop-nav a[href*="home"]::before,
    header .desktop-nav a[href="/"]::before,
    header .desktop-nav a[href$="/"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E") !important;
    }
    
    
    header .desktop-nav a[href="#blog"]::before {
      display: none !important;
      background-image: none !important;
    }
    
    header .desktop-nav a[href="#about"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important;
    }
    
    header .desktop-nav a[href="#team"]::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'/%3E%3C/svg%3E") !important;
    }
    
  }
  
  header .desktop-nav a[href="#mission-vision"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E") !important;
  }
  
  /* デフォルトアイコンを無効化 */
  header .desktop-nav a::before {
    background-image: none !important;
  }
  
  header .desktop-nav a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
  }
  
  /* モバイルメニューボタンを非表示 */
  header .mobile-menu-button {
    display: none !important;
  }
}

/* デスクトップでのレイアウト調整 */
@media (min-width: 1024px) {
  /* メインコンテンツエリアの調整 */
  main {
    margin-left: 200px !important;
    padding-left: 0 !important;
    width: calc(100% - 200px) !important;
  }
  
  /* フッターの調整 */
  footer {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
}
  
  /* ヒーローセクションの調整 */
  #home {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* 全セクションの調整 */
  main section {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* コンテナの調整 */
  main .container {
    max-width: 1200px !important;
  }
  
  /* メインコンテンツのパディング */
  main {
    padding-bottom: 0 !important;
  }
}

/* WordPress specific adjustments */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site main {
  flex: 1;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Layout Utilities */
.flex { display: flex; }
.hidden { display: none; }
.block { display: block; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Spacing */
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.pb-4 { padding-bottom: 1rem; }

/* Sizing */
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-15 { width: 3.75rem; }
.h-15 { height: 3.75rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }

/* Position */
.top-0 { top: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Colors */
.text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.text-blue-600 { color: #2563eb; }

/* Typography */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }

/* Background */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-background { background-color: #ffffff; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgb(37 99 235 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.from-cyan-400 { --tw-gradient-from: #22d3ee; }
.via-blue-400 { --tw-gradient-via: #60a5fa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-purple-400 { --tw-gradient-to: #c084fc; }
.from-blue-600\/20 { --tw-gradient-from: rgb(37 99 235 / 0.2); }
.to-amber-500\/10 { --tw-gradient-to: rgb(245 158 11 / 0.1); }

/* Background transparency */
.bg-black\/20 { background-color: rgb(0 0 0 / 0.2); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }

/* Border and Effects */
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.object-contain { object-fit: contain; }
.overflow-hidden { overflow: hidden; }

/* Transitions */
.transition-colors { 
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transition-duration: 150ms; 
}
.transition-all { 
  transition-property: all; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transition-duration: 300ms; 
}
.duration-300 { transition-duration: 300ms; }

/* Hover Effects */
.hover\:text-gray-200:hover { color: #e5e7eb; }
.hover\:text-blue-600:hover { color: #2563eb; }
.hover\:text-white:hover { color: #ffffff; }

/* Responsive Utilities */
@media (min-width: 640px) {
  .container { max-width: 640px; }
  .sm\:block { display: block; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:space-y-0 > * + * { margin-top: 0rem; }
  .sm\:space-x-12 > * + * { margin-left: 3rem; }
}

@media (min-width: 768px) {
  .container { max-width: 768px; }
  .md\:hidden { display: none; }
  .md\:flex { display: flex; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .container { max-width: 1024px; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .lg\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
  .lg\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* Header Styles */
header {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header.scrolled {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(147, 51, 234, 0.95));
  backdrop-filter: blur(20px);
}

/* Logo styles */
.custom-logo img {
  transition: transform 0.3s ease;
}

.custom-logo img:hover {
  transform: scale(1.05);
}

/* Text shadow for header text */
header .text-white {
  text-shadow: none;
}

/* Navigation Styles */
.menu-item {
  list-style: none;
}

.menu-item a {
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

/* Mobile menu toggle button */
#mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

#mobile-menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#mobile-menu-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Hero Section Styles */
.hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-image.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  z-index: 2;
}

/* Text gradients */
.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.text-transparent {
  color: transparent;
}

.drop-shadow-lg {
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

/* Additional Utility Classes */
.text-foreground { color: #1e293b !important; } /* Dark slate color */
.bg-foreground { background-color: #1e293b; }
.primary { color: #3b82f6; }
.primary-foreground { color: #ffffff; }

/* Additional Responsive Classes */
@media (min-width: 640px) {
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

/* Focus states */
.focus\:absolute:focus { position: absolute; }
.focus\:top-4:focus { top: 1rem; }
.focus\:left-4:focus { left: 1rem; }
.focus\:bg-primary:focus { background-color: #3b82f6; }
.focus\:text-primary-foreground:focus { color: #ffffff; }
.focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:rounded:focus { border-radius: 0.25rem; }

/* Animation classes */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Additional text sizes */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

/* Additional colors */
.text-amber-400 { color: #fbbf24; }
.text-amber-300 { color: #fcd34d; }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.text-cyan-400 { color: #22d3ee; }
.text-purple-400 { color: #c084fc; }

/* Background colors for sections */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-blue-50 { background-color: #eff6ff; }

/* Styling for each section */
section {
  padding: 80px 0;
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: #3b82f6;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #2563eb;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #3b82f6;
  font-weight: 500;
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
  cursor: pointer;
  /* transition removed */
  text-decoration: none;
  font-size: 0.875rem;
}

.btn-secondary:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Card styles */
.card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

/* Enhanced Card Component Matching React Version */

/* Card base styles - exact match to React Card component */
.value-card {
  background-color: hsl(0 0% 100%) !important; /* bg-card */
  color: hsl(222.2 84% 4.9%) !important; /* text-card-foreground */
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* gap-6 */
  border-radius: 0.75rem !important; /* rounded-xl */
  border: 1px solid hsl(214.3 31.8% 91.4%) !important; /* border */
  backdrop-filter: blur(8px) !important;
  background-color: rgba(255, 255, 255, 0.8) !important; /* bg-white/80 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Card hover effects - removed */

/* Card content - exact match to React CardContent */
.value-card .card-content {
  padding: 1.5rem !important; /* px-6 */
  padding-bottom: 1.5rem !important; /* [&:last-child]:pb-6 */
}

/* Override any previous card styling to match React exactly */
.value-card.bg-white-80.backdrop-blur-sm.border.border-blue-100 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
}

/* Icon container styling - exact match */
.value-card .w-16.h-16 {
  width: 4rem !important;
  height: 4rem !important;
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1)) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Enhanced SVG icon styling */
.value-card .w-16.h-16 svg {
  width: 2rem !important; /* h-8 w-8 */
  height: 2rem !important;
  color: #3b82f6 !important; /* text-primary */
}

/* Text styling within cards */
.value-card h4 {
  font-weight: 500 !important; /* font-medium */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin-bottom: 0 !important;
}

.value-card .description p {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  line-height: 1.625 !important; /* leading-relaxed */
  margin: 0 !important;
}

/* Space-y-4 utility for card content */
.value-card .card-content.space-y-4 > * + * {
  margin-top: 1rem !important;
}

.value-card .card-content.space-y-4 > *:first-child {
  margin-top: 0 !important;
}

/* Grid layouts */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form styles */
.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 120px;
}

.form-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* WordPress alignment classes */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

/* Image styles */
img {
  max-width: 100%;
  height: auto;
}

/* List styles */
ul, ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Additional transparency classes */
.from-black\/30 { --tw-gradient-from: rgb(0 0 0 / 0.3); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/20 { --tw-gradient-via: rgb(0 0 0 / 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-black\/30 { --tw-gradient-to: rgb(0 0 0 / 0.3); }

/* Higher opacity background classes */
.from-black\/50 { --tw-gradient-from: rgb(0 0 0 / 0.5); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/40 { --tw-gradient-via: rgb(0 0 0 / 0.4); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-black\/50 { --tw-gradient-to: rgb(0 0 0 / 0.5); }

/* ==========================================================================
   Enhanced Responsive Design Fixes
   ========================================================================== */

/* Grid System Improvements */
@media (max-width: 640px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .text-3xl, .text-4xl, .text-5xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  /* Hero Section Mobile */
  #home .hero-title {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  
  .hero-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* Mobile Navigation Improvements */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-menu.active {
    display: flex;
  }
  
  .mobile-menu a {
    color: white;
    font-size: 1.25rem;
    margin: 1rem 0;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .mobile-menu a:hover {
    color: #f59e0b;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .hero-title {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Blog Section Styles */
#blog h2 {
  text-align: center;
}

#blog .text-center p {
  text-align: center !important;
}

/* ブログセクションのグリッドレイアウト */
#blog .grid {
  display: grid !important;
}

#blog .grid.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr) !important;
}

@media (min-width: 768px) {
  #blog .grid.md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  #blog .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

#blog .gap-8 {
  gap: 2rem !important;
}

/* React Card風のカード要素 */
#blog .overflow-hidden {
  overflow: hidden !important;
}

#blog .hover\:shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

#blog .transition-shadow {
  transition: box-shadow 0.3s ease !important;
}

#blog .bg-white\/70 {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

#blog .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#blog .h-full {
  height: 100% !important;
}

#blog .flex {
  display: flex !important;
}

#blog .flex-col {
  flex-direction: column !important;
}

/* アスペクト比維持 */
#blog .aspect-video {
  aspect-ratio: 16 / 9 !important;
}

/* 画像のホバー効果 */
#blog img.hover\:scale-105:hover {
  transform: scale(1.05) !important;
}

#blog .transition-transform {
  transition: transform 0.3s ease !important;
}

/* カード内のパディング */
#blog .p-6 {
  padding: 1.5rem !important;
}

/* フレックスボックスの flex-1 */
#blog .flex-1 {
  flex: 1 !important;
}

/* margin-top: auto 用 */
#blog .mt-auto {
  margin-top: auto !important;
}

/* テキストクランプ */
#blog .-webkit-line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#blog .-webkit-line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* アニメーション遅延の適用 */
#blog [style*="animation-delay"] {
  opacity: 0;
  animation: slideUp 0.8s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ボタンのホバー効果を強制適用 */
#blog a[onmouseover] {
  /* transition removed */
}

/* サンプルカードのスタイリング強化 */
#blog .w-full.h-full {
  width: 100% !important;
  height: 100% !important;
}

#blog .object-cover {
  object-fit: cover !important;
}

#blog .items-center {
  align-items: center !important;
}

#blog .justify-center {
  justify-content: center !important;
}

/* ブログセクションの追加スタイリング調整 */
#blog .text-center.mb-16 {
  margin-bottom: 4rem !important;
}

#blog .text-center.mb-16 h2 {
  margin-bottom: 1.5rem !important;
}

#blog .text-center.mb-16 p {
  line-height: 1.75 !important;
  max-width: 48rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#blog .grid.mb-12 {
  margin-bottom: 3rem !important;
}

/* カード内の要素間隔の統一 */
#blog .overflow-hidden > div[style*="padding: 24px"] {
  padding: 24px !important;
}

/* バッジの改良 */
#blog span[style*="border-radius: 6px"] {
  transition: all 0.2s ease !important;
}

#blog span[style*="border-radius: 6px"]:hover {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

/* ボタンパディングの統一 */
#blog a[style*="padding: 12px 16px"] {
  padding: 12px 16px !important;
}

/* もっと見るボタンエリアの間隔 */
#blog .text-center:last-child {
  margin-top: 2rem !important;
}

/* ===== NAVIGATION COMPLETE OVERRIDES (React Style Matching) ===== */
/* すべてのナビゲーション要素からリストスタイルと下線を完全削除 */
header nav, header nav *, 
.desktop-nav, .desktop-nav *,
.mobile-nav, .mobile-nav *,
#mobile-menu, #mobile-menu *,
.wp-nav-menu, .wp-nav-menu *,
.menu, .menu *,
ul.menu, li.menu-item {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* すべてのナビゲーションリンクから下線を完全削除 */
header nav a, 
.desktop-nav a,
.mobile-nav a,
.mobile-nav-link,
nav .menu-item a,
.wp-nav-menu a,
.menu a,
ul.menu a,
li.menu-item a {
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* デスクトップナビゲーションの間隔調整 */
header nav a {
  margin-right: 2.5rem !important; /* 40px */
}

header nav a:last-child {
  margin-right: 0 !important;
}

/* ホバー時も下線なし */
header nav a:hover, 
.desktop-nav a:hover,
.mobile-nav a:hover,
.mobile-nav-link:hover,
nav .menu-item a:hover,
.wp-nav-menu a:hover,
.menu a:hover,
ul.menu a:hover,
li.menu-item a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  border: none !important;
}

/* 疑似要素も削除 */
header nav a::before,
header nav a::after,
.desktop-nav a::before,
.desktop-nav a::after,
.mobile-nav a::before,
.mobile-nav a::after,
.mobile-nav-link::before,
.mobile-nav-link::after,
nav .menu-item a::before,
nav .menu-item a::after,
.wp-nav-menu a::before,
.wp-nav-menu a::after {
  content: none !important;
  display: none !important;
}

/* リストマーカーの疑似要素も削除 */
header nav li::before,
header nav ul::before,
.desktop-nav li::before,
.desktop-nav ul::before,
.mobile-nav li::before,
.mobile-nav ul::before,
nav .menu-item::before,
.wp-nav-menu li::before,
.wp-nav-menu ul::before,
.menu li::before,
ul.menu::before,
li.menu-item::before {
  content: none !important;
  display: none !important;
}

/* テーマのデフォルト設定を上書き */
#page .menu li,
#page .wp-nav-menu li,
#page nav li,
.wp-nav-menu .menu-item,
.menu .menu-item {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page .menu li::before,
#page .wp-nav-menu li::before,
#page nav li::before,
.wp-nav-menu .menu-item::before,
.menu .menu-item::before {
  content: none !important;
  display: none !important;
}

/* デスクトップナビゲーションの間隔調整（React版と同じ） */
header nav.hidden.lg\:flex a {
  white-space: nowrap;
  display: inline-block;
  margin-right: 1.5rem; /* 24px間隔 */
}

header nav.hidden.lg\:flex a:last-child {
  margin-right: 0; /* 最後の要素は右マージンなし */
}

/* モバイルナビゲーションの間隔調整 */
.mobile-nav {
  gap: 1rem; /* space-y-4相当 */
}

.mobile-nav a {
  display: block;
  white-space: nowrap;
}

/* ===== END NAVIGATION OVERRIDES ===== */

/* ===== RESPONSIVE UTILITIES ===== */
/* Media Queries for Tailwind-like responsive classes */

/* Large screens (1024px and up) - lg: prefix */
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex !important;
  }
  
  .lg\:hidden {
    display: none !important;
  }
  
  .lg\:block {
    display: block !important;
  }
  
  .lg\:items-center {
    align-items: center !important;
  }
  
  .lg\:space-x-10 > * + * {
    margin-left: 2.5rem !important;
  }
  
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .lg\:text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  
  .lg\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
}

/* Medium screens (768px and up) - md: prefix */
@media (min-width: 768px) {
  .md\:flex {
    display: flex !important;
  }
  
  .md\:hidden {
    display: none !important;
  }
  
  .md\:block {
    display: block !important;
  }
  
  .md\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  
  .md\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }
}

/* Small screens (640px and up) - sm: prefix */
@media (min-width: 640px) {
  .sm\:flex {
    display: flex !important;
  }
  
  .sm\:hidden {
    display: none !important;
  }
  
  .sm\:block {
    display: block !important;
  }
}

/* Base responsive classes already applied */
.hidden {
  display: none !important;
}

.flex {
  display: flex !important;
}

.items-center {
  align-items: center !important;
}

.space-x-10 > * + * {
  margin-left: 2.5rem !important;
}

/* Additional utility classes for navigation */
.space-x-4 > * + * {
  margin-left: 1rem !important;
}

.space-y-4 > * + * {
  margin-top: 1rem !important;
}

.space-y-6 > * + * {
  margin-top: 1.5rem !important;
}

.space-y-8 > * + * {
  margin-top: 2rem !important;
}

.space-x-16 > * + * {
  margin-left: 4rem !important;
}

/* Primary color classes */
.text-primary {
  color: #3b82f6 !important;
}

.bg-primary {
  background-color: #3b82f6 !important;
}

.bg-primary\/10 {
  background-color: rgb(59 130 246 / 0.1) !important;
}

/* Additional gap utilities */
.gap-16 {
  gap: 4rem !important;
}

/* Margin and padding classes */
.mb-16 {
  margin-bottom: 4rem !important;
}

.mb-20 {
  margin-bottom: 5rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-0-5 {
  margin-top: 0.125rem !important;
}

/* Size classes */
.w-24 {
  width: 6rem !important;
}

.h-1 {
  height: 0.25rem !important;
}

.h-400px {
  height: 400px !important;
}

/* Border classes */
.border-blue-100 {
  border-color: #dbeafe !important;
}

/* Animation classes */
.animate-on-scroll {
  opacity: 1;
}

.animate-slide-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slide-right {
  animation: slideInRight 0.8s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Floating animation */
.floating-element {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Color and background utilities for About section */
.bg-primary-10 {
  background-color: rgba(59, 130, 246, 0.15); /* Stronger blue background */
}

.bg-amber-500-10 {
  background-color: rgba(245, 158, 11, 0.15); /* Stronger amber background */
}

.bg-white-80 {
  background-color: rgba(255, 255, 255, 0.95); /* More opaque white */
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.text-amber-600 {
  color: #d97706;
}

/* Enhanced shadow utilities */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover-shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Enhanced transition utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* ===== END ABOUT SECTION STYLES ===== */

/* ===== VALUE CARD STYLES (React Card Component Match) ===== */

/* Value cards grid layout */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Value card base styling - matching React Card component */
.value-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 from React Card */
  border-radius: 0.75rem !important; /* rounded-xl */
  border: 1px solid #dbeafe !important; /* border-blue-100 */
  background-color: rgba(255, 255, 255, 0.95) !important; /* More opaque bg-white/95 */
  backdrop-filter: blur(8px) !important; /* Stronger blur */
  /* transition removed */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* Stronger shadow */
}

/* Hover effect removed */

/* Card content styling - matching React CardContent */
.value-card .card-content {
  padding: 2rem !important; /* p-8 */
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* space-y-4 */
}

/* Remove default margin and use gap instead */
.value-card .card-content > * {
  margin-top: 0 !important;
}

/* Icon container - exact match to React version */
.value-card .w-16 {
  width: 4rem !important; /* w-16 */
  height: 4rem !important; /* h-16 */
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(245, 158, 11, 0.2)) !important; /* Stronger gradient */
  border-radius: 1rem !important; /* rounded-2xl */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important; /* mx-auto */
}

/* SVG icon styling */
.value-card .h-8 {
  height: 2rem !important; /* h-8 */
  width: 2rem !important; /* w-8 */
  color: #3b82f6 !important; /* Direct blue color instead of CSS variable */
  stroke: currentColor !important;
  stroke-width: 2 !important; /* Thicker stroke */
}

/* Card title styling */
.value-card h4 {
  font-weight: 600 !important; /* font-semibold instead of medium */
  color: #1e293b !important; /* Direct dark color instead of CSS variable */
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Card description styling */
.value-card .description p {
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.625 !important; /* leading-relaxed */
  color: #475569 !important; /* Direct gray color with better contrast */
  margin: 0 !important;
}

/* ===== END VALUE CARD STYLES ===== */

/* ===== MISSING UTILITY CLASSES ===== */

/* Size utilities */
.w-16 { width: 4rem !important; }
.h-16 { height: 4rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }

/* Padding utilities */
.p-8 { padding: 2rem !important; }

/* Border radius utilities */
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }

/* Background gradient utilities */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
.from-primary\/10 { 
  --tw-gradient-from: rgba(59, 130, 246, 0.2); /* Stronger gradient */
  --tw-gradient-to: rgba(59, 130, 246, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-amber-500\/10 { 
  --tw-gradient-to: rgba(245, 158, 11, 0.2); /* Stronger gradient */
}

/* Color utilities using CSS variables */
.text-primary { color: #3b82f6 !important; } /* Direct blue color */
.text-foreground { color: #1e293b !important; } /* Direct dark color */

/* Flex utilities */
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Font utilities */
.font-medium { font-weight: 500 !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* ===== END MISSING UTILITY CLASSES ===== */

/* ===== AMBER COLOR UTILITIES ===== */

/* Amber background with opacity */
.bg-amber-500\/10 { 
  background-color: rgba(245, 158, 11, 0.2) !important; /* Stronger amber background */
}

/* Amber text color */
.text-amber-600 { 
  color: #b45309 !important; /* Darker amber text */
}

/* Rounded utilities */
.rounded-full { 
  border-radius: 9999px !important; 
}

/* Inline utilities */
.inline-block { 
  display: inline-block !important; 
}

/* ===== END AMBER COLOR UTILITIES ===== */

/* ===== GRADIENT UTILITIES FOR DECORATIONS ===== */

/* Primary to amber gradient - for lines and elements */
.from-primary { 
  --tw-gradient-from: #3b82f6;
  --tw-gradient-to: rgb(59 130 246 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-500 { 
  --tw-gradient-to: #f59e0b;
}

/* Background gradients with opacity */
.from-primary\/5 { 
  --tw-gradient-from: rgba(59, 130, 246, 0.05);
  --tw-gradient-to: rgba(59, 130, 246, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-500\/5 { 
  --tw-gradient-to: rgba(245, 158, 11, 0.05);
}

/* Amber to amber-darker gradient for floating elements */
.from-amber-500 { 
  --tw-gradient-from: #f59e0b;
  --tw-gradient-to: rgb(245 158 11 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-amber-600 { 
  --tw-gradient-to: #d97706;
}

/* Transform utilities */
.transform { 
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-3 { 
  --tw-rotate: 3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Additional size utilities for decorative elements */
.w-2 { width: 0.5rem !important; }
.h-2 { height: 0.5rem !important; }
.w-3 { width: 0.75rem !important; }
.h-3 { height: 0.75rem !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }

/* Position utilities for floating elements */
.-top-6 { top: -1.5rem !important; }
.-right-6 { right: -1.5rem !important; }

/* Flex shrink utility */
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Object fit utility */
.object-cover { object-fit: cover !important; }

/* Additional border utilities */
.border { border-width: 1px !important; }

/* Badge Component Styling - Exact React Match */

/* Badge base styling matching React Badge component */
.badge-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important; /* rounded-md */
  border: 1px solid transparent !important;
  padding: 0.125rem 0.5rem !important; /* px-2 py-0.5 */
  font-size: 0.75rem !important; /* text-xs */
  font-weight: 500 !important; /* font-medium */
  width: fit-content !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 0.25rem !important;
  transition: color 0.2s, box-shadow 0.2s !important;
  overflow: hidden !important;
  background-color: rgba(245, 158, 11, 0.1) !important; /* bg-amber-500/10 */
  color: #d97706 !important; /* text-amber-600 */
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Enhanced About Us badge with better visibility */
span.inline-block.px-6.py-2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important; /* px-6 py-2 */
  background-color: rgba(245, 158, 11, 0.15) !important; /* More visible bg-amber-500/10 */
  color: #d97706 !important; /* text-amber-600 */
  font-weight: 500 !important; /* font-medium */
  margin-bottom: 1rem !important; /* mb-4 */
  border-radius: 9999px !important; /* rounded-full */
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.025em !important;
}

/* Enhanced Gradient Decorations and Visual Elements */

/* Gradient line decoration under section header */
.w-24.h-1.bg-gradient-to-r.from-primary.to-amber-500.mx-auto.mt-6.rounded-full {
  width: 6rem !important; /* w-24 */
  height: 0.25rem !important; /* h-1 */
  background: linear-gradient(to right, #3b82f6, #f59e0b) !important; /* from-primary to-amber-500 */
  margin: 1.5rem auto 0 auto !important; /* mx-auto mt-6 */
  border-radius: 9999px !important; /* rounded-full */
  display: block !important;
}

/* Enhanced gradient utility classes */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.from-primary {
  --tw-gradient-from: #3b82f6 !important;
  --tw-gradient-to: rgba(59, 130, 246, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-amber-500 {
  --tw-gradient-to: #f59e0b !important;
}

/* Enhanced floating decoration */
.absolute.-top-6.-right-6.w-12.h-12.bg-gradient-to-br.from-amber-500.to-amber-600.rounded-full.flex.items-center.justify-center.shadow-lg.floating-element {
  position: absolute !important;
  top: -1.5rem !important; /* -top-6 */
  right: -1.5rem !important; /* -right-6 */
  width: 3rem !important; /* w-12 */
  height: 3rem !important; /* h-12 */
  background: linear-gradient(to bottom right, #f59e0b, #d97706) !important; /* from-amber-500 to-amber-600 */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
  animation: floating 3s ease-in-out infinite !important;
  z-index: 10 !important;
}

/* Inner white dot for floating decoration */
.absolute.-top-6.-right-6.w-12.h-12 .w-3.h-3.bg-white.rounded-full {
  width: 0.75rem !important; /* w-3 */
  height: 0.75rem !important; /* h-3 */
  background-color: white !important; /* bg-white */
  border-radius: 9999px !important; /* rounded-full */
}

/* Image background decoration */
.absolute.inset-0.bg-gradient-to-br.from-primary\/5.to-amber-500\/5.rounded-2xl.transform.rotate-3 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important; /* inset-0 */
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), rgba(245, 158, 11, 0.05)) !important;
  border-radius: 1rem !important; /* rounded-2xl */
  transform: rotate(3deg) !important; /* transform rotate-3 */
}

/* Enhanced image styling */
img.relative.rounded-2xl.shadow-2xl.w-full.h-400px.object-cover.border.border-blue-100 {
  position: relative !important;
  border-radius: 1rem !important; /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; /* shadow-2xl */
  width: 100% !important; /* w-full */
  height: 400px !important; /* h-400px */
  object-fit: cover !important; /* object-cover */
  border: 1px solid #dbeafe !important; /* border border-blue-100 */
}

/* Text and list styling enhancements */
.space-y-8 > * + * {
  margin-top: 2rem !important; /* space-y-8 */
}

.space-y-6 > * + * {
  margin-top: 1.5rem !important; /* space-y-6 */
}

.space-y-4 > * + * {
  margin-top: 1rem !important; /* space-y-4 */
}

.space-x-4 > * + * {
  margin-left: 1rem !important; /* space-x-4 */
}

/* Bullet Points and List Item Styling */

/* Bullet point styling - exact match to React version */
.flex.items-start.space-x-4 .w-6.h-6.bg-gradient-to-br.from-primary.to-amber-500.rounded-full.flex.items-center.justify-center.flex-shrink-0.mt-0-5 {
  width: 1.5rem !important; /* w-6 */
  height: 1.5rem !important; /* h-6 */
  background: linear-gradient(to bottom right, #3b82f6, #f59e0b) !important; /* from-primary to-amber-500 */
  border-radius: 9999px !important; /* rounded-full */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important; /* flex-shrink-0 */
  margin-top: 0.125rem !important; /* mt-0.5 */
}

/* Inner white dot for bullet points */
.flex.items-start.space-x-4 .w-6.h-6 .w-2.h-2.bg-white.rounded-full {
  width: 0.5rem !important; /* w-2 */
  height: 0.5rem !important; /* h-2 */
  background-color: white !important; /* bg-white */
  border-radius: 9999px !important; /* rounded-full */
}

/* List item text styling */
.flex.items-start.space-x-4 h4.font-medium.text-foreground.mb-1 {
  font-weight: 500 !important; /* font-medium */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin-bottom: 0.25rem !important; /* mb-1 */
  margin-top: 0 !important;
}

.flex.items-start.space-x-4 p.text-sm.text-foreground {
  font-size: 0.875rem !important; /* text-sm */
  color: hsl(222.2 84% 4.9%) !important; /* text-foreground */
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Enhanced positioning utilities */
.mt-0\.5 {
  margin-top: 0.125rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

/* Ensure proper flexbox alignment */
.flex.items-start {
  display: flex !important;
  align-items: flex-start !important;
}

.items-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

/* Typography enhancements */
h3.text-2xl.lg\:text-3xl.font-medium.text-primary.leading-tight {
  font-size: 1.5rem !important; /* text-2xl */
  font-weight: 500 !important; /* font-medium */
  color: #3b82f6 !important; /* text-primary */
  line-height: 1.25 !important; /* leading-tight */
}

@media (min-width: 1024px) {
  h3.text-2xl.lg\:text-3xl.font-medium.text-primary.leading-tight {
    font-size: 1.875rem !important; /* lg:text-3xl */
  }
}

/* Section spacing */
.mb-20 {
  margin-bottom: 5rem !important;
}

.mb-16 {
  margin-bottom: 4rem !important;
}

.gap-16 {
  gap: 4rem !important;
}

/* Force CSS Application - Override Any Theme Conflicts */

/* Force gradient backgrounds with maximum specificity */
section#about .absolute.inset-0 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(245, 158, 11, 0.08)) !important;
  border-radius: 1rem !important;
  transform: rotate(3deg) !important;
  z-index: 1 !important;
}

/* Force floating element visibility */
section#about .floating-element {
  position: absolute !important;
  top: -1.5rem !important;
  right: -1.5rem !important;
  width: 3rem !important;
  height: 3rem !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
  animation: floating 3s ease-in-out infinite !important;
  z-index: 20 !important;
}

/* Force floating element inner dot */
section#about .floating-element .w-3 {
  width: 0.75rem !important;
  height: 0.75rem !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
}

/* Force badge visibility with high specificity */
section#about span.inline-block {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
  border-radius: 50px !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-size: 0.875rem !important;
}

/* Force gradient line visibility */
section#about .w-24.h-1 {
  width: 6rem !important;
  height: 0.25rem !important;
  background: linear-gradient(90deg, #3b82f6, #f59e0b) !important;
  margin: 1.5rem auto 0 auto !important;
  border-radius: 50px !important;
  display: block !important;
}

/* Force card styling with maximum priority */
section#about .value-card {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  /* transition removed */
  padding: 0 !important;
}

/* Force card hover effects - removed */

/* Force card icon backgrounds */
section#about .value-card .w-16.h-16 {
  width: 4rem !important;
  height: 4rem !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(245, 158, 11, 0.15)) !important;
  border-radius: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Force bullet point styling */
section#about .w-6.h-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
  background: linear-gradient(135deg, #3b82f6, #f59e0b) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
}

/* Force bullet point inner dots */
section#about .w-6.h-6 .w-2.h-2 {
  width: 0.5rem !important;
  height: 0.5rem !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
}

/* Ensure animations work */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px) !important;
  }
  50% {
    transform: translateY(-10px) !important;
  }
}

/* Force text colors */
section#about .text-primary {
  color: #3b82f6 !important;
}

section#about .text-foreground {
  color: hsl(222.2, 84%, 4.9%) !important;
}

section#about .text-amber-600 {
  color: #b45309 !important; /* Darker amber text */
}


.bg-background {
    background-color: var(--background);
}

.bg-muted {
    background-color: var(--muted);
}

/* Animation visibility fix */
.animate-on-scroll, .animate-slide-left, .animate-slide-right {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-left {
    transform: translateX(-30px);
}

.animate-slide-right {
    transform: translateX(30px);
}

.animate-on-scroll.in-view, .animate-slide-left.in-view, .animate-slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}
  color: #d97706 !important;
}

/* WordPress Theme Override - Reset conflicting styles */

/* Reset any WordPress default styling that might interfere */
#about * {
  box-sizing: border-box !important;
}

#about img {
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
  outline: none !important;
}

/* Ensure gradients work cross-browser */
#about .bg-gradient-to-br,
#about .bg-gradient-to-r {
  background-image: -webkit-linear-gradient(135deg, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
  background-image: -moz-linear-gradient(135deg, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
  background-image: linear-gradient(135deg, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
}

/* Ensure all decorative elements are positioned correctly */
#about .relative {
  position: relative !important;
}

#about .absolute {
  position: absolute !important;
}

/* Force display of hidden elements */
#about .flex {
  display: flex !important;
}

#about .grid {
  display: grid !important;
}

#about .block {
  display: block !important;
}

#about .inline-block {
  display: inline-block !important;
}

#about .inline-flex {
  display: inline-flex !important;
}

/* WordPress specific overrides */
.wp-block-group #about .value-card,
.entry-content #about .value-card,
.post-content #about .value-card {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure WordPress doesn't override our custom spacing */
.wp-block-group #about .space-y-4 > * + *,
.entry-content #about .space-y-4 > * + *,
.post-content #about .space-y-4 > * + * {
  margin-top: 1rem !important;
}

/* Reset any list styling from WordPress */
#about ul,
#about ol,
#about li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure text styling is preserved */
#about h1, #about h2, #about h3, #about h4, #about h5, #about h6 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

#about p {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== ABOUT SECTION TEXT ALIGNMENT FIX ===== */

/* About section header text center alignment */
#about .text-center {
  text-align: center !important;
}

#about .text-center p {
  text-align: center !important;
}

/* Specific fix for About section description paragraph */
#about .text-lg.md\:text-xl.text-foreground.max-w-3xl.mx-auto.leading-relaxed {
  text-align: center !important;
  max-width: 48rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Additional text center classes for About section */
#about p.text-lg,
#about p.md\:text-xl,
#about .leading-relaxed {
  text-align: center !important;
}

/* Ensure section header container is centered */
#about .text-center.mb-16 {
  text-align: center !important;
}

#about .text-center.mb-16 * {
  text-align: center !important;
}

/* ===== SERVICES SECTION STYLES ===== */

/* Services Section Base Styles */
#services {
  background: var(--background) !important;
  position: relative !important;
  overflow: visible !important;
  padding: 5rem 0 !important;
}

/* Services Grid - Responsive Design */
#services .grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 2rem !important;
  margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
  #services .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

@media (min-width: 1024px) {
  #services .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
}

/* Responsive Typography for Cards */
@media (max-width: 767px) {
  #services .service-card h3 {
    font-size: 1.125rem !important;
  }
  
  #services .service-card p {
    font-size: 0.875rem !important;
  }
  
  #services .card-header {
    padding: 1rem 1rem 0.5rem 1rem !important;
  }
  
  #services .card-content {
    padding: 0 1rem 1rem 1rem !important;
  }
  
  #services .service-card img {
    height: 10rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #services .service-card h3 {
    font-size: 1.125rem !important;
  }
}

/* Enhanced hover effects for larger screens */
@media (min-width: 1024px) {
  #services .service-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  #services .service-card:hover {
    transform: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  }
  
  #services .service-card:active {
    transform: scale(0.98) !important;
  }
}

/* Service Cards - Enhanced React-like styling */
#services .service-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  animation: serviceCardFadeIn 0.8s ease forwards !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

#services .service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

/* CardHeader equivalent */
#services .card-header {
  padding: 1.5rem 1.5rem 0.75rem 1.5rem !important;
}

/* CardContent equivalent */
#services .card-content {
  padding: 0 1.5rem 1.5rem 1.5rem !important;
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Service Card Images with overlay effect */
#services .service-card .relative {
  position: relative !important;
  overflow: hidden !important;
}

#services .service-card img {
  width: 100% !important;
  height: 12rem !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

#services .service-card:hover img {
  transform: scale(1.05) !important;
}

/* Badge positioning and styling */
#services .service-card .absolute {
  position: absolute !important;
}

#services .service-card .top-4 {
  top: 1rem !important;
}

#services .service-card .left-4 {
  left: 1rem !important;
}

#services .service-card .right-4 {
  right: 1rem !important;
}

/* Badge Styles - React-like design */
#services .service-card span[class*="bg-gradient-to-r"] {
  background: linear-gradient(135deg, var(--primary) 0%, #f59e0b 100%) !important;
  color: white !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

#services .service-card span[class*="bg-white"] {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #3b82f6 !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(4px) !important;
}

/* Badge outline variant */
#services .badge-outline {
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  /* transition removed */
}

#services .badge-outline:hover {
  background: var(--primary) !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* Service Card Meta Info */
#services .service-card .text-sm {
  color: #1e293b !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

#services .service-card .gap-4 {
  gap: 1rem !important;
}

#services .service-card .gap-1 {
  gap: 0.25rem !important;
}

/* Service Card Titles */
#services .service-card h3 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  margin-bottom: 1rem !important;
  line-height: 1.375 !important;
}

/* Service Card Descriptions */
#services .service-card p {
  color: #1e293b !important;
  line-height: 1.625 !important;
  margin-bottom: 1rem !important;
}

/* Flex-1 for auto-stretching content */
#services .service-card .flex-1 {
  flex: 1 1 0% !important;
}

/* Line clamp utilities */
#services .line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#services .line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Feature Lists Styling */
#services .service-card .space-y-1 > * + * {
  margin-top: 0.25rem !important;
}

#services .service-card .flex.items-center.gap-2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

#services .service-card .text-green-500 {
  color: #10b981 !important;
}

/* Service Buttons - Ghost variant (React-like) */
#services .service-button-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  color: #1e293b !important;
  text-decoration: none !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: auto !important;
  position: relative !important;
  overflow: hidden !important;
  height: 2.25rem !important;
}

#services .service-button-ghost:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
  text-decoration: none !important;
}

#services .service-button-ghost svg {
  transition: transform 0.3s ease !important;
}

#services .service-button-ghost:hover svg {
  transform: translateX(2px) !important;
}

/* Service Buttons - Enhanced styling (for main CTA button) */
#services .service-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: linear-gradient(135deg, var(--primary) 0%, #f59e0b 100%) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: auto !important;
  position: relative !important;
  overflow: hidden !important;
}

#services .service-button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left 0.5s !important;
}

#services .service-button:hover::before {
  left: 100% !important;
}

#services .service-button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

#services .service-button svg {
  transition: transform 0.3s ease !important;
}

#services .service-button:hover svg {
  transform: translateX(2px) !important;
}

/* Services Section Header */
#services .text-center.mb-16 {
  margin-bottom: 4rem !important;
  text-align: center !important;
}

#services .text-center.mb-16 span.inline-block {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important;
  background-color: rgb(59 130 246 / 0.1) !important; /* Direct blue with 10% opacity */
  color: #3b82f6 !important; /* Direct blue color */
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  border: 1px solid rgb(59 130 246 / 0.2) !important; /* Direct blue with 20% opacity */
}

#services .text-center.mb-16 h2 {
  font-weight: 300 !important;
  color: #3b82f6 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.1 !important;
}

#services .text-center.mb-16 p {
  color: #1e293b !important;
  font-size: 1.25rem !important;
  line-height: 1.75 !important;
  max-width: 48rem !important;
  margin: 0 auto !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  #services .text-center.mb-16 p {
    font-size: 1.25rem !important;
  }
}

#services .w-24.h-1 {
  width: 6rem !important;
  height: 0.25rem !important;
  background: linear-gradient(90deg, var(--primary), #f59e0b) !important;
  margin: 1.5rem auto 0 auto !important;
  border-radius: 9999px !important;
  display: block !important;
}

/* Contact Button at bottom */
#services .text-center a[href="#contact"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 2rem !important;
  background: linear-gradient(135deg, var(--primary) 0%, #f59e0b 100%) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  /* transition removed */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

#services .text-center a[href="#contact"]:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Animation Keyframes */
@keyframes serviceCardFadeIn {
  from {
    opacity: 0 !important;
    transform: translateY(30px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ScrollReveal Animation Classes */
.scroll-reveal,
.animate-on-scroll {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.scroll-reveal.animated,
.animate-on-scroll.animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Animation delays for staggered effect */
#services .service-card[style*="animation-delay: 0.1s"] {
  animation-delay: 0.1s !important;
}

#services .service-card[style*="animation-delay: 0.2s"] {
  animation-delay: 0.2s !important;
}

#services .service-card[style*="animation-delay: 0.3s"] {
  animation-delay: 0.3s !important;
}

#services .service-card[style*="animation-delay: 0.4s"] {
  animation-delay: 0.4s !important;
}

#services .service-card[style*="animation-delay: 0.5s"] {
  animation-delay: 0.5s !important;
}

#services .service-card[style*="animation-delay: 0.6s"] {
  animation-delay: 0.6s !important;
}

#services .service-card[style*="animation-delay: 0.4s"] {
  animation-delay: 0.4s !important;
}

#services .service-card[style*="animation-delay: 0.5s"] {
  animation-delay: 0.5s !important;
}

#services .service-card[style*="animation-delay: 0.6s"] {
  animation-delay: 0.6s !important;
}

/* Utility Classes */
#services .flex {
  display: flex !important;
}

#services .flex-col {
  flex-direction: column !important;
}

#services .items-center {
  align-items: center !important;
}

#services .justify-center {
  justify-content: center !important;
}

#services .gap-2 {
  gap: 0.5rem !important;
}

#services .gap-4 {
  gap: 1rem !important;
}

#services .gap-8 {
  gap: 2rem !important;
}

#services .mb-3 {
  margin-bottom: 0.75rem !important;
}

#services .mb-4 {
  margin-bottom: 1rem !important;
}

#services .mb-12 {
  margin-bottom: 3rem !important;
}

#services .mt-auto {
  margin-top: auto !important;
}

#services .ml-2 {
  margin-left: 0.5rem !important;
}

#services .p-6 {
  padding: 1.5rem !important;
}

#services .px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

#services .py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

#services .px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#services .py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#services .px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

#services .py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

#services .border-blue-100 {
  border-color: #dbeafe !important;
}

#services .rounded {
  border-radius: 0.25rem !important;
}

#services .rounded-lg {
  border-radius: 0.5rem !important;
}

#services .rounded-t-lg {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

#services .rounded-full {
  border-radius: 9999px !important;
}

#services .w-4 {
  width: 1rem !important;
}

#services .h-4 {
  width: 1rem !important;
  height: 1rem !important;
}

#services .w-3 {
  width: 0.75rem !important;
}

#services .h-3 {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

#services .h-48 {
  height: 12rem !important;
}

#services .h-full {
  height: 100% !important;
}

#services .w-full {
  width: 100% !important;
}

#services .relative {
  position: relative !important;
}

#services .overflow-hidden {
  overflow: hidden !important;
}

#services .font-medium {
  font-weight: 500 !important;
}

#services .font-semibold {
  font-weight: 600 !important;
}

#services .font-bold {
  font-weight: 700 !important;
}

#services .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

#services .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

#services .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

#services .leading-tight {
  line-height: 1.25 !important;
}

#services .leading-relaxed {
  line-height: 1.625 !important;
}

#services .text-white {
  color: white !important;
}

#services .text-primary {
  color: #3b82f6 !important; /* Direct blue color to fix transparency issue */
}

#services .text-foreground {
  color: #1e293b !important; /* Direct dark color to fix transparency issue */
}

#services .bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8) !important;
}

#services .bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9) !important;
}

#services .backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
}

#services .object-cover {
  object-fit: cover !important;
}

#services .transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

#services .hover\:opacity-90:hover {
  opacity: 0.9 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  #services {
    padding: 3rem 0 !important;
  }
  
  #services .service-card-content {
    padding: 1rem !important;
  }
  
  #services .service-card h3 {
    font-size: 1.125rem !important;
  }
  
  #services .service-card .h-48 {
    height: 10rem !important;
  }
}

/* Large screens - enhanced spacing */
@media (min-width: 1024px) {
  #services .service-card-content {
    padding: 2rem !important;
  }
}

/* Essential Tailwind Utilities for Services Section */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.bg-background { background-color: var(--background); }
.container { width: 100%; margin-left: auto; margin-right: auto; max-width: 1200px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.text-center { text-align: center; }
.mb-16 { margin-bottom: 4rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.inline-block { display: inline-block; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.bg-primary\/10 { background-color: rgb(59 130 246 / 0.1); /* Direct blue color with transparency */ }
.text-primary { color: #3b82f6; /* Direct blue color */ }
.font-medium { font-weight: 500; }
.rounded-full { border-radius: 9999px; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-foreground { color: #1e293b; /* Direct dark color */ }
.max-w-3xl { max-width: 48rem; }
.leading-relaxed { line-height: 1.625; }
.grid { display: grid; }
.gap-8 { gap: 2rem; }
.h-full { height: 100%; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.bg-white\/80 { background-color: rgb(255 255 255 / 0.8); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.border-blue-100 { border-color: rgb(219 234 254); }
.rounded-lg { border-radius: 0.5rem; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.absolute { position: absolute; }
.top-4 { top: 1rem; }
.left-4 { left: 1rem; }
.right-4 { right: 1rem; }
.w-full { width: 100%; }
.h-48 { height: 12rem; }
.object-cover { object-fit: cover; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-primary { --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-amber-500 { --tw-gradient-to: rgb(245 158 11); }
.text-white { color: rgb(255 255 255); }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
.font-bold { font-weight: 700; }
.p-6 { padding: 1.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.items-center { align-items: center; }
.gap-4 { gap: 1rem; }
.gap-1 { gap: 0.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.w-24 { width: 6rem; }
.h-1 { height: 0.25rem; }
.mt-6 { margin-top: 1.5rem; }

/* === サービスセクション グリッドレイアウト === */
.grid { display: grid; }
.md\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service-card { border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.text-primary { color: #3b82f6; /* Direct blue color */ }
.text-foreground { color: #1e293b; /* Direct dark color */ }
.bg-primary\/10 { background-color: rgb(59 130 246 / 0.1); /* Direct blue color with transparency */ }
.flex-1 { flex: 1 1 0%; }
.mt-auto { margin-top: auto; }

#services { display: block !important; visibility: visible !important; }
#services .grid { display: grid !important; }
#services .service-card { display: flex !important; visibility: visible !important; }

/* === セクション全体のスタイル === */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.bg-background { background-color: var(--background); }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.text-center { text-align: center; }
.mb-16 { margin-bottom: 4rem; }
.mb-12 { margin-bottom: 3rem; }
.inline-block { display: inline-block; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.font-medium { font-weight: 500; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-light { font-weight: 300; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.max-w-3xl { max-width: 48rem; }
.leading-relaxed { line-height: 1.625; }
.rounded-lg { border-radius: 0.5rem; }

/* === レスポンシブクラス === */
@media (min-width: 768px) {
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

@media (min-width: 1024px) {
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* === サービスセクションの透明度問題を修正 === */
#services .text-primary {
  color: #3b82f6 !important; /* 直接的な青色 */
}

#services .text-foreground {
  color: #1e293b !important; /* 直接的な暗い色 */
}

#services .bg-primary\/10 {
  background-color: rgb(59 130 246 / 0.1) !important;
}

/* Our Servicesバッジの修正 */
#services span.inline-block {
  background-color: rgb(251 146 60 / 0.1) !important;
  color: #fb923c !important;
  border: 1px solid rgb(251 146 60 / 0.2) !important;
}

/* ========================================
   透明度問題の修正とセクションスタイルの統一
   ======================================== */

/* 1. 基本的なテキストカラーの修正 */
.text-primary {
  color: #3b82f6 !important;
}

.text-foreground {
  color: #1e293b !important;
}

.text-muted-foreground {
  color: #6b7280 !important;
}

.bg-muted\/30 {
  background-color: rgb(243 244 246 / 0.3) !important;
}

/* 2. 装飾ラインのグラデーション */
.w-24.h-1.bg-gradient-to-r.from-primary.to-amber-500 {
  width: 6rem !important;
  height: 0.25rem !important;
  background: linear-gradient(to right, #3b82f6, #f59e0b) !important;
  margin: 1.5rem auto 0 !important;
  border-radius: 9999px !important;
  opacity: 1 !important;
}

/* 3. セクション共通のスタイル（services, blog, team, contact） */
/* セクションヘッダーのバッジスタイル */
#services .text-center.mb-16 > span.inline-block,
#services span.inline-block.px-6.py-2.bg-primary\/10.text-primary.font-medium.mb-4.rounded-full,
#blog .text-center.mb-16 > span.inline-block,
#blog span.inline-block.px-6.py-2.bg-primary\/10.text-primary.font-medium.mb-4.rounded-full,
#team .text-center.mb-16 > span.inline-block,
#team span.inline-block.px-6.py-2.bg-primary\/10.text-primary.font-medium.mb-4.rounded-full,
#contact .text-center.mb-16 > span.inline-block,
#contact span.inline-block.px-6.py-2.bg-primary\/10.text-primary.font-medium.mb-4.rounded-full {
  background-color: rgb(251 146 60 / 0.1) !important;
  color: #fb923c !important;
  border: 1px solid rgb(251 146 60 / 0.2) !important;
  opacity: 1 !important;
}

/* セクションタイトル（h2）のスタイル */
#services h2,
#services h2.text-primary,
#blog h2,
#blog h2.text-primary,
#team h2,
#team h2.text-primary,
#contact h2,
#contact h2.text-primary {
  color: #3b82f6 !important;
  opacity: 1 !important;
}

/* セクション説明文（p）のスタイル */
#services p.text-foreground,
#blog p.text-foreground,
#team p.text-foreground,
#contact p.text-foreground {
  color: #1e293b !important;
  opacity: 1 !important;
}

/* 4. Contact フォームスタイルの修正 */
#contact .bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

#contact h3.text-primary {
  color: #3b82f6 !important;
}

#contact p.text-muted-foreground {
  color: #6b7280 !important;
}

#contact .border-blue-100 {
  border-color: #dbeafe !important;
}

#contact .rounded-xl {
  border-radius: 0.75rem !important;
}


#contact input.border-blue-200,
#contact select.border-blue-200,
#contact textarea.border-blue-200 {
  border-color: #bfdbff !important;
  border-radius: 0.375rem !important; /* rounded-md */
  background-color: #f8fafc !important;
}

#contact input,
#contact select,
#contact textarea {
  background-color: #f8fafc !important;
  border-color: #bfdbff !important;
  border-radius: 0.375rem !important;
  border-width: 1px !important;
  border-style: solid !important;
}

#contact input:focus,
#contact select:focus,
#contact textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.2) !important;
}

/* Updated Navigation Icons - Force Update 2025-07-15 */
@media (min-width: 1024px) {
}

/* サイドバーの動く線アニメーション */
@media (min-width: 1024px) {
  .sidebar-lines {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  .moving-line {
    position: absolute !important;
    width: 1px !important;
    height: 60px !important;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    animation: moveLineVertical 8s linear infinite !important;
    opacity: 0.8 !important;
  }
  
  .moving-line.horizontal {
    width: 60px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    animation: moveLineHorizontal 8s linear infinite !important;
  }
  
  .moving-line.diagonal {
    width: 80px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    animation: moveLineDiagonal 10s linear infinite !important;
    transform-origin: center !important;
  }
  
  /* シンプルなテストアニメーション */
}

/* Service Detail Button - Enhanced Hover Effects */
.service-detail-button {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.service-detail-button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: -1 !important;
}

.service-detail-button:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.1) !important;
}

.service-detail-button:hover::before {
  left: 100% !important;
}

.service-detail-button:hover svg {
  transform: translateX(4px) !important;
  animation: arrowPulse 0.6s ease-in-out !important;
}

@keyframes arrowPulse {
  0% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(4px); }
}

/* Universal Button Light Effect - Applied to all buttons */
.hero-btn-1,
.hero-btn-2,
.service-detail-button,
.blog-read-more-btn,
.view-more-btn,
.slideshow-indicator,
.mobile-menu-button,
button[type="submit"],
.btn,
.btn-primary,
.btn-secondary,
a[href="#services"],
a[href="#contact"],
.inline-flex.items-center[style*="background"] {
  position: relative !important;
  overflow: hidden !important;
  /* transition removed */
  border-radius: 8px !important;
}

.hero-btn-1::before,
.hero-btn-2::before,
.service-detail-button::before,
.blog-read-more-btn::before,
.view-more-btn::before,
.slideshow-indicator::before,
.mobile-menu-button::before,
button[type="submit"]::before,
.btn::before,
.btn-primary::before,
.btn-secondary::before,
a[href="#services"]::before,
a[href="#contact"]::before,
.inline-flex.items-center[style*="background"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
  transition: left 0.6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero-btn-1:hover::before,
.hero-btn-2:hover::before,
.service-detail-button:hover::before,
.blog-read-more-btn:hover::before,
.view-more-btn:hover::before,
.slideshow-indicator:hover::before,
.mobile-menu-button:hover::before,
button[type="submit"]:hover::before,
.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
a[href="#services"]:hover::before,
a[href="#contact"]:hover::before,
.inline-flex.items-center[style*="background"]:hover::before {
  left: 100% !important;
}

/* Special case for glass morphism buttons - adjust light effect */
.hero-btn-2::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
}

/* Removed - all styles handled in index.php for consistency */

/* Navigation left spacing only - HIGHEST PRIORITY */
@media (min-width: 1024px) {
  /* Use more specific selector to ensure override */
  body header .desktop-nav a,
  body header nav.desktop-nav a {
    padding: 0.75rem 3rem 0.75rem 0.75rem !important;
  }
}