html {
    font-size: 4.2vw;
}

.main {
    overflow: visible;
    background: #131313;
}

img {
    display: block;
}

.container {
    color: #FBFBFB;
    font-family: "Helvetica Neue";
    font-family: "din-1451-lt-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 9.37rem;
}

.footer-tops{
    margin-top:1.5rem
}

.fade {
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease-out;
}

.fadeactive {
    opacity: 1;
    visibility: visible;
}

.kv {
    position: relative;
    height: calc( 100svh - 64px );
    overflow: hidden;
}

.kv .kv-img {
    height: 100%;
    object-fit: cover;
    max-width: none;
    margin: 0 auto;
    display: block;
    width: 100%;
}

.kv .kv-txt {
    width: 20.27269rem;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 2.51rem;
    transform: translate(-50%);
}

.kv .kv-txt img {
    position: relative;
}

.kv .kv-txt p {
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.0875rem;
}

.kv .kv-txt p.active {
    opacity: 1;
    visibility: visible;
}

.greet {
    padding: 11.81rem 0 0;
    margin-bottom: 9.22rem;
}

.greet dl {
    text-align: center;
    font-style: normal;
    font-weight: 700;
}

.greet dt {
    font-size: 1.125rem;
    line-height: 190%;
    letter-spacing: 0.25rem;
    margin-bottom: 2.5rem;
}

.greet dd {
    font-size: 0.78125rem;
    line-height: 240%;
    letter-spacing: 0.06rem;
    display: flex;
    flex-direction: column;
}

.greet dd p:nth-child(1) {
    margin-bottom: 1.12rem;
}

.greet dd p:nth-child(2) {
    margin-bottom: 1.56rem;
}

.greet dd p:nth-child(3) {
    margin-bottom: 1.62rem;
}

.greet dd p:nth-child(4) {
    margin-bottom: 2.56rem;
}

.greet dd p:nth-child(5) {
    margin-bottom: 0;
}

.countdown {
    padding: 0;
}

.countdown .countdown-date {
    width: 3.5626275rem;
    height: 7.062468rem;
    margin: 0 auto;
}

.countdown .countdown-date.third {
    background: url("https://marlmarlstatics.blob.core.windows.net/pub/assets/img/feature/halloween2025/cd03.svg") no-repeat center top / 100%;
}

.countdown .countdown-date.second {
    background: url("https://marlmarlstatics.blob.core.windows.net/pub/assets/img/feature/halloween2025/cd02.svg") no-repeat center top / 100%;
}

.countdown .countdown-date.first {
    background: url("https://marlmarlstatics.blob.core.windows.net/pub/assets/img/feature/halloween2025/cd01.svg") no-repeat center top / 100%;
}

.countdown .countdown-date.zero {
    background: url("https://marlmarlstatics.blob.core.windows.net/pub/assets/img/feature/halloween2025/cd00.svg") no-repeat center top / 100%;
}

.countdown .countdown-txt {
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.0875rem;
    display: flex;
    flex-direction: column;
    gap: 1.44rem;
    margin-top: 2.37rem;
}

.countdown .countdown-txt p {
    line-height: 190%;
}

.trailer {
    margin-top: 15.01rem;
    padding-bottom: 12.69rem;
}

.trailer img {
    width: 51%;
    margin: 0 auto;
    display: block;
}

.trailer p {
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.0875rem;
    margin-top: 2.56rem;
}

.contents {
    margin-top: 9.81rem;
}

.contents01 {
    padding: 0;
}

.contents01 img {
    width: 18.875rem;
    margin: 0 0 0 auto;
}

.contents01 p {
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 220%;
    letter-spacing: 0.07813rem;
    margin: 2rem 0 0 2.5rem;
}

.contents02 {
    width: 13.70519rem;
    margin: 2rem 0 0 2.5rem;
}

.contents03 {
    margin: 4.69rem 2.5rem 0 0;
}

.contents03-img {
    margin: 2rem 0 0 auto;
    width: 15.375rem;
    position: relative;
}

.contents03-img img {
    padding: 0;
}

.contents03-img img:nth-child(2) {
    width: 15.0625rem;
    position: absolute;
    bottom: -8.56rem;
    left: -3rem;
    opacity: 0.85;
}

.contents03 p {
    text-align: right;
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 220%;
    letter-spacing: 0.07813rem;
}

.contents04 {
    text-align: center;
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 220%;
    letter-spacing: 0.07813rem;
    margin-top: 13.06rem;
}

.items {
    margin-top: 14.48rem;
    position: relative;
}

.items-txt {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    z-index: 1;
}

