@charset "utf-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*--京base.css--*/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
    outline-offset: -2px;
}

html {
    font-size: 16px;
}

body {
    width: 100%;
    height: 100%;
    color: #222;
    font-family: 'Noto Sans JP', sans-serif;
    background: #e9f2ff;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

button,
input[type="search"],
input[type="text"],
input[type="password"],
input[type="submit"]{
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-appearance: none;
    appearance: none;
}

select{
    font-family: 'Noto Sans JP', sans-serif;
}

img{
    vertical-align:bottom;
}

/*ログイン画面*/
.login_form{
    width: 600px;
    margin: 5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .login_form > .box_header{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }

        .login_form > .box_header .fig{
            width: 20rem;
            margin-bottom: 0.75rem;
        }

        .login_form > .box_header .fig img{
            max-width: 100%;
            height: auto;
        }

        .login_form > .box_header .lbl{
            font-size: 1.5rem;
            font-weight: 500;
        }

    .login_form > .box_inner{
        box-sizing: border-box;
        background: #fff;
        width: 100%;
        padding: 2rem 4rem;
        box-shadow: 0 0 1rem 1px rgba(0,0,0,0.05);
        border-radius: 0.25rem;
    }

    .login_form > .box_inner .login_message{
        color: #c40026;
        font-weight: 500;
        text-align: center;
    }

    .login_form > .box_inner dl{
        margin-bottom: 0.75rem;
    }

    .login_form > .box_inner dl dt{
        font-weight: 500;
        margin-bottom: 0.2em;
    }

    .login_form > .box_inner dl dd input[type="text"],
    .login_form > .box_inner dl dd input[type="password"]{
        box-sizing: border-box;
        border: 1px solid #ccc;
        width: 100%;
        font-size: 1em;
        padding: 0.3em 0.5em;
        border-radius: 0.25rem;
    }

    .login_form > .box_inner .login_button{
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

        .login_form > .box_inner .login_button button{
            background-color: #19357e;
            color: #fff;
            font-size: 1.1em;
            border: none;
            border-radius: 0.25rem;
            padding: 0.5em 2em;
            cursor: pointer;
            transition: .3s all ease;
        }

        .login_form > .box_inner .login_button button:hover{
            filter: brightness(1.2);
        }

/*ヘッダー*/
.app_header{
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 0.5rem;
    background: #fff;
}

    .app_header .header_title{
        display: flex;
        align-items: center;
        line-height: 1;
    }

        .app_header .header_title .fig{
            width: 12rem;
            margin-right: 0.5rem;
        }

            .app_header .header_title .fig img{
                max-width: 100%;
                height: auto;
            }

        .app_header .header_title .lbl{
            font-weight: 600;
        }


    .app_header .app_header_menu{
        flex: 1;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .app_header .app_header_menu ul{
        display: flex;
        justify-content: flex-end;
        gap: 0 1px;
    }

        .app_header .app_header_menu ul li{

        }

        .app_header .app_header_menu ul li a{
            display: flex;
            text-decoration: none;
            background: rgba(25,53,126,0.1);
            border: 1px solid rgba(25,53,126,0);
            border-bottom: none;
            color: #222;
            padding: 0.5em 0.8em;
            transition: .3s all ease;
        }

        .app_header .app_header_menu ul li a:hover{
            border-color: rgba(25,53,126,1);
            background: #fff;
            color: rgba(25,53,126,1);
        }

        .app_header .app_header_menu ul li a.active{
            background: rgba(25,53,126,1);
            color: #fff;
        }

    .app_header .user_logout{
        display: flex;
        padding-left: 2em;
        font-size: 0.9rem;
        min-width: 13em;
    }

    .app_header .user_name {
        min-width: 6em;
        text-align: center;
    }

        .app_header .user_logout button{
            border: 1px solid #19357e;
            background: #fff;
            color: #222;
            font-size: 0.9rem;
            line-height: 1;
            padding: 0.3em 0.8em;
            cursor: pointer;
            transition: .3s all ease;
            margin-left: 1em;
        }

        .app_header .user_logout button:hover{
            background: #19357e;
            color: #fff;
        }

/*ページ名*/
.admin_app_container h1{
    font-size: 1.2rem;
    background: #19357e;
    color: #fff;
    font-weight: 500;
    padding:0.5em 1em;
}

/*機能系ラッパー*/
.fns_wrapper{
    display: flex;
    margin-bottom: 0.5rem;
}

/*年月切替*/
.fiscal_month_selector{
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-right: 2rem;
}

    .fiscal_month_selector button{
        border: none;
        background: none;
        font-size: 1em;
        padding: 0 0.2em;
        display: flex;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px solid rgba(25,53,126,0);
        transition: .3s all ease;
    }

    .fiscal_month_selector button:hover{
        border-bottom-color: rgba(25,53,126,1);
    }

    .fiscal_month_selector button.select_prev_month{
        margin-right: 0.5em;
    }

    .fiscal_month_selector button.month_selector{
        margin-left: 0.5em;
    }

    .fiscal_month_selector button.select_prev_month::before{
        content: "";
        display: inline-block;
        width: 0.375rem;
        height: 0.75rem;
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
        background: #19357e;
        margin-right: 0.5em;
    }

    .fiscal_month_selector button.month_selector::after{
        content: "";
        display: inline-block;
        width: 0.375rem;
        height: 0.75rem;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background: #19357e;
        margin-left: 0.5em;
    }


    .fiscal_month_selector select{
        font-size: 1em;
        border: 1px solid #19357e;
        padding: 0.1em 0.5em;
        margin: 0 0.2em;
        line-height: 1.2;
        font-weight: 500;
    }

/*機能ボタン*/
.fn_btns{}

    .fn_btns ul{
        display: flex;
        gap: 0.5rem;
    }

        .fn_btns ul li button{
            cursor: pointer;
            border: none;
            background: #19357e;
            color: #fff;
            font-size: 1em;
            padding: 0.2em 0.8em;
            border-radius: 0.25rem;
            box-shadow: 2px 2px 0 0 rgba(0,0,0,0.1);
        }

        .fn_btns ul li button:hover{
            transform: translate(1px,1px);
        }

/*本文*/
.admin_app_container .mainview{
    background: #fff;
    padding: 1rem;
    margin: 1rem 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem 1px rgba(0,0,0,0.05);
}

.admin_app_container .mainview table{
    font-size: 0.9em;
    border-collapse: separate;
    min-width: 800px;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid rgba(0,0,0,0.1);
}

.admin_app_container .mainview table th,
.admin_app_container .mainview table td{
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.admin_app_container .mainview table thead th{
    text-align: center;
    background: #fafafa;
    font-weight: 500;
}

.admin_app_container .mainview table tbody{
    line-height: 1.2;
}

    .admin_app_container .mainview table tbody tr:hover{
        background: rgba(255,240,158,0.5);
    }

    .admin_app_container .mainview table tbody td{
        padding: 0.3em;
    }

/*ヘッダ固定*/
.admin_app_container .mainview .sticky_table{
    overflow: auto;
    height: calc(100vh - 13rem);
}

.admin_app_container .mainview .sticky_table table thead th{
    position: -webkit-sticky;
    position: sticky;
    white-space: nowrap;
    height: 1.5rem;
    padding: 0;
    top: 0;
}

/*出退勤管理*/
.admin_app_container .mainview .sticky_table table.staff_list thead tr:nth-child(2) th{
    top: 1.5rem;
}

.admin_app_container .mainview table.staff_list thead th{
    width: 3em;
}

.admin_app_container .mainview table.staff_list thead .c_check{
    width: 2em;
    height: auto;
}

.admin_app_container .mainview table.staff_list thead .c_name{
    width: 10em;
    height: auto;
}

.admin_app_container .mainview table.staff_list tbody .c_check{
    text-align: center;
}

.admin_app_container .mainview table.staff_list tbody td{
    cursor: pointer;
}

.admin_app_container .mainview table.staff_list tbody tr:hover td:hover{
    background: rgba(255,240,158,1);
}




.lbl_date_name{
    display: flex;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 0.7em;
    padding-bottom: 0.2em;
}

.select_status{
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .select_status li{
        width: calc((100% - 3rem) / 4);
    }

    .select_status li label{
        display: block;
        width: 100%;
        height: 2.5rem;
        position: relative;
    }

    .select_status li label input[type="radio"]{
        position: absolute;
        top: calc(50% - 0.5em);
        left: 1em;
    }

    .select_status li label .lbl{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.2);
        position: relative;
        z-index: 0;
        padding-left: 2em;
        border-radius: 0.25rem;
    }

    .select_status li label input[type="radio"]:checked + .lbl{
        border-color: #19357e;
        box-shadow: 0 0 0 2px #19357e;
        font-weight: 600;
        color: #19357e;
    }

.input_other input[type="text"]{
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    width: 100%;
    margin-bottom: 1rem;
}

.input_times{
    text-align: center;
}

    .input_times input[type="time"]{
        font-size: 1em;
        margin: 0 0.3em;
        border: 1px solid #ccc;
        padding: 0.3em 0.5em;
    }

.submit_set {
    margin-top: 1rem;
}

.submit_set ul{
    display: flex;
    justify-content: center;
    gap: 1rem;
}

    .submit_set button{
        background: #f1f1f1;
        font-size: 1em;
        padding: 0.4em 2em;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: .3s all ease;
    }

    .submit_set button:hover{
        filter: brightness(1.2);
    }

    .submit_set button[type="submit"]{
        background: #19357e;
        color: #fff;
    }

/*お知らせ*/
.push_list .c_detail{
    text-align: center;
    width: 4em;
}

    .push_list .c_detail button{
        border: 1px solid #19357e;
        background: #fff;
        border-radius: 0.25rem;
        padding: 0.2em 0.5em;
        cursor: pointer;
        transition: .3s all ease;
    }

    .push_list .c_detail button:hover{
        background: #19357e;
        color: #fff;
    }

    .push_list .c_date{
        text-align: center;
        width: 9em;
    }

.push_item{
    margin-bottom: 0.5em;
}

    .push_item dt{
        font-size: 0.9em;
        font-weight: 500;
        color: #19357e;
        margin-bottom: 0.2em;
    }

    .push_item dd input[type="text"],
    .push_item dd textarea{
        box-sizing: border-box;
        font-size: 1em;
        padding: 0.2em 0.5em;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        width: 100%;
    }

    .push_item dd textarea{
        height: 10em;
    }

    .push_item.item_sendto ul{
        display: flex;
        flex-wrap: wrap;
        height: 16em;
        overflow: auto;
        gap: 0.25em;
        padding: 0.5em;
    }

    .push_item.item_sendto ul li{
        width: calc((100% - 0.5em) / 3);
    }

    .push_item.item_sendto ul li label{
        position: relative;
        display: flex;
        line-height: 1.2;
        height: 100%;
        cursor: pointer;
    }

    .push_item.item_sendto ul li input[type="checkbox"]{
        position: absolute;
        top: calc(50% - 0.5em);
        left: 0.5em;
    }

    .push_item.item_sendto ul li .lbl{
        box-sizing: border-box;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.3em 0.3em 0.3em 1.5em;
    }

    .push_item.item_sendto ul li  input[type="checkbox"]:checked + .lbl{
        border-color: #19357e;
        box-shadow: 0 0 0 1px #19357e;
        font-weight: 600;
        color: #19357e;
    }

/*就業時間設定*/
.admin_app_container .mainview .sticky_table table.times_table thead tr:nth-child(2) th{
    top: 1.5rem;
}

.admin_app_container .mainview .sticky_table table.times_table thead tr th.c_name{
    width: 10em;
    height: auto;
    left: 0;
    z-index: 1;
}

.admin_app_container .mainview .sticky_table table.times_table tbody tr td:nth-child(1){
    width: 10em;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    white-space: nowrap;
    background: #fff;
}

.admin_app_container .mainview .sticky_table table.times_table tbody tr:hover td:nth-child(1){
    background: #fff7ce;
}

/*休日設定*/
.admin_app_container .mainview .sticky_table table.holiday_table thead tr:nth-child(2) th{
    top: 1.5rem;
}

.admin_app_container .mainview table.holiday_table thead th{
    width: 3em;
}

.admin_app_container .mainview .sticky_table table.holiday_table thead .c_name {
    width: 10em;
    height: auto;
}

.admin_app_container .mainview .sticky_table table.holiday_table tbody tr:hover td:hover{
    background: rgba(255,240,158,1);
}

.admin_app_container .mainview .sticky_table table.holiday_table tbody .c_day {
    text-align: center;
    padding: 0;
}

.admin_app_container .mainview .sticky_table table.holiday_table tbody .c_day label{
    display: block;
    padding: 0.3em;
    cursor: pointer;
}

/*社員マスター*/
.user_master_list .c_edit{
    text-align: center;
    width: 4em;
}

    .user_master_list .c_edit button{
        border: 1px solid #19357e;
        background: #fff;
        border-radius: 0.25rem;
        padding: 0.2em 0.5em;
        cursor: pointer;
        transition: .3s all ease;
    }

    .user_master_list .c_edit button:hover{
        background: #19357e;
        color: #fff;
    }

.user_master_list .c_department{
    width: 3em;
}

.user_master_list .c_name{
    width: 10em;
}

.user_item{
    margin-bottom: 0.5em;
}

    .user_item dt{
        font-size: 0.9em;
        margin-bottom: 0.2em;
        font-weight: 500;
        color: #19357e;
    }

    .user_item dd select,
    .user_item dd input[type="date"],
    .user_item dd input[type="text"],
    .user_item dd input[type="password"]{
        box-sizing: border-box;
        font-size: 1em;
        padding: 0.2em 0.5em;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        width: 100%;
    }

    .user_item.item_user dd{
        display: flex;
        gap: 0.5em;
    }

    .user_item.item_user dd input[type="text"]{
        width: calc((100% - 0.5em) / 2);
    }

    .user_item.item_order dd input[type="text"]{
        width: 4em;
        text-align: center;
    }
    .user_item dd input[type="date"]{
        width: 8em;
    }