@charset "utf-8";


body {
            font-family: sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background:#000;
        }
        .main-area {
            width: 100%;
            max-width: 750px; 
            margin:0 auto 20px;
        }
@media screen and (min-width:451px) {
        .main-area {
            margin:46px auto 20px;
    }
}


.main-areaB{
    line-height:1;    
}

video {
            display: block;
            width: 100%;
            height: auto;
        }
        .button-container {
            display: block;
            margin: 16px auto 70px;
            gap: 10px;
        }
@media screen and (min-width:451px) {
    .button-container { 
    margin: 35px auto 70px;
        display:flex;
        flex-wrap: wrap;
    }
    .button-container button{
        width:49%;
    }
}

        button {
            display:block;
            padding:0 22px;
            font-size: 16px;
            margin:auto;
        }

@media screen and (min-width:451px) {
    button{ 
    padding:0 0 10px;
    }
}

.b_content{
    margin-top:5rem;
}


button img{
    width:300px;
    height: auto;
}

@media screen and (min-width:451px) {
   .b_content button img{
    width:100%;
    height: auto;
}
}


button.js-video-button{    
    padding: 0 10px;
    margin-top: 12px;
    width:50px;
    margin-left:calc(100% - 50px);
}

#opv-wrap,#opv-wrap2 {
  display: none;
}

.op_inner{
    background-color:#000;
    text-align:center;
    width:100% ;
    max-width: 750px;
    padding-top:0;
}
@media screen and (min-width:451px) {
    .op_inner{
       padding-top:24px; 
    }
}

video#opv,video#opv_content {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.movie__btn{
    color:#000;
    text-align: right;
}

#opv-wrap.back_visitor{
    display:none!important;
}


main {
  display: none;
}

.time02,.time04,.time06,.time08{
    display:none;
}

#mainV {
  height: 100vh;
  background-color:#000;
  justify-content: center;
  align-items: center;
}

.section-conts {
  padding: 4%;
  height: 100vh;
}

.section-conts h2 {
  text-align: center;
}


.js-video-button img{
    width: 27px;
    height:auto;
}

/** Action
-------------------------------------------**/

/* fadeUp */

.fadeUp {
    -webkit-animation-name: fadeUpAnime;
    animation-name: fadeUpAnime;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

.fadeUp.late {
    -webkit-animation-name: fadeUpAnime;
    animation-name: fadeUpAnime;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

.fadeUp.late_2 {
    -webkit-animation-name: fadeInAnime;
    animation-name: fadeInAnime;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


@-webkit-keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

.delay-time06{
animation-delay: 0.6s;
}
.delay-time08{
animation-delay: 0.8s;
}
.delay-time10{
animation-delay:1s;
}



.fadeUpTrigger {
    opacity: 0;
}