﻿/* ★★★　タグカスタマイズ　★★★ */
html {
    font-family: "Meiryo UI", Verdana, Arial;
}

/* 全体の高さはヘッダーとフッターを除いた高さ */
body {
    padding-top: 3.7rem;
    padding-bottom: 1.4rem;
}

/* ★★★　bootstrapカスタマイズ　★★★ */
/* 入力項目のラベル */
.input-group-text {
    background-color: rgba(52, 58, 64, 0.1);
}

/* テーブル行ホバー */
.table-hover > tbody > tr:hover {
    background-color: rgba(120, 194, 239, 0.5);
}

/* 月選択の幅を強制的に指定 */
input.form-control[type="month"] {
    width: 11rem;
}

/* 日付選択の幅を強制的に指定 */
input.form-control[type="date"] {
    width: 11rem;
}

input.form-control-sm[type="date"] {
    width: 9.5rem;
}

/* アコーディオンマーク表示 */
.accordion a[aria-expanded="false"]:before {
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    margin-right: 0.5rem;
}

.accordion a[aria-expanded="true"]:before {
    content: "\f103";
    font-family: "Font Awesome 5 Free";
    margin-right: 0.5rem;
}

/* ツールチップ幅 */
.tooltip-inner {
    max-width: 100%;
}

/* ★★★　JQuery Sortableカスタマイズ　★★★ */
body.dragging, body.dragging * {
    cursor: move !important;
}

/*科目ドラッグ中のスタイル*/
.dragged {
    position: fixed;
    opacity: 0.5;
    z-index: 2000;
}

/*科目階層マスタの科目のスタイル*/
ul.block li {
    cursor: move;
    list-style: none;
    margin: 4px 4px 4px 4px;
    padding: 2px 4px 4px 4px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    word-spacing: 0.3em;
    border: 2px solid white;
    background-color: #7f8c8d;
    color: White;
    border-radius: 4px;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    -webkit-font-smoothing: subpixel-antialiased;
}

    /*科目のドロップ場所を表示するアイコンの位置指定*/
    ul.block li.placeholder {
        position: relative;
    }

        /*科目ドラッグ中の跡地に表示するスタイル*/
        ul.block li.placeholder:before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            margin-top: -8px;
            left: -8px;
            top: -1px;
            border: 8px solid transparent;
            border-left-color: red;
            border-right: none;
            z-index: 2000;
        }

    /*第４階層以降の科目*/
    ul.block li:not([li*=level]) {
        background-color: #4e95dc;
        color: #dfdfdf;
    }

    /*第２階層の科目*/
    ul.block li.level2 {
        background-color: #15406a;
        color: #f9f9f9;
    }

    /*第３階層の科目*/
    ul.block li.level3 {
        background-color: #1d558d;
        color: #f4f4f4;
    }

    /*第２階層で変更不可親フラグまたは変更不可フラグが立っている科目*/
    ul.block li.level2.notChgParentFlg1, ul.block li.level2.notChgFlg1 {
        background-color: #555555;
    }

    /*第３階層で変更不可親フラグまたは変更不可フラグが立っている科目*/
    ul.block li.level3.notChgParentFlg1, ul.block li.level3.notChgFlg1 {
        background-color: #777777;
    }

    /*第４階層以降で変更不可親フラグまたは変更不可フラグが立っている科目*/
    ul.block li.notChgParentFlg1, ul.block li.notChgFlg1 {
        background-color: #999999;
    }

    /*変更不可フラグ確認用*/
    /*ul.block li.notChgFlg1 {
    border-color: yellow;
}*/

    /*ドロップされた科目の枠線表示*/
    ul.block li.dropped {
        border-color: red;
    }

/* ★★★　Validationチェックエラー設定　★★★ */
/* Input項目 */
input.error {
    border: 1px solid red;
    background-color: #ffeeee;
}
/* Select項目 */
select.error {
    border: 1px solid red;
    background-color: #ffeeee;
}
/* Input項目エラーメッセージ */
label.error {
    font-weight: bold;
    color: red;
}

/* TextBoxFor項目エラーメッセージ */
.field-validation-error {
    color: #ff0000;
}
/* TextBoxFor項目 */
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
/* エラーサマリー */
.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

/* ★★★　システム固有設定　★★★ */
/* メニュー背景用画像 */
/*.smc-menu-bg-image {
    background-image: url('/Content/irlogo.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}*/

/* 背景用マスク */
.smc-bg-mask {
    min-height: calc(100vh - 5.1rem);
    height: 100%;
    background-color: rgba(248, 249, 250, 0.5);
}

/* ログイン背景用マスク */
.smc-bg-mask-login {
    margin-top: -3.7rem;
    height: calc(100vh - 1.4rem);
    background-color: rgba(248, 249, 250, 0.5);
}

