@charset "UTF-8";
#registration-steps {
  width: 90%;
  max-width: 900px;
  margin: 90px auto 80px; }

.step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px; }
  .step .number-icon {
    background-color: #39b282;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.3rem; }
    .step .number-icon .number {
      width: 2.2rem;
      height: 2.2rem;
      color: #ffffff;
      font-size: 1.8rem;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center; }
  .step .step-text {
    font-size: 1.8rem; }

.arrow-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000000;
  margin: 5.4rem auto; }

.form-input {
  width: 100%;
  max-width: 450px;
  height: 45px;
  padding: 0 15px;
  margin: 20px auto;
  border: 1px solid #bfbfbf;
  font-size: 1.6rem;
  display: block; }
  .form-input::placeholder {
    color: #a0a0a0; }

.form-wrap .form-group-input {
  white-space: pre-line;
  word-break: break-word; }

.terms-link {
  width: 100%;
  max-width: 450px;
  margin: 20px auto; }
  .terms-link a {
    text-decoration: underline; }

.btn-primary {
  width: 100%;
  max-width: 450px;
  height: 65px;
  margin: 30px auto; }

.btn-next {
  width: 100%;
  max-width: 250px;
  height: 65px;
  margin: 30px auto; }

.help-section {
  margin: 80px auto 40px; }
  .help-section .help-title {
    font-size: 2rem;
    font-weight: bold;
    color: #39b282;
    text-align: center;
    margin-bottom: 30px; }
  .help-section .help-list {
    border-top: 1px solid #cdece0;
    border-bottom: 1px solid #cdece0;
    padding: 30px 0; }
    .help-section .help-list li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: 15px;
      font-size: 1.6rem;
      line-height: 1.6;
      color: #39B282; }
      .help-section .help-list li:before {
        content: "・";
        position: absolute;
        left: 0;
        top: 0; }
      .help-section .help-list li:last-child {
        margin-bottom: 0; }

.form-group .error-wrap .balloon {
  margin: 0 auto;
  width: 100%;
  max-width: 450px;
  padding: 8px;
  background: #FFF5F5;
  border: solid 1px #FF0000;
  box-sizing: border-box; }
  .form-group .error-wrap .balloon p {
    font-size: 1.4rem;
    color: #FF0000;
    text-align: left; }
.form-group .unalterable {
  min-height: auto; }

@media screen and (max-width: 768px) {
  #registration-steps {
    margin: 50px auto 80px; }

  .btn-primary {
    font-size: 1.4rem; }

  .help-section {
    margin: 60px auto 30px; } }