@media screen and (max-width: 768px) and (orientation: portrait) {
    .game-rules { display: none }
    .intro {
        margin: 100px 0px 0;
        background: rgba(0, 0, 0, .75);
    }
    .intro-person img {
        margin-top: -200px;
        height: 150px;
    }
    .intro-message {
        margin: 0 15px;
        font-size: 16px;
    }
    .intro-from {
        margin: 10px 0px 0;
    }
    .intro-next {
        font-size: 20px;
        margin: 10px 10px 0;
        padding: 15px 0;
    }

    .episode-conversational {
        grid-template-columns: minmax(0, 0) minmax(auto, auto);
    }

    .episode-conversation .input {
        display: block;
    }
    .episode-conversation .input .input-name {
        display: none;
    }
    .episode-conversation .input input {
        padding: 15px;
    }

    .portrait-hero img {
        height: 175px; 
    }
    .portrait-counterpart img {
        height: 175px; 
    }
    .portrait-hero {
        bottom: 45px;
    } 
    .name-counterpart {
        font-size: 14px;
        padding: 3px 10px 3px 20px;
    }

    .history-narrator {
        margin: 0 30px 20px;
    }
    .history-narrator-first {
        margin-top: 50px;
    }
    .history-narrator .narrator-message {
        font-size: 15px;
    }


    .history-item {
        margin: 0px 40px;
        max-width: 380px;
        clear: both;
    }
    .history-item.counterpart {
        min-width: 380px;
    }    
    .history-item .history-from {
        font-size: 16px;
    }
    .history-item .history-message {
        font-size: 16px;
    }    

    .history-end {
        height: 50px;
    }
}