@media only screen and (max-width: 767px) {
    .mobile{
        display: block;
    }

    .reel-start, .reel-end,
    .bg-horizontal-bar,
    .homepage-footer .top-div,
    .homepage-footer .bottom-div{
        display: none;
    }

    .reel-main .inner{
        display: block;
        max-width: 100%;
        min-width: unset;
    }

    .reel-main .inner .card{
        width: 100vw;
        height: 45vh;
        background-image: url("../images/poster_bg_v2.jpg");
        background-size: 100% 100%;
    }

    .card-poster-div{
        max-width: 100%;
        overflow-x: auto;
    }

    .poster-image{
        width: auto;
        object-fit: contain;
    }

    .poster-infos{
        width: 75%;
        padding: 4% 5%;
        right: 0;
        min-height: 120px;
    }

    .stage-performance-div, .outreach-div,
    .homepage-footer{
        max-width: 100%;
        min-width: unset;
    }

    .stage-performance-div,
    .outreach-inner-div,
    .outreach-div{
        height: auto;
    }

    .stage-main{
        width: 100%;
        margin-right: unset;
    }

    .stage-bg-string{
        right: unset;
        margin: unset;
        top: 50%;
        width: 55vw;
        left: -20%;
    }
    
    .pref-div .pref-left{
        text-align: left;
        z-index: 1;
        padding-bottom: 20%;
    }

    .stage-performance-div .main-title{
        margin-left: 10%;
    }

    .pref-left .title-bg{
        width: 30vw;
        z-index: -1;
    }

    .pref-left .arrow-left{
        left: 7%;
    }

    .pref-left .arrow-right {
        right: 0;
        margin-top: 5%;
        left: 15%;
    }

    .inner-scroll-div{
        max-width: 100vw;
    }

    .inner-main-div{
        width: 185vw;
    }

    .stage-main .stage-image, 
    .stage-image-hover,
    html[lang="en"] .stage-main .stage-image, 
    html[lang="en"] .stage-image-hover,
    .poster-small .stage-image, 
    .poster-small .stage-image-hover{
        width: inherit;
        width: -webkit-fill-available;
    }

    .stage-main .stage-item .stage-image-hover{
        left: 7%;
        width: 43vw;
    }

    .outreach-inner-div .pref-left{
        text-align: -webkit-right;
        margin-right: 10%;
    }

    .outreach-inner-div .pref-left .arrow-left{
        left: unset;
        right: 5%;
    }

    .outreach-inner-div .pref-left .arrow-right{
        right: -5%;
        left: unset;
    }
    
    .outreach-inner-div .right-div{
        min-height: 100vh;
    }

    .outreach-one,
    .outreach-four{
        width: 42vw;
        height: 42vw;
    }

    .outreach-two,
    .outreach-three,
    .outreach-five{
        width: 25vw;
        height: 25vw;
    }

    .outreach-two{
        left: 48%;
    }

    .outreach-five{
        right: unset;
        bottom: 0;
        top: unset;
    }

    .homepage-footer{
        background-size: 100% auto;
        width: 100%;
    }

    .homepage-footer .other-div {
        width: 100%;
        border-top: unset;
        margin-top: unset;
        text-align: center;
    }

    .other-div .infos{
        text-align: center;
    }

    .stage-performance-div, .outreach-div{
        overflow: hidden;
    }

    .stage-bg-mountain{
        width: 100%;
        bottom: unset;
        top: 18%;
        left: unset;
        right: -47%;
    }

    .stage-main .stage-item:nth-child(even){
        margin-top: 10%;
    }

    .outreach-div .bg-bamboo{
        left: unset;
        right: 0;
        width: 25vw;
    }

    .outreach-inner-div{
        padding-top: 30%;
    }

    .outreach-div .bg-boat{
        bottom: unset;
        top: 3%;
        width: 30vw;
    }

    .outreach-div .bg-fish{
        left: 8%;
        width: 15vw;
        bottom: unset;
        top: 20%;
    }

    .outreach-div .bg-fish-02{
        top: unset;
        bottom: 7%;
        width: 15vw;
        right: 5%;
    }

    .reel-main {
        margin-top: 23%;
    }

}

@media only screen and (max-width: 579px) {
    .outreach-one, .outreach-four{
        width: 46vw;
        height: 46vw;
    }

    .outreach-two, .outreach-three {
        width: 32vw;
        height: 32vw;
    }

    .outreach-two{
        left: 57%;
    }

    .outreach-inner-div .right-div {
        min-height: 75vh;
    }

    .outreach-inner-div .pref-left {
        margin-right: 15%;
    }

    .outreach-inner-div .pref-left .arrow-right{
        right: -15%;
    }

    .pref-left .title-bg {
        width: 13em;
    }

    .homepage-footer {
        background-size: 100% 100%;
    }
}