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

/*
	00 layout
	01 form element
	02 button
	05 thx
*/

/*	00 layout
------------------------------------------*/
section.contactform{ max-width:1300px; margin:auto; padding:0 5.5vw; } 
section.contactform div.box{ width:100%; }
section.contactform div.box p{ margin-bottom:20px; }

 #appform{ position:absolute; top:-30px; } 

/*default*/
h2.form-lead{
	font-family : YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif !important;
	font-size:18px!important;
	padding:0 0 25px 0!important;
	line-height:1.8rem !important;
	}
.form,
.confirm,
.error{
	width:100%;
	float:left;
	padding:45px 4.5% 50px 4.5%;
	background:rgba(243,243,243,1);
	border-top: 2px solid rgba(255,255,255,1);
	}
.form p{
	width:100%;
	float:left;
	margin:0 0 15px 0;
	}
.form p span{
	padding-right:3px;
	color:#EE0C10;
	}

/*confirm*/
.confirm{}
.confirm dl{
	width:100%;
	float:left;
	}
.confirm dl dt{
	width:20%;
	float:left;
	}
.confirm dl dd{
	width:80%;
	float:left;
	}

/*confirm error*/
.error{}
.error ul{
	width:100%;
	float:left;
	}
.error ul li{
	width:100%;
	padding:6px 0
	}

/*step*/
.form-step{
	width:100%;
	display:table;
	text-align:center;
	} 
.form-step div{
	width:33.3%;
	height:70px;
	display:table-cell;
	padding:15px 0 15px 0;
	margin:0 0 0 0;
	background:rgba(243,243,243,1);
	position:relative;
	opacity:.8;
	} 
.form-step div:nth-child(1),
.form-step div:nth-child(2){
	border-right: 2px solid rgba(255,255,255,1);
	} 
.form-step div span{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	letter-spacing:0.05rem;
	} 
.form-step div.curpage{
	background:rgba(96,193,61,1);
	color:rgba(255,255,255,1);
	opacity:1;
	} 
.form-step div.curpage:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 25px 0 25px;
	border-color:rgba(96,193,61,1) transparent transparent transparent;
	position:absolute;
	bottom:-18px;
	left:50%;
	z-index:2;
	margin:0 0 0 -25px;
	}

/*	01 form element
------------------------------------------*/
form dl{
	width:100%;
	float:left;
	padding:13px 0;
	}
form dl dt{
	width:20%;
	float:left;
	}
form dl dt span{
	padding-left:5px;
	color:#EE0C10;
	}
form dl dt small{
	font-size:12px;
	line-height:1.4rem;
	}
form dl dd{
	width:80%;
	float:left;
	vertical-align:middle;
	}
form dl dd input{
	padding:0;
	}
form dl dd span{
	padding-left:15px;
	font-size:12px;
	}
form dl dd ul{}
form dl dd ul li{
	padding-bottom:12px;
	}

form #companyname{ width:70%; }
form #username{ width:70%; }
form #furigana{ width:70%; }
form #tel{ width:70%; }
form #email{ width:85%; }
form #inquiry{ width:100%; height:auto; }
/*only Japanese Post*/
form #postcode1{ width:10%; }
form #postcode2{ width:15%; }
form #address1{ }
form #address2{ width:80%; }
form #address3{ width:80%; }
form #address4{ width:70%; }
form dd.case input{ margin-right:4px; }
form dd.case label{ margin-left:10px; }
form dd.case label:first-child{ margin-left:0; }
/*only English Post*/
form #en-postcode{ width:40%; }
form #en-address{ width:85%; }

form select{
	height:30px;
	line-height:30px;
	font-size: 12px;
	padding: 0 50px 0 7px;
	border: 1px solid #CCCCCC;
	border-radius:0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: .01px;
	text-overflow: "";
	background:rgba(255,255,255,1) url(/form/images/common/select-arrow.svg) no-repeat right top;
	background-size:30px;
	}

/*for ie*/
html.ie select{
    padding-right:0px;
    border-width: 1px 0 1px 1px;
    border-color:gray;
    width:135px;
    }


/*	04 button
------------------------------------------*/
.form-btn{
	width:100%;
	float:left;
	text-align:center;
	padding:25px 0 5px;
	font-size:16px;
	letter-spacing:0.03em;
	}

.form-btn input,
.error .form-btn span a,
.confirm .form-btn span:first-child a{
	color:rgba(255,255,255,1);
	border-radius:25px;
	padding:10px 60px;
	background:#f66400;
	outline:none;
	border-style: none;
	transition:0.2s;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	} 
.form-btn input:hover,
.form-btn span a:hover{
	background:#F78131 !important;
	}

.error .form-btn span,
.confirm .form-btn span{
	width:50%;
	float:left;
	padding:25px 0 25px 0;
	}
.error .form-btn span,
.confirm .form-btn span:first-child{
	text-align:left;
	position:relative;
	}

.error .form-btn span a,
.confirm .form-btn span:first-child a{
	border-radius:5px;
	padding:12px 60px 12px 70px;
	display:inline-block;
	}
.error .form-btn span a:before,
.confirm .form-btn span:first-child a:before{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 8px 5px 0;
	border-color: transparent #FFFFFF transparent transparent;
	position:absolute;
	top:45%;
	left:12px;
	}

.confirm .form-btn span:last-child{
	text-align:right;
	position:relative;
	}
.confirm .form-btn span:last-child input{
	border-radius:5px;
	padding:12px 70px 12px 60px;
	}
