@charset "utf-8";

:root {
    --base: #fff;
    --normal_color: #555D6E;
    --strong_color: #162533;
    --link: #5791F4;
    --link_rgb: #64b0cc10;
    --icon: #8bc5d9;
    --lightgray1: rgb(245, 247, 249);
    --lightgray2: #cacaca;
    --lightgray3: #EDF1F5;
    --lightgray4: #989FC1;
    /* --red: rgb(198, 7, 7); */
    --red: #cc6465;
    /* 
    ナビゲーション 
    */
    --nav_bg: #343951;
    --nav_color: #F9FBFD;
    --nav_link_active: #545C81;

    /*
     レイアウトフレーム 
     */
    --layout_bg: #F9FBFD;
    --layout_border: #EFF2F5;


    /*
     ボタン
     */
    /* --action: #F2994A; */
    /* --action: #cc7f64; */
    --action: #d84a00;
    --submit: #4CC4A0;
    --return: #E4EAF1;
    --delete: #E4EAF1;
    --disabled: #979ead;


    --focus_box_shadow: 0 0 0 0.25rem #00abc173;
    --placeholder: rgb(190, 190, 190);
}



body {
    background-color: var(--layout_bg);
    color: var(--normal_color);
    font-family: Hiragino Kaku Gothic Pro, Hiragino Sans, Meiryo, メイリオ, sans-serif;
    overflow-x: hidden;
    font-feature-settings: "palt";
}

main {
    flex: 1;
    min-width: 1200px;
    background-color: var(--base);
    border-right: 1px solid var(--layout_border);
    position: relative;
    padding-top: 32px;
}

.container-fluid{
    max-width: 1800px;
}

a {
    color: var(--link);
    transition: color .2s, background-color .2s;
    text-decoration: none;
}

a:hover {
    color: var(--link);
}

p {
    margin-bottom: 0;
    padding-bottom: 0;
}

strong{
    font-weight: bold;
}

ul,
li {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

input {
    border-color: var(--lightgray2);
}

input::placeholder,
.form-control::placeholder {
    color: var(--placeholder);
}

/* リンク, フォーム、ボタン フォーカス */
a {
    outline: none;
}
a:focus,
a:focus-within {
    outline: 1px solid var(--link);
}

.form-control:focus,
.form-select:focus,
.btn:focus {
    border-color: var(--link);
    box-shadow: var(--focus_box_shadow);
}

.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--link);
}



/* 
helper
フレーム
*/
.Frame {
    background-color: var(--layout_bg);
    border: 2px solid var(--layout_border);
    border-radius: 2px;
}


/* 
helper
ボーダー
*/
.Boder_R {
    border-right: 1px solid var(--lightgray2);
}



/* 
helper
ページ名
*/
.PageTtl {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--strong_color);
    letter-spacing: 1px;
}



/* 
helper
各所タイトル
*/
.Heading {
    font-size: 1rem;
    color: var(--strong_color);
    background-color: var(--lightgray3);
    padding: .6em;
    border-radius: 4px;
}

.Sub_Heading{
    font-size: 1.2rem;
    color: var(--nav_bg);
}



/* 
helper
小タイトル
フォーム等のタイトル
*/
.Form_Heading {
    font-size: .9rem;
    color: var(--strong_color);
    border-bottom: 1px solid var(--lightgray2);
    padding-top: .5em;
    padding-bottom: .5em;
}


/* 
helper
ただのテキストリンク
*/
.Text_Link {
    color: var(--link);
    border: none;
    background: 0;
    padding: 0;
}

.Text_Link:hover {
    color: var(--link);
    text-decoration: none;
    opacity: 1;
}



/* 
helper
フォントサイズ
*/
.Fs_Micro {
    font-size: .7rem;
}

.Fs_SS {
    font-size: .8rem;
}

.Fs_Normal {
    font-size: 1rem;
}

.Fs_L {
    font-size: 1.1rem !important;
}



/* 
helper
text-wrap
*/
.Text_Nowrap {
    text-wrap: nowrap;
}


/* 
helper
文字色
*/
.Text_Normal {
    color: var(--normal_color);
}

.Text_Strong {
    color: var(--strong_color);
}

.Text_Action {
    color: var(--action);
}

.Text_Submit {
    color: var(--link);
}

.Text_Disabled {
    color: var(--disabled);
}

.Text_Danger {
    color: var(--red);
}



/* 
helper
チェックボックス
*/
.form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    border-color: var(--lightgray1);
}

.form-check-input:focus {
    border-color: var(--link);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--link);
    border-color: var(--lightgray1);
}




/* 
radio
ラジオ
*/
.form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    border-color: var(--lightgray2);
}

.form-check-input:focus {
    border-color: var(--link);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--link);
    border-color: var(--lightgray1);
}




/* 
helper
display:grid;
*/
.D_grid_5_5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.D_grid_4_6 {
    display: grid;
    grid-template-columns: .4fr .6fr;
}

.D_grid_3_7 {
    display: grid;
    grid-template-columns: .3fr .7fr;
}

.D_grid_8_2 {
    display: grid;
    grid-template-columns: .8fr .2fr;
}

.D_grid_R3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}



/* 
component
横スクロール
*/
.OverflowX {
    overflow-x: scroll;
}



/* 
component
プルダウン
*/
.Pulldown_Wrap {
    position: relative;
    /* width: 100px; */
}

.Pulldown_List {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 100%;
    opacity: 0;
    visibility: none;
    pointer-events: none;
    background-color: var(--base);
    border-radius: 4px;
    border: 1px solid var(--layout_border);
    width: 200px;
}

.Pulldown_List.Other {
    width: 280px;
}

.Pulldown_List li {
    display: block;
    margin: .5em 0;
}

.Pulldown_List a,
.Pulldown_List button {
    display: block;
    padding: .5em 1em;
    color: var(--normal_color);
}

.Pulldown_List a:hover,
.Pulldown_List button:hover {
    background-color: var(--lightgray1);
}

.Pulldown_List.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

@media screen and (max-width:850px) { 
    .Pulldown_List.left{
        right: inherit;
    }
}
/* -------------------------- */













/* 
component
アラート
*/
.Alert {
    border-radius: 2px;
    padding: .5rem;
    border-radius: 4px;
    padding-left: 2rem;
}

.Alert i {
    position: absolute;
    top: .8rem;
    left: .5rem;
    font-size: .8rem;
}

