/*
  <div style=" margin-top: 50px;" >
    <div align="left"><h1>ボタンTemplate</h1></div>
    <br />
    <div align="center"> <!--ボタン単独にできればこのdivをつける-->

      <!--予備-->
      <h2>予備</h2><br>
      <button type="submit" style="font-size:3em;width: 50%;text-align: center;background-color: #F9832E;" class="btn1">ログイン</button>
      <br><br>
      <button type="submit" style="font-size:3em;width: 50%;text-align: center;background-color:#4985FF;" class="btn1">ログイン</button>

      <!--BTN普通サイズボタン（普通・キャンペーン）-->
      <h2>普通ボタン</h2><br>
      <button type="submit" class="btnNormal">ログイン</button>
      <br><br><h2>キャンペーン決済ボタン</h2><br>
      <button type="submit" class="btnCamp">ログイン</button>
      <br><br><h2>入金処理ボタン</h2><br>
      <button type="submit" class="btnPayment">ログイン</button>

		

      <!--BTN普通サイズボタン（青・オレンジ以外）-->
      <h2>納品書印刷ボタン</h2><br>
      <button type="submit" class="btnPrintDeli">納品書印刷</button>
      <br><br><h2>領収書印刷ボタン</h2><br>
      <button type="submit" class="btnPrintRec">領収書印刷</button>

      <!--BTN小ボタン-->
      <h2>星ボタン</h2><br>
      <button class="btnStar">★</button>
      <br><br>詳細ボタン<br>
      <button class="btnDetail" ><h2>詳細</h2></button>
      <br><br>顧客検索ボタン<br>
      <button class="btnClientSearch"><h2>顧客検索</h2></button>
      <br><br><h2>ログアウトボタン</h2><br>
      <button class="btnLogout"><i class="fas fa-sign-out-alt"></i>ログアウト</button>
      <br><br><h2>取消・削除ボタン</h2><br>
      <button class="btnCanDel"><i class="far fa-trash-alt"></i></button>
      <br><br><h2>一括注文ボタン</h2><br>
      <button class="btnCartBig"><i class="fas fa-shopping-cart"></i></button>
      <br><br><h2>注文ボタン</h2><br>
      <button class="btnCart"><i class="fas fa-shopping-cart"></i></button>
       <br><br><h2>数量増ボタン</h2><br>
      <button class="btnCart"><i class="fas fa-plus"></i></button>
     <br><br><h2>数量現ボタン</h2><br>
      <button class="btnCart"><i class="fas fa-minus"></i></button>
    </div>

  </div>
*/



@charset "UTF-8";

