@charset "UTF-8";

/* 重要な部分 */
.sidebar{
    max-width: 180px;
    min-width: 180px;
}

/* 見栄え */
.sidebar{
    /* background-color: #0d6efdc9; */
    background-color:#E0EBF8;
    color: white;
}
.sidebar .brand{
    /* background-color: #0d6efdc9; */
    background-color:#E0EBF8;
    color: #0E2438;
}
.sidebar .nav-link{
    /* background-color: rgba(255, 255, 255, 0.493); */
    background-color: #9DC3E6;
    color: #0E2438;
}
.sidebar .nav-link2{
    background-color:#E0EBF8;
    color: #0E2438;
    text-decoration: none;
    
}
/* サイドバーnav-link2　ホバー時 */

.sidebar .nav-link2:hover{
    text-decoration: underline;
}

/* .fs-7{
	font-size: 0.85rem;
	} */
/* アニメーション */
main{
    transition: 0.6s all ease;
}

main.sidebar-hidden {
    margin-left: -180px;
}

main.no-transition {
    transition: none !important;
}

/* サイドバー */
#sidebar {
    position: absolute; /* 固定位置 */
    top: 0; /* 上端に配置 */
    left: 0;    /* 左端に配置 */
    height: 100%;   /* 画面の高さに合わせる */
    width: 180px;   /* サイドバーの幅 */
    transition: transform 0.6s ease;    /* スライドアニメーション */
    transform: translateX(0); /* 初期状態（表示） */
    /*z-index: 1000;  /* 他の要素より前面に表示 */
    overflow-y: auto; /* 縦スクロールを有効にする */
}

/* サイドバー非表示時 */
#sidebar.hidden {
    transform: translateX(-100%); /* 非表示状態（左にスライド） */
}

/* ページ全体のコンテンツ */
.page-wrapper {
    padding-left: 180px; /* サイドバーの幅分 */
    transition: padding-left 0.6s ease; /* アニメーション */

}

/* サイドバーが隠れたときのスタイル */
.page-wrapper.sidebar-hidden {
    padding-left: 0;    /* サイドバーが隠れたとき */
}

.page-wrapper.sidebar-hidden .page-content {
  margin-left: 0 !important;
}
#sidebar.no-transition {
  transition: none !important;
}
.page-wrapper.no-transition {
  transition: none !important;
}
/* ボタンのスタイル */
.btn-blue {
  background-color:#1F4E79;
    color:white;
    padding-left:3rem;
    padding-right:3rem;
}

.btn-blue:hover,.btn-blue:active,.btn-blue:focus {
  background-color:#0070C0 !important; 
    color:white !important;
}

.btn-clear {
  background-color:#9AB2DE;
    color:white;
    padding-left:2.5rem;
    padding-right:2.5rem;
}

.btn-clear:hover,.btn-clear:active,.btn-clear:focus {
  background-color:#377dff !important; 
    color:white !important;
}

/* 危険ボタンのスタイル */
.btn-danger {
  background-color:#843C0C;
    color:white;
    padding-left:2.5rem;
    padding-right:2.5rem;
}

/* キャンセルボタンのスタイル */
.btn-cancel {
  background-color:#840c0c;
    color:white;
    padding-left:2.5rem;
    padding-right:2.5rem;
}

.btn-cancel:hover,.btn-cancel:active,.btn-cancel:focus {
  background-color:#c92222 !important; 
    color:white !important;
}


#file-list-invoice li,
#file-list-other li {
    display: flex;
    justify-content: flex-start; /* 左寄せで並べる */
    align-items: center;
    gap: 0.1rem; /* テキストとボタンの間隔を調整 */
    margin-bottom: 0.3rem;
}

#file-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}


.btn-x-del{
    background-color: #9c9c9c;
    color: white;
    
    width: 1rem;
    height: 1rem;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    
    font-size: 0.7rem;      /* 小さめに調整 */
    line-height: 1rem;      /* 高さと同じにする */

    border-radius: 0 !important; /* ← 角丸を完全に消す */
}

.btn-x-del:hover,.btn-x-del:active,.btn-x-del:focus{
    background-color: #5f5f5f;
    color: white;
}

.btn-gray {
  background-color:#b2b5b8;
    color:rgb(70, 70, 70);
    padding-left:1rem;
    padding-right:1rem;
}
.btn-gray:hover,.btn-gray:active,.btn-gray:focus {
  background-color:#4b4f52 !important; 
    color:white !important;
}

/* ログイン画面 */
.login-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    padding-left: 0 !important;
}

