/*default*/
/*
table.ft{display:block;}
tbody.fth{display:block;}
tbody.ftb{display:block;}
tr.fr{display:block;}
th.fh{display:block;}
td.fd{display:block;}
table.ft{}
tbody.ftb{padding:10px;}
tr.fr{
    background-color: #EAEAEA;
    box-sizing: border-box;
    margin:5px;
    font-size: 12px;
    padding:5px;
}
th.fh{
    text-align: left;
    border-left:4px solid red;
}
td.fd{}
td.fd input[type='text']{
    padding:0px 5px;
}
.require:after{
    content: "必須";
    background-color:red;
    color:white;
}
.form_error{
    color:red;
}*/

#contact_input{}
#contact_confirm{}
#contact_confirm td.fd{
    font-size: 15px;
}
#contact_confirm #to_destination_wrapper table{
    margin:10px 0px 0px 0px;
}
#contact_confirm #to_destination_wrapper table th{
    text-align: left;
    color:#820000;
    padding:0px 10px 0px 0px;
}
#contact_confirm #to_destination_wrapper table td{
    text-align: left;
}
#contact_complete{
    box-sizing: border-box;
    padding:30px 0px 30px 0px;
}
table.ft{display:block;}
tbody.fth{display:block;}
tbody.ftb{display:block;}
tr.fr{display:block;}
th.fh{display:block;}
td.fd{display:block;}
table.ft{}
tbody.ftb{
    padding:40px 60px 0px 60px;
}
tr.fr{
    box-sizing: border-box;
    margin:0px;
    font-size: 12px;
    padding:0px 0px 25px 0px;
}
th.fh{
    text-align: left;
    border-left:6px solid #8fa2a7;
    padding:1px 7px 1px 7px;
    font-size: 15px;
    font-weight: bold;
}
td.fd{
    padding:10px 0px 0px 0px;
}

td.fd input[type='text']{
    padding:5px 10px;
    border:2px solid #bfbfbf;
    line-height: 20px;
    box-sizing: border-box;
    border-radius:3px;
    font-size:15px;
}
.require:after{
    font-size: 13px;
    content: "必須";
    background-color:#e60012;
    color:white;
    box-sizing: border-box;
    padding:1px 10px 0px 10px;
    margin:0px 0px 0px 10px;
}
.form_error{
    color:#e60012;
    font-size: 14px;
    font-weight: bold;
}
main{
    background-image: url('./../img/contact_form/bg.png');
    background-repeat: repeat;
}
main .container{
    padding:50px 0px 100px 0px;
}
form{
    background-color:white;
}
#contact_form_header{
    text-align: center;
    position: relative;
    height:230px;
}
#contact_form_tit{
    width: 100%;
    max-width: 613px;
    box-sizing: border-box;
    padding:0px 30px;
}
#contact_form_king{
    position: absolute;
    bottom:-100px;
    right:20px;
    width:200px;
}
#contact_form_text{
    padding:30px 0px 0px 0px;
}
#contact_form_text span{
    box-sizing: border-box;
    border-bottom: 1px dotted black;
    font-size:16px;
    font-weight: bold;
}
#contact_form_text span span{
    color:red;
 }