/* ログイン枠の設定 */
.smc-login-area {
    background-color: white;
}

/* 検索枠の設定 */
.smc-search-area {
    background-color: white;
}

    .smc-search-area .card-header {
        background-color: #343a40 !important;
        color: white !important;
    }

    .smc-search-area a {
        color: white !important;
    }

/* ファイル取込枠の設定 */
.smc-file-area {
    background-color: white;
}

    .smc-file-area .card-header {
        background-color: #343a40 !important;
    }

    .smc-file-area a {
        color: white !important;
    }

/* 入力補助枠の設定 */
.smc-support-area {
    background-color: white;
}

    .smc-support-area .card-header {
        background-color: #343a40 !important;
    }

    .smc-support-area a {
        color: white !important;
    }

/* 入力枠の設定 */
.smc-input-area {
    background-color: white;
}

    .smc-input-area .card-header {
        background-color: #343a40 !important;
    }

    .smc-input-area a {
        color: white !important;
    }

/* 一覧枠の設定 */
.smc-list-area {
    background-color: white;
}

/* グリッド内のヘッダ色 */
.smc-thead {
    color: white !important;
}

/* グリッド内のヘッダ色(必須) */
.smc-thead-required {
    color: lightpink !important;
}

/* スクロールするテーブルを囲むDIVに設定 */
/* DIVの高さは画面ごとに異なるため個別に指定 ex)max-height: calc(100vh - 22rem) */
.smc-scroll-table {
    border: solid 1px #ced4da;
    overflow: auto;
    white-space: nowrap;
}

    /* スクロール内テーブルのカスタマイズ */
    .smc-scroll-table > table {
        border: 0;
        margin-bottom: 0;
    }

    /* テーブルヘッダ項目のカスタマイズ */
    .smc-scroll-table thead th {
        background-color: #343a40 !important;
        color: white;
        font-size: small;
        position: sticky;
        text-align: center;
        top: 0;
        vertical-align: middle;
        z-index: 10;
    }

        .smc-scroll-table thead th:first-child {
            left: 0;
            min-width: 3rem;
            position: sticky;
            top: 0;
            width: 3rem;
            z-index: 20;
        }

    /* テーブルボディ項目のカスタマイズ */
    .smc-scroll-table tbody td:first-child {
        background: white;
        left: 0;
        min-width: 3rem;
        position: sticky;
        text-align: center;
        vertical-align: middle;
        width: 3rem;
        z-index: 10;
    }

/* 縦幅を細くしたテーブルを囲むDIVに採用(情報量が多いグリッド等) */
.smc-narrow-scroll-table {
    border: solid 1px #ced4da;
    overflow: auto;
    white-space: nowrap;
}

    /* スクロール内テーブルのカスタマイズ */
    .smc-narrow-scroll-table > table {
        border: 0;
        margin-bottom: 0;
    }

    /* テーブルヘッダ項目のカスタマイズ */
    .smc-narrow-scroll-table thead th {
        background-color: #343a40 !important;
        color: white;
        font-size: small;
        position: sticky;
        text-align: center;
        top: 0;
        vertical-align: middle;
        z-index: 10;
    }

        .smc-narrow-scroll-table thead th:first-child {
            left: 0;
            min-width: 3rem;
            position: sticky;
            top: 0;
            width: 3rem;
            z-index: 20;
        }

    /* テーブルボディ項目のカスタマイズ */
    .smc-narrow-scroll-table tbody td:first-child {
        background: white;
        left: 0;
        min-width: 3rem;
        position: sticky;
        text-align: center;
        vertical-align: middle;
        width: 3rem;
        z-index: 10;
    }

    .smc-narrow-scroll-table tbody td {
        padding-top: 1px;
        padding-bottom: 1px;
    }

/* 表示専用テーブルを囲むDIVに採用(主に入力がないグリッド) */
/* 横スクロールの固定が必要な場合は、各画面でスタイルを追加する */
/* smc-scroll-tableを参考に横スクロール固定の列分ヘッダと明細のスタイルを追加 */
.smc-view-scroll-table {
    border: solid 1px #ced4da;
    overflow: auto;
    white-space: nowrap;
}

    /* スクロール内テーブルのカスタマイズ */
    .smc-view-scroll-table > table {
        background-color: white;
        border: 0;
        margin-bottom: 0;
    }

    /* テーブルヘッダ項目のカスタマイズ */
    .smc-view-scroll-table thead th {
        background-color: #343a40 !important;
        color: white;
        font-size: small;
        text-align: center;
        vertical-align: middle;
    }

    .smc-view-scroll-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .smc-view-scroll-table tbody td {
        padding-top: 0;
        padding-bottom: 0;
        vertical-align: middle;
    }

