@charset "utf-8";
/**
 * 共通(style.css)
 *
 * @see     2022/11  新規作成
 * @version 1.0.0
 */
/*================================================================================*
 * 定数
 *
 * 【補足】
 *================================================================================*/
 :root {
    /* 定数(フォントサイズ) */
    --font-size-base:          12.5px;
    --font-size-l:             14.5px;
    --font-size-m:             13.5px;
    --font-size-s:             12.5px;
    --font-size-xs:            12.0px;
    --font-size-th:            10pt;
    --font-size-td-m:          11pt;
    --font-size-td-s:          10pt;
}
/*--------------------------------------------------------------------------------*
 * テキストエリア
 *--------------------------------------------------------------------------------*/
/* テキストエリア */
textarea {
    resize:                both;
}
/*--------------------------------------------------------------------------------*
 * フォント調整
 *--------------------------------------------------------------------------------*/
body {
    font-size:             var(--font-size-base);
}
button {
    font-size:             var(--font-size-s);
}
.font_size_s {
    font-size:             var(--font-size-s);
}
.font_size_xs {
    font-size:             var(--font-size-xs);
}
 /*=============================================================================*
 * 全体
 *=============================================================================*/
html {
	color:                 #000000;
	font-family:           'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    height:                100%;
}
body {
    background-color:      #fffafa;
    color:                 #000000;
	font-family:           'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    height:                100%;
    margin:                0;
    padding:               0;
}
input, select, textarea {
	color:                 #000000;
	font-family:           'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-size:             var(--font-size-s)!important;
	padding:               3px;
}
label {
    color:               #000000;
    height:                auto;
	padding:               5px;
}
input[type="button"], input[type="submit"]{
	cursor:                pointer;
	font-weight:           normal;
}
input[type="checkbox"], input[type="radio"]{
	cursor:                pointer;
}
::placeholder {
    color:                 #808080;
}
/*=============================================================================*
 * ヘッダー部
 *=============================================================================*/
div.header-div {
    background-color:      #bad4f5;
    padding-left:          5px;
    height:                28px;
    display:               flex;
    top:                   0;
    position:              fixed;
    width:                 100%;
    z-index:               80;
}
div.header-left {
    position:              absolute;
    margin-left:           10px;
}
div.header-right {
    position:              fixed;
    right:                 0;
}
span.header-title {
	font-size:             12pt;
	margin-left:            0px;
}
span.header-date {
	font-size:             10pt;
	margin-left:           20px;
}
span.header-shokuin {
	font-size:             10pt;
	margin-left:           20px;
}
button.header_btn {
    height:                25px;
    width:                 100px;
    border-radius:         8px;
    border:                3px ridge #ec6d71;
    background-color:    #fffafa;
	margin-right:          10px;
}
button.logout_btn {
    height:                25px;
    width:                 100px;
	margin-right:          10px;
}
 /*=============================================================================*
 * メイン部
 *=============================================================================*/
div.main-div {
    margin-top:            40px;
    margin-left:           10px;
    margin-right:          10px;
    width:                 100%;
 }
/*--------------------------------------------------------------------------------*
 * 条件部
 *--------------------------------------------------------------------------------*/
div.cond-div {
    position:              fixed;
    width:                 100%;
    top:                   40px;
    left:                  10px;
}
table.cond-tbl {
    border-collapse:       collapse;
}
table.cond-tbl td, table.cond-tbl th {
    border:                solid 1px #696969;
    color:               #000000;
    vertical-align:        middle;
    white-space:           nowrap;
}
table.cond-tbl th {
    background-color:    #bad4f5;
    padding:               2px 7px 2px 7px;
    text-align:            center;
	width:                 80px;
}
table.cond-tbl td {
    background-color:    #ffffff;
    padding:               5px 5px 5px 5px;
}
span.cond-span {
    color:               #000000;
}
select.sel-year {
	width:                 150px;
}
select.sel-month {
	width:                 80px;
}
select.sel-day {
	width:                 80px;
}
select.sel-block {
	width:                 150px;
}
select.sel-kaikan {
	width:                 150px;
}
#cond_area input[type="radio"], input[type="checkbox"] {
    position:              relative;
    margin-top:            5px;
    margin-right:          2px;
    top:                   2px;
}
/*--------------------------------------------------------------------------------*
 * 制御部
 *--------------------------------------------------------------------------------*/
