#module-1.m-hero {
    margin-top: calc(var(--topMargin) * -1);
}

.m-hero .m-hero-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.m-hero .m-hero-inner .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.m-hero .m-hero-inner .inner span {
    transform: scale(1.05);
}

.m-hero .m-hero-inner .inner.sm {
    display: none;
}

.m-hero .m-hero-inner .overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    opacity: .2;
    z-index: 2;
}


.m-hero .m-hero-inner .m-hero-text {
    position: absolute;
    display: flex;
    width: 100%;
    height: fit-content;
    bottom: 3.402vw; /*49px*/
    left: 0;
    z-index: 4;
    line-height: 1;
    padding: 0 var(--lateralMargin);
    align-items: flex-end;
    justify-content: space-between;
}

.m-hero .m-hero-inner .title {
    position: relative;
    display: inline-block;
    width: calc( ( 100% / 12 ) * 8 );
    height: fit-content;
    line-height: 1;
}

.m-hero .m-hero-inner .title .word {
    opacity: 0;
    transform: translate(0,12%) rotate(2deg);
    transition: 
        opacity .4s cubic-bezier(.65,0,.5,1) var(--delay),
        transform .4s cubic-bezier(.65,0,.5,1) var(--delay);
}

.m-hero .m-hero-inner .title.revealed .word {
    opacity: 1;
    transform: translate(0,0%) rotate(0);
}

.m-hero .m-hero-inner .caption {
    position: relative;
    display: inline-block;
    width: 24.722vw; /*356px*/
    height: fit-content;
    opacity: 0;
    padding-bottom: .34vw; /*5px*/
    transform: translate(0,10%);
    transition: 
        opacity .4s cubic-bezier(.65,0,.5,1) .4s,
        transform .4s cubic-bezier(.65,0,.5,1) .3s;
}

.m-hero .m-hero-inner .caption.revealed {
    opacity: 1;
    transform: translate(0,0%);
}


@media screen and (max-width: 1440px) {
    .m-hero .m-hero-inner .m-hero-text {
        bottom: 49px;
    }

    .m-hero .m-hero-inner .caption {
        width: 356px;
        padding-bottom: 5px;
    }
}


@media screen and (max-width: 1330px) {
    .m-hero .m-hero-inner .title {
        width: 100%;
    }
}


@media screen and (max-width: 1280px) {
	.m-hero .m-hero-inner .m-hero-text {
        flex-flow: column;
        align-items: flex-start;
        row-gap: 29px;
    }

    .m-hero .m-hero-inner .title {
        max-width: 900px;
    }

    .m-hero .m-hero-inner .caption {
        width: 100%;
        max-width: 356px;
    }
}


@media only screen and (max-width: 740px) {
    #module-1.m-hero {
        padding-bottom: 7.179vw; /*28px*/
    }

    .m-hero .m-hero-inner .m-hero-text {
        bottom: 21.28vw; /*83px*/
        row-gap: 4.615vw; /*18px*/
    }

    .m-hero .m-hero-inner .caption {
        width: 100%;
        max-width: 100%;
        font-size: 2rem;
    }
}

@media only screen and (max-width: 550px) {

}