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

body{color:000;}
/*#header {
 text-align: center;
 border-bottom: solid 1px #b2b3b5;
 margin: 0 0 20px 0;
}*/
fieldset {
 border: none;
}
legend {
 font-size: 18px;
 margin: 0px;
 padding: 10px 0px;
 color: #b0232a;
 font-weight: bold;
}
label {
/* display: block;*/
 margin: 10px 0 0;
}

input[type="text"], input[type="password"] {
 width: 300px;
 padding: 5px;
 border: solid 1px #000;
}

/* Button
--------------------------------*/
button, .prev, .next {
 text-decoration: none;
 padding: 17px 0 16px;
 font-size: clamp(16px,5vw,20px);
/* font-size: 18px;*/
 border-radius: 4px;
 border: none;
 color: #fff;
 cursor: pointer;
 margin: 1em auto 15px;
 display: block;
 width: 48%;
 float: right;
 text-align: center;
}
@media (max-width:767px){
  button, .prev, .next {
   text-decoration: none;
   padding: 17px 0 16px;
   font-size: clamp(12px,4vw,16px);
   border-radius: 4px;
   border: none;
   color: #fff;
   cursor: pointer;
   margin: 1em auto 15px;
   display: block;
   width: 48%;
   float: right;
   text-align: center;
  }
}

button, .prev {
 background: #aaa;
 color: #fff;
}
button, .next {
 background: #e93817 !important;
 color: #fff;
 }
 
button:hover, .prev:hover, .next:hover {
 opacity: .8;
 text-decoration: none;
}
button {
 border: none;
}
#steps {
 margin: 0;
 display: none;
}
/***/
.prev {
 float: left
}
.next {
 float: right
}
.steps {
 list-style: none;
 width: 100%;
 overflow: hidden;
 margin: 0;
 padding: 0
}
.steps li {
 color: #b0b1b3;
 font-size: 24px;
 float: left;
 padding: 10px;
 transition: all .3s;
 -moz-transition: all .3s;
 -webkit-transition: all .3s;
 -o-transition: all .3s
}
.steps li span {
 font-size: 11px;
 display: block
}
.steps li.current {
 color: #000
}
.breadcrumb {
 height: 37px
}
.breadcrumb li {
 background: #eee;
 font-size: 14px
}
.breadcrumb li.current:after {
 border-top: 18px solid transparent;
 border-bottom: 18px solid transparent;
 border-left: 6px solid #666;
 content: ' ';
 position: absolute;
 top: 0;
 right: -6px
}
.breadcrumb li.current {
 background: #666;
 color: #eee;
 position: relative
}
.breadcrumb li:last-child:after {
 border: none
}


/* StepBar
----------------------------------------*/
.stepBar {
 position: relative;
 list-style: none;
 margin: 1em 0 1em;
 padding: 0;
 text-align: center;
 width: 100%;
 overflow: hidden;
*zoom: 1;
}
.stepBar .step {
 position: relative;
 float: left;
 display: inline-block;
 line-height: 40px;
 padding: 0 40px 0 20px;
 background-color: #eee;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
.stepBar .step:before, .stepBar .step:after {
 position: absolute;
 left: -15px;
 display: block;
 content: '';
 background-color: #eee;
 border-left: 4px solid #FFF;
 width: 20px;
 height: 20px;
}
.stepBar .step:after {
 top: 0;
 -moz-transform: skew(30deg);
 -ms-transform: skew(30deg);
 -webkit-transform: skew(30deg);
 transform: skew(30deg);
}
.stepBar .step:before {
 bottom: 0;
 -moz-transform: skew(-30deg);
 -ms-transform: skew(-30deg);
 -webkit-transform: skew(-30deg);
 transform: skew(-30deg);
}
.stepBar .step:first-child {
 -moz-border-radius-topleft: 4px;
 -webkit-border-top-left-radius: 4px;
 border-top-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
 content: none;
}
.stepBar .step:last-child {
 -moz-border-radius-topright: 4px;
 -webkit-border-top-right-radius: 4px;
 border-top-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-right-radius: 4px;
}
.stepBar .step.current {
 color: #FFF;
 background-color: #e93817;
}
.stepBar .step.current:before, .stepBar .step.current:after {
 background-color: #e93817;
}
.stepBar.step2 .step {
 width: 50%;
}
.stepBar.step3 .step {
 /*width: 33.333%;*/
  width: 50%;
}

/* add
-----------------------------------*/
.v1,.v2,.v3,.v4,.v5,.v6,.v7,.v0{
  display:none;
}
#p-a-label,#p-b-label,#p-c-label,#p-d-label,#p-e-label,#p-f-label,#p-g-label {
 display:none;
}
#label-on1,#label-on2,#label-on3,#label-on4,#label-on5,#label-on6,#label-on7 {
 display:block;
  background:rgba(240,252,255,1);
  border:none;
  padding:.8em 1.1em;
  margin:.2em 0 0;
}
 p.p-family {
  font-size:12px;
  line-height: 1;
  margin:0em 0 .3em;
  padding:.4em .8em .3em .8em;
  background-color:#3558B7;
  color:#fff;
  line-height: 1.5;
  width:16em;
  border-radius: 4px;
  text-align:center;
 }
