@charset "UTF-8";
@import "picker.css";

.l_cont_form  section > .wrapper{display: flex;max-width: 1440px;margin-right: auto;margin-left: auto;flex-direction: column;align-items: center;}


.area_h1_title::before{background: url(../../images/bg_h1_title.jpg) no-repeat right center;background-size: cover;}
.area_h1_title h1::before{content: "Contact";}

.form_contact{background: rgb(179 124 87 /.1);}
.frame_form{width: 100%;}

.contact_top .text{line-height: 2;letter-spacing: -0.04rem;}
.contact_top .notice{margin-top: 30px;padding: 20px;border: 1px solid rgba(179, 124, 87, 0.3);}
.contact_top .notice h3{font-size: 17px;font-weight: 500;margin-bottom: 10px;}
.contact_top .notice ul li{padding-bottom: 5px;}
.contact_top .notice ul li::before{content: "・";}

.form_contact em{display: inline-block;padding: 5px;background: #B22323;color: #FFF;font-size: 13px;line-height: 1;width: 60px;text-align: center;margin-left: 10px;}
.form_contact form{display:inline;}
.form_contact p.alert{color: #B22323;display: inline;font-weight: 500;}
.form_contact .wrapper > p.alert{margin-bottom: 30px;}

.form_contact table{width:100%;}
.form_contact th,.form_contact td{padding: 15px 10px;border-bottom: 1px solid rgba(179, 124, 87, 0.3);}
.form_contact th span{font-size: 90%;display: block;}
.form_contact th{font-weight: 500;}
.form_contact th.lg{vertical-align:top;}
.form_contact td .wrap{display: flex;}
.form_contact td.contact_type_box .wrap{flex-wrap: wrap;gap: 10px 30px;}
.form_contact td span.add{display: block;padding: 5px;margin: 5px 0 0;}
.form_contact td a{text-decoration: underline;color: #BD7A50;font-weight: 600;}
.form_contact .msg{padding: 20px;margin-top: 30px;background: rgb(179 124 87 /.1);}
.form_contact td .alert{display: inline-block;margin-top: 5px;margin-right: 5px;font-size: 14px;}


.wrap.name_box,.wrap.time_box{gap: 0 20px;}
.contact_type_box .wrap{gap: 0 30px;}


/** 注釈文言 **/
.contents_form td .add{font-size:80%;}

/** 確認 **/
.frame_form.conf{max-width: 800px;}
.form_input_btn.confirm{display: flex;flex-direction: row-reverse;gap: 0 20px;}
.form_input_btn.confirm form{width: 50%;}

/** 完了 **/
.l_cont_form.complete section > .wrapper{padding-bottom: 0;}

/** ボタン **/
.form_input_btn,.l_cont_form.complete .form_btn{width: 100%;margin:40px auto 0;display: flex;justify-content: center;}
.form_input_btn input[type="submit"],.form_btn a{display: flex;justify-content: center;align-items: center;max-width:300px;width: 100%;height: 100%;text-decoration: none;border: none;background: #BD7A50;font-family: "Zen Kaku Gothic New",sans-serif;letter-spacing: 0.03rem;color: #FFF;font-weight: 500;-webkit-border-radius: 100vh;border-radius: 100vh;}
.btn a:hover,button:hover{border: 1px solid #BD7A50;color: #BD7A50;background: #FFF;}
.come_btn input[type="submit"]:hover{cursor:pointer;background-color:#000;color:#fff;}

.form_input_btn.confirm .left input[type="submit"]{background-color: rgb(189 122 80 /.8);}

.come_btn{width:640px;margin:0 auto;}


/** フォーム共通 ***/
input.formtxt,textarea.formtxt,select.formtxt{background: #FFF;border: 1px solid #cdcdcd;-webkit-border-radius: 5px;border-radius: 5px;font-size: 16px;}
input.formtxt,select.formtxt{padding:5px;height: 40px;width: 100%;}
textarea.formtxt{padding:10px;width: 100%;line-height: 1.4;}
label{cursor: pointer;display: flex;justify-content: center;align-items: center;width: 100%;height: 40px;text-decoration: none;border: none;background: #FFF;color: #343434;border: 1px solid #CDCDCD;font-family: "Zen Kaku Gothic New",sans-serif;letter-spacing: 0.03rem;font-weight: 500;-webkit-border-radius: 10px;border-radius: 10px;font-size: 16px;}
span.label{width: 50%;}

.formtxt.zipcode{max-width: 200px;margin-bottom: 10px;}
input[type="radio"]{display: none;appearance: none;border: none;}
label:has(input:checked) {background: #BD7A50;color: #FFF;border-color: #BD7A50;}

@media screen and (max-width:767px) {
    .area_h1_title h1{letter-spacing: -0.05rem;}
    .area_h1_title h1::before{letter-spacing: normal;}

    .title_box h2{font-size: 20px;font-weight: 500;margin-bottom: 10px;}
    .l_cont_form{padding-bottom: 40px;}
    .l_cont_form  section > .wrapper{padding-top: 15px;padding-right: 20px;padding-bottom: 40px;padding-left: 20px;}
    .form_contact .wrapper{padding-top: 30px;padding-bottom: 40px;}

    .form_contact th,.form_contact td{display: block;width: 100%;padding-right: 0;padding-left: 0;}
    .form_contact th{font-size: 16px;}    
    .form_contact td{border-bottom: none;}

    .wrap.name_box, .wrap.time_box,.contact_type_box .wrap{gap: 0 15px;}
    .form_input_btn input[type="submit"],.form_btn a{height: 46px;font-size: 16px;}

    .frame_form.conf td{font-size: 16px;}
    .l_cont_form.complete .form_btn{margin-top: 20px;}
}

@media screen and (min-width:768px) {
    .l_cont_form{padding-top: 70px;padding-bottom: 100px;}
    .contact_top .wrapper{padding-bottom: 100px;padding-right: 40px;padding-left: 40px;}
    .form_contact .wrapper{padding-top: 80px;padding-bottom: 110px;padding-right: 40px;padding-left: 40px;}
    .frame_form{max-width: 1000px;}
    .title_box{margin-bottom: 40px;}
    .form_contact th{min-width: 250px;}
    .form_input_btn input[type="submit"],.form_btn a{height: 56px;font-size: 18px;}
    .form_input_btn input[type="submit"]:hover{cursor: pointer;}
    label{width: 50%;max-width: calc(50% - 15px); height: 55px;display: grid;gap: 0;place-content: center;text-align: center;}
    label span{font-size: 13px;display: block;}
    .form_contact .msg{font-size: 15px;}

    .form_contact .frame_form.conf th{width: 250px;}
    .form_input_btn.confirm{max-width: 620px;}
}

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

}

@media screen and (min-width:1081px) {
    label{max-width: 223px;width: 33.33333%;}
}