.items-txt .items-txt-wrap {
    opacity: 0;
    visibility: hidden;
    width: 20.5rem;
    position: absolute;
    bottom: 2.02rem;
    left: 50%;
    transform: translate(-50%);
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.01563rem;
}

.items-txt .items-txt-wrap.active {
    opacity: 1;
    visibility: visible;
}

.items-txt .items-ttl {
    padding: 0;
}

.items-txt .items-ttl img:nth-child(1) {
    width: 2.13069rem;
}

.items-txt .items-ttl img:nth-child(2) {
    width: 100%;
    margin-top: 0.78rem;
}

.items-txt p {
    margin-top: 1.36rem;
}

.items-txt a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2.04rem;
}

.items-txt a img {
    width: 1rem;
}

.items-img {
    margin-top: calc(-100vh + 64px);
}

.items-img-wrap {
    height: calc(100vh - 64px);
    overflow: hidden;
    position: sticky;
    top: 64px;
}

.slide {
    position: relative;
}

.slide-inner {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 1s ease;
}

.slide-inner:nth-child(1) {
    position: relative;
}

.slide-inner.active {
    opacity: 1;
}

.details {
    margin-top: 7.51rem;
    overflow: hidden;
}

.details h3 {
    width: 14.37494rem;
    margin-bottom: 2.01rem;
    margin-left: 2rem;
}

.details p {
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.01563rem;
    margin: 0 2rem;
}

.details-wrap {
    margin-top: 4.02rem;
    padding: 0 2rem;
    cursor: grab;
    position: relative;
}

.details-label {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.02rem;
    margin-bottom: 1.13rem;
}

.details-list {
    display: flex;
    gap: 1.5rem;
    transition: all 0.6s ease-out;
}

.details-items {
    flex: 0 0 auto;
    width: 15rem;
}

.details-items .details-num {
    display: none;
}

.details-items img {
    padding: 0;
}

.details-items h6 {
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 400;
     line-height: 100%;
     letter-spacing: 0.025rem;
     margin-top: 2rem;
}

.details-items p {
     letter-spacing: 0.03906rem;
     margin: 1.12rem 0 0;
}

.closing {
    margin-top: 14.81rem;
    margin-bottom: 10.17rem;
}

