@charset "utf-8";

:root {
    --base: #fefefe;
    --normal_color: #222222;
    --strong_color: #162533;
    --link: rgb(0 128 241);
    --lightgray1: rgb(245, 247, 249);
    --lightgray2: #efefef;
    --red: rgb(222 50 50);
    --blue: rgb(0 128 241);
    --light_blue: rgb(126 201 236);
    --accent_bg_color: linear-gradient(
        134deg,
        rgb(0 128 241),
        rgb(126 201 236)
    );

    /* ナビゲーション */
    --nav_bg: linear-gradient(228deg, #2a2a2a, #4a4a4a);
    --nav_color: #f9fbfd;
    --nav_link_active: linear-gradient(
        160deg,
        rgb(0 128 241),
        rgb(126 201 236)
    );
    --nav_link_hover: #575757;
    --with_Nav_link_hover: rgb(232 243 248);
    --header_logo: #f8f8f8;
    --nav_border_color: #7a7a7a;
    --border_accent_color: rgb(126 201 236);

    /* 各所タイトル */
    --heading_bg: rgb(232 243 248);

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

    /* テーブル  */
    --tbl_border: 1px solid #cacaca;
    --dashed_border: 2px dashed #cacaca;

    /* ボタン */
    --action: rgb(237 159 55);
    --submit: rgb(0 128 241);
    --success: rgb(0 128 241);
    --return: #e4eaf1;
    --delete: rgb(222 50 50);
    --disabled: #dfdfdf;
    --border_btn_border: 1px solid #cacaca;

    /* ボタンhover */
    --action_btn_hover: rgb(255 176 72);
    --submit_btn_hover: rgb(62 162 250);
    --delete_btn_hover: rgb(237 87 87);
    --frame_btn_hover: rgb(245, 247, 249);

    /* フォーム関連  */
    --form_border: 1px solid #cacaca;
    --focus_outline: #2c2c2c28;
    --form_focus: rgb(126 201 236);
    --placeholder: rgb(190, 190, 190);
    /* フォント */
    --EnFont: "Jost", sans-serif;
    --JaFont: Hiragino Kaku Gothic Pro, Hiragino Sans, Meiryo, メイリオ,sans-serif;
}

body {
    color: var(--normal_color);
    font-family: var(--JaFont);
    overflow-x: hidden;
}

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

@media screen and (max-width:1200px) { 
    main{
        min-width: inherit;
    }
}

::selection {
    color: #fff;
    background-color: rgb(0 128 241);
}

a {
    color: var(--link);
    transition: color 0.2s, background-color 0.2s;
    text-decoration: none;
    border-radius: 3px;
}

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

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

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

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

.Clamp_1{
    display: -webkit-box;
    -webkit-line-clamp: 1;/*表示行数*/
    -webkit-box-orient: vertical;
    overflow: hidden; 
}

/* リンク, フォーム、ボタン フォーカス */

.form-control,
.form-select {
    border: var(--form_border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--form_focus);
    box-shadow: none;
}

.btn:focus {
    box-shadow: none;
}

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

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

/* 
helper
ボーダー
*/
.Boder_R {
    border-right: var(--tbl_border);
}

/* 
helper
ページ名
*/
.PageTtl {
    font-size: 1.3rem;
    color: var(--strong_color);
}

/* 
helper
各所タイトル
*/
.Heading {
    font-size: 1rem;
    color: var(--strong_color);
    background: var(--heading_bg);
    padding: 0.6em 18px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.Heading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--accent_bg_color);
}

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

/* 
helper
小タイトル
フォーム等のタイトル
*/
.Form_Heading {
    font-size: 0.9rem;
    color: var(--strong_color);
    border-bottom: var(--tbl_border);
    padding-top: 0.5em;
    padding-bottom: 0.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: 0.7rem;
}

.Fs_SS {
    font-size: 0.8rem;
    margin-bottom: 3px;
}

.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(--submit);
}

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

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

.Text_LightGray {
    color: var(--nav_link_hover);
}

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

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

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

.form-check-input:active {
    filter: none;
    background: var(--frame_btn_hover);
}

.form-check-label{
    margin-top: 5px;
    transform: translateY(4px);
}
/* 
helper
display:grid;
*/
.D_grid_5_5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.D_grid_4_6 {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
}

.D_grid_3_7 {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
}

.D_grid_8_2 {
    display: grid;
    grid-template-columns: 0.8fr 0.2fr;
}

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

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

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

