:root {
    --CardHeight: 30vw;
    --MarqueeHeight: 18vw;
}

@media (min-width:992px) {
    .photo-box .swiper {
        overflow: visible;
    }

    .marquee-container,
    .photo-sticky-wrp,
    .photo-cards {
        height: calc(var(--CardHeight)*4 + 12vw);
    }

    .photo-cards {
        justify-content: center;
    }

    .photo {
        position: sticky;
        bottom: 0;
    }


    .photo-sticky {
        position: absolute;
    }

    .photo-sticky-01 {
        z-index: 5;
        height: var(--CardHeight);
    }

    .photo-sticky-02 {
        z-index: 4;
        height: calc(var(--CardHeight)*2 + 4vw);

    }

    .photo-sticky-03 {
        z-index: 3;
        height: calc(var(--CardHeight)*3 + 4vw + 4vw);
    }

    .photo-sticky-04 {
        z-index: 2;
        height: calc(var(--CardHeight)*4 + 4vw + 4vw + 4vw);
    }



    .photo-sticky-01 .photo-card {
        transform: rotate(5deg);
    }

    .photo-sticky-02 .photo-card {
        transform: rotate(-4deg);
    }

    .photo-sticky-03 .photo-card {
        transform: rotate(4deg);
    }

    .photo-sticky-04 .photo-card {
        transform: rotate(-3deg);
    }

    .marquee-container {
        top: calc(var(--SectionPadding)* 1.8 + var(--MarqueeHeight)/2);
    }

    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: none;
    }

    .marquee-box {
        top: calc(calc(100vh - var(--MarqueeHeight))/2 + var(--NaviHeight)/2);
        position: sticky;
        margin-bottom: calc(var(--SectionPadding) + 4rem);
    }
}


.photo-slide-block {
    background: var(--MainColor);
    padding-top: calc(var(--SectionPadding)* 1.8);
}


.photo-cards {
    align-items: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}

.photo-card-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.photo-cards .number {
    font-size: var(--FontSizeEn);
    font-weight: 800;
    font-family: var(--FontFamilyEn) !important;
    color: var(--MainColor);
}

.photo-cards .photo-en-title {
    letter-spacing: -1px;
    font-family: var(--FontFamilyEn) !important;
    color: var(--MainColor);
    font-size: max(2.3vw, 2rem);
    font-weight: 800;
    text-align: center;
    line-height: 1;
    font-style: italic;
}


.photo-card {
    border: .5vw solid;
    background-color: #fff;
    border-radius: 1.6vw;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    width: auto;
    aspect-ratio: 4/3;
    height: var(--CardHeight);
    padding: max(3.5vw, 2rem);
    display: flex;
    position: sticky;
    bottom: calc(var(--SectionPadding)* 1.8 - var(--NaviHeight));
    margin-inline: auto;
}

.photo-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-title {
    font-size: calc(var(--FontSizeH3)* 1.5);
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 0.1em;
}

.photo-icon {
    max-width: 140px;
    margin-block: 2em;
}

.photo-sticky {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    inset: 0% 0% auto;
    width: 100%;
}

.photo-sticky-01 .photo-card {
    border-color: #0f98fd; 
}

.photo-sticky-02 .photo-card {
    border-color: #7dc8ff;
}

.photo-sticky-03 .photo-card {
    border-color: #e5eff4;
}

.photo-sticky-04 .photo-card {
    border-color: var(--MainHoverColor);
}




.photo-sticky-wrp {
    flex-flow: column;
    justify-content: flex-end;
    align-items: stretch;
    margin-bottom: 0;
    display: flex;
}


.photo-cards-wrp {
    width: 100%;
}

.photo-container {
    z-index: 2;
}

.marquee-container {
    position: absolute;
    z-index: 1;
}

.marquee-box .RWDbanner008__mask {
    background-color: transparent !important;
}

.marquee-box .RWDbanner008__a {
    transition: unset;
}

.marquee-box .RWDbanner008 .slider-contain {
    display: flex;
    gap: 5px;
}

.marquee-box .RWDbanner008 .slider,
.marquee-box .RWDbanner008 img,
.marquee-box .bx-viewport {
    height: var(--MarqueeHeight) !important;
}

@media(max-width:1680px) {
    :root {
        --CardHeight: 31vw;
    }

    .photo-icon {
        max-width: 110px;
    }

}

@media(max-width:1512px) {

    :root {
        --CardHeight: 32vw;
    }
}

@media(max-width:1440px) {
    :root {
        --CardHeight: 70vh;
        --MarqueeHeight: 22vw;
    }

    .photo-card {
        max-height: 35vw;
    }
}

@media(max-width:1200px) {
    :root {
        --MarqueeHeight: 25vw;
        --CardHeight: 40vw;
    }

    .photo-card {
        max-height: unset;
        border: 8px solid;
    }

}

@media(max-width:1024px) {
    :root {
        --CardHeight: 43vw;
    }


}

@media(max-width:991px) {
    :root {
        --CardHeight: auto;
        --MarqueeHeight: 30vw;
    }

    .photo-slide-block {
        padding-block: calc(var(--SectionPadding)* 1.5);
    }

    .marquee-container {
        position: absolute;
        top: 50%;
        transform: var(--TransformYCenter);
    }

    .photo-card {
        width: 100%;
        aspect-ratio: unset;
        border: 6px solid;
        border-radius: var(--BorderRadius);
    }

    .photo-container {
        width: 65%;
    }

    .photo-box .swiper-button-next,
    .photo-box .swiper-button-prev {
        background: white;
        color: var(--MainColor);
        box-shadow: 0 0 10px rgb(0 0 0 / 10%);
        width: 45px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    .photo-box .swiper-button-next:after,
    .photo-box .swiper-button-prev:after {
        font-size: 16px;
        font-weight: bold;
    }

    .photo-sticky {
        padding-inline: 2em;
    }

    .slider-deco-sticky {
        background-size: 72vw;
        background-position: 92% -20%;
    }

    .slider-deco {
        width: 60%;
    }
.photo-card-content .description{
    text-align: center;
}
.photo-sticky-04 .photo-card {
    border-color: var(--SubColor);
}
}

@media(max-width:850px) {

    .photo-container {
        width: 75%;
    }

.slider-deco-sticky {
        background-size: 78vw;
        background-position: 92% -10%;
    }

}

@media(max-width:767px) {
    .photo-slide-block {
        padding-block: 0;
    }

    .photo-container {
        padding-block: var(--SectionPadding);
        width: 90%;
    }

    .marquee-container {
        position: relative;
        top: unset;
        transform: unset;
    }

    .slider-deco {
        width: 55%;
    }
}

@media(max-width:650px) {
    .photo-icon {
        max-width: 90px;
        margin-block: 1.5em;
    }

    .photo-container {
        width: 95%;
    }

    .slider-deco-sticky {
        background-size: cover;
        aspect-ratio: 13 / 15;
        height: auto;
    }

    .slider-deco {
        width: 100%;
    }
}

@media(max-width:480px) {

    .photo-icon {
        max-width: 85px;
        margin-block: 1em;
    }
}

@media(max-width:380px) {
    .photo-title {
        letter-spacing: 1px;
    }
}