.characterMain {
    position: relative;
    overflow: hidden
}

@media screen and (min-width: 767px) and (max-width: 1600px) {
    .characterMain {
        height: 67.1875vw
    }
}

.characterMain img {
    width: 100%;
    height: auto
}

.characterMain .bgtop {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 3
}

.characterMain .bgbottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 3
}

.characterMain .grayleft {
    width: 425px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

@media screen and (max-width: 1600px) {
    .characterMain .grayleft {
        width: 26.5625vw
    }
}

.characterMain .grayright {
    width: 898px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1
}

@media screen and (max-width: 1600px) {
    .characterMain .grayright {
        width: 56.125vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .grayright {
        width: 29.98696vw
    }
}

.characterMain .characterList {
    position: relative;
    z-index: 10;
    height: 1075px;
    overflow: hidden
}

@media screen and (max-width: 1600px) {
    .characterMain .characterList {
        height: 67.1875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .characterList {
        height: 164.2764vw
    }
}

.characterMain .imgCol {
    box-sizing: border-box;
    position: relative;
    z-index: 10
}

.characterMain .chara {
    opacity: 0
}

.characterMain .bgname {
    opacity: 0
}

.characterMain .bgline {
    margin: auto;
    width: 1290px;
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0;
    z-index: 1
}

@media screen and (max-width: 1600px) {
    .characterMain .bgline {
        width: 80.625vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .bgline {
        width: 94.91525vw;
        left: auto
    }
}

.characterMain .waku {
    margin: auto;
    width: 1290px;
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    z-index: 2
}

@media screen and (max-width: 1600px) {
    .characterMain .waku {
        width: 80.625vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .waku {
        width: 90.22164vw
    }
}

.characterMain .bgname {
    width: 700px;
    position: absolute;
    bottom: 170px;
    left: calc((100% - 1260px) / 2 + 10px);
    z-index: 1
}

@media screen and (max-width: 1600px) {
    .characterMain .bgname {
        width: 38.875vw;
        bottom: 8.5vw;
        left: calc((100% - 78.75vw) / 2 + 0.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .bgname {
        margin: auto;
        width: 84.375vw;
        bottom: 9.12647vw;
        left: 0;
        right: 0
    }
}

.characterMain .profileTxt {
    width: 588px;
    height: 531px;
    background: url("../images/character/txt_bg.webp") no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 10
}

@media screen and (max-width: 1600px) {
    .characterMain .profileTxt {
        width: 36.75vw;
        height: 33.1875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .profileTxt {
        background: none;
        margin: auto;
        width: auto;
        height: auto;
        bottom: auto;
        left: initial;
        right: initial
    }
}

.characterMain .profileTxtCol {
    position: absolute;
    top: 40px;
    right: calc((100% - 1260px) / 2 - 20px);
    z-index: 10
}

@media screen and (max-width: 1600px) {
    .characterMain .profileTxtCol {
        right: calc((100% - 78.75vw) / 2 - 1.25vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .profileTxtCol {
        position: absolute;
        right: 0;
        top: 0
    }
}

.characterMain .profileTxtinner {
    width: 360px;
    position: absolute;
    top: 50%;
    left: 53%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 1600px) {
    .characterMain .profileTxtinner {
        width: 22.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .profileTxtinner {
        position: static;
        width: auto;
        top: initial;
        left: initial;
        -webkit-transform: none;
        transform: none
    }
}

.characterMain .detail {
    font-size: 18px
}

@media screen and (max-width: 1600px) {
    .characterMain .detail {
        font-size: 1.125vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta .detail {
        position: absolute;
        font-size: 2.60756vw;
        width: 35.20209vw;
        right: 3.91134vw;
        top: 63.88527vw;
        z-index: 10
    }
    .characterMain  .detail {
        position: absolute;
        font-size: 2.60756vw;
        width: 38.20209vw;
        right: 58.91134vw;
        top: 94.88527vw;
        z-index: 10;
    }
}

@media screen and (max-width: 375px) {
    .characterMain .detail {
        font-size: 2.66667vw
    }
}

.characterMain .bt_item {
    margin-top: -45px;
    padding-left: 110px;
    width: 222px;
    position: relative;
    z-index: 10
}

@media screen and (max-width: 1600px) {
    .characterMain .bt_item {
        margin-top: -2.8125vw;
        padding-left: 6.875vw;
        width: 13.875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .bt_item {
        position: absolute;
        width: 37.02738vw;
        right: 5.21512vw;
        top: 106.91004vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .bt_item {
        top: 109.33333vw
    }
}

.characterMain .chara {
    width: 965px;
    padding-left: calc((100% - 1260px) / 2 - 80px);
    position: relative;
    z-index: 2;
    padding-top: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .chara {
        width: 60.3125vw;
        padding-top: 1.25vw;
        padding-left: calc((100% - 78.75vw) / 2 - 5vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .chara {
        padding-left: 0;
        margin-left: -19.55671vw;
        padding-top: 7.82269vw;
        width: 130.3781vw
    }
}

.characterMain .chara_name {
    width: 290px;
    padding-bottom: 4px
}

@media screen and (max-width: 1600px) {
    .characterMain .chara_name {
        width: 18.125vw;
        padding-bottom: .25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .chara_name {
        width: 37.80965vw;
        padding-bottom: 0;
        position: absolute;
        right: 7.82269vw;
        top: 10.43025vw
    }
    .characterMain .tiasha_dw .chara_name {
        width: 37.80965vw;
        padding-bottom: 0;
        position: absolute;
        right: 55.82269vw;
        top: 40.43025vw;
    }
}

.characterMain .chara_cv {
    width: 193px;
    padding-bottom: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .chara_cv {
        width: 12.0625vw;
        padding-bottom: 1.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .chara_cv {
        width: 37.54889vw;
        position: absolute;
        right: 7.82269vw;
        top: 18.25293vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .gradation {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .bgline.spleft {
        left: 0 !important;
        right: auto
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .grayleft.spright {
        right: 0 !important;
        left: auto
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .grayright.spleft {
        left: 0 !important;
        right: auto
    }
}

.characterMain .tiasha .chara {
    width: 590px;
    padding-left: calc((100% - 1164px) / 2);
    position: relative;
    z-index: 30;
    padding-top: 42px
}

@media screen and (max-width: 1600px) {
    .characterMain .tiasha .chara {
        width: 36.875vw;
        padding-left: calc((100% - 72.75vw) / 2);
        padding-top: 10.625vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .chara {
        margin-top: -6.5189vw;
        padding-left: 19.55671vw;
        width: 78.22686vw
    }
}

.characterMain .tiasha .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .tiasha .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .profileTxtinner {
        width: auto
    }
}

.characterMain .tiasha .chara_name {
    width: 316px;
    padding-bottom: 4px
}

@media screen and (max-width: 1600px) {
    .characterMain .tiasha .chara_name {
        width: 19.75vw;
        padding-bottom: .25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .chara_name {
        width: 41.19948vw;
        padding-bottom: 0;
        right: 50.84746vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .chara_cv {
        width: 37.54889vw;
        position: absolute;
        right: 54.7588vw;
        top: 18.25293vw
    }
}

.characterMain .tiasha .bgname {
    width: 700px;
    bottom: 88px
}

@media screen and (max-width: 1600px) {
    .characterMain .tiasha .bgname {
        width: 38.875vw;
        bottom: 11vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .bgname {
        margin: auto;
        /*width: 65.625vw;*/
        bottom: -13.03781vw;
        width: 84.375vw;
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .bt_item {
        right: 2.2399vw;
        top: 104.73272vw;
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tiasha .detail {
        right: 2.60756vw;
        top: 65.18905vw
    }
}

.characterMain .luluce .chara {
    width: 650px;
    padding-left: calc((100% - 1164px) / 2);
    position: relative;
    z-index: 30;
    padding-top: 42px
}

@media screen and (max-width: 1600px) {
    .characterMain .luluce .chara {
        width: 37.5vw;
        padding-left: calc((100% - 72.75vw) / 2);
        padding-top: 2.625pxvw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .chara {
        margin-top: -6.5189vw;
        padding-left: 23.46806vw;
        width: 80.83442vw
    }
}

.characterMain .luluce .chara img {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
}

.characterMain .luluce .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .luluce .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .profileTxtinner {
        width: auto
    }
}

.characterMain .luluce .chara_name {
    width: 262px;
    padding-bottom: 4px
}

@media screen and (max-width: 1600px) {
    .characterMain .luluce .chara_name {
        width: 16.375vw;
        padding-bottom: .25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .chara_name {
        width: 34.15906vw;
        padding-bottom: 0;
        right: 58.01825vw;
        top: 9.12647vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .chara_cv {
        width: 37.54889vw;
        position: absolute;
        right: 54.7588vw;
        top: 16.94915vw
    }
}

.characterMain .luluce .bgname {
    width: 700px;
    bottom: 180px
}

@media screen and (max-width: 1600px) {
    .characterMain .luluce .bgname {
        width: 38.875vw;
        bottom: 4.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .bgname {
        width: 84.375vw;
        bottom: -6.5189vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .bt_item {
        right: 6.5189vw;
        top: 110.82138vw
    }
}

@media screen and (max-width: 560px) {
    .characterMain .luluce .bt_item {
        top: 108.92857vw
    }
}

@media screen and (max-width: 420px) {
    .characterMain .luluce .bt_item {
        top: 116.66667vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .luluce .detail {
        width: 37.80965vw;
        right: 3.91134vw;
        top: 77.57497vw
    }
}

@media screen and (max-width: 420px) {
    .characterMain .luluce .detail {
        top: 78.57143vw
    }
}

.characterMain .alka .chara {
    padding-left: calc((100% - 1164px) / 2 - 290px)
}

@media screen and (max-width: 1600px) {
    .characterMain .alka .chara {
        padding-left: calc((100% - 72.75vw) / 2 - 18.13vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .alka .chara {
        margin-top: -7.82269vw;
        padding-left: 11.73403vw;
        width: 127.77053vw
    }
}

.characterMain .alka .chara_name {
    width: 268px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .alka .chara_name {
        width: 16.75vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .alka .chara_name {
        width: 34.94133vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .alka .bgname {
        width: 81.25vw;
        bottom: -3.91134vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .alka .bt_item {
        top: 110.34029vw;
        right: 60.03781vw;
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .alka .detail {
        width: 36.50587vw;
        right: 57.36636vw;
        top: 83.44198vw
    }
}

.characterMain .far .chara {
    margin-top: -145px;
    width: 971px;
    padding-left: calc((100% - 1260px) / 2 - 190px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .far .chara {
        margin-top: -8.4375vw;
        width: 59.4375vw;
        padding-left: calc((100% - 78.75vw) / 2 - 11.88vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .chara {
        margin-top: -28.03129vw;
        width: 119.94785vw;
        padding-left: 6.5189vw
    }
}

.characterMain .far .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .far .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .profileTxtinner {
        width: auto
    }
}

.characterMain .far .chara_name {
    padding-bottom: 24px;
    width: 274px
}

@media screen and (max-width: 1600px) {
    .characterMain .far .chara_name {
        width: 17.125vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .chara_name {
        width: 35.7236vw;
        padding-bottom: 0;
        right: 53.45502vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .bgname {
        width: 81.25vw;
        bottom: -10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .bt_item {
        top: 112.03651vw;
        right: 5.64537vw;
    }
}

@media screen and (max-width: 375px) {
    .characterMain .far .bt_item {
        top: 107.33333vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .far .detail {
        width: 46.93611vw;
        right: 5.21512vw;
        top: 84.74576vw
    }
}

.characterMain .lirinel .chara {
    padding-top: 50px;
    width: 642px;
    padding-left: calc((100% - 1260px) / 2 + 100px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .lirinel .chara {
        width: 40.125vw;
        padding-left: calc((100% - 78.75vw) / 2 + 6.25vw);
        padding-top: 4.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .chara {
        margin-top: 2.60756vw;
        padding-left: 16.94915vw;
        width: 83.44198vw
    }
}

.characterMain .lirinel .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .lirinel .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .profileTxtinner {
        width: auto
    }
}

.characterMain .lirinel .chara_name {
    width: 262px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .lirinel .chara_name {
        width: 16.375vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .chara_name {
        width: 34.15906vw
    }
}

.characterMain .lirinel .bgname {
    width: 700px;
    bottom: 0
}

@media screen and (max-width: 1600px) {
    .characterMain .lirinel .bgname {
        width: 38.875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .bgname {
        width: 84.375vw;
        bottom: -20.8605vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .bt_item {
        top: 113.42894vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .lirinel .detail {
        width: 39.11343vw;
        right: 2.60756vw;
        top: 18.25293vw
    }
}

.characterMain .laranel .chara {
    width: 733px;
    padding-left: calc((100% - 1260px) / 2);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .laranel .chara {
        width: 45.8125vw;
        padding-left: calc((100% - 78.75vw) / 2)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .chara {
        margin-top: -10.43025vw;
        padding-left: 22.16428vw;
        width: 83.44198vw
    }
}

.characterMain .laranel .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .laranel .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .profileTxtinner {
        width: auto
    }
}

.characterMain .laranel .chara_name {
    width: 262px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .laranel .chara_name {
        width: 16.375vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .chara_name {
        width: 34.15906vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .bgname {
        bottom: -22.81617vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .bt_item {
        top: 113.42894vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .laranel .detail {
        width: 33.89831vw;
        right: 57.36636vw;
        top: 75.6193vw
    }
}

.characterMain .power .chara {
    width: 1000px;
    padding-top: 0px;
    padding-left: calc((100% - 1260px) / 2 - 180px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .power .chara {
        width: 62.5vw;
        padding-top: 0;
        padding-left: calc((100% - 78.75vw) / 2 - 11.25vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .chara {
        padding-top: 0vw;
        width: 112.12516vw;
        padding-left: 20.8605vw
    }
}

.characterMain .power .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .power .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .profileTxtinner {
        width: auto
    }
}

.characterMain .power .chara_name {
    width: 291px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .power .chara_name {
        width: 18.1875vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .chara_name {
        width: 37.94003vw;
        padding-bottom: 0;
        right: 57.36636vw;
        top: 43.02477vw
    }
}

.characterMain .power .bgname {
    bottom: 223px
}

@media screen and (max-width: 1600px) {
    .characterMain .power .bgname {
        bottom: 13.9375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .bgname {
        bottom: -13.03781vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .bt_item {
        right: 59.97392vw;
        top: 102.9987vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .power .bt_item {
        top: 104vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .power .detail {
        width: 36.50587vw;
        right: 57.36636vw;
        top: 59.97392vw
    }
}

.characterMain .neverlia .chara {
    width: 639px;
    padding-left: calc((100% - 1260px) / 2 + 90px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .neverlia .chara {
        width: 39.9375vw;
        padding-left: calc((100% - 78.75vw) / 2 + 5.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .chara {
        margin-top: -3.91134vw;
        width: 87.35332vw;
        padding-left: 43.02477vw
    }
}

.characterMain .neverlia .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .neverlia .profileTxtinner {
        width: 23.75vw
    }
}

.characterMain .neverlia .chara_name {
    width: 288px;
    padding-bottom: 4px
}

@media screen and (max-width: 1600px) {
    .characterMain .neverlia .chara_name {
        width: 18vw;
        padding-bottom: .25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .chara_name {
        width: 37.54889vw;
        padding-bottom: 0;
        right: 57.36636vw;
        top: 13.03781vw
    }
}

.characterMain .neverlia .chara_cv {
    width: 193px;
    padding-bottom: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .neverlia .chara_cv {
        width: 12.0625vw;
        padding-bottom: 1.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .chara_cv {
        width: 37.54889vw;
        position: absolute;
        right: 57.36636vw;
        top: 20.8605vw
    }
}

.characterMain .neverlia .bgname {
    bottom: 310px
}

@media screen and (max-width: 1600px) {
    .characterMain .neverlia .bgname {
        bottom: 17.4375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .bgname {
        bottom: 26.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .bt_item {
        top: 107.34029vw;
        right: 57.36636vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .neverlia .detail {
        width: 35.20209vw;
        right: 61.27771vw;
        top: 31.29074vw
    }
}

.characterMain .siana .chara {
    width: 1000px;
    padding-top: 52px;
    padding-left: calc((100% - 1260px) / 2 - 80px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .siana .chara {
        width: 62.5vw;
        padding-top: 3.25vw;
        padding-left: calc((100% - 78.75vw) / 2 - 5vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .chara {
        padding-top: 1.30378vw;
        width: 112.12516vw;
        padding-left: 27.3794vw
    }
}

.characterMain .siana .chara img {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg)
}

.characterMain .siana .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .siana .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .profileTxtinner {
        width: auto
    }
}

.characterMain .siana .chara_name {
    width: 268px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .siana .chara_name {
        width: 16.75vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .chara_name {
        width: 34.94133vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 10.43025vw
    }
}

.characterMain .siana .bt_item {
    padding-left: 340px
}

@media screen and (max-width: 1600px) {
    .characterMain .siana .bt_item {
        padding-left: 21.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .bt_item {
        top: 104.73272vw;
        right: 57.36636vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .siana .bt_item {
        top: 104.66667vw
    }
}

.characterMain .siana .bgname {
    bottom: 310px
}

@media screen and (max-width: 1600px) {
    .characterMain .siana .bgname {
        bottom: 18.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .bgname {
        bottom: -5.21512vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .siana .detail {
        width: 36.50587vw;
        right: 55.41069vw;
        top: 66.49283vw
    }
}

.characterMain .ilshana .chara {
    width: 790px;
    padding-left: calc((100% - 1260px) / 2 - 90px);
    padding-top: 8px;
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .ilshana .chara {
        width: 49.375vw;
        padding-top: .5vw;
        padding-left: calc((100% - 78.75vw) / 2 - 5.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .chara {
        margin-top: -3.91134vw;
        width: 104.30248vw;
        padding-left: 10.43025vw
    }
}

.characterMain .ilshana .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .ilshana .profileTxtinner {
        width: 23.75vw
    }
}

.characterMain .ilshana .chara_name {
    width: 297px;
    padding-bottom: 4px
}

@media screen and (max-width: 1600px) {
    .characterMain .ilshana .chara_name {
        width: 18.5625vw;
        padding-bottom: .25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .chara_name {
        width: 38.72229vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 10.43025vw
    }
}

.characterMain .ilshana .chara_cv {
    width: 193px;
    padding-bottom: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .ilshana .chara_cv {
        width: 12.0625vw;
        padding-bottom: 1.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .chara_cv {
        width: 37.54889vw;
        position: absolute;
        right: 54.7588vw;
        top: 18.25293vw
    }
}

.characterMain .ilshana .bgname {
    width: 700px;
    bottom: 235px
}

@media screen and (max-width: 1600px) {
    .characterMain .ilshana .bgname {
        width: 38.875vw;
        bottom: 12.9375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .bgname {
        width: 84.375vw;
        bottom: 6.5189vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .bt_item {
        top: 110.82138vw;
        right: 57.36636vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .ilshana .detail {
        width: 39.11343vw;
        right: 53.45502vw;
        top: 63.88527vw
    }
}

.characterMain .stipla .chara {
    width: 1275px;
    padding-top: 52px;
    padding-left: 0;
    margin-left: -150px;
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .stipla .chara {
        width: 79.6875vw;
        padding-top: 3.25vw;
        padding-left: 0;
        margin-left: -11.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .chara {
        padding-top: 11.73403vw;
        width: 164.2764vw;
        padding-left: 2.60756vw;
        margin-left: -32.59452vw
    }
}

.characterMain .stipla .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .stipla .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .profileTxtinner {
        width: auto
    }
}

.characterMain .stipla .chara_name {
    width: 288px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .stipla .chara_name {
        width: 18vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .chara_name {
        width: 37.54889vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .bt_item {
        top: 66.49283vw;
        right: 57.36636vw
    }
}

.characterMain .stipla .bgname {
    width: 700px;
    bottom: 169px
}

@media screen and (max-width: 1600px) {
    .characterMain .stipla .bgname {
        width: 43.75vw;
        bottom: 10.5625vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .bgname {
        width: 84.375vw;
        bottom: 0vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .stipla .detail {
        width: 40.41721vw;
        right: 50.84746vw;
        top: 27.3794vw
    }
}

.characterMain .tukirna .chara {
    width: 813px;
    padding-top: 10px;
    padding-left: calc((100% - 1260px) / 2 - 30px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .tukirna .chara {
        width: 50.8125vw;
        padding-top: .625vw;
        padding-left: calc((100% - 78.75vw) / 2 - 1.88vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .chara {
        padding-top: 1.30378vw;
        width: 112.12516vw;
        padding-left: 28.68318vw
    }
}

.characterMain .tukirna .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .tukirna .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .profileTxtinner {
        width: auto
    }
}

.characterMain .tukirna .chara_name {
    width: 288px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .tukirna .chara_name {
        width: 18vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .chara_name {
        width: 37.54889vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .bt_item {
        top: 108.64407vw;
        right: 0vw
    }
}

.characterMain .tukirna .bgname {
    width: 700px;
    bottom: 140px
}

@media screen and (max-width: 1600px) {
    .characterMain .tukirna .bgname {
        width: 43.75vw;
        bottom: 7.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .bgname {
        width: 84.375vw;
        bottom: 3.91134vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .tukirna .detail {
        width: 32.59452vw;
        right: 59.97392vw;
        top: 78.22686vw
    }
}

.characterMain .eliene .chara {
    width: 639px;
    padding-left: calc((100% - 1260px) / 2 + 90px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .eliene .chara {
        width: 39.9375vw;
        padding-left: calc((100% - 78.75vw) / 2 + 5.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .chara {
        margin-top: -1.30378vw;
        width: 87.35332vw;
        padding-left: 0vw
    }
}

.characterMain .eliene .profileTxtinner {
    width: 455px
}

@media screen and (max-width: 1600px) {
    .characterMain .eliene .profileTxtinner {
        width: 28.4375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .profileTxtinner {
        width: auto
    }
}

.characterMain .eliene .chara_name {
    width: 286px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .eliene .chara_name {
        width: 18vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .chara_name {
        width: 37.28814vw
    }
}

@media only screen and (max-width: 767px) and (max-width: 767px) {
    .characterMain .eliene .chara_name {
        width: 37.28814vw;
        padding-bottom: 0;
        position: absolute;
        right: 7.82269vw;
        top: 10.43025vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .bt_item {
        top: 84.74576vw;
        right: 7.82269vw
    }
}

.characterMain .eliene .bgname {
    width: 700px;
    bottom: 150px
}

@media screen and (max-width: 1600px) {
    .characterMain .eliene .bgname {
        width: 43.75vw;
        bottom: 8.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .bgname {
        width: 84.375vw;
        bottom: 7.82269vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .eliene .detail {
        width: 41.72099vw;
        right: 0vw;
        top: 48.2399vw
    }
}

.characterMain .yufia .chara {
    padding-top: 50px;
    width: 900px;
    padding-left: calc((100% - 1260px) / 2);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .yufia .chara {
        width: 56.25vw;
        padding-left: calc((100% - 78.75vw) / 2);
        padding-top: 4.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .chara {
        margin-top: 3.25945vw;
        padding-left: 32.59452vw;
        width: 130.3781vw
    }
}

.characterMain .yufia .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .yufia .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .profileTxtinner {
        width: auto
    }
}

.characterMain .yufia .chara_name {
    width: 262px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .yufia .chara_name {
        width: 16.375vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .chara_name {
        right: 57.36636vw;
        width: 34.15906vw
    }
}

.characterMain .yufia .bgname {
    width: 700px;
    bottom: 40px
}

@media screen and (max-width: 1600px) {
    .characterMain .yufia .bgname {
        width: 38.875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .bgname {
        width: 84.375vw;
        bottom: -2.60756vw
    }
}

.characterMain .yufia .bt_item {
    padding-left: 340px
}

@media screen and (max-width: 1600px) {
    .characterMain .yufia .bt_item {
        padding-left: 21.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .bt_item {
        top: 58.67014vw;
        right: 57.36636vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .yufia .detail {
        width: 39.11343vw;
        right: 50.84746vw;
        top: 19.55671vw
    }
}

.characterMain .replero .chara {
    margin-top: -18px;
    width: 1450px;
    padding-left: calc((100% - 1260px) / 2 - 212px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .replero .chara {
        margin-top: -1.125vw;
        width: 90.625vw;
        padding-left: calc((100% - 78.75vw) / 2 - 11.88vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .chara {
        margin-top: 5.60626vw;
        width: 202.08605vw;
        padding-left: 0;
        margin-left: -35.20209vw
    }
}

.characterMain .replero .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .replero .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .profileTxtinner {
        width: auto
    }
}

.characterMain .replero .chara_name {
    padding-bottom: 24px;
    width: 274px
}

@media screen and (max-width: 1600px) {
    .characterMain .replero .chara_name {
        width: 17.125vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .chara_name {
        width: 35.7236vw;
        padding-bottom: 0;
        top: 10.43025vw
    }
}

.characterMain .replero .bgname {
    width: 700px;
    bottom: 416px
}

@media screen and (max-width: 1600px) {
    .characterMain .replero .bgname {
        width: 43.75vw;
        bottom: 26vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .bgname {
        width: 81.25vw;
        bottom: 65.18905vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .bt_item {
        right: 54.7588vw;
        top: 35.20209vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .replero .bt_item {
        top: 37.80965vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .replero .detail {
        right: 54.7588vw;
        top: 9.38722vw
    }
}

.characterMain .rishetta_fw .chara {
    margin-top: 0;
    width: 950px;
    padding-left: calc((100% - 1260px) / 2 - 222px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .rishetta_fw .chara {
        margin-top: 0vw;
        width: 53.125vw;
        padding-left: calc((100% - 78.75vw) / 2 - 11.88vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .chara {
        margin-top: -4vw;
        width: 120vw;
        padding-left: 0;
        margin-left: -46vw
    }
}

.characterMain .rishetta_fw .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .rishetta_fw .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .profileTxtinner {
        width: auto
    }
}

.characterMain .rishetta_fw .chara_name {
    padding-bottom: 10px;
    width: 274px
}

@media screen and (max-width: 1600px) {
    .characterMain .rishetta_fw .chara_name {
        width: 17.125vw;
        padding-bottom: .625vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .chara_name {
        width: 33vw;
        padding-bottom: 0;
        top: 50vw;
        right: 7.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .chara_cv {
        position: absolute;
        width: 30vw;
        top: 57vw;
        right: 7.5vw
    }
}

.characterMain .rishetta_fw .bgname {
    width: 700px;
    bottom: 300px
}

@media screen and (max-width: 1600px) {
    .characterMain .rishetta_fw .bgname {
        width: 38.875vw;
        bottom: 9.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .bgname {
        width: 80vw;
        bottom: 12vw;
        right: -7vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .bt_item {
        top: 113vw;
        right: 6vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rishetta_fw .detail {
        width: 35vw;
        top: 68vw;
        right: 6vw
    }
}

.characterMain .nautilica .chara {
    width: 813px;
    padding-top: 10px;
    padding-left: calc((100% - 1260px) / 2 - 30px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .nautilica .chara {
        width: 50.8125vw;
        padding-top: .625vw;
        padding-left: calc((100% - 78.75vw) / 2 - 1.88vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .chara {
        padding-top: 1.30378vw;
        width: 112.12516vw;
        padding-left: 41.72099vw
    }
}

.characterMain .nautilica .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .nautilica .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .profileTxtinner {
        width: auto
    }
}

.characterMain .nautilica .chara_name {
    width: 288px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .nautilica .chara_name {
        width: 18vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .chara_name {
        width: 37.54889vw;
        padding-bottom: 0;
        right: 54.7588vw;
        top: 29.98696vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .bt_item {
        top: 110.82138vw;
        right: 1.30378vw
    }
}

.characterMain .nautilica .bgname {
    width: 630px;
    bottom: 150px
}

@media screen and (max-width: 1600px) {
    .characterMain .nautilica .bgname {
        width: 43.75vw;
        bottom: 9.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .bgname {
        width: 86.04954vw;
        bottom: 9.12647vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nautilica .detail {
        width: 35.20209vw;
        right: 57.36636vw;
        top: 71.70795vw
    }
}

.characterMain .sourei .chara {
    width: 1020px;
    padding-left: calc((100% - 1260px) / 2 - 163px);
    position: relative;
    z-index: 2;
    padding-top: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .sourei .chara {
        width: 63.75vw;
        padding-top: 1.25vw;
        padding-left: calc((100% - 78.75vw) / 2 - 10.1vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sourei .chara {
        padding-left: 0;
        margin-left: -17vw;
        top: -4vw;
        width: 130.3781vw
    }
}

.characterMain .sourei .chara_name {
    width: 262px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .sourei .chara_name {
        width: 18vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sourei .chara_name {
        width: 34.15906vw
    }
}

.characterMain .sourei .bgname {
    width: 700px;
    bottom: 170px
}

@media screen and (max-width: 1600px) {
    .characterMain .sourei .bgname {
        width: 38.875vw;
        bottom: 8.875vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sourei .bgname {
        margin: auto;
        width: 79vw;
        bottom: -5vw;
        left: 0;
        right: 0
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sourei .bt_item {
        top: 113vw;
        right: 58vw
    }
}

.characterMain .sourei .detail {
    width: 107%
}

@media only screen and (max-width: 767px) {
    .characterMain .sourei .detail {
        width: 40vw;
        top: 80vw;
        right: 52vw
    }
}

.characterMain .sestieh .chara {
    width: 612px;
    padding-left: calc((100% - 1260px) / 2 - 0px);
    position: relative;
    z-index: 2;
    padding-top: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .sestieh .chara {
        width: 38.25vw;
        padding-top: 1.25vw;
        padding-left: calc((100% - 78.75vw) / 2 - 0vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sestieh .chara {
        padding-left: 0;
        margin-left: 12vw;
        top: 0;
        width: 79.7914vw
    }
}

.characterMain .sestieh .chara_name {
    width: 262px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .sestieh .chara_name {
        width: 23.125vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sestieh .chara_name {
        width: 31.81226vw;
        right: 58.01825vw;
        top: 73.66362vw
    }
}

.characterMain .sestieh .bgname {
    width: 700px;
    bottom: 200px
}

@media screen and (max-width: 1600px) {
    .characterMain .sestieh .bgname {
        width: 38.875vw;
        bottom: 11.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sestieh .bgname {
        margin: auto;
        width: 79vw;
        bottom: 2vw;
        left: 0;
        right: 0
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .sestieh .bt_item {
        top: 116vw;
        right: 58vw
    }
}

.characterMain .sestieh .detail {
    width: 107%
}

@media only screen and (max-width: 767px) {
    .characterMain .sestieh .detail {
        width: 40vw;
        top: 82vw;
        right: 52vw
    }
}

.characterMain .nyalenti .chara {
    width: 1000px;
    padding-left: calc((100% - 1060px) / 2 - 200px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .nyalenti .chara {
        width: 62.5vw;
        padding-left: calc((100% - 98.75vw) / 2 - 5vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .chara {
        padding-top: 1.30378vw;
        width: 112.12516vw;
        padding-left: 24.77184vw;
        top: 7.82269vw
    }
}

.characterMain .nyalenti .chara img {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg)
}

.characterMain .nyalenti .profileTxtinner {
    width: 380px
}

@media screen and (max-width: 1600px) {
    .characterMain .nyalenti .profileTxtinner {
        width: 23.75vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .profileTxtinner {
        width: auto
    }
}

.characterMain .nyalenti .chara_name {
    width: 268px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .nyalenti .chara_name {
        width: 16.75vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .chara_name {
        width: 34.94133vw;
        padding-bottom: 0;
        right: 57.10561vw;
        top: 10.43025vw
    }
}

.characterMain .nyalenti .bt_item {
    padding-left: 340px
}

@media screen and (max-width: 1600px) {
    .characterMain .nyalenti .bt_item {
        padding-left: 21.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .bt_item {
        top: 47.19687vw;
        right: 56.06258vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .nyalenti .bt_item {
        top: 114.93333vw
    }
}

.characterMain .nyalenti .bgname {
    bottom: 150px
}

@media screen and (max-width: 1600px) {
    .characterMain .nyalenti .bgname {
        bottom: 9.375vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .bgname {
        margin: auto;
        width: 79vw;
        bottom: -20vw;
        left: 0;
        right: 0
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .nyalenti .detail {
        width: 36.50587vw;
        right: 55.41069vw;
        top: 20.8605vw
    }
}

.characterMain .shuremi .chara {
    width: 639px;
    padding-left: calc((100% - 1260px) / 2 + 90px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .shuremi .chara {
        width: 39.9375vw;
        padding-left: calc((100% - 78.75vw) / 2 + 5.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .shuremi .chara {
        margin-top: -1.95567vw;
        width: 87.35332vw;
        padding-left: 27.3794vw
    }
}

.characterMain .shuremi .chara_name {
    width: 232px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .shuremi .chara_name {
        width: 15.625vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .shuremi .chara_name {
        width: 27.90091vw;
        right: 62.58149vw;
        top: 10.43025vw
    }
}

.characterMain .shuremi .bgname {
    width: 700px;
    bottom: 200px
}

@media screen and (max-width: 1600px) {
    .characterMain .shuremi .bgname {
        width: 38.875vw;
        bottom: 11.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .shuremi .bgname {
        margin: auto;
        width: 79vw;
        bottom: 11vw;
        left: 0;
        right: 0
    }
}

.characterMain .shuremi .bt_item {
    padding-left: 340px
}

@media screen and (max-width: 1600px) {
    .characterMain .shuremi .bt_item {
        padding-left: 21.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .shuremi .bt_item {
        top: 118vw;
        right: 8.86571vw
    }
}

.characterMain .shuremi .detail {
    width: 107%
}

@media only screen and (max-width: 767px) {
    .characterMain .shuremi .detail {
        width: 40vw;
        top: 92vw;
        right: 6vw
    }
}

.characterMain .rydira .chara {
    width: 639px;
    padding-top: 130px;
    padding-left: calc((100% - 1260px) / 2 + 90px);
    position: relative;
    z-index: 30
}

@media screen and (max-width: 1600px) {
    .characterMain .rydira .chara {
        width: 39.9375vw;
        padding-top: 9vw;
        padding-left: calc((100% - 78.75vw) / 2 + 5.63vw)
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rydira .chara {
        margin-top: 19.55671vw;
        width: 87.35332vw;
        padding-top: 0;
        padding-left: 35.20209vw
    }
}

.characterMain .rydira .chara_name {
    width: 232px;
    padding-bottom: 24px
}

@media screen and (max-width: 1600px) {
    .characterMain .rydira .chara_name {
        width: 15.625vw;
        padding-bottom: 1.5vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rydira .chara_name {
        width: 27.90091vw;
        right: 62.58149vw;
        top: 10.43025vw
    }
}

.characterMain .rydira .bgname {
    width: 700px;
    bottom: 20px
}

@media screen and (max-width: 1600px) {
    .characterMain .rydira .bgname {
        width: 38.875vw;
        bottom: 0
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rydira .bgname {
        margin: auto;
        width: 79vw;
        bottom: -16vw;
        left: 0;
        right: 0
    }
}

.characterMain .rydira .bt_item {
    padding-left: 340px
}

@media screen and (max-width: 1600px) {
    .characterMain .rydira .bt_item {
        padding-left: 21.25vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rydira .bt_item {
        top: 120.50065vw;
        right: 6.06258vw
    }
}

@media screen and (max-width: 375px) {
    .characterMain .rydira .bt_item {
        top: 114.93333vw
    }
}

@media only screen and (max-width: 767px) {
    .characterMain .rydira .detail {
        width: 36.50587vw;
        right: 55.41069vw;
        top: 18.25293vw
    }
}

@media only screen and (max-width: 767px) {
    .bg_w {
        background: #fff !important
    }
}

.chara1 {
    background-image: url(../images/character/thumb/rishetta_off.webp)
}

.chara2 {
    background-image: url(../images/character/thumb/tiasha_off.webp)
}

.chara3 {
    background-image: url(../images/character/thumb/luluce_off.webp)
}

.chara4 {
    background-image: url(../images/character/thumb/alka_off.webp)
}

.chara5 {
    background-image: url(../images/character/thumb/far_off.webp)
}

.chara6 {
    background-image: url(../images/character/thumb/lirinel_off.webp)
}

.chara7 {
    background-image: url(../images/character/thumb/laranel_off.webp)
}

.chara8 {
    background-image: url(../images/character/thumb/power_off.webp)
}

.chara9 {
    background-image: url(../images/character/thumb/neverlia_off.webp)
}

.chara10 {
    background-image: url(../images/character/thumb/siana_off.webp)
}

.chara11 {
    background-image: url(../images/character/thumb/ilshana_off.webp)
}

.chara12 {
    background-image: url(../images/character/thumb/stipla_off.webp)
}

.chara13 {
    background-image: url(../images/character/thumb/tukirna_off.webp)
}

.chara14 {
    background-image: url(../images/character/thumb/eliene_off.webp)
}

.chara15 {
    background-image: url(../images/character/thumb/yufia_off.webp)
}

.chara16 {
    background-image: url(../images/character/thumb/replero_off.webp)
}

.chara17 {
    background-image: url(../images/character/thumb/rishetta_fw_off.webp)
}

.chara18 {
    background-image: url(../images/character/thumb/nautilica_off.webp)
}

.chara19 {
    background-image: url(../images/character/thumb/sourei_off.webp)
}

.chara20 {
    background-image: url(../images/character/thumb/sestieh_off.webp)
}

.chara21 {
    background-image: url(../images/character/thumb/nyalenti_off.webp)
}

.chara22 {
    background-image: url(../images/character/thumb/shuremi_off.webp)
}

.chara23 {
    background-image: url(../images/character/thumb/rydira_off.webp)
}
.chara24 {
    background-image: url(../images/character/thumb/tiasha_dw_off.webp)
}

.slick-current.chara1 {
    background-image: url(../images/character/thumb/rishetta.webp)
}

.slick-current.chara2 {
    background-image: url(../images/character/thumb/tiasha.webp)
}

.slick-current.chara3 {
    background-image: url(../images/character/thumb/luluce.webp)
}

.slick-current.chara4 {
    background-image: url(../images/character/thumb/alka.webp)
}

.slick-current.chara5 {
    background-image: url(../images/character/thumb/far.webp)
}

.slick-current.chara6 {
    background-image: url(../images/character/thumb/lirinel.webp)
}

.slick-current.chara7 {
    background-image: url(../images/character/thumb/laranel.webp)
}

.slick-current.chara8 {
    background-image: url(../images/character/thumb/power.webp)
}

.slick-current.chara9 {
    background-image: url(../images/character/thumb/neverlia.webp)
}

.slick-current.chara10 {
    background-image: url(../images/character/thumb/siana.webp)
}

.slick-current.chara11 {
    background-image: url(../images/character/thumb/ilshana.webp)
}

.slick-current.chara12 {
    background-image: url(../images/character/thumb/stipla.webp)
}

.slick-current.chara13 {
    background-image: url(../images/character/thumb/tukirna.webp)
}

.slick-current.chara14 {
    background-image: url(../images/character/thumb/eliene.webp)
}

.slick-current.chara15 {
    background-image: url(../images/character/thumb/yufia.webp)
}

.slick-current.chara16 {
    background-image: url(../images/character/thumb/replero.webp)
}

.slick-current.chara17 {
    background-image: url(../images/character/thumb/rishetta_fw.webp)
}

.slick-current.chara18 {
    background-image: url(../images/character/thumb/nautilica.webp)
}

.slick-current.chara19 {
    background-image: url(../images/character/thumb/sourei.webp)
}

.slick-current.chara20 {
    background-image: url(../images/character/thumb/sestieh.webp)
}

.slick-current.chara21 {
    background-image: url(../images/character/thumb/nyalenti.webp)
}

.slick-current.chara22 {
    background-image: url(../images/character/thumb/shuremi.webp)
}

.slick-current.chara23 {
    background-image: url(../images/character/thumb/rydira.webp)
}
.slick-current.chara24 {
    background-image: url(../images/character/thumb/tiasha_dw.webp)
}

.comingsoon {
    background-image: url(../images/character/thumb/comingsoon.webp)
}

@media screen and (min-width: 1600px) {
    .thumbCol {
        width: 440px;
        position: absolute;
        bottom: 150px;
        right: calc((100% - 1260px) / 2 + 30px);
        z-index: 30 !important
    }
}

@media screen and (min-width: 767px) and (max-width: 1600px) {
    .thumbCol {
        width: 27.5vw;
        position: absolute;
        bottom: 9.375vw;
        right: calc((100% - 78.75vw) / 2 + 1.88vw);
        z-index: 30 !important
    }
}

li.comingsoon.slick-slide {
    pointer-events: none
}

@media screen and (min-width: 1600px) {
    .slick_thumb {
        width: 440px;
        min-height: 220px !important
    }
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
    .slick_thumb {
        width: 25vw;
        min-height: 13.75vw !important
    }
}

@media screen and (min-width: 1600px) {
    .slick_thumb .slick-track {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 440px !important;
        overflow: hidden;
        -webkit-transform: unset !important;
        transform: unset !important
    }
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
    .slick_thumb .slick-track {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 25vw !important;
        overflow: hidden;
        -webkit-transform: unset !important;
        transform: unset !important
    }
}

@media only screen and (min-width: 767px) {
    .slick_thumb .slick-cloned {
        display: none !important
    }
}

@media screen and (min-width: 1600px) {
    .slick_thumb .slick-slide {
        margin: 5px;
        width: 100px !important;
        height: 100px !important;
        background-size: contain;
        font-size: 0;
        cursor: pointer
    }
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
    .slick_thumb .slick-slide {
        margin: .3125vw;
        width: 5.625vw !important;
        height: 5.625vw !important;
        background-size: contain;
        font-size: 0;
        cursor: pointer
    }
}

@media only screen and (max-width: 767px) {
    .slick_thumb .slick-slide {
        margin: 1vw;
        height: 17vw;
        background-size: contain;
        font-size: 0;
        cursor: pointer
    }
}

@media screen and (min-width: 1600px) {
    .slick_thumb .slick-list {
        padding: 0 !important;
        width: 440px
    }
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
    .slick_thumb .slick-list {
        padding: 0 !important;
        width: 100%
    }
}

.holder {
    font-size: 0
}

.jp-previous,.jp-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 50
}

.jp-previous {
    display: block;
    width: 24px;
    height: 54px;
    background: url("../images/character/thumb_arrow_l.png") no-repeat center center;
    background-size: contain;
    left: -30px;
    font-size: 0
}

@media screen and (max-width: 1600px) {
    .jp-previous {
        width: 1.5vw;
        height: 3.375vw;
        left: -1.875vw
    }
}

@media only screen and (max-width: 1600px) and (max-width: 767px) {
    .jp-previous {
        width: 3.12907vw;
        height: 7.04042vw;
        left: -3.91134vw
    }
}

.jp-next {
    display: block;
    width: 24px;
    height: 54px;
    background: url("../images/character/thumb_arrow_r.png") no-repeat center center;
    background-size: contain;
    right: -30px;
    font-size: 0
}

@media screen and (max-width: 1600px) {
    .jp-next {
        width: 1.5vw;
        height: 3.375vw;
        right: -1.875vw
    }
}

@media only screen and (max-width: 767px) {
    .jp-next {
        width: 3.12907vw;
        height: 7.04042vw;
        right: -3.91134vw
    }
}

@media only screen and (max-width: 767px) {
    #JPages {
        position: absolute;
        bottom: 10px;
        margin: auto;
        width: 80%;
        left: 0;
        right: 0
    }
}

@media only screen and (max-width: 767px) {
    .slick-slide {
        padding: 2px
    }
}

.slick-slider {
    margin: auto;
    z-index: 9
}

.slick-prev:before,.slick-next:before {
    font-size: 0
}

.slick-prev,.slick-next {
    top: 53%
}

.slick-prev {
    left: calc((100% - 1260px) / 2 - 50px);
    z-index: 50;
    width: 27px;
    height: 60px
}

@media screen and (max-width: 1600px) {
    .slick-prev {
        left: calc((100% - 78.75vw) / 2 - 3.13vw);
        width: 1.6875vw;
        height: 3.75vw
    }
}

@media only screen and (max-width: 767px) {
    .slick-prev {
        left: 0;
        width: 5.99739vw;
        height: 10.43025vw
    }
}

.slick-next {
    right: calc((100% - 1260px) / 2 - 50px);
    z-index: 50;
    width: 27px;
    height: 60px
}

@media screen and (max-width: 1600px) {
    .slick-next {
        right: calc((100% - 78.75vw) / 2 - 3.13vw);
        width: 1.6875vw;
        height: 3.75vw
    }
}

@media only screen and (max-width: 1600px) and (max-width: 767px) {
    .slick-next {
        right: 0;
        width: 5.99739vw;
        height: 10.43025vw
    }
}

@media only screen and (min-width: 767px) {
    .animate_center,.animate_top,.animate_bottom,.animate_bottomimg,.animate_left {
        opacity: 0
    }
}

.animate_top.js-active {
    -webkit-animation: animate_top 0.3s ease-out forwards;
    animation: animate_top 0.3s ease-out forwards
}

.animate_bottomimg.js-active {
    -webkit-animation: animate_bottom 0.3s ease-out forwards;
    animation: animate_bottom 0.3s ease-out forwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s
}

.animate_bottom.js-active {
    -webkit-animation: animate_bottom 0.3s ease-out forwards;
    animation: animate_bottom 0.3s ease-out forwards
}

.animate_center.js-active {
    -webkit-animation: animate_center 0.5s ease-out forwards;
    animation: animate_center 0.5s ease-out forwards
}

.animate_left.js-active {
    -webkit-animation: animate_left 0.3s ease-out forwards;
    animation: animate_left 0.3s ease-out forwards
}

.animate_top.reverse {
    -webkit-animation: animate_top_reverse 0.3s ease-out forwards;
    animation: animate_top_reverse 0.3s ease-out forwards
}

.animate_bottom.reverse {
    -webkit-animation: animate_bottom_reverse 0.3s ease-out forwards;
    animation: animate_bottom_reverse 0.3s ease-out forwards
}

.animate_bottomimg.reverse {
    -webkit-animation: animate_bottom_reverse 0.3s ease-out forwards;
    animation: animate_bottom_reverse 0.3s ease-out forwards
}

.animate_left.reverse {
    -webkit-animation: animate_left_reverse 0.3s ease-out forwards;
    animation: animate_left_reverse 0.3s ease-out forwards
}

.slide_in {
    overflow: hidden;
    display: inline-block
}

.slide_inInner {
    display: inline-block
}

.animate_topbottom {
    opacity: 0
}

.animate_topbottomInner.js-active {
    -webkit-animation: animate_topbottomInner 0.5s ease-out forwards;
    animation: animate_topbottomInner 0.5s ease-out forwards;
    opacity: 0
}

.animate_topbottom.js-active {
    -webkit-animation: animate_topbottom 0.5s ease-out forwards;
    animation: animate_topbottom 0.5s ease-out forwards;
    opacity: 0
}

.animate_topbottomInner.reverse {
    -webkit-animation: animate_topbottomInner_reverse 0.5s ease-out forwards;
    animation: animate_topbottomInner_reverse 0.5s ease-out forwards
}

.animate_topbottom.reverse {
    -webkit-animation: animate_topbottom_reverse 0.5s ease-out forwards;
    animation: animate_topbottom_reverse 0.5s ease-out forwards
}

@media only screen and (max-width: 767px) {
    .animate_center,.animate_top,.animate_bottom,.animate_bottomimg,.animate_left_sp,.animate_fadein_sp,.animate_right_sp {
        opacity: 0
    }
}

@media only screen and (max-width: 767px) {
    .animate_left_sp.js-active {
        -webkit-animation: animate_left 0.3s ease-out forwards;
        animation: animate_left 0.3s ease-out forwards
    }
}

@media only screen and (max-width: 767px) {
    .animate_right_sp.js-active {
        -webkit-animation: animate_right 0.3s ease-out forwards;
        animation: animate_right 0.3s ease-out forwards
    }
}

@media only screen and (max-width: 767px) {
    .animate_fadein_sp.js-active {
        -webkit-animation: fadein 0.5s ease-out forwards;
        animation: fadein 0.5s ease-out forwards;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s
    }
}

@media only screen and (max-width: 767px) {
    .animate_left_sp.reverse {
        -webkit-animation: animate_left_reverse 0.3s ease-out forwards;
        animation: animate_left_reverse 0.3s ease-out forwards
    }
}

@media only screen and (max-width: 767px) {
    .animate_fadein_sp.reverse {
        -webkit-animation: fadeout 0.1s ease-out forwards;
        animation: fadeout 0.1s ease-out forwards
    }
}

@media only screen and (max-width: 767px) {
    .animate_right_sp.reverse {
        -webkit-animation: animate_right_reverse 0.3s ease-out forwards;
        animation: animate_right_reverse 0.3s ease-out forwards
    }
}

@-webkit-keyframes animate_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes animate_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes animate_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        will-change: transform
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        will-change: transform
    }
}

@keyframes animate_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        will-change: transform
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        will-change: transform
    }
}

@-webkit-keyframes animate_center {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes animate_center {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes animate_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes animate_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes animate_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes animate_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes animate_top_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@keyframes animate_top_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@-webkit-keyframes animate_bottom_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

@keyframes animate_bottom_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

@-webkit-keyframes animate_left_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes animate_left_reverse {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes animate_right_reverse {
    100% {
        opacity: 1;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    0% {
        opacity: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes animate_right_reverse {
    100% {
        opacity: 1;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    0% {
        opacity: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes animate_topbottomInner {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes animate_topbottomInner {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes animate_topbottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes animate_topbottom {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes animate_topbottomInner_reverse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
}

@keyframes animate_topbottomInner_reverse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0
    }
}

@-webkit-keyframes animate_topbottom_reverse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }
}

@keyframes animate_topbottom_reverse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/*# sourceMappingURL=maps/character.css.map */