.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: 0.5em 0;
}

.Pulldown_List a,
.Pulldown_List button {
    display: block;
    padding: 0.5em 1em;
    color: var(--normal_color);
    width: 100%;
    justify-content: start;
    text-align: left;
}

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

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

/* -------------------------- */

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

.Alert i {
    position: absolute;
    top: 0.8rem;
    left: 0.5rem;
    font-size: 0.8rem;
}

/* その他アラート */
.Alert_Light {
    background-color: var(--base);
    border: 2px solid var(--disabled);
    color: var(--nav_bg);
}

.alert-info {
    color: var(--blue);
    background-color: var(--base);
    border: 2px solid var(--blue);
}

.alert-danger {
    color: var(--red);
    background-color: var(--base);
    border: 2px solid var(--red);
}

/* 
component
ボタン
*/
.btn {
    border-radius: 4px;
    transition: 0.3s;
    white-space: nowrap;
}

.Base_Btn {
    color: var(--link);
    font-weight: bold;
}

.Base_Btn:hover {
    color: var(--link);
    background: var(--frame_btn_hover);
}

.Base_Btn.Small {
    font-weight: 400;
    font-size: 0.8rem;
    padding: 0.2em 0.8em;
}

.Base_Btn.Small:focus {
    border: 1px solid var(--blue);
}

.Border_Btn {
    font-weight: bold;
    background-color: var(--base);
    border: var(--border_btn_border);
}

.Border_Btn.Thin {
    font-weight: Bold;
    font-size: 0.8rem;
    color: var(--normal_color);
    padding: 0.4em 0.8em;
    background-color: var(--base);
    border: var(--border_btn_border);
}

.Border_Btn.Thin:focus {
    border: 1px solid var(--form_focus);
}

.Border_Btn.Small {
    font-weight: 400;
    font-size: 0.8rem;
    padding: 0.2em 0.8em;
    background-color: var(--base);
    border: var(--border_btn_border);
}

.Border_Btn.Small:focus {
    border: 1px solid var(--form_focus);
}

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

.Action_Btn {
    color: var(--base);
    background: var(--action);
}

.Action_Btn:hover {
    background: var(--action_btn_hover);
}

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

.Submit_Btn:hover {
    background: var(--submit_btn_hover);
}

.Submit_Btn.Small {
    font-size: 0.8rem;
    padding: 0.2em 0.8em;
    font-weight: 400;
}

.Return_Btn {
    font-weight: bold;
    color: var(--blue);
    background-color: var(--base);
    border: solid 1px var(--blue);
}

/* 戻るボタン ホバー */
.Return_Btn:hover {
    color: var(--blue);
    background-color: var(--frame_btn_hover);
}

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

.Delete_Btn:hover {
    background: var(--delete_btn_hover);
}

.Delete_Btn:focus {
    border-color: var(--delete);
}

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

/* 
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: 0.8rem;
    margin-bottom: 0.8rem;
}

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

/* 
component
header
 */
.Header {
    height: 100vh;
    min-height: 670px;
    z-index: 100;
    bottom: 0;
    width: 200px;
    max-width: 200px;
    min-width: 150px;
    color: var(--nav_color);
    background: var(--nav_bg);
    position: relative;
    position: sticky;
    top: 0;
    left: 0;
    /* overflow-y: scroll; */
    letter-spacing: 0.03em;
}

/* ヘッダーロゴ */
.Header_Logo {
    width: 100%;
    height: 80px;
    margin-bottom: 0;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--header_logo);
    position: relative;
}

.Header_Logo::after {
    content: "";
    background: var(--header_logo);
    height: 28px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.Header_Logo a {
    color: var(--normal_color);
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-24px);
    animation: HeaderLogo_fadeIn 0.5s cubic-bezier(0, 0.55, 0.45, 1) 0s normal
        forwards;
}

