body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

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

/* 3段階のラジオボタン用スタイル */
.question-item {
    transition: opacity 0.3s ease;
}

.options-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}

.option-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 33%;
}

.option-btn {
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

/* 当てはまらない (ウォームグレー) */
.option-3-1 { width: 44px; height: 44px; border: 4px solid #cbd5e1; }
/* 当てはまる (オレンジ) */
.option-3-2 { width: 52px; height: 52px; border: 4px solid #fb923c; }
/* よく当てはまる (指定ピンク) */
.option-3-3 { width: 60px; height: 60px; border: 4px solid #db4a7e; }

/* ホバーエフェクト */
.option-3-1:hover { background-color: rgba(203, 213, 225, 0.3); }
.option-3-2:hover { background-color: rgba(251, 146, 60, 0.15); }
.option-3-3:hover { background-color: rgba(219, 74, 126, 0.1); }

/* 選択済み状態 (Selected) */
.option-3-1.selected { background-color: #cbd5e1; }
.option-3-2.selected { background-color: #fb923c; }
.option-3-3.selected { background-color: #db4a7e; }

/* ラベル用 */
.label-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.label-1 { color: #64748b; }
.label-2 { color: #ea580c; }
.label-3 { color: #db4a7e; }