#kv {height: 1000px; position: relative; z-index: 0;}
#kvbg {background: url(../images/kv/bg.jpg) center top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
#kvbg02 {background: url(../images/kv/bg_blur.jpg) center top no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
#kvbgblur{background: url(../images/kv/bg_blur.jpg) center top no-repeat; position: absolute; left:0; top: 0; width: 100%; height: 100%; z-index: 2;}

#kv h1 {background: url(../images/kv/logo.png) left top no-repeat; width: 729px; height: 376px; position: absolute; left: -8px; top: 158px;}
#kv #pv {position: absolute; top: 557px; left: 179px; transition: 0.2s;}
#kv #pv img{transition: 0.3s;}

#kv #pv:hover a::after{transform: scale(1.1);}
#kv #pv a{display: block; position: relative;}
#kv #pv a::after{content: ''; width: 100%; height: 100%; background: url(../images/kv/btn_play.png) center center no-repeat; position: absolute; left: 0; top: 0; transition: 0.3s}
#kv .btns {position: absolute; top: 799px; left: 58px; display: flex;}
#kv .btns li {padding: 0 10px 0 0;}
#kv .btns li a{transition: 0.2s;}
#kv .btns li a:hover{transition: 0.5s; filter: brightness(1.5);}
#kv .chara {display: block; background-position: left top; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: absolute; left: 50%; top: 0; z-index: 10;}
#kv .chara01 {background-image: url(../images/kv/chara01.png); width: 560px; height: 719px; z-index: 13; margin: 278px 0 0 78px;}
#kv .chara02 {background-image: url(../images/kv/chara02.png); width: 542px; height: 598px; z-index: 11; margin: 100px 0 0 272px;}
#kv .chara03 {background-image: url(../images/kv/chara03.png); width: 449px; height: 710px; z-index: 12; margin: 175px 0 0 -156px;}
#kv .bgm {display: none;}

@media screen and (min-width:1921px){
    #kvbg,
    #kvbg02,
    #kvbgblur{background-size: 100% auto;}
}

@media screen and (max-width:640px){
#kv {height: 200vw; font-size: 0;}
#kvbg {background: url(../images/kv/bg-sp.jpg) center top no-repeat; background-size: 100% 100%; width: 100vw;}
#kvbg02 {background: url(../images/kv/bg_blur-sp.jpg) center top no-repeat; background-size: 100% 100%; width: 100vw;}
#kvbgblur{background: url(../images/kv/bg_blur-sp.jpg) center top no-repeat; background-size: 100% 100%; width: 100vw;}

#kv h1 {background: url(../images/kv/logo-sp.png) center top no-repeat; background-size: auto 100%; width: 100vw; height: 54.063vw; top: 71.2vw;}
#kv #pv {top: 126.324vw; left: 23.281vw; height: 29.375vw; width: 52.344vw;}
#kv #pv img {width: auto; height:  29.375vw;}
#kv #pv a::after{background-size: cover;}

#kv .btns {position: absolute; top: 160.225vw; left: 4.844vw; display: flex;}
#kv .btns li {padding: 0 0.781vw 0;}
#kv .btns li a{transition: 0.2s;}
#kv .btns li img {width: 43.75vw; height: auto;}

#kv .chara {display: block; background-position: left top; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 10;}
#kv .chara01 {background-image: url(../images/kv/chara01-sp.png); background-size: cover; width: 91.25vw; height: 106.25vw; z-index: 13; margin:36.3vw 0 0 4.5vw;}
#kv .chara02 {background-image: url(../images/kv/chara02-sp.png); background-size: cover; width: 78.125vw; height: 86.094vw; z-index: 11; margin:12.008vw 0 0 34vw;}
#kv .chara03 {background-image: url(../images/kv/chara03-sp.png); background-size: cover; width: 64.688vw; height: 102.656vw; z-index: 12; margin:6.3vw 0 0 -11.6vw;}

#kv .bgm {z-index:100; position: absolute; width: 33.281vw; height: 7.188vw; left: 33.225vw; top: 181.138vw; display: block;}
.bgm .status a {display:block; height:25px; position: relative;}
.bgm .status a:after {content:''; background: url(../images/kv/btn_bgm-sp.png) left top no-repeat; background-size: 100% 15.625vw; width: 33.281vw; height: 7.288vw; position:absolute; left: 0; top: 0; opacity: 1; transition: 0.3s; filter: brightness(1); backface-visibility: hidden;}
.bgm .status a:before {content:''; background: url(../images/kv/btn_bgm-sp.png) left -7.813vw no-repeat; background-size: 100% 15.625vw;  width: 33.281vw; height: 7.288vw; position:absolute; left: 0; top: 0; opacity: 0; transition: 0.3s; filter: brightness(1); backface-visibility: hidden;}
.bgm .status.active a:after {opacity: 0;}
.bgm .status.active a:before{opacity: 1;}
.bgm .status a:hover:before,
.bgm .status a:hover:after{filter: brightness(1.4);}


}


