@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* ---------------------------------------------------
   画面共通CSS設定
----------------------------------------------------*/

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

/* ---------------------------------------------------
   基本設定
----------------------------------------------------*/
body {
    font-family: 'UD新ゴ R', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

    /* 職員向けPCサイト */
    body.pc {
        min-width: 1200px;
        overflow-y: scroll;
    }

        /* 職員向けPCサイト */
        body.pc nav {
            min-width: 1200px;
        }

header {
    margin-top: 30px;
    color: #43A047;
}

headerpop {
    color: #43A047;
}

hr {
    border-width: 3px;
    border-color: #43A047;
}

h1 {
    font-size: 25px;
    font-weight: bold;
    font-family: 'UD新ゴ B', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
    margin: 0;
    text-align: center;
}

.align-light {
    text-align: right;
}

footer p {
    text-align: center;
}

.border {
    padding: 10px;
    border: 1px solid #3b4148;
    margin-bottom: 20px;
}

.navbar-toggler {
    padding: .25rem .5rem;
    font-size: 1rem;
}

thead.header:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #cbccce;
    border-bottom: 1px solid #cbccce;
    background: #e2e3e5;
    z-index: -1;
}

/* ヘッダのお知らせ */
.navbar-brand > .rounded-pill {
    background: red;
    position: relative;
    top: -10px;
    left: -22px;
    font-size: .40em;
}

/* 小さいアイコン */
img.smallIcon {
    height: 21px;
}

/* 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。 */
.pre {
    white-space: pre-wrap;
}

/* ---------------------------------------------------
   パソコン版CSS設定
----------------------------------------------------*/
@media screen and (min-width: 768px) {
    /* お知らせ */
    .info-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        max-width: 500px;
        max-height: 500px;
        width: 50%;
        height: 70%;
        transform: translate(-50%,-50%);
        z-index: 110;
    }

        .info-popup.open {
            display: block !important;
        }

    /* お知らせ背景 */
    .info-bg {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        z-index: 100;
    }

        .info-bg.open {
            display: block !important;
        }
}

/* ---------------------------------------------------
   スマートフォン・タブレット版CSS設定
----------------------------------------------------*/
@media screen and (max-width: 767px) {
    /* お知らせ */
    .info-popup {
        display: none;
        position: absolute;
        width: 100%;
        height: calc(100svh - 115.55px);
        bottom: 0px;
        margin-bottom: 0px;
        z-index: 3;
    }

        .info-popup.open {
            display: block !important;
        }
}

/* ---------------------------------------------------
   コントロール設定
----------------------------------------------------*/
input:required {
    background-color: #ffcdd2;
}

input[type=button] {
    display: block;
}

input:valid {
    background-color: #fff;
}

input:focus {
    background-color: #DCEDC8;
}

select:required {
    background-color: #ffcdd2;
}

select:valid {
    background-color: #fff;
}

textarea {
    resize: none;
}

    textarea:required {
        background-color: #ffcdd2;
    }

    textarea:valid {
        background-color: #fff;
    }


.errorMsg {
    color: #ff4b00;
    padding: 0rem .75rem;
}

/* ---------------------------------------------------
   コントロール共通サイズ
----------------------------------------------------*/
/* 幅 */

.width35 {
    width: 35px;
}

.width100 {
    width: 100px;
}

.width125 {
    width: 125px;
}

.width150 {
    width: 150px;
}

.width200 {
    width: 200px;
}

.width250 {
    width: 250px;
}

.width300 {
    width: 300px;
}

.width400 {
    width: 400px;
}

.width500 {
    width: 500px;
}

input[type="datetime-local"] {
    width: 205px;
}

/* ---------------------------------------------------
   Tips
----------------------------------------------------*/
/* 必須 */
.bg-required:before {
    content: "必須";
}

.bg-required {
    background-color: #ff4b00 !important;
}

label.required {
    margin-bottom: .5rem !important;
}

    label.required:before {
        display: inline-block;
        position: relative;
        content: "必須";
        background-color: #ff4b00 !important;
        padding: .35em .65em;
        font-size: .75em;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        vertical-align: baseline;
        white-space: nowrap;
        border-radius: .25rem;
        margin-right: .5em;
        bottom: 0.2em;
    }

/* 任意 */
.bg-optional:before {
    content: "任意";
}

.bg-optional {
    background-color: #03af7a !important;
}

label.optional {
    margin-bottom: .5rem !important;
}

    label.optional:before {
        display: inline-block;
        position: relative;
        content: "任意";
        background-color: #03af7a !important;
        padding: .35em .65em;
        font-size: .75em;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        vertical-align: baseline;
        white-space: nowrap;
        border-radius: .25rem;
        margin-right: .5em;
        bottom: 0.2em;
    }

/* 注釈 */
small.inputAnnotation, .small.inputAnnotation {
    color: #6c757d !important;
    margin-left: .5rem !important;
}

/* ---------------------------------------------------
   ボタン配色設定
----------------------------------------------------*/
/* 共通 */
/* 通常の操作 */

.btn-primary {
    color: #fff;
    background-color: #005aff !important;
    border-color: #005aff;
}

    .btn-primary:hover {
        color: #005aff;
        background-color: #fff !important;
        border-color: #005aff;
    }

    .btn-primary:focus {
        color: #005aff;
        background-color: #fff !important;
        border-color: #005aff;
        box-shadow: 0 0 0 .25rem rgba(49,132,253,.5);
    }

/* 通常の操作（重要でない） 
   例：戻るボタン*/
