/*-----------------------------------------------*/
/*-------------------- 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;
@l_violet:#b17fe5;
@d_violet:#58278c;
@sky:#5bc0de;
@brown:#926834;
@pink:#fdc0c0;
@gold:#b29b49;
@bote_sky:#2fb5be;
@d_bote_sky:#1f777c;



/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
/* header{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	z-index:150;
} */
.shop_head_area{
	position:relative;
	max-width:1000px;
	height:70px;
	margin:0 auto;
	background-color:@l_gray;
}
.shop_head_container{
	/* display:grid;
	grid-template-columns:repeat(5, 1fr); */
	display:flex;
	justify-content:flex-end;
	align-items:center;
	height:100%;
}
.shop_head_column{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
}
.shop_head_box{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	padding:0 10px;
	line-height:1;
	color:@violet;
	cursor:pointer;
	transition:0.3s;
	
	i{
		font-size:24px;
	}
	span{
		font-size:14px;
	}
	&:hover{
		color:@l_violet;
		/* opacity:0.6; */
	}
}
.shop_head_nav{
	display:grid;
	align-items:flex-end;
	position:fixed;
	top:0;
	right:0;
	bottom:70px;
	left:0;
	max-width:1000px;
	margin:0 auto;
	background:rgba(0, 0, 0, 0.6);
	overflow:auto;
	opacity:0;
	visibility:hidden;
	transition:0.4s;
	z-index:90;

	&.active{
		opacity:1;
		visibility:visible;

		.shop_nav_group{
			transform:translateY(0);
		}
	}
}
.shop_nav_group{
	position:relative;
	transform:translateY(100%);
	padding:20px;
	background-color:@l_gray;
	transition:0.4s;
	z-index:2;

	.headline{
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin-bottom:10px;

		.title{
			font-size:20px;
			font-weight:bold;
		}
		.mypage{
			display:flex;
			align-items:center;
			gap:5px;
			
			.img{
				font-size:16px;
			}
			.name{
				font-size:16px;
			}
		}
	}
	.link{
		display:grid;
		gap:5px;

		a{
			display:flex;
			align-items:center;
			gap:5px;
			position:relative;
			padding:15px 20px;
			font-size:14px;
			background-color:@white;
			border:1px solid @gray;
			border-radius:5px;
			transition:0.3s;
	
			i{
				font-size:16px;
			}
			&:before{
				content:'';
				position:absolute;
				top:50%;
				right:20px;
				transform:translateY(-50%) rotate(45deg);
				width:10px;
				height:10px;
				border-top:2px solid @d_gray;
				border-right:2px solid @d_gray;
			}
			&:hover{
				background-color:@gray;
			}
		}
	}
}


/*----------------------------------------------*/
/*-------------------- shop --------------------*/
/*----------------------------------------------*/
.shop_container{
	max-width:1000px;
	height:100%;
	margin:0 auto;
	background-color:@white;
}
.shop_contents_area{
	padding-bottom:70px;
	background-color:@white;

	&.fixed{
		padding-bottom:140px;
	}
}

/*---------- contents->box ----------*/
.shop_contents_box{
	margin-top:20px;
	background-color:@white;

	&.mgn{
		margin:0;
	}
}

/*---------- contents->head ----------*/
.shop_contents_head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	padding:20px;
	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%;
		}
	}
}

/*---------- contents->body ----------*/
.shop_contents_body{
	position:relative;
	padding:20px;
}

.shop_lists_area{
	display:grid;
	gap:20px;
}
.shop_lists_box{
	/* padding:20px;
	background-color:@white;
	border-radius:20px; */

	h2{
		margin-bottom:5px;
		font-size:18px;
	}
}
.shop_lists_container{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-gap:20px;

	.box{
		a{
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			grid-gap:10px;
			padding:20px 10px;
			font-size:16px;
			text-align:center;
			color:@white;
			background-color:@violet;
			border-radius:10px;
			transition:0.3s;
	
			i{
				font-size:30px;
			}
		}
		a:hover{
			background-color:@d_violet;
		}
	}
}

