@charset "utf-8";

#characters a{display: block; transition: 0.8s;}
#characters a:hover {filter: brightness(1.3);}
.ie11 #characters a:hover {opacity:0.7;}

#characters a img {backface-visibility: hidden;}
#characters p.sub {position: fixed; left: -9999px; top: 0;}

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

#wp {overflow: hidden; width: 100vw; min-width: 1200px; position: relative;}

#characters {height: 1375px; text-align: center; padding: 74px 0 0; margin-bottom: 100px;}
#characters .wrap {height: 1176px; width: 1400px;/* background: url(/thelastremnant/images/chara_base.png) center top no-repeat;*/ margin: 0 auto;}
#characters header {position: relative; max-width: 1400px; min-width: 1200px; width: 100%; margin: 0 auto;}
#characters header p.zu {position: absolute; right: 78px; top: -3px;}
#characters header p.zu a{display: inline-block; background: url(/thelastremnant/images/btn_seiryoku.png) left top no-repeat; width: 253px; height: 90px; line-height: 90px; color: #fff; text-decoration: none; font-size: 21px;}
.macos.firefox #characters header p.zu a{font-weight:600;}
#characters h2 {margin-bottom: 43px;}

#characters ul li{position: absolute; left: 6px; top: 13px; opacity: 1; z-index: 1;}
#characters ul li.sub {position: fixed; left:-9999px; top: -9999px;}
#characters ul li:nth-child(2){left: 270px; top: 139px; z-index: 0;}
#characters ul li:nth-child(3){left: 524px; top: 58px; z-index: 10;}
#characters ul li:nth-child(4){left: 734px; top: 155px; z-index: 9;}
#characters ul li:nth-child(5){left: 868px; top: 286px; z-index: 8;}
#characters ul li:nth-child(6){left: 1037px; top: 0; z-index: 7;}
#characters ul li:nth-child(7){left: 15px; top: 637px; z-index: 10;}
#characters ul li:nth-child(8){left: 263px; top: 660px; z-index: 9;}
#characters ul li:nth-child(13){left: 630px; top: 650px; z-index: 8;}
#characters ul li:nth-child(14){left: 840px; top: 681px; z-index: 7;}
#characters ul li:nth-child(15){left: 1097px; top: 664px; z-index: 6;}


}
@media screen and (max-width:1400px){
#characters {height: 1178px;}
#characters header p.zu {transform: scale(0.8); transform-origin: right center; right: 40px;}
#characters .wrap {width: 1200px;}

#characters ul li a{transform: scale(0.85714285714);}
#characters ul li.sub {position: fixed; left:-9999px; top: -9999px;}

#characters ul li:nth-child(2){left: 231px; top: 119px;}
#characters ul li:nth-child(3){left: 449px; top: 50px;}
#characters ul li:nth-child(4){left: 629px; top: 133px;}
#characters ul li:nth-child(5){left: 744px; top: 245px;}
#characters ul li:nth-child(6){left: 888px; top: 0;}
#characters ul li:nth-child(7){left: 13px; top: 546px;}
#characters ul li:nth-child(8){left: 225px; top: 565px;}
#characters ul li:nth-child(13){left: 540px; top: 557px;}
#characters ul li:nth-child(14){left: 720px; top: 584px;}
#characters ul li:nth-child(15){left: 940px; top: 569px;}

#characters ul {position: relative; left: -20px;}
#characters ul li img {backface-visibility: hidden;}

}

