.character-page {
    text-align: center;
    padding: 6.75vw 0 8.66vw;
}

.character-page__container {
    animation-delay: 0.3s;
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.character-page__text {
    color: #fff;
    width: 45vw;
    text-align: left;
    position: absolute;
    left: 9.5%;
    top: 25%;
    transform: translate(0%);
    font-weight: 500;
}

.character-page__en-name {
    padding-left: 58px;
    background-color: #E60012;
    text-align: left;
    font: normal normal bold 50px/85px YuGothic;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-bottom: -40px;
    accent-color: aliceblue;
}

.character-page__ja-name {
    padding-left: 58px;
    background-color: #E60012;
    margin-bottom: 2.33vw;
    text-align: left;
    font: normal normal bold 110px/187px YuGothic;
    letter-spacing: -6.6px;
    color: #FFFFFF;
    opacity: 1;
}

.character-page__voice {
    padding: 10px 0 10px 58px;
    background-color: #E60012;
    margin-bottom: 2vw;
    text-align: left;
    font: normal normal bold 50px/85px YuGothic;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.character-page__detail {
    padding-left: 58px;
    width: 1040px;
    text-align: left;
    font: normal normal bold 29px/48px YuGothic;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

/* キャラクター タブレット */
@media screen and (min-width:768px) and (max-width:960px) {
    .character-page__text-sp {
        display: none;
    }

    .character-page__en-name-sp {
        display: none;
    }

    .character-page__ja-name-sp {
        display: none;
    }

    .character-page__voice-sp {
        display: none;
    }

    .character-page__detail-sp {
        display: none;
    }
}

@media screen and (min-width:768px) and (max-width:960px) {
    .character_bg__img {
        display: none;
    }
    .character_bg__img--sp {
        height: 100%;
        display: block;
    }
    .chara--sp {
        position: absolute;
        left: 0%;
        bottom: 37%;
    }
    .character__img {
        display: none;
    }
    .character__img--sp {
        display: block;
    }
}

@media screen and (min-width:768px) and (max-width:960px) {
    .character-page__text {
        color: #fff;
        width: 100%;
        text-align: left;
        position: absolute;
        left: 0%;
        top: 59%;
        transform: translate(0%);
        font-weight: 500;
    }

    .character-page__en-name {
        background-color: #E60012;
        margin-bottom: 5px;
        margin-top: 12%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 30px/34px YuGothic;
        letter-spacing: -1.8px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__ja-name {
        background-color: #E60012;
        margin-bottom: 0;
        margin-top: -1%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 60px/64px YuGothic;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__voice {
        background-color: #E60012;
        margin-bottom: 0;
        padding: 0 0 0 0;
        padding-left: 0px;
        margin-top: 3%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 30px/36px YuGothic;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__detail {
        width: 90%;
        padding-left: 7%;
        text-align: left;
        font: normal normal bold 24px/28px YuGothic;
        letter-spacing: 2px;
        color: #FFFFFF;
        opacity: 1;
        line-height: 29px;
        margin-top: 5%;
    }
}

/* キャラクター スマホ */
@media screen and (min-width:767px) {
    .character-page__text-sp {
        display: none;
    }

    .character-page__en-name-sp {
        display: none;
    }

    .character-page__ja-name-sp {
        display: none;
    }

    .character-page__voice-sp {
        display: none;
    }

    .character-page__detail-sp {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .character_bg__img {
        display: none;
    }
    .character_bg__img--sp {
        height: 100%;
        display: block;
    }
    .chara--sp {
        position: absolute;
        left: 0%;
        bottom: 37%;
    }
    .character__img {
        display: none;
    }
    .character__img--sp {
        display: block;
    }
}

@media screen and (max-width:767px) {
    .character-page__text {
        color: #fff;
        width: 100%;
        text-align: left;
        position: absolute;
        left: 0%;
        top: 59%;
        transform: translate(0%);
        font-weight: 500;
    }

    .character-page__en-name {
        background-color: #E60012;
        margin-bottom: 0;
        margin-top: 12%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 16px/18px YuGothic;
        letter-spacing: -1.8px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__ja-name {
        background-color: #E60012;
        margin-bottom: 0;
        margin-top: -1%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 36px/38px YuGothic;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__voice {
        background-color: #E60012;
        margin-bottom: 0;
        padding: 0 0 0 0;
        padding-left: 0px;
        margin-top: 3%;
        padding-left: 6%;
        text-align: left;
        font: normal normal bold 16px/20px YuGothic;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }

    .character-page__detail {
        width: 320px;
        padding-left: 7%;
        text-align: left;
        font: normal normal bold 11px/48px YuGothic;
        letter-spacing: 1px;
        color: #FFFFFF;
        opacity: 1;
        line-height: 14px;
        margin-top: 5%;
    }
}