@charset "utf-8";

/* =========================================================
   VIDEO
========================================================= */
.videoArchivePage{
    background:#050505;
    color:#fff;
}

.videoPage{
    min-height:100vh;
    padding:clamp(110px,9vw,150px) 5vw clamp(90px,8vw,130px);
    background:
        radial-gradient(circle at 50% 0,rgba(168,152,88,.14),transparent 34%),
        #050505;
}

/* HEAD */
.videoPage__head{
    margin:0 auto clamp(52px,6vw,78px);
    text-align:center;
}

.videoPage__head p{
    margin:0 0 14px;
    color:var(--accent);
    font:600 .72rem/1 var(--serif);
    letter-spacing:.32em;
}

.videoPage__head h1{
    margin:0;
    color:#fff;
    font:600 clamp(68px,9vw,132px)/.9 var(--serif);
    letter-spacing:.04em;
}

.videoPage__head h1::after{
    content:"";
    display:block;
    width:110px;
    height:1px;
    margin:26px auto 0;
    background:linear-gradient(90deg,transparent,var(--blood),var(--accent),transparent);
}

/* GRID */
.videoArchiveGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:40px 22px;
    width:min(1400px,100%);
    margin:0 auto;
}

/* CARD */
.videoArchiveCard{
    min-width:0;
}

.videoArchiveCard__movie{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#111;
    box-shadow:-8px 10px 0 rgba(110,31,24,.16);
}

.videoArchiveCard__movie img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s var(--ease),filter .8s var(--ease);
}

.videoArchiveCard__play{
    position:absolute;
    left:50%;
    top:50%;
    width:64px;
    height:64px;
    border:2px solid #fff;
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:.3s var(--ease);
}

.videoArchiveCard__play::after{
    content:"";
    position:absolute;
    left:26px;
    top:19px;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:18px solid #fff;
}

.videoArchiveCard h2{
    margin:18px 0 0;
    color:#fff;
    font:600 clamp(1rem,1.25vw,1.2rem)/1.55 var(--jpSerif);
    letter-spacing:.04em;
}
.videoArchiveCard h2 small{
    display:block;
    margin-top:3px;
    color:var(--accent);
    font:600 .62rem/1 var(--serif);
    letter-spacing:.16em;
}
@media(hover:hover){
    .videoArchiveCard__movie:hover img{
        transform:scale(1.025);
        filter:brightness(.72);
    }

    .videoArchiveCard__movie:hover .videoArchiveCard__play{
        transform:translate(-50%,-50%) scale(1.08);
        border-color:var(--accent-bright);
        background:rgba(110,31,24,.42);
    }
}

/* BACK */
.videoPage__back{
    margin-top:clamp(72px,8vw,110px);
    text-align:center;
}

.videoPage__back a{
    display:inline-block;
    color:rgba(255,255,255,.72);
    font:600 .78rem/1 var(--serif);
    letter-spacing:.22em;
}

.videoPage__back a::after{
    content:"";
    display:block;
    width:46px;
    height:1px;
    margin:12px auto 0;
    background:var(--accent);
    transition:width .3s var(--ease);
}

.videoPage__back a:hover{
    color:var(--accent-bright);
}

.videoPage__back a:hover::after{
    width:96px;
}

/* SP */
@media(max-width:860px){
    .videoPage{
        padding:92px 18px 80px;
    }

    .videoArchiveGrid{
         grid-template-columns:repeat(2,minmax(0,1fr));
        gap:38px;
    }

    .videoArchiveCard__play{
        width:58px;
        height:58px;
    }

    .videoArchiveCard__play::after{
        left:23px;
        top:17px;
        border-top-width:11px;
        border-bottom-width:11px;
        border-left-width:17px;
    }

    .videoArchiveCard h2{
        margin-top:14px;
        font-size:1rem;
    }
}