@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&display=swap');

.l-2026-teaser-container {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: left top;
    background-image: url('/wp-content/themes/delfonics/2026teaser/img/bg_pc_2x.png');
    padding: 56px 0 53px 0;
    padding-right: 2.777777778vw;
    display: grid;
    grid-template-columns: 2.777777778vw 1fr max-content;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
        'heading heading logo'
        'ois fc close'
    ;

    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.l-2026-teaser-container.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.l-2026-teaser-container .u-logo {
    grid-area: logo;
    justify-self: right;
    width: 5.208333333vw;
    height: auto;
}

.l-2026-teaser-container .u-heading {
    grid-area: heading;
    padding-left: 2.777777778vw;
}

.l-2026-teaser-container .u-heading img {
    width: 70.27777778vw;
    height: auto;
}


.l-2026-teaser-container .u-ois {
    grid-area: ois;
    justify-self: right;
    align-self: flex-start;
    width: 1.041666667vw;
    height: auto;
}


.l-2026-teaser-container .u-footer-content {
    grid-area: fc;
    justify-self: right;
    align-self: end;
}

.l-2026-teaser-container .u-footer-content p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin: 0;
    padding-right: 1.25vw;
    padding-bottom: 1.25vw;
    font-size: 1.25vw;
    font-weight: bold;
    letter-spacing: -2%;
    line-height: 1;
}

.l-2026-teaser-container .u-close {
    all: unset;
    display: block;
    grid-area: close;
    justify-self: right;
    align-self: end;
    cursor: pointer;
    background-color: #000;
    width: 13.47222222vw;
    height: 4.166666667vw;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.l-2026-teaser-container .u-close:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: auto;
    height: auto;
    transition: transform .2s cubic-bezier(.8, 0, .2, 1) 0s;
    transform: scaleX(0);
    transform-origin: top;
    background-color: #fff;
    z-index: 2;
}

.l-2026-teaser-container .u-close:hover:before {
    transform: scaleX(1);
}

.l-2026-teaser-container .u-close img {
    pointer-events: none;
    position: relative;
    width: 3.125vw;
    height: auto;
    z-index: 3;
}

.l-2026-teaser-container .u-only-sp {
    display: none;
}

@media screen and (max-width: 983px) {
    .l-2026-teaser-container {
        background-image: url('/wp-content/themes/delfonics/2026teaser/img/bg_sp_2x.png');
        grid-template-columns: 10.33591731vw 1fr;
        grid-template-rows: auto 41.34366925vw 28.94056848vw 15.50387597vw;
        grid-template-areas:
            'heading heading'
            'ois logo'
            'blank fc'
            'blank close';
        padding: 12.91989664vw 0;
        padding-right: 7.751937984vw;
    }


    .l-2026-teaser-container .u-logo {
        align-self: flex-end;
        width: auto;
        height: 13.95348837vw;
    }

    .l-2026-teaser-container .u-heading {
        height: auto;
        display: block;
        align-self: center;
        padding-left: 10.33591731vw;
    }

    .l-2026-teaser-container .u-heading img {
        width: 100%;
    }

    .l-2026-teaser-container .u-ois {
        align-self: flex-end;
        transform: translateY(0);
        width: auto;
        height: 41.34366925vw;
    }

    .l-2026-teaser-container .u-footer-content {
        justify-self: start;
    }

    .l-2026-teaser-container .u-footer-content p {
        font-size: 3.875968992vw;
        padding-bottom: 5.167958656vw;
        letter-spacing: -2%;
        line-height: 145%;
    }

    .l-2026-teaser-container .u-close {
        width: 100%;
        height: 100%;
    }

    .l-2026-teaser-container .u-close img {
        width: 11.11111111vw;
        height: auto;
    }

    .l-2026-teaser-container .u-only-sp {
        display: block;
    }

}