@font-face {font-family: "mplus-1c-heavy";src: url("../font/mplus-1c-heavy.ttf");}
@font-face {font-family: "mplus-1c-medium";src: url("../font/mplus-1c-medium.ttf");}
@font-face {font-family: "Kazesawa-Bold";src: url("../font/Kazesawa-Bold.ttf");}
@font-face {font-family: "Kazesawa-Regular";src: url("../font/Kazesawa-Regular.ttf");}
@font-face {font-family: "Kazesawa-Light";src: url("../font/Kazesawa-Light.ttf");}

html,body{
  width:100vw;
  height:100vh;
  margin:0px;
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  background:linear-gradient(-30deg,#a3452e, #d6813c);}

form{font-family:"Kazesawa-Regular";}
input, textarea, select, button {-webkit-appearance: none;}
option{font-family:"Kazesawa-Regular";}

/* ヘッダー */
#header{
  width:100%;
  height:50px;
  background:#4d5961;
  border-bottom:2px solid #263036;
  z-index:2;}
.top_fix #header{
  position:fixed;}
#header h1{
  float:left;
  margin:7px 7px 7px 20px;
  font-size:22px;
  font-family:"mplus-1c-heavy";
  color:#ffffff;}

/* フッター */
footer{
  position:relative;
  bottom:0;
  width:100%;
  height:40px;
  padding:10px 0;
  text-align:center;
  background:none;
  color:#33434e;
  border-top:1px solid #33434e;
  font-size:10px;
  font-family:"mplus-1c-medium";}
footer.absolute{
  position:absolute;
  bottom:0;
  width:100%;
  height:40px;
  padding:10px 0;
  text-align:center;
  background:none;
  color:#849bad;
  border-top:1px solid #33434e;
  font-size:10px;
  font-family:"mplus-1c-medium";
  z-index:1;}
footer a{
  color:#33434e;
  text-decoration:none;}
footer.absolute a{
  color:#849bad;
  text-decoration:none;}

.header_blank{
  width:100%;
  height:50px;
}

#wrap{
  min-height:calc(100vh - 100px);
  margin:50px auto 0 auto;
  padding:20px;
  width:100%;
  max-width:900px;
  opacity:1;
  -webkit-transition:all 500ms 1ms;
  transition:all 500ms 1ms;}
  #wrap.loading{
    opacity:0.3;}
  body.offcanvas-stop-scrolling #wrap{
    opacity:0.3;}


/* トップページ */
.background_image{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  filter: brightness(0.7);
  transition:all 500ms 1ms;
  z-index:0;}
  .landscape .background_image{
  width:100vw;}
  .portrait .background_image{
  height:100vh;}
  .loading .background_image{
    filter: brightness(0.3);}
  .offcanvas-stop-scrolling .background_image{
    filter: brightness(0.3);}
#sales_amount{
  position:relative;
  margin:0 0 10px 0;
  width:100%;
  height:50px;
  overflow:hidden;
  border-radius:10px;
  background:#db7734;
  box-shadow:0 0 20px 1px #141b20e1;
  filter:brightness(1);
  transition:all 500ms 1ms;
  z-index:1;}
  #sales_amount:hover{
    filter:brightness(1.2);
  }
  #sales_amount h1{     /* 個数選択 */
    float:left;
    width:120px;
    transform:translateY(calc(25px - 50%));
    margin:0;
    color:#ffffff;
    text-align:center;
    font-family:"Kazesawa-Bold";
    font-size:20px;}
  #sales_amount input{
    background:#f5f5f5;
    border:none;
    width:calc(100% - 120px);
    height:50px;
    margin:0;
    text-align:center;
    font-family:"Kazesawa-Bold";
    font-size:20px;
    border-radius:0;
    z-index:1;}

.item_name{
  position:relative;
  margin:0;
  color:#e2d9d1;
  text-shadow:0 0 10px #15181bc2;
  font-family:"Kazesawa-Bold";
  font-size:17px;
  z-index:1;}
#total_price{
  position:relative;
  margin:0;
  color:#ffffff;
  text-shadow:0 0 10px #15181bc2;
  font-family:"Kazesawa-Bold";
  font-size:40px;
  line-height:100%;
  z-index:1;}

#staff_name{
  position:relative;
  display:inline-block;
  margin:10px 0 0 0;
  padding:5px 10px;
  background: #ffffff81;
  color:#222222;
  border-radius:30px;
  font-family:"Kazesawa-Light";
  font-size:15px;
  z-index:1;}

.window_bottom_box{
  position:absolute;
  width:calc(100% - 40px);
  max-width:860px;
  margin:0 auto;
  padding-bottom:20px;
  bottom:40px;
  z-index:1;}
  .shadow{
    position:fixed;
    width:100vw;
    height:50px;
    left:0;
    border-radius:100%;
    bottom:-40px;
    background:#141b20e1;
    box-shadow:0 0px 70px 270px #141b20e1;
    z-index:0;}

