@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: 16px;
height: 60px;
padding:0 15px;
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 15px;
}
@media screen and (max-width:767px){
.form .txtarea{
height: 100px;
}
}
.form select{
color:#000;
font-size: 16px;
border:1px solid #b1b1b1;
border-radius: 0;
padding: 0 60px 0 15px;
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/page/contact-select.gif) no-repeat right center #fff;
background-size: auto 60px;
}
@media screen and (max-width:767px){
.form select{
background: url(../images/page/contact-select.gif) no-repeat right center #fff;
background-size: auto 45px;
}
}
.form .radioItem{
margin-right: 20px;
}
@media screen and (max-width:767px){
.form .radioItem{
margin-right: 10px;
}
}
.form input[type=radio]{
opacity: 0;
}
.form label .txt{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
line-height: 1.2;
}
.form input[type=radio]+label{
display: inline-block;
border: 2px solid rgba(180, 180, 180,0.2);
box-sizing: border-box;
padding:10px 15px 10px 35px;
line-height: 1.5;
transition: all 0.6s ease;
background: #fff;
font-size: 16px;
position: relative;
}
.form input[type=radio]+label:hover{
background: rgba(185, 185, 185, 0.2);
border: 2px solid rgba(185, 185, 185, 0.2);
}
.form input[type=radio]:checked+label{
border: 2px solid #0000ff;
opacity: 1;
}
.form input[type=radio]:checked+label:hover{
background: none;
}
.form input[type=radio]+label:after{
content: "";
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid rgba(180, 180, 180,0.2);
background: #fff;
position: absolute;
top:12px;
left: 10px;
border-radius: 50%;
}
@media screen and (max-width:767px){
.form input[type=radio]+label:after{
width: 18px;
height: 18px;
}
}
.form input[type=radio]:checked+label:after{
box-sizing: border-box;
border: 1px solid #0000ff;
}
.form input[type=radio]+label:before{
content: "";
width:14px;
height: 14px;
box-sizing: border-box;
background: #0000ff;
position: absolute;
top: 15px;
left: 13px;
border-radius: 50%;
z-index: 10;
opacity: 0;
}
@media screen and (max-width:767px){
.form input[type=radio]+label:before{
width:12px;
height: 12px;
}
}
.form input[type=radio]:checked+label:before{
opacity: 1;
}
.form .checkStyle{
margin-right: 20px;
}
@media screen and (max-width:767px){
.form .checkStyle{
margin-right: 10px;
}
}
.form .checkStyle input[type="checkbox"]{
opacity: 0;
width: 0;
}
.form .checkStyle input[type="checkbox"] + label{
padding-left:24px;
display: inline-block;
font-size: 16px;
}
.form .checkStyle input[type="checkbox"] + label:hover{
color: #0000ff;
}
.form .checkStyle input[type="checkbox"] + label:before,
.form .checkStyle input[type="checkbox"] + label:after {
content: "";
position: absolute;
transition: all 0.2s;
}
.form .checkStyle input[type="checkbox"] + label:before {
top:6px;
left: 0;
z-index: 0;
width: 16px;
height: 16px;
box-sizing: border-box;
border: 2px solid rgba(180, 180, 180,0.2);
}
@media screen and (max-width:767px){
.form .checkStyle input[type="checkbox"] + label:before {
top:5px;
width:12px;
height:12px;
}
}
.form .checkStyle input[type="checkbox"] + label:after {
top:2px;
left:5px;
opacity: 0;
width:6px;
height:14px;
color: #fff;
border-bottom: 3px solid #0000ff;
border-right: 3px solid #0000ff;
transform: rotate(-180deg);
}
@media screen and (max-width:767px){
.form .checkStyle input[type="checkbox"] + label:after {
width:6px;
height:14px;
}
}

.form .checkStyle input[type="checkbox"]:checked + label::before {
border: 2px solid #1e50a2;
}

.form .checkStyle input[type="checkbox"]:checked + label::after {
transform: rotate(40deg);
opacity: 1;
}


/*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:1rem;
}
}
.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;
}
@media screen and (max-width:767px){
#btnSubmitAlert{
font-size:1.0rem;
}
}
#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;
}