/* メインメニューボタンのカスタマイズ */
.smc-btn-main-menu {
    height: 12rem;
}

/* サブメニューボタンのカスタマイズ */
.smc-btn-sub-menu {
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* 検索ボタンのカスタマイズ */
.smc-btn-search {
    border-color: goldenrod !important;
    color: goldenrod !important;
}

    .smc-btn-search:hover {
        border-color: goldenrod !important;
        background-color: goldenrod !important;
        color: white !important;
    }

    .smc-btn-search.disabled, .smc-btn-search:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }

/* ファイル操作ボタンのカスタマイズ */
.smc-btn-file {
    border-color: darkorange !important;
    color: darkorange !important;
}

    .smc-btn-file:hover {
        border-color: darkorange !important;
        background-color: darkorange !important;
        color: white !important;
    }

    .smc-btn-file.disabled, .smc-btn-file:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }

/* 一覧ボタンのカスタマイズ */
.smc-btn-list {
    border-color: black !important;
    color: black !important;
}

    .smc-btn-list:hover {
        border-color: black !important;
        background-color: black !important;
        color: white !important;
    }

    .smc-btn-list.disabled, .smc-btn-list:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }
/* 画面遷移ボタンのカスタマイズ */
.smc-btn-nav {
    border-color: green !important;
    color: green !important;
}

    .smc-btn-nav:hover {
        border-color: green !important;
        background-color: green !important;
        color: white !important;
    }

    .smc-btn-nav.disabled, .smc-btn-nav:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }

/* 処理実行ボタンのカスタマイズ */
.smc-btn-exec {
    border-color: blueviolet !important;
    color: blueviolet !important;
}

    .smc-btn-exec:hover {
        border-color: blueviolet !important;
        background-color: blueviolet !important;
        color: white !important;
    }

    .smc-btn-exec.disabled, .smc-btn-exec:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }

/* 削除ボタンのカスタマイズ */
.smc-btn-del {
    border-color: red !important;
    color: red !important;
}

    .smc-btn-del:hover {
        border-color: red !important;
        background-color: red !important;
        color: white !important;
    }

    .smc-btn-del.disabled, .smc-btn-del:disabled {
        color: dimgray !important;
        background-color: white !important;
        border-color: dimgray !important;
        cursor: default !important;
    }

/* ★★★　fullcalenderカスタマイズ　★★★ */
/* カレンダーヘッダ */
.fc-day-header {
    background-color: #343a40;
    color: white;
}

/* カレンダー(日曜日) */
.fc-day.fc-sun {
    background-color: lightpink;
}

/* カレンダー(土曜日) */
.fc-day.fc-sat {
    background-color: lightblue;
}

/* カレンダーイベント(試合) */
.smc-fc-game {
    background-color: rebeccapurple;
    color: white !important;
}

/* カレンダーイベント(イベント) */
.smc-fc-event {
    background-color: forestgreen;
    color: white !important;
}

/* ★★★　横アコーディオンカスタマイズ　★★★ */
/* 横アコーディオン対象範囲全体の設定 */
.side_accordion .accordion_area {
    margin: 0 auto;
    overflow: hidden;
}

/* 横アコーディオンタブ毎の設定 */
.side_accordion .accordion_one .accordion_header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    float: left;
    background-color: #343a40 !important;
    border-right: 1px solid white;
    color: #fff;
    font-size: medium;
    padding: 0;
    text-align: left;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

    /* 横アコーディオンタブにフォーカスした際の透過設定 */
    .side_accordion .accordion_one .accordion_header:hover {
        opacity: .8;
    }

    /*アコーディオンタブ名のセンタリング設定*/
    .side_accordion .accordion_one .accordion_header .header_inner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px;
    }

    /* 横アコーディオンタブの高さ設定 */
    .side_accordion .accordion_one .accordion_header .i_box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 15.53rem);
        margin-top: -20px;
    }


        /* 横アコーディオンを閉じているときのアイコン表示 */
        .side_accordion .accordion_one .accordion_header .i_box:before {
            content: "\f067";
            font-family: "Font Awesome 5 Free";
            position: absolute;
        }

    /* 横アコーディオンを開いているときのアイコン表示 */
    .side_accordion .accordion_one .accordion_header.open .i_box:before {
        content: "\f068";
        font-family: "Font Awesome 5 Free";
        position: absolute;
    }

/* 横アコーディオンを開いたときの表示範囲設定 */
.side_accordion .accordion_one .accordion_inner {
    float: left;
    width: 80%;
    overflow: hidden;
    display: none;
    padding: 0;
}

    /* 初期選択アコーディオンの表示設定 */
    .side_accordion .accordion_one .accordion_inner.stay {
        display: block;
    }

    /* 横アコーディオン内の要素の設定 */
    .side_accordion .accordion_one .accordion_inner .box_one {
        height: calc(100vh - 16.05rem);
        padding: 15px;
    }

