:root {
    --header-h: 150px;
}

@media screen and (max-width: 767px) {
    :root {
        --header-h: 96px;
    }
}

/* header ================================*/

/* mov */
.mov-wrp {
    position: fixed;
    overflow: clip;
    width: 100%;
    height: 100svh;
    top: 0;
    left: 0;
    z-index: 51001;
    opacity: 1;
    background-color: #f9f9f9;
}

.mov-wrp .mov {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes movup {
    from {
        transform: translateY(-5%);
    }

    to {
        transform: translateY(-100vh);
    }
}

.mov-wrp .kv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.mov-wrp .kv img {
    width: 100%;
    height: auto;
    animation: 12s linear movup;
}

.mov-copy {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-1em);
    padding-left: 12%;
    filter: blur(.5px);
    will-change: filter;
    font-family: "Shippori Mincho", serif;
}

.mov-copy .mov-copy-start {
    font-size: clamp(1.6em, 1.5vw, 40px);
    letter-spacing: .2em;
    margin-bottom: .75em;
    color: #fff;
    opacity: 0;
    filter: blur(.3em);
    transform: translateX(-1em);
    transition: all 1.5s .2s;
    will-change: transform, filter;
}

.mov-copy .mov-copy-start.on {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
}

/* kv */
.header {
    width: 100%;
    min-width: 980px;
    height: calc(100dvh - var(--header-h));
    position: relative;
    z-index: 1;
}

.main-img-wrp {
    width: 100%;
    height: calc(100dvh - var(--header-h));
    min-height: 635px;
    position: relative;
}

@media screen and (max-width:767px) {
    .header {
        min-width: unset;
    }

    .main-img-wrp {
        min-height: unset;
    }
}

/* title */
.main-title-wrp {
    width: min(420px, 40%);
    max-width: 72vh;
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -80%) scale(1.1);
    z-index: 2;
    opacity: 1;
    transform-origin: center center;
}

.main-title-wrp.on {
    transform: translate(-50%, -80%) scale(1);
    opacity: 1;
    transition: all 2s;
}

@media (max-width:767px) {
    .main-title-wrp {
        width: min(340px, 50%);
        top: 35%;
        transform: translate(-50%, -100%);
    }
}

.main-title-wrp.opeinig-logo {
    top: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -80%) scale(1.1);
    transition: all 1.5s;
}

.main-title-wrp.opeinig-logo.on {
    transform: translate(-50%, -80%) scale(1);
    opacity: 1;
    visibility: visible;
}

.main-title-wrp.opeinig-logo.hide {
    transform: translate(-50%, -80%) scale(1);
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}

/* img */
.main-img-wrp .main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 0;
    overflow: hidden;
}

.main-img-wrp .main-img figure {
    opacity: 1;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: scale(1.2);
    text-align: center;
    transition: all 1.5s;
}

.main-img-wrp .main-img.on figure {
    transform: scale(1);
    opacity: 1;
}

.main-img-wrp .main-img figure img {
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

@media (max-width:1024px) {
    .main-img-wrp .main-img figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        position: static;
        transform: unset;
    }
}

/* movie button wrapper */
.header-btn-wrp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}

.video-btn {
    width: min(2em, 10vw);
    height: min(2em, 10vw);
    border-radius: 100%;
    border: solid 2px;
    color: #fff;
    background-color: rgb(50 50 50/.3);
    position: absolute;
    right: min(1.5em, 5vw);
    bottom: min(1.5em, 5vw);
    z-index: 1;
    box-shadow: 0 1px 4px 0 rgb(0 0 0/.3);
    cursor: pointer;
    z-index: 2;
    visibility: hidden;
}

.video-btn.on {
    visibility: visible;
}

.video-btn::before,
.video-btn::after {
    position: absolute;
    inset: 50%;
}

.video-btn.pause::before {
    content: none;
}

.video-btn::before {
    content: '';
    width: 30%;
    aspect-ratio: 1/1.2;
    border-left: solid 3px;
    border-right: solid 3px;
    transform: translate(-50%, -50%);
}

.video-btn.pause::after {
    content: '';
}

.video-btn::after {
    content: none;
    width: 33%;
    aspect-ratio: 1/1.2;
    background-color: currentcolor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-36%, -50%);
}

.skip-btn {
    width: 10em;
    position: absolute;
    left: calc(50% - 5em);
    bottom: min(2em, 10vw);
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-size: min(1.1em, 5vw);
    letter-spacing: .05em;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}

.skip-btn.on {
    visibility: visible;
    opacity: 1;
}

.skip-btn::before {
    content: '';
    width: .8em;
    height: .8em;
    border-right: solid 1px;
    border-bottom: solid 1px;
    position: absolute;
    left: 50%;
    top: 100%;
    rotate: 45deg;
    transform: translate(-50%);
    transition: all .5s;
}

.replay-btn {
    position: absolute;
    bottom: 1.5em;
    right: max(1.5em, calc(50vw - 115vh + var(--header-h)));
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    font-family: "Shippori Mincho", serif;
}

.replay-btn.on {
    opacity: 1;
    visibility: visible;
}

.main-img-note {
    padding-right: .75em;
}

@media screen and (max-width:767px) {
    .main-img-note {
        padding: .25em 4vw;
    }
}