div.action-div {
    position:              fixed;
    overflow:              hidden;
    width:                 100%;
    top:                   130px;
    left:                  10px;
    white-space:           nowrap;
}
button.main-btn {
    height:                35px;
    width:                 90px;
    border-radius:         4px;
    border:                1px solid #000000;
    background-color:      #dcdcdc;
    margin-right:          5px;
}
#btn_prev {
    margin-left:           30px;
}
button.main-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
button.qr-btn {
    height:                35px;
    width:                 135px;
    border-radius:         4px;
    border:                1px solid #000000;
    background-color:      #dcdcdc;
    margin-right:          5px;
}
button.qr-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
/*--------------------------------------------------------------------------------*
 * 一覧部
 *--------------------------------------------------------------------------------*/
div.list-div {
    position:              fixed;
    width:                 100%;
    top:                   195px;
    left:                  10px;
    overflow:              scroll;
    height:                calc(100vh - 195px);
}
button.edit-btn {
	font-weight:           normal;
	font-size:             10pt!important;
    width:                 45px!important;
}
button.edit-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
button.select-btn {
	font-weight:           normal;
	font-size:             10pt!important;
    width:                 45px!important;
}
button.select-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
button.child-btn {
	font-weight:           normal;
	font-size:             10pt!important;
    width:                 45px!important;
}
button.child-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
button.parent-btn {
	font-weight:           normal;
	font-size:             10pt!important;
    width:                 60px!important;
}
button.parent-btn:hover {
    color:                 #000000;
    background-color:      #ffffff;
}
table.list-tbl {
    border-spacing:        0!important;
    margin-bottom:         1rem;
    background-color:      #ffffff;
}
table.list-tbl th {
    background-color:    #bad4f5;
    color:               #000000;
    padding:               1px 5px 1px 5px;
    vertical-align:        middle;
    white-space:           nowrap;
}
table.list-tbl td.l_absence {
    background-color:    #a9a9a9;
}
table.list-tbl td.l_yellow {
    background-color:    #fef263
}
table.list-tbl td.l_violet {
    background-color:    #dbd0e6;
}
table.list-tbl td.l_taikan_over {
    background-color:    #d3d3d3;
}
table.list-tbl td.l_year_color_0 {
    background-color:      #ffffff;
}
table.list-tbl td.l_year_color_1 {
    background-color:      #fcd575;
}
table.list-tbl td.l_year_color_2 {
    background-color:      #ebf6f7;
}
table.list-tbl td.l_year_color_3 {
    background-color:      #c8d5bb;
}
table.list-tbl td.l_year_color_4 {
    background-color:      #f2c9ac;
}
table.list-tbl td.l_year_color_5 {
    background-color:      #bbc8e6;
}
table.list-tbl td.l_year_color_6 {
    background-color:      #c0a2c7;
}
table.list-tbl td.l_saturday {
    background-color:    #87ceeb;
}
table.list-tbl td.l_sunday {
    background-color:    #ffc0cb;
}
table.list-tbl td.l_no_vacation {
    background-color:    #d3d3d3;
}
table.list-tbl td.l_taikan {
    background-color:    #d3d3d3;
}
table.list-tbl td.l_red {
    background-color:    #ff0000;
}
table.list-tbl td.l_gray {
    background-color:    #c0c0c0;
}
table.list-tbl td.l_row_no {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_child_icon {
    padding-top:           4px;
    text-align:            center;
    width:                 20px;
}
table.list-tbl td.l_day {
    text-align:            center;
    width:                 20px;
}
table.list-tbl td.l_week_nm {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_ymd_comment {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_orange {
    background-color:    #ffa500;
}
table.list-tbl td.l_edit_btn {
    text-align:            center;
    width:                 50px;
}
table.list-tbl td.l_select_btn {
    text-align:            center;
    width:                 50px;
}
table.list-tbl td.l_school_year {
    text-align:            center;
    width:                 50px;
}
table.list-tbl td.l_child_nm {
    text-align:            left;
    padding-left:          4px;
    padding-right:         3px;
    width:                 9%;
}
table.list-tbl td.l_vacation {
    text-align:            center;
    width:                 33px;
}
table.list-tbl td.l_paid {
    text-align:            center;
    width:                 33px;
}
table.list-tbl td.l_verify {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_attend_kbn {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_time {
    text-align:            center;
    width:                 55px;
}
table.list-tbl td.l_esc_text {
    text-align:            left;
    padding-left:          4px;
    padding-right:         4px;
}
table.list-tbl td.l_out_type {
    text-align:            left;
    padding-left:          4px;
    padding-right:         4px;
}
table.list-tbl td.l_kbn {
    text-align:            center;
    width:                 33px
}
table.list-tbl td.l_school_nm {
    text-align:            left;
    padding-left:          4px;
    padding-right:         20px;
}
table.list-tbl th.l_th_day {
    background-color:    #fffafa;
    color:               #000000;
    padding:               1px 5px 1px 5px;
    vertical-align:        middle;
    white-space:           nowrap;
    text-align:            center;
    width:                 20px;
}
table.list-tbl th.l_th_saturday {
    background-color:    #87ceeb;
}
table.list-tbl th.l_th_sunday {
    background-color:    #ffc0cb;
}
table.list-tbl td.l_child_btn {
    text-align:            center;
    padding-left:          2px;
    padding-right:         2px;
}
table.list-tbl td.l_parent_btn {
    text-align:            center;
    padding-left:          2px;
    padding-right:         2px;
}
table.list-tbl td.l_block {
    text-align:            center;
}
table.list-tbl td.l_kaikan {
    text-align:            center;
}
table.list-tbl td.l_paid_flg {
    text-align:            center;
}
table.list-tbl td.l_verify_flg {
    text-align:            center;
}
table.list-tbl td.l_qr_key {
    text-align:            center;
    width:                 40px;
}
table.list-tbl td.l_school_rnm {
    text-align:            left;
    padding-left:          4px;
    padding-right:         4px;
}
table.list-tbl td.l_parent_nm {
    text-align:            left;
    padding-left:          4px;
    padding-right:         4px;
}
table.list-tbl td.l_parent_err_mail {
    text-align:            center;
}
table.list-tbl td.l_attend_mail_flg {
    text-align:            center;
}
table.list-tbl td.l_use_ymd_fm {
    text-align:            center;
    padding-left:          4px;
    padding-right:         4px;
}
table.list-tbl td.l_use_ymd_to {
    text-align:            center;
    padding-left:          4px;
    padding-right:         4px;
}
/*--------------------------------------------------------------------------------*
 * 子画面
 *--------------------------------------------------------------------------------*/
.edit-div {
    display:               none;
    position:              fixed;
    overflow:              scroll;
    top:                   5px;
    left:                  20px;
    width:                 90%;
    height:                95%;
    background-color:    #fffafa;
    border-radius:         5px;
    z-index:               90;
    padding:               10px 20px 10px 20px;
}
.search-child-div {
    display:               none;
    position:              fixed;
    /*overflow:              scroll;*/
    top:                   5px;
    left:                  20px;
    width:                 50%;
    height:                95%;
    background-color:    #fffafa;
    border-radius:         5px;
    z-index:               90;
    padding:               10px 20px 10px 20px;
}
.sch-list-div    {
    position:              fixed;
    overflow:              scroll;
    top:                   5px;
    left:                  20px;
    width:                 55%;
    height:                95%;
    background-color:    #fffafa;
    border-radius:         5px;
    padding:               10px 20px 10px 20px;
}
.overlay {
    display:               none;
    position:              fixed;
    top:                   0;
    left:                  0;
    background-color:    rgba(0, 0, 0, 0.5);
    width:                 100%;
    height:                100%;
    z-index:               80;
}
.sp-overlay{ 
    position:              fixed;
    top:                   0;
    z-index:               100;
    width:                 100%;
    height:                100%;
    display:               none;
    background:          rgba(0,0,0,0.6);
}
.div-spinner {
    height:                100%;
    display:               flex;
    justify-content:       center;
    align-items:           center;  
}
.sp-spinner {
    width:                 40px;
    height:                40px;
    border:                4px #ddd solid;
    border-top:            4px #2e93e6 solid;
    border-radius:         50%;
    animation:             sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% { 
        transform: rotate(360deg); 
    }
}
/*操作履歴子画面*/
table.list-tbl td.l_edit_rireki {
    background-color:    #ffd700;
}
/*--------------------------------------------------------------------------------*
 * 確認・更新履歴
 *--------------------------------------------------------------------------------*/

 .edit-rireki-ul {
    position:              relative;
    cursor:                pointer;
    text-align:            left;
    list-style:            none;
    padding-left:          10px;
}
.edit-rireki-li {
    cursor:                pointer;
    padding-left:          0px;
}
.edit-rireki-div {
    display:               none;
}
table.rireki-tbl {
    margin-top:            5px;
    margin-left:           10px;
}
table.rireki-tbl td.ope_type {
    border:                0px solid #000000;
    text-align:            center;
	width:                 50px;
}
table.rireki-tbl td.ope_kbn {
    border:                0px solid #000000;
    text-align:            center;
	width:                 70px;
}
table.rireki-tbl td.rireki_date {
    border:                0px solid #000000;
    text-align:            left;
	width:                 150px;
}
table.rireki-tbl td.shokuin_nm {
    text-align:            left;
}
/*================================================================================*
 * その他
 *================================================================================*/
/*--------------------------------------------------------------------------------*
 * sticky関連
 *--------------------------------------------------------------------------------*/
.sticky {
    position:              sticky;
    top:                   0;
}
.sticky_lst_table {
    border-collapse:       separate!important;
    border:                solid 0px #696969;
}
.sticky_lst_table thead th {
    position:               sticky;         /* 縦スクロール時に固定する */
    white-space:            nowrap;         /* 高さが変わらないよう改行させない */
    z-index:                1;
    border:                 solid 0px #696969;
}
.sticky_lst_table thead th.sticky_th_row {
    top:                   -0.5px;              /* 1行目の高さ固定(0) */
    border-top:             solid 1px #696969;
    border-bottom:          solid 1px #696969;
    border-right:           solid 1px #696969;
    height:                 20px;
}
.sticky_lst_table thead th.sticky_th_top {
    top:                   -0.5px;              /* 1行目の高さ固定(0) */
    border-top:             solid 1px #696969;
    border-right:           solid 1px #696969;
    height:                 20px;
}
.sticky_lst_table thead th.sticky_th_bottom {
    top:                    23px;           /* 2行目の高さ固定(1行目の高さの位置) */
    height:                 20px;
    border-top:             solid 1px #696969;
    border-bottom:          solid 1px #696969;
    border-right:           solid 1px #696969;
}
.sticky_lst_table thead th.sticky_th_left {
    border-left:            solid 1px #696969;
}
.sticky_lst_table tbody td {
    border-top:             solid 0px #696969;
    border-bottom:          solid 1px #696969;
    border-right:           solid 1px #696969;
    border-left:            solid 0px #696969;
}
.sticky_lst_table tbody td.sticky_td_left {
    border-left:            solid 1px #696969;
}
.sticky_lst_table thead th.sticky_th3_top {
    top:                   -0.5px;              /* 1行目の高さ固定(0) */
    border-top:             solid 1px #696969;
    border-right:           solid 1px #696969;
    height:                 20px;
}
.sticky_lst_table thead th.sticky_th3_middle {
    top:                    23px;           /* 2行目の高さ固定(1行目の高さの位置) */
    height:                 20px;
    border-top:             solid 1px #696969;
    border-right:           solid 1px #696969;
}
.sticky_lst_table thead th.sticky_th3_bottom {
    top:                    46px;           /* 3行目の高さ固定(2行目の高さの位置) */
    height:                 40px;
    border-top:             solid 1px #696969;
    border-bottom:          solid 1px #696969;
    border-right:           solid 1px #696969;
}
/*--------------------------------------------------------------------------------*
 * 位置調整
 *--------------------------------------------------------------------------------*/
 .left {
    text-align:            left;
}
.center {
    text-align:            center;
}
.right {
    text-align:            right;
}
/*=============================================================================*
 * エラーページ
 *=============================================================================*/
 div.errpage_div {
    margin-top:            50px;
    padding:               1px 10px;
    font-size:             12pt;
    text-align:            center;
}