@charset "utf-8";
/*
Theme Name: solaris_tcd088-child
Author: r Ku
Version: 2.1.3
Text Domain:tcd-solaris
Template: solaris_tcd088
*/


/* =======================================================
* page-contact
* ======================================================= */
#page_contact .page_desc,
.contact_container {
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
    margin: 0 auto;
}

.contact_container {
    background: #FBFBFB;
}

.page_desc .contact_area {
    margin-bottom: 0;
}

/* 固定ページエディター用 */
.form_container {
    width: 100%;
    max-width: 580px;
    box-sizing: border-box;
    padding: 80px 0;
    margin: 80px auto 0;
}

.form_group {
    padding-bottom: 25px;
}

label {
    display: inline-block;
    padding-bottom: 10px;
}

input, textarea {
    width: 100%;
    border: 1px solid #707070;
    padding: 15px;
}

textarea {
    max-width: 580px;
}

input[type=checkbox] {
    width: auto;
}

.kome {
    font-size: 12px;
    text-align: left;
}

.form_btn {
    text-align: center;
    padding: 55px 0 0;
}

.form_btn input {
    width: 100%;
    max-width: 260px;
    border-radius: 60px;
    cursor: pointer;
    margin: 0 10px;
}

.submit {
    background: linear-gradient(to right, #63AFD9, #71B0B4) !important;
    border: 1px solid transparent; /* ボーダーカラーは透過(transparent) */
    background-image:  linear-gradient(to right, #63AFD9, #71B0B4); /* グラデーション背景 */
    background-clip: border-box; /* 背景の適用範囲にボーダーを含める */
    background-origin: border-box; /* 背景の基準位置にボーダーを含める */
    color: #FFF;
    
}

.back {
    background: #FFF;
    border: 1px solid #3B4043; 
}

.submit:hover,
.back:hover {
    opacity: 0.7;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.required {
    color: #E11C1C;
    font-size: 12px;
    position: relative;
    bottom: 1px;
    padding-left: 20px;
}

.mw_wp_form .error {
    font-size: 12px;
}

#page_contact .design_button {
    margin-top: 80px;
}

/* checkbox-design */
.checkbox {
    padding-top: 10px;
}

.checkbox input[type=checkbox].type_checkbox {
    display: none;
}
  
.checkbox label {
    display: inline-block;
    cursor: pointer;
}

.checkbox .type_checkbox + span {
    display: inline-block;
    position: relative;
    padding-left: 2em;
}

.checkbox .type_checkbox + span::after,
.checkbox .type_checkbox + span::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #707070;
    position: absolute;
    top: 0;
    left: 0;
}

.checkbox .type_checkbox + span::after {
    width: 6px;
    height: 12px;
    border: none;
    border-right: 3px solid #63AFD9;
    border-bottom: 3px solid #63AFD9;
    transform: rotate(45deg);
    top: 2px;
    left: 6px;
    opacity: 0;
}

.checkbox .type_checkbox:checked + span {
    color: #63AFD9;
}
  
.checkbox .type_checkbox:checked + span::after {
    opacity: 1;
}

/* =======================================================
* max-width: 1399px
* ======================================================= */
@media screen and (max-width: 1399px) {
    #page_contact .page_desc {
        padding: 40px 25px;
    }

    .form_container {
        font-size: 12px;
        padding: 40px;
        margin: 40px auto 0;
    }

    label {
        padding-bottom: 5px;
    }

    input, textarea {
        padding: 10px;
    }

    .checkbox .type_checkbox + span {
        padding-left: 2.5em;
    }

    .form_btn {
        padding: 15px 0 0;
    }

    .form_btn input {
        font-size: 12px;
        font-weight: normal;
        padding: 13px;
    }

    .form_btn input.back {
        color: #3B4043;
        margin: 0 0 20px 0;
    }

    #page_contact .design_button {
        margin-top: 40px;
    }
}

/* =======================================================
* max-width: 770px
* ======================================================= */
@media screen and (max-width: 770px) {
    .form_container {
        padding: 25px;
    }

    .checkbox label {
        display: block;
        padding: 0;
    }

    .form_btn input.submit {
        margin: 0;    
    }
}

/* =======================================================
* max-width: 440px
* ======================================================= */
@media screen and (max-width: 440px) {
    .mwform-tel-field input[type="text"] {
        width: 25%;
    }
}