@charset "utf-8";
/*共通
---------------------------*/
.colorRed {
  color: var(--color-red);
}
.form-grid {
  border-bottom: var(--border);
}
.form-grid .form-label label {
  font-weight: 600;
}
.form-grid .form-label label span{
  color: #ffffff;
  background: var(--color-red);
  font-size: .75rem;
  padding: 0.2em 0.5em;
  border-radius: 3px;
  margin-left: 1em;
  font-weight: normal;
  line-height: 1.1;
}
.form-grid .errMsg {
  display: block;
  width: 100%;
  color: var(--color-red);
  font-weight: 600;
  font-size: .875em;
  margin-top: 1em;
}
.form-grid .attention {
  margin-top: 0.5em;
  font-size: .875em;
  padding: 0.8em 1em;
  border-radius: 5px;
  background: var(--bg-gray);
}
.form-grid .form-input .line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.form-grid .form-input .line + .line{
  margin-top: 1em;
}
.form-grid .form-input .line label {
  display: inline-block;
  width: 20em;
  font-weight: 500;
}
.form-grid .form-input input,
.form-grid .form-input select {
  font-family: inherit;
}
.form-grid .form-input input[type="text"],
.form-grid .form-input input[type="email"],
.form-grid .form-input input[type="url"],
.form-grid .form-input input[type="tel"]{
  border: var(--border);
  padding: 0.5em 1em;
  border-radius: 5px;
  min-height: 3em;
}
.form-grid .form-input textarea{
  border: var(--border);
  padding: 1em;
  border-radius: 5px;
  min-height: 8rem;
}
.form-grid .form-input select{
  border: var(--border);
  padding: 0.8em 1em;
  border-radius: 5px;
  background-color: #fff;
  color: var(--fontColor);
}
.form-grid .form-input fieldset{ 
  padding: 0;
  border: 0;
}
.form-grid .form-input fieldset legend{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.form-grid .addressBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 8em;
  padding: 0.875em 0.5em;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #FFF;
  background: var(--btnColor);
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.form-grid #contact_zip-helper {
  font-size: .875rem;
  width: 100%;
}
.privacyText {
  background: var(--bg-gray);
  margin-top: 2em;
  padding: 2em;
  border-radius: 10px;
}
.privacyText .p__lead{
  line-height: 1.8;
}
.privacyCheck {
  margin-top: 1.5em;
}
.privacyCheck [role="group"]{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.privacyCheck [role="group"] label{
  background: #fff;
  padding: 1em 1.5em;
  border-radius: 5px;
  border: var(--border);
  font-weight: 600;
  font-size: .875rem;
  transition: all 0.3s ease;
}
.privacyCheck [role="group"] label input[type="checkbox"]{
  position: relative;
  top: 1px;
}
.privacyCheck .errMsg {
  color: var(--color-red);
  font-weight: 600;
  font-size: .875em;
  margin-top: 1em;
  text-align: center;
}
.contact__btnArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap : 1em;
  margin-top: 2.5em;
}
.contact__btnArea button{
  padding: 1.5em 2em;
  border-radius: 50px;
  color: #FFF;
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}
.contact__btnArea button.confirm{
  max-width: 280px;
  width: 100%;
  background-color: var(--btnColor2);
}
.contact__btnArea button.back{
  max-width: 220px;
  width: 100%;
  background-color: var(--btnColor2);
}
.contact__btnArea button.post{
  margin: 0;
  max-width: 300px;
  width: 100%;
  background-color: var(--btnColor);
}

@media (min-width:768px){ /* 768px以上全て */
  form[id^="8bit-form-"] .form-grid .warp.side {
    gap: 2em;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    padding: 3em 0;
  }
  .form-grid .form-input .line {
    gap: 0.5em 1em;
  }
  .form-grid .form-input .line .errMsg{
    margin-top: 0.5em;
  }
  .form-grid .form-input .line.min {
    gap: 0.5em;
  }
  .form-grid .form-input #contact_name,
  .form-grid .form-input #contact_name_kana{
    width: 30em;
  }
  .form-grid .form-input #contact_company,
  .form-grid .form-input #contact_company_kana,
  .form-grid .form-input #contact_belong {
    width: calc(100% - 25em);
  }
  .form-grid .form-input #contact_address01,
  .form-grid .form-input #contact_address02,
  .form-grid .form-input #contact_city,
  .form-grid .form-input #contact_state{
    width: calc(100% - 25em);
  }
  .form-grid .form-input #contact_postal_code{
    width: 20%;
  }
  .form-grid .form-input #contact_country{
    width: 30%;
  }
  .form-grid .form-input #contact_email{ 
    width: 25em;
  }
  .form-grid .form-input #contact_url{ 
    width: 35em;
  }
  .form-grid .addressBtn:hover {
    background: var(--btnColor-crr);
  }
  .privacyCheck [role="group"] label:hover{
    opacity: 0.7;
  }
  .contact__btnArea button.confirm:hover,
  .contact__btnArea button.back:hover{
    background-color: var(--btnColor2-crr);
  }
  .contact__btnArea button.post:hover {
    background-color: var(--btnColor-crr);
  }
}
@media screen and (max-width: 767px) { /* for SP */
  .form-grid {
    padding: 2em 0.5em;
  }
  .form-grid .form-label {
    margin-bottom: 1em;
  }
  .form-grid .form-label label {
    font-size: 1.125rem;
  }
  .form-grid .form-input .line {
    gap: 0.5em;
  }
  .form-grid .form-input .line + .line {
    margin-top: 1.5em;
  }
  .form-grid .form-input .line label{
    width: 100%;
  }
  .form-grid .form-input #contact_name,
  .form-grid .form-input #contact_name_kana,
  .form-grid .form-input #contact_company,
  .form-grid .form-input #contact_company_kana,
  .form-grid .form-input #contact_belong,
  .form-grid .form-input #contact_address01,
  .form-grid .form-input #contact_address02,
  .form-grid .form-input #contact_address01,
  .form-grid .form-input #contact_address02,
  .form-grid .form-input #contact_city,
  .form-grid .form-input #contact_postal_code,
  .form-grid .form-input #contact_country,
  .form-grid .form-input #contact_state,
  .form-grid .form-input #contact_email,
  .form-grid .form-input #contact_url{
    width: 100%;
  }
  .form-grid .form-input select[name="contact_prefectures"] {
    width: 100%;
  }
  .privacyText { 
    padding: 1.5em;
    font-size: .875rem;
  }
  .privacyCheck {
    margin-top: 1em;
  }
  .contact__btnArea {
    margin-top: 2em;
  }
  .contact__btnArea button.post {
    order: 1;
  }
  .contact__btnArea button.back {
    order: 2;
  }
}

/*確認
---------------------------*/
.confirmWrap .privacyText ,
.confirmWrap .privacyCheck{
  display: none;
}

/*完了
---------------------------*/
.completeWrap h2 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center;
}
.completeWrap .completeLead {
  text-align: center;
}
.completeWrap .contact__btnArea a{
  padding: 1.5em 2em;
  border-radius: 50px;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 300px;
  width: 100%;
  background-color: var(--btnColor);
}

@media (min-width:768px){ /* 768px以上全て */
  .completeWrap .contact__btnArea a:hover{
    background-color: var(--btnColor-crr);
  }
}