/* rootクラス */
:root {
    --video-width: 320px;   /* デフォルトの横幅 */
    --video-height: 480px;   /* デフォルトの横幅 */
    --video-top: 0px;
    --video-left: 0px;
    --pear_video-width:  calc(var(--video-width) / 4);   /* デフォルトの横幅 */
}

.video-container {
    margin: 0 auto;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* 映像スタイル(スマホ) */
video.video-style_smart {
    min-height: 100%;
    min-height: 100vh;
    min-width: 50%;
    min-width: 50vw;
    /* top: 0; */
    /* position:absolute; */
    /* z-index: 99; */
    object-fit: cover;
    order: 1;
}
/* 映像スタイル（タブレット） */
video.video-style {
    /* left: 0; */
    min-height: 100%;
    min-height: 100vh;
    min-width: 100%;
    min-width: 100vw;
    top: 0;
    position:absolute;
    z-index: 99;
}
.VideoWindow{
    /* position:fixed; */
    /* height:calc(var(--video-width) * (3 / 4)); */
    /* width:320px; */
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
}
.button_area{
    position:relative;
    /* height:240px; */
    /* width:320px; */
}

video.pear_video-style_smart {
    /* position: fixed; */
    /* top: var(--video-top);
    left:var(--video-left);
    width: calc(var(--video-width) / 4);
    height: calc(var(--video-height) / 4); */
    /* min-height: 100%; */
    min-height:100vh;
    min-width: 100%;
    /* min-width: 100vw; */
    /* object-fit: cover; */
    /* z-index: 100; */
    object-fit: cover;
    height: fit-content;
    order: 0;
}
video.pear_video-style {
    position: fixed;
    top: var(--video-top);
    left:var(--video-left);
    /* width: var(--pear_video-width); */
    /* height: calc(var(--pear_video-width) * (3 / 4)); */
    width: calc(var(--video-width) / 4);
    height: calc(var(--video-height) / 4);
    object-fit: cover;
    z-index: 100;
}

/* 画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用(スマホ)*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
    .video-style_smart,.pear_video-style_smart {
        width: 50%;
        /* height: 100%; */
        /* top: 100%;
        transform: translateX(-50%); */
    }
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
    .video-style_smart,.pear_video-style_smart {
    /* video{ */
        /* width: 50%; */
        /* height: 100%;
        left: 50%;
        transform: translateX(-50%); */
    }
}
@media screen and (max-width:800px)  {
    .video-style_smart,.pear_video-style_smart {
    /* video{ */
        width: 50%;
        /* height: 100%;
        left: 50%;
        transform: translateX(-50%); */
    }
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
    .video-style,.pear_video-style {
    /* video{ */
        width: 100%;
        top: 50%;
        transform: translateY(-50%)
    }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
    .video-style,.pear_video-style {
    /* video{ */
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
}

button {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    color: crimson;
}
canvas {
    display: none !important;
}