.pc   {display:block}
.sp   {display:none}
@media only screen and (max-width:767px) {
.pc   {display:none}
.sp   {display:block}
}


/*smf-form--business*/
.smf-form--business {
  font-size: 1.7rem!important;
  line-height: 2!important;
}

.smf-form--business .smf-item__col--label {
  border-bottom: none;
  border-right: 1px solid #DBDADD;
  flex: 0 0 25em!important;
  max-width: 25em!important;
}

.smf-form--business .smf-item__col--label {
  background: none!important;
  padding:20.25px 36px!important;
}

.smf-form--business .smf-item__col--label span {
  font-weight: 500!important;
}

.smf-form--business .smf-item__col--controls {
  padding:20.25px 36px!important;
  flex: 1 1 calc(100% - 25em)!important;
  max-width: calc(100% - 25em)!important;
}

@media only screen and (max-width:767px) {
  .smf-form--business {
    margin-top:calc(2.5em / 1.5);
  }

  .smf-form--business .smf-item__col--label {
    flex: 0 0 100%!important;
    max-width: 100%!important;
  }

  .smf-form--business .smf-item__col--label {
    background: #efedf1!important;
    padding:calc(20.25px /1.5) calc(36px /1.5)!important;
  }

  .smf-form--business .smf-item__col--controls {
    padding:calc(20.25px /1.5) calc(36px /1.5)!important;
    flex: 1 1 100%!important;
    max-width: 100%!important;
  }
}



/*form_message*/
.form_message  {
  display: block
}

.confirm_message  {  
  display: none
}

.complete_message  {  
  display: none
}

  .form_message p.center,
  .confirm_message p.center  {  
    text-align: center;
    margin: auto
  }

  p.form_message.left,
  p.confirm_message.left {
    text-align: left;
    font-size: 1.6rem;
  }

@media only screen and (max-width:767px) {
  p.form_message.left,
  p.confirm_message.left {
    font-size: calc(1.6rem / 1.16);
  }
}


/*form*/
/*data
div[data-name="birth-year"],
div[data-name="birth-month"],
div[data-name="birth-date"],
div[data-name="job01-start-year"],
div[data-name="job01-start-month"],
div[data-name="job02-start-year"],
div[data-name="job02-start-month"],
div[data-name="job03-start-year"],
div[data-name="job03-start-month"] ,
div[data-name="job01-end-year"],
div[data-name="job01-end-month"],
div[data-name="job02-end-year"],
div[data-name="job02-end-month"],
div[data-name="job03-end-year"],
div[data-name="job03-end-month"] {
  display: inline-block;
}

.smf-item__label__text {
  font-weight: 600;
  position: relative;
}
*/

.smf-form input[type=text],
.smf-form input[type=number],
.smf-form input[type=email],
.smf-form input[type=password],
.smf-form input[type=date],
.smf-form input[type=url],
.smf-form input[type=tel],
.smf-form textarea {
  appearance:none;
  outline:none;
  border:1px solid #DBDADD;
  padding:9px 18px!important;
  font-size: 1.6rem;
  box-sizing:border-box;
  width: 100%;
}

.smf-form select{
  appearance:none;
  outline:none;
  border:1px solid #DBDADD;
  padding:9px 18px!important;
  box-sizing:border-box;
  width: 100%;
}

.smf-form input[type=text]:focus,
.smf-form input[type=number]:focus,
.smf-form input[type=email]:focus,
.smf-form input[type=password]:focus,
.smf-form input[type=date]:focus,
.smf-form input[type=url]:focus,
.smf-form input[type=tel]:focus,
.smf-form textarea:focus {
  transition: 0.3s;
  box-shadow: 0 0 0 6px rgba(0,0,0,0.1)
}

@media only screen and (max-width:767px) {
  .smf-form input[type=text],
  .smf-form input[type=number],
  .smf-form input[type=email],
  .smf-form input[type=password],
  .smf-form input[type=date],
  .smf-form input[type=url],
  .smf-form input[type=tel],
  .smf-form textarea ,
  .smf-form select {
    padding: 18px calc(18px / 1.5)!important;
    font-size:calc(1.6rem / 1.16);
  }

}

/*radio checkbox*/
.smf-form input[type=radio],
.smf-form input[type=checkbox] {
  transform:scale(1.35);
  vertical-align: text-top;
}

.smf-checkboxes-control__control .smf-label,
.smf-radio-buttons-control__control .smf-label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2em;
}

.smf-radio-button-control__label,
.smf-checkbox-control__label {
  line-height: 1.345678;
}


@media only screen and (max-width:767px) {
  .smf-form input[type=radio],
  .smf-form input[type=checkbox] {
    transform:scale(1.25);;
    top: -2.25px;
    vertical-align: middle;
  }

  .smf-checkboxes-control__control .smf-label,
  .smf-radio-buttons-control__control .smf-label {
    display:block;
    width: 100%;
    margin-top:1.25em ;
    margin-right: auto;
  }

}

/*contact_privacy*/
div[data-name="contact_privacy"] .smf-checkbox-control {
  display: inline-block;
  background: #DDE1E5;
  padding:9px 18px;
  margin-top: 13.5px;
}

@media only screen and (max-width:767px) {
  div[data-name="contact_privacy"] .smf-checkbox-control {
    padding: 18px;
    width: 100%;
    margin-top: auto;
  }
}

