@media screen and (max-width: 3000px) {
    .bgImagine {
        width: 100%;
        aspect-ratio: 3000/1688;
        position: relative;
        overflow: hidden;
        /*justify-self: stretch;
        grid-column-start: 1;
        grid-row-start: 1;*/
        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_product001 {
        background: url("../img/index01_LL.jpg") no-repeat;
        aspect-ratio: 3000/1688;
        background-size: 100%;
    }
    .back_product002 {
        background: url("../img/index02_LL.jpg") no-repeat;
        aspect-ratio: 3000/1688;
        background-size: 100%;
    }
    .back_product003 {
        background: url("../img/index03_LL.jpg") no-repeat;
        aspect-ratio: 3000/1688;
        background-size: 100%;
    }
    
    
}

@media screen and (max-width: 767px) {
    .bgImagine {
        width: 100%;
        aspect-ratio: 800 / 1000;
        position: relative;
        overflow: hidden;
        /*justify-self: stretch;
        grid-column-start: 1;
        grid-row-start: 1;*/
        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_product001 {
        background: url("../img/index01_s.jpg") no-repeat;
        aspect-ratio: 800/1000;
        background-size: 100%;
    }
    .back_product002 {
        background: url("../img/index02_s.jpg") no-repeat;
        aspect-ratio: 800/1000;
        background-size: 100%;
    }
    .back_product003 {
        background: url("../img/index03_s.jpg") no-repeat;
        aspect-ratio: 800/1000;
        background-size: 100%;
    }
    
    
}