/*-----------------------------------------------*/
/*-------------------- 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');
}

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

	/*---------- 上に表示 ----------*/
	&.datepicker-orient-top{
		margin-bottom:10px;

		&:before{
			bottom:-12px !important;
			left:8px !important;
			border-top:12px solid @gray;
			border-right:12px solid transparent;
			border-left:12px solid transparent;
		}
		&:after{
			bottom:-10px !important;
			left:10px !important;
			border-top:10px solid @white;
			border-right:10px solid transparent;
			border-left:10px solid transparent;
		}
	}
	/*---------- 下に表示 ----------*/
	&.datepicker-orient-bottom{
		margin-top:10px;

		&:before{
			top:-12px !important;
			left:8px !important;
			border-bottom:12px solid @gray;
			border-right:12px solid transparent;
			border-left:12px solid transparent;
		}
		&:after{
			top:-10px !important;
			left:10px !important;
			border-bottom:10px solid @white;
			border-right:10px solid transparent;
			border-left:10px solid transparent;
		}
	}
	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 !important;
	background-color:@d_gray !important;
	background-image:none !important;
	border:1px solid @gray !important;
	border-radius:0px !important;
}
.datepicker table tr td span.focused,
.datepicker table tr td span.focused.active{
	color:@white !important;
	background-color:@blue !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:hover{
	background-color:@gray;
	border-radius:0px !important;
}

.datepicker table tr td.day{
	border:1px solid @gray !important;
}
.datepicker table tr td.day.active{
	background-color:@blue !important;
	background-image:none !important;
	border-radius:0 !important;
}
.datepicker table tr td.day.old,
.datepicker table tr td.day.new{
	background-color:@l_gray !important;
}

/*------------------------------------------------*/
/*-------------------- 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;
	touch-action: manipulation;
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a{
	font-size:14px;
	color:@black;
	text-decoration:none;

	&:hover, &:focus{
		color:inherit;
		text-decoration:none;
	}
}
img{
	vertical-align:bottom;
}
ul{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}
dd{
	margin:0;
	
	dt, dd{
		margin:0;
	}
}

/*---------- デフォルトスタイルのリセット ----------*/
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('../images/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;

	&:before{
		content:'';
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:@black;
		opacity:0;
		transition:0.3s;
	}
	&:hover:before{
		opacity:0.3;
	}
	&:disabled:before{
		content:none;
	}
	/*---------- button-option ----------*/
	&.red{
		color:@white;
		background-color:@red;
	}
	&.yellow{
		color:@white;
		background-color:@yellow;
	}
	&.green{
		color:@white;
		background-color:@green;
	}
	&.blue{
		color:@white;
		background-color:@blue;
	}
	&.sky{
		color:@white;
		background-color:@bote_sky;
	}
	&.violet{
		color:@white;
		background-color:@violet;
	}
	&.gray{
		color:@white;
		background-color:@d_gray;
	}
	&.max{
		width:100%;
	}
}

/*---------- 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;

	&.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);
	}
}

/*---------- 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:@violet;
	
	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;

		&.top{
			top:0;
		}
		&.middle{
			top:9px;
		}
		&.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:@violet;
			vertical-align:middle;
		}
		&: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:@violet;
		}
		.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:@violet;
			}
		}
	}
	.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 ----------*/
	&::-webkit-scrollbar{
		width:0;
		height:0;
	}
	&::-webkit-scrollbar-track{
		background:none;
	}
	&::-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;
		}
		
		&: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;
		}
		&: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;
				}
				&:before{
					content:'';
					position:absolute;
					top:0;
					left:0;
					width:5px;
					height:100%;
					background-color:@violet;
					opacity:0;
					transition:0.3s;
				}
				&:hover{
					background-color:@dd_gray;
				}
				&:hover:before{
					opacity:1;
				}
			}
		}
		/*---------- active-page ----------*/
		li.active{
			a{
				background-color:@dd_gray;

				&: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:@violet;
				z-index:1;
			}
			.headline{
				background-color:@l_black;

				&:hover{
					background-color:@dd_gray;
				}
			}
		}
	}
	/*---------- active ----------*/
	&.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;
					}
				}
			}
			&.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 ----------*/
	&.col2{grid-template-columns:repeat(2, 1fr);}
	&.col3{grid-template-columns:repeat(3, 1fr);}
	&.col4{grid-template-columns:repeat(4, 1fr);}
	&.col5{grid-template-columns:repeat(5, 1fr);}
	&.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;

			&:hover{
				color:inherit;
				background-color:@gray;
			}
		}
		&.disabled{
			/* background-color:@gray; */
		}
		&.active{
			span{
				color:@white !important;
				background-color:@blue !important;
				border:1px solid @blue !important;
				border-radius:5px;
			}
		}
		&:first-child{
			a, span{
				border-radius:5px;
			}
		}
		&: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;

	&.active{
		opacity:1;
		visibility:visible;
	}
}
.modal_window{
	display:flex;
	justify-content:center;
	flex-direction:column;
	width:100%;
	height:100%;
	margin:0 auto;
	backface-visibility:hidden;
	overflow:hidden;

	/*---------- modal-size ----------*/
	&.lg{
		max-width:1200px;
	}
	&.md{
		max-width:900px;
	}
	&.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:15px 20px;
	font-size:20px;
	font-weight:bold;

	span{
		font-weight:bold;
		color:@red;
	}
}
.modal_close{
	display:flex;
	justify-content:center;
	align-items:center;
	height:100%;
	font-size:20px;
	color:@white;
	background-color:@dd_gray;
	text-align:center;
	cursor:pointer;
	transition:0.3s;
}
/*---------- modal > body ----------*/
.modal_body{
	padding:15px 20px;
	background-color:@white;
	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;
			}
		}
		&: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;
	}
	&: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;

		.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済み ----------*/
		&.active{
			background-color:@green;
			animation-duration:0.3s;
			animation-iteration-count:1;
			animation-timing-function:ease-out;
			animation-name:modal_search_btn;
		}
		/*---------- 削除 ----------*/
		&.delete{
			/* background-color:@gray; */

			&.active{
				background-color:@red;
			}
		}
		/*---------- link ----------*/
		&.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);
	}
	&.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;
			}
		}
		&: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;
	gap:10px;
	padding:15px 20px;
	background-color:@gray;
	border-top:1px solid @gray;

	button{
		width:50%;
		height:100%;
		padding:10px;
		font-size:16px;
		border-radius:5px;

		&.modal_return{
			color:@white;
			background-color:@dd_gray;
		}
		&.modal_save{
			color:@white;
			background-color:@green;
		}
		&.modal_copy{
			color:@white;
			background-color:@yellow;
		}
	}
}
.page_end{
	display:none;
	margin-top:20px;
	font-size:30px;
	text-align:center;

	&.active{
		display:block;
	}
}

