@charset "utf-8";

.newscontent {
    padding: 0px;
    height:auto;
}

@media screen and (max-width:768px){
    .newscontent {
        padding: 0px;
        height: auto;
    }
}

.subtitle{
    font-size: 16px;
    color: rgb(171, 171, 171);
}
@media screen and (max-width:768px){
    .subtitle{
        font-size: 2.8vw;
        color: rgb(171, 171, 171);
    }
}

.news-list {
    width: 500px;
    margin-top: 0px;
}
@media screen and (max-width:768px){
    .news-list {
        width: 100%;
        padding-left: 0px;
        margin-top: 0px;
    }
}
.news-item {
    display: flex;
    padding:15px;
    border-bottom:1px solid #000;
}
@media screen and (max-width:768px){
    .news-item {
        display: flex;
        padding:2vw;
        border-bottom:0.3vw solid #000;
    }
}

.pagination {
    text-align: center;
    padding: 10px;
}

.pagination a {
    text-decoration: none;
    color: #4CAF50;
    padding: 8px 16px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
@media screen and (max-width:768px){
    .pagination {
        text-align: center;
        padding: 2vw;
        width:100%;
    }

    .pagination a {
        text-decoration: none;
        color: #4CAF50;
        padding: 1.5vw 3vw;
        margin: 0 2vw;
        border: 1px solid #ddd;
        border-radius: 1vw;
    }
}

.pagination a:hover {
    background-color: #4CAF50;
    color: white;
}

.article-list {
    width: 500px;
    margin-top: 0px;
}
@media screen and (max-width:768px){
    .article-list {
        width: 100%;
        margin-top: 0px;
        padding-left: 0px;
    }
}
.article-item {
    display: flex;
    padding:15px;
    border-bottom:1px solid #000;
}
@media screen and (max-width:768px){
    .article-item {
        display: flex;
        padding:2vw;
        border-bottom:0.3vw solid #000;
    }
}

.articlepagination {
    text-align: center;
    padding: 10px;
}

.articlepagination a {
    text-decoration: none;
    color: #4CAF50;
    padding: 8px 16px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
@media screen and (max-width:768px){
    .articlepagination {
        text-align: center;
        padding: 2vw;
        width: 100%;
    }
    .articlepagination a {
        text-decoration: none;
        color: #4CAF50;
        padding: 1.5vw 3vw;
        margin: 0 2vw;
        border: 1px solid #ddd;
        border-radius: 1vw;
    }
}


.articlepagination a:hover {
    background-color: #4CAF50;
    color: white;
}

.newslistday{
    width:80px;
}

@media screen and (max-width:768px){
    .newslistday{
        width:20vw;
        font-size: 3vw;
    }
}

.newslistlabel{
    display: flex;
    width: 80px;
    justify-content: center;
    align-items: center;
    background-color:blue;
    border-radius:3px;
    color:#fff;
    padding:2px 5px;
    margin:0 20px;
}
@media screen and (max-width:768px){
    .newslistlabel{
        display: flex;
        width: 15vw;
        justify-content: center;
        align-items: center;
        background-color:blue;
        border-radius:1vw;
        color:#fff;
        padding:0vw 1vw;
        margin-top:0vw;
        margin-bottom: 0vw;
        margin-left: 0vw;
        margin-right: 2vw;
        font-size: 3vw;
    }
}

.articlelistlabel{
    display: flex;
    width: 80px;
    justify-content: center;
    align-items: center;
    background-color:rgb(250, 195, 94);
    border-radius:3px;
    color:#fff;
    padding:2px 5px;
    margin:0 20px;
}
@media screen and (max-width:768px){
    .articlelistlabel{
        display: flex;
        width: 15vw;
        justify-content: center;
        align-items: center;
        background-color:rgb(250, 195, 94);
        border-radius:1vw;
        color:#fff;
        padding:0vw 1vw;
        margin-top:0vw;
        margin-bottom: 0vw;
        margin-left: 0px;
        margin-right: 2vw;
        font-size: 3vw;
    }
}