@charset "UTF-8";

div:has(input[type="checkbox"]:checked) + .save-content {
    display: flex !important;
}

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

form input[type="text"] + label {
    color: var(--gray);
    font-size: 1rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: .5rem;
    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;
    top: -.5rem;
}

form select + label {
    font-size: .875rem;
    left: 0rem;
    position: absolute;
    top: -1.75rem;
}

form button[type="submit"] {
    cursor: pointer;
}

/* スライダー全体のバー（背景） */
.noUi-base {
    background: var(--gray);   /* 背景色 */
    border-radius: .25rem; /* 角丸も一緒に調整 */
    height: .5rem;       /* ここで太さを調整 */
}

/* 選択範囲のバー */
.noUi-connect {
    background: var(--main-color);
    border-radius: .25rem; /* 角丸も一緒に調整 */
}

.noUi-handle:before,
.noUi-handle:after {
    content: none !important;
}

.noUi-horizontal {
    height: .5rem;
}

/* つまみ */
.noUi-horizontal .noUi-handle {
    background: #ffffff;  /* 白色 */
    border: 1px solid var(--main-color); /* 枠線 */
    border-radius: 50%;   /* これで完全な丸 */
    cursor: pointer;
    height: 1.5rem;         /* つまみの高さ */
    width: 1.5rem;          /* つまみの幅 */
    top: -.5rem;            /* トラック中央に合わせる */
}


.noUi-horizontal .noUi-tooltip {
    bottom: -1.75rem;
}

/* 値を表示する吹き出し */
.noUi-tooltip {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: .25rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: bold;
    padding: .25rem .5rem;
}

.small-input {
    text-align: right;
    width: 4rem;
}