/* ログインボックスのスタイル */
.login-box {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* お知らせ画面 */
.notice-container {
    width: 50%; /* 幅を狭く（必要に応じて調整） */
    min-width: 200px;
}

/* お知らせテキストエリアのスタイル */
.notice-box {
    background-color: #ffffff !important; /* 白背景 */
    border: 1px solid #ced4da;
    color: #0070C0;
    resize: none;
    box-shadow: none;
    height: 400px; /* 高さを明示的に指定（rowsでもOK） */
    overflow-x: auto; /* 内容が多い場合にスクロール可能に */
    overflow-y: auto; /* 縦スクロールも有効にする */
    white-space: pre; /* 改行と空白をそのまま表示 */

}

/* フォーカス時のスタイル調整 */
.notice-box:focus {
    outline: none;
    box-shadow: none;
    border-color: #ced4da;
    background-color: #ffffff !important;
    color: #0070C0 !important;
}


.text-blue {
    color: #0070C0; 
}



.text-blue-under{
    color: #0070C0;
    text-decoration: underline;
    text-decoration-color: #0070C0;
}

.text-white-under{
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #ffffff;
}
.text-white-under:hover{
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #ffffff;
}
 
.text-blue-under:hover{
    color: #014677;
    text-decoration: underline;
    text-decoration-color: #014677;
}

.text-blue-title{
    color: #0070C0;
    font-size: 2rem;   
}

.area-kensaku{
    background-color: #DDEBF7;
    width:100%;
    padding: 1.5rem !important;
    margin:0;
    display: flex;
    justify-content: flex-start;
}

.area-kensaku form {
    max-width: 1200px;
    width: 100%;
}

.area-kensaku .kensaku-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start; 
    align-items: center;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}


.table-bordered{
    width:100%;
    margin:0;
}

table.table.table-bordered {
    border-collapse: collapse !important;
    border: 1px solid #777575 !important;
}

table.table.table-bordered th,
table.table.table-bordered td {
    border: 1px solid #777575 !important;
    height: 2rem;
    padding: 0.2em !important;
    padding-top: 0.2em !important;
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
    white-space: nowrap !important;       /* 改行しない */
    overflow: hidden !important;          /* はみ出した部分を隠す */
    text-overflow: ellipsis !important;   /* 省略記号（...）を表示する */

}


table.table.table-bordered th{
    text-align: center !important;
}


.table-firstrow th {
    background-color: #1F4E79;
    color:#ffffff;
    font-weight: normal !important;
}

/* .table-firstrow  {
    background-color: #1F4E79!important;
    color:#ffffff!important;
    font-weight: normal !important;
} */

.input-kensaku{
    height:100% !important;
}

.table-toroku {
    max-width: 50% !important;
}
.table-toroku th{
    background-color: #e6e6e7 !important;
    color: #0000CC !important;
    font-weight: normal !important;
    white-space: nowrap;
}

.td-toroku{
    background-color: #e6e6e7 !important;
    color: #0000CC !important;
    width: 20%;
}

.table-toroku td{
    vertical-align: middle;
}

.tr-tenpu{
    height:5rem !important;
}



/* table-toroku のデザインを継承しつつ、幅固定を追加 */
.table-toroku.table-fixed {
  table-layout: fixed;
  width: 100%;
  max-width: 90% !important;
}

.table-toroku.table-fixed th.label-fixed {
  width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination{
    line-height: 1.2;
    text-align: center !important;
}

/* パンくずリスト */
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\FF1E" !important; /* 全角 ＞ */
    padding: 0 0.5em !important;
    color: #6c757d !important;
    font-size: 1rem !important
}



table.table.table-bordered.table-toroku.table-fixed td,
table.table.table-bordered.table-toroku.table-fixed th {
  height: 1.23rem !important;
  line-height: 1.23rem !important;
}



/* table-toroku の padding-y を大きくする限定クラス */
/* 請求書登録画面専用の padding-y 拡張 */
.table-bordered.table-toroku.py-large td,
.table-bordered.table-toroku.py-large th {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}



/* 請求日ブロックの高さを固定 */
.area-kensaku .d-flex.align-items-start.w-100 {
    height: 40px; /* 必要に応じて調整 */
    display: flex;
    align-items: center;
}

/* inputとカレンダーアイコンの高さを統一 */
.area-kensaku input.form-control,
.area-kensaku .input-group-text {
    height: 32px;
    display: flex;
    align-items: center;
}

/* 「～」を中央揃え */
.area-kensaku span.mx-1 {
    display: flex;
    align-items: center;
}


input::placeholder {
    color: #c0c0c0 !important; 
}

textarea::placeholder {
    color: #c0c0c0 !important; 
}

.dragover {
  background-color: #cfe5f8 !important;
  border: 1px solid rgb(122, 138, 189) !important;
}

.btn-select-company {
  background-color:  #1F4E79 !important;
  color: white !important;
  padding: 0.5rem 1rem !important; 
  display: inline-block !important;
  width: 350px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.btn-select-company:hover,
.btn-select-company:active,
.btn-select-company:focus {
  background-color: #3366CC !important;
  color: white !important;
}