@keyframes HeaderLogo_fadeIn {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ヘッダーログインユーザー */
.Header_User_Nav {
    padding: 0.9em 0.2em 0.9em 1.2em;
    background: var(--heading_bg);
    margin-bottom: 2px;
    color: var(--strong_color);
    position: relative;
}

.Header_User {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 0;
    font-size: 1rem;
    opacity: 0;
    transform: translateX(12px);
    animation: Header_User_fadeIn 0.4s cubic-bezier(0, 0.55, 0.45, 1) 0.3s
        normal forwards;
}

@keyframes Header_User_fadeIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.Header_User i {
    color: var(--light_blue);
    opacity: 0;
    transform: translateX(-8px);
    animation: Header_User_i_fadeIn 0.4s cubic-bezier(0, 0.55, 0.45, 1) 0.5s
        normal forwards;
}

@keyframes Header_User_i_fadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.Header li > a {
    display: block;
    color: var(--nav_color);
    padding: 0.5em 0.5em 0.5em 1.2em;
    border-radius: 4px;
    transition: 0.4s;
    margin-right: 6px;
    position: relative;
}

.Header li > a.Active {
    background: var(--nav_link_active);
    color: var(--lightgray1);
    position: relative;
    width: 103%;
    box-shadow: rgba(126, 201, 236, 0.2) 5px 5px,
        rgba(126, 201, 236, 0.1) 10px 10px, rgba(126, 201, 236, 0.05) 15px 15px;
}

.Header ul > li > a:hover {
    background: var(--nav_link_hover);
    color: var(--lightgray1);
    text-indent: 2px;
}

.Header ul > li > a:hover::before {
    content: "";
    height: 100%;
    width: 3px;
    border-radius: 5px;
    background: var(--nav_link_hover);
    position: absolute;
    top: 0;
    left: -8px;
}

.Header ul > li > a.Active::before {
    content: "";
    height: 100%;
    width: 3px;
    border-radius: 5px;
    background: var(--accent_bg_color);
    position: absolute;
    top: 0;
    left: -8px;
}

.Header li > a.Active:hover {
    background: var(--nav_link_active);
    text-indent: 0;
}

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

.Header_Main_Nav > ul {
    border-bottom: 1px solid var(--nav_border_color);
    padding: 6px 0;
    position: relative;
}

.Header_Main_Nav > ul::after {
    content: "";
    height: 1px;
    width: 5px;
    background: var(--border_accent_color);
    position: absolute;
    bottom: -1px;
    left: -8px;
}

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

/* 子ナビゲーションあり */
.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.55em 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: var(--nav_link_active);
    box-shadow: rgba(126, 201, 236, 0.2) 5px 5px, rgba(126, 201, 236, 0.1) 10px 10px, rgba(126, 201, 236, 0.05) 15px 15px;
}

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

/* 子ナビ */
.Header_Main_Nav > ul > li.With_Nav ul {
    position: absolute;
    left: calc(100% - 6px);
    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;
    /* box-shadow: rgba(126, 201, 236, 0.2) 5px 5px,
        rgba(126, 201, 236, 0.1) 10px 10px, rgba(126, 201, 236, 0.05) 15px 15px; */
    box-shadow: rgba(126, 201, 236, 0.2) 5px 5px 5px;
}

/* 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;
    animation: With_Nav_fadeIn 0.3s ease-out 0s normal forwards;
}

@keyframes With_Nav_fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.Header_Main_Nav > ul > li.With_Nav ul a {
    color: var(--normal_color);
    transition: 0.3s;
    margin: 0.5em 0.3em;
}

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

.Header_Main_Nav > ul > li.With_Nav ul a:hover::before {
    background: var(--light_blue);
    top: 3px;
    left: 4px;
    height: calc(100% - 6px);
}

.Header_Sub_Nav {
    padding: 0.2rem 0 0.3rem 0.5rem;
}

.Header_Sub_Nav > li > a {
    margin-bottom: 0.6em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.Header_Sub_Nav > li > a.Active {
    box-shadow: rgba(126, 201, 236, 0.2) 5px 5px;
}

.Header_Support_Nav {
    width: 100%;
    padding: 0 0 0.5rem 0.5rem;
    bottom: 0;
    left: 0;
    margin-bottom: 10px;
    position: relative;
}

.Header_Support_Nav > ul {
    padding: 10px 0;
    border-top: 1px solid var(--nav_border_color);
    border-bottom: 1px solid var(--nav_border_color);
    position: relative;
}

.Header_Support_Nav > ul::before {
    content: "";
    height: 1px;
    width: 5px;
    background: var(--border_accent_color);
    position: absolute;
    top: -1px;
    left: -8px;
}

.Header_Support_Nav > ul::after {
    content: "";
    height: 1px;
    width: 5px;
    background: var(--border_accent_color);
    position: absolute;
    bottom: -1px;
    left: -8px;
}

.Header_Support_Nav > ul > li > a {
    margin-top: 0.2em;
    margin-bottom: 0.3em;
}

.Header_Sub_Nav > li.With_Nav {
    position: relative;
}

.Header_Sub_Nav > li.With_Nav > a,
.Header_Sub_Nav > 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_Sub_Nav > li.With_Nav > div:hover,
.Header_Sub_Nav > li.With_Nav > div.Active {
    background: var(--nav_link_active);
    color: var(--lightgray1);
}

/* サブ子ナビ */
.Header_Sub_Nav > 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_Sub_Nav > li.With_Nav:hover ul,
.Header_Sub_Nav > li.With_Nav ul:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}

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

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

