@charset "UTF-8";
/* CSS Document */
/* 目次
1.フォームの入力フィールド&テキストエリアのスタイル
2.チェックボックス
3.サブミットボタン 【ユーザーページ認証ボタン login.php のボタン設定もこちら】
4.ファイル参照ボタン　clipmail
5.セレクトのスタイル
6.Postmailの確認フォームやらエラーフォームやら【注：ここでスマホ用のボタン設定もしている】
7. 戻るボタン 
8. box_5のテキスト
9.Google Search Box　グーグルサーチボックスのスタイル
------------------------------------------------------------*/
#form section {
    padding-right:10px;
}
#form h4 {
	text-align: left;
	color:#666;
	border:none;
	font-weight:bold;
	margin-top:25px;
	margin-bottom:5px;
}
/*1.フォームの入力フィールド&テキストエリアのスタイル
------------------------------------------------------------*/
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="submit"],
input[type="file"],
input[type="button"],
input[type="password"],
button,
textarea,
select {
-webkit-appearance: none;/*デフォルトリセット*/
-moz-appearance: none;/*デフォルトリセット*/
appearance: none;/*デフォルトリセット*/
}
textarea,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="password"]{
padding:0.8em;
outline:none;
background:#FEFEFE;
border: 1px solid #DDD;
width: 96%;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
font-size:16px;	
margin-bottom:8px;
}
.SN input[type="text"]{
padding:0.8em;
outline:none;
background: #FFF;
border: 1px solid #DDD;
width: 96%;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
font-size:16px;	
margin-bottom:8px;
}
textarea {
	height: 180px;
	margin-bottom: 10px;
	padding:0.8em;
	width: 96%;
	outline:none;
	border: 1px solid #DDD;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    font-size:16px;	
    margin-bottom:20px;
}
/*入力時のプレースホルダーの背景色*/
input:focus {
border: 1px solid #666;
background: #fff;
}
/*2.チェックボックス
-------------------------------------------------------*/
label, input[type='checkbox'] {
    cursor: pointer;
}
input[type=checkbox] {
    margin:5px;
    vertical-align: middle;
    transform:scale(1.5);
    -webkit-transform: scale(1.5,1.5);
}
input[type=radio] {
    margin-right:10px;
    vertical-align: middle;
    transform:scale(1.5);
    -webkit-transform: scale(1.5,1.5);
}
/*3.サブミットボタン 
-------------------------------------------------------*/
#button {
  display       : block;
  font-size     : 14pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #444444;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 1px #888888;  /* 影の設定 */
  border        : 1px solid #444444;    /* 枠の指定 */
　margin-top     : 25px; 
  margin-bottom : 25px;
}
#snapgene #form #button, #nQuery #button, #geneious #form #button { /*ユーザーページ（login.php）で使われるログインボタンの設定 */
float: none;
	margin-left: auto;
	margin-right:auto;
}
#button:active {
  box-shadow    : none;        /* カーソル時の影消去 */
  border: 		: #990066;
}
#button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #990066;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}
.nest_form {
	padding:20px;
    paddng-left:30px;
    padding-right:30px;
	width:98%;
}
.nest_form .buttons {
	margin: 0 42%;
	width:40%;
}
/*4.ファイル参照ボタン　clipmail
-------------------------------------------------------*/
input[type="file"] {
  font-size     : 10pt;        /* 文字サイズ */
  padding       : 5px 0px;   /* 余白       */
}
/*5.セレクトのスタイル
-------------------------------------------------------*/
.cp_ipselect {
overflow: hidden;
width: 100%;
text-align: center;
scale(0.8);	
font-size:16px;	
}
.cp_ipselect select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
scale(0.8);	
font-size:16px;	
}
.cp_ipselect select::-ms-expand {
display: none;
}
.cp_ipselect.cp_sl01 {
position: relative;
border: 1px solid #bbbbbb;
border-radius: 2px;
background: #ffffff;
scale(0.8);	
font-size:16px;	
}
.cp_ipselect.cp_sl01::before {
position: absolute;
top: 0.8em;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
scale(0.8);	
font-size:16px;	
}
.cp_ipselect.cp_sl01 select {
padding: 8px 38px 8px 8px;
color: #111;
scale(0.8);	
font-size:16px;	
}
#form #price .box_2, #form #price .box_3 {
    background: #fff;
}
/*********************************************************/
/*6.Postmailの確認フォームやらエラーフォームやら
********************************************************/
.msg {/*--エラーメッセージの色--*/
	color:#990066; margin:2em;
}
#post_clip_mail table {
  margin: 20px auto;
}
#post_clip_mail .tbl-r02 th {
  background: #fafafa;
  border: solid 1px #ccc;
  color: #333;
  padding: 5px;
}
#post_clip_mail .tbl-r02 td {
  border: solid 1px #ccc;
  padding: 5px;
}
@media screen and (max-width: 640px) {
#post_clip_mail .tbl-r02 {
    width: 100%;
  }
