#id_search {
    transition: border .25s ease;
}

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

#id_search:focus {
    border-bottom-color: var(--main-color);
    outline: none;
}

/* 入力中 or 入力済み */
#id_search:focus + label,
#id_search:not(:placeholder-shown) + label {
    color: var(--main-color);
    font-size: .75rem;
    font-weight: bold;
    top: -.5rem;
}