/* =============================================
   クレームポップアップ スタイル
============================================= */

/* オーバーレイ（背景暗幕） */
#claim-overlay {
    display:          none;
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background:       rgba(0, 0, 0, 0.55);
    z-index:          9999;
    overflow-y:       auto;
    box-sizing:       border-box;
    padding:          20px;
}

/* ポップアップ本体 */
#claim-popup {
    background:    #fff;
    border-radius: 8px;
    margin:        40px auto;
    padding:       28px 32px;
    max-width:     560px;
    width:         100%;
    box-sizing:    border-box;
}

#claim-popup h3 {
    margin:      0 0 16px;
    font-size:   18px;
    font-weight: bold;
    color:       #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* 必須注記 */
.claim-required-note {
    font-size:   12px;
    color:       #888;
    margin:      0 0 12px;
}

/* ラベル */
.claim-label {
    font-weight:  bold;
    font-size:    14px;
    color:        #333;
    margin:       16px 0 8px;
}

/* 必須マーク */
.claim-required {
    color: #d00;
    margin-left: 2px;
}

/* ラジオボタンリスト */
#claim-radio-list {
    list-style: none;
    padding:    0;
    margin:     0 0 4px;
}

#claim-radio-list li {
    margin-bottom: 8px;
}

#claim-radio-list label {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    cursor:      pointer;
    font-size:   14px;
    color:       #333;
    line-height: 1.5;
}

#claim-radio-list input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #4a90e2;
}

/* テキストエリア */
#claim-con {
    width:       100%;
    min-height:  110px;
    box-sizing:  border-box;
    padding:     10px;
    font-size:   14px;
    border:      1px solid #ccc;
    border-radius: 4px;
    resize:      vertical;
    font-family: inherit;
    line-height: 1.6;
}

#claim-con:focus {
    outline:       none;
    border-color:  #4a90e2;
    box-shadow:    0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* エラーメッセージ */
#claim-error {
    display:     none;
    color:       #d00;
    font-size:   13px;
    margin-top:  8px;
    padding:     8px 12px;
    background:  #fff0f0;
    border:      1px solid #f5c6c6;
    border-radius: 4px;
    line-height: 1.6;
}

/* ボタン群 */
.claim-buttons {
    display:         flex;
    gap:             12px;
    margin-top:      20px;
    justify-content: flex-end;
}

/* 送信ボタン */
#claim-submit {
    background:    #4a90e2;
    color:         #fff;
    border:        none;
    padding:       10px 28px;
    border-radius: 4px;
    cursor:        pointer;
    font-size:     15px;
    font-weight:   bold;
    transition:    background 0.2s;
}

#claim-submit:hover:not(:disabled) {
    background: #357abd;
}

#claim-submit:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* キャンセルボタン */
#claim-cancel {
    background:    #888;
    color:         #fff;
    border:        none;
    padding:       10px 20px;
    border-radius: 4px;
    cursor:        pointer;
    font-size:     15px;
    transition:    background 0.2s;
}

#claim-cancel:hover {
    background: #666;
}

/* サンクスメッセージ */
#claim-thanks {
    display:     none;
    text-align:  center;
    padding:     40px 0 32px;
    font-size:   17px;
    color:       #333;
    line-height: 1.8;
}

/* =============================================
   スマホ対応
============================================= */
@media (max-width: 480px) {
    #claim-overlay {
        padding: 12px;
    }

    #claim-popup {
        margin:  16px auto;
        padding: 20px 16px;
    }

    #claim-popup h3 {
        font-size: 16px;
    }

    .claim-buttons {
        flex-direction: column-reverse;
        gap: 8px;
    }

    #claim-submit,
    #claim-cancel {
        width:   100%;
        padding: 12px;
    }
}