/* --- Form Section Adventure 2027 Styles (Fixed) --- */

/* 1. 埋め込みフォーム全体のフォント設定 */
#synergy-nform-root {
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #334155 !important; /* slate-700 */
}

/* 2. ラベル (項目名) */
/* チェックボックスの横のラベル以外に適用 */
#synergy-nform-root > div > label, 
#synergy-nform-root .form-group > label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important; /* slate-400 */
    margin-bottom: 8px !important;
}

/* 3. テキスト入力フィールド (Input, Textarea, Select) */
/* ※チェックボックスやラジオボタンを除外するセレクタに変更 */
#synergy-nform-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
#synergy-nform-root textarea,
#synergy-nform-root select {
    width: 100% !important;
    background-color: #f8fafc !important; /* slate-50 */
    border: 2px solid transparent !important;
    border-radius: 1rem !important; /* rounded-2xl */
    padding: 1.25rem !important; /* p-5 */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem !important;
    appearance: none !important; /* デフォルトスタイル削除 */
}

/* フォーカス時の挙動 */
#synergy-nform-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
#synergy-nform-root textarea:focus,
#synergy-nform-root select:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important; /* blue-500 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* 4. 送信ボタン (Submit Button) */
#synergy-nform-root button,
#synergy-nform-root input[type="button"],
#synergy-nform-root input[type="submit"] {
    display: block !important;
    margin: 3rem auto 0 !important;
    background-color: #1d4ed8 !important; /* blue-700 */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 1.5rem 5rem !important;
    border-radius: 9999px !important; /* rounded-full */
    border: none !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 20px 40px -10px rgba(29, 78, 216, 0.4) !important;
    width: auto !important; /* 幅を自動に戻す */
}

#synergy-nform-root button:hover,
#synergy-nform-root input[type="button"]:hover,
#synergy-nform-root input[type="submit"]:hover {
    background-color: #1e40af !important; /* blue-800 */
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 60px -15px rgba(29, 78, 216, 0.5) !important;
}

/* 5. チェックボックスのデザイン修正 */
#synergy-nform-root input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid #cbd5e1 !important; /* slate-300 */
    border-radius: 6px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    vertical-align: text-bottom !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

/* チェックされた状態（青背景＋白チェックマーク） */
#synergy-nform-root input[type="checkbox"]:checked {
    background-color: #2563eb !important; /* blue-600 */
    border-color: #2563eb !important;
    /* SVGのチェックマークを背景画像として埋め込み */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* チェックボックスのラベルコンテナ */
#synergy-nform-root .checkbox-group label, 
#synergy-nform-root label.checkbox-label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important; /* slate-600 */
}

/* 6. その他ユーティリティ */
#synergy-nform-root .required-mark {
    color: #ef4444 !important;
    margin-left: 4px !important;
    font-size: 12px !important;
}

#synergy-nform-root .error-message {
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}