/* その他アラート */
.Alert_Light {
    background-color: var(--layout_bg);
    border: 1px solid var(--layout_border);
}







/* 
component
ボタン
*/
.btn {
    border-radius: 4px;
    transition: color .4s, background-color .4s, opacity .2s;
    white-space: nowrap;
}

.Base_Btn {
    color: var(--link);
    font-weight: bold;
    border: solid 1px var(--link);
}

.Base_Btn:hover {
    opacity: .6;
    opacity: 1;
    color: var(--link);
    background-color: var(--lightgray1);
}

.Base_Btn.Small {
    font-weight: 400;
    font-size: .9rem;
    padding: .2em .8em;
}

.Btn_Invoices_Dell,
#Construction_Dell,
#Construction_Category_Dell,
.Products_Category_Dell,
.Btn_Products_Dell,
.Btn_Supplier_Dell,
.Btn_Purchase_Log_Dell,
#User_Dell,
#Role_Dell,
.Products_Unit_Dell,
.Client_Hidden_Btn,
.Client_Dell_Btn,
.Document_Tag_Dell,
.Btn_Attendance_Record_Dell {
    color: var(--action);
    border: solid 1px var(--action);
}

.Btn_Invoices_Dell:hover,
#Construction_Dell:hover,
#Construction_Category_Dell:hover,
.Products_Category_Dell:hover,
.Btn_Products_Dell:hover,
.Btn_Supplier_Dell:hover,
.Btn_Purchase_Log_Dell:hover,
#User_Dell:hover,
#Role_Dell:hover,
.Products_Unit_Dell:hover,
.Client_Hidden_Btn:hover,
.Client_Dell_Btn:hover,
.Document_Tag_Dell:hover,
.Btn_Attendance_Record_Dell:hover{
    color: var(--action);
}

.Border_Btn {
    font-weight: bold;
    /* font-size: .8rem; */
    /* padding: .2em .8em; */
    background-color: var(--base);
    border: 1px solid var(--lightgray2);
}

.Border_Btn.Thin {
    font-weight: Bold;
    font-size: .8rem;
    color: var(--normal_color);
    padding: .4em .8em;
    background-color: var(--base);
    border: 1px solid var(--lightgray2);
}

.Border_Btn.Small {
    font-weight: 400;
    font-size: .8rem;
    padding: .2em .8em;
    background-color: var(--base);
    border: 1px solid var(--lightgray2);
}

.Border_Btn:hover {
    background-color: var(--lightgray1);
}


.Action_Btn {
    color: var(--base);
    font-weight: bold;
    background-color: var(--action);
    letter-spacing: 1px;
}

.Submit_Btn {
    font-weight: bold;
    color: var(--base);
    background-color: var(--link);
}

.Submit_Btn.Small {
    font-size: .8rem;
    padding: .2em .8em;
    font-weight: 400;
}

.Submit_Btn.Thin {
    font-size: .8rem;
    padding: .4em .8em;
}

.Return_Btn {
    font-weight: bold;
    color: var(--base);
    background-color: var(--normal_color);
}

/* 戻るボタン ホバー */
.Return_Btn:hover {
    color: var(--base);
    opacity: .6;
}

.Delete_Btn {
    font-weight: bold;
    color: var(--base);
    background-color: var(--red);
}


/* ボタン ホバー */
.Action_Btn:hover,
.Submit_Btn:hover,
.Delete_Btn:hover {
    color: var(--base);
    opacity: .6;
}








/* 
component
トップページボタン
 */
.Index_Nav_Link {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--normal_color);
    width: calc((100% / 3));
    height: 130px;
    margin-left: .8rem;
    margin-bottom: .8rem;
    letter-spacing: 1px;
}

.Index_Nav_Link:first-of-type {
    margin-left: 0;

}


@media screen and (max-width:992px) { 
    .Index_Nav_Link {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.2rem;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-bottom: .8rem;
        letter-spacing: 1px;
    }
    
    .Index_Nav_Link:first-of-type {
        margin-left: 0;
    
    }
}


/* 
component
header
 */

#SP_Sidebar_Toggle_Wrap{
    display: none;
}

.Header {
    /* height: 100vh;
    min-height: 670px; */
    min-height: 100vh;
    height: fit-content;
    z-index: 100;
    bottom: 0;
    width: 200px;
    max-width: 200px;
    min-width: 150px;
    color: var(--nav_color);
    background-color: var(--nav_bg);
    border-right: 1px solid var(--lightgray2);
    position: relative;
    position: sticky;
    top: 0;
    left: 0;
    overflow-y: scrolls;
}


/* ヘッダーロゴ */
.Header_Logo {
    width: 100%;
    height: 60px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--layout_bg);
}

.Header_Logo > a{
    font-weight: bold;
}
/* ヘッダーログインユーザー */
.Header_User_Nav {
    padding: .5em;
}

.Header_User {
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: .5em;
    font-weight: bold;
}

/* ヘッダーログインユーザーアイコン */
.Header_User i {
    background-color: var(--nav_link_active);
    border-radius: 50%;
    padding: 8px;
}

.Header ul,
.Header li {
    display: block;
    font-size: 14px;
}

.Header li>a {
    display: block;
    color: var(--nav_color);
    padding: .5em .5em .5em 1.2em;
    border-radius: 4px;
}

.Header li>a.Active {
    background-color: var(--nav_link_active);
}

.Header ul>li>a:hover {
    background-color: var(--nav_link_active);
}

.Header_Main_Nav {
    width: 100%;
    padding: 0 .5rem .5rem .5rem;
}

.Header_Main_Nav>ul {
    border-top: 1px solid var(--nav_link_active);
    border-bottom: 1px solid var(--nav_link_active);

}

.Header_Main_Nav>ul>li {
    padding: .5em 0;
}

/* 子ナビゲーションあり */
.Header_Main_Nav>ul>li.With_Nav::after {
    content: "";

}

.Header_Main_Nav>ul>li.With_Nav {
    position: relative;
}

.Header_Main_Nav>ul>li.With_Nav>a,
.Header_Main_Nav>ul>li.With_Nav>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.5em 0.5em 1.2em;
    border-radius: 4px;
}

.Header_Main_Nav>ul>li.With_Nav>div:hover,
.Header_Main_Nav>ul>li.With_Nav>div.Active {
    background-color: var(--nav_link_active);
}

