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


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
button:hover:before{
	opacity:0;
}
/*---------- loading時の注意事項 ----------*/
.loading_alert{
	p{
		padding:15px;
		font-size:14px;
	}
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
.admin_head_logo{
	a{
		left:50px;
		font-size:14px;
	}
}

/*--------------- hamburger-button ---------------*/
.admin_head_menu{
	left:10px;
}

/*---------- head-nav ----------*/
.admin_head_nav{
	right:10px;
}
.admin_head_nav_option{
	ul{
		li{
			i{
				margin:0;
			}
		}
	}
}

/*---------- nav-dropdown ----------*/
.admin_head_nav.active{
	.admin_head_nav_dropdown{
		right:-5px;

		&:before{
			right:10px;
		}
		.name{
			grid-gap:5px;
			padding:15px 10px;

			i{
				font-size:20px;
			}
		}
		.lang{
			grid-gap:5px;
			padding:15px 10px;

			i{
				font-size:20px;
			}
		}
		.link{
			li{
				a{
					padding:15px 10px;
					
					i{
						font-size:20px;
					}
				}
			}
		}
	}
}

/*---------- nav-deform-back ----------*/
/* header:before{
	content:attr(data);
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0, 0, 0, 0.6);
	transition:0.3s;
	z-index:100;
} */
.admin_head_nav_lists{
	width:250px;
	overflow:auto;
	visibility:visible;
}
.admin_head_back{
	position:fixed;
	top:50px;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0, 0, 0, 0.6);
	transition:0.3s;
	z-index:90;
}
.nav_group{
	.headline{
		padding:15px 30px 15px 10px;
	}
}
/*---------- nav-deform ----------*/
body.nav_deform{
	/* header:before{
		opacity:0;
		visibility:hidden;
	} */
	.admin_head_nav_lists{
		width:0;
		overflow:hidden;
		visibility:hidden;
	}
	.admin_head_back{
		opacity:0;
		visibility:hidden;
	}
	.main_container{
		padding-left:0;
	}
	.contents_fixed{
		left:0;
	}
}


/*-----------------------------------------------------*/
/*-------------------- grid-system --------------------*/
/*-----------------------------------------------------*/
.grid_container{
	grid-gap:15px;
}
/*---------- column-size ----------*/
.grid_container.col2{grid-template-columns:repeat(2, 1fr);}
.grid_container.col3{grid-template-columns:repeat(1, 1fr);}
.grid_container.col4{grid-template-columns:repeat(2, 1fr);}
.grid_container.col5{grid-template-columns:repeat(2, 1fr);}
.grid_container.col6{grid-template-columns:repeat(3, 1fr);}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	margin:15px 0 0;

	li{
		span{
			padding:6px 10px;
			font-size:12px;
		}
		a{
			padding:6px 10px;
			font-size:12px;
		}
	}
}


/*------------------------------------------------------*/
/*---------------------- alertify ----------------------*/
/*------------------------------------------------------*/
.alertify-logs{
	article{
		padding:10px 10px !important;
		font-size:14px !important;
		line-height:20px !important;
	}
}
/*---------- modal-window ----------*/
.alertify{
	left:3% !important;
	width:94% !important;
}
.alertify-dialog{
	padding:15px !important;
}
.alertify-inner{
	p{
		font-size:12px !important;
	}
}


/*-----------------------------------------------*/
/*-------------------- modal --------------------*/
/*-----------------------------------------------*/
.modal_area{
	padding:0;
	box-sizing:border-box;
}
.modal_window{
	/* grid-template-rows:50px 1fr 60px; */
}
.modal_window.sm{
	/* width:auto; */
	/* max-width:none; */
}
/*---------- modal > header ----------*/
.modal_header{
	grid-template-columns:1fr 50px;
}
.modal_header_title{
	padding:10px 20px;
	font-size:18px;
}
/*---------- modal > body ----------*/
.modal_body{
	padding:15px 20px;
}
/*---------- modal > search ----------*/
.modal_search_count{
	margin:15px 0;
	padding-top:15px;
	font-size:12px;
}
.modal_search_lists{
	border:1px solid @gray;
}
.modal_search_row{
	display:block;
	position:relative;
	padding:10px 10px 10px 45px;

	/*---------- 1行目 ----------*/
	&:first-child{
		display:flex;
		flex-wrap:wrap;
		grid-gap:0 5px;

		.modal_search_column:not(:first-child){
			white-space:break-spaces;
		}
	}
	&:last-child{
		border:none;
	}
	/*---------- リンク有り ----------*/
	&.link:first-child{
		.modal_search_column:last-child{
			display:none;
		}
	}
	&.link:not(:first-child){
		padding:10px 45px;

		.modal_search_column:last-child{
			position:absolute;
			top:50%;
			right:10px;
			transform:translateY(-50%);

			&:before{
				content:none;
			}
			button{
				width:25px;
				height:25px;

				font-size:11px;
			}
		}
	}
}
.modal_search_column{
	display:flex;
	align-items:center;
	grid-gap:1px;
	padding:0;
	font-size:12px;

	&:before{
		content:'●';
	}
	&:nth-child(1):before{
		color:@dd_gray;
	}
	&:nth-child(2):before{
		color:@red;
	}
	&:nth-child(3):before{
		color:@yellow;
	}
	&:nth-child(4):before{
		color:@green;
	}
	&:nth-child(5):before{
		color:@bote_sky;
	}
	&:nth-child(6):before{
		color:@blue;
	}
	&:nth-child(7):before{
		color:@violet;
	}
	&:nth-child(8):before{
		color:@pink;
	}
	/*---------- checkbox ----------*/
	&:first-child{
		position:absolute;
		top:50%;
		left:10px;
		transform:translateY(-50%);
		padding:0;
	
		&:before{
			content:none;
		}
		/*---------- button > check-toggle用 ----------*/
		button{
			width:25px;
			height:25px;

			i{
				font-size:11px;
			}
		}
	}
}
/*---------- modal > footer ----------*/
.modal_footer{
	padding:10px 20px;

	button{
		font-size:14px;
	}
}


