.contact:first-child {
  margin-bottom: 30px;
}

form>p {
  width: 100%;
  margin-bottom: 2%;
  position: relative;
}

form>p label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 2.5rem;
  margin-left: 3.5em;
}

form>p label::before {
  position: absolute;
  content: "任意";
  color: var(--main-text-color);
  background-color: var(--body-bg-color);
  left: 0;
  padding: 2px 4px;
}

form>p label.required::before {
  content: "必須";
  color: var(--body-bg-color);
  background-color: var(--accent-color2);
}

form>p label>span {
  flex-basis: 65%;
}

form>p label>span>input,
form>p label>span>textarea {
  width: 100%;
}

form>p input:not(form>p input[type="file"]),
form>p textarea {
  border: 1px solid var(--main-text-color);
  padding: 6px;
}

form>p input[type="submit"] {
  text-align: center;
  width: 30%;
  padding-top: 2% !important;
  padding-bottom: 2% !important;
  margin: 0 auto;
  display: block;
  color: var(--body-bg-color);
  background-color: var(--accent-color2);
  border: 1px solid var(--accent-color2) !important;
  transition: all .3s ease;
  font-size: 2rem;
}

form>p input[type="submit"]:hover {
  color: var(--accent-color2);
  background-color: var(--body-bg-color);
  transition: all .3s ease;
}







/* Tablet */
@media screen and (max-width:960px) {

  form>p label {
    font-size: 1rem;
  }


  form>p input[type="submit"] {
    font-size: .8rem;
  }

  form>p input[type="submit"]:hover {
    color: var(--accent-color2);
    background-color: var(--body-bg-color);
    transition: all .3s ease;
  }
}









/* Mobile */
@media screen and (max-width:428px) {

  form>p label {
    flex-direction: column;
    font-size: 0.8rem;
  }

  form>p label::before {
    padding: 1px 2px;
  }

  form>p label>span {
    flex-basis: 100%;
  }


  form>p input:not(form>p input[type="file"]),
  form>p textarea {
    border: 1px solid var(--main-text-color);
    padding: 3px;
  }

  form>p input[type="submit"] {
    font-size: 0.7rem;
  }
}