@charset "utf-8";

article{max-width: 900px; width: 100%; margin: 0 auto;}

.text-waku p{text-align: center; margin: 30px auto 0;}
.text-waku p span{color: #b81a35; font-weight: 700;}


/* form */
#contact form{width:100%; margin: 30px auto 100px;}
#contact form dl {
    width:100%;
    margin: 0 auto;
    display:flex; 
	flex-flow:row wrap; 
	justify-content:space-between; 
	align-content:stretch; 
	align-items:stretch;
}
#contact form dt,#contact form dd {margin: 0; padding:20px 0;}
#contact form dt {width:28%; font-weight: 700;}
#contact form dt span{background: #707070; color: #fff; padding:4px 17px; margin-right: 10px; font-size: .8rem;}
#contact form dt span.hissu{background: #b81a35;}
#contact form dd {width:71%;}
#contact form dd [type="text"]{width: 100%;}
#contact form p strong {color:#b81a35; font-weight: 700;}
#contact form dd.add [type="postal-code"] {width:200px; margin: 0 5px 10px;}
#contact form dd.add [type="text"] {width:200px !important; margin-bottom: 10px;}
#contact form dd.add input:last-of-type {width:100% !important;}
#contact form input.name{width:82%;}
#contact form input.age{width:7.5%; text-align: center;}
#contact form dl input,
#contact form textarea,
#contact form select {
    padding: 10px 2%;
    font-size: 1rem;
	border:solid 1px #a0857c;
    background:#f6f4f1;
}
#contact form select{width:240px; padding:6px 0;}
#contact form textarea {width: 100%; height:200px;}
#contact form option {padding:6px 3px; background:#fff;}
#contact form .btn{margin-top: 50px;}
#contact form .btn input{background: none; color: #231815; font-weight: 700;}
#contact form .btn input:hover{color: #fff;}
#contact .submit p{text-align: center;}
#contact .submit p span{font-weight: 700; font-size: 1.2rem;}


@media only screen and (max-width:640px){
	article{max-width: 580px; width: 100%; margin: 0 auto;}
	.text-waku p,#contact .submit p{line-height: 1.5;}
	#contact form .btn input{font-size: 1.3rem;}
	#contact .submit p span{font-size: 1.4rem; line-height: 2.3;}
    #contact form dt {width:100%; font-size: 1.3rem;}
    #contact form dd {width:100%; font-size: 1.3rem;}
    #contact form dt{margin: 0; padding:5px 0;}
    #contact form dd {margin: 0; padding:10px 0 30px;}
    #contact form dd.add [type="postal-code"] {width:250px; margin: 0 5px 10px;}
    #contact form select{width:100%; padding:6px 0;}
    #contact form textarea {margin-top: 30px;}
	#contact form dl input,
	#contact form textarea,
	#contact form select {
   	 padding: 12px 2%;
   	 font-size: 1.3rem;
}
}



/* kakunin */
#contact .kakunin{max-width: 600px; width: 100%; margin: 0 auto; padding-top:50px;}
#contact .kakunin form dt {width:45%; font-weight: 700;}
#contact .kakunin form dd {width:55%;}
#contact .kakunin form .btn{margin-top: 20px;}
#contact .kakunin a.btn{margin-top: 50px;}
#contact .kakunin .submit{margin-top: 20px; padding-top: 20px; border-top: dashed 1px #a0857c;}

@media only screen and (max-width:640px){
	#contact .kakunin{max-width: 580px; width: 100%; margin: 0 auto; padding-top:130px;}
	#contact .kakunin form dt {width:45%; font-weight: 700;}
	#contact .kakunin form dd {width:55%;}
	#contact .kakunin form .btn{margin-top: 20px;}
	#contact .kakunin a.btn{margin-top: 50px;}
	#contact .kakunin .submit{margin-top: 20px; padding-top: 20px; border-top: dashed 1px #a0857c;}
}