@media screen and (max-width:640px){
#characters { padding: 10.938vw 0 0; height: auto;}
#characters header {position: relative; z-index: 1010; margin-bottom: 12.5vw;}
#characters header p.zu {position: absolute; right: 4.688vw; top: 16.6vw; z-index: 1100; transform: scale(1);}
#characters header p.zu a{display: inline-block; background: url(/thelastremnant/images/btn_seiryoku.png) left top no-repeat; width: 34.688vw; height: 12.5vw; line-height: 12.5vw; color: #fff; text-decoration: none; font-size: 2.969vw; background-size:34.688vw 12.5vw; text-align: center;}
#characters ul{height: 263.125vw; overflow: hidden; background: url(/thelastremnant/images/sp/characters.png) center top no-repeat; background-size: 100vw auto; position: relative; z-index: 0; width: 100vw; left: 0;}
#characters ul li {/*border: 1px solid red;*/ width: 30vw; height: 30vw; overflow: hidden; position: absolute;}
#characters ul li img {opacity: 0;}

#characters ul li:nth-child(1){left: 10vw; top: 0vw; width: 45vw; height: 42vw;}
#characters ul li:nth-child(2){left: 50vw; top: 12vw; width: 38vw; height: 38vw;}
#characters ul li:nth-child(3){left: 0; top: 53vw; width: 45vw; height: 55vw;}
#characters ul li:nth-child(4){left: 40vw; top: 54vw; width: 40vw; height: 38vw;}
#characters ul li:nth-child(5){left: 10vw; top: 110vw; width: 45vw; height: 33vw;}
#characters ul li:nth-child(6){left: 48vw; top: 80vw; width: 50vw; height: 58vw;}
#characters ul li:nth-child(7){left: 0; top: 155vw; width: 45vw; height: 45vw;}
#characters ul li:nth-child(8){left: 40vw; top: 145vw; width: 55vw; height: 57vw;}
#characters ul li:nth-child(13){left: 0; top:210vw; width: 45vw;}
#characters ul li:nth-child(14){left: 10vw; top: 232vw; width: 43vw;}
#characters ul li:nth-child(15){left: 50vw; top: 210vw; width: 45vw; height: 45vw;}


}



/*
    キャラクターモーダル
*/
#charamodalbg {background: rgba(0,0,0,0.8); position: fixed; left: 0; top: 0; z-index: 10100; width: 100%; height: 100%; display: none; cursor: pointer;}
#charamodal {position:absolute; left: 0; top: 0; margin: 0 0 0 0; width: 100%; height: auto; z-index: 10110; display: none; min-width: 1200px;}
#charamodal article .cv dd,
#charamodal article p{text-shadow: 
    #000 2px 0px 0px, #000 -2px 0px 0px,
    #000 0px -2px 0px, #000 0px 2px 0px,
    #000 2px 2px 0px, #000 -2px 2px 0px,
    #000 2px -2px 0px, #000 -2px -2px 0px,
    #000 1px 2px 0px, #000 -1px 2px 0px,
    #000 1px -2px 0px, #000 -1px -2px 0px,
    #000 2px 1px 0px, #000 -2px 1px 0px,
    #000 2px -1px 0px, #000 -2px -1px 0px,
    #000 1px 1px 0px, #000 -1px 1px 0px,
    #000 1px -1px 0px, #000 -1px -1px 0px;
}
@media screen and (min-width:641px){
/*
    PC
*/

/*
#charamodal .scroll {overflow: hidden; overflow-x: scroll; overflow-y: scroll; height: 100%; width: 100%; display: flex; align-items: center; align-content: center;}
#charamodal .scroll.top {align-items: flex-start;}
*/

/*#charamodal .scroll{ overflow: hidden; overflow-y: visible;}*/
#charamodal article {width: 1280px; margin: 0 auto; margin: 120px auto; min-height: 650px; font-size: 0;color: #fff; padding: 222px 135px 0; line-height: 1;}
#charamodal article::after{content: ''; background: url(/thelastremnant/images/chara01/chara.png) left top no-repeat; width: 306px; height: 702px; position: absolute; left: 50%; top: 0; margin: -7px 0 0 220px; z-index: 10;}
#charamodal article img.base {position: absolute; left: 0; top: 0; z-index: -1;}
#charamodal .effectbox {position: relative; width: 100%; height: 100%; transform-origin: center center;}

#charamodal .close {position: absolute; right: 0; top: 0; z-index: 100; margin: -100px 0;}
#charamodal .close a {display:block; width:77px; height:77px; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 5px; transition:0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 77px auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}
#charamodal article .close a:hover{filter: brightness(1.2); transform: scale(0.9); }
#charamodal article dd {font-size: 21px; line-height: 36px; position: relative; z-index: 10; zoom:1;}
#charamodal article p {font-size: 19px; line-height:36px; color: #fff; position: relative; z-index: 20; margin: 130px 0 0 -70px; width: 620px; zoom:1;}
#charamodal div.arr {position: absolute; left: 0; top: 0; z-index: 1000;}
#charamodal div.arr a{background: url(/thelastremnant/images/btn_arr.png) left top no-repeat; background-size: 100% 100%; width: 69px; height: 150px; cursor: pointer; position: relative; top:239px; margin-top: 0; padding: 0; outline: none; display: inline-block; vertical-align:middle; margin: 0 0; left: -55px; transition: 0.8s;}
#charamodal div.arr.next {left: inherit; right: 0;}
#charamodal div.arr.next a {left: 55px; transform: rotate(180deg)}
#charamodal div.arr a:hover{filter: brightness(1.3);}

#charamodal article .back {position: absolute; left:64px; bottom: 48px; margin: 0;}
#charamodal article .back a{display: inline-block; transition: 0.3s;}
#charamodal article .back a:hover{opacity: 0.7;}
#charamodal article .back img {width: 257px; height: 51px;}


}

