/* *************
　共通
************* */
/* readonly属性=trueの場合 */
input[readonly] {
    pointer-events: none;
}
/* input file のdisabledの場合 */
input[type="file"].disabled, label.file-disabled {
    pointer-events: none; /* クリックを無効化 */
    cursor: not-allowed;  /* 禁止アイコン */
    background-color: #e9ecef; /* Bootstrapの無効化色 */
}

/* ページ内リンク時のヘッダー部調整 */
:root{
	--header: 60px;
	scroll-padding: var(--header);
}

/* システムフォントのスタックを使用する */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* サイドバー */
/* > sidebar-dark */
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.disabled-link {
    color: #595f64;
}
[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link{
    background-color: transparent;
}
/* > sidebar-light */
[class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open>.nav-link {
    background-color: transparent;
    color: #343a40;/*#212529;*/
}
[class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open:hover>.nav-link {
    background-color: rgba(0, 0, 0, .1);
    color: #212529;
}
[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link {
    color: #343a40;
}
[class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link.disabled-link,
[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.disabled-link {
    color: #a4a6a8;       /*  無効化されたリンクのテキスト色 */
    /* cursor: not-allowed !important;        カーソルを「禁止」マークにする */
    /* pointer-events: none;      クリック不可にする */
}
[class*=sidebar-light-] .nav-sidebar>.nav-item:hover>.nav-link.disabled-link {
    background-color: transparent;
}
/* > サイドバーメニューのリンク（nav-link）の高さを調整 */
.nav-sidebar .nav-link {
    padding: 5px 10px; /* パディングを調整して、アイテム間隔を狭める */
    font-size: 14px; /* フォントサイズを小さくして高さを縮小 */
}
/* > アイコンのサイズを小さくする */
.nav-sidebar .nav-icon {
    font-size: 16px; /* アイコンサイズを小さくする */
}

/* タブの独自レイアウト */
/* > アクティブなタブの背景色、ボーダー色、フォントの強調 */
.nav-tabs.my-nav-tabs .nav-link.active {
    /* background-color: #007bff !important; アクティブなタブの背景色 */
    /* color: white !important;              アクティブなタブのテキスト色 */
    /* border-color: #007bff #007bff transparent !important; ボーダーの強調 */
    /* color: #007bff; */
    font-weight: bold;                     /* フォントの太さを強調 */
}
/* > ホバー時のスタイルも強調 */
.nav-tabs.my-nav-tabs .nav-link:hover {
    /* background-color: #0056b3;  ホバー時の背景色 */
    /* color: white !important;    ホバー時のテキスト色 */
    /* color: #0056b3 !important; */
}
/* > 非アクティブなタブの色を薄めに */
.nav-tabs.my-nav-tabs .nav-link {
    /* color: #6c757d; 通常状態のタブのテキスト色を薄めに */
}

/* ドロップダウン　 */
/*  > 長いテキストを改行させる*/
.dropdown-item {
    white-space: normal;
    word-wrap: break-word;
}
/*  >  card-outline card-outline-tabs で使用したときのアウトラインを除く */
.card-outline.card-outline-tabs .dropdown-menu .dropdown-item {
    border-top: none !important;
}


/* 長い文字列を省略表示 ※使用箇所でwidthの指定が必要 　adminlte.min.css .text-truncat　と同様
.ellipsis {
    white-space: nowrap;        / * テキストを1行にする * /
    overflow: hidden;           / * 内容が親要素の幅を超えたら隠す * /
    text-overflow: ellipsis;    / * 省略記号「...」を表示 * /
}
*/

/* ファイルアップロード部品の入力エラー表示 */
.custom-file.is-invalid label{
    border-color: #dc3545;
}

/* テキストを改行させない */
.nowrap {
    white-space: nowrap;
}

    /* ページネーションの設定
    .pagination .active .page-link {
        background-color: #007bff; / * アクティブなページの背景色 * /
        color: white;              / * アクティブなページのテキスト色 * /
        border-color: #007bff;     / * アクティブなページの枠線の色 * /
        cursor: default;           / * カーソルを通常の矢印に変更 * /
        pointer-events: none;      / * クリック不可にする * /
    }
    .pagination .disabled .page-link {
        background-color: #e9ecef; / * 無効化されたリンクの背景色 * /
        color: #6c757d;            / * 無効化されたリンクのテキスト色 * /
        / *border-color: #e9ecef; 無効化されたリンクの枠線 * /
        cursor: not-allowed;       / * カーソルを「禁止」マークにする * /
        pointer-events: none;      / * クリック不可にする * /
    }
    .page-link:focus {
        box-shadow: none;/ * 0 0 0 0.2rem rgba(0, 123, 255, 0.25);  設定の上書き * /  
    }
    */

/* ボタンレイアウト */
.btn-no-border {
    border: none; /* ボーダーを無くす */
    box-shadow: none; /* ボックスシャドウも無効に */
}

/* select2のmultipleの体裁 */
.my-select2-default .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: transparent;
    border-color: #ced4da;
    color: initial;
}
.my-select2-default .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
}

/* 無効化されたリンクの見た目を変える */
.disabled-link-wrapper {
    pointer-events: none; /* 全体のクリックを無効化 */
  }

.disabled-link {
    color: #6c757d; /* 見た目を無効風に */
    text-decoration: none; /* 下線をなくす */
    cursor: not-allowed; /* カーソルを禁止マークにする */
}
.disabled-link:hover,
.disabled-link:focus,
.disabled-link:active {
    background-color: transparent;
    color: #6c757d; /* 見た目を無効風に */
}


/* ●　dl(td,dd) 下線レイアウト */
dl.dl-uline dt,  dl.dl-uline dd {
    border-bottom: 1px solid #ccc; /* 下線のスタイル */
    padding: 8px 0; /* 行間を調整 */
    margin: 0; /* 余白をリセット */
}
dl.dl-nline dt,  dl.dl-nline dd {
    border: none; /* 下線のスタイル */
    padding: 4px 0; /* 行間を調整 */
    margin: 0; /* 余白をリセット */
}

/* ● 文字列の体裁 カンマ区切り */
.after-comma::after {
    content: ", "; /* カンマ＋スペースを追加 */ 
}
.after-comma:last-child::after {
    content: ""; /* 最後の要素のカンマを削除 */
}

/* ● モーダルの体裁 */
.modal-fit {/*追加体裁*/
    max-width: fit-content;
}
.modal .modal-footer input[type=button]:not(.not-focus-layout):focus,
.modal .modal-footer button:not(.not-focus-layout):focus {
    outline: 2px solid rgba(0, 123, 255, 0.75); /* 青色の半透明な外枠を表示 */
    outline-offset: 2px; /* ボタンの外側に枠を表示する間隔 */
}


/* 警告アイコンの位置をボタンの左上に固定 */
.position-relative {
    position: relative; /* ボタンの周囲を基準にアイコンを配置 */
}
/* > 警告アイコン ボタン.position-relative　とともに使用する */  
.warning-icon {
    position: absolute;
    top: -5px;
    left: -15px;
    font-size: 16px; /* アイコンのサイズ */
    /*color: #dfaa0c !important; アイコンの色 濃いめの黄色にする */
    cursor: pointer;
}
.warning-icon-left-near {
    left: -5px;
}
    /* > 警告アイコン ツールチップを非表示にする
    .warning-icon::after {
        content: attr(data-tooltip); / * data-tooltip属性の内容を表示 * /
        position: absolute;
        top: 25px;
        left: 0;
        background-color: #333;
        color: #fff;
        padding: 5px;
        border-radius: 3px;
        white-space: nowrap;
        font-size: 12px;
        display: none; / * 初期状態では非表示 * /
        z-index: 1000; / * ボタンの上に表示 * /
    }
    */
    /* > 警告アイコン ホバー時にツールチップを表示
    .warning-icon:hover::after {
        display: block; / * ホバーでツールチップを表示 * /
    }
    */

/* 斜体の協調 */
.strong-itaric i, i.strong-itaric {
    font-style: italic;          /* 斜体 */
    transform: skew(-20deg);     /* 文字をさらに25度傾ける */
    display: inline-block;
    margin-left: 3px;
    margin-right: 1px;
}


/* SweetAlert2 の体裁 */
/*   >  ボックス自体の体裁　透過 */
.custom-swal-popup {
    background-color: rgba(0, 0, 0, 0) !important; /* 完全透過 */
    box-shadow: none !important;
    border : none;
}
/*   >  ローディングインジケータの体裁　 */
.custom-swal-loader {
    color: #545454;
    border-color: #545454 transparent #545454 transparent;
}
/*   > ローディングインジケータの背景色 をグレーではなく無いようなイメージに
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: rgba(255, 255, 255, 0.3);
} */

/*   >  タイトルの体裁 */
.custom-swal-title {
}

/* bootstrap5 用体裁 */
.bg-primary-thin {
    background-color: rgba(13, 110, 253, 0.1);
}
.bg-secondary-thin {
    background-color: rgba(108, 117, 125, 0.1);
}
.bg-success-thin {
    background-color: rgba(40, 167, 69, 0.1);
}
.bg-danger-thin {
    background-color: rgba(220, 53, 69, 0.1);
}
.bg-warning-thin {
    background-color: rgba(255, 193, 7, 0.1);
}
.bg-info-thin {
    background-color: rgba(23, 162, 184, 0.1);
}
.bg-dark{
    background-color: rgba(52, 58, 64, 0.1);
}


/* 拡張 */
.w-auto {
    width: auto; /* 幅を自動調整 */
}
.d-inlie-block {
    display: inline-block; /* コンテンツに応じたサイズに */
}
.custom-file{
    max-width : 400px;
}
.custom-file.custom-file-my-add-coment{
    max-width : 400px;
}
.bg-warning-thin {
    background-color: rgb(255, 193, 7, .2);
}
/* > DataTables データテーブルの体裁 */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    background-color: rgb(108, 117, 125);/*#d33333;*/
}
table.dataTable.dtr-inline.collapsed>tbody>tr.child>td.child>ul.dtr-details>li.text-center,
table.dataTable.dtr-inline.collapsed>tbody>tr.child>td.child>ul.dtr-details>li.text-right {
    text-align: inherit !important;
}


/* レスポンシブ対応　画面サイズに合わせて調整 */
@media (max-width: 768px) {
    /* テーブル */
    /* > テーブルの文字サイズ */
    .table-responsive table.my-table-sm-responsive-text:not(.small) {
        font-size : 0.8rem;
    }
    /* > card内でpadding=0で表示するtableに関して　左右に設定されいているpaddingはなしとする */
    .card-body.p-0 .table tbody>tr>td:first-of-type, .card-body.p-0 .table tbody>tr>th:first-of-type, .card-body.p-0 .table tfoot>tr>td:first-of-type, .card-body.p-0 .table tfoot>tr>th:first-of-type, .card-body.p-0 .table thead>tr>td:first-of-type, .card-body.p-0 .table thead>tr>th:first-of-type {
        padding-left: unset;
    }
    .card-body.p-0 .table tbody>tr>td:last-of-type, .card-body.p-0 .table tbody>tr>th:last-of-type, .card-body.p-0 .table tfoot>tr>td:last-of-type, .card-body.p-0 .table tfoot>tr>th:last-of-type, .card-body.p-0 .table thead>tr>td:last-of-type, .card-body.p-0 .table thead>tr>th:last-of-type {
        padding-right: unset;
    }

    /* 文字サイズを小さくする */
    .my-small-text-responsive {
        font-size: 0.8rem;
    }

    /* btn-group  画面幅が狭くなったら縦並びにする */
    .btn-group.my-btn-responsive {
        flex-direction: column;
        width: 100%; /* ボタンを親幅いっぱいに広げる */
    }
    .btn-group.my-btn-responsive .btn {
        width: 100%; /* ボタンをフル幅に */
    }

    /* チェックボックス体裁 */
    .form-check {
        padding-left:0;
    }
}

/* （bootstrap5 のように）*/
/*  > sm (576px) 以上の画面サイズでボーダーを非表示にする */
@media (min-width: 576px) {
  .border-sm-0 {
    border: 0 !important;
  }
  .border-bottom-sm-0 {
    border-bottom: 0 !important;
  }
}

/* *************
　個別
************* */
/* ● ログイン */
.login-logo, .register-logo {
    font-size: 1.8rem;
}

/* ● メニュー画面中のテーブルの設定 */
/*  > 通常 */
.my-menu-table {
    height : auto;
}
/*  > 画面サイズが　タブレット（縦向き）　*/
@media (max-width: 768px) {
    .my-menu-table:has(table.table.table-head-fixed) {
        height : 250px;/*縦スクロールを出す*/
    }
}

/* ● 登録ボタンは気持ち幅を広く */
button:has(i.fa-save):not(.w-auto) {
    min-width: 180px; /* ここで希望する幅に調整 */
}

/* ● 入力フィールド　日本語・英語　の接頭文字定義 */
.input-group-text.ja-en {
    width: 60px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    display: inline-block;
}


/* ● 論集情報一覧 PDFファイル表示ボタンの体裁 */
.my-btn-file-pdf {
    /* width: 75px; */
    /* 一般公開対応↓ */
    width: 78px;
    padding-right: 1px;
    padding-left: 1px;
}
@media (max-width: 768px) {
    .my-btn-file-pdf {
        width: 60px;
    }
}

/* ● 日本語・英語表記のボックス体裁 */
.my-area-ja-eng:first-child {
    border-bottom: 1px dotted #ccc; 
}


/* ● 共通モーダルメッセージボックス(syse.msgbox.js)の体裁 */
.modal.modal-syse-msgbox .modal-footer button:not(.btn-default) {
    min-width : 120px;
}
.modal.modal-syse-msgbox .modal-footer input[type=button]:not(.not-focus-layout):focus,
.modal.modal-syse-msgbox .modal-footer button:not(.not-focus-layout):focus {
    outline: 2px solid rgba(0, 123, 255, 0.75); /* 青色の半透明な外枠を表示 */
    outline-offset: 2px; /* ボタンの外側に枠を表示する間隔 */
}

/* ● キーワード入力部の体裁 */
.area-input-keywords{
    max-width: 900px;/*入力ボックスが5個で折り返す用調整*/
}

/* ●投稿画面のタイトル、著者名入力エリアの体裁 */
/*    flexbox を利用して残りの列を均等に分配 
table.my-hover-show-tbl thead th:nth-child(1) ,
table.my-hover-show-tbl tbody th {
    width: 90px; /  * 最初の列は固定幅 *  /
}
table.my-hover-show-tbl tr {
    display: flex;
}
table.my-hover-show-tbl thead th.flex-fill,
table.my-hover-show-tbl tbody td {
    flex: 1; /  * 残りの幅を均等分配 *  /
}
*/