/* メニューバー */
#sidebarCollapse {
    padding: 12px 6px;
    border-radius: 0 0.25rem 0.25rem 0;
    transition: all 0.3s;
    /*案１：縦長ボタン*/
    /*position: absolute;
            top: 62px;
            left: 0;
            width: 38px;
            vertical-align: middle;*/
    /*案１：縦長ボタン*/
    /*案２：ヘッダーのコンテンツ幅を広げる*/
    position: relative;
    margin-right: 3%;
    /*案２：ヘッダーのコンテンツ幅を広げる*/
}

    #sidebarCollapse span {
        /*案１：縦長ボタン*/
        /*writing-mode: vertical-lr;
            text-orientation: upright;
            letter-spacing: 2px;*/
        /*案１：縦長ボタン*/
    }

    #sidebarCollapse i {
        text-align: center;
        width: 20px;
    }

.wrapper {
    display: block;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    position: fixed;
    left: -250px; /*画面外*/
    transition: all 0.3s;
    overflow-x: hidden;
    overflow-y: scroll;
    /*案１：縦長ボタン*/
    /*height: 100vh;*/
    /*z-index: 1041;*/ /*Navbarよりも上*/
    /*top: 0;*/
    /*案１：縦長ボタン*/
    /*案２：ヘッダーのコンテンツ幅を広げる*/
    height: calc(100vh - 62px);
    top: 62px;
    z-index: 1029; /*Navbarより下
            /*案２：ヘッダーのコンテンツ幅を広げる*/
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /*透明*/
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
    /*案１：縦長ボタン*/
    /*z-index: 1040;
            background: rgba(0, 0, 0, 0.2);*/
    /*案２：ヘッダーのコンテンツ幅を広げる*/
    z-index: 1028;
    background: rgba(0, 0, 0, 0.1);
}

    /* ovelayにactiveクラス付与で表示 */
    .overlay.active {
        display: block;
        opacity: 1;
    }

/*sidebarにactiveクラス付与で画面上に表示*/
#sidebar.active {
    left: 0;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar ul {
    padding-left: 2rem;
}

    #sidebar ul.components {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }

    #sidebar ul li {
        padding: 0.5rem 0;
        display: block;
    }

        #sidebar ul li a:hover,
        #sidebar > ul > li > a[aria-expanded="true"],
        #sidebar #home > li.active > a {
            font-weight: bold;
        }


#sidebar > ul > li > a > i,
#sidebar > ul > li > i {
    opacity: 0.5;
}

#sidebar > ul > li > a:hover > i,
#sidebar > ul > li > a[aria-expanded="true"] > i,
#sidebar #home > li.active > a > i {
    opacity: 1;
}

/*メニュー左端の開閉アイコン*/
#sidebar > ul > li > a[aria-expanded="true"]::before {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    opacity: 0.5;
}

/*メニュー左端の開閉アイコン*/
#sidebar > ul > li > a[aria-expanded="false"]::before {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    opacity: 0.5;
}

#sidebar ul li ul li {
    font-size: 0.9rem;
}

    #sidebar ul li ul li.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

#sidebar ul li > ul li.active > a {
    color: #007bff;
    font-weight: bold;
}

#sidebar ul li ul li a:hover {
    color: #007bff;
    font-weight: bold;
}

/*メニューバー閉じるボタン*/
#closeSidebar {
    float: right;
    opacity: 0.5;
    border: none;
}

/*案１：縦長ボタン*/
/*@media (max-width: 576px){
    #sidebarCollapse {
        position: unset;
        color: white;
        top: unset;
        left: unset;
    }

    #sidebarCollapse span {*/
/*「メニュー」のテキストを消す*/
/*display: none;
    }
}*/
/*案１：縦長ボタン*/

/*案２：ヘッダーのコンテンツ幅を広げる*/
.navbar .container {
    max-width: 100%;
}

@media (max-width: 991px) {
    #sidebarCollapse span {
        /*「メニュー」のテキストを消す*/
        display: none;
    }
}
/*案２：ヘッダーのコンテンツ幅を広げる*/


/*グリッドのヘッダー罫線*/
.header-border-right {
    border-right: 1px solid white !important;
}

.smc-scroll-table thead tr:nth-child(1) th {
    top: 0;
}

.smc-scroll-table thead tr:nth-child(3) th {
    top: 27px; /* 3行目は1〜2行目の高さの位置に固定する */
}

.smc-scroll-table thead tr:nth-child(4) th {
    top: 55px; /* 3行目は1〜2行目の高さの位置に固定する */
}


/* グリッドの科目名称の幅指定 */
.min-width-subject {
     min-width: 20rem; 
}
