/* =========================================================
住宅見学会申込フォーム スタイル
========================================================= */

/* フォームコンテナ */
#contents.contents.oneColumn.cf,
.reserve-form,
#reserve-form {
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

textarea { 
    height: unset !important; 
}

#contents { 
    line-height: 1.7 !important; 
    max-width: 800px !important; 
    margin: 0 auto !important;
}

.itemWrap > p { 
    display: none; 
}

.wpcf7-response-output,
.reserve-form .alertMessage {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em; 
    font-weight: bold; 
    border-radius: 0.25em; 
}

.reserve-form .alertMessage {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    display: block;
    margin-top: 5px;
    padding: 0.5em;
    font-weight: normal;
}

#contents input.btn_1.wpcf7-form-control.saveButton[type="submit"],
#contents input.btn_1.saveButton[type="submit"],
.reserve-form input.btn_1.wpcf7-form-control.saveButton[type="submit"],
.reserve-form input.btn_1.saveButton[type="submit"],
#reserve-form input.btn_1.saveButton[type="submit"] {
    min-width: 225px !important; 
    max-width: 300px !important; 
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    margin: 0 auto !important;
    height: 50px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

#contents .required:before,
.reserve-form .required:before,
#reserve-form .required:before {
    content: "必須" !important;
    background: #cf646b !important;
    color: #fff !important;
    padding: 0 10px !important;
    margin: 0 5px 0 0 !important;
    font-weight: normal !important;
    font-size: 85% !important;
    border-radius: 3px !important;
    min-width: 2em !important;
    text-align: center !important;
    display: inline-block !important;
}

div.wpcf7,
#contents {
    max-width: 800px;
    margin: 20px auto;
}

#contents input[type=text].noborder,
.reserve-form input[type=text].noborder,
#reserve-form input[type=text].noborder {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    #contents .table,
    .reserve-form .table,
    .set-group.table {
        width: 85vw !important;
        table-layout: fixed !important;
    }
    #contents input[type="text"],
    #contents input[type="email"],
    #contents input[type="tel"],
    #contents textarea,
    .reserve-form input[type="text"],
    .reserve-form input[type="email"],
    .reserve-form input[type="tel"],
    .reserve-form textarea,
    #reserve-form input[type="text"],
    #reserve-form input[type="email"],
    #reserve-form input[type="tel"],
    #reserve-form textarea {
        max-width: 70vw !important;
    }
}

/* =========================================================
表組み
========================================================= */
#contents .table,
.reserve-form .table,
.set-group.table {
    display: table !important;
    border-collapse: collapse !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
    margin: 0 auto !important;
    table-layout: fixed !important;
}

#contents .tr,
.reserve-form .tr,
.set-group .tr {
    display: table-row !important;
}

