/* フォトフレーム描画オブジェクト用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: 0vw;
        left: 0;
        width: 100vw;
        height: auto;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }

    .img2 {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 75vw;
        height: auto;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
       /* animation: pow 1s infinite;*/
    }
    .img3 {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 50vw;
        height: auto;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
       /*animation: pow 1s infinite;*/
    }

    .imgC {
        position: fixed;
        width: 40vw;
        left: 0px;
        top: 0px;
        z-index: 100;
    }

    .imgC2 {
        position: fixed;
        width: 40vw;
        left: 0px;
        top: 0px;
        z-index: 101;
    }

    .imgC3 {
        position: fixed;
        width: 40vw;
        left: 0px;
        top: 0px;
        z-index: 202;
    }

    .stamp1 {
        position: fixed;
        margin: 0;
        height: 60vh;
        left:5vw;
        top:30vh;
        width: auto;
        z-index: 51;
       /* transform: translate(0vw,10%) scale(1);*/
    }

    .stamp2 {
        position: fixed;
        bottom: 45vh;
        right: 5vw;
        width: 25vw;
        height: auto;
        z-index: 201;
        transform: scale(0);
    }

    .stamp3 {
        position: fixed;
        bottom: 25vh;
        left: 18vw;
        width: 25vw;
        height: auto;
        z-index: 201;
        transform: scale(0);
    }
}

@media (orientation: landscape) {

    /* 横向き */
    .img1 {
        position: fixed;
        bottom: 0;
        left:0;
        height: auto;
        width: 100vw;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }

    .img2 {
        position: fixed;
        top: 0;
        height: auto;
        width: 100vw;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
       /* animation: pow 1s infinite;*/
    }
    .img3 {
        position: fixed;
        top: 6.5vw;
        left: 1.3vw;
    
        height: auto;
        width: auto;
        max-height: 78dvh;
        max-width: 24vw;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
       /*animation: pow 1s infinite;*/
    }
    .img4 {
        position: fixed;
        bottom: 0;
        right: 5vw;
        width: auto;
        height: auto;
        max-height:78dvh ;
        max-width: 20.5vw;
        z-index: 300;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
       /*animation: pow 1s infinite;*/
    }

    .imgC {
        position: fixed;
        height: 100vh;
        width: auto;
        left: 0px;
        top: 0px;
        z-index: 100;
    }

    .imgC2 {
        position: fixed;
        width: 40vh;
        left: 0px;
        top: 0px;
        z-index: 101;
    }

    .imgC3 {
        position: fixed;
        width: 40vh;
        left: 0px;
        top: 0px;
        z-index: 202;
    }

    .stamp1 {
        position: fixed;
        margin: 0;
        right:10vw;
        top:6vh;
        height: 80vh;
        width: auto;
        z-index: 51;
        /*transform: translate(65vw,0%)scale(1);*/
    }

    .stamp2 {
        position: fixed;
        bottom: 10vh;
        right: 30vw;
        width: 25vh;
        height: auto;
        z-index: 201;
        transform: scale(0);
    }

    .stamp3 {
        position: fixed;
        bottom: 25vh;
        left: 18vw;
        width: 25vh;
        height: auto;
        z-index: 201;
        transform: scale(0);
    }
}
@keyframes dash {
    from { background-position: 0 0, -20px 0, 100% -20px, 0 100%; }
to { background-position: 0 -20px, 0 0, 100% 0, -20px 100%; }
}

@keyframes pow {

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

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

/* 描画UI 1000～1499 */

.canDelete {
    background-image: repeating-linear-gradient(0deg, rgb(213,228,223), rgb(213,228,223) 10px, transparent 10px, transparent 20px,rgb(213,228,223) 20px), 
    repeating-linear-gradient(90deg,rgb(213,228,223), rgb(213,228,223) 10px, transparent 10px, transparent 20px,rgb(213,228,223) 20px), 
    repeating-linear-gradient(180deg,rgb(213,228,223), rgb(213,228,223) 10px, transparent 10px, transparent 20px,rgb(213,228,223) 20px), 
    repeating-linear-gradient(270deg, rgb(213,228,223), rgb(213,228,223) 10px, transparent 10px, transparent 20px, rgb(213,228,223) 20px);
    background-size: 3px calc(100% + 20px), calc(100% + 20px) 3px, 3px calc(100% + 20px) , calc(100% + 20px) 3px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    animation: dash 1s infinite linear; 
}

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

    .imgS2 {
        position: fixed;
        bottom: 4vw;
        right: 4vw;
        height: auto;
        width: 25vw;
        z-index: 1001;
    }

    .stampBs {
        position: fixed;
        bottom: 33%;
        left: 15px;
        height: auto;
        width: 65px;
        z-index: 1001;
    }

    .stampB1 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }

    .stampB2 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }

    .stampB3 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }
}

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

    .imgS2 {
        position: fixed;
        bottom: 4vw;
        right: 4vw;
        height: auto;
        width: 25vh;
        z-index: 1001;
    }

    .stampBs {
        position: fixed;
        bottom: 10%;
        left: 15px;
        height: auto;
        width: 65px;
        z-index: 1001;
    }

    .stampB1 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }

    .stampB2 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }

    .stampB3 {
        width: 75%;
        transform: scale(0);
        animation: pop 0.5s forwards;
    }
}

/* アニメーション */
.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);
    }
}