#post_clip_mail .tbl-r02 td {
　　border-bottom: none;
    border-top: none;
    display: block;
    width: 100%;
  }
#post_clip_mail .tbl-r02 th {
　　border-bottom: none;
  border: solid 1px #ccc;
    display: block;
    width: 100%;
    }
}
td .positive-integer {/*見積書フォームの数量である*/
  margin-left:auto;
  margin-right:auto;
	width:60%;
}
/* 7. 戻るボタン 
------------------------*/
#post_clip_mail #back_button, #home #back_button {
  display       : block;
  font-size     : 14pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #666;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 1px #888888;  /* 影の設定 */
  border        : 1px solid #444444;    /* 枠の指定 */
　margin-top     : 25px; 
  margin-bottom : 25px;
}
#post_clip_mail #back_button:hover, #home #back_button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #990066;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}
#button, #back_button {
	float:left;
	margin:20px 10px 30px 0px;
}
#button:focus, #back_button:focus {
    outline: 0;
}
/*********************************************************/
/*8. .box_5のテキスト
/*********************************************************/
.box_5 input[type="text"]{
padding:0.6em;
    text-align: center;
border: 1px solid #bbbbbb;
	-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
font-size:16px;	
margin-bottom:8px;
background:#fff;
}
.box_5 ::placeholder {
  color: #B9B9B9;
 font-size:16px;
    letter-spacing: 0.1em;
}
/*9.Google Search Box　グーグルサーチボックスのスタイル
/*********************************************************/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
#google_search_box #wrap {
  margin: 20px;
  display: inline-block;
  position: relative;
  height: 20px;
  float: right;
  padding: 0;
  position: relative;
}
#google_search_box input[type="text"] {/*入力テキスト*/
  height: 20px;
  font-size: 14px;
  display: inline-block;
  font-family: sans-serif, "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #222;
  padding: 3px;
  padding-right: 30px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
  vertical-align: middle ;
}
#google_search_box input[type="text"]:focus:hover {/*入力フィールドの下線*/
  border-bottom: 1px solid #BBB;
}
  #google_search_box input[type="text"]:hover{
  border:none;
}
#google_search_box input[type="text"]:focus {/*クリックした時に出てくる検索フィールド*/
  width: 280px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
    padding:5px 0px;
  cursor: text;
  background:#fff;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
#google_search_box input[type="submit"] {
  height: 27px;
  width: 27px;
  display: inline-block;
  float: right;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
  background-size:cover;
  text-indent: -10000px;/*--上の画像のテキストをこれで表示させなようにしてる--*/
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity .4s ease;
}
::placeholder {
  color: #BDBDBD;
 font-size:14px;
}
::-webkit-input-placeholder{
    font-family: sans-serif, "Lato";
}
:-moz-placeholder {
    font-family: sans-serif, "Lato";
}
#google_search_box input[type="submit"]:hover {
  opacity: 0.4;
}