body {
    background-color: rgba(255, 239, 209,1);
}

.hidden {
    display: none;
}


.fixedarea_checkbox_field > .fixedarea_checkbox {
}
@media screen {
    .fixedarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea {
        display: none;
        position: fixed;
        top: 10%;
        left: 10%;
        bottom: 10%;
        right: 10%;
        margin: 0;
        /*width: 80%;
        height: 80%;*/
        background-color: #ccecf4;
        border: solid 20px #7fcfe2;
        border-radius: 1em;
        overflow: scroll;
        z-index: 2;
    }

    .fixedarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_back {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        bottom: 0%;
        right: 0%;
        margin: 0px;
        padding: 0px;
        /*width: 100%;
        height: 100%;*/
        opacity: 0.6;
        background-color: #000000;
        z-index: 1;
    }

    .fixedarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_cancel {
        display: none;
        position: fixed;
        top: 10%;
        /*left: 85%;
        bottom: 85%;*/
        right: 10%;
        margin: -20px -20px 0px 0px;
        padding: 0px;
        width: 40px;
        height: 40px;
        background-image: url("img_fingering/cancel_icon.png");
        background-size: cover;
        z-index: 3;
    }


    /*.fixedarea_checkbox_field > .fixedarea_checkbox:checked {
        position: fixed;
        top: 10%;
        right: 10%;
        z-index: 2;
    }*/

    .fixedarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea {
        display: initial;
        animation: fixedarea_anime 0.25s ease 0s 1 normal;
    }

    .fixedarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea_back,
    .fixedarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea_cancel {
        display: initial;
    }



    .flexarea_checkbox_field > .conform3_checkbox {
        display: none;
    }
    .flexarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_center {
        display: none;
        pointer-events: none;
        position: fixed;
        align-content: center;
        vertical-align: middle;
        text-align: center;
        top: 0%;
        left: 0%;
        bottom: 0%;
        right: 0%;
        margin: 0px;
        padding: 0px;
        /*width: 100%;
        height: 100%;*/
        background-color: rgba(0,0,0,0);
        z-index: 1;
    }
        .flexarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_center > .fixedarea {
            display: inline-block;
            pointer-events: auto;
            margin: auto;
            min-width: 10%;
            min-height: 10%;
            padding: 20px 40px;
            /*width: 80%
        height: 80%;*/
            background-color: #ccecf4;
            border: solid 20px #7fcfe2;
            border-radius: 1em;
            /*overflow: scroll;*/
            z-index: 2;
        }
            .flexarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_center > .fixedarea > .fixedarea_cancel {
                pointer-events: auto;
                /*position: absolute;
                margin: -60px auto auto 173px;*/
                padding: 0px;
                width: 40px;
                height: 40px;
                background-image: url("img_fingering/cancel_icon.png");
                background-size: cover;
                z-index: 3;
                float: right;
                margin-right: -79px;
                margin-top: -58px;
            }
    .flexarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_back {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        bottom: 0%;
        right: 0%;
        margin: 0px;
        padding: 0px;
        /*width: 100%;
        height: 100%;*/
            opacity: 0.6;
            background-color: #000000;
            z-index: 1;
        }
    .flexarea_checkbox_field > .fixedarea_checkbox ~ .fixedarea_cancel {
        display: none;
        position: fixed;
        top: 10%;
        /*left: 85%;
        bottom: 85%;*/
        right: 10%;
        margin: -20px -20px 0px 0px;
        padding: 0px;
        width: 40px;
        height: 40px;
        background-image: url("img_fingering/cancel_icon.png");
        background-size: cover;
        z-index: 3;
    }
    /*.flexarea_checkbox_field > .fixedarea_checkbox:checked {
        position: fixed;
        top: 10%;
        right: 10%;
        z-index: 2;
    }*/
    .flexarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea {
        display: initial;
        animation: fixedarea_anime 0.25s ease 0s 1 normal;
    }
    .flexarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea_center,
    .flexarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea_back,
    .flexarea_checkbox_field > .fixedarea_checkbox:checked ~ .fixedarea_cancel {
        display: initial;
    }

    @keyframes fixedarea_anime {
        0% {
            top: 50%;
            left: 50%;
            bottom: 50%;
            right: 50%;
        }

        100% {
            top: 10%;
            left: 10%;
            bottom: 10%;
            right: 10%;
        }
    }
}

