@charset "utf-8";

/* 共通 */
/*BODY*/
.bodyw {
    width: 1450px;
}

/*別窓BODY*/
.bodyw-w {
    width: 800px;
    background-color: rgb(192, 251, 255);
}

/*位置調整*/
.frame {
    display: flex;
    justify-content: space-between;
}

.left,
.center,
.right {
    display: inline-block;
}


/* index.html */
/*Top 見出し日付*/
h1 {
    background-color: rgb(213, 234, 242);
}

/*日報、休暇　見出し*/
h2 table {
    background-color: rgb(254, 233, 192);
}

/*main.html スケジュールdiv*/
.schedule-group {
    width: 1200px;
    /*background-color: rgba(243, 107, 33, 0.277);*/
    border: 5px solid rgb(243, 107, 33);
    padding: 20px;
}

/* スケジュール表table 日曜日（tr の先頭） */
.schedule tr *:first-child {
    color: #fd3333;
    background-color: rgb(255, 229, 234);
}

/* スケジュール表table 土曜日（tr の後尾） */
.schedule tr *:last-child {
    color: #0b77ea;
    background-color: rgb(200, 229, 232);
}


/*予定表の日付リンク*/
.day-link {
    font-size: 13px;
    letter-spacing: 0.1em;
}

/* span*/
.title {
    font-size: large;
    font-weight: bold;
}

.text {
    font-size: small;
}

#button {
    text-align: right;
}

/*各カレンダー*/
table {
    border-collapse: collapse;
    /* th、tdなどの隣接するセルの枠線を重ねて表示する */
    background: #ffffff;
}

/*リンク*/
a {
    color: #000000;
    text-decoration: none;
}

a.widelink {
    display: block;
}


/*スケジュール
.schedule tr {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 150px;
}
.schedule th {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 150px;
}
.schedule td {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 150px;
    text-align: left;
    vertical-align: top;
}
/*みんなの予定
.eve-sche tr {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 50px;
}
.eve-sche th {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 50px;
}
.eve-sche td {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 50px;
    text-align: left;
    background-color: rgb(255, 243, 193);
}
/*みんなの予定：件名
#schedule-member {
    width: 250px;
}
/*みんなの予定
.eve-sche-group {
    width: 800px;
    border: 5px solid rgb(238, 193, 13);
    padding: 20px;
}
/*予定表の月リンク
.month-link {
    font-size: medium;
    letter-spacing: normal;
}*/


/*日報閲覧*/
.nippou-his tr {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
}

.nippou-his th {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 40px;
}

.nippou-his td {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    text-align: center;
    vertical-align: top;
    width: 10px;
}

#section {
    text-align: left;
    background-color: rgb(224, 255, 244);
}

#simei {
    width: 150px;
    white-space: nowrap;
    text-align: left;

}


/*日報入力*/
/* .nip-cre {
    width: 600px;
}
.※index.html ドラッグ時間指定のテーブル nippou-cre {
    padding-left: 62px;
}
.※index.html ドラッグ時間指定のテーブル nippou-cre tr {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
}
.※index.html ドラッグ時間指定のテーブル nippou-cre th {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 50px;
}
.※index.html ドラッグ時間指定のテーブル nippou-cre td {
    border: 1px #999 solid;
    /* 枠線をつける
    font-weight: lighter;
    font-size: small;
    width: 150px;
    text-align: center;
    vertical-align: top;
    width: 10px;
} */


/*日報作成　内容テキストボックス*/
.input th {
    vertical-align: text-top;
    font-weight: normal;
}

.input td {
    height: 40px;
}


/*当日ハイライト*/
.today-schedule {
    background-color: rgb(252, 232, 154);
}

/* 休祝日
#holiday {
    background-color: rgb(255, 213, 225);
    color: red;
} */

#furlough {
    color: red;
}

/*リンクボタン*/
.press {
    border: 1px #999 solid;
    text-decoration: none;
    /*下線消す*/
    background: #e0e0e0;
    padding: 5px 10px;
    /*内側の余白*/
    font-family: 'Avenir', 'Arial';
    /*フォントをいい感じに*/
}


/*日報閲覧*/
#inbox1 {
    border: 1px #999 solid;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    margin: 10px;
    background-color: rgb(228, 228, 228);
}

#inbox2 {
    padding: 10px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
}

.nip-vie {
    padding: 50px;
}

.nip-vie tr {
    border: 1px rgb(245, 174, 174) solid;
    /* 枠線をつける */
    font-weight: lighter;
    padding: 10px;
    margin: 10px;
}

.nip-vie th {
    border: 1px rgb(245, 174, 174) solid;
    background-color: rgb(255, 219, 192);
    /* 枠線をつける */
    font-weight: lighter;
    padding: 10px;
    margin: 10px;
}

.nip-vie td {
    border: 1px rgb(245, 174, 174) solid;
    /* 枠線をつける */
    font-weight: lighter;
    padding: 10px;
    margin: 10px;
}


