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

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

/*	00 layout
------------------------------------------*/
section.form-body{
	max-width:1450px;
	padding:0 6.5%;
	margin:auto;
	}

main section p.notes{
	margin: 0 0 15px 0;
	font-size: 13px;
}
main section p.notes span{
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 7px 0 0;
	background: rgba(231,63,36,1);
}


/*	01 form element
------------------------------------------*/
/*form*/
section.form-body form{
	display:block;
	}
section.form-body form p{ padding:55px 0 10px; }
section.form-body form dl{
	width:100%;
	font-size:0;
	padding:25px 0 25px 0;
	}
section.form-body form dl dt{
	width:100%;
	display:inline-block;
	font-size:16px;
	font-weight: 500;
	padding: 0 0 30px 0;
	vertical-align:top;
	position: relative;
	}
section.form-body form dl dt:after{
	content: "";
	width: 100%;
	height: 0;
	border-bottom: 1px solid rgba(200,200,200,1);
	position: absolute;
	top: 12px;
	right: 0;
	z-index: -1;
}
section.form-body form dl dt label{
	padding: 0 30px 0 25px;
	position: relative;
	color: rgba(231,63,36,1);
	letter-spacing: 0.07rem;
	background: rgba(255,255,255,1);
}
section.form-body form dl dt label:before{
	content: "";
	width: 11px;
	height: 11px;
	background: rgba(231,63,36,1);
	position: absolute;
	top: 6px;
	left: 0;
}
section.form-body form dl dt label.optional{
	color: rgba(75,75,75,1);
}
section.form-body form dl dt label.optional:before{
	background: rgba(90,90,90,1);
}
section.form-body form dl dt span{
	padding: 0 0 0 30px;
	font-size: 13px;
	position: absolute;
	top: 2px;
	right: 0;
	background: rgba(255,255,255,1);
}
section.form-body form dd{
	width:100%;
	display:inline-block;
	padding:30px 35px;
	border-radius: 10px;
	background: rgba(242,242,242,1);
	font-size: 14px;
	font-weight: 400;
	vertical-align:top;
	}
section.form-body form dd ul{}
section.form-body form dd ul li{ padding:14px 0 0 0; }
section.form-body form dd ul li:first-child{ padding:1px 0 0 0; }
section.form-body form dd small{ font-size:12px; padding:0 0 0 7px; }
label + label{ padding: 0 0 0 20px; }
input[type=radio]{ margin: 0 5px 0 0; }

label.checkbox input {
  display: none;
}
label.checkbox > input + span {
	display: block;
  position: relative;
  vertical-align: middle;
	cursor: pointer;
}
label.checkbox > input + span:before {
  content: "";
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(160,160,160,1);
	border-radius: 4px;
	background: rgba(255,255,255,1);
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
label.checkbox > input:checked + span:before {
	border: 1.5px solid rgba(231,63,36,1);
	background: rgba(231,63,36,1) url(/images/common/ico-check.svg) no-repeat center center;
	background-size: 12px 9px;
}

label.num input{
	width: 45px;
	text-align: center;
	margin: 0 10px 0 0;
	border: 1px solid rgba(205,205,205,1);
}
label.num.lock{ opacity: .5; pointer-events: none; }
label.num.lock input{ background: rgba(230,230,230,1); }

main section.form-body ul.specbox li:first-child{ background: rgba(246,246,246,1); }


/*notes*/
span.notes{ color:rgba(239,6,10,1); display:inline-block; }
p span.notes{ padding:0 7px 0 0; }
dt span.notes{ padding:0 0 0 7px; }

/*confirm*/
section.form-body form.confirm{}
section.form-body form.confirm p{ padding:0 0 55px 0; text-align:center; border-bottom:1px dotted rgba(200,200,200,.7); }
section.form-body form.confirm dl{ padding:25px 0; border-bottom:1px dotted rgba(200,200,200,.7); border-top: none; }

/*error*/
section.form-body form.error{}
section.form-body form.error p{ padding:0 0 55px 0; text-align:center; border-bottom:1px dotted rgba(200,200,200,.7); }
section.form-body form.error ul { margin: 40px 0 30px 0; }
section.form-body form.error ul li{ padding:25px 0; border-bottom:1px dotted rgba(200,200,200,.7); color:rgba(239,6,10,1); }
section.form-body form.error ul li:first-child { border-top:1px dotted rgba(200,200,200,.7); }

/*thx*/
section.intro.thx p{ letter-spacing: 0.08rem; } 
section.intro.thx p.backtop{ padding: 75px 0 0 0; }
section.intro.thx p.backtop a{
	padding:15px 120px;
	border:1px solid rgba(150,150,150,1);
	border-radius:27px;
	}

/*	02 form element
------------------------------------------*/
form #companyname{ width:100%; }
form #username{ width:100%; }
form #furigana{ width:100%; }
form #tel{ width:100%; }
form #email{ width:91%; }
form #inquiry{ width:100%; height:auto; }
/*only Japanese Post*/
form #postcode1{ width:5%; }
form #postcode2{ width:10%; margin: 0 35px 0 0; }
form #address1{ }
form #address2{ width:100%; }
form #address3{ width:100%; }
form #address4{ width:100%; }
form select{
	height:45px;
	line-height:45px;
	padding: 0 90px 0 7px;
	border: 1px solid rgba(205,205,205,1);
	border-radius:0;
	text-overflow: "";
	background:rgba(255,255,255,1) url(/images/form/common/arrow.svg) no-repeat right top;
	background-size:45px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-indent: .01px;
	}
/*for ie*/
html.ie select{}


/*	03 button
------------------------------------------*/
input[type=submit]{
	color: rgba(255,255,255,1);
	background: none;
	outline: none;
	border: none;
	letter-spacing:0.1rem;
}

.button{
	width:100%;
	display:block;
	padding:30px 0 0;
	font-size:15px;
	color:rgba(255,255,255,1);
	transition:0.2s;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	}

.button .next,
.button .back{
	display:inline-block;
	border-radius:10px;
	border: none;
	outline:none;
	padding:21px 90px;
	position: relative;
	opacity:1;
	transition:.2s ease;
	-webkit-transition:.2s ease;
	-moz-transition:.2s ease;
	}
.button .next:hover,
.button .back:hover{ opacity:.90; }
.button .next{ background:rgba(178,39,45,1); }
.button .back{ background:rgba(100,100,100,1); }

form.entry div.button{ text-align:center; }
form.entry div.button .next{ padding:21px 175px; }
form.entry div.button .next:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent rgba(255,255,255,1);
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translate(0,-50%);
}

form.confirm div.button{}
form.confirm div.button span{ width:50%; display:inline-block; }
form.confirm div.button span:first-child{ text-align:left; }
form.confirm div.button span:last-child{ text-align:right; }

form.error div.button{ text-align:left; }
form.error div.button .back{}