@charset "utf-8";
/*--京staff.css--*/
/* ##########PC########## */
.staff_list_table table th:nth-child(1){
    width: 5em;
}

.staff_list_table table th:nth-child(2){
    width: 8em;
}

.staff_list_table table th:nth-child(3){
    width: 6em;
}

.staff_list_table table th:nth-child(4){
    width: 30%;
}

.page_body .staff_page_list{
    margin-top: 3em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 1.5em;
}

    .page_body .staff_page_list li{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: calc((100% - 3em) / 3);
    }

    .page_body .staff_page_list li::before{
        content: none;
    }

    .page_body .staff_page_list li a{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        color: #0d228d;
        font-weight: 600;
        height: 3.5rem;
        padding: 0 2em 0 1em;
        background: #fff;
        border-bottom: 2px solid #ccc;
        text-decoration: none;
        position: relative;
        line-height: 1.3;
        transition: .3s all ease;
    }

    .page_body .staff_page_list li a::after{
        content: "";
        width: 1rem;
        aspect-ratio: 1 / 1;
        background-image: url(../shared/icon/icon_arrow_blue.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: calc(50% - 0.5rem);
        right: 0.75em;
        transition: .3s all ease;
    }

    .page_body .staff_page_list li.active a{
        border-bottom-color: #0d228d;
    }

    .page_body .staff_page_list li a:hover{
        background: #0f228d;
        color: #fff;
    }

    .page_body .staff_page_list li a:hover::after{
        filter: brightness(0) invert(1);        
    }

            

@media screen and (min-width:1px) and (max-width:1400px) {
}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){


}

/* ##########SP横向き########## */
@media screen and (min-width:1px) and (max-width:768px) {

}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:575px) {
    .page_body .staff_list_table table{
        display: block;
        line-height: 1.4;
    }

        .staff_list_table thead{
            display: none;
        }

        .staff_list_table tbody{
            display: block;
        }

        .staff_list_table tbody tr{
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #ccc;
            padding: 0.5em 0;
            gap: 0.1em;
        }

        .staff_list_table tbody tr td{
            border: none !important;
            text-align: left !important;
            padding: 0.2em 0.5em 0.2em 6em;
            display: block;
            position: relative;
        }

        .staff_list_table tbody tr td::before{
            content: "";
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 5em;
            height: 100%;
            background: #eff5ff;
            position: absolute;
            top: 0;
            left: 0;
        }

        .staff_list_table tbody tr td:nth-child(1)::before{
            content: "職名";
        }

        .staff_list_table tbody tr td:nth-child(2)::before{
            content: "氏名";
        }

        .staff_list_table tbody tr td:nth-child(3)::before{
            content: "学位";
        }

        .staff_list_table tbody tr td:nth-child(4)::before{
            content: "専門分野";
        }

        .staff_list_table tbody tr td:nth-child(5)::before{
            content: "備考";
        }

    .page_body .staff_page_list{
        margin-top: 2em;
        gap: 1em;
    }

        .page_body .staff_page_list li{
            width: calc((100% - 1em) / 2);
        }

        .page_body .staff_page_list li a{
            padding: 0 2em 0 0.5em;
        }

        .page_body .staff_page_list li a::after{
            right: 0.5em;
        }


}


/* ##########印刷用########## */
@media print{

}