.local-font{
    color: blue;
}

.test-font{
    color:red;
}

.local-font,.test-font {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index:10000;
    font-size: 3em;
    font-weight: bold;
    pointer-events:none;
    opacity: 0.6;
}



/* ここは変えない */
.loader-area
,.processing-area{
	position: fixed;
	background: rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
	z-index: 1000;
}

/* ここは変えない */
.loader
,.processing {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}


/* 参考URL */
/* https://css-loaders.com/colorful/ */
/* 上記のサイトからコピーして下記に貼り付け start */
.loader {
  width: 60px;
  aspect-ratio: 1;
  border: 15px solid #ddd;
  border-radius: 50%;
  position: relative;
  /* transform: rotate(45deg); */
}
.loader::before {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 15px solid #514b82;
  animation: l18 2s infinite linear;
}
@keyframes l18 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}


.processing {
  height: 4px;
  width: 130px;
  --c:no-repeat linear-gradient(#6100ee 0 0);
  background: var(--c),var(--c),#d7b8fc;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

/* 上記のサイトからコピーして下記に貼り付け end */




/* メニュー内のタイトル */
.menu h6{
    font-weight: bold;
}

/* メインコンテンツ（左側） */
.main {
    background-color: #fff; /* 左側の背景色 */
    height: auto;
    padding: 10px; /* 内側の余白 */
}

/* メニューアイテム（右側） */
.menu {
    background-color: #f0f8ff; /* 右側の背景色 */
    height: auto;
}

/* メニューアイテムリスト */
ul {
    padding-inline-start: 15px;
    list-style: none; /* リストのマーカーを削除 */
}

/* メニューアイテムの文字サイズとアンダーラインの追加 */
.menu ul li {
    font-size: 16px;
    margin-bottom: 10px;
    position: relative;
}

.menu ul li::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: lightgray; /* アンダーラインの色 */
}



/* メインコンテンツ デポ名 */
.depo_name {
    font-size: 20px;
    font-weight: bold;
}

/* メインコンテンツ 基本フォント */
.depo_comment {
    font-size: 1em;
    color: gray; /* アンダーラインの色 */
}

.screen-title{
    width: 100%;        
    text-align: center;
    margin: 3px;
    padding: 3px;
}

.operation-table{
    min-width: 100%;
}

.operation-table tr{
    
}

.operation-table th{
    padding: 3px 0;
    text-align: right;
    vertical-align: middle;  
    white-space: nowrap;      
}

.operation-table td{
    padding: 3px 0;
    text-align: left;
    vertical-align: middle;                
}

/* モーダル内のテーブルのスクロール可能領域 */
.mobile_result_area table {
    width: 100%; /* テーブルの幅を100%に設定 */
    max-height: 300px; /* 適切な高さに設定してください */
    overflow-y: auto; /* 縦方向にスクロール可能にする */
}

/* 商品コード検索横にある検索ボタン 横並びにするため*/
#product_cd {
  float: left;
}