@charset "UTF-8";
.w500{
    max-width: 500px;
    width: 100%;
}
.btn_group .basic_btn,
.btn_group .black_btn {
    width: 262px;
    margin: 22px;
}
section {
	max-width: 1194px;
	margin: 0 auto;
    width: 90%;
}
.basic_btn{
    width: 100%;
    max-width: 192px;
}
.basic_btn.w500{
    max-width: 500px;
}
.contents_wrap{
    margin-bottom: 40px;
}
.contents_wrap:last-of-type{
    margin-bottom: 86px;
}
.top_message{
    text-align: center;
    line-height: 1.7;
    margin-bottom: 80px;
    font-size: 14px;
}
.top_message a{
    text-decoration: underline;
}
.titlebar {
    background: #F7F7F7;
    width: 100%;
    padding: 12px;
    margin-bottom: 33px;
    box-sizing: border-box;
    text-align: center;
    font-size: 2.5rem;
}
.required_mark{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    display: block;
    padding: 5px;
    width: 60px;
    height: 20px;
    box-sizing: border-box;
    font-size: 10px;
    color: #FFF;
    background: #1E9EEB;
    text-align: center;
    vertical-align: middle;
}
label.if_box{
    display: block;
}
.form_box .form_group{
    margin: 0;
}
.contact_form_wrap,
.contact_form_wrap2{
    font-size: 14px;
}
.contact_form_wrap .title,
.contact_form_wrap2 .title{
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
}
.contact_form_wrap .title{
    background: #F7F7F7;
    padding: 10px;
}
@media (max-width: 755px){
    .contact_form_wrap .title{
        margin-bottom: 15px;
    }
    .contact_form_wrap > .flex_box{
        flex-direction: column;
        margin-bottom: 30px;
    }
}


.column3{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
@media (max-width: 755px){
    .column3 > label,
    .column3 > .form_group{
        width: 100%;
        max-width: 480px;
        margin-bottom: 15px;
    }
}
.form_group_select2 select{
    width: 100%;
}
.form_group_select2::before{
    border-left: none;
    top: 0;
    transform: none;
}
.form_group_select2::after{
    top: 17px;
}
@media (max-width: 767px){
    .form_group_select2::after{
        top: 24px;
    }
}
.form_group_radio{
    position: relative;
    margin: 20px 0;
}
.form_group_radio label input{
    display: none;
}
.form_group_radio label{
    position: relative;
    display: block;
    font-size: 14px;
    padding-left: 32px;
    cursor: pointer;
}
@media (max-width: 755px){
    .form_group_radio label{
        margin-bottom: 20px;
    }
}
.form_group_radio label span::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid #707070;
    border-radius: 50%;
    background: #FFF;
}
.form_group_radio label input:checked + span::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #0083D5;
    border-radius: 50%;
}


/*name*/
.name .column3 span{
    display: block;
    margin-right: 17px;
}
.name .form_group_select2{
    width: 152px;
}


/*mail*/
.mail .form_box .form_group{
    margin-bottom: 14px;
    width: 100%;
    max-width: 480px;
}

/*address*/
.address .form_box .form_group{
    margin-bottom: 10px;
    width: 100%;
    max-width: 820px;
}
.address .form_group_select2{
    width: 100%;
    max-width: 403px;
}
.address .if_box span.required_mark{
    position:inherit;
    transform: none;
}
@media (max-width: 766px) {
    .address .if_box{
        margin-top: 20px;
    }
    .address .if_box span {
        display: inline;
        margin-bottom: 10px;
    }
    .address .if_box span.required_mark{
        position:inherit;
        padding: 3px 7px;
    }
    .address .form_group_select2{
        margin-top: 10px;
    }
}

/*Phone Number*/
.phone .form_box .form_group{
    margin-bottom: 10px;
    width: 100%;
    max-width: 345px;
}

/*Inquiry--------------------------------------------------*/