.submit{
  position: relative;
  width:100%;
  height:50px;
  margin:20px 0 10px 0;
  text-align:center;
  color:#ffffff;
  background:linear-gradient(140deg,#3d81e7, #40b5e4);
  box-shadow:0 0 10px 5px #15181b;
  border:0;
  border-radius:10px;
  font-family:"Kazesawa-Bold";
  font-size:20px;
  filter:brightness(1);
  transition:all 500ms 1ms;
  z-index:1;}
  .submit:hover{
    filter:brightness(1.2);
  }

.food_menu_wrap h1{
  position: relative;
  margin:0;
  text-align:center;
  color:#ffffff;
  font-size:30px;
  font-family:"Kazesawa-Bold";
  line-height:100%;
  z-index:1;}
.food_menu_wrap h2{
  position: relative;
  text-align:center;
  margin:5px 0 0 0;
  color:#ffffff70;
  font-size:20px;
  font-family:"Kazesawa-Light";
  line-height:100%;
  z-index:1;}
.food_menu_wrap p{
  position: relative;
  margin:0 0 10px 0;
  color:#ffffff90;
  font-family:"Kazesawa-Light";
  font-size:15px;
  line-height:100%;
  z-index:1;}
.food_menu_wrap #stock{
  margin:0 0 5px 0;
  color:#ffffff90;
  font-size:13px;
  font-family:"Kazesawa-Light";
  line-height:100%;}
