@charset "UTF-8";
.main {
    margin-top: 100px;
}
#formWrap {
    width: 700px;
    margin: 0 auto;
    color: #555;
    line-height: 120%;
    font-size: 13px;
}
#form-container {
    border: 1px solid #DDD;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    background-color: #EEE;
}
.input-area {
    margin-bottom: 1.5rem;
}
.input-area:last-child {
    margin-bottom: 0.5rem;
}
input:not([type="submit"]):not([type="reset"]), textarea {
    border: 1px solid #DDD;
    width: calc(100% - 0.4rem);
    height: 2rem;
    border-radius: 0.2rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
textarea {
    height: 12rem;
}
input::placeholder {
color: #BBB;
}
input[type="submit"] {
    padding: 0.7rem 2.5rem;
    border-radius: 1.3rem;
    border: none;
    background: linear-gradient(to bottom, #666, #444);
    color: white;
    margin: 0 auto;
    display: block;
}
.red {
    color: red;
}
.green {
    color: green;
}
.memo {
    margin-top: 20px;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
        
@media screen and (max-width:700px) {
#formWrap {
    width: 95%;
    margin: 0 auto;
    min-width: 300px;
}
#form-container {
    padding: 1rem;
}
}