.Header_Main_Nav>ul>li.With_Nav>a>i {
    color: var(--lightgray1);
}

/* 子ナビ */
.Header_Main_Nav>ul>li.With_Nav ul {
    position: absolute;
    left: 100%;
    right: -100%;
    top: 0;
    background-color: var(--base);
    border: 1px solid var(--lightgray1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}

/* hover子ナビ表示 */
.Header_Main_Nav>ul>li.With_Nav:hover ul,
.Header_Main_Nav>ul>li.With_Nav ul:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}

.Header_Main_Nav>ul>li.With_Nav ul a{
    color: var(--normal_color);
    transition: none;
    margin: .5em 0;
}

.Header_Main_Nav>ul>li.With_Nav ul a:hover {
    color: var(--normal_color);
    background-color: var(--lightgray1);
}

.Header_Sub_Nav {
    padding: 0 .5rem .5rem .5rem;
}

.Header_Sub_Nav>li>a {
    margin-bottom: .2em;
}

.Header_Sub_Nav>li>a {
    padding-top: .2em;
    padding-bottom: .2em;
}

.Header_Support_Nav {
    width: 100%;
    padding: .5rem;
    /* position: absolute; */
    bottom: 0;
    left: 0;
    margin-bottom: 10px;
}

.Header_Support_Nav>ul {
    padding-top: 10px;
    border-top: 1px solid var(--nav_link_active);
}

/* .Header_Support_Nav>ul>li>a {} */

@media screen and (max-width:1180px) { 
    main{
        width: 100%;
        padding-top: 72px;
        min-width: inherit;
    }

    #SP_Sidebar_Toggle_Wrap{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }

    .Header{
        display: none;
        transition: 0.5s all;
        min-width: inherit;
        max-width: inherit;
    }

    .Header.OpenMenu{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
    }

    #SP_Sidebar_Toggle_Wrap button{
        background-color: var(--link);
        color: var(--base);
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 48px;
        height: 48px;
        padding: 10px;
    }

    #SP_Sidebar_Toggle_Wrap button span{
        font-size: 10px;
    }

    .Header.OpenMenu .Header_Logo{
        height: 96px;
        padding-top: 56px;
    }
}





/* 
component
テーブル
 */

/* 見積書、請求書、納品書テーブル
 --------------------- */
.Transaction_Table {
    width: 100%;
    /* background-color: #00ACC1; */
    /* font-weight: 400; */
}

/* テーブル thead */
.Transaction_Table>thead {
    border-bottom: 1px solid var(--lightgray2);
}

/* テーブル thead th */
.Transaction_Table>thead>tr>th {
    font-size: .9rem;
    font-weight: 400;
    padding: .7rem;
    padding-bottom: 1rem;
    white-space: nowrap;
}

/* テーブル tbody td */
.Transaction_Table>tbody>tr>td {
    font-size: .9rem;
    font-weight: 400;
    padding: .7rem;
    vertical-align: top;
}

/* テーブル tbody td */
.Transaction_Table>tbody>tr {
    border-bottom: 1px solid var(--lightgray2);
}

.Transaction_Table>tbody>tr:hover {
    background-color: var(--lightgray1);
}

/* テーブルステータス */
.Tbl_Status_Btn {
    font-size: .8rem;
    padding: .1em;
    border: 1px solid var(--lightgray2);
    position: relative;
    border-radius: 0;
    width: 4.8rem;
}

/* テーブル ステータス */
.Tbl_Status_Btn:hover {
    opacity: 1;
}

.Tbl_Status_Btn>i {
    display: none;
}

/* テーブル ステータス変更済み */
.Tbl_Status_Btn.Checked {
    padding: .1em .5em;
    background-color: var(--submit);
    color: var(--base);
    border-color: var(--submit);
}

/* チェックアイコン */
.Tbl_Status_Btn.Checked>i {
    display: inline-block;
    color: var(--base);
}


/* 選択肢囲み */
.Tbl_Status_Select {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
    padding-top: 2px;
    transition: opacity .3s;
    box-shadow: #c9caca8c 3px 3px 3px 3px;
}

.Tbl_Status_Btn:hover>.Tbl_Status_Select,
.Tbl_Status_Select:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* 選択肢ボタン */
.Tbl_Status_Choice {
    text-align: left;
    white-space: nowrap;
    font-size: .7rem;
    padding: .5em 1.5em;
    background-color: var(--base);
    border-radius: 0;
    border-bottom: 1px solid var(--lightgray1);
}

.Tbl_Status_Choice:hover {
    opacity: 1;
    background-color: var(--layout_bg);
}


.Tbl_Cell_Name {
    width: 500px;
}

/* 備考欄表示 */
.Tbl_Memo_Btn {
    position: relative;
    cursor: pointer;
}

.Tbl_Memo {
    transition: .2s;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 100%;
    opacity: 0;
    visibility: none;
    pointer-events: none;
    transform: scale(0, 0);
    background-color: var(--base);
    border-radius: 4px;
    border: 1px solid var(--layout_border);
}

.Js_Tbl_Memo.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: scale(1, 1);
}

.Tbl_Memo_Textarea {
    border: 0;
    padding: .5rem;
}

textarea:focus,
textarea:focus-within,
textarea:focus-visible {
    outline: 0;
}

.Tbl_Memo_Btn_Wrap {
    text-align: end;
    padding: .5rem;
    cursor: default;
}

/* 詳細ページ社内メモ */

.Detail_Tbl_Memo{
    border: solid 1px var(--delete);
    background-color: var(--base);
    border-radius: 4px;
}

.Detail_Tbl_Memo_Textarea{
    width: 100%;
    border: none;
    padding: 0.5rem;
}

.Detail_Tbl_Memo_Btn_Wrap{
    display: flex;
    justify-content: end;
}


/* 件名文末処理 */

.Transaction_Table .Tbl_Cell_Name a{
    text-overflow: ellipsis;
    overflow: hidden; 
    width: 100%;
    display: block;
    max-width: 400px;
}



/* 
component
テーブル
 */

/* 取引先テーブル
 --------------------- */
.Client_Table {
    width: 100%;
    /* background-color: #00ACC1; */
    /* font-weight: 400; */
}

/* テーブル thead */
.Client_Table>thead {
    border-bottom: 1px solid var(--lightgray2);
}

/* テーブル thead th */
.Client_Table>thead>tr>th {
    font-size: .7rem;
    font-weight: 400;
    padding: .7rem;
    padding-bottom: 1rem;
}

