/* フォトフレーム描画オブジェクト用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) {
.logo_photoframe{
    position: fixed;
    bottom: 2dvw;
    left: 8dvw;
    width: 25dvw;
    height: auto;
    z-index: 999;
}

    /* 縦向き */
    .characterbox {
        width: auto;
        height: 160vw;
    }
    .characterbox_09 {
        width: auto;
        height: 144vw;
    }
    .characterbox_08 {
        width: auto;
        height: 128vw;
    }
    .characterbox_11 {
        width: auto;
        height: 170vw;
    }

    .box1 {
        position: fixed;
        bottom: 40vw;
        left: -5vw;
        z-index: 201;
    }

    .box2 {
        position: fixed;
        bottom: 40vw;
        left: 25vw;
        z-index: 202;
    }

    .box3 {
        position: fixed;
        bottom: 40vw;
        right: 25vw;
        z-index: 203;
    }

    .box4 {
        position: fixed;
        bottom: 40vw;
        right: -5vw;
        z-index: 204;
    }

    .box5 {
        position: fixed;
        bottom: 0vw;
        left: -5vw;
        z-index: 205;
    }

    .box6 {
        position: fixed;
        bottom: 0vw;
        left: 25vw;
        z-index: 206;
    }

    .box7 {
        position: fixed;
        bottom: 0vw;
        right: 25vw;
        z-index: 207;
    }

    .box8 {
        position: fixed;
        bottom: 0vw;
        right: -5vw;
        z-index: 208;
    }
}

@media (orientation: landscape) {
    .logo_photoframe{
    position: fixed;
    bottom: 0.5dvw;
    left: 5dvw;
    width: 18dvw;
    height: auto;
    z-index: 999;
}


    /* 横向き */
    .characterbox {
        width: auto;
        height: 160vh;
    }
    .characterbox_09 {
        width: auto;
        height: 144vh;
    }
    .characterbox_08 {
        width: auto;
        height: 128vh;
    }
    .characterbox_11 {
        width: auto;
        height: 170vh;
    }

    .box1 {
        position: fixed;
        bottom: -25vh;
        left: 0vw;
        z-index: 201;
    }

    .box2 {
        position: fixed;
        bottom: -25vh;
        left: 10vw;
        z-index: 202;
    }

    .box3 {
        bottom: -25vh;
        left: 20vw;
        z-index: 203;
    }

    .box4 {
        position: fixed;
        bottom: -25vh;
        left: 30vw;
        z-index: 204;
    }

    .box5 {
        position: fixed;
        bottom: -25vh;
        right: 30vw;
        z-index: 205;
    }

    .box6 {
        position: fixed;
        bottom: -25vh;
        right: 20vw;
        z-index: 206;
    }

    .box7 {
        position: fixed;
        bottom: -25vh;
        right: 10vw;
        z-index: 207;
    }

    .box8 {
        position: fixed;
        bottom: -25vh;
        right: 0vw;
        z-index: 208;
    }
}

/* 描画UI 1000～1499 */

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