input.basetag,
input.itemtag {
    display: block;
}
    input.itemtag.hiden_checkbox {
        width: 0px;
        pointer-events: none;
    }
    input.basetag::after,
    input.itemtag::after {
        content: attr(value);
        margin-left: 1em;
        word-break: keep-all;
        white-space: nowrap;
    }
    input.itemtag.hiden_checkbox::after {
        margin-left: 0em;
    }

    #howto_check ~ * {
        display: none;
    }

    #howto_check:checked ~ * {
        display: inherit;
    }
.opencheckinput ~ * {
    display: none;
}

.opencheckinput:checked ~ * {
    display: inherit;
}

.show_closer_checkbox .show_closer_check ~ *,
#show_note_checkbox_table_check ~ * {
    display: none;
}
#show_note_checkbox_table_check ~ *.show_in_show_note_checkbox {
    display: initial;
}


.show_closer_checkbox .show_closer_check:checked ~ *,
#show_note_checkbox_table_check:checked ~ * {
    display: inherit;
}

    progress.show {
        display: inline-block;
    }

    progress.hide {
        display: none;
    }


    table#fingering_editor {
        border-collapse: collapse;
        width: 100%;
    }

    tbody, tr, td, th {
        text-align: left;
        vertical-align: top;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
    }

        tr.dragging td, tr.dragging th {
            border-color: #66ff66;
            background-color: rgba(127,255,127,0.5);
        }

        tr.draged td, tr.draged th {
            border-color: #66ff66;
            background-color: rgba(255,127,127,0.5);
        }

    .tool_box {
        width: 24px;
    }

        .tool_box > input {
            width: 24px;
        }

    .written_pitch {
        /*width: 67px;*/
        width: 110px;
    }

        .written_pitch > .on_print {
            display: none;
        }
    /*.written_pitch > .abc_div {
        display: none;
    }*/

    .finger {
        width: 207px;
    }

    .savetool {
        width: 150px;
    }

    .edittags {
        width: 120px;
    }

    textarea {
        height: 3.5em;
    }

        textarea.notice_textarea {
            /*スマホブラウザ拡大縮小対策*/
            font-size: 20px;
            /*transform: scale(0.5);*/
        }

        textarea#fingering_caption, input#savename {
            /*スマホブラウザ拡大縮小対策*/
            font-size: 20px;
            /*transform: scale(0.5);*/
            height: auto;
            line-height: 1.5em;
        }


    .notice {
        margin: 0;
        padding: 0;
        min-width: 200pt;
    }

        .notice > textarea {
            width: 99%;
            height: 7em;
            line-height: 1.5em;
        }

        .notice > div {
            display: none;
        }

    caption > textarea {
        width: 80%;
        min-width: 200px;
        resize: none;
    }

/*トーストメッセージアニメーション*/
.toast_obj {
    opacity: 0.0;
    position: relative;
    animation-name: toast_anime;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.0, 0.0, 1.0, 1.0);
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    word-break: keep-all;
    white-space: nowrap;
}

    .toast_obj span {
        border: 3px double #000000;
        border-radius: 5px;
        position: relative;
        background-color: #ffcccc;
        animation-name: toast_anime_backprogress;
        animation-duration: 3s;
        animation-timing-function: cubic-bezier(0.0, 0.0, 1.0, 1.0);
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        word-break: keep-all;
        white-space: nowrap;
    }

@keyframes toast_anime {
    0% {
        opacity: 0.0;
    }

    10% {
        opacity: 1.0;
    }

    90% {
        opacity: 1.0;
    }

    100% {
        opacity: 0.0;
    }
}

@keyframes toast_anime_backprogress {
    0% {
        background: #ffffff;
    }

    33% {
        background: #ccffcc;
    }

    66% {
        background: #ffcccc;
    }

    100% {
        background: #cccccc;
    }
}


.contents_end *,
.contents_end ~ * {
    position: relative;
    z-index: 0;
}