/* テーブル tbody td */
.Client_Table>tbody>tr>td {
    font-size: .8rem;
    font-weight: 400;
    padding: .7rem;
    vertical-align: top;
}

.Client_Table tr:nth-child(1) td[rowspan]:hover {
    background-color: #fff;
}

/* テーブル tbody tr */
.Client_Table>tbody>tr {
    border-bottom: 1px solid var(--lightgray2);
}

.Client_Table .Bodernone {
    border-bottom: 0;
}

.Client_Table>tbody>tr:hover {
    background-color: var(--lightgray1);
}

/* 備考欄・文書選択表示 */
.js_Tbl_Select_Show {
    position: relative;
    cursor: pointer;
}

.js_Tbl_Select_List {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 1.3rem;
    opacity: 0;
    visibility: none;
    pointer-events: none;
    background-color: var(--base);
    /* padding: 0 1rem .5rem 0; */
    border-radius: 4px;
    border: 1px solid var(--layout_border);
    width: auto;
    white-space: nowrap;
}

.js_Tbl_Select_List li {
    display: block;
}

.js_Tbl_Select_List li:hover {
    background-color: #a2e4ed68;
}

.js_Tbl_Select_List a {
    display: block;
    padding: .5em 1em;
}

/* .js_Tbl_Select_List a:hover {
    background-color: #a2e4ed68;
} */

.js_Tbl_Select_List.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.js_Tbl_Select_Btn i{
    margin-left: 8px;
}









/* 
component
CSVダウンロード
*/
.js_Csv_Select_Show {
    position: relative;
    cursor: pointer;

}

.js_Csv_Select_List {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 1.3rem;
    opacity: 0;
    visibility: none;
    pointer-events: none;
    background-color: var(--base);
    border-radius: 4px;
    border: 1px solid var(--layout_border);
    width: 150px;
}

.js_Csv_Select_List li {
    display: block;
}

.js_Csv_Select_List button {
    display: block;
    padding: .5em 1em;
    border: 0;
    width: 100%;
    background-color: var(--base);
    text-align: left;
}

.js_Csv_Select_List button:hover {
    background-color: var(--lightgray1);
}

.js_Csv_Select_List.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}




















/* 
component
タブ
 */
.Tabs_Wrap {
    border-bottom: 1px solid var(--lightgray2);

}

.Tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

.Tab {
    padding: 5px 10px;
    border-bottom: 2px solid transparent;
}

.Tab.Active {
    border-bottom: 2px solid var(--link);
}

.Tab:hover{
    background-color: rgba(0, 0, 0, .075);
}

.Tab_Btn {
    font-size: .8rem;
    padding: .2em .9em;
    transition: 0s;
}

.Tabs_Wrap .submit{
    font-size: .8rem;
    padding: .2em .9em;
    transition: 0s;
}

.Tab_Btn:hover {
    /* background-color: var(--lightgray1); */
}

.js_Panel {
    padding-top: 2rem;
    display: none;
}

.js_Panel.Show {
    display: block;
}


/* 
component
検索フォーム
*/
.Search_Form_Group {
    display: flex;
    justify-content: flex-end;
}

.Search_Form {
    width: 100%;
    max-width: 400px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.Search_Form.Textonly {
    width: 400px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}


.Search_Btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.Advanced_Search_Menu {
    display: none;
    border: 1px solid var(--layout_border);
    padding: 1rem;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--base);
    border-radius: 4px;
}

.Advanced_Search_Menu.Show {
    display: block;
}

.Advanced_Search_Menu label {
    font-size: .8rem;
}

.Advanced_Search_Menu .form-control {
    font-size: .9rem;
}




/* 
component
通常フォーム
*/
.form_Group {
    margin-bottom: .5rem;
}

.form_Group label {
    font-size: .8rem;
    font-weight: bold;
    color: var(--strong_color);
    margin-bottom: 2px;
}

.form_Group.Radio label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--strong_color);
    margin-left: 5px;
}

/* チェックボックスやラジオボタンのラベル */
.form_Group .Label {
    display: inline-block;
    font-size: .8rem;
    font-weight: bold;
    color: var(--strong_color);
    margin-bottom: .5rem;
}

.form_Group .Label>small {
    font-weight: 400;
}

.form_Group label .Required {
    font-size: .7rem;
    font-weight: bold;
    display: inline-block;
    background-color: var(--action);
    color: var(--base);
    padding: 0 .4em;
    border-radius: 4px;
}

.form_Group input:not(input[type="checkbox"], input[type="radio"]),
.form_Group select {
    padding: .2rem .75rem;
}

.form_Group small {
    display: block;
    font-size: .7rem;
    color: var(--normal_color);
    margin-bottom: .3rem;
}

/* inputフォーカス時のドロップダウン */
.Form_Dropdown {
    background-color: var(--lightgray1);
    padding: 0;
    position: absolute;
    /* z-index: 1000; */
    z-index: 30;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.25rem;
    max-height: 420px;
    overflow-y: scroll;
}

.Form_Dropdown.Show {
    display: block;
}

.Form_Dropdown>li>button {
    font-size: .9rem;
    padding: .8em;
    width: 100%;
    text-align: start;
}

.Form_Dropdown>li:hover {
    background-color: #a2e4ed68;
}

.Select_Search {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    border-bottom: inherit;
    border: 1px solid #ced4da!important;
}

/* 銀行振込先フォーム設定 */
.Bank_Form_Wrap {
    display: flex;
}

.Bank_Form_Wrap .Btn_DB_Sender_Bank_Form_Dell {
    color: var(--nav_link_active);
}

.Bank_Form_Wrap #Btn_Sender_Bank_Form_Add {
    display: flex;
    align-items: center;
}


/* Select Multiple */

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    padding-left: 30px!important;
}

.select2-container--default .select2-selection--multiple{
    border: 1px solid #ced4da!important;
}



/* 
component
ページの下に表示する合計額
 */
.Total_Footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    /* max-width: 1400px; */
    width: 100%;
    background-color: var(--layout_bg);
    border-top: 1px solid var(--layout_border);
    border-right: 1px solid var(--layout_border);
    padding: 1rem;
}









/* 
component
商品テーブル
*/
.Items_Table {
    width: 100%;
    table-layout: fixed;
}

.Items_Table thead {
    border: 1px solid var(--lightgray2);
}

