@charset "Shift_JIS";


/* **************************************************
Name: inquiry.css
Description: Setting of inquiry page
Create: 2014.09.01
Update: 

Copyright 2014 Hitachi, Ltd. 
***************************************************** */


/* content===========================================

[01] Step
[02] Form
[03] PopUp

===================================================== */


/* [01] Step
=========================================================================================== */
/* ---[01-1] 3Grid 3Step--- */
div.InquiryStepArea {
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 83%;
	overflow: hidden;
	text-align: left;
	background-color: #EFEFEF;
}
div.InquiryStepArea ul.InquiryStep31  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_3step1.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep31 li{
	width: 208px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul.InquiryStep32  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_3step2.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep32 li{
	width: 208px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul.InquiryStep33  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_3step3.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep33 li{
	width: 208px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}


/* ---[01-2] 3Grid 4Step--- */
div.InquiryStepArea ul.InquiryStep41  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_4step1.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep41 li{
	width: 144px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul.InquiryStep42  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_4step2.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep42 li{
	width: 144px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul.InquiryStep43  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_4step3.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep43 li{
	width: 144px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul.InquiryStep44  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_3grid_4step4.gif") 0 50% no-repeat;
}
div.InquiryStepArea ul.InquiryStep44 li{
	width: 144px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.InquiryStepArea ul li.LastItem {
	padding: 0;
}
div.InquiryStepArea ul li strong {
	display: block;
	color: #ffffff;
	padding: 10px 5px 10px 10px;
	line-height: 1.2;
	font-weight: bold;
}
div.InquiryStepArea ul li em {
	display: block;
	padding: 10px 5px 10px 10px;
	line-height: 1.2;
	font-style: normal;
	font-weight: bold;
}

/* ---[01-3] 4Grid 3Step--- */
div.Grid4 div.InquiryStepArea ul.InquiryStep31  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_3step1.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep31 li{
	width: 289px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep32  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_3step2.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep32 li{
	width: 289px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep33  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_3step3.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep33 li{
	width: 289px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}

/* ---[01-4] 4Grid 4Step--- */
div.Grid4 div.InquiryStepArea ul.InquiryStep41  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_4step1.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep41 li{
	width: 205px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep42  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_4step2.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep42 li{
	width: 205px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep43  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_4step3.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep43 li{
	width: 205px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep44  {
	margin: 0;
	padding: 0;
	background: url("/inquiry/usability5/images/bg_4grid_4step4.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep44 li{
	width: 205px;
	float: left;
	margin: 0;
	padding: 0 48px 0 0;
	line-height: 1.2;
}
div.Grid4 div.InquiryStepArea ul li.LastItem {
	padding: 0;
}

div.Grid4 div.InquiryStepArea ul li strong {
	display: block;
	color: #ffffff;
	padding: 10px 5px 10px 10px;
	line-height: 1.2;
	font-weight: bold;
}
div.Grid4 div.InquiryStepArea ul li em {
	display: block;
	padding: 10px 5px 10px 10px;
	line-height: 1.2;
	font-style: normal;
	font-weight: bold;
}



/* [02] Form
=========================================================================================== */
/* ---[02-1] FormAgree--- */
.FormAgreeArea { width: 688px; margin: 0 auto;}
.FormAgree {
	float: left;
	margin: 0 12px 25px 12px;
	display: block;
}
.FormAgree button.FormAgreeButton {
	width: 320px;
	padding: 5px 0;
	background-color: #e60027;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	color: #ffffff;
	white-space: nowrap;
}
.FormAgree button.FormAgreeButton:hover {
	background-color: #b1000e;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}
.FormAgree button.FormAgreeCorrection {
	width: 320px;
	padding: 5px 0;
	background-color: #cccccc;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	white-space: nowrap;
}
.FormAgree button.FormAgreeCorrection:hover {
	background-color: #bbbbbb;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}


/* ---[02-2] FormInput--- */
table.FormTableStyle td input[type="text"],
table.FormTableStyle td textarea,
table.FormTableStyle td select,
table.FormTableStyle td button,
ul li button,
p button {
	font-family: '繝｡繧､繝ｪ繧ｪ',Meiryo,'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','Hiragino Kaku Gothic Pro','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',sans-serif;
	font-size: 100%;
}
table.FormTableStyle td input[type="text"] {
	width: 90%;
	padding: 3px 4px 3px;
	padding: 4px 4px 3px\9;
	border: 1px solid #ddd;
	display: block;
	height: 1.6em;
	ime-mode: active;
}
table.FormTableStyle td textarea {
	width: 90%;
	padding: 3px 4px 4px;
	border: 1px solid #ddd;
	display: block;
	ime-mode: active;
}
table.FormTableStyle td select {
	padding: 3px 4px 4px;
	border: 1px solid #ddd;
	display: block;
}
table.FormTableStyle td input.ZipCodeUp {
	width: 3em;
	display: inline;
	ime-mode: disabled;
}
table.FormTableStyle td input.ZipCodeDown {
	width: 4em;
	display: inline;
	ime-mode: disabled;
}
table.FormTableStyle td button.SearchZip {
	margin: 0 0 0 5px;
	padding: 4px 6px 3px;
	padding: 4px 6px 2px\9; /* IE8 */
	/padding: 1px 1px 0; /* IE7 */
	background-color: #cccccc;
	border: 0;
}
table.FormTableStyle td button.SearchZip:hover {
	background-color: #bbbbbb;
	border: 0;
	cursor: pointer;
}

table.Must span.MustItem2 {
	display: block;
	color: #E60027;
	font-weight: bold;
}
.FormTableStyle span.InputExample {
	margin-top: 3px;
	display: inline-block;
}
table.FormTableStyle td label {
	margin-left: 4px;
}
table.FormTableStyle td input.MailAddress {
	font-size: 125%;
    font-weight: bold;
}
table.FormTableStyle .MailAddress {
	font-size: 125%;
    font-weight: bold;
}
table.FormTableStyle td input[type="text"].ImeActive,
table.FormTableStyle td textarea.ImeActive {
    ime-mode: active;
}
table.FormTableStyle td input[type="text"].ImeInActive,
table.FormTableStyle td textarea.ImeInActive {
    ime-mode: inactive;
}
table.FormTableStyle td input[type="text"].ImeDisabled,
table.FormTableStyle td textarea.ImeDisabled {
    ime-mode: disabled;
}
table.FormTableStyle td input[type="text"].TextboxSmall {
	display: block;
	width: 30%;
}

/* --- [-] Input Item List > Horizontal --- */
.FormTableStyle ul.HorizontalColum2 { margin: 0 0 -3px; }
.FormTableStyle ul.HorizontalColum2 li {
	float: left;
	width: 46%;
	margin: 0 1em 2px 0;
}
/* IE7 & IE6lower */
* html .FormTableStyle ul.HorizontalColum2 li { white-space: nowrap }
*:first-child+html .FormTableStyle ul.HorizontalColum2 li { white-space: nowrap }
/* */
.FormTableStyle ul.HorizontalColum2 li label { white-space: nowrap; }
.FormTableStyle ul.HorizontalColum2 li input {
	display: inline;
	margin: 0 0 2px;
	vertical-align: middle;
}

.FormInputArea { text-align: center; margin-bottom: 25px;}
.FormInput { 
	margin: 0 auto;
	width: 280px;
	display: block;
}
.FormInput button.FormInputButton {
	width: 280px;
	padding: 10px 0 8px;
	background-color: #e60027;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	color: #ffffff;
	white-space: nowrap;
}
.FormInput button.FormInputButton:hover {
	background-color: #b1000e;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}

/* ---[02-3] FormError--- */
table.FormTableStyle div.ErrorIcon { float: right; }
div.ErrorBox {
	margin: 0 0 15px;
	padding: 10px 10px 0;
	border: 2px solid #ff0000;
	background: #ffe8e8;
}
table.FormTableStyle td div.Attention {
	color: #CE0E0E;
	margin: 0 0 5px;
	line-height: 1.35;
	font-weight: bold;
}
button.ScrollButton {
	padding: 10px 32px 8px 15px;
	/padding: 8px 32px 3px 15px;
	background: #e60027 url("/inquiry/usability5/images/button_to_error.png") 100% 50% no-repeat;   
	border: 0;
	font-size: 110%;
	font-weight: bold;
	line-height: 140%;
	color: #ffffff;
	white-space: nowrap;
	text-decoration: none;
	width: auto;
	overflow:visible;
}
button.ScrollButton:hover {
	background: #b1000e url("/inquiry/usability5/images/button_to_error_hover.png") 100% 50% no-repeat;  
	border: 0;
	cursor: pointer;
	font-weight: bold;
}

/* --- input controls with error --- */
table.FormTableStyle td select.Error,
table.FormTableStyle td input.Error,
table.FormTableStyle td textarea.Error { 
	background-color: #FFE8E8;
	border: 1px solid #FF0000 !important;
}
.FormErrorArea { margin-bottom: 25px;}
.FormError { 
	margin: 0 auto;
	width: 300px;
	display: block;
}
.FormError button.FormErrorButton {
	width: 300px;
	padding: 10px 0 8px;
	background-color: #cccccc;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	white-space: nowrap;
}
.FormError button.FormErrorButton:hover {
	background-color: #bbbbbb;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}
.ImgRW80SetStyle .Img {
	float: right;
	width: 80px;
	padding-bottom: 15px;
}

.ImgRW80SetStyle .ImgSet {
	float: left;
	width: 100%;
	margin-right: -80px;
}
.ImgRW80SetStyle .ImgSet p {margin-right: 90px;}

/* --- on focus --- */
table.FormTableStyle td select:focus,
table.FormTableStyle td input[type="text"]:focus,
table.FormTableStyle td textarea:focus { 
	background-color: #ffffcc;
	border: 1px solid #ff0000 !important;
}

/* ---[02-4] FormConfArea--- */
.FormConfArea { width: 608px; margin: 0 auto;}
.FormConf { 
	float: left;
	margin: 0 12px 25px 12px;
	display: block;
}
.FormConf button.FormConfButton {
	width: 280px;
	padding: 10px 0 8px;
	background-color: #e60027;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	color: #ffffff;
	white-space: nowrap;
}
.FormConf button.FormConfButton:hover {
	background-color: #b1000e;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}
.FormConf button.FormConfCorrection {
	width: 280px;
	padding: 10px 0 8px;
	background-color: #cccccc;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	white-space: nowrap;
}
.FormConf button.FormConfCorrection:hover {
	background-color: #bbbbbb;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}


/* ---[02-5] FormCompArea--- */
.FormCompArea { margin-bottom: 25px;}
.FormComp { 
	margin: 0 auto;
	width: 280px;
	display: block;
}
.FormComp button.FormCompButton {
	width: 280px;
	padding: 10px 0 8px;
	background-color: #e60027;
	border: 0;
	font-size: 90%;
	font-weight: bold;
	line-height: 140%;
	color: #ffffff;
	white-space: nowrap;
}
.FormComp button.FormCompButton:hover {
	background-color: #b1000e;
	border: 0;
	cursor: pointer;
	font-weight: bold;
}


/* [03] PopUp
=========================================================================================== */
#PopUpContents {
	width: 720px;
	margin: 0 auto;
    padding: 18px 0 5px;
}