/****************************************************************************/
/*                                                                          */
/*      機能名      ：  システム共通スタイルシート                          */
/*      ファイル名  ：  style.css                                           */
/*      概要        ：  システム共通スタイルシート                          */
/*                                                                          */
/*      命名規約                                                            */
/*          接頭辞を付与した半角英字のスネーク形式                          */
/*                                                                          */
/*      接頭辞                                                              */
/*          css_        顧客管理システム独自のデザインクラス名              */
/*                      （当ファイル内の命名に使用する）                    */
/*                                                                          */
/*          js_         JavaScriptなどで利用するセレクター専用              */
/*                      （当ファイル内の命名に使用しない）                  */
/*                                                                          */
/*          なし        上記以外                                            */
/*                      （bootstrapなどのクラス名）                         */
/*                                                                          */
/*      履歴                                                                */
/*          日付        名前                内容                            */
/*          2022/09/05  FMN)TSUBOI.K        新規作成                        */
/*                                                                          */
/****************************************************************************/

/*  /****************************************************************************/
/*  /*  全般                                                                    */
/*  /****************************************************************************/
/*  tr {
/*      vertical-align:middle;
/*  }
/*
/*  .css_main_content {
/*      position:relative;
/*      width:100%;
/*      height:0;
/*      padding-top:40%;
/*  }
/*
/*  .css_main_content iframe {
/*      position:absolute;
/*      top:0;
/*      left:0;
/*      width:100%;
/*      height:100%;
/*  }
*/

/**
** bootstrap
** */
.row_custom {
    margin-right: 0;
    margin-left: 0;
}
/*--------------------------------------------------------------------------*/
/*      共通                                                                */
/*--------------------------------------------------------------------------*/
/* 全要素共通 */
* {
    /* フォントサイズ */
    font-size: small;
    /* フォント種類 */
    font-family: "Noto Sans JP";
}

/* 画面全体 */
body {
    /* 背景色 */
    background-color: #ededed;
    /* スクロール（横） */
    overflow-x: hidden;
}

/* リンク（通常時） */
a {
    /* 文字の太さ */
    font-weight: 700;
    /* 文字色 */
    color: #00ac97;
    /* 文字装飾 */
    text-decoration: none;
    /* カーソル */
    cursor: pointer;
}

/* リンク（マウスオーバー時） */
a:hover,
a:active {
    /* 文字の太さ */
    font-weight: 700;
    /* 文字色 */
    color: #00917f;
    /* 文字装飾 */
    text-decoration: underline;
}

/* 外側の上下余白 */
.css_margin_top_bottom {
    /* 外側余白（上） */
    margin-top: 10px;
    /* 外側余白（下） */
    margin-bottom: 10px;
}

/* チェックボックス */
input[type="checkbox"] {
    /* 縮小しない */
    flex-shrink: 0;
}

/* セレクトボックス */
/* select { */
/* 幅 */
/* max-width: max-content; */
/* } */

/* フォームコントロールスタイル */
.form-control-sm {
    padding: 0.1rem 0.5rem;
    font-size: 1.0rem;
}

/* フォームコントロールスタイル(セレクトボックス) */
.form-select-sm {
    font-size: 1.0rem;
}

/* 読み取り専用 */
select[readonly],
a[readonly],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    pointer-events: none;
}

[readonly] {
    background-color: #e9ecef;
    color: #000;
    opacity: 0.6;
}

select[readonly],
a[readonly] {
    opacity: 1;
}

[readonly]+label {
    pointer-events: none;
}

