body {
    background-color: #167275;
    color: #fff;
}

.chara_container {
    color: #167275;
}

.chara_details>div {
    border-bottom: solid 1px #167275;
}

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

    .chara_details {
        background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, #167275 20%, #167275 100%);
        padding: 24px;
        padding-top: 40px;
    }
}

.kosame::before {
    background-image: url(../assets/face/kosame.png);
}

.satoru::before {
    background-image: url(../assets/face/satoru.png);
}

.you::before {
    background-image: url(../assets/face/you.png);
}

.shiki::before {
    background-image: url(../assets/face/shiki.png);
}

.patty::before {
    background-image: url(../assets/face/patty.png);
}

.sasuke::before {
    background-image: url(../assets/face/sasuke.png);
}

.kirai::before {
    background-image: url(../assets/face/kirai.png);
}

.kirai2::before {
    background-image: url(../assets/face/kirai2.png);
}

.kirai3::before {
    background-image: url(../assets/face/kirai2.png);
}

.mikan::before {
    background-image: url(../assets/face/mikan.png);
}


.chapter_main_front {
    max-height: 400px;
    left: 46%;
}

@media screen and (max-width:767px) {
    .chapter_main_front {
        top: 50%;
        left: 42%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
}