@charset "UTF-8";


#form input[type="number"], 
#form input[type="text"] {
    transition: border .25s ease;
}

#form input[type="text"] + label {
    color: var(--text-color);
    font-size: .875rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 1rem;
    transform: translateY(-50%);
    transition: .25s ease;
}

#form input[type="number"]:focus {
    border: 0;
}

#form input[type="text"]:focus {
    border-bottom-color: var(--main-color);
    outline: none;
}

/* 入力中 or 入力済み */
#form input[type="text"]:focus + label,
#form input[type="text"]:not(:placeholder-shown) + label {
    color: var(--main-color);
    font-size: .75rem;
    font-weight: bold;
    top: -.5rem;
}