@charset "utf-8";
/* CSS Document */

#contents:after {
	content:"";
	display:block;
	clear:both;
}

#contents {
	font-family: 'Bitter', serif;
	color:#FFF;
}


body{
  font-size : 85%;
  line-height : 1.6;
}

.fb_link {
	font-size:24px;
	position:absolute;
	top:-4px;
	right:50px;
}

/*a:link,
a:visited{
  color : #0000ff;
  text-decoration : underline;
}
a:hover,
a:active{
  color : #0000ff;
  text-decoration : none;
}*/

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

form#mail_form{
	width : 600px;
	margin : 120px auto 140px auto;
	padding : 10px 10px;
	background : rgba(102,102,102,0.1);
	border : 1px solid #cccccc;
	border-radius : 7px;
  /*text-shadow : 0px 1px 0px #999;*/
}
form#mail_form dl{
	width : 550px;
	margin : 0 auto;
	overflow : hidden;
}
form#mail_form dl dt{
	clear : both;
	width : 170px;
	float : left;
	border-top : 1px solid #cccccc;
	padding : 15px 0;
	font-weight:800;
	text-align : right;
	overflow : hidden;
}
form#mail_form dl dd{
	width : 350px;
	float : right;
	border-top : 1px solid #cccccc;
	padding : 20px 0 15px 30px;
}
form#mail_form dl dt:first-child,
form#mail_form dl dt:first-child+dd{
	border : none;
}
form#mail_form dl dt span{
	display : block;
	font-size : 80%;
	color : #92BAC7;
}

form#mail_form p {
	text-align:center;
	font-size:90%;
	padding-left:5px;
	padding-right:5px;
}

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

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
	display : inline-block;
	float : left;
	font-weight:800;
	color : #ffffff;
	padding : 3px 5px;
	border-radius : 3px;
  /*text-shadow : 0px -1px 0px #CCC;*/
}
form#mail_form dl dt span.required{
	background : rgba(255, 0, 0, 0.3);
}
form#mail_form dl dt span.optional{
	background : rgba(0, 0, 255, 0.3);
}
form#mail_form dd span{
	display : block;
	color : #9C3;
	font-weight:600;
	font-size:90%
}


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 input{
	height : 1.7em;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fafafa;
}
form#mail_form textarea{
	width : 340px;
	height : 200px;
	resize : vertical;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fafafa;
}
form#mail_form input:focus,
form#mail_form textarea:focus{
	box-shadow : 0px 0px 5px #55ccff;
	border : 1px solid #55ccff;
	background : #ffffff;
}
form#mail_form input#name_1,
form#mail_form input#name_2{
	width : 90px;
}
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm{
	width : 250px;
}

form#mail_form input#phone{
	width : 180px;
}

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

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

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"]{
	margin-right : 10px;
	margin-top : 7px;
	font-family: 'Bitter', serif;
}

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%;
	font-family : inherit;
	margin-top : 10px;
}

form#mail_form input#mail_submit_button{
	width : auto;
	height : auto;
	padding : 4px 10px;
	vertical-align : middle;
	color : #555;
	background : rgba(204,204,204,0.8);
	border : 1px solid #cccccc;
	border-radius : 3px;
	font-family : inherit;
	font-weight : bold;
}
form#mail_form input#mail_submit_button:hover{
	cursor : pointer;
	color : #106dff;
	background : #e0e0e0;
}

.formWrap dd a {
	color:#9FF;
}



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

/* 640pixel start */
@media screen and (max-width : 640px){

form#mail_form{
	width : 95%;
}
form#mail_form dl{
	width : 90%;
}
form#mail_form dl dt{
	width : auto;
	float : none;
	text-align : left;
	padding : 10px 0 5px;
	font-weight : bold;
}
form#mail_form dl dd{
	width : auto;
	float : none;
	border-top : none;
	padding : 0px 0 13px 0px;
}
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-right : 1em;
}

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


form#mail_form input{
	height : 25px;
}
form#mail_form input#name,
form#mail_form input#phone,
form#mail_form textarea{
	max-width : 98%;
  -webkit-appearance : none;
}


}
/* 640pixel end */



/*####### 1040px以上 #######*/
@media (min-width: 1040px) {
h1.contact {
	font-size:24px;
	color:#FFF;
	margin:15px;
	padding:5px;
}

h2 {
	text-align:center;
	font-size:13px;
	padding-left:15px;
	padding-right:15px;
	font-weight:600;
}

h3 {
	text-align:center;
	font-size:18px;
	padding-top:10px;
}


}


/*####### 768px以上 #######*/
@media (min-width: 768px) {
h1.contact {
	font-size:24px;
	color:#FFF;
	margin:15px;
	padding:5px;
}

h2 {
	text-align:center;
	font-size:13px;
	padding-left:15px;
	padding-right:15px;
	font-weight:600;
}

h3 {
	text-align:center;
	font-size:18px;
	padding-top:10px;
}


}


/*####### 480px～767px #######*/
@media (min-width: 480px) and (max-width: 767px) {
h1.contact {
	font-size:20px;
	color:#FFF;
	margin:15px;
	padding:5px;
}

h2 {
	text-align:center;
	font-size:12px;
	padding-left:10px;
	padding-right:10px;
	font-weight:100;
}

h3 {
	text-align:center;
	font-size:16px;
	padding-top:5px;
}

form#mail_form {
	margin : 20px auto 35px auto;
}
}


/*####### 479px以下 #######*/
@media (max-width: 479px) {
h1.contact {
	font-size:18px;
	color:#FFF;
	margin:15px;
	padding:5px;
}

h2 {
	/*text-align:center;*/
	font-size:12px;
	padding-left:5px;
	padding-right:5px;
	font-weight:100;
}

h3 {
	text-align:center;
	font-size:16px;
	padding-top:5px;
}

form#mail_form {
	margin : 20px auto 35px auto;
}
}

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

div.thanks{
  width : 540px;
  margin : 50px auto;
	background : rgba(102,102,102,0.2);
	border : 1px solid #cccccc;
  border-radius : 7px;
  /*text-shadow : 0px 1px 0px #999;*/
  padding : 50px 30px 55px;
  text-align : center;
}
div.thanks h1{
  font-size : 120%;
}
div.thanks p {
	padding-top:10px;
}

div.thanks{
  margin-top : 2em;
}




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

/* 640pixel start */
@media screen and (max-width : 640px){

div.thanks{
	width : 85%;
  padding : 25px 5%;
  text-align : center;
}


}
/* 640pixel end */