@charset "UTF-8";

/**********タイトルのスタイル**********/
.title2 {
  font-weight: bold;
  padding: 5px 5px;
  color: #fff;
  background-color: rgba(255, 255, 255, .2);
  border-bottom: 4px solid #ccff66;
}

/**********フォーム１のスタイル**********/

/*まず、フォーム全体の囲み罫や背景などを指定*/
form#form1 {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #FFF;
	background-color:rgba(255, 255, 255, .2);
}

/*リスト要素<ul>を初期化*/
form#form1 ul {
	padding:0;
	margin:0
}
/*<li>も初期化し、ボーダーなどを指定*/
form#form1 ul li {
	list-style:none;
	margin:0px;
	padding:5px;
	border-top: 2px solid #666;
	font-size: 14px;
}
/*最初の<li>にはボーダーをつけない（:first-child疑似クラスによる指定）*/
form#form1 ul li:first-child {
	border-top:none;
}
/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form1 ul li span {
	width: 15em;
	margin:0px;
	display:block;
	float:left;
}
form#form1 ul li div {
	margin-left:15em;
}
/*「:after」で <li>の末尾でフロートをクリア*/
form#form1 ul li:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;     /*←フロートをクリア*/
}

/* テキスト入力部品の見た目を統一する */
form#form1 ul li label .txtfiled, form#form1 select {
	padding:3px 5px;
	margin:0px;
	color:#000;
	border: solid 1px #ccc;
	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
        background: #fff;
	-webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
	-moz-box-shadow: 2px 3px 5px -2px #ddd inset;
	box-shadow: 2px 3px 5px -2px #ddd inset;
	/*角丸にする*/
	border-radius:4px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}

/* テキスト入力の「例）国勢調査」の色指定 */
form#form1 ul li label .txtfiled::-webkit-input-placeholder { color: #ccc;}
form#form1 ul li label .txtfiled:-ms-input-placeholder { color: #ccc;}
form#form1 ul li label .txtfiled::-moz-placeholder { color: #ccc;}


/*チェックボックス、ラジオボタンのブロックの指定*/
form#form1 ul li p {
	margin:0 0 0 40px;
}
/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form1 ul li p label {
	margin-right: 2em;
	display: block;
	float: left;
}
/*input要素とテキストがくっつかないように右にマージンを少し*/
form#form1 ul li p label input {
	margin-right:0.5em;
}
/*チェックボックス、ラジオボタンの label要素にロールオーバー時の変化を指定する*/
form#form1 ul li p label:hover {
	background : #000;
	font-weight:bold;
}
/*チェックボックスの<label>の横幅を統一する（<p>にクラス名.checkをつけて）*/
form#form1 ul li p.check label {
	width: 9em;
}
/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
form#form1 ul li input[type="button"] ,
form#form1 ul li input[type="submit"] ,
form#form1 ul li input[type="reset"] {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	font-size:100%;
	font-weight: bold;
	width:180px;
	padding: 5px 0;
	margin-right:0.5em;
	border-style:none;
	color: #fff;
	background:#90E733;
/*↓背景グラデーションの指定です*/
	background: -moz-linear-gradient(top, #777777, #111111 50%, #777777);
	background: -webkit-linear-gradient(top, #777777, #111111 50%, #777777);
	background: linear-gradient(#777777, #111111 50%, #777777);
/*↓以下、ボックスの角丸、シャドウ、テキストシャドウの指定*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	box-shadow: 2px 2px 3px 1px #666;
	text-shadow: 1px 1px 2px #000; 
}

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

/**********ボタンのスタイル**********/
.button1 {
	text-align: left;
}
.button1 input {
	display: inline-block;
	width: 200px;
	height:40px;
	background:#000099;
 	color:#FFF;
	font-size: 100%;
	border:2px solid #aaa;
	border-radius:2px;
}
.button1 input:hover {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	background:#4e91e4;
}
.button1 input span{
	display:block;
	color:#FFF;
}

.button2 {
	text-align: left;
}
.button2 input {
	display: inline-block;
	width: 200px;
	height:40px;
	background:#000066;
 	color:#FFF;
	font-size: 100%;
	border:2px solid #aaa;
	border-radius:2px;
}
.button2 input:hover {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	background:#4e91e4;
}
.button2 input span{
	display:block;
	color:#FFF;
}


/**********テーブルのスタイル**********/
table.type1 {
	width:100%;
	border: 0px solid #666666;
	border-collapse: collapse;
	border-radius: 2px;
	text-align: left;
}
table.type1 th {
	border: 1px solid #666666;
	border-radius: 2px;
	font-size: 12px;
	padding: 4px;
	color: #fff;
	background:  rgba(255, 255, 255, .2);
}
table.type1 td {
	border: 1px solid #666666;
	background-color:transparent;
	font-size: 12px;
	padding: 4px;
}