/* フォトフレーム描画オブジェクト用CSS */
/* 描画オブジェクトや追加機能で使うものを記載 */

.imageToRender {
    margin: 0 auto;
    margin-top: 0%;
    padding: auto;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}

.imageToRenderContainer {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

/* 描画要素　1～999 */
@media (orientation: portrait) {

    /* 縦向き */
    .img1 {
        position: fixed;
        top: 0;
        height: 100dvh;
        width: auto;
        z-index: 9;
        left: 50%;
        transform: translateX(-50%);
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }
}

@keyframes pow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.8, 0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

/* 描画UI 1000～1499 */

.canDelete {
    outline-style: dashed;
    outline-color: rgb(126, 246, 255);
    outline-width: 3px;
    outline-offset: -3px;
}

@media (orientation: portrait) {
    .deleteBtn {
        position: absolute;
        width: 10vw;
        height: 10vw;
        z-index: 1499;
        display: none;
    }
}

@media (orientation: landscape) {
    .deleteBtn {
        position: absolute;
        width: 10vw;
        height: 10vw;
        z-index: 1499;
        display: none;
    }
}

/* アニメーション */
.fadeAction {
    animation: fadeinout 4s infinite;
}

@keyframes fadeinout {

    0%,
    100% {
        opacity: 0.9;
    }

    15%,
    85% {
        opacity: 0.9;
    }

    40%,
    60% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }
}

@keyframes slide1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(200%, -100%) rotate(90deg);
    }
}

@keyframes slide2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    30%,
    70% {
        transform: translate(-200%, -100%) rotate(-90deg);
    }
}

@keyframes slide3 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    30%,
    70% {
        transform: translate(200%, 100%) rotate(-90deg);
    }
}

@keyframes slide4 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    30%,
    70% {
        transform: translate(-200%, 100%) rotate(90deg);
    }
}

@keyframes slideC {

    0%,
    100% {
        transform: translate(0, 0);
    }

    20%,
    80% {
        transform: translate(0, -150%) rotate(135deg);
    }
}


@keyframes pop {

    0% {
        transform: scale(0);
    }

    85% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes spin {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}