@charset "utf-8";
#introduction {text-align: center;}

@media screen and (min-width:641px){
#introduction {padding: 145px 0 ;}
#introduction h2 {margin-bottom: 70px;}
#introduction .wrap {max-width: 1400px; margin: 0 auto; text-align: left; display: flex; align-items: center;}
#introduction .wrap div.text{font-size: 21px; line-height: 48px; color: #000; padding: 0 72px 0; width: 612px;
-moz-font-feature-settings: "halt"; -webkit-font-feature-settings: "halt"; font-feature-settings: "halt"; letter-spacing: 1px;}
.ie #introduction .wrap div.text{font-weight:400;}
.macos.firefox #introduction .wrap div.text{font-weight:600;}
#introduction .wrap div.text .sp-item {display: none;}
#introduction .text{position:absolute; top:0;}
#introduction .text span{display:block; position:absolute; top:0; left:50%; margin-left:-230px;}
#introduction .text span:nth-of-type(1){top:54px;}
#introduction .text span:nth-of-type(2){top:101px;}
#introduction .text span:nth-of-type(3){top:150px;}
#introduction .text span:nth-of-type(4){top:197px;}
#introduction .text span:nth-of-type(5){top:245px;}
#introduction .text span:nth-of-type(6){top:294px;}
#introduction .text span:nth-of-type(7){top:341px;}
#introduction .text i{position:absolute; top:65%; left:50%; opacity:0; border:3px solid red;}
/* animation */
#introduction .text span{opacity:0; transform:translate(0,0); transition:opacity 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#introduction .text .fadein ~ span{opacity:1; transform:translate(0,0);}
#introduction .text .fadein ~ span:nth-of-type(2){transition-delay:0.13s;}
#introduction .text .fadein ~ span:nth-of-type(3){transition-delay:0.26s;}
#introduction .text .fadein ~ span:nth-of-type(4){transition-delay:0.39s;}
#introduction .text .fadein ~ span:nth-of-type(5){transition-delay:0.52s;}
#introduction .text .fadein ~ span:nth-of-type(6){transition-delay:0.65s;}
#introduction .text .fadein ~ span:nth-of-type(7){transition-delay:0.78s;}

#introduction .wrap a{margin-left:612px;}

#introduction .wrap a {display: block; position: relative; transition: 0.4s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#introduction .wrap a::after{content: ''; background: url(/thelastremnant/images/btn_play.png) center center no-repeat; background-size: 108px 108px; position: absolute; left: 50%; top: 50%; z-index: 10; width: 108px; height: 108px; margin: -54px 0 0 -54px; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#introduction .wrap a:hover {filter: brightness(1.2);}
#introduction .wrap a:hover::after{transform: scale(1.15); transform-origin: center center;}
#player02 {width: 728px;height: 410px; position: relative; z-index: -1; background: url(/thelastremnant/images/intro_kv.jpg) no-repeat left top; background-size: 100% auto;}

/* note */
#introduction p.note {font-size:13px; line-height:1; text-align:right; clear:both; padding:1em 0 0; width:100%;}
#introduction .wrap a {text-decoration:none;}


}
@media screen and (max-width:1400px){
#introduction .wrap {max-width: 1200px;}
#introduction .wrap div.text {width: 600px; padding: 0 40px 0 30px; font-size: 19px; line-height: 42px;}

#introduction .text span{margin-left:-198px;}
#introduction .text span:nth-of-type(1){top:14px;}
#introduction .text span:nth-of-type(2){top:56px;}
#introduction .text span:nth-of-type(3){top:105px;}
#introduction .text span:nth-of-type(4){top:152px;}
#introduction .text span:nth-of-type(5){top:200px;}
#introduction .text span:nth-of-type(6){top:249px;}
#introduction .text span:nth-of-type(7){top:296px;}

#introduction .wrap p.movie{margin-left:600px;}
#introduction .wrap p.movie img {width: 580px; height: auto;}
#player02{width: 580px; height: 332px;}

}

@media screen and (max-width:640px){    
#introduction {padding: 22.594vw 0 12.5vw;}

#introduction h2 {margin-bottom: 6.4vw;}
#introduction .wrap {width: 100vw; padding-top: 54.25vw;}
#introduction .wrap div.text {padding: 0 4.688vw; font-size: 3.125vw; line-height: 7.344vw; color: #000; width: 100vw;}
#introduction .wrap div.text .pc-item {display: none;}
#introduction .text{position:absolute; top:0;}
#introduction .text span{display:block; position:absolute; top:0; left:0; width:100%; margin-left:0; text-align:center;}
#introduction .text span:nth-of-type(1){top:-0.156vw;}
#introduction .text span:nth-of-type(2){top:7.188vw;}
#introduction .text span:nth-of-type(3){top:14.531vw;}
#introduction .text span:nth-of-type(4){top:21.875vw;}
#introduction .text span:nth-of-type(5){top:29.219vw;}
#introduction .text span:nth-of-type(6){top:36.563vw;}
#introduction .text span:nth-of-type(7){top:43.906vw;}
#introduction .text span:nth-of-type(8){top:51.306vw;}
#introduction .text i{position:absolute; top:-800%; left:1%; opacity:0; border:3px solid red;}
/* animation */
#introduction .text span{opacity:0; transform:translate(0,0); transition:opacity 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#introduction .text .fadein ~ span{opacity:1; transform:translate(0,0);}
#introduction .text .fadein ~ span:nth-of-type(2){transition-delay:0.13s;}
#introduction .text .fadein ~ span:nth-of-type(3){transition-delay:0.26s;}
#introduction .text .fadein ~ span:nth-of-type(4){transition-delay:0.39s;}
#introduction .text .fadein ~ span:nth-of-type(5){transition-delay:0.52s;}
#introduction .text .fadein ~ span:nth-of-type(6){transition-delay:0.65s;}
#introduction .text .fadein ~ span:nth-of-type(7){transition-delay:0.78s;}
#introduction .text .fadein ~ span:nth-of-type(8){transition-delay:0.91s;}

#introduction .wrap img {width: 90.625vw; height: auto;}
#introduction .wrap a.moviemodal {display: block; position: relative;}
#introduction .wrap a.moviemodal::after{content: ''; background: url(/thelastremnant/images/btn_play.png) center center no-repeat; background-size: 16.875vw 16.875vw; position: absolute; left: 50%; top: 50%; z-index: 10; width: 16.875vw; height: 16.875vw; margin: -8.438vw 0 0 -8.438vw;}
#introduction .wrap p.movie {padding: 0; width: 90.625vw; margin: 0 auto;}
#player02{width: 90.625vw; height: 51.0388049444vw;}


/* note */
#introduction p.note {font-size:2.825vw; line-height:1; text-align:center; clear:both; padding:1vw 0 0; width: 90.625vw; margin:0 auto;}
#introduction .wrap a {text-decoration:none;}
}