@media screen and (max-width:3000px){
.flow-container {background:#d2d2d2;
    position: relative;
    width: 100%;
    aspect-ratio:3000/1688;
    overflow: hidden;
}

.flow-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

.flow-content {
    position: absolute;
    width:100vw;
    /*max-width: 800px;*/
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    text-align: center;
    /*color: white;*/
    opacity: 0;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}



/* 最初のスライドだけ表示 */
.flow-slide:first-child {
    visibility: visible;
}

/* 背景画像の設定 */
.back_flow01 {
    background: url("../img/index26_LL.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow02 {
    background: url("../img/index27_LL.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow03 {
    background: url("../img/index28_LL.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow04 {
    background: url("../img/index29_LL.jpg") no-repeat center center;
    background-size: 100%;
}


}

@media screen and (max-width:768px){
.flow-container {background:#d2d2d2;
    position: relative;
    width: 100%;
    aspect-ratio:800/1250;
    overflow: hidden;
}

.flow-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

.flow-content {
    position: absolute;
    width:100vw;
    /*max-width: 800px;*/
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    text-align: center;
    /*color: white;*/
    opacity: 0;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}



/* 最初のスライドだけ表示 */
.flow-slide:first-child {
    visibility: visible;
}

/* 背景画像の設定 */
.back_flow01 {
    background: url("../img/index26_MS.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow02 {
    background: url("../img/index27_MS.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow03 {
    background: url("../img/index28_MS.jpg") no-repeat center center;
    background-size: 100%;
}

.back_flow04 {
    background: url("../img/index29_MS.jpg") no-repeat center center;
    background-size: 100%;
}

}