/*contactform-------------------------------*/


#contactform .inner{
width:70%;
margin:0 auto;
}
@media screen and (max-width: 1024px){
  #contactform .inner{
  width:96%;
  }
}
@media screen and (max-width: 767px) {
  #contactform .inner{
  width:96%;
  margin:0 auto;
    }
  }

#contactform .calling img{
  width:100px;
}

.contactform-line{
margin-top:1.6rem;
  background: #00b900;
color:#fff;
font-size:2rem;
text-align: center;
padding:1rem;
}
.contactform-tittle{
margin:0;
background: #c5b483;
font-size:2rem;
text-align: center;
padding:1rem;
}
.contactform-form{
  margin:0;
 background: #fff;
  border:1px solid #ccc;
}

.line_howto2{
   background-color: #ffffff99;
 padding:1rem;
}
#contactform table{
 width: 96%;
 margin:0 auto;
 border-collapse: collapse;
 border-width: 0px;
 border:0px solid orange;
 }
#contactform tbody{
 width:100%;
 
}
#contactform th{
 font-weight:400;
 width: 35%;
 }
#contactform td{
 width: 64%;
 }
#contactform th,
#contactform td{
padding: 0.7em;
text-align: left;
vertical-align: middle;
border: solid #ccc;
border-width:0 0 1px 0;
}
#contactform th:nth-of-type(7n),
#contactform td:nth-of-type(7n){
 border: 0px;
}

#contactform table th span{
 display: inline-block;
 padding:0 3px;
 margin-right:10px;
 border-radius: 5px;
 font-weight:300;
 }
.must {
 font-size: 1.2rem;
 color: #fff;
background-color: #FF1A00;
}
.free {
   color: #fff;
   background-color: #999;
}

.check-list{
  padding:2%;
}
.agree{
  margin-bottom:3.2rem;
}
.submit_btns{
  margin-bottom:3.2rem;
}
#contactform ul{
 list-style:none;
 list-style-position: inside;
 margin-left:10px;
}

select,
input,
textarea{
margin:0;
padding: 0.7rem;
border:1px solid #bbb;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow:inset rgba(9, 30, 66, 0.25) 0px 2px 4px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;

}
textarea {
 resize: vertical ;
 max-height: 400px;
 min-height: 100px;
 height:100px;
 width:calc(100% - 1.4rem);
}
input:focus,
textarea:focus{
 background: #d1f6fd;
 border-width:2px;
 border-style: solid;
 border-color: #68a2b6;
}
input[type=checkbox]{
width:24px;
height:24px;
}
 /*-------------------------------------*/
 .radio_btn td{
margin-top: 12px;
line-height: 3rem;
}
.radio_btn input[type=radio].radio_btn_item{
display: none;
}
.radio_btn label {
display: inline-block;
}
.radio_btn .radio_btn_item + span {
padding-left: 30px;
display: inline-block;
position: relative;
}
.radio_btn .radio_btn_item + span::after,
.radio_btn .radio_btn_item + span::before {
border-radius: 50%;
content: '';
display: block;
position: absolute;
}
.radio_btn .radio_btn_item + span::before {
border: 1px solid #AAAAAA;
left: 0;
top: 0px;
height: 25px;
width: 25px;
}
.radio_btn .radio_btn_item + span::after{
background: #c78d8d;
height: 19px;
left: 3px;
opacity: 0;
top: 3px;
width: 19px;
}
.radio_btn .radio_btn_item:checked + span::after {
opacity: 1;
}
 /*-------------------------------------*/
 .check_btn{margin:1.6rem;}
.check_btn li:last-of-type{
 margin-bottom:1.6rem;
}
.check_btn input[type=checkbox].check_btn_item{
 display: none;
 }
 .check_btn label {
 display: inline-block;
 }
 .check_btn .check_btn_item + span {
 padding-left: 35px;
 display: inline-block;
 position: relative;
 }
 .check_btn .check_btn_item + span::after,
 .check_btn .check_btn_item + span::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 }
 .check_btn .check_btn_item + span::before {
 border: 1px solid #AAAAAA;
 border-radius: 4px;
 left: 0;
 height: 30px;
 width: 30px;
 }
 .check_btn .check_btn_item + span::after{
 border: none;
 border-right: 5px solid #cd5656;
 border-bottom: 5px solid #cd5656;
 height: 25px;
 left: 10px;
 opacity: 0;
 top: 0px;
 transform: rotate(45deg);
 width: 10px;
 }
 .check_btn .check_btn_item:checked + span::after {
 opacity: 1;
 }

 /*-------------------------------------*/

 .submit-back{
 margin:3% auto;
}
.submit-back input,
.submit-btn input {
 display: block;
 width:50%;
 background-color:#54b2e1;
 border:0;

 font-weight:500;
 margin:0 auto;
 padding: 10px 30px;
 border-radius: 3px;
 cursor: pointer;
 text-align:center;
 }
 .submit-back input{
   background-color:#ece2ba;
   color:#5a5040;
 }
 .submit-btn,
 .submit-back {
 text-align: center;
 margin-top:20px;
 cursor: pointer;
 }
  
 .submit-btn input:hover {
   background: #6bc2ee;
   color: #FFFFFF;
 cursor: pointer;
 }
 .submit-back input:hover{
   background-color:#e6dbb0;
   cursor: pointer;
 }

 
.input[type="submit"] {
 transition: 0.2s;
}
.input[type="submit"]:active {
 transform: translateY(2px);
}

input.contact_email{
font-size:2.6rem;
line-height: 3.5rem;;
padding-top:1rem;
padding-bottom: 1rem;
}

@media screen and (max-width:820px){

 #contactform{
 width: 100%;
 height: 100%;
 margin:0;
 padding:0;
border:0px solid red;
}
 #contactform table,
 #contactform tbody,
 #contactform tr,
 #contactform th,
 #contactform td{
 display: block;
   }
 #contactform table{
 width: 100%;
 margin:0;
 border-width: 0;
 table-layout: fixed;
 word-break: break-all;
 word-wrap: break-all;
 }
 #contactform tbody{
   width: 100%;
   margin:0;
   }
 #contactform th,
 #contactform td{
 width: calc(100% - 20px);
 padding: 10px;
 margin:0;
 text-align: left;
 vertical-align: top;
 background: #fff;
 }
 #contactform th{
   border: 0;
 }

 input.contact_email,
 input.contact_name,
 input.contact_addr{
 width:calc(100% - 2.4rem);
 }
.cform th,
.cform td {
 width: 100%;
 display: block;
 border-top: none;
}
 textarea {
   max-height: 400px;
   min-height: 100px;
   height:100px;
   width:calc(100% - 1.4rem);
 }
 label{margin-left:0;}
 .submit-back input,
 .submit-btn input {
   display: block;
   max-width:75%;
   padding:5px;
   font-size:1.8rem;
   }

}



.hidden{
 visibility: hidden;
 height:1px;
}