/* contact */


.hidebox {
    position: absolute;
    height: 100%;
    width: 100%;

}

.hidebox > div{
    background: #1054ff;
    height: 150%;
    width: 100%;
    margin: 0;
    opacity: 0.2;
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
}




#contact_detail{
    background: #EEE;
}

#contact_detail .wrap{
    position: relative;
}

#contact_detail .required{
}

#contact_detail .required span{
    color: #dc6262;
}


#contact_detail .body .complete{
    height: 300px;
 }

 #contact_detail .body .complete h3{
     font-size: 120%;
     padding: 0 0 20px;
 }

#contact_detail .body .complete p{
    padding: 0 0 10px;

}


#contact_detail .body ul li{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-bottom: 1px solid #DDD;
}

#contact_detail .body ul li .label{
    width: 30%;
    padding: 20px 0;
    box-sizing: border-box;
    position: relative;
}

#contact_detail .body ul li .label label{
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#contact_detail .body ul li .detail{
    width: 70%;
    padding: 20px;
    box-sizing: border-box;
}

#contact_detail .body ul li .detail label{
    padding-right: 20px;
    font-size:110%;
}

#contact_detail .body ul li .detail .check{
    font-size: 120%;
    padding: 10px 0;
}

#contact_detail .body ul li .detail textarea,
#contact_detail .body ul li .detail input{
    font-size: 120%;
    padding: 10px;
    border-radius: 5px;
    border: 0;
    background: #FFF;
    margin-right: 8px;
    color: #333;
}

#contact_detail .body ul li .detail textarea :focus,
#contact_detail .body ul li .detail input :focus{
    border: 1px solid #94abb3;
}

#contact_detail .body ul li .tel > input{
    width: 90px;
    box-sizing: border-box;
}

#contact_detail .body ul li .contact_txt > textarea,
#contact_detail .body ul li .mail > input{
    width: 350px;
    box-sizing: border-box;
}

#contact_detail .body ul li .detail .submsg {
    margin-top: 5px;
    display: inline-block;
}

#contact_detail .body ul li .detail .errmsg_wrap {
    margin-top: 8px;
}

#message-box .message{
    color: #dc6262;
    font-size: 90%;
    margin-bottom: 8px;
}

#contact_detail .body ul li .label label span{
    color: #dc6262;
}

#contact_detail .body ul li .detail .errmsg {
    color: #dc6262;
    font-size: 90%;
    margin-right: 8px;
    display: inline-block;
}

#contact_detail .body ul .button{
    border: 0;
    text-align: center;
    padding: 40px 20% 0;

}


#contact_detail .body ul li #inpGoCheck,
#contact_detail .body ul li #inpSend{
    background: #368aa6;
    color: #FFF;
    padding: 10px;
    width: 280px;
    line-height: 100%;
    font-size: 160%;
    border: 0;
    border-radius: 20px;
    margin: 0 auto;
}

#contact_detail .body ul li #inpGoBack{
    background: #878787;
    color: #FFF;
    padding: 10px;
    width: 280px;
    line-height: 100%;
    font-size: 160%;
    border: 0;
    border-radius: 20px;
    margin: 0 auto;
}

#contact_detail .body ul li #inpGoBack a{
    color: #FFF;
	line-height: inherit;
}


















/* 480 768 1824 */
@media screen and (max-width:768px) { 


    #contact_detail .required {
        top: 45px;
    }

    #contact_detail .body ul li {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        border-bottom: 1px solid #DDD;
    }

    #contact_detail .body ul li {
        display: block;
        flex-wrap: unset;
        flex-direction: unset;
    }

    #contact_detail .body ul li .detail {
        width: 100%;
        padding: 10px 0px;
        box-sizing: border-box;
    }

    #contact_detail .body ul li .kana,
    #contact_detail .body ul li .name {
        max-width: 370px;
    }

    #contact_detail .body ul li .mail,
    #contact_detail .body ul li .tel{
        max-width: 370px;
    }


    #contact_detail .body ul li .label {
        width: 100%;
        padding:20px 0px 10px;
        box-sizing: border-box;
        position: initial;
    }

    #contact_detail .body ul li .label label {
        position: initial;
        top: initial;
    }

    #contact_detail .body ul li .detail textarea, #contact_detail .body ul li .detail > input {
        font-size: 120%;
        width: 41%;
        margin: 0;
    }

    #contact_detail .body ul li .tel > input {
        width: 32%;
    }

    #contact_detail .body ul li .detail .submsg{
        display: block;
    }

    #contact_detail .body ul li .contact_txt > textarea, #contact_detail .body ul li .mail > input {
        width: 100%;
    }

    #contact_detail .body ul .button {
        text-align: center;
        padding: 40px 0 0;
        max-width: 450px;
        margin: 0 auto;
    }

    #contact_detail .body ul li #inpSend,
    #contact_detail .body ul li #inpGoBack{
        margin: 0 auto 8px;
    }



}