@charset "utf-8";

/*
.tgs2018 {width: 510px; height: 228px; background: url(/thelastremnant/images/kv_tgs2018.png) left top no-repeat; position: absolute; right: 50%; bottom: 138px; margin-right: 256px;}
*/
#kv .tgs2018 {width: 26.563vw; height: 11.875vw; background: url(/thelastremnant/images/kv_tgs2018.png) left top no-repeat; position: absolute; right: 50%; bottom: 7.188vw; margin-right: 13.333vw; background-size: cover;}
/*.tgs2018 {padding:148px 0 0 19px;}*/
#kv .tgs2018 {padding:7.708vw 0 0 0.99vw;}

/*.tgs2018 a {display: inline-block; width: 233px; height: 80px; border: 1px solid red; margin: 0 7px 0 0;}*/
#kv .tgs2018 a {display: inline-block; width: 12.135vw; height: 4.167vw; margin: 0 0.365vw 0 0; position: relative;}
#kv .tgs2018 a::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: 0.3s; background: rgba(255,255,255,0.3); opacity: 0;}
#kv .tgs2018 a:hover::after{opacity: 1;}



/* スライドショーCSSここから*/
.slideshow {
  width: 100%; 
  list-style-type: none;
  position: relative;

}

.slideshow > li {
  opacity: 0;
  position: absolute;
  transition: opacity 6s ease-in-out;
}

.slideshow > li.showSlide {
  opacity: 1;
}

.slideshow > li > img {
  width : 100%;
  height: auto;
}




@media screen and (min-width:641px){
#kv {position: relative; width: 100%; min-width: 1200px; display: flex;}
#kv img {width: 100%; height: auto;}
#kv header {width:580px; position: relative;}
#kv header img + img {position: absolute; left: 0; top: 0;}
#kv .kv {width: 620px; height: auto;}
#kv .kv .slide{width: 620px; height: auto;}
#kv h1::after{content: ''; width: 100%; height: 100%; background: url(/thelastremnant/images/kv_date.png) center center no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0; z-index: 0;}
}
@media screen and (min-width:1201px) {
#kv header {width:48.385vw;}
#kv .kv {width: 51.615vw;}
#kv .kv .slide{width: 51.615vw;}
}

@media screen and (max-width:1200px){
#kv .tgs2018 {width: 319px; height: 142px; bottom: 86px; margin-right: 160px;}
#kv .tgs2018 {padding:92px 0 0 12px;}
#kv .tgs2018 a {width: 146px; height: 50px; margin: 0 4px 0 0;}
}

/*
    campaign
*/
#kv .campaign {position: absolute; left: 0; bottom:50px; width: 580px; text-align: center;}
#kv .campaign a{display: block; background: url(/thelastremnant/images/twitter.png) center center no-repeat; background-size:auto 100%; margin: 0 auto; height: 116px; transition: filter 0.3s; width: 360px;}
#kv .campaign a:hover{backface-visibility: hidden; filter: brightness(1.3);}
@media screen and (min-width:1201px){
#kv .campaign {bottom:4.333vw; width: 48.333vw;}
#kv .campaign a{height: 9.667vw; width: 30vw;}
}


/*
    btn-store
*/
#kv .btn-store {position: absolute; left: 0; bottom: 190px; width: 580px; text-align: center;}
#kv .btn-store a{display: block; background: url(/thelastremnant/images/btn_ps4.png) center center no-repeat; background-size:auto 100%; margin: 0 auto; height: 70px; transition: filter 0.3s; width: 293px;}
#kv .btn-store a:hover{backface-visibility: hidden; filter: brightness(1.3);}

/*
    btn-switch
*/
#kv .btn-switch {position: absolute; left: 0; bottom: 110px; width: 580px; text-align: center;}
#kv .btn-switch a{display: block; background: url(/thelastremnant/images/btn_switch.png) center center no-repeat; background-size:auto 100%; margin: 0 auto; height: 70px; transition: filter 0.3s; width: 293px;}
#kv .btn-switch a:hover{backface-visibility: hidden; filter: brightness(1.3);}


/*
    btn-ios
*/
#kv .btn-ios {position: absolute; left: 141px;

bottom: 30px;

width: 130px;
text-align: center;}
#kv .btn-ios a{display: block; background: url(/thelastremnant/images/btn_ios.jpg) center center no-repeat; background-size:auto 100%; margin: 0 auto; height:70px; transition: filter 0.3s; width: 149px;}
#kv .btn-ios a:hover{backface-visibility: hidden; filter: brightness(1.3);}

/*
    btn-android
*/
#kv .btn-android {position: absolute; left: 290px;

bottom: 30px;

width: 147px; text-align: center;}
#kv .btn-android a{display: block; background: url(/thelastremnant/images/btn_android.jpg) center center no-repeat; background-size:auto 100%; margin: 0 auto; height: 70px; transition: filter 0.3s; width: 149px;}
#kv .btn-android a:hover{backface-visibility: hidden; filter: brightness(1.3);}





@media screen and (min-width:1201px){
#kv .btn-store {bottom: 15.333vw; width: 48.333vw;}
#kv .btn-store a{height: 5vw; width:21vw;}
	
#kv .btn-switch {bottom: 9.6vw; width: 48.333vw;}
#kv .btn-switch a{height: 5vw; width:21vw;}
	
#kv .btn-ios {bottom: 4vw; width: 10vw; left: 13.8vw;}
#kv .btn-ios a{height: 5vw; width:10vw;}
	
#kv .btn-android {bottom: 4vw; width: 10vw; left: 24.5vw;}
#kv .btn-android a{height: 5vw; width:10vw;}

}

