@charset "utf-8";

#loader.charamodal {background: none;}

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

/* 個別 */
#charamodal article#chara02::after{background-image: url(/thelastremnant/images/chara02/chara.png); width: 286px; height: 656px; margin: -27px 0 0 221px;}
#charamodal article#chara02 p{margin-top: 128px;}
#charamodal article#chara03::after{background-image: url(/thelastremnant/images/chara03/chara.png); width: 615px; height: 804px; margin: -19px 0 0 -2px;}
#charamodal article#chara03 p{margin-top: 128px;}
#charamodal article#chara04::after{background-image: url(/thelastremnant/images/chara04/chara.png); width: 348px; height: 810px; margin: -48px 0 0 239px;}
#charamodal article#chara04 p{margin-top: 128px;}
#charamodal article#chara05::after{background-image: url(/thelastremnant/images/chara05/chara.png); width: 834px; height: 828px; margin: -60px 0 0 145px;}
#charamodal article#chara05 p{margin-top: 0;}
#charamodal article#chara06::after{background-image: url(/thelastremnant/images/chara06/chara.png); width: 457px; height: 645px; margin: 2px 0 0 104px;}
#charamodal article#chara06 p{margin-top: 0;}
#charamodal article#chara07::after{background-image: url(/thelastremnant/images/chara07/chara.png); width: 339px; height: 785px; margin: -16px 0 0 264px;}
#charamodal article#chara07 p{margin-top: 128px;}
#charamodal article#chara09::after{background-image: url(/thelastremnant/images/chara09/chara.png); width: 664px; height: 770px; margin: -22px 0 0 41px;}
#charamodal article#chara09 p{margin-top: 128px;}
#charamodal article#chara10::after{background-image: url(/thelastremnant/images/chara10/chara.png); width: 394px; height: 833px; margin: -113px 0 0 215px;}
#charamodal article#chara10 p{margin-top: 128px;}
#charamodal article#chara11::after{background-image: url(/thelastremnant/images/chara11/chara.png); width: 318px; height: 737px; margin: -26px 0 0 219px;}
#charamodal article#chara11 p{margin-top: 128px;}

/*サブキャラ*/
#charamodal article#sub01::after{background-image: url(/thelastremnant/images/sub01/chara.png); width: 681px; height: 735px; margin: -48px 0 0 81px;}
#charamodal article#sub01 p {margin-top: 88px;}
#charamodal article#sub02::after{background-image: url(/thelastremnant/images/sub02/chara.png); width: 330px; height: 709px; margin: -21px 0 0 204px;}
#charamodal article#sub02 p {margin-top: 88px;}
#charamodal article#sub03::after{background-image: url(/thelastremnant/images/sub03/chara.png); width: 752px; height: 906px; margin: -60px 0 0 79px;}
#charamodal article#sub03 p {margin-top: 88px;}
#charamodal article#sub04::after{background-image: url(/thelastremnant/images/sub04/chara.png); width: 534px; height: 515px; margin: 96px 0 0 70px;}
#charamodal article#sub04 p {margin-top: 124px;}
#charamodal article#sub04 .back{bottom: 23px;}

/*四将軍*/
#charamodal article#chara08::after{background-image: url(/thelastremnant/images/chara08/chara.png); width: 730px; height: 892px; margin: -45px 0 0 5px;}
#charamodal article#chara08 {padding-top: 160px;}
#charamodal article#chara08 p {margin-top: 0;}
#charamodal article#chara08 .sublink {width: 730px; height: 892px; position: absolute; left: 510px; top: -205px; overflow: hidden; z-index: 20;}
#charamodal article#chara08 .sublink img {position: absolute; left: 0; top: 0;opacity: 0; transition: 0.3s;}
#charamodal article#chara08 .sublink a{width: 300px; height: 250px; position: absolute; left: 0; top: 0; display: block; z-index: 100;}
#charamodal article#chara08 .sublink a:nth-child(1) {margin: 0px 0 0 50px;}
#charamodal article#chara08 .sublink a:nth-child(3) {margin: 50px 0 0 360px; width: 250px;}
#charamodal article#chara08 .sublink a:nth-child(2) {margin: 275px 0 0 50px; height: 300px;}
#charamodal article#chara08 .sublink a:nth-child(4) {margin: 300px 0 0 360px; width: 250px; height: 300px;}
#charamodal article#chara08 .sublink a:nth-child(1):hover ~ img.sub01,
#charamodal article#chara08 .sublink a:nth-child(3):hover ~ img.sub02,
#charamodal article#chara08 .sublink a:nth-child(2):hover ~ img.sub03,
#charamodal article#chara08 .sublink a:nth-child(4):hover ~ img.sub04{
-webkit-animation: blink2 2.0s 0s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-moz-animation: blink2 2.0s 0s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
animation: blink2 2.0s 0s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
opacity: 0;}
#charamodal article#chara08 .click {position: absolute; right: 50%; top: -43px; z-index: 100; width: 60px; text-align: right; margin-right: 21px;}
#charamodal article#chara08 .click span {display: inline-block; width: 0; margin-left: 3px; height: 0; border-style: solid; border-width: 8.5px 0 8.5px 15px; border-color: transparent transparent transparent #fff; opacity: 0;
    -webkit-animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
       -moz-animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
            animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}


}


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