.iconGrayOut {
    filter: contrast(0.8);
    opacity: 0.5;
}

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

    .characterUIBtnContainer {
        width: 20vw;
        height: auto;
        position: relative;
        z-index: 2500;
        margin-top: -5vw;
    }
    .characterUIBtnContainer.tate {
    left: -8dvw;
    }

    .characterUIBtn {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .iconContainer {
        z-index: 2200;
        position: fixed;
        right: -88dvw;
        bottom: 5dvw;
        width: 100vw;
        height: 60vw;
        transition: right 0.5s ease-in-out;
    }

    .iconContainer.visible {
        right: 0;
    }

    .iconContainerBg {
        position: absolute;
        right: 0;
        bottom: 5dvw;
        width: 92dvw;
        height: auto;
    }

    .iconTop {
        display: flex;
        justify-content: right;
        padding-right: 3vw;
        margin-top: 1vw;
    }

    .iconBottom {
        display: flex;
        justify-content: right;
        padding-right: 3vw;
    }

    .iconSize {
        width: 20vw;
        height: 20vw;
        padding: 0.5vw;
    }

    .iconSize:active {
        transform: scale(0.9);
    }

    .iconAllPage {
        position: absolute;
        width: 200vw;
        height: 50vw;
        bottom: 0;
        clip-path: inset(-5vw 0 0 8vw);
    }

    .iconPageBtn {
        right: 2vw;
        width: 18vw;
        height: 7vw;
        bottom: 1.5vw;
        position: absolute;
        z-index: 2500;
        transition: right 0.4s ease-out;
    }

    .iconPageBtn img {
        width: 100%;
        height: 100%;
        animation: pop 5s infinite;
    }

    .iconPageBtn.back {
        right: 70vw;
    }

    .iconPageBtn:active {
        transform: scale(0.9);
    }

    @keyframes pop {
        0% {
            transform: translate(0px, 0px);
        }
        5% {
            transform: translate(2px, 0px);
        }
        10% {
            transform: translate(-2px, 0px);
        }
        15% {
            transform: translate(2px, 0px);
        }
        20% {
            transform: translate(-2px, 0px);
        }
        25% {
            transform: translate(2px, 0px);
        }
        30% {
            transform: translate(0px, 0px);
        }
    }

    .iconWord {
        position: absolute;
        left: 10vw;
        width: 56vw;
        height: 7.5vw;
        top: 1.5vw;
    }

    .iconWord img {
        width: 100%;
        height: 100%;
    }

    .iconPage1 {
        position: absolute;
        width: 100vw;
        left: 0vw;
        transition: left 0.5s ease;
    }

    .iconPage1.visible {
        left: -100vw;
    }

    .iconPage2 {
        position: relative;
        width: 100vw;
        right: -100vw;
        top: 0;
        transition: right 0.5s ease;
    }

    .iconPage2.visible {
        right: 0vw;
    }

    .iconPage2Btn img {
        width: 100%;
        height: 100%;
    }
}

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

    .characterUIBtnContainer {
        width: 15vw;
        height: auto;
        position: absolute;
        z-index: 2500;
        right: 0;
        top:-21dvw;
    }
    .characterUIBtnContainer.tate {
        top:-23.5dvw;
        
    }
    .characterUIBtn {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .iconContainer {
        z-index: 2200;
        position: fixed;
        right: 0;
        bottom: -15dvw;
        width: 100vw;
        height: auto;
        transition: bottom 0.5s ease-in-out;
    }

    .iconContainer.visible {
        bottom: 0;
    }

    .iconContainerBg {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 96vw;
        height: auto;
    }

    .iconTop {
        display: flex;
        justify-content: right;
        padding-right: 0;
    }

    .iconBottom {
        display: flex;
        justify-content: right;
        padding-right: 1vw;
    }

    .iconSize {
        width: 11vw;
        height: 11vw;
        padding: 0.2vw;
    }

    .iconSize:active {
        transform: scale(0.9);
    }

    .iconAllPage {
        position: absolute;
        width: 200vw;
        height: auto;
        bottom: 1dvw;
        clip-path: inset(-10vw 0 0 4vw);
    }

    .iconPageBtn {
        right: 1vw;
        width: 9vw;
        height: 3.5vw;
        bottom: 0.75vw;
        position: absolute;
        z-index: 2500;
        transition: right 0.4s ease-out;
    }

    .iconPageBtn img {
        width: 100%;
        height: 100%;
        animation: pop 5s infinite;
    }

    .iconPageBtn.back {
        right: 85vw;
    }

    .iconPageBtn:active {
        transform: scale(0.9);
    }

    @keyframes pop {
        0% {
            transform: translate(0px, 0px);
        }
        5% {
            transform: translate(2px, 0px);
        }
        10% {
            transform: translate(-2px, 0px);
        }
        15% {
            transform: translate(2px, 0px);
        }
        20% {
            transform: translate(-2px, 0px);
        }
        25% {
            transform: translate(2px, 0px);
        }
        30% {
            transform: translate(0px, 0px);
        }
    }

    .iconWord {
        position: absolute;
        left: 5vw;
        width: 37vw;
        height: 5vw;
        top: 1vw;
    }

    .iconWord img {
        width: 100%;
        height: 100%;
    }

    .iconPage1 {
        display: flex;
        justify-content: right;
        position: relative;
        width: 100vw;
        left: 0;
        transition: left 0.5s ease;
    }

    .iconPage1.visible {
        left: -100vw;
    }

    .iconPage2 {
        display: flex;
        justify-content: right;
        position: relative;
        width: 100vw;
        left: 100vw;
        top: -11.5vw;
        transition: left 0.5s ease;
    }

    .iconPage2.visible {
        left: 0;
    }
}

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

@keyframes fadeinout {

    0%,
    100% {
        opacity: 0.9;
    }

    15%,
    85% {
        opacity: 0.9;
    }

    40%,
    60% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }
}

.fade {
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

.fade.hidden {
    opacity: 0;
}