/* 
component
テーブル
 */

/* 見積書、請求書、納品書テーブル
 --------------------- */
.Transaction_Table {
    width: 100%;
}

/* テーブル thead */
.Transaction_Table > thead {
    border-bottom: var(--tbl_border);
    background-color: var(--base);
}

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

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

/* テーブル tbody td */
.Transaction_Table > tbody > tr {
    border-bottom: var(--tbl_border);
    transition: 0.3s;
}

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

/* テーブルステータス */
.Tbl_Status_Btn {
    font-size: 0.7rem;
    padding: 0.1em;
    border: var(--tbl_border);
    position: relative;
    border-radius: 0;
    width: 4.2rem;
}

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

.Tbl_Status_Btn > i {
    display: none;
}

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

/* チェックアイコン */
.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 0.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: 0.7rem;
    padding: 0.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: 0.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: 0.5rem;
}

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

.Tbl_Memo_Btn_Wrap {
    text-align: end;
    padding: 0rem 0.3rem 0.4rem 0.3rem;
    cursor: default;
}

/* 
component
テーブル
 */

/* 取引先テーブル
 --------------------- */
.Client_Table {
    width: 100%;
}

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

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

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

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

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

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

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

/* 備考欄・文書選択表示 */
.js_Tbl_Select_Show {
    position: relative;
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 0;
}

.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: 120%; */
}

.js_Tbl_Select_List li {
    display: block;
}

.js_Tbl_Select_List a,
.js_Tbl_Select_List button {
    display: block;
    padding: 0.5em 1em;
    color: var(--normal_color);
    text-align: left;
}

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

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

/* 
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: 0.5em 1em;
    border: none;
    width: 100%;
    background-color: var(--base);
    text-align: left;
}

.js_Csv_Select_List button:focus {
    border: none;
}

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

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

/*
component
タブ
 */
.Tabs_Wrap {
    border-bottom: var(--tbl_border);
}

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

.Tab {
    padding: 5px 10px;
    border-radius: 4px 4px 0 0;
    transition: 0.3s;
}

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

.Tab.Active {
    background: var(--nav_link_active);
    color: var(--base);
    border-radius: 4px 4px 0 0;
}

.Tab.Active .Tab_Btn {
    color: var(--base);
}

.Tab.Active .Tab_Btn:focus {
    border-color: transparent;
}

.Tab_Btn {
    font-size: 0.8rem;
    padding: 0.2em 0.9em;
    transition: 0s;
}

.Tab_Btn:hover,
.Tab_Btn:focus {
    box-shadow: none;
}

.Tab_Btn:focus {
    border-color: #fff;
}

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

.js_Panel.Show {
    display: block;
}

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

.Search_Form_Group select{
    padding: 0.2rem 0.4rem;
    min-width: 200px;
}
.Search_Form {
    padding: 0.2rem 0.4rem;
    width: 400px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.Search_Form.Textonly {
    padding: 0.2rem 0.4rem;
    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;
}
.form_Group.Radio label .Advanced_Search_Menu.Show {
    display: block;
}

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

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

textarea.form-control {
    padding: 0.2rem 0.4rem;
}

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

.form_Group label {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--strong_color);
    display: flex;
    margin-bottom: 3px;
    align-items: center;
}

.form_Group.Radio label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--strong_color);
    display: inline-block;
    margin-left: 1px;
    margin-top: 2px;
}

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

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

.form_Group label .Required {
    font-size: 0.7rem;
    font-weight: bold;
    display: inline-block;
    background-color: var(--red);
    color: var(--base);
    padding: 0 0.4em;
    margin-left: 3px;
    border-radius: 4px;
}

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

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

/* inputフォーカス時のドロップダウン */
.Form_Dropdown {
    background-color: var(--base);
    padding: 0;
    max-height: 400px;
    overflow-y: scroll;
    max-width: 460px;
    z-index: 6;
}

