.input {
    margin: 1em 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.input.error > input {
    background: #FE9DAE;
    color: #5E2E36
}

.input > .error-message {
    margin-top: .5em;
    margin-left: calc(20% + 1.2em);
    width: 75%;
    color: #5E2E36;
    font-size: .8em;
}

.input > fieldset {
    flex: 1;
    display: flex;
    align-items: center;
}

.input > fieldset > legend {
    width: 20%;
    font-weight: bold;
}

.input > fieldset > label  {
    margin-left: 20%;
    padding-left: 1em;
    line-height: 1.2em;
}

.input > label {
    box-sizing: border-box;
    text-align: right;
    width: 20%;
    font-weight: bold;
}

.input > input,
.input > select {
    padding: 0.2em;
    font-size: 1em;
    box-sizing: border-box;
    min-width: 15em;
    margin-left: 1em;
    border-width: 0 0 1px 0;
    border-color: #222;
    border-style: solid;
}

.input.checkbox > input {
    min-width: auto;
}

.input > select {
    margin-left: 0.8em;
    min-width: 5em;
}

.submit {
    margin-left: 20%;
}

.submit > input {
    margin-left: .8em;
    font-size: 1em;
    padding: 0.2em 1em;
    cursor: pointer;
}

.input__notice {
    font-size: 0.8em;
}

@media (max-width: 600px) {
    .input {
        display: block;
    }

    .input > label {
        width: auto;
        text-align: left;
        display: block;
    }

    .input > input {
        width: 100%;
    }

    .input > input,
    .input > select,
    .input .error-message,
    .submit {
        margin-left: 0;
    }
}