.systemname {
    padding-left: 20px;
    color: white;
}

.title {
    margin-left: 5%;
    margin-bottom: 20px;
    margin-top: 3vh;
}

.font-xl {
    font-size: 40px;
}

.font-l {
    font-size: 32px;
}

.font-m {
    font-size: 23px;
}

.font-s {
    font-size: 17px;
}

.font-ss {
    font-size: 17px;
}

html {
    background-color: #efffef;
    height: 100%;
}

body {
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    height: auto;
    min-height: 100%;
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.top {
    background-color: cadetblue;
}

.bottom {
    height:2em;
}

.white {
    color: white;
}

.error{
    width:90%;
    margin: auto;
}

/* スマホ対応用 デザイン*/
@media screen and (max-width: 640px) {
    .font-xl {
        font-size: 11vw;
    }

    .font-l {
        font-size: 7vw;
    }

    .font-m {
        font-size: 5vw;
    }

    .font-s {
        font-size: 4vw;
    }
    
    .font-ss {
        font-size: 3vw;
    }

    html {
        width: 100%;
    }

    body {
        width: auto;
    }

    .title {
        text-align: center;
    }
}