/* AI化へボタンのスタイル */
.btn-ai-enter {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ボタンの発光効果 */
.glow-on-hover {
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: color 0.3s ease-in-out;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 9999px;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:active:before {
    background: transparent;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@keyframes shine {
    0% { transform: translateX(-200%) skewX(-12deg); }
    100% { transform: translateX(200%) skewX(-12deg); }
}

.animate-shine-effect {
    animation: shine 1s ease-out;
}

/* Tailwind-like utility classes for compatibility */
.flex { display: flex; }
.justify-end { justify-content: flex-end; }
.items-center { align-items: center; }
.relative { position: relative; }
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.font-bold { font-weight: bold; }
.text-white { color: white; }
.rounded-full { border-radius: 9999px; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.focus\:outline-none:focus { outline: none; }
.transition-all { transition: all; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: ease-in-out; }
.transform { transform: translateZ(0); }
.hover\:scale-105:hover { transform: scale(1.05); }
.mr-2 { margin-right: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.z-10 { z-index: 10; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.opacity-0 { opacity: 0; }
.transition-opacity { transition-property: opacity; }
.group:hover .group-hover\:opacity-20 { opacity: 0.2; }
.top-0 { top: 0; }
.left-1\/2 { left: 50%; }
.w-1\/3 { width: 33.333333%; }
.h-full { height: 100%; }
.bg-white { background-color: white; }
.transform { transform: translateZ(0); }
.-skew-x-12 { transform: skewX(-12deg); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.group:hover .group-hover\:animate-shine-effect { animation: shine 1s ease-out; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.transition-transform { transition-property: transform; }
.group:hover .group-hover\:rotate-12 { transform: rotate(12deg); }

/* AI button gradient background */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-purple-600 {
    --tw-gradient-from: #9333ea;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0));
}
.via-pink-500 {
    --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to, rgba(236, 72, 153, 0));
}
.to-red-500 {
    --tw-gradient-to: #ef4444;
}
.hover\:from-purple-700:hover {
    --tw-gradient-from: #7c3aed;
}
.hover\:via-pink-600:hover {
    --tw-gradient-stops: var(--tw-gradient-from), #db2777, var(--tw-gradient-to, rgba(219, 39, 119, 0));
}
.hover\:to-red-600:hover {
    --tw-gradient-to: #dc2626;
}

/* AI button custom padding */
.px-\[3\.125rem\] {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
}

/* Focus ring styles */
.focus\:ring-4:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-purple-300:focus {
    --tw-ring-color: #d8b4fe;
}