/* 基本仕様 */
/*  */
/* 
対応機種:PCのみ
対応px数： 1280*720 px以上
max-width:768px以上

*/
/* body{
    min-height:720px;
	min-width:1300px;
} */

/* 共通仕様 */
.gray-row{
    background-color: #999999 !important;
}
.h-header{
    height: 50px;
}
.h-main{
    /* ヘッダー分引く */
    height: calc(100% - 50px) 
}
.h-titlebar{
    height: 45px;
    width: 100%;
}
.content-1{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
}
.mgb-10{
    margin-bottom: 10px;
}
.d-flex-1{
    display: flex;
}
.d-block{
    display: block;
}
.d-none{
    display: none;
}
.d-inline{
    display: inline;
}
.p-relative{
    position: relative;
}
.p-absolute{
    position: absolute;
}
.p-sticky{
    position: sticky;
    top: 0;
}
.p-fixed{
    position: fixed;
    top: 0;
}
.nowrap{
    white-space: nowrap;
}
.z-index{
    z-index: 3;
}
.z-index-1{
    z-index: 1;
}
.m-center{
    margin-right: auto;
    margin-left: auto;
}
.m-left{
    margin-left: 40%;
    margin-right: auto;
}
.ms-left-47{
    margin-left: 47.5%;
    margin-right: auto;
}
.m-50{
    margin-right: 50px;
}
.w-date{
    /* yyyy-mm-dd    が収まる範囲 */
    max-width: 140px; 
}
.w-search-code{
    /* int (11) が収まる範囲*/
    max-width: 140px; 
}
.w-search-num{
    /* int (9) が収まる範囲*/
    max-width: 110px; 
}
.w-code{
    /* int (11) が収まる範囲*/
    max-width: 140px;
}
.w-220p{
    width: 220px;
}
.w-850p{
    width: 850px;
}
.w-cl-200p{
    max-width: calc(100% - 200px);
}
.w-calc-230p{
    width: calc(100% - 230px);
}
.wm-50p{
    /* int(2) が収まる範囲*/
    max-width: 50px;
}
.wm-65p{
    /* int(4) が収まる範囲*/
    max-width: 65px;
}
.wm-100p{
    /* varchar(5) が収まる範囲*/
    max-width: 100px;
}
.w-10{
    width: 10%;
}
.w-15{
    width: 15%;
}
.w-20{
    width: 20%;
}
.w-72{
    width: 72%;
}
.w-90{
    width: 90%;
}
.w-60p{
    width: 60px;
}
.w-100p{
    width: 100px;
}
.w-140p{
    width: 140px;
}
.w-400p{
    width: 400px;
}
.w-880p{
    width: 880px;
}
.h-50{
    height: 50%;
}
.h-60{
    height: 60%;
}
.pad-right-0{
    padding-right:0;
}
.pad-left-0{
    padding-left: 0;
}
.t-center{
    text-align: center;
}
.textr{
    text-align: right;
}
.textc{
    text-align: center;
}
.textl{
    text-align: left;
}



.flo-left{
    float:left;
}
.flo-right{
    float:right;
}
/* error design  　bootstrap のvalidationをうまく扱いきれないため　参考にして新しく作る*/ 
.required{
    font-weight: 400;
    font-size: 14px;
    color: #dc3545;
}
.error-text{
    width: 100%;
    font-size: 0.875em;
    color: #dc3545;
}

/* delete color*/
.colorDel{
    background-color:#adadad;
}
/* header basedesign */
header{
    height: 50px;
    box-shadow: 0px 0px 5px 0px hsla(0, 0%, 7%, 0.3);
    color:white;
    background-color: #0074f0;
    
  }
.header-link{
    /* 配置 */
    text-align: center;
    /* 大きさ */
    width: 100%;
    min-width: 50px;
    max-width: 200px;
    /* 色 */
    color:white;  
    /* そのほか */
    border-radius: 10%;  /*角を丸くする*/
   
}
.header-link:hover {
    color:#0074f0;
    background-color:white;
}
/* header basedesign end*/
/* side menu */
/* 大きい順に入れ子順に 優先順位のため */
.side-menu{
    background: #e2e2e2;
    /* height: calc(100vh - (3.5rem + 1px)); */
}
.side-menu > ul{
    width: 230px;
}
.side-menu > ul> li{
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;   /*色が変わる速度*/
}
.side-menu > ul> li:hover {
    background: #d1d1d1;   
}
/* サブメニューは通常非表示 */
.side-submenu{
    width:230px;
    top:0px;
    left:90%;
    background-color: #d1d1d1 ;
    display:none;
}
.side-submenu:hover{
    background: #0074f0;
}
.side-menu > ul> li:hover .side-submenu{
    background: #d1d1d1;
    display:block;   
}
/* サブメニューのリストを指定 */
.side-submenu >li{ 
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;   /*色が変わる速度*/
}
.side-submenu >li:hover{
    background-color:#c1c1c1;
}