/*休暇申請　履歴
.kyuuka-his tr {
    border: 1px rgb(143, 143, 143) solid;
    /* 枠線をつける
    font-weight: lighter;
    padding: 5px;
    margin: 5px;
}
.kyuuka-his th {
    border: 1px rgb(143, 143, 143) solid;
    /* 枠線をつける
    font-weight: lighter;
    padding: 5px;
    margin: 5px;
    background-color: rgb(197, 197, 197);
}
.kyuuka-his td {
    border: 1px rgb(143, 143, 143) solid;
    /* 枠線をつける
    font-weight: lighter;
    padding: 5px;
    margin: 5px;
}*/


/*フッター*/
footer {
    text-align: right;
}


/*テキストボックス*/
.textarea {
    resize: none;
    width: 600px;
    height: 200px;
    padding: 5px;
}

.textarea-subject {
    resize: none;
    width: 600px;
    height: 15px;
    padding: 5px;
    vertical-align: middle;
    font-size: medium;
}


/*ポップアップ*/
#popup {
    display: none;
    /* label でコントロールするので input は非表示に */
}

.popup-open {
    cursor: pointer;
    /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
    display: none;
    /* input にチェックが入るまでは非表示に */
}

#popup:checked~.popup-overlay {
    display: block;
    z-index: 99999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.popup-window {
    width: 100vw;
    max-width: 650px;
    padding: 20px;
    background-color: rgb(195, 255, 255);
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.popup-text {
    margin: 0;
}

.popup-text:not(:last-of-type) {
    margin-bottom: 1em
}

/*報告・登録ボタン*/
.regist {
    background-color: rgb(0, 191, 0);
}

/*閉じるボタン*/
.close {
    border: #828282 solid 1px;
    width: 50px;
    background-color: #ededed;
    font-size: 13px;
    padding: 2px;
}

/*日報閲覧　検索*/
.search th {
    vertical-align: text-top;
    font-weight: normal;
}

.search td {
    height: 40px;
}


/*  */
/*  */
/*  */


/* ヘッダー（年月とボタン） */
div.calendar_header {
    text-align: center;
}

/* 年月 */
div.calendar_header>p#year_month_label {
    margin: 20px 20px 10px;
    font-size: 1.5em;
    font-weight: bold;
}

/* ボタン */
button#prev_year_btn,
button#prev_month_btn,
button#now_btn,
button#next_month_btn,
button#next_year_btn {
    width: 3em;
    height: 2em;
}

/* カレンダーテーブル */
/* table.calendar_tbl {
    min-width: 600px;
    margin: 20px auto 0;
    border: 1px solid;
    border-collapse: collapse;
} */

/* カレンダーテーブルの見出し（曜日） */
/* table.calendar_tbl tr th {
    text-align: center;
    border: 1px solid #000;
} */

/* カレンダーテーブルの見出し（日曜日） */
/* table.calendar_tbl tr th:first-child {
    color: #f00;
} */

/* カレンダーテーブルの見出し（土曜日） */
/* table.calendar_tbl tr th:last-child {
    color: #00f;
} */

/* カレンダーテーブルの日付部分 */
/* table.calendar_tbl tr td {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #000;
    height: 3em;
} */

/* カレンダーテーブルで日付が入らない部分 */
/* table.calendar_tbl tr td.no_date {
    background-color: #f2f2f2;
} */

/* カレンダーテーブルの日付の部分（日曜日） */
/* table.calendar_tbl tr td:first-child {
    z-index: 10;
    background-color: #fadbda;
    color: #f00;
} */

/* カレンダーテーブルの日付の部分（土曜日） */
/* table.calendar_tbl tr td:last-child {
    background-color: #ddeeff;
    color: #00f;
} */

/* マウスオーバー時 */
table.calendar_tbl tr td.with_date:hover {
    background-color: #fadfc0;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*見出し日付*/
h1 {
    background-color: rgb(213, 234, 242);
}


.class_days {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 150px;
    text-align: center;
    vertical-align: top;
}


#calendar {
    display: flex;
    flex-wrap: wrap;
}

section {
    margin: 10px;
}

h1 {
    font-size: 18px;
}




/**/
/* 共通 */
/**/

/* タブ */
.tab {
    max-width: 600px;
    margin: 0 auto;
}

.tab-list {
    display: flex;
}

.tab-list-item {
    width: 25%;
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
}

.tab-contents {
    background-color: #ffede2;
    display: none;
    padding: 20px;
}

.is-btn-active {
    background-color: #ffede2;
    font-weight: bold;
}

.is-contents-active {
    display: block;
}

/* 文字カラー */
.class_color1 {
    color: red;
}

.class_color2 {
    color: blue;
}

.class_color3 {
    color: black;
}

.class_color4 {
    color: green;
}

/*  背景カラー */
.class_background_color1 {
    background-color: aqua;
}

.class_background_color2 {
    background-color: gainsboro;
}

.class_background_color3 {
    background-color: lightcyan;
}

.class_background_color4 {
    background-color: pink;
}

/*　見出しカラー　
.class_th_color1 th {
    background-color: gainsboro;
}*/



