.information-box {
    background: #FFFCE1;
    padding: 1%;
    margin: 3% 0;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    align-items: flex-start;
}

.information {
    display: flex;
    align-items: center;
    gap: 20px;
    width: calc(100% / 3);
    color: #222;
    padding: 1%;
    margin-bottom: 2%;
    border-radius: 10px;
    transition-duration: 0.1s;
}

.information:hover {
    background: #ffd5d5;
}

.information.no-link:hover {
    background: none;
}

.information-image {
    width: 35%;
}

.information-right {}

.information-title {
    margin-bottom: 2%;
}

.information-message {
    font-size: 0.85em;
    line-height: 1.2em;
    margin-bottom: 2%;
}

.information-date {
    font-size: 0.75em;
    margin-bottom: 2%;
}

.information-groupname {
    background: #067654;
    color: #fff;
    font-size: 0.7em;
    width: fit-content;
    padding: 1px 14px;
    border-radius: 100px;
}


.pagination {
    display: flex;
    justify-content: center;
    font-size: 1.2em;
    margin: 2% 0;
}

.prev-page,
.next-page {
    background: #ededed;
    margin: 0 2px;
    padding: 3px 10px;
    color: #000;
    border-radius: 2px;
    line-height: 25px;
}

.prev-page-disabled,
.next-page-disabled {
    color: #aaa;
}

.page-number {
    background: #ededed;
    margin: 0 2px;
    padding: 3px 10px;
    color: #000;
    border-radius: 2px;
}

.now-page-number {
    background: #666;
    color: #fff;
}

.page_number {}

.pagination a:hover {
    text-decoration: underline;
}

@media print,
screen and (max-width:1150px) {
    .information {
        width: calc(100% / 2);
    }
}

@media screen and (max-width:768px) {
    .information {
        flex-direction: column;
        align-items: flex-start;
        padding: 3%;
    }

    .information-image {
        width: 100%;
    }

}

@media screen and (max-width:480px) {
    .information {
        width: 100%;
        margin-bottom: 10%;
    }

    .information-right {
        padding: 3%;
        padding-top: 0;
    }
}