/**
 * コンタクトフォーム7用カスタムスタイル
 * 
 * 【カラー設定】
 * - ボタンの背景色: var(--color_main)     // テーマのメインカラー
 * - ボタンの文字色: #fff // 白
 * - ホバー時背景色: var(--color_main_thin) // テーマのメインカラー薄め
 * - ホバー時文字色: var(--color_main)     // テーマのメインカラー
 */
/**
 * コンタクトフォーム7用カスタムスタイル
 */

/* コンタクトフォーム全体のスタイル */
.contact-form {
    /* カラー設定 - ローカル変数（カスタムプロパティ）*/
    --cf7-btn-bg          : var(--color_main);      /* ボタンの背景色:     テーマのメインカラー */
    --cf7-btn-text        : #fff;                   /* ボタンの文字色:     白 */
    --cf7-btn-hover-bg    : var(--color_main_thin); /* ホバー時背景色:     テーマのメインカラー薄め */
    --cf7-btn-hover-text  : var(--color_main);      /* ホバー時文字色:     テーマのメインカラー */
    --cf7-btn-hover-border: var(--color_main);      /* ホバー時ボーダー色: テーマのメインカラー */
    
    max-width  : 800px;
    margin     : 0 auto;
    padding    : 20px;
    font-family: sans-serif;
    
    /* フォームグループのスタイル */
    .form-group {
        margin-bottom: 20px;
    }
    
    /* ラベルのスタイル */
    label {
        display      : block;
        margin-bottom: 5px;
        font-weight  : 600;
        color        : #333;
        
        /* 必須マークのスタイル */
        .required {
            color      : #ff4742;
            margin-left: 3px;
        }
        
        /* 任意マークのスタイル */
        .optional {
            color      : #888;
            font-size  : 0.9em;
            font-weight: normal;
        }
    }
    
    /* テキスト入力フィールドのスタイル */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width           : 100%;
        padding         : 10px;
        border          : 1px solid #ddd;
        border-radius   : 4px;
        background-color: #fff;
        font-size       : 16px;
        transition      : border-color 0.3s;
        box-sizing      : border-box;
        
        /* フォーカス時のスタイル */
        &:focus {
            border-color: var(--cf7-btn-bg);
            outline     : none;
            box-shadow  : 0 0 5px rgba(74, 144, 226, 0.3);
        }
    }
    
    /* テキストエリアのスタイル */
    textarea {
        height: 150px;
        resize: vertical;
    }
    
    /* 送信ボタンのスタイル */
    input[type="submit"] {
        background-color: var(--cf7-btn-bg);
        color           : var(--cf7-btn-text);
        border          : 1px solid transparent;
        padding         : 12px 24px;
        font-size       : 16px;
        font-weight     : 600;
        border-radius   : 4px;
        cursor          : pointer;
        transition      : all 0.3s;
        box-sizing      : border-box !important;
        
        /* ホバー時のスタイル */
        &:hover {
            background-color: var(--cf7-btn-hover-bg);
            color           : var(--cf7-btn-hover-text);
            border          : 1px solid var(--cf7-btn-hover-border);
        }
    }
    
    /* エラーメッセージのスタイル */
    .wpcf7-not-valid-tip {
        color      : #ff4742;
        font-size  : 0.9em;
        margin-top : 5px;
    }
    
    /* バリデーションエラー時の入力フィールド */
    .wpcf7-not-valid {
        border-color: #ff4742 !important;
    }
    
    /* 送信完了メッセージ */
    .wpcf7-response-output {
        margin       : 20px 0 0;
        padding      : 12px;
        border-radius: 4px;
        font-size    : 14px;
        text-align   : center;
    }
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
    .contact-form {
        padding: 15px;
        
        input[type="submit"] {
            width: 100%;
        }
    }
}