/* animation */
#kvbg  {transform: scale(1.06); transform-origin: right center; opacity: 1; filter: brightness(0);}
#kvbg02 {transform: scale(1.06); transform-origin: right center; opacity: 0; filter: brightness(2);}
#kvbgblur{opacity: 0; filter: brightness(2); transform-origin: right center; transform: scale(1)}
@media screen and (max-width:640px){
#kvbg ,
#kvbg02 ,
#kvbgblur{transform-origin: center top;}
}
#kv h1 {opacity: 0; transform: scale(1.5); filter: brightness(2)}
#kv #pv {opacity: 0;}
#kv .btns {opacity: 0;}
#kv .chara {opacity: 0; filter: brightness(0.5)}
#kv .chara01 {transform: translate(20vw,0);}
#kv .chara02 {transform: translate(-20vw,-10vw);}
#kv .chara03 {transform: translate(-20vw,8vw);}
.ie11 #kv .chara01 {transform: translate(200px,0);}
.ie11 #kv .chara02 {transform: translate(-200px,-100px);}
.ie11 #kv .chara03 {transform: translate(-200px,80px);}

@media screen and (max-width:640px){
#kv .chara01 {transform: translate(20vw,0);}
#kv .chara02 {transform: translate(-25vw,-15vw);}
#kv .chara03 {transform: translate(-25vw,12vw);}
}

#kv {background: #000;}

.windowloaded #kvbg,
.windowloaded #kvbg02{opacity: 1; transition: 1.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: scale(1);}
.windowloaded #kvbg02{transition:1.36s 0.07s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1;}
.windowloaded #kvbgblur{opacity: 1; transition: 3.4s 1.9s; filter: brightness(1); transform: scale(1);}
.windowloaded #kv .chara{opacity: 1; filter: brightness(1); transform: translate(0,0);}
.windowloaded #kv .chara02 {transition: 0.65s 0.4s cubic-bezier(0.19, 1, 0.22, 1) , transform 0.85s 0.4s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1;}
.windowloaded #kv .chara03 {transition: 0.61s 0.55s cubic-bezier(0.19, 1, 0.22, 1) , transform 0.81s 0.55s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1;}
.windowloaded #kv .chara01 {transition: 0.75s 0.72s cubic-bezier(0.19, 1, 0.22, 1) , transform 0.85s 0.72s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1;}
.windowloaded #kv h1{opacity: 1; transition: 1.5s 1.3s cubic-bezier(0.19, 1, 0.22, 1); filter: brightness(1); transform: scale(1);}
.windowloaded #kv .btns,
.windowloaded #kv #pv{opacity: 1; transition: 1s 1.9s; filter: brightness(1);}

@media screen and (max-width:640px){
.bgm,
#kv #pv,
#kv .btns{transform: translate(0,10vw); opacity: 0;}

.windowloaded #kvbg,
.windowloaded #kvbg02{opacity: 1; transition: 1.46s 0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: brightness(1); transform: scale(1);}
.windowloaded #kvbg02{transition:1.46s 0.0s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1;}

.windowloaded #kv #pv{opacity: 1; transition: 1s 1.9s; filter: brightness(1); transform: translate(0,0);}
.windowloaded #kv .btns{opacity: 1; transition: 1s 2.1s; filter: brightness(1); transform: translate(0,0);}
.windowloaded .bgm{opacity: 1; transition: 1s 2.3s; filter: brightness(1); transform: translate(0,0);}

}