.contact_form_wrap2 .baseline{
    align-items: baseline;
}
.contact_form_wrap2 .model_name,
.contact_form_wrap2 .buy_country,
.contact_form_wrap2 .receipt_file{
    padding-bottom: 30px;
    border-bottom: 1px dotted #BFBFBF;
}
@media (max-width: 755px){
    .contact_form_wrap2 >.flex_box{
        flex-direction: column;
        margin-bottom: 20px;
    }
}

/*Type of inquiry*/
.inquiry .form_group_select2{
    width: 100%;
    max-width: 345px;
}

/*Model Name*/
.model_name .form_group{
    width: 100%;
    max-width: 345px;
}

/*buy, buy_date, buy_country*/
.buy_date .column3 .form_group{
    width: calc(100% / 3 - 10px);
}
.buy_date .column3 .form_group:not(:last-of-type){
    margin-right: 10px;
}
.buy_country .form_group_select2{
    width: 100%;
    max-width: 403px;
}

@media (max-width: 766px) {
    .buy .title{
        background: none;
    }
    .buy .title .required_mark{
        left: 0;
    }
}

/*Receipt*/

.receipt_file .form_group_file > label{
    width: 100%;
    max-width: 251px;
    margin-right: 10px;
}
.receipt_file .form_group_file > .file_name{
    font-size: 14px;
    margin: 0.5em 0;
}

/*comment*/
.comment .form_group_textarea{
    width: 100%;
    max-width: 900px;
}
.comment .form_group_textarea textarea{
    width: 100%;
    max-width: 900px;
    min-width: 100%;
    min-height: 409px;
}

/*確認画面,完了画面*/
.conf .conf_text{
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
    padding: 0 1em;
}
.conf .contact_form_wrap2 .conf_text{
    margin: 0;
}
.conf .buy .title {
    margin-bottom: 10px;
}
.conf .img_confbox {
    width: 210px;
    height: 210px;
}
.conf .img_confbox > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.comp_message{
    font-size: 16px;
    letter-spacing: 0.16px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 5em;
}

/*PC------------------------------------------*/
@media (min-width: 756px){
    .top_message{
        font-size: 15px;
    }
    label.if_box{
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .required_mark{
        top: 3em;
    }
    .contact_form_wrap > .flex_box {
        border-bottom: 1px dotted #BFBFBF;
    }

    .contact_form_wrap .title,
    .contact_form_wrap2 .title{
        width: 214px;
        padding: 23px 16px;
        font-size: 14px;
    }
    .form_box{
        width: calc(100% - 214px);
        padding: 0 17px;
        box-sizing: border-box;
    }
    .form_group_radio{
        margin: 0;
    }
    .form_group_radio label{
        display: inline-block;
    }
    .form_group_radio label:not(:last-child){
        margin-right: 38px;
    }
    .mail .form_box,
    .address .form_box,
    .phone .form_box{
        padding: 20px 14px;
    }
    .conf .mail .form_box,
    .conf .address .form_box,
    .conf .phone .form_box{
        padding: 10px 14px;
    }
    .name .column3 > .form_group{
        width: 292px;
    }
    .name .column3 > label,
    .name .column3 > .form_group{
        margin-right: 12px;
    }

    .address .required_mark{
        position:static;
        margin: 0 14px 0 7px;
    }

    /*Inquiry*/
    .contact_form_wrap2 .title{
        background: #FFF;
        padding: 0 16px;
    }
    .contact_form_wrap2 .flex_box{
        padding: 20px 14px;
    }
    .contact_form_wrap2 .required_mark{
        top: 0.6em;
    }
    .text_right{
        text-align: right;
        justify-content: flex-end;
    }

    .text{
        margin: 1em 16px;
        line-height: 1.5;
    }
    .buy_date .column3 .form_group{
        max-width: 168px;
    }
    .buy_date .column3 .form_group:not(:last-of-type){
        margin-right: 20px;
    }
    .receipt_file .form_box{
        padding: 0 0 0 17px;
    }
    .comment .form_group_textarea textarea{
        min-height: 520px;
    }
    
    .comp_message{
        font-size: 25px;
        letter-spacing: 0.25px;
        margin-bottom: 186px;
    }
}
/*error*/
.form_box.e_message {
    width: 100%;
    margin: 20px 0;
    text-align: center;
}