@media screen and (max-width: 750px) {
    .mbYTP_wrapper{
        overflow: visible !important;
    }
	#iframe_ytPlayer{
		--movie-width:calc(100vw*4);
		width: var(--movie-width) !important;
		height:calc(var(--movie-width)*0.5625) !important;
		margin-left: 50% !important;
		transform:translateX(-50%) !important;
        overflow: visible !important;
	}
}

.loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: transform 300ms ease-out;
    z-index: 100100;
}
.loading_line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    z-index: 100120;
}
.loading_line::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: #ffadd8;
    z-index: 100121;

    animation: l_to_r 1600ms linear infinite paused;
}
.loading_cover{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fb46a4;
    z-index: 100110;
    transition: transform 300ms ease-in;
    transform: translateY(0);

    display: flex;
    justify-content: center;
    align-items: center;
}
.loading_cover::before,
.loading_cover::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loading_cover::before{
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url(../../img/loading_chara.jpg);
    z-index: 100111;
    transition: opacity 250ms ease-in 400ms;
    opacity: 0;
}
@media screen and (max-width: 750px) {
    .loading_cover::before{
        background-position: left top;
    }
}

.loading_cover_text{
    z-index: 100112;
    transition: opacity 250ms ease-in 700ms;
    opacity: 0;
}
@media screen and (max-width: 750px) {
    .loading_cover_text{
        width: 40vw;
        height: auto;
    }
}
.loading_cover_chara{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: none;
}


.loading[data-state="ready"]{
}


.loading[data-state="load_start"] .loading_cover{
    transform: translateY(100%);
}

.loading[data-state="load"]{
    
}
.loading[data-state="load"] .loading_cover{
    transform: translateY(100%);
}
.loading[data-state="load"] .loading_cover::before,
.loading[data-state="load"] .loading_cover .loading_cover_text{
    opacity: 1;
}
.loading[data-state="load"] .loading_line::after,
.loading[data-state="effect-start"] .loading_line::after{
    animation-delay: 600ms;
    animation-play-state: running;
}

.loading[data-state="effect-start"] .loading_cover{
    transform: translateY(100%);
}
.loading[data-state="effect-start"] .loading_cover::before{
    transition-delay: 400ms;
    opacity: 0;
}
.loading[data-state="effect-start"] .loading_cover .loading_cover_text{
    transition-delay: 0ms;
    opacity: 0;
}
.loading[data-state="effect-start"]{
    transition-delay: 1200ms;
    transform: translateY(-100%);
}

.loading[data-state="page-start"]{
    transform: translateY(-100%);
    display: none;
}



@keyframes l_to_r {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}