@charset 'utf-8';

section {
  margin-bottom: 8rem;
}

main > div:nth-child(odd) {
  background-color: transparent;
  background-image: none;
}

form .split_border {
  position: relative;
  padding: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #dcdcdc;
}

form .split_border input {
  background-color: transparent;
}

form .split_border label:not(label.radio),
form .flex {
  display: flex;
  justify-content: start;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

form .split_border label.checkbox {
  flex-direction: row !important;
}

form label {
  margin: 0;
}

form .split_border p {
  width: 100%;
  line-height: 2rem;
  margin-right: 1rem;
  margin: 0;
  align-self: center;
  font-weight: bold;
}

form .split_border p.single {
  line-height: 3;
  text-align: left;
}

form .split_border p > span {
  display: inline-block;
  width: auto;
  margin-right: 1rem;
  text-align: left;
}

form .split_border p > span.annotation {
  position: absolute;
  right: 0;
  color: #e95c2f;
  font-size: 0.8rem;
}

form .address {
  padding-bottom: 0.1rem;
}

form .address #zip input {
  width: 5.5rem;
}

form .address #zip {
  margin-left: 0.5rem;
}

form .address #zip > span {
  display: inline-block;
  font-size: 0.8rem;
}

input:not(input[type="radio"], input[type="checkbox"], input.btn),
textarea {
  width: 98%;
  border: 1px solid #c5c5c5;
  border-radius: 2px;
  height: 2.5rem;
}

form textarea {
  height: 10rem;
}

form .split_border input[type="text"] {
  margin: 0.1rem;
  line-height: 2;
}

form .split_border input[type="text"],
form .split_border textarea {
  background-color: white;
  padding: 0.4em;
}

form .split_border input[type="radio"] {
  margin-right: 0.1rem;
}

form .split_border select {
  height: 2rem;
  border: 1px solid #c5c5c5;
  border-radius: 2px;
  background-color: white;
  -moz-appearance: listbox;
  -webkit-appearance: listbox;
}

form .split_border a {
  color: #007bff;
  text-decoration: underline;
}

.radio {
  display: block;
  margin-right: 2rem;
  line-height: 1.5;
}

input[type="submit"] {
  -webkit-appearance: none;
}

input[name="btn_back"] {
  background-color: #9e9e9e;
  border: 1px solid #9e9e9e;
}

input:not(.btn) {
  margin-left: 0.5rem;
}

form input[type="checkbox"] {
  margin-right: 0.5em;
  margin-top: 0.3em;
}

form .privacy {
  margin-top: 1rem;
}

form .privacy label {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.btn {
  text-align: center;
  width: 90%;
  padding: 1rem 0;
}

.btn-area {
  margin-top: 3rem;
  flex-direction: column;
  gap: 2rem;
}

.grecaptcha-badge {
  z-index: 1;
}

@media screen and (min-width: 1000px) {
  form .split_border {
    padding: 0.5rem;
  }

  form .split_border p > span {
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  input:not(input[type="radio"], input[type="checkbox"], input.btn),
  .address-wrapper,
  textarea {
    width: 60%;
  }

  form .split_border p > span.annotation {
    position: static;
  }

  form .split_border label:not(label.radio),
  form .flex {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  form .split_border p {
    width: 25%;
    flex-shrink: 0;
  }

  form .address p {
    display: inline-block;
    transform: translateY(-20%);
  }

  form .address div {
    display: inline-block;
    width: 70%;
  }

  form .address #zip {
    width: 100%;
    display: inline-block;
  }

  form .address div input {
    width: 100%;
  }

  form .split_border p.single {
    text-align: center;
  }

  form .privacy {
    width: 37rem;
    margin-left: auto;
    margin-right: auto;
  }

  .must::after {
    right: 1rem;
  }
  .btn {
    width: 23rem;
  }
  .btn-area {
    flex-direction: row;
  }
}

p.must {
  position: relative;
}

.must::after {
  content: "（必須）";
  position: absolute;
  color: red;
  font-size: 80%;
  top: 0;
  right: 1rem;
}