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


form#form01 {
	clear: both;
/*まず、フォーム全体の囲み罫や背景などを指定*/
	padding: 10px;
	margin-left: 10px;
	margin-bottom: 15px;
	background: #F0F8F1;
	text-align: left;
	
/*↓背景グラデーションの指定*/
	background: -moz-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: -webkit-linear-gradient(top, #FBFCFC, #F0F8F1);
	background: linear-gradient(#FBFCFC, #F0F8F1);
	background-image:  url(../img/wallpaper-aqua.png);
}

/*リスト要素<ul>を初期化*/
form#form01 ul {
	padding:0;
	margin:0;
}

/*<li>も初期化し、ボーダーなどを指定*/
form#form01 ul li {
	list-style:none;
	margin:0px;
	padding:10px;
	border-bottom: 2px solid #FFF;
	font-size: 12px;
}

/*最後の<li>要素もボーダーを初期化*/
form#form01 ul.last li{
    border-bottom: none;
}

/* span要素をブロック化しフロートでフォーム部品と横に並べる*/
form#form01 ul li span {
	width: 17em;
	margin:0px;
	display:block;
	float:left;
}  

/* floatでなく、CSS3 の「display: inline-block」を使う手もアリ 
	display: inline-block;*/
	
/*赤く表示したいフォントの設定*/
 form#form01 span.red{
    color:red;
}

/*青く表示したいフォントの設定*/
 form#form01 p.blue span{
   margin-left: 1em;
    color:blue;
}

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

/* テキスト入力部品の見た目を統一する */
form#form01 ul li .txtfiled, form#form01 select {
	width:150px;
	padding:3px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
	}
	

form#form01 ul li .txtfiled_long {
	width:250px;
	padding:3px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
	}
	
form#form01 ul li .txtfiled, form#form01 ul li  .txtfiled_long, form#form01 select {
	/*テキストエリア内にシャドウをつける。最初に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:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}

/* ご意見ご要望欄のテキスト入力部品の見た目を整える */
form#form01 textarea {
	width:500px;
	padding:3px 5px;
	margin:0px;
	color:#666;
	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:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}

/*.contact（連絡方法）のselectの幅を250に設定*/
form#form01 select.contact {
	width:250px;
}
/*月・日などの数字入力のselectの幅を50に設定*/
form#form01 select.number {
	/*selectは250では大きすぎるので*/
	width:50px;
}

/*チェックボックス、ラジオボタンのマージンの指定*/
form#form01 ul li p {
	margin:5px 0 0 40px;
}

/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form01 ul li p label {
	margin-right: 2em;
	display: block;
	float: left;
}
/*input要素とテキストがくっつかないように右にマージンを少し*/
form#form01 ul li p label input {
	margin-right:0.5em;
}

/*select要素とテキストがくっつかないように右にマージンを少し*/
form#form01 ul li label select {
	margin-right:0.5em;
}

/*チェックボックス、ラジオボタンの label要素にロールオーバー時の変化を指定する*/
form#form01 ul li p label:hover {
	background : #FFF;
	color: #096;
	font-weight:bold;
}
/*チェックボックスの<label>の横幅を統一する（<p>にクラス名.check_courseをつけて）*/
form#form01 ul li p.check_course label {
	width: 250px;
}

/* 数字入力部品の幅を小さくする */
form#form01 ul li label .num {
	width:80px;
	padding:3px 5px;
	margin-right: 1em;
	color:#666;
	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:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
}
/*eachguestのli要素からborder_bottomを消去*/
form#form01 ul li.eachguest{
	border-bottom: none;
	}
	    
/*.eachguestのセレクト要素とテキストエリア要素のマージンを指定*/
form#form01 ul li.eachguest p{
	margin:5px 0 0 40px;
}

/*チェックボックス、ラジオボタンの label要素を横に並べる*/
form#form01 ul li.eachguest p label {
	margin: 5px 2em 0 0;
	display: block;
	float: left;
}
	
/*眼鏡・コンタクト使用のチェックボックス要素のマージンを指定*/
form#form01 ul li.glass{
	list-style:none;
	border: none;
	margin:0px 0 0 40px;
	font-size: 12px;
}

form#form01 ul li.glass p span{
	width: 200px;}

/*.snoの下線の指定*/
form#form01 ul li.sno {
	list-style:none;
	border-bottom: 2px solid #FFF;
}


/*.snoのマージンを指定、下線の指定*/
form#form01 ul li.sno p{
	margin:5px 0 0 40px;
}

/*各ゲストの性別のセレクトボタンの横幅を小さくする*/
form#form01 ul li.eachguest p select{
    width:12em;
    }
    
form#form01 ul li p textarea.comment{
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
form#form01 p input[type="submit"] ,
form#form01 p input[type="reset"] {
	cursor:pointer;     /*←これでカーソルを指先型に変化させる*/
	font-size:110%;
	font-weight: bold;
	width:100px;
	padding: 4px 10px;
	margin-right:0.5em;
	color: #fff;
    border:1px solid #bbb;
    background: #809fff;
/*↓背景グラデーションの指定です*/
    background: -moz-linear-gradient(top, #ece6ff, #809fff);
    background: -webkit-linear-gradient(top, #ece6ff, #809fff);
    background: linear-gradient(#ece6ff, #809fff);
/*↓以下、ボックスの角丸、シャドウの指定*/
    -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=ece6ff,endColorstr=#809fff);
    zoom: 1;
}

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