/* Scss Document */
.caution {
  margin: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.caution:before {
  content: "";
  margin-right: 0.5em;
  background: url(../img/regsiter/icon_caution.svg) no-repeat center center;
  background-size: 100% auto;
}

.terms,
.privacy {
  border: solid 1px #E2E2E2;
  overflow: auto;
  background: #fff;
}
.terms h4,
.privacy h4 {
  color: #163b70;
  margin: 1em auto;
}
.terms h4:first-child,
.privacy h4:first-child {
  margin-top: 0;
}
.terms-wrapper,
.privacy-wrapper {
  margin: 2em auto;
  background: #f5f5f5;
}
.terms-wrapper h3,
.privacy-wrapper h3 {
  margin: 0 0 1em;
  color: #163b70;
  text-align: center;
  line-height: 1;
}
.terms-wrapper .agreement,
.privacy-wrapper .agreement {
  margin-top: 1em;
  padding: 0.5em;
  border: solid 1px #163b70;
  background: #fff;
  text-align: center;
  font-weight: bold;
  color: #163b70;
}
.terms-wrapper .agreement a,
.privacy-wrapper .agreement a {
  color: #163b70;
}

.backgrond-input {
  margin-bottom: 4px;
  background: #f5f5f5;
}
.backgrond-input .inputarea {
  background: #fff !important;
}

.smartphone-block {
  margin: 1.5em auto;
  border: solid 2px #e51c24;
}
.smartphone-block h4 {
  margin-bottom: 0.5em;
  font-size: 1.8rem;
  color: #e51c24;
}

@media only screen and (min-width: 601px) {
  .caution:before {
    width: 24px;
    height: 24px;
  }

  .terms,
.privacy {
    padding: 30px;
    height: 240px;
  }
  .terms h4,
.privacy h4 {
    font-size: 1.8rem;
  }
  .terms-wrapper,
.privacy-wrapper {
    padding: 30px;
  }
  .terms-wrapper h3,
.privacy-wrapper h3 {
    font-size: 1.8rem;
  }
  .terms-wrapper .agreement,
.privacy-wrapper .agreement {
    font-size: 1.8rem;
  }

  .backgrond-input {
    padding: 0 30px;
    background: #f5f5f5;
  }
  .smartphone-block {
    padding: 30px;
  }
}
@media only screen and (max-width: 600px) {
  .caution:before {
    margin-top: -0.75em;
    width: 12vw;
    height: 12vw;
  }

  .terms,
.privacy {
    padding: 3vw;
    height: 240px;
    font-size: 1.4rem;
  }
  .terms h4,
.privacy h4 {
    font-size: 1.6rem;
  }
  .terms-wrapper,
.privacy-wrapper {
    padding: 4vw;
  }
  .terms-wrapper h3,
.privacy-wrapper h3 {
    font-size: 1.6rem;
  }
  .terms-wrapper .agreement,
.privacy-wrapper .agreement {
    font-size: 1.6rem;
  }

  .backgrond-input {
    padding: 0 3vw;
    background: #f5f5f5;
  }
  .smartphone-block {
    padding: 3vw;
  }
}