/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@black:#191919;
@l_black:#333333;
@gray:#d9d9d9;
@l_gray:#f0f0f0;
@d_gray:#aaaaaa;
@dd_gray:#777777;
@red:#d85656;
@d_red:#b32020;
@yellow:#e5a82e;
@d_yellow:#bb8210;
@blue:#00539b;
@d_blue:#163b84;
@green:#59b559;
@l_green:#a4dda4;
@d_green:#287528;
@violet:#8243c4;
@d_violet:#58278c;
@sky:#5bc0de;
@brown:#926834;
@pink:#fdc0c0;
@gold:#b29b49;

@bote_sky:#2fb5be;
@d_bote_sky:#1f777c;


/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face{
	font-family:'oswald_medium';
	src:url('/fonts/Oswald-Medium.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/fonts/Oswald-Bold.ttf');
}
@font-face{
	font-family:'Recoleta';
	src:url('/fonts/Recoleta-Regular.otf');
}


/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
	font-family:YuGothic, 'Yu Gothic', sans-serif;
	font-size:14px;
	color:@black;
	background-color:@dd_gray;
	letter-spacing:0.5px;
	box-sizing:border-box;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	font-size:14px;
	color:@black;
	text-decoration:none;
}
a:hover, a:focus{
	color:inherit;
	text-decoration:none;
}
img{
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea{
	border-radius:0;
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select{
	background-image:url('../image/select_cursor.png');
	background-position:center right 5px;
	background-repeat:no-repeat;
	background-color:@white;
	background-size:10px;
	border-radius:0;
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
button{
	position:relative;
	border:none;
	border-radius:0;
	cursor:pointer;
	overflow:hidden;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
button:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:@black;
	opacity:0;
	transition:0.3s;
}
button:hover:before{
	opacity:0.3;
}
button:disabled:before{
	content:none;
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:@gray;
}

/*---------- error ----------*/
.error{
	background-color:@pink !important;
}

/*---------- placeholder ----------*/
::placeholder{
	color:@d_gray;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar{
	width:10px;
	height:10px;
}
::-webkit-scrollbar-track{
	background:@black;
}
::-webkit-scrollbar-thumb{
	background:@d_gray;
	border:1px solid @black;
	/*box-shadow:inset 0 0 0 1px @gray;*/
}

/*---------- loading ----------*/
.loading{
	display:none;
}	
.loading.active{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:5000;
	
	span{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:100%;
		text-align:center;

		i{
			font-size:50px;
			color:@white;
		}
	}
}
/*---------- loading時の注意事項 ----------*/
.loading_alert{
	display:none;
	position:fixed;
	top:30px;
	width:100%;
	padding:0 10px;
	z-index:8000;
	
	p{
		display:flex;
		justify-content:center;
		align-items:center;
		max-width:600px;
		margin:0 auto;
		padding:20px;
		font-size:16px;
		font-weight:bold;
		text-align:left;
		background-color:@white;
		border-radius:5px;
		box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5);
	}
}

/*---------- button-option ----------*/
button.red{
	color:@white;
	background-color:@red;
}
button.yellow{
	color:@white;
	background-color:@yellow;
}
button.green{
	color:@white;
	background-color:@green;
}
button.blue{
	color:@white;
	background-color:@blue;
}
button.sky{
	color:@white;
	background-color:@bote_sky;
}
button.violet{
	color:@white;
	background-color:@violet;
}
button.gray{
	color:@white;
	background-color:@d_gray;
}
button.max{
	width:100%;
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.sp{
		display:none !important;
	}	
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
.admin_head_area{
	position:fixed;
	top:0;
	width:100%;
	height:50px;
	background-color:@black;
	z-index:150;
}

.admin_head_logo{
	position:relative;
	display:inline-block;
	width:250px;
	height:100%;
	background-color:@gold;
	
	a{
		position:absolute;
		display:inline-block;
		top:50%;
		left:60px;
		transform:translateY(-50%);
		font-size:16px;
		font-weight:bold;
		color:@white;
		line-height:18px;
	}
}

/*--------------- hamburger-button ---------------*/
.admin_head_menu{
	position:absolute;
	top:0;
	left:15px;
	height:100%;
}
.admin_head_hamburger{
	position:relative;
	top:50%;
	left:50%;
	width:30px;
	height:20px;
	cursor:pointer;
	transform:translate(-50%, -50%);
	transition:0.3s;
	
	span{
		left:0;
		width:30px;
		height:2px;
		position:absolute;
		background-color:@white;
		transition:0.3s;
	}
	span.top{
		top:0;
	}
	span.middle{
		top:9px;
	}
	span.bottom{
		bottom:0;
	}
}
@media(min-width:769px){
	.admin_head_hamburger:hover{
		.top{
			top:14px;
			left:-2px;
			transform:rotate(45deg);
			width:15px;
		}
		.bottom{
			bottom:14px;
			left:-2px;
			transform:rotate(-45deg);
			width:15px;
		}
	}
}

/*---------- head-nav ----------*/
.admin_head_nav{
	position:absolute;
	top:0;
	right:20px;
	height:100%;
}
.admin_head_nav_option{
	position:relative;
	top:50%;
	transform:translateY(-50%);
	
	div{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		background-color:@white;
		border-radius:50%;
		font-size:16px;
		color:@white;
		cursor:pointer;
		transition:0.3s;

		i{
			font-size:18px;
			color:@gold;
			vertical-align:middle;
		}
	}
	div:hover{
		background-color:@gray;
	}
}

/*---------- nav-dropdown ----------*/
.admin_head_nav_dropdown{
	display:none;
	position:absolute;
	top:50px;
	right:-10px;
	width:250px;
	background-color:@white;
	box-shadow:3px 3px 6px 1px rgba(0, 0, 0, 0.5);

	&:before{
		content:'';
		position:absolute;
		top:-9px;
		right:15px;
		border-right:10px solid transparent;
		border-bottom:10px solid @white;
		border-left:10px solid transparent;
	}
	.name{
		display:grid;
		grid-template-columns:30px 1fr;
		align-items:center;
		grid-gap:5px;
		padding:10px;

		i{
			margin:0 auto;
			font-size:26px;
			color:@gold;
		}
		.profile{
			display:grid;
			grid-gap:2px;

			p{
				font-size:12px;
			}
		}
	}
	.lang{
		display:grid;
		grid-template-columns:30px 1fr;
		align-items:center;
		grid-gap:5px;
		padding:10px;
		background-color:@l_gray;
		border-top:1px solid @gray;

		i{
			margin:0 auto;
			font-size:20px;
			color:@dd_gray;
		}
		select{
			width:100%;
			padding:5px;
			font-size:12px;
			background-color:@white;
			border:1px solid @gray;
		}
	}
	.link{
		border-top:1px solid @gray;
		
		li{
			border-bottom:1px solid @gray;

			&:last-child{
				border:none;
			}
			a{
				display:grid;
				grid-template-columns:30px 1fr;
				align-items:center;
				grid-gap:5px;
				padding:10px;
				font-size:12px;
				color:@black;
				text-decoration:none;
				transition:0.3s;
				
				i{
					font-size:20px;
					color:@dd_gray;
					text-align:center;
					vertical-align:middle;
				}
			}
			a:hover{
				background-color:@gray;
			}
		}
	}
}
.admin_head_nav.active{
	.admin_head_nav_option{
		ul{
			li{
				background-color:@gold;
			}
		}
	}
	.admin_head_nav_dropdown{
		display:block;
	}
}

/*---------- head-nav-lists ----------*/
.admin_head_nav_lists{
	position:fixed;
	top:50px;
	bottom:0;
	width:250px;
	background-color:@black;
	overflow:auto;
	transition:0.3s;
	z-index:100;
}
/*---------- scrollbar ----------*/
.admin_head_nav_lists::-webkit-scrollbar{
	width:0;
	height:0;
}
.admin_head_nav_lists::-webkit-scrollbar-track{
	background:none;
}
.admin_head_nav_lists::-webkit-scrollbar-thumb{
	background:none;
	border:none;
}
.nav_group{
	border-bottom:1px solid @dd_gray;

	.headline{
		display:grid;
		grid-template-columns:30px 1fr;
		align-items:center;
		grid-gap:10px;
		position:relative;
		padding:15px 30px 15px 15px;
		color:@white;
		background-color:@black;
		cursor:pointer;
		z-index:1;
		transition:0.3s;

		i{
			display:inline-block;
			font-size:18px;
			text-align:center;
		}
		span{
			/* white-space:nowrap; */
			line-height:1;
			transition:0.3s;
		}
	}
	.headline:before{
		content:'';
		position:absolute;
		top:50%;
		right:15px;
		transform:translateY(-50%);
		border-top:6px solid @white;
		border-right:6px solid transparent;
		border-left:6px solid transparent;
	}
	.headline:hover{
		background-color:@dd_gray;
	}
	ul{
		display:none;
		border-top:1px solid @dd_gray;
		
		li{
			a{
				display:block;
				position:relative;
				padding:10px 20px;
				font-size:12px;
				color:@white;
				background-color:@l_black;
				white-space:nowrap;
				transition:0.3s;

				span{
					font-size:12px;
				}
			}
			a:before{
				content:'';
				position:absolute;
				top:0;
				left:0;
				width:5px;
				height:100%;
				background-color:@gold;
				opacity:0;
				transition:0.3s;
			}
			a:hover{
				background-color:@dd_gray;
			}
			a:hover:before{
				opacity:1;
			}
		}
		/*---------- active-page ----------*/
		li.active{
			a{
				background-color:@dd_gray;
			}
			a:before{
				opacity:1;
			}
		}
	}
	/*---------- 直接リンクを設置する場合 ----------*/
	.link{
		position:relative;

		.headline:before{
			transform:translateY(-50%) rotate(-90deg);
		}
		&.active{
			&:after{
				content:'';
				position:absolute;
				top:0;
				left:0;
				width:5px;
				height:100%;
				background-color:@gold;
				z-index:1;
			}
			.headline{
				background-color:@l_black;

				&:hover{
					background-color:@dd_gray;
				}
			}
		}
	}
}
.nav_group.active{
	.headline:before{
		transform:translateY(-50%) rotate(180deg);
	}
	.link{
		.headline:before{
			transform:translateY(-50%) rotate(-90deg);
		}
	}
}

/*---------- nav-deform ----------*/
@media(min-width:769px){
	body.nav_deform{
		.admin_head_hamburger:hover{
			.top{
				top:14px;
				left:17px;
				transform:rotate(-45deg);
				width:15px;
			}
			.bottom{
				bottom:14px;
				left:17px;
				transform:rotate(45deg);
				width:15px;
			}
		}
		.admin_head_nav_lists{
			width:60px;
		}
		.nav_group{
			.headline{
				span{
					display:none;
				}
			}
			.headline:before{
				content:none;
			}
			ul{
				position:fixed;
				top:50px;
				bottom:0;
				left:60px;
				width:190px;
				background:rgba(25, 25, 25, 0.85);
				border:none;
				overflow:auto;
	
				li{
					border-bottom:1px solid @dd_gray;
	
					a{
						white-space:normal;
					}
				}
			}
		}
		.nav_group.active{
			.headline{
				background-color:@dd_gray;
			}
		}
		.main_container{
			padding-left:60px;
		}
		.contents_fixed{
			left:60px;
		}
	}
	/*---------- 初回起動時 ----------*/
	body.nav_deform.first_view{
		.nav_group.active{
			.headline{
				background-color:inherit;
			}
			ul{
				/* display:none !important; */
				opacity:0;
				visibility:hidden;
			}
		}
	}
}


/*-----------------------------------------------------*/
/*-------------------- grid-system --------------------*/
/*-----------------------------------------------------*/
.grid_container{
	display:grid;
	grid-gap:20px;
	box-sizing:border-box;
}
/*---------- column-size ----------*/
.grid_container.col2{grid-template-columns:repeat(2, 1fr);}
.grid_container.col3{grid-template-columns:repeat(3, 1fr);}
.grid_container.col4{grid-template-columns:repeat(4, 1fr);}
.grid_container.col5{grid-template-columns:repeat(5, 1fr);}
.grid_container.col6{grid-template-columns:repeat(6, 1fr);}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	grid-gap:5px;
	margin:30px 0 0;
	text-align:center;
	
	li{
		span{
			display:block;
			padding:10px 15px;
			font-size:12px;
			line-height:1;
			color:@black;
			border:1px solid @gray;
			border-radius:5px;
		}
		a{
			display:block;
			padding:10px 15px;
			font-size:12px;
			line-height:1;
			color:@black;
			border:1px solid @gray;
			border-radius:5px;
			transition:0.3s;
		}
		a:hover{
			color:inherit;
			background-color:@gray;
		}
	}
	li.disabled{
		/* background-color:@gray; */
	}
	li.active{
		span{
			color:@white !important;
			background-color:@blue !important;
			border:1px solid @blue !important;
			border-radius:5px;
		}
	}
	li:first-child{
		a, span{
			border-radius:5px;
		}
	}
	li:last-child{
		margin-right:0;

		a, span{
			border-radius:5px;
		}
	}
}


/*------------------------------------------------------*/
/*---------------------- alertify ----------------------*/
/*------------------------------------------------------*/
.alertify-logs{
	top:50px;
	right:10px !important;
	bottom:auto !important;
	width:auto !important;
	/* min-width:200px !important; */
	
	article{
		padding:20px !important;
		font-size:16px !important;
		font-weight:bold;
		border-radius:5px !important;
		text-shadow:none !important;
		line-height:1.3 !important;
		box-shadow:3px 3px 6px 1px rgba(0, 0, 0, 0.5);
	}
	.alertify-log-success{
		background-color:@d_green !important;
	}
	.alertify-log-error{
		background-color:@d_red !important;
	}
}

/*---------- modal-window ----------*/
.alertify{
	top:10% !important;
	border:5px solid @l_black !important;
	border-radius:0 !important;
}
.alertify-dialog{
	padding:20px !important;
}
.alertify-inner{
	p{
		display:flex;
		justify-content:center;
		margin:0 0 15px !important;
		text-align:left;
	}
	hr{
		border-top:1px solid @d_gray;
	}
}
/*---------- modal-back ----------*/
.alertify-cover{
	background-color:@black !important;
	opacity:0.5 !important;
}

/*---------- confirm-btn ----------*/
.alertify-button{
	background-image:none !important;
	border:none !important;
	border-radius:0 !important;
	text-shadow:none !important;
	box-shadow:none !important;
}
.alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus{
	background-color:@red !important;
}
.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus{
	background-color:@green !important;
}


/*-----------------------------------------------*/
/*-------------------- modal --------------------*/
/*-----------------------------------------------*/
.modal_area{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.7);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:2000;
}
.modal_area.active{
	opacity:1;
	visibility:visible;
}
.modal_window{
	display:grid;
	grid-template-rows:60px 1fr 60px;
	height:100%;
	margin:0 auto;
	background-color:@white;
	backface-visibility:hidden;
	overflow:hidden;
}
/*---------- modal-size ----------*/
.modal_window.lg{
	max-width:1200px;
}
.modal_window.md{
	max-width:900px;
}
.modal_window.sm{
	max-width:500px;
}
/*---------- modal > header ----------*/
.modal_header{
	display:grid;
	grid-template-columns:1fr 60px;
	align-items:center;
	background-color:@gray;
}
.modal_header_title{
	padding:0 20px;
	font-size:18px;
	font-weight:bold;

	span{
		font-weight:bold;
		color:@red;
	}
}
.modal_close{
	display:flex;
	justify-content:center;
	align-items:center;
	height:100%;
	font-size:18px;
	color:@white;
	background-color:@dd_gray;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
}
/*---------- modal > body ----------*/
.modal_body{
	padding:20px;
	overflow:auto;

	dl{
		margin:0 0 20px;

		dt{
			margin-bottom:3px;
		}
		dd{
			input{
				width:100%;
				padding:10px;
				border:1px solid @gray;
			}
			select{
				width:100%;
				padding:10px;
				border:1px solid @gray;
			}
			textarea{
				width:100%;
				padding:10px;
				line-height:20px;
				border:1px solid @gray;
				resize:vertical;
				vertical-align:bottom;
			}
		}
	}
	dl:last-child{
		margin:0;
	}
}
.modal_search_option{
	display:grid;
	grid-template-columns:1fr 1fr 100px;
	align-items:center;
	grid-gap:10px;

	input, select{
		padding:10px;
		border:1px solid @gray;
		border-radius:5px;
	}
	button{
		padding:10px;
		color:@white;
		background-color:@blue;
		border-radius:5px;
	}
}
.modal_box{
	margin-bottom:20px;

	.headline{
		margin-bottom:5px;
		font-weight:bold;
	}
	input[type="text"]{
		width:100%;
		padding:10px;
		border:1px solid @gray;
		border-radius:5px;
	}
	.checkbox{
		display:flex;
		align-items:center;
		grid-gap:20px;
		margin:0;

		label{
			display:flex;
			align-items:center;
			grid-gap:5px;
			margin:0;
			padding:0;

			input[type="checkbox"]{
				position:static;
				width:15px;
				height:15px;
				margin:0;
			}
		}
	}
	button{
		width:100%;
		padding:10px;
		color:@white;
		background-color:@blue;
		border-radius:5px;
	}
}
.modal_box:last-child{
	margin:0;
}
/*---------- modal > search ----------*/
.modal_search_count{
	margin:20px 0;
	padding-top:20px;
	border-top:1px solid @gray;
}
.modal_search_lists{
	display:table;
	width:100%;
	border-collapse:collapse;
	border-top:1px solid @gray;
}
.modal_search_row{
	display:table-row;
	border-bottom:1px solid @gray;

	&:first-child{
		.data_column{
			white-space:nowrap;
		}
	}
	&:nth-child(odd){
		background-color:@l_gray;
	}
	/*---------- 既に登録済みのデータ ----------*/
	&.disabled{
		position:relative;
		background-color:@l_green;
	}
}
.modal_search_column{
	display:table-cell;
	padding:10px;
	vertical-align:middle;

	img{
		max-width:150px;
	}
	img.sm{
		max-width:60px;
	}
	input[type="text"], input[type="number"]{
		width:100%;
		padding:10px;
		border:1px solid @gray;
	}
	input[type="checkbox"]{
		display:block;
		width:15px;
		height:15px;
		margin:0 auto;
	}
	/*---------- button > check-toggle用 ----------*/
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		padding:0;
		color:@white;
		background-color:@d_gray;
		border-radius:50%;
		transition:0.3s;

		i{
			margin:0;
			font-size:12px;
			line-height:inherit;
		}
	}
	/*---------- check済み ----------*/
	button.active{
		background-color:@green;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:ease-out;
		animation-name:modal_search_btn;
	}
	/*---------- 削除 ----------*/
	button.delete{
		/* background-color:@gray; */
	}
	button.delete.active{
		background-color:@red;
	}
	/*---------- link ----------*/
	button.link{
		/* background-color:@gray; */
	}
}
@keyframes modal_search_btn{
	0%, 100%{
		transform:scale(1);
	}
	50%{
		transform:scale(0.7);
	}
}
/*---------- modal > 一括削除 ----------*/
.modal_operation{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	position:fixed;
	top:25px;
	left:50%;
	transform:translate(-50%, -50px);
	grid-gap:10px;
	opacity:0;
	visibility:hidden;
	transition:0.5s;
	z-index:3000;
	
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		grid-gap:5px;
		width:300px;
		height:50px;
		padding:10px 20px;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		border-radius:5px;
		box-shadow:3px 3px 6px 1px rgba(0, 0, 0, 0.5);
	}
}
.modal_operation.active{
	transform:translate(-50%, 0px);
	opacity:1;
	visibility:visible;
}
/*---------- modal > 棚卸表の解除申請 ----------*/
.modal_inv_approval{
	.box{
		margin-bottom:30px;

		p{
			margin-bottom:10px;
		}
		dl{
			padding:10px;
			background-color:@l_gray;
			border:1px solid @gray;
	
			dt{
				margin:0 0 5px;
			}
		}
	}
	.box:last-child{
		margin:0;
	}
}
.modal_inv_radio{
	display:grid;
	/* grid-template-columns:repeat(2, 1fr); */
	grid-gap:1px;
	background-color:@gray;
	border:1px solid @gray;

	label{
		display:flex;
		/* justify-content:center; */
		align-items:center;
		grid-gap:5px;
		margin:0;
		padding:15px;
		background-color:@l_gray;
		cursor:pointer;
		transition:0.3s;

		&:hover{
			background-color:@gray;
		}
		&:first-child{
			border-left:5px solid @blue;
		}
		&:last-child{
			border-left:5px solid @red;
		}
		input{
			margin:0;
		}
	}
}
/*---------- modal > footer ----------*/
.modal_footer{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:20px;
	padding:10px 20px;
	background-color:@gray;
	border-top:1px solid @gray;

	button{
		width:50%;
		height:100%;
		padding:0;
		border-radius:5px;
	}
	button.modal_return{
		color:@white;
		background-color:@dd_gray;
	}
	button.modal_save{
		color:@white;
		background-color:@green;
	}
	button.modal_copy{
		color:@white;
		background-color:@yellow;
	}
}
.page_end{
	display:none;
	margin-top:20px;
	font-size:30px;
	text-align:center;

	&.active{
		display:block;
	}
}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.main_container{
	padding:50px 0 0 250px;
	background-color:@dd_gray;
	transition:0.3s;
	z-index:10;
}
.contents_area{
	padding:20px;
}
.contents_area.fixed{
	padding:20px 20px 80px;
}
/*---------- contents->head ----------*/
.contents_head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	padding:20px;
	background-color:@white;
	border-bottom:1px solid @gray;
	
	.title{
		display:flex;
		align-items:center;
		grid-gap:10px;

		h1{
			margin:0;
			font-size:20px;
			font-weight:bold;
		}
		button{
			display:flex;
			justify-content:center;
			align-items:center;
			width:30px;
			height:30px;
			font-size:14px;
			color:@white;
			background-color:@gold;
			border-radius:50%;
		}
	}
}
/*---------- breadcrumb ----------*/
.breadcrumb_list{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	
	li{
		font-size:12px;
		font-weight:bold;
		color:@gold;
		
		a{
			font-size:12px;
			font-weight:normal;
			color:@d_gray;
		}
		a:hover{
			color:@yellow;
		}
	}
	li:nth-child(n+2):before{
		content:'/';
		padding:0px 5px;
		font-size:12px;
		font-weight:normal;
		color:@d_gray;
	}
}

/*---------- contents->body ----------*/
.contents_body{
	position:relative;
	padding:20px;
	background-color:@white;
}

/*---------- contents->保管場所の名称 ----------*/
.storage_title{
	margin-bottom:15px;
	padding:10px 15px;
	font-size:18px;
	font-weight:bold;
	color:@white;
	background-color:@sky;
	border-radius:5px;
}

/*---------- contents->search ----------*/
.contents_search{
	display:none;
	padding:20px;
	background-color:@l_gray;
	border-bottom:1px solid @gray;
	box-sizing:border-box;
}
.contents_search.show{
	display:block;
}
.contents_search_memo{
	margin-bottom:20px;
	padding:15px 20px;
	font-size:16px;
	font-weight:bold;
	line-height:1.5;
	color:@white;
	background-color:@red;
	border-radius:5px;
}
.contents_search_container{
	display:grid;
	grid-gap:20px;
	align-items:flex-end;;
	
	p{
		line-height:24px;
	}
	dl{
		margin:0;

		dt{
			margin-bottom:3px;
		}
		dd{
			input{
				width:100%;
				padding:10px;
				border:1px solid @gray;
				border-radius:5px;
			}
			select{
				width:100%;
				padding:10px;
				border:1px solid @gray;
				border-radius:5px;
			}
			/*---------- 棚卸年月の選択用 ----------*/
			.date{
				cursor:pointer;
			}
		}
	}
	button{
		width:100%;
		height:40px;
		padding:10px;
		/* font-size:12px; */
		color:@white;
		background-color:@blue;
		border:1px solid @gray;
		border-radius:5px;
		transition:0.3s;

		&.disabled{
			background-color:@dd_gray;
		}
	}
	&.col2{
		grid-template-columns:repeat(2, 1fr);
	
		.all{
			grid-column:~'1/3';
		}
	}
	&.col3{
		grid-template-columns:repeat(3, 1fr);
	
		.all{
			grid-column:~'1/4';
		}
	}
	&.col4{
		grid-template-columns:repeat(4, 1fr);
		align-items:flex-end;
	
		.all{
			grid-column:~'1/5';
		}
	}
	&.col5{
		grid-template-columns:repeat(5, 1fr);
		align-items:flex-end;
	
		.all{
			grid-column:~'1/6';
		}
	}
}
.contents_total{
	background-color:@l_gray;
	border-bottom:1px solid @gray;
}
.contents_total_calc{
	display:grid;
	grid-template-columns:repeat(3, 1fr);

	dl{
		display:flex;
		align-items:center;
		gap:15px;
		margin:0;
		padding:20px;
		border-right:1px solid @gray;

		&:last-child{
			border:none;
		}
		dd{
			font-size:18px;
			font-weight:bold;
			
			&.red{
				color:@red;
			}
		}
	}
}

/*---------- contents->box ----------*/
.contents_box{
	margin-top:20px;
	background-color:@white;
}
.contents_box.mgn{
	margin:0;
}
.contents_box_head{
	position:relative;
	padding:20px;
	font-size:18px;
	font-weight:bold;
	line-height:1;
	border-bottom:1px solid @gray;
	border-left:5px solid @gold;
	cursor:pointer;
	transition:0.3s;
}
.contents_box_head:hover{
	background-color:@l_gray;
}
.contents_box_head:after{
	content:'';
	position:absolute;
	top:50%;
	right:23px;
	transform:translateY(-40%) rotate(315deg);
	width:10px;
	height:10px;
	border-top:3px solid @d_gray;
	border-right:3px solid @d_gray;
}
.contents_box_head.active:after{
	transform:translateY(-70%) rotate(135deg);
}
.contents_box_detail{
	display:grid;
	grid-gap:20px;
	padding:20px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	> dl{
		margin:0;

		dt{
			margin-bottom:3px;
		}
		dd{
			input{
				width:100%;
				padding:10px;
				border:1px solid @gray;
			}
			select{
				width:100%;
				padding:10px 20px 10px 10px;
				background-color:@white;
				border:1px solid @gray;
			}
			textarea{
				width:100%;
				padding:10px;
				line-height:20px;
				border:1px solid @gray;
				resize:vertical;
				vertical-align:bottom;
			}
			button.delete{
				display:flex;
				justify-content:center;
				align-items:center;
				grid-gap:5px;
				padding:10px 20px;
				color:@white;
				background-color:@red;
				border-radius:5px;

				i{
					margin:0;
				}
			}
		}
	}
	/*---------- price ----------*/
	.price_icon{
		position:relative;

		input{
			padding-left:35px;
		}
	}
	.price_icon:before{
		content:'¥';
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0;
		left:0;
		width:25px;
		height:100%;
		font-size:12px;
		line-height:1;
		color:@white;
		background-color:@gold;
		border:1px solid @gray;
	}
	/*---------- 削除 ----------*/
	/* .delete{
		grid-column:~'5/5';
		grid-row:~'1/3';
		text-align:center;

		button{
			font-size:18px;
		}
	} */
	/*---------- manager ----------*/
	/* .manager{
		padding:10px;
		background-color:@l_gray;
		border:1px solid @gray;

		.manager_select{
			display:grid;
			grid-template-columns:200px 1fr 150px;
			align-items:center;
			
			button{
				display:flex;
				justify-content:center;
				align-items:center;
				grid-gap:3px;
				padding:10px;
				color:@white;
				background-color:@blue;
				border:1px solid @gray;
			}
		}
		.manager_lists{
			display:flex;
			justify-content:flex-start;
			align-items:center;
			flex-wrap:wrap;
			grid-gap:10px;
			margin-top:10px;

			li{
				display:flex;
				align-items:center;
				grid-gap:20px;
				position:relative;
				padding:10px;
				color:@white;
				background-color:@gold;
				border-radius:5px;

				button{
					width:15px;
					padding:0;
					line-height:1;
					color:@white;
					background:none;
				}
				button:before{
					content:none;
				}
			}
			li:before{
				content:'';
				position:absolute;
				top:5px;
				right:35px;
				bottom:5px;
				border-left:1px solid @white;
			}
		}
	} */
	/*---------- storage ----------*/
	.storage{
		display:grid;
		grid-gap:5px;
	}
}
/*---------- contents->fixed ----------*/
.contents_fixed{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:20px;
	position:fixed;
	right:0;
	bottom:0;
	left:250px;
	height:60px;
	background:rgba(25, 25, 25, 0.8);
	transition:0.3s;
	z-index:99;

	button{
		width:100%;
		max-width:300px;
		padding:10px;
		border-radius:5px;

		&:nth-child(1){
			color:@white;
			background-color:@green;
		}
		&:nth-child(2){
			color:@white;
			background-color:@yellow;
		}
		&:disabled{
			color:@white;
			background-color:@d_gray;
		}

		
		&.green{
			color:@white;
			background-color:@green;
		}
		&.yellow{
			color:@white;
			background-color:@yellow;
		}
		&.gray{
			color:@white;
			background-color:@dd_gray;
		}
	}
}
/*---------- contents->add ----------*/
.contents_add{
	margin-top:20px;
	padding:20px;
	background-color:@l_gray;
	border-bottom:1px solid @gray;

	h2{
		margin-bottom:5px;
		font-size:14px;
		font-weight:bold;
	}
}
.contents_add_container{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:10px;

	input{
		padding:10px;
		border:1px solid @gray;
		border-radius:5px;
	}
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		grid-gap:5px;
		width:100%;
		padding:10px;
		font-size:14px;
		color:@white;
		background-color:@green;
		border-radius:5px;
	}
}



/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*---------------------------------------- ここからカスタマイズ -----------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------*/
/*-------------------- login --------------------*/
/*-----------------------------------------------*/
.login_container{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}
.login_contents{
	width:100%;
	max-width:500px;
	padding:50px;
	background-color:@white;;
}
.login_head{
	margin-bottom:30px;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
.login_form{
	margin-bottom:30px;

	dl{
		margin-bottom:15px;

		dt{
			margin-bottom:5px;
		}
		dd{
			input{
				width:100%;
				padding:10px;
				background-color:@white;
				border:1px solid @gray;
				border-radius:0;
			}
		}
	}
}
.login_foot{
	text-align:center;

	button{
		width:100%;
		padding:10px;
		font-size:16px;
		color:@white;
		background-color:@gold;
		border:none;
		border-radius:5px;
	}
}
.login_check{
	display:flex;
	justify-content:center;
	align-items:center;
	grid-gap:5px;
	margin-bottom:30px;

	input{
		width:14px;
		height:14px;
		margin:0;
	}
	label{
		margin:0;
		font-size:14px;
		font-weight:normal;
		vertical-align:text-top;
		line-height:1;
	}
}


/*----------------------------------------------*/
/*-------------------- home --------------------*/
/*----------------------------------------------*/
.admin_home_container{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:20px;
}
.admin_home_box{
	padding:10px;
	background-color:@l_gray;
	border:1px solid @gray;
	border-radius:5px;

	.title{
		display:flex;
		align-items:center;
		gap:5px;
		padding-bottom:10px;
		font-size:18px;
		font-weight:bold;

		i{
			font-size:20px;
			color:@gold;
		}
	}
	ul{
		background-color:@white;
		border:1px solid @gray;
		
		li{
			display:block;
			border-bottom:1px solid @gray;

			&:last-child{
				border:none;
			}
			a{
				position:relative;
				display:block;
				padding:10px;
				font-size:14px;
				transition:0.3s;

				&:before{
					content:'';
					position:absolute;
					top:0;
					left:0;
					width:5px;
					height:100%;
					background-color:@gold;
					transition:0.3s;
					opacity:0;
				}
				&:after{
					content:'';
					position:absolute;
					top:50%;
					right:10px;
					transform:translateY(-50%);
					border-top:6px solid transparent;
					border-bottom:6px solid transparent;
					border-left:6px solid @d_gray;
					transition:0.3s;
				}
				&:hover{
					&:before{
						opacity:1;
					}
					&:after{
						border-left:6px solid @gold;
					}
				}
			}
		}
	}
}


/*---------------------------------------------------*/
/*-------------------- 一覧リスト --------------------*/
/*---------------------------------------------------*/
.data_count{
	display:flex;
	justify-content:space-between;
	align-items:center;
	grid-gap:20px;
	margin-bottom:20px;

	.sort{
		display:flex;
		justify-content:center;
		align-items:center;
		grid-gap:5px;

		select{
			padding:10px 25px 10px 10px;
			font-size:12px;
			border:1px solid @gray;
		}
	}
}
.data_operation{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	position:fixed;
	top:25px;
	left:50%;
	transform:translate(-50%, -50px);
	grid-gap:10px;
	opacity:0;
	visibility:hidden;
	transition:0.5s;
	z-index:1000;
	
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		grid-gap:5px;
		width:300px;
		height:50px;
		padding:10px 20px;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		border-radius:5px;
		box-shadow:3px 3px 6px 1px rgba(0, 0, 0, 0.5);
	}
}
.data_operation.active{
	transform:translate(-50%, 0px);
	opacity:1;
	visibility:visible;
}
.data_lists{
	display:table;
	width:100%;
	border-collapse:collapse;
	border-top:1px solid @gray;
}
.data_row{
	display:table-row;
	border-bottom:1px solid @gray;

	/*---------- mobile用のoption ----------*/
	.option_mobile{
		display:none;
	}
	.option_box_toggle{
		display:flex;
		justify-content:flex-start;
		align-items:center;
		grid-gap:5px;
	}
}
.data_row:first-child{
	.data_column{
		white-space:nowrap;
	}
}
.data_row:nth-child(odd){
	background-color:@l_gray;
}
/*---------- checkbox ----------*/
.data_row.chkbox{
	/*---------- button > check-toggle用 ----------*/
	button.chk_btn{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		padding:0;
		color:@white;
		background-color:@d_gray;
		border-radius:50%;
		transition:0.3s;

		i{
			margin:0;
			font-size:12px;
			line-height:1;
		}
	}
	button.chk_btn.active{
		background-color:@red;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:ease-out;
		animation-name:modal_search_btn;
	}
}
.data_column{
	display:table-cell;
	padding:10px;
	vertical-align:middle;

	img{
		max-width:150px;
	}
	img.sm{
		max-width:60px;
	}
	input[type="text"], input[type="number"]{
		width:100%;
		padding:10px;
		border:1px solid @gray;
	}
	input[type="checkbox"]{
		display:block;
		width:15px;
		height:15px;
		margin:0 auto;
	}
	button{
		display:inline-block;
		position:relative;
		padding:8px 14px;
		font-size:12px;
		line-height:1;
		border-radius:5px;
		white-space:nowrap;

		i{
			display:block;
			margin-bottom:5px;
			font-size:16px;
		}
	}
	.option{
		display:flex;
		justify-content:flex-start;
		align-items:center;
		grid-gap:5px;
		
		/* button:first-child,
		button:first-child:before{
			border-top-left-radius:5px;
			border-bottom-left-radius:5px;
		}
		button:last-child,
		button:last-child:before{
			border-top-right-radius:5px;
			border-bottom-right-radius:5px;
		} */
	}
	.status{
		display:block;
		padding:10px;
		font-size:12px;
		font-weight:bold;
		line-height:1;
		text-align:center;
		border-radius:5px;

		&.red{
			color:@red;
			background-color:@white;
			border:1px solid @red;
		}
		&.green{
			color:@green;
			background-color:@white;
			border:1px solid @green;
		}
	}
}
.data_column.nowrap{
	white-space:nowrap;
}
.data_plus{
	margin-top:20px;
	text-align:center;

	button{
		padding:10px 20px;
		font-size:14px;
		/* font-size:12px; */
		color:@white;
		background-color:@blue;
		border-radius:5px;

		i{
			margin-right:5px;
		}
	}
}
.data_button{
	text-align:center;

	button{
		width:100%;
		max-width:300px;
		padding:10px 20px;
		font-size:14px;
		color:@white;
		background-color:@blue;
		border-radius:5px;

		i{
			margin-right:5px;
		}
	}
}


/*-------------------------------------------------*/
/*-------------------- 担当店舗 --------------------*/
/*-------------------------------------------------*/
.shop_manager_all{
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:5px;
		padding:5px 10px;
		color:@white;
		background-color:@d_gray;
		border-radius:5px;
		transition:0.3s;

		&.active{
			background-color:@green;
		}
	}
}
.shop_manager_lists{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:1px;
	background-color:@gray;
	border:1px solid @gray;

	.box{
		display:grid;
		grid-template-columns:30px 1fr;
		align-items:center;
		grid-gap:10px;
		height:100%;
		padding:10px;
		background-color:@white;

		&.active{
			background-color:@l_green;
		}
		button{
			display:flex;
			justify-content:center;
			align-items:center;
			width:30px;
			height:30px;
			color:@white;
			background-color:@d_gray;
			border-radius:50%;
			transition:0.3s;

			&.active{
				background-color:@green;
				animation-duration:0.3s;
				animation-iteration-count:1;
				animation-timing-function:ease-out;
				animation-name:modal_search_btn;
			}
			&.del{
				/* background-color:@red; */
			}
			&.del_active{
				background-color:@red;
				animation-duration:0.3s;
				animation-iteration-count:1;
				animation-timing-function:ease-out;
				animation-name:modal_search_btn;
			}
		}
		.name{
			font-size:13px;
		}
	}
}


/*----------------------------------------------*/
/*-------------------- shop --------------------*/
/*----------------------------------------------*/
.shop_container{
	width:100%;
	max-width:800px;
	margin:0 auto;
	padding:20px 0;
}
.shop_contents_area{
	background-color:@white;
}
.shop_contents_head{
	padding:30px;
	border-bottom:1px solid @gray;

	h1{
		font-size:20px;
		font-weight:bold;
		line-height:1.2;
		text-align:center;
	}
}
.shop_contents_body{
	padding:30px;
}
.shop_lists_container{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:20px;
}
.shop_lists_container.col2{
	grid-template-columns:repeat(2, 1fr);
}
.shop_lists_box{
	a{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		grid-gap:10px;
		height:100%;
		padding:30px 10px;
		font-size:16px;
		text-align:center;
		color:@white;
		background-color:@bote_sky;
		border:1px solid @bote_sky;
		transition:0.3s;

		i{
			font-size:30px;
		}
	}
	a:hover{
		background-color:@d_bote_sky;
	}
}
.shop_contents_foot{
	padding:30px;
	border-top:1px solid @gray;

	a{
		display:block;
		padding:15px 30px;
		text-align:center;
		color:@white;
		background-color:@d_gray;
		transition:0.3s;
	}
	a:hover{
		background-color:@dd_gray;
	}
}


/*--------------------------------------------------------*/
/*-------------------- shop > storage --------------------*/
/*--------------------------------------------------------*/
.storage_lists_head{
	position:relative;
	display:grid;
	grid-template-columns:30px 1fr 130px;
	grid-gap:10px;
	align-items:center;
	margin-bottom:10px;
	padding:10px;
	font-size:12px;
	background-color:@l_gray;
	border:1px solid @gray;
}

.storage_lists{
	> li{
		position:relative;
		margin-top:10px;
		padding:10px;
		background-color:@l_gray;
		border:1px solid @gray;
		transition:0.5s;

		&:before{
			content:'';
			position:absolute;
			top:34px;
			left:40px;
			width:10px;
			height:2px;
			background-color:@gray;
			z-index:1;
		}
	}
	/* > li:first-child{
		margin:0;
	}
	> li:first-child:before{
		content:none;
	} */
}
.storage_container{
	position:relative;
	display:grid;
	grid-template-columns:30px 1fr 130px;
	grid-gap:10px;
	align-items:center;
	z-index:2;
	
	.column{
		font-size:12px;

		input[type="text"]{
			width:100%;
			height:50px;
			padding:10px;
			border:1px solid @gray;
			border-radius:5px;
		}
		button{
			display:flex;
			justify-content:center;
			align-items:center;
			position:relative;
			width:30px;
			height:30px;
			padding:5px;
			font-size:14px;
			color:@white;
			border-radius:50%;

			i{
				margin-right:5px;
				font-size:14px;

				&:last-child{
					margin:0;
				}
			}
			/*---------- 追加 ----------*/
			&.plus{
				background-color:@blue;

				/*---------- 2層目 ----------*/
				&.violet{
					background-color:@violet;
				}
				/*---------- 3層目（最終層） ----------*/
				&.gray{
					width:10px;
					height:10px;
					margin:0 auto;
					background-color:@gray;

					&:before{
						content:none;
					}
				}
			}
			/*---------- 削除 ----------*/
			&.delete{
				background-color:@red;
			}
		}
		/*---------- 順番 ----------*/
		.order{
			display:grid;
			grid-gap:2px;
			position:relative;

			button{
				width:100%;
				height:24px;
				padding:0;
				background-color:@d_gray;
				border-radius:0;
				
				i{
					display:block;
					margin:0;
					font-size:12px;
				}
				&:nth-child(1){
					grid-column:1;
					grid-row:1;
					border-top-left-radius:5px;
				}
				&:nth-child(2){
					grid-column:2;
					grid-row:1;
					background-color:@dd_gray;
					border-top-right-radius:5px;
				}
				&:nth-child(3){
					grid-column:1;
					grid-row:2;
					border-bottom-left-radius:5px;
				}
				&:nth-child(4){
					grid-column:2;
					grid-row:2;
					background-color:@dd_gray;
					border-bottom-right-radius:5px;
				}
			}
		}
	}
	/*---------- 保管場所 ----------*/
	.option_box{
		display:grid;
		grid-template-columns:1fr 30px;
		align-items:center;
		grid-gap:10px;
	}
	.option_mobile{
		display:none;

		button{
			background:@yellow;
			opacity:1; /* bootstrap対策 */

			span{
				display:block;
				position:absolute;
				width:3px;
				height:3px;
				background-color:@white;
				border-radius:50%;
				transition:0.3s;

				&:before{
					content:'';
					display:block;
					position:absolute;
					top:-6px;
					left:50%;
					transform:translateX(-50%);
					width:3px;
					height:3px;
					background-color:@white;
					border-radius:50%;
				}
				&:after{
					content:'';
					display:block;
					position:absolute;
					top:6px;
					left:50%;
					transform:translateX(-50%);
					width:3px;
					height:3px;
					background-color:@white;
					border-radius:50%;
				}
			}
			/*---------- togle > open ----------*/
			&.open{
				span{
					width:15px;
					height:2px;
					border-radius:0;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_open;
				}
				@keyframes toggle_open{
					0%, 50%{
						width:3px;
						height:3px;
						border-radius:50%;
					}
					100%{
						width:15px;
						height:2px;
						border-radius:0;
					}
				}
				span:before{
					top:0;
					width:2px;
					height:2px;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_open_before;
				}
				@keyframes toggle_open_before{
					0%{
						top:-6px;
						width:3px;
						height:3px;
					}
					50%, 100%{
						top:0;
						width:2px;
						height:2px;
					}
				}
				span:after{
					top:0;
					width:2px;
					height:2px;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_open_after;
				}
				@keyframes toggle_open_after{
					0%{
						top:6px;
						width:3px;
						height:3px;
					}
					50%, 100%{
						top:0;
						width:2px;
						height:2px;
					}
				}
			}
			/*---------- togle > close ----------*/
			&.close{
				span{
					width:3px;
					height:3px;
					border-radius:50%;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_close;
				}
				@keyframes toggle_close{
					0%{
						width:15px;
						height:2px;
						border-radius:0;
					}
					50%, 100%,{
						width:3px;
						height:3px;
						border-radius:50%;
					}
				}
				span:before{
					top:-6px;
					width:3px;
					height:3px;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_close_before;
				}
				@keyframes toggle_close_before{
					0%, 50%{
						top:0;
						width:2px;
						height:2px;
					}
					100%{
						top:-6px;
						width:3px;
						height:3px;
					}
				}
				span:after{
					top:6px;
					width:3px;
					height:3px;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
					animation-name:toggle_close_after;
				}
				@keyframes toggle_close_after{
					0%, 50%{
						top:0;
						width:2px;
						height:2px;
					}
					100%{
						top:6px;
						width:3px;
						height:3px;
					}
				}
			}
		}
	}
}

/*---------- tooltip ----------*/
.tool_tip{
	position:absolute;
	top:-35px;
	left:50%;
	transform:translateX(-50%);
	padding:5px 10px;
	font-size:12px;
	color:@white;
	background-color:@black;
	border-radius:5px;
	white-space:nowrap;
	opacity:0;
	visibility:hidden;
	transition:0.2s;
	z-index:10;

	&:before{
		content:'';
		position:absolute;
		bottom:-5px;
		left:50%;
		transform:translateX(-50%);
		border-top:5px solid @black;
		border-right:5px solid transparent;
		border-left:5px solid transparent;
	}
}

/*---------- リストに追加されたリスト ----------*/
.storage_plus{
	position:relative;

	> li{
		position:relative;
		margin:10px 0 0 25px;
		transition:0.5s;

		&:before{
			content:'';
			position:absolute;
			top:24px;
			left:-10px;
			width:51px;
			height:2px;
			background-color:@gray;
			z-index:1;
		}
		&:last-child:after{
			content:'';
			position:absolute;
			top:26px;
			left:-11px;
			width:2px;
			bottom:0;
			background-color:@l_gray;
			z-index:3;
		}
		&.hide{
			display:none;
		}
	}
	&:before{
		content:'';
		position:absolute;
		top:-20px;
		bottom:24px;
		left:14px;
		width:2px;
		background-color:@gray;
		z-index:1;
	}
}

/*---------- リストの追加 ----------*/
.storage_base_plus{
	margin-top:20px;
	text-align:center;

	button{
		position:relative;
		padding:10px 50px;
		font-size:12px;
		color:@white;
		background-color:@blue;
		border-radius:5px;

		i{
			margin-right:5px;
		}
	}
}

/*---------- storage > search ----------*/
.storage_search_container{
	display:grid;
	grid-gap:20px;
}
.storage_search_box{
	padding-bottom:10px;

	.header{
		display:block;
		position:relative;
		padding:10px 10px 10px 25px;
		font-weight:bold;
	}
	.content{
		display:grid;
		grid-gap:5px;
		padding-left:20px;
	}
}
.storage_search_box.layer1{
	background-color:@l_gray;
	border:1px solid @gray;
	border-left:5px solid @gold;
}
.storage_search_box.layer2{
	background-color:@gray;
	/* border:1px solid @d_gray;
	border-bottom:0; */
}
.storage_search_box.layer3{
	padding:0;
	background-color:@white;

	/*---------- 保管場所 ----------*/
	.storage{
		display:flex;
		justify-content:space-between;
		align-items:center;
		grid-gap:10px;
		padding:5px 10px;

		button{
			padding:5px 50px;
			font-size:12px;
			color:@white;
			background-color:@green;
			border-radius:5px;
		}
		.name{
			display:flex;
			align-items:center;
			grid-gap:10px;
			font-weight:bold;

			span{
				padding:4px 8px;
				font-size:12px;
				font-weight:normal;
				line-height:1;
				background-color:@l_gray;
				border:1px solid @gray;
				border-radius:5px;
			}
		}
	}
	/*---------- 棚卸表 ----------*/
	.inventory{
		display:grid;
		grid-template-columns:repeat(6, 1fr);
		align-items:center;
		grid-gap:5px;
		padding:5px 10px;

		.name{
			font-weight:bold;
		}
		.flag{
			span{
				display:flex;
				justify-content:center;
				align-items:center;
				width:100%;
				height:40px;
				font-size:12px;
				font-weight:bold;
				line-height:1.2;
				text-align:center;
				background-color:@white;
				border-radius:5px;
			}
			span.gray{
				color:@dd_gray;
				border:1px solid @dd_gray;
			}
			span.green{
				color:@green;
				border:1px solid @green;
			}
			span.yellow{
				color:@yellow;
				border:1px solid @yellow;
			}
			span.blue{
				color:@blue;
				border:1px solid @blue;
			}
			span.red{
				color:@red;
				border:1px solid @red;
			}
			span.violet{
				color:@violet;
				border:1px solid @violet;
			}
		}
		.edit{
			button{
				width:100%;
				height:40px;
				font-size:12px;
				line-height:1.2;
				color:@white;
				background-color:@green;
				border-radius:5px;
			}
			button.disabled{
				background-color:@dd_gray;
			}
			button.red{
				background-color:@red;
			}
		}
	}
}


/*---------------------------------------------------------*/
/*-------------------- handling > copy --------------------*/
/*---------------------------------------------------------*/
.handling_copy_area{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	border-top:1px solid @gray;
	border-left:1px solid @gray;

	label{
		display:flex;
		align-items:center;
		grid-gap:5px;
		margin:0;
		padding:15px 10px;
		font-weight:normal;
		border-right:1px solid @gray;
		border-bottom:1px solid @gray;
		cursor:pointer;
		transition:0.3s;
	
		input[type="checkbox"]{
			width:15px;
			height:15px;
			margin:0;
		}
	}
	label:hover{
		background-color:@l_gray;
	}
	label.disabled{
		background-color:@gray;
	}
}


/*------------------------------------------------------------*/
/*-------------------- inventory > detail --------------------*/
/*------------------------------------------------------------*/
.contents_inv_header{
	display:grid;
	grid-gap:1px;
	background-color:@gray;
	border:1px solid @gray;

	.column{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		grid-gap:1px;

		dl{
			margin:0;
			padding:5px 10px;
			background-color:@l_gray;
	
			dt{
				margin-bottom:2px;
				font-size:14px;
				font-weight:normal;
			}
			dd{
				font-size:16px;
				font-weight:bold;

				span{
					display:inline-block;
					padding:6px 15px;
					font-size:14px;
					line-height:1.2;
					background-color:@white;
					border-radius:5px;
				}
				span.violet{
					color:@violet;
					border:1px solid @violet;
				}
				span.yellow{
					color:@yellow;
					border:1px solid @yellow;
				}
				span.blue{
					color:@blue;
					border:1px solid @blue;
				}
				span.red{
					color:@red;
					border:1px solid @red;
				}
			}
		}
	}
}
.inventory_container{
	display:grid;
	grid-gap:10px;
}

/* .inventory_box{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:center;
	grid-gap:10px;
	padding:10px;
	background-color:@l_gray;
	border:1px solid @gray;
	border-left:5px solid @gold;
	border-radius:5px;
	overflow:hidden;

	.info{
		display:grid;
		grid-gap:5px;
		
		dl{
			display:grid;
			grid-template-columns:70px 1fr;
			align-items:center;
			grid-gap:0 10px;
			margin:0;
			font-size:14px;

			dt{
				line-height:1.2;
			}
		}
	}
	.form{
		display:grid;
		grid-gap:5px;

		dl{
			display:grid;
			grid-template-columns:90px 1fr;
			align-items:center;
			grid-gap:10px;
			margin:0;
			font-size:14px;

			dt{
				line-height:1.2;
			}
			dd{
				display:flex;
				align-items:center;
				border:1px solid @gray;

				input{
					width:100%;
					height:40px;
					padding:0 10px;
					font-size:14px;
					font-weight:normal;
					border:none;
					border-right:1px solid @gray;
				}
				input:disabled{
					background-color:@white;
				}
				span{
					display:flex;
					align-items:center;
					height:40px;
					padding:0 10px;
					font-size:14px;
					font-weight:bold;
					line-height:1;
					white-space:nowrap;
					color:@white;
					background-color:@gold;
				}
				.stock_price{
					display:flex;
					align-items:center;
					width:100%;
					height:40px;
					padding-left:10px;
					line-height:1;
					background-color:@white;
					box-sizing:border-box;
				}
				.prev_price{
					display:flex;
					align-items:center;
					width:100%;
					height:40px;
					padding-left:10px;
					line-height:1;
					background-color:@white;
					box-sizing:border-box;

					&.red{
						font-weight:bold;
						color:@red;
					}
				}
			}
		}
	}
} */

.inventory_box{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:center;
	grid-gap:10px;
	padding:10px;
	border:1px solid @gray;
	border-left:5px solid @gold;
	border-radius:5px;
	overflow:hidden;

	/*---------- info ----------*/
	.info{
		display:grid;
		grid-gap:5px;
		
		dl{
			display:grid;
			grid-template-columns:70px 1fr;
			align-items:center;
			grid-gap:0 10px;
			margin:0;
			font-size:14px;

			dt{
				line-height:1.2;
			}
		}
	}
	/*---------- form ----------*/
	.form{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		grid-gap:5px;

		dl{
			display:grid;
			align-items:center;
			grid-gap:3px;
			margin:0;
			font-size:14px;

			dt{
				line-height:1.2;
			}
			dd{
				display:flex;
				align-items:center;
				border:1px solid @gray;

				input{
					width:100%;
					height:40px;
					padding:0 10px;
					font-size:14px;
					font-weight:normal;
					border:none;
					/* border-right:1px solid @gray; */
				}
				input:disabled{
					background-color:@l_gray;
				}
				/*---------- inv_unit ----------*/
				span{
					display:flex;
					align-items:center;
					height:40px;
					padding:0 10px;
					font-size:14px;
					font-weight:bold;
					line-height:1;
					white-space:nowrap;
					color:@white;
					background-color:@gold;
				}
				/*---------- 在庫金額 ----------*/
				.stock_price{
					display:flex;
					align-items:center;
					width:100%;
					height:40px;
					padding-left:10px;
					font-weight:bold;
					line-height:1;
					background-color:@l_gray;
					box-sizing:border-box;
				}
				/*---------- 前月金額差異 ----------*/
				.prev_price{
					display:flex;
					align-items:center;
					width:100%;
					height:40px;
					padding-left:10px;
					font-weight:bold;
					line-height:1;
					background-color:@l_gray;
					box-sizing:border-box;

					&.red{
						font-weight:bold;
						color:@red;
					}
				}
			}
		}
	}
}

/*---------- inventory > option ----------*/
/* .inventory_option{
	display:grid;
	grid-gap:5px;
	margin-left:50%;
	padding-left:5px;

	dl{
		display:grid;
		grid-template-columns:150px 1fr;
		align-items:center;
		height:50px;
		margin:0;
		background-color:@l_gray;
		border:1px solid @gray;
		border-radius:5px;
		overflow:hidden;

		dt{
			display:flex;
			justify-content:center;
			align-items:center;
			height:100%;
			font-size:16px;
			line-height:1;
			text-align:center;
			color:@white;
			background-color:@gold;
		}
		dd{
			height:100%;
			margin:0;
			font-size:14px;
			line-height:1;

			input{
				width:100%;
				height:100%;
				padding:0 15px;
				border:none;
			}
			input:disabled{
				background-color:@white;
			}
			span{
				display:flex;
				align-items:center;
				height:100%;
				padding:0 15px;
			}
		}
	}
} */

.inventory_option{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:10px;
	position:sticky;
	bottom:0;
	padding:10px 20px;
	background-color:@white;
	border-top:1px solid @gray;
	
	&.fixed{
		bottom:60px;
	}
	dl{
		display:grid;
		grid-template-columns:150px 1fr;
		align-items:center;
		height:50px;
		margin:0;
		background-color:@l_gray;
		border:1px solid @gray;
		border-radius:5px;
		overflow:hidden;

		dt{
			display:flex;
			justify-content:center;
			align-items:center;
			height:100%;
			font-size:16px;
			line-height:1;
			text-align:center;
			color:@white;
			background-color:@gold;
		}
		dd{
			height:100%;
			margin:0;
			font-size:14px;
			line-height:1;

			input{
				width:100%;
				height:100%;
				padding:0 15px;
				border:none;
			}
			input:disabled{
				background-color:@l_gray;
			}
			span{
				display:flex;
				align-items:center;
				height:100%;
				padding:0 15px;
				font-weight:bold;
			}
		}
	}
}


/*--------------------------------------------------*/
/*-------------------- CSVページ --------------------*/
/*--------------------------------------------------*/
.csv_export_area{
	display:flex;
	align-items:center;
	grid-gap:10px;
	
	dl{
		display:flex;
		align-items:center;
		grid-gap:10px;
		margin:0;

		dt{

		}
		dd{
			input{
				width:100%;
				padding:10px;
				border:1px solid @gray;
				cursor:pointer;
			}
		}
	}
	button{
		padding:10px 20px;
		color:@white;
		background-color:@green;
		border-radius:5px;
	}
}
.csv_export_area_v2{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	align-items:flex-end;
	grid-gap:10px;
	
	dl{
		margin:0;

		dt{

		}
		dd{
			input, select{
				width:100%;
				padding:10px;
				border:1px solid @gray;
				cursor:pointer;
			}
			button{
				width:100%;
				padding:10px 20px;
				color:@white;
				background-color:@green;
				border-radius:5px;
			}
		}
	}
}

.drop_area{
	display:grid;
	grid-gap:20px;
	border:2px dashed @gold;
	padding:100px 20px;
	transition:0.3s;

	p{
		font-size:16px;
		text-align:center;
	}
	label{
		width:100%;
		max-width:300px;
		margin:0 auto;
		padding:10px 20px;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		color:@white;
		background-color:@green;
		border-radius:5px;
		cursor:pointer;
		transition:0.3s;

		input{
			display:none;
		}
	}
	label:hover{
		background-color:@d_green;
	}
	.caution{
		padding-top:20px;
		font-size:14px;
		text-align:center;
		border-top:1px solid @gray;
	}
}
.drop_area.bg_gray{
	background-color:@gray;
}


/*-------------------------------------------------*/
/*-------------------- 商品詳細 --------------------*/
/*-------------------------------------------------*/
.product_detail_area{
	padding:20px;
}
.product_detail_container{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	border-top:1px solid @gray;
	border-left:1px solid @gray;

	dl{
		margin:0;
		padding:10px;
		background-color:@l_gray;
		border-right:1px solid @gray;
		border-bottom:1px solid @gray;

		dt{
			margin-bottom:2px;
		}
	}
}


/*-------------------------------------------------*/
/*-------------------- 仕込み品 --------------------*/
/*-------------------------------------------------*/
.prepare_label{
	display:flex;
	align-items:center;
	gap:5px;
	margin:0;
	padding:10px;
	border:1px solid @gray;

	input{
		margin:0;
	}
}
.prepare_area{
	display:none;

	&.active{
		display:block;
	}
}
.prepare_lists{
	display:table;
	width:100%;
	/* margin-bottom:20px; */
	border-collapse:collapse;
	border:1px solid @gray;
}
.prepare_title{
	display:table-caption;
	padding:10px;
	font-size:14px;
	font-weight:bold;
	line-height:1;
	color:@white;
	background-color:@gold;
}
.prepare_row{
	display:table-row;
	border-top:1px solid @gray;

	&:nth-child(even){
		background-color:@l_gray;
	}
}
.prepare_column{
	display:table-cell;
	padding:10px;

	input[type="text"]{
		width:100%;
		padding:10px;
		border:1px solid @gray;
	}
	/*---------- button > check-toggle用 ----------*/
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		padding:0;
		color:@white;
		background-color:@d_gray;
		border-radius:50%;
		transition:0.3s;

		i{
			margin:0;
			font-size:12px;
			line-height:1;
		}
		&.active{
			background-color:@red;
			animation-duration:0.3s;
			animation-iteration-count:1;
			animation-timing-function:ease-out;
			animation-name:modal_search_btn;
		}
	}
}
.prepare_add{
	text-align:center;

	button{
		width:100%;
		max-width:300px;
		padding:10px;
		font-size:14px;
		color:@white;
		border-radius:5px;

		i{
			margin-right:5px;
		}
	}
}
.prepare_total{
	display:flex;
	justify-content:flex-end;
	margin-bottom:20px;
	/* background-color:@l_gray; */
	border-right:1px solid @gray;
	border-bottom:1px solid @gray;
	border-left:1px solid @gray;
}
.prepare_total_column{
	display:flex;
	align-items:center;
	padding:20px 30px;
	font-size:14px;
	font-weight:bold;
	border-left:1px solid @gray;

	dl{
		display:flex;
		align-items:center;
		gap:10px;
		margin:0;

		dt{
			display:flex;
			justify-content:center;
			align-items:center;
		}
		dd{

		}
	}
}


/*------------------------------------------------------------*/
/*------------------------- sortable -------------------------*/
/*------------------------------------------------------------*/
.ui-sortable-helper{
	background-color:@l_gray;
	border:1px solid @bote_sky;
}


/*--------------------------------------------------------------*/
/*------------------------- summernote -------------------------*/
/*--------------------------------------------------------------*/
.note-editor.note-frame{
	margin:0;
	border:1px solid @gray;
	border-radius:0;
	box-shadow:none;
}
/*---------- toolbar ----------*/
.note-toolbar button,
.note-toolbar button:before{
	border-radius:0 !important;
}
/*---------- textarea ----------*/
.note-editor.note-frame .note-editing-area .note-editable p a{
	color:@blue;
	text-decoration:underline;
}
/*---------- statusbar ----------*/
.note-editor.note-frame .note-statusbar{
	background-color:@gray;
	border-radius:0;
}
.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar{
	border-color:@black !important;
}
.note-popover.popover .popover-content a{
	margin-top:5px !important;
	padding:0px 10px !important;
}
/*---------- modal ----------*/
.note-modal-header{
	padding:20px;
}
.note-modal-header button:before{
	content:none;
}
.note-modal-header h4{
	font-size:18px;
}
.note-modal-body{
	padding:20px;
}
.note-modal .form-group{
	margin-bottom:20px;
	padding:0;
}
.note-modal .form-group label{
	margin-bottom:5px;
	padding:0;
	font-size:14px;
}
.note-modal .form-group input[type="text"]{
	width:100%;
	height:auto;
	padding:10px;
	font-size:14px;
	border:1px solid @gray;
	border-radius:5px;
	box-shadow:none;
}
.note-modal-body .checkbox{
	margin:0 0 10px;
}
.note-modal-body .checkbox:last-child{
	margin:0;
}
.note-modal-body .checkbox label{
	display:flex;
	align-items:center;
	grid-gap:5px;
	margin:0;
	padding:10px;
	background-color:@l_gray;
	border-radius:5px;
}
.note-modal-body .checkbox label input[type="checkbox"]{
	position:static;
	width:15px;
	height:15px;
	margin:0;
	padding:0;
}
.note-modal-footer{
	height:auto;
	padding:0 20px 20px 20px;
}
.note-modal-footer .note-btn{
	float:none;
	background-color:@green;
	border:none;
	border-radius:5px;
	outline:none;
	transition:0.3s;
}
.note-modal-footer .note-btn:hover{
	opacity:0.7;
}
.note-modal-footer .note-btn.disabled{
	background-color:@d_gray;
}

/* .note-editor .modal-header .close{
	font-size:30px;
	opacity:1;
}
.note-editor .modal-body input[type="text"]{
	height:auto;
	padding:10px;
	color:@black;
	border-radius:0;
	box-shadow:none;
}
.note-editor .modal-body .checkbox input{
	width:auto;
}
.note-editor .modal-footer{
	text-align:center;
}
.note-editor .modal-footer button{
	width:100%;
}
.note-editor .modal-footer button:hover{
	color:@white;
} */


/*--------------------------------------------------------------*/
/*------------------------- datepicker -------------------------*/
/*--------------------------------------------------------------*/
.datepicker{
	margin-top:10px;
	padding:10px;
	border:1px solid @gray;
	border-radius:0px !important;
	box-shadow:3px 3px 6px rgba(0, 0, 0, 0.5);

	&:before{
		top:-12px !important;
		left:8px !important;
		border-right:12px solid transparent;
		border-left:12px solid transparent;
		border-bottom:12px solid @gray;
	}
	&:after{
		top:-10px !important;
		left:10px !important;
		border-right:10px solid transparent;
		border-left:10px solid transparent;
		border-bottom:10px solid @white;
	}
	thead{
		th{
			border:1px solid @gray;
		}
	}
	tbody{
		td{
			padding:10px 0 !important;

			span{
				border:1px solid @gray;
				border-radius:0 !important;
			}
		}
	}
	tfoot{
		th.clear{
			background-color:@gray;
		}
	}
}

/*---------- active ----------*/
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active{
	text-shadow:none;
	background-color:@bote_sky !important;
	background-image:none !important;
	border-radius:0px !important;
}
/*---------- hover ----------*/
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{
	border-radius:0px !important;
}
.datepicker table tr td span.focused, .datepicker table tr td span:hover{
	background-color:@gray;
	border-radius:0px !important;
}