@charset "UTF-8";


/* ================================================== */

/* FORM */

/* ================================================== */

/* ----------------------------------------*/
.rc{color:#fa0d0d;font-weight:bold;}
i.rc:after{content:"※";margin:0 5px;font-style:normal;font-weight:bold;}

/* ----------------------------------------*/
.errs{color:#fa0d0d;}
p.errs span{display:inline !important;width:auto !important;}

p.errs span label{display:block;font-weight:bold;margin:5px 0 0;}

p.errs br{display:none !important;}

/* ----------------------------------------*/
b{font-weight:bold;}



#formArea small{
    display:block;
    font-size:90%;
    padding:5px 0;
}

/* ----------------------------------------*/
#formArea{margin:30px 0 0;}


/* table element ----------------------------------------*/
#tableEle{
    width:100%;
    margin:0 0 15px;
    border-bottom:#d6d2c0 solid 1px;
}
#tableEle th, #tableEle td{
    padding:10px;
    text-align:left;
    border-top:#d6d2c0 solid 1px;
}
#tableEle th{width:130px;vertical-align:middle;}
#tableEle.target th{width:200px;}



/* forms element ----------------------------------------*/

#forms{margin:10px 0 0;}

/* input[type="text"] */
#forms input[type="text"]{
    line-height:24px;
    padding:3px 10px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    border:#d7d7d7 solid 1px;
    outline:none;
    appearance:none;
}


/* input[type="radio"] */
#forms .radiobox label{
    display:inline-block;
    margin:0 20px 0 0;
    cursor:pointer;
    line-height:20px;
}

.otherbox{
    display:inline;
    margin-left: 10px;
}


/* select */
#forms select{
    width:180px;
    height:35px;
    line-height:35px;
    padding:0 10px;
    cursor:pointer;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    outline:none;
    appearance:none;
    border:#d7d7d7 solid 1px;
    background:url(/assets/img/form/drop.png) 95% 50% no-repeat #FFF;
}


/* textarea */
#forms textarea{
    width:80%;
    height:80px;
    padding:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    border:#d7d7d7 solid 1px;
    outline:none;
    appearance:none;
    resize:none;
}



/* names layout ----------------------------------------*/
#forms .names{}
#forms .names li{display:inline-block;width:48%;}
#forms .names li span{
    display:inline-block;
    width:35px;
    text-align:center;
}
#forms .names li input[type="text"]{width:75%;}



/* address layout ----------------------------------------*/
.zipbox,
.prefbox,
.addressbox li{margin:5px 0 0;}
.addressbox li span{display:inline-block;width:60px;}
.addressbox li input[type="text"]{width:60%;}


/* etc layout ----------------------------------------*/
.cancer input[type="text"],
.tell input[type="text"],
.mail input[type="text"],
.mail2 input[type="text"],
.etc input[type="text"]{width:50%;}



/* submit btn ----------------------------------------*/
#forms .btns{text-align:center;}
#forms .btns input{
    display:inline-block;
    line-height:40px;
    margin:0 auto;
    padding:0 60px;
    color:#FFF;
    font-size:100%;
    font-weight:bold;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:#4c430e;
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    transition:none;
    -webkit-transition:none;
    border:none;
    outline:none;
}
#forms .btns input:hover{background-color:#5F551C;}

/* job_detail ----------------------------------------*/
#job_detail th,
#job_detail td{border-top:none;}
#job_detail td li{margin:5px 0 0;}
#job_detail td li span{display:inline-block;width:70px;}
#job_detail td li input[type="text"]{width:60%;}





@media screen and (max-width: 768px) {

    /* table element ----------------------------------------*/
    #tableEle,
    #tableEle tbody,
    #tableEle tr,
    #tableEle th,
    #tableEle td{
        display:block;
        width:auto;
        padding:0;
        border:none;
    }
    #tableEle th{
        padding:10px 5px;
        font-weight:bold;
        border-top:#d6d2c0 solid 1px;
        border-bottom:#d6d2c0 solid 1px;
        background:#E0DFDB;
    }
    #tableEle td{padding:5px 5px 10px;}
    #tableEle.target th{
        width: auto;
    }


    /* forms element ----------------------------------------*/

    /* input[type="radio"] */
    #forms .radiobox label{
        display:block;
        margin:5px 0 0;
        padding:10px 5px;
        background:#E8E8E8;
    }

    .otherbox{
        display: block;
        margin-left: 0;
        margin-top: 6px;
    }
    .otherbox input{
        width: 90%;
    }


    #forms .radiobox label input{margin:0 5px 0 0;}


    /* select */
    #forms select{
        width:98%;
        padding:0 2%;
    }

    /* textarea */
    #forms textarea{
        width:90%;
        padding:5px;
    }

    /* names layout ----------------------------------------*/
    #forms .names{}
    #forms .names li{
        display:block;
        width:auto;
        margin:3px 0;
    }
    #forms .names li span{line-height:20px;}

    /* address layout ----------------------------------------*/
    .zipbox,
    .prefbox,
    .addressbox li{margin:5px 0 0;}
    .addressbox li span{display:block;width:auto;margin:5px 0 0;}
    .addressbox li input[type="text"]{width:90%;}

    /* etc layout ---------------------------------------- */
    .tell input[type="text"],
    .facility input[type="text"],
    .mail input[type="text"]{width:90%;}
    .mail2 input[type="text"]{width:90%;}
    .etc input[type="text"]{width:90%;}
    .tell span.rc,.mail span.rc{display:block;margin:5px 0 0;}

    /* submit btn ----------------------------------------*/
    #forms .btns{text-align:center;}
    #forms .btns input{
        display:block;
        width:100%;
        padding:0;
    }

    /* job_detail ----------------------------------------*/
    #job_detail th{display:none;}
    #job_detail td li span{display:block;width:auto;margin:5px 0 0;}
    #job_detail td li input[type="text"]{width:90%;}

    /* submit btn ----------------------------------------*/
    #forms .btns input:nth-child(n+2){
        margin-top: 10px;
    }


}











/* ================================================== */

/* CONTACT */

/* ================================================== */
#contact .tel a{
    display:block;
    width:320px;
    text-align:center;
    margin:0 auto;
    padding:10px 0;
    color:#FFF;
    background:#4c430e;
    font-size: 18px;
    font-weight: bold;
}
#contact .tel a:hover {
    background-color: #5F551C;
}
#contact .tel a i{
    margin-right:10px;
    font-weight: bold;
}
#contact .inner{
    padding:15px 20px;
    background:#ebf1e1;
}
#contact .inner p{
    line-height:1.4;
}
#contact .entry{
    display:block;
    width:320px;
    text-align:center;
    margin:0 auto;
    padding:10px 0;
    color:#FFF;
    background:#4c430e;
}
#contact .entry .fa{width:2em;font-size:1.2em;}
/* #contact .entry:hover{background-color:#5F551C;} */

/* ----------------------------------------*/
#formFootLink{}
#formFootLink ul{float:right;}
#formFootLink li{margin:0 0 0 15px;}
#formFootLink .fa{width:1.05em;}


@media screen and (max-width: 768px) {
    #contact .inner{padding:5px;}
    #contact .entry{width:auto;}

    #formFootLink ul{float:none;}
    #formFootLink li{margin:0 15px 0 0;}
    #contact .tel a{width:auto;}
}

.hide{
    display: none!important;
}