@media screen and (max-width:640px){
/*
    SP
*/
#kv{position: relative; font-size: 0; line-height: 1;}
#kv img{width: 100vw; height: auto;}
#kv h1 {background: url(/thelastremnant/images/sp/kv_logo_date.png) center bottom no-repeat; background-size: 45vw auto; position: absolute; left: 0; top:-44vw; z-index: 10; height: 100%; width: 100vw;}
#kv .kv {position: relative; z-index: 0;}
/*#kv header::after{content: ''; background: url(/thelastremnant/images/sp/kv_date.png) center bottom no-repeat; background-size: 100vw auto; position: absolute; left: 0; top:-4vw; z-index: 22; height: 100%; width: 100vw;}*/
/*#kv header::before{content: ''; background: url(/thelastremnant/images/sp/kv_copy.png) center bottom no-repeat; background-size: 100vw auto; position: absolute; left: 0; top: 0; z-index: 22; height: 100%; width: 100vw;}*/

.tgs2018 {font-size: 0; line-height: 1; padding:8.438vw 0 3vw;}
.tgs2018 div{width: 79.688vw; height: 35.625vw; position: relative; background: url(/thelastremnant/images/kv_tgs2018.png) left top no-repeat; background-size: cover; margin: 0 auto; font-size: 0; line-height: 1; padding: 23vw 0 0;}
.tgs2018 a {display: inline-block; width: 50%; height: 12.8vw; position: relative;}

.campaign {width: 100vw; text-align: center; padding:5.438vw 0 3vw;}
.campaign img {width:calc(640/640*100vw); margin: 0 auto}

#kv .btn-store a{width:45.78126vw; height:10.9375vw;}
#kv .btn-store {width:45.78126vw; text-align: center; padding:5.438vw 0 3vw; left: 26.5vw; bottom: 27vw;}
#kv .btn-store img {width:calc(640/640*100vw); margin: 0 auto}
	
#kv .btn-switch a{width:45.78126vw; height:10.9375vw;}
#kv .btn-switch {width:45.78126vw; text-align: center; padding:5.438vw 0 3vw; left: 26.5vw; bottom: 15vw;}
#kv .btn-switch img {width:calc(640/640*100vw); margin: 0 auto}
	
#kv .btn-ios a{width:23vw; height:10.9375vw;}
#kv .btn-ios {width:23vw; text-align: center; padding:5.438vw 0 3vw; left: 26vw; bottom: 3vw;}
#kv .btn-ios img {width:calc(640/640*100vw); margin: 0 auto}
	
#kv .btn-android a{width:23vw; height:10.9375vw;}
#kv .btn-android {width:23vw; text-align: center; padding:5.438vw 0 3vw; left: 49vw;bottom: 3vw;}
#kv .btn-android img {width:calc(640/640*100vw); margin: 0 auto}
	
	
.slideshow {
	height: 170vw;
}
	

	
}




/* animation */
#kv .logo {transform: scale(1.5); filter: brightness(2); transition:1.2s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; transform-origin: center center;}
#kv h1::after,
#kv .campaign ,
#kv .btn-store ,
#kv .btn-switch ,
#kv .btn-ios ,
#kv .btn-android ,
#kv .tgs2018 ,
#kv .text01,
#kv .text02{opacity: 0; transform: translate(0,0) scale(1); transition:1.1s 1.0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: blur(10px) brightness(2);}
.windowloaded #kv h1::after,
.windowloaded #kv .logo{opacity: 1; transform: scale(1); filter: brightness(1);}
.windowloaded #kv .text01,
.windowloaded #kv .text02,
.windowloaded #kv .campaign,
.windowloaded #kv .btn-store,
.windowloaded #kv .btn-switch,
.windowloaded #kv .btn-ios,
.windowloaded #kv .btn-android,
.windowloaded #kv .tgs2018{opacity: 1; transform: scale(1); filter: brightness(1); filter: blur(0);}
.windowloaded #kv h1::after {transition-delay: 2s;}
.windowloaded #kv .tgs2018,
.windowloaded #kv .campaign,
.windowloaded #kv .btn-store{transition-delay: 2s;}
.windowloaded #kv .btn-switch{transition-delay: 2s;}
.windowloaded #kv .btn-ios{transition-delay: 2s;}
.windowloaded #kv .btn-android{transition-delay: 2s;}

@media screen and (max-width:640px){

#kv h1 {transform: scale(1.5) translateY(0); filter: brightness(2); transition:1.5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}
#kv header::after{opacity: 0; transform: translate(0,0); transition:1.5s 2s cubic-bezier(0.165, 0.84, 0.44, 1); filter: blur(10px) brightness(2);}
#kv header::before{opacity: 0; transform: translate(0,0); transition:1.1s 1.0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: blur(10px) brightness(2);}
#kv .btn-store {transform: scale(1.5) translateY(0); filter: brightness(2); transition:1.5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}
#kv .btn-switch {transform: scale(1.5) translateY(0); filter: brightness(2); transition:1.5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}
#kv .btn-ios {transform: scale(1.5) translateY(0); filter: brightness(2); transition:1.5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}
#kv .btn-android {transform: scale(1.5) translateY(0); filter: brightness(2); transition:1.5s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0;}

.windowloaded #kv h1{opacity: 1; transform: scale(1); filter: brightness(1); transform-origin: center center;}
.windowloaded #kv header::after,
.windowloaded #kv header::before{opacity: 1; transform: scale(1); filter: brightness(1) blur(0);}

}