@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;600&display=swap');

/* 変数定義 */
* {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500 !important;
}
:root {
    /* ベース */
    --base_01_color: #ececef;
    --base_02_color: #e9e9e9;
    --base_03_color: #fbfafd;
    --base_04_color: #ccc;
    --base_05_color: #737278;
    /* サブ１ */
    --sub_blue_50: #e9f3fc;
    --sub_blue_100:#cbe2f9;
    --sub_blue_200: #9dc7f1;
    --sub_blue_300:#0070BD;
    --sub_blue_400:#0b5cad;
    --sub_blue_500:#1e90ff;

    /* ブラック */
    --black_color:#333238;

    /* ホワイト */
    --white_color:#ffff;

    /* オレンジ */
    --orange_color:#ff7f50;

    /* レッド */
    --red_color:#ff6347;

    /* calendarで使用している色 */
    --calendar_blue_color:blue;
    --calendar_red_color:#ff6347;
    --calendar_green_color:#90ee90;
    --calendar_yellow_color:#f0e68c;


    /* ----------------------------------- */
    /* フォントサイズ */
    --pc_font_size:16px;
}
/* ページング */
#pageselect_base{
    width: 65px;
}

/* width */
.width-10{width:10% !important;}
.width-15{width:15% !important;}
.width-20{width:20% !important;}
.width-30{width:30% !important;}
.width-40{width:40% !important;}
.width-50{width:50% !important;}
.width-60{width:60% !important;}
.width-70{width:70% !important;}
.width-80{width:80% !important;}
.width-90{width:90% !important;}
.width-100{width:100% !important;}

/* bootstrap------------------------- */

/* input */
.input-group-text{background-color: var(--white_color) !important;}
.btn-outline-dark:hover {color: var(--white_color)!important;}
.modal-dialog {margin: 5.75rem auto !important;}

.og-btn-gp-area{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.og-btn-gp-area a{
    width: 150px;
}
.og-btn-gp-area .og-btn{
    background-color: var(--base_03_color);
    border-style: none;
    border-radius: 30px;
    padding: 10px 5px;
    font-size: 12px !important;
    width: 100%;
}
.og-btn-gp-area .og-btn.active{
    background-color: var(--sub_blue_50);
}
.og-btn-blue{
    background-color: var(--sub_blue_50);
    border-style: none;
    border-radius: 30px;
    padding: 10px 5px;
    font-size: 12px !important;
    width: 150px;
}
.og-btn-gp-area .og-btn:hover,.og-btn-blue:hover{
    opacity: 50%;
}

@media screen and (max-width: 900px) {
    .og-btn-gp-area .og-btn{
        font-size: 11px !important;
    }
}

.og-table-center th,.og-table-center td{
    text-align: center;
    vertical-align: middle;
}

.sticky01{
    position: sticky;
    left: 0;
    background: #eee !important;
    z-index: 2;
}
.sticky02{
    position: sticky;
    left: 0;
    background: #eee !important;
    z-index: 1;
}
.sticky01:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-left: 1px solid #dee2e6;
}