@charset "UTF-8";

/* ==========================================================================
   1. レイアウトの基本構造
   ========================================================================== */
.smpForm {
    background-color: transparent !important;
    padding: 16px 20px;
    border-radius: 4px;
    max-width: 620px !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 auto !important;
    position: relative !important;
}

.ss_contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: 100% !important;
}

/* 【修正】中の項目を自由に並び替えるため、ラッパー（枠）の概念を解除します */
.ss_visitor_form, 
.ss_enquete_form {
    display: contents !important; 
}

.ss_field, 
.ss_enquete_field {
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   2. 項目名（ラベル）のデザイン
   ========================================================================== */
.ss_form_title {
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #a08e7e !important;
    margin-bottom: 5px !important;
    text-align: left; /* ラベルは左寄せで見やすく */
}

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

.ss_leftComment {
    font-size: 14px !important;
    color: #a08e7e;
    margin-bottom: 3px !important;
    display: block;
    text-align: left;
}

.ss_enquete_title {
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #a08e7e !important;
    margin-bottom: 5px !important;
    text-align: left; /* ラベルは左寄せで見やすく */
}


/* ==========================================================================
   3. 名前フィールドと入力欄のデザイン
   ========================================================================== */
#ss_name .ss_grid {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap; /* スマホで縦に並ぶように */
}

.ss_input {
    flex: 1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    font-size: 16px !important;
}

/* スマホ時、姓名入力欄を100%にする */
@media screen and (max-width: 480px) {
    #ss_name .ss_input {
        flex: 0 0 100% !important;
    }
}

.ss_input > .ss_leftComment,
.ss_input > input,
.ss_input > textarea {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* --- 【修正】input と textarea のスタイルから select を外す --- */
input[type="text"], input[type="email"], input[type="tel"], textarea {
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #F0F0F0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}

/* --- 【追加】プルダウン（select）専用のスタイル --- */
select {
    height: 40px !important;
    /* 右側にアイコン分のパディングを確保 (既存12px + アイコン幅 + 余白) */
    padding: 0 30px 0 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #F0F0F0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    
    /* デフォルトの矢印を非表示にする */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* 下向き▽（三角形）アイコンを追加 (SVGを埋め込み) */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><polygon points="0,0 10,0 5,6" fill="%23333"/></svg>') !important;
    background-repeat: no-repeat !important;
    /* アイコンの位置（右端から10px、中央） */
    background-position: right 10px center !important;
    /* アイコンのサイズ */
    background-size: 10px 6px !important;
    
    color: #333; /* 選択テキストの色 */
    cursor: pointer;
}

/* IE11対応（必要であれば） */
select::-ms-expand {
    display: none;
}

textarea {
    height: 180px !important;
    padding: 10px !important;
}

/* ==========================================================================
   4. 知ったきっかけ（PCの並び順を維持し、スマホで「その他」を最後に）
   ========================================================================== */
#ss_VisitorData\.attribute35 table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#ss_VisitorData\.attribute35 tbody {
    display: block !important;
    width: 100% !important;
}

/* PC表示：1行ごとのFlexレイアウトを維持 */
#ss_VisitorData\.attribute35 tr {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

#ss_VisitorData\.attribute35 td {
    display: flex !important;
    align-items: center !important;
    width: 33.3% !important; 
    flex: 0 0 33.3% !important;
    padding-right: 10px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    white-space: nowrap;
}

/* スマホ表示時の制御 */
@media screen and (max-width: 600px) {
    /* tbodyをFlexコンテナにして、中の項目を自由に並べられるようにする */
    #ss_VisitorData\.attribute35 tbody {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* tr(行)の枠組みを解除して、tdをtbodyの直下にあるように扱う */
    #ss_VisitorData\.attribute35 tr {
        display: contents !important;
    }

    #ss_VisitorData\.attribute35 td {
        width: 50% !important; /* 2カラム表示 */
        flex: 0 0 50% !important;
    }

    /* 【解決策】1行目の3番目にある「その他」を一番最後に移動 */
    #ss_VisitorData\.attribute35 tr:nth-child(1) td:nth-child(3) {
        order: 99 !important;
    }
}

@media screen and (max-width: 400px) {
    #ss_VisitorData\.attribute35 td {
        width: 100% !important; /* 小さいスマホでは1カラム */
        flex: 0 0 100% !important;
    }
}

#ss_VisitorData\.attribute35 input[type="checkbox"] {
    margin-right: 8px !important;
    vertical-align: middle;
    font-size: 16px !important;
}