.Items_Table thead th {
    background-color: var(--lightgray1);
    padding: 1rem;
    font-size: .9rem;
    text-align: center;
    color: var(--strong_color);
    border-right: 1px solid var(--lightgray2);
}


.Items_Table thead th:last-of-type {
    border-right: none;
}



.Items_Table tbody tr {
    position: relative;
    border-right: 1px solid var(--lightgray2);
}

/* 行の追加・削除ボタン */
.Row_Btns {
    display: flex;
    flex-direction: column;
}

.Row_Btns .btn {
    padding: 0 .4em;
}

.Items_Table tbody tr .Row_Btns {
    position: absolute;
    left: calc(-1rem - 14px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    /* border: 1px solid var(--lightgray2); */
    /* padding: .5em; */
    /* opacity: 0; */
    /* visibility: hidden; */
    /* pointer-events: none; */
}

.Items_Table tbody tr:hover .Row_Btns,
.Items_Table tbody tr .Row_Btns:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}





.Items_Table tbody td {
    background-color: var(--base);
    padding: .5rem;
    height: 3.5rem;
    font-size: .9rem;
    color: var(--strong_color);
    border-left: 1px solid var(--lightgray2);
    border-bottom: 1px solid var(--lightgray2);
}


.Items_Table tbody td.None,
.Items_Table tbody tr.None {
    border: none;
}

.Items_Table tbody td.B_Top {
    border-top: 1px solid var(--lightgray2);
}

.Items_Table tbody td.H_Auto {
    height: auto;
}

.Items_Table input {
    height: 100%;
    width: 100%;
    border: 0;
    border-bottom: 2px dotted var(--lightgray2);
    padding: .5em 1rem;
}

.Items_Table input:focus,
.Items_Table input:focus-within,
.Items_Table input:focus-visible {
    outline: 0;
    /* border: 0; */
    border-bottom: 2px dotted var(--link);
    box-shadow: none;
}

.Items_Table td:last-of-type input,
.ReadOnly {
    border: 0;
    border-bottom: none;
    border-radius: 4px;
    background-color: var(--lightgray1);
    border-bottom: none!important;
}

.Items_Table td:last-of-type input:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.Items_Table .form-select {
    width: 110px;
}



.Items_Table .TaxInput {}

.Items_Table .TaxInput input {
    border: 0;
    border-bottom: none;
    border-radius: 4px;
    background-color: var(--lightgray1);
}

.Items_Table .TaxInput input:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.One_Item_Total_Price{
    text-align: right;
}

#Sale_Tax_Detail_Text{
    color: var(--red);
}

/* 一括処理 */
.Items_Table_Option {
    background-color: var(--lightgray1);
    padding: 1rem;
    font-size: .9rem;
    color: var(--strong_color);
    border: 1px solid var(--lightgray2);
    border-bottom: none;
    display: flex;
    align-items: center;
}

.Items_Table_Option .form-select {
    width: 110px;
}


/* 品目登録エリア修正 */
.js_Items_Table_Tr .form_Group label{
    color: var(--link);
}

.js_Items_Table_Tr select{
    font-size: 0.75em;
    padding: .2rem 2.25rem .375rem .75rem;
}

/* 品目エリア内各種登録フォーム */
.Document_Add_Form_Wrap{
    display: none;
}

.Document_Add_Form_Wrap input{
    padding: 0.2rem 0.75rem;
    border-bottom: inherit;
    border: 1px solid #ced4da;
}


/* 品目登録絞り込み検索フォーム */
.Select_Search_Content{
    display: none;
}

.Select_Search_Wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dfe1e5;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--base);
}

.Select_Search_Wrap:hover {
    box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
}

.Select_Search_Wrap::before {
    width: 32px;
    height: 15px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%239aa0a6%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');
    background-position: center;
    background-repeat: no-repeat;
    content: '';
}

.Select_Search_Wrap label{
    width: 100%;
}

.Select_Search_Wrap input {
    padding: 0.2rem 0.2rem!important;
    border: none;
    border-bottom: none!important;
    box-sizing: border-box;
    outline: none;
    font-size: 0.75em;
    width: 100%;
}
/* 
component
小計・合計金額表示
*/
.Footer_Total_Wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.Footer_Subtotal>span {
    font-weight: bold;
    font-size: 1.25rem;
    font-family: Droid Sans, sans-serif;
}

.Footer_Subtotal_Wrap {
    display: flex;
    border-right: 1px solid var(--lightgray2);
}

.Footer_Total {
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    padding: 0 1rem 0 40px;
}

.Footer_Total span {}

.Footer_Total_Output {
    font-size: 1.3rem;
    margin-right: 10px;
    font-family: Droid Sans, sans-serif;
    width: 10rem;
    text-align: end;
    border-bottom: 1px dotted var(--lightgray2);
}





/* 
component
モーダル 
*/
.Modal {
    background-color: var(--base);
    border: 1px solid var(--lightgray2);
    border-radius: 6px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 31;
    transition: opacity .4s;
    /* padding-bottom: calc(36px + 1.3rem); */
}

.ModalA {
    width: calc(1200px - 3rem);
    max-width: calc(100% - 200px - 3rem);
    left: calc(200px + 2rem);
}

.ModalB {
    width: 600px;
    min-width: calc(1200 - 200px - 3rem);
    left: calc(500px + 2rem);
}

.ModalB>.Modal_Body {
    height: auto;
}

.Modal.Show {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.Modal_Header {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--lightgray2);
}

.Modal_Ttl {
    font-size: 1.2em;
    color: var(--strong_color);
    font-weight: bold;
}

.Modal_Body {
    max-height: 70vh;
    height: auto;
    overflow: auto;
}

.Modal_Body.Scroll>.Modal_Body_Inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

.Modal_Body_Inner>div {
    padding: 1rem;
}


.Modal_Footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    min-width: 400px;
    padding: 16px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--layout_bg);
    border-top: 1px solid var(--lightgray2);
}

/* モーダル背景
クリックでモーダルを閉じる */
.Modal_Bg {
    height: 100vh;
    width: 100vw;
    background-color: #1625337a;
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}

.Modal_Bg.Show {
    visibility: visible;
    opacity: 1;
    pointer-events: all;

}

