@charset "UTF-8";

/* ポップで親しみやすい丸ゴシックフォントを採用 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800;900&display=swap');
body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    overflow-x: hidden;
}

.hero-gradient {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(59, 130, 246, 0.2));
}

/* ポップな立体ボタン */
.btn-pop-blue {
    background-color: #3b82f6; color: white; box-shadow: 0 6px 0 #1d4ed8; transition: all 0.1s;
}
.btn-pop-blue:active { transform: translateY(6px); box-shadow: 0 0 0 #1d4ed8; }
.btn-pop-yellow {
    background-color: #fbbf24; color: #1e3a8a; box-shadow: 0 6px 0 #b45309; transition: all 0.1s;
}
.btn-pop-yellow:active { transform: translateY(6px); box-shadow: 0 0 0 #b45309; }

/* 背景パターン */
.bg-polka-dot {
    background-color: #ffffff;
    background-image: radial-gradient(#e5e7eb 2px, transparent 2px);
    background-size: 20px 20px;
}
.bg-stripe {
    background: repeating-linear-gradient(45deg, #f0fdf4, #f0fdf4 10px, #ffffff 10px, #ffffff 20px);
}

/* AI診断アニメーション & セレクト UI */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.8); }
}
.ai-glow { animation: pulse-glow 3s infinite; }
.option-label { transition: all 0.2s; }
.option-input:checked + .option-label {
    background-color: #ffffff; border-color: #FBBF24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.5);
    transform: scale(1.05); color: #1E3A8A;
}
.check-icon { display: none; }
.option-input:checked + .option-label .check-icon { display: block; }
.text-shadow-pop { text-shadow: 3px 3px 0 #1e3a8a; }

/* セクション区切りの波形 */
.wave-divider { 
    position: absolute; 
    bottom: -1px; 
    left: 0; 
    width: 100%; 
    height: 40px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,10 Q25,20 50,10 T100,10 V20 H0 Z'/%3E%3C/svg%3E");
    background-size: 100px 40px;
    animation: wave-anim 2s linear infinite;
}
@keyframes wave-anim {
    0% { background-position-x: 0; }
    100% { background-position-x: 100px; }
}
@keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}