p.p-mansion {
  font-size:12px;
  line-height: 1;
  margin:0em 0 .3em;
  padding:.4em .8em .3em .8em;
  background-color:#3558B7;
  color:#fff;
  line-height: 1.5;
  width:16em;
  border-radius: 4px;
  text-align:center;
 }

  #select-plan {
    width:clamp(34em,90%,100%);
    background-color:#3558b7;
    padding-left:1em;
    border:none;
    color:#fff;
    border-radius: 4px;
    line-height: 2;
  font-size:clamp(11px,2.9vw,13px)
  }
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #FFF7F7 inset;
}

/* 追加分20211224 */
.steps_wrap {
    border: none;
}
.container {
    border: 1px solid #ccc;
    border-radius: 3px;
}	
.wrap-sticky {
    width: auto;
}
	@media (max-width:767px){ 
	.container {
    border: none;
	}
	.stepBar {
    width: 97%;
    margin: 0 auto;
}
	.commands {
    width: 94%;
    margin: 0 auto;
}
}
.stepBar.step3 .step {
    overflow: initial;
}
	@media (max-width:767px){ 
.stepBar.step3 .step {
    overflow: initial;
}
}




/*formError
---------------------------------------------*/
.step1 label {position:relative}
.step3 label {position:relative}
.step3 dd {position:relative}
.step1 input[type="text"] {position:relative}
.step3 input[type="text"] {position:relative}
.step1 .formError .formErrorContent,
.step3 .formError .formErrorContent{
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width: 140px;
    font-size: 11px;
    border: none;
    box-shadow: none;
   /* -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;*/
    padding: 3px 10px 3px 10px;
    border-radius: 3px;
     left:0;
     top:4px;
}
.doui_wrap label[for="fm_doui"] .formErrorContent {
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width:240px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
    /*-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     left:40px;/*20px;*/
     top:-43px;
    left:3em;
     line-height:2;
}
.doui_wrap label[for="fm_doui2"] .formErrorContent {
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width:240px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
    /*-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;*/
     left:40px;/*20px;*/
     top:-43px;
     line-height:2;
}

.doui_wrap label[for="input_doui-1"] .formErrorContent {
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width:240px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
     left:37px;
     top:-53px;
     line-height:2;
}


.doui_wrap label[for="input_doui-2"] .formErrorContent {
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width:240px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
     left:37px;
     top:-41px;
     line-height:2;
}


.doui_wrap label[for="input_doui-3"] .formErrorContent{
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width:240px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
     left:37px;
     top:-37px;
     line-height:2;
}

.formError .formErrorArrow div {
    border-left: none;
    border-right: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    height: 1px;
    background: none;
    margin: 0 auto;
    line-height: 0;
    font-size: 0;
    display: none;
} 

/**
 * 2
---------------------------------------------------*/
.step2 dt dd {position:relative}
.step2 div.flex-wrapper {position:relative}
.step2 label {position:relative}
.step2 input[type="text"] {position:relative}
.step2 table tr td {position:relative}
.step2 .formError .formErrorContent{
    width: auto;
    background: #FFED0D;
    position: absolute;
    color: red;
    min-width: 140px;
    font-size: 11px;
    border: none;
    box-shadow: none;
   /* -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;*/
    padding: 3px 10px 3px 10px;
    border-radius: 3px;
     left:0;
     top:20px;
}

/*@media screen and (max-width:767px){
.step2 .formError .formErrorContent{
    min-width: 140px;
left:120px;
top: -50px;
z-index: 119900010;
}
.step3 .formError .formErrorContent{
    min-width: 140px;
     left:6px;
     top:4px;
} 
}*/
 
.formError .formErrorArrow div {
    border-left: none;
    border-right: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    height: 1px;
    background: none;/*#FFED0D;*/
    margin: 0 auto;
    line-height: 0;
    font-size: 0;
    display: none;
} 

.flex-wrapper {
display:flex;
 align-items:center;
}     
.flex-wrapper input[type="text"] {
}
.flex-wrapper span {
display:block;
width:2.6em;
text-align:center;
}  
              

.lab_moushikomisha {
width:5em;
display:inline-block;
margin-bottom:1em;
}

.step1 .container,
.step2 .container,
.step1 .container3{
  margin-top:1em;
  margin-bottom:2em;
}
@media (max-width:767px){
.step1 .container,
.step3 .container{
  margin-top:1em;
  margin-bottom:0;
}
.step2 .container {
  margin-top:1em;
  margin-bottom:1em;
}
  
}