select[multiple] option:checked,
select[size] option:checked {
    /* background: #0099ff; */
    background: linear-gradient(#0099ff, #0099ff);
    color: white;
}

/* 必須ラベル */
.css_required_label {
    /* 外側余白（左） */
    margin-left: 5px;
    /* 外側余白（右） */
    margin-right: 5px;
    /* 要素の配置方法 */
    float: left;
}

/* 非表示項目 */
.css_hidden_item {
    /* 表示状態 */
    display: none !important;
}

/* ハイライトテキスト */
.css_highlight_text_color {
    /* 文字色 */
    color: red;
}

.css_success_text_color {
    /* 文字色 */
    color: blue;
}

/* 文字数制限(三点リーダーによる省略) ※幅はデフォルト300px。外部より調整可 */
.css_ellipsis {
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ボタンアイコン */
.css_icon_button {
    border: none;
    outline: none;
    background: transparent;
}

/* ダウンロードリンクの前のアイコン */
a[download]::before,
.css_download_link:link::before {
    content: url(/img/icon/file_download.svg);
    display: inline-block;
    vertical-align: middle;
}

/* サンプルカラーの表示領域*/
.div-css_block_sample_color {
    width:16px;
    height:16px;
    float:left;
    border:1px solid #9f9f9f;
}

/* 淡い青*/
.css_background_color_pale_blue {
    background-color: #ccf7fd;
}

/* 淡い赤*/
.css_background_color_pale_red {
    background-color: #ffcccc;
}

/* 淡い灰色*/
.css_background_color_pale_gray {
    background-color: #dddddd;
}

/* チェックボックスラベルに近い文字サイズ */
.css_span_sm {
    font-size: .900rem;
}
/* 折り返し禁止 */
.css_no_wrap {
    white-space: nowrap;
}
/* テキストボックスと同じスタイル枠 */
.css_textbox_style {
    border: 1px solid #ced4da;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}
/* テキストボックスと同じスタイル枠の非活性 */
.css_textbox_style.disabled {
    background-color: #e9ecef;
    color: #6c757d;
}
/*--------------------------------------------------------------------------*/
/*      長いテキストの一部を表示/非表示に切り替える                         */
/*--------------------------------------------------------------------------*/
.css_long_text_area {
    display: table;
    position: relative;
    width: 100%;
}

.css_long_text {
    max-height: 80px;
    overflow: hidden;
    position: relative;
    transition: .5s;
}

.css_long_text.max_height_tall {
    max-height: 550px;
}
.css_long_text::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    transition: 1s;
}

.css_long_text_area input {
    visibility: hidden;
}

.css_long_text_area label {
    position: absolute;
    bottom: 0;
    display: block;
    font-size: .9em;
    padding: 2px 0px 2px 15px;
    right: 0;
    background: #aaa;
    border-radius: 5px;
    color: white;
    z-index: 2;
    cursor: pointer;
}

.css_long_text_toggle_label:before {
    content: "続きを表示";
}

.css_long_text_toggle_label:has(input:checked):before {
    content: "閉じる"
}

.css_long_text_toggle_label:has(input:checked)~.css_long_text {
    max-height: max-content;
}

.css_long_text_toggle_label:has(input:checked)~.css_long_text:before {
    opacity: 0
}
/*--------------------------------------------------------------------------*/
/*      フォーム関連                                                        */
/*--------------------------------------------------------------------------*/
/* フォームエリア（外側） */
.css_form_area_outer {
    /* 外側余白（上） */
    margin-top: 10px;
    /* 外側余白（下） */
    margin-bottom: 10px;
    /* 外側余白（左） */
    margin-left: 0px;
    /* 外側余白（右） */
    margin-right: 0px;
    /* 内側余白（上） */
    padding-top: 0px;
    /* 内側余白（下） */
    padding-bottom: 0px;
    /* 内側余白（左） */
    padding-left: 10px;
    /* 内側余白（右） */
    padding-right: 10px;
}

/* フォームエリア（内側） */
.css_form_area_inner {
    /* 外側余白（上） */
    margin-top: 0px;
    /* 外側余白（下） */
    margin-bottom: 0px;
    /* 外側余白（左） */
    margin-left: 0px;
    /* 外側余白（右） */
    margin-right: 0px;
    /* 内側余白（上） */
    padding-top: 0px;
    /* 内側余白（下） */
    padding-bottom: 0px;
    /* 内側余白（左） */
    padding-left: 0px;
    /* 内側余白（右） */
    padding-right: 0px;
}

/* フォームタイトル（画面名） */
.css_form_main_title {
    /* 文字の太さ */
    font-weight: 700;
    padding-top: 10px;
}
/* フォームタイトル（画面名） */
.css_form_title {
    /* 文字の太さ */
    font-weight: 700;
}

/* フォーム */
.css_form {
    /* 外側余白 */
    margin: 10px 10px;
}

/*--------------------------------------------------------------------------*/
/*      グループ枠／コンテナ関連                                            */
/*--------------------------------------------------------------------------*/
/* グループ枠（タイトル付き） */
.css_box {
    /*【div】囲み枠部分*/
    position: relative;
    /* 必須 */
    /* 外側の余白 */
    margin: 24px 2px;
    /* 内側の余白 */
    padding: 30px 16px 16px;
    /* 枠線 */
    border: 2px solid #ced4da;
    /* 背景色 */
    background: fff;
    /* 角丸 */
    border-radius: 5px;
    /*  color: #999;                            /* テキスト色 */
    /*  box-shadow: 5px 5px 0 #aaffdd;          /* 囲み枠に影を付ける */
}

/*【span】タイトル部分*/
.css_box .css_box_title {
    position: absolute;
    /* 必須 */
    /* 囲み枠の上を基準として外側（上）に16px移動 */
    top: -16px;
    /* 囲み枠の左を基準として内側（右）に16px移動 */
    left: 16px;
    /* 行の高さ */
    line-height: 32px;
    /* 左右の余白 */
    padding: 0 12px;
    /* 背景色 */
    background: #99dfff;
    /* 角丸 */
    border-radius: 5px;
    /*  color: #448866;                         /* テキスト色 */
}

/*【p】本文部分 */
.css_box p,
table {
    margin: 0;
    padding: 0;
}

/* 画面項目コンテナ（枠線、背景色あり） */
.css_form_item_container {
    /* 囲み線（太さ） */
    border: solid 1px;
    /* 囲み線（色） */
    border-color: #BBBBBB;
    /* 囲み線（角の丸み） */
    border-radius: 6px;
    /* 背景色 */
    background-color: white;
    /* 自動折返し */
    white-space: nowrap;
    /* 内側余白（上） */
    padding-top: 15px;
    /* 内側余白（下） */
    padding-bottom: 15px;
    /* 内側余白（左） */
    padding-left: 30px;
    /* 内側余白（右） */
    padding-right: 30px;
}

/* 要素を並列に配置するコンテナ（枠線、背景色なし） */
.css_flex_container {
    /* 配置方法 */
    display: flex;
    /* 配置方向 */
    flex-direction: row;
}
.css_flex_container.right {
    margin-left: auto;
}

.css_flex_container * {
    /* 外側余白（右） */
    margin-right: 5px;
}

/*--------------------------------------------------------------------------*/
/*      顧客基本情報                                                        */
/*--------------------------------------------------------------------------*/
/* 顧客基本情報テーブル */
.css_customer_info_table {
    /*  width: 100%;                            /* 表示サイズ（幅） */
    /*  border-collapse: separate;              /* セル境界 */
    /*  border-spacing: 0;                      /* セル境界幅 */
    /*  border-radius: 6px;                     /* 角丸 */
    /* 枠線  */
    border: solid 1px #bbbbbb;
    /*  background-color: white;                /* 背景色 */
}


/* 顧客基本情報テーブル（ヘッダ行） */
.css_customer_info_table thead th {
    /* 文字サイズ*/
    font-size: 120%;
    /* 背景色 */
    background-color: #eaf8f6;
    /* 角丸(左) */
    border-top-left-radius: 6px;
    /* 角丸(右) */
    border-top-right-radius: 6px;
}

/* 顧客基本情報テーブル（ヘッダ末尾行） */
.css_customer_info_table thead th:last-of-type {
    /* 枠線（下） */
    border-bottom: solid 1px #bbbbbb;
}

/* 顧客基本情報テーブル（セル） */
.css_customer_info_table th,
.css_customer_info_table td {
    /* 自動折返し */
    white-space: nowrap;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 内側余白（上） */
    padding-top: 5px;
    /* 内側余白（下） */
    padding-bottom: 5px;
    /* 内側余白（左） */
    padding-left: 10px;
    /* 内側余白（右） */
    padding-right: 10px;
    /* width: 25%                               */
}

/* 顧客基本情報テーブル（項目ラベル） */
.css_customer_info_table label {
    /* 自動折返し */
    white-space: nowrap;
    /* 文字の太さ */
    font-weight: 700;
}

/* 顧客基本情報テーブル（td内項目ラベル） */
.css_customer_info_table td label,
.css_customer_info_table td button {
    width: 120px;
}

/*--------------------------------------------------------------------------*/
/*      顧客基本情報タブメニュー                                            */
/*--------------------------------------------------------------------------*/
/* タブメニュー（コンテナ） */
.css_customer_info_tab_menu {
    /* 表示サイズ（幅） */
    width: 100%;
    /* 表示状態 */
    display: flex;
    /* */
    flex-wrap: wrap;
    /*　囲み線（下） */
    border-bottom: solid 2px #bbbbbb;
}

/* タブメニュー（コンテナ内のラジオボタン） */
.css_customer_info_tab_menu input {
    /* 表示状態 */
    display: none;
}

/* タブメニュー（コンテナ内のラベル） */
.css_customer_info_tab_menu label {
    /* 文字色 */
    color: #888888;
    /* 背景色 */
    background-color: white;
    /* 整列位置（横） */
    text-align: center;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 内側余白（上） */
    padding-top: 8px;
    /* 内側余白（下） */
    padding-bottom: 4px;
    /* 内側余白（左） */
    padding-left: 0px;
    /* 内側余白（右） */
    padding-right: 0px;
    /* 囲み線（全体） */
    border: 1px solid #bbbbbb;
    /* 囲み線（下） */
    border-bottom: none;
    /* 自動折返し */
    white-space: nowrap;
    /* 自動伸縮 */
    flex: 1;
    /* ポインター表示 */
    cursor: pointer;
    max-width: 140px;
}

/* タブメニュー（コンテナ内の最初ラベル） */
.css_customer_info_tab_menu label:first-of-type {
    /* 囲み線（右側） */
    border-left: 1px solid #bbbbbb;
    /* 角丸（左上端） */
    border-top-left-radius: 6px;
}

/* タブメニュー（コンテナ内の最後ラベル） */
.css_customer_info_tab_menu label:last-of-type {
    /* 角丸（右上端） */
    border-top-right-radius: 6px;
}

/* タブメニュー（コンテナ内の選択中ラベル） */
.css_customer_info_tab_menu input:checked+label {
    /* 文字の太さ */
    font-weight: 700;
    /* 文字色 */
    color: #00ac97;
    /* 背景色 */
    background-color: #eaf8f6;
    /* 囲み線 */
    border: 2px solid #00ac97;
}

/*--------------------------------------------------------------------------*/
/*      ラベル関連                                                          */
/*--------------------------------------------------------------------------*/
/* ラベル */
.css_form_label {
    /* 文字の太さ */
    font-weight: 700;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/*--------------------------------------------------------------------------*/
/*      ボタン関連                                                          */
/*--------------------------------------------------------------------------*/
/* ボタンエリア */
.css_form_btn_area {
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: left;
}

/* ボタンエリア 中央配置 */
.css_form_btn_area_center {
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ボタン */
.css_form_button {
    /* 文字色 */
    color: #00ac97;
    /* 背景色 */
    background-color: white;
    /* 文字の太さ */
    font-weight: 700;
    /* 囲み線（太さ） */
    border: solid 2px;
    /* 囲み線（色） */
    border-color: #00ac97;
    /* 囲み線（角の丸み） */
    border-radius: 4px;
    /* 内側余白（上） */
    padding-top: 5px;
    /* 内側余白（下） */
    padding-bottom: 5px;
    /* 内側余白（左） */
    padding-left: 10px;
    /* 内側余白（右） */
    padding-right: 10px;
    width: 120px;
}

/* ボタン （マウスオーバー時） */
.css_form_button:hover,
.css_form_button:active {
    /* 背景色 */
    background-color: #eaf8f6;
}

/* 強調表示ボタン */
.css_form_highlight_button {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #e9546b;
    /* 文字の太さ */
    font-weight: 700;
    /* 囲み線（太さ） */
    border: solid 2px;
    /* 囲み線（色） */
    border-color: #e9546b;
    /* 囲み線（角の丸み） */
    border-radius: 4px;
    /* 内側余白（上） */
    padding-top: 5px;
    /* 内側余白（下） */
    padding-bottom: 5px;
    /* 内側余白（左） */
    padding-left: 10px;
    /* 内側余白（右） */
    padding-right: 10px;
    width: 120px;
}

/* 強調表示ボタン （マウスオーバー時） */
.css_form_highlight_button:hover,
.css_form_highlight_button:active {
    /* 背景色 */
    background-color: #b94047;
}


/* サブミット（強調表示）ボタン */
.css_form_button.submit {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #e9546b;
    /* 囲み線（色） */
    border-color: #e9546b;
}

/* サブミット（強調表示）ボタン （マウスオーバー時） */
.css_form_button.submit:hover,
.css_form_button.submit:active {
    /* 背景色 */
    background-color: #b94047;
}

/* 文字数に合わせたサイズボタン */
.css_form_button.auto {
    width: auto !important;
}

/* 横幅スモールサイズボタン */
.css_form_button.sm {
    width: 60px !important;
}

/* 横幅ラージサイズボタン */
.css_form_button.lg {
    width: 180px !important;
}

/* 横幅エクストララージサイズボタン */
.css_form_button.xl {
    width: 230px !important;
}

/* 大きさ自動調整ボタン */
.css_form_button.auto {
    width: auto !important;
}

/* 大きさ自動調整ボタン */
.css_form_button.auto_min_width {
    width: auto !important;
    min-width: 120px;
}
/* 重要ボタン */
.css_form_button.save {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #dc143c;
    /* 囲み線（色） */
    border-color: #dc143c;
}

/* 重要ボタン(マウスオーバー時) */
.css_form_button.save:hover,
.css_form_button.save:active {
    /* 背景色 */
    background-color: #a22041;
}

/* 削除ボタン */
.css_form_button.del {
    /* 文字色 */
    color: #dc143c;
    /* 背景色 */
    background-color: white;
    /* 囲み線（色） */
    border-color: #dc143c;
}
.css_form_button.right {
    margin-left: auto;
}

.css_form_button.fixed_right {
    position: fixed;
    right: 25%;
}
/* 削除ボタン（マウスオーバー時） */
.css_form_button.del:hover,
.css_form_button.del:active {
    /* 文字色 */
        color: white;
    /* 背景色 */
    background-color: #a22041;
}

/* 戻るボタン */
.css_form_button.back {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #6c757d;
    /* 囲み線（色） */
    border-color: #5b6369;
}

/* 戻るボタン（マウスオーバー時） */
.css_form_button.back:hover,
.css_form_button.back:active {
    /* 背景色 */
    background-color: #5b6369;
}

/* 実行ボタン */
.css_form_button.run {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #00ac97;
    /* 囲み線（色） */
    border-color: #00ac97;
}

/* 実行ボタン(マウスオーバー時) */
.css_form_button.run:hover,
.css_form_button.run:active {
    /* 背景色 */
    background-color: #00917f;
}

/* ボタン(readonly) */
.css_form_button[readonly],
.css_form_button[readonly]:hover,
.css_form_button[readonly]:active {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background-color: #6c757d;
    /* 囲み線（色） */
    border-color: #5b6369;
    /* 透過 */
    opacity: 0.6;
}

/* 検索ボタン（ダイアログ検索用） */
.css_form_button.search {
    /* 囲み線（太さ） */
    border: solid 1px;
    /* 囲み線（角の丸み） */
    border-radius: 10px;
    /* 文字の太さ */
    font-size: xx-small;
    width: 60px !important;
    height: 25px !important;
    margin: 0px 5px;
    display: flex;
    align-items: center;
}

.css_form_button.search>i {
    display: flex;
    align-items: center;
}

/* アイコンボタン(disabled) */
.css_icon_button[disabled],
.css_icon_button[disabled]:hover,
.css_icon_button[disabled]:active {
    color: #000;
    opacity: 0.6;
}

/*--------------------------------------------------------------------------*/
/*      チェックボックス関連                                                */
/*--------------------------------------------------------------------------*/
/* チェックボックスグループエリア */
.css_form_check_area {
    /* 枠線 */
    border: 1px solid #ced4da;
    /* 余白 */
    padding: 2px 5px;
    /* 角丸 */
    border-radius: 5px;
}

/* チェックボックスラベル */
.css_form_check_label_sm {
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}

/* チェックボックス（トグルボタン） */
.css_form_check_toggle {
    display: inline-block;
    height: 33px;
}

.css_form_check_toggle input {
    display: none;
}

.css_form_check_toggle input:not(:disabled):hover+i {
    cursor: pointer;
}

.css_form_check_toggle input+i {
    background-color: #D2D8DF;
    border-radius: 24px;
    color: #00ac97;
    display: inline-block;
    font-weight: 700;
    height: 33px;
    position: relative;
    width: 120px;
}

.css_form_check_toggle input+i:before,
.css_form_check_toggle input+i:after {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    /* font-style: normal; */
}

.css_form_check_toggle input+i:before {
    content: attr(data-off-label);
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #707070;
    left: 33px;
    text-align: center;
    width: calc(100% - 33px);
}

.css_form_check_toggle input+i:after {
    background-color: #FFFFFF;
    border-radius: 50%;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 33px;
    height: 33px;
    border: 2px solid #D2D8DF;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.css_form_check_toggle input:checked+i {
    background-color: #00ac97;
}

.css_form_check_toggle input:checked+i:before {
    color: #FFFFFF;
    content: attr(data-on-label);
    left: 0px;
    right: auto;
}

.css_form_check_toggle input:checked+i:after {
    border-color: #00ac97;
    left: 88px;
}

.css_form_check_toggle input:disabled+i {
    background-color: #F2F2F2;
}

.css_form_check_toggle input:disabled+i:before {
    color: #7F7F7F;
}

.css_form_check_toggle input:disabled:checked+i {
    background-color: #BFBFBF;
}
.css_form_check_toggle.sm {
    height: 23px;
}
.css_form_check_toggle.sm input+i {
    border-radius: 24px;
    font-weight: 700;
    height: 23px;
    width: 100px;
}

.css_form_check_toggle.sm input+i:before {
    left: 13px;
    width: calc(100% - 33px);
}

.css_form_check_toggle.sm input+i:after {
    width: 23px;
    height: 23px;
}

.css_form_check_toggle.sm input:checked+i:after {
    left: 76px;
}

.css_form_check_center {
    display: flex;
    align-items: center;
}
/*--------------------------------------------------------------------------*/
/*      ラジオボタン関連                                                */
/*--------------------------------------------------------------------------*/
/* エラー時のチェック状態色 */
.form-check .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/*--------------------------------------------------------------------------*/
/*      スクロールバー関連                                                  */
/*--------------------------------------------------------------------------*/
/* 縦スクロールのみ */
.css_vertical_scroll {
    /* スクロール（縦） */
    overflow-y: scroll;
    /* スクロール（横） */
    overflow-x: hidden;
}

/*--------------------------------------------------------------------------*/
/*      テーブル関連                                                        */
/*--------------------------------------------------------------------------*/
/* テーブル */
.css_table {
    /* 表示サイズ（高さ）*/
    height: 100%;
    /* 表示サイズ（幅）*/
    width: 100%;
    /*  border-collapse: collapse;              /* セル境界 */
    /*  border-spacing: 0;                      /* セル境界幅 */
    /* セル境界 */
    border-collapse: separate;
    /* セル境界幅 */
    border-spacing: 0;
    /* 角丸 */
    border-radius: 6px;
    /*  border: solid 1px #bbbbbb;              /* 枠線  */
    /* 背景色 */
    background-color: white;
}

/* 左上端のセル */
.css_input_item_table tr:first-child th:first-child,
.css_data_grid_table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}

/* 右上端のセル */
.css_input_item_table tr:first-child td:last-child,
.css_data_grid_table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

/* 左下端のセル */
.css_input_item_table tbody:last-child tr:last-child th:first-child:not(.css_no_round_bottom),
.css_data_grid_table tbody:last-child tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

/* 右下端のセル */
.css_input_item_table tbody:last-child tr:last-child td:last-child,
.css_data_grid_table tbody:last-child tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* セル内テキスト表示位置（上寄せ） */
.css_table_col_top {
    vertical-align: top !important;
}

/* 行見出しのあるテーブル　ヘッダ（売上情報、請求情報） */
.css_data_grid_table tr.css_table_one_row th {
    border-bottom-left-radius: 6px;
}

/* 行見出しのあるテーブル　項目（売上情報、請求情報） */
.css_data_grid_table tr.css_table_one_row td:not(.css_no_round) {
    border-top: solid 1px #bbbbbb;
    border-top-right-radius: 6px;
}

/* テーブルタイトル（強調文字で使用） */
.css_table_title {
    background-color: #f6f6f6 !important;
}
/*--------------------------------------------------------------------------*/
/*      テーブル関連（入力項目を配置するためのテーブル）                    */
/*--------------------------------------------------------------------------*/
/* 項目ラベル列 */
.css_input_item_table th {
    /* 文字の太さ */
    font-weight: 700;
    /* 整列位置（横） */
    text-align: right;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
    /* 背景色 */
    background-color: #f6f6f6;
    /* 内側余白（左） */
    padding-left: 5px;
    /* 内側余白（右） */
    padding-right: 5px;
}

/* 項目列 */
.css_input_item_table td {
    /* 内側余白（上） */
    padding-top: 2px;
    /* 内側余白（下） */
    padding-bottom: 2px;
    /* 内側余白（左） */
    padding-left: 5px;
    /* 内側余白（右） */
    padding-right: 5px;
}

/* 先頭行 */
.css_input_item_table tr:first-child th,
.css_input_item_table tr:first-child td {
    /* 罫線（上） */
    border-top: 1px solid #bbbbbb;
}

/* 先頭列 */
.css_input_item_table th:first-of-type,
.css_input_item_table td:first-of-type {
    /* 罫線（左）*/
    border-left: 1px solid #bbbbbb;
}

/* 先頭列以外 */
.css_input_item_table th:not(first-of-type),
.css_input_item_table td:not(first-of-type) {
    /* 罫線（右）*/
    border-right: 1px solid #bbbbbb;
}

/* セル */
.css_input_item_table th,
.css_input_item_table td {
    /* 罫線（下） */
    border-bottom: 1px solid #bbbbbb;
}

/*--------------------------------------------------------------------------*/
/*      テーブル関連（データを一覧表示するためのテーブル）                  */
/*--------------------------------------------------------------------------*/
/* 先頭行 */
.css_data_grid_table tr:first-child th {
    /* 罫線（上） */
    border-top: 1px solid #bbbbbb;
}

/* 先頭列 */
.css_data_grid_table th:first-child,
.css_data_grid_table td:first-child {
    /* 罫線（左）*/
    border-left: 1px solid #bbbbbb;
}

/* ヘッダ行 */
.css_data_grid_table thead th,
.css_data_grid_table .css_thead_sub th {
    /* 文字の太さ */
    font-weight: 700;
    /* 整列位置（中央揃え） */
    text-align: center;
    /* 自動折返し有無 */
    white-space: nowrap;
    /* 背景色 */
    background-color: #f6f6f6;
    /* 内側余白（上） */
    padding-top: 2px;
    /* 内側余白（下） */
    padding-bottom: 2px;
    /* 内側余白（左） */
    padding-left: 5px;
    /* 内側余白（右） */
    padding-right: 5px;
}

/* 明細行 */
.css_data_grid_table tbody td {
    /* 背景色 */
    background-color: white;
    /* 内側余白（上） */
    padding-top: 2px;
    /* 内側余白（下） */
    padding-bottom: 2px;
    /* 内側余白（左） */
    padding-left: 5px;
    /* 内側余白（右） */
    padding-right: 5px;
}
.css_data_grid_table tbody th {
    /* 内側余白（左） */
    padding-left: 5px;
    /* 内側余白（右） */
    padding-right: 5px;
}
/* セル */
.css_data_grid_table th,
.css_data_grid_table td {
    /* 罫線（上）（前行の下罫線と重複させないため非表示） */
    border-top: 0px solid #bbbbbb;
    /* 罫線（下） */
    border-bottom: 1px solid #bbbbbb;
    /* 罫線（左）（前列の右罫線と重複させないため非表示） */
    border-left: 0px solid #bbbbbb;
    /* 罫線（右） */
    border-right: 1px solid #bbbbbb;
}

/* テーブル（マウスオーバー時） */
.css_data_grid_table tr:hover td {
    /* 背景色 */
    background-color: #fcfae4;
}

/* テーブル（マウスオーバー時）1データ2行以上の場合 */
.css_data_grid_table_tr_hover_on td {
    /* 背景色 */
    background-color: #fcfae4 !important;
}

/* エラー行 */
.css_error_row td {
    background: #ffcccc !important;
}

/* 警告エラー行 */
.css_warning_row td {
    background: #fffa90 !important;
}
/* 成功行 */
.css_success_row td {
    background-color: #ccf7fd !important;
}
/* 無効行 */
.css_invalid_row td {
    background: #aaaaaa !important;
}

/* 無効列 */
.css_invalid_col {
    background: #aaaaaa !important;
}
/* セル内テキスト表示位置（中央寄せ） */
.css_data_grid_table_col_center {
    /* 整列位置（横） */
    text-align: center;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（左寄せ） */
.css_data_grid_table_col_left {
    /* 整列位置（横） */
    text-align: left;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（右寄せ） */
.css_data_grid_table_col_right {
    /* 整列位置（横） */
    text-align: right;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（折返し有り） */
.css_data_grid_table_col_warp {
    /* 整列位置（横） */
    text-align: left;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: wrap !important;
}

/*--------------------------------------------------------------------------*/
/*      テーブル関連（ヘッダ行を「position:sticky」で固定表示）             */
/*--------------------------------------------------------------------------*/
/* 親要素 */
table.css_sticky_table {
    /* セル境界（親要素を指定することで固定したヘッダ行の罫線が消えないようにするため） */
    border-collapse: separate;
    height: auto;
}

/* ヘッダ行 */
.css_sticky_table thead {
    /* スクロール時の固定 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* 配置順（tbody内のセルより手前に表示） */
    z-index: 5;
}

/* セル内テキスト表示位置（中央寄せ） */
.css_sticky_table_col_center {
    /* 整列位置（横） */
    text-align: center;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（左寄せ） */
.css_sticky_table_col_left {
    /* 整列位置（横） */
    text-align: left;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（右寄せ） */
.css_sticky_table_col_right {
    /* 整列位置（横） */
    text-align: right;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: nowrap;
}

/* セル内テキスト表示位置（折返し有り） */
.css_sticky_table_col_warp {
    /* 整列位置（横） */
    text-align: left;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無 */
    white-space: wrap !important;
}

/* セル内テキスト表示位置（折返し有りかつ英語ワードの途中での改行あり） */
.css_sticky_table_col_warp_break_word {
    /* 整列位置（横） */
    text-align: left;
    /* 整列位置（縦） */
    vertical-align: middle;
    /* 自動折返し有無(英語ワードの途中でも) */
    word-break: break-all !important;
    overflow-wrap: anywhere!important;
}

/* セル内テキスト表示位置（中央寄せ） */
.css_sticky_table_col_center_wrap {
    /* 整列位置（横） */
    text-align: center;
    /* 整列位置（縦） */
    vertical-align: middle;
   /* 自動折返し有無 */
   white-space: wrap !important;
}

/*--------------------------------------------------------------------------*/
/*      テーブル関連（ドロップダウンメニューとして表示するテーブル）        */
/*--------------------------------------------------------------------------*/
/* 角丸（セルの角丸なし） */
.css_dorp_down_list_table th,
.css_dorp_down_list_table td {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/*--------------------------------------------------------------------------*/
/*      テーブル関連（tablesorterをカスタマイズ）        */
/*--------------------------------------------------------------------------*/
.tablesorter-default td {
    vertical-align: middle;
}
/*--------------------------------------------------------------------------*/
/*      エラー関連                                                          */
/*--------------------------------------------------------------------------*/
/* エラーメッセージエリア */
.css_form_msg_area {
    color: red;
    font-size: large;
    font-weight: bold;
}

.css_form_msg_area_normal {
    font-size: large;
    font-weight: bold;
}

/* エラー入力エリア */
.css_is_error {
    background-color: #fcefec;
    border-color: #d9300a;
}

.css_is_error:focus {
    background-color: #fcefec;
    border-color: #d9300a;
}

/* エラー画面タイトル */
.css_error_title {
    font-size: 120%;
    font-weight: bold;
}

/*--------------------------------------------------------------------------*/
/*      検索アイコン関連                                                    */
/*--------------------------------------------------------------------------*/
/* 検索アイコン */
.css_search_icon {
    display: flex;
    width: 15px;
    height: 15px;
    font-size: 20px;
    position: relative;
    /*  box-shadow: 0 0 0 1px rgba(0,0,0,.1); */
    cursor: pointer;
}

.css_search_icon span {
    position: absolute;
    display: block;
    top: 40%;
    left: 40%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    margin: -.28em 0 0 -.28em;
    border: .12em solid #fff;
}

.css_search_icon span::after {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 50%;
    width: 72%;
    height: 36%;
    background: #fff;
    margin: .2em 0 0 .14em;
    transform: rotate(45deg);
}

/*--------------------------------------------------------------------------*/
/*      サイドメニュー関連                                                  */
/*--------------------------------------------------------------------------*/
/* 顧客検索バー */
.css_customer_search_bar {
    /* width: 100%; */
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    background: rgba(195, 255, 252, 0);
}

/* 顧客検索form */
.css_customer_search_form {
    width: 100px;
}

#customer_search_history {
    max-width: 200px;
}

/* サイドメニュー */
.css_accordion_side_menu {
    padding-bottom: 50px;
}

.css_sidebar {
    display: none;
    z-index: 1;
    background: #41414B;
    position: fixed;
    /* top: 3.5rem; */
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 42px;
    width: 260px;
    height: 100%;
}

.css_sidebar_menu_search {
    position: fixed;
    /* top: 3.5rem; */
    bottom: 0;
    left: 0;
    background-color: #41414B;
    width: 260px;
    z-index: 2;
}

.css_sidebar_menu_search>input {
    display: flex;
    align-items: center;
    margin: 10px 10px;
    width: 230px;
}

.css_accordion_collapse {
    padding-left: 10px;
    padding-right: 10px;
}

.css_accordion_collapse li {
    padding: 2px;
    list-style: none;
}

.accordion-item {
    background-color: #41414B;
}

.accordion-item:not(.collapsed) {
    background-color: #151519;
}

.accordion-button {
    background-color: #41414B;
    color: white;
    padding-left: 10px;
}

.accordion-button:not(.collapsed) {
    background-color: #151519;
    color: white;
}

.accordion-button>img {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.dropdown-item {
    background-color: #505055;
    color: white;
    border-radius: 5px;
    padding: 10px 10px;
    text-decoration: none;
    white-space: normal;
    width: 200px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #505055;
    color: #5FD7A2;
    text-decoration: none;
}

.dropdown-menu-search-history {
    background-color: white !important;
    padding: 0;
    max-height: 450px;
    overflow-y: auto;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
}

.dropdown-item-search-history {
    background-color: rgba(255, 255, 255, 0) !important;
    color: black !important;
    white-space: nowrap;
    padding: 0.05rem 1rem;
    width: auto;
    max-width: 500px;
    user-select: none;
}

.dropdown-menu-search-history li:focus,
.dropdown-menu-search-history li:hover {
    background-color: #0d6efd !important;
}

.dropdown-item-search-history:focus,
.dropdown-item-search-history:hover {
    color: white !important;
}

.css_currently_showing_menu {
    background-color: #0d6efd !important;
    color: white !important;
}
#container {
    background: #eee;
    margin-left: 260px;
    position: relative;
    /* overflow-x: auto; */
    -moz-transition: margin-left .25s linear;
    -webkit-transition: margin-left .25s linear;
    transition: margin-left .25s linear;
    z-index: 900;
}

#main {
    background: #eee;
    padding-top: 45px;
    min-height: 100vh;
}

#global-head {
    position: fixed;
    width: -webkit-fill-available;
    width: -moz-available;
    background: #fff;
    display: -webkit-flex;
    display: flex;
    z-index: 10;
    border: 1px solid #DDDDDD;
    height: 55px;
}

/* menu-top */
#css_header_user_info {
    display: flex;
    align-items: center;
}

.css_pseudo_login_name {
    font-weight: 700;
    padding: 5px 10px;
    /* width: 150px; */
    color: white;
    background-color: red;
    border-color: red;
    margin-right: 20px;
}

.css_contact_alert_on {
    font-weight: 700;
    padding: 5px 10px;
    width: auto;
    color: red;
    background-color: yellow;
    border-color: red;
    border-style: solid;
    border-width: 1px;
    margin-right: 5px;
    border-radius: 0.2rem;
}

.css_contact_alert_off {
    font-weight: 700;
    padding: 5px 10px;
    width: auto;
    color: black;
    background-color: white;
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 1px;
    margin-right: 5px;
    border-radius: 0.2rem;
}

.css_contact_alert_icon {
    font-weight: 700;
    padding: 2px 5px;
    color: red;
    /* background-color: yellow;
    border-color: red;
    border-style: solid;
    border-width: 2px;
    border-radius: 40%; */
    margin-left: 5px;
}
.css_user_role_name {
    margin-right: 10px;
}

.css_login_name {
    margin-right: 10px;
}

/* nav-toggle */
#nav-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    height: 32px;
    z-index: 1000;
}

#nav-toggle>div {
    position: relative;
    width: 32px;
}

#nav-toggle span {
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background: #fff;
    position: absolute;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
    top: 0;
}

#nav-toggle span:nth-child(2) {
    top: 11px;
}

#nav-toggle span:nth-child(3) {
    top: 22px;
}