/* ==========================================================================
   5. 警告表示（エラー時）
   ========================================================================== */
/* 未入力（エラー時）の枠線と背景色の設定 */
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: 9 !important;
    background-color: #f04040 !important;
    width: 36px !important;
    height: 24px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px 8px 0 0 !important;
    border-radius: 3px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important; /* アイコンが圧縮されるのを防ぐ */
}

.ss_error_msg, .errorMsg, .ss_error {
    order: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #f04040 !important;
    font-size: 14px !important;
    font-weight: bold !important; /* 視認性向上のため太字 */
    margin-top: 8px !important;
    white-space: nowrap !important; /* メッセージが途中で改行されないようにする */
}

/* ==========================================================================
   6. プライバシーポリシーと同意項目 - 【修正】警告を「同意する」の右側へ移動
   ========================================================================== */
.ss_upComment { display: none !important; }

/* ポリシー説明文を上段に配置 */
#ss_consent_personal_info .ss_upComment {
    display: block !important;
    flex: 0 0 100% !important; 
    order: -2 !important; /* 最上部へ配置 */
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px !important;
    text-align: left !important;
}

#ss_consent_personal_info .ss_input {
    display: flex !important; /* Flexboxを有効化して並び順を制御 */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* チェックボックスを「同意する」テキストの前に配置 */
#ss_consent_personal_info input[type="checkbox"] {
    order: -1 !important; /* テキスト（order: 0）の前に移動 */
    flex: 0 0 auto !important; /* 幅100%設定を解除して横並びに */
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    cursor: pointer !important;
}

/* 同意項目の警告アイコンを「同意する」の右側に配置 */
#ss_consent_personal_info .ss_warning_label {
    order: 1 !important; /* テキストの直後 */
    margin: 0 8px 0 15px !important; /* 「同意する」との間に余白を確保 */
    width: 36px !important;
}

/* 同意項目の警告メッセージを一番右側に配置 */
#ss_consent_personal_info .ss_error_msg {
    order: 2 !important;
    margin: 0 !important;
}

/* 不要な改行タグを非表示にしてレイアウト崩れを防止 */
#ss_consent_personal_info .ss_input br {
    display: none !important;
}

/* ==========================================================================
   7. 送信ボタン（中央寄せ修正）
   ========================================================================== */
.ss_btnArea {
    text-align: center !important; /* ボタンエリアを中央寄せ */
    width: 100% !important;
    margin-top: 20px !important;
}

.ss_btnArea:hover {
    opacity: 0.7;
}

.ss_btnArea p {
    margin: 0 !important;
    text-align: center !important;
}

.ss_btnArea input[type="button"] {
    background-color: #e31a1a !important;
    color: #fff !important;
    width: 100% !important;
    max-width: 400px;
    height: 55px !important;
    font-size: 24px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer;
    margin: 0 auto !important; /* ボタン自体の中央寄せ */
    display: block !important;
}

/* ==========================================================================
   8. 項目の並び替えと余白調整（今回追加分）
   ========================================================================== */

/**
 * 項目の入れ替え (Flex order)
 * 1: 基本情報 / 2: アンケート項目 / 3: 同意項目 / 4: ボタン
 */

/* 会社名・部署名・氏名・メール・電話番号 */
#ss_company_name, #ss_division, #ss_name, #ss_email, #ss_tel {
    order: 1 !important;
}

/* アンケート3項目（件数・ピース数・相談内容）*/
.ss_enquete_field {
    order: 2 !important;
}

/* 個人情報取得の同意 */
#ss_consent_personal_info {
    order: 3 !important;
}

/* 送信ボタンエリア */
.ss_btnArea {
    order: 4 !important;
}

/* ==========================================================================
   9. 送信時の読み込み中演出（スピナー） - 最終解決版
   ========================================================================== */

#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: 1000 !important;
    display: none;
    border-radius: 4px !important;
}

#ss_submit_loader .spinner {
    position: absolute !important;
    /* 【修正】transformを使わずに計算式で中央配置（50%から自身のサイズの半分25pxを引く） */
    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); }
}

/* ==========================================================================
   プレースホルダー（入力欄内の例示文字）の極細設定
   ========================================================================== */

/* 文字色を#aaa（グレー）から#ccc（薄いグレー）へ変更し、透明度も下げます */
input::placeholder,
textarea::placeholder {
    font-weight: normal !important;
    color: #333 !important; /* さらに薄く */
    opacity: 0.5 !important; /* 透明度を下げて細さを強調 */
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-weight: normal !important;
    color: #333 !important;
    opacity: 0.5 !important;
}