@charset "UTF-8";

      /* Custom Overrides & Fixes */
        body {
            font-family: 'Zen Maru Gothic', sans-serif;
            overflow-x: hidden;
        }
        
        /* Ensure specific utility classes are available */
        .clip-ellipse {
            clip-path: ellipse(70% 100% at 50% 100%);
        }
        
        .bg-gradient-hero {
            background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.6), transparent);
        }
        
        @media (min-width: 640px) {
            .bg-gradient-hero {
                background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.4), transparent);
            }
        }

        /* Animation Classes (Vanilla CSS) */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, visibility;
        }
        
        .fade-in-section.is-visible {
            opacity: 1;
            transform: none;
        }
        
        /* Staggered delays */
        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
    
/* =============================================
   不足カラーユーティリティ（orange / gray / その他）
   Tailwind v4 コンパイル時に未生成だったクラスを補完
   ============================================= */

/* --- Orange --- */
.bg-orange-50  { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }
.border-orange-400 { border-color: #fb923c; }

@media (hover: hover) {
  .hover\:bg-orange-50:hover  { background-color: #fff7ed; }
  .hover\:bg-orange-500:hover { background-color: #f97316; }
  .hover\:text-orange-500:hover { color: #f97316; }
}

/* --- Gray --- */
.bg-gray-100 { background-color: #f3f4f6; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.border-gray-200 { border-color: #e5e7eb; }

@media (hover: hover) {
  .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
}

/* --- Yellow (背景装飾用) --- */
.bg-yellow-100 { background-color: #fef9c3; }

/* --- Red (診療時間テーブル用) --- */
.text-red-400 { color: #f87171; }

/* --- White utilities (補完) --- */
.bg-white { background-color: #ffffff; }
.text-white { color: #ffffff; }