@charset "UTF-8";

/*header用マージン(通常)*/
.m-header{
  padding-top: 485px;
}
/*header用マージン(担当者名なし)*/
.m-header2{
  padding-top: 322px;
}
/*header用マージン(担当者名なし)*/
.m-header3{
  padding-top: 214px;
}
/*通常決済*/
.footer-color{
  background-color: #3353D0;
  margin-top: 100px;
}
/*キャンペーン決済*/
.footer-color-cam{
  background-color: #F9832E;
  margin-top: 100px;
}
/*画面名(通常決済・青)*/
.title {
  background-color: #C9D6FB; 
  margin-bottom: px; 
}
/*画面明（キャンペーン決済・オレンジ）*/
.titleCamp{
  background-color: #ffcda9; 
}
/*画面名（入金処理・ターコイズ）*/
.titlePayment{
  background-color: #d0faef; 
}
/*画面名（移動登録　暗めの緑）*/
.titleMove{
  background-color: #90c3cf;
}
/*画面名（仮予約　明るい緑）*/
.titleReserve{
  background-color: #BBF1C1;
}
.titleFont {
  font-size: 3em;
  font-weight: bold;
  margin-left: 3%;
}

/*各画面の四角*/
/*コンテンツ周りの枠線*/
.bord {
  border-style: solid; 
  margin: 3%;
  border-color: gainsboro;
}