/* メニューclose */
.css_sidebar_close #container {
    margin-left: 52px;
}

.css_sidebar_close .css_sidebar_menu_search {
    display: none;
}

@media screen and (max-width: 900px) {
    #container {
        margin-left: 0;
    }

    #container #global-head {
        margin-left: 52px;
        padding-right: 0;
    }

    #nav-toggle span {
        background: #033560;
    }

    .css_sidebar_close #nav-toggle span {
        background: #fff;
    }

    .css_sidebar {
        left: -260px;
        z-index: 910;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    .css_sidebar_menu_search {
        display: none;
    }

    .css_sidebar_close .css_sidebar {
        left: 0;
    }

    .css_sidebar_close #container {
        margin-left: 0;
    }

    .css_sidebar_close .css_sidebar_menu_search {
        display: block;
    }
}

@media screen and (max-width: 400px) {}

/*--------------------------------------------------------------------------*/
/*      共通コンポーネント                                                  */
/*--------------------------------------------------------------------------*/
/* 数値フォーマット入力 */
.css_input_number {
    text-align: right;
}
/* 年入力 */
.css_input_year {
    text-align: left;
    width: 60px;
}

/* 従業員複数選択UI・チーム複数選択UI　scroll */
.css_scroll_multiple_select {
    overflow-y: scroll;
    max-height: 310.5px;
}

