@charset "utf-8";

/*------------------------------------------------------------------
	contact.css
------------------------------------------------------------------*/



/* フォーム名前要素
----------------------------------------------------------- */
#mailformpro{width:100%;
}
.formttl {
	float: left;
	width: 30%;
	padding: 22px 0 0 0;
	border-bottom: 1px dotted #CCC;
	height: 33px;
	text-align: center;
}
.formttl1 {
	float: left;
	width: 30%;
	padding: 22px 0 0 0;
	border-bottom: 1px dotted #CCC;
	height: 66px;
	line-height:50px;
	text-align: center;
}
.formttl2 {
	float: left;
	width: 30%;
	padding: 20px 0 0px 10px;
	border-bottom: 1px dotted #CCC;
	height: 120px;
	text-align: center;
}


/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
.formttl,.formttl2,.formttl1 {
   float: none;
    width: 93%;
	padding: 10px 0 10px 0;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
	height: auto;
	background:#efefef;
  }
  
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
.formttl,.formttl2,.formttl1 {
    float: none;
    width: 96%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
	height: auto;
  }
}
/* end */ 

/* フォーム入力要素
----------------------------------------------------------- */
.formmain {
   float: right;
  width: 65%;
  padding: 15px 0 0px 10px;
  border-bottom: 1px dotted #CCC;
   height:40px;
}
.formmain1 {
   float: right;
  width: 65%;
  padding: 20px 0 0px 10px;
  border-bottom: 1px dotted #CCC;
   height:68px;
}
.formmain2 {
   float: right;
  width: 65%;
  padding: 20px 0 0px 10px;
  border-bottom: 1px dotted #CCC;
   height:120px;
}


/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 768px) {
.formmain,.formmain2 {
    float: none;
    width: 93%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
	padding: 10px;
	height:auto;
	margin-bottom:20px;
  }

  form#mailformpro .formmain input,form#mailformpro .formmain textarea ,
  form#mailformpro .formmain2 input,form#mailformpro .formmain2 textarea ,form#mailformpro .formmain1 input,form#mailformpro .formmain1 textarea {
	padding: 5px;
	font-size: 16px;
	vertical-align: middle;
	
}
form#mailformpro select {
	vertical-align: middle;
	font-size: 16px;
}
}
/* end */ 

/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
.formmain,.formmain2,.formmain1 {
    float: none;
    width: 96%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
	height:auto;
	margin-bottom:20px;
  }
  form#mailformpro .formmain input,form#mailformpro .formmain textarea,
  form#mailformpro .formmain2 input,form#mailformpro .formmain2 textarea
  ,form#mailformpro .formmain1 input,form#mailformpro .formmain1 textarea {
	padding: 5px;
	font-size: 16px;
	vertical-align: middle;
	
}
form#mailformpro select {
	vertical-align: middle;
	font-size: 16px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 90%;
}
}
/* end */ 

/* フォーム同意ボタン
----------------------------------------------------------- */
.formagree {
	float: left;
	width: 48%;
	padding: 15px 0 0px 2%;
	border-bottom: 1px dotted #CCC;
	font-size: 97%;
	height: 40px;
}



/* スマートフォン(480px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 480px) {
.formagree {
    float: none;
    width: 96%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
	height:auto;
	margin-bottom:0px;
  }
}
/* end */