@media screen and (max-width:1400px) and (min-width:641px){
#charamodal article {width: 1024px; margin: 0 auto; margin: 96px auto; min-height: 520px; font-size: 0;color: #fff; padding: 177px 108px 0;}
#charamodal article img.base {width: 1024px; height: auto;}
#charamodal .close {position: absolute; right: 0; top: 0; z-index: 100; margin: -80px 0;}
#charamodal .close a {display:block; width:62px; height:62px; background-size: 62px auto;}

#charamodal article header {margin-bottom: 8px; white-space: nowrap;}
#charamodal article dd {font-size: 16px; line-height: 28px;}
#charamodal article p {font-size: 15px; line-height:28px; margin: 104px 0 0 -56px; width: 490px;}

#charamodal div.arr a{width: 55px; height: 120px; top:191px; left: -44px;}
#charamodal div.arr.next a {left: 44px; transform: rotate(180deg)}

#charamodal article .back {left:51px; bottom: 38px;}
#charamodal article .back img {width: 207px; height: 41px;}

}


@media screen and (max-width:1400px) and (min-width:641px){
#charamodal article::after{transform: scale(0.8) translate(-3vw,0) !important; transform-origin: left top;}
}



@media screen and (max-width:640px){
/*
    SP
*/
#charamodalbg{z-index: 10000;}
#charamodal {z-index: 10110; width: 100vw; overflow: hidden; min-width: inherit;}
#charamodal .scroll { position: relative; padding:0 0 18.281vw;}

#charamodal article {width: 100vw; margin: 0 auto; margin: 15.625vw auto 0; min-height: 100vw; font-size: 0;color: #fff; padding: 47.688vw 18.0vw 0; line-height: 1;
background: url(/thelastremnant/images/bg_charamodal-sp.jpg) center top no-repeat; background-size: 100vw auto;}
#charamodal article::after{display: none;}
#charamodal article img.base {position: absolute; left: 0; top: 0; z-index: 0; width: 100vw; height: auto;}
#charamodal .effectbox {position: relative; width: 100%; height: 100%; transform-origin: center center;}

#charamodal .close {position: absolute; right: 0; top: 0; z-index: 100; margin: -12.5vw 0;}
#charamodal .close a {display:block; width:9.375vw; height:9.375vw; overflow:hidden; white-space:nowrap; background:url(/thelastremnant/images/btn_close.png) center center no-repeat; position:absolute; top: 0px; right: 4.688vw; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 9.375vw auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}

#charamodal article dd {font-size: 3.75vw; line-height: 5.625vw; position: relative; z-index: 10;}
#charamodal article p {font-size: 2.969vw; line-height:5.625vw; color: #fff; position: relative; z-index: 20; margin: 34vw 0 0 -13.322vw; width: 90.625vw; padding-bottom: 1em;}
#charamodal div.arr {position: absolute; left: 0; top: 0; z-index: 100;}
#charamodal div.arr a{background: url(/thelastremnant/images/btn_arr.png) left top no-repeat; background-size: 100% 100%; width: 10.781vw; height: 23.438vw; cursor: pointer; position: relative; top:60.625vw; margin-top: 0; padding: 0; outline: none; display: inline-block; vertical-align:middle; margin: 0 0; left: -3.125vw;}
#charamodal div.arr.next {left: inherit; right: 0;}
#charamodal div.arr.next a {left: 3.125vw; transform: rotate(180deg)}

#charamodal .back {left:0; bottom:0; z-index: 1000; margin: 0 0; position: absolute; width: 100vw; text-align: center;height: 12.031vw;}
#charamodal .back img {width: auto; height: 12.031vw;}
}


/* anim */
#charamodal article::after{opacity: 0; transform: scale(1.0) translate(0,0); transition:0.1s 0s cubic-bezier(0.165, 0.84, 0.44, 1); filter: blur(10px) brightness(2);}
#charamodal .scroll.charain article::after{opacity: 1; transform: scale(1) translate(0,0); transition:1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); filter: blur(0) brightness(1);}