:root {
    --editor-color-01: #e2e1e1;
    --editor-color-02: #222;
    --editor-color-03: #f12982;
    --editor-color-04: #b0a090;
    --editor-color-05: #f9b1b0;
}

/* 説明文の改行 */
#actual-object-form .uk-text-muted {
    white-space: break-spaces;
}

/* 親カスタム */
#actual-object-form label[for="actual_object_parent_actual_object_id"]::before {
    content: "↓　こちらからスタッフを選択してください。";
    display: block;
    margin: 1em 0;
    padding: 1em 0.5em;
    border-radius: 0.25em;
    background-color: var(--editor-color-01);
}

/* チェックボックス */
#actual-object-form label.sig span:before {
    width: 2.2em;
}

/* ##### 擬似要素 ##### */
#actual-object-form div.uk-panel-box {
    position: relative;
}

#actual-object-form div.uk-panel-box::before {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    display: inline-block;
    display: none;
    counter-increment: number;
    padding: 0.2em 0.5em 0.2em 0.5em;
    font-size: 12px;
    color: white;
    line-height: 1.2;
    text-align: center;
    background: var(--editor-color-02);
    position: absolute;
    top: 0;
    left: 0;
}

#actual-object-form div.uk-panel-box:last-of-type:before {
    display: none;
}

/* 必須項目 */
#actual-object-form .uk-form-row .actual-object-label.required {
    font-weight: bold;
    color: var(--editor-color-02);
}

#actual-object-form .uk-form-row label.required:after {
    content: "※";
    margin-left: 1em;
    font-size: 1em;
    line-height: 0;
    position: absolute;
    top: 1.1em;
}

/* 着用アイテム１ */
#actual-object-form div.uk-panel-box:nth-of-type(n+7):nth-of-type(-n+13) {
    padding-top: 30px;
}

#actual-object-form div.uk-panel-box:nth-of-type(n+7):nth-of-type(-n+13)::before {
    content: "着用アイテム１";
    display: inline-block;
    background-color: var(--editor-color-03);
}

/* 着用アイテム２ */
#actual-object-form div.uk-panel-box:nth-of-type(n+14):nth-of-type(-n+0) {
    padding-top: 30px;
    background-color: var(--editor-color-01);
}

#actual-object-form div.uk-panel-box:nth-of-type(n+14):nth-of-type(-n+20)::before {
    content: "着用アイテム２";
    display: inline-block;
    background-color: var(--editor-color-05);
}

/* 着用アイテム３ */
#actual-object-form div.uk-panel-box:nth-of-type(n+21):nth-of-type(-n+27) {
    padding-top: 30px;
}

#actual-object-form div.uk-panel-box:nth-of-type(n+21):nth-of-type(-n+27)::before {
    content: "着用アイテム３";
    display: inline-block;
    background-color: var(--editor-color-03);
}

/* 着用アイテム４ */
#actual-object-form div.uk-panel-box:nth-of-type(n+28):nth-of-type(-n+34) {
    padding-top: 30px;
    background-color: var(--editor-color-01);
}

#actual-object-form div.uk-panel-box:nth-of-type(n+28):nth-of-type(-n+34)::before {
    content: "着用アイテム４";
    display: inline-block;
    background-color: var(--editor-color-05);
}

/* 着用アイテム５ */
#actual-object-form div.uk-panel-box:nth-of-type(n+35):nth-of-type(-n+41) {
    padding-top: 30px;
}

#actual-object-form div.uk-panel-box:nth-of-type(n+35):nth-of-type(-n+41)::before {
    content: "着用アイテム５";
    display: inline-block;
    background-color: var(--editor-color-03);
}

/* 着用アイテム６ */
#actual-object-form div.uk-panel-box:nth-of-type(n+42):nth-of-type(-n+48) {
    padding-top: 30px;
    background-color: var(--editor-color-01);
}

#actual-object-form div.uk-panel-box:nth-of-type(n+42):nth-of-type(-n+48)::before {
    content: "着用アイテム６";
    display: inline-block;
    background-color: var(--editor-color-05);
}

/* ボタン */
.uk-form-row .back-button,
.uk-form-row .submit-button {
    margin: 0 0.5em;
    padding: 0.5em 3em;
    font-weight: 500;
    font-size: 1.5em;
    letter-spacing: 0.6em;
}