.character-list {
    width: 100%;
    height: auto;
    margin: 0 auto 0;
}

@media screen and (max-width: 912px) {
    .character-list {
        width: 100%;
        height: auto;
        margin: 0 auto 0;
    }
}

.character-list .chara-info {
    display: flex;
    flex-wrap: nowrap;
    width: 50%;
    height: auto;
    margin: 0 auto 0;
}

@media screen and (max-width: 912px) {
    .character-list .chara-info {
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        height: auto;
        padding: 0% 0% 0% 0%;
    }

    .direction {
        flex-direction: row-reverse;
    }
}

.character-list .chara-info .icon-frameL {
    display: flex;
}


.character-list .chara-info .icon-frameR {
    display: flex;
    padding: 0px 0px 0px 160px;
}

.character-list .chara-info .icon1 {
    width: 300px;
    height: 300px;
    background: #ffc8da;
    clip-path: url(#normal);
}

.character-list .chara-info .icon2 {
    width: 300px;
    height: 300px;
    background: #ffe7a4;
    clip-path: url(#normal);
}

.character-list .chara-info .icon3 {
    width: 300px;
    height: 300px;
    background: #cffff5;
    clip-path: url(#normal);
}

.character-list .chara-info .icon4 {
    width: 300px;
    height: 300px;
    background: #73bad6;
    clip-path: url(#normal);
}

.character-list .chara-info .icon5 {
    width: 300px;
    height: 300px;
    background: #eb9e8a;
    clip-path: url(#normal);
}

@media screen and (max-width: 912px) {
    .character-list .chara-info .icon-frameR {
        display: flex;
        margin: 0 -25px 0 -140px;
    }

    .character-list .chara-info .icon1 {
        width: 200px;
        height: 200px;
        background: #ffc8da;
        clip-path: url(#mini);
    }

    .character-list .chara-info .icon2 {
        width: 200px;
        height: 200px;
        background: #ffe7a4;
        clip-path: url(#mini);
    }

    .character-list .chara-info .icon3 {
        width: 200px;
        height: 200px;
        background: #cffff5;
        clip-path: url(#mini);
    }

    .character-list .chara-info .icon4 {
        width: 200px;
        height: 200px;
        background: #73bad6;
        clip-path: url(#mini);
    }

    .character-list .chara-info .icon5 {
        width: 200px;
        height: 200px;
        background: #eb9e8a;
        clip-path: url(#mini);
    }

}

.character-list .chara-info .infomation {
    height: auto;
    font-size: 17.5px;
    padding: 2.5% 1% 2.5% 1%;
    margin:0 0 0 -40px;
}

.character-list .chara-info .infomation-R {
    height: auto;
    font-size: 17.5px;
    padding: 2.5% 1% 2.5% 1%;
    margin:0 0 0 -40px;
}

@media screen and (max-width: 912px) {
    .character-list .chara-info .infomation {
        height: auto;
        font-size: 17.5px;
        padding: 2.5% 1% 2.5% 1%;
        margin:0 0 0 -25px;
    }
    .character-list .chara-info .infomation-R {
        height: auto;
        font-size: 17.5px;
        padding: 2.5% 1% 2.5% 1%;
        margin:0 -20px 0 0;
    }
}
.character-list .chara-info .infomation .title {
    white-space: nowrap;
    font-family: 'font_1_kokumr_1.00_rls';
    font-size: 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.658);
}

.character-list .chara-info .infomation .lore {
    padding: 5% 5% 5% 5%;
}

.character-list .chara-info .infomation-R .title {
    white-space: nowrap;
    font-family: 'font_1_kokumr_1.00_rls';
    font-size: 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.658);
}

.character-list .chara-info .infomation-R .lore {
    padding: 5% 5% 5% 5%;
}