@charset "utf-8";

/*--------------------------------------------------------------------------------[フォームスタイル]----*/
form#mail_form {
    font-weight: 400;
    width : 100%;
    margin : 50px auto;
    padding : 10px 0;
    background : rgba(255, 255, 255, 0.45);
    border : 1px solid #ccc;
    border-radius : 7px;
}
form#mail_form dl {
    width : 95%;
    margin : 0 auto;
    overflow : hidden;
}
form#mail_form dl dt {
    clear : both;
    width : 27%;
    float : left;
    border-top : 1px solid #ccc;
    padding : 23px 0;
    text-align : right;
    overflow : hidden;
}
form#mail_form dl dt.value {
    clear : both;
    width : 27%;
    float : left;
    border-top : 1px solid #ccc;
    padding : 15px 0;
    text-align : right;
    overflow : hidden;
}
form#mail_form dl dd {
    width : 71%;
    float : right;
    border-top : 1px solid #ccc;
    padding : 20px 0 15px 30px;
}
form#mail_form dl dt:first-child, form#mail_form dl dt:first-child+dd {
    border : none;
}

/*----------------------------------------------------------------------------------[見出しタイトル]----*/
form#mail_form dl dt span {
    display : block;
    font-size : 85%;
    color : #3377ff;
}
form#mail_form dl dt span.required, form#mail_form dl dt span.optional {
    display : inline-block;
    float : left;
    color : #fff;
    padding : 3px 5px 6px;
    border-radius : 3px;
}
#mail_contents {
    padding : 3px 5px 6px;
    font-size: 16px;
}
form#mail_form dl dt span.required {
    background : rgba(255, 0, 0, 0.8);
}
form#mail_form dl dt span.optional {
    background : rgba(0, 0, 255, 0.8);
}

/*---------------------------------------------------------------------------------------[入力項目]----*/
form#mail_form dl dd span {
    display : block;
    color : #ff0000;
}
form#mail_form input {
    height : 35px;
    border : 1px solid #ccc;
    border-radius : 3px;
    background : #fafafa;
    padding: 1px 5px 5px;
}
form#mail_form textarea {
    width : 100%;
    height : 200px;
    resize : vertical;
    border : 1px solid #ccc;
    border-radius : 3px;
    background : #fafafa;
}
form#mail_form input:focus, form#mail_form textarea:focus {
    border : 1px solid #B11569;
    background : #fff;
}

/*--------------------------------------------------------------------------------[入力項目のサイズ]----*/
form#mail_form input#name_1, form#mail_form input#name_2 {
    width : 45%;
}
form#mail_form input#read_1, form#mail_form input#read_2 {
    width : 45%;
}
form#mail_form input#mail_address, form#mail_form input#mail_address_confirm {
    width : 90%;
}
form#mail_form ul li {
    list-style-type : none;
    margin-left: -40px;
    margin-bottom : 0.5em;
}
form#mail_form ul li label:hover {
    cursor : pointer;
}
form#mail_form ul li input {
    height : auto;
    margin-right : 0.5em;
}
form#mail_form input#postal {
    width : 20%;
}
form#mail_form input#address_1, form#mail_form input#address_2 {
    display : block;
    width : 90%;
    margin-bottom : 7px;
}
form#mail_form input#phone {
    width : 45%;
}
form#mail_form input#day {
    width : 160px;
}
form#mail_form input#mail_submit_button {
    width : 100%;
    height : auto;
    padding : 8px 10px;
    vertical-align : middle;
    color : #FFF;
    background : #222;
    border-radius: 0;
    border: none;
    font-family : inherit;
}
form#mail_form input#mail_submit_button:hover {
    cursor : pointer;
    color : #FFF;
    background : #B11569;
}
form#mail_form ul li .input1, form#mail_form ul li .input2, form#mail_form ul li .input3 {
    display: none;
    margin: 20px 0;
}
form#mail_form ul li .input1 input {
    width : 90%;
}
form#mail_form ul li .input1 p {
    margin: 10px 0;
}
form#mail_form ul li .input2 input {
    width : 90%;
}
form#mail_form ul li .input3 input {
    width : 90%;
}


/* --responsive------------------------------------------- */

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

form#mail_form {
    width : 95%;
}
form#mail_form dl{
    width : 90%;
}
form#mail_form dl dt{
    width : auto;
    float : none;
    text-align : left;
    padding : 10px 0 5px;
}
form#mail_form dl dd{
    width : auto;
    float : none;
    border-top : none;
    padding : 0px 0 13px 0px;
}
form#mail_form dl dt span{
    font-weight : normal;
}

/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
    margin-right : 1em;
}

/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */


form#mail_form input{
    height : 35px;
}
form#mail_form input#name_1,
form#mail_form input#name_2,
form#mail_form input#read_1,
form#mail_form input#read_2,
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm,
form#mail_form input#postal,
form#mail_form input#address_1,
form#mail_form input#address_2,
form#mail_form input#phone,
form#mail_form input#day,
form#mail_form textarea{
    max-width : 98%;
    -webkit-appearance : none;
}


}