/*---------------------------------------------------*/
/*-------------------- container --------------------*/
/*---------------------------------------------------*/
.main_container{
	padding-left:0;
}
.contents_area{
	padding:10px;
}
.contents_area.fixed{
	padding:10px 10px 70px;
}

/*---------- contents->head ----------*/
.contents_head{
	display:block;
	padding:15px 10px;

	.title{
		display:grid;
		grid-template-columns:1fr 30px;

		h1{
			font-size:16px;
			line-height:1.3;
		}
	}
}
/*---------- breadcrumb ----------*/
.breadcrumb_list{
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid @gray;
}

/*---------- contents->body ----------*/
.contents_body{
	padding:15px 10px;

	p{
		font-size:12px;
	}
}

/*---------- contents->保管場所の名称 ----------*/
.storage_title{
	margin-bottom:20px;
	padding:10px;
	font-size:14px;
}

/*---------- contents->search ----------*/
.contents_search{
	padding:15px 10px;
}
.contents_search_memo{
	margin-bottom:20px;
	padding:10px;
	font-size:12px;
}
.contents_search_container{
	grid-template-columns:1fr;
	grid-gap:10px;
	
	p{
		font-size:12px;
	}
	dl{
		dt{
			margin-bottom:2px;
			font-size:12px;
		}
		dd{
			font-size:12px;

			input{
				padding:10px;
			}
			select{
				padding:10px;
			}
		}
	}
	button{
		height:auto;
		padding:10px;
		font-size:12px;
	}
	&.col2,
	&.col3,
	&.col4,
	&.col5{
		grid-template-columns:1fr;

		.all, .mb_all{
			grid-column:auto;
		}
	}
	&.mb_col2{
		grid-template-columns:repeat(2, 1fr);

		.all, .mb_all{
			grid-column:~'1/3';
		}
	}
}
.contents_total_calc{
	grid-template-columns:1fr;
	padding:5px 10px;
	
	dl{
		justify-content:space-between;
		padding:5px 0;
		border-right:0;
		border-bottom:1px solid @gray;

		dt{
			font-size:12px;
		}
		dd{
			font-size:16px;
		}
	}
}

/*---------- contents->box ----------*/
.contents_box{
	margin-top:10px;
}
.contents_box_head{
	padding:15px 10px;
	font-size:14px;
}
.contents_box_head:after{
	right:18px;
}
.contents_box_detail{
	grid-gap:10px;
	padding:15px 10px;

	> dl{
		dt{
			margin-bottom:3px;
			font-size:12px;
		}
		dd{
			font-size:12px;
		}
	}
	/*---------- 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;
		}
		button:before{
			content:none;
		}
	}
	/*---------- manager ----------*/
	/* .manager{
		.manager_select{
			grid-template-columns:1fr 1fr;
			grid-gap:5px;
			font-size:12px;
			
			input{
				grid-column:~'1/3';
			}
			button{
				padding:10px;
			}
		}
		.manager_lists{
			grid-gap:5px;

			li{
				padding:8px 10px;
				
				button{
					padding:0;
					font-size:12px;
					color:@white;
					background-color:inherit;
				}
				button:before{
					content:none;
				}
			}
		}
	} */
}

/*---------- contents->fixed ----------*/
.contents_fixed{
	left:0;

	button{
		width:40%;
		padding:10px;
		font-size:13px;
	}
}

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