.Form_Dropdown > li > button {
    font-size: 0.9rem;
    padding: 0.8em;
    width: 100%;
    text-align: start;
    border-bottom: 1px dashed var(--blue);
    color: var(--strong_color);
}

.Form_Dropdown > li:last-of-type > button {
    border-bottom: none;
}

.Form_Dropdown > li {
    transition: 0.3s;
}

.Form_Dropdown > li:hover {
    background: var(--frame_btn_hover);
    color: var(--strong_color);
}

/* 銀行振込先フォーム設定 */
.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;
}

/* 
component
ページの下に表示する合計額
 */
.Total_Footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    /* max-width: 1400px; */
    width: 100%;
    background: var(--heading_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: var(--tbl_border);
}

.Items_Table thead th {
    background: var(--heading_bg);
    padding: 1rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--strong_color);
    border-right: var(--tbl_border);
}

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

.Items_Table thead tr th:first-of-type,
.Items_Table tbody tr td:first-of-type {
    border: solid 1px transparent;
    background-color: transparent;
    border-right: var(--tbl_border);
}

.Items_Table tbody tr td.BR_None:first-of-type{
    border-right: none;
}

.Items_Table tbody tr {
    position: relative;
    border-right: var(--tbl_border);
}

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

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

.Items_Table tbody tr .Row_Btns {
    /* position: absolute;
    left: calc(-1rem - 14px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px; */
}

.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: 0.5rem;
    height: 3.5rem;
    font-size: 0.9rem;
    color: var(--strong_color);
    border-left: var(--tbl_border);
    border-bottom: var(--tbl_border);
}

.Items_Table tbody td.None,
.Items_Table tbody tr.None {
    border: none;
    border-right: none!important;
}

.Items_Table tbody td.B_Top {
    border-top: var(--tbl_border);
}

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

.Items_Table input {
    height: 100%;
    width: 100%;
    border: 0;
    border-bottom: var(--dashed_border);
    padding: 0.5em 0.1rem;
}

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

.Items_Table td:last-of-type input {
    border: 0;
    border-bottom: none;
    border-radius: 4px;
    background-color: var(--lightgray1);
    padding: 0 0.3rem;
}

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

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

.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, 0.075);
}

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

#Tax_Total_TBody .d-flex p {
    width: 50%;
    text-align: start;
    margin-bottom: 0;
    padding: 0.5em 1rem;
}

#Tax_Total_TBody .d-flex input {
    width: 50%;
}

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

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

#AllItem_Subtitle_Tr_Wrap .Text_Disabled{
    color: #707070;
}

/* 
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: var(--tbl_border);
}

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

.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: var(--tbl_border);
    border-radius: 6px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 12;
    transition: opacity 0.4s;
}

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

.ModalA > .Modal_Body {
    min-height: 386px;
}

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

.ModalB > .Modal_Body {
    height: auto;
}

.ModalB .Submit_Btn {
    background: var(--action);
}

.ModalB .Submit_Btn:hover {
    background: var(--action_btn_hover);
}

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

.Modal_Header {
    padding: 0.5em 0.8em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--tbl_border);
}

.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: 0.7em 0.7em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: var(--heading_bg);
    border-top: 1px solid var(--layout_border);
}

.ModalB .Modal_Footer {
    background: var(--base);
}

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

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

/* ページ上部ナビゲーション */
#Page_Head_Nav {
    display: flex;
    align-items: start;
    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: var(--tbl_border);
    background: var(--heading_bg);
}

.Report_Tbl thead td {
    border-right: var(--tbl_border);
}

.Report_Tbl thead tr:nth-child(2) {
    border-bottom: var(--tbl_border);
}

.Report_Tbl thead th {
    padding: 0.2rem;
    border-right: var(--tbl_border);
}

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

.Report_Tbl tbody {
    border: var(--tbl_border);
}

.Report_Tbl tbody th,
.Report_Tbl tbody td {
    padding: 0.3rem;
    font-size: 0.9rem;
    border-right: var(--tbl_border);
}

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

.Report_Tbl tbody > tr:nth-child(2) {
    border-bottom: var(--tbl_border);
}

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

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

.Report_Tbl.Client tbody > tr {
    border-bottom: var(--tbl_border);
    background-color: var(--lightgray2);
}

