#attachment {
/* ここから下は共通です。 */
	margin-bottom: 1em !important;
	display: inline-block;
	position: relative;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
 
/* ここから下は、ボタンのサイズ周りを制御します。 */
	padding: .5em 2em;
	line-height: 1.5em;
	width: 200px;
 
/* ここから下は、ボタンの色・形の制御です。 */
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	background-image: -moz-linear-gradient( 90deg, rgb(148,148,149) 0%, rgb(45,41,48) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(148,148,149) 0%, rgb(45,41,48) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(148,148,149) 0%, rgb(45,41,48) 100%);
	color:#fff;    
}
#attachment:hover {
/* ここから下は、マウスオーバーでのデザインです。今回は、単純に透過度を変えるのみとします。 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=8);
	opacity: 0.8;
}

input[type="file"] {
/* 位置とサイズの調整 */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
}
#val01 {
	display: none;
	background: #fff;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	padding: .25em 1em;
	color: rgb(242,121,0);
	border: none;
	font-size: 10pt;
	margin-left: 0em;
	width: 8em;
}
#val02 {
	display: none;
	background: #fff;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	padding: .25em 1em;
	color: rgb(242,121,0);
	border: none;
	font-size: 10pt;
	margin-left: 0em;
	width: 8em;
}
#val03 {
	display: none;
	background: #fff;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	padding: .25em 1em;
	color: rgb(242,121,0);
	border: none;
	font-size: 10pt;
	margin-left: 0em;
	width: 8em;
}