/*普通長ボタン予備*/
.btn1 {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  /*background: #fd9535;/*背景色*/
  border-bottom: solid 5px ;/*少し濃い目の色に*/
  border-radius: 20px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn1:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*普通長ボタン*/
.btnNormal {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-color: #3353D0;
  background-image: linear-gradient(#869EFB 20%, #3353D0 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*普通長ボタン*/
.btnOrder {
  font-size: inherit;
}

/*キャンペーン決済長ボタン*/
.btnCamp {
  font-size:3em;
  width: 50%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#F9832E 50%, #f95b5b 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*キャンペーン決済長ボタン*/
.btnCamp2 {
  width: 50%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#F9832E 50%, #f95b5b 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*入金処理長ボタン*/
.btnPayment {
  font-size:3em;
  width: 50%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(180deg, #a4ffad, #71dcb2 3%, #0e98bd);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*キャンペーン決済長ボタン 販売履歴注文ボタン*/
.btnPayment2 {
  width: 50%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(180deg, #a4ffad, #71dcb2 3%, #0e98bd);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*確定長ボタン*/
.btnConfirm {
  font-size:3em;
  width: 50%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(180deg, #ff87aa, #ff6d6d 80%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*普通戻るボタン*/
.btnBack {
  font-size:3em;
  width: 25%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#869EFB 20%, #3353D0 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*キャンペーン戻るボタン*/
.btnBackCamp {
  font-size:3em;
  width: 25%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#F9832E 50%, #f95b5b 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*入金戻るボタン*/
.btnBackPayment {
  font-size:3em;
  width: 25%;
  text-align: center;

  display: inline-block;
  padding: 0.5em 0;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(180deg, #a4ffad, #71dcb2 3%, #0e98bd);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*在庫検索ボタン*/
.btnStock {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#23CF17 20%, #1F982B 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*移動登録ボタン*/
.btnMove {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-color: #3353D0;
  background-image: linear-gradient(#2088A0 20%, #196779 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}
.btnMove2 {
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-color: #3353D0;
  background-image: linear-gradient(#2088A0 20%, #196779 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}


/*納品書印刷ボタン*/
.btnPrintDeli {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#869EFB 20%, #3353D0 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*領収書印刷ボタン*/
.btnPrintRec {
  font-size:3em;
  width: 50%;
  text-align: center;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #3353D0;
  background-image: linear-gradient(#F9F9FD 50%, #d9dcdd 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*領収書印刷ボタン*/
.btnNoPrintRec {
  font-size:3em;
  width: 50%;
  text-align: center;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ccc;
  background-image: linear-gradient(#F9F9FD 50%, #ccc 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #ccc;
  border-radius: 30px;
}

/*納品書印刷ボタン　キャンペーン*/
.btnPrintDeliCam {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#faa76b 20%, #F9832E 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*領収書印刷ボタン　キャンペーン*/
.btnPrintRecCam {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color:  #f98034;
  background-image: linear-gradient(#F9F9FD 50%, #d9dcdd 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*納品書印刷ボタン　入金処理*/
.btnPrintDeliPayment {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(180deg, #a4ffad, #71dcb2 3%, #0e98bd);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*領収書印刷ボタン　入金処理*/
.btnPrintRecPayment {
  font-size:3em;
  width: 50%;
  text-align: center;
  
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color:  #0e98bd;
  background-image: linear-gradient(#F9F9FD 50%, #d9dcdd 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}

/*星ボタン: ★は手入力*/
.btnStar{
  font-size:3em;
  width: 50%;
  border-radius: 40px;
  background-color:#FD818D;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/
  background-image: linear-gradient(#FD818D, #f95b5b 100%);
  border-bottom: solid 4px #5e7fca;
}
/*詳細ボタン*/
.btnDetail{
  font-size:2em;
  width: 15%;
  border-radius: 40px;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/

  background-image: linear-gradient(#23BED9 20%, #158FA4 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #eab7b7;


}

/*顧客検索ボタン*/
.btnClientSearch{
  width: 25%;
  text-align: center;

  font-size: 2em;
  height: 90px;
  border-radius: 40px;
  color: black;
  background-image: linear-gradient(#FBF85D 10%, #CECB25 100%);
  border-radius: 30px;


}

/*ログアウトボタン*/
.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: 30px;
}

/*削除・取消ボタン*/
.btnCanDel{

/*  font-size:1em;
  width: 50%;*/
  border-radius: 40px;
  background-color:#FD818D;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/
  background-image: linear-gradient(#FD818D, #f95b5b 100%);
  border-bottom: solid 4px #5e7fca;
}

/*一括注文ボタン*/
.btnCartBig{
  font-size: 2.8em;
  width: 10%;
  border-radius: 40px;
  color: white;
  padding: 2em 0.5em;
  border-bottom: solid 4px #5e7fca;
  background-image: linear-gradient(#FF0054, #8e033e 100%);
}

/*一括注文ボタン 非活性時*/
.btnNoCartBig{
  font-size: 2.8em;
  width: 10%;
  border-radius: 40px;
  color: white;
  padding: 2em 0.5em;
  border-bottom: solid 4px #5e7fca;
  background-image: linear-gradient(0deg, rgba(123, 90, 104, 0.99), rgba(194, 164, 173, 0.99));
}

/*注文ボタン*/
.btnCart{

  font-size:2.8em;
  width: 10%;
  border-radius: 40px;
  color: white;
  padding: 0.5em 0.5em; /*高さ統一*/
  border-bottom: solid 4px #5e7fca;
  background-image: linear-gradient(#FFA4C1, #c61f65 100%);
}

.btnSu{

  color: white;
  padding: 0.2em 0.2em; /*高さ統一*/
  border-bottom: solid 4px #5e7fca;
  background-image: linear-gradient(#FD818D, #f95b5b 100%);
}

/*1カ月履歴ボタン*/
.btnMonthHistory {
  font-size:2.6em;
  width: 50%;
  text-align: center;
  
  height: 126px;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-color: #3353D0;
  background-image: linear-gradient(#869EFB 20%, #3353D0 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #5e7fca;
  border-radius: 30px;
}
/* Modal閉じるボタン */
.btnClose{

	width: 100px;
	height: 100px;
}