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

.stepForm .progressBar{
width: 100%;
margin-right: 0;
max-width:220px;
}
.stepForm .progressBar .progress{
height: 28px;
line-height: 28px;
}
.stepForm .progressBar .w0{
width: 0%;
}
.stepForm .progressBar .w10{
width: 10%;
}
.stepForm .progressBar .w20{
width: 20%;
}
.stepForm .progressBar .w30{
width: 30%;
}
.stepForm .progressBar .w40{
width: 40%;
}
.stepForm .progressBar .w50{
width: 50%;
}
.stepForm .progressBar .w60{
width: 60%;
}
.stepForm .progressBar .w70{
width: 70%;
}
.stepForm .progressBar .w80{
width: 80%;
}
.stepForm .progressBar .w90{
width: 90%;
}
.stepForm .progressBar .w100{
width: 100%;
}
.stepForm .stepTtl{
box-sizing: border-box;
padding: 15px 20px;
}
.stepForm .stepTtl .label{
margin-left: 15px;
color: #d3101e;
border: 1px solid #d3101e;
height: 22px;
line-height: 22px;
padding: 0 5px;
top: -2px;
}
@media screen and (max-width:767px){
.stepForm .stepTtl .label{
height: 18px;
line-height: 18px;
top: 0px;
font-size: 1.4rem;
margin-left: 10px;
}
}
/*dl*/
.stepForm dl dt{
width:35%;
padding-left:30px;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.stepForm dl dt{
width:100%;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
}
}
.stepForm dl dd{
width:65%;
padding-right:30px;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.stepForm dl dd{
width:100%;
padding-left: 0;
padding-right: 0;
}
}
/*条件分岐*/
.stepForm .resavationBlock{
opacity: 1;
height: auto;
}
.stepForm .resavationBlock.none{
opacity: 0;
height: 0;
}
.stepForm .colum2 .btnStyle{
width:  47.5%;
}
/*フォーム*/
.stepForm .radioBtn input[type=radio]{
opacity: 0;
}
.stepForm .radioBtn input[type=radio]+label{
display: block;
border: 3px solid #dddddd;
box-sizing: border-box;
padding:10px 15px;
width: 100%;
height: 105px;
border-radius: 10px;
line-height: 1.5;
transition: all 0.6s ease;
background: #fff;
font-size: 16px;
position: relative;
}
.stepForm .radioBtn input[type=radio]+label:hover{
background: rgba(185, 185, 185, 0.2);
}
.stepForm .radioBtn input[type=radio]:checked+label{
background: #dddddd;
}
.stepForm .radioBtn input[type=radio]:checked+label:hover{
background: #dddddd;
}
.stepForm .radioBtn input[type=radio]+label .radioBtn-txt{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
}
.stepForm .checkBtn input[type=checkbox]{
opacity: 0;
}
.stepForm .checkBtn input[type=checkbox]+label{
display: block;
border: 3px solid #dddddd;
box-sizing: border-box;
padding:10px 15px;
width: 100%;
height: 105px;
border-radius: 10px;
line-height: 1.5;
transition: all 0.6s ease;
background: #fff;
font-size: 16px;
position: relative;
}
.stepForm .checkBtn input[type=checkbox]+label:hover{
background: rgba(185, 185, 185, 0.2);
}
.stepForm .checkBtn input[type=checkbox]:checked+label{
background: #dddddd;
}
.stepForm .checkBtn input[type=checkbox]:checked+label:hover{
background: #dddddd;
}
.stepForm .checkBtn input[type=checkbox]+label .checkBtn-txt{
top: 50%;
left: 0;
padding-left: 20px;
width: calc(100% - 20px);
transform: translate(0,-50%);
}
.stepForm .checkBtn input[type=checkbox]+label :before{
content: "";
position: absolute;
top: 50%;
left: 10px;
transform: translate(0,-50%);
width: 13px;
height: 13px;
border: 2px solid #ddd;
background: #fff;
}
.stepForm .checkBtn input[type=checkbox]+label:after {
content: "";
position: absolute;
top: calc(50% - 4px);
left: 16px;
opacity: 0;
width:6px;
height:14px;
color: #fff;
border-bottom: 3px solid #d3101e;
border-right: 3px solid #d3101e;
transform: translate(0,-50%) rotate(-40deg);
transition: all 0.3s ease;
}
.stepForm .checkBtn input[type=checkbox]:checked +label  :before {
border: 2px solid #d3101e;
}
.stepForm .checkBtn input[type=checkbox]:checked +label:after {
transform: translate(0,-50%)  rotate(40deg);
opacity: 1;
}
.stepForm .txt{
border:2px solid #dddddd;
border-radius: 10px;
font-size: 16px;
height: 45px;
padding:0 15px;
width: 100%;
box-sizing:border-box;
-webkit-appearance: none;
cursor:pointer;
vertical-align:middle;
}
.stepForm .txt-s{
max-width: 300px;
}
.stepForm .txtarea{
height: 100px;
padding: 10px 15px;
}
.stepForm select{
color:#000;
font-size: 16px;
border:2px solid #dddddd;
border-radius: 10px;
padding: 0 45px 0 15px;
height: 45px;
width: 100%;
box-sizing:border-box;
-webkit-appearance: none;
cursor:pointer;
vertical-align:middle;
}
.stepForm select{
background: url(images/page/contact-select.gif) no-repeat right center #fff;
background-size: auto 45px;
}
/*formError*/
.formError {
top: -8px !important;
left: auto !important;
margin: 0 !important;
white-space: nowrap;
background: #d3101e;
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:  #d3101e;
transform: rotate(45deg);
}
/*btn*/
#commandsOuter .commands{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: center;
flex-direction: row-reverse;
}
.stepForm .btnNext{
max-width: 300px;
width: calc(100% - 20px);
margin: 0 10px;
}
@media screen and (max-width:767px){
.stepForm .btnNext{
max-width: 190px;
}
}
.stepForm .btnNext a{
width: 100%;
height: 70px;
line-height: 70px;
border-radius: 10px;
border: 2px solid #d3101e;
}
.stepForm .btnNext a:link,
.stepForm .btnNext a:visited
{
color:#fff;
background: #d3101e;
}
.stepForm .btnNext a:hover,
.stepForm .btnNext a:active
{
color:#d3101e;
background: #fff;
}
.stepForm .btnNext a .arrow{
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
top: 50%;
right: 20px;
transform: translate(0,-50%) rotate(45deg);
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
.stepForm .btnNext a .arrow{
right:10px;
}
}
.stepForm .btnNext a:hover .arrow{
border-top: 2px solid #d3101e;
border-right: 2px solid #d3101e;
}
.stepForm .btnPrev{
max-width: 150px;
width: calc(100% - 20px);
margin: 0 10px;
}
@media screen and (max-width:767px){
.stepForm .btnPrev{
max-width: 100px;
}
}
.stepForm .btnPrev a{
width: 100%;
height: 70px;
line-height: 70px;
border-radius: 10px;
border: 2px solid #999;
}
.stepForm .btnPrev a:link,
.stepForm .btnPrev a:visited
{
color:#fff;
background: #999;
}
.stepForm .btnPrev a:hover,
.stepForm .btnPrev a:active
{
color:#999;
background: #fff;
}
.stepForm .btnPrev a .arrow{
width: 5px;
height: 5px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
top: 50%;
left: 20px;
transform: translate(0,-50%) rotate(45deg);
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
.stepForm .btnPrev a .arrow{
left:10px;
}
}
.stepForm .btnPrev a:hover .arrow{
border-bottom: 2px solid #999;
border-left: 2px solid #999;
}
/*formSubmit*/
#commandsOuter #step5commands.commands{
flex-direction: row;
}
.stepForm #formSubmit{
width: 100%;
max-width: 300px;
margin: 0 10px;
height: 74px;
line-height: 70px;
border-radius: 10px;
border: 2px solid #d3101e;
color:#fff;
background: #d3101e;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
.stepForm #formSubmit{
max-width: 190px;
}
}
#commandsOuter .commands.disabled  #formSubmit{
opacity: 0.5;
}
#commandsOuter .commands.disabled  #formSubmit:hover{
color:#fff;
background: #d3101e;
}
.stepForm #formSubmit:hover{
color:#d3101e;
background: #fff;
}

#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;
}