#contents .td,
#contents .th,
.reserve-form .td,
.reserve-form .th,
.set-group .td,
.set-group .th,
.table th,
.table td {
    padding: 10px !important;
    text-align: left !important;
    display: table-cell !important;
    border: 1px solid #ccc !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

#contents .th,
.reserve-form .th,
.set-group .th,
.table th {
    background: #f3f3f3 !important;
}

#contents .td,
.reserve-form .td,
.set-group .td,
.table td {
    background: #fff !important;
}

#contents .table.th_30 .th,
#contents .table.th_30 th,
.reserve-form .table.th_30 .th,
.reserve-form .table.th_30 th,
.set-group.table.th_30 .th,
.set-group.table.th_30 th {
    width: 30% !important;
    min-width: 30% !important;
    max-width: 30% !important;
    background: #f3f3f3 !important;
}

#contents .table.th_30 .td,
#contents .table.th_30 td,
.reserve-form .table.th_30 .td,
.reserve-form .table.th_30 td,
.set-group.table.th_30 .td,
.set-group.table.th_30 td {
    width: 70% !important;
    min-width: 70% !important;
    max-width: 70% !important;
    background: #fff !important;
}

/* 2行目（post_url）を非表示 */
#contents .table.th_30 .tr:nth-child(2),
.reserve-form .table.th_30 .tr:nth-child(2),
.set-group.table.th_30 .tr:nth-child(2) {
    display: none !important;
}

@media screen and (max-width: 768px) {
    #contents .table.th_30 .th,
    #contents .table.th_30 th,
    .reserve-form .table.th_30 .th,
    .reserve-form .table.th_30 th,
    .set-group.table.th_30 .th,
    .set-group.table.th_30 th {
        width: 100% !important;
        display: block !important;
    }
    #contents .table.th_30 .td,
    #contents .table.th_30 td,
    .reserve-form .table.th_30 .td,
    .reserve-form .table.th_30 td,
    .set-group.table.th_30 .td,
    .set-group.table.th_30 td {
        width: 100% !important;
        display: block !important;
    }
    #contents .tr,
    .reserve-form .tr,
    .set-group .tr {
        border: 1px solid #ccc !important;
        display: block !important;
        margin-bottom: 10px !important;
    }
}

/* =========================================================
ボタン
========================================================= */
#contents a[class*="btn_"],
#contents input[type="button"],
#contents input[type="submit"],
#contents input[type="reset"],
#contents button[type="button"],
#contents button[type="submit"],
#contents button[type="reset"],
.reserve-form a[class*="btn_"],
.reserve-form input[type="button"],
.reserve-form input[type="submit"],
.reserve-form input[type="reset"],
.reserve-form button[type="button"],
.reserve-form button[type="submit"],
.reserve-form button[type="reset"] {
    cursor: pointer !important;
    border-radius: 6px !important;
    background-color: #fbf4f0 !important;
    background-image: linear-gradient(to top, #fff, #fbf4f0) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), #fff 0px 0px 0px 2px inset !important;
    padding: 0.8em 1.2em !important;
    display: inline-block !important;
    border: 1px solid #d9cbc4 !important;
    vertical-align: middle !important;
    text-align: center !important;
    color: #463e39 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    min-height: 45px !important;
    line-height: 1.45 !important;
}

a[class*="btn_"]:after,
input[type="button"]:after,
input[type="submit"]:after,
input[type="reset"]:after,
button[type="button"]:after,
button[type="submit"]:after,
button[type="reset"]:after {
    font-family: "FontAwesome";
    font-size: 130%;
    content: "\f101";
    padding: 0 0 0 10px;
    font-weight: normal;
    color: #9c9078;
    position: relative;
    bottom: 2px;
    vertical-align: middle;
    line-height: 14px;
}

a[class*="btn_"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="button"]:hover,
button[type="submit"]:hover,
button[type="reset"]:hover {
    background-color: #fbf4f0;
    background-image: linear-gradient(to bottom, #fbf4f0, #fff);
    color: #463e39;
    text-decoration: none;
    box-shadow: 0 0 0 rgba(0,0,0,0.1), #fff 0px 0px 0px 2px inset;
}

a.btn_0:after,
input.btn_0[type="button"]:after,
input.btn_0[type="submit"]:after,
input.btn_0[type="reset"]:after,
button.btn_0[type="button"]:after,
button.btn_0[type="submit"]:after,
button.btn_0[type="reset"]:after {
    content: "";
    padding: 0;
}

input[disabled="disabled"],
button[disabled="disabled"],
input[disabled="disabled"]:hover,
button[disabled="disabled"]:hover {
    background: #eee;
    color: #aaa;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    cursor: default;
    box-shadow: none;
}

/* =========================================================
チェックボックス、ラジオボタン
========================================================= */
input[type="checkbox"],
input[type="radio"] {
    top: -1px;
    vertical-align: middle;
    margin: 0 3px;
    cursor: pointer;
}

#contents .radiobuttonLabel,
#contents .checkboxLabel,
.reserve-form .radiobuttonLabel,
.reserve-form .checkboxLabel,
#reserve-form .radiobuttonLabel,
#reserve-form .checkboxLabel {
    cursor: pointer !important;
    display: inline-block !important;
    min-width: 200px !important;
    margin-right: 20px !important;
    max-width: 100% !important;
}

@media screen and (max-width: 768px) {
    #contents .radiobuttonLabel,
    #contents .checkboxLabel,
    .reserve-form .radiobuttonLabel,
    .reserve-form .checkboxLabel,
    #reserve-form .radiobuttonLabel,
    #reserve-form .checkboxLabel {
        display: block !important;
        min-width: auto !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}

/* =========================================================
フォーム要素
========================================================= */
#contents input[type="text"],
#contents input[type="email"],
#contents input[type="tel"],
#contents textarea,
#contents select,
.reserve-form input[type="text"],
.reserve-form input[type="email"],
.reserve-form input[type="tel"],
.reserve-form textarea,
.reserve-form select,
#reserve-form input[type="text"],
#reserve-form input[type="email"],
#reserve-form input[type="tel"],
#reserve-form textarea,
#reserve-form select {
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

#contents input.TEL_1,
#contents input.TEL_2,
#contents input.TEL_3,
.reserve-form input.TEL_1,
.reserve-form input.TEL_2,
.reserve-form input.TEL_3,
#reserve-form input.TEL_1,
#reserve-form input.TEL_2,
#reserve-form input.TEL_3 {
    width: 88px !important;
}

@media screen and (max-width: 768px) {
    #contents input.TEL_1,
    #contents input.TEL_2,
    #contents input.TEL_3,
    .reserve-form input.TEL_1,
    .reserve-form input.TEL_2,
    .reserve-form input.TEL_3,
    #reserve-form input.TEL_1,
    #reserve-form input.TEL_2,
    #reserve-form input.TEL_3 {
        width: 100% !important;
    }
}