/*req*/
.smf-item__label__text::before {
  top: 100%;
  display: inline-block;
  width: 48px;
  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  padding-top: 4.5px;
  padding-bottom: 4.5px;
  content: "　　";
  font-size: 1.4rem;
  color: #fff;
  background: transparent;
}

.smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
  top: 100%;
  display: inline-block;
  width: 48px;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
  margin-right: 10px;
  padding-top: 4.5px;
  padding-bottom: 4.5px;
  content: "必須";
  font-size: 1.4rem;
  color: #fff;
  background: #FB0202;
}

@media only screen and (max-width:767px) {
  .smf-item__label__text::before {
    display: none;
  }

  .smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
    width: calc(48px / 1.5);
    line-height: 1;
    margin-right: calc(10px / 1.5);;
    margin-top: -0.25em;
    padding-top:calc(4.5px / 1.25);;
    padding-bottom:calc(4.5px / 1.25);;
    font-size:calc( 1.4rem / 1.2);;
  }
}


/*contact_address*/
div[data-name="contact_zip"] ,
div[data-name="contact_pref"] ,
div[data-name="contact_add1"] ,
div[data-name="contact_add2"] {
  display: flex!important;
  flex-wrap: wrap;
  justify-content: flex;
  align-items: top;
  margin-bottom: 0.5em;
}

div[data-name="contact_zip"] .smf-text-control,
div[data-name="contact_pref"] .smf-select-control,
div[data-name="contact_add1"] .smf-text-control,
div[data-name="contact_add2"] .smf-text-control {
  flex-basis: 100%;
  order: 2!important
}

div[data-name="contact_zip"] .smf-control-description ,
div[data-name="contact_pref"] .smf-control-description,
div[data-name="contact_add1"] .smf-control-description ,
div[data-name="contact_add2"] .smf-control-description {
  flex-basis: 100%;
  order: 1!important;
  margin-bottom:0.25em;
  font-size: 1.6rem;
}

@media only screen and (max-width:767px) {
  div[data-name="contact_zip"] ,
  div[data-name="contact_pref"] ,
  div[data-name="contact_add1"] ,
  div[data-name="contact_add2"] {
    margin-bottom: calc(0.5em / 1.25);
  }

  div[data-name="contact_zip"] .smf-control-description ,
  div[data-name="contact_pref"] .smf-control-description,
  div[data-name="contact_add1"] .smf-control-description ,
  div[data-name="contact_add2"] .smf-control-description {
    margin-bottom: calc(0.25em / 1.25);
    font-size: calc(1.6rem / 1.16);
  }
}

/*confirm*/
[data-screen="confirm"] .smf-item__label__text::before ,
[data-screen="confirm"] .smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
  display: none!important;
}

[data-screen="confirm"] .form_message,
[data-screen="confirm"] .complete_message  {
  display: none!important;
}

[data-screen="confirm"] .confirm_message {
  display: block!important;
}

[data-screen="confirm"] div[data-name="contact_zip"]:before {
  content: '〒';
}

[data-screen="confirm"] div[data-name="contact_zip"] .smf-control-description ,
[data-screen="confirm"] div[data-name="contact_pref"] .smf-control-description,
[data-screen="confirm"] div[data-name="contact_add1"] .smf-control-description ,
[data-screen="confirm"] div[data-name="contact_add2"] .smf-control-description {
  display: none;
}


/*complete*/
[data-screen="complete"] .form_message,
[data-screen="complete"] .confirm_message {
  display: none!important;
}

[data-screen="complete"] .complete_message {
  display: block!important;
}


/*submit*/
.smf-action {
  margin: 45px auto!important;
  text-align: center!important
}


button[data-action="confirm"] ,
button[data-action="complete"],
button[data-action="back"] {
  display:block;
  border: none;
  text-decoration: none;
  text-align:center;
  text-decoration:none;
  box-sizing:border-box;
  background: none;
  position:relative;
  cursor:pointer;
  box-shadow:none;
  outline:none;
  appearance:none;
  font-weight: 600;
}

button[data-action="confirm"] ,
button[data-action="complete"] {
  padding:18px ;
  width: 350px;
  height: 60px;
  color: #fff!important;
  font-size:1.6rem;
  background-image: url(../img/bg__primary.png)!important;
  background-repeat: repeat-y!important;
  background-position: top center!important;
  background-size: 100%!important;
}

  button[data-action="confirm"]:after {
    position: absolute;
    content: '';
    border-bottom: 1px solid #fff;
    width: 30px;
    top: 50%;
    right: 0;
  }

  button[data-action="confirm"]:hover ,
  button[data-action="complete"]:hover {
    opacity: 1;
    color: #fff;
  }

button[data-action="back"] {
  padding:18px ;
  background: none!important;
  width: 256px;
  height: 60px;
  color: #000!important;
  font-size:1.6rem;
  border: 1px solid #000;
  box-sizing: border-box;
}

  button[data-action="back"]:hover {
    opacity: 1;
  }


@media only screen and (max-width:767px) {
  .smf-action {
    margin: 36px auto!important;
  }

  button[data-action="confirm"] ,
  button[data-action="complete"] ,
  button[data-action="back"] {
    width: 100%;
    margin:0.5em auto;
  }
}