@media screen and (max-width:1024px) {
    .Modal {
        background-color: var(--base);
        border: 1px solid var(--lightgray2);
        border-radius: 6px;
        position: fixed;
        top: 50%;
        transform: translate(-50% , -50%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 31;
        transition: opacity .4s;
        /* padding-bottom: calc(36px + 1.3rem); */
    }
    
    .ModalA {
        width: calc(100% - 3rem);
        max-width: calc(100% - 200px - 3rem);
        left: 50%;
    }
    
    .ModalB {
        width: calc(100% - 3rem);
        min-width: 300px;
        left: 50%;
    }

    .Modal_Footer {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        min-width: inherit;
        padding: 16px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: var(--layout_bg);
        border-top: 1px solid var(--lightgray2);
    }
 }


/* ページ上部ナビゲーション */

#Page_Head_Nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}











/* 
component
レポートテーブル
*/
.Report_Tbl {
    color: var(--strong_color);
    width: 100%;
    table-layout: fixed;
    text-align: center;
    font-weight: bold;
}

.Report_Tbl thead {
    border: 1px solid var(--lightgray2);
    background-color: var(--lightgray1);
}

.Report_Tbl thead td {
    border-right: 1px solid var(--lightgray2);
}

.Report_Tbl thead tr:nth-child(2) {
    border-bottom: 1px solid var(--lightgray2);
}

.Report_Tbl thead th {
    padding: .2rem;
    border-right: 1px solid var(--lightgray2);
}


.Report_Tbl thead th:last-of-type {
    border-right: none;
}

.Report_Tbl tbody {
    border: 1px solid var(--lightgray2);
}

.Report_Tbl tbody th,
.Report_Tbl tbody td {
    padding: .3rem;
    font-size: .9rem;
    border-right: 1px solid var(--lightgray2);
}

.Report_Tbl tbody td>div {
    font-weight: 100;
}

.Report_Tbl tbody>tr:nth-child(2) {
    border-bottom: 1px solid var(--lightgray2);
}

.Report_Tbl tbody>tr:nth-child(3) {
    font-size: .8rem;
    background-color: var(--lightgray1);
    font-weight: 500;
}

/* 取引先上位２０～テーブル */
.Report_Tbl.Client {
    width: 1140px;
    margin-right: 2px;
}

.Report_Tbl.Client tbody>tr {
    border-bottom: 1px solid var(--lightgray2);
    background-color: var(--layout_bg);
}

.Report_Tbl.Client tbody th,
.Report_Tbl.Client tbody td {
    padding: 10px;
}

.Report_Tbl.Client tbody>tr>th:first-child {
    text-align: start;
}

.Report_Tbl.Client tbody>tr>td:not(:first-child) {
    text-align: end;
}








/* 
component
未入金状況
*/
.Notpayment_Wrap {
    position: relative;
    max-width: 500px;
    width: 100%;
    margin-bottom: 10px;
}

.Notpayment_Bb {
    display: flex;
    justify-content: space-between;
}

/* 未入金合計バー */
.Notpayment_Bar {
    margin-bottom: 8px;
    height: 8px;
    width: 100%;
    max-width: 100%;
    background-color: var(--disabled);
}

/* 期限超過バー */
.Notpayment_Bar_Excess {
    height: 8px;
    width: 10%;
    max-width: 100%;
    background-color: #d88c00;
}

/* 未入金グラフ */
.js_Notpayment_Graph {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: 0;
}

.js_Notpayment_Graph.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* 未入金グラフを表示 */
.js_Notpayment_Hidden {
    position: absolute;
    bottom: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: 0;
}

.js_Notpayment_Hidden.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}






/* ページ別追加要素 */
/* Document/Clients/Clients_List.php */
.Modal_Body_Inner {
    position: relative;
}

.Modal_Loading_Wrap {
    position: absolute;
    width: calc(100% - 2rem);
    height: 100%;
    z-index: 80;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--nomal_color);
    font-size: 24px;
    padding: 0 !important;
    top: 0;
    left: 0;
    display: none;
}

.Modal_Loading_Wrap>div {
    width: 100%;
    height: 100%;
    color: var(--nomal_color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: none;
    flex-direction: column;
}

.Change_Footer_Wrap {
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - 120px);
    height: 60px;
    background: var(--return);
    display: none;
}

.Change_Footer_Wrap p {
    padding-right: 12px;
    border-right: solid 1px var(--nomal_color);
}

.Change_Footer_Wrap button {
    margin-left: 12px;
}

#Main_ListPage {
    padding-bottom: 84px;
    position: relative;
}

#Client_Dell.Delete_Btn{
    font-size: .8rem;
    padding: 0.4em 0.8em;
    font-weight: 400;
}

#Select_Num_Change{
    width: inherit;
    height: inherit;
    margin-left: inherit;
    border-radius: inherit;
    color: var(--nomal_color);
}

/* Document/Clients/Clients_Detail.php */
.Info_Box dl{
    display: flex;
}

.Info_Box dt{
    color: var(--strong_color);
    font-size: 0.9rem;
    margin-right: 32px;
    width: 150px
}

.Info_Box dd{
    color: var(--strong_color);
    font-size: 0.9rem;
    width: calc(100% - 150px);
}

/* Document/Dealing_Items/Dealing_Items_List.php */

/* .One_Products_List td > .Editable{
    display: none;
}

.One_Products_List td > .form_Group.Min{
    max-width: 120px;
} */



/* Document/Clients/Clients_Bulk_Add.php */

.svg_Template_Rules_Wrap *{
    font-size: .875rem;
}

.svg_Template_Rules_Wrap tr td:first-of-type{
    white-space: nowrap;
}

.Form_csv_Wrap{
    margin: auto;
    padding: 1.6rem 1rem;
    border-radius: 4px;
    border: solid 1px var(--lightgray2);
}

/* Other/Products/Products_Add.php */
.select2-selection__rendered{
    padding: 0.2rem 0.75rem;
}

.select2-container--default .select2-selection--single{
    height: auto!important;
}

.select2{
    width: 100%!important;
}

.select2-container--default .select2-selection--single{
    border: 1px solid #ced4da!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 50%!important;
    transform: translateY(-50%);
}

/* Other/Products/Products_List.php */
.Btn_Stock_Edit{
    font-size: .8rem;
    padding: 0.4em;
}

a.Link_Disabled{
    opacity: 0.8;
    pointer-events: none;
}


/* デバッグ時表示パーツ */

aside{
    width: 100%;
    display: none;
}