/*--------------------------------------------------------------------------*/
/*      ソート選択                                                          */
/*--------------------------------------------------------------------------*/
.css_data_grid_table tbody:hover .css_sortable_selected td {
    background-color: #008cffad !important;
}

.css_data_grid_table tbody:hover .css_sortable_placeholder td {
    /* border: 1px dotted rgba(0, 0, 255, 0.726) !important; */
    background-color: #afeeee54 !important;
}

/*--------------------------------------------------------------------------*/
/*      非同期処理のローディング表示                                        */
/*--------------------------------------------------------------------------*/
.css_is_hide {
    display: none;
}

.loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 99999;
}

.loading::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------------------*/
/*      カレンダー関連(jquery)                                              */
/*--------------------------------------------------------------------------*/
/* カレンダーアイコン */
img.ui-datepicker-trigger {
    cursor: pointer;
    margin-left: 7px !important;
    vertical-align: middle;
}

/*アイコンの手前が読み取り専用の場合、カレンダーアイコンを非表示*/
.hasDatepicker:read-only + img.ui-datepicker-trigger,
.hasDatepicker:disabled + img.ui-datepicker-trigger {
    display: none;
}

/* 日曜日の色 */
td.ui-datepicker-week-end:first-child a.ui-state-default {
    background-color: #ffecec;
    color: #f00 !important;
}

