@charset "UTF-8";
/* ==================================================
.brandMovie
================================================== */
:root {
    --brandMovie-color-red:rgb(225 36 27);
    --brandMovie-color-pink:rgb(212 12 9 / 0.19);
}
.brandMovie_wrap { background-color:#fff;}
.brandMovie {
    width:min(700px, 90%);
    margin:4rem auto 0;
    padding:clamp(2rem, calc(-1.324rem + 7.102vw), 4.5rem);/* vp:468-820px 20-45px 1rem:10px */
    background-color:#fff;
    border:solid 6px var(--brandMovie-color-pink);
    border-radius:2rem;

    & img { max-width:100%; height:auto; vertical-align:bottom;}
    & button {
        background-color:transparent;
        border:none;
        cursor:pointer;
        padding:0px;
    }
    & figure button { position:relative;}
    & figure button::before {
        content:"";
        position:absolute;
        inset:0;
        margin:auto;
        width:max(15%, 48px);
        aspect-ratio:90/63;
        background:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/custom-lp/top_brandMovie/brandMovie_icon.svg) no-repeat center / contain;
        pointer-events:none;
    }
    & figcaption {
        color:var(--brandMovie-color-red);
        font-weight:900;
        font-size:clamp(1.8rem, calc(1.002rem + 1.705vw), 2.4rem);/* vp:468-820px 18-24px 1rem:10px */
        margin-block:1rem;
    }
    & p {
        font-size:clamp(1.3rem, calc(1.034rem + 0.568vw), 1.5rem)!important;/* vp:468-820px 13-15px 1rem:10px */
        line-height:1.8;
        font-weight:500;
    }

    /* hover */
    & figure button:is(:focus-visible, :active) { filter:brightness(1.1);}
    @media(hover:hover) { & figure button:hover { filter:brightness(1.1);}}
}
.brandMovie dialog {
    width:min(970px, 90%);
    margin:auto;
    padding:clamp(1.2rem, calc(-1.459rem + 5.682vw), 3.2rem);/* vp:468-820px 12-32px 1rem:10px */
    border:solid clamp(0.5rem, calc(-0.165rem + 1.42vw), 1rem) var(--brandMovie-color-pink);/* vp:468-820px 5-10px 1rem:10px */
    border-radius:1rem;
    overflow:visible;

    &::backdrop { background-color:rgb(0 0 0 / 0.75);}
    & iframe { width:100%; height:auto; aspect-ratio:16/9;}
    & button {
        display:grid;
        place-items:center;
        position:absolute;
        inset:auto auto 100% 100%;
        width:clamp(3.5rem, calc(-1.153rem + 9.943vw), 7rem);/* vp:468-820px 35-70px 1rem:10px */
        height:auto;
        aspect-ratio:1;
        background-color:var(--brandMovie-color-red);
        border-radius:100vmax;
        translate:-37.5% 37.5%;
    }
    & span { grid-area:1/1/1/1; width:60%; height:5px; background-color:#fff;}
    & span:nth-of-type(1) { rotate:45deg;}
    & span:nth-of-type(2) { rotate:-45deg;}
}