/* スマートフォン表示最適化のための追加スタイル */

/* ① カテゴリ検索のグラデーションを鮮やかな緑色に変更 */
.choice:nth-child(1) .ico {
    background: linear-gradient(135deg, #059669 0%, #06b6d4 100%) !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3) !important;
    position: relative;
}

/* ② キーワード検索のグラデーションを鮮やかなオレンジ・イエロー系に変更 */
.choice:nth-child(2) .ico {
    background: linear-gradient(135deg, #ea580c 0%, #fde047 100%) !important;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3) !important;
    position: relative;
}

/* ③ AI検索のグラデーションも強化 */
.choice:nth-child(3) .ico {
    background: linear-gradient(135deg, #7c3aed 0%, #f472b6 100%) !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
    position: relative;
}

/* 全カードに光沢効果を追加 */
.choice .ico::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {

    /* ④ AI検索ページのスマホ表示最適化 */
    .ai-page .ai-floater {
        position: static !important;
        margin-top: 30px;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ai-page .ai-card {
        order: 2;
    }

    .ai-page .ai-balloon {
        order: 1;
        margin-bottom: 20px;
    }
}