.side-menu-link{
    width:100%;
    color:black;
}
.side-submenu-link{
    width:100%;
    color:black; 
}
.side-menu > ul> li:hover .side-menu-link,.side-submenu-link{
    color:black;   
}

/* side menu end */
/* スライドしてサブメニューを表示 */

/* main content */

/* title  tab サイドメニューのさらに深い階層を表示する*/
.title{
    width:95%;
    margin-right: auto;
    margin-left: auto;
}
.title-list{
    color: #41464b;
  background-color: #e2e3e5;
}
.title-list-select{
    color: #41464b;
    background-color: #cbccce;
}
.title-list:hover{
    color: #41464b;
    background-color: #cbccce;
}
.title-a{
    color: #000000;
    white-space: nowrap;
}

/* .title-tab-link{
    width: 250px;
    height: 30px;
    color:black;
    text-decoration: none;
    padding: 3px 20px;
    border: 1px;
    /* border-radius: 8px; */
    /* background: #e2e2e2;
    color: #000000;
    white-space: nowrap;
}
.title-tab-link-select{
    width: 250px;
    height: 30px;
    color:black;
    text-decoration: none;
    padding: 3px 20px;
    border: 1px;
    /* border-radius: 8px; */
    /* background: #5b5b5b;
    color: #ffffff;
    white-space: nowrap;
}
.title-tab-link-select:hover{
    color: #ffffff;
} */ 
.base-box{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #000000;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.csv-box{
    width: 95%;
    height:calc(100% - 10%);
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #000000;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.customer-box{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #000000;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* search form 検索フォーム*/
.search-form-box{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.search-form-detail-box{
    width: 100%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    /* border-top: solid 5px #5d627b; */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.search-form-box-new{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: 20px;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.search-form-label{
    padding: 0.375rem 0.75rem;    	
    white-space: nowrap;
}

/* new-regist 新規登録ボタン */

.new-regist{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
}
/* sales-form-box 売上伝票入力フォーム */
.sales-form-box{
    width: 95%;
    height:calc(100% - 150px) ;  /**titlebar=45px,search-form-box=67pxの高さを引く+ちょいあわせ*/
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.sales-form-h{
    height: calc(100% - 120px);
}
/* wetTowel-form-box　おしぼり本数一覧 */
.wetTowel-form-box{
    width: 95%;
    height:calc(100% - 300px) ;  /**titlebar=45px,search-form-box=67pxの高さを引く+ちょいあわせ*/
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* wetTowelEntry-form-box　おしぼり本数入力 */
.wetTowelEntry-form-box{
    width: 95%;
    height:calc(100% - 50px) ;  /**titlebar=45px,search-form-box=67pxの高さを引く+ちょいあわせ*/
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.wetTowelEntry-form-h{
    height: calc(100% - 120px);
}
/* staff-form-box 担当者一覧 */
.staff-form-box{
    width: 95%;
    height:calc(100% - 220px) ;  /**titlebar=45px,search-form-box=67pxの高さを引く+ちょいあわせ*/
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* staffentry-form-box 担当者登録 */
.staffentry-form-box{
    width: 95%;
    height:calc(100% - 100px) ;  
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.staffentry-form-h{
    height:calc(100% - 75px) ;
}
/* towel-form-box マスター得意先別おしぼり設定 */
.towel-form-box{
    width: 95%;
    height:calc(100% - 340px) ;  /*いい感じに調整*/
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}
/* customer-form-box 得意先一覧 */
.customer-form-box{
    width: 95%;
    height:calc(100% - 325px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* customerdetail-form-box 得意先登録 */
.customerdetail-form-box{
    width: 95%;
    height:calc(100% - 100px) ;  
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.customerdetail-form-h{
    height:calc(100% - 50px) ;
}
/* cusotomerItem-box */
.customerItem-box{
    width: 95%;
    height:calc(100% - 70%) ;  
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* cusotomerItem-box2 */
.customerItem-box2{
    width: 95%;
    height:calc(100% - 70%) ;  
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* item-form-box 商品一覧 */
.item-form-box{
    width: 95%;
    height:calc(100% - 280px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* customerdetail-form-box 商品登録 */
.itemdetail-form-box{
    width: 95%;
    height:calc(100% - 100px) ;  
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.itemdetail-form-h{
    height:calc(100% - 55px) ;
}
.img_list {
  list-style-type: none;
  display: flex;
}
.img_list li {
  margin-right: 20px;
}
.item_thumb img {
    width: 200px;
    /*object-fit: cover;
    aspect-ratio: 16 / 9;*/
    margin: 10px 0;
}
.Img_width img {
    width: 300px;
}
/* deliveryRoute-box　配達経路一覧　マスタ */

/* deliveryRoute-box　配達経路一覧　マスタ */
.deliveryRoute-box{
    width: 95%;
    height:calc(100% - 265px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* item-detail-box 商品登録 */
.item-detail-box{
    width: 95%;
    height:calc(100% - 100px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* stock 仕入在庫一覧 */
.stock-box{
	width: 95%;
	height:calc(100% - 292px);
	padding: 0.5em 1em;
	margin-right: auto;
	margin-left: auto;
	margin-bottom:20px;
	color: #000000;
	background: white;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* billoutput 請求明細問合せ */
.bill-box{
    width: 95%;
    height:calc(100% - 280px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* billoutput 請求書発行 */
.billoutput-box{
    width: 95%;
    height:calc(100% - 460px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.payslip-box{
    width: 95%;
    height:calc(100% - 460px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: 20px;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/*  table-summary 一覧表 */

table tr:nth-child(even) td {
    background-color:#eaf5ff;
}
table th{
    background-color:#cfe2ff;
}

.thCoR3 {
    background-color:#eaf5ff;
}

.table-th-color{
    background-color:#cfe2ff;
}
.table-summary{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
}
.table-scroll-190{
    height: calc(100% - 190px);
	overflow: auto;
}
.table-scroll-220{
    height: calc(100% - 220px);
	overflow: auto;
}
.table-scroll-130{
    height: calc(100% - 130px);
	overflow: auto;
}
.table-scroll-10{
    height: calc(100% - 90%);
	overflow: auto;
}
.table-scroll-50{
    height: 50%;
	overflow: auto;
}
.table-scroll-55{
    height: 55%;
	overflow: auto;
}
.table-scroll-65{
    height: 65%;
	overflow: auto;
}
.table-scroll-75{
    height: 75%;
	overflow: auto;
}
.table-scroll-100{
    height: 100%;
	overflow: auto;
}
.thCo2{
    background-color:#2316d3;
    color:white;
}
.thCo{
    background-color:#dbdbdb;
}
.thCoR{
    background-color: #e7e5ff;
}
.t-block{
    display: block;
}
.main {
    transition: 0.3s all ease;
}
/* detail-form-box */

.detail-form-box{
    width: 95%;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}
.bill-form-box{
    width: 95%;
    height:calc(100% - 230px) ;
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:20px;
    color: #000000;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

/* modal-window  モーダルの編集フォームとかもここ*/
/* .modal-open{
    display: block;
}
.modal-close{
    display: block;
} */
.modal-window{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    display: none;
}
.modal-window.open{  /* modal-openを押したときの処理 */
    opacity: 1;
    visibility: inherit;
    display: block;
}
.modal-position{
    /* 画面中央に配置 */
    position: absolute;
    top: 50%;  
    left: 50%;
    width:90%;
    height: 90%;
    background-color: #f8f9fa; 
    transform: translate(-50%,-50%)
}
.Common-modal-hide{
    opacity: 0;
    visibility: hidden;
    display: none;
}
.Common-modal-window{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    z-index: 1900;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: inherit;
    display: block;
}
.modal-scroll{
    height: 90%;
    overflow: auto;
}

.staff-modal-form-h {
    height: calc(100% - 90px);
}
.select-box{
    width:100%;
    height:calc(100% - 36px);
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);   
}
.customerWetTowel-box{
    width: 95%;
    height:calc(100% - 190px);
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}
.customerWetTowel-box2{
    height: calc(100% - 70px);
    margin-bottom: 20px;
}
.customerWetTowel-form-box{
    width: 95%;
    height:calc(100% - 0px);
    padding: 0.5em 1em;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:10px;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 
}
.customerWetTowel-form-h{
    height: calc(100% - 50px);/*追加、閉じるボタン分ちぢめる*/
}
.chart{
/* グラフの箱つくろうとしたが、classが適応されない */
    width: 95%;
    height:300px;
    margin-right:10px;
    margin-left:10px;
}
.loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    background-image: url(/img/load.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: 150px 150px;
    z-index: 3000;
  }

/* potal.css 導入時追加css */

.a_dec{text-decoration: none;}

.color_white{color: white;}

/* サブメニューは通常非表示 */
.submenu_move:hover .submenu_3{
    opacity: 1;
    transform: translateX(100%); /* ヘッダーの右端に移動 */
    visibility: visible;
}
.submenu_3{
    width : 230px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: #d1d1d1;

}

.has-submenu {
    position: relative;
}

.submenu {
    position: absolute;
    top: 0;
    left: 40%; /* 親要素の右端に配置 */
    display: none;
    background-color: #d1d1d1;
    z-index: 1900;
}

.has-submenu:hover .submenu {
    display: block;
}

/* サブメニューのリストを指定 */
.submenu_3 >li{ 
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;   /*色が変わる速度*/
}
.submenu_3 >li:hover{
    background-color:#c1c1c1;
}
.submenu_add_hover-link{
    width:100%;
    color:black;
}
@media (max-width: 768px) {
    /* 768px以下の場合のスタイルを定義する */
  }



.barColor{
    background-color: #e7e9ed;
}