/*コンテンツと枠線の間隔*/
.contents {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

/*検索*/
/*入力フォームの大きさ*/
.input {
  width: 65%;
  font-size:2.8em;
}

/*検索対象の大きさ*/
.subject {
  text-align: left;
  font-size:2.8em; 
  width: 34%;
}

/*検索対象が複数ある場合の間隔*/
.interval {
  margin-top: 10%;
}

/*ボタン中央揃え*/
.btns {
  text-align: center;
}

/*ヘッダー*/
.btnLogout{
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#808693 50%, #b9c4c8 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #525353;
  border-radius: 40px;
}

.chosenClient{
  margin-top: 100px;
  font-size: 3em;
  margin-left: 100px;
  margin-right: 50px;
}
.menuFont{
  font-size:3em;
  text-align: center;
  color: white;
}
/*通常決済メニュー*/
.menuBar{
  padding:0;
  background-color:#3353D0;
}
/*キャンペーン決済メニュー*/
.menuBar-cam{
  padding:0;
  background-color:#F9832E;
}
/*入金処理メニュー*/
.menuBar-payment{
  padding:0;
  background-color:#71c9d1;
}
/*移動登録メニュー*/
.menuBar-move{
   padding:0;
  background-color:#1e7f94;
}
/*仮予約メニュー*/
.menuBar-reserve{
  padding:0;
  background-color:#26BC34;
}

.menuOnlyBar{
  margin-top: 100px;
  padding:0;
  background-color:#3353D0;
}
/*キャンペーン決済メニュー*/
.menuBarCamp{
  padding:0;
  background-color:#f87132;
}
.menuOnlyBarCamp{
  margin-top: 100px;
  padding:0;
  background-color:#f87132;
}
.container-fluid{
  padding-right: 0px;
  padding-left:0px ;
}

/*情報内容*/
.information {
  text-align: left;
  font-size: 2.8em;
  width: 50%;
  
} 

/* モーダルフォント */
.modalFont{
	font-size : 1.3em;
}


/* モーダルフォント */
.modalMsgFont{
	font-size : 1.2em;
}
/* モーダルフォント */
.errMsgFont{
	font-size : 2.5em;
}

/*inputBox枠*/
.inputLine{
  border: solid;
  border-color: gainsboro;
}

/*顧客詳細、商品ポップアップなど*/
/*情報カテゴリ*/
.cate {
  text-align: left;
  font-size:2.8em; 
  width: 45%;
}

/*間隔*/
.top {
  margin-top: 5%;
}

/*情報詳細*/
.info {
  text-align: left;
  width:50%; 
  font-size: 2.8em; 
}

/*住所用、〒に合わせるため上寄せ*/
.address {
  text-align: left;
  font-size:2.8em; 
  width: 45%;
  vertical-align: top;
}

/*売上日、売上日入力のdiv*/
.sales {
  margin-right: 3%; 
  margin-bottom: 100px;

  /*flexbox*/
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

/*売上日と売上日入力の位置指定*/
.sales div:first-of-type {
  margin-left: 19.5%;
}
.sales div:last-of-type {
  margin-left: auto;
}

/*売上日入力の大きさ*/
.saleDay {
  text-align: left;
  font-size:2.8em; 
  width: 45%;
  padding-top: 10% !important;
}

/*見た目を綺麗にするためにコンテンツを少し左寄せにする*/
.contentsLeft {
  margin-right: 5%;
  margin-left:5%;
}

/*〒、ふりがなと下の幅を狭める*/
.ruby {
  display: block;
  content: "";
  height: 1px;
}

/**************************宛名選択レイアウト****************************/
/*ラジオボタンインライン*/
.inlineRadio {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #b6b6b6; 
  height:180px;
}

/*各項目の区画*/
.invoiceCustomerNameSection {
  position: relative; 
  flex: 1;
}

/*値保持用の非表示ラジオボタン*/
input[name="invoice_customer_type"] {
  display: none
}

/*各宛名ラジオボタン*/
input[name="invoice_customer_name"] {
  width: 100%;
  height: 100%;
  opacity: 0;
}

/*各宛名ラベル*/
.invoiceCustomerNameLabel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #b6b6b6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-right: 1px solid #b6b6b6;
  font-size: 2.0em;
}

/*任意入力テキストボックス*/
input[name="optional_customer_name"] {
  height:60px; 
  width:350px; 
  font-size: 200%
}

/*チェック状態：決済・履歴（通常）*/
.invoiceCustomerName:checked + label{
  background: #9BB3E9;
  color: #fff;
 }

/*チェック状態：決済・履歴（キャンペーン））*/
.invoiceCustomerNameCamp:checked + label{
  background: #F9832E;
  color: #fff;
}

/*チェック状態：入金処理）*/
.invoiceCustomerNamePayment:checked + label{
  background: #52bdc7;
  color: #fff;
}

/******************************色********************************/
/*通常決済light*/
.fontBlue{
  color: #1c3ec2;
}
.backBlueL{
 background-color: #dee5f9; 
}
.blueBLine{
  border-bottom-style: solid;
  border-color: #C9D6FB;
}
.fontCamp{
  color: #f86700;
}

/*キャンペーン決済light*/
.backCampL{
 background-color: #fbdac2;
}
/******************************Login画面********************************/
.loginLogo{
  margin-top: 10%;
  margin-left:20px;
  margin-bottom: 8%;
  text-align:left;
}
.card{
  margin-left: 20px;
  margin-right: 20px;
}
.card-body{
  padding-bottom: 50px;
  margin-top: 30px;
  margin-right: 10px;
  margin-left: 10px;
}
.loginTitle{
  color: #3353D0;
  font-size:x-large;
  font-weight: bold;
  text-align: center;
  margin-top: -30px;
  margin-bottom: 30px; 
  font-size: 3em;

}
.loginFont{
  font-size:2.8em;
  color: #3366CC;
  font-weight: bold;
}
/******************************決済画面********************************/

/*contents調整*/
.contentsAdj {
  margin-top:20px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

/*商品左上No.*/
.labelNo{
  font-size: 0.8em;
  font-weight: bold;
}

/*最新点線（これだけ使用）*/
.dotLine{
  border: 0;
  border-bottom: dotted;
}
/*下線*/
.tbBelowSolid{
  border-bottom-style: solid;
}
/*上線*/
.tbUpSolid{
  border-top-style: solid;
}
/*太文字*/
.bold{
  font-weight: bold;
}
/*赤文字*/
.red{
  color: red;
}
/*金額inputBoxサイズ*/
.inputSize{
  margin-right: 60px;
}
/*チェックボックスサイズ*/
input[type="checkbox"]{
  transform: scale(4);
}

/******************************決済確認画面********************************/
/*強制改行（レイアウト崩れ防止）*/
.wordBreakAll{
  width: 100%;
  word-break: break-all;
}

/******************************決済完了画面 payResult********************************/
/*下の線*/
.tbPayRe{
  border-bottom: solid; 
  margin-top: 5%;
}

/*両端間隔*/
.space{
  width: 10%;
}

/*売上No*/
.saleNumber{
  text-align: left; 
  font-size: 3em; 
  font-weight: bold; 
  border: none; 
  white-space: nowrap;
}

/*左の文字*/
.leftText{
  text-align: left; 
  font-size: 2.8em; 
  border: none;
}

/*右の数字*/
.rightNumber{
  text-align: right; 
  font-size: 2.8em; 
  border: none;
}

/*預かり金額 文字数が多いので*/
.textLeft{
  text-align: left; 
  font-size: 2.8em; 
  border: none;
  white-space: nowrap;
}

/*modal*/ 
/*白い部分*/
.dialog{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
  height: 100%;
}

.content{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
}

/*テキスト部分 div　上間隔*/
.top15{
  margin-top: 15%;
}

/*テキスト大きさ*/
.mLSize{
  font-size:3.5em;
}

/*ボタン*/
.mButton{
  justify-content: center; 
  margin-bottom: 15%; 
  border: none;
}


/******************************決済選択画面 payChoice********************************/

/*〒とふりがな文字サイズ*/
.residence{
  font-size: 65%;
}
/*売上日カレンダー用*/
div.ui-datepicker {
    font-size: 2.5em;
}

/******************************販売履歴一覧画面 clientBuyHistory********************************/
/*<td rowspan="4" class="text-left" style="width: 14%;"> 確認*/
.btnLeft{
  width: 14%;
}

/*履歴取消ボタン大きさ*/
.buyHistoryButton{
  font-size:1em;
  width: 100%;
}

/*ボタンと内容の間隔*/
.btnInfoInterval{
  width: 10%;
}

/*内容欄　右左*/
.infoleft{
  width: 30%;
  white-space: nowrap;
}

.infoRight{
  width: 46%;
}

/*明細ボタン*/
.details{
  font-size:1em !important;
  width: 100% !important;
  margin-bottom: 3% !important;

}

/*modal*/
/*大きさ*/
.mSize{
  font-size:2.5em;
}

.mDialog{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
  height: 100%;
}

.mContent{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
  top: 35%;
}

/*文*/
.mText{
  font-weight: bold;
  text-align: center;
}

/*はいボタン*/
.btnPopYes{
  font-size: 1em;width: 25%;
  border-radius: 40px;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/

  background-image:  linear-gradient(#FD818D, #f95b5b 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #eab7b7;
}

/*いいえボタン*/
.btnPopNo{
  font-size: 1em;width: 25%;
  border-radius: 40px;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/

  background-image:  linear-gradient(#a4aac1 20%, #5c5e67 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #eab7b7;
}


/******************************注文一覧画面 cartList********************************/

/*ボタン大きさ*/
.cartButton{
  font-size:1em;
  width:100%;
}

/*マイナスプラスボタン幅*/
.minusPlus{
  width:23%;
}

.miPlSize{
  width:100%;
}

/*数字入力*/
.inputNumber{
  width:54%;
}

.enter{
  width:100%; 
  padding: 0.2em 0.2em;
  text-align: center;
}

/*商品間のドット線*/
.bottomDot{
  border-bottom-style:dotted!important;
}

.topDot{
  border-style: hidden;
  border-top-style: dotted;
}

/*モーダル*/
.modalSizeL{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
  height: 100%;
}


/******************************決済画面payComfirm********************************/

/*画面titleと内容間メッセージ*/
.msg{
  font-size: 2.8em;
}

/*contents調整*/
.contentsAdj {
  margin-top:20px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

/*商品左上No.*/
.labelNo{
  font-size: 0.8em;
  font-weight: bold;
}

/*テーブル無線*/
.tbNoBorder{
  border-style: hidden;
}
/*下点線*/
.tbBelowDot{
  border-bottom-style: dotted;
}
/*上点線*/
.tbUpDot{
  border-top-style: dotted!important;
}
/*下線*/
.tbBelowSolid{
  border-bottom-style: solid;
}
/*上線*/
.tbUpSolid{
  border-top-style: solid;
}
/*太文字*/
.bold{
  font-weight: bold;
}
/*赤文字*/
.red{
  color: red;
}
/*金額inputBoxサイズ*/
.inputSize{
  margin-right: 60px;
}


/******************************決済完了画面payResult********************************/
/*下の線*/
.tbPayRe{
  border-bottom: solid; 
  margin-top: 5%;
}

/*両端間隔*/
.space{
  width: 10%;
}





/******************************商品選択itemList********************************/
.font{
  font-size: 2.8em;
}

.fontFit{
  font-size: 1.5em;
}

.iconTbSize{
  width:30%;
}
.tbFont{
  font-size: 2.3em;
}
.tb{
  border-collapse: separate!important;
  border-spacing: 25px!important;
}   
.modalSizeL{
  max-width: inherit;
  width: 100%;
  max-height: inherit;
  height: 100%;
}
.inputSu{
  width: 40%;
}


/******************************商品検索itemSearch********************************/
.padZero{
  padding-right: 0px;
  padding-left:0px ;
}
.fontXS{
  font-size: 0.4em;
}
.searchInput{
  width:100%;
  font-size: 2.8em;  
}


/******************************顧客選択clientSearchList********************************/
.tbClient{
  border-style: ridge;
  border-color: gainsboro; 
  margin-top: 30px;
}
.iconBtn{
  width:100%!important;
  font-size: 2.8em!important;  
}
.popTop{
  margin-top: 20px;
  align: center;
}
.fontM{
  font-size: 2.6em;
}
.fontS{
  font-size: 65%;
}
.popLeftMg{
  width: 10%;
}
.popTopMg{
  width: 30%;
}
/******************************販売履歴詳細clientBuyDetail********************************/
.cartBtn{
  font-size: 1em!important;
  width: 100%!important;
}
.verMid{
  vertical-align: middle!important;
}
.fontL{
  font-size: 3.5em;
}
.popFoot{
  justify-content: center;
  margin-bottom: 15%;
}
/******************************エラー画面********************************/
.errorTitle{
  color: #3353D0;
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
  margin-top: -30px;
  margin-bottom: 30px; 
  font-size: 5em;

}

.errorContents{
  color: #3353D0;
  font-size:x-large;
  font-weight: bold;
  text-align: center;
  margin-top: -30px;
  margin-bottom: 30px; 
  margin-right: 50px; 
  margin-left: 50px; 
  font-size: 2.5em;

}