/*-----------------------------------------------*/
/*-------------------- login --------------------*/
/*-----------------------------------------------*/
.login_container{
	/* padding:0 15px; */
}
.login_contents{
	padding:30px 15px;
}
.login_head{
	margin-bottom:15px;
	font-size:18px;
}
.login_form{
	margin-bottom:15px;

	dl{
		margin-bottom:15px;

		dt{
			margin-bottom:3px;
			font-size:12px;
		}
		dd{
			font-size:12px;
		}
	}
}
.login_foot{
	button{
		width:100%;
		padding:10px;
		font-size:16px;
		color:@white;
		background-color:@violet;
		border:none;
		border-radius:5px;
	}
}
.login_check{
	flex-direction:column;
	gap:15px;
	
	input{
		width:14px;
		height:14px;
		margin:0;
	}
	label{
		margin:0;
		font-size:14px;
		font-weight:normal;
		vertical-align:text-top;
		line-height:1;
	}
}


/*----------------------------------------------------*/
/*-------------------- ユーザー登録 --------------------*/
/*----------------------------------------------------*/
.form_lists{
	width:100%;

	dl{
		display:block;
		margin-bottom:20px;

		dt{
			display:block;
			width:auto;
			margin-bottom:5px;
		}
		dd{
			display:block;
		}
	}
}


/*----------------------------------------------*/
/*-------------------- home --------------------*/
/*----------------------------------------------*/
.admin_home_container{
	grid-template-columns:1fr;
	grid-gap:10px;
}
.admin_home_box{
	.title{
		font-size:16px;
	}
	ul{
		li{
			a{
				font-size:12px;
			}
		}
	}
}


/*---------------------------------------------------*/
/*-------------------- 一覧リスト --------------------*/
/*---------------------------------------------------*/
.data_count{
	flex-direction:column;
	align-items:flex-start;
	grid-gap:10px;
	margin-bottom:15px;
	font-size:12px;

	.sort{
		font-size:12px;
	}
}
.data_lists{
	border:1px solid @gray;
}
.data_row{
	position:relative;
	display:block;
	padding:8px;

	/*---------- 1行目 ----------*/
	&:first-child{
		display:flex;
		flex-wrap:wrap;
		grid-gap:0 5px;
	
		.data_column:not(:last-child){
			padding-right:0;
		}
		.data_column:last-child{
			display:none;
		}
	}
	&:last-child{
		border-bottom:none;
	}
	.data_column{
		display:flex;
		align-items:center;
		grid-gap:2px;

		&:not(:last-child){
			padding-right:30px;
		}
		&:not(:last-child):before{
			content:'●';
		}
		&:nth-child(1):before{
			color:@dd_gray;
		}
		&:nth-child(2):before{
			color:@red;
		}
		&:nth-child(3):before{
			color:@yellow;
		}
		&:nth-child(4):before{
			color:@green;
		}
		&:nth-child(5):before{
			color:@bote_sky;
		}
		&:nth-child(6):before{
			color:@blue;
		}
		&:nth-child(7):before{
			color:@violet;
		}
		&:nth-child(8):before{
			color:@pink;
		}
	}
	/*---------- optionがない場合 ----------*/
	&.no_option{
		.data_column:last-child{
			display:block;
		}
		.data_column{
			&:last-child{
				padding-right:30px;
			}
			&:before{
				content:'●';
			}
		}
	}
	/*---------- optin > toggle-btn ----------*/
	.option_mobile{
		display:block;
		position:absolute;
		top:0;
		right:0;

		/*---------- toggle > default ----------*/
		button{
			display:flex;
			justify-content:center;
			align-items:center;
			width:30px;
			height:30px;
			padding:0;
			background:none;
			border-radius:0;
			opacity:1; /* bootstrap対策 */

			span{
				display:block;
				position:absolute;
				width:15px;
				height:2px;
				background-color:@violet;
				transition:0.3s;
				animation-duration:0.3s;
				animation-iteration-count:1;
				animation-timing-function:ease-out;

				&:before{
					content:'';
					display:block;
					position:absolute;
					top:-6px;
					left:50%;
					transform:translateX(-50%) rotate(0deg);
					width:15px;
					height:2px;
					background-color:@violet;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
				}
				&:after{
					content:'';
					display:block;
					position:absolute;
					top:6px;
					left:50%;
					transform:translateX(-50%) rotate(0deg);
					width:15px;
					height:2px;
					background-color:@violet;
					animation-duration:0.3s;
					animation-iteration-count:1;
					animation-timing-function:ease-out;
				}
			}
		}
		/*---------- toggle > open ----------*/
		button.open{
			span{
				width:0;
				animation-name:toggle_open1;

				&:before{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(45deg);
					animation-name:toggle_open_before1;
				}
				&:after{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(-45deg);
					animation-name:toggle_open_after1;
				}
			}
			@keyframes toggle_open1{
				0%{
					width:15px;
				}
				50%, 100%{
					width:0;
				}
			}
			@keyframes toggle_open_before1{
				0%{
					top:-6px;
					width:15px;
					transform:translateX(-50%) rotate(0deg);
				}
				50%{
					top:0;
					transform:translateX(-50%) rotate(0deg);
				}
				100%{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(45deg);
				}
			}
			@keyframes toggle_open_after1{
				0%{
					top:6px;
					width:15px;
					transform:translateX(-50%) rotate(0deg);
				}
				50%{
					top:0;
					transform:translateX(-50%) rotate(0deg);
				}
				100%{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(-45deg);
				}
			}
		}
		/*---------- toggle > close ----------*/
		button.close{
			span{
				width:15px;
				animation-name:toggle_close1;

				&:before{
					top:-6px;
					width:15px;
					animation-name:toggle_close_before1;
				}
				&:after{
					top:6px;
					width:15px;
					animation-name:toggle_close_after1;
				}
			}
			@keyframes toggle_close1{
				0%, 50%{
					width:0;
				}
				100%{
					width:15px;
				}
			}
			@keyframes toggle_close_before1{
				0%{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(45deg);
				}
				50%{
					top:0;
					transform:translateX(-50%) rotate(0deg);
				}
				100%{
					top:-6px;
					width:15px;
					transform:translateX(-50%) rotate(0deg);
				}
			}
			@keyframes toggle_close_after1{
				0%{
					top:0;
					width:15px;
					transform:translateX(-50%) rotate(-45deg);
				}
				50%{
					top:0;
					transform:translateX(-50%) rotate(0deg);
				}
				100%{
					top:6px;
					width:15px;
					transform:translateX(-50%) rotate(0deg);
				}
			}
		}
	}
	/*---------- option > nav ----------*/
	.option_box{
		display:none;
		width:100%;
		margin-top:8px;
	}
	.option_box_toggle{
		display:grid;
		grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			grid-gap:5px;
			padding:8px 10px;
			font-size:11px;

			i{
				margin:0;
				font-size:13px;
			}
		}
	}
}
.data_column{
	display:block;
	grid-column:~'1/1';
	padding:0;
	font-size:12px;

	.option{
		flex-direction:column;
		align-items:flex-end;

		button{
			display:flex;
			justify-content:center;
			align-items:center;
			grid-gap:5px;
			width:100%;
			padding:8px;
			font-size:11px;
			text-align:center;
			
			i{
				margin:0;
				font-size:11px;
			}
		}
	}
	.status{
		padding:5px 10px;
	}
}
/*---------- checkbox ----------*/
.data_row.chkbox{
	padding:10px 10px 10px 45px;

	.data_column:first-child{
		position:absolute;
		top:50%;
		left:10px;
		transform:translateY(-50%);
		padding:0;

		&:before{
			content:none;
		}
	}
	&:first-child{
		.data_column:not(:first-child){
			white-space:break-spaces;
		}
	}
	/*---------- button > check-toggle用 ----------*/
	button.chk_btn{
		width:25px;
		height:25px;

		i{
			font-size:11px;
		}
	}
}
.data_button{
	button{
		font-size:13px;
	}
}


