/* やる気スイッチ診断 - WordPress用カスタムスタイル */

/* 基本スタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.slide-in {
    animation: slideIn 0.6s ease-out;
}

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

.pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.option-card {
    transition: all 0.3s ease;
}

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

.progress-bar {
    transition: width 0.4s ease;
}

.result-card {
    backdrop-filter: blur(10px);
}

/* タイプ別カラー */
.type-1 { 
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
}

.type-2 { 
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
}

.type-3 { 
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
}

.type-4 { 
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); 
}

.type-5 { 
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); 
}

/* WordPress テーマとの競合を防ぐ */
.yaruki-switch-container {
    box-sizing: border-box;
}

.yaruki-switch-container * {
    box-sizing: border-box;
}

/* WordPress の投稿コンテンツ内での調整 */
.entry-content .yaruki-switch-container {
    margin: 0 auto;
    max-width: 100%;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .yaruki-switch-container {
        padding: 0;
    }
}