@charset "utf-8";

#contact article{padding: 150px 0 0; max-width: 800px; width: 100%; margin: 0 auto;}
#contact hr{margin:50px 0;}
#contact .text-waku{margin:50px auto 0;}

@media only screen and (max-width:640px){
    #contact article{max-width: 500px;  width: 100%;}
    #contact hr{margin:30px 0;}
}

/* form */
#contact form{width:100%; margin: 0 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; border-radius: 50px; margin-right: 10px; font-size: .8rem;}
#contact form dt span.hissu{background: #e60012;}
#contact form dd {width:71%;}
#contact form dd [type="text"]{width: 100%;}
#contact form p strong {color:#e60012; font-weight: 700;}


#contact form dd.add [maxlength="8"] {width:200px;}
#contact form dd.add [maxlength="10"] {width:200px;}
#contact form dd.add [maxlength="255"] {margin:10px 0; letter-spacing:0;}
/*
#contact form dd.add [type="postal-code"] {width:100px; margin: 0 5px 10px;}
#contact form dd.add [type="text"].todoufuken {width:120px !important; margin-bottom: 10px;}
#contact form dd.add > p {
    margin-top: 10px;
    font-size:1rem;
    line-height: 1.5;
    letter-spacing:0;
}
*/

#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: 3px 2%;
    font-size: 20px;
	border:solid 1px #12222b; border-radius:15px;
    background:#fff;
}
#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: #fff; font-size: 18px; font-weight: 700;}
#contact form .btn input:hover{color: #f3a046;}
#contact form [type="checkbox"]{margin: 30px 10px 20px;}

#contact form input[maxlength="3"] {width:5em; margin:0 5px 10px 0;}
#contact form input[maxlength="4"] {width:6em; margin:0 10px 10px 5px;}
#contact form .add select {width:7em;}


@media only screen and (max-width:640px){
	
	input    ,
	select   ,
	textarea {font-size:26px !important;}
	
    #contact form dt {width:100%; margin:0; padding:5px 0; font-size:1.5rem !important;}
    #contact form dd {width:100%; margin:0; padding:10px 0 30px; font-size:1.4rem !important;}

	#contact form dt span {font-size:1.1rem;}

    #contact form dd.add p {margin:15px 0 5px; font-size:1.3rem;}
	#contact form p strong {margin:10px 0 20px; display:block; font-size:1.4rem !important;}
	
    #contact form select{width:300px !important; margin-bottom:10px;}
    #contact form [type="checkbox"]{margin:0 10px 0 0;}
    #contact form textarea {margin-top: 30px; height:300px;}
}


/* kakunin */
#contact form .kakunin{display: flex; flex-wrap: wrap;}
#contact form .kakunin .btn3 {
	color: #fff;
    background: #707070;
}
#contact form .kakunin .btn3:hover {color: #707070;}
#contact form .kakunin .btn3::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff;
}
#contact form .kakunin .btn3:hover{background-color: #fff; border: 1px solid #707070;}
#contact form .kakunin .btn3:hover::after{border-color: #707070 #707070 transparent transparent;}
#contact form .btn3 input:hover{color: #707070;}


/* kanryo */
#contact .kanryo{padding:200px 0 230px;}
#contact .kanryo p{text-align: center; margin-bottom: 30px;}

@media only screen and (max-width:640px){
    #contact .kanryo{padding:300px 0 320px;}
}