@charset "utf-8";
@media print,
screen and (max-width: 1550px) {
    .pan ul {
        width: 80%;
    }

    .naka-h1-box {
        width: 82%;
    }

    .login-container {
        width: 100%;
    }
}

@media print,
screen and (max-width: 1200px) {
    .pan {
        overflow-x: auto;
    }

    .pan ul {
        width: max-content;
        padding: 0 15px;
    }

    .naka-title-box img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .information-table th,
    .information-table td,
    .about-table th,
    .about-table td {
        display: block;
        width: 100%;
        padding: 1em;
    }

    .information-table td,
    .information-table th {
        border: solid 1px #666;
    }

    .information-table th {
        margin-top: 3%;
    }

    .information-table td:nth-child(2) {
        border-bottom: 0;
    }

    .information-table td:last-child {
        border-top: dotted 1px #666;
    }

    .wide-table-box {
        width: 100%;
        overflow-x: auto;
    }

    .wide-table {
        width: max-content;
        padding: 0 15px;
    }
}

@media print,
screen and (max-width: 940px) {
    .login-container {
        flex-direction: column;
        padding-bottom: 25px;
    }

    .logout-btn {
        position: static;
    }

    .default-button-box {
        gap: 18px;
        row-gap: 18px;
    }

    .default-button-box a {
        width: calc(100% / 3 - 12px);
    }

    .naka-title-box {
        display: grid;
    }

    .naka-title-box img {
        grid-area: 1 / 1;
        height: 100%;
    }

    .naka-h1 {
        position: static;
        grid-area: 1 / 1;
        padding: 25px 0;
    }
}

@media screen and (max-width: 680px) {
    .title>span {
        line-height: 1.2em;
    }

    .default-button-box a {
        width: calc(100% / 2 - 9px);
    }
}

@media screen and (max-width: 550px) {
    .pdf-list {
        justify-content: center;
    }

    .activity-button {
        padding: 1.2em 1.5em;
    }

    .activity-button h3 {
        line-height: 1.2em;
        margin-bottom: 10px;
    }

    .training-box {
        padding: 7% 4%;
    }

    .training-box dl {
        padding: 0;
    }

    .training-box h3 {
        line-height: 1.2em;
    }
}

@media screen and (max-width: 480px) {
    .info {
        flex-direction: column;
    }

    .info-date-box {
        width: 100%;
        display: flex;
        align-items: baseline;
        gap: 5px;
        justify-content: end;
    }

    .info-with-category a {
        width: 100%;
    }

    .news-category {
        width: 100%;
        text-align: right;
    }
}