td.ui-datepicker-week-end:first-child a.ui-state-active {
    background-color: #0080ff;
    /* background-color: #fca1a1; */
    color: #fff !important;
}

/* 土曜日の色 */
td.ui-datepicker-week-end:last-child a.ui-state-default {
    background-color: #eaeaff;
    color: #00f !important;
}

td.ui-datepicker-week-end:last-child a.ui-state-active {
    background-color: #0080ff;
    /* background-color: #a8a8ff; */
    color: #fff !important;
}

/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover {
    opacity: 0.8;
}

/* 選択中の色 */
td.ui-datepicker-current-day a.ui-state-active {
    background-color: #0080ff;
}

/* 当日を示す色 */
td.ui-datepicker-week-end a.ui-state-highlight {
    background-color: #fffa90 !important;
}

td.ui-datepicker-week-end a.ui-state-highlight.ui-state-active {
    background-color: #0080ff !important;
    color: #fffa90 !important;
}

.ui-state-default.ui-state-highlight.ui-state-active {
    color: #fffa90 !important;
}

/* 「今日」ボタンの色（デフォルトでは非活性に見える為） */
.ui-datepicker-buttonpane .ui-priority-secondary {
    opacity: 1;
    font-weight: bold;
}

/*--------------------------------------------------------------------------*/
/*      オートコンプリート関連                                              */
/*--------------------------------------------------------------------------*/
/* リスト全体の背景 */
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em;
}

