@charset "utf-8";

.okb-form {}

.textField,
.textArea {
	position: relative;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.textField {
	height: 40px;/* tmp */
}
.textArea {
	height: 100px;/* tmp */
}

.textField input,
.textArea textarea {
	position: relative;
	border: none;
	outline:0;/* safariの青枠消す */
	resize: none;/* for safari */
	-webkit-appearance: none;
	background-color: transparent;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	zoom: 1;
	font-size: 16px;
	font-weight: bold;
}
.textField input {
	padding: 5px;
	height: 30px;
	line-height: 30px;/*tmp*/
}
.textArea textarea {
	padding: 5px;
	height: 90px;/* tmp */
}

.textField .bgL,
.textArea .bgL{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 100%;
}
.textField .bgL,
.textField .bgR {
	background: url(../imgs/form/text.gif) no-repeat left top;
}
.textField .bgL.ov,
.textField .bgR.ov {
	background: url(../imgs/form/text-ov.gif) no-repeat left top;
}
.textField .bgL.ac,
.textField .bgR.ac {
	background: url(../imgs/form/text-ac.gif) no-repeat left top;
}
.textField.error .bgL,
.textField.error .bgR,
.textField.error .bgL.ov,
.textField.error .bgR.ov {
	background-image: url(../imgs/form/text_err.gif);
}
.textField.error .bgL.ac,
.textField.error .bgR.ac {
	background-image: url(../imgs/form/text-ac.gif);
}
.textField.error input {
	color: #CC1122;
}


.textArea .bgL,
.textArea .bgR {
	background: url(../imgs/form/textarea.gif) no-repeat left top;
}
.textArea .bgL.ov,
.textArea .bgR.ov {
	background: url(../imgs/form/textarea-ov.gif) no-repeat left top;
}
.textArea .bgL.ac,
.textArea .bgR.ac {
	background: url(../imgs/form/textarea-ac.gif) no-repeat left top;
}
.textField .bgR,
.textField .bgR.ov,
.textField .bgR.ac {
	background-position: right top;
}
.textArea .bgR,
.textArea .bgR.ov,
.textArea .bgR.ac {
	background-position: right top;
}
.textField .bgR,
.textArea .bgR{
	position: absolute;
	left: 10px;
	right: 0px;
	top: 0px;
	width: auto;
	height: 100%;
	zoom: 1;
}
* html .textField .bgR,
* html .textArea .bgR{
	left: auto;
	right: 0px;
	width: 99px;/* ie6ではjsでいれる */
}
.notChrome .textField .bgL.ov,
.notChrome .textField .bgL.ac,
.notChrome .textArea .bgL.ov,
.notChrome .textArea .bgL.ac {
	-webkit-transform-style: preserve-3d;
}



.checkBox,
.radio {
	position: relative;
	display: inline;
	cursor: default;
	outline: 0;
	zoom:1;
	vertical-align: middle;
}
.checkBox input,
.radio input {
	position: absolute;
	left:7px;
	top:0px;
	/*filter: alpha(opacity=50);*/
	/*-moz-opacity:0.5;*/
	/*opacity:0.5;*/
	display: none;
}
.checkBox img,
.radio img {
	vertical-align: middle;
}
.checkBox img.space,
.radio img.space {
	width: 20px;/* tmp */
	height: 20px;/* tmp */
	filter: alpha(opacity=0);
}
.checkBox span.df,
.checkBox span.ov,
.checkBox span.down,
.radio span {
	position: absolute;
	left:0px;
	top:0px;
	width: 20px;/* tmp */
	height: 20px;/* tmp */
	overflow: hidden;
	zoom:1;
}
.checkBox span {
	background: url(../imgs/form/checkbox.gif) no-repeat left top;
}
.radio span {
	background: url(../imgs/form/radio.gif) no-repeat left top;
}
.checkBox span.df,
.radio span.df {
	background-position: 0px 0px;
}
.checkBox span.ov,
.radio span.ov {
	background-position: 0px -20px;
}
.checkBox span.down,
.radio span.down {
	background-position: 0px -40px;
}
.checkBox.on span.df,
.radio.on span.df {
	background-position: 0px -60px;
}
.checkBox.on span.ov,
.radio.on span.ov {
	background-position: 0px -80px;
}
.checkBox.on span.down,
.radio.on span.down {
	background-position: 0px -100px;
}
.checkBox p,
.radio p {
	display: inline;
	vertical-align: middle;
	line-height: 20px;
	height: 20px;
}

.notChrome .checkBox span.ov,
.notChrome .radio span.ov,
.notChrome .checkBox span.down,
.notChrome .radio span.down {
	-webkit-transform-style: preserve-3d;
}





.selectBox {
	position: relative;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 190px;/* tmp */
	height: 40px;/* tmp */
	vertical-align: bottom;
}
.selectBox .selectBoxInner {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.selectBox .selectBoxInner .bgL {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 100%;
	overflow: hidden;
	background: url(../imgs/form/select.gif) no-repeat left top;
}
.selectBox .selectBoxInner .bgR {
	position: absolute;
	left: 10px;
	right: 0px;
	top: 0px;
	width: auto;
	height: 100%;
	overflow: hidden;
	background: url(../imgs/form/select.gif) no-repeat right top;
}
.selectBox.focus .selectBoxInner .bgL,
.selectBox:hover .selectBoxInner .bgL {
	background: url(../imgs/form/select.gif) no-repeat left bottom;
}
.selectBox.focus .selectBoxInner .bgR,
.selectBox:hover .selectBoxInner .bgR {
	background: url(../imgs/form/select.gif) no-repeat right bottom;
}
.selectBox .selectBoxInner .cur {
	position: absolute;
	left: 0px;
	top: 0px;
	padding-left: 10px;/* custom */
	line-height: 40px;/* custom */
	font-size: 16px;
	font-weight: bold;
}
.selectBox .selectBoxInner select {
	position: absolute;
	left: 10px;
	top: 0px;
	opacity: 0;
	filter: alpha(opacity=0);
	/*font-size: 24px;*/
	height: 40px;/* custom */
}
.ff .selectBox .selectBoxInner select {
	left: 0px;
}
.ie .selectBox .selectBoxInner select {
	left: 0px;
}
.selectBox .selectBoxInner select:focus {
	font-size: 12px;
}
.selectBox.blur .selectBoxInner select {
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	/*font-size: 24px;*/
}
.selectBox.focus .selectBoxInner select {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	/*font-size: 12px;*/
}