@import "base.css";

/* Float解除用 */
#contents div.bgPack:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#contents div.bgPack {
	display: inline-table;
	/*\*/
	display: block;
	*height: 1%;
	/**/
}


/* CONTENTSの設定 */
#contentsNavi p.pankuzu {
	float: none;
}

#contents {
	margin: 0px auto;
	padding: 24px 0 0 0;
	width: 977px;
	text-align: left;
}
#contents div.bgPack {
	background: url(bg_form.gif) repeat-y top left;
	margin: 0 20px 30px 20px;
	width: 937px;
}

#contents div.completePack {
	height: 283px;
}

#titleArea {
	padding-top: 3px;
	width: 218px;
	word-wrap: break-word;
	float: left;
}

#titleArea h1 {
	background: url(hed_title.gif) no-repeat top left;
	height: 50px;
	/*\*//*/
	padding-bottom: 50px;
	/**/
	text-indent: -9999px;
	overflow: hidden;
}
#titleArea p.lead {
	margin-bottom: 25px;
	color: #333;
}
#titleArea div.point {
	background: url(bg_box_b.gif) no-repeat bottom left;
	margin-right: 3px;
	margin-bottom: 45px;
	padding-bottom: 6px;
	width: 221px;
}
#titleArea div.point div {
	background: url(bg_box_t.gif) no-repeat top left;
	padding: 72px 0 13px 0;
	width: 221px;
}
#titleArea div.point h3 {
	display: none;
}
#titleArea div.point p {
	padding: 0 18px;
}
#titleArea p.note {
	color: #666666;
}
#titleArea div.banner {
	margin-bottom: 11px;
}

#formArea {
	width: 661px;
	float: right;
}

#formArea div.change {
	position: relative;
}
	#formArea div.change p {
		position: absolute;
		top: -28px;
		left: 562px;
		height: 22px;
		width: 93px;
	}
		#formArea div.change a {
			background: url(btn_change.gif) no-repeat 0 0;
			height: 22px;
			/*\*//*/
			padding-bottom: 22px;
			/**/
			text-indent: -9999px;
			overflow: hidden;
			display: block;
		}
		#formArea div.change a:hover {
			background: url(btn_change.gif) no-repeat 0 -22px;
		}

#formArea p.lead strong.complete {
	color: #333333;
}

#formArea p.lead strong {
	color: #776633;
}

#formArea p.confirm {
	margin-bottom: 15px;
}

#formArea p.text strong {
	color: #776633;
}

#formArea p.error {
	color: #CC6633;
	margin-bottom: 21px;
}

#formArea p.note {
	margin: 3px 0px 25px 0px;
	color: #666666;
}
	#formArea p.link {
		background: url(/common/files/arrow2.gif) no-repeat 0 6px;
		margin-top: 9px;
		padding-left: 9px;
		font-weight: bold;
		font-size: 100%;
	}

#entryArea {
	background-color: #F6F5EF;
	width: 661px;
	padding-bottom: 15px;
}
#loginArea {
	background-color: #F6F5EF;
	margin-bottom: 24px;
	padding-bottom: 15px;
}


#loginArea h3 {
	background: url(hed_login.gif) no-repeat top left;
	height: 34px;
	/*\*//*/
	padding-bottom: 34px;
	/**/
	text-indent: -9999px;
	overflow: hidden;
}

#entryArea h3.form {
	background: url(hed_entry.gif) no-repeat top left;
	height: 34px;
	/*\*//*/
	padding-bottom: 34px;
	/**/
	text-indent: -9999px;
	overflow: hidden;
}

#entryArea h3.confirm {
	background: url(hed_confirm.gif) no-repeat top left;
	height: 34px;
	/*\*//*/
	padding-bottom: 34px;
	/**/
	text-indent: -9999px;
	overflow: hidden;
}

#entryArea h3.complete {
	background: url(hed_complete.gif) no-repeat top left;
	height: 34px;
	/*\*//*/
	padding-bottom: 34px;
	/**/
	text-indent: -9999px;
	overflow: hidden;
}

#loginArea div.pack,
#entryArea div.pack {
	border-bottom: solid 1px #E3DDCA;
	padding: 11px 15px 15px 15px;
	margin-bottom: 15px;
}

#entryArea div.pack2 {
	padding: 11px 15px 0px 15px;
}

#formArea div.error {
	background: url(bg_error.gif) repeat top left;
	margin-bottom: 11px;
	padding: 3px;
}
	#formArea div.error div.box {
		background-color: #fff;
		padding: 9px 12px 10px 12px;
	}
	#formArea div.error span,
	#formArea div.error h4 {
		color: #c63;
	}
	#formArea div.error ul,
	#formArea div.error p {
		font-weight: bold;
	}

#loginArea p.lead {
	margin-bottom: 9px;
}
#entryArea p.lead {
	margin-bottom: 15px;
}