.ui-widget-content {
    border: 1px solid #666 !important;
    filter: drop-shadow(1px 1px 1px rgba(128, 128, 128, 0.5));
    transform: translateZ(0px);
    border-radius: 3px;
}

/* リストのスクロール */
.ui-autocomplete {
    /* max-height: 150px; */
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
}

/* リスト内の一致する文字色 */
.css_autocomplete_match_word {
    font-weight: bold;
    color: #00008b;
}

/*--------------------------------------------------------------------------*/
/*      顧客対応履歴一覧                                                    */
/*--------------------------------------------------------------------------*/
/* 顧客対応履歴一覧エリアヘッダ */
.css_contact_list_area_header {
    /* 配置方法（スクロール時固定） */
    position: sticky;
    /* 起点位置からの座標（Y軸） */
    top: 0px;
    /* 表示サイズ（幅） */
    width: 100%;
    /* 表示サイズ（高さ） */
    height: 40px;
    /* 背景色 */
    background-color: #ededed;
    /* 表示順 */
    z-index: 2;
    padding-top: 5px;
}

/* 明細行 */
.css_contact_list_tbody {
    /* 要素の配置方法（自要素起点） */
    position: relative;
}

/* 明細行内の見出し */
.css_contact_list_tbody_header,
.css_contact_list_tbody_header_change_history {
    /* 配置方法（スクロール時固定） */
    /* position: sticky; */
    /* 表示サイズ（縦） */
    height: 60px;
    /* 表示順 */
    z-index: 1;
}

/* 明細行内の見出し（セル） */
.css_contact_list_tbody_header td,
.css_contact_list_tbody_header th {
    /* 文字の太さ */
    font-weight: 700;
    /* 背景色 */
    background-color: #f6f6f6 !important;
    /* 罫線（上） */
    border-top: 1px #dddddd solid;
    /* 整列位置（中央揃え） */
        text-align: center;
}

/* 明細行内の見出し（変更履歴）（セル） */
.css_contact_list_tbody_header_change_history td,
.css_contact_list_tbody_header_change_history th {
    /* 文字の太さ */
    font-weight: 700;
    /* 背景色 */
    background-color: #bbbbbb !important;
    /* 罫線（上） */
    border-top: 1px #dddddd solid;
}

/* 明細行内の明細（変更履歴）（セル） */
.css_contact_list_tbody_rows_change_history td {
    /* 背景色 */
    background-color: #cccccc !important;
}
/* 明細行内の見出し（要対応者）（セル） */
.css_contact_list_tbody_header.no_complete td {
    /* 文字色 */
    color: red !important;
}

/* 明細行内の明細（要対応者）（セル） */
.css_contact_list_tbody_rows.no_complete td {
    /* 文字色 */
    color: red !important;
}
/* 明細行内の見出し（顧客名） */
.css_contact_list_tbody_customer_name {
    /* 背景色 */
    background-color: #eaf8f6 !important;
    /* 整列位置（横） */
    text-align: left !important;
}

/* 明細行メニュー */
.css_contact_list_tbody_menu {
    /* 表示状態 */
    display: none;
    /*  visibility: hidden;                     /* 表示状態 */
    /* 配置方法（親要素起点） */
    position: absolute;
    /*  top: 0%;                                /* 起点位置からの座標（Y軸） */
    /*  left: 0%;                               /* 起点位置からの座標（X軸） */
    /* 表示位置からの相対座標（Y軸） */
    transform: translate(0%, -10%);
    /* 表示サイズ（幅） */
    width: auto;
    /*  text-align: center;                     /* 整列位置（中央揃え） */
    /* 自動折返し有無 */
    white-space: nowrap;
    /*  padding: 10px;                          /* 内側余白（上下左右の全方向） */
    /*  z-index: 2;                             /* 表示順 */
    /*  transition: 0.5s all;                   /* アニメーション速度 */
    /* 背景色*/
    /* background-color: #fcfae4; */
    /*  border-top: 0px lightgray solid;        /* 罫線（上）*/
    /*  border-bottom: 2px lightgray solid;     /* 罫線（下）*/
    /*  border-left: 2px lightgray solid;       /* 罫線（左）*/
    /*  border-right: 2px lightgray solid;      /* 罫線（右）*/
    /*  float: right;                           /* 要素の配置方法 */
    /*  margin-right: 10px;                     /* 内側余白（右） */
    /*  margin-bottom: 0px;                     /* 内側余白（下）*/
}

/* 明細行メニューアイコン */
.css_contact_list_tbody_menu img {
    /* 内側余白（上） */
    padding-top: 0px;
    /* 内側余白（下） */
    padding-bottom: 0px;
    /* 内側余白（左） */
    padding-left: 8px;
    /* 内側余白（右） */
    padding-right: 0px;
    /* 外側余白（右） */
    margin-right: 0px;
    /* 整列位置（中央揃え） */
    vertical-align: middle !important;
}

/* 明細行メニューリンク */
.css_contact_list_tbody_menu a {
    /* 文字サイズ*/
    font-size: 120%;
}

/* ラベル */
.css_contact_list_label {
    /* 外側余白（下） */
    margin-bottom: 0px;
}

/* 件名 */
.css_contact_list_subject {
    /* 文字サイズ */
    font-size: 110%;
    /* 文字の太さ */
    font-weight: 700;
    /* 文字装飾 */
    text-decoration: underline;
    /* 外側余白（上） */
    margin-top: 5px;
    /* 外側余白（下） */
    margin-bottom: 5px;
}

/* 本文 */
.css_contact_list_contact_body {
    /* 外側余白（下） */
    margin-bottom: 5px;
    word-break: break-all;
}

/* 更新情報 */
.css_contact_list_upd_info {
    /* 文字色 */
    color: #a0a0a0;
    /* 外側余白（下） */
    margin-bottom: 5px;
    /* 要素の配置方法*/
    float: left;
}

/* メールアドレス（囲み線） */
.css_contact_list_mail_address {
    /* 表示サイズ（幅） */
    width: fit-content;
    /* 囲み線（太さ） */
    border: solid 1px;
    /* 囲み線（色） */
    border-color: #bbbbbb;
    /* 囲み線（角の丸み） */
    border-radius: 6px;
    /* 背景色 */
    /* background-color: white; */
    /* 内側余白（上） */
    /* padding-top: 10px; */
    /* 内側余白（下） */
    /* padding-bottom: 10px; */
    /* 内側余白（左） */
    /* padding-left: 20px; */
    /* 内側余白（右） */
    /* padding-right: 30px; */
}

/* 添付ファイル（囲み線） */
.css_contact_list_attached_file {
    /* 表示サイズ（幅） */
    width: fit-content;
    /* 囲み線（太さ） */
    border: solid 1px;
    /* 囲み線（色） */
    border-color: #bbbbbb;
    /* 囲み線（角の丸み） */
    border-radius: 6px;
    /* 背景色 */
    background-color: white;
    /* 内側余白（上） */
    padding-top: 10px;
    /* 内側余白（下） */
    padding-bottom: 10px;
    /* 内側余白（左） */
    padding-left: 20px;
    /* 内側余白（右） */
    padding-right: 20px;
}

