@charset "UTF-8";
/*FORM2*/

/*まず、フォーム全体の囲み罫や角丸を指定*/
form#form {
	/*color: #666;*/
	color:#0f3a49;
	padding: 10px;
	margin-bottom: 15px;
	border: 2px solid #c1e4e7;
	/*↓ボックスの角丸の指定*/
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/*<p>に背景や角丸を指定*/
form#form p {
	margin:1% 0 1%;
	padding:1.5%;
	font-size: 12px;
/*	background: #c1e4e7;*/
		background: #b6e2ed;
/*	background: #c1e4e7;*/
	/*↓ボックスの角丸の指定*/
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.centerbox {
	margin:7px 0 0;
	padding:10px;
	font-size: 12px;
	background: #c1e4e7;
/*	background: #c1e4e7;*/
	/*↓ボックスの角丸の指定*/
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	margin-left:auto;
	margin-right:auto;
	text-align:center;

}
/*最初の<p>にはマージンをつけない（:first-child疑似クラスによる指定）*/
form#form p:first-child {
	margin:0;}

/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form p span {
	/*width: 19em;*/
	width: 10em;
	margin: 5px 5px;
	display: block;
/*	text-align: left;*/
	text-align:right;
	float: left;
	color:#0f3a49;
	/*color: #CCC;*/
}
form#form p span .complete {
	/*width: 19em;*/
	width: 80%;
	margin: 1% 1%;
	display: block;
	text-align: left;
	float: left;
	color:#0f3a49;
	/*color: #CCC;*/
}

/*「:after」で <p>の末尾でフロートをクリア*/
form#form p:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;     /*←フロートをクリア*/
}

/* テキスト入力部品の見た目を統一する */
form#form p label .txtfiled, form#form p select {
/*	width:300px;*/
	width:70%;
	padding:3px 5px;
/*	margin:0px;*/
	margin:5px;

	/*color:#666;*/
	color:#0f3a49;
	border: solid 1px #ccc;
	background: #fff;
	/*シャドウをつける。*/
    -webkit-box-shadow: 1px 1px 1px #fff;
    -moz-box-shadow: 1px 1px 1px #fff;
	box-shadow: 1px 1px 1px #fff;
	/*角丸にする*/
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
}
form#form p select {
	/*selectは250では大きすぎるので*/
	/*width:100px;*/
	width:70%;
}

/*チェックボックス、ラジオボタンのブロックの指定*/
form#form p span.check, form#form p span.radio {
	display:block;
	/*width:400px;*/
	width:70%;
}
/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form p span.check label, form#form p span.radio label {
	margin-right: 2em;
	display: block;
	float: left;
	width: 9em;
}
/*ラジオボタンの label要素の幅は9emでは大きすぎるので調整*/
form#form p span.radio label {
	width: 8em;
}
/*「:after」で <span>の末尾でフロートをクリア*/
form#form p span.check:after, form#form p span.radio:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;     /*←フロートをクリア*/
}

/*input要素とテキストがくっつかないように右にマージンを少し*/
form#form p span.check label input, form#form p span.radio label input {
	
	margin-right:0.5em;
}
/*チェックボックス、ラジオボタンの label要素にロールオーバー時の変化を指定する*/
form#form p span.check label:hover , form#form p span.radio label:hover{
	/*background : #0e0d6a;*/
	background :  #c1e4e7;
	
	
	
	
	/*color: #fff;*/
	color:#0f3a49;
	font-weight:bold;
}

/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
form#form p input[type="submit"] ,
form#form p input[type="reset"] {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	font-size:100%;
	font-weight: bold;
	width:100px;
	padding: 8px 12px;
	text-align:center;
	margin-right:1em;
	margin:0 auto;
	/*color: #fff;*/
	color:#0f3a49;
    border:1px solid #017589;
	background:#80CEDD;
/*	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #117a83), color-stop(0.57, #0e0d6a));
	background: -webkit-linear-gradient(top, #0e0d6a 56%, #117a83 100%);
	background: -moz-linear-gradient(top, #0e0d6a 56%, #117a83 100%);
	background: -o-linear-gradient(top, #0e0d6a 56%, #117a83 100%);
	background: -ms-linear-gradient(top, #0e0d6a 56%, #117a83 100%);
	background: linear-gradient(to bottom, #0e0d6a 56%, #117a83 100%);*/
 	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

/*↓背景グラデーションの指定です*/
  /*  background: -moz-linear-gradient(top, #E7D6DB, #C08B9B);
    background: -webkit-linear-gradient(top, #E7D6DB, #C08B9B);
    background: linear-gradient(#E7D6DB, #C08B9B);*/
/*↓以下、ボックスの角丸、シャドウの指定*/
 /*   -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    -webkit-box-shadow: 1px 1px 1px #fff;
    -moz-box-shadow: 1px 1px 1px #fff;
	box-shadow: 1px 1px 1px #fff;*/
/* IE用 */
/*    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#E7D6DB,endColorstr=#C08B9B);
    zoom: 1;
*/}

form#form p input[type="submit"]:hover ,
form#form p input[type="reset"]:hover {
/*↓ここではロールオーバー時の透明度を変更。もちろんグラデーションを指定してもOK*/
	opacity: 0.8;
	font-size:100%;
}


#contactform waku {
	/*color: #666;*/
	color:#0f3a49;
	padding: 10px;
	margin-bottom: 15px;
	border: 2px solid #c1e4e7;
	/*↓ボックスの角丸の指定*/
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


table.form  { 
		border:1px solid ##FFF;
		 border-collapse:collapse;
		 margin-top:1em;
		 width:100%;
 		border-spacing: 1em;
    	box-shadow: 0 1px 1px #CCC;	

 }
table.form th,td { text-align:left; border:1px solid #FFF; /*padding:8px;*/ font-weight:normal;vertical-align:middle;

 }
table.form th { background:#c1e4e7; width:26%; padding:2%; }
table.form td { background:#c1e4e7; width:66%; padding:2%; border:1px solid #FFF; }
/*strong.ttl { text-align:left; border-left:solid 4px #cc0000; display:block; padding:2px 5px; margin-top:1.5em; }*/
 input.button { width:90px; }
 
 
 
 
 
 
 
 
 
 

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

}

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

#form input {
	margin-bottom: 10px;
}


#form .success-message {
	width: 100%;
}

.btns {
	padding-right: 0;
}

#form label.email {
	width: 100%;
	margin: 0;
}

.map figure {
	float: left !important;
	margin-right: 0px !important;
}

#form input, #form textarea, #form .success-message {
	
}

}

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

.map figure {
	width: 100% !important;
	float: none !important;
	display: block !important;
	margin-right: 0px !important;
}
  .btns {
		padding-bottom: 0;  
  }
  
  #form textarea {
		height: 300px !important; 
  }

   #form {
 	padding-right: 0;
 }
  
}

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

  #form textarea {
		height: 200px !important;  
  }
  .btns a{
  	margin-bottom: 0;
  }
}