@charset "utf-8";
/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
.form dl{
padding-top: 30px;
margin-bottom: 0;
}
@media screen and (max-width:767px){
.form dl{
padding-top:15px;
}
}
.form dl dt{
width:35%;
padding-left:30px;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.form dl dt{
width:100%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
}
.form dl dt .icon{
padding: 2px 5px 3px;
margin-left: 7px;
top: -3px;
}
.form dl dd{
width:65%;
padding-right:30px;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.form dl dd{
width:100%;
padding-left: 20px;
padding-right: 20px;
}
}
.form .txt{
border:1px solid #b1b1b1;
border-radius: 0;
font-size: 1.4rem;
height: 60px;
padding:0 10px;
width: 100%;
box-sizing:border-box;
-webkit-appearance: none;
cursor:pointer;
vertical-align:middle;
}
@media screen and (max-width:767px){
.form .txt{
height: 45px;
}
}
.form .txtarea{
height: 200px;
padding: 10px;
}
@media screen and (max-width:767px){
.form .txtarea{
height: 100px;
}
}
.form select{
font-size: 1.4rem;
border:1px solid #b1b1b1;
border-radius: 0;
padding: 0 0 0 10px;
height: 60px;
width: 100%;
box-sizing:border-box;
-webkit-appearance: none;
cursor:pointer;
vertical-align:middle;
}
@media screen and (max-width:767px){
.form select{
height: 45px;
}
}
.form select{
background: url(../images/contact-select.gif) no-repeat right center #fff;
background-size: auto 60px;
}

/*formError*/
.formError {
top: -8px !important;
left: auto !important;
margin: 0 !important;
white-space: nowrap;
background: #e60012;
line-height: 1.2;
font-size: 1.2rem;
color: #fff;
padding: 5px 10px;
z-index: 10;
border-radius: 10px;
transform: translate(0,-80%);
text-align: left;
}
@media screen and (max-width:767px){
.formError{
font-size:8pt;
}
}
.formError:after{
content:"";
position: absolute;
bottom: -5px;
left: 50%;
width: 10px;
height: 10px;
background:  #e60012;
transform: rotate(45deg);
}
/*btn*/
.form .prev{
text-align: center;
margin-top: 30px;
display: block;
}
#previewContent .form .prev{
margin: 10px auto;
}
.form .prev:link,
.form .prev:visited
{
color: #000;
text-decoration: underline;
}
.form .prev:hover,
.form .prev:active
{
color: #255ea2;
text-decoration:none;
}
.form .btnOuter{
margin-top: 30px;
}
.form .btnOuter a{
width: 100%;
max-width: 300px;
height: 70px;
line-height: 70px;
border: 1px solid #000;
}
.form .btnOuter a:hover{
background: #fff;
}
.form .btnOuter a .arrow{
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
top: 50%;
right: 20px;
transform: translate(0,-50%) rotate(45deg);
transition: all 0.3s ease;
}
.form .btnOuter a:hover .arrow{
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.form .agree{
margin-top: 30px;
}
/*formSubmit*/
#commandsOuter{
position: relative;
}
.form #step1commands #formSubmit{
-webkit-appearance: none;
border-radius: 0;
border: 1px solid #000;
width: 100%;
max-width: 300px;
height: 70px;
line-height: 70px;
transition: all 0.3s ease;
}
.form #step1commands.disabled {
opacity: 0.5;
}
.form #step1commands.disabled #formSubmit:hover{
background:#000;
color:#fff;
}
.form #step1commands #formSubmit:hover{
background:#fff;
color:#000;
}
.form #step1commands #step1Prev{
position: absolute;
top: 50px;
width: 100%;
text-align: center;
}
#btnSubmitAlert{
font-size:1.2rem;
color: #898989;
}
#btnSubmitAlert.none{
	display:none;
}
/* ▼IE10・IE11用 */
:-ms-input-placeholder {
color: #d4d4d4;
}
/* ▼Chrome・Safari・Opera用(※Edgeにも使える) */
::-webkit-input-placeholder {
color: #d4d4d4;
}
/* ▼Firefox18以前用 */
:-moz-placeholder {
color: #d4d4d4;
}
/* ▼Firefox19以上用 */
::-moz-placeholder {
color: #d4d4d4;
opacity: 1;
}
/* ▼CSS標準(予定)の記述 */
:placeholder-shown {
color: #d4d4d4;
}