@charset "UTF-8";

main {
    margin: 10px 0;
    text-align: center;
    line-height: 150%;
}

main p {
    margin: 10px 0;
}

h2 {
    margin: 10px 0;
}

#wrap {
    width: 800px;
    text-align: center;
    margin: 0 auto;
}

.form-group {
    margin: 20px auto;
}

.form-group p {
    padding-bottom: 2px;
}

textarea {
    width: 700px;
}

button[type="submit"] {
  background: #f3efe6;
  color: #3b4a6b;
  border: 2px solid #c9b79c;
  padding: 10px 24px;
  font-size: 16px;
  font-family: "Georgia", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.1em;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #d8cbb5;
  transition: 0.2s;
}

button[type="submit"]:hover {
  transform: translateY(2px);
  box-shadow: 1px 1px 0 #d8cbb5;
  background: #efe6d6;
}

button[type="submit"]::before {
  content: "✉ ";
}

#red {
    color: red;
}

@media screen and (max-width: 768px) {
    #wrap{
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    textarea {
    width: 95%;
}
}