/*--------------------------------------------------*/
/*-------------------- CSVページ --------------------*/
/*--------------------------------------------------*/
.csv_export_area{
	display:grid;

	dl{
		display:grid;
		grid-template-columns:100px 1fr;
		
		dt{
			font-size:12px;
		}
		dd{
			font-size:12px;
		}
	}
	button{
		width:100%;
		font-size:12px;
	}
}
.csv_export_area_v2{
	grid-template-columns:1fr;
	align-items:flex-end;
	grid-gap:10px;
	
	dl{
		margin:0;

		dt{
			font-size:12px;
		}
		dd{
			font-size:12px;
		}
	}
}

.drop_area{
	grid-gap:15px;
	padding:30px 10px;

	p{
		font-size:12px;
	}
	label{
		font-size:12px;
	}
	.caution{
		font-size:12px;
	}
}


/*-------------------------------------------------*/
/*-------------------- 商品詳細 --------------------*/
/*-------------------------------------------------*/
.product_detail_area{
	padding:15px 10px;
}
.product_detail_container{
	grid-template-columns:repeat(2, 1fr);
	
	dl{
		padding:5px;
		font-size:12px;
	}
}


/*-------------------- salse --------------------*/
.salse_content{
	flex-direction:column;
	align-items:flex-start;
	gap:0;
	
	&:after{
		right:10px;
	}
}
.salse_table{
	overflow:hidden;
}
.salse_scroll{
	overflow:auto;
}


/*-------------------- @media(max-width:768px)->end --------------------*/
}
/*--------------------------------------------------------------------*/
/*------------------------------ sp-end ------------------------------*/
/*--------------------------------------------------------------------*/