@charset "UTF-8";

#contact{padding-bottom: 0;}
.contact_btn{display: flex;justify-content: space-between;flex-wrap: wrap;font-size:1.5rem;margin-bottom: 60px;
    & ul{margin-bottom: 60px;}
    & li{width: 48%;
        & strong{font-size: 2.4rem;font-family: "Noto Sans JP", sans-serif;font-weight:500;margin-bottom: 20px;display: inline-block;line-height: 1;}}
    & a{width: 100%;margin-bottom: 30px;
        &::after{content: "\e69b";}}
}

.formdesign{width: 800px;margin: 100px auto 0;padding: 60px;background-color:#F5F2EB;border-radius: 100px;
& dt span,.check_btn a{color: #D99316;font-family: "Zen Kaku Gothic New", sans-serif;}
& dd{margin-bottom: 40px;}
}

.attention{text-align: right;font-size: 1.3rem;}
.check_btn{text-align: center;}
.btn1{margin:60px auto;}

.formdesign input[type='text'] {
    padding: 0 1rem;
    width: 100%;
    background-color: #FFF;
    height: 60px;
}

.formdesign textarea {
    padding: 20px;
    width: 100%;
    height: 180px;
    background-color: #fff;
}

.formdesign input[type="checkbox"] {
    position: relative;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    vertical-align: -5px;
    border: 1px solid #9F9F9F;
}

.formdesign input[type="checkbox"]:checked:before {
    position: absolute;
    top: 4px;
    left: 8px;
    transform: rotate(40deg);
    width: 8px;
    height: 13px;
    border-right: 3px solid #D99316;
    border-bottom: 3px solid #D99316;
    content: '';
}

.formdesign button, [type="button"], [type="reset"], [type="submit"] {
    height: 100%;
}

.formdesign h3 {font-size: 2rem;font-family: "Noto Sans JP", sans-serif;font-weight:500;margin-bottom: 60px;}

.btn_area{display: flex;justify-content: space-around;
.btn1{width: 250px;}
}
.btn_center{margin: 60px auto 0;}
.btn2{background-color: #9F9F9F;border-radius: 100px 0 0 100px;
&::after{color: #9F9F9F;left: 18px;content: "\e5cb";}
& input[type="button"] {padding-left: 3em;}}

#thanks{padding:230px 0 0;
    & h1{margin-bottom: 30px;text-align: center;font-size: 2.4rem;font-family: "Noto Sans JP", sans-serif;font-weight:500;}
    & p{margin-top: 20px;}
}

.formTable{font-size: 1.5rem;
    & tr{height: 3em;}
    & th{width: 185px;}
    & th::before{content: "※";color: #D99316;font-family: "Zen Kaku Gothic New", sans-serif;font-weight: normal;}
    & tr:nth-of-type(5),tr:nth-of-type(6){
        & th::before{content: none;}}
    & tr:last-of-type{display: none;}
}

#formWrap2 .formTable{
    & tr:nth-of-type(5),tr:nth-of-type(6){
        & th::before{content: "※";}}
}

#openbtn01,#openbtn02{cursor: pointer;}

.error_messe {font-family: "Noto Sans JP", sans-serif;font-weight:500;color: #D99316;margin-bottom: 10px;}
.select_area{margin-bottom: 60px;}
.r-btn{width: 100%;height: 45px;display: flex;font-family: "Noto Sans JP", sans-serif;font-weight:500;font-size: 2rem;}

.r-btn label{display: flex;width: 100%;height: 100%;align-items: center;position: relative;}

.r-btn label::before,.r-btn input:checked + label::before {content: "";display: block;margin-right: 10px;border-radius: 50%;width:22px;height: 22px;background-color: #fff; border: 1px solid #9F9F9F;}

.r-btn input:checked + label::after {
 content: "";width: 14px;height: 14px;border-radius: 50%;
  background-color: #D99316;position: absolute;
  top: 50%;left:11px;transform: translate(-50%, -50%);
  z-index: 11;
}

.formafter {
    width: 800px;margin: 0 auto;padding: 60px;background-color: #F5F2EB;border-radius: 100px;
    & h3{font-size: 2rem;font-family: "Noto Sans JP", sans-serif;font-weight:500;margin-bottom: 60px;}
    & .formTable{margin-bottom: 100px;& th{font-weight: normal;}}
    & .btn_area {justify-content: space-evenly;}
    & .btn{width: 250px;}
}

@media screen and (max-width:950px){
.formdesign{width: 100%; padding: 6%;border-radius: 50px;font-size: 1.5rem;
    & dt{margin-bottom: 5px;}
    & dd{margin-bottom: 25px;}
}
}


@media screen and (max-width:799px){
    .formdesign{margin-top: 50px;}
    .contact_btn {
      & li {width: 100%;&:first-of-type{margin-bottom: 10px;}}
      & a {&::after {content: "\e5cc";}}
    }
    #contact .title{margin-bottom: 50px;}

#thanks {padding: 100px 0 0;}

.formafter {
    width: 100%;padding: 6%;border-radius: 50px;font-size: 1.5rem;
    & .btn{width: 100%;}
    & .btn_area{flex-wrap: wrap;}
    & h3{margin: 20px 0 30px;}
}
.formTable {
    & tr {display: flex;flex-wrap:wrap;margin-bottom:30px;}
    & th,td{width: 100%;}
}

.check_btn{text-align: left;padding-left: 34px;position: relative;}

.btn1{margin:30px auto;}
.formdesign input[type="checkbox"] {margin-left: -34px;}
}