/* 処理区分名 */
.css_contact_list_proc_kbn_name {
    /* 表示サイズ（幅）*/
    /* width: 115px; */
    /* 表示サイズ（高）*/
    /* height: 30px; */
    /* 文字の太さ */
    font-weight: 700;
    /* 整列位置 */
    /* text-align: center; */
    /* 自動折返し有無 */
    white-space: nowrap;
    /* 囲み線（太さ） */
    /* border: solid 2px; */
    /* 囲み線（角の丸み） */
    /* border-radius: 6px; */
    /* 内側余白（上） */
    /* padding-top: 3px; */
    /* 内側余白（下） */
    /* padding-bottom: 3px; */
    /* 外側余白（上） */
    margin-top: 50px;
    /* 外側余白（下） */
    margin-bottom: 0px;
    position: fixed;
        z-index: 9;
        right: 10px;
}

/* 処理区分名（未設定） */
.css_contact_list_proc_kbn_none {
    /* 文字色 */
    /* color: #aaaaaa; */
    /* 背景色 */
    /* background-color: #ffffff; */
    /* 囲み線（色） */
    /* border-color: #aaaaaa; */
        display: none;
}

/* 処理区分名（条件指定あり） */
.css_contact_list_proc_kbn_search_execution {
    /* 文字色 */
    color: #00ac97;
    /* 背景色 */
    /* background-color: #f1faf9; */
    /* 囲み線（色） */
    /* border-color: #00ac97; */
}

/* 処理区分名（グループ選択） */
.css_contact_list_proc_kbn_group_no_select {
    /* 文字色 */
    color: #00ac97;
    /* 背景色 */
    /* background-color: #f1faf9; */
    /* 囲み線（色） */
    /* border-color: #00ac97; */
}

/*--------------------------------------------------------------------------*/
/*      顧客対応履歴の状況アイコン                                          */
/*--------------------------------------------------------------------------*/
/* 顧客対応履歴の状況アイコン */
.css_contact_status {
    /* 表示サイズ（幅）*/
    width: 65px;
    /* 整列位置 */
    text-align: center;
    /* 自動折返し有無 */
    white-space: nowrap;
    /* 囲み線（太さ） */
    border: solid 2px;
    /* 囲み線（角の丸み） */
    border-radius: 20px;
    /* 内側余白（上） */
    padding-top: 3px;
    /* 内側余白（下） */
    padding-bottom: 1px;
    /* 外側余白（上） */
    margin-top: 0px;
    /* 外側余白（下） */
    margin-bottom: 0px;
    /* 外側余白（左） */
    margin-left: auto;
    /* 外側余白（右） */
    margin-right: auto;
}

/* 顧客対応履歴の状況アイコン（完了） */
.css_contact_status_complete {
    /* 文字色 */
    color: #ffffff;
    /* 背景色 */
    background-color: #aaaaaa;
    /* 囲み線（色） */
    border-color: #aaaaaa;
}

/* 顧客対応履歴の状況アイコン（未完了） */
.css_contact_status_incomplete {
    /* 文字色 */
    color: red;
    /* 背景色 */
    background-color: white;
    /* 囲み線（色） */
    border-color: red;
}

/* 顧客対応履歴の状況アイコン（優先度「至急」） */
.css_contact_status_emergency {
    /* 文字色 */
    color: white;
    /* 背景色 */
    background: red;
    /* 囲み線（色） */
    border-color: red;
    /*  margin-top: 4px;                        /* 外側余白（上） */
}

/* 顧客対応履歴の状況アイコン（優先度「優先」） */
.css_contact_status_high_priority {
    /* 文字色 */
    color: orange;
    /* 背景色 */
    background: white;
    /* 囲み線（色） */
    border-color: orange;
    /*  margin-top: 4px;                        /* 外側余白（上） */
}

/* 顧客対応履歴の状況アイコン（優先度「低」） */
.css_contact_status_low_priority {
    /* 文字色 */
    color: #66ccff;
    /* 背景色 */
    background: white;
    /* 囲み線（色） */
    border-color: #66ccff;
    /*  margin-top: 4px;                        /* 外側余白（上） */
}

/* 顧客対応履歴の状況アイコン（優先度「なし」） */
.css_contact_status_non_priority {
    /* 文字色 */
    color: #aaaaaa;
    /* 背景色 */
    background-color: #ffffff;
    /* 囲み線（色） */
    border-color: #aaaaaa;
    /*  margin-top: 4px;                        /* 外側余白（上） */
}

/* 検索結果一覧No値 */
.td_no {
    text-align: right;
}

/** コントロールの表示幅用クラス（最小：15%、小：35％、中：50%） */
.css_width_xxs {
    width: 50px;
}
.css_width_xs {
    width: 15%;
    min-width: 15%;
}

.css_width_small {
    width: 35%;
}

.css_width_medium {
    width: 50%;
}

.css_width_max {
    width: 100%;
}

.css_width_20p {
    width: 20%;
}

/* 料金情報、契約プラン完了行の */
.css_contract_end td {
    background-color: #ccf7fd !important;
}

/* 売上情報、請求情報タイトル */
.css_title_border {
    display: flex;
    align-items: center;
}

/* 売上情報、請求情報タイトル右横線 */
.css_title_border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #bbbbbb;
}

/* 売上情報、売上確定行の */
.css_sales_fix td,
.css_selected td {
    background-color: #ccf7fd !important;
}

/* 請求情報、入金確定行の */
.css_payment_fix td {
    background-color: #ffcccc !important;
}

