/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}
/* Fade-in animation definition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Class to apply fade-in animation */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0; /* Start hidden */
    animation-play-state: paused; /* Pause animation initially */
}
/* Animation delay helper classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Gradient text for headlines (Keep for other sections, but override in Hero) */
.gradient-text {
  background: linear-gradient(to right, #ef8f4d, #ec4899); /* オレンジからピンクのグラデーション */
  -webkit-background-clip: text; /* Apply gradient to text */
  background-clip: text;
  color: transparent; /* Make original text color transparent */
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /* 薄い影を追加して視認性を向上 */
}

/* Style for the recommended pricing plan */
.recommended-plan {
    border: 2px solid #ef8f4d; /* オレンジの枠線 */
    position: relative;
    overflow: hidden; /* Keep the badge inside */
}
.recommended-badge {
    position: absolute;
    top: -1px; /* Adjust position */
    right: -1px;
    background-color: #ef8f4d; /* オレンジ */
    color: white;
    font-size: 0.75rem; /* 12px */
    font-weight: bold;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-bottom-left-radius: 0.375rem; /* rounded-bl-md */
}
/* Table styling */
.comparison-table th, .comparison-table td {
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 */
}
.comparison-table th {
    background-color: #f9fafb; /* bg-gray-50 */
    text-align: left;
    font-weight: 600; /* font-semibold */
}
.comparison-table td.feature-name {
    font-weight: 500; /* font-medium */
}
.comparison-table .check-icon {
    color: #10b981; /* text-green-500 */
}
 .comparison-table .cross-icon {
    color: #ef4444; /* text-red-500 */
}
/* Pricing Tab Styles */
.pricing-tab {
    padding: 0.5rem 1.5rem; /* py-2 px-6 */
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    font-weight: 500; /* font-medium */
    transition: background-color 0.3s, color 0.3s;
}
.pricing-tab.active {
    background-color: #ef8f4d; /* オレンジ */
    color: white;
    border: 1px solid #e5e7eb; /* 境界線を追加して視認性を向上 */
}
.pricing-tab:not(.active) {
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #4b5563; /* text-gray-600 */
}
 .pricing-tab:not(.active):hover {
     background-color: #d1d5db; /* hover:bg-gray-300 */
 }
 /* Hero Text Shadow for better readability (Optional) */
 .hero-text-shadow {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }