*{
	margin:0;
	padding:0;
}
body{

}
button{
	cursor:pointer;
}
button i{
	margin-right:10px;
}

ul.main_menu{
	width:90%;
	margin:auto;
	list-style:none;
}
ul.main_menu li{
	text-indent:20px;
}
@media screen and (max-width:1080px){
	.container{
		width:100%;
	}

}
h1{
	font-size:22px;
	padding :15px 0px;
}
h2{
	width:95%;
	margin:auto;
}

button.add,
button.remove,
button.comp,
button.edit,
button.detail,
button.search,
button.print,
button.select,
button.copy{
	display:block;
	width:70%;
	margin:20px auto;
	height:60px;
	border-radius:10px;
	border:1px solid;
}
button.low{
	height:40px;
}
button.search{
	width:130px;
	height:25px;
	display:inline-block;
}
button.search::before{
	  content: "\f002";
}
button.comp::before{
	  content: "\f093";
}
button.comp::after{
	content:"登録";
}
button.add::before{
	  content: "\f0fe";
}
button.edit::before{
	  content: "\f14b";
}
button.edit::after{
	content:"編集";
}
button.detail::before{
	  content: "\f35d";
}
button.detail::after{
	content:"詳細";
}
button.copy::before{
	  content: "\f0c5";
}
button.copy::after{
	content:"複製";
}
button.remove::before{
	  content: "\f1f8";
}
button.remove::after{
	content:"削除";
}
button.print::before{
	  content: "\f02f";
}
button.print::after{
	content:"印刷";
}
button.select::after{
	  content:"\f101";
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
}
button.select::before{
	content:"次へ";
	font-family:  'Sawarabi Mincho', sans-serif;
}
@media screen and (max-width:800px){
	.container table.list td.button_cell button.edit::after,
	.container table.list td.button_cell button.remove::after,
	.container table.list td.button_cell button.detail::after,
	.container table.list td.button_cell button.comp::after,
	.container table.list td.button_cell button.print::after,
	.container table.list td.button_cell button.copy::after,
	.container table.list td.button_cell button.select::before{
		display:none;
	}
	.container table.list td.button_cell button.edit::before,
	.container table.list td.button_cell button.remove::before,
	.container table.list td.button_cell button.detail::before,
	.container table.list td.button_cell button.comp::before,
	.container table.list td.button_cell button.print::before,
	.container table.list td.button_cell button.select::after{
		position:absolute;
		top:5;
		right:0;
		font-size:1.2em;
	}

}
.container table.list td.all_checkbox,
.container table.list th.all_checkbox{
	width:50px;
	text-align:center;
}
button::before{
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
}
.container .table_caption{
	text-align:center;
	position:relative;
	width:90%;
	margin:auto;
}
.container .table_caption button{
	border-radius:5px;
	width:150px;
	position:absolute;
	right:0;
	
}
.container .table_caption button::before{
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
	content:"\f057";
}
.container table.list{
	width:90%;
	margin:10px auto;

}
.container table.list th,
.container table.list td{
	background-color:#dcc2ac;
}
.container table.list td.main_frame{
	padding:10px;
}
.container table.list td.category{
	width:70px;
	font-size:0.85em;
}
.container table.list td.button_cell{
	width:110px;
	text-align:center;
}
.container table.list td.button_cell button{
	width:100px;
}
.container table.list td.button_cell button.comp{
	width:120px;
}
@media screen and (max-width:800px){
	.container table.list{
		border-collapse:collapse;
		border:none;
		background-color:#dcc2ac;
	}
	.container table.list td{
		border-bottom:1px solid #ffffff;
	}
	.container table.list td.button_cell{
		width:50px;
	}
	.container table.list td.button_cell button{
		width:80%;
		position:relative;
		border:0;
		background:#dcc2ac;
	}
	@media screen and (max-width:500px){
		.container table.list td.button_cell{
			width:40px;
		}
		.container table.list td.button_cell button{
			width:60%;
			position:relative;
			border:0;
			background:#dcc2ac;
		}
	}
}
p.shelf_list{
	width:90%;
	margin:auto;
	padding-left:20px;
	position:relative;
	background:#cccccc;
box-sizing: border-box;
	line-height:30px;
}
p.shelf_list::after{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f150";
	position: absolute;
	right: 15;
	font-size: 1.5em;
}
p.shelf_open::after{
	content: "\f151";
}
table.shelf_table{
	display:none;
}	
.table{
	width:95%;
	margin:10px auto;
	border:1px solid #955D30;
}
.table .caption{
	text-align:center;
	line-height:40px;
}
.table .table_line .menu{
	background:#955D30;
	color:#ffffff;
	width:100%;
}
.table .table_line .input input.wide,
.table .table_line .input select.wide,
table.list input.wide{
	width:90%;
	display:inline-block;
	margin:auto;
}
.table .table_line .input input.adjust{
	width:40%;
	margin-left:15px;
}
.table .table_line .input input.rot{
	width:80%;
	margin:auto;
}
.input input.amount{
	width:25%;
}
.table .table_line .input textarea{
	width:90%;
	display:block;
	margin:auto;
	height:50px;
}
.table .table_line .input input,
.table .table_line .input select,
table.list input,
.search_box input{
	border-radius:5px;
	height:40px;
	border:1px solid;
}
.table .table_line .allergy input,
.table .table_line .recycle input,
.table .table_line .nutrition input{
	height:15px;
	margin-right:5px;
}
.table .table_line .allergy label,
.table .table_line .recycle label{
	margin-right:20px;
}
.table .table_line .menu,
.table .table_line .input{
	padding:10px;
	box-sizing: border-box;
}
.table .table_line .limit{
	text-align:center;
}
.intable .intable_line{
	width:90%;
	margin:auto;
}
.intable .intable_line .intable_menu{
	display:inline-block;
	background:#dcc2ac;
	text-align:center;
	
}
.intable .intable_line .intable_input{
	width:110px;
	display:inline-block;
	background:#dcc2ac;
	border-left:2px solid #ffffff;
}
.intable .intable_line .intable_menu input{
	width:90%;
	margin:20 auto;
}
.intable .intable_line .intable_input button{
	width:100px;
}
.intable .intable_line .new_menu{
	width:80%;
}
.intable .intable_line .new_input{
	width:20%;
	box-sizing: border-box;
}
@media screen and (max-width:800px){

	.intable .intable_line .new_menu{
		width:100%;
	}
	.intable .intable_line .new_input{
		width:100%;
		border:none;
	}
	.intable .intable_line .intable_menu input{
		margin:10 auto 5 auto;
	}
	.intable .intable_line .intable_input button{
		width:90%;
		margin:5 auto 10 auto;
	}
}
.table .table_line .menu .needed{
	display:inline-block;
	color:#c71585;
	border:1px solid #c71585;
	margin-left:30px;
	border-radius:5px;
	background-color:#ffffff;
	width:50px;
	text-align:center;
}
.recycle img{
	width:20px;
}

p.alert{
	margin:0 10px;
	text-align:left;
}
p.alert::before{
	content:"※";
}
.comp_message{
	line-height:40px;
	border:1px solid #0000ff;
	border-radius:5px;
	width:95%;
	padding-left:10px;
	color:#0000ff;
	margin:10px auto;
}
.comp_message::before{
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight:900;
  margin-right:10px;

}
.error{
	line-height:40px;
	border:1px solid #ff0000;
	border-radius:5px;
	width:95%;
	padding-left:10px;
	color:#ff0000;
	margin:10px auto;
	font-weight:bold;
}
.material_error{
	color:red;
	padding-left:30px;
	border:1px solid #ff0000;
	border-radius:5px;
	margin:10px auto;
}
.material_error:before{
	  font-family: "Font Awesome 5 Free";
	  content: "\f071";
	  font-weight:900;
	margin-left:-25px;
	margin-right:10px;
	
}
.error::before{
	  font-family: "Font Awesome 5 Free";
	  content: "\f071";
	  font-weight:900;
	  margin-right:10px;


}

select.middle{
	width:70%;
	display:inline-block;
}
select.material{
	width:60%;
	margin: 0 5px;
}
@media screen and (max-width:800px){

	select.material{
		width:55%;
	}
	.input input.amount{
		width:20%;
	}
}
@media screen and (max-width:500px){

	select.material{
		width:45%;
	}
}
input.amount{
	width:25%;
	display:inline-block;
}
.material_line{
	margin:5px 0;
}
.search_box_label{
	width:90%;
	margin:5px auto;

}
.search_box_label input.material{
	width:60%;
	height:40px;
}
.search_box_label button.search_go{
	height:40px;
	width:80px;
	text-align:center;
	margin-left:10px;
	margin-top:-5px;
	border-radius:5px;

}
.search_box_label button.search_go i{
	margin:auto;

}
.search_on{
	background:#a9a9a9;
	line-height:50px;
	border-radius:5px;
	position:relative;
}

.search_close{
	display:inline-block;
	position:absolute;
	right:10;
}
table.input_field{
	border-collapse:collapse;
	width:90%;
	margin:auto;
	border:1px solid #000000;
}
table.input_field td,
table.input_field th{
	border:1px solid #000000;
	padding:5px;
}
table.cost td.number{
	text-align:right;
	width:20%;
}
table.cost td.calc{
	background-color:#cccccc;
}

select.limit{
	width:35%;
}
.limit_box{
	width:55%;
	margin-left:5px;
}
.stock_select{
	width:90%;
}
.search_box select{
	min-width:100px;
}
.go_button{
	width:100%;
	text-align:center;
}
.go_button button{
	width:80%;
	margin:auto;
}
.step_box {
  color: #000000;
  list-style: none;
  overflow: hidden;
 background-color: #1B73BA;
 width:95%;
	margin:auto;
}
.step_box li {
  background-color: #F8F8F8;
  color: #1B73BA;
  float: left;
  font-size: 13px;
  display: block;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  min-width: 150px;
  padding: 0 10px 0 40px;
  border-top:1px solid #1B73BA;
  border-bottom:1px solid #1B73BA;
}
.step_box li:first-child {
  padding-left: 10px;
}
.step_box li.now{
	background:#1B73BA;
	color:#F8F8F8;
}
.step_box li.now:before,
.step_box li.now:after{
	background:#1B73BA;
}
@media screen and (max-width:800px){
	.step_box li{
		font-size:8px;
		min-width:30px;
	}
}
	
/* 三角形下部 */
.step_box li::after {
  background-color: #F8F8F8;
  box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 2px 0 0px rgba(0,0,0,0.2);
  content: " ";
  display: block;
  height: 15px;
  margin-left: auto;
  margin-right: -30px;
  margin-top: -15px;
  position: relative;
  transform: skew(-30deg);
  -o-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  width: 30px;
}

/* 三角形上部 */
.step_box li::before {
  background-color: #F8F8F8;
  box-shadow: 2px 0 2px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
  content: " ";
  display: block;
  float: right;
  height: 15px;
  margin-bottom: -30px;
  margin-left: auto;
  margin-right: -30px;
  transform: skew(30deg);
  -o-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  width: 30px;
}

/* 右端の設定 */
.step_box .active {
  background-color: #1B73BA;
  color: #FFFFFF;
}
.step_box .active::before, .step_box .active::after {
  background-color: #1B73BA;
}


table.print_search_table{
	width:100%;
}
table.print_search_table td{
	background:#cccccc;
	border:1px solid #cccccc;
	padding-left:5px;
}
table.print_search_table td.main{
	min-width:85px;
	width:20%;
}
table.print_search_table select,
table.print_search_table input{
	display:block;
	width:80%;
	margin:15px auto;
	height:40px;
	border-radius: 5px;
}
table.print_search_table input{
	padding-left:5px;
	padding-right:5px;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;overflow-y:scroll;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;

}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}
.modal_close_button{
	position:absolute;
	right:5;
	top:-0;
	color:#000000;
}
td.button_cell a{
	display:inline-block;
	width:100px;
	cursor: pointer;
	border:1px solid #000000;
	line-height:37px;
	border-radius:10px;
	background-color: buttonface;
	font-family: Arial;
	margin:20 auto;
}
@media screen and (max-width:800px){
	td.button_cell a{
		width:auto;
	}

}
td.button_cell a::before{
	content: "\f02f";
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
}
td.button_cell a::after{
	content:"印刷";

}
td.button_cell a.shelf::before{
	content: "\f070";
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
}
td.button_cell a.shelf::after{
	content:"非表示";

}
td.button_cell a.no_shelf::before{
	content: "\f06e";
	font-family: "Font Awesome 5 Free";
	margin-right:10px;
	font-weight:900;
}
td.button_cell a.no_shelf::after{
	content:"表示";

}
@media screen and (max-width:800px){
	td.button_cell a{
		border:0;
		background:none;
	}
	td.button_cell a::after{
		display:none;
	}
｝