.closing .closing-message {
    text-align: center;
    font-size: 0.78125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 260%;
    letter-spacing: 0.10938rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.closing .closing-message p {
    padding: 0;
}

.closing .closing-img {
    width: 11.41438rem;
    margin: 9rem auto 3.03rem;
}

.closing .closing-img .slide-inner {
    transition: none;
}

.closing .ed-ttl {
    width: 11.375rem;
    margin: 0 auto 1rem;
}

.closing .closing-txt {
    text-align: center;
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.05625rem;
}

.sns {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.sns li {
    padding: 0;
}

@media screen and (min-width: 768px) {
    html {
        font-size:min(1.35vw, 16px)
    }

    .container {
        max-width: none;
        width: auto;
    }

    .footer-tops{
        margin-top:3.5rem
    }

    .kv .kv-txt {
        width: 75%;
        padding: 0;
        text-align: left;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto;
    }

    .kv .kv-txt p {
        font-size: 1.5rem;
        letter-spacing: 0.09rem;
    }

    .kv .kv-txt img {
        left: -1rem;
        width: 25.18613rem;
    }

    .kv .kv-txt h1 {
        padding: 0;
    }

    .greet {
        padding: 18.87rem 0 0;
        margin-bottom: 15.01rem;
    }

    .greet dl {
    }

    .greet dt {
        font-size: 1.375rem;
        line-height: 200%;
        letter-spacing: 0.1375rem;
        margin-bottom: 3.5rem;
    }

    .greet dd {
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 350%;
        letter-spacing: 0.06rem;
    }

    .greet dd p:nth-child(1) {
        margin-bottom: 0;
    }

    .greet dd p:nth-child(2) {
        margin-bottom: 2rem;
    }

    .greet dd p:nth-child(3) {
        margin-bottom: 2rem;
    }

    .greet dd p:nth-child(4) {
        margin-bottom: 2rem;
    }

    .countdown {
        padding: 0;
    }

    .countdown .countdown-date {
        width: 4.273rem;
        height: 7.9675rem;
        margin: 0 auto;
    }

    .countdown .countdown-txt {
        font-size: 1rem;
        letter-spacing: 0.1rem;
        gap: 2rem;
        margin-top: 3rem;
    }

    .countdown .countdown-txt p {
        font-size: 1.04994rem;
        letter-spacing: 0.105rem;
    }

    .trailer {
        margin-top: 16.02rem;
        padding-bottom: 18.72rem;
    }

    .trailer img {
        width: 12.375rem;
    }

    .trailer p {
        font-size: 1rem;
        letter-spacing: 0.1rem;
        margin-top: 2.56rem;
    }

    .contents {
        margin: 14.91rem auto 0;
        width: 1020px;
        max-width: 90%;
    }

    .contents01 {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .contents01 picture {
        display: block;
        order: 2;
        width: max-content;
    }

    .contents01 img {
        width: 32rem;
    }

    .contents01 p {
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 220%;
        letter-spacing: 0.1rem;
        margin: 0;
        position: relative;
        bottom: -1.41rem;
    }

    .contents02 {
        width: 20rem;
        margin: 15rem auto 0;
        position: relative;
        left: -6.7rem;
    }

    .contents03 {
        margin: 16.28rem 0 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10.5rem;
    }

    .contents03-img {
        margin: 0;
        width: 17.49981rem;
        position: relative;
    }

    .contents03-img img {
        padding: 0;
    }

    .contents03-img img:nth-child(2) {
        width: 16.64619rem;
        position: absolute;
        bottom: -5.21rem;
        left: -10.39rem;
        opacity: 0.85;
    }

    .contents03 p {
        text-align: right;
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 220%;
        letter-spacing: 0.1rem;
        order: 2;
    }

    .contents04 {
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 220%;
        letter-spacing: 0.1rem;
        margin-top: 25.54rem;
    }

    .items {
        margin-top: 20rem;
    }

    .items-txt {
        position: sticky;
        top: 64px;
        height: calc(100vh - 64px);
        z-index: 1;
    }

    .items-txt .items-txt-wrap {
        width: 34.375rem;
        bottom: 4rem;
        left: 5rem;
        transform: none;
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0.1rem;
    }

    .items-txt .items-txt-wrap.active {
        opacity: 1;
        visibility: visible;
    }

    .items-txt .items-ttl {
        padding: 0;
    }

    .items-txt .items-ttl img:nth-child(1) {
        width: 2.13069rem;
    }

    .items-txt .items-ttl img:nth-child(2) {
        width: 100%;
        margin-top: 0.78rem;
    }

    .items-txt p {
        margin-top: 1.36rem;
    }

    .items-txt a {
        gap: 0;
        margin-top: 3.22rem;
    }

    .items-txt a img {
        width: 1.428rem;
    }

    .items-img {
        margin-top: calc(-100vh + 64px);
    }

    .items-img-wrap {
        height: calc(100vh - 64px);
        overflow: hidden;
        position: sticky;
        top: 64px;
    }

    .items-img-wrap .items-img-slide {
        height: 100%;
    }

    .items-img-wrap img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }

    .details {
        margin: 15.27rem auto 0;
        width: 46.50406rem;
        max-width: 100%;
    }

    .details h3 {
        width: 21.375rem;
        margin: 0 auto 2rem;
    }

    .details p {
         font-size: 1rem;
         letter-spacing: 0.1rem;
         text-align: center;
         margin: 0;
    }

    .details-wrap {
        padding: 0;
    }

    .details-label {
        display: none;
    }

    .details-items {
        width: 14.5rem;
    }

    .details-items .details-num {
        display: block;
        font-size: 0.9rem;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.02rem;
        margin-bottom: 1.09rem;
    }

    .details-items img {
        padding: 0;
    }

    .details-items h6 {
         font-size: 1.3rem;
         letter-spacing: 0.05rem;
         margin-top: 1.5rem;
    }

    .details-items p {
         font-size: 0.8125rem;
         letter-spacing: 0.04063rem;
         margin-top: 1.1rem;
         text-align: left;
    }

    .closing {
        margin-top: 21.03rem;
        margin-bottom: 10.75rem;
    }

    .closing .closing-message {
         font-size: 1rem;
         font-style: normal;
         font-weight: 700;
         line-height: 260%;
         letter-spacing: 0.16rem;
         gap: 2.55rem;
    }

    .closing .closing-message p {
        padding: 0;
    }

    .closing .closing-img {
        width: 16.45625rem;
        margin: 16rem auto 4.4rem;
    }

    .closing .ed-ttl {
        width: 16.24025rem;
        margin: 0 auto 1.45rem;
    }

    .closing .closing-txt {
         font-size: 0.81106rem;
         font-style: normal;
         font-weight: 400;
         line-height: 160%;
         letter-spacing: 0.08113rem;
    }

    .sns {
        gap: 4.1rem;
    }

    .sns li {
        padding: 0;
    }

}