@charset "utf-8";
#story {height:1021px; text-align: center; padding: 101px 0 ; color: #fff; font-size: 21px; line-height: 48px;}
#story h2 {margin-bottom: 44px;}
#story em {font-family: "Meiryo",sans-serif; letter-spacing: 0;}

#story .text{position:absolute; top:0; width:100%; letter-spacing:2px;}
.ie #story .text{font-weight:400;}
.macos.firefox #story .text{font-weight:500;}
#story .text span{display:block; width:100%; position:absolute; top:0; left:0;}
#story .text span:nth-of-type(1){top:0;}
#story .text span:nth-of-type(2){top:49px;}
#story .text span:nth-of-type(3){top:144px;}
#story .text span:nth-of-type(4){top:192px;}
#story .text span:nth-of-type(5){top:240px;}
#story .text span:nth-of-type(6){top:288px;}
#story .text span:nth-of-type(7){top:336px;}
#story .text span:nth-of-type(8){top:432px;}
#story .text span:nth-of-type(9){top:480px;}
#story .text span:nth-of-type(10){top:528px;}
#story .text span:nth-of-type(11){top:577px;}
#story .text span:nth-of-type(12){top:678px; font-size:31px;}
#story .text i{position:absolute; top:50%; left:50%; opacity:0; border:3px solid red;}
/* animation */
#story .text span{opacity:0; transform:translate(0,0); transition:opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#story .text .fadein ~ span{opacity:1; transform:translate(0,0);}
#story .text .fadein ~ span:nth-of-type(2){transition-delay:0.15s;}
#story .text .fadein ~ span:nth-of-type(3){transition-delay:0.3s;}
#story .text .fadein ~ span:nth-of-type(4){transition-delay:0.45s;}
#story .text .fadein ~ span:nth-of-type(5){transition-delay:0.6s;}
#story .text .fadein ~ span:nth-of-type(6){transition-delay:0.75s;}
#story .text .fadein ~ span:nth-of-type(7){transition-delay:0.9s;}
#story .text .fadein ~ span:nth-of-type(8){transition-delay:1.05s;}
#story .text .fadein ~ span:nth-of-type(9){transition-delay:1.2s;}
#story .text .fadein ~ span:nth-of-type(10){transition-delay:1.35s;}
#story .text .fadein ~ span:nth-of-type(11){transition-delay:1.5s;}
#story .text .fadein ~ span:nth-of-type(12){transition-delay:1.65s;}

@media screen and (min-width:641px){
#story {background: url(/thelastremnant/images/story.jpg) center center no-repeat; background-size: cover;}

}
@media screen and (min-width:1201px){

}

@media screen and (max-width:640px){    
#story {background: url(/thelastremnant/images/sp/story.jpg) center top no-repeat; background-size: cover; height: 178.438vw;}/*168.281vw*/
#story {padding: 34.225vw 0 ; font-size: 3.281vw; line-height: 7.188vw;}
#story h2 {position: fixed; left: -8888px;}

#story .text{position:absolute; top:0; letter-spacing:0.413vw; font-weight: 600;}
#story .text span{display:block; position:absolute; top:0; left:0; width:100%; margin-left:0; text-align:center;}
#story .text span:nth-of-type(1){top:0;}
#story .text span:nth-of-type(2){top:7.188vw;}
#story .text span:nth-of-type(3){top:19.219vw;}
#story .text span:nth-of-type(4){top:26.406vw;}
#story .text span:nth-of-type(5){top:33.594vw;}
#story .text span:nth-of-type(6){top:40.781vw;}
#story .text span:nth-of-type(7){top:47.969vw;}
#story .text span:nth-of-type(8){top:55vw;}
#story .text span:nth-of-type(9){top:62.344vw;}
#story .text span:nth-of-type(10){top:74.375vw;}
#story .text span:nth-of-type(11){top:81.406vw;}
#story .text span:nth-of-type(12){top:88.594vw; font-size: 3.281vw;}
#story .text span:nth-of-type(13){top:95.781vw;}
#story .text span:nth-of-type(14){top:102.969vw;}
#story .text span:nth-of-type(15){top:110vw;}
#story .text span:nth-of-type(16){top:122.969vw; font-size:4.844vw;}
#story .text i{position:absolute; top:-800%; left:1%; opacity:0; border:3px solid red;}
/* animation */
#story .text span{opacity:0; transform:translate(0,0); transition:opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#story .text .fadein ~ span{opacity:1; transform:translate(0,0);}
#story .text .fadein ~ span:nth-of-type(2){transition-delay:0.15s;}
#story .text .fadein ~ span:nth-of-type(3){transition-delay:0.3s;}
#story .text .fadein ~ span:nth-of-type(4){transition-delay:0.45s;}
#story .text .fadein ~ span:nth-of-type(5){transition-delay:0.6s;}
#story .text .fadein ~ span:nth-of-type(6){transition-delay:0.75s;}
#story .text .fadein ~ span:nth-of-type(7){transition-delay:0.9s;}
#story .text .fadein ~ span:nth-of-type(8){transition-delay:1.05s;}
#story .text .fadein ~ span:nth-of-type(9){transition-delay:1.2s;}
#story .text .fadein ~ span:nth-of-type(10){transition-delay:1.35s;}
#story .text .fadein ~ span:nth-of-type(11){transition-delay:1.5s;}
#story .text .fadein ~ span:nth-of-type(12){transition-delay:1.65s;}
#story .text .fadein ~ span:nth-of-type(13){transition-delay:1.8s;}
#story .text .fadein ~ span:nth-of-type(14){transition-delay:1.95s;}
#story .text .fadein ~ span:nth-of-type(15){transition-delay:2.1s;}
#story .text .fadein ~ span:nth-of-type(16){transition-delay:2.25s;}

}