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

    *[id]:before {
        display: block;
        content: " ";
        margin-top: -96px;
        height: 96px;
        visibility: hidden;
    }

    #intro img {
        height: calc(100vh - 96px);
    }

    #history {
        width: 95%;
    }

    #address iframe {
        height: calc(100% - 96px);
    }

    #news .hire .title,
    #news .hire .when,
    #news .hire .contact {
        text-shadow: none;
        font-size: 3.5vw;
    }

    #news .hire .title {
        font-size: 5vw;
    }

    #plan {
        width: 100%;
    }

    #plan .item {
        padding-left: 2px;
        font-size: 70%;
    }

    #plan .day {
        height: calc(100% / 5 - 16px);
    }

    #plan .header > .title,
    #plan .day > .title {
        width: calc(4% + 40px);
        margin-left: 0px;
        margin-right: 0px;
    }

    #plan .header > .data,
    #plan .day > .data {
        width: calc(96% - 40px);
        margin-left: 0px;
        margin-right: 0px;
    }

    #plan .header .up {
        margin-bottom: 12px;
    }

    #plan .header .down {
        margin-top: 12px;
    }

    #plan .title {
        font-size: 70%;
        line-height: 95px;
        padding-left: 3px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 992px) {

    #plan {
        font-size: 75%;
    }

    #plan .header {
        height: 30px;
    }

    #plan .day {
        height: calc(100% / 5);
    }

    #plan .day .row > div {
        height: 100%;
    }
}