@charset "UTF-8";

/*

◆critical-style-contact-form.php内に記述（ここを編集したらそっちも編集）◆
:root {
  scroll-behavior: auto;
}

.contact-form-page .step-icon {
  display: flex;
  justify-content: center;
  gap: 0 140px;
  text-align: center;
  margin: 80px 0 110px 0;
}

.contact-form-page .step-icon li:nth-child(1) {
  --step-color: var(--sakrea-main-color);
  --step-text-weight: 700;
}
.contact-form-page .step-icon li:nth-child(2),
.contact-form-page .step-icon li:nth-child(3) {
  --step-color: var(--sakrea-accent-color);
  --step-line-color: var(--sakrea-accent-color);
  --step-text-weight: 400;
  position: relative;
}
.contact-form-page .step-icon li:nth-child(2)::before,
.contact-form-page .step-icon li:nth-child(3)::before {
  position: absolute;
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--step-line-color) 0 4px,
    transparent 4px 8px
  );
  top: 68px;
  left: -107px;
}

.contact-form-page .step-deco {
  color: var(--step-color);
  font-size: var(--font-size-S);
  font-family: var(--font-family-can);
}

.contact-form-page .step-order {
  display: grid;
  place-items: center;
  width: 80px;
  aspect-ratio: 1;
  color: var(--white-color);
  font-size: 1.5em;
  font-family: var(--font-family-can);
  background: var(--step-color);
  border-radius: 50%;
  margin: 0 0 15px 0;
}

.contact-form-page .step-text {
  color: var(--step-color);
  font-size: var(--font-size-S);
  font-weight: var(--step-text-weight);
} 

@media (max-width: 1023px) and (min-width: 769px) {
  .contact-form-page .step-icon {
    margin: 0 0 50px 0;
  }
}

@media screen and (max-width:768px) {
.contact-form-page .step-icon {
    gap: 0 50px;
    margin: 0 0 50px 0;
    order: 4;
  }
  .contact-form-page .step-deco {
    font-size: .75em;
  }
  .contact-form-page .step-order {
    width: 60px;
    font-size: 1.15em;
    margin: 0 0 10px 0;
  } 
  .contact-form-page .step-icon li:nth-child(2)::before,
  .contact-form-page .step-icon li:nth-child(3)::before {
    width: 22px;
    top: 62px;
    left: -35px;
  } 
}

*/

.contact-form-page .form-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0 85px;
  padding: 0 0 150px 0;
}

.contact-form-page .form-area .left {
  width: 290px;
}

.contact-form-page .form-area .left .title-icon {
  width: 115px;
  margin: 0 auto 15px auto;
}

.contact-form-page .form-area .left h2 {
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  margin: 0 0 7px 0;
}

.contact-form-page .form-area .left .form-attention {
  font-size: var(--font-size-S);
  font-weight: 300;
  text-align: center;
  margin: 0 0 65px 0;
}

.contact-form-page .form-area .left .form-attention span {
  color: var(--sakrea-red-color);
  font-weight: 700;
}

.contact-form-page .form-area .left .first-para {
  margin: 0 0 30px 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .contact-form-page .form-area {
    align-items: center;
    flex-direction: column;
    gap: 85px 0;
  }
  .contact-form-page .form-area .left {
    width: auto;
  }
  .contact-form-page .form-area .left .first-para {
    margin: 0;
  }
}

@media screen and (max-width:768px) {
  .contact-form-page > .inner {
    display: flex;
    flex-direction: column;
    margin: 0 auto 100px auto;
  }
  .contact-form-page .form-area {
    display: contents;
  }
  .contact-form-page .form-area .left {
    display: contents;
  }
  .contact-form-page .form-area .left .title-icon {
    order: 1;
  }
  .contact-form-page .form-area .left h2 {
    order: 2;
  }
  .contact-form-page .form-area .left .form-attention {
    order: 3;
    margin: 0 0 50px 0;
  }
  .contact-form-page .form-area .left .first-para {
    margin: 0;
    order: 5;
  }
  .contact-form-page .form-area .left .second-para {
    order: 6;
    margin: 0 0 25px 0;
  }
  .contact-form-page .form-area .right {
    order: 7;
  }
}