#entryArea div.pack2 h4 {
	margin-bottom: 11px;
}

#entryArea div.pack2 p.lead {
	margin-bottom: 0px;
}

#entryArea p.text {
	margin-bottom: 5px;
}
#entryArea p.note {
	margin: 0px 0px 18px 0px;
}

#entryArea table p.text,
#entryArea table p.note {
	margin: 2px 0px 0px 0px;
}
#entryArea table p.again {
	margin: 9px 0px 4px 0px;
}

#entryArea div.side {
	position: relative;
}

#entryArea div.side dl.note {
	position: absolute;
	margin: 0px;
	padding-left: 230px;
	z-index: 0;
	color: #666;
}
	#entryArea div.side dl dt {
		float: left;
	}
	#entryArea div.side dl dd {
		margin-left:1em;
	}
#entryArea p.necessary {
	background: url(bg_th.gif) repeat-y top left;
	margin-bottom: 10px;
	padding: 2px 0px 3px 13px;
	color: #993333;
}

#loginArea table,
#entryArea table {
	width: 631px;
	clear: both;
}

#loginArea table p,
#entryArea table p {
	position: relative;
	z-index: 1;
}


#loginArea th,
#entryArea th {
	background-color: #EBE6D7;
	border-top: solid 2px #F6F5EF;
	padding: 15px 12px 13px 12px;
	width: 140px;
	text-align: left;
	font-weight: normal;
	color: #333;
}

/* IE5/Mac \*//*/
#loginArea th,
#entryArea th {
	width: 174px;
}
/**/

#loginArea th.necessary,
#entryArea th.necessary {
	background: url(bg_th.gif) repeat-y top left;
	background-color: #EBE6D7;
}
#loginArea tr.error th.necessary,
#entryArea tr.error th.necessary {
	background: url(bg_th2.gif) repeat-y top left;
	background-color: #bb6644;
	color: #fff;
}
#loginArea tr.error th,
#entryArea tr.error th {
	background-color: #bb6644;
	color: #fff;
}
#loginArea td,
#entryArea td {
	background-color: #FFFFFF;
	border-top: solid 2px #F6F5EF;
	padding: 12px 12px 10px 12px;
}
#loginArea tr.error td,
#entryArea tr.error td {
	background-color: #dd9977;
}

#entryArea p.agreement {
	margin: 0px 0px 0px 0px;
}

#entryArea h4.confirm,
#entryArea h4.entry,
#entryArea h4.next,
#loginArea h4.login {
	margin-left: 226px;
	height: 36px;
	width: 210px;
}
	#loginArea h4.login a,
	#entryArea h4.confirm a,
	#entryArea h4.entry a,
	#entryArea h4.next a {
		height: 36px;
		/*\*//*/
		padding-bottom: 36px;
		/**/
		text-indent: -9999px;
		overflow: hidden;
		display: block;
	}
	#loginArea h4.login a {
		background: url(btn_login.gif) no-repeat;
	}
	#entryArea h4.confirm a {
		background: url(btn_confirm.gif) no-repeat;
	}
	#entryArea h4.entry a {
		background: url(btn_entry.gif) no-repeat;
	}
	#entryArea h4.next a {
		background: url(btn_next.gif) no-repeat;
	}
	#loginArea h4.login a:link,
	#entryArea h4.confirm a:link,
	#entryArea h4.entry a:link,
	#entryArea h4.next a:link {
		background-position: 0 0;
	}
	#loginArea h4.login a:hover,
	#entryArea h4.confirm a:hover,
	#entryArea h4.entry a:hover,
	#entryArea h4.next a:hover {
		background-position: 0 -36px;
	}

/* FORMの設定 */
input.id,
input.pass {
	width: 179px;
	ime-mode: inactive;
}

input.name,
input.kana {
	width: 123px;
	vertical-align: middle;
	ime-mode: active;
}

input.birth {
	width: 26px;
	vertical-align: middle;
	ime-mode: inactive;
}

input.zip,
input.tel {
	width: 39px;
	vertical-align: middle;
	ime-mode: inactive;
}

input.number {
	width: 42px;
	vertical-align: middle;
	ime-mode: inactive;
}

input.address01,
input.address02 {
	width: 350px;
	ime-mode: active;
}

input.mail {
	width: 220px;
	ime-mode: inactive;
}

input.agreement,
input.subscribe,
input.sex {
	vertical-align: middle;
}

select {
	vertical-align: middle;
}

input.id2,
input.pass2 {
	width: 220px;
	ime-mode: inactive;
}

input.answer {
	width: 220px;
	ime-mode: active;
}

input.name2,
input.company {
	width: 220px;
	ime-mode: active;
}

#entryArea textarea {
	width: 99%;
	font-size: 12px;
}

#noteArea textarea {
	width: 99%;
	color: #666666;
	ime-mode: active;
	font-size: 12px;
}