.progress_bar_wrap{
  position: relative;
  padding:0px;
  width:100%;
  height:6px;
  border-radius:5px;
  background:#000000d0;}
  #progress_bar{
    width:100%;
    height:6px;
    border-radius:3px;
    background:linear-gradient(90deg,#db6334, #db7734);}
  .food_menu_wrap p{
    font-size:15px;}

.staff_name_form{
  width:300px;
  margin:0 auto;}
textarea{
  width:100%;}
form p{
  font-family:"Kazesawa-Regular";
}



/* 収支登録のページ */
.section{
  margin:20px 0;
  padding:20px;
  background:#f5f5f5;}
.sales_record h1{
  margin:0 0 10px 0;
  font-size:25px;
  font-family:"Kazesawa-Bold";
  color:#424242;}
h3{
  margin-bottom:0;
  color:#6b6b6b;
  font-size:15px;
  font-family:"Kazesawa-Light";}
.sales_record form{
  background:#00000000;
  font-family:"Kazesawa-Bold";
  font-size:20px;}
  .account_book_sheet input{
    background:#00000000;
    border-radius:0;
    border-top:none;
    border-right:none;
    border-bottom:1px solid #797979;
    border-left:none;}
  .sales_record select{
    width:100%;
    background:#00000000;
    border-radius:5px;}
  .account_book_sheet .normal{
    width:100%;}
  .t_a_r{
    width:calc(100% - 20px);
    text-align:right;}
.section button{
  margin:20px 0 0 50%;
  padding:5px 15px;
  border-radius:30px;
  border:none;
  color:#ffffff;
  background:#287bc0;
  font-family:"Kazesawa-Regular";
  transform:translateX(-50%);}



/* 帳簿のページ */
.sales_card{    /* 帳簿カード */
  position:relative;
  margin:0 0 20px 0;
  padding:15px 20px;
  width:100%;
  max-width:900px;
  background:linear-gradient(-30deg,#ece9e9b0, #ece9e9);
  box-shadow:0 0 10px 1px #2010099a;
  text-decoration:none;
  overflow: hidden;
  -webkit-transition:300ms 0s all;
  transition:300ms 0s all;
  border-radius:10px;
  font-family:"Kazesawa-Regular";}
  .sales_card h1{
    margin:0;
    color:#6b6b6b;
    font-size:20px;
    font-family:"Kazesawa-Regular";}
  .sales_card p{
    margin:0;
    font-size:38px;
    line-height:100%;
    font-family:"Kazesawa-Bold";}
.float_item{    /* 帳簿カードの項目 */
  float:left;
  margin:5px 30px 5px 0;
}

.search_form_wrap{
  width:100%;
  margin-bottom:20px;
  padding:10px 0 0 10px;
  background:linear-gradient(-30deg,#213d50, #263036);
  color:#ffffff;
  border-radius:10px;
  font-family:"Kazesawa-Regular";}
  .search_form_wrap select{
    float:left;
    width:90px;
    margin-right:10px;
    margin-bottom:10px;
    padding:0 5px;
    background:#4d5961;
    border-radius:5px;
    border:none;}
  .search_form_wrap span{
    float:left;
    margin-right:10px;
    margin-bottom:10px;}
  .search_form_wrap .word{
    width:15px;}
  .search_form_wrap input{
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    padding:0 5px;
    background:#4d5961;
    border:none;
    border-radius:5px;}
    @media(max-width:600px){
      .search_form_wrap .word.wide{
        width:calc(100% - 110px);}
      .search_form_wrap #inequality1.wide{
        margin-right:calc(100% - 110px);}
      .search_form_wrap .search_content{
        width:calc(100% - 10px);}
      .time_form{
        width:calc((100% - 140px)*0.25);
      }}
    @media(min-width:600px){
      .search_form_wrap .search_content{
        width:calc(100% - 235px);
        min-width:300px;}
      .time_form{
        width:calc((100% - 365px)*0.25);
      }}
  .search_form_wrap button{
    margin-left:50%;
    margin-bottom:10px;
    padding:5px 15px;
    border-radius:30px;
    border:none;
    background:#287bc0;
    font-family:"Kazesawa-Regular";
    transform:translateX(-50%);}

.sales h3{
  margin:0;
  color:#ffffff;
  font-size:25px;
  font-family:"Kazesawa-Regular";}
.table_wrap{
  width:100vw;
  max-width:860px;  /*左右のpaddingを引いたぶん*/
  overflow: auto;
  -webkit-overflow-scrolling: touch}
  @media(max-width:900px){
    .table_wrap{
      padding:0 40px 0 20px;
      transform:translateX(-20px);
    }
  }
  @media(min-width:900px){
    .table_wrap{
      padding:0;
    }
  }
.sales table{
  table-layout: fixed;
  min-width: 100%;
  font-family:"Kazesawa-Light";
  border-radius:10px;
  overflow:hidden;
  border:2px solid #14222b;}
.sales th{
  min-width: 80px;
  padding:10px 5px;
  text-align:center;
  background:#263036;
  color:#cfcfcf;
  font-size:18px;
  border:2px solid #14222b;}
.sales td{
  min-width: 80px;
  padding:5px;
  text-align:center;
  background:#dadada;
  color:#424242;
  font-size:18px;
  border-left:1px dashed #c0c0c0;
  border-bottom:1px solid #4d5961;}
#read_record{
  position: relative;
  width:100%;
  height:50px;
  margin:20px 0 10px 0;
  text-align:center;
  color:#ffffff;
  background:linear-gradient(140deg,#3d81e7, #40b5e4);
  box-shadow:0 0 10px 5px #15181b3b;
  border:0;
  border-radius:10px;
  font-family:"Kazesawa-Bold";
  font-size:20px;
}




/* メッセージ */
#message{
  position:fixed;
  background:#3b3b3b;
  transition:all 300ms 0s;
  opacity:1;
  z-index:3;}
  #message.close{
    opacity:0;}
  #message h2{
  color:#FFFFFF;
  font-family:"Kazesawa-Regular";
  text-align:center;}
  #message p{
    color:rgb(199, 199, 199);
    margin:0;
    font-family:"Kazesawa-Regular";
    text-align:center;}
@media(max-width:900px){
  #message{
    width:100%;
    padding:10px;
    bottom:0;
    transform:translateY(0);}
    #message.close{
      transform:translateY(100%);}
    #message h2{
      margin:0;
      font-size:17px;}
    #message p{
      font-size:13px;}}
@media(min-width:900px){
  #message{
    width:250px;
    padding:20px;
    bottom:20px;
    right:20px;}
    #message.close{
      bottom:-100px;
      right:20px;}
    #message h2{
      margin:0 0 10px 0;
      font-size:20px;}
    #message p{
      font-size:15px;}}

#message2{
  position:fixed;
  width:200px;
  height:250px;
  top:50%;
  left:50%;
  background:#ffffff;
  border-radius:20px;
  transition:all 500ms 0s;
  opacity:1;
  z-index:3;
  transform:translateX(-50%) translateY(-50%);}
  #message2.close{
    top:100%;
    transform:translateX(-50%) translateY(0%);
    opacity:0;}
  #message2 img{
    margin:50px 50px 0 50px;
    width:100px;
    height:100px;}
  #message2 h2{
  color:rgb(56, 56, 56);
  font-family:"Kazesawa-Regular";
  text-align:center;
  font-size:27px;}

.chart h1{
  margin:0;
  color:#ffffff;
  font-family:"Kazesawa-Bold";}
.chart h2{
  margin:0;
  color:#3b3b3b;
  font-size:25px;
  font-family:"Kazesawa-Bold";}
#chart{
  background:#ffffff;
  box-shadow:0 0 10px 1px #2010099a;
  border-radius:20px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}