.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;
    min-width: 500px;
    width: 500px;
    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: rgb(255, 189, 97);
}

/* 未入金グラフ */
.js_Notpayment_Graph {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: 0;
    background-color: var(--base);
    animation: slideIn 0.3s ease forwards;
}

.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;
    animation: slideOut 0.1s ease forwards;
}

.js_Notpayment_Hidden.Show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    animation: slideIn 0.2s ease forwards;
}

/* アニメーション */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0%);
    }
    to {
        opacity: 0;
        transform: translateY(30%);
    }
}

/* ページ別追加要素 */
/* 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;
}

#Client_Dell.Delete_Btn {
    font-size: 0.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;
    flex-shrink: 0;
}

.Info_Box dd {
    color: var(--strong_color);
    font-size: 0.9rem;
}

/* Document/Dealing_Items/Dealing_Items_List.php */

.One_Dealing_Item_List td > .form_Group {
    /* display: none; */
}

.One_Dealing_Item_List td > .form_Group.Min {
    max-width: 120px;
}

/* Document/Clients/Clients_Bulk_Add.php */

.svg_Template_Rules_Wrap * {
    font-size: 0.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: 0.8rem;
    padding: 0.4em;
}

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

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

aside {
    width: 100%;
}

/* カテゴリー 色 */
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プレビュー */

#PDF_Prev_Wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

/* 各種文書ページ以外の並び替え可能テーブル */

#Draggable_Table {
    width: 100%;
}

#Draggable_Table .borderless_th {
    border-bottom: none;
}

#Draggable_Table tbody tr {
    position: relative;
}

#Draggable_Table tbody tr .Row_Btns {
    position: absolute;
    left: calc(-1rem - 14px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
}

#Draggable_Table .Tr_Btn_Unit_Add_Form {
    border-bottom: none;
}

#Draggable_Table .Tr_Btn_Unit_Add_Form:hover {
    background-color: inherit;
}

#Draggable_Table .Tr_Btn_Unit_Add_Form td {
    padding: 0;
}

/* 税率別テーブル */

#Tax_Total_TBody input {
    border-bottom: none;
    padding: 0.5em 0.1rem;
}

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

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

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

/* ページネーション */

.Transaction_Table {
    position: relative;
}

.pagination-container {
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: 0;
    justify-content: end;
    position: absolute;
    top: calc(100% + 12px);
}

.Client_List_Table .pagination-container {
    top: calc(100% + 30px);
}

.pagination-container .pagination {
}

.pagination-container .page-item {
    margin: 0 2px;
}
.pagination-container .page-link {
    border: none;
    color: var(--link);
}

.pagination-container .page-link {
    border: none;
    color: var(--link);
    border-radius: 8px;
    border: solid 1px var(--disabled);
    padding: 4px 10px;
}

.page-item.number.nav-active .page-link {
    background: var(--nav_link_active);
    color: #ffffff;
}

.page-item.disabled .page-link {
    opacity: 0.6;
}

.page-item.first .page-link {
    border-radius: 8px;
}

.page-item.last .page-link {
    border-radius: 8px;
}

.PC_Tab_Only {
    display: none;
}

.Sp_Only {
    display: block;
}


.Client_List_Table .pagination-container{
    top: calc(100% + 32px);
}

/* ダッシュボード */

.Dash_Content_Wrap{
    border: solid 2px var(--disabled);
    border-radius: 8px;
    padding: 16px 16px;
    margin-bottom: 24px;
}

.Dash_Content_Wrap h3{
    font-size: 20px;
    margin-bottom: 16px;
}

.Dash_Content_Wrap h4{
    font-size: 14px;
    background-color: var(--blue);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    width: fit-content;
}

.Dash_Content_Wrap .Document_Vol{
    font-size: 40px;
}

.Dash_Content_Wrap .Document_Vol > span{
    font-size: 20px;
    margin-left: 4px;
    color: #707070;
}

/* Invoice */
.Invoice_Link {
    color: var(--link);
    font-weight: bold;
    position: relative;
    padding-left: 16px;
    font-size: .9rem;
}
.Invoice_Link::before {
    content: "";
    background: var(--link);
    height: calc(tan(60deg) * 10px / 2);
    width: 10px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin-block: auto;
    rotate: 90deg;
}
.Invoice_Mail {
    border-bottom: none;
    font-weight: bold;
}
.Invoice_Mail_Text {
    font-size: .9rem;
}

.sticky-top{
    z-index: 90!important;
}