/*---------- contents->fixed ----------*/
.shop_fixed{
	display:grid;
	grid-template-columns:1fr 60px;
	align-items:center;
	position:fixed;
	right:0;
	left:0;
	bottom:0;
	max-width:1000px;
	padding:0 20px;
	height:70px;
	margin:0 auto;
	background-color:@white;
	border-top:1px solid @gray;
	/* border-top-right-radius:20px;
	border-top-left-radius:20px;
	box-shadow:0px -3px 3px 0px rgba(0, 0, 0, 0.15); */
	box-sizing:border-box;
	transition:0.3s;
	z-index:100;
}
.shop_fixed_option{
	display:flex;
	align-items:center;
	grid-gap:20px;
	height:100%;

	.box{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:5px;
		width:60px;
		font-size:14px;
		line-height:1;
		color:@violet;
		cursor:pointer;
		transition:0.3s;
		
		i{
			font-size:24px;
		}
		&:hover{
			color:@l_violet;
		}
	}
}
.shop_fixed_menu{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:9px;
	font-size:14px;
	line-height:1;
	color:@violet;
	cursor:pointer;
	transition:0.3s;
	
	i{
		font-size:24px;
	}
	&:hover{
		color:@l_violet;
	}
}
.shop_hamburger{
	position:relative;
	top:0;
	width:30px;
	height:20px;
	cursor:pointer;
	transition:0.3s;
	
	span{
		position:absolute;
		left:0;
		width:100%;
		height:2px;
		background-color:@violet;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:linear;

		&.top{
			top:0;
			transform:rotate(0deg);
		}
		&.middle{
			top:calc(~'50% - 1px');
			transform:rotate(0deg);
		}
		&.bottom{
			top:calc(~'100% - 2px');
			transform:rotate(0deg);
		}
	}
	&.active{
		span{
			&.top{
				top:50%;
				transform:rotate(30deg);
			}
			&.middle{
				opacity:0;
			}
			&.bottom{
				top:50%;
				transform:rotate(-30deg);
			}
		}
	}
}
/*---------- hamburger-animation ----------*/
@keyframes nav_open_top{
	0%{
		top:0;
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(30deg);
	}
}
@keyframes nav_open_middle{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
}
@keyframes nav_open_bottom{
	0%{
		top:calc(~'100% - 2px');
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(-30deg);
	}
}
@keyframes nav_close_top{
	0%{
		top:50%;
		transform:rotate(30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:0;
		transform:rotate(0deg);
	}
}
@keyframes nav_close_middle{
	0%{
		opacity:0;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes nav_close_bottom{
	0%{
		top:50%;
		transform:rotate(-30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:calc(~'100% - 2px');
		transform:rotate(0deg);
	}
}


.shop_data_lists{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:20px;
}
.shop_data_box{
	position:relative;
	padding:15px 20px;
	background-color:@l_gray;
	border:1px solid @gray;
	border-radius:10px;
	transition:0.3s;

	.name{
		margin-bottom:5px;
		font-size:20px;
		font-weight:bold;
	}
	.date{
		display:grid;
		gap:2px;

		dl{
			display:grid;
			grid-template-columns:100px 1fr;
			margin:0;

			dt{
				display:grid;
				grid-template-columns:18px 1fr;
				align-items:center;
				gap:2px;
				font-size:16px;

				i{
					font-size:16px;
					text-align:center;
					color:@violet;
				}
			}
			dd{
				font-size:14px;
			}
		}
	}
	a{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	&:before{
		content:'';
		position:absolute;
		top:50%;
		right:20px;
		transform:translateY(-50%) rotate(45deg);
		width:10px;
		height:10px;
		border-top:2px solid @d_gray;
		border-right:2px solid @d_gray;
		transition:0.3s;
	}
	&:hover{
		background-color:@gray;

		&:before{
			right:15px;
		}
	}
}


/*-----------------------------------------------------------*/
/*-------------------- shop > attendance --------------------*/
/*-----------------------------------------------------------*/
.attendance_btn{
	button{
		width:100%;
		margin-bottom:20px;
		padding:20px;
		font-size:18px;
		color:@white;
		background-color:@violet;

		&:disabled{
			background-color:@dd_gray;
		}
	}
}
.attendance_container{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	border:1px solid @gray;

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

		&:last-child{
			border:none;
		}
		dt{
			display:flex;
			align-items:center;
			gap:5px;
			font-size:16px;
		}
		dd{
			font-size:16px;
		}
	}
}


/*-----------------------------------------------------------*/
/*-------------------- shop > table_detail ------------------*/
/*-----------------------------------------------------------*/
.content_block{
	p{
		font-size:17px;
	}
}

.order_user{
	padding:20px;

	p{
		margin-bottom:5px;
		font-size:16px;
		font-weight:bold;
	}
	ul{
		display:flex;
		flex-wrap:wrap;
		gap:5px 10px;
		
		li{
			padding:5px 10px;
			font-size:16px;
			background-color:@l_gray;
			border:1px solid @gray;
			border-radius:5px;
		}
	}
}
.order_container{
	display:grid;
	border-top:1px solid @gray;
}
.order_box{
	display:grid;
	grid-template-columns:30px 1fr;
	align-items:center;
	gap:10px;
	padding:20px;
	border-bottom:1px solid @gray;
	
	&:nth-child(even){
		background-color:@l_gray;
	}
	> button{
		display:flex;
		justify-content:center;
		align-items:center;
		grid-column:1;
		grid-row:~'1/3';
		width:30px;
		height:30px;
		font-size:16px;
		color:@white;
		background-color:@dd_gray;
		border-radius:50%;
	}
}
.order_head{
	display:flex;
	align-items:center;
	gap:10px;
	grid-column:2;
	grid-row:1;

	input{
		width:100%;
		padding:10px;
		color:@black !important;
		background-color:@white !important;
		border:1px solid @gray;
		border-radius:5px;
	}
	select{
		width:100%;
		padding:10px;
		color:@black !important;
		background-color:@white !important;
		border:1px solid @gray;
		border-radius:5px;

		&.option{
			width:50%;
		}
	}
}
.order_foot{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	grid-column:2;
	grid-row:2;
}
.order_price{
	display:flex;
	align-items:stretch;
	width:100%;
	/* max-width:calc(~'50% - 7px'); */
	font-size:16px;
	border:1px solid @gray;
	border-radius:5px;
	overflow:hidden;
	
	span{
		padding:10px;
		line-height:1;
		background-color:@white;
		border-right:1px solid @gray;
	}
	input{
		width:100%;
		padding:10px;
		font-size:16px;
		color:@black !important;
		background-color:@white !important;
		border:none;
	}
}
.order_qty{
	display:flex;
	align-items:center;
	
	.qty{
		width:50px;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		background:none;
		border:none;
	}
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		font-size:16px;
		color:@white;
		border-radius:50%;

		&.red{
			background-color:@red;
		}
		&.green{
			background-color:@green;
		}
	}
}
.table_fixed{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	position:fixed;
	bottom:70px;
	right:0;
	left:0;
	max-width:1000px;
	height:70px;
	margin:0 auto;
	padding:0 20px;
	background-color:@l_gray;
	border-top:1px solid @gray;
	box-sizing:border-box;

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

		dt{
			font-size:18px;
			font-weight:bold;
		}
		dd{
			font-size:18px;
			font-weight:bold;
			color:@red;
		}
	}
}


.order_contents{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:center;
	gap:15px;

	.order_list{
		display:flex;
		align-items:stretch;
		width: 100%;

		> button{
			border-radius:8px 0px 0px 8px;
			background:#a34e4e;
			color:@white;
			font-size:15px;
		}
		.order_list_detail{
			background:#fafafa;
			padding:10px;
			border:1px solid #dddddd;
			flex:1;
			border-radius:0px 5px 5px 0px;
		}
		.order{
			flex:1;
			display:flex;
			flex-direction:column;
			gap:10px;
			flex-wrap: wrap;

			select, input, button{
				border-radius:5px;
				font-size:15px;
			}
			select:disabled, input:disabled{
				background-color:@white;
				color:@black;
			}

			.order_item{
				display:grid;
				grid-template-columns:1fr;
				gap:10px;
			}

			.c_option{
				display: flex;
				gap: 15px;
				justify-content: flex-end;
			}

			.user_select{
				background:#FFF;
			}
			.user_select.active{
				background:#FFF;
			}
			.select_user.bg_gray{
				background:@gray;
			}
			
		}
		button, select, input{
			padding:10px;
		}

		select, input{
			border:1px solid @gray;
		}
	}
}
.dl_hidden{
	display:none;
}

.input_icon{
	display:grid;
	grid-template-columns:40px 1fr;

	.icon_area{
		background: #6755af;
		border-radius: 5px 0px 0px 5px;

		i{
			display:flex;
			justify-content: center;
			height: 100%;
			align-items: center;
			color:@white;
			font-size: 19px;
		}
	}

	input{
		border-radius:0px 5px 5px 0px !important;
		width:100%;
	}
}

@keyframes flashbackground{
	0%{
		background-color:transparent;
	}
	50%{
		background-color:#ffee80;
	}
	100%{
		background-color:transparent;
	}
}

.flash-bg{
	animation:flashbackground 0.5s ease-out forwards;
}

/*カウンター*/
.item_counter{
	display:flex;
	align-items:center;
	
	.qty{
		width:50px;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		background:none;
		border:none;
	}
	button{
		display:flex;
		justify-content:center;
		align-items:center;
		width:30px;
		height:30px;
		font-size:16px;
		color:@white;
		border-radius:50%;

		&.red{
			background-color:@red;
		}
		&.green{
			background-color:@green;
		}
	}
}

.profile_form{
	display:grid;
	gap:20px;

	dl{
		margin:0;

		dt{
			font-weight:bold;
		}
		dd{
			input{
				width:100%;
				padding:10px;
				border:1px solid @gray;
			}
			label{
				display:block;
				position:relative;
				width:100px;
				height:100px;
				cursor:pointer;
				overflow:hidden;

				img{
					width:100%;
					height:100%;
					object-fit:cover;
				}
				input{
					display:none;
				}
				&:before{
					content:'';
					position:absolute;
					right:0;
					bottom:0;
					width:30px;
					height:30px;
					background:center / contain no-repeat url('../images/toggle_icon.svg');
				}
			}
		}
	}
}