/*------ modal custom ------*/
.url_copy_container{
	display:grid;
    grid-template-columns:1fr 80px;
    gap:10px;
}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.main_container{
	padding:50px 0 0 250px;
	background-color:@dd_gray;
	transition:0.3s;
	z-index:10;
}
.contents_area{
	padding:20px;

	&.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:@violet;
			border-radius:50%;
		}
	}
}
/*---------- breadcrumb ----------*/
.breadcrumb_list{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	
	li{
		font-size:12px;
		font-weight:bold;
		color:@violet;
		
		a{
			font-size:12px;
			font-weight:normal;
			color:@d_gray;

			&:hover{
				color:@yellow;
			}
		}
		&: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;

	&.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;
			}
			label{
				display:flex;
				gap:5px;
				align-items:center;

				input[type="checkbox"]{
					width:1.5em;
					height:1.5em;
				}
			}
			/*---------- 棚卸年月の選択用 ----------*/
			.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;

	&.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 @violet;
	cursor:pointer;
	transition:0.3s;

	&:hover{
		background-color:@l_gray;
	}
	&: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;
	}
	&.active:after{
		transform:translateY(-70%) rotate(135deg);
	}
}
.contents_box_detail{
	display:grid;
	grid-gap:20px;
	padding:20px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	&.col3{
		grid-template-columns:repeat(3, 1fr);
	}
	&.col4{
		grid-template-columns:repeat(4, 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;
		}
		&: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:@violet;
			border:1px solid @gray;
		}
	}
	/*---------- storage ----------*/
	.storage{
		display:grid;
		grid-gap:5px;
	}

	.box_2{
		display: grid;
		grid-template-columns: 1fr 1fr 100px;
		gap: 15px;

		dl{
			margin-bottom:0;
		}

		input{
			width: 100%;
			padding: 10px;
			border: 1px solid @gray;
		}
	}
}
/*---------- 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;
		font-size:16px;
		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:@violet;
		border:none;
		border-radius:5px;
	}
}
.login_check{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:30px;

	label{
		display:flex;
		align-items:center;
		grid-gap:5px;
	}
	input{
		width:14px;
		height:14px;
		margin:0;
	}
	a{
		text-decoration:underline;
	}
}
.login_alert{
	margin-top:20px;
	padding:10px;
	background-color:@l_green;
	border:1px solid @green;
}


/*----------------------------------------------*/
/*-------------------- 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:@violet;
		}
	}
	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:@violet;
					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 @violet;
					}
				}
			}
		}
	}
}


/*---------------------------------------------------*/
/*-------------------- 一覧リスト --------------------*/
/*---------------------------------------------------*/
.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;
	}
	@media(min-width:769px){
		.option_box{
			display:block !important;
		}
	}
	.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;
		}
	}
}


/*---------------------------------------------------------*/
/*-------------------- 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 @violet;
	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:@violet;
				}
				.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 @violet;
	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:@violet;
				}
				/*---------- 在庫金額 ----------*/
				.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:@violet;
		}
		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:@violet;
		}
		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 @violet;
	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:@violet;
}
.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;
}


/*---- テーブル一覧 ----*/
.user_lists{
	display:grid;
    /* grid-template-columns:repeat(2, 1fr); */
	grid-template-columns:1fr;
    grid-gap:1px;
    background-color:#d9d9d9;
    border:1px solid #d9d9d9;

	.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;
		}
	}
}

/*-------------------- salse --------------------*/
.salse_box{
	margin-bottom:10px;
	border:1px solid @gray;

	&:last-child{
		margin:0;
	}
}
.salse_content{
	display:flex;
	align-items:center;
	gap:20px;
	position:relative;
	padding:10px;
	cursor:pointer;

	&:after{
		content:'';
		position:absolute;
		top:50%;
		right:20px;
		transform:translateY(-50%);
		border-top:10px solid @blue;
		border-right:10px solid transparent;
		border-left:10px solid transparent;
	}
	&:hover{
		background-color:@l_gray;
	}
}
.salse_table{
	display:none;
	padding:10px;
}
.salse_scroll{
	margin-bottom:10px;

	&:last-child{
		margin:0;
	}
	table{
		width:100%;
		border-collapse:collapse;
		
		tr{
			th{
				padding:10px;
				text-align:left;
				white-space:nowrap;
				border:1px solid @gray;
			}
			td{
				padding:10px;
				border:1px solid @gray;
			}
			&:nth-child(even){
				background-color:@l_gray;
			}
		}
	}
}
.salse_box.active{
	.salse_content{
		border-bottom:1px solid @gray;

		&:after{
			transform:translateY(-50%) rotate(180deg);
		}
	}
	.salse_table{
		display:block;
	}
}