/* カテゴリー 色 */
p>span {
    width: 16px; /* 丸の幅 */
    height: 16px; /* 丸の高さ */
    color: #fff; /* 文字色 */
    border-radius: 50%; /* 丸の形状（円形） */
    display: inline-block;
    vertical-align: top;
    margin-left: 5px; /* 丸とテキストの間隔 */
}

.Icelandblue>span {
    background-color: #b6d1e1;
    color: #002752;
}

.Indigo>span {
    background-color: #0a0a2d;
    color: #fff;
}

.Seagreen>span {
    background-color: #00a9a7;
    color: #fff;
}

.Carnival>span {
    background-color: #c8002b;
    color: #fff;
}


.Mimosa>span {
    background-color: #ffcd25;
    color: #38380b;
}

.Ilis>span {
    background-color: #8a80af;
    color: #fff;
}

.Rose>span {
    background-color: #FF8686;
    color: #fff;
}




/* PDF */
.B_None{
    border: none;
}

/* 即編集テーブル */
.ExcelEditTable .form_Group{
    margin-bottom: 0;
}
.ExcelEditTable input{
    font-size: .8rem;
}

.ExcelEditTable select{
    font-size: .8rem;
    padding: 0.2rem 0.75rem!important;
}

.ExcelEditTable .Excel input,
.ExcelEditTable .Excel select{
    border: none!important;
}

.ExcelEditTable .Excel.Edit input,
.ExcelEditTable .Excel.Edit select{
    border: 1px solid #ced4da!important;
}

.Editable  .select2-selection__rendered{
    padding: 0 20px 0 8px;
}

.ExcelEditTable .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 0.8rem; 
}

.ExcelEditTable .select2-results__option--selectable{
    font-size: 0.8rem!important; 
}

.ExcelEditTable p{
    margin-bottom: 0;
}

.One_Products_List .Excel .select2-container--default .select2-selection--single{
    border: none!important;
}

.One_Products_List .Excel .select2-container--default .select2-selection__arrow{
    opacity: 0;
}

.One_Products_List .Excel.Edit .select2-container--default .select2-selection--single{
    border: 1px solid #ced4da!important;
}

.One_Products_List .Excel.Edit .select2-container--default .select2-selection__arrow{
    opacity: 1;
}

.product_unit.form-control[readonly]{
    background-color: #fff!important;
}

#Add_Products_List input{
    font-size: .8rem;
    padding: 0.2rem 1px!important;
}


#Add_Products_List select,
#Add_Products_List .select2-selection__rendered{
    font-size: .8rem;
    padding: 0 0.75rem!important;
}


@keyframes AddAnm {
    0% {
        border-bottom: solid 1px transparent;
    }
    30% {
        border-bottom: solid 1px var(--link);
    }
    100% {
        border-bottom: solid 1px var(--lightgray2);
    }
}

.AddAnm {
    animation: AddAnm 1s ease-in-out;
}

.Overflow_Table_Wrap{
    width: 100%;
    height: max-content;
    overflow-x: scroll;
    overflow-y: clip;
    padding-bottom: 72px;
}

/* スクロールバー全体のスタイル */
.Overflow_Table_Wrap::-webkit-scrollbar {
    height: 8px; /* スクロールバーの高さ */
}

/* スクロールバーのトラック（背景）のスタイル */
.Overflow_Table_Wrap::-webkit-scrollbar-track {
    background: transparent; /* トラックの背景色 */
    border-radius: 10px; /* トラックの角を丸くする */
}

/* スクロールバーのつまみのスタイル */
.Overflow_Table_Wrap::-webkit-scrollbar-thumb {
    background-color: #cccccc; /* つまみの色 */
    border-radius: 10px; /* つまみの角を丸くする */
    border: 2px solid #f0f0f0; /* つまみの周囲の余白 */
}

/* スクロールバーのつまみのスタイル（ホバー時） */
.Overflow_Table_Wrap::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* ホバー時のつまみの色 */
}


.Transaction_Table.Products thead{
    position: sticky;
    top: 0;
    background-color: var(--base);
    z-index: 10;
}

.Transaction_Table thead{
    background-color: var(--base);
}

.form-select.autocomp{
    min-height: 28px;
}

#Menu_Footer_Wrap{
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - 120px);
    background-color: var(--layout_bg);
    border-top: 1px solid var(--layout_border);
    border-right: 1px solid var(--layout_border);
    padding: 1rem;
    display: none;
}

#Menu_Footer_Inner{
    display: flex;
    justify-content: end;
}

.sticky-top{
    z-index: 30;
}

@keyframes Temp_Show {
    0% {
        opacity: 0;
        display: none;
    }
    10% {
        opacity: 0;
        display: block;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.trumbowyg-editor, .trumbowyg-textarea{
    min-height: 150px!important;
}

.trumbowyg-box{
    min-height: 150px!important;
}

.trumbowyg-box p{
    margin-bottom: 0;
}

.trumbowyg-box p > span{
    display: inline;
    margin-left: 0;
}





/* 内容検索 */
.Item_Search_Form_Wrap{
    display: none;
}

#Search_Products_Result_Table_Wrap{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    font-size: 14px;
}

#Search_Products_Result_Table_Wrap li{
    background-color: var(--link_rgb);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    border: solid 1px var(--link);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
}

#Search_Products_Result_Table_Wrap li div{
    display: flex;
    align-items: center;
    gap: 8px;
}

#Search_Products_Result_Table_Wrap li p{
    margin-bottom: 0;
}


/* ページング */
.pagination-container{
    margin-top: 24px;
    margin-right: 0;
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.pagination{
    background-color: var(--delete);
}

.pagination .page-item{
    
}

.pagination .page-item a{
    background-color: var(--base)!important;
    color: var(--nav_bg)!important;
}

.pagination .page-item.disabled a{
    opacity: 0.5;
}

.pagination .navi-active a{
    color: var(--base)!important;
    background-color: var(--nav_bg)!important;
    border: solid 1px var(--nav_bg)!important;
}


/* 内容一覧 */

.One_Products_List input,
.One_Products_List select{
    padding-inline: 1px!important;
}


/* タグ */
.Tag_Wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.Tag{
    position: relative;
    padding: 2px 4px;
    border: solid 1px var(--disabled);
    color: var(--nav_bg);
    font-size: 12px;
    border-radius: 4px;
    display:inline-block;
}

.Tag i{
    margin-right: 4px;
    color: var(--disabled);
}

/* URL発行したら編集不可にする */
.Edit_Link.DisAbled{
    opacity: 0.6;
}

/* すでにURL発行済の場合 */
#Btn_Issue_URL.Issued{
    display: flex;
    align-items: center;
}

