@charset "UTF-8";

/* ==========================================================================
   1. フォーム全体のレイアウトと枠線の完全除去
   ========================================================================== */
fieldset, .ss_field, .ss_enquete_field, #ss_consent_personal_info {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.smpForm {
    max-width: 460px !important; 
    background: none !important; 
    box-shadow: none !important; 
    padding: 0 20px !important; 
    margin: 0 auto;
    box-sizing: border-box;
    position: relative !important;
}

.ss_contents {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.ss_visitor_form, .ss_enquete_form {
    display: contents !important;
}

/* --- 項目の並び順指定 --- */
#ss_name, #ss_company_name, #ss_email, #ss_tel { order: 1 !important; }
.ss_enquete_field { order: 2 !important; }
#ss_consent_personal_info { order: 3 !important; }
.ss_btnArea { order: 4 !important; }

/* 項目間の余白調整 */
.ss_field { margin-bottom: 4px !important; }
.ss_enquete_field { margin-bottom: 20px !important; }
.ss_enquete_form fieldset:first-of-type { margin-top: 20px !important; }
#ss_consent_personal_info { margin-top: 10px !important; }

/* ==========================================================================
   2. 項目名（ラベル）のデザイン修正
   ========================================================================== */
/* 【修正】項目タイトルを14pxに設定 */
.ss_form_title, .ss_enquete_title {
    display: block !important;
    font-size: 14px !important; 
    text-align: left !important;
    font-weight: bold !important;
    color: #333 !important; 
    margin-bottom: 5px !important;
    background: transparent !important;
}

#ss_consent_personal_info .ss_form_title { display: none !important; }

.ss_user_notnull {
    color: #e31a1a !important;
    font-size: 12px;
    margin-left: 2px;
}

/* 【修正】「姓：」「名：」などのテキストを13pxに設定 */
.ss_leftComment {
    font-size: 13px !important;
    color: #333 !important;
    font-weight: normal !important;
}

/* ==========================================================================
   3. 入力エリアのデザイン
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100% !important;
    height: 32px !important;
    padding: 4px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

textarea { height: 100px !important; }
#ss_name .ss_grid { display: flex !important; gap: 8px !important; }
.ss_input { flex: 1; display: flex !important; flex-wrap: wrap !important; align-items: center !important; }

/* ==========================================================================
   4. ポリシー表示と同意項目（14px維持）
   ========================================================================== */
.ss_upComment { display: none !important; }

#ss_consent_personal_info .ss_upComment {
    display: block !important;
    text-align: left !important;
    font-size: 13px !important; 
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    color: #333333;
}

#ss_consent_personal_info .ss_input {
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    /* 「同意する」のテキストサイズを14pxに維持 */
    font-size: 14px !important; 
}

#ss_consent_personal_info input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 6px 0 0 !important;
}

#ss_consent_personal_info .ss_input::after {
    content: "※" !important;
    color: #e31a1a !important;
    font-size: 14px !important;
    margin-left: 2px !important;
    font-weight: bold !important;
}

/* ==========================================================================
   5. 知ったきっかけ（PC：3列、スマホ：2列+その他最後尾）
   ========================================================================== */
.ss_enquete_field td {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    padding-right: 10px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
}

.ss_enquete_field table { width: 100% !important; border-collapse: collapse !important; border: none !important; }
.ss_enquete_field tbody { display: block !important; width: 100% !important; }
.ss_enquete_field tr { display: flex !important; flex-wrap: wrap !important; width: 100% !important; border: none !important; }
.ss_enquete_field td { width: 33.3% !important; flex: 0 0 33.3% !important; border: none !important; }

@media screen and (max-width: 600px) {
    .ss_enquete_field tbody { display: flex !important; flex-wrap: wrap !important; }
    .ss_enquete_field tr { display: contents !important; }
    .ss_enquete_field td { width: 50% !important; flex: 0 0 50% !important; }
    /* 「その他」を最後に移動 */
    .ss_enquete_field td:has(input[value="7"]),
    .ss_enquete_field td:has(input[name*="attribute76"][value="7"]) { order: 99 !important; }
}

/* ==========================================================================
   6. 警告表示（エラー時）
   ========================================================================== */
input.ss_error_border, textarea.ss_error_border, select.ss_error_border {
    border: 1px solid #f04040 !important;
    background-color: #fff9f9 !important;
}

.ss_warning_label {
    order: 10 !important;
    background-color: #f04040 !important;
    width: 20px !important; height: 16px !important;
    display: inline-flex !important; justify-content: center !important; align-items: center !important;
    margin: 5px 5px 0 0 !important; border-radius: 2px !important;
    color: #ffffff !important; font-size: 11px !important;
    flex-shrink: 0 !important;
}

.ss_error_msg, .errorMsg, .ss_error {
    order: 11 !important;
    display: inline-flex !important; align-items: center !important;
    color: #f04040 !important; font-size: 13px !important;
    font-weight: bold !important; margin-top: 5px !important;
}

/* ==========================================================================
   7. 送信ボタンとスピナーのデザイン（中央配置維持）
   ========================================================================== */
.ss_btnArea input[type="button"] {
    background: linear-gradient(45deg, #2ca9e1 35%, #007bbb) !important;
    color: #fff !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 48px !important; 
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer;
}

#ss_submit_loader.ss_submit_loader {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    z-index: 9999 !important; display: none;
}

/* スピナー本体の中央固定設定を維持 */
#ss_submit_loader .spinner {
    position: absolute !important;
    top: calc(50% - 25px) !important;
    left: calc(50% - 25px) !important;
    width: 50px !important; height: 50px !important;
    border: 5px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 5px solid #007bbb !important;
    border-radius: 50% !important;
    animation: ss_spin_final 1s linear infinite !important;
    box-sizing: border-box !important;
}

@keyframes ss_spin_final { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================================================
   8. その他微調整
   ========================================================================== */
.ss_bottomComment { font-size: 13px !important; color: #666 !important; line-height: 1.5 !important; margin-top: 8px !important; }
input::placeholder, textarea::placeholder { font-weight: normal !important; color: #333 !important; opacity: 0.5 !important; }