@media screen and (max-width: 3000px) {
    .bgImagine{
        width: 100%;
        aspect-ratio: 1500/1500;
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    .bgImagine .cross{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out; /* バックアップトランジション */
        z-index: 1;
    }
    
    /* アクティブスライド用 */
    .bgImagine .cross.active{
        opacity: 1;
        z-index: 2;
    }

    .bgImagine .cross .imagine{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .bgImagine .cross .texter {
        position: absolute;
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        text-orientation: upright;
        -webkit-text-orientation: upright;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        height: 80%;
        display: flex;
        align-items: center;
    }

    .back_mirahaku001 {
        background: url("../img/index09_MM.jpg") no-repeat;
        aspect-ratio: 1500/1500;
        background-size: 100%;
    }
    .back_mirahaku002 {
        background: url("../img/index10_MM.jpg") no-repeat;
        aspect-ratio: 1500/1500;
        background-size: 100%;
    }
    .back_mirahaku003 {
        background: url("../img/index11_MM.jpg") no-repeat;
        aspect-ratio: 1500/1500;
        background-size: 100%;
    }
    

    
}

@media screen and (max-width: 768px) {
    .bgImagine {
        width: 100%;
        aspect-ratio:960 / 640;
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    .bgImagine .cross{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.5s ease-in-out; /* バックアップトランジション */
        z-index: 1;
    }
    
    /* アクティブスライド用 */
    .bgImagine .cross.active{
        opacity: 1;
        z-index: 2;
    }

    .bgImagine .cross .imagine{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .bgImagine .cross .texter {
        position: absolute;
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        text-orientation: upright;
        -webkit-text-orientation: upright;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        height: 80%;
        display: flex;
        align-items: center;
    }

    .back_mirahaku001 {
        background: url("../img/index09_M.jpg") no-repeat;
        aspect-ratio: 900/640;
        background-size: 100%;
    }
    .back_mirahaku002 {
        background: url("../img/index10_M.jpg") no-repeat;
        aspect-ratio: 960/640;
        background-size: 100%;
    }
    .back_mirahaku003 {
        background: url("../img/index11_M.jpg") no-repeat;
        aspect-ratio: 900/640;
        background-size: 100%;
    }
            
}