#Btn_Issue_URL.NoIssue span{
    display: none;
}

#Btn_Issue_URL.Issued span{
    display: block;
    background-color: var(--nav_bg);
    color: var(--base);
    font-size: 12px;
    padding: 2px;
    border-radius: 2px;
    margin-left: 4px;
}


/* 各種書類共有リンクページ */

#Share_Page_Header{
    background-color: var(--base);
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px var(--lightgray3);
}

#Share_Page_Header h1{
    color: #cc9c64;
    font-size: 32px;
    margin-bottom: 0;
}

/* リッチエディタ */
.RichEditor span{
    display: inline;
}

.RichEditor2 span{
    display: inline;
}

.ql-editor h1{
    font-size: 20px!important;
}
.ql-editor h2{
    font-size: 18px!important;
}


.Disable_Link{
    pointer-events: none;
    opacity: 0.5;
}


/*  */
.State_Change_Disable .Tbl_Status_Btn{
    filter: opacity(0.5);
    pointer-events: none;
}

/* @media screen and (max-width:850px) { 
    .PDF_iframe_Wrap{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 85%;
        margin-top: 40px;
        & iframe{            
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

    .PDF_iframe_Wrap_Column{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 132%;
        margin-top: 40px;
        & iframe{            
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
}
 */


#signatureCanvas {
    -webkit-touch-callout: none; /* iOS のタッチの選択を無効化 */
    -webkit-user-select: none;   /* ユーザーによる選択を無効化 */
    -moz-user-select: none;      /* Firefox のユーザー選択を無効化 */
    -ms-user-select: none;       /* Internet Explorer/Edge のユーザー選択を無効化 */
    user-select: none;           /* 標準のユーザー選択を無効化 */
    touch-action: none;          /* タッチアクションを無効化 */
}

#pdfViewer_Wrap {
    margin-top: 40px;
    width: 100%;
    max-width: 980px; /* 最大幅を設定 */
    max-height: 570px; /* 最大高さを設定 */
    padding-bottom: 55%; 
    position: relative;
    background-color: #fefefe;
    border: solid 1px var(--layout_border);
    margin-bottom: 80px;
    overflow: hidden;
}

#pdfIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* iframeのデフォルトの枠線を削除 */
}

#pdfViewer{
    width: 100%;    
}

#pdfViewer canvas{
    width: 100%;
}

#pdfViewer_Wrap #Error{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* #pdfViewer_Wrap {
    margin-top: 40px;
    max-width: 849px;
    width: 100%;
    overflow-y: auto; 
    background-color: var(--layout_bg);
    border: solid 1px var(--layout_border);
    position: relative;
}

#pdfViewer {
    width: 100%;
    position: relative;
    opacity: 0;
    overflow-y: auto;
}

#pdfViewer canvas {
    width: 100%;
    display: block;
    margin: 0 auto;
    border: solid 1px var(--layout_border);
} */

#loadingSpinner {
    position: absolute;
    top: calc(50% - 60px);
    left:  calc(50% - 60px);
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--link);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    z-index: 1000;
}

/* スピナーのアニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 


/* A4 縦方向サイズ */
#Column_pdfViewer_Wrap {
    margin-top: 40px;
    width: 794px; /* A4 縦方向の幅 */
    height: 1123px; /* A4 縦方向の高さ */
    overflow-y: auto;
    background-color: var(--layout_bg);
    border: solid 1px var(--layout_border);
    box-sizing: border-box;
    margin: 0 auto; /* 中央揃え */
}

#Column_pdfViewer {
    width: 100%;
    height: 100%;
}

#Column_pdfViewer canvas {
    width: 100%;
    height: auto;
}

/* スマホ対応 */
@media (max-width: 600px) {
    #Column_pdfViewer_Wrap {
        margin-top: 20px;
        width: 100%; /* 幅を100%にして親要素に合わせる */
        height: auto; /* 高さを自動にして内容に合わせる */
        max-width: 100%;
    }
    
    #Column_pdfViewer {
        width: 100%;
        height: auto;
    }
}

/* タブレット対応 */
@media (min-width: 601px) and (max-width: 900px) {
    #Column_pdfViewer_Wrap {
        margin-top: 30px;
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    
    #Column_pdfViewer {
        width: 100%;
        height: auto;
    }
}


#Share_Content_Wrap {
    padding-bottom: 70px;
}

#Share_Footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: solid 1px var(--disabled);
}

#Share_Page_Header {
    background-color: var(--base);
    border-bottom: solid 1px var(--disabled);
}

#Share_Page_Header h1 {
    color: var(--submit);
    font-size: 32px;
    margin-bottom: 0;
}

#ShareHeader_Content{
    padding: 12px 16px;

}

#Share_Page_Logo_Wrap{
    display: inline-block;
    width: auto;
}

#Share_Page_Logo_Wrap img{
    height: 40px;
    width: auto;
}
#Share_Page_Logo_Wrap span{
    color: var(--nav_border_color);
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

#Share_Page_Name_Wrap{
    display: inline-flex;
    width: auto;
    flex-direction: column;
    justify-content: center;
}

#Share_Page_Name_Wrap p{
    font-size: 20px;
    color: #ffffff;
}
#Share_Page_Name_Wrap span{
    color: var(--nav_border_color);
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

#Share_Client_Name_Wrap{
    background-color: var(--disabled);
    padding: 4px 0px;
    width: 100vw;
}

#Share_Client_Name_Wrap p{
    font-weight: normal;
    font-size: 14px;
    color: #fff;
}

/* 詳細ページ社内メモ */
.Detail_Tbl_Memo{
    /* border: var(--form_border); */
    background-color: var(--base);
    border-radius: 4px;
}

.Detail_Tbl_Memo_Textarea{
    width: 100%;
    border: none;
    padding: 0.5rem;
}

.Detail_Tbl_Memo_Btn_Wrap{
    display: flex;
    justify-content: end;
}

#Other_Calc_Info_Wrap{
    background-color: var(--link_rgb);
    padding: 12px;
    display: flex;
    gap: 12px;
    width: fit-content;
    margin-top: 8px;
}