/* エリアサイズ */
.class_area_size1 {
    height: 60px;
}

.class_area_size2 {
    width: 300px;
}

.class_area_size3 {
    width: 1450px;
    height: 750px;
}

/* フォントサイズ */
.class_font_size1 {
    font-size: 24px;
}

/* ボタンサイズ */
.class_btn_size1 {
    width: 50px;
    height: 50px;
}

.class_btn_size2 {
    width: 100px;
    height: 40px;
}

/* セレクトサイズ */
.class_select_size1 {
    width: 220px;
    height: 40px;
}

/* 登録ボタン */
.class_resist_btn {
    width: 100px;
    height: 40px;
    background: rgb(0, 200, 0);
}

/* 削除ボタン */
.class_delete_btn {
    width: 100px;
    height: 40px;
    background: red;
}

/* 取り下げボタン */
.class_withdrawn_btn {
    width: 100px;
    height: 40px;
    background: yellow;
}

/* マージンレフト */
.class_margin_left1 {
    margin-left: 1040px;
}

.class_margin_left2 {
    margin-left: 60%;
}

.class_margin_left3 {
    margin-left: 68%;
}

.class_margin_left4 {
    margin-left: 5%;
}

.class_margin_left5 {
    margin-left: 50%;
}

.class_margin_left6 {
    margin-left: 57%;
}


/* マージンボトム */
.class_margin_botom1 {
    margin-bottom: 10px;
}

/* マージントップ */
.class_margin_top1 {
    margin-top: 70px;
}

.class_margin_top2 {
    margin-top: 5%;
}

.class_margin_top3 {
    margin-top: 20px;
}


/* ボーダー */
.class_border1 {
    border: 1px dashed #000;
}

/* フロートレフト */
.class_float_left {
    float: left;
}

/* フロートライト */
.class_float_right {
    float: right;
}

/* オーバーフロー */
.class_overflow {
    overflow-y: auto;
    overflow-x: hidden;
}

/* 非表示 */
.class_display_none {
    display: none;
}





/* index.html */


/*スケジュール カレンダー表*/
#id_currender_tbl td {
    /* border: 1px solid #ddd; #3/11 */
    padding: 5px;
    text-align: center;
}

/* 左端（日曜） */
#id_currender_tbl td:first-child {
    color: red;
}

/* 右端（土曜） */
#id_currender_tbl td:last-child {
    color: royalblue;
}

/*
#id_currender_tbl td.is-disabled {
    color: #ccc;
} */

#id_currender_tbl tr {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

#id_currender_tbl th {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

/* css つまみサイズと色を調整 */
#id_slider_custom .ui-slider-handle {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    background: #0088ff;
    border: 3px solid #000088;
}

/* css 移動範囲の色 */
#id_slider_custom .ui-slider-range {
    background: #c7e7f7;
}

/* スケジュール登録&休暇申請 画面　table */
.table_schedule td {
    border: 0px solid #ddd;
    padding: 5px;
    text-align: left;
    text-align: top;
}

/* table 行間 */
.Between {
    height: 5px;
    width: 5px;
}

.sortable_table {
    height: 600px;

}

/*出勤簿画面*/
#id_attendance_currender_tbl td {
    /* border: 1px solid #ddd; #3/11 */
    padding: 5px;
    text-align: center;
}

#id_attendance_currender_tbl tr {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

#id_attendance_currender_tbl th {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

/*日報閲覧画面*/
#id_reportview_currender_tbl td {
    /* border: 1px solid #ddd; #3/11 */
    padding: 5px;
    text-align: center;
}

#id_reportview_currender_tbl tr {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

#id_reportview_currender_tbl th {
    border: 1px #999 solid;
    /* 枠線をつける */
    font-weight: lighter;
    font-size: small;
    width: 300px;
}

/*管理者画面*/
/* スタッフ一覧　table */
.table_staff {
    border: 1px solid #000000;
    text-align: center;
}

.table_staff th,
.table_staff td {
    border: 1px solid #000000;
    padding: 10px;
}

/* スタッフマスタ　table */
.table_staffmaster {
    border: 0px solid #ddd;
    padding: 10px;
    text-align: left;
    vertical-align: text-top;
}

/* スタッフ行ホバー動作 */
.class_staff_info:hover {
    cursor: pointer;
    background-color: cornsilk;
}

/* 休日設定 */
.class_holiday_color {
    background-color: pink;
}

/* 休暇申請履歴 */
/*休暇申請履歴一覧　table*/
.table_absence_tb1 th {
    background-color: gainsboro;
    text-align: center;
}

.table_absence_tb1 td {
    padding: 5px;
}

#id_absence {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
}

/* 休暇行ホバー動作 */
.class_absence_info:hover {
    cursor: pointer;
    background-color: cornsilk;
}

/* テーブルヘッダー固定 */
.sticky {
    position: sticky;
    top: 0;
    left: 0;
    border-top: none;
}

.sticky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #ccc;
    z-index: -1;
}






/**/
/**/
/**/

/**/
/**/
/**/
/**/