@charset "utf-8";


/** アーカイブ＞ヒーローエリア
---------------------------------------------------------*/
section#hero {
    height: auto;
    min-height: unset;
}
section#hero .wrap {
	padding-top: var(--m4);
}
section#hero::after {
    display: block;
    width: calc(100% - var(--wrap-padding-inline) * 2);
    border-bottom: 1px solid var(--gray);
    position: absolute;
    left: var(--wrap-padding-inline);
    bottom: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** ギャラリー
---------------------------------------------------------*/
section#gallery {
    padding-block: var(--m10) var(--m8);
    background: black;
}
section#gallery .wrap {
    max-width: unset;
    padding-inline: var(--m);
}
section#gallery .label {
    color: var(--gray);
	letter-spacing: 0.3ic;
}
section#gallery .label.small {
	font-size: calc(var(--label-size) * 0.5);
}
section:where(#gallery) .block {
    padding-block: var(--m4);
    display: flex;
    justify-content: center;
    align-items: center;
}
section:where(#gallery) .label + .label {
	margin-top: var(--m4);
}
section:where(#gallery) .label + .block {
    margin-top: var(--m2);
}
section:where(#gallery) .block + .label {
    margin-top: var(--m10);
}

@media screen and (min-width: 768px) {
    .movie {
        max-width: 40cqw;
    }
}
@media screen and (max-width: 767px) {
    section#gallery {
        padding-block: var(--m4);
    }
    section#gallery .label:not(.en) {
        font-size: calc(var(--label-size) * 0.9);
        letter-spacing: 0.05ic;
    }
    section#gallery .label.small {
        font-size: calc(var(--label-size) * 0.75);
    }

    section:where(#gallery) .block {
        flex-direction: column;
        gap: var(--m);
        padding-block: 0;
    }
    section:where(#gallery) .label + .label {
        margin-top: var(--m2);
    }
    section:where(#gallery) .label + .block {
        margin-top: var(--m2);
    }
    section:where(#gallery) .block + .block {
        margin-top: var(--m);
    }
    section:where(#gallery) .block + .label {
        margin-top: var(--m4);
    }
}


@media screen and (min-width: 768px) {

    #row01 {
        padding-bottom: 0;
    }
    #musee_platinum01 {
        margin-left: auto;
        margin-bottom: calc(150 * var(--px));
    }
    #musee_platinum02 {
        margin-left: calc(-120 * var(--px));
        margin-top: calc(150 * var(--px));
        margin-right: calc(-60 * var(--px));
    }

    #row02 {
        padding-block: 0;
        margin-top: calc(-120 * var(--px));
    }
    #musee_platinum03 {
        margin-left: calc(-300 * var(--px));
        margin-bottom: calc(150 * var(--px));
    }
    #musee_platinum04 {
        margin-left: calc(-120 * var(--px));
        margin-top: calc(150 * var(--px));
    }

    #row03 {
        padding-inline: var(--m8);
        gap: var(--m4);
    }
    #beams01 {
        margin-bottom: calc(150 * var(--px));
    }
    #beams02 {
        margin-top: calc(150 * var(--px));
    }

    #row04 {}
    #beams03 {}

    #row05 {}
    #play_ojo {
        margin-top: calc(150 * var(--px));
    }
    #qingwa {
        margin-bottom: calc(150 * var(--px));
    }

    #row06 {
        margin-top: calc(-200 * var(--px));
        gap: var(--m2);
    }
    #change_vision_22 {
        margin-top: calc(300 * var(--px));
    }
    #galaxy_creative_visual_technology {
        
    }
    #western_australia {
        margin-bottom: calc(300 * var(--px));
    }

    #row07 {
        margin-top: calc(-120 * var(--px));
    }
    #plugman {
        margin-top: calc(150 * var(--px));
        margin-right: calc(90 * var(--px));
    }
    #somsoc {
        margin-right: calc(90 * var(--px));
        margin-bottom: calc(300 * var(--px));
    }


    #row08 {
        gap: var(--m2);
    }
    #exhibition01 {
        margin-top: calc(150 * var(--px));
    }
    #exhibition02 {
        margin-bottom: calc(150 * var(--px));
    }

    #row09 {
        gap: var(--m4);
    }
    #projection_mapping02 {
        margin-top: calc(120 * var(--px));
    }
    #projection_mapping04 {
        margin-bottom: calc(120 * var(--px));
    }

    #row10 {
        margin-top: calc(-60 * var(--px));
    }
    #projection_mapping03 {
        margin-left: calc(350 * var(--px));
    }
}




.banners {
    position: relative;
}
.banners::after {
    display: block;
    width: calc(100% - var(--wrap-padding-inline) * 2);
    border-bottom: 1px solid white;
    position: absolute;
    left: var(--wrap-padding-inline);
    top: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}