/* モーダルオーバーレイ: 背景の透明度を調整し、本体の文字色を固定 */
.cf7-modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 9999;
    overflow-y: auto;
}

/* モーダルコンテンツ: 文字を確実に黒、背景を確実に白にする */
.cf7-modal-content {
    background: #fff; /* 背景色を白に固定 */
    color: #333; /* 文字色を濃いグレー（または黒）に固定 */
    width: 90%;
    max-width: 600px; 
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-sizing: border-box;
}

/* 確認画面リストの項目名と値のスタイル (文字色が継承されていることを確認) */
.cf7-confirm-data-list {
    margin-left: 20px;
    font-size: 120%;
}
.cf7-confirm-data-list dt {
    font-weight: bold;
    margin-top: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    color: #111; /* 項目名も濃い色に */
}
.cf7-confirm-data-list dd {
    margin-left: 0;
    padding-left: 10px;
    color: #333; /* 値も濃い色に */
}

/* モーダル内のボタンのスタイルも確認 */
.cf7-modal-content .modal-buttons .cf7-back-button {
    background: #ccc;
    color: #333;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
.cf7-modal-submit-button {
    /* CF7のデフォルトスタイルが適用されているはずですが、文字色を念のため確認 */
    color: #fff; 
    background-color: #0073aa; /* WordPressの標準的なボタン色を仮定 */
}
.cf7-confirm-button {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.screen-reader-response,.wpcf7-response-output {
    color: #a00;
    font-weight:bold;
}