@charset "UTF-8";
/*--------------------------------------------------
Variable
--------------------------------------------------*/
/* Brand */
/* Text */
/* Line */
/* Body */
/* Semantic */
/*---------- フォント ----------*/
/*--------------------------------------------------
Mixin
--------------------------------------------------*/
/*---------- Responsive ----------*/
/*---------- fade animetion ----------*/
/*---------- icon ----------*/
/*---------- mixin ----------*/
/*--------------------------------------------------
Signup
--------------------------------------------------*/
/* Dialogflow */
df-messenger {
  display: none;
}

/* Layout */
.signup-area {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .signup-area {
    max-width: 100%;
  }
}

.contents-title-wrapper {
  margin-bottom: 28px;
}

.contents-footer {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .contents-footer {
    margin-top: 0;
    padding-inline: 20px;
  }
}
@media screen and (max-width: 767px) {
  .contents-footer .btn {
    width: 100%;
  }
}

/* Button */
.btn {
  width: 100%;
  max-width: 272px;
}
@media screen and (max-width: 767px) {
  .btn {
    max-width: 100%;
  }
}

.horizontal-btn-area .btn {
  width: 100%;
  max-width: 272px;
}
@media screen and (max-width: 767px) {
  .horizontal-btn-area .btn {
    max-width: 100%;
  }
}

/* Text */
.text_with_lines {
  gap: 8px;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  .text_with_lines {
    font-size: 1rem;
  }
}
.text_with_lines::before, .text_with_lines::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-bottom: 1px solid #d3d3d3;
}

/* Form */
.form-section {
  margin-bottom: 46px;
  background: #fff;
  -webkit-box-shadow: 0px 2px 18px 2px rgba(172, 88, 62, 0.15);
          box-shadow: 0px 2px 18px 2px rgba(172, 88, 62, 0.15);
  border-radius: 18px;
  border: none;
  padding: 83px 85px;
}
@media screen and (max-width: 767px) {
  .form-section {
    margin-bottom: 26px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 18px 2px rgba(172, 88, 62, 0.15);
            box-shadow: 0px 2px 18px 2px rgba(172, 88, 62, 0.15);
    border-radius: 8px;
    border: none;
    padding: 36px 32px;
  }
}
@media screen and (max-width: 767px) {
  .form-section .text_with_lines {
    margin: 28px auto 14px;
  }
}

.signup_form .form-check-label:not(:last-of-type) {
  margin-bottom: 6px;
}

@media screen and (max-width: 767px) {
  .form-element {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .form-element .form_item_username {
    grid-row: 2/3;
  }
}
@media screen and (max-width: 767px) {
  .form-element .form_item_email {
    grid-row: 1/2;
  }
}
@media screen and (max-width: 767px) {
  .form-element .form-label {
    display: none;
  }
}

.form_item {
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .form_item {
    width: 100%;
  }
}

.form-control {
  width: 100%;
  max-width: 360px;
}
@media screen and (max-width: 767px) {
  .form-control {
    max-width: 100%;
  }
}

.form-element__checkbox {
  margin: 24px auto 16px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .form-element__checkbox {
    margin: 24px auto 28px;
  }
}

.social-err {
  text-align: center;
  margin-top: 8px;
}

/* Social */
.socialaccount-section {
  border: none;
  text-align: center;
}
@media all and (min-width: 768px) {
  .socialaccount-section {
    background: #f6f2ec;
    border-radius: 18px;
    padding: 56px 0;
  }
}

.socialaccount-section-text {
  margin-bottom: 28px;
  font-weight: 700;
}

.link-area {
  margin-top: 48px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .link-area {
    margin-top: 28px;
    font-size: 1rem;
  }
}
.link-area .text-button01 {
  display: inline-block;
  margin-left: 1rem;
}