@charset "utf-8";
.message {
    transition: height 300ms ease-out 0s;
    background-color: transparent;
    color: var(--red);
    border: 1px solid;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
}

.message.hidden {
    height: 0;
    display: none;
}

.error-message {
    color: var(--red);
    font-size: 80%;
}


/* ★評価 */

.rate-form {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.rate-form input[type=radio] {
    display: none;
}

.rate-form label {
    position: relative;
    padding: 0 5px;
    color: #ccc;
    cursor: pointer;
    font-size: 35px;
}

.rate-form label:hover {
    color: #ffcc00;
}

.rate-form label:hover~label {
    color: #ffcc00;
}

.rate-form input[type=radio]:checked~label {
    color: #ffcc00;
}

.evaluation {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.evaluation input[type='radio'] {
    display: none;
}

.evaluation label {
    position: relative;
    padding: 0.1rem 0.1rem 0;
    color: gray;
    cursor: pointer;
    font-size: 3rem;
}

.evaluation label .text {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 0.5rem;
    color: gray;
}

.evaluation label:hover,
.evaluation label:hover~label,
.evaluation input[type='radio']:checked~label {
    color: #ffcc00;
}