@charset "utf-8";
/* CSS Document */

/*----- フォーム関連 ------*/
.formStepImage{
	margin: 2% 0 4%;
	text-align:center;
}


.tableStyle{
	width: 100%;
	border: 1px solid #ccc;
}

.tableStyle th,
.tableStyle td{
	padding: 2%;
}

.tableStyle th{
	width: 32%;
	background: #F6f6f6;
	border: 1px solid #CCC;
	border-right: 1px dotted #CCC;
	vertical-align: middle;
}

.tableStyle td{
	border: 1px solid #CCC;
	border-left: 1px dotted #CCC;
	vertical-align: middle;
}

.tableStyle input,
.tableStyle select,
.tableStyle textarea{
	padding: 7px;
}

.tableStyle span.require{
	font-size: 12px;
	font-weight: bold;
	color: #FC2626;
}

.tableStyle .example{
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	color: #666;
}

h1{
	text-align: left;
	font-size: 36px;
	color: #333;
}

#formFooterText{
	margin: 4% 0;
	padding:4%;
	background-color:#ffeca0;
}



#formHeader{
	position: absolute;
	top: -2$;
	right: 5%;
	padding: 5px 8px 7px;
	border-radius: 3px;
	background: #ff8838;
	color: #FFF;
}


td.error{
	background: #ffd7d7 url('img/icon_vaild.png');
}

td.valid{
	background: url(../img/icon_valid.png) no-repeat 95% center;
}

th.require{
	background-image: url(../img/icon_require.png);
	background-position: 90%;
	background-repeat: no-repeat;
}
th.any{
	background-image: url(../img/icon_any.png);
	background-position:90%;
	background-repeat: no-repeat;
}



.inputFocus{
	border: 1px solid #FC0;
	background-color: #FF9;
}


#CardID,
#Zip,
#Tel,
#Email,
#BirthdayYear,
#BirthdayMonth,
#BirthdayDay, {
	ime-mode: inactive;
}


#zip_button{
	font-size: 12px;
}




/*---------------------------------------------------
	Form
---------------------------------------------------*/

.form { padding: 20px 20px 10px; background: #E0F4F8; width: 580px; overflow: hidden; }
.form p { margin: 0 0 10px 0; float:left; clear:both; display: block; }
.form label { font: bold 0.9em Helvetica, Arial, sans-serif; color: #0077AA; padding: 0 0 0 5px;}
.form .w { float: left; clear: both; padding: 5px 5px 0; background: #D7EBEF; font: bold 0.8em Helvetica, Arial, sans-serif; color: #333; overflow: hidden; }
.form .w span { padding: 0 0 5px; float:left; }
.form .input { border: 1px solid #A5C2C8; line-height: 1.2em; padding: 5px 26px 5px 5px; margin: 0 0 5px 0; width: 537px; font: bold 1.2em Helvetiva, Arial, sans-serif; }
.form .w label { padding:0; }

/* Validation */
.w.error { background-color: #EFD8D7; }
.w.error .input { border-color: #C8A5A5; background: #fff url('gfx/icon_error.png') no-repeat right center; }

.w.valid { background-color: #A4EFAE; }
.w.valid .input { border-color: #A5C8A6; background: #fff url('gfx/icon_valid.png') no-repeat right center; }
.w.valid span { display: none; }

.validationMessage{
	display: block;
	margin-top: 5px;
	color: #F00;
	font-size: 12px;
	font-weight: bold;
}