/****************************************************************************************************/
/* Contact */
/****************************************************************************************************/

.contact_form {
    margin: 0px auto 0px auto;
}

.contact_title {
    display: inline-block;
    vertical-align: top;
    min-width: 180px;
    max-width: 180px;
}

.contact_title_wide {
    display: inline-block;
    vertical-align: top;
    width: 250px;
}

.contact_title_mandatory {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    min-width: 180px;
    max-width: 180px;
}

.contact_title_mandatory_wide {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    width: 250px;
}

.contact_title_jpn {
    margin: 0px;
    font-family: "Myriad Pro","Verdana","Arial", "Helvetica", "sans-serif";
    font-size: 16px;
    color: #000000;
}

.contact_title_eng {
    margin: 0px;
    font-family: "Myriad Pro","Verdana","Arial", "Helvetica", "sans-serif";
    font-size: 14px;
    color: #0B479F;
}

.contact_title_mandatorymark {
    font-family: "Myriad Pro","Verdana","Arial", "Helvetica", "sans-serif";
    font-size: 16px;
    color: #FF0000;
}

.contact_input_mini,
.contact_input,
.contact_input_wide
.contact_input_maximum {
    background: #f8f8ff;
    border-style: solid;
    border-width: 1px;
    border-color: #a0a0b0;
    font-size: 16px;
}
.contact_input_mini_mandatory,
.contact_input_mandatory,
.contact_input_mandatory_wide,
.contact_input_mandatory_maximum {
    background: #f8f8ff;
    border-style: solid;
    border-width: 2px;
    border-color: #9090a0;
    font-size: 16px;
}

.option_group {
    background-color: #cfcff0;
}

.option_group_title {
    display: inline-block;
    width: 100%;
    text-align: left;
    background-color: #ffffff;
}


/****************************************************************************************************/
/* レスポンシブ対応 */
/****************************************************************************************************/

/* スマートフォン(mini) */
@media screen and (min-width: 1px) {
    .contact_title_align {
        text-align: left;
    }
    .contact_input_mini,
    .contact_input_mini_mandatory {
        width: 60vw;
        max-width: 300px;
    }
    .contact_input,
    .contact_input_mandatory {
        width: 80vw;
        max-width: 360px;
    }
    .contact_input_wide,
    .contact_input_mandatory_wide {
        width: 80vw;
        max-width: 600px;
    }
    .contact_input_maximum,
    .contact_input_mandatory_maximum {
        width: 90vw;
        max-width: 800px;
    }
}

/* タブレット(medium) */
@media screen and (min-width: 480px) {
    .contact_title_align {
        text-align: left;
    }
    .contact_input_mini,
    .contact_input_mandatory_mini {
        width: 60vw;
        max-width: 300px;
    }
    .contact_input,
    .contact_input_mandatory {
        width: 80vw;
        max-width: 360px;
    }
    .contact_input_wide,
    .contact_input_mandatory_wide {
        width: 80vw;
        max-width: 600px;
    }
    .contact_input_maximum,
    .contact_input_mandatory_maximum {
        width: 90vw;
        max-width: 800px;
    }
}

/* PC(large) */
@media screen and (min-width: 768px) {
    .contact_title_align {
        text-align: right;
    }
    .contact_input_mini,
    .contact_input_mandatory_mini {
        width: 60vw;
        max-width: 300px;
    }
    .contact_input,
    .contact_input_mandatory {
        width: 80vw;
        max-width: 360px;
    }
    .contact_input_wide,
    .contact_input_mandatory_wide {
        width: 80vw;
        max-width: 600px;
    }
    .contact_input_maximum,
    .contact_input_mandatory_maximum {
        width: 90vw;
        max-width: 800px;
    }
}