@media screen and (min-width:200px) and (max-width:299px) {
    body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 60px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        height: 60px;
        width: 60px;
        float: left;
    }
    #topNavigation #menumenu{
        padding-top: 15px;
        height: 30px;
        width: 30px;
        float: right;
    }
    #lilisi li{
        display: none;
        padding: 20px;
        font-weight: bold;
    }
    #content{
        flex: 1;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        font-size: 40px;
        padding: 0px 0px 0px 12px
    }
    #content table {
        border-collapse: collapse;
        width: 100%;
        height: 100%;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 200px;
        height: 200px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}

@media screen and (min-width:300px) and (max-width:479px) {
    body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 70px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        height: 70px;
        width: 70px;
        float: left;
    }
    #topNavigation #menumenu{
        padding-top: 20px;
        height: 30px;
        width: 30px;
        float: right;
    }
    #lilisi li{
        display: none;
        padding: 20px;
        font-weight: bold;
    }
    #content{
        flex: 1;
        text-align: center;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        font-size: 40px;
    }
    #content table {
        border-collapse: collapse;
        width: 100%;
        height: 100%;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 200px;
        height: 200px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}

@media screen and (min-width:480px) and (max-width:599px) {
    body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 80px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        height: 80px;
        width: 80px;
        float: left;
    }
    #topNavigation #menumenu{
        padding-top: 20px;
        height: 40px;
        width: 40px;
        float: right;
    }
    #lilisi li{
        display: none;
        padding: 20px;
        font-weight: bold;
    }
    #content{
        flex: 1;
        text-align: center;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        font-size: 60px;
    }
    #content table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 250px;
        height: 300px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}

@media screen and (min-width:600px) and (max-width:959px) {
    body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 90px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        height: 90px;
        width: 90px;
        float: left;
    }
    #topNavigation #menumenu{
        display: none;
    }
    #lilisi li{
        display: inline;
        padding: 15px;
        font-weight: bold;
    }
    #content{
        flex: 1;
        text-align: center;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        font-size: 70px;
    }
    #content table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 250px;
        height: 300px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}

@media screen and (min-width:960px) and (max-width:1279px) {
    body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 90px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        padding-left: 200px;
        height: 90px;
        width: 90px;
        float: left;
    }
    #topNavigation #menumenu{
        display: none;
    }
    #lilisi li{
        display: inline;
        padding: 20px;
        font-weight: bold;
    }
    #content{
        flex: 1;
        text-align: center;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        padding-top: 70px;
        font-size: 75px;
    }
    #content table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 250px;
        height: 300px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}

@media screen and (min-width:1280px) {
body{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
    }
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    
    a{
        text-decoration: none;
    }
    
    a.no-color-change {
        color: black;
    }
    
    #topNavigation{
        height: 111px;
        background-color: #888;
        color: #fff;
    }
    #topNavigation #logo{
        padding-left: 200px;
        height: 111px;
        width: 111px;
        float: left;
    }
    #topNavigation #menumenu{
        display: none;
    }
    #lilisi li{
        display: inline;
        padding: 20px;
        font-weight: bold;
        font-size: 20px;
    }
    #content{
        flex: 1;
        text-align: center;
        margin-top: 10px;
        background-color: #eee;
    }
    #content h1{
        padding-top: 90px;
        font-size: 100px;
    }
    #content table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
    }
    #content th{
        background-color: #ffd700;
    }
    #content th, td {
        border: solid 1px #333;
    }
    #left{
        background-color: #e6e6fa;
        width: 250px;
        height: 300px;
        position: fixed;
        right: -270px;
        top: 0;
    }
    .show{
        transform: translate3d(-270px, 0, 0);
    }
    #topNavigation, #content, #left{
        transition: transform 0.3s;
    }
}