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

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

/* 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: 48px;
  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) {
  .contents-footer {
    margin-top: 28px;
  }
}
@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;
}

/* Page header */
.page_header {
  margin-bottom: 32px;
}
.page_header .contents-text {
  text-align: center;
}

/* 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;
  }
}

.login_form .form-text {
  margin-top: 10px;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .login_form .form-text {
    margin-top: 4px;
    font-size: 1rem;
  }
}
.login_form .form-text .text-button01 {
  display: inline-block;
}

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

@media screen and (max-width: 767px) {
  .form-label {
    display: none;
  }
}

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

/* 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;
}

.btn__icon {
  vertical-align: middle;
}

.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;
}