/* 請求情報、OKデータ */
.css_bill_ok {
    --bs-text-opacity: 1;
    color: rgb(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: 700 !important;
}
.css_bill_ok_row {
    --bs-text-opacity: 1;
    color: rgb(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: 700 !important;
}
.css_bill_ok_row input,
.css_bill_ok_row select
{
    --bs-text-opacity: 1;
    color: rgb(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
    font-weight: 700 !important;
}
/* 請求情報、引落中データ */
.css_bill_do {
    color: red !important;
}
/* ポップオーバー(吹き出し)設定 */
/* ボタン */
.btn_contract_popover {
    width: auto;
    color: #fff;
    background-color: #777;
    border: solid 2px #777;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 2px;
}
.popover {
    width: auto;
    max-width: 100%;
    z-index: 9999 !important;
    background: ivory;
}

.popover .contract_popover {
    width: 500px;
}
/* 顧客ヘッダ */
.css_customer_header_title {
    border-bottom: 2px solid #000;
    margin-bottom: 5px;
}
.css_customer_header_title_col {
    font-size: 16px;
    font-weight: bold;
    margin-right: 15px;
    padding: 0px;
}
.css_customer_header_contents {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.css_customer_header_contents_right {
    font-weight: bold;
}
.css_customer_header_contents_right_col {
    margin-right: 15px;
}
.css_customer_header_contents_left {
    font-weight: bold;
}
.css_customer_header {
    position:sticky;
    top: 55px;
    background-color: #eee;
    z-index: 9;
    padding-top: 10px;
}
.css_customer_header_tab {
    position: sticky;
    top: 50px;
    z-index: 9;
    background-color: #eee;
}
.css_customer_header_button {
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 文字の太さ */
    font-weight: 700;
    /* 囲み線（太さ） */
    border: solid 2px;
    /* 囲み線（角の丸み） */
    border-radius: 4px;
    /* 内側余白（上） */
    padding-top: 2px;
    /* 内側余白（下） */
    padding-bottom: 2px;
    /* 内側余白（左） */
    padding-left: 10px;
    /* 内側余白（右） */
    padding-right: 10px;
    margin: 1px;
}
/* 顧客ヘッダ契約情報箇所 */
.css_customer_header_contract {
    overflow-y: auto;
    max-height: 55px;;
}
.popover .contract_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0px 0px;
    border-left: solid 1px #bbbbbb;
    border-top: solid 1px #bbbbbb;
}
.popover .contract_head {
    width: 35%;
    margin: 0px 0px;
    padding: 5px 10px;
    text-align: center;
    border-right: solid 1px #bbbbbb;
    border-bottom: solid 1px #bbbbbb;
    background-color: #eaf8f6;
}
.popover .contract_item {
    width: 65%;
    margin: 0px 0px;
    padding: 5px 10px;
    text-align: center;
    border-right: solid 1px #bbbbbb;
    border-bottom: solid 1px #bbbbbb;
    text-align: left;
}
.btn_caution_bbs_popover {
    width: auto;
    color: red;
    /* color: #00ac97; */
    /* font-weight: bold; */
    text-decoration: underline;
    /* text-decoration-color: red; */
    /* background-color: #ffffff00; */
    border: solid 2px #ffffff00;
    border-radius: 4px;
    padding-left: 2px;
    padding-right: 2px;
    /* margin-bottom: 2px; */
}

.popover .popover_area {
    min-width: 500px;
}

.popover .popover_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 0px 0px;
    border-left: solid 1px #bbbbbb;
    border-top: solid 1px #bbbbbb;
}

.popover .popover_head {
    width: 20%;
    margin: 0px 0px;
    padding: 5px 10px;
    text-align: center;
    border-right: solid 1px #bbbbbb;
    border-bottom: solid 1px #bbbbbb;
    background-color: #eaf8f6;
}

.popover .popover_item {
    width: 80%;
    margin: 0px 0px;
    padding: 5px 10px;
    text-align: center;
    border-right: solid 1px #bbbbbb;
    border-bottom: solid 1px #bbbbbb;
    text-align: left;
}

/* タブ内容表示箇所 */
.js_tab_contents {
    overflow-x: auto;
}
/* タブコンテンツ内のヘッダボタン */
.js_tab_contents .css_header_button {
    position: fixed;
    background: #eee;
    z-index: 9;
    width: 100%;
        padding-top: 10px;
        margin-top: 0px;
}

/* タブコンテンツ内のヘッダボタン（右寄せ） */
.js_tab_contents .css_header_button_right {
    position: fixed;
    /* background: #eee; */
    z-index: 9;
    right: 10px;
    padding-top: 10px;
        margin-top: 0px;
}

/* タブコンテンツ内のメインコンテンツ */
.js_tab_contents .css_main_contents {
    margin-top: 10px;
}
.js_tab_contents .css_main_contents.with_header {
    margin-top: 50px;
}
.js_tab_contents .css_main_contents.with_sub_header {
    margin-top: 100px;
}
.js_tab_contents .css_main_contents.with_footer {
    margin-bottom: 50px;
}
/* タブコンテンツ内のフッタボタン */
.css_main_contents .css_footer_button {
    position: fixed;
    background: #eee;
    z-index: 9;
    bottom: 0;
    width: -webkit-fill-available;
}
/* ヘルプ用ツールチップ */
.css_help_tooltip {
    display: flex;
    position: relative;
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #c6cdd3;
    border: 2px solid #fff;
    cursor: pointer;
}

/* ページング(Ajax)エリア */
.css_paginate_links_area {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    align-items: baseline;
}

/* ページャーエリア（取得件数）*/
.css_paginate_links_area>span:first-child {
    width: 100%
}
/* ページャーエリア（ページャー）*/
.css_paginate_links_area>nav {
    margin-right: 10px;
}
/*--------------------------------------------------------------------------*/
/*      お知らせ表示                                                        */
/*--------------------------------------------------------------------------*/
/* お知らせタグ */
.news_tag {
    margin: 0 .1em .6em 0;
    padding: .4em;
    line-height: 1;
    border-radius: 2em;
    text-align: center;
}
/*--------------------------------------------------------------------------*/
/*      一括アップロード確認用                                                */
/*--------------------------------------------------------------------------*/
/* 新規作成行 */
.css_upload_new_record {
    color: red;
    font-weight: bold;
    text-align: center;
}
/*--------------------------------------------------------------------------*/
/*      jsTreeのカスタムCSS                                                 */
/*--------------------------------------------------------------------------*/
.jstree-between-folders-icon {
    background: url("32px.png") -71px -71px no-repeat;
}

.jstree-move-line {
    height: 15px;
    position: absolute;
}

.jstree-move-line.a {
    margin-top: 12px
}

.jstree-move-line.b {
    margin-top: -11px
}

.file-drag-helper {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    /* margin: 5px; */
    text-align: center;
    z-index: 99999;
    text-align: left;
}

.file-drag-helper .jstree-ok,
.file-drag-helper .jstree-er {
    background-image: url("32px.png");
    background-repeat: no-repeat;
    background-color: transparent;
}

.file-drag-helper i {
    background: transparent;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.file-drag-helper .jstree-ok {
    background-position: -4px -68px;
}

.file-drag-helper .jstree-er {
    background-position: -36px -68px;
}

.jstree-default .jstree-hovered {
    /* background: #e7f4f9; */
    background: #0080ff;
}

.jstree-default .jstree-folder-ng {
    background: url("32px.png") -260px -4px no-repeat;
}

.css_jstree_file_list,
.css_jstree_folder_list {
    border: solid silver 1px;
}

/* 未確認件数 */
span.unapproved_count {
    padding: 0px 5px;
    margin-left: 5px;
    color: #FF0000;
    background: #F4DFDF;
    border: solid 1px #D79393;
    font-weight: bold;
    border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;

}

.css_drop_file_area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 50vw;
    height: 50vh;
}

#vakata-dnd {
    background: #fff;
    border: 2px solid #bbb;
    border-radius: 5px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}

#vakata-dnd span {
    margin-left: 10px;
    margin-right: 10px;
    /* margin: 30px 30px 30px 30px;
    padding: 30px 30px 30px 30px; */
}
/*--------------------------------------------------------------------------*/
/*      テーブルfilter用コンテキストメニュー                                  */
/*--------------------------------------------------------------------------*/
.css_table_filter_button {
    width: 22px;
    height: 22px;
    margin-left: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    background-image: url('/img/icon/filter_non.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.css_table_filter_button.filter_non_asc {
    background-image: url('/img/icon/filter_non_asc.png');
}

.css_table_filter_button.filter_non_desc {
    background-image: url('/img/icon/filter_non_desc.png');
}

.css_table_filter_button.filter_on {
    background-image: url('/img/icon/filter_on.png');
}

.css_table_filter_button.filter_sort_asc {
    background-image: url('/img/icon/filter_sort_asc.png');
}

.css_table_filter_button.filter_sort_desc {
    background-image: url('/img/icon/filter_sort_desc.png');
}

.css_tablefilter_table.tablesorter-default {
    margin: 0px;
}
.css_tablefilter_table.tablesorter-default .tablesorter-header {
    background-image: none !important;
    white-space: nowrap !important;
    padding-left: 5px;
    padding-right: 5px;
}

.context-menu-filter-item-list {
    max-height: 200px;
    overflow-y: auto
}

.context-menu-item.context-menu-html {
    padding: 0;
}

.context-menu-filter-item {
    padding: .3em .6em;
    display: block;
}

.context-menu-filter-item:hover {
    color: #fff;
    background-color: #2980b9;
    cursor: pointer;
}

.context-menu-filter-button {
    text-wrap: nowrap;
}
/* コンテキストメニュー：フレッシュアイコン */
.css-context-menu-refresh-icon:before {
    content: url('/img/icon/reload.svg');
}
  
/*--------------------------------------------------------------------------*/
/*      お気に入りアイコン                                                  */
/*--------------------------------------------------------------------------*/
.css_favorite {
    display: none;
}

.css_favorite + label {
    cursor: pointer;
    width: 20px; /* アイコンのサイズを調整 */
    height: 20px; /* アイコンのサイズを調整 */
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    background-image: url('/img/icon/favorite_off.png'); /* お気に入りOFFのアイコン */
}

.css_favorite:checked + label {
    background-image: url('/img/icon/favorite_on.png'); /* お気に入りONのアイコン */
}
/*--------------------------------------------------------------------------*/
/*      コンサル公開アイコン                                                  */
/*--------------------------------------------------------------------------*/
.css_consul_display{
    width: 12px; /* アイコンのサイズを調整 */
    height: 12px; /* アイコンのサイズを調整 */
    vertical-align: middle;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/img/icon/consul_display.png'); /* コンサル公開アイコン */
}
/*上記コンサル公開アイコン分の幅を確保用*/
.css_consul_display_none{
    width: 12px; /* アイコンのサイズを調整 */
    height: 12px; /* アイコンのサイズを調整 */
    display: inline-block;
}
/*--------------------------------------------------------------------------*/
/*      フォルダアイコンテキスト内部用                                         */
/*--------------------------------------------------------------------------*/
.css_folder_in_text{
    width: 16px; /* アイコンのサイズを調整 */
    height: 16px; /* アイコンのサイズを調整 */
    vertical-align: middle;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/img/icon/folder.png'); /* フォルダアイコン */
}
/************************/
/*          EOF         */
/************************/