@charset "Shift_JIS";


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

Copyright 2015 Hitachi, Ltd.
***************************************************** */


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

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

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


/* [01] Step
=========================================================================================== */
div.InquiryStepArea ul {
	background-size: 100% auto !important;
}
div.InquiryStepArea ul[class^="InquiryStep4"] li {
	width: 22% !important;
	padding-right: 4.5% !important;
}
div.InquiryStepArea ul[class^="InquiryStep4"] li.LastItem {
	width: 20.5% !important;
	padding-right: 0 !important;
}

div.InquiryStepArea ul[class^="InquiryStep3"] li {
	width: 28.8% !important;
	padding-right: 6.8% !important;
}
div.InquiryStepArea ul li.LastItem {
	padding: 0 !important;
}

@media screen and (max-width: 579px) {
    div.InquiryStepArea ul li span {
        display: none !important;
    }
}
@media screen and (max-width: 406px) {
	div.InquiryStepArea {
		font-size: 67% !important;
	}
	div.InquiryStepArea ul[class^="InquiryStep4"] li strong,
	div.InquiryStepArea ul[class^="InquiryStep4"] li em {
		padding-left: 7px !important;
		padding-right: 5px !important;
	}
	div.InquiryStepArea ul[class^="InquiryStep4"] li.LastItem strong,
	div.InquiryStepArea ul[class^="InquiryStep4"] li.LastItem em {
		padding-left: 5px !important;
		padding-right: 0 !important;
	}
}
/* ---[01-4] 4Grid 4Step--- */
div.Grid4 div.InquiryStepArea ul.InquiryStep41  {
	background: url("/image/inquiry/bg_3grid_4step1.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep42  {
	background: url("/image/inquiry/bg_3grid_4step2.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep43  {
	background: url("/image/inquiry/bg_3grid_4step3.gif") 0 50% no-repeat;
}
div.Grid4 div.InquiryStepArea ul.InquiryStep44  {
	background: url("/image/inquiry/bg_3grid_4step4.gif") 0 50% no-repeat;
}
/* [02] Form
=========================================================================================== */
/* ---[02-1] FormAgree--- */
.FormAgreeArea {
	width: 100%;
	margin: 0 0 25px;
	text-align: center;
}
.FormAgree {
	float: none;
    width: 45%;
    max-width: 320px;
    margin: 0 10px;
	display: inline-block;
}
.FormAgree button.FormAgreeButton,
.FormAgree button.FormAgreeCorrection {
	display: block;
    width: 100%;
}

@media screen and (max-width: 579px) {
	.FormAgreeArea {
		margin-left: 0;
	}
	.FormAgree {
        display: block;
        margin: 0 auto 20px auto;
        width: 100%;
        max-width: 230px;
	}
}
/* ---[02-2] FormInput--- */
table.FormTableStyle td select{
    -moz-appearance: none;
    -webkit-appearance: button;
    appearance: button;
    white-space: nowrap;
    width: 90%;
    height:30px;
    padding:5px 30px 5px 5px;
    padding: 5px\9;
    background: url("/image/inquiry/icon_down_l_gray_hd.gif") 97% center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background: url("/image/inquiry/icon_down_l_gray_hd.gif") 97% center no-repeat, linear-gradient(#fff, #fff);
    background-size: 14px 14px;
}
.FormTableStyle select::-ms-expand {
    display: none;
}

table.FormTableStyle td input[type="email"],
table.FormTableStyle td input[type="tel"] {
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}
table.FormTableStyle td input[type="email"],
table.FormTableStyle td input[type="tel"] {
	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 input[type="email"].ImeActive,
table.FormTableStyle td input[type="tel"].ImeActive {
    ime-mode: active;
}
table.FormTableStyle td input[type="email"].ImeInActive,
table.FormTableStyle td input[type="tel"].ImeInActive {
    ime-mode: inactive;
}
table.FormTableStyle td input[type="email"].ImeDisabled,
table.FormTableStyle td input[type="tel"].ImeDisabled {
    ime-mode: disabled;
}
table.FormTableStyle td input[type="email"].TextboxSmall,
table.FormTableStyle td input[type="tel"].TextboxSmall {
	display: block;
	width: 30%;
}

@media screen and (max-width: 579px) {
	.JS .FormTableStyle input[type="email"],
	.JS .FormTableStyle input[type="tel"] {
	    margin-bottom: 10px;
	    width: 95%;
	}

	.JS .FormTableStyle input.MailAddress {font-size: 100%; font-weight:normal;}
	.JS .FormTableStyle .MailAddress {font-weight:normal;}

	.JS .FormTableStyle input#postal_code1 {width: 3em;}
	.JS .FormTableStyle input#postal_code2 {width: 4em;}

	.JS .FormTableStyle input.ZipCodeUp {width: 3em;}
	.JS .FormTableStyle input.ZipCodeDown {width: 4em;}
}

.FormTableStyle td input#name1_last,
.FormTableStyle td input#name1_first,
.FormTableStyle td input#name2_last,
.FormTableStyle td input#name2_first {
	width: 145px;
}

/* --- [-] Input Item List > Horizontal --- */
@media screen and (max-width: 579px) {
	.FormTableStyle ul.HorizontalColum2 li {
	    float: none;
	    margin: 0 0 3px;
	    width: 100%;
	}
}

/* ---[02-3] FormError--- */

/* --- input controls with error --- */
table.FormTableStyle select.Error {
    background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("/image/inquiry/icon_down_l_gray_hd.gif"), linear-gradient(#ffe8e8, #ffe8e8);
    background-origin: padding-box, padding-box;
    background-position: 97% center, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 15px 15px;
    border: 1px solid #ff0000;
}

@media screen and (max-width: 579px) {
	.ImgRW80SetStyle .Img {
		display: none;
	}
	.ImgRW80SetStyle .ImgSet p {margin-right: 0;}
}

@media screen and (max-width: 399px) {
	.FormError {
		width: 100% !important;
	}
	.FormError button.FormErrorButton {
		width: 100% !important;
	}
}

.ErrorIcon img {
	width: 40px;
	height: 36px;
}
@media screen and (max-width: 579px) {
	.ErrorIcon img {
		width: 20px;
		height: 18px;
	}
}


/* --- on focus --- */
table.FormTableStyle td input[type="email"]:focus,
table.FormTableStyle td input[type="tel"]:focus {
	background-color: #ffffcc;
	border: 1px solid #ff0000 !important;
}
table.FormTableStyle select:focus {
    background: #ffffcc;
    background: url("/image/inquiry/icon_down_l_gray_hd.gif") 97% center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffcc), to(#ffffcc));
    background: url("/image/inquiry/icon_down_l_gray_hd.gif") 97% center no-repeat, linear-gradient(#ffffcc, #ffffcc);
    background-size: 15px 15px;
    border: 1px solid #bbb;
}

/* ---[02-4] FormConfArea--- */
.FormConfArea {
	width: 100%;
	margin: 0 0 25px;
	text-align: center;
}
.FormConfArea li.FormConf {
	float: none;
    width: 45%;
    max-width: 320px;
    margin: 0 auto;
}
.FormConfArea li.Edit{
	float:left;
	width: 25%;
    margin: 0 0px;
    max-width:150px;
}
.FormConf button.FormConfButton,
.FormConf button.FormConfCorrection {
	display: block;
    width: 100%;
}

@media screen and (max-width: 579px) {
	.FormConfArea {
		margin-left: 0;
	}
	.FormConfArea li.FormConf {
        display: block;
        margin: 0 auto 20px auto;
        width: 100%;
        max-width: 230px;
	}
	.FormConfArea li.Edit{
		float: none;
	}
}

/* ---[02-5] FormCompArea--- */


/* [03] PopUp
=========================================================================================== */
@media screen and (max-width: 767px) {
	#PopUpContents {
		width: auto;
	    box-sizing: border-box;
	    padding: 18px 15px 5px 15px;
	}
}



.noWrap {
	white-space: nowrap;
}