/* レポートページ */

#ReportSearch_Wrap{
    background-color: var(--lightgray1);
    padding: 48px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.Report_Table_Wrap{
    width: 100%;
    overflow-x: scroll;
}

.Popup_Wrap {
    position: relative;
    display: inline-block;
}

.Popup_Btn {
    color: #707070;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.Popup_Content {
    position: absolute;
    bottom: -90%; /* 初期状態では非表示にする */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--base);
    color: var(--normal_color);
    padding: 10px;
    border: var(--form_border);
    border-radius: 5px;
    z-index: 1; /* ポップアップを他の要素の上に表示 */
    visibility: hidden; /* 初期状態では非表示にする */
    opacity: 0; /* 初期状態では透明にする */
    transition: visibility 0s, opacity 0.5s linear; /* フェードインのトランジション */
    width: 240px;
}

.Popup_Wrap:hover .Popup_Content {
    bottom: 100%; /* ボタンの真上に表示 */
    visibility: visible; /* ホバー時に表示 */
    opacity: 1; /* フェードイン */
}

/* グラフ */
#Chart_Wrap{
    max-width: 1024px;
    margin: auto;
    overflow: visible;
}

/* Clients_List */

#Client_List_Tbody a > small{
    display: block;
}


/* 自動作成予約宛名プレビュー */

#Post_Prev_Wrap{
    border: var(--tbl_border);
    padding: 16px 12px;
    color: #707070;
}

#Post_Prev_Wrap input:read-only{
    border: none;
    background-color: inherit;
    padding: 0;
    display: inline-block;
}

#Post_Prev_Wrap label{
    font-size: 14px;
}


/* 各種文書プレビュー */

#pdfViewer_Wrap{
    width: 100%;
    max-width: 800px;
    background-color: var(--disabled);
    padding: 24px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

#pdfViewer_Wrap > div{
    width: 100%;
    height: 100%;
    max-width: 720px;
}

#pdfViewer_Content{
    position: relative;
    width: 100%;
    padding-bottom: 141.479820627%;
    height: 0;
    overflow-y: scroll;
}

#pdfViewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#pdfViewer canvas {
    width: 100%;
    height: auto;
    border: solid 1px var(--disabled);
}



/* スクロールバーの全体のスタイル */
#pdfViewer_Content::-webkit-scrollbar {
    width: 1px; /* スクロールバーの幅 */
}

/* スクロールバーのトラック（背景）のスタイル */
#pdfViewer_Content::-webkit-scrollbar-track {
    background-color: rgba(0 0 0 / 0.00); /* トラックの色 */
    border-radius: 1px; /* トラックの角の丸み */
}

/* スクロールバーのつまみ（thumb）のスタイル */
#pdfViewer_Content::-webkit-scrollbar-thumb {
    background-color: rgba(0 0 0 / 0.00); /* つまみの色 */
    border-radius: 1px; /* つまみの角の丸み */
}

/* スクロールバーのつまみをホバーしたときのスタイル */
#pdfViewer_Content::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff; /* ホバー時のつまみの色 */
}


#Share_Content_Wrap {
    padding-bottom: 70px;
}

#Share_Footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-color: var(--heading_bg);
    display: flex;
    align-items: center;
    justify-content: end;
}

#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: var(--nav_border_color);
}
#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_Wra p{
    font-weight: normal;
    font-size: 14px;
}

/* 詳細ページ社内メモ */
.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;
}

/* ガイドライン */

#Btn_Guideline{
    position: fixed;
    top: 10px;
    right: 0;
    padding: 8px;
    border-radius: 16px 0 0 16px;
    color: var(--base);
    background-color: #cacaca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: 0.4s;
}

#Btn_Guideline:hover{
    text-decoration: none;
    opacity: 0.8;
}

:root {
    --tbw-cell-vertical-padding: 4px;
    --tbw-cell-horizontal-padding: 8px;
    --tbw-cell-line-height: 1.5em;
}

.rich-editor table {
    margin-bottom: var(--tbw-cell-line-height);
}

.rich-editor th,
.rich-editor td {
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
    border: 1px solid #e7eaec;
}

.trumbowyg-editor h1{
    font-size: 24px;
}

.trumbowyg-editor h2{
    font-size: 20px;
}

.trumbowyg-editor h3{
    font-size: 28px;
}

.trumbowyg-editor p{
    margin-bottom: 0px;
}