#contact_form_btn{
    display: inline-block;
    box-sizing: border-box;
    padding:0px 30px;
    width:100%;
    max-width:560px; 
}
#to_destination table{
    width:100%;
    padding:10px 0px 10px 0px;
}
#to_destination table th,
#to_destination table td{
    line-height: 42px;
}
#to_destination table th{
    color: #820000;
    width:150px;
    text-align: right;
    box-sizing: border-box;
    padding:0px 5px 0px 0px;
}
#to_destination table td input{
    width:100%;
}
textarea{
    box-sizing: border-box;
    display: block;
    width:100%;
    padding:5px;
    border:2px solid #bfbfbf;
    font-size: 15px;
    line-height: 18px;
}
select{
    box-sizing: border-box;
    border:2px solid #bfbfbf;
    display: block;
    height: 34px;
    min-width: 80px;
}
#budget{ width:180px; }
#receive_month,#receive_day,#use_month,#use_day{ width:70px; }
#use_reason{
    width:260px;
}
#class_name,#pic_name,#pic_email,#pic_phone,#pic_line,#school,#school_number,#order_temp{ 
    width:100%;
}
#receive_wrapper{
    background-color: #fff3e2;
    padding:30px 30px 30px 30px;
    font-size:18px;
    margin:0px 60px 40px 60px;
}
#agreement_wrapper{
    background-color: #fff3e2;
    text-align: center;
    padding:30px 0px 30px 0px;
    font-size:18px;
    font-weight: bold;
    margin:0px 60px 40px 60px;
}
#agreement_wrapper a{
    color:#ff5400;
}
#questionnaire{
    display: flex;
    flex-wrap: wrap;
}
#questionnaire > div{
    width:50%;
    box-sizing: border-box;
    padding:5px 0px 5px 0px;
}
#user_wrapper{
}
#user_wrapper .user{
    display: flex;
    flex-wrap: wrap;
    padding:0px 0px 10px 0px;
}
#user_wrapper .user .user_name,
#user_wrapper .user .user_number,
#user_wrapper .user .user_size{
    position: relative;
    box-sizing:border-box;
    padding:20px 15px 0px 0px;
}
#user_wrapper .user .user_name:after{content: "名前";}
#user_wrapper .user .user_number:after{content: "番号";}
#user_wrapper .user .user_size:after{content: "サイズ";}
#user_wrapper .user .user_name:after,
#user_wrapper .user .user_number:after,
#user_wrapper .user .user_size:after{
    position: absolute;
    top:0;
    left:0;
    font-size:14px;
    font-weight: bold;
}
#user_wrapper .user .user_name   input{ width:200px; }
#user_wrapper .user .user_number input{ width:100px; }
#user_wrapper .user .user_size   select{ padding-left:23px; }
/**/
.checkbox1 input[type=checkbox]{
    display: none;
}
.checkbox1 label{
    position: relative;
    padding: 0px 5px 0px 32px;
    font-size: 14px;
}
.checkbox1 label:before{
    position: absolute;
    content: "";
    display: block;
    top: calc(50% -  12px);
    left: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    background-color: white;
}
.checkbox1 label:after{
    position: absolute;
    content: "";
    display: block;
    top: calc(50% - 12px);
    left: 9px;
    width: 6px;
    height: 14px;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    transform: rotate(45deg);
    opacity: 0;
}
.checkbox1 input[type=checkbox]:checked + label:after{
    opacity: 1;
}
/**/
.radio1 {
    display: none;
}
.radio1 + label{
    padding-left: 20px;
    position:relative;
    margin-right: 10px;
    display:inline-block;
}
.radio1 + label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 50%;
}
.radio1:checked + label{
    color: black;
}
.radio1:checked + label::after{
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 7px;
    height: 7px;
    background: #000000;
    border-radius: 50%;
}
/**/
#complete_info{
    text-align: center;
    font-weight: bold;
}
#complete_info a{
    font-weight: normal;
    display: block;
    box-sizing: border-box;
    padding: 10px;
}
#budget_wrapper,
#receive_month_wrapper,
#receive_day_wrapper,
#use_month_wrapper,
#use_day_wrapper,
#use_reason_wrapper,
#teacher_wrapper{
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
#budget_wrapper:after,
#receive_month_wrapper:after,
#receive_day_wrapper:after,
#use_month_wrapper:after,
#use_day_wrapper:after,
#use_reason_wrapper:after,
#teacher_wrapper:after{
    position: absolute;
    bottom: 0;
    right:0;
}
#budget_wrapper{padding:0px 55px 0px 0px;}
#budget_wrapper:after{content: "円まで";}
#receive_month_wrapper{padding:0px 20px 0px 0px;}
#receive_month_wrapper:after{content: "月";}
#receive_day_wrapper{padding:0px 166px 0px 0px;}
#receive_day_wrapper:after{content: "日までに受け取り希望";}
#use_month_wrapper{padding:0px 20px 0px 0px;}
#use_month_wrapper:after{content: "月";}
#use_day_wrapper{padding:0px 37px 0px 0px;}
#use_day_wrapper:after{content: "日に";}
#use_reason_wrapper{padding:15px 56px 0px 0px;}
#use_reason_wrapper:after{content: "で使用";}
#teacher_wrapper{padding: 0px 37px 0px 0px;}
#teacher_wrapper:after{content: "先生";}
@media screen and (max-width:767px) {
    main{
        font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","メイリオ", sans-serif;
        background-image: inherit;
    }
    main .container{
        padding:0px;
    }
    #contact_form_header{
        height: 140px;
        padding:40px 0px 0px 0px;
        border-top:2px solid #e5e5e5;
        background: -moz-linear-gradient(top,  rgba(229,229,229,0.65) 0%, rgba(0,0,0,0) 100%);
        background: -webkit-linear-gradient(top,  rgba(229,229,229,0.65) 0%,rgba(0,0,0,0) 100%);
        background: linear-gradient(to bottom,  rgba(229,229,229,0.65) 0%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e5e5e5', endColorstr='#00000000',GradientType=0 );
    }
    #contact_form_tit{
        width:300px;
        padding:20px 30px 0px 30px;
    }
    #contact_form_king{
        bottom:inherit;
        top: 10px;
        right: 10px;
        width: 100px;
    }
    #contact_form_text{
        padding:10px 0px 0px 0px;
    }
    #contact_form_text span{
        font-size: 13px;
    }
    tbody.ftb {
        padding: 10px 20px 0px 20px;
    }
    select{
        display: block;
        width:100%;
    }
    .user{
        display: flex;
        flex-wrap: wrap;
    }
    #user_wrapper .user .user_name input,
    #user_wrapper .user .user_number input,
    #user_wrapper .user .user_size input{
        width: 100%;
    }
    .user .user_name{width:40%;}
    .user .user_number{width:30%;}
    .user .user_size{width:30%;}
    #questionnaire > div{
        width:100%;
    }
    #agreement_wrapper{
        margin:0px 0px 20px 0px;
    }
    #receive_wrapper{
        margin:0px 0px 20px 0px;
    }
}