@charset "UTF-8";

/*
Theme Name: Lightning Child
Template: lightning
*/

/* ============================================================
   Contact Form 7: Lightning G3 Pro Optimized Design
   (内側区切り線・入力枠グリーン・ラベル改行防止版)
   ============================================================ */

/* 1. フォーム全体（最大幅 950px / 全体角丸 12px） */
table.inquiry {
    width: 98% !important;
    max-width: 950px !important;
    margin: 2.5em auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e0e0e0 !important; 
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    table-layout: fixed !important;
}

/* 2. セルの調整（上下の余白を 25px に広げてゆとりを確保） */
table.inquiry th,
table.inquiry td {
    padding: 25px 20px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* CF7の自動タグによる不要な隙間を排除 */
table.inquiry td p {
    margin: 0 !important;
    padding: 0 !important;
}
table.inquiry td br {
    display: none !important; /* 不要なbrは非表示（余白はCSSで制御） */
}

/* 入力欄を囲うspanの挙動を安定化 */
.wpcf7-form-control-wrap {
    display: block !important;
}

/* 最後の線の重複防止 */
table.inquiry tr:last-child th,
table.inquiry tr:last-child td { border-bottom: none !important; }
table.inquiry td:last-child { border-right: none !important; }

/* ラベル列の設定（PCでの改行を完全に防止） */
table.inquiry th {
    background-color: #F9F8F6 !important;
    width: 310px !important;      /* 項目名が1行で収まる幅 */
    text-align: left !important;
    font-weight: bold !important;
    color: #333 !important;
    font-size: 15px !important;
}

/* 3. 「必須」ラベル（サイズ 14px / 角丸 8px） */
.haveto {
    background-color: #BF5454 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    margin-right: 10px !important;
    display: inline-block !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

/* 4. お客さま入力欄（グリーン枠線 #5F7470 / 1px厚 / 角丸 8px） */
table.inquiry input[type="text"],
table.inquiry input[type="email"],
table.inquiry input[type="tel"],
table.inquiry select,
table.inquiry textarea {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid #5F7470 !important;
    padding: 12px !important;
    margin-top: 12px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background-color: #fafafa !important;
    font-size: 16px !important;
    transition: all 0.2s ease-in-out !important;
    appearance: none;
    display: block !important;
}

/* td内での短い区切り線 (.inner-line) */
.inner-line {
    width: 15% !important;          /* 20%の短い線 */
    height: 1px !important;         /* 線の太さ 1px */
    background-color: #F5F7F4 !important; /* ボタンと同じグリーン */
    margin: 15px 0 !important;      /* 上下に20pxずつの隙間 */
    display: block !important;
}

/* ラジオボタンやチェックボックスのラップ調整 */
table.inquiry .wpcf7-list-item {
    margin-top: 0 !important;
}

/* 入力中の強調表示 */
table.inquiry input:focus,
table.inquiry textarea:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(95, 116, 112, 0.1) !important;
    outline: none !important;
}

/* 5. 送信ボタン */
#formbtn {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 40px auto !important;
    background-color: #5F7470 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

/* ============================================================
   レスポンシブ対応（スマホ表示）
   ============================================================ */
@media screen and (max-width: 767px) {
    table.inquiry {
        width: 96% !important;
        display: block !important;
    }

    table.inquiry tbody, table.inquiry tr, 
    table.inquiry th, table.inquiry td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    table.inquiry th {
        border-right: none !important;
        border-bottom: none !important;
        padding: 20px 15px 5px 15px !important;
        background-color: #F9F8F6 !important;
    }

    table.inquiry td {
        border-right: none !important;
        padding: 5px 15px 15px 15px !important;
    }

    /* スマホ時のボタン文字サイズ 20px */
    #formbtn {
        font-size: 20px !important;
        max-width: 100% !important;
    }

    .wpcf7-list-item {
        display: block !important;
        margin: 12px 0 !important;
    }
}