.confirm .form-btn span:last-child:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 8px 5px 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #FFFFFF;
	position:absolute;
	top:45%;
	right:12px;
	}

.error .form-btn{ padding:0; }
.confirm .form-btn{
	padding:15px 0 5px;
	}


/*	05 thx
------------------------------------------*/
.thx{
	width:100%;
	float:left;
	padding:20px 0;
	}
.thx p span,
.thx p span a{
	font-family:'Univers LT W01_55 Roman1475956';
	letter-spacing:0.04rem;
	}




/*responsive*/
@media screen and (max-width:1000px) {

/*
	00 layout
	01 form element
	02 button
	05 thx
*/

/*	00 layout
------------------------------------------*/
section.contactform{ max-width:1450px; margin:auto; padding:0 5.5vw; } 
section.contactform div.box{ width:100%; }
section.contactform div.box p{ margin-bottom:20px; }

 #appform{ position:absolute; top:-30px; } 

/*default*/
h2.form-lead{
	font-family : YuGothic, '游ゴシック',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif !important;
	font-size:18px!important;
	padding:0 0 25px 0!important;
	line-height:1.8rem !important;
	}
.form,
.confirm,
.error{
	width:100%;
	float:left;
	padding:45px 4.5% 50px 4.5%;
	background:rgba(243,243,243,1);
	border-top: 2px solid rgba(255,255,255,1);
	}
.form p{
	width:100%;
	float:left;
	margin:0 0 15px 0;
	}
.form p span{
	padding-right:3px;
	color:#EE0C10;
	}

/*confirm*/
.confirm{}
.confirm dl{
	width:100%;
	float:left;
	}
.confirm dl dt{
	width:20%;
	float:left;
	}
.confirm dl dd{
	width:80%;
	float:left;
	}

/*confirm error*/
.error{}
.error ul{
	width:100%;
	float:left;
	}
.error ul li{
	width:100%;
	padding:6px 0
	}

/*step*/
.form-step{ display:none; } 

/*	01 form element
------------------------------------------*/
form dl{
	width:100%;
	float:left;
	padding:3vw 0;
	}
form dl dt{
	width:100%;
	float:left;
	padding-bottom:3.5vw;
	}
form dl dt span{
	padding-left:1vw;
	color:#EE0C10;
	}
form dl dt small{
	font-size:3.5vw;
	line-height:6vw;
	}
form dl dd{
	width:100%;
	float:left;
	vertical-align:middle;
	}
form dl dd input{
	padding:0;
	}
form dl dd span{
	padding-left:0;
	font-size:3.5vw;
	}
form dl dd ul{}
form dl dd ul li{
	padding-bottom:12px;
	}

form #companyname{ width:100%; }
form #username{ width:100%; }
form #furigana{ width:100%; }
form #tel{ width:100%; }
form #email{ width:100%; }
form #inquiry{ width:100%; height:auto; }
/*only Japanese Post*/
form #postcode1{ width:25%; }
form #postcode2{ width:30%; }
form #address1{ }
form #address2{ width:100%; }
form #address3{ width:100%; }
form #address4{ width:100%; }
form dd.case input{ margin-right:1vw; }
form dd.case label{ margin-left:2vw; }
form dd.case label:first-child{ margin-left:0; }
/*only English Post*/
form #en-postcode{ width:60%; }
form #en-address{ width:100%; }

form select{
	height:6.5vw;
	line-height:4.5vw;
	font-size: 3.8vw;
	padding: 0 10vw 0 4vw;
	border: 1px solid #CCCCCC;
	background-size:6.5vw;
	}

/*for ie*/
html.ie select{
    padding-right:0px;
    border-width: 1px 0 1px 1px;
    border-color:gray;
    width:135px;
    }


/*	04 button
------------------------------------------*/
.form-btn{
	width:100%;
	float:left;
	text-align:center;
	padding:25px 0 5px;
	font-size:16px;
	letter-spacing:0.03em;
	}

.form-btn input,
.error .form-btn span a,
.confirm .form-btn span:first-child a{
	color:rgba(255,255,255,1);
	border-radius:25px;
	padding:10px 60px;
	background:#f66400;
	outline:none;
	border-style: none;
	transition:0.2s;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	} 
.form-btn input:hover,
.form-btn span a:hover{
	background:#F78131 !important;
	}

.error .form-btn span,
.confirm .form-btn span{
	width:50%;
	float:left;
	padding:25px 0 25px 0;
	}
.error .form-btn span,
.confirm .form-btn span:first-child{
	text-align:left;
	position:relative;
	}

.error .form-btn span a,
.confirm .form-btn span:first-child a{
	border-radius:5px;
	padding:3vw 7.5vw;
	display:inline-block;
	font-size:4.2vw;
	}
.error .form-btn span a:before,
.confirm .form-btn span:first-child a:before{ display:none; }

.confirm .form-btn span:last-child{
	text-align:right;
	position:relative;
	}
.confirm .form-btn span:last-child input{
	border-radius:5px;
	padding:12px 70px 12px 60px;
	}
.confirm .form-btn span:last-child:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 8px 5px 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #FFFFFF;
	position:absolute;
	top:45%;
	right:12px;
	}

.error .form-btn{ padding:0; }
.confirm .form-btn{
	padding:15px 0 5px;
	}


/*	05 thx
------------------------------------------*/
.thx{
	width:100%;
	float:left;
	padding:20px 0;
	}
.thx p span,
.thx p span a{
	font-family:'Univers LT W01_55 Roman1475956';
	letter-spacing:0.04rem;
	}

}