/* 個別 */
#charamodal article#chara02 p{margin-top: 104px;}
#charamodal article#chara03 p{margin-top: 104px;}
#charamodal article#chara04 p{margin-top: 104px;}
#charamodal article#chara07 p{margin-top: 104px;}
#charamodal article#chara09 p{margin-top: 104px;}
#charamodal article#chara10 p{margin-top: 104px;}
#charamodal article#chara11 p{margin-top: 104px;}

/*サブキャラ*/
#charamodal article#sub01 p {margin-top: 68px;}
#charamodal article#sub02 p {margin-top: 68px;}
#charamodal article#sub03 p {margin-top: 68px;}
#charamodal article#sub04 p {margin-top: 100px;}
#charamodal article#sub04 .back{bottom: 20px;}

/*四将軍*/
#charamodal article#chara08 {padding-top: 125px;}
#charamodal article#chara08 .sublink {transform: scale(0.8) translate(-3vw,0); transform-origin: left top; margin: 34px 0 0 -100px;}
#charamodal article#chara08 .click {top: -31px; width: 48px; margin-right: 17px;}
#charamodal article#chara08 .click span { margin-left: 2px; height: 0; border-style: solid; border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #fff;}


}



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

#charamodal article#chara02 p{margin-top: 35vw;}
#charamodal article#chara03 p{margin-top: 35vw;}
#charamodal article#chara04{padding-top: 39.375vw;}
#charamodal article#chara04 p{margin-top: 43.281vw;}
#charamodal article#chara05 p{margin-top: 20.313vw; padding-left: 5.156vw;}
#charamodal article#chara06 p{margin-top: 42.969vw;}
#charamodal article#chara07 p{margin-top: 35vw;}
#charamodal article#chara09{padding-top: 39.375vw;}
#charamodal article#chara09 p{margin-top: 43.281vw;}
#charamodal article#chara10{padding-top: 39.375vw;}
#charamodal article#chara10 p{margin-top: 43.281vw;}
#charamodal article#chara11 p{margin-top: 35vw;}

#charamodal article#chara04 img.base{margin-top: -2.656vw;}
#charamodal article#chara05 img.base{margin-top: -18.75vw;}
#charamodal article#chara10 img.base{margin-top: -14.063vw;}

/*四将軍*/
#charamodal article#chara08 img.base{margin-top: -2.75vw;}
#charamodal article#chara08 p {margin-top: 63.75vw;}
#charamodal article#chara08 .sublink {width: 100vw; height: 70vw; position: absolute; left: 0; top: -45vw; overflow: hidden; z-index: 20; z-index: 10;}
#charamodal article#chara08 .sublink img {display: none;}
#charamodal article#chara08 .sublink a{display:block; width: 20vw; height: 25vw; position: absolute; left: 0; top: 0; z-index: 100;}
#charamodal article#chara08 .sublink a:nth-child(1) {margin: 0 0 0 15vw; width: 35vw; height: 29vw;}
#charamodal article#chara08 .sublink a:nth-child(3) {margin: 0 0 0 50vw; width: 30vw; height: 30vw;}
#charamodal article#chara08 .sublink a:nth-child(2) {margin: 30vw 0 0 22vw; width: 26vw;}
#charamodal article#chara08 .sublink a:nth-child(4) {margin: 35vw 0 0 50vw; width: 30vw;}
#charamodal article#chara08 .click {margin-right:0; position: absolute; left: 0; top: 1.8vw; z-index: 100;}
#charamodal article#chara08 .click span { margin-left: 0.469vw; width: 0; height: 0; border-style: solid; border-width: 1.406vw 0 1.406vw 2.5vw; border-color: transparent transparent transparent #fff;}


#charamodal article#sub01 {height: 125vw; padding-top: 39.375vw;}
#charamodal article#sub01 p{margin-top: 43.281vw;}
#charamodal article#sub01 img.base{margin-top: -4.063vw;}
#charamodal article#sub02 {height: 126.25vw;}
#charamodal article#sub02 p{margin-top: 35vw;}
#charamodal article#sub03 {height: 126.094vw; padding-top: 39.375vw;}
#charamodal article#sub03 p{margin-top: 43.281vw;}
#charamodal article#sub03 img.base{margin-top: -8.438vw;}
#charamodal article#sub04 {height: 125vw; padding-top: 39.375vw;}
#charamodal article#sub04 p{margin-top: 43.281vw;}

}

#charamodal article#chara08 .click span {
-webkit-animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
-moz-animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
animation: blink 1.75s 0.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
opacity: 0;
}
#charamodal article#chara08 .click span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s;}
#charamodal article#chara08 .click span:nth-of-type(2) { -webkit-animation-delay: .15s; animation-delay: .15s;}
#charamodal article#chara08 .click span:nth-of-type(3) { -webkit-animation-delay: .3s; animation-delay: .3s;}

@-webkit-keyframes blink {0% {opacity: 0;} 50%{opacity: 1;} 100% {opacity: 0;}}
@keyframes blink {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }
@-webkit-keyframes blink2 {0% {opacity: 0;} 50%{opacity: 0.3;} 100% {opacity: 0;}}
@keyframes blink2 {0% {opacity: 0;} 50% {opacity: 0.3;} 100% {opacity: 0;} }