@charset "utf-8";



/* -- for JavaScript ここから -------------------------------------------------------------------------------- */


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

	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional{
		display : inline-block;
		float : left;
		color : #ffffff;
		line-height : 1;
		padding : 8px 9px;
		border-radius : 3px;
	}

	form#mail_form dl dt span.required{
		display: none;
	}
	form#mail_form dl dt span.optional{
		display: none;
	}


	span.loading{
		width : 50px;
		height : 50px;
		border-radius : 50%;
		border-top : 5px solid rgba( 255, 255, 255, 0.2 );
		border-right : 5px solid rgba( 255, 255, 255, 0.2 );
		border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
		border-left : 5px solid #ffffff;
		-webkit-transform : translateZ( 0 );
		-ms-transform : translateZ( 0 );
		transform : translateZ( 0 );
		-webkit-animation : load-circle 1.0s linear infinite;
		animation : load-circle 1.0s linear infinite;
		position : absolute;
		top : 50%;
		left : 50%;
		margin-top : -25px;
		margin-left : -25px;
	}

	@-webkit-keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}

	@keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}


	/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */



	
	
	form#mail_form ul li input[type="radio"],
	form#mail_form ul li input[type="checkbox"]{
		margin-right : 10px;
		margin-top : 7px;
	}
	form#mail_form ul li:first-child input[type="radio"],
	form#mail_form ul li:first-child input[type="checkbox"]{
		margin-top : 0px;
	}

	form#mail_form select{
		font-size : 100%;
		margin-top : 5px;
		border: 1px solid #cccccc;
		height: 2em;
	}

	form#mail_form textarea{
		display : block;
		width : 90%;
		max-width : 90%;
		height : 200px;
		padding : 2px 2%;
		resize : vertical;
		border : 1px solid #cccccc;
		border-radius : 3px;
		background : #fafafa;
		-webkit-appearance : none;
		font-size : 100%;
		font-family : inherit;
	}


	form#mail_form ul{
		list-style-type : none;
	}

	form#mail_form ul li label:hover{
		cursor : pointer;
	}


	form#mail_form input#company{
		width : 60%;
	}

	form#mail_form input#name_1,
	form#mail_form input#name_2,
	form#mail_form input#read_1,
	form#mail_form input#read_2,
	form#mail_form input#postal,
	form#mail_form input#phone,
	form#mail_form input#schedule{
		width : 30%;
	}

	form#mail_form input#phone{
		width : 50%;
	}

	form#mail_form input#mail_address,
	form#mail_form input#mail_address_confirm{
		width : 90%;
	}

	form#mail_form input#postal+a{
		display : inline-block;
		padding : 9px 15px;
		vertical-align : middle;
		line-height : 1;
		background : #5bc0de;
		border : 1px solid #46b8da;
		color : #ffffff;
		font-family : inherit;
		text-decoration : none;
		position : relative;
		top : -1px;
	}

	form#mail_form input#postal+a:hover{
		cursor : pointer;
		background : #31b0d5;
		border : 1px solid #269abc;
	}

	form#mail_form input#address_1,
	form#mail_form input#address_2{
		display : block;
		width : 90%;
		margin-top : 0px;
	}

	form#mail_form input#address_2{
		margin-top : 7px;
	}

	form#mail_form .btn input{
		padding : 9px 0;
		vertical-align : middle;
		line-height : 1;
		border : none;
		border-radius : 3px;
		color : #ffffff;
		font-family : inherit;
		-webkit-appearance : none;
		font-size : 100%;
		width: 100%;
	}
	form#mail_form .btn input[type="button"]{
		background-color: #a37224;
	}
	form#mail_form .btn input[type="reset"]{
		background-color: #ccc;
	}





}






