.btn-outline-primary {
    color: #7f878f;
    background-color: #fff !important;
    border-color: #7f878f;
}

    .btn-outline-primary:hover {
        color: #7f878f;
        background-color: #eee !important;
        border-color: #7f878f;
    }

    .btn-outline-primary:focus {
        color: #7f878f;
        background-color: #eee !important;
        border-color: #7f878f;
        box-shadow: 0 0 0 .25rem rgba(49,132,253,.5);
    }

/* 通常の操作（重要でない） 
   例：取消ボタン*/
.btn-outline-secondary {
    color: #000;
    background-color: #fff !important;
    border-color: #000;
}

    .btn-outline-secondary:hover {
        color: #000;
        background-color: #eee !important;
        border-color: #000;
    }

    .btn-outline-secondary:focus {
        color: #000;
        background-color: #eee !important;
        border-color: #000;
        box-shadow: 0 0 0 .25rem rgba(108,117,125,.5);
    }

/* ポップアップ画面への操作 */
.btn-popup {
    color: #fff;
    background-color: #7f878f !important;
    border-color: #7f878f;
}

    .btn-popup:hover {
        color: #000;
        background-color: #fff !important;
        border-color: #7f878f;
    }

    .btn-popup:focus {
        color: #000;
        background-color: #fff !important;
        border-color: #7f878f;
        box-shadow: 0 0 0 .25rem rgba(49,132,253,.5);
    }

/* 非常に注意が必要な操作 */
.btn-danger {
    color: #fff;
    background-color: #ff4b00 !important;
    border-color: #ff4b00;
}

    .btn-danger:hover {
        color: #ff4b00;
        background-color: #fff !important;
        border-color: #ff4b00;
    }

    .btn-danger:focus {
        color: #ff4b00;
        background-color: #fff !important;
        border-color: #ff4b00;
        box-shadow: 0 0 0 .25rem rgba(225,83,97,.5);
    }

/* 注意が必要な操作 */
.btn-warning {
    color: #000;
    background-color: #fff100 !important;
    border-color: #fff100;
}

    .btn-warning:hover {
        color: #000;
        background-color: #fff !important;
        border-color: #fff100;
    }

    .btn-warning:focus {
        color: #000;
        background-color: #fff !important;
        border-color: #fff100;
        box-shadow: 0 0 0 .25rem rgba(217,164,6,.5);
    }

/* menu */
.btn-success {
    color: #fff;
    background-color: #198754 !important;
    border-color: #198754;
}

    .btn-success:hover {
        color: #198754;
        background-color: #fff !important;
        border-color: #198754;
    }

    .btn-success:focus {
        color: #198754;
        background-color: #fff !important;
        border-color: #198754;
        box-shadow: 0 0 0 .25rem 0 0 0 0.25rem rgba(60,153,110,.5);
    }

/* ---------------------------------------------------
   テーブル共通設計
----------------------------------------------------*/

.table-secondary {
    --bs-table-bg: #c8c8cb;
    border-color: black;
}

.table_sticky thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    border-collapse: collapse;
}

.table_sticky th {
    position: relative;
}

    .table_sticky th::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 1px solid #7f878f;
    }

/* ホバー時の設定 */
tr:hover {
    /* background-color:#c8c8cb; */
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}

.table_sticky tbody td {
    border-top: 1px solid #7f878f;
    border-bottom: 1px solid #7f878f;
    border-right: 1px solid #7f878f;
    border-left: 1px solid #7f878f;
}

._sticky {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-top: none;
    border-bottom: none;
}

    ._sticky:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 1px solid #7f878f;
        border-bottom: 1px solid #7f878f;
        border-left: 1px solid #7f878f;
        z-index: -1;
    }

/* 縦書き */
.vertical-writing {
    writing-mode: vertical-rl;
}

/* キャプション（基本） */
.control_caption {
    background-color: #ffca80;
    text-align: center;
    font-weight: bold;
    font-family: 'UD新ゴ B', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
    height: 42px;
}

/* 太字 */
th, .fwb {
    font-weight: bold !important;
    font-family: 'UD新ゴ B', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}

/* ---------------------------------------------------
   ソート機能
----------------------------------------------------*/
/* ヘッダーtable内 th */
table.tablesorter th {
    position: relative;
    cursor: pointer;
}

    /* △▽の定義 */
    table.tablesorter th::before, .tablesorter th::after {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        border: 4px solid transparent;
        right: 5px;
        top: 50%;
    }

    /* △の定義 */
    table.tablesorter th::before {
        border-bottom-color: #aaa;
        margin-top: -11px;
    }

    /* ▽の定義 */
    table.tablesorter th::after {
        border-top-color: #aaa;
        margin-top: 1px;
    }

    table.tablesorter th.tablesorter-headerAsc::before {
        border-bottom-color: #444;
    }

    table.tablesorter th.tablesorter-headerDesc::after {
        border-top-color: #444;
    }

    table.tablesorter th.sorter-false::after, th.sorter-false::before {
        border: none !important;
    }

/* ---------------------------------------------------
   操作練習環境設定
----------------------------------------------------*/
/*ブリンク*/
.blink {
    animation: blinkAnime 1.1s infinite alternate;
}

@keyframes blinkAnime {
    0% {
        color: #000000
    }

    100% {
        color: #ff66ff
    }
}

/*ブリンク（ポップアップ）*/
.blinkpop {
    animation: blinkAnime 1.1s infinite alternate;
}

@keyframes blinkAnime {
    0% {
        color: #000000
    }

    100% {
        color: #ff66ff
    }
}

/* マウスポインタ */
.pointer {
    cursor: pointer;
}