@media screen and (max-width:767px){
	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional{
		display : inline-block;
		float : left;
		color : #ffffff;
		line-height : 1;
		padding : 8px 9px;
		border-radius : 3px;
	}

	form#mail_form dl dt span.required{
		display: none;
	}
	form#mail_form dl dt span.optional{
		display: none;
	}


	span.loading{
		width : 50px;
		height : 50px;
		border-radius : 50%;
		border-top : 5px solid rgba( 255, 255, 255, 0.2 );
		border-right : 5px solid rgba( 255, 255, 255, 0.2 );
		border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
		border-left : 5px solid #ffffff;
		-webkit-transform : translateZ( 0 );
		-ms-transform : translateZ( 0 );
		transform : translateZ( 0 );
		-webkit-animation : load-circle 1.0s linear infinite;
		animation : load-circle 1.0s linear infinite;
		position : absolute;
		top : 50%;
		left : 50%;
		margin-top : -25px;
		margin-left : -25px;
	}

	@-webkit-keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}

	@keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}


	/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */


	form#mail_form ul li input[type="radio"],
	form#mail_form ul li input[type="checkbox"]{
		margin-right : 10px;
		margin-top : 7px;
	}
	form#mail_form ul li:first-child input[type="radio"],
	form#mail_form ul li:first-child input[type="checkbox"]{
		margin-top : 0px;
	}
	form#mail_form select{
		font-size : 95%;
		margin-top : 5px;
		width: 95%;
	}
	form#mail_form textarea{
		display : block;
		width : 96%;
		height : 200px;
		padding : 2px 2%;
		resize : vertical;
		border : 1px solid #cccccc;
		border-radius : 3px;
		background : #fafafa;
		-webkit-appearance : none;
		font-size : 100%;
		font-family : inherit;
	}
	form#mail_form ul{
		list-style-type : none;
	}
	form#mail_form ul li label:hover{
		cursor : pointer;
	}
	form#mail_form input#company{
		width : 60%;
	}
	form#mail_form input#name_1,
	form#mail_form input#name_2,
	form#mail_form input#read_1,
	form#mail_form input#read_2,
	form#mail_form input#postal{
		width : 45%;
	}
	form#mail_form input#mail_address,
	form#mail_form input#mail_address_confirm{
		width : 96%;
	}
	form#mail_form input#postal+a{
		display : inline-block;
		padding : 9px 15px;
		vertical-align : middle;
		line-height : 1;
		background : #5bc0de;
		border : 1px solid #46b8da;
		border-radius : 3px;
		color : #ffffff;
		font-family : inherit;
		text-decoration : none;
		position : relative;
		top : -1px;
	}
	form#mail_form input#postal+a:hover{
		cursor : pointer;
		background : #31b0d5;
		border : 1px solid #269abc;
	}

	form#mail_form input#address_1,
	form#mail_form input#address_2{
		display : block;
		width : 90%;
		margin-top : 0px;
	}
	form#mail_form input#address_2{
		margin-top : 7px;
	}
	form#mail_form input[type="button"]{
		padding : 9px 15px;
		vertical-align : middle;
		line-height : 1;
		background : #5cb85c;
		border : 1px solid #4cae4c;
		border-radius : 3px;
		color : #ffffff;
		font-family : inherit;
		-webkit-appearance : none;
		font-size : 100%;
	}
	form#mail_form input[type="button"]:hover{
		cursor : pointer;
		background : #449d44;
		border : 1px solid #398439;
	}


	/* --responsive----------------------------------------------------------------------------------------------------------------- */

	form#mail_form{
		width : 100%;
	}
	form#mail_form dl{
		overflow : visible;
	}
	form#mail_form dl dt{
		width : auto;
		float : none;
		text-align : left;
		font-weight : bold;
	}
	form#mail_form dl dd{
		width : auto;
		float : none;
		border-top : none;
	}
	form#mail_form dl dt span{
		font-weight : normal;
	}

	/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional{
		margin-bottom : 2em;
		padding: 0;
	}

	/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */

	form#mail_form input#form_submit_button{
		margin-left : 0;
	}
	form#mail_form input#phone,
	form#mail_form input#schedule{
		width : 96%;
	}

	/* responsive end */



	/* -- original style -------------------------------------------------------------------------------- */

	
	form#mail_form .btn{
		margin: 30px auto 0;
	}
	form#mail_form .btn input{
		padding : 10px 15px;
		vertical-align : middle;
		line-height : 1;
		border : none;
		border-radius : 3px;
		color : #ffffff;
		font-family : inherit;
		-webkit-appearance : none;
		font-size : 100%;
		width: 100%;
		height: auto;
	}
	form#mail_form .btn input[type="button"]{
		background-color: #a37224;
	}
	form#mail_form .btn input[type="reset"]{
		background-color: #ccc;
	}

}










































/* -- リセット　ここから -------------------------------------------------------------------------------- */

form#mail_form input{
	border: none;
	-webkit-appearance : none;
	font-size: 100%;
}

/* -- リセット　ここまで -------------------------------------------------------------------------------- */




/*****ラジオボタン*****/
input[type="radio"]{
	margin-right: 10px;
    border-radius: 50%;
	/*↓↓↓↓都度変更↓↓↓↓↓*/
	width: 1.5em;
	height: 1.5em;
	background-color: #dae0f2;
}
input[type="radio"]:checked{
	/*↓↓↓↓都度変更↓↓↓↓↓*/
	background-color: #2941a7;
}

/*****送信ボタン*****/
form#mail_form .btn input[type="button"]{
	cursor: pointer;
}



/*****必須項目など*****/
form#mail_form .must, form#mail_form .option {
    background: #f24e4e;
    color: #fff;
    padding: 2px 4px 1px;
    font-size: 85%;
    margin-left: 5px;
    border-radius: 2px;
}
form#mail_form .must {
    color: #f24e4e;
    background: none;
}
form#mail_form .option{
	background: #4eb2f2;
}



/*****エラー*****/
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{
	display : block;
	color : #ff0000;
	margin-top : 3px;
	font-size: 75%;
}


@media screen and (max-width:767px){
	/*****エラー*****/
	form#mail_form dl dd span.error_blank,
	form#mail_form dl dd span.error_format,
	form#mail_form dl dd span.error_match{
		font-size: 85%;
	}
}